/* ========================================================================== Header ========================================================================== */ .mainhead { padding: 22px 0; border-bottom: 1px solid #f2f2f2; } .mainhead__inner { display: flex; align-items: center; gap: 40px; } .brand { flex: 0 0 auto; } /* Extra .woocommerce-page selector: WooCommerce's `.woocommerce-page img { height:auto }` otherwise outweighs this and collapses the SVG to 0px. */ .brand__logo, .woocommerce-page .brand__logo { height: 64px; width: auto; } .nav { display: flex; align-items: center; gap: 36px; flex: 1 1 auto; } .nav a { color: var(--ink); font-weight: 500; /* Medium */ font-size: 18px; white-space: nowrap; } .nav a:hover { color: var(--orange); } /* Scoped to the header — WordPress adds a `search` class to on results pages, so a bare `.search` rule would turn the whole page into a flex row. */ .mainhead .search { flex: 0 0 auto; display: flex; align-items: center; } .mainhead .search input { width: 340px; max-width: 40vw; border: none; outline: none; background: var(--search-bg); color: var(--muted); font-family: inherit; font-size: 18px; padding: 16px 26px; border-radius: 999px; } .mainhead .search input::placeholder { color: var(--muted); } /* Burger toggle. Hidden on desktop; the mobile @media in responsive.css flips it to inline-flex. Declared HERE (loads early) so that later mobile override wins the cascade — the reason it was moved out of promos.css (loaded last). */ .nav-toggle { display: none; }