.kolbeh-header.elco-header--premium { z-index: 1030; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(229, 231, 235, 0.6); } .kolbeh-header .header-premium-top { padding: 0.85rem 0; background: transparent; } .kolbeh-header .header-premium-inner { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.75rem 1.25rem; width: 100%; max-width: var(--kolbeh-layout-max); margin-inline: auto; padding-inline: var(--kolbeh-layout-gutter); } .kolbeh-header .header-brand, .kolbeh-header .kolbeh-header__brand { display: inline-flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; text-decoration: none; color: inherit; } .kolbeh-header .header-brand-text, .kolbeh-header .kolbeh-header__brand-text { display: flex; flex-direction: column; justify-content: center; gap: 0.12rem; min-height: 64px; } .kolbeh-header .header-brand-logo, .kolbeh-header .kolbeh-header__brand-icon { width: auto; height: 64px; max-width: 96px; max-height: 64px; object-fit: contain; flex-shrink: 0; border-radius: 0; } .kolbeh-header .header-brand-text strong { font-size: 1.32rem; font-weight: 800; line-height: 1.08; color: var(--kolbeh-purple); letter-spacing: -0.02em; } .kolbeh-header .header-brand-text small { font-size: 0.68rem; font-weight: 600; line-height: 1.15; color: #5B21B6; letter-spacing: 0.01em; } .kolbeh-header .header-premium-nav { flex: 0 0 auto; position: relative; width: auto; max-width: 100%; padding: 0; } .kolbeh-header .header-premium-nav__links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.85rem; } .kolbeh-header .header-premium-nav__link, .kolbeh-header .header-premium-nav__trigger { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.95rem; border-radius: var(--kolbeh-radius-pill); border: 1px solid transparent; background: transparent; color: var(--kolbeh-text); font-family: inherit; font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: color 0.2s, background 0.2s, border-color 0.2s; } .kolbeh-header .header-premium-nav__link:hover, .kolbeh-header .header-premium-nav__link:focus-visible, .kolbeh-header .header-premium-nav__trigger:hover, .kolbeh-header .header-premium-nav__trigger:focus-visible { color: var(--kolbeh-purple); background: rgba(124, 58, 237, 0.08); outline: none; } .kolbeh-header .header-premium-nav__link.is-active, .kolbeh-header .header-premium-nav__trigger.is-active { color: var(--kolbeh-purple); background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.15); } .kolbeh-header .header-premium-nav__group { position: relative; } .kolbeh-header .header-premium-nav__group::after { content: ''; position: absolute; top: 100%; inset-inline-start: -0.35rem; inset-inline-end: -0.35rem; height: 0.65rem; pointer-events: auto; } .kolbeh-header .header-premium-nav__trigger-icon { font-size: 0.62rem; color: var(--kolbeh-purple); transition: transform 0.22s ease; } .kolbeh-header .header-premium-nav__group:hover .header-premium-nav__trigger-icon, .kolbeh-header .header-premium-nav__group:focus-within .header-premium-nav__trigger-icon, .kolbeh-header .header-premium-nav__group.is-open .header-premium-nav__trigger-icon { transform: rotate(180deg); } .kolbeh-header .header-premium-nav__submenu { position: absolute; top: 100%; inset-inline-start: 50%; transform: translateX(-50%); z-index: 60; min-width: 11rem; padding: 0.45rem 0.4rem 0.4rem; border: 1px solid rgba(124, 58, 237, 0.14); border-radius: 14px; background: var(--kolbeh-white); box-shadow: 0 12px 32px rgba(124, 58, 237, 0.14); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, visibility 0.2s; } [dir="rtl"] .kolbeh-header .header-premium-nav__submenu { transform: translateX(50%); } .kolbeh-header .header-premium-nav__group:hover .header-premium-nav__submenu, .kolbeh-header .header-premium-nav__group:focus-within .header-premium-nav__submenu, .kolbeh-header .header-premium-nav__group.is-open .header-premium-nav__submenu { opacity: 1; visibility: visible; pointer-events: auto; } .kolbeh-header .header-premium-nav__sublink { display: block; padding: 0.55rem 0.85rem; border-radius: 10px; color: var(--kolbeh-text); text-decoration: none; font-size: 0.86rem; font-weight: 600; } .kolbeh-header .header-premium-nav__sublink:hover, .kolbeh-header .header-premium-nav__sublink.is-active { background: rgba(124, 58, 237, 0.08); color: var(--kolbeh-purple); } .kolbeh-header__search { flex: 1 1 220px; position: relative; width: 100%; min-width: 0; max-width: 380px; margin-inline: auto; } .kolbeh-header__search-input { width: 100%; padding: 0.7rem 1rem 0.7rem 2.75rem; border: none; border-radius: var(--kolbeh-radius-pill); background: var(--kolbeh-gray-100); font-family: inherit; font-size: 0.9rem; color: var(--kolbeh-text); outline: none; transition: box-shadow 0.2s; } [dir="rtl"] .kolbeh-header__search-input { padding: 0.7rem 2.75rem 0.7rem 1rem; } .kolbeh-header__search-input:focus { box-shadow: 0 0 0 2px var(--kolbeh-purple-light); } .kolbeh-header__search-icon { position: absolute; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); color: var(--kolbeh-text-muted); pointer-events: none; } .kolbeh-header__utilities { flex: 0 0 auto; display: flex; align-items: center; gap: 0.75rem; margin-inline-start: 0; overflow: visible; } .kolbeh-header .header-util-divider { width: 1px; height: 1.5rem; background: rgba(124, 58, 237, 0.15); } .kolbeh-header .header-utility-link, .kolbeh-header__auth-btn--utility { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border: 1px solid rgba(124, 58, 237, 0.18); border-radius: var(--kolbeh-radius-pill); background: rgba(124, 58, 237, 0.05); color: var(--kolbeh-purple-dark); font-family: inherit; font-size: 0.82rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .kolbeh-header .header-utility-link:hover, .kolbeh-header .header-utility-link:focus-visible, .kolbeh-header__auth-btn--utility:hover, .kolbeh-header__auth-btn--utility:focus-visible { background: rgba(124, 58, 237, 0.1); border-color: rgba(124, 58, 237, 0.3); color: var(--kolbeh-purple-dark); outline: none; } .kolbeh-header a.kolbeh-header__cart-link { position: relative; overflow: visible; display: inline-flex !important; align-items: center; justify-content: center; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; padding: 0 !important; gap: 0 !important; border: none !important; border-radius: 50%; flex: 0 0 44px; flex-shrink: 0; direction: ltr !important; background: var(--kolbeh-purple); color: var(--kolbeh-white) !important; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25); text-decoration: none; } .kolbeh-header a.kolbeh-header__cart-link:hover, .kolbeh-header a.kolbeh-header__cart-link:focus-visible, .kolbeh-header a.kolbeh-header__cart-link.is-active { background: var(--kolbeh-purple-dark); color: var(--kolbeh-white) !important; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.32); outline: none; } .kolbeh-header a.kolbeh-header__cart-link .kolbeh-header__cart-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; flex-shrink: 0; pointer-events: none; } .kolbeh-header a.kolbeh-header__cart-link .kolbeh-header__cart-icon { font-size: 1.2rem; line-height: 1; color: inherit; pointer-events: none; } .kolbeh-header a.kolbeh-header__cart-link > .kolbeh-header__cart-badge, .kolbeh-header a.kolbeh-header__cart-link > .kolbeh-cart-badge { position: absolute !important; top: -5px !important; right: -5px !important; left: auto !important; bottom: auto !important; margin: 0 !important; transform: none !important; z-index: 3; display: inline-flex !important; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 50%; background: var(--kolbeh-yellow, #fde047) !important; color: var(--kolbeh-text, #1f2937) !important; font-size: 0.62rem; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px #fff; pointer-events: none; } .kolbeh-header a.kolbeh-header__cart-link > .kolbeh-header__cart-badge[data-count="0"], .kolbeh-header a.kolbeh-header__cart-link > .kolbeh-cart-badge[data-count="0"] { display: none !important; } .kolbeh-header a.kolbeh-header__cart-link > .kolbeh-header__cart-badge:not([data-count="0"]), .kolbeh-header a.kolbeh-header__cart-link > .kolbeh-cart-badge:not([data-count="0"]) { display: inline-flex !important; } @media (min-width: 992px) { .kolbeh-header a.kolbeh-header__cart-link--mobile { display: none !important; } } .kolbeh-body .kolbeh-header a.header-utility-link, .kolbeh-body .kolbeh-header button.header-utility-link { color: var(--kolbeh-purple-dark); } @media (max-width: 991.98px) { .kolbeh-header.elco-header--premium, .kolbeh-header .header-premium-top { overflow-x: clip; max-width: 100%; } .kolbeh-header .header-premium-inner { display: grid !important; grid-template-columns: auto 1fr auto !important; grid-template-areas: "toggle logo cart" !important; gap: 0.5rem; padding-inline: var(--kolbeh-layout-gutter) !important; } .kolbeh-header .header-nav-toggle { grid-area: toggle; border-color: rgba(124, 58, 237, 0.28) !important; background: var(--kolbeh-white) !important; border-radius: 12px !important; } .kolbeh-header .header-nav-toggle__bar { background: var(--kolbeh-purple) !important; } .kolbeh-header .header-nav-toggle:hover, .kolbeh-header .header-nav-toggle:focus-visible { border-color: rgba(124, 58, 237, 0.45) !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important; } .kolbeh-header .header-brand { grid-area: logo; justify-self: center; } .kolbeh-header .header-brand-text, .kolbeh-header .kolbeh-header__brand-text { display: none !important; } .kolbeh-header .header-brand-logo, .kolbeh-header .kolbeh-header__brand-icon { height: 54px; max-width: 58px; max-height: 54px; border-radius: 0 !important; } .kolbeh-header a.kolbeh-header__cart-link--mobile { grid-area: cart; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; flex: 0 0 42px; } .kolbeh-header a.kolbeh-header__cart-link--mobile .kolbeh-header__cart-icon { font-size: 1.15rem; } .kolbeh-header a.kolbeh-header__cart-link--mobile:hover, .kolbeh-header a.kolbeh-header__cart-link--mobile:focus-visible, .kolbeh-header a.kolbeh-header__cart-link--mobile.is-active { background: var(--kolbeh-purple-dark) !important; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28) !important; } .kolbeh-header .header-premium-nav { background: radial-gradient(ellipse 120% 40% at 50% 0%, rgba(124, 58, 237, 0.1) 0%, transparent 55%), linear-gradient(180deg, #ffffff 0%, #f8f5ff 100%) !important; border-inline-end: 1px solid rgba(124, 58, 237, 0.14) !important; box-shadow: 12px 0 40px rgba(124, 58, 237, 0.12) !important; } .kolbeh-header .mobile-drawer__head { background: rgba(255, 255, 255, 0.96) !important; border-bottom-color: rgba(124, 58, 237, 0.1) !important; } .kolbeh-header .mobile-drawer__brand { color: var(--kolbeh-purple-dark) !important; } .kolbeh-header .mobile-drawer__close { border-color: rgba(124, 58, 237, 0.2) !important; background: var(--kolbeh-white) !important; color: var(--kolbeh-purple) !important; } .kolbeh-header .mobile-drawer__close:hover, .kolbeh-header .mobile-drawer__close:focus-visible { background: var(--kolbeh-purple-light) !important; border-color: rgba(124, 58, 237, 0.35) !important; } .kolbeh-header .header-premium-nav__links > .header-premium-nav__link, .kolbeh-header .header-premium-nav__trigger { color: var(--kolbeh-text) !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 12px !important; font-size: 0.92rem !important; } .kolbeh-header .header-premium-nav__links > .header-premium-nav__link:hover, .kolbeh-header .header-premium-nav__links > .header-premium-nav__link:focus-visible, .kolbeh-header .header-premium-nav__trigger:hover, .kolbeh-header .header-premium-nav__trigger:focus-visible { color: var(--kolbeh-purple) !important; background: rgba(124, 58, 237, 0.07) !important; } .kolbeh-header .header-premium-nav__links > .header-premium-nav__link.is-active, .kolbeh-header .header-premium-nav__group.is-open .header-premium-nav__trigger, .kolbeh-header .header-premium-nav__group.is-active-group .header-premium-nav__trigger, .kolbeh-header .header-premium-nav__trigger.is-active { color: var(--kolbeh-purple) !important; background: rgba(124, 58, 237, 0.1) !important; } .kolbeh-header .header-premium-nav__links .header-premium-nav__label::after { background: linear-gradient(90deg, transparent, var(--kolbeh-purple), transparent) !important; box-shadow: 0 0 6px rgba(124, 58, 237, 0.35) !important; } .kolbeh-header .header-premium-nav__group.is-open, .kolbeh-header .header-premium-nav__group.is-active-group { background: rgba(124, 58, 237, 0.05) !important; } .kolbeh-header .header-premium-nav__trigger-icon { border-color: rgba(124, 58, 237, 0.18) !important; background: rgba(124, 58, 237, 0.06) !important; color: var(--kolbeh-purple) !important; } .kolbeh-header .header-premium-nav__group.is-open .header-premium-nav__trigger-icon { color: var(--kolbeh-purple) !important; border-color: rgba(124, 58, 237, 0.3) !important; background: rgba(124, 58, 237, 0.12) !important; box-shadow: 0 0 10px rgba(124, 58, 237, 0.15) !important; } .kolbeh-header .header-premium-nav__group.is-open .header-premium-nav__submenu::before { background: linear-gradient( 180deg, rgba(124, 58, 237, 0.05) 0%, rgba(124, 58, 237, 0.45) 35%, rgba(167, 139, 250, 0.75) 50%, rgba(124, 58, 237, 0.45) 65%, rgba(124, 58, 237, 0.05) 100% ) !important; box-shadow: 0 0 10px rgba(124, 58, 237, 0.2) !important; } .kolbeh-header .header-premium-nav__sublink { color: var(--kolbeh-text-muted) !important; } .kolbeh-header .header-premium-nav__sublink:hover, .kolbeh-header .header-premium-nav__sublink:focus-visible, .kolbeh-header .header-premium-nav__sublink.is-active { color: var(--kolbeh-purple) !important; background: rgba(124, 58, 237, 0.08) !important; } .kolbeh-header .mobile-drawer__footer { border-top-color: rgba(124, 58, 237, 0.1) !important; background: rgba(255, 255, 255, 0.92) !important; } .kolbeh-header .mobile-drawer__admin-link, .kolbeh-header .kolbeh-drawer-auth-link { border-color: rgba(124, 58, 237, 0.22) !important; background: rgba(124, 58, 237, 0.08) !important; color: var(--kolbeh-purple-dark) !important; border-radius: 14px !important; } .kolbeh-header .kolbeh-drawer-auth-link { width: 100%; font-family: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; } .kolbeh-header .mobile-drawer__admin-link + .mobile-drawer__admin-link, .kolbeh-header .kolbeh-drawer-account-link + .mobile-drawer__admin-link { margin-top: 0.55rem; } .kolbeh-header .mobile-drawer__admin-link:hover, .kolbeh-header .kolbeh-drawer-auth-link:hover { background: rgba(124, 58, 237, 0.14) !important; border-color: rgba(124, 58, 237, 0.35) !important; color: var(--kolbeh-purple-dark) !important; } body.mobile-drawer-open .kolbeh-header.elco-header--premium { z-index: 1050; backdrop-filter: none; -webkit-backdrop-filter: none; } body.mobile-drawer-open .kolbeh-header .header-premium-top { backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (min-width: 992px) { .kolbeh-header .header-premium-inner { display: flex; flex-wrap: nowrap; } .kolbeh-header .kolbeh-header__brand { margin-inline-end: 0.35rem; } .kolbeh-header .header-brand-text, .kolbeh-header .kolbeh-header__brand-text { display: flex !important; } .kolbeh-header .header-brand-logo, .kolbeh-header .kolbeh-header__brand-icon { height: 64px; max-width: 96px; max-height: 64px; border-radius: 0 !important; } .kolbeh-header .header-premium-nav { flex: 0 0 auto; } .kolbeh-header__search { flex: 1 1 260px; max-width: 400px; } .kolbeh-header .header-premium-nav__group.is-open .header-premium-nav__submenu { position: absolute !important; max-height: none !important; margin: 0 !important; padding: 0.4rem !important; overflow: visible !important; pointer-events: auto !important; } } @media (min-width: 1200px) { .kolbeh-header .header-premium-inner { gap: 1rem 1.5rem; } .kolbeh-header .header-premium-nav__links { gap: 0.35rem 1rem; } }