/*
 * Header v2 - the "Aisle Rail" header (Option 3 of the header exploration).
 *
 * Loaded ONLY when cwpr_header_v2_active() (see includes/header-v2.php), at
 * priority 19 alongside chrome.css - the footer still needs chrome.css, and
 * every selector here is cwh- prefixed so the two sheets cannot collide.
 *
 * UNITS ARE PX ON PURPOSE: Bricks sets html { font-size: 62.5% }, so rem is
 * 10px on this site and any rem value copied from a normal design is wrong.
 *
 * WIDTH COVERAGE: no display:none band anywhere - the live header renders
 * nothing at all between 479 and 766px, and this sheet exists partly to close
 * that. Below 940px the main row wraps, the rail scrolls sideways, and the
 * dropdowns re-anchor to the rail (see the position:static note at the media
 * query - an overflow container clips absolutely-positioned descendants
 * unless their containing block sits outside it).
 */

.cwh-header {
	background: var(--cw-card, #fff);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--cw-ink, #263238);
	position: relative;
	z-index: 100;
}

.cwh-header *,
.cwh-header *::before,
.cwh-header *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Tier 0 - announcement strip (brand grey; lime highlight; community links)
 * ------------------------------------------------------------------------- */

.cwh-strip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 18px;
	background: var(--cw-ink-2, #52575a);
	color: var(--cw-on-ink, #dfe3e4);
	font-size: 12.5px;
	line-height: 1.5;
	padding: 7px 28px;
}

.cwh-strip__msg b {
	color: var(--cw-lime-bright, #b5e048);
	font-weight: 700;
}

.cwh-strip__links {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 18px;
}

.cwh-strip__links a {
	color: var(--cw-on-ink, #dfe3e4);
	opacity: .8;
	text-decoration: none;
	font-size: 12px;
	white-space: nowrap;
}

.cwh-strip__links a:hover,
.cwh-strip__links a[aria-current="page"] {
	color: #fff;
	opacity: 1;
	text-decoration: underline;
	text-decoration-color: var(--cw-lime-bright, #b5e048);
}

/* ---------------------------------------------------------------------------
 * Tier 1 - logo, search, utilities
 * ------------------------------------------------------------------------- */

.cwh-main {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 14px 28px;
}

.cwh-logo {
	flex: none;
	display: block;
	line-height: 0;
}

.cwh-logo img {
	width: auto;
	height: 44px;
	max-width: none;
}

.cwh-search {
	flex: 1;
	min-width: 0;
}

/* FiboSearch owns the field's own look (its pirx skin); the container only
 * sizes it. The two !importants are measured necessity, not habit: the
 * plugin pins the wrapper at its configured 500px from OUTSIDE the
 * inspectable cascade (no matching CSS rule, no inline style, no custom
 * property - verified by walking every document stylesheet on staging), so
 * plain specificity cannot beat it. The fallback form (environments without
 * the plugin) is below. */
.cwh-search .dgwt-wcas-search-wrapp {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
}

/* Replace FiboSearch's own "pirx" skin pill (30px radius) with the site's
 * flat 8px corner, and slim its padding down (the stock skin ships a 54px-tall
 * field). !important because the plugin's own selector
 * (.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
 * repeated per state - default/open/mobile) outguns plain class specificity;
 * one !important rule covers every one of those state variants at once. */
.cwh-search .dgwt-wcas-search-input {
	border-radius: 8px !important;
	padding: 8px 20px 8px 44px !important;
}

/* The resting border is already invisible - FiboSearch's own admin colour
 * settings paint it the same shade as the field's fill - but on focus it
 * swaps to a hard #333 border with no shadow (dgwt-wcas-search-focused), which
 * is what actually reads as "this field has a border" the moment you use it.
 * Swap that for a soft brand-lime ring instead. */
.cwh-search .dgwt-wcas-search-input:focus {
	border-color: transparent !important;
	box-shadow: 0 0 0 2px var(--cw-lime, #80bc00) !important;
}

.cwh-search .cwpr-search__fallback {
	display: flex;
}

.cwh-search .cwpr-search__input {
	flex: 1;
	min-width: 0;
	border: 2px solid var(--cw-line-2, #d6d3ca);
	border-right: none;
	border-radius: 8px 0 0 8px;
	padding: 10px 16px;
	font-size: 14px;
	background: var(--cw-card, #fff);
	color: var(--cw-ink, #263238);
}

.cwh-search .cwpr-search__input:focus {
	outline: none;
	border-color: var(--cw-lime, #80bc00);
}

.cwh-search .cwpr-search__submit {
	border: none;
	background: var(--cw-lime, #80bc00);
	border-radius: 0 8px 8px 0;
	padding: 0 18px;
	cursor: pointer;
}

.cwh-search .cwpr-search__submit svg {
	width: 18px;
	height: 18px;
	fill: var(--cw-olive, #16210a);
}

.cwh-utils {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: auto;
	flex: none;
}

.cwh-util {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--cw-ink-2, #52575a);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.2;
}

.cwh-util .cwh-ico {
	width: 21px;
	height: 21px;
	color: var(--cw-ink-2, #52575a);
	flex: none;
}

.cwh-util:hover {
	color: var(--cw-olive, #16210a);
}

.cwh-util:hover .cwh-ico {
	color: var(--cw-lime, #80bc00);
}

.cwh-util__sub {
	display: block;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--cw-faint, #9a9a94);
}

/* Pickup/Delivery selector - a segmented pill whose active half mirrors the
 * WC session's pi_delivery_type. The whole control is one popup trigger
 * (class pisol-date-time-popup), not two separate switches: changing mode
 * has date/location consequences the popup exists to walk through.
 *
 * DELIBERATELY GREY, NOT LIME (user decision 2026-08-24): a lime-filled
 * active segment sitting among the header's other neutral controls read as
 * too loud for what is a routine, always-visible setting rather than a call
 * to action. Same monochrome convention as the wishlist rebuild - darken on
 * interaction instead of reaching for a hue - so this is deliberately
 * consistent with assets/css/wishlist.css even though chrome is normally the
 * lime zone; this ONE control is the documented exception, not a change to
 * the zone rule itself. */
.cwh-mode {
	display: flex;
	align-items: center;
	gap: 3px;
	border: 1.5px solid var(--cw-line-2, #d6d3ca);
	border-radius: 999px;
	padding: 3px;
	cursor: pointer;
	flex: none;
	background: var(--cw-card, #fff);
}

.cwh-mode:hover {
	border-color: var(--cw-ink-2, #52575a);
}

.cwh-mode__seg {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--cw-grey, #6b6b6b);
	padding: 6px 13px;
	border-radius: 999px;
	white-space: nowrap;
}

.cwh-mode__seg--active {
	background: var(--cw-ink-2, #52575a);
	color: #fff;
}

/* Menu toggle (mobile drawer) - hidden on desktop, no separate drawer/backdrop
 * markup needed there since both default to display:none below. */
.cwh-menu-btn {
	display: none;
	border: none;
	background: none;
	cursor: pointer;
	font: inherit;
}

.cwh-drawer-backdrop,
.cwh-drawer {
	display: none;
}

/* Sticky-search sentinel - zero-height everywhere except the mobile band,
 * where header-v2.js gives it height only while the search bar is stuck
 * (holding its old flow space so the rail doesn't jump). */
.cwh-search-sentinel {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Tier 2 - the aisle rail
 * ------------------------------------------------------------------------- */

.cwh-rail {
	position: relative;
	background: var(--cw-card, #fff);
	border-top: 1px solid var(--cw-line, #e7e5df);
	border-bottom: 1px solid var(--cw-line-2, #d6d3ca);
}

.cwh-rail__scroll {
	display: flex;
	align-items: stretch;
	padding: 0 20px;
}

.cwh-item {
	position: relative;
	flex: none;
}

.cwh-item__btn,
.cwh-item__link {
	display: flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--cw-ink-2, #52575a);
	text-decoration: none;
	padding: 15px 13px;
	white-space: nowrap;
}

.cwh-item__btn:hover,
.cwh-item__link:hover,
.cwh-item__btn[aria-expanded="true"] {
	color: var(--cw-olive, #16210a);
	box-shadow: inset 0 -3px 0 var(--cw-lime, #80bc00);
}

.cwh-item--all .cwh-item__btn {
	color: var(--cw-olive, #16210a);
	background: var(--cw-lime-wash, #f3f9e4);
	box-shadow: inset 0 -3px 0 var(--cw-lime, #80bc00);
	padding: 15px 16px;
}

.cwh-item .cwh-ico--grid {
	width: 14px;
	height: 14px;
}

.cwh-item .cwh-ico--chev {
	width: 10px;
	height: 10px;
	opacity: .5;
}

/* Desktop: the aisles grow and shrink WITH the page - every slot flexes so
 * the rail always fills the row edge to edge, and padding/type scale with
 * the viewport via clamp() so ten slots survive a 1024px laptop and spread
 * generously on a 1920px monitor. All Aisles keeps its natural width so its
 * highlight block stays a button, not a stretched slab.
 *
 * ⚠ Deliberately NOT `overflow-x:auto` here, even though that was tried
 * (2026-08-20) to fix perceived "not all aisles show" on desktop — reverted
 * same day. Each `.cwh-drop` flyout is `position:absolute` inside its
 * `.cwh-item` (`position:relative`), and an `overflow-x:auto` ANCESTOR clips
 * an absolutely-positioned descendant unless its containing block sits
 * outside the scroller (the exact mechanism the ≤940px band already works
 * around by flipping `.cwh-item` to `position:static` — see below). Adding
 * scroll to the desktop row without that escape trapped every flyout inside
 * a tiny clipped/scrolling box instead — confirmed live, screenshot showed
 * the FLOOR dropdown crushed and the whole row needing its own scrollbar.
 * Fixing "not all aisles show" on desktop for real needs dropdowns
 * repositioned via JS (position:fixed, computed from the trigger's
 * getBoundingClientRect() on open) so they can escape a scrolling ancestor
 * while still opening under the right button - not attempted yet. */
@media (min-width: 941px) {
	.cwh-rail__scroll {
		padding: 0 12px;
	}

	.cwh-item {
		flex: 1 1 auto;
		min-width: 0;
	}

	.cwh-item--all {
		flex: 0 0 auto;
	}

	.cwh-item__btn,
	.cwh-item__link {
		width: 100%;
		justify-content: center;
		padding: 15px clamp(4px, 0.8vw, 16px);
		font-size: clamp(10.5px, 0.85vw, 12px);
	}

	.cwh-item--all .cwh-item__btn {
		width: auto;
	}
}

/* Dropdown panels */

.cwh-drop {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 120;
	display: none;
	min-width: 250px;
	background: var(--cw-card, #fff);
	border: 1px solid var(--cw-line, #e7e5df);
	border-top: 3px solid var(--cw-lime, #80bc00);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 18px 44px rgba(25, 30, 12, .18);
	padding: 10px 0;
}

.cwh-drop--grid {
	display: none;
	grid-template-columns: 1fr 1fr;
	width: 540px;
	padding: 12px 4px 8px;
}

.cwh-drop.cwh-open {
	display: block;
}

.cwh-drop--grid.cwh-open {
	display: grid;
}

@media (hover: hover) and (min-width: 941px) {
	.cwh-item:hover > .cwh-drop,
	.cwh-item:focus-within > .cwh-drop {
		display: block;
	}

	.cwh-item:hover > .cwh-drop--grid,
	.cwh-item:focus-within > .cwh-drop--grid {
		display: grid;
	}
}

/* `.cwh-drop` always anchors left:0 and grows rightward from there. Every
 * rail item is `flex:1 1 auto` (min-width:941px block above), filling the
 * row edge to edge, so the rightmost couple of items sit flush against the
 * viewport's right edge - their dropdown then pushes past 100vw, causing
 * page-level horizontal scroll (confirmed live on GARDEN, the last item).
 * Flip anchoring to the right edge for the last two items so their panels
 * grow LEFTWARD instead - covers both the hover path (CSS-only, no JS) and
 * the click path (header-v2.js just toggles .cwh-open, doesn't touch
 * position). Two items, not one, because a narrower desktop width can push
 * the second-to-last item close enough to the edge too. */
@media (min-width: 941px) {
	.cwh-item:last-child .cwh-drop,
	.cwh-item:nth-last-child(2) .cwh-drop {
		left: auto;
		right: 0;
	}
}

.cwh-opt {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cw-ink-2, #52575a);
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}

.cwh-opt:hover {
	background: var(--cw-lime-wash, #f3f9e4);
	color: var(--cw-olive, #16210a);
}

.cwh-opt__tile {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	flex: none;
	object-fit: cover;
	background: var(--cw-ground, #f7f7f5);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
	display: block;
}

.cwh-drop__all {
	display: block;
	font-size: 13px;
	font-weight: 800;
	color: var(--cw-lime-deep, #5f8c00);
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	border-top: 1px solid var(--cw-line, #e7e5df);
	margin-top: 6px;
	padding: 10px 16px 4px;
}

.cwh-drop--grid .cwh-drop__all {
	grid-column: 1 / -1;
}

.cwh-drop__all:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Below 940px: wrap the main row, let the rail scroll, re-anchor dropdowns.
 * This is the band (479-766px) where the live Bricks header disappears - the
 * v2 header must render fully here.
 * ------------------------------------------------------------------------- */

@media (max-width: 940px) {
	.cwh-strip {
		padding: 7px 16px;
	}

	/* The top bar is the delivery message only on mobile - the page links move
	 * into the drawer below. */
	.cwh-strip__links {
		display: none;
	}

	.cwh-main {
		flex-wrap: wrap;
		gap: 12px 16px;
		padding: 12px 16px;
	}

	.cwh-logo img {
		height: 38px;
	}

	/* The search row is its own full-width band on mobile - tight padding so
	 * the pill itself is most of the band's height instead of floating in
	 * white space. */
	.cwh-search {
		order: 3;
		flex-basis: 100%;
		max-width: none;
		background: var(--cw-card, #fff);
		margin: 0 -16px;
		padding: 8px 16px;
	}

	.cwh-search-sentinel {
		display: block;
		order: 3;
		flex-basis: 100%;
		height: 0;
	}

	/* header-v2.js toggles this once the sentinel scrolls above the viewport
	 * top, so the search bar stays reachable through the rest of the page
	 * instead of scrolling away with the logo row. Same background + tight
	 * padding as the in-flow band above, so pinning it doesn't change its look. */
	.cwh-search.cwh-search--stuck {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 150;
		margin: 0;
		background: var(--cw-card, #fff);
		padding: 8px 16px;
		box-shadow: 0 4px 14px rgba(25, 30, 12, .14);
		/* Fade in when it pins, instead of snapping into view the instant the
		 * IntersectionObserver flips the class - the abrupt appearance read as
		 * a glitch on mobile. Animation (not transition) because the element
		 * jumps from in-flow to fixed in the same frame, so there is no
		 * before-state to transition from. Un-pinning stays instant: the bar
		 * simply returns to its in-flow slot as you scroll back up. */
		animation: cwh-search-fade-in .28s ease-out;
	}

	@keyframes cwh-search-fade-in {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.cwh-search.cwh-search--stuck {
			animation: none;
		}
	}

	.cwh-util__label {
		display: none;
	}

	.cwh-utils {
		gap: 18px;
	}

	.cwh-menu-btn {
		display: flex;
	}

	/* The pickup/delivery pill moves into the drawer too - :not() keeps the
	 * drawer's own copy (.cwh-mode--drawer) visible. */
	.cwh-mode:not(.cwh-mode--drawer) {
		display: none;
	}

	.cwh-drawer-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(22, 33, 10, .45);
		opacity: 0;
		pointer-events: none;
		transition: opacity .2s ease;
		z-index: 199;
	}

	.cwh-drawer-backdrop.cwh-open {
		opacity: 1;
		pointer-events: auto;
	}

	.cwh-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(82vw, 320px);
		background: var(--cw-card, #fff);
		box-shadow: -18px 0 44px rgba(25, 30, 12, .22);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
		z-index: 200;
		padding: 18px;
		overflow-y: auto;
	}

	/* visibility, not just the transform, so a closed drawer's links and the
	 * pickup/delivery control drop out of the keyboard tab order instead of
	 * sitting focusable just off-screen. */
	.cwh-drawer.cwh-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform .25s ease, visibility 0s linear 0s;
	}

	.cwh-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--cw-line, #e7e5df);
		margin-bottom: 16px;
	}

	.cwh-drawer__title {
		font-size: 13px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: .07em;
		color: var(--cw-ink-2, #52575a);
	}

	.cwh-drawer__close {
		border: none;
		background: none;
		cursor: pointer;
		padding: 4px;
		line-height: 0;
		color: var(--cw-ink-2, #52575a);
	}

	.cwh-drawer__close .cwh-ico {
		width: 20px;
		height: 20px;
	}

	.cwh-mode--drawer {
		align-self: flex-start;
		margin-bottom: 20px;
	}

	.cwh-drawer__links {
		display: flex;
		flex-direction: column;
	}

	.cwh-drawer__links a {
		padding: 13px 2px;
		font-size: 14px;
		font-weight: 700;
		color: var(--cw-ink-2, #52575a);
		text-decoration: none;
		border-bottom: 1px solid var(--cw-line, #e7e5df);
	}

	.cwh-drawer__links a:hover,
	.cwh-drawer__links a[aria-current="page"] {
		color: var(--cw-olive, #16210a);
	}

	.cwh-rail__scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 8px;
	}

	/* position:static moves each dropdown's containing block OUT of the
	 * scrolling element (to .cwh-rail), so panels are neither clipped by the
	 * scroller nor dragged along when it scrolls. They become full-width
	 * sheets under the rail instead of per-tab flyouts. */
	.cwh-item {
		position: static;
	}

	.cwh-drop,
	.cwh-drop--grid {
		left: 8px;
		right: 8px;
		width: auto;
		min-width: 0;
	}

	.cwh-drop--grid {
		grid-template-columns: 1fr;
	}

	/* Fades over the clipped end of the strip so the button reads as "more
	 * content this way" rather than a floating chip with a hard edge - the
	 * gradient matches the rail's own background so it blends regardless of
	 * which aisle label is scrolled underneath it. header-v2.js toggles
	 * [hidden] off only once there's genuinely more to scroll to, and back on
	 * at the end of the strip. Mobile-only: desktop's flex-shrink never
	 * overflows (see the min-width:941px block), so this never needs to
	 * appear there. */
	.cwh-rail__more {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		gap: 2px;
		border: none;
		cursor: pointer;
		padding: 0 10px 0 26px;
		background: linear-gradient(to right, transparent, var(--cw-card, #fff) 45%);
		color: var(--cw-lime-deep, #5f8c00);
		font-family: inherit;
		font-size: 11px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: .06em;
	}

	.cwh-rail__more[hidden] {
		display: none;
	}

	.cwh-rail__more .cwh-ico--chev {
		width: 9px;
		height: 9px;
		opacity: 1;
		transform: rotate(-90deg);
	}
}

/* Body scroll lock while the drawer is open (set by header-v2.js). */
body.cwh-drawer-lock {
	overflow: hidden;
}

@media (min-width: 480px) and (max-width: 940px) {
	.cwh-drop--grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Keyboard focus - the site suppresses outlines in places; restore ours. */
.cwh-header a:focus-visible,
.cwh-header button:focus-visible {
	outline: 2px solid var(--cw-lime, #80bc00);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cwh-header * {
		transition: none !important;
	}
}