/**
 * Fit Football — search results, 2026.
 *
 * The page around the product card, nothing more. Cards, prices and sale
 * flags all come from pdp-2026.css, which this sheet loads on top of, so a
 * product looks the same here as it does on the shelf at the bottom of a
 * product page.
 *
 * Two colours (ink and paper), one hairline, one accent that only ever marks
 * the choice you are currently inside.
 */

.ffs {
	--ffs-ink: var(--ff-ink, #0b0f14);
	--ffs-mute: var(--ff-ink-mute, #77808c);
	--ffs-line: var(--ff-line, #e4e8ec);
	--ffs-soft: var(--ff-paper-soft, #f4f6f8);

	display: block;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 16px 72px;

	/* Botiga wraps the content in a flex row, and a flex item defaults to
	   `min-width: auto` — it refuses to be narrower than its own content. The
	   chip rails below bleed to the screen edges with `margin: 0 -16px`, which
	   makes them 32px wider than this column, so this element grew past the
	   viewport and phones opened search and category pages zoomed out to fit
	   the extra sliver. Pinning the floor at zero lets the rails bleed (and
	   scroll) without ever moving the page. Same trap as `.pdp` on the product
	   page — never remove this. */
	min-width: 0;
	font-family: var(--ff-font-body, 'Inter', system-ui, sans-serif);
	color: var(--ffs-ink);
	-webkit-font-smoothing: antialiased;
}

.ffs a {
	color: inherit;
	text-decoration: none;
}

/* ---- the head ------------------------------------------------------- */

.ffs-head {
	/* Close to the header on purpose: this block is a label for the grid
	   underneath it, and a label that floats away from what it labels reads
	   as an empty screen. */
	padding: 20px 0 18px;
	border-bottom: 1px solid var(--ffs-line);
}

.ffs-head-in {
	max-width: 720px;
}

.ffs-eyebrow {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ffs-mute);
}

.ffs-q {
	margin: 0;
	font-family: var(--ff-font-display, 'Anton', sans-serif);
	font-weight: 400;
	font-size: clamp(34px, 7vw, 56px);
	line-height: .98;
	letter-spacing: .01em;
	text-transform: uppercase;

	/* A long query is still a heading, not a paragraph. */
	overflow-wrap: anywhere;
}

.ffs-count {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--ffs-mute);
}

.ffs-count-in {
	color: var(--ffs-ink);
}

/* ---- the field ------------------------------------------------------ */

.ffs-form {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding: 6px 6px 6px 18px;
	background: var(--ffs-soft);
	border: 1px solid transparent;
	border-radius: var(--ff-radius-pill, 999px);
	transition: border-color .16s ease, background .16s ease;
}

.ffs-form:focus-within {
	background: #fff;
	border-color: var(--ffs-ink);
}

.ffs-form > svg {
	flex: none;
	color: var(--ffs-mute);
}

.ffs-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	color: inherit;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.ffs-form input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* The pill going dark is the focus signal. A browser outline on top of it
   draws a thin rectangle across a rounded field, which reads as a
   rendering fault rather than as a state. */
.ffs-form input[type="search"]:focus,
.ffs-form input[type="search"]:focus-visible {
	outline: none;
	box-shadow: none;
}

.ffs-form button {
	flex: none;
	height: 44px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--ff-radius-pill, 999px);
	background: var(--ffs-ink);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	cursor: pointer;
	transition: opacity .16s ease;
}

.ffs-form button:hover {
	opacity: .86;
}

/* The trending keywords used to sit here as a row of chips. They are now
   typed into the field itself (assets/js/search-type.js), which says the
   same thing in a line the page was already spending. */

/* ---- narrow and sort ------------------------------------------------- */

.ffs-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--ffs-line);
}

.ffs-chips {
	display: flex;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	/* The row bleeds to the page edge on a phone so the last chip does not
	   look like the end of the list. */
	margin: 0 -16px;
	padding: 0 16px;
}

.ffs-chips::-webkit-scrollbar {
	display: none;
}

.ffs-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	padding: 9px 15px;
	border: 1px solid var(--ffs-line);
	border-radius: var(--ff-radius-pill, 999px);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.ffs-chip span {
	font-weight: 400;
	color: var(--ffs-mute);
	font-variant-numeric: tabular-nums;
}

.ffs-chip:hover {
	border-color: var(--ffs-ink);
}

.ffs-chip.is-on {
	background: var(--ffs-ink);
	border-color: var(--ffs-ink);
	color: #fff;
}

.ffs-chip.is-on span {
	color: rgba(255, 255, 255, .68);
}

.ffs-sort {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: none;
}

.ffs-sort select {
	appearance: none;
	-webkit-appearance: none;
	padding: 9px 34px 9px 14px;
	border: 1px solid var(--ffs-line);
	border-radius: var(--ff-radius-pill, 999px);
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
}

.ffs-sort svg {
	position: absolute;
	right: 13px;
	pointer-events: none;
	color: var(--ffs-mute);
}

/* ---- the grid -------------------------------------------------------- */

.ffs-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 12px;
	padding: 28px 0 0;
	/* Each card is as tall as its own photograph, so they hang from a shared
	   top line rather than being stretched to a common height. */
	align-items: start;
}

/* ---- pages ----------------------------------------------------------- */

.ffs-pager {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 48px;
}

.ffs-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--ffs-line);
	border-radius: var(--ff-radius-pill, 999px);
	font-size: 13px;
	font-weight: 600;
	transition: border-color .15s ease;
}

.ffs-pager .page-numbers:hover {
	border-color: var(--ffs-ink);
}

.ffs-pager .page-numbers.current {
	background: var(--ffs-ink);
	border-color: var(--ffs-ink);
	color: #fff;
}

.ffs-pager .dots {
	border-color: transparent;
}

/* ---- nothing found --------------------------------------------------- */

.ffs-none {
	padding: 56px 0 8px;
}

.ffs-none-in {
	max-width: 560px;
}

.ffs-none h2 {
	margin: 0;
	font-family: var(--ff-font-display, 'Anton', sans-serif);
	font-weight: 400;
	font-size: clamp(24px, 4vw, 32px);
	line-height: 1.1;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.ffs-none p {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ffs-mute);
}

.ffs-none em {
	font-style: normal;
	color: var(--ffs-ink);
}

/* ---- the recovery blocks --------------------------------------------- */

.ffs-blk {
	margin-top: 48px;
}

.ffs-h2 {
	margin: 0 0 18px;
	font-family: var(--ff-font-display, 'Anton', sans-serif);
	font-weight: 400;
	font-size: var(--ff-text-xl, 22px);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ffs-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ffs-tile {
	display: block;
}

.ffs-tile-img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ffs-soft);
}

.ffs-tile-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.ffs-tile:hover .ffs-tile-img img {
	transform: scale(1.04);
}

.ffs-tile-name {
	display: block;
	padding-top: 10px;
	font-size: 14px;
	font-weight: 600;
}

/* ---- from tablet up --------------------------------------------------- */

@media (min-width: 700px) {
	.ffs {
		padding: 0 24px 96px;
	}

	.ffs-head {
		padding: 30px 0 24px;
	}

	.ffs-chips {
		margin: 0;
		padding: 0;
	}

	.ffs-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 36px 20px;
		padding-top: 34px;
	}

	.ffs-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (min-width: 1040px) {
	.ffs-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The way back out of a filter that found nothing. It is the only thing on
   that screen worth clicking, so it is the only thing dressed as a button. */
.ffs-clear {
	display: inline-flex;
	align-items: center;
	margin-top: 22px;
	padding: 13px 26px;
	border-radius: var(--ff-radius-pill, 999px);
	background: var(--ffs-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	transition: opacity .16s ease;
}

.ffs-clear:hover {
	opacity: .86;
	color: #fff;
}