/* Shared header (Figma 2:5 desktop, 2:2124 mobile). Layout lives in the HFE Elementor template. */

/* Sticky, stable height, never auto-hides. Offsets the WP admin bar. */
/* Outranks HFE's `.ehf-header #masthead { position: relative }`. */
body.ehf-header #masthead {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* At the top the bar is solid; once scrolled it becomes the Figma 95% obsidian over content. */
.dt-header {
	transition: background-color var(--dt-dur-micro) var(--dt-ease-ui), border-color var(--dt-dur-micro) var(--dt-ease-ui);
}

.dt-is-scrolled .dt-header {
	background-color: color-mix(in srgb, var(--e-global-color-obsidian) 95%, transparent) !important;
}

/* Anchors and focused elements land below the sticky bar. */
html {
	scroll-padding-top: 96px;
}

@media (max-width: 1024px) {
	html {
		scroll-padding-top: 64px;
	}
}

/* Brand link: logo + wordmark. */
.dt-header__brand {
	color: inherit;
	text-decoration: none;
}

.dt-header__brand img {
	display: block;
	object-fit: cover;
}

/* Icon links (search / account / wishlist): 32px hit area, 20px glyph. */
.dt-header__icon .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	transition: color var(--dt-dur-micro) var(--dt-ease-ui);
}

.dt-header__icon .elementor-icon svg {
	width: 20px;
	height: 20px;
}

/* HFE nav: no underline pointers, colour transition only. */
.dt-header .hfe-nav-menu .menu-item a.hfe-menu-item {
	transition: color var(--dt-dur-micro) var(--dt-ease-ui);
}

/* Cart trigger (DT Cart Trigger widget). */
.dt-cart-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	text-decoration: none;
	transition: color var(--dt-dur-micro) var(--dt-ease-ui);
}

.dt-cart-trigger__icon {
	display: inline-flex;
}

.dt-cart-trigger__svg {
	display: block;
	width: 20px;
	height: 20px;
}

.dt-cart-trigger__svg--mobile {
	display: none;
}

.dt-cart-trigger__count {
	position: absolute;
	top: -4px;
	right: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
}

.dt-cart-trigger__count[hidden] {
	display: none;
}

@media (max-width: 1024px) {
	.dt-cart-trigger {
		width: 24px;
		height: 24px;
	}

	.dt-cart-trigger__svg--desktop {
		display: none;
	}

	.dt-cart-trigger__svg--mobile {
		display: block;
		width: 24px;
		height: 24px;
	}

	.dt-cart-trigger__count {
		min-width: 16px;
		height: 16px;
		border-radius: 8px;
		font-size: 9px;
		top: -4px;
		right: -4px;
	}
}

/* 44px preferred touch targets on touch devices without changing the drawn size. */
@media (pointer: coarse) {
	.dt-cart-trigger::after,
	.dt-menu-toggle::after {
		content: "";
		position: absolute;
		inset: -10px;
	}
}

/* Brand / action groups hug their content inside the space-between row. */
.dt-header .e-con.dt-header__group {
	--width: auto;
	flex: 0 0 auto;
}