/**
* Site header and footer (redesign).
* Depends on tokens.css and global.css.
*
* Header: menu collapses behind a toggle below 1201px.
* The collapsed state only applies once JS has run (.is-js), so the menu
* stays reachable without JavaScript.
*/

/* ==========================================================================
Header
========================================================================== */

.dh-header {
	position: sticky;
	top: 0;
	left: 0;
	z-index: var(--dh-z-header);
	background-color: var(--dh-color-bg-dark);
	color: var(--dh-color-text-on-dark);
	--dh-color-focus: var(--dh-color-focus-on-dark);
}

.dh-header__inner {
	display: flex;
	align-items: center;
	gap: var(--dh-space-24);
	min-height: var(--dh-header-height);
	padding: var(--dh-space-8) var(--dh-header-px);
}

.dh-header__logo {
	display: block;
	flex: none;
	text-decoration: none;
}

.dh-header__logo-img {
	width: var(--dh-header-logo-width);
	height: var(--dh-header-logo-height);
	object-fit: contain;
}

.dh-header__logo-text {
	font-family: var(--dh-font-display);
	font-size: var(--dh-fs-heading-32);
	line-height: 1;
}

/* Nav */

.dh-header__nav {
	margin-left: auto;
}

.dh-header__menu {
	display: flex;
	align-items: center;
	gap: var(--dh-header-nav-gap);
}

.dh-header__menu a {
	display: inline-block;
	padding-block: var(--dh-space-8);
	color: var(--dh-color-text-on-dark);
	font-family: var(--dh-font-display);
	font-size: var(--dh-fs-heading-20);
	line-height: 1;
	letter-spacing: var(--dh-ls-nav);
	text-decoration: none;
	text-transform: uppercase;
}

/* No hover/current state in Figma: minimal underline using token colors. */
.dh-header__menu a:hover,
.dh-header__menu .current-menu-item > a {
	text-decoration: underline;
	text-decoration-color: var(--dh-color-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* Actions: search, cart */

.dh-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--dh-space-24);
	margin-left: var(--dh-space-24);
}

.dh-header__icon-btn,
.dh-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--dh-space-4);
	border: 0;
	background: none;
	color: var(--dh-color-text-on-dark);
	cursor: pointer;
}

  body header div.dh-header__inner .dh-header__toggle.dh-header__toggle--menu:hover,
  body header div.dh-header__inner .dh-header__toggle.dh-header__toggle--menu:focus {
    background-color: transparent;
    border-color: transparent;
  }

.dh-header__cart {
	display: inline-flex;
	align-items: center;
	gap: var(--dh-space-8);
	color: var(--dh-color-text-on-dark);
	text-decoration: none;
}

  .dh-header__cart:hover{
    color: #ffffff;
  }

.dh-header__cart-count {
	font-family: var(--dh-font-body);
	font-size: var(--dh-fs-body-16);
	font-weight: var(--dh-fw-medium);
	line-height: 1;
}


/* Menu toggle (hidden on desktop) */

.dh-header__toggle {
	display: none;
	order: 3;
}

.dh-header__toggle-close {
	display: none;
}

.dh-header.is-menu-open .dh-header__toggle-open {
	display: none;
}

.dh-header.is-menu-open .dh-header__toggle-close {
	display: inline-flex;
}

/* Search panel
 * Not designed in Figma. Cream panel laid over the page under the header,
 * so it reads as its own layer and does not blend into dark heroes.
 * Absolutely positioned: opening it does not push the page down.
 */

.dh-header__search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100dvh - var(--dh-header-height));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--dh-space-24) var(--dh-header-px) var(--dh-space-32);
	background-color: var(--dh-color-bg-alt);
	box-shadow: var(--dh-shadow-panel);
	color: var(--dh-color-heading);
	/* Panel is light: switch back from the header's on-dark focus color. */
	--dh-color-focus: var(--dh-color-heading);
}

.dh-header__search[hidden] {
	display: none;
}

.dh-header__search-form {
	display: flex;
	gap: var(--dh-space-12);
	max-width: var(--dh-container-form);
	margin-inline: auto;
}

.dh-header__search-form .dh-header__search-input {
	outline: none;
	height: auto;
	flex: 1;
	min-width: 0;
	padding: var(--dh-field-padding);
	border: var(--dh-border-width) solid var(--dh-color-border, var(--dh-color-grey-200));
	border-radius: 6px;
	background: var(--dh-field-bg);
	color: var(--dh-field-color);
	font-size: var(--dh-field-font-size);
}

.dh-header__search-form .dh-header__search-input:focus-visible {
	border-color: var(--dh-color-heading);
}

.dh-header__search-form .dh-header__search-input::placeholder {
	color: var(--dh-field-placeholder);
}

/* Native "clear" button of the search input: browser default (blue) replaced
 * with a token-colored cross. */
.dh-header__search-form .dh-header__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 1rem;
	height: 1rem;
	margin-left: var(--dh-space-8);
	background-color: var(--dh-color-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	cursor: pointer;
}

.dh-header__search-form .dh-header__search-input::-webkit-search-cancel-button:hover {
	background-color: var(--dh-color-heading);
}

/* Live search results */

.dh-header__results {
	max-width: var(--dh-container-form);
	margin-inline: auto;
}

.dh-header__results:empty {
	display: none;
}

.dh-header__results-list {
	display: grid;
	gap: var(--dh-space-4);
	margin-top: var(--dh-space-16);
}

.dh-header__result {
	display: flex;
	align-items: center;
	gap: var(--dh-space-16);
	padding: var(--dh-space-8);
	border-radius: var(--dh-radius-button);
	color: var(--dh-color-heading);
	text-decoration: none;
	transition: background-color var(--dh-transition-fast);
}

/* White row on the cream panel. */
.dh-header__result:hover,
.dh-header__result:focus-visible {
	background-color: var(--dh-color-bg);
}

.dh-header__result-img {
	flex: none;
	width: var(--dh-thumb-sm);
	height: var(--dh-thumb-sm);
	border: var(--dh-border-width) solid var(--dh-color-border, var(--dh-color-grey-200));
	border-radius: var(--dh-radius-button);
	background-color: var(--dh-color-white);
	object-fit: contain;
}

.dh-header__result-name {
	flex: 1;
	font-family: var(--dh-font-display);
	font-size: var(--dh-fs-heading-20);
	line-height: var(--dh-lh-tight);
	letter-spacing: var(--dh-ls-button);
	text-transform: uppercase;
}

.dh-header__result-price {
	flex: none;
	color: var(--dh-color-accent);
	font-weight: var(--dh-fw-bold);
}

.dh-header__results-empty {
	margin-top: var(--dh-space-16);
	color: var(--dh-color-text);
}

.dh-header__results-empty a {
	color: var(--dh-color-heading);
}

/* Page dim behind the open search panel. Created by site-header.js and
 * placed just under the sticky header, so the header stays undimmed. */
.dh-search-overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--dh-z-header) - 1);
	background-color: var(--dh-overlay-search);
}

.dh-search-overlay[hidden] {
	display: none;
}

/* Tablet and mobile: collapsible menu */

@media screen and (max-width: 1200px) {

	.dh-header__toggle {
		display: inline-flex;
	}

	.dh-header__actions {
		order: 2;
		margin-left: auto;
	}

	.dh-header__nav {
		order: 4;
		flex-basis: 100%;
		margin-left: 0;
	}

	.dh-header__inner {
		gap: 10px 16px;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	/* Keep the first row (logo, icons, toggle) the same height whether the
	* menu is open or closed, so nothing jumps when the nav wraps below. */
	.dh-header__logo,
	.dh-header__actions,
	.dh-header__toggle {
		min-height: calc(var(--dh-header-height) - (var(--dh-space-8) * 2));
	}

	.dh-header__logo {
		display: flex;
		align-items: center;
	}

	.dh-header__menu {
		padding-top: 12px;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dh-space-4);
	}

	.dh-header__menu a {
		font-size: var(--dh-fs-heading-24);
		padding-block: var(--dh-space-8);
	}

	/* Collapsed only when JS is active. */
	.dh-header.is-js .dh-header__nav {
		display: none;
	}

	.dh-header.is-js.is-menu-open .dh-header__nav {
		display: block;
		border-top: var(--dh-border-width) solid var(--dh-color-divider-on-dark);
	}
}

@media only screen and (max-width: 768px) {
	.dh-header__actions {
		gap: var(--dh-space-16);
	}

	.dh-header__logo-img {
		width: calc(var(--dh-header-logo-width) * 0.75);
		height: calc(var(--dh-header-logo-height) * 0.75);
	}
}

/* ==========================================================================
Footer
========================================================================== */

.dh-footer {
	padding-top: var(--dh-footer-pt);
	padding-bottom: var(--dh-footer-pb);
	background-color: var(--dh-color-bg-dark);
	color: var(--dh-color-text-on-dark-muted);
	font-size: var(--dh-fs-body-18);
	line-height: var(--dh-lh-body);
	--dh-color-heading: var(--dh-color-text-on-dark);
	--dh-color-focus: var(--dh-color-focus-on-dark);
}

.dh-footer__grid {
	display: grid;
	/* First column is never narrower than the one-line legal links. */
	grid-template-columns: minmax(min-content, 1fr) repeat(3, minmax(0, 1fr));
	gap: var(--dh-space-24);
}

.dh-footer__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dh-space-24);
}

.dh-footer__logo {
	display: block;
}

.dh-footer__logo-img {
	width: 135px;
	height: auto;
}

.dh-footer__logo-text {
	color: var(--dh-color-text-on-dark);
	font-family: var(--dh-font-display);
	font-size: var(--dh-fs-heading-32);
}

.dh-footer__text {
	color: var(--dh-color-text-on-dark);
}

.dh-footer__title {
	color: var(--dh-color-heading);
	font-size: var(--dh-fs-heading-24);
}

.dh-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--dh-space-8);
	margin: 0;
	padding-left: 1.25em;
}

.dh-footer__list a {
	color: inherit;
}

/* Quick links are plain links; contact links are underlined (Figma). */
.dh-footer nav .dh-footer__list a {
	text-decoration: none;
}



/* Legal links: "Privacy Policy | Return Policy | MAP Policy" */
.dh-footer__legal-menu {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	color: var(--dh-color-text-on-dark);
	font-size: var(--dh-fs-body-16);
}

.dh-footer__legal-menu li + li::before {
	content: "|";
	padding-inline: var(--dh-space-4);
}

/* Legal links are underlined; the underline goes away on hover (rule below). */
.dh-footer__legal-menu a {
	color: inherit;
	text-decoration: underline;
}

/* Every footer link: orange, no underline on hover. */
.dh-footer a {
	transition: color var(--dh-transition-fast);
}

.dh-footer a:hover {
	color: var(--dh-color-accent);
	text-decoration: none;
}

.dh-footer__social {
	display: flex;
	gap: var(--dh-space-12);
}

.dh-footer__social-link {
	display: inline-flex;
	color: var(--dh-color-text-on-dark-muted); /* #F0EDE0, as in Figma */
}

.dh-footer__social-link:hover {
	color: var(--dh-color-accent);
}

/* Map: 20px radius, fixed aspect ratio so it never shifts the layout. */
.dh-footer__map {
	display: block;
	width: 100%;
	aspect-ratio: 17 / 11;
	overflow: hidden;
	border: 0;
	border-radius: 8px;
}

.dh-footer__map-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dh-footer__copyright {
	margin-top: var(--dh-space-48);
	padding-top: var(--dh-space-24);
	border-top: var(--dh-border-width-divider) solid var(--dh-color-divider-on-dark);
	color: var(--dh-color-text-on-dark);
	font-size: var(--dh-fs-body-16);
	text-align: center;
}

@media screen and (max-width: 1200px) {
	.dh-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--dh-space-48);
	}
}

@media only screen and (max-width: 768px) {
	.dh-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ==========================================================================
Scroll to top (Astra markup and JS; Astra CSS is removed on these pages).
Not designed in Figma: styled with tokens.
========================================================================== */

/* Hidden by default; Astra's JS sets an inline display: block after scrolling. */
#ast-scroll-top {
	position: fixed;
	right: var(--dh-space-24);
	bottom: var(--dh-space-24);
	z-index: var(--dh-z-header);
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--dh-space-48);
	height: var(--dh-space-48);
	background-color: #000;
	color: var(--dh-color-white);
	cursor: pointer;
	transition: background-color var(--dh-transition-fast);
}

#ast-scroll-top:hover {
	background-color: var(--dh-color-accent);
}
#ast-scroll-top .ast-icon {
	width: 100%;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Astra's SVG is a down arrow; turn it up and color it. */
#ast-scroll-top svg {
	width: var(--dh-space-16);
	height: auto;
	fill: currentColor;
	transform: rotate(180deg);
}

#ast-scroll-top .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Cart count as a badge, only when the cart has items. */
.dh-header__cart-count--has-items {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--dh-cart-badge-size);
	height: var(--dh-cart-badge-size);
	margin: calc(var(--dh-space-8) * -1) 0 0 calc(var(--dh-space-4) * -1);
	padding: 0 var(--dh-space-4);
	font-family: var(--dh-font-body);
	font-size: var(--dh-fs-badge);
	font-weight: var(--dh-fw-medium);
	line-height: 1;
	color: var(--dh-color-white);
	background-color: var(--dh-color-accent);
	border-radius: var(--dh-radius-round);
}

/* ==========================================================================
Landing header (Landing Page Template): logo and two buttons, no menu,
search or cart. Markup: template-parts/blocks-layout/site-header-landing.php
========================================================================== */

.dh-header--landing .dh-header__inner {
	justify-content: space-between;
}

.dh-header__cta {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--dh-space-24);
	margin-left: auto;
}

/* Figma: 16px padding all round, 1px outline on the call button. */
.dh-header__cta-btn {
	padding: var(--dh-space-16);
	white-space: nowrap;
}

.dh-header__cta-btn--call {
	gap: 0.25em;
	border-width: var(--dh-border-width);
}

@media only screen and (max-width: 768px) {
	.dh-header__cta {
		gap: var(--dh-space-12);
	}

	.dh-header__cta-btn {
		padding: var(--dh-space-12);
	}

	/* "Call" only on mobile; the number stays for screen readers. */
	.dh-header__call-number {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ==========================================================================
Landing footer: disclaimer row between two dividers, above the copyright.
========================================================================== */

.dh-footer__disclaimer {
	margin-top: var(--dh-space-48);
	padding-top: var(--dh-space-24);
	border-top: var(--dh-border-width-divider) solid var(--dh-color-divider-on-dark);
	color: var(--dh-color-text-on-dark);
	font-size: var(--dh-fs-body-15);
	font-style: italic;
	text-align: center;
}

.dh-footer__disclaimer > * {
	margin: 0;
}

.dh-footer__disclaimer > * + * {
	margin-top: var(--dh-space-8);
}

/* The copyright keeps its own divider, closer to the disclaimer. */
.dh-footer__disclaimer + .dh-footer__copyright {
	margin-top: var(--dh-space-24);
}