/**
 * Header and footer: the bar that keeps search and cart on screen, visual fixes, and motion.
 * Footer rules carry a `body` prefix because footer.css is loaded late (preload) and would otherwise win.
 *
 * @package Armenius
 */

/* -----------------------------------------------------------------------------
 * Visual fixes: header
 * -------------------------------------------------------------------------- */

/* Flags keep their size; the row used to squash them to almost nothing on narrow phones. */
.store-header__language-switcher,
.aml-language-switcher,
.aml-language-switcher-flags,
.aml-lang-link,
.aml-lang-flag {
	flex: none;
}

/* Top bar stays on one row in every language. */
.store-header__utility-left,
.store-header__utility-right {
	flex-wrap: nowrap;
	white-space: nowrap;
}

/* Same grey as the All Categories button. */
.store-header__nav-row::before {
	background: #454444;
}

/* Long search hints end in "..." instead of running under the button or dropdown. */
.store-header__search .armenius-infield__label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Phones show the shorter search hint, which fits the box in full. */
@media (max-width: 760px) {
	.store-header__search-label-full {
		display: none;
	}

	.store-header__search-label-short[hidden] {
		display: inline;
	}
}

/* Bigger tap areas with no change to the layout. */
.store-header__utility-link,
.aml-lang-link,
.store-header__theme-switch {
	position: relative;
}

.store-header__utility-link--account-plain::after,
.store-header__utility-link--phone::after,
.store-header__utility-link--email::after,
.store-header__utility-link--delivery::after,
.store-header__utility-link--store-mobile::after,
.store-header__utility-link--contact::after,
.aml-lang-link::after,
.store-header__theme-switch::after {
	content: "";
	position: absolute;
	inset: -10px -4px;
}

@media (min-width: 1025px) {
	.store-header__all-cats-details > .store-header__all-cats {
		padding-inline: 10px;
		white-space: nowrap;
	}
}

/* Top bar on small laptops. */
@media (min-width: 1025px) and (max-width: 1365px) {
	.store-header__utility-pfx {
		display: none;
	}

	.store-header__utility-left,
	.store-header__utility-right {
		gap: 20px 22px;
	}

	/* Menu stays on one straight row. */
	.store-header__nav-list {
		flex-wrap: nowrap;
	}

	.store-header__nav-list > li {
		flex: 1 1 auto;
	}

	.store-header__nav-list > li > a {
		--hf-nav-pad: clamp(3px, 0.56vw, 14px);
		padding-inline: var(--hf-nav-pad);
		font-size: clamp(13px, 1.2vw, 16px);
	}
}

@media (min-width: 1025px) and (max-width: 1279px) {
	.store-header__utility-left,
	.store-header__utility-right {
		gap: 14px;
	}

	.store-header__utility-link--email .store-header__utility-text,
	.store-header__utility-link--delivery .store-header__utility-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.store-header__nav-row > .store-header__all-cats-details {
		flex: 0 0 auto;
		min-width: 0;
	}

	.store-header__all-cats-details > .store-header__all-cats {
		gap: 7px;
		padding-inline: 9px;
		font-size: clamp(13.5px, 1.2vw, 16px);
	}
}

@media (min-width: 1025px) and (max-width: 1130px) {
	.store-header__all-cats-caret.armenius-icon {
		display: none;
	}
}

/* Phones: the top bar fits without pushing anything off. */
@media (max-width: 1024px) {
	.store-header__utility-left {
		overflow: visible;
	}
}

@media (max-width: 430px) {
	.store-header__utility-left,
	.store-header__utility-right {
		gap: 10px;
	}

	.store-header__utility-inner {
		gap: 10px;
	}

	.store-header__utility-link {
		gap: 5px;
	}

	.store-header__utility-text--account-first {
		max-width: 96px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (max-width: 349px) {
	.store-header__utility-text--account-first {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
 * Search and cart stay on screen after scrolling: desktop
 * A 54 px bar. The search is 40 px tall, 7 px above and below, 12 px either side.
 * -------------------------------------------------------------------------- */

.store-header__stuck-tools {
	--store-search-h: 40px;
	--store-icon-btn: 46px;
	--armenius-infield-input-min-h: 40px;
	--armenius-infield-input-border: #fff;
	--armenius-infield-label-fs: 15px;
	--armenius-infield-label-color: #6a6a6a;
	--armenius-infield-label-top-focus: 3px;
	--armenius-infield-label-scale-focus: 0.68;
	--armenius-infield-pad-x: 14px;
	--armenius-infield-pad-x-focus: 14px;
	flex: 1 1 auto;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 0 12px;
	background: var(--color-accent);
	box-sizing: border-box;
}

@media (min-width: 1025px) {
	/* The page keeps the height of the resting menu row, so nothing below moves when the taller bar appears. */
	body.armenius-nav-stuck .store-header:has(.store-header__stuck-tools--desktop) {
		padding-top: var(--hf-nav-rest-h, var(--store-nav-h)) !important;
	}

	body.armenius-nav-stuck .store-header__nav-row:has(.store-header__stuck-tools--desktop) {
		min-height: 54px;
	}
}

body.armenius-nav-stuck .store-header__nav-row:has(.store-header__stuck-tools--desktop) .store-header__primary {
	display: none;
}

body.armenius-nav-stuck .store-header__stuck-tools--desktop[hidden] {
	display: flex;
}

body.armenius-nav-stuck .store-header__tier--nav {
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.14);
}

/* The menu links are gone in this state, so their dimming overlay must not linger. */
body.armenius-nav-stuck.armenius-mega-open:not(.armenius-all-cats-open)::before {
	opacity: 0;
	visibility: hidden;
}

.store-header__search--stuck {
	flex: 1 1 auto;
	max-width: none;
	margin: 0;
}

.store-header__search-form--stuck .store-header__search-actions {
	flex: none;
}

/* Search box in the bar, on every device: a fixed height, so it always matches its button and nothing shifts when typing starts. */
.store-header__search-form--stuck .store-header__search-input.armenius-infield__input,
body.armenius-mobile-tools-stuck .store-header__search-form--compact .store-header__search-input.armenius-infield__input {
	height: 40px;
	min-height: 40px;
	padding: 0 var(--hf-search-pad, 14px);
	font-size: 15px;
	line-height: 1.3;
	background: #fff;
	border: 0;
	border-radius: 0;
}

.store-header__search-form--stuck .armenius-infield:focus-within .store-header__search-input.armenius-infield__input,
.store-header__search-form--stuck .armenius-infield--filled .store-header__search-input.armenius-infield__input,
body.armenius-mobile-tools-stuck .store-header__search-form--compact .armenius-infield:focus-within .store-header__search-input.armenius-infield__input,
body.armenius-mobile-tools-stuck .store-header__search-form--compact .armenius-infield--filled .store-header__search-input.armenius-infield__input {
	padding: 15px var(--hf-search-pad, 14px) 3px;
}

.store-header__search-form--stuck .store-header__search-btn--submit,
body.armenius-mobile-tools-stuck .store-header__search-form--compact .store-header__search-btn--submit {
	flex: none;
	width: 46px;
	min-width: 46px;
	height: 40px;
	min-height: 40px;
	background: #2e2e2e;
	border-radius: 0;
}

/* Cart in the bar: dark on yellow, and it must not turn yellow on hover. */
.store-header__cart--stuck,
.store-header__cart--stuck:hover,
.store-header__cart--stuck:focus-visible {
	flex: none;
	min-height: 40px;
	color: #111;
}

button.store-header__cart--stuck {
	position: relative;
	padding: 0;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
}

/* Tap area wider than the icon, with no change to the layout. */
button.store-header__cart--stuck::after {
	content: "";
	position: absolute;
	inset: -7px -6px;
}

.store-header__cart--stuck .store-header__cart-iconwrap {
	width: 28px;
	height: 28px;
}

.store-header__cart--stuck .store-header__cart-icon.armenius-icon {
	width: 28px;
	height: 28px;
}

.store-header__cart--stuck .store-header__cart-badge {
	top: -6px;
	right: -6px;
	min-width: 17px;
	height: 17px;
	font-size: 10.5px;
	color: #fff;
	background: #2e2e2e;
}

/* -----------------------------------------------------------------------------
 * Search and cart stay on screen after scrolling: tablets and phones
 * One row instead of two; the page below does not move.
 * Phones: 56 px bar, 40 px controls, 8 px above and below and between, 10 px at the screen edges.
 * Tablets: the same bar as desktop.
 * -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	body.armenius-mobile-tools-stuck .store-header {
		padding-top: var(--hf-tools-rest-h, 107px) !important;
	}

	/* Stays in place while live search results are open. */
	body.armenius-mobile-tools-stuck .store-header__tier--mobile-tools:has(.store-header__search-live:not([hidden])) {
		position: fixed;
	}

	body.armenius-mobile-tools-stuck .store-header__tier--mobile-tools {
		--store-masthead-tools-h: 40px;
		--store-search-h: 40px;
		--store-icon-btn: 46px;
		--armenius-infield-input-min-h: 40px;
		--armenius-infield-input-border: #fff;
		--armenius-infield-label-fs: 15px;
		--armenius-infield-label-color: #6a6a6a;
		--armenius-infield-label-top-focus: 3px;
		--armenius-infield-label-scale-focus: 0.68;
		--armenius-infield-pad-x: 14px;
		--armenius-infield-pad-x-focus: 14px;
		background: var(--color-accent);
	}

	body.armenius-mobile-tools-stuck .store-header__mobile-tools-inner {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		padding: 8px 10px;
	}

	body.armenius-mobile-tools-stuck .store-header__cats-trigger {
		position: relative;
		flex: 0 0 44px;
		width: 44px;
		height: 40px;
		min-height: 40px;
		padding: 0;
		background: #fff;
		border-radius: 0;
	}

	body.armenius-mobile-tools-stuck .store-header__cats-trigger-label,
	body.armenius-mobile-tools-stuck .store-header__cats-trigger-caret.armenius-icon {
		display: none;
	}

	body.armenius-mobile-tools-stuck .store-header__search--mobile {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Typing stays at 16 px: iPhones zoom the whole page into anything smaller. */
	body.armenius-mobile-tools-stuck .store-header__search-form--compact .store-header__search-input.armenius-infield__input {
		font-size: 16px;
	}

	body.armenius-mobile-tools-stuck .store-header__search-form--compact .armenius-infield__label {
		inset-inline-start: var(--hf-search-pad, 14px);
		max-width: calc(100% - 2 * var(--hf-search-pad, 14px));
	}

	body.armenius-mobile-tools-stuck .store-header__stuck-tools--mobile[hidden] {
		display: flex;
	}

	.store-header__stuck-tools--mobile {
		flex: none;
		padding: 0;
		background: transparent;
	}

	.store-header__stuck-tools--mobile .store-header__cart-price {
		display: none;
	}
}

/* Phones: controls are 40 px tall, with an invisible tap area up to 48 px. */
@media (max-width: 760px) {
	body.armenius-mobile-tools-stuck .store-header__cats-trigger::after,
	body.armenius-mobile-tools-stuck .store-header__search-form--compact .store-header__search-btn--submit::after {
		content: "";
		position: absolute;
		inset: -4px 0;
	}

	body.armenius-mobile-tools-stuck .store-header__search-form--compact .store-header__search-btn--submit {
		position: relative;
	}
}

/* Small phones: a little more room, so the search hint still fits. */
@media (max-width: 380px) {
	body.armenius-mobile-tools-stuck .store-header__tier--mobile-tools {
		--hf-search-pad: 10px;
		--armenius-infield-label-fs: 13.5px;
	}
}

/* Tablets have room for the words: All Categories fills the bar's height at the left edge, as on desktop. */
@media (min-width: 761px) and (max-width: 1024px) {
	body.armenius-mobile-tools-stuck .store-header__mobile-tools-inner {
		gap: 12px;
		min-height: 54px;
		padding: 0 12px 0 0;
	}

	body.armenius-mobile-tools-stuck .store-header__cats-trigger {
		flex: 0 0 auto;
		width: auto;
		min-width: 170px;
		height: 54px;
		min-height: 54px;
		padding: 0 14px;
		color: #fff;
		background: #454444;
	}

	body.armenius-mobile-tools-stuck .store-header__cats-trigger-icon.armenius-icon {
		color: #fff;
	}

	body.armenius-mobile-tools-stuck .store-header__cats-trigger-label {
		display: inline;
		white-space: nowrap;
	}

	.store-header__stuck-tools--mobile .store-header__cart-price {
		display: inline;
	}
}

/* -----------------------------------------------------------------------------
 * Visual fixes: product cards and footer
 * -------------------------------------------------------------------------- */

/* Long product names no longer push category pages sideways. */
.armenius-product-card__title a {
	overflow-wrap: anywhere;
}

.woocommerce ul.products li.product {
	min-width: 0;
}

/* The American Express logo is shown whole. */
body .site-footer .site-footer__pay-icon {
	object-fit: contain;
}

body .site-footer .site-footer__contact-link {
	overflow-wrap: anywhere;
}

.site-footer__contact-stack {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.site-footer__maps {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__maps a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: #fff;
	box-sizing: border-box;
}

.site-footer__maps img {
	display: block;
	width: 30px;
	height: 30px;
	object-fit: contain;
}

/* Larger tap areas on footer links, with the same spacing. */
@media (max-width: 1024px) {
	body .site-footer .site-footer__menu-link,
	body .site-footer .site-footer__contact-link {
		position: relative;
	}

	body .site-footer .site-footer__menu-link::after,
	body .site-footer .site-footer__contact-link::after {
		content: "";
		position: absolute;
		inset: -7px 0;
	}
}

/* Payment logos stay on one row on small phones. */
@media (max-width: 400px) {
	body .site-footer .site-footer__pay-row {
		flex-wrap: nowrap;
		column-gap: 6px;
	}

	body .site-footer .site-footer__pay-slot {
		flex: 1 1 0;
		width: auto;
		height: auto;
		max-width: 52px;
		aspect-ratio: 52 / 34;
	}
}

/* -----------------------------------------------------------------------------
 * Motion. Transform and opacity only; nothing here moves the layout.
 * -------------------------------------------------------------------------- */

@keyframes hf-bar-in {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: none;
	}
}

@keyframes hf-tools-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hf-drop {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hf-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes hf-cart-bump {
	0% {
		transform: scale(1);
	}

	35% {
		transform: scale(1.28) rotate(-7deg);
	}

	65% {
		transform: scale(0.94) rotate(3deg);
	}

	100% {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* The bar arrives. */
	body.armenius-nav-stuck .store-header__stuck-tools--desktop[hidden] {
		animation: hf-tools-in 0.24s ease-out;
	}

	body.armenius-mobile-tools-stuck .store-header__tier--mobile-tools {
		animation: hf-bar-in 0.22s ease-out;
	}

	/* Menu links: an underline grows from the centre. */
	.store-header__primary .store-header__nav-list > li > a {
		position: relative;
	}

	.store-header__primary .store-header__nav-list > li > a::after {
		content: "";
		position: absolute;
		right: var(--hf-nav-pad, 14px);
		bottom: 11px;
		left: var(--hf-nav-pad, 14px);
		height: 2px;
		background: #2e2e2e;
		transform: scaleX(0);
		transition: transform 0.22s ease;
	}

	.store-header__primary .store-header__nav-list > li:hover > a::after,
	.store-header__primary .store-header__nav-list > li > a:focus-visible::after {
		transform: scaleX(1);
	}

	/* Menus and results fade in as they open. */
	.store-header__nav-list > li:hover > ul.sub-menu {
		animation: hf-fade 0.16s ease-out;
	}

	.store-header__all-cats-details.is-open .store-header__all-cats-dropdown {
		animation: hf-fade 0.16s ease-out;
	}

	.store-header__account-details[open] .store-header__account-panel {
		animation: hf-drop 0.18s ease-out;
	}

	.store-header__search-live:not([hidden]) {
		animation: hf-drop 0.16s ease-out;
	}

	.store-header__account-caret.armenius-icon,
	.store-header__all-cats-caret.armenius-icon {
		transition: transform 0.2s ease, color 0.2s ease;
	}

	/* Small hover touches. */
	.store-header__utility-icon.armenius-icon,
	.aml-lang-flag,
	.store-header__search-btn-icon.armenius-icon,
	.store-header__cart-icon.armenius-icon {
		transition: transform 0.2s ease;
	}

	@media (hover: hover) {
		.store-header__utility-link:hover .store-header__utility-icon.armenius-icon,
		.aml-lang-link:hover .aml-lang-flag {
			transform: translateY(-1px);
		}

		.store-header__search-btn:hover .store-header__search-btn-icon.armenius-icon {
			transform: scale(1.12);
		}

		.store-header__cart:hover .store-header__cart-icon.armenius-icon {
			transform: rotate(-6deg) scale(1.06);
		}
	}

	/* The cart reacts when something is added. */
	.store-header__cart-iconwrap.is-bump {
		animation: hf-cart-bump 0.5s ease;
	}

	/* Footer. */
	body .site-footer .site-footer__menu-link-inner,
	body .site-footer .site-footer__contact-icon,
	body .site-footer .site-footer__maps a,
	body .site-footer .site-footer__pay-slot {
		transition: transform 0.2s ease;
	}

	@media (hover: hover) {
		body .site-footer .site-footer__menu a:hover .site-footer__menu-link-inner {
			transform: translateX(3px);
		}

		body .site-footer .site-footer__contact-item:hover .site-footer__contact-icon {
			transform: translateY(-1px);
		}

		body .site-footer .site-footer__maps a:hover,
		body .site-footer .site-footer__pay-slot:hover {
			transform: translateY(-2px);
		}

		body .site-footer .site-footer__cta:hover {
			transform: translateY(-1px);
		}
	}
}