/**
 * AF Commerce — header, announcement bar, search and mobile drawer trigger.
 *
 * The header is a three-track grid rather than a flex row so the search field
 * can be genuinely centred regardless of how wide the logo or the action icons
 * turn out to be. A flex row would let a long store name push the search off
 * centre, which is the most common way this layout goes wrong.
 */

/* -------------------------------------------------------------------------
 * 1. Announcement bar
 * ---------------------------------------------------------------------- */

.af-announce {
	background: var(--af-announce-bg);
	color: var(--af-announce-color);
	font-size: var(--af-fs-caption);
}

.af-announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--af-space-md);
	min-height: 38px;
	padding-block: 6px;
	text-align: center;
}

.af-announce__messages {
	flex: 1 1 auto;
}

.af-announce__message {
	margin: 0;
}

.af-announce__message a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.af-announce__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	opacity: 0.75;
}

.af-announce__close:hover {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * 2. Header shell
 * ---------------------------------------------------------------------- */

.af-header {
	position: relative;
	z-index: 60;
	background: var(--af-header-bg);
	border-bottom: 1px solid var(--af-border);
}

.af-header__main {
	position: relative;
}

.af-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--af-space-md);
	min-height: 72px;
	padding-block: var(--af-space-sm);
}

.af-header__burger {
	display: grid;
	place-items: center;
	width: var(--af-tap-target);
	height: var(--af-tap-target);
	margin-inline-start: calc(var(--af-space-sm) * -1);
	padding: 0;
	border: 0;
	border-radius: var(--af-radius-sm);
	background: transparent;
	color: var(--af-primary);
}

.af-header__brand {
	display: flex;
	align-items: center;
}

.af-header__search {
	min-width: 0;
	justify-self: center;
	width: 100%;
	max-width: var(--af-search-w, var(--af-header-search-max));
}

.af-header__actions {
	display: flex;
	align-items: center;
	gap: 2px;
	justify-self: end;
}

/* Sticky. The spacer element preserves document height, so nothing shifts. */
.af-header--sticky.is-stuck {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	box-shadow: var(--af-shadow-2);
}

.af-header--sticky-compact.is-stuck .af-header__inner {
	min-height: 60px;
}

.af-header--sticky-compact.is-stuck .af-header__nav {
	display: none;
}

.af-header__spacer {
	display: none;
}

.af-header__spacer.is-active {
	display: block;
}

/* Layout variants. */
.af-header--search-right .af-header__search {
	max-width: 320px;
	justify-self: end;
}

.af-header--stacked .af-header__inner {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"brand actions"
		"search search";
	row-gap: var(--af-space-sm);
}

.af-header--stacked .af-header__brand {
	grid-area: brand;
	justify-content: flex-start;
}

.af-header--stacked .af-header__actions {
	grid-area: actions;
}

.af-header--stacked .af-header__search {
	grid-area: search;
	max-width: none;
}

.af-header--stacked .af-header__burger {
	display: none;
}

.af-header--minimal .af-header__search {
	display: none;
}

@media (min-width: 1100px) {
	.af-header--minimal .af-header__inner {
		grid-template-columns: auto 1fr auto;
	}
}

/* -------------------------------------------------------------------------
 * 3. Logo
 * ---------------------------------------------------------------------- */

.af-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--af-space-sm);
	color: var(--af-heading);
	font-family: var(--af-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.af-logo img {
	width: auto;
	max-width: var(--af-logo-width);
	max-height: 52px;
	object-fit: contain;
}

/* The text fallback is a block element wrapping a link, not a link itself. */
.af-logo--text {
	margin: 0;
}

.af-logo--text a {
	display: inline-flex;
	align-items: center;
	gap: var(--af-space-sm);
	color: inherit;
	text-decoration: none;
}

.af-logo__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--af-radius-sm);
	background: var(--af-primary);
	color: #fff;
	font-size: 0.95rem;
}

.af-logo__name {
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * 4. Search
 * ---------------------------------------------------------------------- */

.af-search {
	position: relative;
	width: 100%;
}

.af-search__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--af-space-sm);
	padding-inline-start: 14px;
	border: 1px solid var(--af-border);
	border-radius: 999px;
	background: var(--af-surface);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.af-search__field:focus-within {
	border-color: var(--af-primary);
	background: var(--af-background);
}

.af-search__icon {
	flex: none;
	color: var(--af-muted);
}

.af-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: var(--af-fs-small);
}

.af-search__input:focus {
	box-shadow: none;
	outline: none;
}

.af-search__input::-webkit-search-cancel-button {
	display: none;
}

.af-search__clear {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--af-muted);
}

.af-search__submit {
	flex: none;
	min-height: 46px;
	padding-inline: 22px;
	border: 0;
	border-start-end-radius: 999px;
	border-end-end-radius: 999px;
	background: var(--af-primary);
	color: #fff;
	font-family: var(--af-font-button);
	font-size: var(--af-fs-small);
	font-weight: 600;
}

.af-search__submit-text {
	display: none;
}

@media (min-width: 992px) {
	.af-search__submit-text {
		display: inline;
	}
}

.af-search__submit:hover {
	background: var(--af-accent);
}

/* Suggestions panel. */
.af-search__panel {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline: 0;
	z-index: 70;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	padding: var(--af-space-md);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-md);
	background: var(--af-background);
	box-shadow: var(--af-shadow-3);
}

.af-search__preset + .af-search__preset,
.af-search__results:not(:empty) {
	margin-top: var(--af-space-md);
	padding-top: var(--af-space-md);
	border-top: 1px solid var(--af-border);
}

.af-search__preset-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--af-space-sm);
	margin: 0 0 var(--af-space-sm);
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.af-search__clear-recent {
	padding: 0;
	border: 0;
	background: none;
	color: var(--af-accent);
	font-size: var(--af-fs-caption);
	text-transform: none;
	letter-spacing: 0;
}

.af-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--af-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-search__results {
	display: grid;
	gap: var(--af-space-md);
}

.af-search__products {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The row is the option for keyboard purposes, so the highlight lives on the
 * list item and not on the anchor — otherwise arrowing through the list would
 * move focus and steal it from the search field.
 */
.af-search__product {
	border-radius: var(--af-radius-sm);
}

.af-search__product:hover,
.af-search__product.is-active {
	background: var(--af-surface);
}

.af-search__product-link {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: var(--af-space-sm);
	padding: 6px;
	color: inherit;
	text-decoration: none;
}

.af-search__thumb {
	width: 56px;
	height: 70px;
	border-radius: var(--af-radius-sm);
	object-fit: cover;
	background: var(--af-surface);
}

.af-search__product-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.af-search__product-brand {
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.af-search__product-title {
	overflow: hidden;
	font-size: var(--af-fs-small);
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.af-search__product-price {
	font-family: var(--af-font-price);
	font-size: var(--af-fs-small);
	font-weight: 600;
}

.af-search__product-price del {
	margin-inline-end: 4px;
	color: var(--af-muted);
	font-weight: 400;
}

.af-search__group-title {
	margin: 0 0 var(--af-space-sm);
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.af-search__group .af-chip__count {
	margin-inline-start: 4px;
	color: var(--af-muted);
	font-variant-numeric: tabular-nums;
}

.af-search__chips li.is-active .af-chip {
	border-color: var(--af-primary);
	background: var(--af-surface);
}

.af-search__all {
	display: block;
	padding: 10px;
	border-radius: var(--af-radius-sm);
	background: var(--af-surface);
	font-size: var(--af-fs-small);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.af-search__empty {
	margin: 0;
	padding: var(--af-space-sm) 0;
	color: var(--af-muted);
	font-size: var(--af-fs-small);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 5. Action icons
 * ---------------------------------------------------------------------- */

.af-action {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: var(--af-tap-target);
	min-height: var(--af-tap-target);
	padding-inline: 6px;
	border: 0;
	background: transparent;
	color: var(--af-primary);
	font-size: var(--af-fs-caption);
	text-decoration: none;
}

.af-action:hover {
	color: var(--af-accent);
}

.af-action__label {
	font-size: 11px;
	line-height: 1;
}

.af-action__count {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 2px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--af-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 6. Locale dropdown
 * ---------------------------------------------------------------------- */

.af-locale {
	position: relative;
}

.af-locale__toggle {
	flex-direction: row;
	gap: 4px;
	padding-inline: 10px;
}

.af-locale__current {
	font-size: var(--af-fs-caption);
	font-weight: 600;
	white-space: nowrap;
}

.af-dropdown {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-end: 0;
	z-index: 70;
	min-width: 200px;
	padding: var(--af-space-sm);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-md);
	background: var(--af-background);
	box-shadow: var(--af-shadow-3);
}

.af-dropdown__title {
	margin: var(--af-space-xs) var(--af-space-sm);
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.af-dropdown__list {
	margin: 0 0 var(--af-space-sm);
	padding: 0;
	list-style: none;
}

.af-dropdown__list a {
	display: block;
	padding: 8px var(--af-space-sm);
	border-radius: var(--af-radius-sm);
	color: inherit;
	font-size: var(--af-fs-small);
	text-decoration: none;
}

.af-dropdown__list a:hover,
.af-dropdown__list a[aria-current="true"] {
	background: var(--af-surface);
}

/* -------------------------------------------------------------------------
 * 7. Primary navigation row
 * ---------------------------------------------------------------------- */

.af-header__nav {
	border-top: 1px solid var(--af-border);
}

.af-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--af-space-lg);
	min-height: 48px;
}

.af-nav__list > li {
	position: relative;
}

.af-nav__list a,
.af-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 12px;
	color: var(--af-text);
	font-family: var(--af-font-nav);
	font-size: var(--af-fs-small);
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-transform: var(--af-nav-case);
}

.af-nav__list a:hover,
.af-nav__list .current-menu-item > a {
	color: var(--af-accent);
}

.af-menu-link__badge {
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--af-sale);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.af-menu-link__icon {
	width: 1.1em;
	height: 1.1em;
}

.af-menu-link__text {
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * 8. Mobile
 * ---------------------------------------------------------------------- */

@media (max-width: 1099px) {
	.af-header__nav {
		display: none;
	}
}

@media (min-width: 1100px) {
	.af-header__burger {
		display: none;
	}
}

@media (max-width: 781px) {
	.af-header__inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"burger brand actions"
			"search search search";
		row-gap: var(--af-space-sm);
		min-height: 60px;
	}

	.af-header__burger { grid-area: burger; }
	.af-header__brand { grid-area: brand; justify-content: center; }
	.af-header__actions { grid-area: actions; }

	.af-header__search {
		grid-area: search;
		max-width: none;
	}

	.af-logo img {
		max-width: var(--af-logo-width-mobile);
	}

	.af-search__submit {
		display: none;
	}

	.af-search__input {
		min-height: 42px;
	}

	.af-action__label {
		display: none;
	}

	/* A full-width sheet is easier to read on a phone than a floating panel. */
	.af-search__panel {
		position: fixed;
		inset: auto 0 0 0;
		max-height: 72vh;
		border-radius: var(--af-radius-lg) var(--af-radius-lg) 0 0;
	}
}