/* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION FONT FAMILIES VVV VVV VVV VVV VVV VVV VVV */ /* .thin-text { font-family: var(--font_1); font-weight: 100; } .light-text { font-family: var(--font_1); font-weight: 300; } .regular-text/book-text { font-family: var(--font_1); font-weight: 400; } .medium-text { font-family: var(--font_1); font-weight: 500; } .bold-text { font-family: var(--font_1); font-weight: 700; } .ultra-text { font-family: var(--font_1); font-weight: 800; } .black-text { font-family: var(--font_1); font-weight: 900; } */ /* --> FONT FAMILIES > AVERTA PE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @font-face { font-family: 'AvertaPE'; src: url('../FONT FAMILIES/AvertaPE/AvertaPE-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'AvertaPE'; src: url('../fonts/AvertaPE/AvertaPE-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'AvertaPE'; src: url('../fonts/AvertaPE/AvertaPE-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* --> FONT FAMILIES > GOTHAM GREEK [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-thin-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-thin-webfont.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-light-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-light-webfont.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-book-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-book-webfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-medium-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-medium-webfont.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-bold-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-ultra-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-ultra-webfont.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-black-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-black-webfont.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } /* --> FONT FAMILIES > PROXIMA NOVA [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @font-face { font-family: "Proxima Nova"; src: url("../fonts/Proxima-Nova/ProximaNova-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../fonts/Proxima-Nova/ProximaNova-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../fonts/Proxima-Nova/ProximaNova-Semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../fonts/Proxima-Nova/ProximaNova-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* --> FONT FAMILIES > PROXIMA NOVA CONDENSED [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @font-face { font-family: "Proxima Nova Condensed"; src: url("../fonts/Proxima-Nova-Condensed/ProximaNovaCondensed-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova Condensed"; src: url("../fonts/Proxima-Nova-Condensed/ProximaNovaCondensed-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION COMMON VVV VVV VVV VVV VVV VVV VVV */ /* --> COMMON > VARIABLES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> COMMON > VARIABLES > FONTS [2] =========================================================================================================== */ :root { --font_1: 'Gotham Greek', Arial, sans-serif; --font_2: 'Proxima Nova', Arial, sans-serif; --font_3: 'AvertaPE', Arial, sans-serif; --font_4: 'Proxima Nova Condensed', Arial, sans-serif; } /* --> COMMON > VARIABLES > DIMENSIONS [2] =========================================================================================================== */ body { --minicart-width: 535px; --maxContainerWidth: 1650px; --maxContainerWidth_wider: 1830px; --headerHeight: 90px; --topBarHeight: 40px; --totalHeaderHeight: calc(var(--headerHeight) + var(--topBarHeight)); --defaultPadding: 15px; --calculatedPadding: max(var(--defaultPadding), calc((100vw - var(--maxContainerWidth)) / 2)); --calculatedPadding_wider: max(var(--defaultPadding), calc((100vw - var(--maxContainerWidth_wider)) / 2)); --menuPadding: 60px; --headerItemsDistance: 43px; } /* --> COMMON > VARIABLES > COLORS [2] =========================================================================================================== */ html { --accent_1: #000; --accent_2: #DE9700; /* --accent_3: #0561D1; */ --accent_3: #FFAE00; --accent_4: #091C38; --accent_1_amea: #6D5117; } input[type="checkbox"], input[type="radio"] { accent-color: #DE9800; } /* --> COMMON > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .breadcrumb~.row { display: flex; gap: 40px max(20px, 3vw); } .breadcrumb~.row>#column-right { min-width: 250px; padding: 0px !important; } @media(max-width: 1100px) { .breadcrumb~.row>#column-right { display: none !important; } } .breadcrumb~.row>#column-right, .breadcrumb~.row>#column-right * { border-radius: 0px !important; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; -ms-border-radius: 0px !important; -o-border-radius: 0px !important; } /* --> COMMON > LAYOUT > SIDEBARS [2] =========================================================================================================== */ html[class*="account"] .breadcrumb~.row aside .list-group a { font-size: 15px !important; /* font-weight: 700; */ font-family: var(--font_1); text-shadow: none; transition: all .12s; padding: 12px 15px } html[class*="account"] .breadcrumb~.row aside .list-group a:hover { background: var(--accent_3); color: white; } /* --> COMMON > MOBILE/DESKTOP TOGGLING [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 768px) { .for_desktop { display: none !important; } } @media(min-width: 769px) { .for_mobile { display: none !important; } } /* --> COMMON > LANGUAGE TOGGLING [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ html[lang*="en"] .for_greek { display: none !important; } html:not([lang*="en"]) .for_english { display: none !important; } /* --> COMMON > SCROLLBARS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #menu::-webkit-scrollbar, #menu *::-webkit-scrollbar { width: 7px; height: 7px; } #menu::-webkit-scrollbar-thumb, #menu *::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; } #menu::-webkit-scrollbar-track, #menu *::-webkit-scrollbar-track { background: transparent; } /* For Firefox */ #menu, #menu * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .3) transparent; } /* .color-swatch { border: 2px solid transparent; border-radius: 6px; transition: all 0.2s ease; } */ .color-swatch.active-color { border: 2px solid #000; box-shadow: 0 0 0 2px rgba(0,0,0,0.15); } .color-wraper .color-swatch, .colors .color-swatch { width: 100px; height: 100px; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; } .color-swatch.no-quantity-color { opacity: 0.25; } .color-wraper .no-quantity-color { opacity: 0.25; } #product .color-wraper>a { border: 2px solid #ddd !important; transition: all .12s; } #product .color-wraper>a:hover, #product .color-wraper>a.active { border-color: black !important; } #product .color-wraper { display: flex; gap: 10px; justify-content: flex-start; width: fit-content !important; max-width: 100% !important; flex-wrap: wrap; } /* --- Size pills (sibling navigation) --- */ .form-group.sizes { margin-bottom: 8px; margin-top: 4px; } .form-group.sizes .control-label { margin-bottom: 4px; font-weight: 600; } .size-wrapper { display: flex; flex-wrap: wrap; gap: 6px; } .size-pill { display: inline-block; padding: 6px 14px; border: 1px solid #ccc; border-radius: 20px; background: #fff; color: #333; font-size: 13px; line-height: 1.2; text-decoration: none; transition: all .15s ease; white-space: nowrap; } .size-pill:hover { border-color: #000; color: #000; text-decoration: none; } .size-pill.active, .size-pill.active-size { background: #000; color: #fff; border-color: #000; font-weight: 600; } .size-pill.no-quantity-size { opacity: .4; pointer-events: none; text-decoration: line-through; } /* Compact pill variant for product cards in listings */ .product-card-bot .sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .product-card-bot .size-pill { padding: 3px 9px; font-size: 11px; border-radius: 12px; } .product-thumb .button-group .colors { margin-bottom: 10px; } .product-thumb .button-group .colors a { /* width: 15px !important; height: 15px !important; */ padding: 0px !important; /* border-radius: 100%; */ overflow: hidden; } .product-thumb .button-group .colors a.active-color { border-color: black !important; } .product-thumb .button-group .colors a:nth-child(n+6) { display: none; } .product-thumb .button-group .colors a>div { /* width: 100% !important; */ /* height: 100% !important; */ background-position: center; width: 40px !important; /* aspect-ratio: 2/13 !important; */ background-repeat: no-repeat !important; background-position: center center !important; height: 60px !important; } /* --> COMMON > NOTIFICATIONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> ADD TO CART ALERT [2] =========================================================================================================== */ .alert-success.tk-add-cart .add-to-cart-inner { box-shadow: none !important; box-shadow: 0 10px 50px rgba(0, 0, 0, .3) !important; border-radius: 10px !important; overflow: hidden } .alert-success.tk-add-cart .tk-cart-header { font-weight: bold; padding-block: 20px 10px; font-family: var(--font_3) } .alert-success.tk-add-cart .tk-cart-header .fa.fa-check { display: none !important; } .alert-success.tk-add-cart .tk-cart-body { line-height: 1.2; gap: 15px; padding: 15px 20px 30px 10px !important; } .alert-success.tk-add-cart .tk-cart-body>* { width: fit-content !important; } .alert-success.tk-add-cart .tk-cart-body .product-price span { font-weight: 900 !important; font-size: 23px; } .tk-cart-body .product-price { display: flex; flex-direction: column-reverse; } .tk-cart-body .special { font-size: 14px !important; color: #aaa !important; font-weight: normal !important; text-decoration: line-through !important; } .alert-success.tk-add-cart .tk-cart-footer a { color: white !important; transition: all .2s; } .alert-success.tk-add-cart .tk-cart-footer a:hover { background: var(--accent_2) !important; } .alert-success.tk-add-cart .tk-cart-footer a:first-child { background: var(--accent_1) } .alert-success.tk-add-cart .tk-cart-footer a:last-child { background: var(--accent_3) } /* --> PRODUCT PAGE > ALERT SUCCESS > CONTAINER [2] =========================================================================================================== */ .alert-success:not(.tk-add-cart) { border: 3px solid var(--accent_3) !important; border-radius: 7px !important; /* font-family: var(--font_3); */ position: fixed; z-index: 99999999999 !important; top: 50% !important; left: 50% !important; /*transform: translate(-50%, -50%) !important; */ text-align: center !important; /*box-shadow: 0 10px 40px 0px rgba(0, 0, 0, 0.3), 0 0px 2000px 0px rgb(0, 0, 0) !important; */ /*border: 1px solid black !important; */ border-radius: 0px !important; width: 420px !important; /*max-width: 100% !important; */ max-width: calc(100vw - 14px); background: white !important; padding: 25px; margin-bottom: 0px !important; margin-right: 0px; margin-left: 0px; color: black; /*box-shadow: -10px -10px black, 10px 10px var(--accent1), 0 10px 40px 0px rgba(0, 0, 0, 0.3), 0 0px 2000px 0px rgb(0, 0, 0) !important; */ box-shadow: 0 10px 100px -10px rgba(0, 0, 0, 0.5); opacity: 0; transform: translate(-50%, calc(-50% + 50px)); -webkit-animation-name: gradual_appearance; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; animation-name: gradual_appearance; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; /*-webkit-animation-delay: 0.4s; */ /*animation-delay: 0.4s; */ font-size: 16px !important; /*border: 1px solid #888 !important; */ transition: all .4s !important; -webkit-transition: all .4s !important; -moz-transition: all .4s !important; -ms-transition: all .4s !important; -o-transition: all .4s !important; -webkit-border-radius: 7px !important; -moz-border-radius: 7px !important; -ms-border-radius: 7px !important; -o-border-radius: 7px !important; } /* @media(max-width: 1024px) { .alert-success { top: 10px !important; transform: translateX(-50%) !important; } } */ .alert-success.inactive { opacity: 0 !important; visibility: hidden !important; transform: translateY(20px) !important; -webkit-transform: translateY(20px) !important; -moz-transform: translateY(20px) !important; -ms-transform: translateY(20px) !important; -o-transform: translateY(20px) !important; } @-webkit-keyframes gradual_appearance { from { opacity: 0; transform: translate(-50%, calc(-50% + 50px)); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes gradual_appearance { from { opacity: 0; transform: translate(-50%, calc(-50% + 50px)); } to { opacity: 1; transform: translate(-50%, -50%); } } /* --> PRODUCT PAGE > ALERT SUCCESS > CLOSE BUTTON [2] =========================================================================================================== */ .alert-success button.close, .alert-danger button.close { z-index: 99999; position: absolute; top: -5px; right: 0px; opacity: 1; color: #a40000; font-size: 30px; transition: all 0.12s; } .alert-success button.close:hover, .alert-danger button.close:hover { color: red !important; } /* --> PRODUCT PAGE > ALERT SUCCESS > ALL LINKS [2] =========================================================================================================== */ /* .alert-success a { display: block; margin: 10px 0px !important; padding: 14px; background: var(--accent2); color: white !important; text-transform: uppercase; font-weight: bold !important; transition: all 0.4s; } */ .alert-success a { font-size: 16px !important; /* text-decoration: underline !important; */ color: var(--accent_3) !important; font-weight: 500; /* font-family: var(--font_3) */ } /* .alert-success a:hover { background: var(--accent1) !important; color: #333 !important; } */ /* --> COMMON > ACCESSIBILITY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* --> COMMON > CONTAINERS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #content { float: none; padding-inline: 0px !important; width: 100%; } html { /* width: 100vw !important; max-width: 100vw !important; */ overflow-x: hidden !Important; } .row { margin-right: 0px; margin-left: 0px; padding-right: 0px; padding-left: 0px; } .container { margin-right: 0px; margin-left: 0px; padding-right: 0px; padding-left: 0px; width: 100%; } .row:before, .row:after, .container:before, .container:after { display: none; } body { overflow: hidden; } body>header, body>footer, body>.container { padding-inline: var(--calculatedPadding) !important } /* .container, .module_product_tabs { width: 1650px !important; max-width: 100% !important; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; } */ /* --> COMMON > LINKS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .unclickable { pointer-events: none; } a { transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } a:hover { color: var(--accent_3); } /* --> COMMON > FONTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ body { font-family: var(--font_1); font-size: 14px; color: #000; } body, footer .footer-column label { line-height: 1.5; } * { outline: none !important; } *:not(i) { text-decoration: none !important; } /* --> COMMON > ACCEPT TERMS WRAPPER & CHECKBOX [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .buttons .pull-right { float: left !important } */ .buttons a.agree+input[name="agree"] { float: left; margin-left: 0px; margin-right: 10px; margin-top: 2px; } /* --> COMMON > BUTTONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .common_button, #button-cart, .contact-submit-btn, #content_search #button-search-altered, #collapse-checkout-confirm .buttons * { height: 50px; display: flex; width: fit-content; border-radius: 8px; color: white; padding-inline: 30px; background: var(--accent_3); align-items: center; font-size: 15px; /* font-weight: bold; */ transition: all .25s; justify-content: center !important; border: none !important; } .common_button:hover, #button-cart:hover, .contact-submit-btn:hover, #content_search #button-search-altered:hover, #collapse-checkout-confirm .buttons *:hover { background: var(--accent_2) !important; color: white !important; } header~.container .btn:not(#button-cart):not(#compare-total):not(.compare_button):not(#grid-view):not(#list-view):not([data-toggle="tooltip"]) { height: 50px; display: flex; width: fit-content; border-radius: 8px; color: white; padding-inline: 38px; background: var(--accent_3); align-items: center; font-size: 16px; font-weight: bold; transition: all .25s; border: none; justify-content: center !important; text-transform: uppercase; } header~.container .btn:not(#button-cart):not(#compare-total):not(.compare_button):not(#grid-view):not(#list-view):not([data-toggle="tooltip"]):hover { background: var(--accent_2) !important; color: white !important; } header~.container .btn-primary.focus, header~.container .btn-primary:focus { color: inherit !important; background-color: inherit !important; border-color: inhterit !important; } /* --> COMMON > BUTTONS > WISHLIST [2] =========================================================================================================== */ .product-thumb .image { position: relative; } #product-product .wishlist_button, #product-product .wishlist_button img, .product-thumb button.wishlist, .product-thumb button.wishlist img { transition: all .2s; } #product-product .wishlist_button, .product-thumb button.wishlist { /* width: 35px; */ /* height: 35px; */ width: 22px !important; height: 22px !important; box-shadow: None; border: none; position: absolute; top: 17px; right: 17px; z-index: 4; display: flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; padding: 0px !important; } #product-product .wishlist_button { top: 25px; right: 25px; } .product-thumb .image:before { content: ""; width: 40px; height: 40px; position: absolute; border-radius: 100%; background: white; top: 8px; right: 9px; z-index: 4; } #product-product .wishlist_button img, .product-thumb button.wishlist img { width: 100% !important; height: 100% !important; -webkit-filter: brightness(0); filter: brightness(0); /* transform: translateY(1px) !important; */ /* transition: all .2s; */ } #product-product .wishlist_button.wishlisted, .product-thumb button.wishlist.wishlisted { background: url("/image/catalog/cut_assets/generic/icons/red_heart.svg"); background-repeat: no-repeat; background-size: 100% 100%; } #product-product .wishlist_button.wishlisted img, .product-thumb button.wishlist.wishlisted img { display: none } /* #product-product .wishlist_button:hover img, #product-product .wishlist_button.wishlisted img, .product-thumb button.wishlist:hover img, .product-thumb button.wishlist.wishlisted img { filter: brightness(100); } */ /* --> COMMON > BUTTONS > COMPARE LIST [2] =========================================================================================================== */ #product-product button.compare_button { left: 10px } #product-product button.compare_button, .product-thumb button.compare { box-shadow: none !important; border: none !important; top: 12px; left: 10px; z-index: 4; position: absolute !important; display: flex; gap: 6px; align-items: center; line-height: 1; background: none; font-family: var(--font_2); padding: 0px !important; color: black !important; } /* #product-product button.compare_button { top: 25px; left: 25px; } */ #product-product button.compare_button { right: 25px !important; top: 25px !important; left: unset !important; } #product-product button.compare_button div, .product-thumb button.compare div { width: 22px; height: 22px; display: block; background: transparent; background-image: url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EE78737F1-08BC-48B9-BCFA-75C6A6810B7E%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='PRODUCT-LIST-_-FILTERS-OPEN' transform='translate(-987.000000, -787.000000)' fill='%23FFFFFF' stroke='%23CDCDCD'%3E%3Cg id='Group-13' transform='translate(0.000000, 460.000000)'%3E%3Cg id='Group-4' transform='translate(987.000000, 168.000000)'%3E%3Cg id='Group-8' transform='translate(0.000000, 39.000000)'%3E%3Cg id='Rectangle' transform='translate(0.000000, 120.000000)'%3E%3Crect x='0.5' y='0.5' width='17' height='17' rx='2'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 100%; } #product-product button.compare_button span, .product-thumb button.compare span { font-size: 14px; display: inline-block; height: 11px; font-weight: 500; text-transform: none !important; } #product-product button.compare_button.compared div, .product-thumb button.compare.compared div { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D .cls-2 %7B fill: %2300a1ad; %7D %3C/style%3E%3C/defs%3E%3C!-- Generator: Adobe Illustrator 28.7.8, SVG Export Plug-In . SVG Version: 1.2.0 Build 200) --%3E%3Cg%3E%3Cg id='Layer_1'%3E%3Cg id='Page-1'%3E%3Cg id='PRODUCT-LIST'%3E%3Cg id='tick-2'%3E%3Crect id='Rectangle' class='cls-2' width='18' height='18' rx='2' ry='2'/%3E%3Cpath id='Path' class='cls-1' d='M6.1,13.5l-2.4-2.6c-.6-.7-.6-1.8,0-2.5h0c.5-.6,1.4-.7,2,0,0,0,0,0,0,0l1.3,1.5,5.1-5.4c.6-.6,1.5-.6,2.1,0h0c.6.6.6,1.6,0,2.2l-6.5,6.8c-.4.5-1.2.5-1.6,0h0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* --> COMMON > PAGINATION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .pagination_container { margin-left: auto !important; margin: 0px; display: flex; align-items: center; } .pagination_container .pagination { display: flex; gap: 5px; } .pagination_container .pagination>li>a, .pagination_container .pagination>li>span { border: none; font-size: 16px; border-radius: 3px !important; padding: 0px !important; width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; background-color: transparent } .pagination_container .pagination>li>a:hover { background: var(--accent_3) !important; color: white !important; } .pagination_container .pagination>li.active>span { background: black !important; font-weight: bold } /* --> COMMON > TITLES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> COMMON > TITLES > PAGE TITLES [2] =========================================================================================================== */ #content h1, #content h2 { font-weight: bold } #content h2 { color: var(--accent_3); } /* --> COMMON > TITLES > PRE-TITLE [2] =========================================================================================================== */ .section_title_sec, .pre_title { font-size: 14px; text-transform: uppercase; color: black; font-weight: 500; line-height: normal; margin-bottom: 5px; text-align: left; letter-spacing: 2px; } /* --> COMMON > TITLES > AFTER-TITLE [2] =========================================================================================================== */ .section_title .after_title { color: var(--accent_3); font-size: 25px; line-height: 1.4; text-align: left; font-weight: 700; margin-top: 15px } /* --> COMMON > TITLES > MAIN [2] =========================================================================================================== */ .section_title, .main_title, .latest-posts .blog-headings .headingmain, .home_banner_blog .column-content-2 .html_section h2, #product-category .cat-title, #blog-category .headingmain, #product-product #content>.row.text_n_banner .left_side .title { color: #282727; font-size: 30px; line-height: 1.2; text-align: left; width: 100%; display: block; font-weight: 700 !important; margin-top: 0px !important; border: none !important; } /* --> COMMON > TITLES > MAIN > COMPACT [3] ------------------------------------------------------------- */ #information-contact #content>h3, .form-horizontal legend { color: black; font-size: 30px; line-height: normal; text-align: left; width: 100%; display: block; font-weight: 700; margin-top: 35px !important; border: none !important; } /* --> COMMON > BREADCRUMBS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .breadcrumb { margin-bottom: 58px; background: none; } .breadcrumb, .breadcrumb a { white-space: normal; } .breadcrumb li { display: inline; } .breadcrumb * { text-shadow: none !important; font-size: 12px; color: #575757; } .breadcrumb>li { padding: 0 10px; } .breadcrumb { padding: 8px 0px !important; margin-bottom: 20px; list-style: none; border-radius: 4px; text-align: center; } .breadcrumb li:first-child { padding-left: 0 !important; } .breadcrumb li:last-child a { /* font-weight: 600 !important; */ } .breadcrumb>li:not(:last-child)::after { content: ''; display: block; position: absolute; top: 1px; right: -2px; width: 10px; height: 10px; border-right: 1px solid #444; } /* --> COMMON > PAGINATION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #mfilter-content-container>div>.row:last-child { margin-top: 30px !important; } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { background-color: #666; border-color: #666; } .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover, .pagination>li>a, .pagination>li>span { color: #000; } /* --> COMMON > ITEMS & MENUS AROUND PAGE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .mfilter-box-83 .mfilter-free-button, body>.cc-revoke { transition: all .3s ease; } html:is(.menu_revealed, .cart_enabled, .search_enabled) .mfilter-box-83 .mfilter-free-button { transform: translateX(-100%); } html:is(.menu_revealed, .cart_enabled, .search_enabled) body>.cc-revoke { transform: translateY(100%) !important; } /* --> COMMON > MODULES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> COMMON > MODULES > PRODUCT TABS [2] =========================================================================================================== */ .module_product_tabs .tab-content .section_title { display: none !important; } /* --> COMMON > MODULES > PRODUCT TABS > ARROWS [3] ------------------------------------------------------------- */ .module_product_tabs { position: relative; } .module_product_tabs .carousel { position: static !important; } /* --> COMMON > MODULES > ALL CAROUSELS [2] =========================================================================================================== */ /* --> COMMON > MODULES > ALL CAROUSELS > HIDE DEFAULT TITLE [3] ------------------------------------------------------------- */ .carousel>h3 { display: none !important; } /* --> COMMON > MODULES > ALL CAROUSELS > MAKE SPACE FOR HOVER SHADOWS [3] ------------------------------------------------------------- */ /* .swiper-wrapper { margin: 10px; transform: translateX(-10px) translateY(10px); } */ /* --> COMMON > MODULES > ALL CAROUSELS > PAGINATION [3] ------------------------------------------------------------- */ .carousel .swiper-pagination { display: none; } /* --> COMMON > MODULES > ALL CAROUSELS > PAGER ARROWS [3] ------------------------------------------------------------- */ .carousel .swiper-pager { position: absolute; width: 60px !important; /* right: var(--default_padding); */ top: 24px !important; right: 0px !important; height: 27px; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; } .carousel .swiper-pager>div { padding: 5px !important; height: 27px; width: 27px; border-radius: 4px; transition: all .2s; display: flex; align-items: center; justify-content: center; line-height: 1; opacity: 1 !important; transform: none !important; top: 0px; margin-top: 0px; } .carousel .swiper-pager>div:hover { background: var(--accent_3); } .carousel .swiper-pager>div:hover:before { color: white !important } .carousel.swiper-viewport .swiper-button-next.swiper-button-disabled, .carousel.swiper-viewport .swiper-button-prev.swiper-button-disabled { opacity: 0.2 !important; cursor: auto !important; pointer-events: none !important; /* visibility: hidden !important; */ } .carousel .swiper-pager>div::before { line-height: 1; height: 20px; width: 20px; transition: all 0.12s; /* font-size: 0px !important; */ display: flex; align-items: center; justify-content: center; color: black !important; font-size: 33px !important; } .carousel .swiper-pager>div:first-child::before { content: "\f105" !important; } .carousel .swiper-pager>div:last-child::before { content: "\f104" !important; } .carousel .swiper-button-next { right: 0px !important; } .carousel .swiper-button-prev { left: 0px !important; } /* --> COMMON > MODULES > ALL CAROUSELS > MAKE IMAGES TAKE UP AVAILABLE SPACE [3] ------------------------------------------------------------- */ .carousel .swiper-slide>img { width: 100% !important; } /* --> COMMON > MODULES > ALL CAROUSELS > VIEW MORE [3] ------------------------------------------------------------- */ .products-carousel-module .view_more, .carousel .view_more, .blog_container a.view_more, #relatedblog a.view_more, .blog_container a.view_all, .btnread a, .view_more_blog, .latest-posts .view_more { color: #838383; font-size: 14px !important; border-bottom: 1px solid #838383 !important; width: -webkit-fit-content !important; width: -moz-fit-content !important; width: fit-content !important; font-weight: 500; text-transform: uppercase; } .products-carousel-module .view_more:hover, .carousel .view_more:hover, .blog_container a.view_more:hover, #relatedblog a.view_more:hover, .blog_container a.view_all:hover, .btnread a:hover, .view_more_blog:hover, .latest-posts .view_more:hover { color: var(--accent_3) !important; } /* --> COMMON > MODULES > ALL CAROUSELS > TEXT CONTAINER [3] ------------------------------------------------------------- */ .carousel .text_container { display: none; } /* --> COMMON > MODULES > PRODUCTS CAROUSEL [2] =========================================================================================================== */ /* .blog_container .swiper-button-disabled, .products-carousel-module .swiper-button-disabled{ opacity: 0 !important; visibility:hidden !important; } */ /* .products-carousel-module .product-thumb { width: calc(100% - 2px); } */ /* .products-carousel-module .swiper-wrapper { padding-top: 10px; } */ /* .products-carousel-module .swiper-container { overflow: visible } */ /* .products-carousel-module .product-thumb{ width: calc(100% - 2px); } .products-carousel-module .swiper-wrapper{ padding-top: 10px; } */ /* --> COMMON > MODULES > PRODUCTS CAROUSEL > TAKE INTO ACCOUNT HOVER SHADOWS [3] ------------------------------------------------------------- */ .extra_products .swiper-container, .products-carousel-module .swiper-container { padding: 15px !important; width: calc(100% + 30px) !important; margin-left: -15px !important; } .extra_products .product-thumb{ margin-bottom: 80px; } /* --> COMMON > MODULES > CAROUSEL [2] =========================================================================================================== */ .swiper-slide { display: flex; flex-direction: column; align-items: center; } /* .swiper-button-disabled{ opacity:0 !important; } */ .swiper-viewport { background: transparent !important; margin-bottom: 0px !important; } /* --> COMMON > MODULES > CAROUSEL > DISABLED [3] ------------------------------------------------------------- */ .carousel.disabled .swiper-wrapper { transform: translate3d(0px, 0, 0) !important; } .carousel.disabled .swiper-pagination, .carousel.disabled .swiper-pager { display: none !important; } /* --> COMMON > MODULES > CAROUSEL > FIX PAGER HEIGHT WHEN TITLE EXISTS [3] ------------------------------------------------------------- */ .carousel.has-title .swiper-pager { transform: translateY(28px); } /* --> COMMON > MODULES > CAROUSEL > RESPONSIVE [3] ------------------------------------------------------------- */ @media(max-width: 991px) { .carousel .swiper-pager { display: none !important; } } /* --> COMMON > FORMS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .form-horizontal { display: flex; flex-direction: column; } .form-horizontal .form-group:not(:last-child) { margin-bottom: 35px; } .form-horizontal .form-group.product_page_ideal_time_container { margin-top: -20px !important; } .form-horizontal .form-group *:is(input, textarea, select) { border: none; border-bottom: 1px solid #c3c2c2; border-radius: 0px; box-shadow: none; color: #343434; outline: none !important; box-shadow: none !important; font-weight: 500; } .form-horizontal .contact-preferences-label { font-weight: 500; } .form-horizontal .form-group.agree_to_terms { order: 99; } .form-horizontal .form-group.agree_to_terms * { font-size: 13px !important; } .form-horizontal .form-group.agree_to_terms input { margin-right: 10px !important; } .form-horizontal .form-group:has(.contact-submit-btn) { order: 100; } .form-horizontal .form-group.submit-group { margin-bottom: 0px; } .form-horizontal .form-group *:is(input, textarea, select)::placeholder { color: #ccc !important; } .form-horizontal .form-group *:is(input, textarea, .checkbox-label, label, select), .form-horizontal { font-size: 16px; line-height: normal; } .form-horizontal .form-group textarea { height: 32px } .form-horizontal .form-group .checkbox-group>label:first-child { margin-right: 55px; margin-top: 10px; margin-bottom: 10px } .form-horizontal .form-group input[type="checkbox"] { margin-right: 5px } .form-horizontal .form-group .text-danger { margin-top: 10px } .form-horizontal .form-group.contact-preferences { margin-top: 0px !important; } .form-horizontal .form-group .preferred-time { width: 310px; } .form-horizontal .form-group.privacy-policy .checkbox-label { font-size: 13px; margin-top: 5px; } .form-horizontal .btn-primary { margin-top: 30px !important; } .form-horizontal textarea+label { position: absolute; bottom: 0px; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION TOP BAR VVV VVV VVV VVV VVV VVV VVV */ /* --> TOP BAR > CONTENTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #top-bar { display: flex; justify-content: space-between; background: #3d3d3d; height: 40px; display: flex; align-items: center; box-shadow: -200px 0px #3d3d3d, 200px 0px #3d3d3d; } #top-bar p { margin-bottom: 0px !important; } #top-bar p, #top-bar span { font-size: 13px !important; font-weight: 500; color: #fff; text-transform: uppercase; } html.transparent_header:not(.sticky_enabled) #top-bar { background: rgba(0, 0, 0, .25) !important; box-shadow: -200px 0px rgba(0, 0, 0, .25), 200px 0px rgba(0, 0, 0, .25) !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION HEADER > LAYOUT VVV VVV VVV VVV VVV VVV VVV */ header { /* background: linear-gradient(90deg, #0F61D1 0%, #0A2751 10.73%, #0A2954 89.02%, #0F61D1 100%); */ /* position: -webkit-sticky; */ /* position: sticky; */ background: white; top: 0px; z-index: 10; position: fixed; width: 100vw; box-shadow: 0 1px 10px rgba(0, 0, 0, .08); left: 0px; } body { margin-top: calc(var(--headerHeight) + var(--topBarHeight)); } /* --> HEADER > LAYOUT > WHEN TRANSPARENT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ html:is(.transparent_header) body { margin-top: 0px !important; } /* --> HEADER > LAYOUT > WHEN TRANSPARENT > TRANSITIONS [2] =========================================================================================================== */ html header, html header #top-bar, html header .header_left_section, html:is(.transparent_header) #header_sections_container:before, html:is(.transparent_header):before, #menu_toggle_section>#category, .outside_menu_links>a, .header_right_section .b2b_login_item a, .header_mid_section #search .input-group-btn>button>svg, .header_right_section .language_item #form-language>.btn-group>button>img, .header_right_section .compare_item>a>img, .header_right_section .wishlist_item>a>div>img, .header_right_section .account_item>a>img, .header_right_section .cart_item>button>img, .header_right_section .search_item>a>svg, #search-toggle>a>img, #wishlist-count, header #cart .btn.btn-inverse #cart-total, .header_mid_section #burger_button img { transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; } /* --> HEADER > LAYOUT > WHEN TRANSPARENT > BG [2] =========================================================================================================== */ html:is(.transparent_header):not(.sticky_enabled) header, html:is(.transparent_header):not(.sticky_enabled) header .header_left_section { background: transparent !important; box-shadow: none !important; } /* --> HEADER > LAYOUT > WHEN TRANSPARENT > BOTTOM BORDER [2] =========================================================================================================== */ /* html:is(.transparent_header) #header_sections_container:before { width: 100%; height: 1px; position: absolute; background: rgba(255, 255, 255, .5); display: block !important; left: 50%; transform: translateX(-50%); bottom: 40px; opacity: 0; } html:is(.transparent_header):not(.sticky_enabled) #header_sections_container:before { opacity: 1; } */ /* --> HEADER > LAYOUT > WHEN TRANSPARENT > TOGGLING ON SCROLL [2] =========================================================================================================== */ html:is(.transparent_header):before { content: ""; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0)); height: 250px; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 2; visibility: hidden; opacity: 0; } html:is(.transparent_header):not(.sticky_enabled):before { opacity: 1; visibility: visible; } /* @media(max-width: 768px) { html:is(.transparent_header):not(.sticky_enabled):before { height: 110px; } } */ html.transparent_header:not(.sticky_enabled) .header_left_section #logo a img { filter: brightness(0) invert(100) !important; } html.transparent_header:not(.sticky_enabled) #menu_toggle_section>#category, html.transparent_header:not(.sticky_enabled) .outside_menu_links>a, html.transparent_header:not(.sticky_enabled) .header_right_section .b2b_login_item a { color: white !important } html.transparent_header:not(.sticky_enabled) .outside_menu_links .menu-prosfores, #menu .nav.navbar-nav>li>a.menu-prosfores{ color: red !important } html.transparent_header:not(.sticky_enabled) .header_mid_section #burger_button img { filter: brightness(0) invert(100) !important; } html.transparent_header:not(.sticky_enabled) .header_mid_section #search .input-group-btn>button>svg, html.transparent_header:not(.sticky_enabled) .header_right_section .language_item #form-language>.btn-group>button>img, html.transparent_header:not(.sticky_enabled) .header_right_section .compare_item>a>img, html.transparent_header:not(.sticky_enabled) .header_right_section .wishlist_item>a>div>img, html.transparent_header:not(.sticky_enabled) .header_right_section .account_item>a>img, html.transparent_header:not(.sticky_enabled) .header_right_section .cart_item>button>img, html.transparent_header:not(.sticky_enabled) .header_right_section .search_item>a>svg, html.transparent_header:not(.sticky_enabled) #search-toggle>a>img { filter: brightness(0) invert(100) !important } html.transparent_header:not(.sticky_enabled) .header_mid_section #search .input-group-btn>button>svg:hover, html.transparent_header:not(.sticky_enabled) .header_right_section .language_item #form-language>.btn-group>button>img:hover, html.transparent_header:not(.sticky_enabled) .header_right_section .compare_item>a>img:hover, html.transparent_header:not(.sticky_enabled) .header_right_section .wishlist_item>a>div>img:hover, html.transparent_header:not(.sticky_enabled) .header_right_section .account_item>a>img:hover, html.transparent_header:not(.sticky_enabled) .header_right_section .cart_item>button>img:hover, html.transparent_header:not(.sticky_enabled) .header_right_section .search_item>a>svg:hover, html.transparent_header:not(.sticky_enabled) #search-toggle>a>img:hover { filter: brightness(0) invert(66%) sepia(81%) saturate(1867%) hue-rotate(359deg) brightness(105%) contrast(104%) !important; } html.transparent_header:not(.sticky_enabled) #wishlist-count, html.transparent_header:not(.sticky_enabled) header #cart .btn.btn-inverse #cart-total { background: white !important; color: black !important; } /* --> HEADER > LAYOUT > WHEN TRANSPARENT > TOP BAR [2] =========================================================================================================== */ /* html:is(.transparent_header) #top-bar { opacity: 0; visibility: hidden; } html.sticky_enabled:is(.transparent_header) #top-bar { opacity: 1; visibility: visible; transform: none; } */ /* --> HEADER > LAYOUT > SECTIONS CONTAINER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #header_sections_container { display: flex; justify-content: space-between; width: 100%; align-items: flex-end; margin-left: 0px; margin-right: 0px; /* margin-top: -42px; */ /* gap: 40px; gap: max(2vw, var(--defaultPadding)); */ gap: var(--headerItemsDistance) } #header_sections_container:before, #header_sections_container:after { display: none !important; } /* --> HEADER > LAYOUT > ALL SECTIONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #header_sections_container>div { width: 100%; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; height: var(--headerHeight); width: fit-content; } #header_sections_container>div:not(.header_mid_section) { align-items: center; } /* --> HEADER > LAYOUT > LEFT & RIGHT SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .header_left_section, .header_right_section { /* max-width: 207px !important; */ } /* --> HEADER > LAYOUT > MID SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .header_mid_section { gap: 15px; } */ .header_mid_section { margin-right: auto; margin-left: 5%; } /* --> HEADER > LAYOUT > LEFT SECTION (logo) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .header_left_section { /* background:rgba(255, 0, 0, 0.5); */ } .header_left_section { background: transparent; /* box-shadow: calc(-1 * var(--calculatedPadding)) 0px var(--accent_2); */ padding-right: var(--defaultPadding); box-shadow: none !important; /* margin-right: auto; */ } /* --> HEADER > LAYOUT > LEFT SECTION (logo) > LOGO [2] =========================================================================================================== */ .header_left_section #logo a img { height: 50px; width: auto; max-width: unset; filter: brightness(0); -webkit-filter: brightness(0); } @media(max-width: 768px) { .header_left_section { padding-right: 0 !important; margin-left: calc(-1 * var(--defaultPadding) / 2); } .header_left_section #logo a img { height: 34px; } } /* --> HEADER > LAYOUT > MID SECTION (BRURGER, LINKS & SEARCH) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HEADER > LAYOUT > MID SECTION (BRURGER, LINKS & SEARCH) > BURGER & LINKS [2] =========================================================================================================== */ .header_mid_section { justify-content: center; } .header_mid_section #burger_button img { /* width: 38px !important; */ filter: invert(100); -webkit-filter: invert(100); } .outside_menu_links { display: flex; gap: var(--headerItemsDistance); margin-inline: var(--headerItemsDistance); } .outside_menu_links a { color: black; font-weight: 500; font-size: 15px; white-space: nowrap; text-transform: uppercase; } /* --> HEADER > LAYOUT > MID SECTION (BRURGER, LINKS & SEARCH) > BURGER & LINKS > HOVER EFFECTS [3] ------------------------------------------------------------- */ .outside_menu_links a, #menu_toggle_section:hover>#category, #menu_toggle_section #burger_button>img { transition: all .15s !important; } .outside_menu_links a:hover, html.transparent_header:not(.sticky_enabled) .outside_menu_links>a:hover, #menu_toggle_section:hover>#category, html.transparent_header:not(.sticky_enabled) #menu_toggle_section:hover>#category { color: var(--accent_3) !important; } #menu_toggle_section:hover #burger_button>img { filter: brightness(0) invert(66%) sepia(81%) saturate(1867%) hue-rotate(359deg) brightness(105%) contrast(104%) !important; } /* --> HEADER > LAYOUT > MID SECTION (BRURGER, LINKS & SEARCH)> SEARCH [2] =========================================================================================================== */ .header_mid_section .search_wrapper { width: 100%; margin-inline: 15px; } .header_mid_section #search { background: rgba(241, 241, 241, .22); border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.41) !important; max-width: 515px !important; display: flex !important; margin-inline: auto; width: 338px !important; } .header_mid_section #search .input-lg { font-size: 14px !important; font-style: normal !important; font-weight: 500 !important; font-family: var(--font_2); color: #FFF5F5 !important; padding-left: 10px } .header_mid_section #search .input-lg::placeholder { color: #FFF5F5; } .header_mid_section #search:has(#search-input) { transition: all .15s; } .header_mid_section #search:has(#search-input:focus) { border-color: var(--accent_3) !important; /* box-shadow: 0 3px 15px rgba(0, 161, 173, .5); */ } .header_mid_section #search .input-group-btn { order: -99 !important; padding-left: 5px; } .header_mid_section #search .input-lg, .header_mid_section #search .input-group-btn button.btn.btn-default.btn-lg { border-bottom: none !important; height: 45px; max-height: 45px !important; line-height: 1 !important; } .header_mid_section #search .btn-lg svg { height: 23px !important; margin-right: 0px !important; } /* --> HEADER > LAYOUT > MID SECTION (BRURGER, LINKS & SEARCH) > SEARCH > LIVE SEARCH [3] ------------------------------------------------------------- */ #search>span>button img { filter: brightness(0); } .header_mid_section .live-search-div { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; top: 63px !important; } /* --> HEADER > LAYOUT > RIGHT SECTION (ICONS) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .header_right_section { justify-content: flex-end !important; } .header_right_section>ul { display: flex; flex-wrap: nowrap; align-items: center; margin-bottom: 0px !important; gap: 20px; margin-left: 0px; } .header_right_section>ul>li>a { display: flex; align-items: center; } .header_right_section>ul>li { padding: 0px !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > B2B LOGIN ITEM [2] =========================================================================================================== */ .header_right_section .b2b_login_item a { color: black !important; font-size: 16px; font-weight: 500; margin-right: 11px; } /* --> HEADER > LAYOUT > RIGHT SECTION > ICONS [2] =========================================================================================================== */ .header_mid_section #search .input-group-btn>button>svg, .header_right_section .language_item #form-language>.btn-group>button>img, .header_right_section .compare_item>a>img, .header_right_section .wishlist_item>a>div>img, .header_right_section .account_item>a>img, .header_right_section .cart_item>button>img, .header_right_section .search_item>a>svg, #search-toggle>a>img { filter: brightness(0) !important; height: 22px; -webkit-filter: brightness(0) !important; } .header_mid_section #search .input-group-btn>button>svg:hover, .header_right_section .language_item #form-language>.btn-group>button>img:hover, .header_right_section .compare_item>a>img:hover, .header_right_section .wishlist_item>a>div>img:hover, .header_right_section .account_item>a>img:hover, .header_right_section .cart_item>button>img:hover, .header_right_section .search_item>a>svg:hover, #search-toggle>a>img:hover { filter: brightness(0) invert(66%) sepia(81%) saturate(1867%) hue-rotate(359deg) brightness(105%) contrast(104%) !important; } .header_right_section .language_item #form-language>.btn-group>button>img { height: 25px; } .header_right_section .compare_item>a>img { height: 22px; } .header_right_section .account_item>a>svg { height: 24px; } .header_right_section .cart_item>button>img { height: 23px; } .header_right_section .language_item #form-language>.btn-group>button { padding: 0px !important; } #wishlist-count, header #cart .btn.btn-inverse #cart-total { background: black !important; color: white !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > ICONS> HOVER STATE [3] ------------------------------------------------------------- */ /* #search .input-group-btn>button:hover>svg, .header_right_section .language_item:hover #form-language>.btn-group>button>img, .header_right_section .compare_item:hover>a>img, .header_right_section .account_item:hover>a>svg, .header_right_section .cart_item:hover>button>img { filter: invert(42%) sepia(89%) saturate(504%) hue-rotate(136deg) brightness(97%) contrast(101%) !important; -webkit-filter: invert(42%) sepia(89%) saturate(504%) hue-rotate(136deg) brightness(97%) contrast(101%) !important; } */ /* --> HEADER > LAYOUT > RIGHT SECTION > ICONS> ACTIVE STATE (LANGUAGE & ACCOUNT) [3] ------------------------------------------------------------- */ header :is(.header_right_section, .mobile_header_items) .language_item .dropdown-menu, header :is(.header_right_section, .mobile_header_items) .account_item .dropdown-menu { padding: 15px 25px !important; min-width: unset !important; left: 50%; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; transform: translateX(-50%) translateY(10px); top: 48px; /*right: 0px; left: auto; */ position: absolute !important; background: white !important; display: block !important; transition: all 0.4s; opacity: 0 !important; visibility: hidden !important; border: none !important; border-radius: 6px !important; box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.175) !important; position: absolute !important; -webkit-border-radius: 6px !important; -moz-border-radius: 6px !important; -ms-border-radius: 6px !important; -o-border-radius: 6px !important; height: fit-content !important; } header :is(.header_right_section, .mobile_header_items) .language_item .btn-group.open .dropdown-menu, header :is(.header_right_section, .mobile_header_items) :is(.dropdown, .btn-group).open .dropdown-menu:not(.minicart_dropdown), #menu .navbar-nav .mobile_header_items .dropdown.open .dropdown-menu, #menu .navbar-nav .mobile_header_items .btn-group.open .dropdown-menu { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0px) !important; -webkit-transform: translateX(-50%) translateY(0px) !important; -moz-transform: translateX(-50%) translateY(0px) !important; -ms-transform: translateX(-50%) translateY(0px) !important; -o-transform: translateX(-50%) translateY(0px) !important; } header :is(.header_right_section, .mobile_header_items) .language_item .dropdown-menu:after, header :is(.header_right_section, .mobile_header_items) .account_item .dropdown-menu:after { content: ""; width: 0; height: 0; border-width: 10px 10px 0px 10px; border-color: #fff transparent transparent transparent; border-style: solid; position: absolute; bottom: 100%; right: 50%; transform: rotate(180deg) translateX(-50%); } header :is(.header_right_section, .mobile_header_items) .account_item .dropdown-menu { margin-left: -60px } header :is(.header_right_section, .mobile_header_items) .account_item .dropdown-menu::after { margin-right: -60px !important; } header :is(.header_right_section, .mobile_header_items) .language_item, header :is(.header_right_section, .mobile_header_items) .account_item { position: relative; } header :is(.header_right_section, .mobile_header_items) .language_item .dropdown-menu li>*, header :is(.header_right_section, .mobile_header_items) .account_item .dropdown-menu li>* { font-size: 15px; color: #2a2a2a !important; text-transform: none !important; display: flex; align-items: center; justify-content: flex-start; padding: 6px 0px !important; border: none !important; line-height: normal !important; text-decoration: none !important; /* background: #eee !important; */ } header :is(.header_right_section, .mobile_header_items) .language_item .dropdown-menu li:not(:last-child), header :is(.header_right_section, .mobile_header_items) .account_item .dropdown-menu li:not(:last-child) { margin-bottom: 1px !important; } header :is(.header_right_section, .mobile_header_items) .language_item .dropdown-menu li>* img, header :is(.header_right_section, .mobile_header_items) .account_item .dropdown-menu li>* img { margin-right: 7px; } header :is(.header_right_section, .mobile_header_items) .language_item .dropdown-menu li>*:hover, header :is(.header_right_section, .mobile_header_items) .account_item .dropdown-menu li>*:hover { color: var(--accent2) !important; background: none !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > TITLES [2] =========================================================================================================== */ /* .header_right_section .list-inline>li>a, header #cart .btn.btn-inverse #cart-title { font-size: 0px !important; line-height: 0px !important; } */ /* .header_right_section>ul>li:not(:has(#form-language))>a, #cart>button { display: flex; flex-direction: column; line-height: normal !important; gap: 5px; align-items: center; font-weight: 500; font-size: 12px; text-shadow: none !important; } .header_right_section>ul>li:not(:has(#form-language))>a>svg, #cart>button>svg { height: 24px !important; } #compare_icon>a>img { width: 18px !important; } */ /* --> HEADER > LAYOUT > RIGHT SECTION > WISHLIST [2] =========================================================================================================== */ .header-icon-men.for_wishlist { position: relative; } #wishlist_image { position: relative; } #wishlist-count { position: absolute; top: -5px; right: -7px; background: white; border-radius: 100%; width: 13px; height: 13px; font-size: 11px; color: black; line-height: 100%; text-shadow: unset; display: flex; align-items: center; justify-content: center; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH [2] =========================================================================================================== */ #search_contents { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; background: rgba(255, 255, 255, .95); z-index: 10; padding: 0px 20px; transition: all 0.3s; opacity: 0; visibility: hidden; } #search_contents #search { margin-top: 250px; margin-left: auto; margin-right: auto; } .live-search-div { top: 299px !important; padding: 5px 0 40px !important; width: calc(100vw - 20px) !important; max-height: calc(100vh - 339px); } .live-search-div ul { display: flex !important; flex-wrap: wrap !important } .live-search-div ul li { flex: 1 1 auto !important; } .live-search-div ul li a { display: flex !important; flex-direction: column !important; } .live-search-div .product-image img {} .live-search-div ul li .product-name { font-weight: normal !important; line-height: normal !important; } .live-search-div ul li .product-price { width: 100% !important; text-align: left !important; font-size: 15px !important; } .live-search-div ul li .product-price .special { color: #999 !important; } .live-search-div .result-text { height: 40px !important; display: flex !important; justify-content: center !important; align-items: center !important; font-size: 15px !important; background: var(--accent_1) !important; } @media(max-width: 615px) { .live-search-div ul li { flex: unset !important; width: 50% !important; margin-right: 0px !important; margin-left: 0px !important } } .search_enabled #search_contents { opacity: 1; visibility: visible; } #search_contents .close_button { cursor: pointer; top: 35px; right: 100px; position: absolute; } #search_contents .close_button svg { width: 30px; height: 30px; } #search { margin-bottom: 0px !important; } #search, .live-search-div { width: 100% !important; max-width: 1110px !important; } #search .input-lg, #search .input-group-btn, #search .btn.btn-default.btn-lg { background: none !Important; } #search .input-lg { height: 55px; line-height: normal; font-size: 25px !important; padding-left: 25px; border-bottom: 1px solid var(--accent_1) !important; color: var(--accent_1); font-weight: bold; font-style: italic; } #search .btn.btn-default.btn-lg { border-bottom: 1px solid var(--accent_1) !important; height: 55px; width: 100%; } #search .btn-lg svg { width: 30px !important; height: 30px !important; } #search .input-group-btn { width: 55px; } .live-search-div { margin-top: 27px !important; border-radius: 0px !important; box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, .2) !important; } .live-search-div ul li { display: flex !important; align-items: center !important; justify-content: center !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > LANGUAGE [2] =========================================================================================================== */ #language_selection { display: flex; align-items: center; margin-right: 30px; } #form-language { margin-bottom: 0px; } #language_selection>button { margin-top: 0px !important; text-transform: uppercase; outline: none !important; font-size: 13px !important; padding: 0px; font-weight: normal; color: black; } /* --> HEADER > LAYOUT > RIGHT SECTION > LANGUAGE > FLAG ACTIVE LANGUAGE [3] ------------------------------------------------------------- */ html[lang="el"] #language_selection>button[name="el-gr"] { font-weight: bold; } html[lang="en"] #language_selection>button[name="en-gb"] { font-weight: bold; } /* --> HEADER > LAYOUT > RIGHT SECTION > LANGUAGE > SEPARATOR [3] ------------------------------------------------------------- */ #language_selection>button:first-child:after { content: ""; background: black; height: 11px; width: 1px; display: inline-block; margin-right: 4px; margin-left: 2px; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION HEADER > MENU VVV VVV VVV VVV VVV VVV VVV */ /* --> HEADER > MENU > BURGER BUTTON [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #menu_toggle_section { display: flex; align-items: flex-end; height: fit-content } #menu_toggle_section>#burger_button { margin-right: 10px; cursor: pointer; } #menu_toggle_section>#category { font-size: 15px; font-weight: 700; color: black; } #menu_toggle_section>#category>span:last-child { display: none !important; } #menu_toggle_section, #menu { /* width: 100% !important; */ height: 100% !important; display: flex !important; align-items: center; } .container.main-menu { height: 100% !important; } #menu_toggle_section { display: flex; align-items: center; cursor: pointer; } /* --> HEADER > MENU > CONTAINER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HEADER > MENU > CONTAINER > OUTER [2] =========================================================================================================== */ #menu { display: flex; } #menu_container { /* width: 593px; */ width: 445px; position: fixed; top: 0px; left: 0px; z-index: 9; height: 100vh; overflow: auto; background: #fff; display: flex; flex-direction: column; /* padding-left: 95px; padding-right: 95px; */ align-items: center; } #menu_container, html:after { transition: all 0.2s; } /* --> HEADER > MENU > CONTAINER > INNER [2] =========================================================================================================== */ #menu .nav.navbar-nav li.dropdown .dropdown-menu { width: 100%; background: #fff; box-shadow: none !important; } /* --> HEADER > MENU > CONTAINER > HEIGHTS [2] =========================================================================================================== */ #menu_header { height: 100px; margin-bottom: 30px; padding-top: 30px; } #menu .nav.navbar-nav { /* height: calc(100vh - 130px - 230px); */ /* height: 100% !important; */ overflow: auto; justify-content: unset; } #menu .nav.navbar-nav li.dropdown .dropdown-menu { /*height: calc(100vh - 230px); */ height: 100%; overflow: auto; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; } #menu .extra_links { height: 195px; margin-top: 30px; } /* --> HEADER > MENU > CONTAINER > REVEAL [2] =========================================================================================================== */ #menu_container { transform: translateX(-100%); transition: all 0.4s; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); overflow: hidden !important; } header::after { background: #000; content: ""; position: fixed; top: 0px; right: 0px; width: 100vw; height: calc(100vh + 300px); z-index: 8; } header:after { visibility: hidden; opacity: 0; transition: all 0.4s; } header>.container { display: flex; flex-direction: column; } .menu_revealed #menu_container { transform: translateX(0px); visibility: visible; opacity: 1; } .menu_revealed #menu_container, .menu_revealed, .menu_revealed body { overflow: hidden !important; } .menu_revealed header:after { visibility: visible; opacity: .5; } /* --> HEADER > MENU > BURGER BUTTON [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .navbar-toggle { display: block !important; } /* --> HEADER > MENU > CLOSE BUTTON [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #menu_close_button { position: absolute; top: 12px; left: var(--menuPadding); z-index: 99999; cursor: pointer; } #menu_close_button img { width: 27px; height: 27px; filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } #menu_close_button svg:hover { color: var(--accent_1); } /* --> HEADER > MENU > HEADER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* #menu_header { display: flex; align-items: center } */ /* --> HEADER > MENU > HEADER > LOGO [2] =========================================================================================================== */ /* #menu_header a { margin: 0 0; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } #menu_header a img { max-width: 200px; height: auto; } */ /* --> HEADER > MENU > INTRO [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .menu_intro { text-align: center; margin-bottom: 40px } .menu_intro>img { margin-inline: auto; cursor: pointer; } /* --> HEADER > MENU > DROPDOWNS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS [2] =========================================================================================================== */ #menu .dropdown .dropdown-menu { display: block; position: relative; width: 100%; /* border-color: var(--accent_1); */ } #menu .level_0, #menu .level_1, #menu .level_2, #menu .level_3 { display: flex; flex-direction: column; /* gap: 26px */ gap: 0px; } #menu .level_0:before, #menu .level_1:before, #menu .level_2:before, #menu .level_3:before { display: none !important; } #menu .navbar-nav, #menu .navbar-nav .dropdown-menu { padding: 67px var(--menuPadding) 20px; margin: 0px; } @media(min-width: 1101px) { #menu .navbar-nav { padding: 20px var(--menuPadding) 15px var(--menuPadding) !important; } #menu .navbar-nav .dropdown-menu { padding: 117px var(--menuPadding) 15px var(--menuPadding) !important; } } #menu .dropdown .dropdown-menu .dropdown-inner { display: flex; flex-direction: column; height: calc(100% - 15px); /* overflow: auto; */ overflow: visible; } #menu .dropdown .dropdown-menu .dropdown-inner>ul { overflow: auto; } /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > MENU BANNER (HIDDEN) [3] ------------------------------------------------------------- */ .menu_banner { margin-top: 30px !important; margin-left: calc(-1 * (var(--menuPadding) / 2)) !important; margin-top: auto !important; padding-top: 30px !important; display: none; } .menu_banner, .menu_banner a, .menu_banner img { width: 100%; } @media(max-width: 1100px) { .menu_banner { display: none; } } /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > FONTS [3] ------------------------------------------------------------- */ /* #menu .nav.navbar-nav * { color: black; font-size: 16px; } */ /* #menu .nav.navbar-nav a:hover { color: var(--accent_3) !important; } */ /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > ALL LINKS [3] ------------------------------------------------------------- */ .navbar-nav>li>a, .dropdown-menu>.dropdown-inner>li>a, .dropdown-menu>.dropdown-inner>ul>li>a, #menu .parent_header>a { background: transparent !important; padding: 0px 0px !important; /* text-transform: uppercase !important; */ font-size: 16px !important; line-height: 1.2 !important; font-weight: 400; font-family: var(--font_1); } #menu .nav.navbar-nav li>a { display: flex; align-items: center; line-height: 1; justify-content: space-between; width: fit-content; height: 50px; /* padding-left: 27px !important; padding-right: 27px !important; */ } #menu .nav.navbar-nav li.dropdown>a { /* padding-right: var(--menuPadding) !important; */ padding-right: 5px !important; width: 100%; } #menu .extra_links>a { padding: 9px 30px; line-height: normal; color: black; } .dropdown-inner>ul>li>a { background: transparent !important; display: block; color: black !important; } /* .navbar-nav>li>a, .dropdown-menu>li>a, #menu .extra_links>a, .dropdown-inner>ul>li>a, #menu .parent_header .arrow_back svg { transition: all 0.12s; transition: none; } */ /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > CATEGORY ICONS (HIDE) [3] ------------------------------------------------------------- */ .navbar-nav .category_icon { display: none; } /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > DROPDOWN ARROW [3] ------------------------------------------------------------- */ #menu .nav.navbar-nav li.dropdown>a>.toggle_arrow { line-height: 1; display: flex; align-items: center; } #menu .nav.navbar-nav .toggle_arrow>img { /* width: 20px; */ height: 15px; margin-left: 10px; } #menu .nav.navbar-nav li.dropdown>a>.toggle_arrow img { transition: all .18s; -webkit-transition: all .18s; -moz-transition: all .18s; -ms-transition: all .18s; -o-transition: all .18s; opacity: .28; } #menu .nav.navbar-nav li.dropdown.dropdown_activated>a>.toggle_arrow img { transform: rotate(180deg); } /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > DROPDOWN ARROW:LEVEL #0 */ /* .navbar-nav>li>a>.toggle_arrow>svg { fill: white !important; } */ /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > DROPDOWN TOGGLING [3] ------------------------------------------------------------- */ #menu .navbar-nav .dropdown-menu, #menu .nav.navbar-nav li.dropdown { position: static !important; border: none !important; margin-left: 0px !important; } #menu .nav.navbar-nav li.dropdown .dropdown-menu { position: absolute !important; z-index: 9999; top: 0px; left: 0px; transition: all 0.2s; transform: translateX(-50px); opacity: 0; visibility: hidden; -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); } #menu .nav.navbar-nav li.dropdown.dropdown_activated>.dropdown-menu { opacity: 1; visibility: visible; transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } @media(min-width: 1101px) { #menu .nav.navbar-nav li.dropdown.dropdown_activated>.dropdown-menu { transform: translateX(-8px); -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); -ms-transform: translateX(-8px); -o-transform: translateX(-8px); } } /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > HOVERED ITEM STATES [3] ------------------------------------------------------------- */ #menu .parent_header>a:hover { /* text-shadow: 1px 1px var(--accent_3), 0 0 2px white !important; */ color: var(--accent_3) !important; } #menu ul:is(.level_0, .level1, .level2)>li>a { transition: .2s !important; } #menu .level_0>li>a:hover { /* text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white !important */ } #menu ul:is(.level_0, .level_1, .level_2)>li>a:hover, #menu ul:is(.level_0, .level_1, .level_2)>li.dropdown_activated>a { /* text-shadow: 1px 1px black, 0 0 2px white !important; */ color: var(--accent_3) !important; } /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > HOVERED ITEM STATES > LEVEL #0 */ #menu .level_0>li.dropdown_activated>a { /* background: white !important; */ /* color: black !important; */ } /* #menu .level_0>li.dropdown_activated .toggle_arrow { filter: brightness(0) !important; -webkit-filter: brightness(0) !important; } */ #menu .level_0>li.dropdown_activated>a>.category_icon img { filter: brightness(0) !important; -webkit-filter: brightness(0) !important; } /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > HOVERED ITEM STATES > LEVEL #1 */ #menu .level_1>li.dropdown_activated>a { /* background: #F1F1F1 !important; */ /* color: black !important; */ } #menu .level_1>li.dropdown_activated .toggle_arrow { filter: brightness(0) !important } /* --> HEADER > MENU > DROPDOWNS > LEVEL #0 [2] =========================================================================================================== */ #menu .nav.navbar-nav { display: flex; flex-direction: column; width: 100%; background: #2F2F2F; } /* #menu .nav.navbar-nav.level_0 { background-image: url("/image/catalog/desikos-b2c/desikos_cut_assets/menu.png") !important; background-repeat: no-repeat; background-position: left bottom } */ #menu .nav.navbar-nav>li>a { color: white; } .navbar-nav>li { display: flex; align-items: center; } /* --> HEADER > MENU > DROPDOWNS > LEVEL #0 > CATEGORY ICONS [3] ------------------------------------------------------------- */ .navbar-nav>li>a>.category_icon { filter: brightness(100); margin-right: 25px !important; width: 27px; height: 27px; } .navbar-nav>li>a>.category_icon img { max-width: 100%; max-height: 100%; } .navbar-nav>li>a>.toggle_arrow { margin-left: auto; } /* --> HEADER > MENU > DROPDOWNS > LEVEL #0 > LOGO ITEM [3] ------------------------------------------------------------- */ .navbar-nav>li.logo_item { margin-top: max(40px, 40%) } @media(min-width: 1101px) { .navbar-nav>li.logo_item { padding-right: var(--menuPadding); } } .navbar-nav>li.logo_item img { width: 100% !important; } /* --> HEADER > MENU > DROPDOWNS > LEVEL #0 > DROPDOWN ARROW [3] ------------------------------------------------------------- */ #menu .nav.navbar-nav>li.dropdown>a>.toggle_arrow>img { filter: invert(100) !important; } /* --> HEADER > MENU > DROPDOWNS > INNER LEVELS [2] =========================================================================================================== */ /* --> HEADER > MENU > DROPDOWNS > INNER LEVELS > PARENT HEADER [3] ------------------------------------------------------------- */ #menu .parent_header { display: flex; flex-direction: row; margin-bottom: 30px; border-bottom: 1px solid #ddd } /* --> HEADER > MENU > DROPDOWNS > INNER LEVELS > PARENT HEADER (DESKTOP ONLY) */ /* --> HEADER > MENU > DROPDOWNS > INNER LEVELS > PARENT HEADER > ARROW BACK */ #menu .parent_header .arrow_back img { fill: var(--accent_1) !important; transform: rotate(180deg); /* width: 20px; */ height: 15px; cursor: pointer; margin-right: 10px; } #menu .parent_header .arrow_back img:hover { /* fill: var(--accent_1) !important; */ filter: invert(42%) sepia(89%) saturate(504%) hue-rotate(136deg) brightness(97%) contrast(101%) !important; -webkit-filter: invert(42%) sepia(89%) saturate(504%) hue-rotate(136deg) brightness(97%) contrast(101%) !important; } /* --> HEADER > MENU > DROPDOWNS > INNER LEVELS > PARENT HEADER > PARENT LINK */ #menu .parent_header>a { padding: 0px; text-transform: uppercase !important; color: black; font-weight: 500; border-bottom: 1px solid #9B9B9B; width: 100%; padding-bottom: 7px !important; } #menu .parent_header { height: 56px !important; min-height: 56px; display: flex; align-items: center; border-color: var(--accent_3) !important } /* --> HEADER > MENU > EXTRA LINKS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #menu .extra_links { display: flex; flex-direction: column; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2) } /* .menu_extension_separator { width: 100%; height: 1px; min-height: 1px !important; background: rgba(216, 216, 216, .3); margin-block: auto 15px; } */ .menu_extension_separator { width: 100%; height: 1px; min-height: 1px !important; /* background: rgba(216, 216, 216, .3); */ margin-block: auto 15px; min-height: 45px !important; border-bottom: 1px solid rgba(216, 216, 216, .3); margin-bottom: 16px; } .menu_extension_link { height: 35px; } .navbar-nav>li.menu_extension_link>a { font-size: 13px !important; text-transform: uppercase; } .navbar-nav>li.menu_extension_link:last-child { margin-bottom: auto; } /* --> HEADER > MENU > SOCIALS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #menu_container .socials_section { display: flex; flex-wrap: wrap; gap: 0px 17px } #menu_container .socials_section .socials_heading { width: 100% !important; text-align: left; font-size: 14px; text-transform: uppercase; margin-bottom: 17px; } #menu_container .socials_section { display: flex; margin-top: 55px; } #menu_container .socials_section a { /* margin-right: 20px !important; */ width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background: var(--accent_1_amea); border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; line-height: 1 !important; padding: 0px !important; } #menu_container .socials_section svg { /* width: 10px; */ fill: white; height: 17px; color: white !important; filter: brightness(100) !important; } #menu_container .socials_section span { color: white !important; } #menu_container .socials_section h5 { margin-right: 50px; } #menu_container .socials_section { margin-top: 0px !important; padding-bottom: 20px; text-align: center; padding-left: 30px; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION HEADER VVV VVV VVV VVV VVV VVV VVV */ /* header { border-bottom: 1px solid white !important; } */ /* --> HEADER > HOME PAGE TRANSPARENCY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* CHECK "PAGES WITH TRANSPARENT HEADER" SECTION */ /* --> HEADER > MINICART [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* #menu .nav.navbar-nav .dropdown:first-child { order: 9999; } */ /* --> HEADER > MINICART > LAYOUT [2] =========================================================================================================== */ #cart .dropdown-menu { display: block !important; position: fixed; top: 0px; right: 0px; height: 100vh; height: 100dvh; transform: translateX(100%); transition: all 0.4s; border-radius: 0px; padding: 20px 10px; /*padding-left: 0px; */ max-width: var(--minicart-width); background: white; border: none; margin: 0px; /*max-width: 535px !important; */ width: 100%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; } body:before { transition: all 0.4s; content: ""; background: rgba(0, 0, 0, 0.5); width: 100vw; height: calc(100vh + 300px); display: block; position: fixed; z-index: 11; opacity: 0; visibility: hidden; top: 0px; } #cart .dropdown-menu li>div { min-width: unset !important; margin-inline: auto; } /* --> HEADER > MINICART > LAYOUT > SECTIONS [3] ------------------------------------------------------------- */ #cart .dropdown-menu>li.top-section .minicart_content { max-height: calc(100vh - 265px); max-height: calc(100dvh - 265px); overflow: auto; } #cart .dropdown-menu>li.top-section .minicart_content::-webkit-scrollbar { width: 7px; height: 7px; } #cart .dropdown-menu>li.top-section .minicart_content::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; } #cart .dropdown-menu>li.top-section .minicart_content::-webkit-scrollbar-track { background: transparent; } #cart .dropdown-menu>li.top-section .minicart_content { scrollbar-width: thin; scrollbar-color: #bbb transparent; } #cart .dropdown-menu>li.top-section { top: 0px !important; margin-top: 0px !important; padding-top: 0px !important; height: calc(100% - 150px); overflow: hidden; } #cart .dropdown-menu>li.bottom-section { height: 150px; padding: 0px !important; } /* --> HEADER > MINICART > LAYOUT > SCROLLBAR [3] ------------------------------------------------------------- */ #cart .dropdown-menu>li.top-section .minicart_content::-webkit-scrollbar { width: 6px !important; } #cart .dropdown-menu>li.top-section .minicart_content::-webkit-scrollbar-thumb { background: var(--accent_2) !important; border-radius: 3px !important; border: none !important; } #cart .dropdown-menu>li.top-section .minicart_content::-webkit-scrollbar-thumb:hover { background: var(--accent_2) !important; } #cart .dropdown-menu>li.top-section .minicart_content::-webkit-scrollbar-track { background: #d8d8d8 !important; border-radius: 3px !important; } /* --> HEADER > MINICART > ENABLED [2] =========================================================================================================== */ .cart_enabled { overflow: hidden !important; } .cart_enabled #cart .dropdown-menu { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } .cart_enabled body:before { opacity: 1; visibility: visible; width: calc(100% - var(--minicart-width)); } /* --> HEADER > MINICART > EMPTY [2] =========================================================================================================== */ #cart .dropdown-menu .cart-empty { font-size: 18px; margin-top: 100px; color: black; } /* --> HEADER > MINICART > INTRO [2] =========================================================================================================== */ .minicart_intro { margin-bottom: 22px; } .minicart_intro .title { color: #000000; font-size: 12.79px; letter-spacing: 0.85px; line-height: 15px; text-align: center; text-transform: uppercase; } .minicart_intro .subtitle { color: #282727; font-size: 30px; line-height: 41px; text-align: center; font-weight: bold; padding-left: 28px; } .minicart_intro { padding-left: 28px; height: 50px; /* background:red; */ display: flex; align-items: center } /* --> HEADER > MINICART > INTRO > EMPTY [3] ------------------------------------------------------------- */ #cart .dropdown-menu li.cart-empty p { margin: 20px 0; font-family: var(--font_2); font-size: 22px; font-weight: bold; /* text-transform: uppercase; */ margin-top: 10px; padding-inline: 15px; color: #000; } /* --> HEADER > MINICART > CLOSE BUTTON [2] =========================================================================================================== */ #cart_close_button { cursor: pointer; position: absolute; right: 20px; top: 20px; } /* --> HEADER > MINICART > PRODUCT LIST [2] =========================================================================================================== */ /* --> HEADER > MINICART > PRODUCT LIST > LAYOUT [3] ------------------------------------------------------------- */ #cart .dropdown-menu .table-products { border-collapse: separate; border-spacing: 0 25px; margin-top: -25px; padding-right: 30px; padding-left: 10px; padding-inline: 0px !important; } #cart .dropdown-menu .table-products td, #cart .dropdown-menu .table-products th { border: none; } #cart .dropdown-menu .table-products>tbody { display: flex; flex-direction: column; gap: 13.5px; } #cart .dropdown-menu .table-products>tbody>tr { position: relative; display: grid; grid-template-columns: 213px 1fr; gap: 20px; } #cart .dropdown-menu .table-products>tbody>tr:not(:last-child) { box-shadow: 0 1px #C6C6C6; padding-bottom: 13.5px; } /* --> HEADER > MINICART > PRODUCT LIST > THUMB [3] ------------------------------------------------------------- */ #cart .dropdown-menu .product-thumb { vertical-align: middle; width: 213px; height: 213px; /* padding-right: 15px !important; */ box-shadow: none !important; padding: 0px; } #cart .dropdown-menu .product-thumb img { width: 100%; height: auto; } #cart .dropdown-menu .product-thumb .img-thumbnail { /* width: 150px; height: 150px; */ border-radius: 0px; border: none; width: 100% !important; min-width: 100% !important; display: block !important; } #cart .dropdown-menu .product-thumb>a { height: fit-content !important; display: block !important; padding: 0px; overflow: hidden; position: relative; } #cart .dropdown-menu .product-thumb>a:before { content: ""; width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, .06); top: 0px; left: 0px; z-index: 3; display: block !important; } /* --> HEADER > MINICART > PRODUCT LIST > INFO [3] ------------------------------------------------------------- */ #cart .dropdown-menu .product-info { display: flex; flex-direction: column; /* min-height: 150px; padding: 15px 0px 15px 20px; */ padding-block: 30px 20px; padding-right: 25px } #cart .dropdown-menu .product-info a { color: #5f5f5f; font-size: 14px; text-align: left; font-weight: 500; display: block; margin-bottom: 12px; line-height: 20px; transition: all .12s; } #cart .dropdown-menu .product-info a:hover { color: var(--accent_3) !important; } #cart .dropdown-menu .product-info a.product-manufacturer { color: black; font-size: 14px; font-weight: bold; margin-bottom: 5px } /* --> HEADER > MINICART > PRODUCT LIST > OPTIONS [3] ------------------------------------------------------------- */ /* #cart .dropdown-menu .product-info .product-options { margin-bottom: 8px; } */ #cart .dropdown-menu .product-info .product-options .option-name { font-weight: normal; color: black; font-size: 13px; /* text-transform: uppercase; */ } #cart .dropdown-menu .product-info .product-options .option-value { color: #6c6c6c; font-size: 13px; } /* --> HEADER > MINICART > PRODUCT LIST > QWUANTITY AND PRICE [3] ------------------------------------------------------------- */ #cart .dropdown-menu .product-info .product-price { color: #000; font-size: 18px; font-weight: bold; margin-top: auto; } #cart .dropdown-menu .product-info .quantity_and_price { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px } #cart .dropdown-menu .product-info .quantity_and_price .product-quantity input { width: 60px; height: 30px; padding-inline: 10px 5px; border: 1px solid #ccc; } #cart .dropdown-menu .product-info .quantity_and_price .product-price { display: flex; flex-direction: column-reverse; align-items: flex-end } #cart .dropdown-menu .product-info .quantity_and_price .product-price .price-old { font-size: 14px; color: #838383; font-weight: 400; text-decoration: line-through !important } /* --> HEADER > MINICART > PRODUCT LIST > QTY [3] ------------------------------------------------------------- */ td.text-right.product-qty { vertical-align: bottom; font-size: 18px; font-weight: bold; color: black; position: absolute; bottom: 6px; right: 0px; border: none !important; } /* --> HEADER > MINICART > PRODUCT LIST > REMOVE [3] ------------------------------------------------------------- */ td.text-center.product-remove { width: 15px; position: absolute; top: -5px; right: 25px; } header #cart .btn.btn-danger.btn-xs { background: none; border-radius: 0px; border: none; padding: 5px; transform: translate(5px, -4px); -webkit-transform: translate(5px, -4px); -moz-transform: translate(5px, -4px); -ms-transform: translate(5px, -4px); -o-transform: translate(5px, -4px); } /* --> HEADER > MINICART > BOTTOM SECTION [2] =========================================================================================================== */ li.bottom-section { margin-top: auto; display: block; position: absolute; bottom: 0px; right: 0px; background: #fff; width: 100%; padding: 25px 20px; } li.bottom-section>div.container { /* width: 390px; */ width: 100%; max-width: 100%; margin-inline: auto; display: flex; flex-direction: column; height: 100%; box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.37); } /* --> HEADER > MINICART > BOTTOM SECTION > TOTALS [3] ------------------------------------------------------------- */ /* hide secondary totals */ .bottom-section .container .totals>div:not(:first-child) { display: none; } .bottom-section .container .totals>div { display: flex; justify-content: space-between; /* text-transform: uppercase; */ color: white; } #cart .bottom-section>.container>.totals { height: 83px; min-height: 83px; display: flex; align-items: center; justify-content: flex-end; padding-inline: 36px; } #cart .bottom-section>.container>.totals>div:first-child { line-height: 1 !important; margin: 0px !important; display: flex; align-items: flex-end; gap: 25px; } .bottom-section .container .totals>div .total-title { font-size: 18px; font-weight: 500; color: #000; } .bottom-section .container .totals>div .total-text { font-size: 20px; font-weight: 500; color: #000; } /* --> HEADER > MINICART > BOTTOM SECTION > BUTTONS [3] ------------------------------------------------------------- */ #cart .dropdown-menu .cart-footer { display: flex; flex-direction: row; width: 100%; text-align: center; justify-content: center; align-items: center; margin-top: 0px !important; height: 67px !important; min-height: 67px; max-height: 67px; display: flex; flex-direction: row-reverse; box-shadow: 0px -1px #979797; } #cart .dropdown-menu .cart-footer>a { width: 100%; height: 100%; display: flex; align-items: center; justify-items: center; max-width: 100%; color: #ffffff; font-size: 14px; font-weight: bold; text-transform: uppercase; background: black; } #cart .dropdown-menu .cart-footer>a:first-child { /* margin-bottom: 10px; */ background: #3e3e3e; ; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; } #cart .dropdown-menu .cart-footer>a:last-child { border: 1px solid rgba(255, 255, 255, 0.35); background: none; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; background: white; color: black; } #cart .dropdown-menu .cart-footer>a:hover { background: var(--accent_3); border-color: var(--accent_3); color: white !important; } #cart .dropdown-menu .cart-footer>a>* { margin: 0 auto; line-height: 1.2; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH [2] =========================================================================================================== */ #search_contents { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; /* background: rgba(179, 48, 48, 0.95); */ z-index: 999999; padding: 0px 20px; transition: all 0.3s; opacity: 0; visibility: hidden; } #search_contents #search { margin-top: 250px; margin-left: auto; margin-right: auto; } .live-search-div { top: 299px !important; padding: 5px 0 40px !important; width: calc(100vw - 20px) !important; max-height: calc(100vh - 339px); } .live-search-div ul { display: flex !important; flex-wrap: wrap !important } .live-search-div ul li { flex: 1 1 auto !important; } .live-search-div ul li a { display: flex !important; flex-direction: column !important; } .live-search-div .product-image img {} .live-search-div ul li .product-name { font-weight: normal !important; line-height: normal !important; } .live-search-div ul li .product-price { width: 100% !important; text-align: left !important; font-size: 15px !important; } .live-search-div ul li .product-price .special { color: #999 !important; } .live-search-div .result-text { height: 40px !important; display: flex !important; justify-content: center !important; align-items: center !important; font-size: 15px !important; background: var(--accent_1) !important; } /* @media(max-width: 615px){ .live-search-div ul li { flex: unset !important; width: 50% !important; margin-right: 0px !important; margin-left:0px !important } } */ .search_enabled #search_contents { opacity: 1; visibility: visible; } /* html.search_enabled{ overflow:hidden !important; } */ #search_contents .close_button { cursor: pointer; top: 20px; right: 20px; position: absolute; } #search_contents .close_button svg { width: 30px; height: 30px; } #search { margin-bottom: 0px !important; } #search, .live-search-div { width: 100% !important; max-width: 1110px !important; } #search .input-lg, #search .input-group-btn, #search .btn.btn-default.btn-lg { background: none !Important; } #search .input-lg { height: 55px; line-height: normal; font-size: 18px !important; padding-left: 15px; border-bottom: 1px solid var(--accent_1) !important; color: var(--accent_1); font-weight: bold; font-style: italic; } #search .btn.btn-default.btn-lg { border-bottom: 1px solid var(--accent_1) !important; height: 55px; width: 100%; } #search .btn-lg svg { width: 30px !important; height: 30px !important; } #search .input-group-btn { width: 55px; } .live-search-div { margin-top: 27px !important; border-radius: 0px !important; box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, .2) !important; } .live-search-div ul li { display: flex !important; align-items: center !important; justify-content: center !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH UPDATE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ html.search_enabled { overflow: hidden !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH > CONTENTS [2] =========================================================================================================== */ /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH > CONTENTS > INPUT BAR [3] ------------------------------------------------------------- */ #search_contents #search { margin-top: 100px; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH > CONTENTS > RESULTS [3] ------------------------------------------------------------- */ #search_contents { overflow: auto; } .live-search-div { position: relative !important; transform: none !important; left: 0px !important; top: 0px !important; padding: 0px !important; margin-left: auto; margin-right: auto; border: none !important; box-shadow: 0px 5px 40px -5px rgba(0, 0, 0, .2) !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH > CONTENTS > RESULTS > ITEMS */ .live-search-div ul { flex-wrap: wrap !important; align-content: space-between !important; padding: 5px !important; background: white; } .live-search-div ul li { flex: 1 1 200px !important; /* flex:auto !important; */ text-align: center !important; border: 1px solid #c8c8c8 !important; margin: 5px !important; background: #f6f6f6 !important; transition: all 0.12s; } .live-search-div ul li:hover { border-color: #000 !important; } .live-search-div ul li>a *:not(img) { text-align: center !important; width: 100% !important; max-width: 150px !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH > CONTENTS > RESULTS > SHOW MORE */ .live-search-div .result-text { position: relative !important; height: 50px !important; text-transform: uppercase; font-weight: bold; } .live-search-div .view-all-results { width: 100%; height: 100%; display: flex !important; align-items: center !important; justify-content: center !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION FOOTER TOP VVV VVV VVV VVV VVV VVV VVV */ /* --> FOOTER > FOOTER TOP [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> FOOTER > FOOTER TOP > LAYOUT [2] =========================================================================================================== */ #footer_top { display: grid; grid-template-columns: 370px 500px 370px; border-top: 11px solid #EBEBEB; border-bottom: 11px solid #EBEBEB; justify-content: space-between; align-items: center; padding: 40px var(--calculatedPadding_wider) !important; width: calc(100% - 2 * var(--calculatedPadding_wider)); margin-inline: auto; margin-top: 100px; gap: 35px; } #footer_top .footer-top_column { color: #282727; } /* --> FOOTER > FOOTER TOP > INTRO COLUMN [2] =========================================================================================================== */ /* --> FOOTER > FOOTER TOP > INTRO COLUMN > TITLE [3] ------------------------------------------------------------- */ #footer_top .intro_column .intro_title { font-size: 30px; font-weight: 700; line-height: 1.2; margin-bottom: 10px } /* --> FOOTER > FOOTER TOP > INTRO COLUMN > TEXT [3] ------------------------------------------------------------- */ #footer_top .intro_column .intro_text { font-size: 20px; font-weight: 400; } /* --> FOOTER > FOOTER TOP > NEWSLETTER COLUMN [2] =========================================================================================================== */ #footer_top .newsletter_column .news-form div { width: 100%; } #footer_top .newsletter_column .email-input-wrap input, #footer_top .newsletter_column .email-input-wrap input::placeholder { font-size: 16px; color: black; font-weight: 400 !important; } #footer_top .newsletter_column .email-input-wrap { background: #EBEBEB; border-radius: 9px; padding: 20px; overflow: hidden; width: 100%; } /* --> FOOTER > FOOTER TOP > NEWSLETTER COLUMN > INPUT [3] ------------------------------------------------------------- */ #footer_top .newsletter_column .email-input-wrap input { padding: 0px !important; background: none !important; border: none !important; } /* --> FOOTER > FOOTER TOP > NEWSLETTER COLUMN > BUTTON [3] ------------------------------------------------------------- */ #footer_top .newsletter_column .email-input-wrap button#subscribe { padding-inline: 20px; transition: all .15s; } /* --> FOOTER > FOOTER TOP > NEWSLETTER COLUMN > TERMS [3] ------------------------------------------------------------- */ #footer_top .newsletter_column .buttons input { margin-right: 5px } #footer_top .newsletter_column .buttons label, #footer_top .newsletter_column .buttons label a { font-size: 13px; white-space: normal !important; } /* --> FOOTER > FOOTER TOP > SOCIALS COLUMN [2] =========================================================================================================== */ #footer_top .socials_column {} #footer_top .socials_column svg { transition: all .12s; -webkit-transition: all .12s; -moz-transition: all .12s; -ms-transition: all .12s; -o-transition: all .12s; } #footer_top .socials_column svg:hover { filter: brightness(0) invert(66%) sepia(81%) saturate(1867%) hue-rotate(359deg) brightness(105%) contrast(104%) !important; } /* --> FOOTER > FOOTER TOP > SOCIALS COLUMN > TITLE [3] ------------------------------------------------------------- */ #footer_top .socials_column h4 { font-size: 15px; font-weight: 500; text-transform: uppercase } /* --> FOOTER > FOOTER TOP > SOCIALS COLUMN > ICONS [3] ------------------------------------------------------------- */ #footer_top .socials_column svg { height: 20px } #footer_top .socials_column .socials_section { display: flex; margin-top: 20px; align-items: center; gap: 25px; } /* --> FOOTER > FOOTER TOP > RESPONSIVE [2] =========================================================================================================== */ /* --> FOOTER > FOOTER TOP > RESPONSIVE [2] =========================================================================================================== */ /* --> FOOTER > FOOTER TOP > SOCIALS COLUMN > ICONS [3] ------------------------------------------------------------- */ @media(max-width: 1180px) { #footer_top { grid-template-areas: "text newsletter" "socials socials"; grid-template-columns: 1fr 400px; gap: 20px 40px; padding-inline: 40px !important } #footer_top .newsletter_column .news-form div { margin-bottom: 0px; } #footer_top>.intro_column { grid-area: text } #footer_top>.newsletter_column { grid-area: newsletter } #footer_top>.socials_column { grid-area: socials; text-align: center; justify-content: center; display: flex !important; flex-direction: column; align-items: center } #footer_top>.socials_column .socials_section { width: fit-content !important; margin-top: 15px } } @media(max-width: 768px) { #footer_top { display: flex !important; flex-direction: column !important; align-items: flex-start; gap: 20px; padding-block: 30px !important; padding-inline: 50px !important; width: 100% !important; } #footer_top>.socials_column { text-align: left; justify-content: flex-start; align-items: flex-start; display: none !important; } } @media(max-width: 400px) { #footer_top { padding-inline: 30px !important; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION FOOTER VVV VVV VVV VVV VVV VVV VVV */ footer { clear: both; /* background: linear-gradient(90deg, #061F3E 50%, #0561D1 100%); */ /* background-image: url("/image/catalog/desikos-b2c/cut_assets/footer.png"), linear-gradient(270deg, #0561D1 0%, #061F3E 100%); */ background-repeat: no-repeat; /* background-size: auto calc(100% - 40px) !important; */ /* background-position: calc(var(--calculatedPadding) + 15px) 50% !important; */ padding-top: 0px; /* background-repeat: no-repeat; background-position: center 37px; */ display: flex; overflow: hidden; } /* footer:after { content: url("/image/catalog/desikos-b2c/desikos_cut_assets/home/footer.png"); position: absolute; right: 0px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } html:has(#common-home) footer { margin-top: 0px !important; } */ /* --> FOOTER > BACK TO TOP [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> FOOTER > BACK TO TOP > DISABLED [2] =========================================================================================================== */ #back_to_top { display: none !important; } /* --> FOOTER > BACK TO TOP > LAYOUT [2] =========================================================================================================== */ footer { position: relative; } #back_to_top { display: flex; gap: 20px; justify-content: center; align-content: center; align-items: center; color: #3a3a3a; font-size: 15px; font-weight: 700; cursor: pointer; position: absolute; right: 0px; bottom: 300px; z-index: 1; transform: rotate(-90deg) translateY(calc(-100% - 2px)); white-space: nowrap; transform-origin: top right; letter-spacing: 1.5px; } #back_to_top:before { content: ""; width: 77px; height: 2px; background: #009FE3; top: 50% !important; left: 62px; position: absolute; display: block; transition: all .5s; transform: translateX(100%); -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; } /* --> FOOTER > BACK TO TOP > SWITCH [2] =========================================================================================================== */ @media (max-width: 768px) { #back_to_top { display: block !important; } } /* --> FOOTER > COLUMNS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* html:not(.product-product) footer { margin-top: 80px; } */ /* --> FOOTER > COLUMNS > LAYOUT [2] =========================================================================================================== */ footer .container { width: 100%; padding-block: 65px 0px; } /* footer .links-row { display: flex; } footer .footer-column { flex: 1 } footer .footer-column.newsletter_socials_column { flex: 1.5; } */ footer .links-row { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* --> FOOTER > COLUMNS > TITLE [2] =========================================================================================================== */ footer .footer-column h5, .footer-column .newsletter_section>.nl_pre_title { color: #2E2B2B; font-weight: bold; text-transform: uppercase; font-size: 16px; margin-bottom: 15px; margin-top: 0px !important; } /* --> FOOTER > COLUMNS > TEXT [2] =========================================================================================================== */ footer { color: #2E2B2B; } footer .footer-column li, footer .footer-column a, footer .footer-column span, footer .footer-column p { font-size: 15px; margin: 0px 0px; /* display: block; */ color: #2E2B2B; transition: all .12s; -webkit-transition: all .12s; -moz-transition: all .12s; -ms-transition: all .12s; -o-transition: all .12s; } /* footer .footer-column a { width: fit-content; } */ footer .footer-column a:hover { color: var(--accent_3) !important; } .footer-column ul { display: flex; flex-direction: column; gap: 8px } .footer-column.infos li { display: flex; } /* --> FOOTER > COLUMNS > CONTACT INFOS COLUMN [2] =========================================================================================================== */ footer .footer-column.infos ul li span { width: 30px; display: block; } footer .footer-column.infos ul { gap: 18px } /* --> FOOTER > COLUMNS > PAYMENENTS COLUMN [2] =========================================================================================================== */ footer .footer-column.payments .payment_icons img { height: auto; width: auto; margin: 10px 10px 10px 0px; } /* --> FOOTER > COLUMNS > LINKS [2] =========================================================================================================== */ .footer-column :not(h5) { font-size: 15px; } /* --> FOOTER > COLUMNS > NEWSLETTER [2] =========================================================================================================== */ /* --> FOOTER > COLUMNS > NEWSLETTER > LAYOUT [3] ------------------------------------------------------------- */ .footer-column .newsletter_section .news-form { text-align: left; } footer .links-row>.footer-column:last-child { position: relative; /* padding-left: 104px; */ /* padding-left: max(5.5vw, var(--defaultPadding)) */ } /* footer .links-row>.footer-column:last-child::before { content: ""; width: calc(100% + var(--calculatedPadding)); height: 1000px; position: absolute; top: -75px; z-index: -0; left: 0px; background: var(--accent_2); border-radius: 150px 0 0 0; -webkit-border-radius: 150px 0 0 0; -moz-border-radius: 150px 0 0 0; -ms-border-radius: 150px 0 0 0; -o-border-radius: 150px 0 0 0; } */ footer .links-row>.footer-column:last-child .newsletter_section { z-index: 1; position: relative; } .footer-column .newsletter_section .news-form>div:has(#email) { display: flex; flex-direction: column; gap: 20px; } /* --> FOOTER > COLUMNS > NEWSLETTER > TEXTS [3] ------------------------------------------------------------- */ /* .footer-column .newsletter_section>.nl_pre_title { color: #FFFFFF; font-size: 16px; font-weight: 900; text-transform: uppercase; } */ .footer-column .newsletter_section>.nl_title { /* font-family: var(--font2); */ font-size: 45px; color: white; /* margin-top: 13px; */ margin-bottom: 7px; font-weight: bold; line-height: normal; margin-top: -10px; } .footer-column .newsletter_section>.nl_post_title { color: white; } .footer-column .newsletter_section>.news-form { margin-top: 12px !important; } /* --> FOOTER > COLUMNS > NEWSLETTER > INPUT [3] ------------------------------------------------------------- */ .footer-column .newsletter_section .news-form>div { padding: 0px !important; } .footer-column .newsletter_section .news-form input#email { background: transparent; color: white !important; opacity: 1; border-bottom: 1px solid rgba(255, 255, 255, .4) !important; font-size: 15px !important; height: 35px; /* line-height: 50px; */ padding: 0px 5px 0px 10px !important; box-sizing: border-box !important; /* width: calc(100% - 165px) !important; */ margin-right: 20px; width: 100%; margin-top: 10px; } .footer-column .newsletter_section .news-form input#email::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff !important; opacity: 1 !important; } .footer-column .newsletter_section .news-form input#email::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff !important; opacity: 1 !important; } .footer-column .newsletter_section .news-form input#email:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff !important; opacity: 1 !important; } .footer-column .newsletter_section .news-form input#email::-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff !important; opacity: 1 !important; } .footer-column .newsletter_section .news-form input#email::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff !important; opacity: 1 !important; } .footer-column .newsletter_section .news-form input#email:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff !important; } .footer-column .newsletter_section .news-form input#email::-ms-input-placeholder { /* Microsoft Edge */ color: #fff !important; } /* --> FOOTER > COLUMNS > NEWSLETTER > BUTTON [3] ------------------------------------------------------------- */ .footer-column .newsletter_section .news-form #subscribe { padding: 18px 0px !important; font-size: 14px !important; width: 145px !important; font-weight: bold; text-transform: uppercase; /*background: none; */ box-shadow: none; border: none; /*border-radius: 0px; */ box-sizing: border-box; background: var(--accent_3); line-height: 1 !important; float: right; border-radius: 8px; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } .footer-column .newsletter_section .news-form #subscribe:hover { background: var(--accent_1); } /* --> FOOTER > COLUMNS > NEWSLETTER > TERMS [3] ------------------------------------------------------------- */ .footer-column .newsletter_section .news-form .buttons { margin-top: 12px; margin-bottom: 0px; } .footer-column .newsletter_section .news-form .buttons .pull-center { margin-left: 0px !important; } .footer-column .newsletter_section .buttons { display: flex; } .footer-column .newsletter_section .buttons input[type="checkbox"] { margin-top: 2px !important; margin-right: 5px; } .footer-column .newsletter_section .buttons .pull-center { margin-left: 10px; } .footer-column .newsletter_section .buttons .pull-center { line-height: 1; font-size: 13px; } .footer-column .newsletter_section .buttons .pull-center a { display: inline !important; } .footer-column .newsletter_section .buttons .pull-center a b { margin-left: 0px !important; line-height: normal; } /* --> FOOTER > COLUMNS > NEWSLETTER > ERRORS [3] ------------------------------------------------------------- */ .footer-column .newsletter_section .error.not-valid, .footer-column .newsletter_section .error.allready { font-weight: bold; letter-spacing: normal; background: #ffd6dd; padding: 5px; text-align: center; } /* --> FOOTER > POERED BY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .powered_by { width: 100%; display: flex; justify-content: space-between; border-top: 1px solid rgba(0, 0, 0, .25); align-items: center; padding-block: 8px } .powered_by>div { display: flex; gap: 10px } .powered-row { margin-top: 50px; } .powered_by { display: flex; justify-content: space-between; font-size: 14px; line-height: normal; align-items: center !important; position: relative; z-index: 0; } .powered_by img { margin-left: 5px; } .powered_by>div { display: flex; align-items: center; } footer .powered_by a img { transition: all .12s; } footer .powered_by a:hover img { transform: rotate(16deg) scale(1.2); -webkit-transform: rotate(16deg) scale(1.2); -moz-transform: rotate(16deg) scale(1.2); -ms-transform: rotate(16deg) scale(1.2); -o-transform: rotate(16deg) scale(1.2); } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION HOME VVV VVV VVV VVV VVV VVV VVV */ /* --> HOME > SLIDESHOW [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > SLIDESHOW > LAYOUT [2] =========================================================================================================== */ #content .slideshow { width: 100vw; margin-left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } #content .slideshow .swiper-slide a, #content .slideshow .swiper-slide a img { width: 100% !important; } /* --> HOME > SLIDESHOW > TOGGLING [2] =========================================================================================================== */ @media(max-width: 768px) { #content .slideshow[api-id="27"] { display: none !important; } } @media(min-width: 769px) { #content .slideshow[api-id="130"] { display: none !important; } } /* @media(min-width: 601px) { #common-home .slideshow { display: none !important; } } */ /* @media(max-width: 600px) { .module_row_section.multi-banner-group { display: none !important; } } */ /* --> HOME > SLIDESHOW > NAVIGATION [2] =========================================================================================================== */ #content .slideshow .swiper-pagination-bullet { transition: all .22s !important; border: 3px solid #fff; width: 17px; height: 17px; box-shadow: none !important; background: #000; } #content .slideshow .swiper-pagination-bullet-active { border-color: var(--accent_3) !important; background: var(--accent_3) !important } #content .slideshow .swiper-pager { display: none !important; } /* --> HOME > SLIDESHOW > TOGGLE FOR MOBILE [2] =========================================================================================================== */ /* --> HOME > CAROUSEL > CATEGORIES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #common-home .swiper-button-next::before { content: "\f105"; } #common-home .swiper-button-prev::before { content: "\f104 "; } .swiper-button-prev:hover::before, .swiper-button-next:hover::before { color: var(--accent1) !important; } .carousel_categories.carousel_container.swiper-viewport { border: unset; box-shadow: unset; border-radius: unset; margin-bottom: 6px; padding: 25px var(--responsivePadding); margin-top: 5px; width: 100vw; margin-left: 50%; transform: translateX(-50%) } .carousel_categories.carousel_container.swiper-viewport .text_container { position: absolute; bottom: 0px; width: 100%; padding: 20px; height: 100%; max-height: max(65px, 4.5vw); transition: all 0.4s; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(13, 2, 34, .64) 100%); display: flex; flex-direction: column; justify-content: center; } .carousel_categories.carousel_container.swiper-viewport .text_container .swiper-slide-title { /* font-size: 30px; */ /* line-height: 55px; */ color: white; margin-bottom: 15px; font-weight: 500; font-size: clamp(17px, 2.2vw, 20px) !important; line-height: 1.2; text-transform: uppercase; letter-spacing: normal; transition: all .2s; border-bottom: 1px solid white; width: fit-content; margin-inline: auto; padding-inline: 10px; padding-bottom: 5px; border-color: transparent; } .carousel_categories.carousel_container.swiper-viewport .category-children { display: flex; flex-direction: column; gap: 8px; overflow: hidden; } .carousel_categories.carousel_container.swiper-viewport .category-children .list-group-item { color: white; background: transparent; border: unset; padding: 5px; /* font-size: 16px; */ /* line-height: 30px; */ transition: all 0.2s; max-width: 250px; margin: auto; border-bottom: 1px solid rgba(255, 255, 255, .5); font-weight: 400; text-transform: uppercase; text-align: center; /* margin-bottom: 15px; */ font-size: clamp(13px, 1.5vw, 16px); line-height: 1.2; border-color: transparent; border-radius: 0px !important } .carousel_categories.carousel_container.swiper-viewport .view_all_products { font-size: 14px; color: white; margin-top: 0px; overflow: hidden; /* height: 10px; */ /* width: 100px; */ width: fit-content; margin-inline: auto; transition: all .4s; opacity: 0; } .carousel_categories.carousel_container.swiper-viewport .swiper-slide:hover .view_all_products { margin-top: 50px; opacity: 1; } .carousel_categories.carousel_container.swiper-viewport .category-children .list-group-item:hover { border-color: rgba(255, 255, 255, .69); } .carousel_categories.carousel_container.swiper-viewport .category-children>a:nth-child(n+5) { display: none; } .category-children a:nth-child(n+12) { display: none; } .carousel_categories.carousel_container.swiper-viewport .category-children .list-group-item:hover { /* color: var(--accent2); */ } .carousel_categories.carousel_container.swiper-viewport .swiper-slide:hover .text_container .swiper-slide-title { border-color: rgba(255, 255, 255, .69); } @media(min-width: 769px) { .carousel_categories.carousel_container.swiper-viewport .swiper-slide:hover .text_container { max-height: 100%; background-color: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; justify-content: center; } } .carousel .section_title { /* font-weight: bold; */ margin-bottom: 40px; /* color: #000; font-size: 30px; line-height: 30px; */ } /* .swiper-slide:hover img { transform: scale(1.09); } .slideshow.swiper-viewport .swiper-slide:hover img { transform: scale(1.02); } */ .swiper-slide img, .blog-item-grid.posts { transition: all 0.5s; } .swiper-slide { overflow: hidden; } /* @media (max-width: 1450px) { .carousel_categories.carousel_container.swiper-viewport .category-children .list-group-item { font-size: 15px; line-height: 22px; } } */ /* --> HOME > CAROUSEL > CATEGORIES > RESPONSIVE [2] =========================================================================================================== */ @media(max-width: 1200px) { .carousel_categories.home_secondary_categories .swiper-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* --> HOME > CAROUSEL > CATEGORIES > RESPONSIVE > CHANGE DIMENSIONS [3] ------------------------------------------------------------- */ .carousel_categories .swiper-wrapper .swiper-slide>.swiper-slide-link { width: 100%; height: auto; aspect-ratio: 768/940; overflow: hidden !important; } .carousel_categories .swiper-wrapper .swiper-slide>.swiper-slide-link img { object-fit: cover !important; width: 100%; height: 100%; } } @media(max-width: 768px) { .carousel_categories.home_main_categories .swiper-wrapper { grid-template-columns: 1fr; gap: 5px; } /* --> HOME > CAROUSEL > CATEGORIES > RESPONSIVE > CLICK INSTEAD OF HOVER [3] ------------------------------------------------------------- */ .carousel_categories.carousel_container.swiper-viewport .swiper-slide.category_enabled .text_container { max-height: 100%; background-color: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; justify-content: center; } .carousel_categories.carousel_container.swiper-viewport .swiper-slide.category_enabled .view_all_products { margin-top: 50px; opacity: 1; } } /* --> HOME > CAROUSEL > CATEGORIES > INTO GRID [2] =========================================================================================================== */ .carousel_categories.home_main_categories .swiper-wrapper { transform: translate3d(0px, 0, 0) !important; flex-wrap: wrap; } .carousel_categories.home_main_categories .swiper-wrapper .swiper-slide { margin-right: 0px !important; width: 100% !important; } @media(min-width: 1201px) { .carousel_categories.home_secondary_categories .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } } @media(min-width: 769px) { .carousel_categories.home_secondary_categories .swiper-wrapper .swiper-slide { margin-right: 0px !important; width: 100% !important; } .carousel_categories.home_secondary_categories .swiper-wrapper { transform: translate3d(0px, 0, 0) !important; flex-wrap: wrap; } .carousel_categories .swiper-wrapper { display: grid !important; gap: 5px } .carousel_categories.home_main_categories .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } } @media(max-width: 1200px) and (min-width: 769px) { .carousel_categories.home_secondary_categories .swiper-wrapper { grid-template-columns: repeat(2, 1fr) !important; } } /* --> HOME > CAROUSEL > CATEGORIES > DETAILS [2] =========================================================================================================== */ .carousel_categories .swiper-wrapper .swiper-slide-duplicate, .latestblog_outer.disabled .swiper-wrapper .swiper-slide-duplicate { display: none !important; } .carousel_categories .swiper-pagination, .carousel_categories .swiper-pager, .latestblog_outer.disabled .swiper-pagination, .latestblog_outer.disabled .swiper-pager { display: none !important; } /* --> HOME > MASONRY-LIKE BANNER GRID [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .module_row_section.multi-banner-group { margin-top: 50px !important; } .module_row_section.multi-banner-group .section_title { display: none; } .module_row_section.multi-banner-group .columns-container, .module_row_section.multi-banner-group .columns-container .row { margin-left: 0px !important; margin-right: 0px !important; } .module_row_section.multi-banner-group .columns-container { display: grid; grid-template-columns: 32.73% 32.73% 32.12%; grid-template-rows: 21.72% 38.79% 38.79%; gap: 1.21% !important; grid-template-areas: "left top top" "left mid-top right" "left mid-bottom right"; } .module_row_section.multi-banner-group .columns-container>.column-content-1 { grid-area: left; transform: scaleY(.994); } .module_row_section.multi-banner-group .columns-container>.column-content-2 { grid-area: top } .module_row_section.multi-banner-group .columns-container>.column-content-3 { grid-area: mid-top } .module_row_section.multi-banner-group .columns-container>.column-content-4 { grid-area: mid-bottom } .module_row_section.multi-banner-group .columns-container>.column-content-5 { grid-area: right } /* --> HOME > PRODUCT CATEGORIES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > PRODUCT CATEGORIES > LAYOUT [2] =========================================================================================================== */ .carousel.product_categories { margin-top: 120px; } .carousel.product_categories .swiper-container { overflow: visible; } /* --> HOME > PRODUCT CATEGORIES > LAYOUT > BG [3] ------------------------------------------------------------- */ /* .carousel.product_categories { position: relative; z-index: 0; } .carousel.product_categories:before { content: ""; background: url("/image/catalog/desikos-b2c/cut_assets/banner 3.jpg") !important; height: 1495px; width: 100vw; position: absolute; display: block; left: 50%; top: -350px; transform: translateX(-50%); z-index: -1; } */ /* --> HOME > PRODUCT CATEGORIES > TITLE [2] =========================================================================================================== */ .carousel.product_categories .section_title { margin-bottom: 35px; } /* .carousel.product_categories .section_title * { color: white !important; } */ /* --> HOME > PRODUCT CATEGORIES > NAVIGATION [2] =========================================================================================================== */ .carousel.product_categories .swiper-pager { top: 35px !important; } .carousel.product_categories .swiper-pager>div:before { color: white !important; } /* --> HOME > PRODUCT CATEGORIES > ITEMS [2] =========================================================================================================== */ .carousel.product_categories .swiper-slide-link, .carousel.product_categories .swiper-slide-link img { width: 100% !important; } .carousel.product_categories .text_container, .carousel.product_categories .text_container .swiper-slide-link { transition: all .2s; } /* --> HOME > PRODUCT CATEGORIES > ITEMS > TITLE [3] ------------------------------------------------------------- */ .carousel.product_categories .swiper-slide .text_container { font-size: 16px; font-weight: 500; display: block !important; color: black !important; width: calc(100% - 30px); padding: 35px 10px; background: white } .carousel.product_categories .swiper-slide:hover .text_container { color: var(--accent_3) !important; } /* --> HOME > PRODUCT CATEGORIES > ITEMS > LINK TEXT [3] ------------------------------------------------------------- */ .carousel.product_categories .text_container .swiper-slide-link { color: black; margin-top: 0px; display: block; opacity: 0; visibility: hidden; margin-top: 20px; } .carousel.product_categories .text_container .swiper-slide-link:hover { text-decoration: underline; } /* --> HOME > PRODUCT CATEGORIES > ITEMS > HOVER EFFECT [3] ------------------------------------------------------------- */ .carousel.product_categories .swiper-slide:hover .text_container { transform: translateY(-30px); box-shadow: 0 4px 8px 0 rgba(98, 98, 98, 0.25); } .carousel.product_categories .swiper-slide:hover .swiper-slide-link { opacity: 1; visibility: visible; } /* --> HOME > DAILY OFFERS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .products_carousel_with_html { display: flex; align-items: flex-start; max-width: 100% !important; position: relative; margin-top: 80px } /* --> HOME > DAILY OFFERS > TITLE [2] =========================================================================================================== */ .products_carousel_with_html .section_title { margin-top: 60px !important; padding-right: 20px; } .products_carousel_with_html .section_title img { max-width: 100%; margin-bottom: 80px; } .products_carousel_with_html .section_title>* { width: 340px } .products_carousel_with_html .section_title .main_title { margin-bottom: 0px } /* --> HOME > DAILY OFFERS > PRODUCTS [2] =========================================================================================================== */ .products_carousel_with_html>.row { width: calc(100% - 440px) !important; } /* --> HOME > DAILY OFFERS > VIEW MORE [2] =========================================================================================================== */ .products_carousel_with_html .view_more { position: absolute; top: unset; right: 75px; bottom: calc(100% - 15px); z-index: 99999; color: white !important; border-color: white !important; } .products_carousel_with_html .view_more:hover { color: var(--accent_3) !important; } /* --> HOME > DAILY OFFERS > NAVIGATION [2] =========================================================================================================== */ @media(min-width: 1651px) { .products_carousel_with_html .swiper-pager { position: absolute; top: 220PX !important; bottom: unset !important; right: calc(100% + 100px) !important; } } @media(max-width: 1650px) { .products_carousel_with_html .swiper-pager { position: absolute; top: unset !important; bottom: calc(100% + 25px) } } /* --> HOME > PRODUCT TABS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .module_product_tabs { display: flex; flex-direction: column; width: 100%; /* padding-left: 50px; padding-right: 50px; */ margin-top: 134px } .module_product_tabs .swiper-container { overflow: visible !important; } /* --> HOME > PRODUCT TABS > TITLE & NAVIGATION WRAPPER [2] =========================================================================================================== */ .module_product_tabs .title_n_nav_wrapper { display: flex; justify-content: flex-start; gap: 150px; align-items: flex-end; padding-right: 65px; } /* --> HOME > PRODUCT TABS > NAV TABS [2] =========================================================================================================== */ .module_product_tabs .nav-tabs { display: flex; justify-content: flex-start; margin: 0px; border: none !important; overflow: auto; /* padding-bottom: 10px; */ max-width: 100vw; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; /* margin-left: auto; margin-right: auto; */ flex-wrap: wrap; overflow: hidden; justify-content: center; } .module_product_tabs .nav-tabs>li { margin: 8px 10px; } .module_product_tabs .nav-tabs>li>a { box-shadow: none !important; font-size: 14px; color: black !important; height: 50px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; transition: all 0.2s; background: #fff !important; line-height: normal; font-weight: 500; padding-inline: 23px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; position: relative; margin-right: 0px; margin-left: 0px; /* border-radius: 10px; */ /* border: 1px solid #c4c4c4; */ border-radius: 0px; border: 1px solid #bbb; } .module_product_tabs .nav-tabs>li>a:hover { border-color: #000 !important; } /* --> HOME > PRODUCT TABS > NAV TABS > ACTIVE [3] ------------------------------------------------------------- */ .module_product_tabs .nav-tabs>li.active>a { color: white !important; background: black !important; border-color: black !important; } /* --> HOME > PRODUCT TABS > TAB PANE [2] =========================================================================================================== */ /* carousel in tabs fix */ .module_product_tabs .swiper-container { /* padding: 0px 20px; */ } .module_product_tabs .tab-content>.tab-pane { display: block !important; height: 0px !important; /* overflow:hidden; */ opacity: 0; visibility: hidden; transition: all .8s; } .module_product_tabs .tab-content>.tab-pane.active { height: auto !important; opacity: 1; visibility: visible; } /* --> HOME > PRODUCT TABS > TAB PANE > HIDE CUSTOM TITLE [3] ------------------------------------------------------------- */ .module_product_tabs .tab-content>.tab-pane h3 { display: none !important; } /* --> HOME > PRODUCT TABS > TAB PANE > PRODUCTS [3] ------------------------------------------------------------- */ #common-home .module_product_tabs .swiper-wrapper { margin-top: 25px; } .swiper-wrapper .product-layout { width: 100% !important; } /* --> HOME > PRODUCT TABS > TAB PANE > VIEW MORE [3] ------------------------------------------------------------- */ #common-home .module_product_tabs .view_more { position: absolute; right: 0px; top: -32px; } /* --> HOME > PRODUT TABS > RESPONSIVE [2] =========================================================================================================== */ @media(max-width: 768px) { #common-home .module_product_tabs .products_carousel_inside_verical_tabs { width: calc(100% + var(--calculatedPadding)) !important; } } /* --> HOME > TABS > VERTICAL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .layout_2_tabs .cont-img-tabs>img.img-tabs { margin-left: 50% !important; transform: translateX(-50%); z-index: -65 } .layout_2_tabs .cont-img-tabs>img { margin-bottom: -435px } .layout_2_tabs .heading-carousel_new { position: relative; color: white; } .layout_2_tabs .design-new-content { display: flex; flex-direction: row; } .layout_2_tabs .design-new-content .nav-tabs { display: flex; flex-direction: column; width: 285px; /* justify-content: flex-end; */ align-items: center; padding-bottom: 65px; gap: 30px; padding-right: 55px; justify-content: flex-start; margin-top: 130px; } @media(max-width: 768px) { .layout_2_tabs .design-new-content .nav-tabs { width: 100%; padding-right: 0px !important; justify-content: flex-start; } } .layout_2_tabs .swiper-pager { position: absolute; left: 0px; top: 150px !important; transform: none; bottom: unset; } .module_product_tabs.layout_2_tabs .view_more { top: 35px !important; } .layout_2_tabs .design-new-content .nav-tabs>li { width: 100%; /* max-width: 280px; */ margin: 0px; } .layout_2_tabs .design-new-content .tab-content { width: calc(100% - 285px); } .layout_2_tabs .swiper-viewport { overflow: hidden !important; } @media(max-width: 768px) { .layout_2_tabs .design-new-content { flex-direction: column !important; } .layout_2_tabs .design-new-content .tab-content { width: 100%; } .layout_2_tabs .design-new-content .nav-tabs { width: 100%; justify-content: flex-start; flex-direction: row !important; margin-top: 10px; padding-bottom: 0px; } .layout_2_tabs .design-new-content .nav-tabs li { width: fit-content; } .module_product_tabs .nav-tabs { flex-wrap: nowrap !important; display: flex; overflow: auto; padding-bottom: 15px !important; margin-top: 30px !important; margin-bottom: -15px; gap: 20px !important; } .module_product_tabs .nav-tabs:before, .module_product_tabs .nav-tabs:after { display: none } .module_product_tabs .nav-tabs li a { white-space: nowrap; } } /* --> HOME > HOTSPOT FULLWIDTH [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .home_hotspot_fullwidth_with_text { width: 100vw; margin-left: 50%; transform: translateX(-50%); margin-top: 70px } /* --> HOME > CAROUSEL COLORS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .home_carousel_colors .section_title { margin-right: auto; width: fit-content; } .home_carousel_colors { margin-top: 100px; } .home_carousel_colors .swiper-pager { top: 5px !important; } /* --> HOME > CAROUSEL COLORS > RESPONSIVE [2] =========================================================================================================== */ @media(max-width: 768px) { .home_carousel_colors .swiper-container { width: calc(100% + var(--calculatedPadding)); } } /* --> HOME > FULLWIDTH BANNER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .home_fullwidth_banner { width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%); margin-top: 100px; } .home_fullwidth_banner *:is(.swiper-slide, img) { width: 100% !important; } /* --> HOME > HOTSPOT AND PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .hotspot-products_products .carousel .swiper-pager { top: 10px !important; right: 200px !important; } .hotspot-products_products .view_more { position: absolute; top: 12px; right: 0px } /* --> HOME > HOTSPOT AND PRODUCTS > RESPONSIVE [2] =========================================================================================================== */ @media(max-width: 990px) { .home_hotspot_n_products.module_row_section .columns-container { flex-direction: column !important; display: flex !important; gap: 80px !important; } } @media(max-width: 768px) { .hotspot-products_products .view_more { position: absolute; top: 12px; right: 0px } } /* --> HOME > MANUFACTURERS CAROUSEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .manufacturer_carousel { margin-top: 86px; position: relative; /* background: #edf1f4 !important; */ /* padding-block: 82px 134px; */ /* box-shadow: 150px 0px #edf1f4, -150px 0px #edf1f4 !important; */ } .manufacturer_carousel .swiper-container { overflow: visible; } .manufacturer_carousel .swiper-slide img { border-radius: 10px !important; /*filter: grayscale(100%); */ /*transition: all 0.3s; */ width: 100% !important; -webkit-border-radius: 10px !important; -moz-border-radius: 10px !important; -ms-border-radius: 10px !important; -o-border-radius: 10px !important; } .manufacturer_carousel .swiper-slide:hover img { filter: grayscale(0%); } /* --> HOME > MANUFACTURERS CAROUSEL > TITLE [2] =========================================================================================================== */ .manufacturer_carousel .section_title { margin-bottom: 55px; width: fit-content; } /* --> HOME > MANUFACTURERS CAROUSEL > VIEW MORE [2] =========================================================================================================== */ .manufacturer_carousel .view_more { position: absolute; top: 6px; right: 0px; } /* --> HOME > MANUFACTURERS CAROUSEL > NAVIGATION [2] =========================================================================================================== */ .manufacturer_carousel .swiper-pager { display: none !important; } /* --> HOME > 2 BANNERS (CAROUSEL AS GRID) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .home_2_banners_carousel_as_grid { margin-top: 100px; } .home_2_banners_carousel_as_grid .swiper-container { width: 100% !important; } .home_2_banners_carousel_as_grid .swiper-wrapper { gap: 70px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .home_2_banners_carousel_as_grid .swiper-wrapper :is(a, img, .swiper-slide) { width: 100% !important; height: auto !important; } /* --> HOME > 2 BANNERS (CAROUSEL AS GRID) > RESPONSIVE [2] =========================================================================================================== */ @media(max-width: 1700px) { .home_2_banners_carousel_as_grid .swiper-wrapper { gap: 30px } } @media(max-width: 1300px) { .home_2_banners_carousel_as_grid .swiper-wrapper { gap: 20px } } @media(max-width: 768px) { .home_2_banners_carousel_as_grid .swiper-wrapper { gap: 8px; flex-direction: column !important; display: flex !important; } .home_2_banners_carousel_as_grid { width: calc(100% + 2 * var(--calculatedPadding)); margin-left: 50%; transform: translateX(-50%); } } /* --> HOME > PER PROFESSION CAROUSEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > PER PROFESSION CAROUSEL > LAYOUT [2] =========================================================================================================== */ .per_profession { margin-top: 150px; } .per_profession .swiper-container { overflow: visible; } .per_profession .swiper-slide-link, .per_profession .swiper-slide-link img { width: 100% !important; } /* --> HOME > PER PROFESSION CAROUSEL > TITLE [2] =========================================================================================================== */ .per_profession .section_title { margin-bottom: 35px; } /* --> HOME > PER PROFESSION CAROUSEL > NAVIGATION [2] =========================================================================================================== */ .per_profession .swiper-pager { display: none !important; } /* --> HOME > PER PROFESSION CAROUSEL> IMAGE [2] =========================================================================================================== */ .carousel.per_profession>.swiper-container img { margin: auto; width: 100%; } .carousel.per_profession .wrapped_in_link { width: 100% !important; } /* --> HOME > PER PROFESSION CAROUSEL> TEXTS [2] =========================================================================================================== */ /* --> HOME > PER PROFESSION CAROUSEL> TEXTS > COMMON [3] ------------------------------------------------------------- */ .carousel.per_profession .swiper-slide .text_container * { color: white; } .carousel.per_profession .swiper-slide .wrapped_in_link:before, .carousel.per_profession .swiper-slide .wrapped_in_link:after, .carousel.per_profession .swiper-slide .text_container, .carousel.per_profession .swiper-slide .text_container>* { transition: all 0.25s; } .carousel.per_profession .text_container>* { z-index: 2; position: relative; } /* --> HOME > PER PROFESSION CAROUSEL> TEXTS > CONTAINER [3] ------------------------------------------------------------- */ .carousel.per_profession .swiper-slide .text_container { position: absolute; z-index: 2; bottom: 10px; width: 100%; padding-bottom: 15px; display: block } .carousel.per_profession .swiper-slide .wrapped_in_link:before { content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 200px; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.76) 100%); } .carousel.per_profession .swiper-slide .wrapped_in_link:after { content: ""; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-color: rgba(4, 4, 4, 0.45); opacity: 0; } /* --> HOME > PER PROFESSION CAROUSEL> TEXTS > TITLE [3] ------------------------------------------------------------- */ .carousel.per_profession .swiper-slide .text_container .swiper-slide-title { font-size: 18px; font-weight: bold; } /* --> HOME > PER PROFESSION CAROUSEL> TEXTS > LINK [3] ------------------------------------------------------------- */ .carousel.per_profession .swiper-slide .text_container .swiper-slide-link { font-family: var(--font2); font-size: 16px; border-bottom: 1px solid transparent; display: block; line-height: 1; overflow: hidden; max-height: 0px; opacity: 0; padding: 0px; margin: 0 auto; width: fit-content !important; } /* --> HOME > PER PROFESSION CAROUSEL> EFFECTS [2] =========================================================================================================== */ .carousel.per_profession .swiper-slide:hover .wrapped_in_link:before { opacity: 0; } .carousel.per_profession .swiper-slide:hover .wrapped_in_link:after { opacity: 1; } .carousel.per_profession .swiper-slide:hover .text_container .swiper-slide-link { border-bottom-color: white; margin-top: 10px !important; max-height: 16px; opacity: 1; } /* --> HOME > ROW [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .module_row_section { position: relative !important; margin-top: 110px !important; gap: 33px !important; } .module_row_section .swiper-viewport { max-width: 100vw !important; position: static; } .module_row_section .section_title { margin-bottom: 0px !important; } .module_row_section>.columns-container { display: flex !important; flex-wrap: nowrap !important; gap: max(2.1vw, var(--defaultPadding)) !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px !important; } /* --> HOME > ROW: BANNER AND PRODUCTS / PRODUCTS AND BANNER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > ROW:BANNER AND PRODUCTS / PRODUCTS AND BANNER > LAYOUT [2] =========================================================================================================== */ /* .module_row_section:is(.home_banner_n_products, .home_products_n_banner)>.columns-container { width: calc(100vw - var(--calculatedPadding)); } */ .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .carousel { display: flex; flex-direction: column; } /* --> HOME > ROW:BANNER AND PRODUCTS / PRODUCTS AND BANNER > PRODUCTS SECTION [2] =========================================================================================================== */ .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .products-carousel-module { width: 100%; display: block; position: relative !important; } .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .carousel.swiper-viewport { width: 100% !important; } .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .view_more { position: absolute; top: 0px; right: 0px; z-index: 2; margin: 0px; } /* --> HOME > ROW:BANNER AND PRODUCTS / PRODUCTS AND BANNER > VIEW MORE [2] =========================================================================================================== */ .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .view_more { right: 75px !important; } .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .view_more { bottom: calc(100% + 20px) !important; top: unset !important; } .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .view_more { display: none; } /* --> HOME > ROW:BANNER AND PRODUCTS / PRODUCTS AND BANNER > NAVIGATION [2] =========================================================================================================== */ .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .products-carousel-module .swiper-pager { bottom: calc(100% + 20px) !important; top: unset !important; position: relative !important; order: -99; bottom: unset !important; top: unset !important; margin-bottom: 35px; margin-left: auto; } /* --> HOME > ROW: BANNER AND PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > ROW:BANNER AND PRODUCTS > LAYOUT [2] =========================================================================================================== */ /* .module_row_section.home_banner_n_products .columns-container { margin-left: calc(-1 * var(--calculatedPadding)) !important; margin-right: 0px !important; } */ /* --> HOME > ROW:BANNER AND PRODUCTS > PRODUCTS CAROUSEL [2] =========================================================================================================== */ .module_row_section.home_banner_n_products .columns-container .column-content-2 { width: calc(100% - 30px) } /* --> HOME > ROW:BANNER AND PRODUCTS > TITLE [2] =========================================================================================================== */ /* .module_row_section.home_banner_n_products .section_title * { color: white !important; } */ /* --> HOME > ROW:BANNER AND PRODUCTS > VIEW MORE [2] =========================================================================================================== */ /* .module_row_section.home_banner_n_products .view_more { color: white !important; border-color: white !important; } */ .module_row_section.home_banner_n_products .view_more:hover { color: var(--accent_3) !important; } /* --> HOME > ROW:BANNER AND PRODUCTS > NAVIGATION [2] =========================================================================================================== */ /* .module_row_section.home_banner_n_products .carousel .swiper-pager>div::before { color: white !important; } */ /* --> HOME > ROW: PRODUCTS AND BANNER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .home_products_n_banner { margin-top: 0px !important; } /* --> HOME > ROW: PRODUCTS AND BANNER > LAYOUT [2] =========================================================================================================== */ .module_row_section.home_products_n_banner .columns-container { margin-right: 0px !important; } /* --> HOME > PRODUCT CAROUSEL WITH BG [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > PRODUCT CAROUSEL WITH BG > LAYOUT [2] =========================================================================================================== */ .module_row_section.products_carousel_n_bg { background-size: cover; width: 100vw; margin-left: 50%; transform: translateX(-50%); padding-inline: var(--calculatedPadding); margin-top: 100px !important; padding-top: 120px; height: fit-content !important; background-position: left center; } .module_row_section.products_carousel_n_bg .columns-container { display: block !important; } /* --> HOME > PRODUCT CAROUSEL WITH BG > TOP TITLE [2] =========================================================================================================== */ .module_row_section.products_carousel_n_bg>.section_title * { color: white; } /* --> HOME > PRODUCT CAROUSEL WITH BG > PRODUCTS CAROUSEL [2] =========================================================================================================== */ .module_row_section.products_carousel_n_bg .products-carousel-module { display: flex; align-items: flex-start; max-width: 100% !important; position: relative; } /* --> HOME > PRODUCT CAROUSEL WITH BG > PRODUCTS CAROUSEL > TITLE [3] ------------------------------------------------------------- */ .module_row_section.products_carousel_n_bg .products-carousel-module .section_title { min-width: 440px !important; transform: translateY(-50px); } .module_row_section.products_carousel_n_bg .products-carousel-module .section_title * { font-family: var(--font_2); max-width: 210px !important; color: white; } .module_row_section.products_carousel_n_bg .products-carousel-module .section_title>.title { font-size: 106px; line-height: .85; font-weight: bold } .module_row_section.products_carousel_n_bg .products-carousel-module .section_title>.small_text { font-size: 20px; line-height: 25px !important; color: white; font-weight: 500; margin-top: 40px; } /* --> HOME > PRODUCT CAROUSEL WITH BG > PRODUCTS CAROUSEL > PRODUCTS [3] ------------------------------------------------------------- */ .module_row_section.products_carousel_n_bg .products-carousel-module>.row { width: calc(100% - 440px) !important; margin-top: 50px; } /* --> HOME > PRODUCT CAROUSEL WITH BG > PRODUCTS CAROUSEL > VIEW MORE [3] ------------------------------------------------------------- */ .module_row_section.products_carousel_n_bg .products-carousel-module .view_more { position: absolute; top: unset; right: 75px; bottom: calc(100% - 15px); z-index: 99999; color: white !important; border-color: white !important; } .module_row_section.products_carousel_n_bg .products-carousel-module .view_more:hover { color: var(--accent_3) !important; } /* --> HOME > PRODUCT CAROUSEL WITH BG > PRODUCTS CAROUSEL > NAVIGATION [3] ------------------------------------------------------------- */ .module_row_section.products_carousel_n_bg .products-carousel-module .swiper-pager { position: absolute; top: unset !important; bottom: calc(100% - 15px); } .module_row_section.products_carousel_n_bg .products-carousel-module .swiper-pager>div:before { color: white !important; } /* --> HOME > VIDEO CAROUSEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > TEXT & BANNERS CAROUSEL > TITLE [2] =========================================================================================================== */ .video-carousel-container .pre_title, .video-carousel-container .main_title { color: white; } /* --> HOME > TEXT & BANNERS CAROUSEL > LAYOUT [2] =========================================================================================================== */ .video-carousel-container { background: var(--accent_4); margin: 0px !important; margin-top: -1px !important; padding-block: 100px 15px; box-shadow: 200px 0px var(--accent_4), -200px 0px var(--accent_4); /* margin-top: 118px !important; */ } .video-carousel-header { text-align: center; margin-bottom: 40px; position: relative; z-index: 2; } .video-carousel-header h2 { margin-top: 0px !important; } .video-swiper { margin: 50px auto 0px; position: relative; z-index: 2; width: 100%; } .video-swiper .swiper-slide { display: flex; justify-content: center; transition: all 0.3s ease; opacity: 0.7; } .video-swiper .swiper-slide-active { opacity: 1; transform: scale(1.5); z-index: 1 } .video-slide { overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); max-width: 560px; width: 100%; position: relative; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } .video-slide.active, .swiper-slide-active .video-slide { box-shadow: 0 12px 48px rgba(0, 188, 212, 0.3); } .video-carousel-container .swiper-slide:not(.swiper-slide-active) { pointer-events: none; } .video-slide iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; } /* 16:9 Aspect Ratio Container */ .video-slide::before { content: ''; display: block; width: 100%; padding-top: 56.25%; /* 16:9 aspect ratio (9/16 * 100%) */ } /* Custom Swiper Navigation */ .video-carousel-container .swiper-button-next, .video-carousel-container .swiper-button-prev { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); color: #ffffff; width: 50px; height: 50px; border-radius: 50%; backdrop-filter: blur(10px); transition: all 0.3s ease; display: none !important } .video-carousel-container .swiper-button-next:after, .video-carousel-container .swiper-button-prev:after { font-size: 18px; } .video-carousel-container .swiper-button-next:hover, .video-carousel-container .swiper-button-prev:hover { background: rgba(0, 188, 212, 0.3); border-color: var(--accent_3); transform: scale(1.1); } /* Custom Swiper Pagination */ .video-carousel-container .swiper-pagination { margin-top: 120px !important; position: relative !important; display: flex; width: fit-content; margin-inline: auto; gap: 8px } .video-carousel-container .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.3); opacity: 1; width: 12px; height: 12px; transition: all 0.3s ease; } .video-carousel-container .swiper-pagination-bullet:hover { background: white; } .video-carousel-container .swiper-pagination-bullet-active { background: #509af6; transform: scale(1.2); } /* --> HOME > TEXT UNDER VIDEO CAROUSEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .video-carousel-container+.html_section { background: var(--accent_4); box-shadow: 200px 0px var(--accent_4), -200px 0px var(--accent_4); color: white; font-size: 15px; font-weight: 400 !important; } .video-carousel-container+.html_section p { font-size: 15px; text-align: center; font-weight: 400 !important; display: block; margin: 0px; width: 100%; max-width: 670px; margin-inline: auto; padding-bottom: 125px } /* --> HOME > BANNER & BLOG [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > BANNER & BLOG > LAYOUT [2] =========================================================================================================== */ .home_banner_blog { width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%); position: relative !important; gap: 0px !important; margin-top: 0px !important; } .home_banner_blog .columns-container { display: flex !important; gap: 0px !important; } .home_banner_blog>.section_title { display: none !important; } /* --> HOME > BANNER & BLOG > BANNER [2] =========================================================================================================== */ .home_banner_blog .column-content-1 { width: 797px; } /* --> HOME > BANNER & BLOG > TEXT [2] =========================================================================================================== */ .home_banner_blog .column-content-2 { position: absolute; left: 0px; bottom: 0px; width: 797px; z-index: 1; padding-bottom: 60px; } .home_banner_blog .column-content-2>* { width: 500px; margin-left: calc((797px - 500px) / 2); } .home_banner_blog .column-content-2 .html_section h2 { margin: 0px !important; color: white !important; padding-bottom: 50px; display: block; } .home_banner_blog .column-content-2 .html_section p { color: white; font-size: 15px; font-weight: 400; } .home_banner_blog .column-content-2 .html_section a { font-weight: bold !important; color: white !important; display: block; margin-top: 25px !important } /* --> HOME > BANNER & BLOG > BLOG [2] =========================================================================================================== */ /* .home_banner_blog .column-content-3 { width: calc(100% - 797px); display: flex; align-items: center; padding-inline: var(--calculatedPadding); } */ /* --> HOME > BANNER & BLOG > BLOG > HEADING & BUTTONS [3] ------------------------------------------------------------- */ /* .latest_posts_wrapper>.heading_n_buttons { display: flex; justify-content: space-between; gap: 30px; } .latest_posts_wrapper>.heading_n_buttons>.blog_buttons { display: flex; gap: 30px; } .latest_posts_wrapper>.heading_n_buttons>a { white-space: nowrap; } */ /* --> HOME > BANNER & BLOG > BLOG > BLOG ITEMS [3] ------------------------------------------------------------- */ /* .blogpost_items_wrapper { margin-top: 50px; gap: 30px; display: flex; flex-direction: column; } .blogpost_items_wrapper>.blogpost_item { display: flex; gap: 30px; align-items: flex-start; } .blogpost_items_wrapper>.blogpost_item>.blogpost_item_content { padding-top: 15px; } .blogpost_items_wrapper>.blogpost_item>.blogpost_item_content>.blogpost_item_date { font-size: 14px; font-weight: 400; } .blogpost_items_wrapper>.blogpost_item>.blogpost_item_content>.blogpost_item_title { font-size: 20px; font-weight: 500; line-height: 1.2 } */ /* --> HOME > BANNER & BLOG > BLOG > VIEW MORE [3] ------------------------------------------------------------- */ /* .view_more_blog { margin-top: 10px; margin-left: auto; width: fit-content !important; display: flex !important; height: fit-content; } */ /* --> HOME > WHY US [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > WHY US > LAYOUT [2] =========================================================================================================== */ .html_section:has(.why_us) { display: flex; justify-content: flex-start; width: 100vw; margin-left: 50%; transform: translateX(-50%); padding: 140px var(--calculatedPadding) 60px; background-repeat: no-repeat !important; background-size: contain; background-position: bottom right; gap: 55px; background: url("/image/catalog/desikos-b2c/desikos_cut_assets/home/Shape.png"), url("/image/catalog/desikos-b2c/desikos_cut_assets/home/guy.png"), linear-gradient(135deg, #0560d2 0%, #061f3e 100%); background-position: 5% bottom, 95% bottom, center; background-repeat: no-repeat, no-repeat, no-repeat; } .html_section:has(.why_us) *:not(.section_title, .title) { color: white; font-size: 15px; } /* --> HOME > WHY US > LEFT SIDE [2] =========================================================================================================== */ .html_section:has(.why_us) .left_side { width: 100%; max-width: 385px; } .html_section:has(.why_us) .left_side * { color: white; } .html_section:has(.why_us) .left_side .section_content .text { margin-top: 28px } /* --> HOME > WHY US > RIGHT SIDE [2] =========================================================================================================== */ .html_section:has(.why_us) .right_side { width: 100%; max-width: 800px; } .html_section:has(.why_us) .right_side .intro_text { padding-inline: 90px; } .html_section:has(.why_us) .right_side .items_wrapper { display: grid; gap: 45px 55px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .html_section:has(.why_us) .right_side .items_wrapper .item { display: grid; grid-template-areas: "image title" "image text"; gap: 4px 10px; align-content: flex-start; } .html_section:has(.why_us) .right_side .items_wrapper .item img { grid-area: image; } .html_section:has(.why_us) .right_side .items_wrapper .item .title { grid-area: title; color: white; font-weight: bold; font-size: 25px; line-height: normal; margin-bottom: 5px } .html_section:has(.why_us) .right_side .items_wrapper .item text { grid-area: text; } .html_section:has(.why_us) .right_side>a { margin-top: 45px; display: block; margin-left: 82px; font-weight: 500; width: fit-content } .html_section:has(.why_us) .right_side>a:hover { text-decoration: underline !important; } /* --> HOME > CATALOG IMAGE & TEXT [2] =========================================================================================================== */ .html_section:has(.catalog) .catalog { display: grid; grid-template-columns: 688px auto; width: 100%; max-width: 1432px; margin-inline: auto; gap: 66px; padding-block: 58px 20px; align-items: center } .html_section:has(.catalog) .catalog>div { flex: 0 0 auto; } .html_section:has(.catalog) .catalog .right_side { font-size: 18px; font-weight: 500; padding-block: 60px; } .html_section:has(.catalog) .catalog .right_side .section_content { margin-top: 15px; } .html_section:has(.catalog) .catalog .right_side .common_button { margin-top: 40px; } /* --> HOME > TWO BANNERS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .module_row_section.home_two_banners { width: 100%; max-width: var(--maxContainerWidth); margin-inline: auto; margin-top: 40px !important; } .module_row_section.home_two_banners .section_title { display: none !important; } .module_row_section.home_two_banners .columns-container { display: grid; grid-template-columns: 36.36% 62.42%; } .module_row_section.home_two_banners .columns-container>div>div { width: 100% !important; } .module_row_section.home_two_banners .columns-container .column-content-1 { aspect-ratio: 600/600; } .module_row_section.home_two_banners .columns-container .column-content-2 { aspect-ratio: 1030/600; } /* --> HOME > TEXT & BANNERS SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > TEXT & BANNERS SECTION > LAYOUT [2] =========================================================================================================== */ #common-home .text_and_banners_section { display: flex; /* align-items:center; */ width: 100vw; min-width: 100vw; margin-left: 50%; transform: translateX(-50%); display: flex; } #common-home .text_and_banners_section>div { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } /* --> HOME > TEXT & BANNERS SECTION > HTML [2] =========================================================================================================== */ .text_and_banners_section>div:not(.carousel) { position: relative; padding: 100px calc((100vw - var(--maxContainerWidth))/2) 100px calc((100vw - var(--maxContainerWidth))/2) !important; text-align: center; margin-top: 60px; width: 40% !important; } .text_and_banners_section>div:not(.carousel):before { content: ""; display: block; top: 0px; left: -50vw; display: block; width: 200vw; height: 100%; position: absolute; background: var(--accent_1); opacity: 0.13; } /* --> HOME > TEXT & BANNERS SECTION > HTML > TITLE [3] ------------------------------------------------------------- */ .text_and_banners_section>div:not(.carousel) H2 { color: #000000; font-size: 30px; line-height: normal; font-weight: bold; margin-bottom: 25px; } /* --> HOME > TEXT & BANNERS SECTION > HTML > TEXT [3] ------------------------------------------------------------- */ .text_and_banners_section>div:not(.carousel) p { font-size: 18px; line-height: normal; text-align: center; margin-bottom: 25px; } /* --> HOME > TEXT & BANNERS SECTION > HTML > IMAGE [3] ------------------------------------------------------------- */ .text_and_banners_section>div:not(.carousel) img { position: absolute; bottom: 0px; transform: translateY(calc(50% + 43px)) translateX(-50%); max-width: 80%; width: 100% !Important; left: 50%; } /* --> HOME > TEXT & BANNERS SECTION > BANNERS [2] =========================================================================================================== */ .text_and_banners_section>div.carousel { padding-right: calc((100vw - var(--maxContainerWidth))/2); width: 60% !important; } #common-home .home_banner_grid .swiper-slide>*, #common-home .home_banner_grid .swiper-slide img { width: 100%; } #common-home .home_banner_grid { margin-bottom: 4px !important; } #common-home .home_banner_grid .swiper-wrapper { margin: 0px; display: flex; flex-wrap: wrap; } #common-home .home_banner_grid .swiper-wrapper .swiper-slide { margin: 4px; box-sizing: border-box; width: calc(50% - 8px) !important; } /* --> HOME > TEXT & BANNERS SECTION > BANNERS > TEXTS [2] =========================================================================================================== */ /* --> HOME > TEXT & BANNERS SECTION > BANNERS > TEXTS > COMMON [3] ------------------------------------------------------------- */ .text_and_banners_section .carousel .swiper-slide .text_container * { color: white; } .text_and_banners_section .carousel .swiper-slide:before, .text_and_banners_section .carousel .swiper-slide:after, .text_and_banners_section .carousel .swiper-slide .text_container, .text_and_banners_section .carousel .swiper-slide .text_container>* { transition: all 0.4s; } .text_and_banners_section .carousel .text_container>* { z-index: 2; position: relative; } /* --> HOME > TEXT & BANNERS SECTION > BANNERS > TEXTS > CONTAINER [3] ------------------------------------------------------------- */ .text_and_banners_section .carousel .swiper-slide .text_container { position: absolute; z-index: 2; bottom: 0px; width: 100%; padding-bottom: 30px; } .text_and_banners_section .carousel .swiper-slide:before { content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 200px; /* background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.76) 100%); */ } .text_and_banners_section .carousel .swiper-slide:after { content: ""; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-color: rgba(4, 4, 4, 0.45); opacity: 0; } /* --> HOME > TEXT & BANNERS SECTION > BANNERS > TEXTS > TITLE [3] ------------------------------------------------------------- */ .text_and_banners_section .carousel .swiper-slide .text_container .swiper-slide-title { font-size: 25px } /* --> HOME > TEXT & BANNERS SECTION > BANNERS > TEXTS > LINK [3] ------------------------------------------------------------- */ .text_and_banners_section .carousel .swiper-slide .text_container .swiper-slide-link { /* font-family: var(--font2); */ font-size: 13px; border-bottom: 1px solid transparent; border-bottom-color: transparent; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; line-height: 1; overflow: hidden; max-height: 0px; margin-top: 0px !important; opacity: 0; margin: 0px; padding: 0px; padding-bottom: 0px; margin: 0 auto; margin-top: 0px; padding-bottom: 2px; } /* --> HOME > TEXT & BANNERS SECTION > BANNERS > EFFECTS [2] =========================================================================================================== */ .text_and_banners_section .carousel .swiper-slide:hover:before { opacity: 0; } .text_and_banners_section .carousel .swiper-slide:hover:after { opacity: 1; } .text_and_banners_section .carousel .swiper-slide:hover .text_container .swiper-slide-link { border-bottom-color: white; margin-top: 30px !important; max-height: 17px; opacity: 1; } /* --> HOME > BANNER & TABS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > BANNER & TABS > BANNER [2] =========================================================================================================== */ .banner_and_tabs_section { display: flex; align-items: center; width: 100vw !important; justify-content: space-between; margin-top: 120px; } .banner_and_tabs_section>.swiper-viewport { width: 45% !important; } .banner_and_tabs_section>.swiper-viewport>.swiper-container { margin: 0px !important; } /* --> HOME > BANNER & TABS > TABS [2] =========================================================================================================== */ .banner_and_tabs_section>.module_product_tabs { width: 970px !important; transform: translateX(calc((var(--maxContainerWidth) - 100vw)/2)) !important; position: relative; z-index: 1; margin-top: 0px !important; -webkit-transform: translateX(calc((var(--maxContainerWidth) - 100vw)/2)) !important; -moz-transform: translateX(calc((var(--maxContainerWidth) - 100vw)/2)) !important; -ms-transform: translateX(calc((var(--maxContainerWidth) - 100vw)/2)) !important; -o-transform: translateX(calc((var(--maxContainerWidth) - 100vw)/2)) !important; } /* --> HOME > INSTAGRAM [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .html_section:has(.eapps-instagram-feed) { margin-top: 100px !important; } .html_section:has(.eapps-instagram-feed) .section_title { margin-bottom: 30px !important; } /* --> HOME > BLOG [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .latest-posts { padding-left: var(--FullwidthContainerPadding); padding-right: var(--FullwidthContainerPadding); } .latest-posts * { float: none; } .latest-posts>div { padding: 0px; } .latest-posts h3.headingmain { border-bottom: none !important; margin-left: 0; color: #000000; font-size: 40px !important; font-weight: 400; margin-bottom: 20px; } .latest-posts .swiper-viewport { box-shadow: none; border-radius: 0px; border: none; } /* --> HOME > BLOG > HEADING [2] =========================================================================================================== */ .blog_section_headings { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 30px } .blog_section_headings .section_title_sec { margin: 0px !important; } /* --> HOME > BLOG > ARROWS [2] =========================================================================================================== */ .latest-posts .swiper-pager { display: none; } /* --> HOME > BLOG > RESPONSIVE [2] =========================================================================================================== */ /* --> HOME > BLOG > RESPONSIVE > LAYOUT [3] ------------------------------------------------------------- */ .latest-posts { margin-top: 90px; } /* --> HOME > BLOG > RESPONSIVE > VIEW MORE [3] ------------------------------------------------------------- */ @media(max-width: 768px) { .latest-posts .view_more { /* display: none */ } .latest-posts { width: calc(100% + var(--calculatedPadding)) !important; } .latest-posts .view_more.for_mobile { margin-inline: auto !important; width: fit-content; margin-top: 20px !important; display: block !important; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION BLOG CENTRAL VVV VVV VVV VVV VVV VVV VVV */ /* --> BLOG CENTRAL > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #blog-category #content .grid_section { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); grid-gap: 70px 30px; margin-top: 30px; } .blogs_container { padding-left: var(--FullwidthContainerPadding); padding-right: var(--FullwidthContainerPadding); padding-top: 100px !important; } /* --> BLOG CENTRAL > BREADCRUMBS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .blogs_container .breadcrumb { display: none !important; } /* --> BLOG CENTRAL > GRID ITEM [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> BLOG CENTRAL > GRID ITEM > IMAGE [2] =========================================================================================================== */ .blogpost-thumb a img { padding: 0px !important; width: 100%; } /* --> BLOG CENTRAL > GRID ITEM > CAPTION [2] =========================================================================================================== */ .blogpost-thumb .caption { margin-top: 0px !important; padding: 15px 20px !important; } /* --> BLOG CENTRAL > GRID ITEM > CAPTION > TITLE [3] ------------------------------------------------------------- */ .blogpost-thumb .caption .title { display: none; } /* --> BLOG CENTRAL > GRID ITEM > CAPTION > DESCRIPTION [3] ------------------------------------------------------------- */ .blogpost-thumb .caption .description, .blogpost-thumb .caption h5 a { font-size: 16px; font-weight: 400; line-height: 28px; color: #000; } /* --> BLOG CENTRAL > GRID ITEM > CAPTION > DATE [3] ------------------------------------------------------------- */ .blogpost-thumb .caption .datebox, .blogpost-thumb .caption h4 { font-weight: normal; margin-block: 7px !important; font-size: 14px; color: #868686; } /* --> BLOG CENTRAL > BREADCRUMBS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .blogs_container .pagination_section { /* text-align: center; */ display: flex; justify-content: center; display: flex !important; margin-top: 70px; flex-direction: column; } .blogs_container .pagination_section>div { width: 100%; text-align: center; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CATEGORY PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> CATEGORY PAGE > INTRO SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .category_intro_section { width: 100vw; margin-left: 50%; transform: translateX(-50%); position: relative; height: 490px !important; overflow: hidden; } .category_intro_section img { object-fit: cover; object-position: left; width: 100%; height: 100%; } .category_intro_section .intro_texts { position: absolute; top: 150px; width: 474px; left: var(--calculatedPadding); color: white; opacity: 1; max-width: 100%; } .category_intro_section .intro_texts .category_title { font-size: 30px; font-weight: bold; } .category_intro_section .intro_texts .category_description { font-size: 15px; height: 227px; overflow: auto; line-height: 1.6; margin-top: 12px; } .category_intro_section .intro_texts .category_description::-webkit-scrollbar { width: 7px; height: 7px; } .category_intro_section .intro_texts .category_description::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; } .category_intro_section .intro_texts .category_description::-webkit-scrollbar-track { background: transparent; } .category_intro_section .intro_texts .category_description { scrollbar-width: thin; scrollbar-color: #bbb transparent; } /* --> CATEGORY PAGE > RESPONSIVE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> CATEGORY PAGE > RESPONSIVE > INTRO [2] =========================================================================================================== */ @media(max-width: 768px) { html:is(.transparent_header).product-category::before { height: 250px; } .category_intro_section img { object-position: 68% } .category_intro_section .intro_texts { display: none !important; } .category_description.for_mobile { margin-top: 35px } /* --> CATEGORY PAGE > RESPONSIVE > SUBCATEGORIES CAROUSEL [2] =========================================================================================================== */ html:not([class*="product-manufacturer-info"]) .category_title_and_children .category_title, html:not([class*="product-manufacturer-info"]) .product_list .filters_container { display: none !important; } .category_title_and_children .subcategories { flex-wrap: nowrap !important; margin-top: 0px !important; gap: 20px !important; padding-bottom: 20px; overflow: auto; width: calc(100vw - 2 * var(--calculatedPadding)) !important; max-width: 100% !important; } .category_title_and_children .subcategories>a { flex-wrap: nowrap; white-space: nowrap; height: 47px; display: flex; align-items: center; border-radius: 17px; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRODUCT PARTIALS VVV VVV VVV VVV VVV VVV VVV */ /* --> PRODUCT PARTIALS > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb { /* border: 1px solid transparent; */ transition: all .25s; transform-origin: center top; position: relative; } .product-thumb>* { text-align: left; line-height: 1.2; } .product-thumb { padding-bottom: 20px; } .product-thumb>.caption { padding-top: 25px; } .product-thumb>*:not(.image) { padding-inline: 35px 35px; /* width: calc(100% - 70px); */ margin-inline: auto; } .product-thumb .image a { padding: 45px 10px 10px; } /* --> PRODUCT PARTIALS > HOVER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .product-thumb:hover { border-color: #f0f0f0; transform: translateY(-10px); box-shadow: 0 8px 10px -4px rgba(0, 0, 0, 0.15); } */ .product-thumb:hover { /* border-color: #ccc; */ /* transform: translateY(-10px); */ box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.15); } /* --> PRODUCT PARTIALS > DARK OVERLAY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .image a, #product-product .thumbnail { position: relative; background: transparent; } /* #product-product .thumbnail:before */ .product-thumb .image a:before { content: ""; width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, .06); top: 0px; left: 0px; z-index: 3 } /* --> PRODUCT PARTIALS > EXTRA IMAGES ON HOVER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .image { position: relative; background: white !important; } .product-thumb .image a { position: relative; } .product-thumb .main-img, .product-thumb .hover-img { transition: all .3s; background: white; } .product-thumb .main-img { display: block; width: 100%; height: 100%; z-index: 1; } .product-thumb .hover-img { position: absolute; top: unset; left: 0; opacity: 0 !important; width: 100%; height: auto; z-index: 2; transform: scale(.9); bottom: 0px; } .product-thumb:hover .hover-img { opacity: 1 !important; transform: none; } /* --> PRODUCT PARTIALS > LABELS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .product-thumb>.labels_container { display: none !important } */ .labels_container { display: flex; align-items: flex-end; /* padding: 5px; */ /* height: 35px; */ position: absolute; bottom: 15px; left: 35px; z-index: 2; } /* --> PRODUCT PARTIALS > LABELS > COMMON [2] =========================================================================================================== */ .labels_container>div { color: #000; font-size: 13px; line-height: normal; padding: 0px 6px; font-weight: normal; text-align: center; white-space: nowrap; /* height: 25px; */ display: flex; align-items: center; justify-content: center; } /* --> PRODUCT PARTIALS > LABELS > NEW [2] =========================================================================================================== */ .labels_container>div.label_new { /* background: #003E68; */ } /* --> PRODUCT PARTIALS > LABELS > BESTSELLER [2] =========================================================================================================== */ .labels_container>div.label_bestseller { /* background: #101010; */ } /* --> PRODUCT PARTIALS > LABELS > SALE [2] =========================================================================================================== */ .labels_container>div.label_sale { /* background: #0561D1; */ } .labels_container>div.label_sale { font-size: 22px; font-weight: bold; color: red; } .labels_container>div.label_sale .percent { font-weight: normal; font-size: 22px } /* --> PRODUCT PARTIALS > COUNTDOWNS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .countdown_container { display: none; cursor: default; } .products_on_countdown .product-thumb .countdown_container { display: flex; position: absolute; top: 10px; right: 15px; align-items: center; gap: 10px; z-index: 4; } .products_on_countdown .product-thumb .countdown_container>div.separator { font-weight: bold; } .products_on_countdown .product-thumb .countdown_container>div:not(.separator) { width: 49px; height: 49px; border: 1px solid #d3deef; border-radius: 9px; align-items: center; justify-content: center; display: flex; flex-direction: column; background: white; } .products_on_countdown .product-thumb .countdown_container>div:not(.separator) .time_box { color: var(--accent_3); font-weight: bold; font-size: 17px; } .products_on_countdown .product-thumb .countdown_container>div:not(.separator) .time_label { font-size: 10px; font-weight: normal; text-transform: uppercase; margin-top: 3px } /* --> PRODUCT PARTIALS > MANUFACTURER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .caption>.manufacturer {} /* --> PRODUCT PARTIALS > TITLE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb h4 { margin: 0px; margin-top: 4px; } .product-thumb h4 a { font-size: 14px; font-weight: 500; color: #5F5F5F; line-height: 20px; margin: 0px; /* display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 45px; */ } /* --> PRODUCT PARTIALS > DESCRIPTION (DISABLED) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .caption>.product_description { color: #414141; font-size: 14px; font-weight: 400; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; /* Adjust based on your line height to approximate 50px */ -webkit-box-orient: vertical; overflow: hidden; height: 45px; display: none; } /* --> PRODUCT PARTIALS > MODEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .caption>.model_section { display: flex; margin-top: 40px; gap: 4px } .product-thumb .caption>.model_section>div { font-size: 14px; color: #767676 } /* --> PRODUCT PARTIALS > COLORS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .color_options { display: none!important; margin-top: 10px; min-height: 61px; } .product-thumb .color_options { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; /* padding: 6px 0 4px; */ min-height: 48px; } .product-thumb .color_options .color-swatch-label { display: block; position: relative; cursor: pointer; width: 22px; height: 22px; border-radius: 4px; border: 2px solid transparent; box-sizing: border-box; transition: border-color 0.2s ease, transform 0.15s ease; flex-shrink: 0; } .product-thumb .color_options .color-swatch-label:hover { border-color: #555; transform: scale(1.1); } .product-thumb .color_options .color-swatch-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .product-thumb .color_options .color-swatch-label:has(.color-swatch-radio:checked) { border-color: #222; box-shadow: 0 0 0 1px #222; } .product-thumb .color_options .color-swatch { display: block; width: 100%; height: 100%; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.12); box-sizing: border-box; background-size: cover; background-position: center; } /* --> PRODUCT PARTIALS > AVAILABILITY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .availability_section { margin-top: 15px; } .product-thumb .availability_section>div { font-size: 13px; /* text-transform: uppercase; */ font-weight: 500; } .product-thumb .availability_section>div { color: #e7750a } .product-thumb .availability_section.availability_id_7>div { color: #2C7E00 } /* --> PRODUCT PARTIALS > PRICE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .price-cont { margin-top: 10px } .product-thumb .price-cont { font-size: 17px; font-weight: bold; color: #000000; /* line-height: 1.2; */ /* margin-top: 25px !important; */ } .product-thumb .price-cont .price-tax { display: none; } .product-thumb .price-cont p { margin-bottom: 0px !important; } .product-thumb.ask_for_price .price-cont { visibility: hidden; } .product-thumb .price-cont .price-old { text-decoration: line-through !important; color: #959595; font-size: 12px; font-weight: normal; margin-left: 8px } /* --> PRODUCT PARTIALS > BUTTONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .button-group { height: fit-content !important; max-height: unset !important; } /* --> PRODUCT PARTIALS > BUTTONS > CART [2] =========================================================================================================== */ .product-thumb .cart_button, .product-thumb .cart_options_button { margin-top: 20px !important; width: 100% !important; background: black !important; border-radius: 0px !important; height: 50px !important; min-height: 50px !important; color: white; transition: all .25s !important; display: flex !important; font-size: 14px; padding: 0px !important; display: flex !important; justify-content: center; align-items: center; font-weight: 400; text-transform: uppercase; border: none; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; -ms-border-radius: 0px !important; -o-border-radius: 0px !important; } .product-thumb .cart_button:hover, .product-thumb .cart_options_button:hover { background: var(--accent_3) !important; color: white !important; } .product-thumb .cart_button { margin-top: 0px !important; } /* --> PRODUCT PARTIALS > CLICK CART [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PARTIALS > CLICK CART > PREPARE LAYOUT [2] =========================================================================================================== */ .product-thumb .caption .bottom_section { position: relative; } .product-thumb { overflow: visible !important; position: relative; } /* --> PRODUCT PARTIALS > CLICK CART > STEPPER [2] =========================================================================================================== */ .product-thumb .stepper_buttons { display: flex; align-items: center; justify-content: center; /* margin-bottom: 20px !important; */ margin-top: 12px; } .product-thumb label[for="input-quantity"] { display: none; } .product-thumb label { font-size: 15px; font-weight: bold; text-transform: uppercase; margin: 0px; display: block; width: 170px; } .product-thumb #input-quantity { height: 32px; width: 32px; min-width: 32px; font-size: 16px; font-weight: 500; color: black; border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: none !important; border-radius: 0px !important; text-align: center !important; padding: 0px; pointer-events: none; -moz-appearance: textfield; } .product-thumb #input-quantity::-webkit-outer-spin-button, .product-thumb #input-quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .product-thumb button.ctm-stepper { width: 45px; height: 32px; border-radius: 0px; border: none !important; box-shadow: none !important; overflow: hidden; background: none; } .product-thumb button.ctm-stepper::before { font-size: 21px; font-weight: normal; display: block; background: none !important; } .product-thumb button.ctm-stepper:first-of-type:before { content: "-"; /* transform: scaleX(1.5); */ } .product-thumb button.ctm-stepper:last-of-type:before { content: "+"; } /* --> PRODUCT PARTIALS > CLICK CART > OPTIONS [2] =========================================================================================================== */ /* --> PRODUCT PARTIALS > CLICK CART > OPTIONS > LAYOUT [3] ------------------------------------------------------------- */ .product-thumb .product-options-hover .cart_button { margin-top: 15px !important; } .product-options-hover>.options_section { margin-top: 20px; } .product-thumb .options_section>.form-group { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 9px !important; } .product-options-hover { padding: 15px 15px; } .product-options-hover>.form-group { display: flex; flex-direction: column; margin-bottom: 0px !important; margin-top: auto; } .product-options-hover>.form-group>.control-label { color: #5c5c5c; font-size: 15px; line-height: 1; text-align: right; } /* --> PRODUCT PARTIALS > CLICK CART > OPTIONS > LABELS [3] ------------------------------------------------------------- */ .product-options-hover>.options_section .form-group>.control-label { color: #5c5c5c; font-size: 15px; line-height: 1; text-align: left; margin-right: 10px; } .product-options-hover>.options_section .form-group>.control-label { width: 50%; margin: 0px !important; } .product-options-hover>.options_section .form-group>.control-label:before { display: none !important; } .product-options-hover>.options_section .form-group>.control-label+* { width: 50%; margin: 0px !important; } /* --> PRODUCT PARTIALS > CLICK CART > OPTIONS > INPUTS [3] ------------------------------------------------------------- */ .product-options-hover>.options_section .form-group>.control-label+* { width: 50%; margin: 0px !important; border-radius: 0px !important; box-shadow: none !important; } .product-options-hover>.options_section select { height: 50px; min-height: 50px; max-height: 50px; padding: 0px 20px; border-radius: 10px; width: 100%; font-size: 14px; color: #2e2b2b; font-weight: 500 !important; outline: None !important; box-shadow: none !important; border: 1px solid #d8d8d8; width: fit-content; margin-inline: auto; font-weight: 400 !important; } /* --> PRODUCT PARTIALS > CLICK CART > OPTIONS > ERROR [3] ------------------------------------------------------------- */ .product-options-hover>.options_section .form-group .text-danger { width: 100% !important; font-size: 12px !important; margin-top: 5px; text-align: center; } /* --> PRODUCT PARTIALS > CLICK CART > INNER CART [2] =========================================================================================================== */ .product-options-hover>.form-group .button-cart {} .product-thumb:not(:has(select)) .product-options-hover .button-cart { /* margin-top: 50px !important; */ } /* --> PRODUCT PARTIALS > CLICK CART > CLOSE BUTTON [2] =========================================================================================================== */ @media(min-width: 769px) { .product-options-hover .close-btn { display: none; } } .product-options-hover .close-btn { font-size: 0px; line-height: 0px; position: absolute; top: 10px; right: 10px; } .product-options-hover .close-btn:before { content: ""; width: 12px; height: 12px; display: block; cursor: pointer; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='50px' height='50px'%3E%3Cpath d='M 40.783203 7.2714844 A 2.0002 2.0002 0 0 0 39.386719 7.8867188 L 25.050781 22.222656 L 10.714844 7.8867188 A 2.0002 2.0002 0 0 0 9.2792969 7.2792969 A 2.0002 2.0002 0 0 0 7.8867188 10.714844 L 22.222656 25.050781 L 7.8867188 39.386719 A 2.0002 2.0002 0 1 0 10.714844 42.214844 L 25.050781 27.878906 L 39.386719 42.214844 A 2.0002 2.0002 0 1 0 42.214844 39.386719 L 27.878906 25.050781 L 42.214844 10.714844 A 2.0002 2.0002 0 0 0 40.783203 7.2714844 z'%3E%3C/path%3E%3C/svg%3E"); /* -webkit-filter: grayscale(1) invert(1); filter: grayscale(1) invert(1); */ padding: 0px !important; z-index: 2; } /* --> PRODUCT PARTIALS > CLICK CART > EFFECT [2] =========================================================================================================== */ .product-thumb .product-options-hover { position: absolute; bottom: -100px; left: 0px; /* width: 100%; */ transition: all 0.23s; opacity: 0; /* transform: translateY(10px); */ visibility: hidden; background: white !important; /* margin-left: -10px; */ /* margin-bottom: -10px; */ box-shadow: 0 0 15px 2px rgba(40, 40, 40, 0.12); display: flex; flex-direction: column; z-index: 3; width: calc(100% - 40px); margin-left: 20px !important; } .product-thumb .product-options-hover:not(:has(select)) .cart_button { /* margin-top: 50px !important; */ } .product-thumb.hover_options_enabled .product-options-hover { opacity: 1; transform: translateY(-15px) !important; visibility: visible !important; -webkit-transform: translateY(-15px) !important; -moz-transform: translateY(-15px) !important; -ms-transform: translateY(-15px) !important; -o-transform: translateY(-15px) !important; } /* --> PRODUCT PARTIALS > KEEP CAPTION UP AS ON WHEN HOVERED [3] ------------------------------------------------------------- */ .product-thumb.hover_options_enabled { box-shadow: none !important; } .product-thumb.hover_options_enabled .caption { transform: translateY(0px) !important; background: white !important; } /* --> PRODUCT PARTIALS > RESPONSIVE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 990px) { .product-thumb .labels_container { position: relative !important; margin-top: 30px; height: 15px; padding-inline: 10px; left: unset; } .product-thumb> :not(.image) { padding-inline: 10px } .product-thumb .caption { margin-top: 0px !important; padding-top: 3px !important; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CATEGORY-LIKE VVV VVV VVV VVV VVV VVV VVV */ /* --> CATEGORY-LIKE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-category, #product-manufacturer, #produt-search { width: 100%; } #product-category>.row>#column-left, #product-manufacturer>.row>#column-left, #produt-search>.row>#column-left { width: 354px !important; } .product-category body, .product-search body, .product-manufacturer body { overflow: visible } .product-list #content { overflow: hidden; } /* --> CATEGORY-LIKE > INTRO SECTION > COLUMN LEFT [2] =========================================================================================================== */ #column-left { padding-inline: 0px !important } #product-category #column-left #column-left, #product-manufacturer #column-left #column-left, #product-search #column-left #column-left { width: 100%; padding: 0; margin-top: 45px; position: sticky; top: 135px; } #product-manufacturer #column-left #column-left, #product-search #column-left #column-left { margin-top: 0px !important; } /* --> CATEGORY-LIKE > INTRO SECTION > FOOTER [2] =========================================================================================================== */ /* body:has(#product-category) footer, body:has(#product-manufacturer) footer, body:has(#product-search) footer { margin-top: 80px !important; } */ /* --> CATEGORY-LIKE > BREADCRUMB [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* #product-category .breadcrumb { margin-bottom: 58px !important; } */ /* --> CATEGORY-LIKE > BOTTOM PAGINATION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-category .pagination_container.at_bottom, #product-manufacturer .pagination_container.at_bottom, #product-search .pagination_container.at_bottom { margin-top: 45px !important; width: fit-content; margin-inline: auto; } /* --> CATEGORY-LIKE > INTRO SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> CATEGORY-LIKE > INTRO SECTION > DESCRIPTION [2] =========================================================================================================== */ /* #product-category .description_section, #product-manufacturer .description_section, #product-search .description_section { line-height: 1.8; } @media(min-width: 769px) { #product-category .description_section, #product-manufacturer .description_section, #product-search .description_section { height: 150px; overflow: auto; margin-bottom: 0px; margin-bottom: 25px; } #product-category .description_section, #product-manufacturer .description_section, #product-search .description_section, #product-category .description_section *, #product-manufacturer .description_section *, #produt-search .description_section * { color: black !important; } } .description_section::-webkit-scrollbar { width: 7px; height: 7px; } .description_section::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; } .description_section::-webkit-scrollbar-track { background: transparent; } .description_section { scrollbar-width: thin; scrollbar-color: #bbb transparent; } #column-left .description_section { visibility: hidden; } */ /* --> CATEGORY-LIKE > INTRO SECTION > BACKGROUND [2] =========================================================================================================== */ /* .category_intro_section { width: 100vw; margin-left: 50%; transform: translateX(-50%); position: relative; } @media(min-width: 1271px) { .category_intro_section { background: #e1e7f0 !important; } } */ /* --> CATEGORY-LIKE > INTRO SECTION > PAGINATION [2] =========================================================================================================== */ #product-category .sorting_bar .pagination_container .pagination>li>a:hover { background: var(--accent_2) !important; color: white !important; } #product-category .sorting_bar .pagination_container .pagination>li.active>span { background: var(--accent_3) !important; font-weight: bold } /* --> CATEGORY-LIKE > INTRO SECTION > CATEGORY PAGE EXCEPTIONS [2] =========================================================================================================== */ /* @media(min-width: 769px) { #product-category .breadcrumb *, #product-category .description_section *, #product-category .sorting_bar .form-group label, #product-category .sorting_bar .form-group select, #product-category .sorting_bar .pagination_container .pagination>li>a { color: white !important; } } */ /* --> CATEGORY-LIKE > SORTING BAR [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-category .sorting_bar .form-group select option { color: black !important; } /* --> CATEGORY-LIKE > SORTING BAR > LAYOUT [2] =========================================================================================================== */ .sorting_bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; } .sorting_bar>div { float: none; width: fit-content; padding-inline: 0px; } body:has(#product-category, #product-manufacturer, #produt-search) { overflow: visible; } /* #column-left #column-left { position: sticky; top: 10px; margin-top: 10px; } */ /* --> CATEGORY-LIKE > SORTING BAR > LIMITS [2] =========================================================================================================== */ .sorting_bar .form-group { margin-bottom: 0px; } .sorting_bar .form-group label { background: unset; text-transform: uppercase; font-weight: 500; color: #000; border: unset; height: 30px; font-size: 15px; padding-left: 0px; } .sorting_bar .form-group select { font-size: 14px; padding-inline: 15px !important; /* max-width: 195px !important; */ background: transparent !important; width: fit-content !important; } /* --> CATEGORY-LIKE PAGINATION [2] =========================================================================================================== */ .sorting_bar .pagination_container { margin-left: unset !important; } /* --> CATEGORY-LIKE > FILTERS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-category .mfilter-box .box-heading, #product-manufacturer .mfilter-box .box-heading, #product-search .mfilter-box .box-heading { font-size: 20px; line-height: 1.2; font-weight: bold; margin-bottom: 20px; color: black !important; letter-spacing: normal !important; } /* ==================================================== PRODUCTS PER ROW SELECTOR (mobile filter panel) ==================================================== */ li.mfilter-per-row-selector { display: none !important; margin-bottom: 20px !important; } .columns_selector { display: flex; border: 1px solid #b0b0b0 !important; padding: 0px 15px; align-items: center; justify-content: center; height: 44px !important; cursor: pointer; opacity: 0.37; } .single_column_display .columns_selector.single_column { opacity: 1; } .double_column_display .columns_selector.double_column { opacity: 1; } .columns_selector .square_bullet { width: 16px; height: 16px; background: #000; } .columns_selector .square_bullet+.square_bullet { margin-left: 12px; } @media (max-width: 768px) { li.mfilter-per-row-selector { display: flex !important; } .mfilter-per-row-selector { padding-top: 20px !important; padding-bottom: 20px !important; border-top: 1px solid #d8d8d8; margin-top: 10px !important; } html.single_column_display .row.product-list-grid { grid-template-columns: 1fr !important; } html.double_column_display .row.product-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } .mfilter-per-row-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } .mfilter-per-row-label { font-size: 15px; padding-left: 0px !important; font-weight: bold; text-transform: none !important; } .mfilter-per-row-buttons { display: flex; align-items: center; gap: 8px; } .mfilter-per-row-btn { background: none; border: none; cursor: pointer; padding: 4px; color: #ccc; display: flex; align-items: center; justify-content: center; transition: color 0.2s; -webkit-transition: color 0.2s; } .mfilter-per-row-btn.active { color: #000; } /* --> CATEGORY-LIKE > PRODUCT LIST [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 768px) { .promo-grid-item { grid-column: 1 / -1 !important; } } .product-list-grid { margin-top: 30px; } .product-list-grid .product-layout { width: 100%; padding: 0px; padding-bottom: 75px; } .product-list-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-column-gap: 30px !important; grid-row-gap: 30px !important; } #product-category>.row, #product-manufacturer>.row, #product-search>.row { display: flex; /* gap: 68px; */ } .row.product-list-grid::before, .row.product-list-grid::after { display: none !important; } @media(max-width: 1024px) { #product-category .row.product-list-grid, #product-manufacturer .row.product-list-grid, #product-search .row.product-list-grid { grid-template-columns: 1fr 1fr; } } @media(max-width: 355px) { #product-category .row.product-list-grid, #product-manufacturer .row.product-list-grid, #product-search .row.product-list-grid { grid-template-columns: 100%; } } /* --> CATEGORY-LIKE > LEFT SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> CATEGORY-LIKE > LEFT SECTION > FILTERS CONTAINER [2] =========================================================================================================== */ @media(min-width:768px) and (max-width: 1024px) { .scroll-wrapper>.scroll-content { max-height: 180px !important; } } /* --> CATEGORY-LIKE > LEFT SECTION > FILTERS RESET BUTTON [2] =========================================================================================================== */ /* .mfilter-button .mfilter-button-reset { display: none; } */ /* .mfilter-button .mfilter-button-reset { border: solid 1px black; border-radius: 4px; padding: 5px; color: black; font-size: 15px; margin-bottom: 10px; text-decoration: none !important; } .mfilter-button .mfilter-button-reset:hover { background: black; color: white; transition: all 0.5s; } .mfilter-button.mfilter-button-top i { margin-right: 7px; } */ /* --> CATEGORY-LIKE > LEFT SECTION > SECTION ITEMS [2] =========================================================================================================== */ .mfilter-content>ul { display: flex; margin-top: 0px; flex-direction: column; gap: 10px; padding-bottom: 50px !important; } .mfilter-content>ul>li { margin-top: 0px; margin-bottom: 0px !important; } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION ITEMS > SCROLL [3] ------------------------------------------------------------- */ .mfilter-iscroll>.scroll-element, .mfilter-iscroll>.scroll-element div { z-index: 1 !important; } .mfilter-iscroll>.scroll-element .scroll-element_track { background: #ccc !important; } .mfilter-iscroll>.scroll-element .iScrollIndicator { background: var(--accent2) !important; opacity: 1 !important; } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION TITLES [2] =========================================================================================================== */ .mfilter-heading { background: none; border: none !important; } .mfilter-heading-text span { font-size: 15px; font-weight: bold; text-transform: none !important; } .mfilter-filter-item .mfilter-iscroll .mfilter-options, .mfilter-heading-content { padding: 0px !important; } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION TITLES > COLLAPSE ICONS [3] ------------------------------------------------------------- */ .mfilter-heading .mfilter-head-icon { background: none !important; transform: none !important; width: auto !important; height: auto !important; margin: 0px !important; transition: none !important; transform-origin: center center !important; } .mfilter-heading .mfilter-head-icon::after { content: ""; display: block; width: 14px; height: 9px; background: url('/image/catalog/_assets_verobags/cut/other pages/arrow down black.svg') no-repeat center / contain; transform: rotate(180deg); transition: transform .2s; } .mfilter-heading.mfilter-collapsed .mfilter-head-icon { transform: none !important; } .mfilter-heading.mfilter-collapsed .mfilter-head-icon::after { transform: rotate(0deg); } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION CONTENT [2] =========================================================================================================== */ .mfilter-opts-container { border: none !important; padding-top: 12px } .mfilter-tb-as-td.mfilter-col-input { padding: 0px !important; } .mfilter-tb-as-td { border: none !important; } .mfilter-col-input+.mfilter-tb-as-td { border: none !important; font-size: 14px; padding: 3px 0px 3px 10px !important } /* @media(min-width:768px) and (max-width: 1024px) { .mfilter-col-input+.mfilter-tb-as-td { font-size: 18px; } } */ .mfilter-category-tree ul li a { font-size: 16px !important; color: black !important; } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION CONTENT > SCROLLBARS */ .scroll-wrapper.mfilter-scroll-standard::-webkit-scrollbar { width: 7px; height: 7px; } .scroll-wrapper.mfilter-scroll-standard::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; } .scroll-wrapper.mfilter-scroll-standard::-webkit-scrollbar-track { background: transparent; } /* For Firefox */ .scroll-wrapper.mfilter-scroll-standard { scrollbar-width: thin; scrollbar-color: #bbb transparent; } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION CONTENT > PRICE [3] ------------------------------------------------------------- */ .mfilter-price-inputs { margin-top: 20px; } .mfilter-price-inputs .separator { width: 15px; display: inline-block; } .mfilter-price-inputs>input { width: 35px !important; height: 35px !important; font-size: 15px !important; font-weight: bold; color: black; border: 1px solid #979797 !important; border-radius: 0px !important; box-shadow: none !important; min-width: 35px !important; padding: 0px; text-align: center; margin: 0px 5px !important; } .mfilter-price-slider { margin-top: 25px; background: none !important; } .mfilter-slider-slider, #mfilter-price-slider { margin: 0 !important; display: block; position: relative; background: #D8D8D8 !important; margin-left: 5px !important; border-radius: 10px !important; } .mfilter-slider-slider, #mfilter-price-slider { height: 7px !important; } .mfilter-slider-slider .ui-slider-handle, #mfilter-price-slider .ui-slider-handle { margin-top: 1px; border-radius: 100% !Important; box-shadow: none !Important; background: none !important; background: #3B3838 !important; width: 14px !important; height: 14px !important; } .mfilter-box-83 .mfilter-slider-slider .ui-slider-range, .mfilter-box-83 #mfilter-price-slider .ui-slider-range { background: #3B3838 !important; margin-left: -5px; } .mfilter-price-inputs label { display: inline !important; position: relative; overflow: visible; font-size: 0px; } .mfilter-price-inputs>label:first-of-type:after { content: "Από"; font-size: 15px; } html[lang*="en"] .mfilter-price-inputs>label:first-of-type:after { content: "From"; } .mfilter-price-inputs>label:last-of-type { margin-left: 5px; } .mfilter-price-inputs>label:last-of-type:after { content: "Έως"; font-size: 15px; } html[lang*="en"] .mfilter-price-inputs>label:last-of-type:after { content: "To"; } /* --> CATEGORY-LIKE > FITLERS > CHECKBOXES [2] =========================================================================================================== */ /* --> CATEGORY-LIKE > FILTERS > DROPDOWNS > RADIOS/CHECKBOXES [3] ------------------------------------------------------------- */ /* .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="radio"], .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="checkbox"] { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; line-height: 1 !important; margin-left: 0px !important; outline: none; } .mfilter-tb-as-td { font-size: 0px; } .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="radio"]::before, .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="checkbox"]::before { content: ""; width: 18px; height: 18px; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EE78737F1-08BC-48B9-BCFA-75C6A6810B7E%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='PRODUCT-LIST-_-FILTERS-OPEN' transform='translate(-987.000000, -787.000000)' fill='%23FFFFFF' stroke='%23CDCDCD'%3E%3Cg id='Group-13' transform='translate(0.000000, 460.000000)'%3E%3Cg id='Group-4' transform='translate(987.000000, 168.000000)'%3E%3Cg id='Group-8' transform='translate(0.000000, 39.000000)'%3E%3Cg id='Rectangle' transform='translate(0.000000, 120.000000)'%3E%3Crect x='0.5' y='0.5' width='17' height='17' rx='2'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="radio"]:checked::before, .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="checkbox"]:checked::before { background-size: 100%; background-image: url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EELEMENT/RADIO BUTTON/BOOKS Copy 30%3C/title%3E%3Cg id='PAGES' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='PRODUCT-LIST-' transform='translate(-24.000000, -982.000000)'%3E%3Cg id='tick-2' transform='translate(24.000000, 982.000000)'%3E%3Crect id='Rectangle' fill='%23F50000' x='0' y='0' width='18' height='18' rx='2'/%3E%3Cpath d='M6.07139037,13.507445 L3.66497326,10.9354276 C3.08743316,10.2429614 3.08743316,9.15480021 3.66497326,8.46233398 L3.66497326,8.46233398 C4.14625668,7.8687915 5.10882353,7.76986776 5.68636364,8.36341024 C5.78262032,8.36341024 5.78262032,8.46233398 5.78262032,8.46233398 L7.03395722,9.94619018 L12.1355615,4.50538413 C12.7131016,3.91184165 13.6756684,3.91184165 14.2532086,4.50538413 C14.2532086,4.50538413 14.2532086,4.50538413 14.2532086,4.50538413 L14.2532086,4.50538413 C14.8307487,5.09892661 14.8307487,6.08816407 14.2532086,6.68170655 L7.70775401,13.507445 C7.32272727,14.0020638 6.5526738,14.0020638 6.07139037,13.507445 C6.07139037,13.507445 6.07139037,13.507445 6.07139037,13.507445' id='Path' fill='%23FFFFFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } */ /* --> CATEGORY-LIKE > RESPONSIVE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(min-width: 769px) { .mfilter-button-bottom { display: none !important; } } /* Mobile-only sort/limit item injected into mfilter sidebar — hidden on desktop where sort already shows in the control bar */ .mfilter-sort-limit-item { display: none; } @media(max-width: 768px) { .mfilter-sort-limit-item { display: list-item; } /* --> CATEGORY-LIKE > RESPONSIVE > PRODUCTS PER PAGE [2] =========================================================================================================== */ .category-like .control_and_products>.control_bar { display: none !important; } /* --> CATEGORY-LIKE > RESPONSIVE > FILTERS [2] =========================================================================================================== */ /* --> CATEGORY-LIKE > RESPONSIVE > FILTERS > TOGGLE [3] ------------------------------------------------------------- */ #product-category { overflow: visible !important; } .display_and_filters_toggle { display: flex !important; flex-direction: row !important; gap: 20px; border-top: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; padding-block: 18px !important; margin-top: 20px; margin-bottom: 10px; width: calc(100% + 2 * var(--calculatedPadding)); margin-left: 50%; transform: translateX(-50%); padding-left: var(--calculatedPadding) !important; cursor: pointer; /* position: sticky !important; */ z-index: 5 !important; background: white !important; } .display_and_filters_toggle { position: sticky !important; top: var(--totalHeaderHeight) !important; } /* html:not(.fixedToTop) .display_and_filters_toggle { position: relative !important; } */ .display_and_filters_toggle img { width: 22px; } .display_and_filters_toggle span { font-size: 19px; font-weight: bold; color: #444444; } /* --> CATEGORY-LIKE > RESPONSIVE > FILTERS > SORT/LIMIT INSIDE MFILTER SIDEBAR [2] =========================================================================================================== */ .mfilter-sort-limit-item { list-style: none; padding: 15px var(--calculatedPadding, 15px); border-bottom: 1px solid #d8d8d8; } .mfilter-sort-limit-item .view_block { position: static !important; visibility: visible !important; opacity: 1 !important; transform: none !important; background: transparent !important; border: none !important; padding: 0 !important; display: flex; flex-direction: column; gap: 12px; } .mfilter-sort-limit-item .view_block .form-group { width: 100%; margin-bottom: 0; display: flex !important; flex-direction: column; align-items: stretch; gap: 6px; border: none !important; border-collapse: separate !important; } .mfilter-sort-limit-item .view_block .form-group label { background: unset !important; background-color: transparent !important; border: none !important; padding: 0 !important; text-align: left !important; display: block !important; width: auto !important; height: auto !important; font-weight: 500; font-size: 14px; color: #444; text-transform: uppercase; white-space: normal !important; } .mfilter-sort-limit-item .view_block .form-group select { width: 100% !important; border: 1px solid #d8d8d8 !important; border-radius: 0 !important; height: 36px; display: block !important; background: white !important; } /* --> CATEGORY-LIKE > RESPONSIVE > FILTERS > BOTTOM BUKTTONS [2] =========================================================================================================== */ .mfilter-button-bottom { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); position: fixed !important; bottom: 0px !important; left: 0px; width: 100% !important; max-width: 100% !important; margin: 0px !important; padding: 0px !important; box-shadow: 0 -3px 32px 0px rgba(0, 0, 0, .25); } .mfilter-button-bottom .mfilter-button-reset, .mfilter-button-bottom .custom-close-filter { font-size: 14px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; height: 50px; margin: 0px !important; font-weight: 500; padding-inline: 10px; } .mfilter-button-bottom .custom-close-filter:after { font-size: 14px; text-transform: uppercase; font-weight: 500; } .mfilter-button .custom-close-filter { background: black; color: white; } .custom-close-filter { font-size: 0px !important; } .custom-close-filter:after { content: "Εφαρμογή Όλων"; } html[lang*="en"] .custom-close-filter:after { content: "Apply All"; } .mfilter-button-reset i { display: none; } .mfilter-free-container .mfilter-box { margin-bottom: 0px; } /* --> CATEGORY-LIKE > RESPONSIVE > PRODUCTS [2] =========================================================================================================== */ .row.product-list-grid { width: 100%; max-width: 100% !important; overflow: hidden; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION TOP-LEVEL CATEGORY PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> TOP-LEVEL CATEGORY PAGE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ body:has(.top_level_category):has(.has_subcategories) { background: var(--accent_1); color: white; } #product-category.top_level_category.has_subcategories { padding-top: 60px } /* INTRO SECTION */ /* --> TOP-LEVEL CATEGORY PAGE > INTRO SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .top_category_intro_section { max-width: 1230px; margin-inline: auto; } .top_category_intro_section>div { width: fit-content; margin-inline: auto; text-align: center; color: white !important; } .top_category_intro_section .description_text { margin-top: 10px; line-height: 27px; font-size: 15px; } /* --> CHILDREN CATEGORIES SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .top_category_children_section { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 35px } .top_category_children_section .child_category_item {} .top_category_children_section .child_category_item img { width: 100%; background: #eee } .top_category_children_section .child_category_item div { font-size: 22px; font-family: var(--font_2); font-weight: bold; text-align: center; margin-top: 18px; line-height: normal; text-transform: uppercase; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRODUCT LISTS VVV VVV VVV VVV VVV VVV VVV */ /* --> PRODUCT LISTS > LAYOUT > DIMENSION VARIABLES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product_list { --filters_sidebar_width: 0px; --filters_toggler_width: calc(100vw / 4); } html.filters_sidebar_enabled .product_list { --filters_sidebar_width: calc(100vw / 4); } /* --> PRODUCT LISTS > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ body:has(.product_list)>.container { padding-inline: var(--calculatedPadding_wider) !important; } .product_list .control_and_products { gap: 0px 0px; justify-content: space-between; display: grid !important; grid-template-areas: "control control" "products filters"; transition: all .2s; grid-template-columns: 1fr var(--filters_sidebar_width); } .product_list .control_and_products>.control_bar { grid-area: control; } .product_list .control_and_products>.filters_container { grid-area: filters; } .product_list .control_and_products>#content { grid-area: products; } /* --> PRODUCT LISTS > CONTROL BAR [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT LISTS > CONTROL BAR > STICKY IT [2] =========================================================================================================== */ .product_list .control_and_products>.control_bar { grid-area: control; POSITION: sticky; top: var(--totalHeaderHeight); z-index: 5; background: white; } /* --> PRODUCT LISTS > CONTROL BAR > LAYOUT [2] =========================================================================================================== */ .control_and_products .control_bar { display: grid; grid-template-columns: 2fr auto var(--filters_toggler_width); align-items: flex-start; gap: 0px; flex-wrap: wrap; justify-content: space-between; width: 100%; position: relative; } .control_and_products .control_bar:before, .control_and_products .control_bar:after { content: ""; height: 1px; width: 100vw; top: 100%; left: 50%; transform: translateX(-50%); position: absolute; background: #d8d8d8; } .control_and_products .control_bar:before { bottom: 100%; top: unset; } .control_and_products .control_bar>div:not(:last-child) { border-right: 1px solid #D8D8D8; } /* --> PRODUCT LISTS > CONTROL BAR > TITLES [2] =========================================================================================================== */ .control_and_products .control_bar :is(.view_toggler, .filters_toggler, .breadcrumb_container) { display: flex; align-items: center; gap: 10px; padding: 15px 20px !important; height: 100%; } .control_and_products .control_bar :is(.view_toggler, .filters_toggler) { cursor: pointer; } .control_and_products .control_bar :is(.view_toggler, .filters_toggler) .text, .control_and_products .control_bar .breadcrumb li a { font-size: 14px; font-weight: 450; color: #444; } .control_and_products .control_bar :is(.view_toggler, .filters_toggler), .control_and_products .control_bar :is(.view_toggler, .filters_toggler) * { transition: all .2s; } /* --> PRODUCT LISTS > CONTROL BAR > VIEW OPTIONS [2] =========================================================================================================== */ .control_bar .form-group { margin-bottom: 0px; } .control_bar .form-group label { background: unset; text-transform: uppercase; font-weight: 500; color: #444; border: unset; height: 30px; font-size: 14px; padding-left: 0px; } .control_bar .form-group select { font-size: 14px; padding-inline: 15px !important; background: transparent !important; width: fit-content !important; } /* --> PRODUCT LISTS > CONTROL BAR > BREADCRUMBS [2] =========================================================================================================== */ .control_and_products .control_bar .breadcrumb { margin: 0px !important; padding: 0px !important; } .control_and_products .control_bar .breadcrumb>li:not(:last-child)::after { content: ''; display: block; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-right: 1px solid #444; } /* --> PRODUCT LISTS > VIEW OPTIONS TOGGLE EFFECT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .control_and_products .control_bar .view_section { position: relative; display: flex; align-items: center; height: 100%; } .control_and_products .control_bar .view_block { position: absolute; background: white !important; top: 100%; right: 0px; z-index: 5; padding: 15px; border: 1px solid #d8d8d8; right: -1px; visibility: hidden; transform: translateY(-10px); opacity: 0; transition: all .2s; display: flex; flex-direction: column; gap: 4px } .control_and_products .control_bar .view_section.enabled .view_block { transform: translateY(0px); opacity: 1; visibility: visible; } /* --> PRODUCT LISTS > VIEW OPTIONS TOGGLE EFFECT > ON [2] =========================================================================================================== */ .control_and_products .control_bar .view_section.enabled .icon img { transform: rotate(180deg) } /* --> PRODUCT LISTS > FILTERS TOGGLE EFFECT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT LISTS > FILTERS TOGGLE EFFECT > OFF [2] =========================================================================================================== */ .product_list .control_and_products>.filters_container { transform: translateX(100%); transition: all .2s; transform-origin: top left; opacity: 0; overflow: hidden !important; visibility: hidden; border: none; border-left: 1px solid transparent !important; } .product_list .control_and_products>.filters_container #content { width: 100% } /* --> PRODUCT LISTS > FILTERS TOGGLE EFFECT > ON [2] =========================================================================================================== */ /* --> PRODUCT LISTS > FILTERS TOGGLE EFFECT > ON > FILTER SIDEBAR [3] ------------------------------------------------------------- */ html.filters_sidebar_enabled .product_list .control_and_products { gap: 0px 30px; } html.filters_sidebar_enabled .product_list .control_and_products>.filters_container { opacity: 1; transform: translateX(-1px); visibility: visible; border-color: #D8D8D8 !important; } /* --> PRODUCT LISTS > FILTERS TOGGLE EFFECT > ON > TOGGLER TEXTS [3] ------------------------------------------------------------- */ .control_and_products .control_bar .text { position: relative; width: 235px; } .control_and_products .control_bar .text>div { transition: all .2s; } .control_and_products .control_bar .text .to_close { position: absolute; background: white; width: 100%; top: 0px; left: 0px; opacity: 0; z-index: 1; } html.filters_sidebar_enabled .control_and_products .control_bar .text .to_close { display: block; opacity: 1; } /* --> PRODUCT LISTS > FILTERS TOGGLE EFFECT > ON > TOGGLER ICON [3] ------------------------------------------------------------- */ html.filters_sidebar_enabled .control_and_products .control_bar .filters_toggler .icon img { transform: rotate(180deg) } /* --> PRODUCT LISTS > FILTERS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT LISTS > FILTERS > LAYOUT [2] =========================================================================================================== */ .product_list .filters_container { width: calc(var(--filters_sidebar_width) + var(--calculatedPadding_wider)) !important; float: none; } .product_list .filters_container #column-left { width: 100% } /* --> PRODUCT LISTS > FILTERS > TITLE [2] =========================================================================================================== */ .product_list .filters_container .box-heading { display: none; } /* --> PRODUCT LISTS > FILTERS > FILTER GROUP [2] =========================================================================================================== */ .mfilter-content>ul>li { border-bottom: 1px solid #d8d8d8; padding: 10px 25px 40px 25px; transition: all .2s; } .mfilter-content>ul>li:has(.mfilter-collapsed) { padding: 10px 25px 15px 25px !important } /* --> PRODUCT LISTS > CATEGORY NAME AND CHILDREN [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .category_title_and_children { margin-top: 30px; } .category_title_and_children .category_title { font-size: 30px; font-weight: bold; color: #282727; } .category_title_and_children .subcategories { display: flex; gap: 10px 30px; margin-top: 20px; flex-wrap: wrap; } .category_title_and_children .subcategories>a { padding: 6px 20px; border: 1px solid #C9C9C9; border-radius: 17px; font-weight: 500; transition: all .12s; color: #282727; } .category_title_and_children .subcategories>a:hover { border-color: black; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION SEARCH PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> SEARCH PAGE > SORTING BAR [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-search .sorting_bar { padding-top: 25px !important; } /* --> SEARCH PAGE > SEARCH FIELDS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #content_search { padding-block: 30px; } #product-search #content_search { margin-bottom: 25px !important; } #product-search #content_search>h1 { padding-bottom: 5px !important; color: #000000; font-size: 35px; font-weight: 900; position: relative; margin-bottom: 0px; } #product-search #content_search>div.row { align-items: center; display: flex; gap: 20px 0px; margin-left: -20px; } #product-search #content_search #input-search, #product-search #content_search select[name="category_id"] { height: 50px !important; border-radius: 0px !important; box-shadow: none !important; } #product-search #content_search #button-search-altered { /* background: var(--accent1) !important; */ /* color: white !important; */ /* border: none !important; */ /* font-size: 16px; */ /* font-weight: bold; */ /* text-transform: uppercase; */ /* border-radius: 0px; */ height: 50px; /* margin-top: 10px !important; */ /* padding-left: 35px; */ /* padding-right: 35px; */ margin-top: 35px !important; background: white !important; color: black !important; border: 1px solid black !important; transition: all 0.2s; } #product-search #content_search #button-search-altered:hover { background: black !important; color: white !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRODUCT PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> PRODUCT PAGE > STICKY REQUEST BUTTONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > STICKY REQUEST BUTTONS > DESKTOP [2] =========================================================================================================== */ header~.request_buttons { position: fixed; right: 0px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; top: 400px; z-index: 2 } header~.request_buttons>* { display: flex; text-align: center; justify-content: center; align-items: center; width: 181px; height: 58px; color: white !important; border-radius: 8px 0px 0px 8px; font-size: 15px; line-height: 20px; font-weight: 500; cursor: pointer; display: flex; flex-direction: column; } header~.request_buttons>.ask_for_call_button { background: var(--accent_2); transition: transform 0.3s, background 0.2s; } header~.request_buttons>.ask_for_price_button { background: var(--accent_3); transition: transform 0.3s 0.2s, background 0.2s; } header~.request_buttons>*:hover { background: var(--accent_1); } html.retract_request_buttons header~.request_buttons>* { transform: translateX(100%); } /* --> PRODUCT PAGE > STICKY REQUEST BUTTONS > MOBILE [2] =========================================================================================================== */ #product .request_buttons_mobile { display: flex; width: 100%; gap: 20px; margin-top: 18px; } #product .request_buttons_mobile>* { display: flex; text-align: center; justify-content: center; align-items: center; height: 50px; color: white !important; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; flex: 1 1 100%; line-height: normal; padding-inline: 15px; } #product .request_buttons_mobile>.ask_for_call_button { background: var(--accent_2); transition: transform 0.3s, background 0.2s; } #product .request_buttons_mobile>.ask_for_call_button>span:first-child { margin-right: 6px } #product .request_buttons_mobile>.ask_for_price_button { background: var(--accent_3); transition: transform 0.3s 0.2s, background 0.2s; } #product .request_buttons_mobile>*:hover { background: var(--accent_1); } /* --> PRODUCT PAGE > BREADCRUMB [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-product .breadcrumb * { color: #fff; } /* --> PRODUCT PAGE > DYNAMIC BG [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-product #content>.row:not(.videos):not(.default_infos) { background: white; box-shadow: -500px 0px white, 500px 0px white; z-index: 1; } .product-product { --productDynamicBg: #efefef; } .product-product .breadcrumb { z-index: 2; position: relative; } .product-product .breadcrumb>li::after { border-color: white !important; } #product-product .breadcrumb * { color: #fff; } html.product-product:is(.transparent_header)::before { height: 180px } .product-product .default_infos, .product-product .row.videos { transition: all .35s; } .product-product .default_infos { background: var(--productDynamicBg) !important; box-shadow: 0px 0px 0px 200px var(--productDynamicBg); } .product-product .row.videos { background: var(--productDynamicBg); } /* --> PRODUCT PAGE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-product { margin-top: var(--totalHeaderHeight); } #product-product #content { margin-top: 25px !important; display: flex; flex-direction: column; } #product-product #content>.row.default_infos { display: flex; flex-direction: row; /* gap: 54px; */ gap: 40px; padding-bottom: 60px; } #product-product #content>.row>div { padding: 0px; float: none !important; } .product-product body { overflow-x: hidden !important } /* --> PRODUCT PAGE > LAYOUT > TOP LEFT SECTION [2] =========================================================================================================== */ #product-product .thumbnails { display: flex; gap: 65px; flex-direction: row-reverse; margin-left: 0px !important; align-items: center; } #product-product .thumbnail { border-color: transparent !important; border-radius: 0px !important; padding: 0px; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; -ms-border-radius: 0px !important; -o-border-radius: 0px !important; } .main_image_container img { border-radius: 30px !important; -webkit-border-radius: 30px !important; -moz-border-radius: 30px !important; -ms-border-radius: 30px !important; -o-border-radius: 30px !important; } .image-additional .thumbnail img { border-radius: 15px !important; -webkit-border-radius: 15px !important; -moz-border-radius: 15px !important; -ms-border-radius: 15px !important; -o-border-radius: 15px !important; } /* --> PRODUCT PAGE > LAYOUT > TOP LEFT SECTION > MAIN IMAGE CONTAINER [3] ------------------------------------------------------------- */ #product-product .main_image_container { position: relative; width: 100%; } #product-product .main_image_container .thumbnail { background: transparent !important; } /* #product-product .main_image_container a { padding: 65px 10px 10px; } */ /* --> PRODUCT PAGE > LAYOUT > TOP LEFT SECTION > IMAGES MODAL [3] ------------------------------------------------------------- */ .mfp-auto-cursor .mfp-content { background: white; } /* --> PRODUCT PAGE > LAYOUT > TOP LEFT SECTION > ADDITIONAL IMAGES CONTAINER [3] ------------------------------------------------------------- */ #product-product .thumbnails { overflow: visible; } #product-product #content>.row>div.left_section { overflow: visible; } /* @media(min-width: 769px) { .additional_images_container .swiper-wrapper { flex-direction: column !important; gap: 25px } .additional_images_container .swiper-wrapper .swiper-slide { flex-shrink: 1 !important; } } */ #product-product .additional_images_container { display: flex; flex-direction: column; gap: 30px; width: 150px; min-width: 150px; position: relative; overflow: visible; } #product-product .additional_images_container.has-nav { padding-top: 40px; padding-bottom: 40px; } #product-product .additional_images_container.has-nav .additional-images-swiper { margin-top: 8px; margin-bottom: 8px; } #product-product .additional_images_container .swiper-slide { height: fit-content !important; } #product-product .additional_images_container .thumbnail { margin: 0px; } #product-product .additional_images_container .thumbnail:hover { border-color: black !important; } /* --> PRODUCT PAGE > LAYOUT > TOP LEFT SECTION > ADDITIONAL IMAGES CONTAINER > NAVIGATION */ .additional-images-swiper .additional-images-pagination { display: none !important; } .additional_images_container:not(.has-nav) .swiper-button-prev, .additional_images_container:not(.has-nav) .swiper-button-next { display: none !important; } .additional_images_container .swiper-button-prev, .additional_images_container .swiper-button-next { display: flex !important; align-items: center; justify-content: center; opacity: 1 !important; z-index: 100; width: 28px; height: 28px; pointer-events: auto; background-image: none !important; color: #000 !important; } .additional_images_container .swiper-button-prev { position: absolute; top: 0; bottom: unset; left: 50%; right: unset; transform: translateX(-50%); height: fit-content; margin: 0px !important; } .additional_images_container .swiper-button-next { position: absolute; bottom: 0; top: unset; left: 50%; right: unset; transform: translateX(-50%); height: fit-content; margin: 0px !important; } .additional_images_container .swiper-button-prev.swiper-button-disabled, .additional_images_container .swiper-button-next.swiper-button-disabled { opacity: 0.35 !important; pointer-events: none; } .additional_images_container .swiper-button-prev::before, .additional_images_container .swiper-button-next::before { content: "" !important; display: block !important; width: 22px !important; height: 22px !important; background: url("/image/catalog/cut_assets/generic/icons/chevron_right.svg") center / contain no-repeat !important; font-family: unset !important; } .additional_images_container .swiper-button-prev::before { transform: rotate(-90deg); } .additional_images_container .swiper-button-next::before { transform: rotate(90deg); } /* --> PRODUCT PAGE > LAYOUT > TOP RIGHT SECTION [2] =========================================================================================================== */ /* --> PRODUCT PAGE > TOP RIGHT SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-product .right_section { /* padding-right: 120px !important; */ /* padding-left: 80px !important; */ padding: 60px !important; border-radius: 30px; background: white; width: 900px; max-width: 100%; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > BRAND [2] =========================================================================================================== */ #product-product .manufacturer-section { margin-bottom: 10px } #product-product .manufacturer-section { margin-bottom: 0px !important; width: fit-content; font-size: 16px; font-weight: bold; color: black; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > BRAND > LOGO [3] ------------------------------------------------------------- */ #product-product .manufacturer-section .manufacturer-logo { /* border: 1px solid #ddd; */ } #product-product .manufacturer-section img.manufacturer-logo { max-width: 157px; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > BRAND > TEXT [3] ------------------------------------------------------------- */ #product-product .manufacturer-section>span { font-size: 16px !important; } #product-product .manufacturer-section>span>a { font-weight: bold; font-size: 16px; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > TITLES [2] =========================================================================================================== */ #product-product .right_section .titles_wrapper { margin-top: 0px; display: block; margin-top: 4px; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > TITLES > MAIN TITLE [3] ------------------------------------------------------------- */ #product-product .right_section .titles_wrapper h1.section_title { margin: 0px; font-size: 18PX; color: #5f5f5f; font-weight: 500 !important; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > TITLES > MAIN SUBTITLE [3] ------------------------------------------------------------- */ #product-product .right_section .titles_wrapper .product_subtitle { font-size: 16px; font-weight: 400; margin-top: 8px; margin-block: 20px 10px; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > AVAILABILITY/STOCK AND LABELS [2] =========================================================================================================== */ .stock_and_labels_wrapper { display: flex; align-items: center; justify-content: space-between !important; margin-top: 35px; } .stock_and_labels_wrapper .availability_section div { font-size: 13px; font-weight: 550; /* text-transform: uppercase; */ } /* --> PRODUCT PAGE > TOP RIGHT SECTION > AVAILABILITY/STOCK AND LABELS > STOCK/AVAILABILITY [3] ------------------------------------------------------------- */ .stock_and_labels_wrapper .availability_section div { color: #e7750a } .stock_and_labels_wrapper .availability_section.availability_id_7 div { color: #5BAE2F } /* --> PRODUCT PAGE > TOP RIGHT SECTION > AVAILABILITY/STOCK AND LABELS > LABELS [3] ------------------------------------------------------------- */ .stock_and_labels_wrapper .labels_container { display: flex; align-items: flex-end; /* padding: 5px; */ /* height: 35px; */ /* position: absolute; */ /* bottom: 10px; */ /* left: 10px; */ /* z-index: 2; */ position: unset; z-index: unset; bottom: unset; left: unset; padding: 0px; } /* #product-product .right_section .product_model { display: flex; gap: 8px; } #product-product .right_section .product_model>span { font-family: var(--font_2); font-size: 16px; } #product-product .right_section .product_model>span:last-child { font-weight: bold; color: black; } */ /* --> PRODUCT PAGE > TOP RIGHT SECTION > PAYMENT VIA INSTALLMENTS [2] =========================================================================================================== */ #product-product .installments_container { font-size: 13px; color: #000; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > PRICE AND IDENTIFIERS [2] =========================================================================================================== */ .price_and_identifiers_container { display: flex; align-items: center; justify-content: space-between; border-block: 1px solid #D8D8D8; padding-block: 14px; margin-block: 10px; width: calc(100% + 50px); transform: translateX(-25px); padding-inline: 25px; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > PRICE AND IDENTIFIERS > PRICE [2] =========================================================================================================== */ .price_and_special_section { margin: 0px; display: flex; align-items: flex-end; } .price_and_special_section .price_container { display: flex; align-items: center; } .price_and_special_section .price_container * { line-height: 1 !important; } .price_and_special_section span:is(.regular_price, .discount_price) { font-weight: bold; font-size: 23px; } .price_and_special_section span:is(.regular_price) { font-weight: bold; } .price_and_special_section span:is(.old_price) { color: #959595; font-size: 13px; text-decoration: line-through !important; margin-left: 15px; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > PRICE AND IDENTIFIERS > IDENTIFIERS [2] =========================================================================================================== */ .price_and_identifiers_container .identifiers_section, .price_and_identifiers_container .identifiers_section div { display: flex; align-items: center; font-size: 12px !important } .price_and_identifiers_container .identifiers_section>div { font-size: 12px !important; font-weight: 300; color: #2e2b2b; } .price_and_identifiers_container .identifiers_section>div+div:before { content: "|"; margin-left: 8px; margin-right: 8px; } /* --> PRODUCT PAGE > OPTIONS AND BASE CHARACTERISTICS WRAPPER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .options_and_base_characteristics_wrapper { /* border:1px solid red; */ display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 30px; } .options_and_base_characteristics_wrapper>div { /* border:1px solid blue; */ } /* --> PRODUCT PAGE > OPTIONS AND BASE CHARACTERISTICS WRAPPER > HEADING [2] =========================================================================================================== */ .base_characteristics_container>.heading { font-size: 14px !important; font-weight: 500; text-transform: uppercase; } /* --> PRODUCT PAGE > OPTIONS AND BASE CHARACTERISTICS WRAPPER > CONTENTS [2] =========================================================================================================== */ .base_characteristics_container .contents { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; } .base_characteristics_container .contents .characteristic_item { display: flex; gap: 15px; align-items: center; } .base_characteristics_container .contents .characteristic_item img { width: 35px; } .base_characteristics_container .contents .characteristic_item .text { font-size: 14px; } /* --> PRODUCT PAGE > OPTIONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product .options_container { margin-top: 40px } /* #product .options_container .form-group { margin-top: 20px; } */ #product .options_container h3 { display: none; } #product .options_container .form-group>div { display: flex; gap: 10px; } #product .options_container .form-group>div>div { margin: 0px } /* --> PRODUCT PAGE > OPTIONS > LAYOUT [2] =========================================================================================================== */ .options_container .form-group { display: grid !important; grid-template-columns: 100px 1fr; width: 100%; gap: 15px !important; } /* --> PRODUCT PAGE > OPTIONS > SELECTED OPTION [2] =========================================================================================================== */ #product .checked-tk { border-color: var(--accent_1) !important; /* border-width: 3px !important; */ } /* --> PRODUCT PAGE > OPTIONS > LABELS [2] =========================================================================================================== */ .options_container .form-group>label.control-label { display: block; min-width: unset !important; padding: 0px !important; height: fit-content !important; line-height: normal !important; margin: 0px !important; font-size: 14px !important; color: #000 !important; font-weight: 400 !important; text-transform: unset !important; margin-top: 6px !important; } .options_container .form-group>label.control-label:before { display: none !important; } /* --> PRODUCT PAGE > OPTIONS > GROUPS [2] =========================================================================================================== */ /* --> PRODUCT PAGE > OPTIONS > GROUPS > COMMON [3] ------------------------------------------------------------- */ .options_container .form-group>div { display: flex; flex-wrap: wrap; justify-content: flex-start !important; width: unset !important; min-width: unset !important; gap: 15px !important; } .options_container .form-group>div>.radio { margin: 0px !important; } .options_container .form-group>div>.radio>label { border-radius: 7px !important; } .options_container .form-group>div>.radio>label>span { font-size: 10px; font-weight: 500; color: #2e2e2e; } /* --> PRODUCT PAGE > OPTIONS > GROUPS > COLOR [3] ------------------------------------------------------------- */ #product .options_container .form-group:has(img)>div { gap: 10px !important; } #product .options_container .form-group:has(img)>div>.radio>label { padding: 0px !important; border-radius: 0px !important; } #product .options_container .form-group:has(img)>div>.radio>label>img { border-radius: 0px !important; } #product .options_container .form-group:has(img)>div>.radio>label>span { display: none !important; } /* --> PRODUCT PAGE > OPTIONS > ITEMS > ΜΕΓΕΘΟΣ [3] ------------------------------------------------------------- */ #product>div[class*="option"] .radio label { border: 1px solid #ddd; font-size: 14px !important; font-weight: 600; color: black !important; padding: 9px 13px !important; /*height: 38px; */ /*width: 38px; */ display: flex; align-items: center; justify-content: center; /* border-radius: 0px !important; */ width: fit-content; line-height: 1; /* -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; -ms-border-radius: 0px !important; -o-border-radius: 0px !important; */ } #product>div[class*="option"] .img-thumbnail { border: none !important; } /* --> PRODUCT PAGE > OPTIONS > SIZEGUIDE [2] =========================================================================================================== */ .sizeguide-wrapper { margin: 10px 0 8px; } .sizeguide-link { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; font-size: 14px; font-weight: 400; color: #838383; text-decoration: none; border-bottom: 1px dashed #888; cursor: pointer; transition: color 0.2s; margin-left: 115px } .sizeguide-link:hover { color: #000; border-bottom-color: #000; text-decoration: none; } .sizeguide-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 99999; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .sizeguide-modal-overlay.active { display: flex; } .sizeguide-modal-dialog { position: relative; background: #fff; border-radius: 6px; max-width: 95vw; max-height: 90vh; overflow: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; } .sizeguide-modal-close { position: sticky; top: 0; align-self: flex-end; background: rgba(255, 255, 255, 0.9); border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 4px 10px; color: #333; z-index: 1; border-radius: 0 6px 0 4px; } .sizeguide-modal-close:hover { color: #000; background: #fff; } .sizeguide-modal-body { padding: 16px; text-align: center; } .sizeguide-modal-img { max-width: 100%; max-height: 80vh; height: auto; display: block; margin: 0 auto; } @media (max-width: 576px) { .sizeguide-modal-dialog { max-width: 100vw; border-radius: 4px; } .sizeguide-modal-body { padding: 8px; } } /* --> PRODUCT PAGE > QUICKNAV AND BUTTONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > QUICKNAV AND BUTTONS > QUICKNAV [2] =========================================================================================================== */ .quicknav_and_buttons_wrapper { display: grid; grid-template-columns: 225px 1fr; margin-top: 30px; gap: 30px } .quicknav_and_buttons_wrapper .quicknav { display: flex; flex-direction: column; gap: 8px; } .quicknav_and_buttons_wrapper .quicknav>div { display: inline; cursor: pointer; } .quicknav_and_buttons_wrapper .quicknav>div:hover span { color: var(--accent_3); } .quicknav_and_buttons_wrapper .quicknav>div span { font-size: 14px; transition: all .12s; } .quicknav_and_buttons_wrapper .quicknav>div img { transform: rotate(-90deg) translateX(1px); margin-left: 2px } /* --> PRODUCT PAGE > QUICKNAV AND BUTTONS > QUICKNAV > ENABLES SIDE CONTENT [3] ------------------------------------------------------------- */ html.product-product:is(.details_enabled, .returns_enabled) header:after { opacity: .5; visibility: visible; } html.product-product.details_enabled .side_content_wrapper>div.description_side_section, html.product-product.returns_enabled .side_content_wrapper>div.returns_side_section { opacity: 1; visibility: visible; transform: none; } .side_content_wrapper>div { position: fixed; top: 0px; right: 0px; background: white; z-index: 10; height: 100%; width: 573px; padding: 40px 70px; overflow: auto; transition: all .3s; opacity: 0; visibility: hidden; transform: translateX(100%); } .side_content_wrapper .close_button { margin-left: auto; width: fit-content; position: absolute; top: 15px; right: 20px; cursor: pointer !important; } .side_content_wrapper .close_button img { width: 22px; height: 22px; opacity: .4 } @media(max-width: 590px) { .side_content_wrapper>div { width: 100%; padding: max(10vw, 30px); } } .side_content_wrapper>div>.title { font-size: 20px; font-weight: 500; color: black; margin-bottom: 10px; } .side_content_wrapper>div>.text, .side_content_wrapper>div>.text * { font-size: 14px !important; line-height: 24px; } .side_content_wrapper>div::-webkit-scrollbar, .side_content_wrapper>div *::-webkit-scrollbar { width: 7px; height: 7px; } .side_content_wrapper>div::-webkit-scrollbar-thumb, .side_content_wrapper>div *::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; } .side_content_wrapper>div::-webkit-scrollbar-track, .side_content_wrapper>div *::-webkit-scrollbar-track { background: transparent; } /* For Firefox */ .side_content_wrapper>div, .side_content_wrapper>div * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .3) transparent; } /* --> PRODUCT PAGE > QUICKNAV AND BUTTONS > BUTTONS [2] =========================================================================================================== */ #product-product .stepper_n_cart { display: flex; align-items: center; } #product-product .stepper_n_cart #button-cart {} #product-product .stepper_n_cart .wishlist_button { position: relative; top: unset; bottom: unset; right: unset; margin-left: 20px; } #product-product .right_section .stepper_n_cart { display: flex; justify-content: space-between; margin-top: 40px; margin-bottom: 0px } /* --> PRODUCT PAGE > TOP RIGHT SECTION > STEPPER AND CART BUTTON > STEPPER [3] ------------------------------------------------------------- */ .product-product .stepper_section { display: flex; align-items: center; } .product-product .stepper_section .stepper_buttons { display: flex; align-items: center; } .product-product :is(#input-quantity, #input-quantity-mobile) { height: 40px; width: 40px; min-width: 40px; font-size: 18px; font-weight: bold; color: black; border: 1px solid rgba(0, 0, 0, 0.24); box-shadow: none !important; border-radius: 0px !important; text-align: center !important; padding: 0px; pointer-events: none; -moz-appearance: textfield; border-radius: 8px !important; } .product-product :is(#input-quantity, #input-quantity-mobile)::-webkit-outer-spin-button, .product-product :is(#input-quantity, #input-quantity-mobile)::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .product-product button.ctm-stepper { width: 45px; height: 45px; border-radius: 0px; border: none !important; box-shadow: none !important; overflow: hidden; background: none; } .product-product button.ctm-stepper::before { font-size: 25px; /* font-weight: bold; */ display: block; background: none !important; } .product-product button.ctm-stepper:first-of-type:before { content: "-"; transforM: scaleX(1.5); } .product-product button.ctm-stepper:last-of-type:before { content: "+" } .product-product .stepper_n_cart .stepper_section { margin-right: auto; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > STEPPER AND CART BUTTON > BUTTON [3] ------------------------------------------------------------- */ .product-product .stepper_n_cart #button-cart { width: fit-content !important; /* max-width: 330px !important; */ text-transform: uppercase; font-family: var(--font_2); background: black; padding-inline: 35px; border-radius: 15px; } .product-product .stepper_n_cart #button-cart:hover { background: var(--accent_3) !important; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > PRODUCT DESCRIPTION [2] =========================================================================================================== */ #product-product .right_section .description_section { margin-top: 40px; } #product-product .right_section .description_section, #product-product .right_section .description_section * { font-size: 16px; font-weight: 400 !important; } #product-product .right_section .description_section p { margin-bottom: 0px !important; } #product-product .right_section .description_section strong, #product-product .right_section .description_section b { font-weight: bold !important; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > PRODUCT DESCRIPTION > UL [3] ------------------------------------------------------------- */ #product-product .right_section .description_section ul { margin-bottom: 0px; } #product-product .right_section .description_section ul br { display: none !important; } /* --> PRODUCT PAGE > ROW :TEXT & BANNER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > ROW: TEXT & BANNER > LAYOUT [2] =========================================================================================================== */ #product-product #content>.row.text_n_banner { display: flex; margin-top: 73px; align-items: center; } #product-product #content>.row.text_n_banner>div { min-width: 50%; } /* --> PRODUCT PAGE > ROW: TEXT & BANNER > LEFT SIDE [2] =========================================================================================================== */ #product-product #content>.row.text_n_banner .left_side { padding-right: 35px } /* --> PRODUCT PAGE > ROW: TEXT & BANNER > LEFT SIDE > TITLE [3] ------------------------------------------------------------- */ #product-product #content>.row.text_n_banner .left_side .title { /* font-size: 45px; font-weight: 900; line-height: 53px; color: var(--accent_2); width: 400px; */ } /* --> PRODUCT PAGE > ROW: TEXT & BANNER > LEFT SIDE > TEXT [3] ------------------------------------------------------------- */ #product-product #content>.row.text_n_banner .left_side .text { font-size: 16px; font-weight: 400; margin-top: 20px; } #product-product #content>.row.text_n_banner .left_side .text p { font-weight: 400; } /* --> PRODUCT PAGE > ROW: TEXT & BANNER > RIGHT SIDE [2] =========================================================================================================== */ #product-product #content>.row.text_n_banner .right_side { min-width: calc(50% + var(--calculatedPadding)); display: flex; justify-content: center; } /* --> PRODUCT PAGE > ROW: SWIPER & MODAL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > ROW: SWIPER & MODAL > LAYOUT [2] =========================================================================================================== */ .image_swiper_container { margin-top: 20px; min-width: calc(100% + var(--calculatedPadding)); } /* --> PRODUCT PAGE > ROW: SWIPER & MODAL > SWIPER [2] =========================================================================================================== */ .product_page_image_swiper { width: 100%; height: fit-content; overflow: hidden; /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */ } .product_page_image_swiper .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; /* padding: 5px; */ } .product_page_image_swiper .swiper-slide img { display: block; width: 100%; height: auto; /* object-fit: contain; cursor: pointer; */ transition: transform 0.3s ease; } /* --> PRODUCT PAGE > ROW: SWIPER & MODAL > SWIPER > HOVER EFFECTS [3] ------------------------------------------------------------- */ .product_page_image_swiper .swiper-slide { position: relative; background: black; } .product_page_image_swiper .swiper-slide img, .product_page_image_swiper .swiper-slide:after { transition: all .3s !important; } .product_page_image_swiper .swiper-slide:after { content: ""; background-image: url("/image/catalog/desikos-b2c/cut_assets/pr page/Group 20.svg"); background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background-size: 100%; visibility: hidden; opacity: 0; } .product_page_image_swiper .swiper-slide:hover img { opacity: .41; } .product_page_image_swiper .swiper-slide:hover:after { visibility: visible; opacity: 1; } /* --> PRODUCT PAGE > ROW: SWIPER & MODAL > MODAL [2] =========================================================================================================== */ .product_page_image_modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); animation: fadeIn 0.3s ease; -webkit-animation: fadeIn 0.3s ease; } #product_page_image_modal #modalImage { max-width: 100% !important; } .product_page_image_modal.show { display: flex !important; justify-content: center; align-items: center; } .product_page_image_modal .modal-content { max-width: 90%; max-height: 90%; animation: zoomIn 0.3s ease; aspect-ratio: 480/370; } /* .product_page_image_modal .modal-content img { width: 100%; height: 100%; object-fit: contain; } */ .product_page_image_modal .close { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; } .product_page_image_modal .close:hover { color: #ccc; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zoomIn { from { transform: scale(0.5); } to { transform: scale(1); } } @media (max-width: 768px) { .product_page_image_swiper { height: 240px; } .product_page_image_modal .close { top: 10px; right: 20px; font-size: 30px; } } /* --> PRODUCT PAGE > ROW: SPECS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > ROW: SPECS > LEFT SIDE [2] =========================================================================================================== */ .product-product .small-description { margin-bottom: 25px; } /* --> PRODUCT PAGE > ROW: SPECS > LEFT SIDE > LAYOUT [3] ------------------------------------------------------------- */ .product-product .row.specs { margin-top: 80px; display: flex; gap: 50px; flex-direction: column; max-width: 100%; width: 999px; margin-inline: auto; padding-top: 100px; } .product-product .row.specs>div { width: 100%; border: none !important; } /* --> PRODUCT PAGE > ROW: SPECS > LEFT SIDE > TITLE [3] ------------------------------------------------------------- */ .product-product .row.specs .section_title { margin-bottom: 25px; margin-inline: auto; width: fit-content; } /* --> PRODUCT PAGE > ROW: SPECS > LEFT SIDE > TABLE [3] ------------------------------------------------------------- */ .product-product .row.specs .top_side .specs_table { display: flex; flex-direction: column; font-size: 16px; } .product-product .row.specs .top_side .specs_table .specs_row { display: flex; gap: 60px; padding-inline: 14px; } .product-product .row.specs .top_side .specs_table .specs_row:nth-child(2n+1) { background: #EDEDED; } .product-product .row.specs .top_side .specs_table .specs_row>div { padding-block: 12px } .product-product .row.specs .top_side .specs_table .specs_row .specs_label { min-width: 230px !important; max-width: 230px !important; text-align: right; } .product-product .row.specs .top_side .specs_table .specs_row .specs_value { font-weight: 500; } /* --> PRODUCT PAGE > ROW: SPECS > BOTTOM SIDE > CATALOG FILES [3] ------------------------------------------------------------- */ .product-product .row.specs .catalog_files_container { margin-top: 0px; } .product-product .row.specs .catalog_files_container .title { font-size: 16px; font-weight: bold; text-transform: uppercase; } .product-product .row.specs .catalog_files_container { display: flex; align-items: center; gap: 15px 40px; } .product-product .row.specs .catalog_files_container .items_container a { display: flex; gap: 12px; align-items: center; font-weight: 400; } @media(min-width: 769px) { .view_more_specs_button { display: none !important; } } /* --> PRODUCT PAGE > ROW: VIDEOS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > ROW: VIDEOS > LAYOUT [2] =========================================================================================================== */ .product-product .row.videos { /* margin-top: 60px; */ padding-block: 85px 120px; /* background-image: linear-gradient(180deg, #18468C 0%, #091C38 100%); */ width: 100vw; margin-left: 50%; transform: translateX(-50%); padding-inline: var(--calculatedPadding); } .product-product .row.videos .video_container { display: flex; /* gap: 100px; */ /* margin-top: 45px; */ } .product-product .video_container p { color: white; } /* --> PRODUCT PAGE > ROW: VIDEOS > TITLE [2] =========================================================================================================== */ .product-product .row.videos .section_title * { color: white; } /* --> PRODUCT PAGE > ROW: VIDEOS > VIDEOS [2] =========================================================================================================== */ /* .product-product .row.videos .video_container>iframe { width: 100%; height: 400px; } */ .product-product .row.videos iframe { aspect-ratio: 16/9 !important; display: block !important; max-width: 100%; width: 977px; height: auto; margin-inline: auto; border-radius: 25px; } /* --> PRODUCT PAGE > ROW: PRODUCT FEATURES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-features-section { margin-top: 100px; display: flex; gap: 40px; width: calc(100% + var(--calculatedPadding)); } .product-features-section>.section_title { width: 320px; min-width: 320px; } .product-features-section * { max-width: 100%; width: 100%; } .product-features-section .product-features-swiper-wrap { width: calc(100% - 320px - 40px) !important; } .product-features-section .product-features-swiper-wrap .texts_container { padding: 23px; } .product-features-section .product-features-swiper-wrap .texts_container .feature-title { font-size: 20px; font-weight: bold; line-height: 1.2; } .product-features-section .product-features-swiper-wrap .texts_container .feature-description { font-size: 15px; margin-top: 15px } /* --> PRODUCT PAGE > ROW: CONTACT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > ROW: CONTACT > LEFT SIDE [2] =========================================================================================================== */ /* --> PRODUCT PAGE > ROW: CONTACT > LAYOUT [3] ------------------------------------------------------------- */ .product-product .row.contact { margin-top: 125px; display: flex; gap: 122px; padding-inline: 140px; } .product-product .row.contact>div { width: 100%; } /* --> PRODUCT PAGE > ROW: CONTACT > INTRO TEXT [3] ------------------------------------------------------------- */ .product-product .row.contact .intro_text { font-size: 25px; font-weight: 400; color: #343434; line-height: 35px; margin-top: 45px; } /* --> PRODUCT PAGE > ROW: CONTACT > MAIN TEXT > CONTAINER [3] ------------------------------------------------------------- */ .product-product .row.contact .main_text_container { font-size: 16px; line-height: 23px; margin-top: 40px; display: flex; flex-direction: column; gap: 15px } /* --> PRODUCT PAGE > ROW: CONTACT > MAIN TEXT > LINK [3] ------------------------------------------------------------- */ .product-product .row.contact .main_text_container>div>a { display: block; width: fit-content; } /* --> PRODUCT PAGE > ROW: CONTACT > RIGHT SIDE [2] =========================================================================================================== */ .product-product .row.contact .right_side { max-width: 569px; } .product-contact-form { display: flex; flex-direction: column; } .product-contact-form .form-group:not(:last-child) { margin-bottom: 35px; } .product-contact-form .form-group.product_page_ideal_time_container { margin-top: -20px !important; } .product-contact-form .form-group *:is(input, textarea, select) { border: none; border-bottom: 1px solid #c3c2c2; border-radius: 0px; box-shadow: none; color: #343434; outline: none !important; box-shadow: none !important; font-weight: 500; } .product-contact-form .contact-preferences-label { font-weight: 500; } .product-contact-form .form-group.agree_to_terms { order: 99; } .product-contact-form .form-group.agree_to_terms * { font-size: 13px !important; } .product-contact-form .form-group.agree_to_terms input { margin-right: 10px !important; } .product-contact-form .form-group:has(.contact-submit-btn) { order: 100; } .product-contact-form .form-group.submit-group { margin-bottom: 0px; } .product-contact-form .form-group *:is(input, textarea, select)::placeholder { color: #3A3434 !important; } .product-contact-form .form-group *:is(input, textarea, .checkbox-label, label, select), .product-contact-form { font-size: 16px; line-height: normal; } .product-contact-form .form-group textarea { height: 32px } .product-contact-form .form-group .checkbox-group>label:first-child { margin-right: 55px; margin-top: 10px; margin-bottom: 10px } .product-contact-form .form-group input[type="checkbox"] { margin-right: 5px } .product-contact-form .form-group .text-danger { margin-top: 10px } .product-contact-form .form-group.contact-preferences { margin-top: 0px !important; } .product-contact-form .form-group .preferred-time { width: 310px; } .product-contact-form .form-group.privacy-policy .checkbox-label { font-size: 13px; margin-top: 5px; } .product-contact-form .form-group button[type="submit"] { margin-inline: auto; } .product-contact-form textarea+label { position: absolute; bottom: 0px; } /* --> PRODUCT PAGE > IMAGES SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > IMAGES > SMOOTHNESS FOR MODAL [2] =========================================================================================================== */ /* Smooth appearance for .mfp-bg */ .mfp-bg { opacity: 0; transition: opacity 0.3s ease-in-out; /* background: #afafaf !important; */ } .mfp-figure::after { display: none !important; } .mfp-bg.mfp-ready { opacity: .5; } /* Smooth appearance for .mfp-wrap */ .mfp-wrap { opacity: 0; transform: scale(0.95) translateY(50px); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } .mfp-wrap.mfp-ready { opacity: 1; transform: scale(1) translate(0px); } /* --> PRODUCT PAGE > IMAGES > ZOOM BUTTONS ON MODAL [2] =========================================================================================================== */ #mfp-image-zoom-mm .zoom-buttons { position: absolute !important; gap: 0px; margin-top: 50px; margin-left: 10px; gap: 10px; } #mfp-image-zoom-mm .zoom-buttons>div>button { border-radius: 100% !important; background: transparent !important; border: none; } #mfp-image-zoom-mm>.mfp-close { width: 40px; padding: 0px; position: absolute; margin: 0px; border-radius: 100%; background: transparent; font-size: 40px; top: 50px; right: 10px; } #mfp-image-zoom-mm .zoom-buttons>div>button, #mfp-image-zoom-mm>.mfp-close { /* transform: scale(.8); */ display: flex; align-items: center; justify-content: center; padding: 0px !important; /* box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .1); */ color: #2a2a2a; } .mfp-gallery .mfp-image-holder .mfp-figure :is(#zoom-in, #zoom-out, #zoom-reset) button i:before { content: "" !important; width: 30px !important; height: 30px !important; background-position: center; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z' fill='%23000000'/%3E%3C/svg%3E"); background-size: cover; display: block !important; } .mfp-gallery .mfp-image-holder .mfp-figure #zoom-out button i:before { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z' fill='%23000000'/%3E%3C/svg%3E"); } .mfp-gallery .mfp-image-holder .mfp-figure #zoom-reset button i:before { background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 21 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' transform='matrix(0 1 1 0 2.5 2.5)'%3E%3Cpath d='m3.98652376 1.07807068c-2.38377179 1.38514556-3.98652376 3.96636605-3.98652376 6.92192932 0 4.418278 3.581722 8 8 8s8-3.581722 8-8-3.581722-8-8-8'/%3E%3Cpath d='m4 1v4h-4' transform='matrix(1 0 0 -1 0 6)'/%3E%3C/g%3E%3C/svg%3E"); } .mfp-gallery .mfp-image-holder .mfp-figure #zoom-reset { display: none !important; } #mfp-image-zoom-mm>.mfp-close { font-size: 0px; } #mfp-image-zoom-mm>.mfp-close:before { content: "" !important; width: 35px !important; height: 35px !important; background-position: center; background-size: cover; display: block !important; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z' fill='%23000000'/%3E%3C/svg%3E"); transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -o-transform: rotate(45deg) scale(1); } /* --> PRODUCT PAGE > IMAGES > BOTTOM BAR ON MODAL [2] =========================================================================================================== */ #mfp-image-zoom-mm figcaption:has(.mfp-bottom-bar) { background: #eee !important; } #mfp-image-zoom-mm .mfp-bottom-bar * { color: black !important; } /* --> PRODUCT PAGE > PRODUCT INFORMATION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product_information { display: flex; justify-content: space-between; } #product_information strong { font-weight: 600 !important; } #product_information :not(.fa) { font-size: 14px !important; } #product_information .product_information_right { text-align: right; /* background: Red; */ display: flex; flex-direction: column; justify-content: space-between; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > MODEL [2] =========================================================================================================== */ #product_information .product_model { margin-bottom: 20px !important; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > MANUFACTURER [2] =========================================================================================================== */ #product_information .product_manufacturer a { color: black !important; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > STOCK [2] =========================================================================================================== */ #product_information .product_stock { /* margin-bottom: 20px !important; */ text-transform: uppercase; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > REVIEWS [2] =========================================================================================================== */ #product_information .rating .title { display: inline-block; margin-right: 10px; } #product_information .rating { display: flex; align-items: center; justify-content: flex-end; } #product_information .rating span:not(:first-child) { margin-left: 5px; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > ATTRIBUTES [2] =========================================================================================================== */ .product_attributes_section>.title { display: none !important; } .product_attributes_section .attribute_heading { display: none !important; } .product_attributes_section .attribute_line { display: flex; } .product_attributes_section .attribute_line:nth-last-child(2) { margin-top: 15px; } .product_attributes_section .attribute_line .attribute_name { margin-right: 5px; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > ENQUIRY BUTTON [2] =========================================================================================================== */ .enquiry_button { display: flex; align-items: center; cursor: pointer; text-transform: uppercase; } .enquiry_button::before { content: ""; width: 27px; height: 27px; margin-right: 15px; display: block; background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 489.3 489.3' style='enable-background:new 0 0 489.3 489.3;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M265,369.25c6.8,0,12.3-5.5,12.3-12.3s-5.5-12.3-12.3-12.3H38.4c-7.7,0-13.9-6.2-13.9-13.9V77.35 c0-7.7,6.2-13.9,13.9-13.9H451c7.7,0,13.9,6.2,13.9,13.9v253.6c0,7.7-6.2,13.9-13.9,13.9h-30.2c-6.8,0-12.3,5.5-12.3,12.3v60.9 l-69.5-69.5c-4.8-4.8-12.5-4.8-17.3,0s-4.8,12.5,0,17.3l78.9,78.9c3.6,3.6,8.5,5.6,13.4,5.6c2.4,0,4.9-0.5,7.3-1.4 c7.1-2.9,11.7-9.8,11.7-17.5v-61.9h17.9c21.2,0,38.4-17.2,38.4-38.4V77.35c0-21.2-17.2-38.4-38.4-38.4H38.4 C17.2,38.95,0,56.15,0,77.35v253.6c0,21.2,17.2,38.4,38.4,38.4H265V369.25z'/%3E%3Cpath d='M88.1,152.85h313.2c6.8,0,12.3-5.5,12.3-12.3s-5.5-12.3-12.3-12.3H88.1c-6.8,0-12.3,5.5-12.3,12.3 S81.3,152.85,88.1,152.85z'/%3E%3Cpath d='M88.1,218.75h313.2c6.8,0,12.3-5.5,12.3-12.3s-5.5-12.3-12.3-12.3H88.1c-6.8,0-12.3,5.5-12.3,12.3 S81.3,218.75,88.1,218.75z'/%3E%3Cpath d='M244.7,284.65h156.6c6.8,0,12.3-5.5,12.3-12.3s-5.5-12.3-12.3-12.3H244.7c-6.8,0-12.3,5.5-12.3,12.3 C232.5,279.15,237.9,284.65,244.7,284.65z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A"); } /* --> PRODUCT PAGE > PRODUCT INFORMATION > ENQUIRY BUTTON > ENQUIRY FORM [3] ------------------------------------------------------------- */ #enquiry_form_container { position: fixed; top: 50%; left: 50%; background: white; padding: 25px; width: 500px; transform: translate(-50%, 100%); z-index: 4; box-shadow: 0 10px 17px -10px rgba(0, 0, 0, .7); transition: all 0.4s; opacity: 0; visibility: hidden; } #enquiry_form_container legend { color: black !Important; font-family: var(--font2); font-size: 23px; font-weight: bold; text-transform: uppercase; border: none !important; } #enquiry_form_container .form-group { display: flex; flex-direction: column; width: 100%; margin-right: 0px; margin-left: 0px; } #enquiry_form_container .form-group>* { width: 100%; text-align: left; padding: 0px; } #enquiry_form_container .form-group * { font-size: 14px !important; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > ENQUIRY BUTTON > ENQUIRY FORM > CLOSE BUTTON */ #enquiry_form_container .close_button { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' enable-background='new 0 0 1000 1000' xml:space='preserve'%3E%3Cmetadata%3E Svg Vector Icons : http://www.onlinewebfonts.com/icon %3C/metadata%3E%3Cg%3E%3Cpath d='M990,59.5L940.5,10L500,450.5L59.5,10L10,59.5L450.5,500L10,940.5L59.5,990L500,549.5L940.5,990l49.5-49.5L549.5,500L990,59.5z'/%3E%3C/g%3E%3C/svg%3E"); position: absolute; right: 25px; top: 33px; cursor: pointer; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > ENQUIRY BUTTON > ENQUIRY FORM > ENABLED */ .enquiry_enabled body::before { opacity: 1; visibility: visible; width: 100%; } .enquiry_enabled #enquiry_form_container { transform: translate(-50%, -50%); opacity: 1; visibility: visible; } /* --> PRODUCT PAGE > TABS SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > TABS SECTION > TITLES [2] =========================================================================================================== */ #product-product .tabs_section ul.nav-tabs { border-bottom: 1px solid #d8d8d8; } #product-product .tabs_section ul.nav-tabs>li { margin-bottom: 0px !important; } #product-product .tabs_section ul.nav-tabs>li a { border: none !important; font-size: 18px !important; color: black !important; transition: all 0.09s; background-color: white !important; padding: 6px 18px !important; } #product-product .tabs_section ul.nav-tabs>li.active a {} /* .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{ border:none !important; color: black !important; font-weight:bold; } */ /* --> PRODUCT PAGE > TABS SECTION > CONTENTS [2] =========================================================================================================== */ #product-product .tab-content>div { display: none !important; } #product-product .tab-content>div.active { display: block !important; } #product-product .tab-content * { color: #787878; font-size: 15px; line-height: 28px; } /* --> PRODUCT PAGE > TAGS SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-product .tags_section { display: none !important } /* --> PRODUCT PAGE > EXTRA PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > EXTRA PRODUCTS > TITLES [2] =========================================================================================================== */ #product-product #content .extra_products .pre_title { display: none } #product-product #content .extra_products .section_title { margin-bottom: 25px } /* --> PRODUCT PAGE > EXTRA PRODUCTS > SIMILAR PRODUCTS (ΠΑΡΕΛΚΟΜΕΝΑ) [2] =========================================================================================================== */ #product-product #content .extra_products.similar_products { padding-top: 70px; order: 98 } /* --> PRODUCT PAGE > EXTRA PRODUCTS > RELATED PRODUCTS [2] =========================================================================================================== */ #product-product #content .extra_products.related { padding-top: 50px; order: 99; } /* --> PRODUCT PAGE > EXTRA PRODUCTS > RECENTLY VIEWED [2] =========================================================================================================== */ #product-product #content .extra_products.recently_viewed { /* margin-top: 82px; */ order: 100; padding-top: 50px; } #product-product #content .extra_products.recently_viewed .section_title * { color: black; } /* --> PRODUCT PAGE > EXTRA PRODUCTS > NAVIGATION [2] =========================================================================================================== */ #product-product #content .extra_products .swiper-pager { display: none } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRODUCT PAGE > RESPONSIVE VVV VVV VVV VVV VVV VVV VVV */ /* --> PRODUCT PAGE > RESPONSIVE > SECTIONS ENABLED ONLY IN MOBILE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .base_characteristics_container.responsive_instance { display: none; flex-direction: column; margin-top: 60px; } .base_characteristics_container.responsive_instance .contents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #product-product .secondary_buttons>.wishlist_button { display: none; } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #1 (1300) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #1 (1300) > TOP SECTION [2] =========================================================================================================== */ @media(max-width: 1300px) { /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #1 (1300) > TOP SECTION > LAYOUT [3] ------------------------------------------------------------- */ #product-product .left_section { width: 100%; } #product-product .right_section { width: 480px !important; } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #1 (1300) > TOP SECTION > SECONDARY BUTTONS [3] ------------------------------------------------------------- */ #product-product .secondary_buttons { display: flex; justify-content: space-between; } #product-product .secondary_buttons>* { position: relative; top: unset; right: unset; left: unset; display: flex !important; margin-bottom: 20px; } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #1 (1300) > TOP SECTION > PRICE AND IDENTIFIERS [3] ------------------------------------------------------------- */ .price_and_identifiers_container { flex-direction: column; align-items: flex-start; gap: 15px; } .price_and_identifiers_container>div { width: 100%; max-width: 350px; margin-inline: auto; } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #1 (1300) > TOP SECTION > OPTIONS AND BASE CHARACTERISTICS [3] ------------------------------------------------------------- */ .options_and_base_characteristics_wrapper { grid-template-columns: 1fr; } .options_and_base_characteristics_wrapper .base_characteristics_container { display: none; } .base_characteristics_container.responsive_instance { display: flex; } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #1 (1300) > TOP SECTION > OPTIONS [3] ------------------------------------------------------------- */ #product .options_container { margin-top: 20px; } #product .options_container .form-group { display: flex; grid-template-columns: 1fr !important; } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #1 (1300) > TOP SECTION > QUICK NAV AND BUTTONS [3] ------------------------------------------------------------- */ .quicknav_and_buttons_wrapper { margin-top: 45px; flex-direction: column !important; grid-template-columns: 1fr; } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #1 (1300) > TOP SECTION > STEPPER AND CART [3] ------------------------------------------------------------- */ #product-product .stepper_n_cart .wishlist_button { display: none; } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #1 (1300) > PRODUCT FEATURES SECTION [2] =========================================================================================================== */ .product-features-section { flex-direction: column; } .product-features-section>div, .product-features-section .product-features-swiper-wrap { width: 100% !important; } } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #2 (1100) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1100px) { #product-product #content>.row.default_infos { padding-top: 60px; } #product-product #content>.row.default_infos>div { width: 100% !important; } #product-product #content>.row.default_infos>.right_section { margin-top: 65px; max-width: 900px; width: 100%; margin-inline: auto; } } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #3 (900) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 900px) { #product-product #content>.row.default_infos { padding-bottom: 0px; padding-top: 120px } #product-product #content>.row.default_infos>.right_section { width: 100vw !important; max-width: 100vw; margin-left: calc(-1 * var(--calculatedPadding)); } .product-product .row.videos { padding-block: 50px 100px; } } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #4 (768) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 768px) { /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #4 (768) > SECTION TITLES [2] =========================================================================================================== */ .product-product #content>.row:not(.specs) .section_title { width: 100%; max-width: 320px; min-width: unset; } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #4 (768) > SPECS [2] =========================================================================================================== */ .product-product #content>.row.specs { margin-top: 100px; } .product-product .row.specs .top_side .specs_table .specs_row { gap: 35px; } .specs_table.is-truncated { max-height: 500px; overflow: hidden; } .specs_table.is-truncated::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to bottom, transparent, #fff); pointer-events: none; } .specs_table { position: relative; } .view_more_specs_button.is-hidden { display: none; } .view_more_specs_button { margin: 40px auto 0px; width: fit-content; text-transform: uppercase; font-weight: 500; color: #838383; text-decoration: underline !important; cursor: pointer; } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #4 (768) > EXTRA PRODUCTS [2] =========================================================================================================== */ .product-product #content>.row.extra_products .section_title { margin-bottom: 10px !important; } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #4 (768) > STEPPER AND CART [2] =========================================================================================================== */ .stepper_n_cart_mobile { margin: 0px !important; position: fixed; bottom: 0px; left: 0px; width: 100%; z-index: 1; background: white; display: grid !important; grid-template-columns: 140px 1fr; height: 50px; box-shadow: 0 -3px 32px 0px rgba(0, 0, 0, .25); } .stepper_n_cart_mobile .stepper_section { width: 100%; display: flex; justify-content: center; } .stepper_n_cart_mobile .stepper_section #input-quantity-mobile { border-radius: 0px !important; width: 32px !important; max-width: 32px !important; min-width: 32px !important; padding: 0px; height: 32px !important; } .stepper_n_cart_mobile #button-cart-mobile { height: 100%; border-radius: 0px; text-transform: uppercase; font-size: 15px; font-weight: 450; } .product-product footer { margin-bottom: 50px; } } /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #5 (600) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > RESPONSIVE > BREAKPOINT #5 (600) > PRODUCT FEATURES [2] =========================================================================================================== */ @media(max-width: 600px) { .product-features-section { width: 100% !important; margin-top: 40px; } .product-features-swiper .swiper-wrapper { transform: translate3d(0px, 0, 0) !important; display: flex; flex-direction: column !important; gap: 70px } .product-features-swiper .swiper-wrapper>div { width: 100% !important; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION BLOG PARTIALS VVV VVV VVV VVV VVV VVV VVV */ /* .blogpost-thumb, .latest-posts .swiper-slider { box-shadow: none !important; border: none !important; outline: none !important; } .blogpost-thumb .caption { margin: 0px !important; width: 100% !important; transform: none !important; box-shadow: none !important; padding: 10px 15px !important; text-align: left; } .blogpost-thumb .caption h4 { font-size: 16px; } .blogpost-thumb .caption h5 a { font-size: 25px; font-weight: bold; color: #000 !important; } .blogpost-thumb:hover .caption, .blogpost-thumb:hover .caption * { transition: all .12s; } .blogpost-thumb:hover .caption { background: #555 !important; } .blogpost-thumb:hover .caption * { color: white !important; } */ /* --> PRODUCT PAGE > FOOTER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .product-product footer { margin-top: 110px !important; } */ /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION BLOG LIST PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> BLOG LIST PAGE > BREADCRUMBS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .extension-d4u-blogs .breadcrumb li * { color: white; } */ /* --> BLOG LIST PAGE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .extension-d4u-blogs body { background: var(--accent_1); color: white; } */ /* --> BLOG LIST PAGE > BLOG ITEMS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* #blog-category #content>.row { border-top: none } #blog-category .headingmain { padding: 0px !important; margin-left: 0px !important; margin-right: 0px !important; color: white !important; } .extension-d4u-blogs #content>.row { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 35px; } .extension-d4u-blogs #content>.row>div, .extension-d4u-blogs #content>.row>div img { width: 100%; } .extension-d4u-blogs #content>.row>div { padding: 0px } #blog-category .blogpost-thumb { margin: 0px; } .extension-d4u-blogs #content>.row>div img, .extension-d4u-blogs #content>.row>div .caption h4 { transition: all .2s ease; } .extension-d4u-blogs #content>.row>div .caption h4 { font-size: 16px; font-weight: bold; color: white; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 40px; } .extension-d4u-blogs #content>.row>div:hover .caption h4 { color: var(--accent_3); } @media(max-width: 1100px) { .extension-d4u-blogs #content>.row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(max-width: 768px) { .extension-d4u-blogs #content>.row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 15px; } .extension-d4u-blogs #content>.row>div .caption h4 { height: 40px; } } @media(max-width: 550px) { .extension-d4u-blogs #content>.row { grid-template-columns: 1fr; gap: 20px; } } */ /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION BLOG PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> BLOG PAGE > CONTENT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #latestpost .commentadta { display: none !important; } #latestpost .innerheader h1 { max-height: unset; line-height: normal; } .single_blog_page #latestpost { display: flex; margin-top: 70px; } #latestpost * { font-family: inherit !Important; } .single_blog_page #latestpost .image.listimg { width: 500px; } #latestpost .image.listimg .img-responsive { width: 100%; } .single_blog_page #latestpost>.row { width: calc(100% - 500px); padding-left: 25px; } #latestpost>.row .headtitle { position: relative; background: none; opacity: 1; display: flex; flex-direction: column; } #latestpost>.row .headtitle>div:first-child { display: none; } #latestpost>.row .description { color: #444; line-height: 26px; text-align: justify; margin-top: 25px; font-size: 15px; -moz-column-count: 2; column-count: 2; -moz-column-gap: 41px; column-gap: 41px; font-weight: normal !important; } .post-description * { font-weight: normal !important; } /* --> BLOG PAGE > SOCIALS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #latestpost .social-icons { margin-top: 30px; } #latestpost .social-icons li i:before { font-family: FontAwesome; } /* --> BLOG PAGE > ALERT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #latestpost { position: relative; } #latestpost .alert.alert-success.alert-dismissible { position: absolute; left: 50%; transform: translateX(-50%) translateY(-100%); z-index: 9999999; top: 0px; } #latestpost .alert.alert-success.alert-dismissible i:before { font-family: FontAwesome; } #latestpost .alert-dismissable .close, #latestpost .alert-dismissible .close { right: 0px !important; } /* --> BLOG PAGE > RELATED PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .row.related .headingmain { margin-top: 0px !important; } #blogrelated .product-thumb h4 { text-align: left !important; } #blogrelated .price-cont { display: flex; align-items: center; } #blogrelated .product-thumb .price { margin-bottom: 0px !important; text-align: left; } #blogrelated .product-thumb .price-old { margin-left: 0px !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CART PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> CART PAGE > BUTTONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #checkout-cart .bottom_section .input-group-btn input { background: #333 !important; color: white !important; border: none !important; height: 60px !important; } /* #checkout-cart .what-next[href*="home"], .checkout-cart #error-not-found .btn-primary { border: 1px solid rgba(0, 0, 0, 0.3) !important; color: black !important; } */ #checkout-cart .what-next[href*="checkout"] { background: var(--accent_3) !important; color: white !important; border: none !important; text-transform: uppercase !important; } /* --> CART PAGE > INTRO [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #cart-intro { display: flex; width: 100%; justify-content: space-between; margin-bottom: 36px; margin-top: 30px; margin-bottom: 45px; } #cart-intro>div { display: flex; align-items: center; } /* --> CART PAGE > INTRO > LEFT SECTION [2] =========================================================================================================== */ #cart-intro .left-section {} /* --> CART PAGE > INTRO > MID SECTION [2] =========================================================================================================== */ #cart-intro .mid-section * { text-align: center; } #cart-intro .mid-section { font-size: 30px; font-weight: bold; margin-top: 10px; line-height: 1; } /* --> CART PAGE > INTRO > RIGHT SECTION [2] =========================================================================================================== */ #cart-intro .right-section {} /* --> CART PAGE > NO PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> CART PAGE > NO PRODUCTS > INTRO [2] =========================================================================================================== */ .checkout-cart #error-not-found #content { text-align: center; } .checkout-cart #error-not-found #content>h1 { font-size: 15px; letter-spacing: 1px; text-transform: uppercase; } .checkout-cart #error-not-found #content>p { font-family: var(--font2); font-size: 40px; font-weight: bold; text-transform: uppercase; margin-top: 10px; line-height: 1; } .checkout-cart #error-not-found #content .pull-right { float: none !important; margin-top: 100px; } /* --> CART PAGE > TABLE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #checkout-cart form { margin-bottom: 30px !important; } /* --> CART PAGE > TABLE > HEAD [2] =========================================================================================================== */ #checkout-cart table thead { background: #eeeeee; height: 50px; } #checkout-cart table thead td { color: black; font-size: 16px; } /* --> CART PAGE > TABLE > TR [2] =========================================================================================================== */ #checkout-cart form tbody tr:not(:last-child) { border-bottom: 1px solid #f3f3f3 !important } /* --> CART PAGE > TABLE > TD [2] =========================================================================================================== */ #checkout-cart form tbody { border: none !important; } #checkout-cart table tbody td { border: none; } #checkout-cart #cart-intro+form tbody td { padding: 25px 0px; } /* --> CART PAGE > TABLE > NAME [2] =========================================================================================================== */ /* --> CART PAGE > TABLE > NAME > MODEL [3] ------------------------------------------------------------- */ #checkout-cart table tbody td.product-title .model-info { color: #6C6C6C !important; margin: 15px 0px !important; display: block !important; font-size: 14px; } /* --> CART PAGE > TABLE > NAME > OPTIONS [3] ------------------------------------------------------------- */ #checkout-cart table tbody td.product-title small { display: block; font-size: 14px; } #checkout-cart table tbody td.product-title small strong { text-transform: uppercase; } /* --> CART PAGE > TABLE > ΠΟΣΟΤΗΤΑ [2] =========================================================================================================== */ /* --> CART PAGE > TABLE > ΠΟΣΟΤΗΤΑ > BOX [3] ------------------------------------------------------------- */ #checkout-cart form #cart-stepper { height: 40px; width: 40px; min-width: 40px; font-size: 18px; font-weight: bold; color: black; border: 1px solid rgba(0, 0, 0, 0.12); padding: 0px; } /* disable arrow view in chrome */ #checkout-cart form input[type=number]::-webkit-inner-spin-button, #checkout-cart form input[type=number]::-webkit-outer-spin-button { display: none !important; } /* --> CART PAGE > TABLE > ΠΟΣΟΤΗΤΑ > BUTTONS [3] ------------------------------------------------------------- */ #checkout-cart form .input-group-btn button { width: 40px; height: 40px; min-width: 40px; border: 1px solid rgba(0, 0, 0, 0.12) !important; color: black !Important; box-shadow: none; padding: 0px; } #checkout-cart form .input-group-btn button:first-child { margin-right: 10px; } /* --> CART PAGE > TABLE > PRICES [2] =========================================================================================================== */ #checkout-cart form tbody .price { font-size: 25px; font-weight: bold; } /* --> CART PAGE > BOTTOM SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> CART PAGE > BOTTOM SECTION > LAYOUT [2] =========================================================================================================== */ #checkout-cart .bottom_section { background: #eeeeee; padding: 50px 50px 50px 50px; margin-bottom: 45px; display: flex; justify-content: space-between; } #checkout-cart .bottom_section>* { width: auto; } /* --> CART PAGE > BOTTOM SECTION > DISABLES [2] =========================================================================================================== */ #checkout-cart .panel { display: none !important; } /* --> CART PAGE > BOTTOM SECTION > COUPON SECTION [2] =========================================================================================================== */ /* --> CART PAGE > BOTTOM SECTION > COUPON SECTION > TITLE [3] ------------------------------------------------------------- */ #checkout-cart .bottom_section .coupon_title { font-size: 17px; } /* --> CART PAGE > BOTTOM SECTION > COUPON SECTION > INPUT [3] ------------------------------------------------------------- */ #checkout-cart .bottom_section .input-group { margin-top: 35px; } #checkout-cart .bottom_section .input-group .form-control { height: 60px; border-bottom: none; font-size: 15px; width: 500px; padding: 0px 25px; max-width: 100% } /* --> CART PAGE > BOTTOM SECTION > COUPON SECTION > BUTTON [3] ------------------------------------------------------------- */ /* --> CART PAGE > BOTTOM SECTION > TOTALS SECTION [2] =========================================================================================================== */ /* --> CART PAGE > BOTTOM SECTION > TOTALS SECTION > COMMON [3] ------------------------------------------------------------- */ #checkout-cart .bottom_section .cart-total-table tr { display: flex; justify-content: space-between; } #checkout-cart .bottom_section .cart-total-table tr td { display: flex; align-items: center; } #checkout-cart .bottom_section .cart-total-table tr .title { text-transform: uppercase; margin-right: 100px !important; } #checkout-cart .bottom_section .cart-total-table tr .value { font-weight: bold; } /* --> CART PAGE > BOTTOM SECTION > TOTALS SECTION > TOTAL [3] ------------------------------------------------------------- */ #checkout-cart .bottom_section .cart-total-table tr:last-child .title { font-size: 18px; font-weight: bold; } #checkout-cart .bottom_section .cart-total-table tr:last-child .value { font-size: 25px; font-weight: bold; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION THANK YOU PAGE (CHECKOUT) VVV VVV VVV VVV VVV VVV VVV */ .checkout-success #content { text-align: center; } .checkout-success #content img { width: 600px; max-width: 100%; } .checkout-success #content .buttons .pull-right { float: none !important; } .checkout-success #content .buttons .pull-right a { text-align: center !important; margin-inline: auto !important; float: none !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION INFORMATION PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> INFORMATION PAGE > HERO BANNER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .top_of_page_hero_banner { width: 100%; display: block; max-height: 510px; object-fit: cover; } html.information-information #information-banner { height: 505px; } html.information-information img.top_of_page_hero_banner { object-fit: cover; height: 100%; width: 100%; } /* --> INFORMATION PAGE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .information-information body>.container { padding-inline: var(--calculatedPadding_wider) var(--calculatedPadding) !important; } .information-information .breadcrumb { margin-bottom: 30px !important; } /* --> INFORMATION PAGE > TITLE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .information-information #content h1 { margin-bottom: 40px; margin-top: 0px; } /* --> INFORMATION PAGE > CONTENT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .information-information #content p { font-weight: unset } .information-information #content, .information-information #content * { color: #626262; } .information-information #content :is(h1, h2, h3, h4) { color: black } /* --> INFORMATION PAGE > SIDEBAR [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .information.sidebar { width: 400px; } .information.sidebar ul { margin-inline: auto; width: fit-content } .information.sidebar img { width: 400px; max-width: 100%; margin-top: 50px !important; } .information-information #content p { font-weight: unset } .information-information .sidebar li a { font-size: 17px; font-weight: 400; transition: all .12s; border-radius: 0px; border: none !important; box-shadow: None !important; background: none !important; width: fit-content; padding: 10px 5px; } .information-information .sidebar li a:not(.current):hover { color: var(--accent_3) !important; background: white; } .information-information .sidebar li a.current { color: white !important; background: var(--accent_3) !important; font-weight: bold; padding: 14px 20px; } .information-information .sidebar ul { border: none } /* --> INFORMATION PAGE > FOOTER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .information-information footer { margin-top: 80px !important; } */ /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION INFORMATION PAGE: ΚΑΤΑΣΤΗΜΑΤΑ VVV VVV VVV VVV VVV VVV VVV */ /* --> INFORMATION PAGE: ΚΑΤΑΣΤΗΜΑΤΑ > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .custom_stores_wrapper .store_section { display: flex; gap: 50px; display: grid; grid-template-columns: 500px minmax(0, 1fr); } .custom_stores_wrapper .store_section:not(:last-child) { border-bottom: 1px solid #ccc; padding-bottom: 30px; margin-bottom: 30px; } .custom_stores_wrapper .store_section>.carousel { min-width: 500px !important; } .custom_stores_wrapper .store_section>.carousel img { width: 100%; } /* --> INFORMATION PAGE: ΚΑΤΑΣΤΗΜΑΤΑ > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .custom_stores_wrapper iframe { top: 0px; background: rgba(0, 0, 0, .2); left: 0px; margin: 0px; width: 100%; bottom: auto; height: 350px; } /* --> INFORMATION PAGE: ΚΑΤΑΣΤΗΜΑΤΑ > TEXTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .custom_stores_wrapper .store_section .texts .heading { font-size: 30px; line-height: 1.2; display: block; font-weight: 500 } .custom_stores_wrapper .store_section .texts { display: flex; flex-direction: column; gap: 20px } .custom_stores_wrapper .store_section .texts .hours .subheading { font-weight: bold; } .custom_stores_wrapper .store_section .texts>a { border: 1px solid var(--accent_3); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; ; padding: 10px 20px; color: var(--accent_3); transition: all .12s; } .custom_stores_wrapper .store_section .texts>a:hover { background: var(--accent_3); color: white; } /* --> INFORMATION PAGE: ΚΑΤΑΣΤΗΜΑΤΑ > RESPONSIVE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1200px) { .custom_stores_wrapper .store_section { display: flex; flex-direction: column; gap: 25px } .custom_stores_wrapper .store_section>.carousel { max-width: 100% !important; min-width: 100% !important; width: 100% !important; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION INFORMATION PAGE: ΕΥΚΑΙΡΙΕΣ ΚΑΡΙΕΡΑΣ VVV VVV VVV VVV VVV VVV VVV */ .career_opportunities_page .intro_section .subtitle { font-size: 20px; font-weight: 900; margin-bottom: 10px } .career_opportunities_page .accordion_section { margin-top: 50px; } .career_opportunities_page .accordion_section .title { font-size: 20px; font-weight: 900; margin-bottom: 10px } .career_opportunities_page .accordion_section .panel-group { margin-top: 20px } .career_opportunities_page .accordion_section .panel-group .panel-heading { padding: 0px !important; height: fit-content !important; min-height: 0px !important; } .career_opportunities_page .accordion_section .panel-group .panel-heading>a { padding-inline: 10px; width: 100% !important; display: block !important; padding: 10px; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CUSTOM INFORMATION PAGE: ABOUT US VVV VVV VVV VVV VVV VVV VVV */ /* --> CUSTOM INFORMATION PAGE: ABOUT US > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .about_us_custom_contents>.row { padding-inline: var(--calculatedPadding); gap: 0px; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > INTRO [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .about_us_custom_contents>.row.intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: flex-start; margin-top: 30px !important; } .about_us_custom_contents>.row.intro .section_title { margin-bottom: 20px; } .about_us_custom_contents>.row.intro .description { color: #626262; font-size: 14px; line-height: 29px; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > CAROUSEL GALLERY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> CUSTOM INFORMATION PAGE: ABOUT US > CAROUSEL GALLERY > LAYOUT [2] =========================================================================================================== */ .about_us_custom_contents .row.carousel_gallery { padding-right: 0px; position: relative; margin-top: 70px; } .about_us_custom_contents .about-swiper { width: 100%; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > CAROUSEL GALLERY > SLIDE [2] =========================================================================================================== */ .about_us_custom_contents .about-swiper .swiper-slide { overflow: hidden; cursor: pointer; position: relative; } .about_us_custom_contents .about-swiper-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease, opacity 0.3s ease; } .about_us_custom_contents .about-swiper .swiper-slide:hover .about-swiper-img { transform: scale(1.03); opacity: 0.92; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > CAROUSEL GALLERY > SLIDE > HOVER CROSS ICON [3] ------------------------------------------------------------- */ .about_us_custom_contents .about-slide-cross { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.7); width: 52px; height: 52px; background: #fff; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1); z-index: 2; } .about_us_custom_contents .about-slide-cross::before, .about_us_custom_contents .about-slide-cross::after { content: ''; position: absolute; top: 50%; left: 50%; background: #111; border-radius: 2px; } .about_us_custom_contents .about-slide-cross::before { width: 2px; height: 22px; transform: translate(-50%, -50%); } .about_us_custom_contents .about-slide-cross::after { width: 22px; height: 2px; transform: translate(-50%, -50%); } .about_us_custom_contents .about-swiper .swiper-slide:hover .about-slide-cross { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* --> CUSTOM INFORMATION PAGE: ABOUT US > CAROUSEL GALLERY > SLIDE > MODAL [3] ------------------------------------------------------------- */ .about_us_custom_contents .about-modal-overlay { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); z-index: 99999; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .about_us_custom_contents .about-modal-overlay.is-open { opacity: 1; pointer-events: all; } .about_us_custom_contents .about-modal-content { max-width: 90vw; max-height: 90vh; transform: scale(0.88); transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1); display: flex; align-items: center; justify-content: center; } .about_us_custom_contents .about-modal-overlay.is-open .about-modal-content { transform: scale(1); } .about_us_custom_contents .about-modal-content img { max-width: 90vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); display: block; } .about_us_custom_contents .about-modal-close { position: absolute; top: 18px; right: 24px; background: none; border: none; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; z-index: 1; } .about_us_custom_contents .about-modal-close:hover { opacity: 1; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > EXPERIENCE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .about_us_custom_contents .row.experience { margin-top: 73px; gap: 130px; } .about_us_custom_contents .row.experience .title { font-size: 25px; margin-bottom: 15px } .about_us_custom_contents .row.experience .description { font-size: 14px; line-height: 29px; color: #626262 } /* --> CUSTOM INFORMATION PAGE: ABOUT US > TIMELINE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .about_us_custom_contents .timeline_section { margin-top: 65px; overflow: hidden; position: relative; padding-left: var(--calculatedPadding); } .about_us_custom_contents .timeline-swiper { width: 100% !important; } .about_us_custom_contents .timeline_section:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: calc((100% - 96px) / 10); background: linear-gradient(to right, transparent, #fff); pointer-events: none; z-index: 10; } .about_us_custom_contents .timeline-nav { display: flex; gap: 6px; margin-bottom: 40px; padding: 0 48px; } .about_us_custom_contents .timeline-btn { background: none; border: none; font-size: 40px; line-height: 1; color: #222; cursor: pointer; padding: 0 4px; transition: opacity 0.2s; } .about_us_custom_contents .timeline-btn:hover { opacity: 0.5; } .about_us_custom_contents .timeline-btn.swiper-button-disabled { opacity: 0.2; cursor: default; } /* Swiper container – allow side overflow so neighbours peek */ .about_us_custom_contents .timeline-swiper { overflow: visible; padding: 0 48px; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > TIMELINE > SLIDE [2] =========================================================================================================== */ .about_us_custom_contents .timeline-slide { box-sizing: border-box; transition: opacity 0.4s; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > TIMELINE > SLIDE > Inner wrapper – receives the dark box on active [3] ------------------------------------------------------------- */ .about_us_custom_contents .tl-inner { border-radius: 14px; background: transparent; overflow: visible; transition: background 0.35s, padding 0.35s; padding: 40px 70px; } @media(min-width: 1025px) { .about_us_custom_contents .swiper-slide-next .tl-inner { background: #2C2727; } } /* --> CUSTOM INFORMATION PAGE: ABOUT US > TIMELINE > SLIDE > YEAR LABEL [3] ------------------------------------------------------------- */ .about_us_custom_contents .tl-year { font-size: 30px; font-weight: 500; color: #d4930a; margin-bottom: 12px; line-height: 1; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > TIMELINE > SLIDE > Rail row (horizontal line + dot) [3] ------------------------------------------------------------- */ .about_us_custom_contents .tl-rail { position: relative; height: 20px; display: flex; align-items: center; margin-bottom: 40px; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > TIMELINE > SLIDE > Line extends beyond the inner box to bridge the gap between slides [3] ------------------------------------------------------------- */ .about_us_custom_contents .tl-rail::before { content: ''; position: absolute; top: calc(50% + 25px); left: -70px; right: -70px; height: 1px; background: #bbb; transform: translateY(-50%); z-index: 0; } .about_us_custom_contents .tl-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: #555; border: 2px solid #bbb; position: relative; z-index: 1; flex-shrink: 0; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; } @media(min-width: 1025px) { .about_us_custom_contents .swiper-slide-next .tl-dot { background: #fff; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } } .about_us_custom_contents .tl-dot:before { content: ""; height: 20px; background: #bbb; width: 1px; position: absolute; top: 100%; left: 50%; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > TIMELINE > SLIDE > CARD BODY [3] ------------------------------------------------------------- */ .about_us_custom_contents .tl-card { min-height: 220px; } .about_us_custom_contents .tl-card p { margin: 0; font-size: 18px; line-height: 40px; color: #333; transition: color 0.35s; } @media(min-width: 1025px) { .about_us_custom_contents .swiper-slide-next .tl-card p { color: #f0f0f0; } .about_us_custom_contents .swiper-slide-next .tl-card h2 { color: #f0f0f0; } } @media (max-width: 767px) { .about_us_custom_contents .timeline-swiper { padding: 0 20px; } .about_us_custom_contents .timeline-nav { padding: 0 20px; } .about_us_custom_contents .timeline-slide { width: 270px; } .about_us_custom_contents .tl-card { min-height: 200px; } } /* --> CUSTOM INFORMATION PAGE: ABOUT US > Στόχος και Φιλοσοφία μας [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .about_us_custom_contents .row.mission { margin-top: 140px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0px; align-items: center; padding: 0px; background: #EFEFEF; } .about_us_custom_contents .row.mission .left_side img { width: 100% } .about_us_custom_contents .row.mission .right_side { padding-inline: var(--calculatedPadding); } .about_us_custom_contents .row.mission .right_side .description { margin-top: 25px; font-size: 14px; line-height: 24px; color: #626262; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > Γιατί να μας προτιμήσετε [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .about_us_custom_contents .row.choose_us { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0px; align-items: center; padding-inline: 0px; background: #2C2727; } .about_us_custom_contents .row.choose_us .left_side { padding-inline: var(--calculatedPadding); display: flex; flex-direction: column; } .about_us_custom_contents .row.choose_us .left_side .section_title { color: white; margin-bottom: 30px; } .about_us_custom_contents .row.choose_us .left_side .list { display: flex; flex-direction: column; gap: 20px } .about_us_custom_contents .row.choose_us .left_side .list .list-item { display: flex; gap: 0px 18px; } .about_us_custom_contents .row.choose_us .left_side .list .list-item img { width: 36px; } .about_us_custom_contents .row.choose_us .left_side .list .list-item .item-text { color: #FFF1F1; font-size: 18px; line-height: 30px; margin-bottom: 30px; } .about_us_custom_contents .row.choose_us .right_side img { width: 100% } /* --> CUSTOM INFORMATION PAGE: ABOUT US > RESPONSIVE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ body:has(.about_us_custom_contents) { --defaultPadding: 40px !important; } /* --> CUSTOM INFORMATION PAGE: ABOUT US > RESPONSIVE > HERO BANNER [2] =========================================================================================================== */ html.information-information #information-banner { height: 505px; } html.information-information img.top_of_page_hero_banner { object-fit: cover; height: 100%; width: 100%; } @media(max-width: 840px) { html:has(.about_us_custom_contents) #information-banner { position: relative; } html:has(.about_us_custom_contents) #information-banner:before { position: absolute; content: ""; bottom: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); z-index: 1; display: block; } html:has(.about_us_custom_contents) #information-banner:after { position: absolute; content: "Discover \A VEROBAGS"; white-space: pre; left: var(--calculatedPadding); bottom: 40px; font-size: 64px; font-weight: bold; color: white; z-index: 2; margin: 0px; line-height: normal; } } @media(max-width: 450px) { html:has(.about_us_custom_contents) #information-banner:after { font-size: 14vw; } } /* --> CUSTOM INFORMATION PAGE: ABOUT US > RESPONSIVE > INTRO [2] =========================================================================================================== */ @media(max-width: 900px) { .about_us_custom_contents>.row.intro { display: flex; flex-direction: column; gap: 70px; } .about_us_custom_contents>.row.intro img { min-width: 100vw; margin-left: calc(-1 * var(--calculatedPadding)); } } /* --> CUSTOM INFORMATION PAGE: ABOUT US > RESPONSIVE > CAROUSEL GALLERY [2] =========================================================================================================== */ @media(max-width: 768px) { .about_us_custom_contents>.carousel_gallery { margin-left: calc(-1 * var(--calculatedPadding)); margin-top: 20px !important; } } /* --> CUSTOM INFORMATION PAGE: ABOUT US > RESPONSIVE > EXPERIENCE [2] =========================================================================================================== */ @media(max-width: 1230px) { .about_us_custom_contents .row.experience { gap: 40px; } } @media(max-width: 1024px) { .about_us_custom_contents .row.experience { margin-top: 50px; display: flex; flex-direction: column; gap: 50px; } } /* --> CUSTOM INFORMATION PAGE: ABOUT US > RESPONSIVE > TIMELINE [2] =========================================================================================================== */ @media(max-width: 1270px) { .about_us_custom_contents .tl-inner { padding: 20px 32px; } } @media(max-width: 1024px) { .about_us_custom_contents .swiper-slide-active .tl-inner { background: #2C2727; color: white !important; } .about_us_custom_contents .swiper-slide-active .tl-card p { color: #f0f0f0; } .about_us_custom_contents .swiper-slide-active .tl-card h2 { color: #f0f0f0; } .about_us_custom_contents .swiper-slide-active .tl-dot { background: #fff; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } } @media(max-width: 768px) { .about_us_custom_contents .timeline_section { padding-left: 0px; } } /* --> CUSTOM INFORMATION PAGE: ABOUT US > RESPONSIVE > IMAGE + INFOS GRID [2] =========================================================================================================== */ @media(max-width: 1450px) and (min-width: 1151px) { .about_us_custom_contents .row.mission .right_side .description, .about_us_custom_contents .row.choose_us .left_side .list { max-height: 250px; overflow: auto; } } @media(max-width: 1150px) { .about_us_custom_contents .row.mission { display: flex; flex-direction: column; margin-top: 60px; gap: 60px; padding-bottom: 70px; } .about_us_custom_contents .row.mission>* { width: 100% !important; } } @media(max-width: 1150px) { .about_us_custom_contents .row.choose_us { display: flex; flex-direction: column; gap: 65px; padding-bottom: 0px; padding-top: 60px; margin-top: 0px } .about_us_custom_contents .row.choose_us>* { width: 100% !important; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION MANUFACTURER LIST PAGE VVV VVV VVV VVV VVV VVV VVV */ /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CONTACT PAGE VVV VVV VVV VVV VVV VVV VVV */ #information-contact #content { width: 100%; max-width: 1200px; padding: 30px !important; border-radius: 20px; margin-inline: auto; } #information-contact .panel-default { margin-top: 25px; background: #f8f8f8; border: none; } #information-contact #content h3, #information-contact #content legend { margin-top: 30px !important; display: block !important; } #information-contact #content .panel-body img { background: var(--accent_3); } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CHECKOUT PAGE VVV VVV VVV VVV VVV VVV VVV */ #checkout-checkout { margin-top: 50px } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION RESPONSIVE VVV VVV VVV VVV VVV VVV VVV */ /* --> RESPONSIVE > VARIABLES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1250px) { body { --menuPadding: 50px; } } @media(max-width: 1024px) { body { --headerHeight: 70px; --menuPadding: 40px; } } @media(max-width: 768px) { body { --menuPadding: 30px; --defaultPadding: 30px; } } @media(max-width: 450px) { body { --headerHeight: 60px; } } /* --> RESPONSIVE > COMMON [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> RESPONSIVE > COMMON > TITLES [2] =========================================================================================================== */ @media(max-width: 991px) { /* .section_title, .main_title, .latest-posts .blog-headings .headingmain, .home_banner_blog .column-content-2 .html_section h2, #product-category .cat-title { font-size: 35px; } */ .section_title_sec, .pre_title, .section_title .after_title, .section_title, .main_title, .latest-posts .blog-headings .headingmain, .home_banner_blog .column-content-2 .html_section h2, #product-category .cat-title, #blog-category .headingmain, #product-product #content>.row.text_n_banner .left_side .title, #information-contact #content>h3, .form-horizontal legend { line-height: normal !important; } } @media(max-width: 991px) and (min-width: 769px) { #product-category .cat-title { font-size: 26px; line-height: normal; } } /* --> RESPONSIVE > COMMON > CAROUSEL [2] =========================================================================================================== */ /* --> RESPONSIVE > COMMON > CAROUSEL > VIEW MORE [3] ------------------------------------------------------------- */ @media(max-width: 768px) { .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .view_more, .carousel .view_more, .products-carousel-module .view_more, .module_product_tabs.layout_2_tabs .view_more { position: relative !important; left: 0px; right: 0px !important; bottom: 0px !important; width: fit-content; margin-top: 20px; margin-inline: auto; display: block; /* color: black !important; border-color: black !important; */ top: unset !important; bottom: unset !important; } } /* --> RESPONSIVE > HEADER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> RESPONSIVE > HEADER > TOGGLE DEPENDING ON SCROLL HEIGHT (+JS) [2] =========================================================================================================== */ @media(max-width: 768px) { html:not(.fixedToTop) header { transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); } } /* --> RESPONSIVE > HEADER > TOP BAR (+JS) [2] =========================================================================================================== */ /* @media(max-width: 900px) { #top-bar { display: none !important; flex-direction: column; justify-content: center; align-content: center; text-align: center; } #top-bar p { margin-bottom: 0px; line-height: normal; font-size: 10px; } #header_sections_container { margin: 0px; } } */ /* @media (max-width: 1649px) { */ #top-bar { overflow: hidden; white-space: nowrap; position: relative; padding: 10px 0; /* width: 100%; */ width: 100vw; margin-left: 50%; transform: translateX(-50%); } #top-bar.marquee-active { display: flex; align-items: center; } #top-bar.marquee-active .marquee-content { display: inline-block; animation: marquee 17s linear infinite; white-space: nowrap; color: white; font-weight: 500; font-size: 13px; text-transform: uppercase; -webkit-animation: marquee 17s linear infinite; cursor: default; } @keyframes marquee { 0% { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } 100% { transform: translateX(-33.33%); } } /* Pause animation on hover */ #top-bar:hover .marquee-content { animation-play-state: paused; } /* Hide original paragraphs when marquee is active */ #top-bar.marquee-active>p { display: none; } /* } */ /* Desktop styles - show original paragraphs normally */ /* @media (min-width: 1650px) { */ #top-bar .marquee-content { display: none; } /* } */ /* --> RESPONSIVE > HEADER > LAYOUT [2] =========================================================================================================== */ @media(max-width: 1550px) { .header_mid_section { width: 100% !important; } body { --headerItmesDinstance: 10px !important; } } @media(max-width: 1400px) { .header_left_section, .header_right_section { width: fit-content !important; } } @media(max-width: 1024px) { #logo { margin-right: auto } } @media(max-width: 768px) { header .header_mid_section, header .header_mid_section .main-menu, header .header_mid_section .main-menu #menu { width: fit-content !important; margin: 0px !important; } #header_sections_container .header_mid_section { order: -1 !important; } .header_mid_section #logo a { height: 50px; width: 75px; float: none; display: block !important; overflow: hidden } .header_mid_section #logo a img { height: 100% } } @media(max-width: 620px) { .header_sections_container {} body { --headerItemsDistance: 10px !important; } } @media(max-width: 540px) { .header_right_section>ul>li.account_item { margin-right: -7px } body>header { padding-left: 8px !important; transition: all .2s; } /* .header_left_section #logo a img { height: 35px; } */ .header_left_section { padding-right: 5px !important; } .header_right_section>ul { gap: 15px !important; } .header_right_section .b2b_login_item a { font-size: 0px; margin-right: 0px; } .header_right_section .b2b_login_item a:after { content: "B2B"; font-size: 15px } } @media(max-width: 450px) { .header_mid_section #logo a { height: 30px; width: 45px; } .header_right_section>ul { gap: 15px; } /* #search .input-group-btn>button>svg, .header_right_section .language_item #form-language>.btn-group>button>img, .header_right_section .compare_item>a>img, .header_right_section .account_item>a>svg, .header_right_section .cart_item>button>img, .header_right_section .search_item>a>svg, .header_right_section .wishlist_item>a #wishlist_image img { height: 20px } */ } /* --> RESPONSIVE > HEADER > LAYOUT > MENU [3] ------------------------------------------------------------- */ @media(max-width: 768px) { #menu_toggle_section { display: flex !important; flex-direction: column !important; height: fit-content !important } #menu_toggle_section #burger_button img { transform: scaleX(1.3) scaleY(0.8) } #menu_toggle_section #category>span { font-size: 12px; } #menu_toggle_section #category>span:first-child { display: none !important; } #menu_toggle_section #category>span:last-child { display: block !important; } #menu_toggle_section #burger_button { margin: 0px !important; } } /* --> RESPONSIVE > HEADER > MENU [2] =========================================================================================================== */ @media(max-width: 1100px) { #menu_close_button { /* background: var(--accent_1) !important; border-radius: 100%; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; top: 25px !important; */ right: 10px; width: fit-content !important; left: unset !important; opacity: .5; } #menu_container:has(.dropdown_activated) #menu_close_button { visibility: hidden !important; } } @media(max-width: 768px) { #menu .navbar-nav, #menu .navbar-nav .dropdown-menu { padding: 25px var(--menuPadding) 20px; } #menu_header>a>img { width: auto !important; height: 50px !important; } /* #menu_container, #menu .nav.navbar-nav li.dropdown .dropdown-menu { padding-left: 30px !important; padding-right: 30px !important; } */ #menu_container { width: 350px; max-width: 100%; } /* #menu .extra_links>a { padding: 9px 30px; } */ } @media(min-width: 1551px) { #menu .navbar-nav>.outside_menu_links_mobile { display: none; } } /* HEADER > MENU */ @media(max-width: 1200px) { #menu .outside_menu_links { display: none } #menu .navbar-nav>li:not(.outside_menu_links_mobile)+.outside_menu_links_mobile { margin-top: auto } } /* --> RESPONSIVE > HEADER > MENU > HEIGHTS [3] ------------------------------------------------------------- */ @media(max-width: 1100px) { #menu .nav.navbar-nav li.dropdown .dropdown-menu { padding-top: 20px; } } @media(max-width: 768px) { #menu_header { /* height: 60px; */ margin-bottom: 0px; } #menu .nav.navbar-nav { height: calc(100vh - 60px - 230px); overflow: auto; justify-content: unset; } @media(max-width: 768px) { .navbar-nav>li.menu_extension_link:last-child { margin-bottom: 0px } } /* #menu .nav.navbar-nav li.dropdown .dropdown-menu{ height: calc(100vh - 230px); overflow:auto; } #menu .extra_links { height: 200px; margin-top: 30px; } */ } /* --> RESPONSIVE > HEADER > MENU > MOBILE VERSION ONLY [3] ------------------------------------------------------------- */ /* --> RESPONSIVE > HEADER > MENU > MOBILE VERSION ONLY > MENU HEADER */ /* --> RESPONSIVE > HEADER > MENU > MOBILE VERSION ONLY > MENU HEADER > COLORS */ #menu .navigation_menu>ul.mobile_header_items .language_item #form-language>.btn-group>button>img, #menu .navigation_menu>ul.mobile_header_items .compare_item>a>img, #menu .navigation_menu>ul.mobile_header_items .wishlist_item>a>div>img, #menu .navigation_menu>ul.mobile_header_items .account_item>a>img, #menu .navigation_menu>ul.mobile_header_items .search_item>a>svg, #menu .navigation_menu>ul.mobile_header_items #search-toggle>a>img { filter: brightness(0) invert(100) !important; } /* --> RESPONSIVE > HEADER > MENU > MOBILE VERSION ONLY > MENU HEADER >LAYOUT */ #menu .navigation_menu { justify-content: flex-end !important; } #menu .navigation_menu>ul.mobile_header_items { display: flex; flex-wrap: nowrap; align-items: center; margin-bottom: 15px !important; gap: 20px; margin-left: 0px; margin-top: -10px; padding: 0px; text-align: center; justify-content: center; list-style: none; } #menu .navigation_menu>ul.mobile_header_items>li>a { display: flex; align-items: center; } #menu .navigation_menu>ul.mobile_header_items>li { padding: 0px !important; } /* --> RESPONSIVE > HEADER > MENU > MOBILE VERSION ONLY > MENU HEADER >MOBILE EXCEPTIONS COMPARED TO DESKTOP */ #menu .navbar-nav .mobile_header_items>li.account-dropdown .dropdown-menu { margin-left: -20px !important } #menu .navbar-nav .mobile_header_items>li.language_item .dropdown-menu { margin-left: 30px !important } #menu .navbar-nav .mobile_header_items>li>a, #menu .navbar-nav .mobile_header_items>li #form-language>.btn-group { position: relative !important; height: 40px; display: flex; align-items: center } #menu .navbar-nav .mobile_header_items li.dropdown.open>a { background: none !important; } #menu .navbar-nav .mobile_header_items li.dropdown { position: relative !important; } #menu .navbar-nav .mobile_header_items .dropdown-menu { position: absolute !important; height: fit-content !important; top: 100% !important; width: fit-content !important; max-width: 170px !important; padding: 5px 15px !important; overflow: hidden !important; transform: translateX(-50%) translateY(10px) !important; } #menu .navbar-nav .mobile_header_items .dropdown-menu li>a { height: unset !important; white-space: normal !important; } /* --> RESPONSIVE > HEADER > MENU > MOBILE VERSION ONLY > PARENT HEADER */ @media(max-width: 1100px) { #menu_container:has(.dropdown_activated) #menu_close_button { visibility: visible !important; filter: brightness(0) !important; -webkit-filter: brightness(0) !important; } #menu .parent_header>a { font-weight: 700; border-bottom: none; padding-bottom: 0px !important; text-align: center; padding-right: 20px !important; } #menu .parent_header { border-color: #9B9B9B !important; margin-top: 30px !important; } #menu .dropdown .dropdown-menu .dropdown-inner { height: calc(100% - 45px) !important; } } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLY [3] ------------------------------------------------------------- */ @media(min-width: 1101px) { /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION */ /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > CONTAINER */ #menu_container { width: 100%; background: transparent; flex-direction: row; } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > ALL LEVELS */ /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > ALL LEVELS > BACK ARROW / CLOSE BUTTON */ /* #menu .parent_header>a { padding-left: 25px !important } */ .arrow_back { position: absolute; top: 12px !important; right: 20px; transition: all .2s; } #menu_close_button { transition: all .2s; } .arrow_back>img { display: none; } .arrow_back { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='50px' height='50px'%3E%3Cpath d='M 40.783203 7.2714844 A 2.0002 2.0002 0 0 0 39.386719 7.8867188 L 25.050781 22.222656 L 10.714844 7.8867188 A 2.0002 2.0002 0 0 0 9.2792969 7.2792969 A 2.0002 2.0002 0 0 0 7.8867188 10.714844 L 22.222656 25.050781 L 7.8867188 39.386719 A 2.0002 2.0002 0 1 0 10.714844 42.214844 L 25.050781 27.878906 L 39.386719 42.214844 A 2.0002 2.0002 0 1 0 42.214844 39.386719 L 27.878906 25.050781 L 42.214844 10.714844 A 2.0002 2.0002 0 0 0 40.783203 7.2714844 z'%3E%3C/path%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; display: block !important; min-width: 27px !important; min-height: 27px !important; cursor: pointer; background-size: cover } .dropdown-inner:has(> ul > li:is(.dropdown_activated))>.parent_header>.arrow_back, #menu_container:has(.dropdown_activated) #menu_close_button { opacity: 0; visibility: hidden; transform: translateX(10px); } #menu_close_button { left: calc((100vw / 4) - 55px) !important; } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > ALL LEVELS > PARENT ELEMENT */ #menu .parent_header { /* display: none */ border: none !important; text-transform: uppercase; margin-bottom: 0px !important; } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > ALL LEVELS > FLAG ACTIVE PARENT */ #menu .nav.navbar-nav li.dropdown>a { border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -ms-border-radius: 5px 0 0 5px; -o-border-radius: 5px 0 0 5px; } #menu .nav.navbar-nav li.dropdown.dropdown_activated>a { /*font-weight: bold !important; */ /*color: var(--accent_3) !important; */ } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > LEVEL 0+1 (USED AS BASE) */ /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > LEVEL 0+1 (USED AS BASE) > LAYOUT */ #menu .navbar-nav, .level_1_wrapper { width: calc(100% / 4) !important; } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > INNER LEVELS */ /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > INNER LEVELS > LAYOUT */ .level_1_wrapper, .level_2_wrapper, .level_3_wrapper { overflow: visible !important; } .level_1_wrapper { left: calc(100% / 4) !important; } .level_2_wrapper { left: 100% !important; background: #f1f1f1 !important; } .level_3_wrapper { left: 100% !important; } } /* --> RESPONSIVE > HEADER > CART [2] =========================================================================================================== */ @media(max-width:550px) { body { --minicart-width: 100vw !important; } /* #cart .dropdown-menu>li.bottom-section { height: 220px !important; } */ /* li.bottom-section > div.container{ width: 280px !important; } */ /* #cart .dropdown-menu { padding: 20px 0px; } */ #cart .dropdown-menu .product-info a { font-size: 14px; line-height: normal; } .minicart_intro .subtitle { font-size: 25px !important; line-height: normal !important; } #cart .dropdown-menu .product-info .product-options .option-name, #cart .dropdown-menu .product-info .product-options .option-value { font-size: 12px; } #cart .dropdown-menu .table-products { padding: 0px !important; } /* #cart .dropdown-menu .cart-footer>a { height: 45px !important; } #cart .dropdown-menu .product-thumb { padding: 0px; width: 100px; height: 100px; vertical-align: top; } */ } @media(max-width: 440px) { #cart .dropdown-menu .product-thumb { width: 100px; height: 100px; margin-top: 30px; } #cart .dropdown-menu .table-products>tbody>tr { grid-template-columns: 100px 1fr; gap: 13px !important; } } @media(max-width: 350px) { #cart .dropdown-menu .product-thumb { width: 60px; height: 60px; } #cart .dropdown-menu .table-products>tbody>tr { grid-template-columns: 60px 1fr; gap: 10px !important; } } /* --> RESPONSIVE > HEADER > SEARCH > RESULTS [2] =========================================================================================================== */ @media(max-width: 500px) { #search_contents #search { margin-top: 115px; } .live-search-div { max-height: calc(100vh - 195px); } } /* --> RESPONSIVE > FOOTER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1370px) { .footer_extra_container { margin-top: 40px !important; } } @media(max-width: 1200px) { .footer_extra_container .contact_section_wrapper { width: 100% !important; } .footer_extra_container { margin-top: 0px !important; margin-left: 0px; gap: 30px } .footer_extra_container .contact_section { width: 100% !important; } } @media(max-width: 815px) { .footer_extra_container { align-items: flex-start } .footer_extra_container { flex-direction: column; width: 100%; } .footer_extra_container .contact_section { width: 100% !important; justify-content: space-around; } footer .socials_section { /* margin-left: 0px !important; margin-right: auto !important; margin-inline: 0px !important; */ width: fit-content !important; } footer .socials_section>h5 { text-align: center; width: 100%; } .socials_section a:hover svg { filter: invert(71%) sepia(19%) saturate(5143%) hue-rotate(0deg) brightness(102%) contrast(105%); } } @media(max-width: 605px) { footer .contact_section>div { white-space: nowrap !important; } footer .contact_section { display: flex; flex-direction: column; height: fit-content !important; gap: 5px !important; padding-block: 10px } } @media(max-width: 1200px) { footer>.container>.links-row { display: flex !important; flex-wrap: wrap !important; } footer>.container>.links-row>div { flex: 1 1 180px; } footer .links-row { gap: 30px 20px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 30px; } } @media(max-width: 1200px) { /* footer { background-image: none } */ footer .links-row { position: relative; z-index: 0 } footer .links-row>.footer-column:last-child { position: relative; z-index: 0; width: 100% !important; flex: 1 1 100% !important; margin-bottom: 30px; padding-left: 0px !important; } footer .links-row>.footer-column:last-child::before { display: none; } .footer-column .newsletter_section .news-form #subscribe:hover { background: var(--accent_2); } } @media(max-width: 900px) { footer>.container>.links-row>div { flex: 1 1 calc(50% - 30px) !important; } footer .links-row>.footer-column:last-child::before { display: none; } .powered_by { display: flex; flex-direction: column; text-align: center; gap: 5px; } } @media(max-width: 900px) and (min-width: 769px) { .powered_by>div { display: flex; flex-direction: column; text-align: center; gap: 5px; } } @media(max-width: 768px) { .powered_by { padding-block: 15px 10px; background: #001123; border: none !important; box-shadow: var(--calculatedPadding) 0px #001123, calc(-1 * var(--calculatedPadding)) 0px #001123 } .powered_by * { color: white !important; display: flex; justify-content: center; } } @media(max-width: 420px) { footer>.container>.links-row>div { flex: 1 1 100% !important; } .footer-column .newsletter_section .news-form .col-sm-6 { display: flex; flex-direction: column; gap: 15px } .footer-column .newsletter_section .news-form input#email, .footer-column .newsletter_section .news-form #subscribe { width: 100% !important; } } @media(max-width: 768px) { footer>.container>.links-row>div { flex: 1 1 100% !important; } footer .footer-column h5 { cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin-bottom: 0 !important; padding: 14px 0; border-bottom: 1px solid rgba(46, 43, 43, 0.2); user-select: none; font-size: 15px; font-weight: 500; padding-inline: 12px; } footer .footer-column h5::after { content: ''; display: block; width: 16px; height: 16px; flex-shrink: 0; background-image: url('/image/catalog/cut_assets/generic/icons/arrow down black.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; transition: transform 0.25s ease; } footer .footer-column h5.accordion-open::after { transform: rotate(180deg); } footer .footer-column ul { overflow: hidden; max-height: 0; transition: max-height 0.3s ease, padding 0.3s ease; padding-top: 0; padding-bottom: 0; margin-top: 0; padding-inline: 12px; } footer .footer-column ul.accordion-open { max-height: 600px; padding-top: 17px; padding-bottom: 12px; } footer .footer-column.payments h5 { border-bottom: none; } footer>.container>.links-row { gap: 15px !important; margin-bottom: 0 !important; } } @media(max-width: 815px) { footer .horizontal_links_container { width: fit-content; margin-inline: auto; text-align: center; } } /* --> FOOTER > RESPONSIVE > EXTRA SECTION [2] =========================================================================================================== */ .extra_footer_section { gap: 50px; display: flex; flex-direction: column; margin-top: 30px; margin-bottom: 45px; } .extra_footer_section .extra_footer_item { gap: 32px 22px; display: flex; } .extra_footer_section .extra_footer_item.socials { align-items: center; } .extra_footer_section .extra_footer_item.payments { flex-direction: column; } .extra_footer_section .extra_footer_item>h5 { align-items: center; margin-bottom: 0 !important; font-size: 15px; font-weight: 500; text-transform: uppercase; margin: 0px; } .extra_footer_section .extra_footer_item>div { display: flex !important; margin-top: 20px; align-items: center; gap: 20px; padding-inline: 12px; margin: 0px; flex-wrap: wrap; } .extra_footer_section .extra_footer_item>div svg { height: 20px; } .extra_footer_section .extra_footer_item>div img { height: 26px !important; } /* --> RESPONSIVE > NEWSLETTER POPUP [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 450px) { .tk-cart-body { padding: 0px !important; } .alert.alert-success.alert-dismissible .add-to-cart-inner { left: 50%; transform: translateX(-50%); width: calc(100vw - 30px) !important; padding: 15px; } } /* --> RESPONSIVE > HOME [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1420px) { #common-home #latestblog .product-thumb .caption h4 a { font-size: 18px; line-height: normal; } #common-home #latestblog .product-thumb .caption .dateadded i { font-size: 15px !important; } } @media(max-width: 1150px) { #common-home .headingmain { margin-left: 0px; margin-right: 0px !important } #common-home #latestblog>.row { display: flex !important; flex-wrap: wrap !important; } #common-home #latestblog>.row>div { width: 33.33%; } } @media(max-width: 991px) { #common-home #latestblog>.row>div { width: 50%; } #common-home #content .row.featured-products-module.featured0, #common-home #content .row.featured-products-module.featured1 { width: 100% !important; } /* #common-home #content> :not(.slideshow) { padding: 0px var(--responsivePadding); } */ .row.special-products-module { margin-left: 0px !important; margin-right: 0px !important; } #common-home #content .slideshow { order: -100 !important; } #common-home #content .banner0 { order: -90 !important; } #common-home #content .featured0 { order: -80 !important; } #common-home #content .banner1 { order: -70 !important; } #common-home #content .featured1 { order: -60 !important; } #common-home #content .row.swiper-viewport.banner2, #common-home #content .row.swiper-viewport.banner3 { padding: 0px !important; } } @media(max-width: 820px) { .row.news-form { display: flex; align-items: center; flex-direction: column; padding-top: 15px; } .news-form h1 { text-align: center !important; } #common-home #content .row .news-form h3 { text-align: center; line-height: normal; margin-top: 15px; } #common-home #content .row .news-form .pull-center { display: flex; flex-wrap: wrap !important; text-align: center; justify-content: center; align-items: center; justify-content: center; } #common-home #content .row .news-form .pull-center input { order: -100; margin-right: 10px; margin-top: 0px; } } @media(max-width:768px) { #common-home #latestblog>.row>div .dateadded i { font-size: 14px !important; } #common-home #latestblog>.row>div .caption { padding: 10px !important; justify-content: flex-end !important; } #common-home #latestblog>.row>div .caption h4 a { font-size: 17px !important; line-height: normal !important; } } @media(max-width: 600px) { #common-home #content .row.swiper-viewport.banner2, #common-home #content .row.swiper-viewport.banner3 { width: 100% !important; padding: 0px var(--responsivePadding) !important; } } @media(max-width: 450px) { #common-home #latestblog>.row>div { width: 100% !important; } } @media(max-width: 400px) { .row.news-form>div { display: flex; flex-direction: column; } /* .news-form #subscribe { width: 100% !important; margin-top: 10px; } */ } /* --> RESPONSIVE > HOME > SPACING [2] =========================================================================================================== */ @media(max-width: 1200px) { /* #common-home .home_category_carousel, #common-home .module_product_tabs { margin-top: 90px !important; } #common-home .text_and_banners_section>div:not(.carousel) { margin-top: 10px !important; } #common-home .banner_and_tabs_section { margin-top: 30px !important; } */ } /* @media(max-width: 768px) { .module_row_section.multi-banner-group { margin-top: 20px !important; } .module_product_tabs { margin-top: 110px; } .manufacturer_carousel { margin-top: 40px; } .per_profession { margin-top: 80px } .carousel.product_categories { margin-top: 80px; } .home_banner_n_products, .home_products_n_banner { margin-top: 80px !important; } .video-carousel-container { padding-block: 0px 15px; } .video-carousel-container+.html_section p { padding-bottom: 80px; } } */ @media(max-width: 1200px) { #common-home #content>.row.swiper-viewport { margin-bottom: 0px !important; } .home_hotspot_n_products.module_row_section .columns-container { gap: 80px !important; } #common-home>.row>#content>div:not(.carousel_categories):not(.slideshow) { margin-top: 80px !important; padding-block: 0px !important; } } /* --> RESPONSIVE > HOME > MANUFACTURERS DUAL CAROUSEL [2] =========================================================================================================== */ @media(max-width: 1400px) { .manufacturer_carousel .section_title { margin-bottom: 0px !important; } .manufacturer_carousel { padding-block: 82px; } #content .carousel.manufacturer_carousel .view_more { order: 99 !important; height: fit-content !important; top: unset !important; bottom: unset !important; margin-top: 20px !important; display: flex !important; position: relative !important; margin-bottom: 50px; margin-left: 0px } } /* --> RESPONSIVE > HOME > PRODUCT TABS [2] =========================================================================================================== */ @media(max-width: 1660px) { .module_row_section.home_products_n_banner>.columns-container { width: 100%; } .module_product_tabs .title_n_nav_wrapper { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-right: 0px } .module_product_tabs .title_n_nav_wrapper .nav-tabs { justify-content: flex-start } } /* --> RESPONSIVE > HOME > PRODUCTS AND HTML (DAILY OFFERS SECTION) [2] =========================================================================================================== */ @media(max-width: 991px) { .products_carousel_with_html .section_title { margin-top: 0px !important; } .products_carousel_with_html { flex-direction: column !important; gap: 25px; margin-top: 0px !important; } .products_carousel_with_html>div, .products_carousel_with_html>.row { width: 100% !important; } .module_row_section.products_carousel_with_html { padding: 80px var(--calculatedPadding) !important; gap: 15px !important; } .module_row_section.products_carousel_with_html .products-carousel-module { flex-direction: column; } .module_row_section.products_carousel_with_html .products-carousel-module>div { width: 100% !important; min-width: 100% } .module_row_section.products_carousel_with_html .products-carousel-module .section_title { display: none; } } /* --> RESPONSIVE > HOME > ROW:BANNER AND PRODUCTS / PRODUCTS AND BANNER [2] =========================================================================================================== */ @media(max-width: 991px) { .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .columns-container { display: flex !important; flex-direction: column; } .module_row_section.home_banner_n_products .columns-container { margin-left: 0px !important; } .module_row_section.home_banner_n_products>.columns-container { width: 100% !important } .module_row_section.home_banner_n_products .columns-container .column-content-2 { width: 100% } .module_row_section.home_products_n_banner .columns-container { flex-direction: column-reverse; } } /* --> RESPONSIVE > HOME > BG & PRODUCTS [2] =========================================================================================================== */ @media(max-width: 991px) { .module_row_section.products_carousel_n_bg { padding: 80px var(--calculatedPadding) !important; gap: 15px !important; } .module_row_section.products_carousel_n_bg .products-carousel-module { flex-direction: column; } .module_row_section.products_carousel_n_bg .products-carousel-module>div { width: 100% !important; min-width: 100% } /* .module_row_section.products_carousel_n_bg .products-carousel-module .section_title { display: none; } */ .module_row_section.products_carousel_n_bg .products-carousel-module>.row { width: 100% !important; margin-top: 0px !important; } } /* --> RESPONSIVE > HOME > VIDEO SECTION [2] =========================================================================================================== */ @media(max-width: 991px) { .video-carousel-container .video-swiper .swiper-slide-active { opacity: 1; transform: scale(1); z-index: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .video-carousel-container .swiper-pagination { margin-top: 30px !important } } /* --> RESPONSIVE > HOME > BLOG SECTION [2] =========================================================================================================== */ @media(max-width: 1380px) { .home_banner_blog .columns-container { display: grid !important; grid-template-areas: "image text" "posts posts"; grid-template-columns: 1fr 1fr !important; gap: 30px !important; margin-bottom: 50px; } .home_banner_blog { width: 100% !important; margin-left: unset !important; transform: none !important; -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; } .home_banner_blog .column-content-3 { padding-inline: 0px !important; } .home_banner_blog .columns-container>div { width: 100%; } .home_banner_blog .column-content-1 { grid-area: image; margin-left: calc(-1 * var(--calculatedPadding)); } .home_banner_blog .column-content-1 .swiper-slide { height: 400px; } .home_banner_blog .column-content-1 img { object-fit: cover !important; width: 100%; height: 100%; } .home_banner_blog .column-content-2 { grid-area: text; display: flex; align-items: center; padding-block: 15px; padding-right: var(--calculatedPadding); } .home_banner_blog .column-content-2 { position: relative; padding-bottom: 0px !important; margin: 0px !important; } .home_banner_blog .column-content-2>* { margin-left: 0px; width: 100%; } .home_banner_blog .column-content-2 *:not(h2), .home_banner_blog .column-content-2 .html_section h2 { color: black !important; } .home_banner_blog .column-content-3 { grid-area: posts; width: 100% !important; padding-bottom: 30px; } .home_banner_blog .column-content-3 .latest_posts_wrapper { width: 100% !important; } .home_banner_blog .column-content-3 .blogpost_items_wrapper { height: 100%; overflow: auto; } } @media(max-width: 768px) { .home_banner_blog .column-content-1 { width: 100vw !important; min-width: 100vw !important; } .home_banner_blog .column-content-3 .heading_n_buttons { display: flex; flex-direction: column; } .home_banner_blog .column-content-3 .heading_n_buttons { display: flex; flex-direction: column; align-items: flex-start !important; gap: 0 } .home_banner_blog .column-content-3 .heading_n_buttons .view_more_blog { margin-right: auto; margin-left: 0px; } .home_banner_blog .columns-container { display: flex !important; flex-direction: column; } /* .home_banner_blog .column-content-2 { padding-inline: var(--calculatedPadding); } */ } @media(max-width: 500px) { .blogpost_items_wrapper>.blogpost_item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } } /* --> RESPONSIVE > HOME > WHY US [2] =========================================================================================================== */ @media(max-width: 1530px) { .html_section:has(.why_us) { background: url("/image/catalog/desikos-b2c/desikos_cut_assets/home/Shape.png"), linear-gradient(135deg, #0560d2 0%, #061f3e 100%) !important; background-repeat: no-repeat !important; background-position: 3% bottom !important; } } @media(max-width: 991px) { .html_section:has(.why_us) { flex-direction: column; gap: 50px; } .html_section:has(.why_us) .right_side .intro_text { padding-inline: 0px; } .html_section:has(.why_us)>.right_side { max-width: 100% !important; } } @media(max-width: 768px) { .html_section:has(.why_us) { padding-block: 80px 80px; background: var(--accent_1); } } @media(max-width: 550px) and (min-width: 476px) { .html_section:has(.why_us)>div { max-width: 100% !important; } .html_section:has(.why_us) .right_side .items_wrapper .item { display: flex; flex-direction: column; } .html_section:has(.why_us) .right_side .items_wrapper .item img { display: none; } } @media(max-width: 475px) { .html_section:has(.why_us) .right_side .items_wrapper { grid-template-columns: 1fr !important; } } /* --> RESPONSIVE > HOME > CATALOG [2] =========================================================================================================== */ @media(max-width: 1300px) { .html_section:has(.catalog) .catalog { grid-template-columns: 1fr 1fr; } } @media(max-width: 768px) { .html_section:has(.catalog) .catalog { grid-template-columns: 1fr !important; } .html_section:has(.catalog) .catalog .right_side { padding-top: 0px } } /* --> RESPONSIVE > HOME > TEXT & BANNERS [2] =========================================================================================================== */ @media(max-width: 1300px) { #common-home .text_and_banners_section>div { width: 100% !important; text-align: center; /* background: red; */ margin-bottom: 5px; } #common-home .text_and_banners_section { flex-direction: column !important; } .text_and_banners_section>div:not(.carousel) img { display: none; } .text_and_banners_section>div:not(.carousel) { padding: 50px calc((100vw - var(--maxContainerWidth))/2) 50px calc((100vw - var(--maxContainerWidth))/2) !important; } } @media(max-width: 1300px) and (min-width:991px) { #common-home .text_and_banners_section>div.carousel { margin-left: 5px; margin-right: 5px; width: calc(100% - 10px) !important; } } /* --> RESPONSIVE > HOME > BANNER & PRODUCTS [2] =========================================================================================================== */ @media(max-width: 1650px) { .banner_and_tabs_section>div[class*="banner"] { width: 50vw !important; min-width: 50vw !important; position: absolute; transform: translateY(-100px); } .banner_and_tabs_section>.module_product_tabs { transform: none !important; width: 70vw !important; margin-left: 30vw !important; } } @media(max-width: 991px) { .banner_and_tabs_section>div[class*="banner"] { width: 100vw !important; min-width: 100vw !important; position: absolute; transform: translateY(0px); display: none !important; } .banner_and_tabs_section>.module_product_tabs { transform: none !important; width: 100% !important; margin-left: 0px !important; } } /* @media(max-width: 768px) { #common-home .module_row_section .columns-container { display: flex !important; flex-direction: column; } #common-home .row_section .columns-container>div { width: 100%; } } */ /* --> RESPONSIVE > PRODUCT PARTIAL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* @media(max-width:600px){ .product-thumb .price { display: flex; flex-direction: column; align-items: flex-start; } .product-thumb .price-old{ margin-left:0px !important; } .labels_container > div{ font-size: 9px; } .product-thumb .button-group button { width: 30px !important; height: 30px !important; display: flex; align-content: center; align-items: center; justify-content: center; } } @media(max-width:450px){ .row.featured-products-module .row{ display:block; } .row.special-products-module .row{ display:block !important } .product-layout{ width: 100% !important; } } */ @media(max-width: 991px) { .product-thumb .product-card-bot { display: flex; flex-direction: column; align-items: flex-start; height: fit-content !important; } } @media(max-width: 1024px) { .product-thumb { box-shadow: none !important; } .product-thumb .model_section { display: flex; /* flex-direction: column; */ gap: 5px !important; } .product-thumb> :not(.image) { /* padding-inline: 10px 10px; */ } .product-thumb { padding-bottom: 10px; } } /* --> RESPONSIVE > TOP CATEGORY PAGE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1200px) { .top_category_children_section { gap: 40px 20px; } } @media(max-width: 1024px) { .top_category_children_section { gap: 40px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(max-width: 768px) { .top_category_children_section .child_category_item div { font-size: 18px; line-height: normal } } @media(max-width: 475px) { .top_category_children_section { grid-template-columns: 1fr !important } } /* --> RESPONSIVE > CATEGORY PAGE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> RESPONSIVE > CATEGORY PAGE > LAYOUT [2] =========================================================================================================== */ #content:has(#mfilter-content-container), #mfilter-content-container>div:not(.display_and_filters_toggle) { padding: 0px !important; } @media(max-width: 991px) { /* #product-category>.row, #product-manufacturer>.row, #product-search>.row { gap: 20px; } */ #product-category>.row>#column-left, #product-manufacturer>.row>#column-left, #product-search>.row>#column-left { min-width: 225px !important; } } /* --> RESPONSIVE > CATEGORY PAGE > DESCRIPTION [2] =========================================================================================================== */ @media(min-width: 991px) { #mfilter-content-container .row.desc-top { display: none !important; } } @media(max-width: 991px) { #mfilter-content-container>div { display: flex; flex-direction: column; } #mfilter-content-container>div .row.desc-top { order: -99; } } .category_description.for_mobile { display: none; } @media(max-width: 768px) { .category_description.for_mobile { display: block !important; } } /* --> RESPONSIVE > CATEGORY PAGE > SORTING BAR [2] =========================================================================================================== */ @media(max-width: 991px) { /* #mfilter-content-container > div > .row:first-child{ display:flex; flex-wrap:wrap; justify-content: flex-end; display:none !important; } */ .row.product-list-grid { margin-top: 30px !important; } /* #mfilter-content-container > div > .row:first-child > div { width: 240px !important; max-width: 240px !important; padding:0px !important; float:none !important; } */ #mfilter-content-container>div>.row:first-child>.hidden+div { widtH: 100% !important; max-width: 100% !important; } #mfilter-content-container>div>.row:first-child>div>div { margin-bottom: 0px !important; } } /* @media(max-width: 768px){ #column-left{ display:block !important; } } */ /* --> RESPONSIVE > CATEGORY PAGE > SIDEBAR [2] =========================================================================================================== */ /* @media(max-width: 1190px){ #product-category #column-left #column-left{ position: relative !important; margin-top: 0px !important; top:0px !important; } #product-category > .row > #column-left{ min-width:300px; } #product-category > .row > #column-left > h2, #product-category > .row > #column-left > h2 + .row{ display:none !important; } } */ #mfilter-content-container .desc-top { display: none !important; } /* --> RESPONSIVE > CATEGORY PAGE > SIDEBAR > FILTERS [3] ------------------------------------------------------------- */ @media(max-width: 768px) { .filters_toggle { display: none !important; } /* .mfilter-box-83 .mfilter-free-button { margin-top: 320px !important; } */ /* .mfilter-box-83.mfilter-free-container { top: 0px !important; } */ .box-content.mfilter-content { padding-right: 0px !important; } .mfilter-box-83.mfilter-free-container, .mfilter-box-83.mfilter-free-container .scroll-wrapper { /* height: 100vh !important; */ /* max-height: 100vh !important; */ width: 280px !important; /* height: unset !important; */ /* min-height: unset !important */ height: 100%; padding: 0px !important; } /* .mfilter-iscroll { height: 100vh !important; max-height: 100vh !important; } */ .mfilter-free-container { margin-left: -290px; } .mfilter-free-button { margin: 10px 0 0 281px; } .scroll-wrapper>.scroll-content { overflow: auto !important; height: unset !important; min-height: unset !important; margin-right: 0px; } .box-content.mfilter-content { overflow: visible !important; } .mfilter-content>ul>li { margin-bottom: unset !important } } @media(max-width: 480px) { .mfilter-box-83.mfilter-free-container { width: 100% !important; max-width: 100% !important; min-width: 100% !important; } } /* --> RESPONSIVE > CATEGORY PAGE > PRODUCTS [2] =========================================================================================================== */ @media(max-width: 768px) { .row.product-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media(max-width: 450px) { .row.product-list-grid { grid-template-columns: 1fr !important; } } /* --> RESPONSIVE > CATEGORY LIKE (update) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1250px) { .row.product-list-grid { gap: 20px !important; } .sorting_bar { justify-content: space-between; flex-wrap: wrap !important; } .sorting_bar .form-group { flex-wrap: wrap; display: flex; height: fit-content !important; } .sorting_bar .form-group label { height: fit-content; width: fit-content; } /* .sorting_bar .pagination_container { display: none !important; } */ } @media(max-width: 1100px) { .row.product-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .sorting_bar .form-group select { width: fit-content !important } } @media(max-width: 768px) { html:has(#mfilter-content-container) .breadcrumb { margin-bottom: 15px !important; } .category_description.for_mobile { display: block !important; position: relative; } .sorting_bar { margin-top: 25px } .sorting_bar .form-group label { padding-left: 0px !important; } } @media(max-width: 450px) { .row.product-list-grid { grid-template-columns: 1fr !important; } } @media(max-width: 425px) { .sorting_bar { gap: 20px !important; } .sorting_bar .form-group { flex-direction: column; gap: 5px !important; } .sorting_bar .form-group label { margin-bottom: 0px } } /* --> RESPONSIVE > CATEGORY LIKE (update) > FILTERS [3] ------------------------------------------------------------- */ /* --> RESPONSIVE > CATEGORY LIKE (update) > FILTERS > BUTTON */ .mfilter-box-83 .mfilter-free-button { transition: all .4s ease; right: 0px; left: unset !important; transform: translateX(100%); -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; right: 20px !important; transform: none; top: -20px !important; z-index: 2; background: none !important; border: none !important; } .mfilter-box-83 .mfilter-free-button { background: white !important; border-radius: 0 0 0 30px !important; max-width: 40px; width: 50px !important; min-width: 50px !important; min-height: 60px; align-items: center; justify-content: center; top: -40px !important; right: 0px !important; display: flex; -webkit-border-radius: 0 0 0 30px !important; -moz-border-radius: 0 0 0 30px !important; -ms-border-radius: 0 0 0 30px !important; -o-border-radius: 0 0 0 30px !important; } /* .mfilter-box-83 .mfilter-free-button { border-radius: 0px 20px 20px 0px; -webkit-border-radius: 0px 20px 20px 0px; -moz-border-radius: 0px 20px 20px 0px; -ms-border-radius: 0px 20px 20px 0px; -o-border-radius: 0px 20px 20px 0px; background-color: var(--accent_3); border-color: var(--accent_3); } */ /* .mfilter-free-container:is(.mfilter-free-container-opening, .mfilter-free-container-opened) .mfilter-free-button { top: -30px !important; background-color: white !important; border-color: white !important; } */ .mfilter-free-container:is(.mfilter-free-container-opening, .mfilter-free-container-opened) .mfilter-free-button i { color: black !important; } /* .mfilter-free-container:is(.mfilter-free-container-closing, .mfilter-free-container-closed) .mfilter-free-button { background-color: var(--accent_3) !important; border-color: var(--accent_3) !important; } */ /* --> RESPONSIVE > CATEGORY LIKE (update) > FILTERS > BACKDROP */ html:has(.mfilter-free-container-opening), html:has(.mfilter-free-container-opened), html:has(.mfilter-free-container-closing) { overflow: hidden !important; } html:has(.mfilter-free-container-opening) header:after, html:has(.mfilter-free-container-opened) header:after { opacity: .5 !important; visibility: visible !important; } /* --> RESPONSIVE > CATEGORY LIKE (update) > FILTERS > CONTAINER */ .mfilter-box-83.mfilter-free-container { top: 0px; min-width: calc(100% - 70px); margin-left: 0px !important; max-width: 480px; } .mfilter-box-83.mfilter-free-container .scroll-wrapper { width: 100% !important; } .mfilter-free-container, .mfilter-free-container.mfilter-free-container-closing { margin-left: 0px !important; transform: translateX(-100%) !important; transition: all .4s !important; -webkit-transform: translateX(-100%) !important; -moz-transform: translateX(-100%) !important; -ms-transform: translateX(-100%) !important; -o-transform: translateX(-100%) !important; } .mfilter-free-container:is(.mfilter-free-container-opening, .mfilter-free-container-opened) { transform: translateX(0px) !important; } /* --> RESPONSIVE > PRODUCT PAGE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> RESPONSIVE > PRODUCT PAGE > SPACING [2] =========================================================================================================== */ @media(max-width: 1024px) { #product-product #content>.row.text_n_banner, .product-product .row.specs, #product-product #content .extra_products.related, #product-product #content .extra_products.recently_viewed, .product-product .row.contact { margin-top: 50px; } /* .product-product .row.videos { padding-block: 50px } */ #product-product #content .extra_products.recently_viewed { padding-top: 65px; } } /* --> RESPONSIVE > PRODUCT PAGE > REQUEST BUTTONS [2] =========================================================================================================== */ .request_buttons_mobile { display: none !important; } @media(max-width: 1500px) { .request_buttons { display: none !important; } .request_buttons_mobile { /* display: flex !important; */ } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: TOP SECTION [2] =========================================================================================================== */ /* --> RESPONSIVE > PRODUCT PAGE > ROW: TOP SECTION > LAYOUT [3] ------------------------------------------------------------- */ @media(max-width: 1500px) { #product-product .row.default_infos .right_section { padding: 30px !important; } .price_and_identifiers_container { width: 100% !important; transform: none } } @media(max-width: 1100px) { #product-product #content>.row.default_infos { flex-direction: column; gap: 30px; } #product-product #content>.row.default_infos>div { width: 100%; } /* #product-product .row.default_infos .right_section { padding-left: 0px !important; } */ } @media(max-width: 768px) { #product-product #content { margin-top: 0px !important; } #product-product .breadcrumb { margin-bottom: 0px !important; } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: TOP SECTION > IMAGES [3] ------------------------------------------------------------- */ @media(max-width: 768px) { #product-product .main_image_container a { padding-bottom: 0px !important; margin-bottom: 0px !important; } #product-product .thumbnails { flex-direction: column; gap: 10px } #product-product .additional_images_container { width: 100%; min-width: unset; gap: unset; flex-direction: unset; display: block; position: relative; margin-top: 20px; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } #product-product .additional_images_container.has-nav { padding-left: 36px; padding-right: 36px; padding-top: 0; padding-bottom: 0; } #product-product .additional_images_container.has-nav .additional-images-swiper { margin-top: 0; margin-bottom: 0; } #product-product .additional_images_container .image-additional { width: 100%; } #product-product .additional_images_container .swiper-pagination { position: relative !important; top: unset; bottom: unset; margin-top: 10px; display: none; } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: TOP SECTION > IMAGES > NAVIGATION */ @media(max-width: 768px) { .additional_images_container .swiper-slide { border: none !important; } .additional_images_container .swiper-button-prev { position: absolute; top: 50%; bottom: unset; left: 0; right: unset; transform: translateY(-50%); height: fit-content; margin: 0px !important; } .additional_images_container .swiper-button-next { position: absolute; bottom: unset; top: 50%; right: 0; left: unset; transform: translateY(-50%); height: fit-content; margin: 0px !important; } .additional_images_container .swiper-button-prev::before { transform: rotate(180deg); } .additional_images_container .swiper-button-next::before { transform: rotate(0deg); } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: TOP SECTION > INFOS [3] ------------------------------------------------------------- */ @media(max-width: 768px) { #product-product .right_section .stepper_n_cart { margin-top: 18px; } } @media(max-width: 450px) { #product-product .right_section .price_section { flex-direction: column; padding-left: 22px; } } @media(max-width: 430px) { #product-product .right_section .stepper_n_cart { flex-direction: column; gap: 18px } #product-product .right_section .stepper_n_cart #button-cart { width: 100%; max-width: 100% !important; } } @media(max-width: 680px) { #product-product .right_section .price_section { min-width: unset; } } @media(max-width: 600px) { .stock_and_labels_wrapper { /* flex-direction: column !important; */ gap: 10px !important; } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: TEXT & BANNER [2] =========================================================================================================== */ @media(max-width: 1100px) { #product-product #content>.row.text_n_banner .left_side { padding-right: 40px; } } @media(max-width: 1024px) { #product-product #content>.row.text_n_banner .left_side .title { font-size: 35px; line-height: normal; white-space: normal } #product-product #content>.row.text_n_banner .left_side { padding-right: 20px !important; } #product-product #content>.row.text_n_banner .left_side>div { width: 100% !important; } } @media(max-width: 768px) { #product-product #content>.row.text_n_banner { flex-direction: column !important; gap: 20px; } #product-product #content>.row.text_n_banner .left_side { padding-right: 0px; } #product-product #content>.row.text_n_banner .right_side, .image_swiper_container { min-width: 100%; } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: SPECS [2] =========================================================================================================== */ @media(max-width: 600px) { .product-product .row.specs .top_side .specs_table .specs_row .specs_label { min-width: 150px !important; width: 150px !important; } } @media(max-width: 400px) { .product-product .row.specs .top_side .specs_table .specs_row { flex-direction: column !important; display: flex !important; gap: 0px; padding: 12px; } .product-product .row.specs .top_side .specs_table .specs_row>div { padding: 0px !important; } } @media(max-width: 550px) { .catalog_files_container { flex-direction: column } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: VIDEOS [2] =========================================================================================================== */ @media(max-width: 1024px) { .product-product .row.videos .video_container { gap: 20px } .product-product .row.videos .video_container { margin-top: 25px } } @media(max-width: 768px) { .product-product .row.videos .video_container { flex-direction: column; } } /* --> RESPONSIVE > PRODUCT PAGE > EXTRA PRODUCTS [2] =========================================================================================================== */ @media(max-width: 1024px) { #product-product #content .extra_products .section_title { margin-bottom: 5px; } } /* --> RESPONSIVE > PRODUCT PAGE > EXTRA PRODUCTS > RECENTLY VIEWED BG ISSUES [3] ------------------------------------------------------------- */ @media(max-width: 1590px) { #product-product .extra_products.recently_viewed { background-size: auto 35vw; } } @media(max-width: 1180px) { #product-product .extra_products.recently_viewed { background-size: auto 39vw; } } @media(max-width: 991px) { #product-product .extra_products.recently_viewed { background-size: auto 45vw; } } @media(max-width: 768px) { #product-product .extra_products.recently_viewed { background-size: auto 55vw; } } @media(max-width: 600px) { #product-product .extra_products.recently_viewed { background-size: auto 95vw; } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: CONTACT [2] =========================================================================================================== */ @media(max-width: 1024px) { .product-product .row.contact { gap: 50px !important; padding-inline: 0px; } .product-product .row.contact .intro_text { margin-top: 25px; font-size: 20px; line-height: 1.4 } .product-product .row.contact .main_text_container { margin-top: 20px; } } @media(max-width: 768px) { .product-product .row.contact { flex-direction: column; gap: 45px !important } .product-product .row.contact .right_side { max-width: 100%; } } /* --> RESPONSIVE > SEARCH PAGE [2] =========================================================================================================== */ @media(max-width: 768px) { #product-search>.row { padding-left: var(--FullwidthContainerPadding_2); padding-right: var(--FullwidthContainerPadding_2); } #product-search #content_search>div.row { display: flex; flex-direction: column; align-items: flex-start !important; margin: 0px !important; } #product-search #content_search>div.row div { padding-left: 0px !important } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION RESPONSIVE > CART PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> RESPONSIVE > CART PAGE > INTRO [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1200px) { #checkout-cart.container { width: 100% !important; } #cart-intro { justify-content: center; margin-top: 30px !important; } #cart-intro>div:not(.mid-section) { display: none !important; } } /* --> RESPONSIVE > CART PAGE > PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 768px) { #checkout-cart #cart-intro+form thead { display: none; } #checkout-cart #cart-intro+form table tbody td { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; } #checkout-cart #cart-intro+form table tbody td a { white-space: normal !important; } #checkout-cart #cart-intro+form tbody tr { display: flex; padding: 25px 0px !important; flex-wrap: wrap; } /* image */ #checkout-cart #cart-intro+form tbody tr>td:nth-child(1) { width: 108px !important; } /* title */ #checkout-cart #cart-intro+form tbody tr>td:nth-child(2) { width: calc(100% - 110px) !important } /* quantity */ #checkout-cart #cart-intro+form tbody tr>td:nth-child(3) { width: calc(100% - 150px) !important; } #checkout-cart #cart-intro+form tbody tr>td:nth-child(3) .input-group.btn-block { justify-content: flex-start; } /* item price */ #checkout-cart #cart-intro+form tbody tr>td:nth-child(4) { display: none; } /* total price */ #checkout-cart #cart-intro+form tbody tr>td:nth-child(5) { width: 140px !important; } #checkout-cart #cart-intro+form tbody tr>td:nth-child(5)>* { text-align: right; width: 100%; display: block; } } @media(max-width: 400px) { #checkout-cart #cart-intro+form tbody tr>td:nth-child(3) { width: 100% !important; } #checkout-cart #cart-intro+form tbody tr>td:nth-child(3) .input-group.btn-block { justify-content: flex-end; padding-right: 10px } #checkout-cart #cart-intro+form tbody tr>td:nth-child(5) { width: 100% !important; padding-right: 15px; padding-top: 15px; } } /* --> RESPONSIVE > CART PAGE > OUTRO [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1650px) { #checkout-cart .bottom_section { width: 100vw !important; margin-left: -20px; } } @media(max-width: 1350px) { #checkout-cart .bottom_section { flex-direction: column !important; width: 100% !important; margin-left: 0px; } } @media(max-width: 870px) { #checkout-cart .bottom_section .input-group { display: flex !important; flex-direction: column; } #checkout-cart .bottom_section .input-group>*, #checkout-cart .bottom_section .input-group .form-control, #checkout-cart .bottom_section .input-group-btn input { width: 100% !important; display: block !important; } } @media(max-width: 650px) { #checkout-cart .bottom_section { padding: 20px; } #checkout-cart .bottom_section .cart-total-table tr .title { margin-right: 0px !important; } #checkout-cart .bottom_section .cart-total-table tr { display: flex; justify-content: space-between; justify-content: flex-end; } #checkout-cart .bottom_section .cart-total-table tr td { align-items: flex-start; } #checkout-cart .bottom_section .table.cart-total-table { margin-top: 35px; } } /* --> RESPONSIVE > CART PAGE > BOTTOM BUTTONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 680px) { #checkout-cart .bottom_section+.buttons { display: flex; flex-direction: column; align-items: center; } #checkout-cart .bottom_section+.buttons>div { margin: 7px 0px; } } /* --> RESPONSIVE > BLOG CENTRAL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1190px) { .central_blog_page #content>.row>div { width: 33.3333% } } @media(max-width: 991px) { .central_blog_page #content>.row>div { width: 50% } } @media(max-width: 450px) { .central_blog_page #content>.row>div { width: 100% } } /* --> RESPONSIVE > BLOG PAGE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1350px) { #latestpost>.row .description { -moz-column-count: unset; column-count: unset; text-align: left; } } @media(max-width: 1190px) { #latestpost { display: flex; flex-direction: column; } #latestpost>.row { padding-left: 0px; } #latestpost>* { width: 100% !important; } #latestpost .image img { max-width: 100% !important; width: 500px !important; margin: 0 auto !important; } } .color-swatch { display: inline-block; width: 100%; height: 100%; vertical-align: middle; } .manufacturer { display: flex; align-items: center; justify-content: flex-start; } .manufacturer a { color: var(--accent_1); text-decoration: none; transition: color 0.3s ease; font-weight: bold; min-height: 17px; } .manufacturer a:hover { color: var(--accent_3); text-decoration: none; } #mfilter-box-83.fixed { position: fixed; top: 200px; z-index: 10; } .cc-color-override--1033558147 .cc-btn, .cc-btn-save-settings { /* background-color: #bd8b26 !important; */ color: #fff !important; } .cc-color-override--1033558147 .cc-settings { background-color: transparent !important; /* border-color: #bd8b26 !important; */ } .cc-highlight .cc-btn:first-child { /* border-color: #6D5117 !important; */ background-color: transparent !important; color: #fff !important; } @media(max-width: 768px) { #wishlist-count { right: -6px !important; top: -6px !important; } .mfilter-box>.box-heading { margin-top: 20px !important; width: fit-content; font-size: 19px; font-weight: bold; color: #444444; font-family: var(--font_2); margin-right: auto !important; margin-left: 35px; display: flex; align-items: center; } .mfilter-box>.box-heading:before { content: url("/image/catalog/cut_assets/generic/icons/filter_two_lines.svg"); margin-right: 19px; transform: translateY(3px); -webkit-transform: translateY(3px); -moz-transform: translateY(3px); -ms-transform: translateY(3px); -o-transform: translateY(3px); } .mfilter-free-button .fa-times:before { content: ""; background-image: url("/image/catalog/cut_assets/generic/icons/close.svg"); width: 25px; height: 25px; min-width: 25px !important; display: block !important; background-size: cover !important; opacity: .4; } } @media (max-width: 768px) { /* .mfilter-free-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: white; z-index: 0; border-right: 2px solid var(--accent_2); } */ #product-product h1 { font-size: 20px; } .mfilter-free-button { left: 7px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } #content { min-height: unset !important; } .category-like #content, .category-like body { overflow: hidden !important; } } .ac-menu-revealed .mfilter-box-83 .mfilter-free-button { display: none !important; } #collapse-payment-address .checkbox{ height: 10px; } /* Product compare */ #product-compare .compare-table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: none; } #product-compare .compare-table { margin-bottom: 0; } #product-compare .compare-table td { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; } @media (max-width: 767px) { #product-compare .compare-table-wrapper { overflow-x: scroll; } #product-compare .compare-table { table-layout: fixed; width: auto; } #product-compare .compare-table td { display: table-cell; vertical-align: top; min-width: 0; white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; hyphens: auto; } #product-compare .compare-table td:first-child { width: 100px; max-width: 100px; min-width: 100px; } #product-compare .compare-table td:not(:first-child) { width: 200px; max-width: 200px; min-width: 200px; } #product-compare .compare-table td a, #product-compare .compare-table td a strong { display: inline; max-width: 100%; white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; } #product-compare .compare-table td.description { white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; } #product-compare .compare-table .img-thumbnail { max-width: 100%; height: auto; } }