/** * OEM ASTRA J — Phase 1: Desktop Header Redesign * Visual/CSS only · Desktop ≥901px * Do not alter IDs, JS, mobile, or non-header surfaces. */ @media (min-width: 901px) { .nav-garage-avatar-svg--mobile { display: none !important; } .nav-garage-car-svg--desktop { display: block !important; } :root { --ws-header-blue: #1e5bb8; --ws-header-blue-hover: #174a96; --ws-header-blue-soft: #a8c4e8; --ws-header-border: #e8ecf2; --ws-header-border-field: #dce3eb; --ws-header-ink: #1a2332; --ws-header-muted: #5b6575; --ws-header-icon: #4a5568; --ws-header-radius: 10px; --ws-header-radius-lg: 12px; --ws-header-shadow: 0 1px 3px rgba(26, 35, 50, 0.04), 0 4px 14px rgba(26, 35, 50, 0.04); --ws-header-transition: 180ms ease; --ws-cart-badge: #e11d2e; --ws-header-gold: #d4af37; --ws-util-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); --nav-surface: #ffffff; --nav-line: var(--ws-header-border); --nav-ink: var(--ws-header-ink); --nav-muted: var(--ws-header-muted); --nav-main-h: 55px; --nav-total-h: 103px; --nav-logo-h: 134px; --nav-search-h: 46px; --nav-search-stack-offset: 0; --nav-bar-cell-h: 48px; --nav-cell-h: 48px; --nav-cell-radius: var(--ws-header-radius-lg); --nav-util-btn-h: 48px; --nav-util-radius: var(--ws-header-radius); --nav-util-bg: #ffffff; --nav-util-gold: var(--ws-header-blue); --nav-util-gold-border: var(--ws-header-border-field); --nav-util-gold-hover: var(--ws-header-blue); --nav-util-font-size: 12px; --nav-util-pad-x: 14px; --nav-util-gap: 8px; --header-divider-h: 0px; --header-divider-bg: #ffffff; /* LTR search fills to language; RTL keeps fixed width */ --header-search-width-desktop: auto; --header-search-width-desktop-rtl: 500px; } body.is-home-page, body.catalog-page-open, body.catalog-branch-mode, body.catalog-drawer-open, body.catalog-drawer-push, body:has(#catalogDrawer.open) { --nav-main-h: 55px; --nav-total-h: 103px; --nav-logo-h: 134px; --nav-search-h: 46px; --nav-bar-cell-h: 48px; --nav-search-stack-offset: 0; } /* ── Shell: pure white premium bar ── */ body > nav:not(.mob-bottom-bar), body.is-home-page > nav:not(.mob-bottom-bar), body.is-home-page nav:not(.mob-bottom-bar), body.catalog-page-open > nav:not(.mob-bottom-bar), body.catalog-branch-mode > nav:not(.mob-bottom-bar), body.catalog-drawer-open > nav:not(.mob-bottom-bar), body.catalog-drawer-push > nav:not(.mob-bottom-bar), body.product-page-open > nav:not(.mob-bottom-bar), body:has(#catalogDrawer.open) > nav:not(.mob-bottom-bar) { background: #ffffff !important; background-color: #ffffff !important; border-bottom: 1px solid var(--ws-header-border) !important; box-shadow: var(--ws-header-shadow) !important; overflow: visible !important; } /* Kill divider stripe in every storefront state (product/catalog open/close) */ body > nav:not(.mob-bottom-bar)::before, body > nav:not(.mob-bottom-bar)::after, body.is-home-page > nav:not(.mob-bottom-bar)::before, body.is-home-page > nav:not(.mob-bottom-bar)::after, body.catalog-page-open > nav:not(.mob-bottom-bar)::before, body.catalog-page-open > nav:not(.mob-bottom-bar)::after, body.catalog-branch-mode > nav:not(.mob-bottom-bar)::before, body.catalog-branch-mode > nav:not(.mob-bottom-bar)::after, body.catalog-drawer-open > nav:not(.mob-bottom-bar)::before, body.catalog-drawer-open > nav:not(.mob-bottom-bar)::after, body.catalog-drawer-push > nav:not(.mob-bottom-bar)::before, body.catalog-drawer-push > nav:not(.mob-bottom-bar)::after, body.product-page-open > nav:not(.mob-bottom-bar)::before, body.product-page-open > nav:not(.mob-bottom-bar)::after, body:has(#catalogDrawer.open) > nav:not(.mob-bottom-bar)::before, body:has(#catalogDrawer.open) > nav:not(.mob-bottom-bar)::after { display: none !important; content: none !important; height: 0 !important; width: 0 !important; opacity: 0 !important; animation: none !important; background: none !important; border: none !important; box-shadow: none !important; transform: none !important; pointer-events: none !important; } .nav-main, body.is-home-page .nav-main, body.catalog-page-open .nav-main, body.catalog-branch-mode .nav-main, body.product-page-open .nav-main, body:has(#catalogDrawer.open) .nav-main, html[dir="ltr"] .nav-main, html[dir="rtl"] .nav-main, html[dir="ltr"] body.is-home-page .nav-main, html[dir="rtl"] body.is-home-page .nav-main { background: #ffffff !important; background-color: #ffffff !important; height: var(--nav-total-h) !important; min-height: var(--nav-total-h) !important; max-height: var(--nav-total-h) !important; border-top: none !important; border-bottom: none !important; /* Always stack row1 (logo/search/utils) above row2 (links) — LTR and RTL */ display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; } .nav-shell.nav-main-row, body.is-home-page .nav-shell.nav-main-row, html[dir="ltr"] .nav-shell.nav-main-row, html[dir="rtl"] .nav-shell.nav-main-row, html[dir="ltr"] body.is-home-page .nav-shell.nav-main-row, html[dir="rtl"] body.is-home-page .nav-shell.nav-main-row { gap: 20px; /* Top-align logo / search / utils in row 1 (not vertically centered in 80px) */ align-items: flex-start !important; height: var(--nav-main-h) !important; min-height: var(--nav-main-h) !important; max-height: var(--nav-main-h) !important; /* Lock track to main-row height so tall logo cannot re-center search/utils */ grid-template-rows: var(--nav-main-h) !important; width: 100% !important; max-width: none !important; flex: 0 0 auto !important; /* Top pad so 46px search / 48px util controls + logo translateY(-38px) clear in 60px main row */ padding-top: 6px !important; box-sizing: border-box !important; } html[dir="ltr"] .nav-shell.nav-main-row, html[dir="ltr"] body.is-home-page .nav-shell.nav-main-row { padding-inline-end: 24px !important; padding-inline-start: 20px !important; } html[dir="rtl"] .nav-shell.nav-main-row, html[dir="rtl"] body.is-home-page .nav-shell.nav-main-row { padding-inline-start: 24px !important; padding-inline-end: 20px !important; } /* ── Logo ── */ .nav-logo, body.is-home-page .nav-logo { height: auto !important; max-height: none !important; max-width: min(280px, 36vw); align-items: flex-start; align-self: flex-start !important; padding-top: 0 !important; overflow: visible !important; } /* Row-1 actions: pin search + util cluster to the top (beat RTL align-self:center) */ .nav-actions-wrap, body.is-home-page .nav-actions-wrap, html[dir="ltr"] .nav-actions-wrap, html[dir="rtl"] .nav-actions-wrap, html[dir="ltr"] body.is-home-page .nav-actions-wrap, html[dir="rtl"] body.is-home-page .nav-actions-wrap { align-self: flex-start !important; align-items: flex-start !important; height: auto !important; min-height: 0 !important; padding-top: var(--nav-search-stack-offset, 0) !important; } .nav-main-actions, body.is-home-page .nav-main-actions, html[dir="ltr"] .nav-main-actions, html[dir="rtl"] .nav-main-actions, html[dir="ltr"] body.is-home-page .nav-main-actions, html[dir="rtl"] body.is-home-page .nav-main-actions { align-items: flex-start !important; align-content: flex-start !important; align-self: flex-start !important; } .nav-search-wrap, body.is-home-page .nav-search-wrap, .nav-main-actions .nav-search-wrap, html[dir="ltr"] .nav-search-wrap, html[dir="rtl"] .nav-search-wrap, html[dir="ltr"] body.is-home-page .nav-search-wrap, html[dir="rtl"] body.is-home-page .nav-search-wrap { align-self: flex-start !important; padding-top: 0 !important; } .nav-logo-img, body.is-home-page .nav-logo-img { height: var(--nav-logo-h) !important; max-height: var(--nav-logo-h) !important; width: auto; filter: none !important; /* Nudge mark up ~1cm without changing size */ transform: translateY(-38px); } /* ── Spacing ── */ html[dir="ltr"] .nav-main-actions, html[dir="ltr"] body.is-home-page .nav-main-actions { column-gap: 14px !important; } html[dir="ltr"] .nav-trade-cluster, html[dir="ltr"] .nav-util-cluster, html[dir="rtl"] .nav-trade-cluster, html[dir="rtl"] .nav-util-cluster { gap: 10px !important; } /* ── Search: visual focus ── */ .nav-search, body.is-home-page .nav-search { height: 46px !important; min-height: 46px !important; max-height: 46px !important; background: #ffffff !important; border: 1px solid var(--ws-header-border-field) !important; border-radius: var(--ws-header-radius-lg) !important; box-shadow: none !important; overflow: hidden; transition: border-color var(--ws-header-transition), box-shadow var(--ws-header-transition); } .nav-search:hover, body.is-home-page .nav-search:hover { border-color: var(--ws-header-blue-soft) !important; } .nav-search:focus-within, body.is-home-page .nav-search:focus-within { border-color: var(--ws-header-blue) !important; box-shadow: 0 0 0 3px rgba(30, 91, 184, 0.14) !important; } /* Search results dropdown — white panel (desktop) */ #navSearchDropdown.nav-search-dropdown, #navSearchDropdown.search-dropdown, .nav-search-wrap .search-dropdown.nav-search-dropdown { background: #ffffff !important; border: 1px solid #e5eaf0 !important; border-radius: 12px !important; box-shadow: 0 12px 32px rgba(15, 45, 107, 0.12) !important; } #navSearchDropdown .search-drop-item { background: transparent !important; border-bottom-color: #eef1f5 !important; } #navSearchDropdown .search-drop-item:hover, #navSearchDropdown .search-drop-item:active { background: #f5f7fa !important; } #navSearchDropdown .search-drop-name { color: #1a2332 !important; } #navSearchDropdown .search-drop-meta, #navSearchDropdown .search-drop-empty, #navSearchDropdown .search-drop-hint { color: #6b7280 !important; } #navSearchDropdown .search-drop-recent-hdr { background: #f8fafc !important; border-bottom: 1px solid #eef1f5 !important; color: #6b7280 !important; } #navSearchDropdown .search-drop-recent-hdr button { color: #1e5bb8 !important; } #navSearchDropdown .search-drop-recent { background: #ffffff !important; border-bottom-color: #eef1f5 !important; color: #1a2332 !important; } #navSearchDropdown .search-drop-recent:hover { background: #f5f7fa !important; } #navSearchDropdown .search-drop-recent span { color: #1a2332 !important; } #navSearchDropdown .search-drop-recent small, #navSearchDropdown .search-drop-recent-x { color: #6b7280 !important; } #navSearchDropdown .search-drop-count { background: #f8fafc !important; border-bottom-color: #eef1f5 !important; color: #6b7280 !important; } #navSearchDropdown .search-drop-count strong, #navSearchDropdown .search-drop-cat, #navSearchDropdown .search-drop-hint em { color: #1e5bb8 !important; } .nav-search input, .nav-search-filter select, .nav-search-btn, body.is-home-page .nav-search input, body.is-home-page .nav-search-filter select, body.is-home-page .nav-search-btn { height: 46px !important; min-height: 46px !important; max-height: 46px !important; } .nav-search input, body.is-home-page .nav-search input { color: var(--ws-header-ink) !important; background: #ffffff !important; font-size: 13px !important; font-weight: 500; } .nav-search input::placeholder, body.is-home-page .nav-search input::placeholder { color: #8b95a5 !important; } /* Category dropdown (by name / OEM / part) — removed from top search */ .nav-search-filter, body.is-home-page .nav-search-filter, .nav-search-filter-chevron, body.is-home-page .nav-search-filter-chevron { display: none !important; visibility: hidden !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: hidden !important; pointer-events: none !important; } .nav-search:focus-within .nav-search-filter, body.is-home-page .nav-search:focus-within .nav-search-filter { display: none !important; } .nav-search-filter select, body.is-home-page .nav-search-filter select { display: none !important; } /* Navy search icon (mockup) */ .nav-search-btn, body.is-home-page .nav-search-btn { color: #002157 !important; background: transparent !important; transition: color var(--ws-header-transition), background var(--ws-header-transition); } .nav-search-btn:hover, .nav-search-btn:focus-visible, body.is-home-page .nav-search-btn:hover, body.is-home-page .nav-search-btn:focus-visible { color: #001a45 !important; background: rgba(0, 33, 87, 0.06) !important; } .nav-search-btn svg, body.is-home-page .nav-search-btn svg { stroke: currentColor !important; } .nav-search input:focus-visible, .nav-search-filter select:focus-visible { outline: 2px solid rgba(30, 91, 184, 0.28) !important; outline-offset: -2px; } /* ── SHOP NOW ── */ .nav-shop-btn, body.is-home-page .nav-shop-btn { height: 48px !important; min-height: 48px !important; max-height: 48px !important; background: var(--ws-header-blue) !important; border: none !important; border-radius: var(--ws-header-radius-lg) !important; color: #ffffff !important; font-weight: 700 !important; letter-spacing: 0.06em; box-shadow: 0 2px 8px rgba(30, 91, 184, 0.18); transition: background var(--ws-header-transition), box-shadow var(--ws-header-transition), transform var(--ws-header-transition); } .nav-shop-btn:hover, .nav-shop-btn:focus-visible, body.is-home-page .nav-shop-btn:hover, body.is-home-page .nav-shop-btn:focus-visible { background: var(--ws-header-blue-hover) !important; box-shadow: 0 6px 14px rgba(30, 91, 184, 0.24); transform: translateY(-1px); outline: none; } .nav-shop-btn:active, body.is-home-page .nav-shop-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(30, 91, 184, 0.18); } .nav-shop-btn:focus-visible { outline: 2px solid rgba(30, 91, 184, 0.45) !important; outline-offset: 2px; } .nav-shop-btn-icon { border-color: rgba(255, 255, 255, 0.85) !important; } .nav-shop-btn-icon svg { stroke: #ffffff !important; } .nav-shop-btn-label { color: #ffffff !important; } html[dir="ltr"] .nav-shop-btn-label { font-size: 12px !important; font-weight: 700 !important; } html[dir="rtl"] .nav-shop-btn-label { font-size: 11px !important; font-weight: 700 !important; } /* ── Utility cluster layout (preserve grid placement) ── */ html[dir="ltr"] .nav-util-cluster, html[dir="rtl"] .nav-util-cluster, html[dir="ltr"] body.is-home-page .nav-util-cluster, html[dir="rtl"] body.is-home-page .nav-util-cluster, html[dir="ltr"] .nav-trade-cluster, html[dir="rtl"] .nav-trade-cluster, html[dir="ltr"] body.is-home-page .nav-trade-cluster, html[dir="rtl"] body.is-home-page .nav-trade-cluster { display: contents !important; } html[dir="ltr"] .nav-main-actions, html[dir="ltr"] body.is-home-page .nav-main-actions { /* Free space goes to search; util icons stay auto-sized on the right */ column-gap: 10px !important; /* Search -6cm vs classic 23cm baseline */ grid-template-columns: 0 auto minmax(calc(23cm - 6cm), 1fr) auto auto auto auto !important; align-items: flex-start !important; } html[dir="ltr"] .nav-main-actions .nav-shop-btn, html[dir="ltr"] .nav-main-actions .nav-search-wrap, html[dir="ltr"] .nav-main-actions .nav-lang-wrap, html[dir="ltr"] .nav-main-actions .nav-btn-auth, html[dir="ltr"] .nav-main-actions .nav-account, html[dir="ltr"] .nav-main-actions .nav-garage-btn, html[dir="ltr"] .nav-main-actions .nav-cart-btn { align-self: flex-start !important; } html[dir="ltr"] .nav-search-wrap, html[dir="ltr"] body.is-home-page .nav-search-wrap, html[dir="ltr"] .nav-main-actions .nav-search-wrap { width: 100% !important; max-width: none !important; min-width: calc(23cm - 6cm) !important; flex: 1 1 auto !important; } /* Exactly 2mm between search and language (accounts for column-gap) */ html[dir="ltr"] .nav-lang-wrap, html[dir="ltr"] body.is-home-page .nav-lang-wrap, html[dir="ltr"] .nav-main-actions .nav-lang-wrap { margin-inline-start: calc(2mm - 10px) !important; } html[dir="rtl"] .nav-main-actions, html[dir="rtl"] body.is-home-page .nav-main-actions { display: grid !important; column-gap: 10px !important; /* Logo stays physical left. Keep util order as EN; Shop is first from the right. */ grid-template-columns: minmax(200px, 1fr) auto auto auto auto auto !important; grid-template-areas: "search lang account garage cart shop" !important; align-items: flex-start !important; align-content: flex-start !important; direction: ltr !important; width: 100% !important; } html[dir="rtl"] .nav-lang-wrap, html[dir="rtl"] body.is-home-page .nav-lang-wrap { grid-area: lang !important; /* 1cm between Search and Lang (same as EN) */ margin-inline-start: calc(1cm - 10px) !important; margin-inline-end: 0 !important; } html[dir="rtl"] .nav-account, html[dir="rtl"] .nav-btn-auth, html[dir="rtl"] body.is-home-page .nav-account, html[dir="rtl"] body.is-home-page .nav-btn-auth { grid-area: account !important; } html[dir="rtl"] .nav-garage-btn, html[dir="rtl"] body.is-home-page .nav-garage-btn { grid-area: garage !important; } html[dir="rtl"] .nav-cart-btn, html[dir="rtl"] body.is-home-page .nav-cart-btn { grid-area: cart !important; margin-inline-end: 0 !important; margin-right: 0 !important; } html[dir="rtl"] .nav-search-wrap, html[dir="rtl"] body.is-home-page .nav-search-wrap { grid-area: search !important; width: auto !important; max-width: none !important; min-width: 0 !important; } html[dir="rtl"] .nav-shop-btn, html[dir="rtl"] body.is-home-page .nav-shop-btn { grid-area: shop !important; } html[dir="rtl"] .nav-shell.nav-main-row, html[dir="rtl"] body.is-home-page .nav-shell.nav-main-row { padding-inline-end: 0 !important; padding-right: 0 !important; } .nav-util-cluster .nav-lang-wrap { position: relative !important; display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; z-index: 2; } /* Identical util buttons: Language · Sign In · My Garage · Cart — icons only, no frame */ .nav-util-cluster .nav-util-btn, .nav-util-cluster .nav-lang-btn.nav-util-btn, .nav-util-cluster .nav-cart-btn.nav-util-btn, .nav-util-cluster .nav-account.nav-pill-btn, .nav-util-cluster .nav-btn-auth, .nav-util-cluster .nav-garage-btn, body.is-home-page .nav-util-cluster .nav-util-btn, body.is-home-page .nav-util-cluster .nav-lang-btn.nav-util-btn, body.is-home-page .nav-util-cluster .nav-cart-btn, body.is-home-page .nav-util-cluster .nav-cart-btn.nav-util-btn, body.is-home-page .nav-main-actions .nav-cart-btn, body.is-home-page .nav-main-actions .nav-account.nav-pill-btn, body.is-home-page .nav-main-actions .nav-lang-btn, body.is-home-page .nav-garage-btn, body.catalog-page-open .nav-util-cluster .nav-util-btn, body.catalog-branch-mode .nav-util-cluster .nav-util-btn, body.catalog-drawer-open .nav-util-cluster .nav-util-btn, body.catalog-drawer-push .nav-util-cluster .nav-util-btn { position: relative !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; align-self: flex-start !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; color: var(--ws-header-icon) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.1 !important; gap: 0 !important; opacity: 1 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: visible !important; cursor: pointer !important; justify-self: center !important; z-index: 2 !important; margin-inline: 0 !important; transform: none !important; transition: color 180ms ease, opacity 180ms ease !important; } /* Shared util hover — icon color only, no framed shell */ .nav-util-cluster .nav-util-btn:hover, .nav-util-cluster .nav-lang-btn.nav-util-btn:hover, .nav-util-cluster .nav-cart-btn:hover, .nav-util-cluster .nav-account.nav-pill-btn:hover, .nav-util-cluster .nav-btn-auth:hover, body.is-home-page .nav-util-cluster .nav-util-btn:hover, body.is-home-page .nav-util-cluster .nav-lang-btn:hover, body.is-home-page .nav-util-cluster .nav-cart-btn:hover, body.is-home-page .nav-main-actions .nav-cart-btn:hover, body.is-home-page .nav-main-actions .nav-account.nav-pill-btn:hover, body.is-home-page .nav-main-actions .nav-lang-btn:hover, body.is-home-page .nav-garage-btn:hover, body.catalog-page-open .nav-util-cluster .nav-util-btn:hover { opacity: 1 !important; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--ws-header-ink) !important; transform: none !important; } .nav-util-cluster .nav-util-btn:focus-visible, .nav-util-cluster .nav-lang-btn.nav-util-btn:focus-visible, .nav-util-cluster .nav-cart-btn:focus-visible, .nav-util-cluster .nav-account.nav-pill-btn:focus-visible, .nav-util-cluster .nav-btn-auth:focus-visible, .nav-util-cluster .nav-garage-btn:focus-visible, body.is-home-page .nav-util-cluster .nav-lang-btn:focus-visible, body.is-home-page .nav-util-cluster .nav-cart-btn:focus-visible, body.is-home-page .nav-main-actions .nav-cart-btn:focus-visible { outline: 2px solid rgba(30, 91, 184, 0.45) !important; outline-offset: 2px !important; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--ws-header-ink) !important; } /* ── Language — flag only (no EN label, no frame) ── */ .nav-util-cluster .nav-util-btn--lang, .nav-util-cluster .nav-lang-btn.nav-util-btn, body.is-home-page .nav-util-cluster .nav-util-btn--lang, body.is-home-page .nav-util-cluster .nav-lang-btn.nav-util-btn, body.is-home-page .nav-main-actions .nav-lang-btn { background: transparent !important; border: none !important; color: var(--ws-header-icon) !important; box-shadow: none !important; width: auto !important; min-width: 44px !important; max-width: none !important; padding: 0 6px !important; gap: 4px !important; } .nav-util-cluster .nav-util-btn--lang:hover, .nav-util-cluster .nav-util-btn--lang:focus-visible, .nav-util-cluster .nav-lang-btn.nav-util-btn:hover, .nav-util-cluster .nav-lang-btn.nav-util-btn:focus-visible, body.is-home-page .nav-util-cluster .nav-lang-btn:hover, body.is-home-page .nav-util-cluster .nav-lang-btn:focus-visible, body.is-home-page .nav-main-actions .nav-lang-btn:hover { background: transparent !important; border: none !important; color: var(--ws-header-ink) !important; box-shadow: none !important; transform: none !important; } /* ── Sign In — icon only ── */ .nav-util-cluster .nav-util-btn--auth, .nav-util-cluster .nav-btn-auth, .nav-util-cluster .nav-account.nav-pill-btn, body.is-home-page .nav-util-cluster .nav-util-btn--auth, body.is-home-page .nav-util-cluster .nav-btn-auth, body.is-home-page .nav-main-actions .nav-account.nav-pill-btn { background: transparent !important; border: none !important; color: var(--ws-header-icon) !important; box-shadow: none !important; } .nav-util-cluster .nav-util-btn--auth:hover, .nav-util-cluster .nav-util-btn--auth:focus-visible, .nav-util-cluster .nav-btn-auth:hover, .nav-util-cluster .nav-btn-auth:focus-visible, .nav-util-cluster .nav-account.nav-pill-btn:hover, .nav-util-cluster .nav-account.nav-pill-btn:focus-visible, body.is-home-page .nav-main-actions .nav-account.nav-pill-btn:hover { background: transparent !important; border: none !important; color: var(--ws-header-ink) !important; box-shadow: none !important; transform: none !important; } /* ── My Garage — plain text link (mockup) ── */ .nav-util-cluster .nav-util-btn--garage, .nav-util-cluster .nav-garage-btn, body.is-home-page .nav-util-cluster .nav-util-btn--garage, body.is-home-page .nav-garage-btn { flex-direction: row !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; gap: 0 !important; padding: 0 4px !important; background: transparent !important; border: none !important; color: var(--ws-header-ink) !important; box-shadow: none !important; } .nav-util-cluster .nav-util-btn--garage .nav-util-btn__icon, .nav-util-cluster .nav-garage-btn .nav-util-btn__icon, body.is-home-page .nav-util-cluster .nav-util-btn--garage .nav-util-btn__icon { display: none !important; } /* Show My Garage / جراجي as text link */ .nav-util-cluster .nav-garage-btn .nav-util-btn__label, .nav-util-cluster .nav-util-btn--garage .nav-util-btn__label, body.is-home-page .nav-util-cluster .nav-garage-btn .nav-util-btn__label, body.is-home-page .nav-util-cluster .nav-util-btn--garage .nav-util-btn__label { display: block !important; margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.1 !important; letter-spacing: 0.01em !important; color: inherit !important; white-space: nowrap !important; text-align: center !important; } .nav-util-cluster .nav-util-btn--garage:hover, .nav-util-cluster .nav-util-btn--garage:focus-visible, .nav-util-cluster .nav-garage-btn:hover, .nav-util-cluster .nav-garage-btn:focus-visible, body.is-home-page .nav-garage-btn:hover { background: transparent !important; border: none !important; color: var(--ws-header-ink) !important; box-shadow: none !important; transform: none !important; } /* ── Cart — navy icon + red badge (mockup) ── */ .nav-util-cluster .nav-util-btn--cart, .nav-util-cluster .nav-cart-btn, .nav-util-cluster .nav-cart-btn.nav-util-btn, body.is-home-page .nav-util-cluster .nav-cart-btn, body.is-home-page .nav-util-cluster .nav-cart-btn.nav-util-btn, body.is-home-page .nav-main-actions .nav-cart-btn { background: transparent !important; border: none !important; color: #002157 !important; box-shadow: none !important; } .nav-util-cluster .nav-util-btn--cart:hover, .nav-util-cluster .nav-util-btn--cart:focus-visible, .nav-util-cluster .nav-cart-btn:hover, .nav-util-cluster .nav-cart-btn:focus-visible, body.is-home-page .nav-util-cluster .nav-cart-btn:hover, body.is-home-page .nav-util-cluster .nav-cart-btn:focus-visible, body.is-home-page .nav-main-actions .nav-cart-btn:hover, body.is-home-page .nav-main-actions .nav-cart-btn:focus-visible { background: transparent !important; border: none !important; color: #001a45 !important; box-shadow: none !important; transform: none !important; } .nav-util-cluster .nav-lang-btn.nav-util-btn, body.is-home-page .nav-util-cluster .nav-lang-btn.nav-util-btn, body.is-home-page .nav-main-actions .nav-lang-btn { min-width: 44px !important; padding: 0 6px !important; } .nav-util-cluster .nav-account.nav-pill-btn, .nav-util-cluster .nav-btn-auth, body.is-home-page .nav-main-actions .nav-account.nav-pill-btn { gap: 0 !important; padding: 0 !important; min-width: 44px !important; } .nav-util-cluster .nav-lang-btn .lang-globe { display: none !important; } .nav-util-cluster .nav-util-btn__flag, body.is-home-page .nav-util-cluster .nav-util-btn__flag { width: 22px !important; height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; border-radius: 2px !important; overflow: hidden !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important; } .nav-util-cluster .nav-util-btn__flag .lang-flag-icon, body.is-home-page .nav-util-cluster .nav-util-btn__flag .lang-flag-icon { width: 22px !important; height: 15px !important; display: block !important; flex-shrink: 0 !important; } /* Hide EN/AR text on desktop — flag (+ chevron) only */ .nav-util-cluster .nav-lang-btn #langBtnLabel, body.is-home-page .nav-util-cluster .nav-lang-btn #langBtnLabel, body.is-home-page .nav-main-actions .nav-lang-btn #langBtnLabel { display: none !important; } .nav-util-cluster .nav-util-btn__chevron, .nav-util-cluster .nav-lang-btn .lang-chevron, body.is-home-page .nav-util-cluster .nav-lang-btn .lang-chevron { display: block !important; width: 10px !important; height: 10px !important; stroke: currentColor !important; flex-shrink: 0 !important; } .nav-util-cluster .nav-util-btn:hover .nav-util-btn__chevron, .nav-util-cluster .nav-lang-btn:hover .lang-chevron { stroke: currentColor !important; } /* Hide util labels on desktop — icons only (ARIA labels remain) */ .nav-util-cluster .nav-util-btn__label, .nav-util-cluster .nav-cart-label, body.is-home-page .nav-util-cluster .nav-util-btn__label, body.is-home-page .nav-util-cluster .nav-cart-label, body.is-home-page .nav-util-cluster .nav-lang-btn #langBtnLabel, body.is-home-page .nav-cart-label, body.is-home-page .nav-main-actions .nav-cart-label { display: none !important; margin: 0 !important; } /* Garage: keep My Garage / جراجي text link visible */ .nav-util-cluster .nav-garage-btn .nav-util-btn__label, .nav-util-cluster .nav-util-btn--garage .nav-util-btn__label, body.is-home-page .nav-util-cluster .nav-garage-btn .nav-util-btn__label, body.is-home-page .nav-util-cluster .nav-util-btn--garage .nav-util-btn__label { display: block !important; margin: 0 !important; } /* Beat shared util-icon display:flex — garage is text-only on desktop */ .nav-util-cluster .nav-util-btn--garage .nav-util-btn__icon, .nav-util-cluster .nav-garage-btn .nav-util-btn__icon, body.is-home-page .nav-util-cluster .nav-util-btn--garage .nav-util-btn__icon, body.is-home-page .nav-util-cluster .nav-garage-btn .nav-util-btn__icon { display: none !important; } /* Outline icons — inherit button text color (+20% vs prior 20/18) */ .nav-util-cluster .nav-util-btn__icon, .nav-util-cluster .nav-pill-icon, .nav-util-cluster .nav-pill-icon.nav-util-btn__icon, body.is-home-page .nav-util-cluster .nav-pill-icon, body.is-home-page .nav-util-cluster .nav-util-btn__icon, body.is-home-page .nav-main-actions .nav-pill-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; border-radius: 0 !important; background: transparent !important; color: inherit !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; } .nav-util-cluster .nav-util-btn__icon svg, .nav-util-cluster .nav-pill-icon svg, body.is-home-page .nav-util-cluster .nav-pill-icon svg, body.is-home-page .nav-main-actions .nav-pill-icon svg { width: 21.6px !important; height: 21.6px !important; stroke: currentColor !important; fill: none !important; } .nav-util-cluster .nav-util-btn--garage .nav-util-btn__icon, body.is-home-page .nav-util-cluster .nav-util-btn--garage .nav-util-btn__icon { width: 26.4px !important; height: 26.4px !important; min-width: 26.4px !important; min-height: 26.4px !important; color: inherit !important; } .nav-util-cluster .nav-util-btn--garage .nav-util-btn__icon svg, body.is-home-page .nav-util-cluster .nav-util-btn--garage .nav-util-btn__icon svg { width: 24px !important; height: 24px !important; fill: currentColor !important; stroke: none !important; } .nav-util-cluster .nav-util-btn--garage .nav-util-btn__icon svg path, body.is-home-page .nav-util-cluster .nav-util-btn--garage .nav-util-btn__icon svg path { fill: currentColor !important; stroke: none !important; } .nav-util-cluster .nav-auth-initials, body.is-home-page .nav-util-cluster .nav-auth-initials, body.is-home-page .nav-main-actions .nav-auth-initials { color: var(--ws-header-icon) !important; background: transparent !important; width: auto !important; height: auto !important; min-width: 0 !important; border-radius: 0 !important; } .nav-util-cluster .nav-garage-status { border-color: #ffffff !important; } .nav-util-cluster .nav-garage-btn .nav-garage-headlight, .nav-util-cluster .nav-garage-btn .nav-garage-headlight-core, .nav-util-cluster .nav-garage-btn .nav-garage-beam, body.is-home-page .nav-util-cluster .nav-garage-btn .nav-garage-headlight, body.is-home-page .nav-util-cluster .nav-garage-btn .nav-garage-headlight-core, body.is-home-page .nav-util-cluster .nav-garage-btn .nav-garage-beam { fill: currentColor !important; stroke: currentColor !important; filter: none !important; opacity: 0.9; } .nav-util-cluster .nav-garage-btn .nav-garage-beam { fill: none !important; } .nav-util-cluster .nav-cart-btn, .nav-util-cluster .nav-cart-btn.nav-util-btn, body.is-home-page .nav-util-cluster .nav-cart-btn, body.is-home-page .nav-main-actions .nav-cart-btn { align-items: center !important; flex-direction: row !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; } html[dir="rtl"] .nav-util-cluster .nav-util-btn, html[dir="rtl"] .nav-util-cluster .nav-lang-wrap, html[dir="rtl"] .nav-main-actions .nav-cart-btn, html[dir="rtl"] .nav-main-actions .nav-garage-btn, html[dir="rtl"] .nav-main-actions .nav-btn-auth, html[dir="rtl"] .nav-main-actions .nav-account, html[dir="rtl"] .nav-main-actions .nav-lang-wrap, html[dir="ltr"] .nav-main-actions .nav-cart-btn, html[dir="ltr"] .nav-main-actions .nav-garage-btn, html[dir="ltr"] .nav-main-actions .nav-btn-auth, html[dir="ltr"] .nav-main-actions .nav-account, html[dir="ltr"] .nav-main-actions .nav-lang-wrap { min-width: 44px !important; justify-self: center !important; } .nav-util-cluster .nav-cart-icon-wrap, .nav-util-cluster .nav-util-btn__icon-wrap, body.is-home-page .nav-util-cluster .nav-cart-icon-wrap, body.is-home-page .nav-cart-icon-wrap { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; line-height: 0 !important; overflow: visible !important; flex-shrink: 0 !important; } /* Cart glyph 44×33 (viewBox 32×24) so basket floor chord = 0.5cm */ .nav-util-cluster .nav-cart-icon-wrap, body.is-home-page .nav-util-cluster .nav-cart-icon-wrap, body.is-home-page .nav-cart-icon-wrap { width: 44px !important; height: 33px !important; } .nav-util-cluster .nav-cart-btn svg, body.is-home-page .nav-util-cluster .nav-cart-btn svg, body.is-home-page .nav-main-actions .nav-cart-btn svg, body.is-home-page .nav-cart-btn svg { width: 44px !important; height: 33px !important; stroke: currentColor !important; fill: none !important; color: inherit !important; stroke-width: 2.75 !important; stroke-linecap: butt !important; stroke-linejoin: miter !important; } /* Icons inherit each button's text color — no blue hover takeover */ .nav-util-cluster .nav-util-btn:hover .nav-util-btn__icon, .nav-util-cluster .nav-util-btn:focus-visible .nav-util-btn__icon, .nav-util-cluster .nav-util-btn--auth:hover .nav-util-btn__icon, .nav-util-cluster .nav-util-btn--auth:focus-visible .nav-util-btn__icon, .nav-util-cluster .nav-btn-auth:hover .nav-pill-icon, .nav-util-cluster .nav-btn-auth:focus-visible .nav-pill-icon { color: inherit !important; } .nav-util-cluster .nav-cart-btn:hover svg, .nav-util-cluster .nav-cart-btn:focus-visible svg, body.is-home-page .nav-util-cluster .nav-cart-btn:hover svg { color: inherit !important; stroke: currentColor !important; fill: none !important; } .nav-util-cluster .nav-garage-btn:hover .nav-util-btn__icon, .nav-util-cluster .nav-garage-btn:focus-visible .nav-util-btn__icon, .nav-util-cluster .nav-util-btn--garage:hover .nav-util-btn__icon { color: inherit !important; } .nav-util-cluster .nav-garage-btn:hover .nav-garage-headlight, .nav-util-cluster .nav-garage-btn:hover .nav-garage-headlight-core, body.is-home-page .nav-util-cluster .nav-garage-btn:hover .nav-garage-headlight, body.is-home-page .nav-util-cluster .nav-garage-btn:hover .nav-garage-headlight-core { fill: currentColor !important; stroke: currentColor !important; } .nav-util-cluster .nav-garage-btn:hover .nav-garage-beam { fill: none !important; stroke: currentColor !important; } /* Cart count — red circular badge top-right (mockup) */ .nav-util-cluster .nav-cart-btn .cart-badge, body.is-home-page .nav-util-cluster .nav-cart-btn .cart-badge, body.is-home-page .nav-main-actions .nav-cart-btn .cart-badge, body.is-home-page .nav-cart-btn .cart-badge, body.catalog-page-open .nav-cart-btn .cart-badge, body.catalog-branch-mode .nav-cart-btn .cart-badge, body:has(#catalogDrawer.open) .nav-cart-btn .cart-badge, html[dir="rtl"] .nav-util-cluster .nav-cart-btn .cart-badge, html[dir="rtl"] body.is-home-page .nav-cart-btn .cart-badge, html[dir="ltr"] .nav-util-cluster .nav-cart-btn .cart-badge, html[dir="ltr"] body.is-home-page .nav-cart-btn .cart-badge { top: -2px !important; inset-inline-start: auto !important; inset-inline-end: auto !important; right: -2px !important; left: auto !important; transform: none !important; width: 18px !important; min-width: 18px !important; height: 18px !important; padding: 0 !important; border-radius: 999px !important; background: #e11d2e !important; color: #ffffff !important; font-size: 10px !important; font-weight: 800 !important; line-height: 18px !important; border: 2px solid #ffffff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .nav-util-cluster .nav-cart-btn svg .nav-cart-wheel, body.is-home-page .nav-util-cluster .nav-cart-btn svg .nav-cart-wheel { fill: currentColor !important; stroke: none !important; } body.is-home-page .nav-cart-btn .cart-badge.bump { animation: home-cart-badge-bump 0.3s ease !important; } body.is-home-page .nav-util-cluster .lang-menu, body.is-home-page .nav-lang-wrap .lang-menu { display: none !important; } .nav-util-cluster .lang-menu, .nav-lang-wrap .lang-menu { background: #ffffff !important; border: 1px solid var(--ws-header-border) !important; border-radius: var(--ws-header-radius) !important; box-shadow: 0 12px 28px rgba(26, 35, 50, 0.12) !important; } .nav-util-cluster .lang-option, .nav-lang-wrap .lang-option { color: var(--ws-header-ink) !important; } .nav-util-cluster .lang-option:hover, .nav-lang-wrap .lang-option:hover { background: rgba(30, 91, 184, 0.06) !important; color: var(--ws-header-blue) !important; } /* Catalog RTL: same bar order as homepage — Shop first from the right when visible */ html[dir="rtl"] body.catalog-page-open .nav-util-cluster, html[dir="rtl"] body.catalog-branch-mode .nav-util-cluster, html[dir="rtl"] body.catalog-drawer-open .nav-util-cluster, html[dir="rtl"] body:has(#catalogDrawer.open) .nav-util-cluster, html[dir="rtl"] body.catalog-drawer-push .nav-util-cluster, html[dir="rtl"] body.is-home-page.catalog-drawer-open .nav-util-cluster, html[dir="rtl"] body.is-home-page.catalog-drawer-push .nav-util-cluster { display: contents !important; } html[dir="rtl"] body.catalog-page-open .nav-main-actions, html[dir="rtl"] body.catalog-branch-mode .nav-main-actions, html[dir="rtl"] body.catalog-drawer-open .nav-main-actions, html[dir="rtl"] body:has(#catalogDrawer.open) .nav-main-actions, html[dir="rtl"] body.catalog-drawer-push .nav-main-actions, html[dir="rtl"] body.is-home-page.catalog-drawer-open .nav-main-actions, html[dir="rtl"] body.is-home-page.catalog-drawer-push .nav-main-actions { display: grid !important; grid-template-columns: minmax(200px, 1fr) auto auto auto auto auto !important; grid-template-areas: "search lang account garage cart shop" !important; align-items: flex-start !important; column-gap: 10px !important; width: 100% !important; direction: ltr !important; } html[dir="rtl"] body.catalog-page-open .nav-trade-cluster, html[dir="rtl"] body.catalog-branch-mode .nav-trade-cluster, html[dir="rtl"] body.catalog-drawer-open .nav-trade-cluster, html[dir="rtl"] body:has(#catalogDrawer.open) .nav-trade-cluster, html[dir="rtl"] body.catalog-drawer-push .nav-trade-cluster { display: contents !important; } html[dir="rtl"] body.catalog-page-open .nav-search-wrap, html[dir="rtl"] body.catalog-branch-mode .nav-search-wrap, html[dir="rtl"] body.catalog-drawer-open .nav-search-wrap, html[dir="rtl"] body:has(#catalogDrawer.open) .nav-search-wrap, html[dir="rtl"] body.catalog-drawer-push .nav-search-wrap { width: auto !important; max-width: none !important; min-width: 0 !important; flex: 1 1 auto !important; } html[dir="rtl"] body.catalog-page-open .nav-shell.nav-main-row, html[dir="rtl"] body.catalog-branch-mode .nav-shell.nav-main-row, html[dir="rtl"] body.catalog-drawer-open .nav-shell.nav-main-row, html[dir="rtl"] body:has(#catalogDrawer.open) .nav-shell.nav-main-row, html[dir="rtl"] body.catalog-drawer-push .nav-shell.nav-main-row { padding-inline-end: 0 !important; padding-right: 0 !important; } html[dir="rtl"] body.catalog-drawer-open .nav-util-cluster .nav-lang-wrap, html[dir="rtl"] body.catalog-drawer-push .nav-util-cluster .nav-lang-wrap, html[dir="rtl"] body:has(#catalogDrawer.open) .nav-util-cluster .nav-lang-wrap, html[dir="rtl"] body.catalog-page-open .nav-util-cluster .nav-lang-wrap { order: 1 !important; margin-inline-start: 0 !important; } html[dir="rtl"] body.catalog-drawer-open .nav-util-cluster .nav-account, html[dir="rtl"] body.catalog-drawer-open .nav-util-cluster .nav-btn-auth, html[dir="rtl"] body.catalog-drawer-push .nav-util-cluster .nav-account, html[dir="rtl"] body.catalog-drawer-push .nav-util-cluster .nav-btn-auth, html[dir="rtl"] body:has(#catalogDrawer.open) .nav-util-cluster .nav-account, html[dir="rtl"] body:has(#catalogDrawer.open) .nav-util-cluster .nav-btn-auth, html[dir="rtl"] body.catalog-page-open .nav-util-cluster .nav-account, html[dir="rtl"] body.catalog-page-open .nav-util-cluster .nav-btn-auth { order: 2 !important; } html[dir="rtl"] body.catalog-drawer-open .nav-util-cluster .nav-garage-btn, html[dir="rtl"] body.catalog-drawer-push .nav-util-cluster .nav-garage-btn, html[dir="rtl"] body:has(#catalogDrawer.open) .nav-util-cluster .nav-garage-btn, html[dir="rtl"] body.catalog-page-open .nav-util-cluster .nav-garage-btn { order: 3 !important; } html[dir="rtl"] body.catalog-drawer-open .nav-util-cluster .nav-cart-btn, html[dir="rtl"] body.catalog-drawer-push .nav-util-cluster .nav-cart-btn, html[dir="rtl"] body:has(#catalogDrawer.open) .nav-util-cluster .nav-cart-btn, html[dir="rtl"] body.catalog-page-open .nav-util-cluster .nav-cart-btn { order: 4 !important; margin-right: 0 !important; margin-inline-end: 0 !important; } body.catalog-page-open .nav-shop-btn, body.catalog-branch-mode .nav-shop-btn, body:has(#catalogDrawer.open) .nav-shop-btn { display: none !important; } /* English (LTR) + catalog open: search fills until 1cm before language */ html[dir="ltr"] body.is-home-page.catalog-page-open .nav-main-actions, html[dir="ltr"] body.is-home-page.catalog-branch-mode .nav-main-actions, html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-main-actions, html[dir="ltr"] body.is-home-page.catalog-drawer-push .nav-main-actions, html[dir="ltr"] body.is-home-page:has(#catalogDrawer.open) .nav-main-actions, html[dir="ltr"] body.catalog-page-open .nav-main-actions, html[dir="ltr"] body.catalog-branch-mode .nav-main-actions, html[dir="ltr"] body.catalog-drawer-open .nav-main-actions, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-main-actions, html[dir="ltr"] body.catalog-drawer-push .nav-main-actions { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; gap: 1cm !important; } html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-shell.nav-main-row, html[dir="ltr"] body.is-home-page.catalog-drawer-push .nav-shell.nav-main-row, html[dir="ltr"] body.is-home-page:has(#catalogDrawer.open) .nav-shell.nav-main-row, html[dir="ltr"] body.catalog-page-open .nav-shell.nav-main-row, html[dir="ltr"] body.catalog-branch-mode .nav-shell.nav-main-row, html[dir="ltr"] body.catalog-drawer-open .nav-shell.nav-main-row, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-shell.nav-main-row, html[dir="ltr"] body.catalog-drawer-push .nav-shell.nav-main-row { padding-inline-end: 0 !important; padding-right: 0 !important; } html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-actions-wrap, html[dir="ltr"] body.is-home-page.catalog-drawer-push .nav-actions-wrap, html[dir="ltr"] body.is-home-page:has(#catalogDrawer.open) .nav-actions-wrap, html[dir="ltr"] body.catalog-page-open .nav-actions-wrap, html[dir="ltr"] body.catalog-branch-mode .nav-actions-wrap, html[dir="ltr"] body.catalog-drawer-open .nav-actions-wrap, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-actions-wrap, html[dir="ltr"] body.catalog-drawer-push .nav-actions-wrap { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; padding-inline-end: 0 !important; margin-inline-end: 0 !important; } html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-trade-cluster, html[dir="ltr"] body.is-home-page.catalog-drawer-push .nav-trade-cluster, html[dir="ltr"] body.is-home-page:has(#catalogDrawer.open) .nav-trade-cluster, html[dir="ltr"] body.catalog-page-open .nav-trade-cluster, html[dir="ltr"] body.catalog-branch-mode .nav-trade-cluster, html[dir="ltr"] body.catalog-drawer-open .nav-trade-cluster, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-trade-cluster, html[dir="ltr"] body.catalog-drawer-push .nav-trade-cluster { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; width: auto !important; } html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-search-wrap, html[dir="ltr"] body.is-home-page.catalog-drawer-push .nav-search-wrap, html[dir="ltr"] body.is-home-page:has(#catalogDrawer.open) .nav-search-wrap, html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-main-actions .nav-search-wrap, html[dir="ltr"] body.is-home-page.catalog-drawer-push .nav-main-actions .nav-search-wrap, html[dir="ltr"] body.catalog-page-open .nav-search-wrap, html[dir="ltr"] body.catalog-branch-mode .nav-search-wrap, html[dir="ltr"] body.catalog-drawer-open .nav-search-wrap, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-search-wrap, html[dir="ltr"] body.catalog-drawer-push .nav-search-wrap { width: auto !important; max-width: none !important; min-width: 0 !important; flex: 1 1 auto !important; } html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-search, html[dir="ltr"] body.is-home-page.catalog-drawer-push .nav-search, html[dir="ltr"] body.is-home-page:has(#catalogDrawer.open) .nav-search, html[dir="ltr"] body.catalog-drawer-open .nav-search, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-search { width: 100% !important; max-width: none !important; } html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-util-cluster, html[dir="ltr"] body.is-home-page.catalog-drawer-push .nav-util-cluster, html[dir="ltr"] body.is-home-page:has(#catalogDrawer.open) .nav-util-cluster, html[dir="ltr"] body.catalog-page-open .nav-util-cluster, html[dir="ltr"] body.catalog-branch-mode .nav-util-cluster, html[dir="ltr"] body.catalog-drawer-open .nav-util-cluster, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-util-cluster, html[dir="ltr"] body.catalog-drawer-push .nav-util-cluster { display: flex !important; flex-direction: row !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-end !important; gap: 2mm !important; margin-left: auto !important; margin-inline-start: auto !important; margin-right: 0 !important; margin-inline-end: 0 !important; min-width: max-content !important; } /* Pin util icons to the right edge of the bar (Cart flush right) */ html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-main-actions, html[dir="ltr"] body.is-home-page.catalog-drawer-push .nav-main-actions, html[dir="ltr"] body.is-home-page:has(#catalogDrawer.open) .nav-main-actions, html[dir="ltr"] body.catalog-page-open .nav-main-actions, html[dir="ltr"] body.catalog-branch-mode .nav-main-actions, html[dir="ltr"] body.catalog-drawer-open .nav-main-actions, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-main-actions, html[dir="ltr"] body.catalog-drawer-push .nav-main-actions { justify-content: flex-start !important; } html[dir="ltr"] body.is-home-page.catalog-drawer-open nav:not(.mob-bottom-bar), html[dir="ltr"] body.is-home-page.catalog-drawer-push nav:not(.mob-bottom-bar), html[dir="ltr"] body.is-home-page:has(#catalogDrawer.open) nav:not(.mob-bottom-bar), html[dir="ltr"] body.catalog-drawer-open nav:not(.mob-bottom-bar), html[dir="ltr"] body:has(#catalogDrawer.open) nav:not(.mob-bottom-bar) { padding-inline-end: 0 !important; padding-right: 0 !important; } /* Order (left→right): Language · Account · Garage · Cart ⇒ Cart at far right */ html[dir="ltr"] body.catalog-page-open .nav-util-cluster .nav-lang-wrap, html[dir="ltr"] body.catalog-branch-mode .nav-util-cluster .nav-lang-wrap, html[dir="ltr"] body.catalog-drawer-open .nav-util-cluster .nav-lang-wrap, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-util-cluster .nav-lang-wrap, html[dir="ltr"] body.catalog-drawer-push .nav-util-cluster .nav-lang-wrap, html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-util-cluster .nav-lang-wrap, html[dir="ltr"] body.is-home-page.catalog-drawer-push .nav-util-cluster .nav-lang-wrap { order: 1 !important; transform: none !important; margin-inline-start: 0 !important; } html[dir="ltr"] body.catalog-page-open .nav-util-cluster .nav-account, html[dir="ltr"] body.catalog-page-open .nav-util-cluster .nav-btn-auth, html[dir="ltr"] body.catalog-branch-mode .nav-util-cluster .nav-account, html[dir="ltr"] body.catalog-branch-mode .nav-util-cluster .nav-btn-auth, html[dir="ltr"] body.catalog-drawer-open .nav-util-cluster .nav-account, html[dir="ltr"] body.catalog-drawer-open .nav-util-cluster .nav-btn-auth, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-util-cluster .nav-account, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-util-cluster .nav-btn-auth, html[dir="ltr"] body.catalog-drawer-push .nav-util-cluster .nav-account, html[dir="ltr"] body.catalog-drawer-push .nav-util-cluster .nav-btn-auth, html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-util-cluster .nav-account, html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-util-cluster .nav-btn-auth { order: 2 !important; transform: none !important; } html[dir="ltr"] body.catalog-page-open .nav-util-cluster .nav-garage-btn, html[dir="ltr"] body.catalog-branch-mode .nav-util-cluster .nav-garage-btn, html[dir="ltr"] body.catalog-drawer-open .nav-util-cluster .nav-garage-btn, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-util-cluster .nav-garage-btn, html[dir="ltr"] body.catalog-drawer-push .nav-util-cluster .nav-garage-btn, html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-util-cluster .nav-garage-btn { order: 3 !important; transform: none !important; } html[dir="ltr"] body.catalog-page-open .nav-util-cluster .nav-cart-btn, html[dir="ltr"] body.catalog-branch-mode .nav-util-cluster .nav-cart-btn, html[dir="ltr"] body.catalog-drawer-open .nav-util-cluster .nav-cart-btn, html[dir="ltr"] body:has(#catalogDrawer.open) .nav-util-cluster .nav-cart-btn, html[dir="ltr"] body.catalog-drawer-push .nav-util-cluster .nav-cart-btn, html[dir="ltr"] body.is-home-page.catalog-drawer-open .nav-util-cluster .nav-cart-btn { order: 4 !important; transform: none !important; margin-left: 0 !important; margin-inline-end: 0 !important; margin-right: 0 !important; } /* ── Second header row: SHOP NOW + primary links (under logo) ── */ .nav-shop-btn, body.is-home-page .nav-shop-btn { display: none !important; } .nav-shell.nav-links-row, body.is-home-page .nav-shell.nav-links-row, html[dir="ltr"] .nav-shell.nav-links-row, html[dir="rtl"] .nav-shell.nav-links-row { display: flex !important; align-items: center; justify-content: flex-start; gap: 8px; height: calc(var(--nav-total-h) - var(--nav-main-h)); min-height: calc(var(--nav-total-h) - var(--nav-main-h)); max-height: calc(var(--nav-total-h) - var(--nav-main-h)); width: 100% !important; max-width: none !important; flex: 0 0 auto !important; border-top: none; background: #ffffff; overflow: visible; /* Above row-1 util/logo stacking (z-index up to 1020) so they cannot steal row-2 clicks */ position: relative; z-index: 1030; } html[dir="ltr"] .nav-shell.nav-links-row { padding-inline-start: 20px; padding-inline-end: 24px; } html[dir="rtl"] .nav-shell.nav-links-row { padding-inline-start: 24px; padding-inline-end: 20px; } .nav-links-shop-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 3px; height: 31px; padding: 0 calc(6px + 0.25cm); margin-inline-end: calc(14px - 0.25cm); border: none; border-radius: 0; background: var(--ws-cart-badge); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; cursor: pointer; pointer-events: auto; transition: background var(--ws-header-transition); } .nav-links-shop-btn:hover, .nav-links-shop-btn:focus-visible { background: #c41828; } .nav-links-shop-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nav-links-item { display: inline-flex; align-items: center; height: 46px; padding: 0 16px; border-radius: var(--ws-header-radius); color: #0d3a7a; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; text-decoration: none; transition: color var(--ws-header-transition), background var(--ws-header-transition); } .nav-links-item--caps { text-transform: uppercase; } .nav-links-item--top-selling { gap: 6px; } .nav-top-selling-flame { width: 19.5px; height: 19.5px; flex: 0 0 auto; display: block; color: #e85d04; } .nav-links-item--top-selling:hover .nav-top-selling-flame, .nav-links-item--top-selling:focus-visible .nav-top-selling-flame { color: #f04800; } .nav-links-item:hover, .nav-links-item:focus-visible { color: #0a1946; background: rgba(30, 91, 184, 0.07); } /* * Catalog open: cancel storefront/light-sections header regressions. * Those rules (1) strip logo translateY so the mark sits under the white * links row (z-index 1030), and (2) re-center/shrink the main row. * Keep home header behavior; do not touch util icon-only / RTL grid. */ body.catalog-page-open .nav-main, body.catalog-branch-mode .nav-main, body.catalog-drawer-open .nav-main, body.catalog-drawer-push .nav-main, body:has(#catalogDrawer.open) .nav-main { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; height: var(--nav-total-h) !important; min-height: var(--nav-total-h) !important; max-height: var(--nav-total-h) !important; overflow: visible !important; } body.catalog-page-open .nav-shell.nav-main-row, body.catalog-branch-mode .nav-shell.nav-main-row, body.catalog-drawer-open .nav-shell.nav-main-row, body.catalog-drawer-push .nav-shell.nav-main-row, body:has(#catalogDrawer.open) .nav-shell.nav-main-row { align-items: flex-start !important; height: var(--nav-main-h) !important; min-height: var(--nav-main-h) !important; max-height: var(--nav-main-h) !important; overflow: visible !important; } body.catalog-page-open .nav-logo, body.catalog-branch-mode .nav-logo, body.catalog-drawer-open .nav-logo, body.catalog-drawer-push .nav-logo, body:has(#catalogDrawer.open) .nav-logo { height: auto !important; max-height: none !important; max-width: min(280px, 36vw) !important; align-self: flex-start !important; align-items: flex-start !important; overflow: visible !important; z-index: 1040 !important; } body.catalog-page-open .nav-logo-img, body.catalog-branch-mode .nav-logo-img, body.catalog-drawer-open .nav-logo-img, body.catalog-drawer-push .nav-logo-img, body:has(#catalogDrawer.open) .nav-logo-img { height: var(--nav-logo-h) !important; max-height: var(--nav-logo-h) !important; width: auto !important; max-width: 100% !important; filter: none !important; opacity: 1 !important; visibility: visible !important; /* Same lift as home — keeps mark in the main row, above links-row */ transform: translateY(-38px) !important; } body.catalog-page-open .nav-shell.nav-links-row, body.catalog-branch-mode .nav-shell.nav-links-row, body.catalog-drawer-open .nav-shell.nav-links-row, body.catalog-drawer-push .nav-shell.nav-links-row, body:has(#catalogDrawer.open) .nav-shell.nav-links-row { display: flex !important; flex: 0 0 auto !important; width: 100% !important; height: calc(var(--nav-total-h) - var(--nav-main-h)) !important; min-height: calc(var(--nav-total-h) - var(--nav-main-h)) !important; max-height: calc(var(--nav-total-h) - var(--nav-main-h)) !important; } } /* * Global nav{} in index.html is position:fixed — that also hits *