/*
 * Global "mega" site search overlay.
 * Full-width backdrop (scrim + sheet); the bar + results inner are clamped to
 * the site container (--at-container-max, 1440px). Restrained palette — orange
 * is reserved for the token highlight and the active-row accent only.
 */

/* Trigger buttons in the nav -------------------------------------------------- */
.at-nav-search-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0;
	background: transparent; border: 0; border-radius: var(--radius-pill);
	color: var(--fg-1); cursor: pointer;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.at-nav-search-toggle:hover { background: rgba(0, 0, 0, 0.06); }
.at-nav-search-toggle:active { transform: scale(0.94); }
.at-nav-search-toggle svg { display: block; }

/* Default (transparent nav over a dark hero, not scrolled): the search toggle
   goes white to stay visible over the photo — mirrors the white burger bars.
   Light-hero pages (bad-nav-light / at-nav-on-light / bad-ecu-quiz-open) force
   the dark icon via their own higher-specificity rules. */
.at-nav:not(.is-scrolled) .at-nav-search-toggle { color: #ffffff; }
.at-nav:not(.is-scrolled) .at-nav-search-toggle:hover { background: rgba(255, 255, 255, 0.12); }

/* Desktop lives in the utility row; the mobile one sits by the burger. */
.at-nav-search-toggle--mobile { display: none; }

@media (max-width: 1024px) {
	.at-nav-utility .at-nav-search-toggle { display: none; }
	.at-nav-search-toggle--mobile { display: inline-flex; margin-right: 4px; }
}

/* Lock the page behind the open overlay. */
html.at-gsearch-open, html.at-gsearch-open body { overflow: hidden; }

/* Overlay --------------------------------------------------------------------- */
.at-gsearch {
	/* Full-screen search overlay: must sit above ALL page chrome — the sticky
	   filter sidebar, mobile nav (1000), woo header (1001) and the mobile
	   filters modal (1200). */
	position: fixed; inset: 0; z-index: 1300;
	display: block;
}
.at-gsearch[hidden] { display: none; }

.at-gsearch__scrim {
	position: absolute; inset: 0;
	background: rgba(5, 5, 5, 0.36);
	-webkit-backdrop-filter: blur(0px) saturate(120%);
	        backdrop-filter: blur(0px) saturate(120%);
	opacity: 0;
	transition: opacity 320ms cubic-bezier(.32, .72, 0, 1),
		backdrop-filter 380ms cubic-bezier(.32, .72, 0, 1),
		-webkit-backdrop-filter 380ms cubic-bezier(.32, .72, 0, 1);
}
.at-gsearch.is-open .at-gsearch__scrim {
	opacity: 1;
	-webkit-backdrop-filter: blur(4px) saturate(120%);
	        backdrop-filter: blur(4px) saturate(120%);
}

/* Floating, rounded panel: clamped to the site container (1440px), centred,
   and dropped down from the top edge with breathing room above it. */
.at-gsearch__sheet {
	position: absolute;
	/* top gap above the panel; the same value is subtracted from max-height. */
	--at-gsearch-top: clamp(20px, 6vh, 72px);
	top: var(--at-gsearch-top); left: 0; right: 0;
	width: min(100% - 32px, var(--at-container-max));
	margin: 0 auto;
	display: flex; flex-direction: column;
	max-height: calc(100vh - var(--at-gsearch-top) - 32px);
	background: var(--pure-white, #fff);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-3);
	overflow: hidden;
	transform: translateY(-22px);
	opacity: 0;
	/* A touch of overshoot at the tail = "settles into place" feel. */
	transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 240ms ease;
	will-change: transform;
}
.at-gsearch.is-open .at-gsearch__sheet { transform: translateY(0); opacity: 1; }

/* Search bar ------------------------------------------------------------------ */
.at-gsearch__bar {
	position: relative;
	flex: 0 0 auto;
	border-bottom: 1px solid var(--border-2);
}
/* Focus underline sweeps in from the left when the field is active. */
.at-gsearch__bar::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
	height: 2px; background: var(--performance-orange);
	transform: scaleX(0); transform-origin: left;
	transition: transform 460ms cubic-bezier(.16, 1, .3, 1);
}
.at-gsearch__bar:focus-within::after { transform: scaleX(1); }
.at-gsearch__bar-inner {
	display: flex; align-items: center; gap: 14px;
	max-width: var(--at-container-max);
	margin: 0 auto;
	padding: 20px var(--at-gutter);
}
.at-gsearch__bar-icon { color: var(--fg-3); flex: 0 0 auto; }
.at-gsearch__input {
	flex: 1 1 auto; min-width: 0;
	border: 0; outline: 0; background: transparent;
	font-family: var(--font-display);
	font-size: clamp(20px, 2.6vw, 30px);
	font-weight: 400; letter-spacing: -0.01em;
	color: var(--fg-1);
	padding: 4px 0;
}
.at-gsearch__input::placeholder { color: var(--fg-3); }
.at-gsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.at-gsearch__close {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0;
	background: transparent; border: 1px solid var(--border-2);
	border-radius: var(--radius-pill);
	color: var(--fg-1); cursor: pointer;
	transition: background 160ms ease, transform 160ms ease;
}
.at-gsearch__close:hover { background: rgba(0, 0, 0, 0.05); }
.at-gsearch__close:active { transform: scale(0.94); }

/* Results --------------------------------------------------------------------- */
.at-gsearch__results {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.at-gsearch__results-inner {
	max-width: var(--at-container-max);
	margin: 0 auto;
	padding: 10px var(--at-gutter) 28px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* Categories + posts share two columns to use the panel width. */
.at-gsearch__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 36px;
	align-items: start;
}

.at-gsearch__group { padding: 14px 0 6px; min-width: 0; }
.at-gsearch__group-h {
	font-family: var(--font-mono);
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--fg-3);
	padding: 0 12px 8px;
}

/* Rows ------------------------------------------------------------------------ */
.at-gsearch__row {
	display: flex; align-items: center; gap: 14px;
	padding: 9px 12px;
	border-radius: var(--radius-md);
	text-decoration: none; color: var(--fg-1);
	transition: background 130ms ease;
}
.at-gsearch__row:hover,
.at-gsearch__row.is-active {
	background: rgba(0, 0, 0, 0.045);
}

.at-gsearch__thumb {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--steel-silver-200);
	display: flex; align-items: center; justify-content: center;
}
.at-gsearch__thumb img { width: 100%; height: 100%; object-fit: cover; }
.at-gsearch__thumb--ph::after {
	content: ""; width: 18px; height: 18px; border-radius: 3px;
	background: repeating-linear-gradient(45deg, #d9d8d8 0 4px, #e8e7e7 4px 8px);
}

.at-gsearch__tag {
	flex: 0 0 auto; width: 16px; height: 16px;
	border: 1.5px solid var(--fg-3);
	transform: rotate(45deg);
	border-radius: 2px;
	margin: 0 14px;
}

.at-gsearch__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.at-gsearch__title {
	font-family: var(--font-sans);
	font-size: 15px; font-weight: 500; line-height: 1.3;
	color: var(--fg-1);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.at-gsearch__meta {
	display: flex; align-items: center; gap: 8px;
	font-size: 12.5px; color: var(--fg-3); line-height: 1.2;
}
.at-gsearch__meta .at-gsearch__dot { opacity: 0.5; }
.at-gsearch__sku { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; }

.at-gsearch__price {
	flex: 0 0 auto;
	font-family: var(--font-sans); font-size: 14px; font-weight: 600;
	color: var(--fg-1);
	white-space: nowrap;
}
.at-gsearch__price del { color: var(--fg-3); font-weight: 400; margin-right: 4px; }
.at-gsearch__price ins { text-decoration: none; }

.at-gsearch__count {
	flex: 0 0 auto;
	font-family: var(--font-mono); font-size: 12px;
	color: var(--fg-2);
	background: var(--steel-silver-200);
	border-radius: var(--radius-pill);
	padding: 3px 10px;
}

/* Product swiper (horizontal scroll-snap track) ------------------------------- */
.at-gsearch__group--products { padding-bottom: 10px; }
.at-gsearch__track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 12px;
	padding: 4px 12px 12px;
	margin: 0 -12px;            /* bleed to the inner padding edges */
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.at-gsearch__track::-webkit-scrollbar { height: 6px; }
.at-gsearch__track::-webkit-scrollbar-thumb { background: var(--steel-silver-200); border-radius: 999px; }
.at-gsearch__track::-webkit-scrollbar-track { background: transparent; }

.at-gsearch__card {
	flex: 0 0 auto;
	width: 200px;
	scroll-snap-align: start;
	display: flex; flex-direction: column;
	border: 1px solid var(--border-2);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--pure-white, #fff);
	text-decoration: none; color: var(--fg-1);
	transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.at-gsearch__card:hover,
.at-gsearch__card.is-active {
	border-color: var(--rubber-black-70);
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}
.at-gsearch__card.is-active { border-color: var(--performance-orange); }

.at-gsearch__card-img {
	display: block;
	width: 100%; aspect-ratio: 4 / 3;
	background: var(--steel-silver-200);
	display: flex; align-items: center; justify-content: center;
}
.at-gsearch__card-img img { width: 100%; height: 100%; object-fit: cover; }
.at-gsearch__card-img--ph::after {
	content: ""; width: 30px; height: 30px; border-radius: 4px;
	background: repeating-linear-gradient(45deg, #d9d8d8 0 5px, #e8e7e7 5px 10px);
}

.at-gsearch__card-body {
	display: flex; flex-direction: column; gap: 5px;
	padding: 11px 12px 12px;
	flex: 1 1 auto;
}
.at-gsearch__card-cat {
	font-family: var(--font-mono);
	font-size: 10.5px; font-weight: 500;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--fg-3);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.at-gsearch__card-title {
	font-family: var(--font-sans);
	font-size: 13.5px; font-weight: 500; line-height: 1.32;
	color: var(--fg-1);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.32em * 2);
}
.at-gsearch__card-foot {
	margin-top: auto;
	display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.at-gsearch__card-price {
	font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--fg-1);
	white-space: nowrap;
}
.at-gsearch__card-price del { color: var(--fg-3); font-weight: 400; margin-right: 3px; font-size: 12px; }
.at-gsearch__card-price ins { text-decoration: none; }
.at-gsearch__card-sku {
	font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Highlight ------------------------------------------------------------------- */
.at-gsearch__mark {
	background: var(--performance-orange-100);
	color: var(--performance-orange-700);
	border-radius: 3px; padding: 0 1px;
	font-weight: 600;
}

/* Pivots (count + jump) ------------------------------------------------------- */
.at-gsearch__pivot {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--border-2);
	border-radius: var(--radius-lg);
	text-decoration: none; color: var(--fg-1);
	margin-bottom: 8px;
	transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.at-gsearch__pivot:hover,
.at-gsearch__pivot.is-active {
	border-color: var(--fg-1);
	background: rgba(0, 0, 0, .035);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}
.at-gsearch__pivot.is-active { box-shadow: 0 1px 0 rgba(0, 0, 0, .04); transform: none; }
.at-gsearch__pivot-icon {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border-radius: var(--radius-md);
	background: var(--surface-dark); color: var(--pure-white, #fff);
}
.at-gsearch__pivot-main {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; gap: 7px;
}
.at-gsearch__pivot-label {
	font-family: var(--font-display); font-size: 17px; font-weight: 400;
	color: var(--fg-1);
}
.at-gsearch__pivot-brands {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.at-gsearch__pivot-brand {
	height: 20px; width: auto; max-width: 52px; object-fit: contain;
	filter: grayscale(1); opacity: .55;
	transition: filter 150ms ease, opacity 150ms ease;
}
.at-gsearch__pivot:hover .at-gsearch__pivot-brand,
.at-gsearch__pivot.is-active .at-gsearch__pivot-brand {
	filter: grayscale(0); opacity: 1;
}
.at-gsearch__pivot-go {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 5px;
	font-family: var(--font-sans); font-size: 13px; font-weight: 600;
	color: var(--fg-2);
	transition: color 150ms ease;
}
.at-gsearch__pivot:hover .at-gsearch__pivot-go,
.at-gsearch__pivot.is-active .at-gsearch__pivot-go { color: var(--fg-1); }

/* States ---------------------------------------------------------------------- */
.at-gsearch__state {
	padding: 40px 12px;
	text-align: center;
	font-family: var(--font-sans); font-size: 14.5px;
	color: var(--fg-3);
}
.at-gsearch__state--loading { color: var(--fg-2); }

/* Result reveal — content settles in as it arrives. Subtle (fade + 4px rise),
   lightly staggered so a fresh result set feels alive without flickering while
   you type. */
@keyframes gsearch-rise {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}
.at-gsearch__group,
.at-gsearch__cols .at-gsearch__group,
.at-gsearch__pivot {
	animation: gsearch-rise 240ms cubic-bezier(.16, 1, .3, 1) both;
}
.at-gsearch__cols .at-gsearch__group:nth-of-type(2) { animation-delay: 55ms; }
.at-gsearch__pivot:nth-child(2) { animation-delay: 50ms; }

/* Product cards fan in left-to-right. */
.at-gsearch__card { animation: gsearch-rise 280ms cubic-bezier(.16, 1, .3, 1) both; }
.at-gsearch__card:nth-child(1) { animation-delay: 0ms; }
.at-gsearch__card:nth-child(2) { animation-delay: 34ms; }
.at-gsearch__card:nth-child(3) { animation-delay: 68ms; }
.at-gsearch__card:nth-child(4) { animation-delay: 102ms; }
.at-gsearch__card:nth-child(5) { animation-delay: 136ms; }
.at-gsearch__card:nth-child(n+6) { animation-delay: 170ms; }

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 860px) {
	.at-gsearch__cols { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 600px) {
	.at-gsearch__sheet {
		--at-gsearch-top: 0px;
		width: 100%; margin: 0;
		height: 100dvh; max-height: 100dvh;
		border: 0; border-radius: 0;
	}
	.at-gsearch__bar-inner { padding: 14px 18px; gap: 10px; }
	.at-gsearch__input { font-size: 19px; }
	.at-gsearch__close { width: 36px; height: 36px; }
	.at-gsearch__results-inner { padding: 6px 12px 24px; }
	/* Tighter, thumb-swipeable product cards. */
	.at-gsearch__track { gap: 10px; scroll-padding-left: 12px; padding-bottom: 10px; }
	.at-gsearch__card { width: 150px; }
	.at-gsearch__card-title { font-size: 12.5px; }
	.at-gsearch__pivot-label { font-size: 15px; }
	.at-gsearch__pivot-go span { display: none; }
}

/* Reduced motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.at-gsearch__scrim,
	.at-gsearch__sheet { transition: opacity 120ms linear; transform: none; }
	.at-gsearch__bar::after { transition: none; }
	.at-gsearch__group,
	.at-gsearch__cols .at-gsearch__group,
	.at-gsearch__card,
	.at-gsearch__pivot { animation: none; }
}