/* Chesshir Stone — custom retail header (uses tokens.css) */

/* Hide Divi / Theme Builder header + leftover shortcode blocks */
body.cs-custom-header-on header.et-l--header,
body.cs-custom-header-on .et-l--header,
body.cs-custom-header-on #main-header,
body.cs-custom-header-on #et-main-area > header.et-l,
body.cs-custom-header-on .et_pb_section.et_pb_fullwidth_section:has(.dsm_mega_menu),
body.cs-custom-header-on .dsm_mega_menu {
	display: none !important;
	height: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Fallback: hide floating "Our Locations" pill if still injected elsewhere */
body.cs-custom-header-on .cs-header ~ a[href*="locations"]:not(.cs-header a) {
	/* keep page content links; only hide fixed floats if present */
}

.cs-header {
	position: sticky;
	top: 0;
	z-index: var(--cs-header-z);
	background: var(--cs-white);
	color: var(--cs-ink);
	font-family: var(--cs-font-sans);
	box-shadow: var(--cs-shadow-sm);
}

.cs-header__inner {
	width: min(var(--cs-container), calc(100% - 2rem));
	margin: 0 auto;
}

/* Utility bar — Lowe's-like desktop */
.cs-header__utility {
	position: relative;
	z-index: 3;
	background: var(--cs-surface);
	border-bottom: var(--cs-border-width) solid var(--cs-border);
	font-size: 0.8125rem;
}

.cs-header__utility-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 34px;
}

.cs-header__utility-msg {
	margin: 0;
	color: var(--cs-slate);
}

.cs-header__utility-links {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.cs-header__utility-link {
	color: var(--cs-ink);
	text-decoration: none;
	font-weight: 600;
}

.cs-header__utility-link:hover {
	color: var(--cs-primary);
}

.cs-header__utility-link--placeholder {
	cursor: default;
}

.cs-header__utility-link--placeholder:hover {
	color: var(--cs-ink);
}

/* Utility "Find a Yard" — hidden on desktop; main-bar yard picker covers that */
.cs-header__util-dd.cs-header__utility-link--find-yard {
	display: none;
}

/* Utility dropdowns — text link style + chevron (Call Us, Language) */
.cs-header__util-dd {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.cs-header__util-dd-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	line-height: inherit;
}

.cs-header__util-dd-chevron {
	width: 0;
	height: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 4.5px solid currentColor;
	opacity: 0.85;
	translate: 0 1px;
}

.cs-header__util-dd-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 120px;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: var(--cs-white);
	border: var(--cs-border-width) solid var(--cs-border);
	border-radius: var(--cs-radius-md);
	box-shadow: var(--cs-shadow);
	z-index: 20;
}

.cs-header__call-panel {
	min-width: 260px;
	right: auto;
	left: 0;
}

.cs-header__util-dd-option,
.cs-header__call-option {
	display: block;
	width: 100%;
	padding: 0.5rem 0.85rem;
	border: 0;
	background: transparent;
	color: var(--cs-ink);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: default;
	opacity: 0.9;
}

.cs-header__call-option {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.cs-header__call-option:hover {
	background: var(--cs-surface);
	color: var(--cs-ink);
}

.cs-header__call-yard {
	font-weight: 700;
	font-size: 0.8rem;
}

.cs-header__call-phone {
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--cs-slate);
}

.cs-header__call-hours {
	font-weight: 500;
	font-size: 0.72rem;
	color: var(--cs-slate);
}

.cs-header__find-yard-option.is-coming .cs-header__call-yard::after {
	content: " · Soon";
	color: var(--cs-sky);
	font-weight: 600;
}

.cs-header__find-yard-all {
	display: block;
	padding: 0.65rem 0.85rem;
	border-top: var(--cs-border-width) solid var(--cs-border);
	color: var(--cs-primary);
	font-weight: 700;
	font-size: 0.8125rem;
	text-decoration: none;
}

.cs-header__util-dd-option.is-active {
	color: var(--cs-primary);
}

/* Main bar */
.cs-header__main {
	position: relative;
	z-index: 1;
	background: var(--cs-white);
}

.cs-header__main-inner {
	display: grid;
	grid-template-columns: auto auto minmax(220px, 1fr) auto;
	align-items: center;
	gap: 0.85rem 1rem;
	padding: 0.75rem 0;
}

.cs-header__logo {
	display: flex;
	align-items: center;
	line-height: 0;
}

.cs-header__logo img {
	display: block;
	height: 48px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.cs-header__menu-toggle {
	display: none;
}

/* Yard selector */
.cs-header__yard {
	position: relative;
}

.cs-header__yard-btn {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 170px;
	min-height: var(--cs-control-h);
	padding: 0.55rem 0.75rem;
	border: var(--cs-border-width) solid var(--cs-border);
	border-radius: var(--cs-radius-md);
	background: var(--cs-surface);
	color: var(--cs-ink);
	cursor: pointer;
	text-align: left;
}

.cs-header__yard-btn:hover,
.cs-header__yard-btn[aria-expanded="true"] {
	border-color: var(--cs-color-focus);
}

.cs-header__yard-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	color: var(--cs-primary);
}

.cs-header__yard-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.15;
}

.cs-header__yard-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cs-slate);
}

.cs-header__yard-name {
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 160px;
}

.cs-header__caret {
	width: 0;
	height: 0;
	margin-left: auto;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--cs-slate);
}

.cs-header__yard-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	width: min(340px, 90vw);
	background: var(--cs-white);
	border: var(--cs-border-width) solid var(--cs-border);
	border-radius: var(--cs-radius-lg);
	box-shadow: var(--cs-shadow);
	z-index: 5;
	padding: 0.4rem 0;
}

.cs-header__yard-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 360px;
	overflow: auto;
}

.cs-header__yard-item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.7rem 0.9rem;
	text-decoration: none;
	color: var(--cs-ink);
}

.cs-header__yard-item:hover {
	background: var(--cs-surface);
}

.cs-header__yard-item-name {
	font-weight: 700;
	font-size: 0.9rem;
}

.cs-header__yard-item-meta {
	font-size: 0.78rem;
	color: var(--cs-slate);
}

.cs-header__yard-item.is-coming .cs-header__yard-item-name::after {
	content: " · Soon";
	color: var(--cs-sky);
	font-weight: 600;
}

.cs-header__yard-all {
	display: block;
	padding: 0.75rem 0.9rem;
	border-top: var(--cs-border-width) solid var(--cs-border);
	color: var(--cs-primary);
	font-weight: 700;
	text-decoration: none;
}

/* Search */
.cs-header__search {
	position: relative;
	display: flex;
	align-items: stretch;
	min-width: 0;
	border: var(--cs-border-width) solid var(--cs-border);
	border-radius: var(--cs-radius-md);
	overflow: visible;
	background: var(--cs-white);
}

.cs-header__search:focus-within {
	border-color: var(--cs-color-focus);
}

.cs-header__search-input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	padding: 0.7rem 0.9rem;
	font-size: 1rem;
	color: var(--cs-ink);
	background: transparent;
	border-radius: var(--cs-radius-md) 0 0 var(--cs-radius-md);
}

.cs-header__search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	border: 0;
	background: var(--cs-primary);
	color: var(--cs-white);
	cursor: pointer;
	border-radius: 0 var(--cs-radius-sm) var(--cs-radius-sm) 0;
}

.cs-header__search-submit:hover {
	background: var(--cs-primary-hover);
}

.cs-header__suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--cs-white);
	border: var(--cs-border-width) solid var(--cs-border);
	border-radius: var(--cs-radius-lg);
	box-shadow: var(--cs-shadow);
	z-index: 6;
	max-height: 420px;
	overflow: auto;
}

.cs-header__suggest-item {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: 0.75rem;
	align-items: center;
	padding: 0.65rem 0.8rem;
	text-decoration: none;
	color: var(--cs-ink);
	border-bottom: var(--cs-border-width) solid var(--cs-border);
}

.cs-header__suggest-item:hover,
.cs-header__suggest-item.is-active {
	background: var(--cs-surface);
}

.cs-header__suggest-thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface);
}

.cs-header__suggest-thumb--empty {
	display: block;
}

.cs-header__suggest-name {
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.25;
}

.cs-header__suggest-price {
	font-size: 0.85rem;
	color: var(--cs-slate);
	white-space: nowrap;
}

.cs-header__suggest-status,
.cs-header__suggest-more {
	padding: 0.85rem;
	font-size: 0.9rem;
	color: var(--cs-slate);
}

.cs-header__suggest-more {
	display: block;
	color: var(--cs-primary);
	font-weight: 700;
	text-decoration: none;
	border-top: var(--cs-border-width) solid var(--cs-border);
}

/* Actions */
.cs-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cs-header__action {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	min-width: 64px;
	padding: 0.35rem 0.5rem;
	color: var(--cs-ink);
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 700;
	position: relative;
}

.cs-header__action--quote {
	background: var(--cs-primary);
	color: var(--cs-white);
	border-radius: var(--cs-radius-md);
	padding: 0.65rem 0.85rem;
	min-width: auto;
}

.cs-header__action--quote:hover {
	background: var(--cs-primary-hover);
	color: var(--cs-white);
}

.cs-header__cart-icon {
	width: 22px;
	height: 22px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cs-header__cart-count {
	position: absolute;
	top: 0;
	right: 8px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--cs-radius-full);
	background: var(--cs-primary);
	color: var(--cs-white);
	font-size: 0.68rem;
	line-height: 18px;
	text-align: center;
}

/* Category nav — desktop Lowe's-like */
.cs-header__nav {
	border-top: var(--cs-border-width) solid var(--cs-border);
	background: var(--cs-white);
}

.cs-header__nav-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--cs-control-h);
}

.cs-header__shop-all {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border: 0;
	background: transparent;
	color: var(--cs-ink);
	font-weight: 800;
	cursor: pointer;
	padding: 0.5rem 0;
	white-space: nowrap;
}

.cs-header__icon-bars,
.cs-header__shop-all .cs-header__icon-bars {
	width: 18px;
	height: 14px;
	background:
		linear-gradient(var(--cs-ink), var(--cs-ink)) 0 0 / 100% 2px no-repeat,
		linear-gradient(var(--cs-ink), var(--cs-ink)) 0 6px / 100% 2px no-repeat,
		linear-gradient(var(--cs-ink), var(--cs-ink)) 0 12px / 100% 2px no-repeat;
}

.cs-header__nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.15rem 1.1rem;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
}

.cs-header__nav-list a {
	display: block;
	padding: 0.65rem 0;
	color: var(--cs-ink);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
}

.cs-header__nav-list a:hover {
	color: var(--cs-primary);
}

/* Drawer */
.cs-header__drawer[hidden] {
	display: none !important;
}

.cs-header__drawer {
	position: fixed;
	inset: 0;
	z-index: calc(var(--cs-header-z) + 10);
}

.cs-header__drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.cs-header__drawer-panel {
	position: absolute;
	top: 0;
	left: 0;
	width: min(360px, 88vw);
	height: 100%;
	background: var(--cs-white);
	box-shadow: var(--cs-shadow);
	display: flex;
	flex-direction: column;
	animation: cs-drawer-in 0.2s ease;
}

@keyframes cs-drawer-in {
	from { transform: translateX(-12px); opacity: 0.6; }
	to { transform: translateX(0); opacity: 1; }
}

.cs-header__drawer-head {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	align-items: center;
	gap: 0.25rem;
	padding: 0.85rem 0.75rem;
	border-bottom: var(--cs-border-width) solid var(--cs-border);
	background: var(--cs-surface);
	flex: 0 0 auto;
}

.cs-header__drawer-title {
	text-align: center;
	font-size: 1rem;
}

.cs-header__drawer-back,
.cs-header__drawer-close {
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--cs-ink);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.cs-header__drawer-back[hidden] {
	visibility: hidden;
	pointer-events: none;
}

.cs-header__drawer-back-chevron {
	width: 10px;
	height: 10px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	translate: 2px 0;
}

.cs-header__drawer-close {
	font-size: 1.6rem;
	line-height: 1;
	justify-self: end;
}

.cs-header__drawer-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}

.cs-header__drawer-stack {
	position: relative;
}

.cs-header__drawer-level {
	display: flex;
	flex-direction: column;
	padding: 0.35rem 0;
}

.cs-header__drawer-level[hidden] {
	display: none !important;
}

.cs-header__drawer-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.9rem 1.15rem;
	border: 0;
	border-bottom: var(--cs-border-width) solid var(--cs-border);
	background: transparent;
	color: var(--cs-ink);
	text-decoration: none;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.cs-header__drawer-link:hover {
	background: var(--cs-surface);
	color: var(--cs-primary);
}

.cs-header__drawer-link--parent {
	color: var(--cs-primary);
	font-weight: 700;
}

.cs-header__drawer-chevron {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.7;
}

.cs-header__drawer-footer {
	flex: 0 0 auto;
	margin-top: auto;
	border-top: var(--cs-border-width) solid var(--cs-border);
	background: var(--cs-surface);
	display: flex;
	flex-direction: column;
	padding: 0.35rem 0 0.5rem;
}

.cs-header__drawer-footer a {
	padding: 0.85rem 1.15rem;
	color: var(--cs-ink);
	text-decoration: none;
	font-weight: 600;
	border-bottom: var(--cs-border-width) solid var(--cs-border);
}

.cs-header__drawer-footer a:last-child {
	border-bottom: 0;
}

.cs-header__drawer-footer a:hover {
	background: var(--cs-white);
	color: var(--cs-primary);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

body.cs-drawer-open {
	overflow: hidden;
}

/* ========== Mobile — Home Depot-like structure ========== */
@media (max-width: 980px) {
	.cs-header__utility {
		display: block;
		font-size: 0.75rem;
		overflow: visible;
	}

	.cs-header__utility-inner {
		position: relative;
		flex-wrap: nowrap;
		justify-content: center;
		gap: 0.75rem;
		padding: 0.35rem 0;
		min-height: 0;
		overflow: visible;
	}

	.cs-header__utility-msg {
		display: none;
	}

	.cs-header__utility-links {
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.75rem;
		width: 100%;
		overflow: visible;
	}

	.cs-header__util-dd.cs-header__utility-link--find-yard {
		display: inline-flex;
	}

	/* Anchor Call Us / Find a Yard panels to the full utility bar so they stay on-screen */
	.cs-header__util-dd[data-cs-call],
	.cs-header__util-dd[data-cs-find-yard] {
		position: static;
	}

	.cs-header__call-panel,
	.cs-header__find-yard-panel {
		left: 0;
		right: 0;
		transform: none;
		width: auto;
		min-width: 0;
		max-width: none;
		box-sizing: border-box;
	}

	.cs-header__find-yard-panel {
		max-height: none;
		overflow: visible;
	}

	.cs-header__call-option,
	.cs-header__find-yard-option {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.cs-header__nav {
		display: none;
	}

	.cs-header__main-inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"menu logo actions"
			"search search search";
		gap: 0.65rem;
		padding: 0.65rem 0 0.85rem;
	}

	.cs-header__menu-toggle {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 0.2rem;
		grid-area: menu;
		border: 0;
		background: transparent;
		color: var(--cs-ink);
		cursor: pointer;
		padding: 0.25rem;
		font-size: 0.65rem;
		font-weight: 700;
	}

	.cs-header__logo {
		grid-area: logo;
		justify-self: start;
	}

	.cs-header__logo img {
		height: 40px;
		max-width: 140px;
	}

	.cs-header__yard {
		display: none;
	}

	.cs-header__search {
		grid-area: search;
		border-width: var(--cs-border-width);
	}

	.cs-header__actions {
		grid-area: actions;
		justify-self: end;
	}

	.cs-header__action--quote {
		padding: 0.5rem 0.65rem;
		font-size: 0.7rem;
	}
}

@media (max-width: 560px) {
	.cs-header__icon-label {
		display: none;
	}
}