/**
 * Fit Football — the browse page, 2026.
 *
 * Heading, category tiles, filter bar, the pinned bar, the filter sheet, the
 * endless loader. Loaded on top of search-2026.css (the page frame and the
 * grid) and pdp-2026.css (the product card).
 *
 * The reference is adidas's product listing on a phone: a big condensed title
 * with the count as a superscript, a sideways row of landscape category cards
 * with a black bar under the one you are in, a filter icon and a row of square
 * chips. Built phone first; tablet and desktop widen it without changing what
 * it is.
 *
 * Motion follows the site rule: reduced motion shortens, it never switches
 * off — the owner's own Windows has animation effects off, and Elementor zeroes
 * every transition on such a machine unless a component says otherwise.
 */

/**
 * The search drawer lives off-screen to the right: `position: fixed`,
 * translated past the edge. On a page that does not clip, that box widens the
 * layout viewport and a phone answers by zooming the whole page out. The
 * product page has always clipped; these pages do too.
 */
body.ff-srch26 {
	overflow-x: clip;
}

.ffb {
	--ffb-gut: var(--ffb-g, 16px);
	--ffb-ink: var(--ff-ink, #0b0f14);
	--ffb-soft-ink: var(--ff-ink-soft, #3f4854);
	--ffb-mute: var(--ff-ink-mute, #77808c);
	--ffb-line: var(--ff-line, #e4e8ec);
	--ffb-edge: rgba(11, 15, 20, .42);
	--ffb-fill: #f1f3f4;
	--ffb-tile-bg: #f4f5f6;
	/* Square cards (owner, 2026-09-26 — the adidas reference): about two and a
	   half across a phone, five and a half across the page. */
	--ffb-tile-w: clamp(148px, 40vw, 184px);
	--ffb-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- sitting under the header ----------------------------------------

   Botiga puts a 60px top margin on its content wrapper. Under a header this
   page already gives room to, that margin reads as a hole — so it goes, and
   the page's own padding sets the distance. */

.ff-srch26 .content-wrapper {
	margin-top: 0;
}

/* ---- the width of the page ----------------------------------------------

   The page lines up with the header above it: the same 1180px frame and the
   same gutter, so the title starts exactly under the logo and the Filter &
   sort button ends under the bag, the way adidas keeps every row on one
   pair of edges. Botiga's own 1140px box (plus its padding) sat inside that
   frame and pushed everything 28px in from the logo. The pinned bar measures
   itself the same way. */

/* The header's own side padding, at every width. */
body.ff-srch26 {
	--ffb-g: 16px;
}

.ff-srch26 .container.content-wrapper {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.ff-srch26 .content-wrapper > .row {
	margin-left: 0;
	margin-right: 0;
}

.ffs.ffb {
	max-width: none;
	padding-left: max(var(--ffb-g), calc((100% - 1180px) / 2 + 16px));
	padding-right: max(var(--ffb-g), calc((100% - 1180px) / 2 + 16px));
}


/* =======================================================================
 * The heading.
 * ==================================================================== */

.ffb-head {
	padding: 26px 0 0;
}

.ffb-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 7px;
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ffb-mute);
}

.ffb-crumbs a,
.ffb-crumbs a:visited {
	color: var(--ffb-mute);
	text-decoration: none;
	transition: color .15s ease;
}

.ffb-crumbs a:hover {
	color: var(--ffb-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ffb-crumbs i {
	font-style: normal;
	opacity: .6;
}

/* Botiga paints every h1–h6 #212121 with a heavier selector than a plain
   class, so the colour is stated where the element is named. */
.ffs h1.ffb-title {
	margin: 0;
	color: var(--ffb-ink);
	font-family: var(--ff-font-display, 'Anton', sans-serif);
	font-weight: 400;
	font-size: clamp(32px, 9.6vw, 42px);
	line-height: 1.04;
	letter-spacing: .012em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* The count rides at the top of the last word, the way adidas prints it. */
.ffs .ffb-title-n {
	display: inline-block;
	position: static;
	margin: .1em 0 0 .32em;
	vertical-align: top;
	font-family: var(--ff-font-body, 'Inter', system-ui, sans-serif);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	font-variant-numeric: tabular-nums;
}

.ffb-head .ffs-form {
	margin-top: 20px;
}

/* =======================================================================
 * The tiles — the way into, and across, the shop.
 * ==================================================================== */

.ffb-nav {
	position: relative;
	margin: 40px calc(var(--ffb-gut) * -1) 0;
}

.ffb-nav-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 var(--ffb-gut);
	scroll-padding: 0 var(--ffb-gut);
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* The hairline the black bar sits on, edge to edge. */
	border-bottom: 1px solid var(--ffb-line);
}

.ffb-nav-track::-webkit-scrollbar {
	display: none;
}

.ffb .ffb-tile,
.ffb .ffb-tile:visited {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	width: var(--ffb-tile-w);
	scroll-snap-align: start;
	color: var(--ffb-ink);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.ffb-tile-img {
	position: relative;
	display: flex;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--ffb-tile-bg);
}

.ffb-tile-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ffb-ease);
}

/* A picture still waiting its turn in the paced image queue has no src yet;
   the quiet fill stands in for it rather than an empty image frame. */
.ffb-tile-img img:not([src]) {
	visibility: hidden;
}

/* Two shirts side by side fill a landscape card: each is shot portrait on
   the same studio grey, so the pair reads as one photograph. */
.ffb-tile-img.is-duo {
	gap: 2px;
	background: #fff;
}

.ffb-tile-img.is-duo img {
	flex: 1 1 0;
	min-width: 0;
	width: 50%;
}

/* One shirt alone, or a cleat: the photograph keeps its whole shape. */
.ffb-tile-img.is-one img {
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* A brand or a cleat line: its logo, drawn on a square frame
   with the mark already at its size, so every logo in a row reads alike. */
.ffb-tile-img.is-logo img {
	object-fit: contain;
}

/* A club or a country: its crest, square, centred at a fixed share of the
   card's height so a row of crests lines up on one baseline. */
.ffb-tile-img.is-crest {
	align-items: center;
	justify-content: center;
}

/* "All": one picture on every page — the word, set in the display face on
   the same grey the logos stand on, at a logo's size. */
.ffb-tile-img.is-all {
	align-items: center;
	justify-content: center;
}

.ffb-tile-all {
	display: block;
	font-family: var(--ff-font-display, 'Anton', sans-serif);
	font-size: calc(var(--ffb-tile-w) * .22);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ffb-ink);
	transition: transform .5s var(--ffb-ease);
}

@media (hover: hover) {
	.ffb-tile:hover .ffb-tile-all {
		transform: scale(1.035);
	}
}

.ffb-tile-img.is-crest img {
	width: auto;
	height: 54%;
	max-width: 76%;
	object-fit: contain;
}

/* The name under the picture. Its width is the width of the words, so the
   bar under the tile you are in is exactly as long as its name. */
.ffb-tile-txt {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	max-width: 100%;
	padding: 12px 0 11px;
	border-bottom: 3px solid transparent;
	transition: border-color .16s ease;
}

.ffb-tile-txt b,
.ffb-tile-txt i {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px;
	line-height: 1.45;
}

.ffb-tile-txt b {
	font-weight: 700;
	color: var(--ffb-ink);
}

.ffb-tile-txt i {
	font-style: normal;
	font-weight: 400;
	color: var(--ffb-soft-ink);
}

.ffb-tile.is-on .ffb-tile-txt {
	border-bottom-color: var(--ffb-ink);
}

@media (hover: hover) {
	.ffb-tile:hover .ffb-tile-img img {
		transform: scale(1.035);
	}

	.ffb-tile:not(.is-on):hover .ffb-tile-txt {
		border-bottom-color: #c3c9d0;
	}
}

.ffb-tile:focus-visible {
	outline: 2px solid var(--ffb-ink);
	outline-offset: 3px;
}

/* Arrows, for a mouse: they appear once the row is wider than the page and
   step it one screenful at a time. Touch just swipes. */
.ffb-nav-btn {
	position: absolute;
	z-index: 2;
	top: calc(var(--ffb-tile-w) / 2 - 20px);
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ffb-line);
	border-radius: 50%;
	background: #fff;
	color: var(--ffb-ink);
	box-shadow: 0 4px 14px rgba(11, 15, 20, .12);
	cursor: pointer;
	transition: opacity .16s ease, border-color .16s ease;
}

.ffb-nav-btn.is-prev {
	left: 8px;
}

.ffb-nav-btn.is-next {
	right: 8px;
}

.ffb-nav-btn:hover {
	border-color: var(--ffb-ink);
}

.ffb-nav-btn[disabled] {
	opacity: 0;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.ffb-nav.has-more .ffb-nav-btn:not([hidden]) {
		display: flex;
	}
}

/* =======================================================================
 * The bar: Filter & sort, then the quick chips.
 * ==================================================================== */

.ffb-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	font-family: var(--ff-font-body, 'Inter', system-ui, sans-serif);
	color: var(--ffb-ink);
}

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

.ffb-filters {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: none;
	height: 40px;
	min-width: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ffb-ink, #0b0f14);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ffb-filters svg {
	flex: none;
	display: block;
}

.ffb-filters svg circle {
	fill: #fff;
}

/* On a phone the icon is the button, as it is on adidas; the words stay for
   screen readers. */
.ffb-filters-t {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ffb-badge {
	position: absolute;
	top: 2px;
	right: -3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	background: var(--ffb-ink, #0b0f14);
	color: #fff;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* With its words showing (the pinned bar, and every screen from a tablet up)
   the button is a bordered control and the count sits beside the words. */
.ffb-filters.is-text {
	padding: 0 14px 0 12px;
	border: 1px solid var(--ffb-edge, rgba(11, 15, 20, .42));
	transition: border-color .15s ease;
}

.ffb-filters.is-text svg {
	width: 20px;
	height: 20px;
}

.ffb-filters.is-text .ffb-filters-t {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

.ffb-filters.is-text .ffb-badge {
	position: static;
}

.ffb-filters.is-text:hover {
	border-color: var(--ffb-ink, #0b0f14);
}

.ffb-chips {
	display: flex;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	/* To the screen edge on a phone, so the last chip does not look like the
	   end of the list. */
	margin-right: calc(var(--ffb-gut) * -1);
	padding-right: var(--ffb-gut);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

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

.ffb .ffb-chip,
.ffb .ffb-chip:visited {
	display: inline-flex;
	align-items: center;
	flex: none;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--ffb-edge);
	background: #fff;
	color: var(--ffb-ink);
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

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

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

/* =======================================================================
 * The grid under it — close to the bar, the way the reference sits.
 * ==================================================================== */

.ffb .ffs-grid[data-ffb-grid] {
	padding-top: 10px;
}

/* =======================================================================
 * Changing the page in place.
 *
 * A click swaps the view without a page load. While the answer is on its way
 * the list behind dims and a hairline runs along the bar; nothing else moves,
 * and a fast answer shows neither (the script waits 120ms before saying it
 * is busy).
 * ==================================================================== */

.ffb [data-ffb-grid],
.ffb .ffs-more,
.ffb .ffs-none {
	transition: opacity .2s ease;
}

.ffb-busy .ffb [data-ffb-grid],
.ffb-busy .ffb .ffs-more,
.ffb-busy .ffb .ffs-none,
.ffb-busy .ffb .ffs-blk {
	opacity: .38;
}

.ffb-bar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0, var(--ffb-ink, #0b0f14) 50%, transparent 100%) no-repeat;
	background-size: 38% 100%;
	opacity: 0;
	pointer-events: none;
}

.ffb-busy .ffb-bar::after {
	opacity: 1;
	animation: ffb-sweep 1s linear infinite;
}

@keyframes ffb-sweep {
	0%   { background-position: -60% 0; }
	100% { background-position: 160% 0; }
}

/* The new list arrives with a short rise out of the dimmed one. */
.ffb.is-fresh [data-ffb-grid],
.ffb.is-fresh .ffs-none {
	animation: ffb-arrive .3s var(--ffb-ease) both;
}

@keyframes ffb-arrive {
	from { opacity: .38; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* =======================================================================
 * The pinned twin.
 *
 * It slides over the site header rather than next to it: once you are deep
 * in a grid, what you need at the top is how much is left and the way to the
 * filters. Scrolling back up to the heading hands the top back to the header.
 * ==================================================================== */

.ffb-bar.is-pinned {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1002;
	/* 100vw counts the scrollbar, so a padding worked out from it makes this
	   bar wider than the page and the document gains a sideways scroll. The
	   bar is already stretched left-to-right; its own width is the honest
	   number to measure against. */
	padding: 0;
	box-sizing: border-box;
	background: rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--ff-line, #e4e8ec);
	transform: translateY(-100%);
	transition: transform .28s cubic-bezier(.32, .72, .35, 1);
	font-family: var(--ff-font-body, 'Inter', system-ui, sans-serif);
	color: var(--ff-ink, #0b0f14);
}

.ffb-bar.is-pinned.is-in {
	transform: none;
}

/* Logged in, the admin bar owns the very top: the pinned bar sits under it
   (fixed 32px, 46px on a small tablet; on a phone it scrolls away). */
body.admin-bar .ffb-bar.is-pinned {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .ffb-bar.is-pinned {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar .ffb-bar.is-pinned {
		top: 0;
	}
}

.ffb-bar.is-pinned[hidden] {
	display: none;
}

.ffb-bar-main {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px max(var(--ffb-g, 16px), calc((100% - 1180px) / 2 + 16px));
}

.ffb-bar-id {
	display: flex;
	align-items: baseline;
	flex: 1 1 auto;
	min-width: 0;
}

.ffb-bar-count {
	flex: none;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ffb-bar-controls {
	display: flex;
	align-items: center;
	flex: none;
	margin-left: auto;
}

/* The promises: a dark band under the controls, one sentence at a time, each
   rolling up as the next rises in (browse-2026.js, mountPromise()). Near
   black so it reads against a grid of white cards while the page moves;
   centred and on one line so it reads as one thing, in order. */
.ffb-promise {
	position: relative;
	height: 36px;
	overflow: hidden;
	background: #0e1116;
	color: #fff;
}

.ffb-promise-l {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 0 16px;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: .01em;
	white-space: nowrap;
	color: #fff;
	visibility: hidden;
}

.ffb-promise-l.is-on {
	visibility: visible;
}

.ffb-promise-l svg {
	flex: 0 0 auto;
	display: block;
	opacity: .9;
}

.ffb-promise-t {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ffb-promise-l b {
	font-weight: 600;
}

.ffb-promise-l i {
	font-style: normal;
	color: rgba(255, 255, 255, .62);
}

/* ---- the site header stays where it is on these pages ----
   The pinned bar is the only thing that follows the page. The header's own
   sticky position goes, and so does anything Elementor's sticky script still
   pins is put back in the flow and its spacer hidden (see browse-2026.php
   for why this cannot be done in the markup). */
body.ff-srch26 .ffh3 {
	position: relative;
}

body.ff-srch26 .elementor-location-header .elementor-sticky--active {
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
}

body.ff-srch26 .elementor-location-header .elementor-sticky__spacer {
	display: none !important;
}

/* =======================================================================
 * The filter sheet.
 *
 * From the right, the full height of the screen. The whole width of a phone;
 * a 440px panel from a tablet up. Every option applies as it is tapped — the
 * list behind changes and the number on the button at the bottom follows.
 * ==================================================================== */

.ffb-sheet {
	--ffb-ink: var(--ff-ink, #0b0f14);
	--ffb-soft-ink: var(--ff-ink-soft, #3f4854);
	--ffb-mute: var(--ff-ink-mute, #77808c);
	--ffb-line: var(--ff-line, #e4e8ec);
	--ffb-fill: #f1f3f4;

	position: fixed;
	inset: 0;
	z-index: 2100;
	font-family: var(--ff-font-body, 'Inter', system-ui, sans-serif);
	color: var(--ffb-ink);
	-webkit-font-smoothing: antialiased;
}

.ffb-sheet[hidden] {
	display: none;
}

.ffb-sheet a,
.ffb-sheet a:visited {
	color: var(--ffb-ink);
	text-decoration: none;
}

.ffb-sheet-scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 14, .42);
	opacity: 0;
	transition: opacity .28s ease;
}

.ffb-sheet.is-open .ffb-sheet-scrim {
	opacity: 1;
}

.ffb-sheet-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	/* The bag's, the search drawer's and the tracking drawer's own movement
	   and ground: no shadow, the same ease. */
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
	outline: none;
}

.ffb-sheet.is-open .ffb-sheet-panel {
	transform: none;
}

/* A sheet put back after an in-place change is already open: no slide. */
.ffb-sheet.is-instant .ffb-sheet-panel,
.ffb-sheet.is-instant .ffb-sheet-scrim {
	transition: none !important;
}

/* The head is the shared drawer lockup (modules/layout/drawer-lockup.php),
   which brings its own padding, hairline and round close. */
.ffb-sheet-head {
	flex: none;
}

.ffb-sheet-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 18px 24px;
	-webkit-overflow-scrolling: touch;
}

/* What is on, each one tap from off. */
.ffb-applied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 18px 0 16px;
	border-bottom: 1px solid var(--ffb-line);
}

.ffb-sheet .ffb-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 10px 0 12px;
	background: var(--ffb-fill);
	font-size: 13px;
	font-weight: 600;
	transition: background-color .14s ease;
}

.ffb-sheet .ffb-pill:hover {
	background: #e5e8ea;
}

.ffb-sheet .ffb-applied-clear {
	margin-left: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ffb-mute);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ffb-group {
	padding: 20px 0 16px;
	border-bottom: 1px solid var(--ffb-line);
}

.ffb-group:last-child {
	border-bottom: 0;
}

.ffb-sheet .ffb-group h3 {
	margin: 0 0 10px;
	color: var(--ffb-ink);
	font-family: var(--ff-font-body, 'Inter', system-ui, sans-serif);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ffb-opts {
	display: flex;
	flex-direction: column;
}

/* A filter row is a link wearing a radio or a checkbox: the familiar shape,
   and it still works with no script, in a new tab, or shared. */
.ffb-sheet .ffb-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0 -8px;
	padding: 0 8px;
	font-size: 15px;
	line-height: 1.3;
	transition: background-color .14s ease;
	-webkit-tap-highlight-color: transparent;
}

.ffb-sheet .ffb-opt:hover {
	background: #f6f7f8;
}

.ffb-mark {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	border: 1.5px solid rgba(11, 15, 20, .34);
	background: #fff;
	transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.ffb-opt.is-radio .ffb-mark {
	border-radius: 50%;
}

.ffb-opt:hover .ffb-mark {
	border-color: var(--ffb-ink);
}

.ffb-opt.is-radio.is-on .ffb-mark {
	border-color: var(--ffb-ink);
	background: var(--ffb-ink);
	box-shadow: inset 0 0 0 4px #fff;
}

.ffb-opt.is-check.is-on .ffb-mark,
.ffb-opt.is-one.is-on .ffb-mark {
	border-color: var(--ffb-ink);
	background: var(--ffb-ink);
}

.ffb-opt.is-check.is-on .ffb-mark::after,
.ffb-opt.is-one.is-on .ffb-mark::after {
	content: "";
	position: absolute;
	left: 5.5px;
	top: 1.5px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ffb-opt-name {
	flex: 1 1 auto;
	min-width: 0;
}

.ffb-opt.is-on .ffb-opt-name {
	font-weight: 600;
}

.ffb-opt-cnt {
	flex: none;
	font-size: 13px;
	color: var(--ffb-mute);
	font-variant-numeric: tabular-nums;
}

/* Surfaces are picked the way a size is picked on the product page: square
   tiles on the quiet fill, ink when chosen. */
.ffb-surf {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	padding-top: 2px;
}

.ffb-sheet .ffb-surf-o {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 13px 14px 12px;
	border: 1px solid transparent;
	background: var(--ffb-fill);
	transition: border-color .14s ease, background-color .14s ease, color .14s ease;
	-webkit-tap-highlight-color: transparent;
}

.ffb-surf-o b {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .02em;
}

.ffb-surf-o span {
	font-size: 13px;
	line-height: 1.3;
	color: var(--ffb-soft-ink);
}

.ffb-surf-o em {
	font-style: normal;
	font-size: 12px;
	line-height: 1.3;
	color: var(--ffb-mute);
}

.ffb-sheet .ffb-surf-o:hover {
	border-color: var(--ffb-ink);
}

.ffb-sheet .ffb-surf-o.is-on {
	border-color: var(--ffb-ink);
	background: var(--ffb-ink);
	color: #fff;
}

.ffb-surf-o.is-on span,
.ffb-surf-o.is-on em {
	color: rgba(255, 255, 255, .72);
}

.ffb-sheet-foot {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
	padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--ffb-line);
	background: #fff;
}

.ffb-sheet .ffb-clear {
	flex: none;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ffb-done {
	position: relative;
	flex: 1 1 auto;
	height: 52px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--ff-radius-pill, 999px);
	background: var(--ffb-ink);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease;
}

.ffb-done:hover {
	background: #000;
}

.ffb-done span {
	transition: opacity .15s ease;
}

/* Waiting for the new count: the words dim and a ring turns beside them. */
.ffb-busy .ffb-done span {
	opacity: .45;
}

.ffb-busy .ffb-done::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ffb-spin .7s linear infinite;
}

@keyframes ffb-spin {
	to { transform: rotate(360deg); }
}

/* The way out of a filter that found nothing. `.ffs a { color: inherit }`
   (and Botiga's a:visited) outrank a single class, which left its words ink
   on ink — invisible. */
.ffs a.ffs-clear,
.ffs a.ffs-clear:visited,
.ffs a.ffs-clear:hover {
	color: #fff;
}

/* =======================================================================
 * The collection's own words, under the grid.
 * ==================================================================== */

.ffs-note {
	max-width: 720px;
	margin: 64px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--ffb-line, #e4e8ec);
}

.ffs h2.ffs-note-h {
	margin: 0 0 12px;
	color: var(--ffb-ink, #0b0f14);
	font-family: var(--ff-font-display, 'Anton', sans-serif);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ffs-note-body {
	font-size: 14px;
	line-height: 1.7;
	color: var(--ffb-mute, #77808c);
}

.ffs-note-body p {
	margin: 0 0 12px;
}

.ffs-note-body p:last-child {
	margin-bottom: 0;
}

/* =======================================================================
 * Endless browse.
 *
 * The list continues itself, so the numbered pager steps aside — but only
 * once the loader has said it is running. Until then, and again if a fetch
 * ever fails, the numbers are the pagination and they work.
 * ==================================================================== */

.ffb-endless [data-ffb-pager] {
	display: none;
}

.ffs-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 40px 0 8px;
	text-align: center;
}

/* The trigger. It has to occupy a little height or an observer watching a
   zero-height box at the very end of the document can miss it entirely. */
.ffs-more-mark {
	width: 100%;
	height: 1px;
	margin-top: -1px;
}

.ffs-more-tally {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ffb-mute, #6b7280);
}

.ffs-more-track {
	position: relative;
	width: 168px;
	height: 2px;
	border-radius: 999px;
	background: var(--ffb-line, #e5e7eb);
	overflow: hidden;
}

.ffs-more-track i {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	background: var(--ffb-ink, #111);
	transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

.ffs .ffs-more-btn,
.ffs .ffs-more-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	height: 48px;
	padding: 0 30px;
	border: 1px solid var(--ffb-ink, #111);
	border-radius: var(--ff-radius-pill, 999px);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ffb-ink, #111);
	background: transparent;
	transition: background-color .18s ease, color .18s ease;
}

.ffs .ffs-more-btn:hover,
.ffs .ffs-more-btn:focus-visible {
	background: var(--ffb-ink, #111);
	color: #fff;
}

.ffs-more-end {
	margin: 0;
	font-size: 13px;
	color: var(--ffb-mute, #6b7280);
}

.ffs-more.is-busy .ffs-more-tally {
	opacity: .45;
}

.ffs-more.is-busy .ffs-more-btn {
	pointer-events: none;
	opacity: .55;
}

.ffs-more.is-busy .ffs-more-track {
	background-image: linear-gradient(90deg, transparent 0%, var(--ffb-ink, #111) 50%, transparent 100%);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: ffs-more-sweep 1.1s linear infinite;
}

@keyframes ffs-more-sweep {
	0%   { background-position: -60% 0; }
	100% { background-position: 160% 0; }
}

/* Cards that arrive after the page did should look like they were always
   going to be there — a short rise, not a pop. Only the appended ones. */
.ffs-grid .pdp-rcard.is-added {
	animation: ffs-card-in .45s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes ffs-card-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* =======================================================================
 * Tablet up.
 * ==================================================================== */

@media (min-width: 700px) {
	.ffb {
		--ffb-tile-w: 184px;
	}

	.ffb-head {
		padding-top: 36px;
	}

	.ffb-crumbs {
		font-size: 13px;
		margin-bottom: 12px;
	}

	.ffs h1.ffb-title {
		font-size: clamp(40px, 5.2vw, 54px);
	}

	.ffs .ffb-title-n {
		font-size: 15px;
	}

	.ffb-nav {
		margin-top: 40px;
	}

	.ffb-tile-txt b,
	.ffb-tile-txt i {
		font-size: 15px;
	}

	/* Chips first, Filter & sort at the far end, as adidas lays it out on a
	   big screen. */
	.ffb-bar {
		gap: 16px;
		padding: 18px 0 16px;
	}

	.ffb-bar > .ffb-filters {
		order: 2;
		margin-left: auto;
		padding: 0 16px 0 14px;
		border: 1px solid var(--ffb-edge);
		transition: border-color .15s ease;
	}

	.ffb-bar > .ffb-filters:hover {
		border-color: var(--ffb-ink);
	}

	.ffb-bar > .ffb-filters svg {
		width: 20px;
		height: 20px;
	}

	.ffb-bar > .ffb-filters .ffb-filters-t {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		clip-path: none;
	}

	.ffb-bar > .ffb-filters .ffb-badge {
		position: static;
	}

	.ffb-chips {
		margin-right: 0;
		padding-right: 0;
	}

	.ffb .ffb-chip,
	.ffb .ffb-chip:visited {
		height: 38px;
		padding: 0 15px;
		font-size: 14px;
	}

	.ffb .ffs-grid[data-ffb-grid] {
		padding-top: 14px;
	}

	/* The width of every right-hand drawer on the shop. */
	.ffb-sheet-panel {
		width: min(420px, 100%);
	}

	.ffb-sheet-foot {
		padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
	}
}

/* The tile row stays inside the page from a tablet up; on a phone it runs to
   the screen edges. */
@media (min-width: 700px) {
	.ffb-nav {
		margin-left: 0;
		margin-right: 0;
	}

	.ffb-nav-track {
		padding: 0;
		scroll-padding: 0;
	}

	.ffb-nav-btn.is-prev {
		left: -12px;
	}

	.ffb-nav-btn.is-next {
		right: -12px;
	}
}

/* =======================================================================
 * Desktop.
 * ==================================================================== */

@media (min-width: 1040px) {
	.ffb {
		--ffb-tile-w: 196px;
	}

	.ffb-head {
		padding-top: 44px;
	}

	.ffs h1.ffb-title {
		font-size: clamp(48px, 4.2vw, 60px);
	}

	.ffs .ffb-title-n {
		font-size: 16px;
	}

	.ffb-nav {
		margin-top: 44px;
	}

	.ffb-tile-txt {
		padding-top: 14px;
	}

	.ffb-tile-txt b,
	.ffb-tile-txt i {
		font-size: 16px;
	}

	.ffb .ffs-grid[data-ffb-grid] {
		padding-top: 18px;
	}
}

@media (min-width: 1280px) {
	.ffb {
		--ffb-tile-w: 204px;
	}
}

/* =======================================================================
 * Phones.
 * ==================================================================== */

@media (max-width: 699px) {
	.ffb-bar.is-pinned .ffb-bar-main {
		padding: 9px 16px;
		gap: 12px;
	}

	.ffb-bar.is-pinned .ffb-bar-count {
		font-size: 15px;
	}

	.ffb-bar.is-pinned .ffb-promise {
		height: 34px;
	}

	.ffb-promise-l {
		font-size: 12px;
	}
}

/* =======================================================================
 * Reduced motion: shorter, never off.
 *
 * Elementor ships `html * { transition-duration: 0s !important }` under this
 * query, which would make the sheet and the pinned bar jump rather than
 * move — on exactly the machine this shop is run from. These selectors
 * outrank it and keep a brief, plain movement; the photo zoom goes.
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* The same slide the bag and the tracking drawer keep. */
	.ffb-sheet .ffb-sheet-panel {
		transition-duration: .3s !important;
	}

	.ffb-sheet .ffb-sheet-scrim {
		transition-duration: .28s !important;
	}

	.ffb-sheet.is-instant .ffb-sheet-panel,
	.ffb-sheet.is-instant .ffb-sheet-scrim {
		transition-duration: 0s !important;
	}

	.ffb-float .ffb-bar.is-pinned {
		transition-duration: .18s !important;
	}

	.ffb .ffb-tile .ffb-tile-txt {
		transition-duration: .12s !important;
	}

	.ffb .ffb-tile:hover .ffb-tile-img img {
		transform: none;
	}

	.ffs.ffb [data-ffb-grid],
	.ffs.ffb .ffs-more,
	.ffs.ffb .ffs-none {
		transition-duration: .16s !important;
	}

	.ffb.is-fresh [data-ffb-grid],
	.ffb.is-fresh .ffs-none {
		animation-duration: .2s;
	}

	.ffs-more-track i {
		transition: none;
	}

	.ffs-more.is-busy .ffs-more-track {
		animation-duration: 2.4s;
	}

	.ffs-grid .pdp-rcard.is-added {
		animation-duration: .2s;
	}
}