.elementor-906378 .elementor-element.elementor-element-4c3479e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-906378 .elementor-element.elementor-element-72f2f5a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:nowrap;}.elementor-906378 .elementor-element.elementor-element-e669877{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-906378 .elementor-element.elementor-element-e669877.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-906378 .elementor-element.elementor-element-4ec006e img{max-width:200px;}.elementor-906378 .elementor-element.elementor-element-21e8d20{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-906378 .elementor-element.elementor-element-21e8d20.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-906378 .elementor-element.elementor-element-03b5c47 .elementor-menu-toggle{margin:0 auto;}.elementor-906378 .elementor-element.elementor-element-03b5c47 .elementor-nav-menu--main .elementor-item:hover, .elementor-906378 .elementor-element.elementor-element-03b5c47 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-906378 .elementor-element.elementor-element-03b5c47 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-906378 .elementor-element.elementor-element-03b5c47 .elementor-nav-menu--main .elementor-item:focus{color:#F5A623;fill:#F5A623;}.elementor-906378 .elementor-element.elementor-element-03b5c47 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-906378 .elementor-element.elementor-element-03b5c47 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#F5A623;}.elementor-906378 .elementor-element.elementor-element-03b5c47 .e--pointer-framed .elementor-item:before, .elementor-906378 .elementor-element.elementor-element-03b5c47 .e--pointer-framed .elementor-item:after{border-color:#F5A623;}.elementor-906378 .elementor-element.elementor-element-0dca647{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:25px 25px;--row-gap:25px;--column-gap:25px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-906378 .elementor-element.elementor-element-0dca647.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-search{--e-search-input-color:var( --e-global-color-text );}.elementor-widget-search.e-focus{--e-search-input-color:var( --e-global-color-text );}.elementor-widget-search .elementor-pagination{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-906378 .elementor-element.elementor-element-48ca099 .e-search-input{background-color:#02010100;font-family:"Manrope", Sans-serif;font-size:16px;border-style:solid;border-radius:999px 999px 999px 999px;}.elementor-906378 .elementor-element.elementor-element-48ca099 .e-search-submit{background-color:transparent;background-image:linear-gradient(180deg, #E67B70 0%, #E84C3D 100%);}.elementor-906378 .elementor-element.elementor-element-48ca099 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-906378 .elementor-element.elementor-element-48ca099{--e-search-placeholder-color:#2F2823;--e-search-icon-label-color:#6D655F;--e-search-input-padding-block-start:0px;--e-search-input-padding-inline-start:10px;--e-search-input-padding-block-end:0px;--e-search-input-padding-inline-end:10px;--e-search-submit-color:#FFFDF9;--e-search-submit-border-radius:999px 999px 999px 999px;--e-search-submit-padding:12px 12px 12px 12px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-906378 .elementor-element.elementor-element-acb0d7f{--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}.elementor-906378 .elementor-element.elementor-element-acb0d7f .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-906378 .elementor-element.elementor-element-2061753{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-906378 .elementor-element.elementor-element-7a23877{--display:flex;}.elementor-906378 .elementor-element.elementor-element-70254ab{--display:flex;}.elementor-906378 .elementor-element.elementor-element-411a95c{--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}.elementor-906378 .elementor-element.elementor-element-411a95c .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-906378 .elementor-element.elementor-element-f2d632f .elementor-menu-toggle{margin-left:auto;}.elementor-906378 .elementor-element.elementor-element-f2d632f .elementor-nav-menu--main .elementor-item:hover, .elementor-906378 .elementor-element.elementor-element-f2d632f .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-906378 .elementor-element.elementor-element-f2d632f .elementor-nav-menu--main .elementor-item.highlighted, .elementor-906378 .elementor-element.elementor-element-f2d632f .elementor-nav-menu--main .elementor-item:focus{color:#F5A623;fill:#F5A623;}.elementor-906378 .elementor-element.elementor-element-f2d632f .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-906378 .elementor-element.elementor-element-f2d632f .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#F5A623;}.elementor-906378 .elementor-element.elementor-element-f2d632f .e--pointer-framed .elementor-item:before, .elementor-906378 .elementor-element.elementor-element-f2d632f .e--pointer-framed .elementor-item:after{border-color:#F5A623;}.elementor-906378 .elementor-element.elementor-element-0d8ae6f{--display:flex;}.elementor-906378 .elementor-element.elementor-element-135368b .e-search-input{background-color:#02010100;font-family:"Manrope", Sans-serif;font-size:16px;border-style:solid;border-radius:999px 999px 999px 999px;}.elementor-906378 .elementor-element.elementor-element-135368b .e-search-submit{background-color:transparent;background-image:linear-gradient(180deg, #E67B70 0%, #E84C3D 100%);}.elementor-906378 .elementor-element.elementor-element-135368b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-906378 .elementor-element.elementor-element-135368b{--e-search-placeholder-color:#2F2823;--e-search-icon-label-color:#6D655F;--e-search-input-padding-block-start:0px;--e-search-input-padding-inline-start:10px;--e-search-input-padding-block-end:0px;--e-search-input-padding-inline-end:10px;--e-search-submit-color:#FFFDF9;--e-search-submit-border-radius:999px 999px 999px 999px;--e-search-submit-padding:12px 12px 12px 12px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-906378 .elementor-element.elementor-element-2061753{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-906378 .elementor-element.elementor-element-7a23877{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-906378 .elementor-element.elementor-element-f95814c img{width:125px;}.elementor-906378 .elementor-element.elementor-element-70254ab{--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-906378 .elementor-element.elementor-element-0d8ae6f{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-906378 .elementor-element.elementor-element-e669877{--content-width:240px;}}/* Start custom CSS *//* ========================================================= KOI HELLAS — FINAL HEADER Desktop + Tablet + Mobile ========================================================= */ :root { --kh-dark: #061722; --kh-dark-2: #04131D; --kh-dark-3: #031018; --kh-primary: #0A4D5E; --kh-primary-light: #136A7D; --kh-accent: #E84C3D; --kh-accent-hover: #D64032; --kh-gold: #F5A623; --kh-gold-brand: #C7A45C; --kh-gold-soft: #E6C777; --kh-white: #FFFFFF; --kh-border: rgba(255, 255, 255, 0.10); } /* ========================================================= GLOBAL ========================================================= */ .elementor-location-header, .elementor-location-header *, .elementor-location-header *::before, .elementor-location-header *::after { box-sizing: border-box; } .elementor-location-header { position: relative; width: 100%; max-width: 100%; z-index: 999; } /* ========================================================= VISIBILITY ========================================================= */ .kh-header-desktop { display: block !important; } .kh-header-mobile { display: none !important; } /* ========================================================= DESKTOP HEADER BACKGROUND ========================================================= */ .kh-header-desktop, .kh-header-desktop .kh-header-wrap { position: relative; width: 100%; background: radial-gradient( circle at 90% 0%, rgba(10, 77, 94, 0.26), transparent 32% ), linear-gradient( 135deg, var(--kh-dark) 0%, var(--kh-dark-2) 55%, var(--kh-dark-3) 100% ) !important; color: var(--kh-white); } .kh-header-desktop > .e-con-inner, .kh-header-desktop .kh-header-inner { background: transparent !important; } /* ========================================================= DESKTOP HEADER INNER ========================================================= */ .kh-header-inner { width: 100%; max-width: 1520px; margin: 0 auto; padding: 20px 36px; display: grid !important; /* * Logo * Menu * Actions */ grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: 26px; background: transparent !important; } /* ========================================================= DESKTOP LOGO ========================================================= */ .kh-header-logo { width: 100%; min-width: 0; } .kh-header-logo .elementor-widget-container { background: transparent !important; } .kh-header-logo img { display: block; width: 100%; max-width: 205px; height: auto; object-fit: contain; } /* ========================================================= DESKTOP MENU ========================================================= */ .kh-main-menu { width: 100%; min-width: 0; } .kh-main-menu .elementor-widget-container { width: 100%; background: transparent !important; } .kh-main-menu .elementor-nav-menu { width: 100%; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: 22px; } .kh-main-menu .elementor-nav-menu > li { flex: 0 0 auto; white-space: nowrap; } .kh-main-menu .elementor-nav-menu > li > a, .kh-main-menu .elementor-nav-menu > li > .elementor-item { padding: 9px 0 !important; color: var(--kh-white) !important; background: transparent !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; transition: color 0.2s ease; } /* ========================================================= DESKTOP MENU HOVER / ACTIVE ========================================================= */ .kh-main-menu .elementor-nav-menu > li > a:hover, .kh-main-menu .elementor-nav-menu > li > .elementor-item:hover, .kh-main-menu .elementor-nav-menu > li.current-menu-item > a, .kh-main-menu .elementor-nav-menu > li.current-menu-ancestor > a, .kh-main-menu .elementor-nav-menu > li > a.elementor-item-active { color: var(--kh-gold) !important; } /* Underline */ .kh-main-menu .elementor-item::before, .kh-main-menu .elementor-item::after { background: var(--kh-gold) !important; } /* ========================================================= DESKTOP SUBMENU INDICATOR ========================================================= */ .kh-main-menu .sub-arrow { color: var(--kh-gold-soft) !important; opacity: 1 !important; } .kh-main-menu .sub-arrow i { color: var(--kh-gold-soft) !important; } .kh-main-menu .sub-arrow svg { color: var(--kh-gold-soft) !important; fill: var(--kh-gold-soft) !important; stroke: var(--kh-gold-soft) !important; } /* Hover */ .kh-main-menu .elementor-item:hover .sub-arrow, .kh-main-menu .elementor-item:hover .sub-arrow i { color: var(--kh-gold) !important; } .kh-main-menu .elementor-item:hover .sub-arrow svg { color: var(--kh-gold) !important; fill: var(--kh-gold) !important; stroke: var(--kh-gold) !important; } /* ========================================================= DESKTOP SUBMENU ========================================================= */ .kh-main-menu .sub-menu { padding: 10px !important; background: rgba(6, 23, 34, 0.99) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 14px !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30) !important; } .kh-main-menu .sub-menu a { padding: 11px 12px !important; color: var(--kh-white) !important; background: transparent !important; font-size: 13px !important; font-weight: 700 !important; border-radius: 9px !important; } .kh-main-menu .sub-menu a:hover, .kh-main-menu .sub-menu .elementor-item-active { color: var(--kh-gold) !important; background: rgba(245, 166, 35, 0.12) !important; } /* ========================================================= DESKTOP ACTIONS ========================================================= */ .kh-header-actions { width: auto !important; min-width: 0; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; } .kh-header-actions > .elementor-element, .kh-header-actions > .e-con { flex: 0 0 auto !important; margin: 0 !important; } .kh-header-actions .elementor-widget-container { margin: 0 !important; padding: 0 !important; background: transparent !important; } /* ========================================================= DESKTOP SEARCH WIDTH FIX ========================================================= */ /* * IMPORTANT: * Prevent the search widget from consuming the menu area. */ .kh-header-actions .kh-search-btn { width: 300px !important; max-width: 300px !important; min-width: 240px !important; flex: 0 1 300px !important; } /* * Fallback for Search widget if kh-search-btn * is not assigned directly to it. */ .kh-header-actions > .elementor-widget:has(.e-search) { width: 300px !important; max-width: 300px !important; min-width: 240px !important; flex: 0 1 300px !important; } .kh-header-actions .e-search { width: 100% !important; max-width: 300px !important; min-width: 0 !important; } /* ========================================================= DESKTOP SEARCH ========================================================= */ .kh-header-desktop .e-search-form { width: 100% !important; min-width: 0; display: flex !important; align-items: center !important; gap: 4px; padding: 5px; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 999px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; } .kh-header-desktop .e-search-form:focus-within { background: rgba(255, 255, 255, 0.11) !important; border-color: var(--kh-gold-brand) !important; box-shadow: 0 0 0 3px rgba(199, 164, 92, 0.15) !important; } /* Search input */ .kh-header-desktop .e-search-input-wrapper { flex: 1 1 0 !important; min-width: 0 !important; } .kh-header-desktop .e-search-input { width: 100% !important; min-width: 0 !important; height: 46px; padding: 0 14px !important; color: var(--kh-white) !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; font-size: 14px !important; } .kh-header-desktop .e-search-input::placeholder { color: rgba(255,255,255,.58) !important; } /* Search button */ .kh-header-desktop .e-search-submit { height: 44px !important; flex: 0 0 auto !important; padding: 0 20px !important; color: var(--kh-white) !important; background: var(--kh-accent) !important; border: 0 !important; border-radius: 999px !important; font-weight: 700 !important; white-space: nowrap; } .kh-header-desktop .e-search-submit:hover { background: var(--kh-accent-hover) !important; } /* ========================================================= ACTION ICONS ========================================================= */ .kh-account-btn, .kh-wishlist-btn, .kh-cart-btn { position: relative; width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 30px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= ACCOUNT / WISHLIST ========================================================= */ .kh-account-btn .elementor-button, .kh-wishlist-btn .elementor-button { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: var(--kh-white) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Hide labels */ .kh-account-btn .elementor-button-text, .kh-wishlist-btn .elementor-button-text, .kh-header-actions .elementor-button-text, .kh-mobile-actions .elementor-button-text, .kh-header-actions .elementor-menu-cart__subtotal, .kh-mobile-actions .elementor-menu-cart__subtotal { display: none !important; } /* Icons */ .kh-account-btn .elementor-button-icon, .kh-wishlist-btn .elementor-button-icon { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; color: var(--kh-white) !important; font-size: 26px !important; line-height: 1 !important; } .kh-account-btn svg, .kh-wishlist-btn svg { color: var(--kh-white) !important; fill: var(--kh-white) !important; stroke: var(--kh-white) !important; } /* ========================================================= CART ========================================================= */ .kh-cart-btn .elementor-menu-cart__toggle { width: 30px !important; height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } .kh-header-actions .elementor-menu-cart__toggle_button, .kh-mobile-actions .elementor-menu-cart__toggle_button { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: var(--kh-white) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .kh-header-actions .elementor-menu-cart__toggle_button i, .kh-header-actions .elementor-menu-cart__toggle_button svg, .kh-mobile-actions .elementor-menu-cart__toggle_button i, .kh-mobile-actions .elementor-menu-cart__toggle_button svg { width: 26px; height: 26px; color: var(--kh-white) !important; fill: var(--kh-white) !important; stroke: var(--kh-white) !important; font-size: 26px !important; } /* ========================================================= ACTION HOVER ========================================================= */ .kh-header-actions a:hover, .kh-header-actions button:hover, .kh-mobile-actions a:hover, .kh-mobile-actions button:hover { color: var(--kh-gold) !important; } .kh-header-actions a:hover i, .kh-header-actions a:hover svg, .kh-header-actions button:hover svg, .kh-mobile-actions a:hover i, .kh-mobile-actions a:hover svg, .kh-mobile-actions button:hover svg { color: var(--kh-gold) !important; fill: var(--kh-gold) !important; stroke: var(--kh-gold) !important; } /* ========================================================= CART COUNTER ========================================================= */ .kh-header-actions .elementor-menu-cart__toggle .elementor-button-icon, .kh-mobile-actions .elementor-menu-cart__toggle .elementor-button-icon { position: relative !important; } .kh-header-actions .elementor-menu-cart__toggle .elementor-button-icon[data-counter]::before, .kh-mobile-actions .elementor-menu-cart__toggle .elementor-button-icon[data-counter]::before, .kh-header-actions .elementor-button-icon-qty, .kh-mobile-actions .elementor-button-icon-qty { position: absolute !important; top: -7px !important; right: -8px !important; min-width: 17px !important; height: 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 4px !important; color: var(--kh-white) !important; background: var(--kh-accent) !important; border: 2px solid var(--kh-dark) !important; border-radius: 999px !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; } /* ========================================================= TABLET / SMALL DESKTOP ========================================================= */ @media (max-width: 1250px) { .kh-header-inner { grid-template-columns: 175px minmax(0, 1fr) auto; gap: 18px; padding: 18px 22px; } .kh-header-logo img { max-width: 165px; } .kh-main-menu .elementor-nav-menu { gap: 13px; } .kh-main-menu .elementor-nav-menu > li > a { font-size: 11.5px !important; } .kh-header-actions { gap: 11px !important; } .kh-header-actions .kh-search-btn, .kh-header-actions > .elementor-widget:has(.e-search) { width: 245px !important; max-width: 245px !important; min-width: 200px !important; flex: 0 1 245px !important; } .kh-header-actions .e-search { max-width: 245px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* ===================================================== SWITCH HEADERS ===================================================== */ .kh-header-desktop { display: none !important; } .kh-header-mobile { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; color: var(--kh-white); background: radial-gradient( circle at 90% 0%, rgba(10, 77, 94, 0.22), transparent 40% ), linear-gradient( 135deg, var(--kh-dark) 0%, var(--kh-dark-2) 100% ) !important; z-index: 999 !important; } .kh-header-mobile > .e-con-inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; } /* ===================================================== MOBILE TOP ROW [LOGO] [ICONS] ===================================================== */ .kh-mobile-header-top { position: relative !important; width: 100% !important; max-width: 100% !important; min-height: 68px !important; display: grid !important; grid-template-columns: max-content minmax(0, 1fr) !important; align-items: center !important; column-gap: 16px !important; margin: 0 !important; padding: 8px 16px !important; background: transparent !important; border-bottom: 1px solid rgba(255,255,255,.08); overflow: visible !important; } /* * If Elementor adds .e-con-inner, * make THAT the actual grid. */ .kh-mobile-header-top > .e-con-inner { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: max-content minmax(0, 1fr) !important; align-items: center !important; column-gap: 16px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ===================================================== MOBILE LOGO ===================================================== */ .kh-mobile-header-logo { grid-column: 1 !important; justify-self: start !important; align-self: center !important; width: max-content !important; max-width: 112px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; flex: none !important; } .kh-mobile-header-logo .elementor-widget-container { width: max-content !important; max-width: 112px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } .kh-mobile-header-logo a { display: inline-flex !important; width: max-content !important; max-width: 112px !important; margin: 0 !important; padding: 0 !important; } .kh-mobile-header-logo img { display: block !important; width: auto !important; max-width: 112px !important; max-height: 48px !important; height: auto !important; margin: 0 !important; object-fit: contain !important; object-position: left center !important; } /* ===================================================== MOBILE ACTIONS ===================================================== */ .kh-mobile-actions { grid-column: 2 !important; justify-self: end !important; align-self: center !important; width: max-content !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .kh-mobile-actions > .e-con-inner { width: max-content !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ===================================================== MOBILE ACTION WIDGETS ===================================================== */ .kh-mobile-actions > .elementor-element, .kh-mobile-actions > .e-con, .kh-mobile-actions > .e-con-inner > .elementor-element, .kh-mobile-actions > .e-con-inner > .e-con { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; flex: 0 0 30px !important; margin: 0 !important; padding: 0 !important; align-self: center !important; overflow: visible !important; } .kh-mobile-actions .elementor-widget-container { margin: 0 !important; padding: 0 !important; } /* ===================================================== MOBILE ACCOUNT / WISHLIST / CART ===================================================== */ .kh-mobile-actions .kh-account-btn, .kh-mobile-actions .kh-wishlist-btn, .kh-mobile-actions .kh-cart-btn { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } .kh-mobile-actions .kh-account-btn .elementor-button, .kh-mobile-actions .kh-wishlist-btn .elementor-button, .kh-mobile-actions .elementor-menu-cart__toggle_button { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== HAMBURGER WIDGET ===================================================== */ .kh-mobile-menu-btn { position: relative !important; width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .kh-mobile-menu-btn .elementor-widget-container { position: static !important; width: 30px !important; height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .kh-mobile-menu-btn .elementor-menu-toggle { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: var(--kh-white) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; line-height: 1 !important; } /* ===================================================== HAMBURGER / X STATE ===================================================== */ .kh-mobile-menu-btn .elementor-menu-toggle .elementor-menu-toggle__icon--open { display: flex !important; align-items: center !important; justify-content: center !important; } .kh-mobile-menu-btn .elementor-menu-toggle .elementor-menu-toggle__icon--close { display: none !important; } .kh-mobile-menu-btn .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open, .kh-mobile-menu-btn .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--open { display: none !important; } .kh-mobile-menu-btn .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close, .kh-mobile-menu-btn .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close { display: flex !important; align-items: center !important; justify-content: center !important; } .kh-mobile-menu-btn .elementor-menu-toggle .elementor-menu-toggle__icon--open, .kh-mobile-menu-btn .elementor-menu-toggle .elementor-menu-toggle__icon--close { width: 24px !important; height: 24px !important; margin: 0 !important; color: var(--kh-white) !important; } .kh-mobile-menu-btn .elementor-menu-toggle svg { width: 24px !important; height: 24px !important; color: currentColor !important; fill: currentColor !important; stroke: currentColor !important; } /* ===================================================== MOBILE DROPDOWN PANEL ===================================================== */ .kh-mobile-menu-btn .elementor-nav-menu--dropdown { position: fixed !important; top: 68px !important; left: 12px !important; right: 12px !important; width: auto !important; max-height: calc(100vh - 80px) !important; margin: 0 !important; padding: 12px 10px 18px !important; overflow-x: hidden !important; overflow-y: auto !important; background: rgba(6,23,34,.99) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 16px !important; box-shadow: 0 24px 70px rgba(0,0,0,.42) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 999999 !important; } /* ===================================================== MOBILE MENU LINKS ===================================================== */ .kh-mobile-menu-btn .elementor-nav-menu--dropdown .elementor-nav-menu { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; } .kh-mobile-menu-btn .elementor-nav-menu--dropdown .elementor-item { width: 100% !important; min-height: 48px !important; display: flex !important; align-items: center !important; padding: 13px 12px !important; color: var(--kh-white) !important; background: transparent !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase; } .kh-mobile-menu-btn .elementor-nav-menu--dropdown .elementor-item:hover, .kh-mobile-menu-btn .elementor-nav-menu--dropdown .elementor-item.elementor-item-active { color: var(--kh-gold) !important; background: rgba(255,255,255,.06) !important; } /* ===================================================== MOBILE SUBMENU ARROW NATIVE ELEMENTOR ICON ===================================================== */ .kh-mobile-menu-btn .elementor-nav-menu--dropdown .sub-arrow { margin-left: auto !important; padding-left: 12px !important; color: #F0D487 !important; opacity: 1 !important; } .kh-mobile-menu-btn .elementor-nav-menu--dropdown .sub-arrow i { color: #F0D487 !important; opacity: 1 !important; } .kh-mobile-menu-btn .elementor-nav-menu--dropdown .sub-arrow svg { color: #F0D487 !important; fill: #F0D487 !important; stroke: #F0D487 !important; opacity: 1 !important; } /* Hover / open */ .kh-mobile-menu-btn .elementor-nav-menu--dropdown .elementor-item:hover .sub-arrow, .kh-mobile-menu-btn .elementor-nav-menu--dropdown .elementor-item.highlighted .sub-arrow, .kh-mobile-menu-btn .elementor-nav-menu--dropdown .elementor-item[aria-expanded="true"] .sub-arrow { color: var(--kh-gold) !important; } .kh-mobile-menu-btn .elementor-nav-menu--dropdown .elementor-item:hover .sub-arrow svg, .kh-mobile-menu-btn .elementor-nav-menu--dropdown .elementor-item.highlighted .sub-arrow svg, .kh-mobile-menu-btn .elementor-nav-menu--dropdown .elementor-item[aria-expanded="true"] .sub-arrow svg { color: var(--kh-gold) !important; fill: var(--kh-gold) !important; stroke: var(--kh-gold) !important; } /* ===================================================== MOBILE SUBMENU ===================================================== */ .kh-mobile-menu-btn .elementor-nav-menu--dropdown .sub-menu { position: static !important; width: 100% !important; margin: 2px 0 7px !important; padding: 5px 4px 5px 12px !important; background: rgba(255,255,255,.035) !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; } .kh-mobile-menu-btn .elementor-nav-menu--dropdown .sub-menu .elementor-item { min-height: 42px !important; padding: 10px 11px !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none; } /* ===================================================== MOBILE SEARCH ===================================================== */ .kh-mobile-search { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 10px 16px 14px !important; background: rgba(0,0,0,.06) !important; } .kh-mobile-search > .e-con-inner, .kh-mobile-search .elementor-widget, .kh-mobile-search .elementor-widget-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .kh-mobile-search .e-search { width: 100% !important; max-width: 100% !important; } .kh-mobile-search .e-search-form { width: 100% !important; min-height: 54px !important; display: flex !important; align-items: center !important; gap: 4px !important; padding: 4px !important; margin: 0 !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.20) !important; border-radius: 999px !important; overflow: hidden; } .kh-mobile-search .e-search-input-wrapper { min-width: 0 !important; flex: 1 1 0 !important; } .kh-mobile-search .e-search-input { width: 100% !important; min-width: 0 !important; height: 44px !important; padding: 0 14px !important; color: var(--kh-white) !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; font-size: 15px !important; } .kh-mobile-search .e-search-input::placeholder { color: rgba(255,255,255,.55) !important; } .kh-mobile-search .e-search-submit { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; flex: 0 0 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: var(--kh-white) !important; background: var(--kh-accent) !important; border: 0 !important; border-radius: 50% !important; font-size: 0 !important; } .kh-mobile-search .e-search-submit svg { width: 21px !important; height: 21px !important; color: var(--kh-white) !important; fill: var(--kh-white) !important; stroke: var(--kh-white) !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .kh-mobile-header-top { column-gap: 10px !important; padding: 8px 12px !important; } .kh-mobile-header-top > .e-con-inner { column-gap: 10px !important; } .kh-mobile-header-logo, .kh-mobile-header-logo .elementor-widget-container, .kh-mobile-header-logo a { max-width: 98px !important; } .kh-mobile-header-logo img { max-width: 98px !important; max-height: 45px !important; } .kh-mobile-actions, .kh-mobile-actions > .e-con-inner { gap: 7px !important; } .kh-mobile-search { padding: 9px 12px 12px !important; } .kh-mobile-menu-btn .elementor-nav-menu--dropdown { left: 8px !important; right: 8px !important; } }/* End custom CSS */