/**
 * Global header customer actions: "Mis muestras" (heart trigger + badge +
 * panel) and the WooCommerce cart icon (.ed-header-cart, a plain link with a
 * count badge). Two separate controls with separate state (EDSamplesStore vs.
 * the WooCommerce cart) that deliberately share one visual treatment — the
 * trigger/icon/badge/label rules below are grouped, not duplicated. Both are
 * secondary controls, never a large turquoise button. Same markup renders as a
 * dropdown on desktop (>=1024px) and a right-side drawer on mobile —
 * only the positioning/sizing differs between the two breakpoints.
 */

.ed-header-samples {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
}

@media (max-width: 1023px) {
	.ed-header-account {
		/*
		 * .ed-nav-cta (which normally pushes itself + everything after it to
		 * the far right via this same trick) is display:none below 1024px,
		 * so the first control of the right-hand group (the account link) takes
		 * over that role — .ed-menu-toggle and .ed-header-samples carry no auto
		 * margin, only one item in the row needs it.
		 */
		margin-inline-start: auto;
	}
}

/* -------------------------------------------------------------------- */
/* Trigger — heart icon + count badge                                    */
/* -------------------------------------------------------------------- */

.ed-header-samples__trigger,
.ed-header-cart,
.ed-header-account {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	color: var(--ed-color-heading);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color var(--ed-transition-fast);
}

@media (min-width: 1024px) {
	/*
	 * Desktop grows the trigger into a two-line "icon + MUESTRAS" action
	 * (see referenced design). Mobile keeps the original 44x44 icon-only
	 * square untouched — no reference/need to fit a caption there.
	 */
	.ed-header-samples__trigger,
	.ed-header-cart,
	.ed-header-account {
		flex-direction: column;
		justify-content: center;
		gap: 2px;
		width: auto;
		min-width: 44px;
		height: auto;
		min-height: 44px;
		padding-block: 3px;
	}
}

@media (max-width: 480px) {
	/*
	 * Account + samples + cart + menu toggle + wordmark share one row; 40px
	 * wide (still 44px tall), 38px at <=374px, is what lets all of them fit at
	 * 360-480px without a horizontal scroll or a squashed wordmark (see the
	 * row-budget note in header.css).
	 */
	.ed-header-samples__trigger,
	.ed-header-cart,
	.ed-header-account {
		width: 40px;
	}
}

@media (max-width: 374px) {
	.ed-header-samples__trigger,
	.ed-header-cart,
	.ed-header-account {
		width: 38px;
	}
}

.ed-header-cart,
.ed-header-cart:hover,
.ed-header-account,
.ed-header-account:hover {
	text-decoration: none;
}

.ed-header-samples__trigger:hover,
.ed-header-cart:hover,
.ed-header-account:hover {
	color: var(--ed-color-link);
}

.ed-header-account.is-current {
	/* Current page only (My Account) — never a permanent accent. */
	color: var(--ed-color-link);
}

.ed-header-samples__trigger:focus-visible,
.ed-header-cart:focus-visible,
.ed-header-account:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: var(--ed-focus-outline-offset);
}

.ed-header-samples__icon-wrap,
.ed-header-cart__icon-wrap,
.ed-header-account__icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

/*
 * Lucide 24-grid glyphs (swatch-book, shopping-cart, user-round) drawn at the
 * --ed-icon-md box. Negative margins keep the previous layout footprint
 * (20x18 samples/cart, 18x18 account) so the row, labels and the badge
 * offsets below don't move.
 */
.ed-header-samples__icon,
.ed-header-cart__icon,
.ed-header-account__icon {
	width: var(--ed-icon-md);
	height: var(--ed-icon-md);
}

.ed-header-samples__icon,
.ed-header-cart__icon {
	margin-block: -1px;
}

.ed-header-account__icon {
	/* max-width: the global svg { max-width: 100% } would clamp it to the 18px wrap. */
	max-width: none;
	margin: -1px;
}

.ed-header-samples__badge,
.ed-header-cart__badge {
	position: absolute;
	/*
	 * Offsets are relative to the 20x18 icon box itself (icon-wrap), not the
	 * old 44x44 button — chosen to reproduce the exact same badge position
	 * the previous button-relative top:3px/right:3px produced, so the badge
	 * doesn't visibly move.
	 */
	top: -10px;
	right: -9px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background-color: var(--ed-color-primary);
	border-radius: var(--ed-radius-full);
	/*
	 * --ed-color-heading, not white: matches every other primary-on-accent
	 * pairing in the design system (.ed-nav-cta, .ed-button--primary) —
	 * white-on-#00B7B7 fails WCAG 2.2 AA's 4.5:1 text-contrast minimum.
	 */
	color: var(--ed-color-heading);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.ed-header-samples__badge[hidden],
.ed-header-cart__badge[hidden] {
	display: none;
}

.ed-header-samples__label,
.ed-header-cart__label,
.ed-header-account__label {
	display: none;
}

@media (min-width: 1024px) {
	.ed-header-samples__label,
	.ed-header-cart__label,
	.ed-header-account__label {
		display: block;
		color: currentColor;
		font-family: var(--ed-font-body);
		font-size: 9px;
		font-weight: 600;
		letter-spacing: 0.04em;
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
	}
}

/* -------------------------------------------------------------------- */
/* Overlay — mobile-only dim backdrop behind the drawer                  */
/* -------------------------------------------------------------------- */

.ed-header-samples__overlay {
	display: none;
}

@media (max-width: 1023px) {
	.ed-header-samples__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 95;
		background-color: rgba(16, 19, 20, 0.4);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--ed-transition-base), visibility 0s linear var(--ed-transition-base);
	}

	.ed-header-samples__overlay.is-open {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--ed-transition-base), visibility 0s;
	}

	body.admin-bar .ed-header-samples__overlay {
		top: 32px;
	}

	@media screen and (max-width: 782px) {
		body.admin-bar .ed-header-samples__overlay {
			top: 46px;
		}
	}
}

/* -------------------------------------------------------------------- */
/* Portal — the panel + overlay render here, as a sibling of             */
/* .ed-site-header (see parts/header.html for why). `display: contents`  */
/* so the wrapper itself adds no box, no stacking context, no layout —   */
/* the fixed/absolute children position exactly as they would one level  */
/* up, but are no longer inside the .is-hidden hide transform.           */
/* -------------------------------------------------------------------- */

.ed-header-samples-portal {
	display: contents;
}

/* -------------------------------------------------------------------- */
/* Panel — dropdown (desktop) / side drawer (mobile)                     */
/* -------------------------------------------------------------------- */

.ed-header-samples__panel {
	display: flex;
	flex-direction: column;
	background-color: var(--ed-color-background);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (min-width: 1024px) {
	.ed-header-samples__panel {
		/*
		 * Was `position: absolute` anchored to .ed-header-samples (the flex
		 * item, position: relative) with `top: calc(100% + 2xs); right: 0`.
		 * Now that the panel is a sibling of .ed-site-header (not a child of
		 * .ed-header-samples), it anchors to the viewport instead:
		 *  - top: the header's own published visible height + admin-bar
		 *    offset (--ed-header-stack-offset, set by header-scroll.js) so
		 *    the dropdown clears the whole header and tracks its height /
		 *    the admin bar automatically. The panel only ever opens with the
		 *    header pinned visible (refreshMenuPin in header-scroll.js), so
		 *    this value is stable while it's on screen.
		 *  - right: aligned to the shared .ed-container's right content edge
		 *    (its centred max-width plus gutter), i.e. under the trigger,
		 *    clamped to the gutter on narrow/full-bleed widths.
		 */
		position: fixed;
		top: var(--ed-header-stack-offset, 163px);
		right: max(
			var(--ed-container-gutter),
			calc((100% - var(--ed-container-width)) / 2 + var(--ed-container-gutter))
		);
		width: 380px;
		max-width: calc(100vw - var(--ed-container-gutter) * 2);
		max-height: min(70vh, 560px);
		border-radius: var(--ed-radius-lg);
		box-shadow: var(--ed-shadow-lg);
		border: 1px solid var(--ed-color-border);
		z-index: 50;
		transform: translateY(-6px);
		transition: opacity var(--ed-transition-fast), transform var(--ed-transition-fast), visibility 0s linear var(--ed-transition-fast);
	}

	.ed-header-samples__panel.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		transition: opacity var(--ed-transition-fast), transform var(--ed-transition-fast), visibility 0s;
	}
}

@media (max-width: 1023px) {
	.ed-header-samples__panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(360px, 88vw);
		height: 100%;
		height: 100dvh;
		z-index: 96;
		box-shadow: var(--ed-shadow-lg);
		transform: translateX(100%);
		transition: opacity var(--ed-transition-base), transform var(--ed-transition-base), visibility 0s linear var(--ed-transition-base);
	}

	.ed-header-samples__panel.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(0);
		transition: opacity var(--ed-transition-base), transform var(--ed-transition-base), visibility 0s;
	}

	body.admin-bar .ed-header-samples__panel {
		top: 32px;
	}

	@media screen and (max-width: 782px) {
		body.admin-bar .ed-header-samples__panel {
			top: 46px;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.ed-header-samples__overlay,
	.ed-header-samples__panel {
		transition: opacity var(--ed-transition-fast), visibility 0s linear var(--ed-transition-fast) !important;
		transform: none !important;
	}

	.ed-header-samples__overlay.is-open,
	.ed-header-samples__panel.is-open {
		transition: opacity var(--ed-transition-fast), visibility 0s !important;
	}
}

body.ed-samples-panel-open {
	overflow: hidden;
}

@media (min-width: 1024px) {
	body.ed-samples-panel-open {
		overflow: auto;
	}
}

/* -------------------------------------------------------------------- */
/* Panel chrome — title bar + scrollable body                           */
/* -------------------------------------------------------------------- */

.ed-header-samples__bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ed-space-sm);
	flex: none;
	padding: var(--ed-space-md);
	border-bottom: 1px solid var(--ed-color-border);
}

.ed-header-samples__title {
	margin: 0;
	color: var(--ed-color-heading);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-md);
}

.ed-header-samples__count {
	margin: 2px 0 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

.ed-header-samples__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	color: var(--ed-color-muted);
	background: none;
	border: 0;
	border-radius: var(--ed-radius-full);
	cursor: pointer;
	transition: background-color var(--ed-transition-fast), color var(--ed-transition-fast);
}

.ed-header-samples__close:hover {
	background-color: var(--ed-color-surface-alt);
	color: var(--ed-color-heading);
}

.ed-header-samples__close:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 1px;
}

.ed-header-samples__close svg {
	/* Lucide x */
	width: var(--ed-icon-md);
	height: var(--ed-icon-md);
}

.ed-header-samples__body {
	flex: 1 1 auto;
	overflow-y: auto;
}

/* -------------------------------------------------------------------- */
/* Empty state                                                           */
/* -------------------------------------------------------------------- */

.ed-header-samples__empty {
	padding: var(--ed-space-xl) var(--ed-space-md);
	text-align: center;
}

.ed-header-samples__empty p {
	margin: 0 0 var(--ed-space-md);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

/* -------------------------------------------------------------------- */
/* Sample list                                                           */
/* -------------------------------------------------------------------- */

.ed-header-samples__list {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-2xs);
	margin: 0;
	padding: var(--ed-space-sm) var(--ed-space-md);
	list-style: none;
}

.ed-header-samples__item {
	display: flex;
	align-items: center;
	gap: var(--ed-space-sm);
	padding: var(--ed-space-2xs);
	border-radius: var(--ed-radius-sm);
}

.ed-header-samples__thumb {
	display: block;
	flex: none;
	width: 40px;
	height: 40px;
	overflow: hidden;
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-sm);
}

.ed-header-samples__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ed-header-samples__item-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.ed-header-samples__item-primary {
	overflow: hidden;
	color: var(--ed-color-heading);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ed-header-samples__item-secondary {
	overflow: hidden;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-xs);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ed-header-samples__item-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	color: var(--ed-color-muted);
	background: none;
	border: 0;
	border-radius: var(--ed-radius-full);
	cursor: pointer;
}

.ed-header-samples__item-remove:hover {
	background-color: var(--ed-color-surface-alt);
	color: var(--ed-color-error);
}

.ed-header-samples__item-remove:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 1px;
}

.ed-header-samples__item-remove svg {
	width: 14px;
	height: 14px;
}

/* -------------------------------------------------------------------- */
/* Footer CTA — sticky so it stays reachable while the list scrolls      */
/* -------------------------------------------------------------------- */

.ed-header-samples__footer {
	position: sticky;
	bottom: 0;
	flex: none;
	padding: var(--ed-space-sm) var(--ed-space-md) var(--ed-space-md);
	background-color: var(--ed-color-background);
	border-top: 1px solid var(--ed-color-border);
}

.ed-header-samples__cta {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.ed-header-samples__cta .wp-block-button__link {
	width: 100%;
}