/* Custom desktop header layout. Groups the logo + nav links together on the left, and the search icon (plus the existing account/cart/localization icons) together on the right. Scoped to the same 990px desktop breakpoint the theme already uses for the inline header; mobile keeps its existing drawer-menu layout. */ @media screen and (min-width: 990px) { .header.header--top-center { grid-template-areas: "heading navigation . left-icons icons"; grid-template-columns: auto auto 1fr auto auto; align-items: center; column-gap: 1.5rem; } .header.header--top-center .header__inline-menu { justify-self: start; margin-top: 0; } .header .header__search { grid-area: left-icons; justify-self: end; } /* Sticky/scrolled compact header: past the scroll threshold (see assets/js/header-scroll.js, which toggles .is-header-scrolled on ), swap the nav row + search icon for a single inline search bar spanning the same grid space (columns 2-4: navigation, the 1fr gap, left-icons). The normal (unscrolled) header is untouched, and the account/cart/wishlist icons column is untouched in both states. Mobile (below 990px) never shows this bar, scrolled or not — the hidden-by-default rule for it lives outside this media block. */ body.is-header-scrolled .header.header--top-center .header__inline-menu, body.is-header-scrolled .header.header--top-center .header__search { display: none; } body.is-header-scrolled .header.header--top-center .header__sticky-search { display: flex; grid-column: 2 / 5; } } .header__sticky-search { display: none; align-items: center; gap: 0.8rem; width: 100%; max-width: 62rem; margin: 0 auto; padding: 0.9rem 1.6rem; border-radius: 3rem; background-color: rgba(var(--color-foreground), 0.05); border: 0.1rem solid rgba(var(--color-foreground), 0.1); } .header__sticky-search-icon, .header__sticky-search-extra { display: flex; align-items: center; gap: 1rem; color: rgb(var(--color-foreground)); flex-shrink: 0; } .header__sticky-search-icon svg, .header__sticky-search-extra svg { width: 1.8rem; height: 1.8rem; } .header__sticky-search-input { flex: 1 1 auto; min-width: 0; border: none; background: none; padding: 0; font-size: 1.5rem; color: rgb(var(--color-foreground)); } .header__sticky-search-input::placeholder { color: rgba(var(--color-foreground), 0.55); } .header__sticky-search-input:focus { outline: none; } /* Wishlist icon: sits to the right of the cart icon in header__icons. base.css gives .header__icon--cart a -1.2rem right margin so it sits flush with the page edge as the last icon in the row; now that the wishlist icon follows it, move that flush-edge margin to the new last icon and let the cart icon use normal spacing. */ .header__icon--cart { margin-right: 0; } .header__icon--wishlist { margin-right: -1.2rem; } /* "Shop" style nav dropdowns (header__submenu): re-themed to the site's own default cream/plum palette (color-scheme-1's own background + foreground tokens) instead of the low-contrast solid-purple-on-purple panel it had before. Scoped to .header__submenu so the footer and utility bar's separate dark-maroon override of this same shared color-scheme class (see footer-redesign.css / utility-bar-redesign.css) are untouched, and so no other popup (search, cart, localization) that reuses the shared --popup-* tokens is affected. Menu structure, links, font family/size and open/close behavior are unchanged — only colors, spacing and a subtle shadow/radius are added. */ .header__submenu.color-scheme-bab227d5-051e-4892-bcdf-498f74ceea0e { --color-background: 244, 244, 243; --gradient-background: #f4f4f3; --color-foreground: 107, 10, 107; --color-shadow: 16, 57, 72; } .header__submenu.color-scheme-bab227d5-051e-4892-bcdf-498f74ceea0e.global-settings-popup { border-radius: 1.2rem; border-color: rgba(107, 10, 107, 0.14); box-shadow: 0 1.8rem 4rem rgba(16, 57, 72, 0.18), 0 0.4rem 1rem rgba(16, 57, 72, 0.08); overflow: hidden; } .header__submenu.color-scheme-bab227d5-051e-4892-bcdf-498f74ceea0e .header__menu-item { padding: 1rem 2.2rem; transition: background-color var(--duration-short, 0.2s) ease, color var(--duration-short, 0.2s) ease; } .header__submenu.color-scheme-bab227d5-051e-4892-bcdf-498f74ceea0e .header__menu-item:hover { color: rgb(187, 15, 15); background-color: rgba(107, 10, 107, 0.06); } .header__submenu.color-scheme-bab227d5-051e-4892-bcdf-498f74ceea0e .header__submenu { background-color: rgba(107, 10, 107, 0.04); }