/* ============================================================
   Header Commerce v2
   4 independent components: Top Utility → Brand Header
   → Category Navigation → Announcement
   ============================================================ */

/* ── Outer wrapper (sticky by default) ─────────────────────── */
.wpdl-header-v2 {
	position: sticky;
	top: 0;
	z-index: var(--wp--custom--z--sticky);
	width: 100%;
}

/* Reset WP is-layout-flow margin (24px × 3 gaps = 72px) between header rows.
   Specificity (0,2,0) beats :root :where(.is-layout-flow) > * which is (0,1,0). */
.wpdl-header-v2 > .wp-block-group {
	margin-block: 0;
}

/* Block Style: "Static Header" — buyer toggles in sidebar to disable sticky */
.wpdl-header-v2.is-style-wpdl-header-static {
	position: static;
}

/* ── Component 1: Top Utility (optional, 28px) ─────────────── */
.wpdl-header-v2__utility {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 1.75rem;
	padding-inline: var(--wp--custom--space--8);
	background: var(--wp--custom--semantic--color--surface--secondary);
	border-bottom: 0.0625rem solid var(--wp--custom--semantic--color--border--subtle);
}

.wpdl-header-v2__utility p,
.wpdl-header-v2__utility a {
	font-family: var(--wp--custom--font--family--body);
	font-size: 0.6875rem;
	font-weight: var(--wp--custom--font--weight--regular);
	letter-spacing: 0.06em;
	color: var(--wp--custom--semantic--color--text--secondary);
	text-decoration: none;
	margin: 0;
}

.wpdl-header-v2__utility a:hover {
	color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-header-v2__utility-links {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--6);
}

/* ── Component 2: Brand Header (72px) ──────────────────────── */
.wpdl-header-v2__brand {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 4.5rem; /* 72px */
	padding-block: 0.25rem;
	padding-inline: var(--wp--custom--space--8);
	background: var(--wp--custom--semantic--color--background--canvas);
	position: relative; /* containing block for search overlay + mobile overlay */
}

/* WP is-layout-flow adds margin-block-start to all children except first;
   reset here so grid items sit at true center within the 5rem row. */
.wpdl-header-v2__brand > * {
	margin-block: 0;
}

.wpdl-header-v2__brand-left {
	display: flex;
	align-items: center;
	justify-self: start;
}

.wpdl-header-v2__brand-center {
	justify-self: center;
}

.wpdl-header-v2__brand-right {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--5);
	justify-self: end;
}

/* Logo typography */
.wpdl-header-v2__brand .wp-block-site-title a,
.wpdl-header-v2__brand .wp-block-site-logo a {
	font-family: var(--wp--custom--font--family--display);
	font-size: 1.875rem;
	font-weight: var(--wp--custom--font--weight--medium);
	line-height: 1;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: none;
	letter-spacing: var(--wp--custom--font--letter-spacing--tight);
	white-space: nowrap;
}

/* Social links (core/social-links — buyer adds/removes in editor).
   WP global-styles-inline-css sets per-service background-color on .wp-social-link-*
   (e.g. facebook=#1778f2, instagram=gradient) — override to monochrome near-black. */
.wpdl-header-v2__social-links {
	gap: var(--wp--custom--space--6) !important;
}

.wpdl-header-v2__social-links .wp-block-social-link {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--wp--custom--semantic--color--surface--secondary) !important; /* beat WP per-service brand colors */
	color: var(--wp--custom--semantic--color--text--primary) !important; /* beat WP color:#fff on service li */
	transition: background-color 0.2s ease;
}

.wpdl-header-v2__social-links .wp-block-social-link:hover {
	background-color: var(--wp--custom--semantic--color--border--subtle) !important;
}

/* stylelint-disable-next-line no-descending-specificity -- different component from utility a:hover */
.wpdl-header-v2__social-links .wp-block-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	background: transparent;
}

.wpdl-header-v2__social-links .wp-block-social-link-anchor svg {
	width: 1rem;
	height: 1rem;
	fill: var(--wp--custom--semantic--color--text--primary);
	color: var(--wp--custom--semantic--color--text--primary);
	transition: fill 0.2s ease;
}

.wpdl-header-v2__social-links .wp-block-social-link-anchor:hover svg {
	fill: var(--wp--custom--semantic--color--brand--strong);
	color: var(--wp--custom--semantic--color--brand--strong);
}

/* ── Header Search (button-inside, CSS .is-open toggle) ────────
   Collapsed: icon button only (2rem pill).
   Open: expands inline to 14rem — stays inside brand row,
   never overlaps category nav. Pattern mirrors old navbar search.
   ──────────────────────────────────────────────────────────── */
.wpdl-header-search.wp-block-search {
	position: relative;
	flex: 0 0 auto;
}

.wpdl-header-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: 0.0625rem solid transparent;
	border-radius: 9999px;
	background-color: transparent;

	/* overflow NOT hidden when collapsed — input is opacity:0 so no visual leak,
	   but hiding it clips the centered SVG icon on the left edge */
	transition:
		inline-size 240ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 160ms ease,
		background-color 160ms ease;
}

.wpdl-header-search.is-open .wp-block-search__inside-wrapper {
	inline-size: 14rem;
	overflow: hidden; /* clip the expanding input; not needed when collapsed */
	border-color: var(--wp--custom--semantic--color--border--subtle);
	background-color: var(--wp--custom--semantic--color--background--canvas);
}

.wpdl-header-search.is-open .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--custom--semantic--color--brand--strong);
}

.wpdl-header-search .wp-block-search__input {
	inline-size: 0;
	min-inline-size: 0 !important;
	padding-block: 0;
	padding-inline: 0;
	border: none;
	background: transparent;
	font-family: var(--wp--custom--font--family--body);
	font-size: 0.875rem;
	color: var(--wp--custom--semantic--color--text--primary);
	outline: none;
	opacity: 0;
	pointer-events: none;
	transition:
		inline-size 240ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 160ms ease;
}

.wpdl-header-search.is-open .wp-block-search__input {
	inline-size: calc(14rem - 2rem);
	min-inline-size: 0 !important;
	padding-inline: var(--wp--custom--space--3);
	opacity: 1;
	pointer-events: auto;
}

.wpdl-header-search .wp-block-search__button.wp-element-button {
	flex: 0 0 2rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 9999px;
	color: var(--wp--custom--semantic--color--text--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.16s ease;
}

/* Constrain the search SVG so it sits centered inside the 2rem button */
.wpdl-header-search .wp-block-search__button.wp-element-button svg {
	width: 1.125rem;
	height: 1.125rem;
	fill: currentcolor;
	flex-shrink: 0;
}

.wpdl-header-search .wp-block-search__button.wp-element-button:hover {
	color: var(--wp--custom--semantic--color--brand--strong);
}

.wpdl-header-search .wp-block-search__button.wp-element-button:focus-visible {
	outline: 0.125rem solid var(--wp--custom--semantic--color--focus--ring);
	outline-offset: 0.125rem;
}

/* ── Search typeahead suggestions dropdown ──────────────────────
   Shared by desktop header search + mobile drawer search (both
   wrappers get position:relative above so this anchors correctly). */
.wpdl-search-suggestions {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + var(--wp--custom--space--1));
	z-index: 40;
	display: flex;
	flex-direction: column;
	overflow: hidden auto;
	max-block-size: 22rem;
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--semantic--color--border--subtle);
	border-radius: var(--wp--custom--semantic--radius--card);
	background: var(--wp--custom--semantic--color--background--canvas);
	box-shadow: var(--wp--custom--semantic--shadow--raised);
}

.wpdl-search-suggestions__item {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--3);
	padding: var(--wp--custom--space--2) var(--wp--custom--space--3);
	color: inherit;
	text-decoration: none;
	border-block-end: var(--wp--custom--border-width--hairline) solid var(--wp--custom--semantic--color--border--subtle);
}

.wpdl-search-suggestions__item:is(:hover, :focus-visible) {
	background: var(--wp--custom--semantic--color--surface--secondary);
	outline: none;
}

.wpdl-search-suggestions__item img,
.wpdl-search-suggestions__thumb-empty {
	flex: 0 0 3rem;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--wp--custom--radius--sm);
	object-fit: cover;
	background: var(--wp--custom--semantic--color--surface--secondary);
}

.wpdl-search-suggestions__meta {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-inline-size: 0;
}

.wpdl-search-suggestions__name {
	font-size: 0.875rem;
	color: var(--wp--custom--semantic--color--text--primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wpdl-search-suggestions__price {
	font-size: 0.8125rem;
	color: var(--wp--custom--semantic--color--text--secondary);
}

.wpdl-search-suggestions__view-all {
	padding: var(--wp--custom--space--3);
	font-size: 0.8125rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-search-suggestions__view-all:is(:hover, :focus-visible) {
	background: var(--wp--custom--semantic--color--surface--secondary);
	outline: none;
}

.wpdl-search-suggestions__empty {
	margin: 0;
	padding: var(--wp--custom--space--3);
	font-size: 0.8125rem;
	color: var(--wp--custom--semantic--color--text--secondary);
	text-align: center;
}

/* Mobile: dropdown becomes a full-width overlay under the drawer's search bar */
@media (width <= 47.9375rem) {
	.wpdl-header-v2__mobile-overlay .wpdl-search-suggestions {
		position: fixed;
		inset-inline: var(--wp--custom--space--5);
		inset-block-start: auto;
		max-block-size: calc(100vh - 10rem);
	}
}

/* WC mini-cart + customer-account reset */
.wpdl-header-v2__brand-right .wc-block-mini-cart__button,
.wpdl-header-v2__brand-right .wc-block-customer-account__account-link {
	padding: 0;
	background: transparent;
	border: none;
	color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-header-v2__brand-right .wc-block-mini-cart__button:hover,
.wpdl-header-v2__brand-right .wc-block-customer-account__account-link:hover {
	color: var(--wp--custom--semantic--color--brand--strong);
}

/* ── Component 3: Category Navigation (48px) ───────────────── */
.wpdl-header-v2__category-nav {
	height: 3rem;
	border-top: 0.0625rem solid var(--wp--custom--semantic--color--border--subtle);
	border-bottom: 0.0625rem solid var(--wp--custom--semantic--color--border--subtle);
	background: var(--wp--custom--semantic--color--background--canvas);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Navigation links */
.wpdl-header-v2__category-nav .wp-block-navigation__container,
.wpdl-header-v2__category-nav ul {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--8);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wpdl-header-v2__category-nav .wp-block-navigation-item__content,
/* stylelint-disable-next-line no-descending-specificity -- different component from utility a:hover */
.wpdl-header-v2__category-nav a {
	font-family: var(--wp--custom--font--family--body);
	font-size: 0.8125rem;
	font-weight: var(--wp--custom--font--weight--medium);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: none;
	padding-block: 0.25rem;
	position: relative;
	white-space: nowrap;
}

/* Active underline — grows from center */
.wpdl-header-v2__category-nav .wp-block-navigation-item__content::after,
.wpdl-header-v2__category-nav a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0.0938rem;
	background: var(--wp--custom--semantic--color--accent--primary);
	transform: translateX(-50%);
	transition: width 0.2s ease;
}

.wpdl-header-v2__category-nav .wp-block-navigation-item__content:hover::after,
.wpdl-header-v2__category-nav a:hover::after,
.wpdl-header-v2__category-nav .current-menu-item a::after {
	width: 100%;
}

/* Sale item — Block Style "Sale Item" applied by buyer in editor sidebar */
.wpdl-header-v2__category-nav .is-style-wpdl-sale > .wp-block-navigation-item__content,
.wpdl-header-v2__category-nav .is-style-wpdl-sale > a {
	color: var(--wp--custom--semantic--color--accent--primary);
}

/* ── Component 4: Announcement (optional, 36px) ────────────── */
.wpdl-header-v2__announcement {
	height: 2.25rem;
	background: var(--wp--custom--semantic--color--text--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--wp--custom--space--6);
}

.wpdl-header-v2__announcement p,
/* stylelint-disable-next-line no-descending-specificity -- different component from utility a:hover */
.wpdl-header-v2__announcement a {
	font-family: var(--wp--custom--font--family--body);
	font-size: 0.6875rem;
	font-weight: var(--wp--custom--font--weight--regular);
	letter-spacing: 0.06em;
	color: var(--wp--custom--semantic--color--background--canvas);
	text-align: center;
	text-decoration: none;
	margin: 0;
}

/* ── Hamburger Button (mobile only) ───────────────────────── */
.wpdl-hamburger-btn {
	display: none; /* shown only at mobile breakpoint */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* 3-line icon via span + ::before + ::after */
.wpdl-hamburger-btn span {
	display: block;
	width: 1.25rem;
	height: 0.125rem;
	background: var(--wp--custom--semantic--color--text--primary);
	border-radius: 0.0625rem;
	position: relative;
	transition: background 0.2s ease;
}

.wpdl-hamburger-btn span::before,
.wpdl-hamburger-btn span::after {
	content: '';
	position: absolute;
	left: 0;
	width: 1.25rem;
	height: 0.125rem;
	background: var(--wp--custom--semantic--color--text--primary);
	border-radius: 0.0625rem;
	transition: transform 0.25s ease;
}

.wpdl-hamburger-btn span::before { top: -0.375rem; }
.wpdl-hamburger-btn span::after  { top:  0.375rem; }

/* Open → X animation */
.wpdl-hamburger-btn[aria-expanded="true"] span { background: transparent; }

.wpdl-hamburger-btn[aria-expanded="true"] span::before {
	transform: rotate(45deg) translate(0.265rem, 0.265rem);
}

.wpdl-hamburger-btn[aria-expanded="true"] span::after {
	transform: rotate(-45deg) translate(0.265rem, -0.265rem);
}

.wpdl-hamburger-btn:focus-visible {
	outline: 0.1875rem solid var(--wp--custom--semantic--color--focus--ring);
	outline-offset: 0.125rem;
	border-radius: 0.25rem;
}

/* ── Mobile Overlay ────────────────────────────────────────── */

/* Specificity (0,2,0) beats body .is-layout-flex (0,1,1) from global-styles-inline-css
   which loads AFTER our stylesheet and permanently forces display:flex on .is-layout-flex elements */
.wpdl-header-v2 .wpdl-header-v2__mobile-overlay {
	display: none; /* hidden on all breakpoints by default */
	position: absolute;
	top: 100%; /* below brand bar (position:relative parent) */
	left: 0;
	right: 0;
	background: var(--wp--custom--semantic--color--background--canvas);
	border-top: 0.0625rem solid var(--wp--custom--semantic--color--border--subtle);
	box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 10%);
	z-index: var(--wp--custom--z--drawer);
	padding: var(--wp--custom--space--5) var(--wp--custom--space--4);
	gap: var(--wp--custom--space--5) !important;
	max-height: calc(100vh - 2.5rem);
	overflow-y: auto;
}

/* Search input inside overlay — always expanded (button-inside) */
.wpdl-header-v2__mobile-overlay .wpdl-mobile-search.wp-block-search {
	position: relative;
}

/* stylelint-disable-next-line no-descending-specificity -- different context: mobile overlay vs desktop button-only overlay */
.wpdl-header-v2__mobile-overlay .wpdl-mobile-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	border: 0.0625rem solid var(--wp--custom--semantic--color--border--subtle);
	border-radius: 0.25rem;
	overflow: hidden;
	background: var(--wp--custom--semantic--color--background--canvas);
}

/* stylelint-disable-next-line no-descending-specificity -- different context: mobile overlay vs desktop button-only overlay */
.wpdl-header-v2__mobile-overlay .wpdl-mobile-search .wp-block-search__input {
	flex: 1 1 auto;
	padding-block: var(--wp--custom--space--2);
	padding-inline: var(--wp--custom--space--3);
	font-family: var(--wp--custom--font--family--body);
	font-size: 0.875rem;
	border: none;
	background: transparent;
	outline: none;
}

/* Reset WP default .wp-element-button green style on overlay search button */
/* stylelint-disable-next-line no-descending-specificity */
.wpdl-header-v2__mobile-overlay .wpdl-mobile-search .wp-block-search__button.wp-element-button {
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: var(--wp--custom--semantic--color--surface--secondary);
	border: none;
	border-left: 0.0625rem solid var(--wp--custom--semantic--color--border--subtle);
	border-radius: 0;
	color: var(--wp--custom--semantic--color--text--primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* stylelint-disable-next-line no-descending-specificity */
.wpdl-header-v2__mobile-overlay .wpdl-mobile-search .wp-block-search__button.wp-element-button:hover {
	background: var(--wp--custom--semantic--color--border--subtle);
}

/* Category links — vertical list */
.wpdl-header-v2__mobile-overlay .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	gap: 0 !important;
}

/* stylelint-disable-next-line no-descending-specificity -- different context: mobile overlay vertical list vs category-nav horizontal */
.wpdl-header-v2__mobile-overlay .wp-block-navigation-item__content {
	font-size: 0.875rem;
	font-weight: var(--wp--custom--font--weight--medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: none;
	padding-block: var(--wp--custom--space--3);
	display: block;
	border-bottom: 0.0625rem solid var(--wp--custom--semantic--color--surface--secondary);
	width: 100%;
}

/* stylelint-disable-next-line no-descending-specificity -- suppress underline animation inherited from category-nav */
.wpdl-header-v2__mobile-overlay .wp-block-navigation-item__content::after {
	display: none; /* suppress desktop underline animation */
}

/* Social links row at bottom */
.wpdl-header-v2__mobile-social {
	gap: var(--wp--custom--space--4) !important;
	padding-top: var(--wp--custom--space--2);
}

/* Override WP per-service brand colors in mobile drawer social icons */
/* stylelint-disable-next-line no-descending-specificity */
.wpdl-header-v2__mobile-social .wp-block-social-link {
	background-color: transparent !important;
	color: var(--wp--custom--semantic--color--text--primary) !important;
}

.wpdl-header-v2__mobile-social .wp-block-social-link a {
	padding: 0;
	background: transparent;
}

/* stylelint-disable-next-line no-descending-specificity */
.wpdl-header-v2__mobile-social .wp-block-social-link-anchor svg {
	fill: var(--wp--custom--semantic--color--text--primary);
	color: var(--wp--custom--semantic--color--text--primary);
}

/* ── Tablet 768px ──────────────────────────────────────────── */
@media (width <= 47.9375rem) {
	/* Utility bar hidden on tablet.
	   (0,2,0) specificity beats body .is-layout-flex (0,1,1) from global-styles */
	.wpdl-header-v2 .wpdl-header-v2__utility {
		display: none;
	}

	/* Brand header: full-width, keep grid */
	.wpdl-header-v2__brand {
		padding-inline: var(--wp--custom--space--5);
	}

	/* Social icon hidden on tablet */
	.wpdl-header-v2__brand-left .wpdl-header-v2__social-icon {
		display: none;
	}

	/* Category nav: horizontal scroll, fades at edges */
	.wpdl-header-v2__category-nav {
		justify-content: flex-start;
		padding-inline: var(--wp--custom--space--5);
		overflow: auto hidden;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		/* stylelint-disable property-no-vendor-prefix */
		-webkit-mask-image: linear-gradient(to right, transparent 0, black 2rem, black calc(100% - 2rem), transparent 100%);
		/* stylelint-enable property-no-vendor-prefix */
		mask-image: linear-gradient(to right, transparent 0, black 2rem, black calc(100% - 2rem), transparent 100%);
		scrollbar-width: none;
	}

	.wpdl-header-v2__category-nav::-webkit-scrollbar {
		display: none;
	}

	.wpdl-header-v2__category-nav .wp-block-navigation__container,
	.wpdl-header-v2__category-nav ul {
		gap: var(--wp--custom--space--6);
		flex-wrap: nowrap;
	}
}

/* ── Mobile 375px ──────────────────────────────────────────── */
@media (width <= 29.9375rem) {
	/* Brand header: [☰ left] [Logo center] [🛒 right] */
	.wpdl-header-v2__brand {
		padding-inline: var(--wp--custom--space--4);
	}

	/* Show hamburger, hide social links */
	.wpdl-hamburger-btn {
		display: flex;
	}

	.wpdl-header-v2__brand-left {
		visibility: visible; /* restore from previous hidden state */
	}

	.wpdl-header-v2__brand-left .wpdl-header-v2__social-links {
		display: none;
	}

	/* Hide search icon from header bar — search is in the mobile overlay */
	.wpdl-header-v2__brand-right .wp-block-search {
		display: none;
	}

	/* Compact mini-cart button */
	.wpdl-header-v2__brand-right .wc-block-mini-cart__button {
		min-width: 0;
		width: 2.25rem;
		height: 2.25rem;
	}

	/* Hide horizontal category nav — replaced by vertical list in overlay.
	   (0,2,0) beats body .is-layout-flex (0,1,1) from global-styles */
	.wpdl-header-v2 .wpdl-header-v2__category-nav {
		display: none;
	}

	/* Show overlay when hamburger is open (0,3,0) */
	.wpdl-header-v2 .wpdl-header-v2__mobile-overlay.is-open {
		display: flex;
	}

	/* Announcement smaller on mobile */
	.wpdl-header-v2__announcement {
		height: auto;
		min-height: 2.25rem;
		padding-block: var(--wp--custom--space--2);
	}
}

/* Nav item "Luxury" — gold accent (Figma #c0912e = accent.secondary) */
.wpdl-header-v2 .wpdl-nav-luxury a,
.wpdl-header-v2 .wpdl-nav-luxury .wp-block-navigation-item__content {
	color: var(--wp--custom--semantic--color--accent--secondary);
}