/* ========================================================================== Makhmal — Header / Navigation / Mega Menu ========================================================================== */ .mk-header { position: sticky; top: 0; z-index: 100; background: var(--mk-color-bg-soft); border-bottom: 1px solid var(--mk-color-border); } /* While the mobile off-canvas menu holds the body scroll-lock (JS pins with position:fixed), the sticky header loses its scroll container and would snap back to its natural document position — off-screen on a scrolled page, taking the menu (anchored to it) along. This pins the header to the viewport for the lock's duration. */ .mk-header.is-nav-locked { position: fixed; top: 0; inset-inline: 0; width: 100%; } .mk-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--mk-header-height); } /* ---- Start cluster: logo + (mobile) burger ---- */ .mk-nav__start { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .mk-nav__brand { display: flex; align-items: center; flex-shrink: 0; } .mk-nav__logo { height: 38px; width: auto; } /* ---- Search ---- */ .mk-nav__search { display: flex; align-items: center; gap: 8px; flex: 0 1 240px; min-width: 0; padding: 0 12px; height: 40px; border-radius: var(--mk-radius-pill); background: var(--mk-color-bg-muted); border: 1px solid transparent; transition: border-color var(--mk-transition), background-color var(--mk-transition); } .mk-nav__search:focus-within { border-color: var(--mk-color-primary); background: var(--mk-color-surface); } .mk-nav__search-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--mk-color-text-soft); } .mk-nav__search-input { border: none; background: none; outline: none; flex: 1; min-width: 0; font-family: inherit; font-size: var(--mk-fs-sm); font-weight: 700; color: var(--mk-color-text); } .mk-nav__search-input::placeholder { color: var(--mk-color-text-soft); font-weight: 700; } .mk-header__mobile-search { display: none; } /* ---- Menu list ---- */ .mk-nav__menu { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .mk-nav__item { position: relative; /* .mk-megamenu below is position:absolute + visibility:hidden, up to 980px wide, pinned to this item's inline-start edge. Invisible ≠ removed from layout: without containment its off-screen box still inflates the document's horizontal scrollWidth, which is what was shifting the whole RTL page right on any viewport-width change (e.g. leaving devtools' mobile emulation). Layout containment stops a descendant's overflow from affecting ancestor sizing without clipping its paint, so the dropdown still opens/shows exactly as before. */ contain: layout; } .mk-nav__link-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--mk-color-accent); } .mk-nav__link { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: var(--mk-radius-pill); font-size: var(--mk-fs-sm); font-weight: 700; color: var(--mk-color-text); transition: background-color var(--mk-transition), color var(--mk-transition); white-space: nowrap; } .mk-nav__link:hover, .mk-nav__item.is-open > .mk-nav__link { background-color: var(--mk-color-bg-muted); color: var(--mk-color-primary-hover); } .mk-nav__caret { width: 10px; height: 10px; flex-shrink: 0; transition: transform var(--mk-transition); } .mk-nav__item.is-open .mk-nav__caret { transform: rotate(180deg); } /* ---- Actions (cart / CTA) ---- */ .mk-nav__actions { display: flex; flex: 1; justify-content: end; align-items: center; gap: 10px; flex-shrink: 0; margin-inline-start: auto; } .mk-nav__cart, .mk-nav__account { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--mk-radius-pill); font-size: var(--mk-fs-sm); font-weight: 700; color: var(--mk-color-text); transition: background-color var(--mk-transition); } .mk-nav__cart svg, .mk-nav__account svg { width: 18px; height: 18px; flex-shrink: 0; } .mk-nav__cart:hover, .mk-nav__account:hover { background-color: var(--mk-color-bg-muted); } .mk-nav__cta { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--mk-radius-pill); background: var(--mk-gradient-cta); color: var(--mk-color-text-on-brand); font-size: var(--mk-fs-sm); font-weight: 700; box-shadow: var(--mk-shadow-sm); transition: box-shadow var(--mk-transition), transform var(--mk-transition); border: none; } .mk-nav__cta:hover { box-shadow: var(--mk-shadow-md); transform: translateY(-1px); } /* ---- Hamburger (mobile) ---- */ .mk-nav__burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; border: none; background: var(--mk-color-bg-muted); border-radius: var(--mk-radius-sm); flex-shrink: 0; } .mk-nav__burger-bar { width: 20px; height: 2px; background: var(--mk-color-text); border-radius: 2px; transition: transform var(--mk-transition), opacity var(--mk-transition); } .mk-nav__burger.is-active .mk-nav__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mk-nav__burger.is-active .mk-nav__burger-bar:nth-child(2) { opacity: 0; } .mk-nav__burger.is-active .mk-nav__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- Mega menu panel ---- */ .mk-megamenu { position: absolute; inset-inline-start: 0; top: 100%; padding-top: 12px; width: min(980px, 92vw); opacity: 0; visibility: hidden; transition: opacity var(--mk-transition), visibility var(--mk-transition); } .mk-megamenu__panel { background: var(--mk-color-surface); border: 1px solid var(--mk-color-border); border-radius: var(--mk-radius-lg); box-shadow: var(--mk-shadow-lg); padding: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; translate: 0 8px; transition: translate var(--mk-transition); } .mk-megamenu__col-title { display: flex; align-items: center; gap: 6px; font-family: var(--mk-font-heading); font-size: var(--mk-fs-sm); font-weight: 900; color: var(--mk-color-primary-hover); margin-bottom: 14px; } .mk-megamenu__col-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--mk-color-accent); } .mk-megamenu__col-title--stacked { margin-top: 18px; } .mk-megamenu__list { display: flex; flex-direction: column; gap: 10px; } .mk-megamenu__list a { font-size: var(--mk-fs-sm); color: var(--mk-color-text-soft); transition: color var(--mk-transition); } .mk-megamenu__list a:hover { color: var(--mk-color-primary); } /* Desktop: open on hover / keyboard-focus, no JS needed */ @media (min-width: 992px) { .mk-nav__item:hover > .mk-megamenu, .mk-nav__item:focus-within > .mk-megamenu, .mk-nav__item.is-open > .mk-megamenu { opacity: 1; visibility: visible; } .mk-nav__item:hover > .mk-megamenu .mk-megamenu__panel, .mk-nav__item:focus-within > .mk-megamenu .mk-megamenu__panel, .mk-nav__item.is-open > .mk-megamenu .mk-megamenu__panel { translate: 0 0; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 991px) { .mk-nav__menu, .mk-nav__search { display: none; } .mk-header__mobile-search { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 14px; height: 42px; border-radius: var(--mk-radius-pill); background: var(--mk-color-bg-muted); } .mk-header__mobile-search .mk-nav__search-input { border: none; background: none; outline: none; flex: 1; min-width: 0; font-family: inherit; font-size: var(--mk-fs-sm); font-weight: 700; color: var(--mk-color-text); } .mk-nav__action-label { display: none; } .mk-nav__cart, .mk-nav__account { padding: 9px; border-radius: 50%; background: var(--mk-color-bg-muted); } .mk-nav__burger { display: flex; } .mk-nav.is-mobile-open .mk-nav__menu { display: flex; } .mk-nav__menu { position: fixed; top: var(--mk-header-height); inset-inline: 0; bottom: 0; height: calc(100dvh - var(--mk-header-height)); background: var(--mk-color-bg); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 12px 20px 32px; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 99; } .mk-nav__link { justify-content: space-between; width: 100%; padding: 14px 12px; border-radius: var(--mk-radius-sm); } .mk-nav__caret { transform: rotate(90deg); } .mk-nav__item.is-open .mk-nav__caret { transform: rotate(0); } .mk-megamenu { position: static; transform: none; width: 100%; padding-top: 0; display: none; opacity: 1; visibility: visible; } .mk-megamenu__panel { grid-template-columns: 1fr; box-shadow: none; border: none; padding: 8px 12px 8px 24px; translate: 0; } .mk-nav__item.is-open .mk-megamenu { display: block; } }