/*
 * Single-tree, mobile-first header/nav rebuild.
 * Loaded last (after mobile.css) so it wins cascade ties against legacy rules
 * that still exist on other pages sharing .topbar/.cart-dropdown/.searchform etc.
 * Breakpoints align with the Bootstrap 3 grid already in use: 768 / 992 / 1200.
 */

/*
 * mobile.css's generic ".menu .dropdown .dropdown-menu li a span{position:
 * absolute;right:10px}" rule (meant for the chevron icon spans on parent
 * category rows) also matches .popm ("Popular" badge spans in the drill-down
 * submenu), pulling it out of flow and pinning it over the category text
 * instead of beside it. Give the link a flex row instead and let the badge
 * sit in normal flow.
 */
.sub-menu.dropdown-menu li.top a,
#new_dropdown_area li.top a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* Match #new_dropdown_area's existing 11px side padding (from mobile.css) so
 * drill-down rows line up with the top-level category rows instead of
 * sitting flush against the panel edge. */
.sub-menu.dropdown-menu li.top a {
	padding-left: 11px;
	padding-right: 11px;
}

/* mobile.css's "#new_dropdown_area .top.dropdown > a, #sub-menu .top.dropdown
 * > a{font-family:'muller_narrowlight'}" also targeted the old shared
 * id="sub-menu" — now dead for the same reason as the ul padding above, so
 * submenu rows fall back to a heavier font. Match the main menu explicitly. */
.sub-menu.dropdown-menu .top.dropdown > a {
	font-family: 'muller_narrowlight';
}

.popm {
	position: static !important;
	/* responsive.css's companion rule for the same span selector sets
	 * "top:50%;transform:translateY(-50%)" to vertically center an
	 * absolutely-positioned chevron — with position forced back to static
	 * that transform still applies and shifts the badge upward, so cancel it. */
	transform: none !important;
	flex: 0 0 auto;
}

/*
 * Not header/nav, but found while tracking down the reported "gap" around the
 * category page's hero banner: styles.min.css has an overly broad
 * ".content img{object-fit:contain}" rule (meant for a different page's
 * "our story"/"looking at" image sections) that also matches the
 * .category-hero-slider banner, since it too lives inside .content. The
 * banner's slide wrapper stretches the <img> to a fixed 300px height, and
 * object-fit:contain then letterboxes the (very wide, 1280x300) source
 * image inside that box instead of filling it — the empty letterbox space
 * is what reads as a gap above/below the picture, and grows/shrinks as the
 * box's width (and therefore its width:height ratio) changes on resize.
 * cover crops to fill instead, matching how every other fixed-height banner
 * image on this site is already styled (e.g. styles.min.css's own
 * .c_study_img img{object-fit:cover}).
 */
.category-hero-slider img {
	object-fit: cover;
	/* Default object-position (50% 50%) centers the crop, which on narrow
	 * viewports cuts in evenly from both sides of this wide (1280x300)
	 * source image. Anchor to the left edge instead so the crop only ever
	 * eats into the right side as the box narrows. */
	object-position: left center;
}

/* ---------- Header bar layout (base = mobile) ---------- */

.site-header {
	/* !important because a legacy header{margin:24px 0 0!important} rule
	   (responsive.css) otherwise wins regardless of specificity. */
	margin: 0 !important;
}

/*
 * mobile.css also reserves .home-page .content{padding-top:70px} at
 * <=991px — space meant for the old absolutely-positioned floating nav bar
 * to sit over. That nav bar is no longer position:absolute, so this is now
 * just an empty gap between the search row and the page's first section.
 */
@media (max-width: 991px) {
	.home-page .content {
		padding-top: 16px;
	}
}

/*
 * Same story on non-homepage pages: mobile.css has two competing
 * .breadcrumbs{margin-top:30px/45px} rules at <=912px, both reserving space
 * for the old floating nav bar. Also dead weight now — remove entirely
 * (unlike .home-page .content above, which keeps its 16px on purpose).
 */
@media (max-width: 912px) {
	.not-home-page .breadcrumbs {
		margin-top: 0 !important;
	}
}

/*
 * styles.css (a pre-existing vendor/site stylesheet outside this rebuild's file
 * list, loaded before header.css) pulls .menu to position:absolute at <=960px —
 * a mechanism the old short mobile header tree relied on so the absolutely
 * positioned nav bar wouldn't cover it. The new single, taller header tree
 * doesn't use that trick, so it must be neutralized or the nav bar overlaps
 * the header content.
 */
@media (max-width: 991px) {
	.menu.menuextra {
		position: static !important;
	}
}

/*
 * styles.css also forces .menu-bar .pull-left.dropdown{clear:left} at <=960px,
 * which was tuned to stack the old mobile drawer's trigger vertically. In the
 * rebuilt header this makes every top-level nav item (Popular/New/Express
 * range/Collections) drop to its own line instead of staying in one row.
 */
@media (max-width: 991px) {
	.menu-bar .pull-left.dropdown {
		clear: none !important;
	}
}

/*
 * responsive.css also forces .menu .menu-bar .pull-left{width:50%} at <=991px,
 * tuned for the old 2-item mobile nav-bar. With five top-level nav items this
 * wraps them into a ragged 2-column grid instead of a single row.
 */
@media (max-width: 991px) {
	.menu .menu-bar .pull-left {
		width: auto !important;
	}
}

/*
 * .menu-bar's items (.pull-left x5, .pull-right) are float-based. Once their
 * combined width exceeds the bar, the float:right item (Contact us/About us)
 * drops to its own line, making the blue background grow taller and split
 * unevenly. Switch to a nowrap flex row so the bar always stays one line tall
 * and matches the background height; .pull-right still sits at the far right
 * via margin-left:auto instead of float:right.
 */
/*
 * .menu.menuextra also has a fixed height:38px (with box-sizing:border-box
 * and padding:10px, leaving only 18px of actual content room). The nav
 * buttons/links need ~38px to render at their real font-size + padding, so
 * the content overflows straight past the bottom of the blue background box
 * (overflow:visible) — the last ~10px of text sits over plain white page
 * background instead of blue, which is exactly the "not aligned" seam at
 * the bottom of the bar.
 *
 * On desktop that content naturally settles at ~37.7px tall with zero bar
 * padding. On mobile, mobile.css's "@media(max-width:568px) .menuextra.menu
 * {padding:15px 10px 17px 0!important}" (asymmetric, left over from the old
 * floating-nav-bar era) inflates it to 58px instead — a visibly different
 * bar height depending on viewport. Pin it to one explicit height everywhere
 * and zero that padding so mobile's shorter content (logo/hamburger/cart,
 * each <=30px) centers within the same bar the nav links use on desktop.
 *
 * .container > .row > .col-xs-12 sit between this and .menu-bar as plain
 * (non-flex) Bootstrap grid blocks, so on their own they wouldn't stretch or
 * center inside the now-fixed-height bar — mobile's shorter content would
 * just sit flush at the top instead. display:flex + align-items:center here
 * centers that whole chain regardless of its own content height. This does
 * NOT need a width override on .container to work — align-items:center only
 * governs the cross (vertical) axis, so .container keeps using its own
 * Bootstrap width (750/970/1170px, centered) as its flex-basis on the main
 * axis, same as the header row above it. (An earlier width:100% override
 * here defeated that, stretching the bar's content full-bleed instead of
 * matching the header's width — removed.)
 */
.menu.menuextra {
	height: 44px !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
}

/* Extra room specifically where .menu-bar-mobile-logo (the alternate logo, see the 767px block below) replaces the desktop nav links. */
@media (max-width: 767px) {
	.menu.menuextra {
		height: 56px !important;
	}
}

.menu .menu-bar {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	/*
	 * No overflow-x here on purpose: setting overflow-x alone makes the
	 * browser auto-compute overflow-y as auto too (per the CSS overflow
	 * spec), which silently clips anything taller than the row — including
	 * the mobile logo. Horizontal overflow is already prevented by hiding
	 * .pull-right before it would need to wrap/scroll (see below).
	 */
}

.menu .menu-bar .pull-left {
	float: none;
	flex: 0 0 auto;
}

.menu .menu-bar .pull-right {
	float: none;
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	align-items: center;
}

/*
 * .dropdown-toggle items (Popular/New/Express range/Collections) get
 * padding:2px 10px from header.php's inline <style>, making them 30px tall
 * and centered in the bar. .nav-right a (Contact us/About us) has no such
 * padding — only ~22px tall — so its text sits a couple of px off-center
 * from the rest of the row. Match the padding so both groups align exactly.
 */
.menu .nav-right li a {
	display: inline-block;
	padding: 2px 0;
}

.menu .menu-bar .nav-right {
	margin-top: 0;
}

/*
 * Below ~700px the five left-hand nav items plus "Contact us | About us" no
 * longer both fit on one line even without wrapping — the nowrap fix above
 * would otherwise force a horizontal scrollbar. Hide the least-essential
 * item (Contact us/About us) before that point instead of scrolling.
 */
@media (max-width: 699px) {
	.menu .menu-bar .pull-right {
		display: none;
	}
}

/*
 * Mobile nav-bar logo + call/cart cluster (menu.php), hidden by default —
 * only shown below 768px, replacing the equivalent .site-header elements
 * (which move to a search-only row at that width; see the 767px block below).
 */
.menu-bar-mobile-logo,
.menu-bar-mobile-actions {
	display: none;
}

@media (max-width: 767px) {
	.menu-bar-mobile-logo {
		display: inline-flex;
		align-items: center;
		align-self: stretch;
		margin-left: 2px;
		line-height: 0;
	}

	.menu-bar-mobile-logo img {
		display: block;
		width: auto;
		height: auto;
		max-height: 24px;
	}

	.menu-bar-mobile-actions {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-left: auto;
		padding-right: 4px;
	}

	/*
	 * Both icons are now Font Awesome glyphs (fa-phone, fa-shopping-cart),
	 * so a single shared font-size keeps them consistently sized/weighted —
	 * no more raster-image-vs-glyph size mismatch to compensate for.
	 *
	 * Height stays 48px (touch-target recommendation) but width is
	 * narrower — at 48px wide with 0 gap between them the two 22px glyphs
	 * still had ~26px of padding-driven space between them; narrowing the
	 * box tightens that visual gap directly since the glyph itself doesn't
	 * shrink.
	 */
	.menu-bar-mobile-call,
	.menu-bar-mobile-cart {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		width: 32px;
		height: 48px;
		font-size: 22px;
		line-height: 1;
	}

	/*
	 * .menu-bar-mobile-cart also carries the shared .cart-page-link class
	 * (used by the desktop cart icon too, sized 48x48 there), which is a
	 * same-specificity, later-in-file selector that was winning the width
	 * back to 48px here. Two classes together beats either alone.
	 */
	.menu-bar-mobile-cart.cart-page-link {
		width: 32px;
	}

	/*
	 * At this width the mobile cart badge sits over a solid blue background
	 * (not white like the desktop header), so give it a light border to keep
	 * it legible against the same red fill.
	 */
	.menu-bar-mobile-cart .items-count {
		border: 1px solid #fff;
	}

	/* Desktop header row collapses to search-only; logo/contact/cart move
	   into the nav bar above instead. !important because a later, equal-
	   specificity, unconditional .site-header__contact.info{display:flex}
	   rule further down this file would otherwise win on source order. */
	.site-header .site-header__logo,
	.site-header .site-header__contact.info,
	.site-header .site-header__actions {
		display: none !important;
	}

	.site-header .site-header__search.form-block {
		flex: 1 1 100%;
	}

	/*
	 * On mobile this row holds only the search bar (logo/contact/actions
	 * moved into the nav bar above), so the generous 20px padding meant for
	 * the full desktop row is excessive here — tighten it.
	 */
	.site-header .site-header__bar.topbar {
		padding: 8px 0;
	}

	/*
	 * Non-home pages should have zero space between the search row and the
	 * breadcrumb/content below it; home page keeps the 8px on both sides.
	 * body carries both "home-page" and "not-home-page" together on the
	 * homepage (a pre-existing template quirk), so :not(.home-page) is the
	 * only reliable way to scope this to non-home pages.
	 */
	body:not(.home-page) .site-header .site-header__bar.topbar {
		padding-bottom: 0;
	}

	/*
	 * .site-header and .menu.menuextra are plain block-level siblings (they
	 * come from two separately-included files), so putting the nav bar
	 * visually above the search row needs an actual flex reorder, not just
	 * DOM order. .site-header-menu-group wraps both (see header.php/menu.php)
	 * purely so this reorder can happen without touching page content below.
	 */
	.site-header-menu-group {
		display: flex;
		flex-direction: column;
	}

	.site-header-menu-group .site-header {
		order: 2;
	}

	.site-header-menu-group .menu.menuextra {
		order: 1;
	}
}

/*
 * Legacy .topbar{margin-top:...!important} rules (responsive.css, mobile.css)
 * were tuned to pull the old absolutely-positioned mobile tree up under the
 * floating nav bar. .site-header__bar keeps the .topbar class for CSS
 * compatibility elsewhere, so those negative-margin hacks still match it and
 * need neutralizing now that the header flows normally.
 */
.site-header .topbar {
	margin-top: 0 !important;
}

/*
 * Legacy header .form-block{margin-top:62px/110px!important} rules (mobile.css)
 * pushed the search form down to clear the old floating absolute nav bar.
 * No longer applicable now that .menu flows normally in the document.
 */
.site-header .form-block {
	margin-top: 0 !important;
}

.site-header .site-header__bar.topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-top: 0;
	/* padding is set once, above (search "tighten it") — a duplicate
	 * "padding:20px 0" used to live here and, being later in the file,
	 * won the cascade tie against that earlier, deliberate 8px rule. */
}

/*
 * .menu.menuextra also carries a legacy margin-top:30px on top of the header
 * bar's own bottom padding, making the gap below the header row (38px) much
 * larger than the gap above it (previously just 8px of padding). The bar's
 * own padding-bottom already provides breathing room before the nav bar, so
 * drop this extra margin and let padding:20px 0 above give equal space on
 * both sides.
 */
.menu.menuextra {
	margin-top: 0 !important;
}

.site-header .site-header__logo.logo-block {
	flex: 0 0 auto;
	order: 1;
	min-width: 0;
	/* Legacy .logo-block{margin-top:-15px} pulled the logo up to compensate
	   for the old header's fixed height. Not applicable to this flex row. */
	margin-top: 0 !important;
}

.site-header .site-header__logo.logo-block a {
	display: block;
}

/*
 * responsive.css sets header .logo-block img{width:250px!important;height:73px}
 * — a fixed, non-proportional height. Whenever something else (a global
 * img{max-width:100%} rule, or this flex row running out of space) shrinks
 * the rendered width, the height stays pinned at 73px and the logo squishes.
 * Force both dimensions to scale together from a single max-width cap.
 */
.site-header .site-header__logo.logo-block img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 200px;
	max-height: 60px;
	vertical-align: middle;
}

.site-header .site-header__actions {
	flex: 0 0 auto;
	order: 4;
	margin-left: 0;
}

.site-header .site-header__search.form-block {
	order: 2;
	flex: 1 1 100%;
	width: 100%;
}

.site-header .site-header__search .searchform {
	position: relative;
	display: flex;
	width: 100%;
}

.site-header .site-header__search .searchform input[type="text"],
.site-header .site-header__search .searchform button[type="submit"] {
	/* Legacy responsive.css pulls these to position:absolute with a fixed
	   737px input width, which collapses .searchform's flow height in the new
	   flex layout and lets it overlap the elements below it. Keep them in-flow. */
	position: static;
	right: auto;
	top: auto;
	margin-top: 0;
}

.site-header .site-header__search .searchform input[type="text"] {
	flex: 1 1 auto;
	width: 100%;
	/*
	 * !important because several legacy rules (styles.min.css's
	 * .cart_changes .form-control, responsive.css's header .searchform
	 * input[type="text"] at <=800px) set padding-left:0!important — a plain
	 * declaration here loses to those regardless of specificity.
	 */
	padding-left: 14px !important;
	padding-right: 14px !important;
	/* Was ~43px from its own vertical padding — match the submit button's
	   48px touch-target height so the two line up instead of the button
	   poking out below the input. */
	min-height: 48px;
	box-sizing: border-box;
}

.site-header .site-header__search .searchform button[type="submit"] {
	flex: 0 0 auto;
	/* Was ~47x44 from its own padding — round up to the 48px touch-target minimum. */
	min-width: 48px;
	min-height: 48px;
}

.site-header .site-header__contact.info {
	order: 3;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* Below 768px: only a tap-to-call icon, full phone/email text is hidden */
.site-header .site-header__contact .site-header__contact-text {
	display: none;
}

.site-header .site-header__contact .tel_text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
}

.site-header .site-header__actions .option {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Cart: relative/absolute instead of pixel-pinned fixed ---------- */

.site-header .cart-button {
	position: relative;
	/* styles.min.css's ".no-border.cart-button{padding:10px}" pushes the
	 * cart icon down and right inside its own li box instead of the flex
	 * row centering it like its siblings, and (at >=992px) unbalances the
	 * divider added between it and phone/email. */
	padding: 0;
}

/*
 * Not scoped to .site-header — the mobile nav bar's compact cart link
 * (menu.php, outside .site-header) reuses these same classes, so this
 * also covers .menu-bar-mobile-cart's 48x48 sizing above (same value,
 * harmless overlap). 48x48 is the standard touch-target size; the desktop
 * .site-header cart previously had no explicit box, just the bare icon
 * glyph (36x34) as its clickable area.
 */
.cart-page-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
}

/*
 * ".items-count" alone loses the cascade to legacy ".cart-page-link
 * .items-count" rules (styles.min.css, responsive.css) — those are two
 * classes deep (0,2,0) versus this bare one-class selector (0,1,0), so
 * their -20px/-25px offsets won regardless of this file loading last.
 * Match that specificity so the tighter badge position actually applies.
 */
.cart-page-link .items-count,
.items-count {
	position: absolute;
	top: -6px;
	right: -6px;
	left: auto;
	background: #c70047;
	height: 15px;
	width: 15px;
	color: #fff;
	text-align: center;
	line-height: 1.5;
	border-radius: 50%;
	font-size: 10px;
	z-index: 9;
}

.site-header .cart-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	width: min(340px, 92vw);
	max-width: 92vw;
	/*
	 * The homepage hero slider (.rslides) gives its active <li> an inline
	 * z-index:100 for its crossfade effect, in the same stacking context as
	 * this dropdown — 20 lost to it, burying the close button under the
	 * slide image where clicks couldn't reach it. 1001 clears both that and
	 * Bootstrap's .dropdown-menu default (1000) used by the Collections nav.
	 */
	z-index: 1001;
}

/*
 * styles.min.css's ".main_cart:after{right:87px}" (the upward-pointing
 * caret) sits it ~79px left of the cart icon's actual center now that the
 * dropdown is right-anchored under the icon (above) instead of pinned by
 * the old fixed-offset layout it was tuned for. Re-center it under the icon.
 */
.site-header .cart-dropdown .main_cart::after {
	right: 8px;
}

/*
 * styles.min.css's "section.main_cart{margin-top:42px}" leaves a ~54px dead
 * gap between the cart icon and the visible popup box (on top of the
 * dropdown already being anchored flush under the icon) — left over from
 * when the dropdown itself wasn't positioned this close. Just enough margin
 * for the upward caret above to stay visible.
 */
.site-header .cart-dropdown .main_cart {
	margin-top: 12px;
}

/* ---------- Off-canvas slide animation (replaces .w3-animate-left/right) ---------- */

.w3-animate-left,
.w3-animate-right {
	position: relative;
}

/* ---------- Menu trigger (merged #menuToggle / #menuToggle1) ---------- */

.menu-trigger__label {
	display: none;
}

#menuToggle {
	display: flex;
	align-items: center;
	justify-content: center;
	/* display:flex collapses the plain whitespace text node between the
	   icon and .menu-trigger__label (visible at >=768px) that normal inline
	   flow used to render as a space, pressing them together. */
	gap: 8px;
}

/*
 * 48px minimum touch target, mobile only (icon-only state, touch-primary).
 * At >=768px the button also carries a pre-existing 4px top/bottom margin
 * (from Bootstrap's .btn/.dropdown-toggle, unrelated to this rebuild) that
 * this rule doesn't account for — applying it unscoped made the button's
 * total box (48 + 4 + 4 = 56px) taller than the blue nav bar's own 44px
 * background, so the label/other nav links overflowed past the bottom of
 * the bar's blue background on desktop. Desktop already had a working,
 * appropriately-sized button before touch targets were a concern here.
 */
@media (max-width: 767px) {
	#menuToggle {
		min-width: 48px;
		min-height: 48px;
	}
}

/* ---------- Nav drawer / drill-down panels (mobile, <992px) ---------- */

/*
 * The close (X) button used to be a fixed, full-viewport-height strip
 * pinned to the right edge (mobile.css's "#menuArea.is-open .cross_icon_all
 * {position:fixed;top:0;right:0;height:100vh;width:85px}") — a large
 * click-to-close zone, but visually it sat up in the header/topbar area,
 * which the overlay backdrop originally skipped dimming, leaving the white
 * X hard to see against the header's own background. Move it into the
 * drawer's own "Shop by Category" row instead, where it sits on the
 * drawer's white background with normal contrast. Same specificity as that
 * mobile.css rule (id + 2 classes) — !important guarantees the win
 * regardless of load order.
 */
#menuArea .mobile_head_category {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#menuArea .mobile_head_category .cross_icon_all {
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 44px !important;
	width: 44px !important;
	padding: 0 !important;
	z-index: auto !important;
	text-align: center;
}

/*
 * Was a white close.png (designed for the old dark strip) — swapped for a
 * Font Awesome glyph so it can match the row's own text color exactly
 * (#474747) via `color`, rather than approximating it with a CSS filter
 * on a raster image.
 */
#menuArea .mobile_head_category .cross_icon_all .fa-times {
	color: #474747;
	font-size: 18px;
}

/*
 * #overlay sits inside .menu-bar, which has "position:relative;z-index:999"
 * (legacy, unrelated to this rebuild) — that traps the fixed-position
 * overlay inside .menu-bar's own stacking context alongside the header
 * icons it's now meant to dim (see positionOverlay() in header-nav.js).
 * new.css's own z-index:2 on #overlay isn't enough to beat those icons
 * within that trapped context, so it painted the icons on top; go high
 * enough here to win regardless.
 */
#overlay {
	z-index: 1000;
}

/* mobile.css zeroes the inner <ul>'s default list indent via "#sub-menu
 * ul{padding:0}" — that selector targeted the old shared id="sub-menu" that
 * every panel reused. Now that each panel has a unique id (sub-menu-{scatid}),
 * that rule matches nothing and the browser's default 40px ul padding-left
 * reappears as a left gap. Reset it directly, scoped to the panels. */
.sub-menu.dropdown-menu ul {
	margin: 0;
	padding: 0;
}

/* #menuArea prefix on .sub-menu.dropdown-menu is required to out-specificity
 * mobile.css's ".menu .dropdown .dropdown-menu{position:absolute;top:-11px}" —
 * without it that legacy rule wins and the drawer positions itself relative to
 * an offset ancestor instead of the viewport, leaving a gap on the left. */
#new_dropdown_area,
#menuArea .sub-menu.dropdown-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: min(335px, 85vw);
	height: 100vh;
	background: #fff;
	z-index: 10;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	min-width: 0;
	max-width: none;
	margin: 0;
}

/* Drawer reveal is mobile-only; the desktop flyout (#no-mobile) takes over at >=992px */
@media (max-width: 991px) {
	#new_dropdown_area.is-open,
	#menuArea .sub-menu.dropdown-menu.is-open {
		display: block !important;
		transform: translateX(0);
	}
}

/* Desktop hover/click flyout only reachable at >=992px */
#no-mobile {
	display: none;
}

@media (min-width: 992px) {
	#menuArea.is-open > #no-mobile {
		display: block;
	}
}

/*
 * Same cutoff for the Collections nav-bar dropdown: below 992px it's already
 * reachable through the mobile drill-down drawer (menu.php's separate
 * $mobile_submenus rendering for Collections/Industries), so hide this
 * desktop-row copy entirely there rather than trying to make its own
 * flyout/positioning work at every width in between.
 */
@media (max-width: 991px) {
	#collectionsMenuArea {
		display: none !important;
	}
}

/* ---------- Collections dropdown (shares the .is-open vocabulary) ---------- */

.collections-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

#collectionsMenuArea.is-open .collections-arrow {
	transform: rotate(180deg);
}

#collectionsMenuArea.is-open #collectionsToggle {
	background: #d61c5b;
	color: #fff;
}

#collectionsMenuArea.is-open #collectionsToggle:hover {
	color: #b0deea;
}

/*
 * Bootstrap's own vendor CSS (app.css) shows dropdown menus via a native
 * .open > .dropdown-menu{display:block} rule. The controller now toggles
 * .is-open instead of .open, so that native rule no longer matches and the
 * Collections submenu stays display:none even while "open".
 */
#collectionsMenuArea.is-open > .dropdown-menu {
	display: block;
}

/*
 * responsive.css's generic ".menu .dropdown .dropdown-menu{top:0;bottom:0;
 * right:40px}" (apparently sized for a different dropdown context) also
 * matches this one. Per the CSS spec, an absolutely positioned box with both
 * top and bottom set (and height:auto) has its height computed from that
 * gap instead of its content — even an explicit "height:auto" override can't
 * undo that, since the spec only skips the top/bottom calculation once
 * height is a definite value. That clamped this dropdown to ~48px instead of
 * the ~285px its 4 items need, forcing a tiny scrollable box. Give it its
 * own definite position instead of relying on top+bottom to imply a height.
 */
#collectionsMenuArea .dropdown-menu {
	top: 100%;
	bottom: auto;
	left: 0;
	right: auto;
	/* The same legacy rule also left overflow-x/y:auto active, which clips
	 * the level-2 flyout below even though it's positioned outside this
	 * box's bounds — overflow clipping applies to descendants regardless of
	 * their own positioning scheme. */
	overflow: visible;
}

/*
 * Collections level-2 flyout (Capabilities/Industries -> their own item
 * list): stacked directly below the parent item by default, matching how
 * little horizontal room there is next to it on tablet/mobile widths.
 * Reachable via click (see header-nav.js) since hover doesn't exist on touch.
 */
#collectionsMenuArea .dropdown-menu-inner > li.top.dropdown {
	/* Without this, the li is position:static and the flyout's containing
	 * block bubbles up to the outer (positioned) list instead — its
	 * top:100%/left:100% would then resolve against the whole list's box
	 * instead of just this row. */
	position: relative;
}

/*
 * This exact 2-level-nested-dropdown selector shape (".menu .dropdown
 * .dropdown-menu .dropdown-menu" / ".menu .dropdown-menu .dropdown-menu")
 * turns out to be extremely overloaded across the legacy stylesheets —
 * evidently reused for several unrelated dropdown contexts over time, each
 * adding its own position/size/color tweaks (including a couple of
 * same-selector, opposite-value pairs across files, e.g. visibility:hidden
 * vs visibility:visible, that only resolve by source order, not intent).
 * Rather than keep discovering and patching one leaking property at a time,
 * this resets every property those rules touch for this specific flyout.
 */
#collectionsMenuArea .dropdown-menu-inner > li.top.dropdown > .dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: auto;
	bottom: auto;
	height: auto !important; /* beats responsive.css's competing height:100%!important */
	visibility: visible;
	overflow: visible;
	background: #fff;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
	padding: 0;
}

#collectionsMenuArea .dropdown-menu-inner > li.top.dropdown > .dropdown-menu li a {
	color: #474747;
	background: #fff;
}

#collectionsMenuArea .dropdown-menu-inner > li.top.dropdown.open > .dropdown-menu {
	display: block;
}

@media (min-width: 992px) {
	/* Enough room beside the Collections panel to flyout right instead. */
	#collectionsMenuArea .dropdown-menu-inner > li.top.dropdown > .dropdown-menu {
		top: 0;
		left: 100%;
		right: auto;
	}
}

/* ---------- Scroll lock while a drawer/dropdown is open ---------- */

body.nav-open {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

/* ---------- Dark/sticky header on scroll (replaces .new_header_resp.darkHeader) ---------- */

.site-header.darkHeader {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	background: #fff;
	box-shadow: 0 1px 10px 0 rgb(0 0 0 / 30%);
}

/* ---------- min-width: 768px (Bootstrap sm) ---------- */

@media (min-width: 768px) {
	/*
	 * The <=767px block tightens this row's padding to 8px because mobile
	 * only holds the search bar. At >=768px the row holds logo + search +
	 * contact + cart together and needs its original breathing room back —
	 * scoped here (not in the base rule) so it can't win the cascade tie
	 * against the mobile tightening at narrower widths.
	 */
	.site-header .site-header__bar.topbar {
		flex-wrap: nowrap;
		padding: 20px 0;
	}

	.site-header .site-header__search.form-block {
		order: 2;
		flex: 1 1 auto;
		width: auto;
	}

	.site-header .site-header__contact {
		order: 3;
	}

	.site-header .site-header__actions {
		order: 4;
	}

	.site-header .site-header__contact .site-header__contact-text {
		display: inline;
	}

	.site-header .site-header__contact .tel_text,
	.site-header .site-header__contact .email_text {
		width: auto;
		height: auto;
	}

	/* Stack phone number over "or email us", matching the desktop reference layout */
	.site-header .site-header__contact.info {
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		gap: 2px;
	}

	.site-header .site-header__contact .tel_text,
	.site-header .site-header__contact .email_text {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		line-height: 1.2;
		white-space: nowrap;
	}

	.site-header .site-header__contact .tel_text {
		font-weight: 600;
	}

	.menu-trigger__label {
		display: inline;
	}

	/* Subtle divider between phone/email and the cart, which sit next to each other from this width up. */
	.site-header .site-header__actions {
		border-left: 1px solid #e0e0e0;
		padding-left: 20px;
	}

	/*
	 * .option has three dead <li> siblings around .cart-button — a
	 * wishlist-button one and two unclassed ones — all with their content
	 * entirely HTML-commented-out in menu.php, but each still rendering as
	 * an empty block with its own padding, adding invisible width before
	 * and after the actual cart li. That unbalanced the divider: 10px on
	 * the phone side, ~31px on the cart side. Only .cart-button has real
	 * content, so hide everything else in this row.
	 */
	.site-header .site-header__actions .option > li:not(.cart-button) {
		display: none;
	}
}

/* ---------- min-width: 992px (Bootstrap md) — iPad landscape 1024, iPad Pro 1112/1180 ---------- */

@media (min-width: 992px) {
	/*
	 * Row gap between search/phone/line/cart — kept deliberately even
	 * (approved design), not tight: phone/email still sits close to the
	 * cart icon (their pairing has no auto-margin pulling them apart — see
	 * below), just with a bit more breathing room than the initial pass.
	 * The search bar is pulled off flex-grow and given auto side-margins
	 * instead; auto margins on a flex item claim all free space adjacent to
	 * them before justify-content:space-between (still set on the base
	 * rule) gets a chance to spread it elsewhere, so this both right-aligns
	 * the search bar against the phone+cart cluster and neutralizes
	 * space-between's effect on the other gaps — leaving search/phone and
	 * phone/cart at this same 20px gap.
	 */
	.site-header .site-header__bar.topbar {
		gap: 12px 20px;
	}

	/*
	 * Wider than before, and right-aligned (margin-left:auto pushes it
	 * against the logo/search gap instead of splitting space evenly on both
	 * sides) so it sits close to the phone number instead of centered.
	 */
	.site-header .site-header__search.form-block {
		flex: 0 1 550px;
		margin-left: auto;
		margin-right: 0;
	}

	/* Icon is redundant with the tel_text label right beside it at this width. */
	.site-header .site-header__contact .tel_text .fa-phone {
		display: none;
	}

	/*
	 * .container's site-wide 15px side padding reads as flush against the
	 * viewport edge from tablet landscape up (iPad 1024, Surface, desktop
	 * alike) — give the logo/cart some clearance without touching the
	 * shared .container class (used well beyond this header). header.php
	 * nests two ".container" divs directly under .site-header (this topbar
	 * one, and a ".hd-social" one for the Facebook/Instagram row) — exclude
	 * the latter so only the logo/search/cart row gets the extra padding.
	 */
	.site-header > .container:not(.hd-social) {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* ---------- min-width: 1200px (Bootstrap lg) — Surface 1280, desktop 1440+ ---------- */

@media (min-width: 1200px) {
	.site-header .site-header__search.form-block {
		flex-basis: 620px;
	}
}