/**
 * Fit Football — Homepage 2026, the Jerseys block (2026-10-02).
 *
 * Products first, crests as the slides under them. Phone: two cards and a
 * sliver; desktop: four and a sliver; swiped by hand (or dragged with a
 * mouse). Under the cards, five crests, each with a thin bar that fills while
 * its set is on show; the last item of that line leads to every club/team.
 *
 * Full width on purpose (homepage rule): gutters only, no --ff-container cap.
 * The card itself (.pdp-rcard) is the product page's and is not restyled.
 */

.fth-jerseys--jx { padding: 32px 0 40px; }
.fth-jerseys--jx > .fth-h2 { margin-bottom: 20px; }
.fjx + .fjx { margin-top: 44px; }

/* ---- heading line: name of the row, the crest now open, the way out ---- */
.fjx-head {
	display: flex; align-items: baseline; gap: 12px;
	padding: 0 18px; margin-bottom: 14px;
}
.fjx-head .fth-h3 { flex: none; }
/* Which crest is open — said in words only where the crest line has no names. */
.fjx-now {
	flex: 1 1 auto; min-width: 0;
	font-family: var(--ff-font-body); font-weight: 500; font-size: 13px; line-height: 1.2;
	color: var(--ff-ink-mute);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fjx-viewall { flex: none; margin-left: auto; }

/* ---- the cards ---- */
.fjx-stage { position: relative; }
/* The rail runs to the screen's edge and the gutter is padding (this rail
   does not loop, so padding is safe here): the next card shows in the right
   gutter, which is what tells a thumb the row goes on. */
.fjx-rail {
	--fjx-gut: 18px;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; scroll-padding-inline: var(--fjx-gut);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
	padding: 2px var(--fjx-gut) 6px;
}
.fjx-rail::-webkit-scrollbar { display: none; }
.fjx-track { display: flex; gap: 14px; align-items: flex-start; }
/* The end gutter, as content: a scroller's own end padding is not reliably
   scrollable in every browser. 14px gap + 4px = the 18px gutter. */
.fjx-track::after { content: ''; flex: 0 0 calc(var(--fjx-gut) - 14px); height: 1px; }
/* Two and a good part of the third on a phone; three, then four, wider up. */
.fjx-track .pdp-rcard { flex: 0 0 44%; min-width: 0; scroll-snap-align: start; }
@media (min-width: 640px) { .fjx-track .pdp-rcard { flex-basis: 30%; } }
/* Desktop is the page's own product rail (the F50 / Superfly rows): four
   cards and the edge of a fifth, cut at the gutter. The owner tried eight
   across first (1.0.1) and found it crowded — "8 products, but this size,
   and swipeable" (2026-10-02). */
@media (min-width: 900px) {
	.fjx-head { padding: 0 32px; }
	.fjx-rail { padding: 2px 0 6px; margin-inline: 32px; scroll-padding-inline: 0; }
	.fjx-track::after { content: none; }
	.fjx-track .pdp-rcard { flex-basis: 23%; }
}
/* A mouse drags the row like a finger does (the script moves it). */
@media (hover: hover) and (pointer: fine) {
	.fjx-rail { cursor: grab; }
	.fjx-rail.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
	.fjx-rail.is-drag .pdp-rcard { pointer-events: none; }
}

/* ---- the crest line ---- */
.fjx-bar {
	display: flex; align-items: flex-start; gap: 6px;
	margin: 20px 18px 0;
}
.fjx-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; }
.fth .fjx-tab, .fth .fjx-tab:hover, .fth .fjx-tab:visited, .fth .fjx-tab *,
.fth .fjx-all, .fth .fjx-all:hover, .fth .fjx-all:visited, .fth .fjx-all * { text-decoration: none !important; }

.fjx-tab {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	padding-top: 2px; color: var(--ff-ink); cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.fjx-crest {
	flex: none; width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
}
.fjx-crest img {
	width: 100%; height: 100%; object-fit: contain; display: block;
	filter: grayscale(1); opacity: .45;
	transition: filter .2s ease, opacity .2s ease;
}
.fjx-mono {
	font-family: var(--ff-font-display); text-transform: uppercase; font-size: 13px;
	letter-spacing: .02em; color: var(--ff-ink-mute);
}
.fjx-tab.is-on .fjx-crest img { filter: none; opacity: 1; }
.fjx-tab.is-on .fjx-mono { color: var(--ff-ink); }
@media (hover: hover) {
	.fjx-tab:hover .fjx-crest img { filter: none; opacity: 1; }
}
.fjx-name { display: none; }

/* The slide's clock. The script drives the fill with the Web Animations API —
   Elementor zeroes CSS transitions when the OS asks for less motion, which is
   always the case on the owner's machine. Without the script the open crest
   simply shows a full bar. */
.fjx-prog {
	display: block; width: 100%; height: 2px; overflow: hidden;
	background: rgba(11, 15, 20, .12);
}
.fjx-prog i {
	display: block; width: 100%; height: 100%;
	background: var(--ff-ink);
	transform: scaleX(0); transform-origin: left center;
}
.fjx-tab.is-on .fjx-prog i { transform: scaleX(1); }

.fjx-tab:focus-visible, .fjx-all:focus-visible { outline: 2px solid var(--ff-ink); outline-offset: 4px; }

/* "Show all clubs" — the end of the line. On a phone there is room for one
   word, so it is the same word the browse pages use: ALL. */
.fjx-all {
	flex: none; height: 38px;
	display: flex; align-items: center; gap: 6px;
	padding: 0 2px 0 8px; color: var(--ff-ink);
	font-family: var(--ff-font-display); text-transform: uppercase;
	font-size: 15px; letter-spacing: .04em; line-height: 1; white-space: nowrap;
}
.fjx-all-long { display: none; }
.fjx-all svg {
	width: 16px; height: 16px; flex: none;
	fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
	transition: transform .2s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) { .fjx-all:hover svg { transform: translateX(3px); } }

@media (min-width: 700px) {
	.fjx-bar { gap: 28px; }
	.fjx-tabs { gap: 12px; }
	.fjx-all { padding-left: 0; font-family: var(--ff-font-body); text-transform: none; font-size: 13.5px; font-weight: 600; letter-spacing: 0; }
	.fjx-all-long { display: inline; }
	.fjx-all-short { display: none; }
}
@media (min-width: 900px) {
	.fjx-bar { margin: 22px 32px 0; }
}

/* Wide: crest and name side by side, the bar running under both, the five
   bars reading as one segmented line. */
@media (min-width: 1100px) {
	.fjx-tabs { gap: 16px; }
	.fjx-tab { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 12px; }
	.fjx-crest { width: 30px; height: 30px; }
	.fjx-name {
		display: block; flex: 1 1 0; min-width: 0;
		font-family: var(--ff-font-body); font-weight: 600; font-size: 13.5px; line-height: 1.2;
		color: var(--ff-ink-mute);
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		transition: color .2s ease;
	}
	.fjx-tab.is-on .fjx-name { color: var(--ff-ink); }
	.fjx-prog { flex: 0 0 100%; }
	.fjx-all { height: 34px; }
	.fjx-now { display: none; }
}
@media (min-width: 1100px) and (hover: hover) {
	.fjx-tab:hover .fjx-name { color: var(--ff-ink); }
}

/* The section's own heading on the same edge as everything under it. */
@media (min-width: 900px) {
	.fth-jerseys--jx > .fth-h2 { padding: 0 32px; }
}
@media (min-width: 1280px) {
	.fth-jerseys--jx > .fth-h2 { max-width: none; margin-left: 0; margin-right: 0; padding: 0 32px; }
}