/* ==========================================================================
   Header — top bar, main bar, category strip, mobile drawer. Mobile first.
   Breakpoints: 576px (small), 992px (desktop: category strip, no drawer).
   ========================================================================== */
/* Sticky: the top bar scrolls away, logo/search/category strip stay.
   --dd-header-top (set by dd-header.js) = admin bar height − top bar height. */
.dd-header {
	position: sticky;
	top: var(--dd-header-top, -39px);
	z-index: 100;
	transition: box-shadow var(--dd-ease);
}
.dd-header.is-stuck { box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }

/* Reading progress (bottom edge of the header) */
.dd-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 3px;
	pointer-events: none;
}
.dd-progress span {
	display: block;
	height: 100%;
	background: var(--dd-progress-color, var(--dd-dark));
	transform: scaleX(var(--dd-progress, 0));
	transform-origin: left center;
}
.dd-header ul { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Top bar
   ----------------------------------------------------------------------- */
.dd-topbar {
	background: var(--dd-light);
	border-bottom: 1px solid var(--dd-border);
	color: var(--dd-dark);
	font-size: 13px;
}
.dd-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 38px;
}
.dd-topbar__list { display: flex; align-items: center; gap: 4px 16px; }
.dd-topbar a,
.dd-drawer__links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 6px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dd-ease);
}
.dd-topbar a:hover,
.dd-drawer__links a:hover { color: var(--dd-primary); }
.dd-topbar .dd-icon,
.dd-drawer__links .dd-icon { color: var(--dd-primary); font-size: 15px; }

/* Small phones: email and account links collapse to icons (labels kept for screen readers;
   the mobile drawer still shows them in full). */
@media (max-width: 575.98px) {
	.dd-topbar__list { gap: 4px 14px; }
	.dd-topbar .dd-icon { font-size: 17px; }
	.dd-topbar .dd-topbar__label {
		position: absolute; width: 1px; height: 1px; overflow: hidden;
		clip: rect(0, 0, 0, 0); white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   Main bar: [burger] [logo] [quote] / [search] on mobile,
             [logo] [search] [quote] on desktop
   ----------------------------------------------------------------------- */
.dd-mainbar { background: var(--dd-white); border-bottom: 1px solid var(--dd-border); }
.dd-mainbar__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "burger logo quote" "search search search";
	align-items: center;
	gap: 12px;
	padding-block: 12px;
}
.dd-burger { grid-area: burger; }
.dd-mainbar .dd-logo { grid-area: logo; }
.dd-search { grid-area: search; }
.dd-quote { grid-area: quote; }

.dd-burger,
.dd-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius);
	background: var(--dd-white);
	color: var(--dd-dark);
	font-size: 22px;
	cursor: pointer;
	transition: color var(--dd-ease), border-color var(--dd-ease);
}
.dd-burger:hover,
.dd-drawer__close:hover { border-color: var(--dd-primary); color: var(--dd-primary); }

.dd-logo { min-width: 0; line-height: 0; }
.dd-logo .custom-logo-link { display: inline-block; }
.dd-logo img { display: block; width: auto; max-width: 100%; max-height: 40px; }
.dd-logo__text {
	display: block;
	overflow: hidden;
	color: var(--dd-dark);
	font: 700 20px/1.3 var(--dd-font-heading);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Request a quote — white button, fills with primary on hover */
.dd-quote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border: 2px solid var(--dd-primary);
	border-radius: var(--dd-radius);
	background: var(--dd-white);
	color: var(--dd-primary);
	font: 500 15px/1 var(--dd-font-heading);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dd-ease), color var(--dd-ease);
}
.dd-quote:hover { background: var(--dd-primary); color: var(--dd-white); }
.dd-quote .dd-icon { font-size: 18px; }
@media (max-width: 575.98px) {
	.dd-quote__label {
		position: absolute; width: 1px; height: 1px; overflow: hidden;
		clip: rect(0, 0, 0, 0); white-space: nowrap;
	}
}
@media (min-width: 576px) {
	.dd-quote { padding: 0 18px; }
}

/* --------------------------------------------------------------------------
   Live search
   ----------------------------------------------------------------------- */
.dd-search { position: relative; }
.dd-search__form {
	display: flex;
	height: 46px;
	overflow: hidden;
	border: 2px solid var(--dd-primary);
	border-radius: var(--dd-radius);
	background: var(--dd-white);
	transition: box-shadow var(--dd-ease);
}
.dd-search__form:focus-within { box-shadow: 0 0 0 3px rgba(195, 30, 7, .15); }
.dd-search__input {
	flex: 1;
	min-width: 0;
	padding: 0 14px;
	border: 0;
	background: transparent;
	font-size: 16px; /* 16px stops iOS zooming on focus */
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
}
.dd-search__input::-webkit-search-cancel-button { cursor: pointer; }
.dd-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	padding: 0;
	border: 0;
	background: var(--dd-primary);
	color: var(--dd-white);
	font-size: 20px;
	cursor: pointer;
	transition: background-color var(--dd-ease);
}
.dd-search__submit:hover { background: var(--dd-primary-hover); }

.dd-search.is-loading .dd-search__submit .dd-icon { display: none; }
.dd-search.is-loading .dd-search__submit::after {
	content: "";
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: var(--dd-white);
	border-radius: 50%;
	animation: dd-spin .7s linear infinite;
}
@keyframes dd-spin { to { transform: rotate(360deg); } }

.dd-search__results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 60;
	max-height: min(70vh, 480px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px !important;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius);
	background: var(--dd-white);
	box-shadow: var(--dd-shadow);
}
.dd-search__results[hidden] { display: none; }
.dd-search__item a {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 4px;
	color: var(--dd-dark);
	text-decoration: none;
}
.dd-search__item a:hover,
.dd-search__item.is-active a { background: var(--dd-light); }
.dd-search__thumb {
	width: 48px;
	height: 48px;
	border-radius: 4px;
	background: var(--dd-light);
	object-fit: contain;
}
.dd-search__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.4;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.dd-search__price { color: var(--dd-primary); font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; }
.dd-search__price del { display: block; color: var(--dd-muted); font-size: 12px; font-weight: 400; }
.dd-search__price ins { text-decoration: none; }
.dd-search__msg { padding: 14px; color: var(--dd-muted); font-size: 14px; }
.dd-search__all { margin-top: 4px; border-top: 1px solid var(--dd-border); }
.dd-search__all a { display: block; padding: 10px; color: var(--dd-primary); font-size: 14px; font-weight: 500; text-align: center; }

/* --------------------------------------------------------------------------
   Category strip (desktop only — mobile uses the drawer)
   ----------------------------------------------------------------------- */
.dd-catbar { display: none; background: var(--dd-primary); color: var(--dd-white); }
.dd-catbar__inner { display: flex; align-items: center; gap: 16px; min-height: 56px; }

/* Shared dropdown chevron for items with children */
.dd-nav__menu .menu-item-has-children > a::after,
.dd-cats__menu .menu-item-has-children > a::after {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.dd-nav .sub-menu .menu-item-has-children > a::after,
.dd-cats__menu .menu-item-has-children > a::after { transform: rotate(-45deg); }

.dd-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 6px;
	border-radius: 3px;
	background: var(--dd-dark);
	color: var(--dd-white);
	font: 700 10px/1 var(--dd-font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: middle;
}
.dd-badge--sale { background: #16a34a; }
.dd-badge--hot { background: var(--dd-primary); }
.dd-nav__menu > li > a .dd-badge--hot { background: var(--dd-white); color: var(--dd-primary); }
.dd-badge--new { background: #2563eb; }

/* Shop By Categories */
.dd-cats { position: relative; flex: 0 0 240px; }
.dd-cats__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--dd-radius);
	background: var(--dd-white);
	color: var(--dd-dark);
	font: 500 15px/1 var(--dd-font-heading);
	cursor: pointer;
}
.dd-cats__toggle .dd-icon { font-size: 18px; }
.dd-cats__toggle .dd-icon:last-child { margin-left: auto; font-size: 16px; transition: transform var(--dd-ease); }
.dd-cats__toggle[aria-expanded="true"] .dd-icon:last-child { transform: rotate(180deg); }

.dd-cats__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 50;
	padding-block: 4px;
	border: 2px solid var(--dd-primary);
	border-top: 0;
	border-radius: 0 0 var(--dd-radius) var(--dd-radius);
	background: var(--dd-white);
	box-shadow: var(--dd-shadow);
}
.dd-cats__panel[hidden] { display: none; }
.dd-cats__menu li { position: relative; padding-inline: 16px; }
.dd-cats__menu li + li > a { border-top: 1px solid var(--dd-border); }
.dd-cats__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 4px;
	color: var(--dd-dark);
	font-size: 15px;
	text-decoration: none;
	transition: color var(--dd-ease);
}
.dd-cats__menu a:hover,
.dd-cats__menu .current-menu-item > a { color: var(--dd-primary); }
.dd-cats__menu .sub-menu {
	position: absolute;
	top: -6px;
	left: 100%;
	min-width: 240px;
	padding-block: 6px !important;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius);
	background: var(--dd-white);
	box-shadow: var(--dd-shadow);
}

/* Primary menu */
/* One line; whatever doesn't fit moves into the "More" dropdown (dd-header.js). */
.dd-nav { flex: 1; min-width: 0; }
.dd-nav__menu { display: flex; align-items: center; }
.dd-nav__menu > li { position: relative; flex: none; }
.dd-nav__menu > li > a,
.dd-nav__more-toggle {
	display: flex;
	align-items: center;
	height: 56px;
	padding: 0 12px;
	border: 0;
	background: transparent;
	color: var(--dd-white);
	font: 500 14px/1 var(--dd-font-heading);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dd-ease);
}
.dd-nav__more-toggle::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.dd-nav__more-toggle:focus-visible { outline-color: var(--dd-white); outline-offset: -4px; }
/* "More" sits at the right edge: its dropdowns open leftwards so they never widen the page. */
.dd-nav .dd-nav__more > .sub-menu { left: auto; right: 0; }
.dd-nav .dd-nav__more .sub-menu .sub-menu { left: auto; right: 100%; }
.dd-nav .dd-nav__more .sub-menu .menu-item-has-children > a::after { transform: rotate(135deg); }
.dd-nav__menu > li:hover > a,
.dd-nav__menu > li:focus-within > a,
.dd-nav__more:hover > .dd-nav__more-toggle,
.dd-nav__more:focus-within > .dd-nav__more-toggle,
.dd-nav__menu > .current-menu-item > a,
.dd-nav__menu > .current-menu-ancestor > a { background: rgba(0, 0, 0, .14); }

.dd-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding-block: 8px !important;
	border-top: 3px solid var(--dd-dark);
	border-radius: 0 0 var(--dd-radius) var(--dd-radius);
	background: var(--dd-white);
	box-shadow: var(--dd-shadow);
}
.dd-nav .sub-menu li { position: relative; }
.dd-nav .sub-menu .sub-menu { top: -8px; left: 100%; border-top: 0; border-radius: var(--dd-radius); }
.dd-nav .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 18px;
	color: var(--dd-dark);
	font-size: 14px;
	text-decoration: none;
	transition: color var(--dd-ease), background-color var(--dd-ease);
}
.dd-nav .sub-menu a:hover,
.dd-nav .sub-menu .current-menu-item > a { background: var(--dd-light); color: var(--dd-primary); }

/* Hover/focus reveal for both menus (short hide delay forgives diagonal mouse moves) */
.dd-nav .sub-menu,
.dd-cats__menu .sub-menu {
	z-index: 50;
	visibility: hidden;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--dd-ease), transform var(--dd-ease), visibility 0s linear .2s;
}
.dd-nav li:hover > .sub-menu,
.dd-nav li:focus-within > .sub-menu,
.dd-cats__menu li:hover > .sub-menu,
.dd-cats__menu li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   Mobile drawer
   ----------------------------------------------------------------------- */
.dd-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, .5);
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s ease, visibility .3s;
}
.dd-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	width: min(86vw, 360px);
	background: var(--dd-white);
	box-shadow: var(--dd-shadow);
	visibility: hidden;
	transform: translateX(-100%);
	transition: transform .3s ease, visibility .3s;
}
.dd-drawer-open { overflow: hidden; }
.dd-drawer-open .dd-overlay { visibility: visible; opacity: 1; }
.dd-drawer-open .dd-drawer { visibility: visible; transform: none; }

.dd-drawer ul { margin: 0; padding: 0; list-style: none; }
.dd-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--dd-border);
}
.dd-drawer__close { font-size: 20px; }
.dd-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.dd-drawer__tabs { display: grid; grid-template-columns: 1fr 1fr; position: sticky; top: 0; z-index: 1; }
.dd-drawer__tabs [role="tab"] {
	height: 46px;
	border: 0;
	background: var(--dd-light);
	color: var(--dd-dark);
	font: 500 15px/1 var(--dd-font-heading);
	cursor: pointer;
}
.dd-drawer__tabs [aria-selected="true"] { background: var(--dd-primary); color: var(--dd-white); }

.dd-drawer__menu li { border-bottom: 1px solid var(--dd-border); }
.dd-drawer__menu .menu-item-has-children { display: grid; grid-template-columns: minmax(0, 1fr) 48px; }
.dd-drawer__menu a {
	display: block;
	padding: 13px 16px;
	color: var(--dd-dark);
	font-size: 15px;
	text-decoration: none;
}
.dd-drawer__menu a:hover,
.dd-drawer__menu .current-menu-item > a { color: var(--dd-primary); }
.dd-drawer__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-left: 1px solid var(--dd-border);
	background: transparent;
	color: var(--dd-dark);
	font-size: 18px;
	cursor: pointer;
}
.dd-drawer__sub-toggle .dd-icon { transition: transform var(--dd-ease); }
.dd-drawer__sub-toggle[aria-expanded="true"] .dd-icon { transform: rotate(180deg); }
.dd-drawer__menu .sub-menu { display: none; grid-column: 1 / -1; background: var(--dd-light); }
.dd-drawer__menu .is-open > .sub-menu { display: block; }
.dd-drawer__menu .sub-menu li:last-child { border-bottom: 0; }
.dd-drawer__menu .sub-menu a { padding-left: 28px; font-size: 14px; }
.dd-drawer__menu .sub-menu .sub-menu a { padding-left: 40px; }

.dd-drawer__foot {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border-top: 1px solid var(--dd-border);
	background: var(--dd-light);
	font-size: 14px;
}
.dd-drawer__links { display: flex; flex-wrap: wrap; gap: 0 18px; }

/* --------------------------------------------------------------------------
   Desktop
   ----------------------------------------------------------------------- */
@media (min-width: 992px) {
	.dd-mainbar__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "logo search quote";
		gap: 32px;
		padding-block: 18px;
	}
	.dd-burger, .dd-drawer, .dd-overlay { display: none; }
	.dd-mainbar .dd-logo { max-width: 280px; }
	.dd-logo img { max-height: 52px; }
	.dd-search { justify-self: center; width: 100%; max-width: 680px; }
	.dd-search__form { height: 48px; }
	.dd-quote { height: 48px; }
	.dd-catbar { display: block; }
}
@media (min-width: 1200px) {
	.dd-cats { flex-basis: 280px; }
	.dd-nav__menu > li > a,
	.dd-nav__more-toggle { padding: 0 14px; font-size: 15px; }
}