/**
 * Fit Football — PDP 2026.
 *
 * Type and rhythm follow firstclasscleats (the owner's first reference);
 * density and square controls follow adidas; the buy controls follow Nike.
 * Everything is scoped under .pdp so it cannot leak into the rest of the
 * site while the page is still behind ?ff_new=1.
 */

.pdp {
	/* Botiga puts the main column in a flex row. A flex item defaults to
	   min-width:auto, so it sizes to its widest content — the thumbnail rail —
	   and on a 375px phone this blew the whole page out to 480px. */
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
	--pdp-gap: 14px;
	--pdp-fill: #f1f3f4;
	--pdp-line: #d7dbde;
	--pdp-stage: #ffffff;
	font-family: var(--ff-font-body);
	color: var(--ff-ink);
	padding-bottom: 96px;
}

.pdp * {
	box-sizing: border-box;
}

.pdp-wrap {
	width: 100%;
	max-width: var(--ff-container);
	margin: 0 auto;
	padding: 0 16px;
}

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

.pdp-head {
	padding-top: 6px;
}

.pdp-flag {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--ff-sale);
	font-size: var(--ff-text-sm);
	font-weight: 600;
	letter-spacing: .01em;
}

.pdp-title {
	margin: 0;
	font-family: var(--ff-font-display);
	font-size: clamp(1.6rem, 5.4vw, 2.25rem);
	line-height: 1.06;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.pdp-sub {
	margin: 4px 0 0;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-md);
}

.pdp-price {
	margin: 12px 0 0;
	font-size: 1.375rem;
	font-weight: 700;
}

.pdp-price del {
	margin-right: 8px;
	color: var(--ff-ink-mute);
	font-weight: 400;
}

.pdp-price ins {
	color: var(--ff-sale);
	text-decoration: none;
}

/* ---- gallery: stage + thumbnail rail --------------------------------- */

.pdp-gal {
	margin: 16px -16px 0;
}

.pdp-stage {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--pdp-stage);
	overflow: hidden;
}

.pdp-stage-item {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease;
}

.pdp-stage-item.is-on {
	opacity: 1;
	visibility: visible;
}

.pdp-stage-item img,
.pdp-stage-item video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pdp-stage-item.is-video video {
	object-fit: cover;
	background: #000;
}

.pdp-video-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
	transition: opacity .2s ease;
}

.pdp-video-play::before {
	content: "";
	position: absolute;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
}

.pdp-video-play svg {
	position: relative;
	transform: translateX(2px);
}

/* Playback is running: the disc fades out but the overlay STAYS clickable —
   it covers the whole clip, so a tap anywhere on a playing video pauses it
   where it is. Taking pointer-events away here (which this rule used to do)
   is what left a playing clip with no way to stop it: the disc was gone and
   nothing underneath answered a tap. On pause the class comes off again and
   the disc returns, so the control never disappears without a replacement.
   The sound and full-screen buttons carry z-index 3 and stay above it. */
.pdp-video-play.is-off {
	opacity: 0;
}

/* The loading card has the middle of the frame — there is nothing to press
   yet, so this one really does take the pointer away. */
.pdp-stage-item.is-video:has(.pdp-vload:not([hidden])) .pdp-video-play {
	opacity: 0;
	pointer-events: none;
}

/* ----------------------------------------------------------------------
 * "The clip is coming."
 *
 * A product clip is megabytes and the poster underneath it is perfectly
 * sharp, so for a few seconds the page looks finished and frozen at the
 * same time — which reads as broken. This says otherwise, in the shop's
 * own name: FIT FOOTBALL with a light sweeping across it, over a rail that
 * fills as the file arrives.
 *
 * Two animations, both cheap: a transform on a three-pixel bar, which the
 * compositor owns outright, and a background-position on one short line of
 * text. It is printed by PHP so it is on screen in the first frame, and it
 * is display:none the moment playback starts, which stops both animations
 * dead rather than leaving them running behind a transparent box.
 * -------------------------------------------------------------------- */

.pdp-vload {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	display: grid;
	justify-items: center;
	gap: 11px;
	padding: 17px 26px 15px;
	border-radius: 16px;
	background: rgba(11, 15, 20, .42);
	border: 1px solid rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	backdrop-filter: blur(10px) saturate(130%);
	box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
	transition: opacity .3s ease;
	pointer-events: none;
}

/* The `hidden` attribute loses to any display rule, and this one is a grid. */
.pdp-vload[hidden] {
	display: none;
}

.pdp-vload.is-gone {
	opacity: 0;
}

.pdp-vload-mark {
	font-family: var(--ff-font-display);
	font-size: 21px;
	line-height: 1;
	letter-spacing: .13em;
	text-transform: uppercase;
	/* The sweep is the gradient moving under the letters, not a second copy
	   of the word sliding over them. The dim stops are never fully clear, so
	   the name is legible for the whole cycle. */
	background: linear-gradient(100deg, rgba(255, 255, 255, .32) 30%, #fff 50%, rgba(255, 255, 255, .32) 70%);
	background-size: 260% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: pdp-vload-sweep 1.6s linear infinite;
}

@keyframes pdp-vload-sweep {
	from { background-position: 130% 0; }
	to   { background-position: -30% 0; }
}

.pdp-vload-rail {
	position: relative;
	display: block;
	width: 152px;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	overflow: hidden;
}

.pdp-vload-fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ff-brand), #3ddc93);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s ease;
}

/* Before the file has told us how long it is there is no honest percentage,
   so a short piece of the rail runs instead of a fill standing still. */
.pdp-vload.is-wait .pdp-vload-fill {
	inset: 0 auto 0 0;
	width: 42%;
	transform: translateX(-110%);
	transition: none;
	animation: pdp-vload-run 1.15s cubic-bezier(.45, .05, .55, .95) infinite;
}

@keyframes pdp-vload-run {
	from { transform: translateX(-110%); }
	to   { transform: translateX(340%); }
}

.pdp-vload-say {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

/* A LOADING INDICATOR IS INFORMATION, NOT DECORATION.
   Reduced motion used to stop this bar dead — `animation:none` on a full-width
   fill — which is the one thing it must never do: a still bar over a file that
   is still downloading says the page has crashed, and the owner's own machine
   runs with reduced motion on. So the travelling bar is replaced with a slow,
   flat opacity breath: no sliding, nothing that could trigger vestibular
   discomfort, but the page is visibly still working. */
@media (prefers-reduced-motion: reduce) {
	.pdp-vload-mark {
		animation: none;
		-webkit-text-fill-color: rgba(255, 255, 255, .88);
		color: rgba(255, 255, 255, .88);
	}

	.pdp-vload.is-wait .pdp-vload-fill {
		width: 100%;
		transform: none;
		animation: pdp-vload-breathe 1.6s ease-in-out infinite;
	}
}

@keyframes pdp-vload-breathe {
	0%, 100% { opacity: .25; }
	50%      { opacity: .85; }
}

.pdp-thumbs {
	display: flex;
	min-width: 0;
	gap: 8px;
	padding: 10px 16px 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.pdp-thumbs::-webkit-scrollbar {
	display: none;
}

.pdp-thumb {
	position: relative;
	flex: 0 0 auto;
	width: 68px;
	height: 68px;
	padding: 0;
	border: 1px solid var(--pdp-line);
	background: var(--pdp-stage);
	cursor: pointer;
}

.pdp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pdp-thumb.is-on {
	border-color: var(--ff-ink);
	border-width: 2px;
}

/* The video tile is deliberately loud — it is the one thing the owner
   wants people to notice in the rail. */
.pdp-thumb.is-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(11, 15, 20, .32);
}

.pdp-thumb-play {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	color: #fff;
}

/* The surface a clip belongs to, on the thumbnail itself. Only printed when a
   product has more than one clip — with a single video there is nothing to
   tell apart and the label would just be ink on the picture. Bottom-left so it
   never sits under the play triangle. */
.pdp-thumb-fit {
	position: absolute;
	left: 3px;
	bottom: 3px;
	z-index: 2;
	padding: 1px 4px;
	border-radius: 3px;
	background: rgba(11, 15, 20, .82);
	color: #fff;
	font-family: var(--ff-font-body, 'Inter', sans-serif);
	font-size: 9px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .06em;
}

/* Where the versions end and the product begins. A hairline rather than a gap:
   a gap alone reads as a scroll position, a rule reads as a division. */
.pdp-thumb-sep {
	flex: 0 0 1px;
	align-self: stretch;
	margin: 4px 3px;
	background: var(--pdp-line, #e4e8ec);
}

/* ---- currency switcher ----------------------------------------------- */

.pdp-currency {
	display: flex;
	justify-content: center;
	margin: 16px 0 4px;
}

.pdp-currency .yay-currency-single-page-switcher,
.pdp-currency .yay-currency-form-switcher {
	margin: 0;
}

/* YayCurrency swaps its <select> for a custom widget, so both are styled. */
.pdp-currency select,
.pdp-currency .yay-currency-custom-select {
	min-width: 0;
	padding: 6px 26px 6px 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ff-ink-mute);
	font-family: inherit;
	font-size: var(--ff-text-sm);
	letter-spacing: .02em;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377808c' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
	background-size: 14px;
	cursor: pointer;
}

.pdp-currency .yay-currency-custom-select-wrapper {
	width: auto;
}

.pdp-currency .yay-currency-custom-select::after,
.pdp-currency .yay-currency-custom-select .arrow {
	display: none; /* the wrapper already draws a chevron */
}

.pdp-currency .yay-currency-custom-options {
	border: 1px solid var(--pdp-line);
	border-radius: 0;
	box-shadow: var(--ff-shadow-pop);
}

/* ---- buy column ------------------------------------------------------ */

.pdp-buy {
	margin-top: 22px;
}

.pdp-lbl {
	margin: 0 0 10px;
	font-size: var(--ff-text-md);
	font-weight: 700;
}

/* Select Fit — Nike's flat two-up, one line of text, no tall boxes. */

.pdp-fit {
	margin-bottom: 22px;
}

.pdp-fit-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

/* adidas puts the picture first, the short code under it and the full
   name under that — all centred, all in one small stack. */
.pdp-fit-opt {
	display: grid;
	justify-items: center;
	gap: 3px;
	padding: 14px 8px 12px;
	border: 1px solid var(--pdp-line);
	background: #fff;
	color: var(--ff-ink);
	font-family: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color .14s ease;
}

.pdp-fit-opt svg {
	color: var(--ff-ink-mute);
	transition: color .14s ease;
}

.pdp-fit-opt strong {
	font-size: var(--ff-text-sm);
	font-weight: 700;
	letter-spacing: .04em;
}

.pdp-fit-opt span {
	color: var(--ff-ink-mute);
	font-size: 11px;
	line-height: 1.3;
}

.pdp-fit-opt.is-on svg {
	color: var(--ff-ink);
}

.pdp-lbl.is-center {
	text-align: center;
}

.pdp-fit-opt.is-on {
	border-color: var(--ff-ink);
	box-shadow: inset 0 0 0 1px var(--ff-ink);
}

/* ---- price per surface ----------------------------------------------- *
 *
 * Top-right of the box, the way a size chip carries a stock note. It is
 * printed on every surface as soon as ANY of them is priced, because a row
 * where only one option shows a number reads as "that one costs extra" even
 * when it is the cheaper one.
 *
 * The chosen box inverts it rather than growing it: the price the shopper is
 * actually paying should be the one that reads as settled, and nothing here
 * moves or resizes on selection, so the row never twitches.
 * -------------------------------------------------------------------- */

.pdp-fit-opt {
	position: relative;
}

.pdp-fit-price {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 2px 6px;
	border-radius: 3px;
	background: var(--pdp-fill, #f1f3f4);
	color: var(--ff-ink-soft, #3f4854);
	font-family: var(--ff-font-body, 'Inter', sans-serif);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.01em;
	white-space: nowrap;
	transition: background-color .16s cubic-bezier(.22,.61,.36,1), color .16s cubic-bezier(.22,.61,.36,1);
}

.pdp-fit-opt.is-on .pdp-fit-price {
	background: var(--ff-ink);
	color: #fff;
}

/* The chip sits where the icon would otherwise reach on a narrow phone, so
   the box gains the height it needs rather than letting the two collide. */
.pdp-fit-opt:has(.pdp-fit-price) {
	padding-top: 26px;
}

/* Anything a currency filter wraps around the amount must not bring its own
   box along — only the number is wanted inside the chip. */
.pdp-fit-price .woocommerce-Price-amount,
.pdp-fit-price bdi {
	color: inherit;
	font: inherit;
	background: none;
}

/* Size grid — adidas: filled cells, square corners, black when chosen. */

.pdp-sizes-block {
	width: 100%;
	flex: 1 0 100%; /* survives being dropped inside WAPF's flex row */
	margin-bottom: 20px;
}

.pdp-sizes-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 10px;
}

.pdp-sizes-guide {
	background: none;
	border: 0;
	padding: 0;
	color: var(--ff-ink);
	font-family: inherit;
	font-size: var(--ff-text-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.pdp-sizes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.pdp-size {
	padding: 15px 4px;
	border: 1px solid transparent;
	background: var(--pdp-fill);
	font-family: inherit;
	font-size: var(--ff-text-sm);
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.pdp-size:hover {
	border-color: var(--ff-ink);
}

.pdp-size.is-on {
	background: var(--ff-ink);
	color: #fff;
}

.pdp-size[disabled] {
	color: var(--ff-ink-mute);
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: .55;
}

/* Native Woo/WAPF form living inside our shell. */

.pdp-form .wapf-field-container {
	margin-bottom: 16px;
}

.pdp-form label {
	font-size: var(--ff-text-sm);
	font-weight: 700;
}

.pdp-form select,
.pdp-form input[type="text"],
.pdp-form input[type="number"] {
	width: 100%;
	padding: 13px 12px;
	border: 1px solid var(--pdp-line);
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: var(--ff-text-md);
}

/* No quantity stepper above the buy button. Nobody buys two of the same
   boot in the same size, and the bag is where a quantity belongs anyway —
   the field itself stays in the form so WooCommerce still posts 1. */
.pdp-form .quantity {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* With the stepper gone the wrapper has one child left, and a flex row of
   one still measured itself against the ghost. */
.pdp-form .botiga-single-addtocart-wrapper {
	display: block;
	/* It is itself a flex item inside WAPF's row, so it has to be told to
	   claim the line or it shrinks to the button it holds. */
	width: 100%;
	flex: 1 0 100%;
}

/* Nike's buy button: a full-width black pill. */
.pdp-form button[type="submit"],
.pdp-form .single_add_to_cart_button {
	width: 100%;
	padding: 19px 20px;
	border: 0;
	border-radius: var(--ff-radius-pill);
	background: var(--ff-ink);
	color: #fff;
	font-family: inherit;
	font-size: var(--ff-text-md);
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background .15s ease;
}

.pdp-form button[type="submit"]:hover {
	background: #000;
}

/* A size select re-skinned into the grid stays in the DOM — WAPF still reads
   it and it is a required field, so it must stay focusable rather than be
   display:none, or the browser refuses to report a validation error on it.
   !important throughout because WAPF's own layout rules are more specific
   and were leaving the wrapper at full width, pushing the page sideways. */
.pdp-form .ff-skinned {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* The clone module's own in-the-box strip — replaced by .pdp-box here. */
.pdp .ffbx {
	display: none;
}

/* ---- what's in the box ----------------------------------------------- */

.pdp-box {
	margin-top: 4px;
	border-top: 1px solid var(--pdp-line);
}

.pdp-box-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 18px 0;
	border: 0;
	background: none;
	color: var(--ff-ink);
	font-family: inherit;
	font-size: var(--ff-text-md);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.pdp-box-chev {
	flex: 0 0 auto;
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.pdp-box.is-open .pdp-box-chev {
	transform: rotate(180deg);
}

/* Animating grid-template-rows gives a real height transition without
   measuring anything in JS. */
.pdp-box-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .32s cubic-bezier(.22, .61, .36, 1);
}

.pdp-box.is-open .pdp-box-panel {
	grid-template-rows: 1fr;
}

.pdp-box-inner {
	overflow: hidden;
}

.pdp-box-note {
	margin: 0 0 12px;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-sm);
}

.pdp-box-list {
	margin: 0;
	padding: 0 0 18px;
	list-style: none;
	display: grid;
	gap: 8px;
}

.pdp-box-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--pdp-fill);
}

.pdp-box-ic {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #fff;
	color: var(--ff-ink);
}

.pdp-box-lb {
	font-size: var(--ff-text-sm);
	font-weight: 600;
}

/* ---- delivery rail --------------------------------------------------- */

.pdp-rail {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin: 26px 0;
	padding: 20px 0;
	border-top: 1px solid var(--pdp-line);
	border-bottom: 1px solid var(--pdp-line);
}

.pdp-rail-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.pdp-rail-ic {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--ff-ink);
	color: #fff;
}

.pdp-rail-step strong {
	font-size: var(--ff-text-sm);
}

.pdp-rail-d {
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-xs);
}

/* ---- info card ------------------------------------------------------- */

.pdp-info {
	border: 1px solid var(--pdp-line);
}

.pdp-info-row,
.pdp-info .pdp-acc > summary {
	padding: 16px;
	font-size: var(--ff-text-sm);
}

.pdp-info-row + .pdp-info-row,
.pdp-info .pdp-acc {
	border-top: 1px solid var(--pdp-line);
}

.pdp-rating {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pdp-stars {
	display: inline-flex;
	gap: 2px;
}

.pdp-star {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	background: var(--pdp-fill);
	color: #c6ccd1;
	font-size: 13px;
	font-style: normal;
}

.pdp-star.is-on {
	background: #00b67a; /* the green tile the reference uses */
	color: #fff;
}

.pdp-info-mute {
	color: var(--ff-ink-mute);
}

.pdp-info-row.is-pays {
	padding: 14px 16px;
}

.pdp-pays {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pdp-pay {
	display: inline-flex;
	border: 1px solid var(--pdp-line);
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
}

.pdp-pay svg {
	display: block;
}

/* ---- accordions ------------------------------------------------------ */

.pdp-acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.pdp-acc > summary::-webkit-details-marker {
	display: none;
}

.pdp-acc > summary::after {
	content: "+";
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
}

.pdp-acc[open] > summary::after {
	content: "\2013";
}

.pdp-acc-body {
	padding-bottom: 18px;
	color: var(--ff-ink-soft);
	font-size: var(--ff-text-sm);
	line-height: 1.65;
}

.pdp-acc-body h2,
.pdp-acc-body h3 {
	font-size: var(--ff-text-md);
}

.pdp-info .pdp-acc-body {
	padding: 0 16px 16px;
}

.pdp-acc-group {
	margin-top: 30px;
	border-top: 1px solid var(--pdp-line);
}

.pdp-acc-group .pdp-acc {
	border-bottom: 1px solid var(--pdp-line);
}

.pdp-acc.is-lg > summary {
	font-size: var(--ff-text-lg);
	padding: 20px 0;
}

/* ---- spec rows (owner priority) -------------------------------------- */

.pdp-specs {
	margin-top: 34px;
}

.pdp-spec {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 0;
}

.pdp-spec + .pdp-spec {
	border-top: 1px solid var(--pdp-line);
}

.pdp-spec-ic {
	flex: 0 0 auto;
	color: var(--ff-ink);
}

.pdp-spec-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pdp-spec-k {
	color: var(--ff-ink-soft);
	font-size: var(--ff-text-sm);
}

.pdp-spec-v {
	/* adidas sets these values in a condensed grotesque; Anton is the closest
	   face already loaded on the site. */
	font-family: var(--ff-font-display);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: .035em;
	line-height: 1.15;
	text-transform: uppercase;
}

/* ---- content blocks -------------------------------------------------- */

.pdp-blocks {
	margin-top: 40px;
	display: grid;
	gap: 34px;
}

.pdp-block-img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 14px;
	background: var(--pdp-fill);
}

.pdp-block-t {
	margin: 0 0 10px;
	font-family: var(--ff-font-display);
	font-size: var(--ff-text-xl);
	line-height: 1.1;
	text-transform: uppercase;
}

.pdp-block-body,
.pdp-block-list {
	color: var(--ff-ink-soft);
	font-size: var(--ff-text-md);
	line-height: 1.7;
}

.pdp-block-list {
	margin: 0;
	padding-left: 1.1em;
}

.pdp-block-list li {
	margin-bottom: 8px;
}

.pdp-quote {
	margin: 0;
	font-family: var(--ff-font-display);
	font-size: clamp(1.5rem, 5vw, 2rem);
	line-height: 1.2;
	text-transform: uppercase;
}

.pdp-quote-by {
	margin: 10px 0 0;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-sm);
}

/* ---- trust block ----------------------------------------------------- */

.pdp-trust {
	margin-top: 48px;
	padding: 30px 20px;
	background: var(--ff-paper-soft);
	text-align: center;
}

.pdp-trust-eyebrow {
	margin: 0 0 6px;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.pdp-trust-h {
	margin: 0 0 22px;
	font-family: var(--ff-font-display);
	font-size: var(--ff-text-xl);
	text-transform: uppercase;
}

.pdp-trust-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 18px;
}

.pdp-trust-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pdp-trust-stat + .pdp-trust-stat {
	border-left: 1px solid var(--pdp-line);
}

.pdp-trust-stat strong {
	color: var(--ff-brand);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
}

.pdp-trust-stat span {
	color: var(--ff-ink-soft);
	font-size: var(--ff-text-sm);
}

/* ---- product grid ---------------------------------------------------- */

.pdp-grid-wrap {
	margin-top: 48px;
}

.pdp-h2 {
	margin: 0 0 18px;
	font-family: var(--ff-font-display);
	font-size: var(--ff-text-xl);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.pdp-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pdp-gap);
}

.pdp-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.pdp-card-img {
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: 10px;
}

.pdp-card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pdp-card-price {
	display: block;
	font-weight: 700;
	font-size: var(--ff-text-sm);
}

.pdp-card-name {
	display: block;
	margin-top: 2px;
	color: var(--ff-ink-soft);
	font-size: var(--ff-text-sm);
	line-height: 1.35;
}

/* ---- sticky buy bar -------------------------------------------------- */

.pdp-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .96);
	border-top: 1px solid var(--pdp-line);
	backdrop-filter: blur(8px);
}

.pdp-sticky-btn {
	width: 100%;
	padding: 17px 20px;
	border: 0;
	border-radius: var(--ff-radius-pill);
	background: var(--ff-ink);
	color: #fff;
	font-family: inherit;
	font-size: var(--ff-text-md);
	font-weight: 700;
	cursor: pointer;
}

/* ---- size sheet ------------------------------------------------------ */

.pdp-sheet {
	position: fixed;
	inset: 0;
	z-index: 80;
}

.pdp-sheet-scrim {
	position: absolute;
	inset: 0;
	background: rgba(11, 15, 20, .5);
	opacity: 0;
	transition: opacity .25s ease;
}

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

.pdp-sheet-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 82vh;
	overflow-y: auto;
	padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
	background: #fff;
	transform: translateY(100%);
	transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.pdp-sheet.is-open .pdp-sheet-panel {
	transform: translateY(0);
}

.pdp-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.pdp-sheet-head h2 {
	margin: 0;
	font-size: var(--ff-text-lg);
	font-weight: 700;
}

.pdp-sheet-x {
	border: 0;
	background: none;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

/* ---- desktop --------------------------------------------------------- */

@media (min-width: 900px) {
	.pdp {
		--pdp-gap: 20px;
	}

	.pdp-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: 56px;
		align-items: start;
	}

	.pdp-head {
		grid-column: 2;
		grid-row: 1;
	}

	.pdp-gal {
		grid-column: 1;
		grid-row: 1 / 6;
		margin: 18px 0 0;
		position: sticky;
		top: 90px;
	}

	.pdp-thumbs {
		padding: 10px 0 0;
	}

	.pdp-currency {
		grid-column: 2;
		grid-row: 2;
		justify-content: flex-start;
	}

	.pdp-buy {
		grid-column: 2;
		grid-row: 3;
		margin-top: 6px;
	}

	.pdp-specs {
		grid-column: 2;
		grid-row: 4;
	}

	.pdp-acc-group {
		grid-column: 2;
		grid-row: 5;
	}

	/* Everything from here is full width — and the sticky gallery above ends
	   with row 5, so the photos stop travelling once social proof starts. */
	.pdp-blocks,
	.pdp-ugc,
	.pdp-trust,
	.pdp-reviews,
	.pdp-grid-wrap {
		grid-column: 1 / -1;
	}

	.pdp-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* On a mouse the form is always in reach — the bar is a phone pattern. */
	.pdp-sticky {
		display: none;
	}
}

/* ---- stepped review form --------------------------------------------- */

.pdp-rvf {
	position: fixed;
	inset: 0;
	z-index: 90;
}

.pdp-rvf-scrim {
	position: absolute;
	inset: 0;
	background: rgba(11, 15, 20, .55);
	opacity: 0;
	transition: opacity .25s ease;
}

.pdp-rvf.is-open .pdp-rvf-scrim {
	opacity: 1;
}

.pdp-rvf-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 90vh;
	overflow-y: auto;
	padding: 26px 20px calc(20px + env(safe-area-inset-bottom));
	background: #fff;
	transform: translateY(100%);
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.pdp-rvf.is-open .pdp-rvf-panel {
	transform: translateY(0);
}

.pdp-rvf-x {
	position: absolute;
	top: 10px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
}

.pdp-rvf-step {
	display: none;
}

.pdp-rvf-step.is-on {
	display: block;
}

.pdp-rvf-step h3 {
	margin: 0 0 6px;
	font-family: var(--ff-font-display);
	font-size: var(--ff-text-xl);
	text-transform: uppercase;
}

.pdp-rvf-step > p {
	margin: 0 0 16px;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-sm);
}

.pdp-rvf-step input[type="text"],
.pdp-rvf-step input[type="email"],
.pdp-rvf-step textarea {
	width: 100%;
	margin-bottom: 10px;
	padding: 14px 12px;
	border: 1px solid var(--pdp-line);
	border-radius: 0;
	font-family: inherit;
	font-size: var(--ff-text-md);
}

.pdp-rvf-stars {
	display: flex;
	gap: 6px;
	margin: 10px 0 4px;
}

.pdp-rvf-star {
	border: 0;
	background: none;
	color: #d7dbde;
	font-size: 2.5rem;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: color .12s ease, transform .12s ease;
}

.pdp-rvf-star.is-on {
	color: #f5a623;
}

.pdp-rvf-star:active {
	transform: scale(.9);
}

.pdp-rvf-drop {
	display: grid;
	place-items: center;
	padding: 26px;
	border: 1px dashed var(--pdp-line);
	color: var(--ff-ink-soft);
	font-size: var(--ff-text-sm);
	font-weight: 600;
	cursor: pointer;
}

.pdp-rvf-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.pdp-rvf-previews img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	border: 1px solid var(--pdp-line);
}

.pdp-rvf-note {
	margin: 2px 0 0;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-xs);
}

.pdp-rvf-err {
	margin: 12px 0 0;
	color: var(--ff-sale);
	font-size: var(--ff-text-sm);
}

.pdp-rvf-nav {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}

.pdp-rvf-back {
	padding: 15px 24px;
	border: 1px solid var(--pdp-line);
	background: none;
	font-family: inherit;
	font-size: var(--ff-text-sm);
	font-weight: 700;
	cursor: pointer;
}

.pdp-rvf-next {
	flex: 1;
	padding: 16px 24px;
	border: 0;
	border-radius: var(--ff-radius-pill);
	background: var(--ff-ink);
	color: #fff;
	font-family: inherit;
	font-size: var(--ff-text-md);
	font-weight: 700;
	cursor: pointer;
}

.pdp-rvf-next:disabled {
	opacity: .35;
	cursor: not-allowed;
}

/* ---- lightbox -------------------------------------------------------- */

.pdp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(11, 15, 20, .88);
	cursor: zoom-out;
}

.pdp-lightbox img,
.pdp-lightbox video {
	max-width: 100%;
	max-height: 90vh;
}

@media (min-width: 900px) {
	.pdp-rv-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.pdp-rvf-panel {
		left: 50%;
		bottom: auto;
		top: 50%;
		width: min(560px, 92vw);
		max-height: 86vh;
		transform: translate(-50%, -46%);
		opacity: 0;
		transition: opacity .22s ease, transform .22s ease;
	}

	.pdp-rvf.is-open .pdp-rvf-panel {
		transform: translate(-50%, -50%);
		opacity: 1;
	}
}

/* ---- reviews --------------------------------------------------------- */

.pdp-h2.is-center {
	text-align: center;
}

.pdp-reviews {
	margin-top: 56px;
}

.pdp-rv-summary {
	border: 0;
	display: grid;
	justify-items: center;
	gap: 2px;
	margin-bottom: 20px;
}

/* ----------------------------------------------------------------------
 * The score block.
 *
 * A filled square with the star knocked out of it in white, the way the
 * review sites print a rating. A glyph star is a hairline that disappears
 * over a photograph and is drawn differently by every platform; a block
 * holds its weight at any size and on any background. The fill carries the
 * score itself, so a three cannot be read as a five without counting.
 * -------------------------------------------------------------------- */

.pdp-rv-stars {
	display: inline-flex;
	gap: 3px;
	line-height: 0;
}

.pdp-rv-stars i {
	display: block;
	width: 21px;
	height: 21px;
	background: #dcdce6;
	font-style: normal;
}

.pdp-rv-stars i svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: #fff;
}

.pdp-rv-stars.is-r1 i.is-on { background: #ff3722; }
.pdp-rv-stars.is-r2 i.is-on { background: #ff8622; }
.pdp-rv-stars.is-r3 i.is-on { background: #ffce00; }
.pdp-rv-stars.is-r4 i.is-on { background: #73cf11; }
.pdp-rv-stars.is-r5 i.is-on { background: #00b67a; }

.pdp-rv-stars.is-lg i {
	width: 30px;
	height: 30px;
}

.pdp-rv-stars.is-sm {
	flex: 0 0 auto;
}

.pdp-rv-stars.is-sm i {
	width: 14px;
	height: 14px;
}

/* In a written review the score opens the card, left, above the name — the
   order the card is read in. It is not centred: centring it turned every
   card into a poster and buried the name under it. */
.pdp-rv-top .pdp-rv-stars {
	flex: 0 0 auto;
}

.pdp-rv-avg {
	margin: 8px 0 0;
	font-size: var(--ff-text-lg);
}

.pdp-rv-avg strong {
	font-weight: 700;
}

.pdp-rv-based {
	margin: 0 0 14px;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-sm);
}

.pdp-rv-bars {
	display: grid;
	gap: 6px;
	width: 100%;
	max-width: 380px;
}

.pdp-rv-bar {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pdp-rv-track {
	flex: 1;
	height: 12px;
	background: var(--pdp-fill);
	overflow: hidden;
}

.pdp-rv-track > span {
	display: block;
	height: 100%;
	background: var(--ff-ink);
}

.pdp-rv-n {
	min-width: 22px;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-sm);
	text-align: right;
}

.pdp-rv-open {
	display: block;
	width: 100%;
	max-width: 380px;
	margin: 0 auto 28px;
	padding: 16px 24px;
	border: 0;
	background: var(--ff-ink);
	color: #fff;
	font-family: var(--ff-font-display);
	font-size: var(--ff-text-lg);
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
}

.pdp-rv-empty {
	margin: 0;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-sm);
	text-align: center;
}

.pdp-rv-list {
	border-top: 1px solid var(--pdp-line);
}

.pdp-rv-card {
	padding: 20px 0;
	border-bottom: 1px solid var(--pdp-line);
}

.pdp-rv-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.pdp-rv-date {
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-sm);
}

.pdp-rv-by {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.pdp-rv-av {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	background: var(--pdp-fill);
	color: var(--ff-ink);
}

.pdp-rv-name {
	color: var(--ff-ink);
	font-size: var(--ff-text-md);
	font-weight: 600;
}

.pdp-rv-verified {
	padding: 3px 8px;
	background: var(--ff-ink);
	color: #fff;
	font-size: var(--ff-text-xs);
	font-weight: 700;
}

.pdp-rv-meta {
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-xs);
}

.pdp-rv-title {
	margin: 0 0 6px;
	font-size: var(--ff-text-md);
	font-weight: 700;
}

.pdp-rv-body {
	margin: 0;
	color: var(--ff-ink-soft);
	font-size: var(--ff-text-md);
	line-height: 1.6;
}

.pdp-rv-media {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.pdp-rv-shot {
	position: relative;
	width: 84px;
	height: 84px;
	padding: 0;
	border: 0;
	background: var(--pdp-fill);
	overflow: hidden;
	cursor: pointer;
}

.pdp-rv-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pdp-rv-shot.is-video {
	background: #0b0f14;
}

.pdp-rv-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
}

.pdp-rv-more {
	display: block;
	width: 100%;
	margin-top: 18px;
	padding: 15px;
	border: 1px solid var(--ff-ink);
	background: none;
	font-family: inherit;
	font-size: var(--ff-text-sm);
	font-weight: 700;
	cursor: pointer;
}

/* ---- real player reviews (customer wall) ----------------------------- */

.pdp-ugc {
	margin-top: 56px;
	min-width: 0;
	max-width: 100%;
}

.pdp-ugc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.pdp-ugc-tile {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	background: var(--pdp-fill);
	overflow: hidden;
}

.pdp-ugc-tile img,
.pdp-ugc-tile video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pdp-ugc-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}

/* The puck itself is .pdp-ugc-disc, further down with the wall. */

.pdp-ugc-tile figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 30px 12px 12px;
	background: linear-gradient(transparent, rgba(11, 15, 20, .75));
	color: #fff;
	pointer-events: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.pdp-ugc-stars {
	font-size: 15px;
	letter-spacing: 2px;
	line-height: 1;
}

.pdp-ugc-name {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: var(--ff-text-md);
	font-weight: 700;
}

.pdp-ugc-more {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 15px;
	border: 1px solid var(--ff-ink);
	background: none;
	font-family: inherit;
	font-size: var(--ff-text-sm);
	font-weight: 700;
	cursor: pointer;
}

@media (min-width: 900px) {
	.pdp-rv-list {
		columns: 2;
		column-gap: 40px;
	}

	.pdp-rv-card {
		break-inside: avoid;
	}

	.pdp-ugc-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Step 1 of the form is one big, centred star row — it is the whole screen. */

.pdp-rvf-step {
	text-align: center;
}

.pdp-rvf-step[data-step="2"] {
	text-align: left;
}

.pdp-rvf-stars {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 24px 0 10px;
}

.pdp-rvf-star {
	border: 0;
	background: none;
	color: #dfe3e6;
	font-size: clamp(2.6rem, 12vw, 3.4rem);
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: color .12s ease, transform .12s ease;
}

.pdp-rvf-star.is-on {
	color: var(--ff-star);
	transform: scale(1.06);
}

.pdp-rvf-chosen-stars {
	display: block;
	margin-bottom: 14px;
	color: var(--ff-star);
	font-size: 20px;
	letter-spacing: 2px;
}

.pdp-rvf-chosen-stars i {
	color: #dfe3e6;
	font-style: normal;
}

/* One box, not three separate fields floating in space. */
.pdp-rvf-box {
	border: 1px solid var(--pdp-line);
}

.pdp-rvf-box textarea,
.pdp-rvf-box input {
	width: 100%;
	margin: 0;
	padding: 14px 14px;
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-size: var(--ff-text-md);
	resize: vertical;
}

.pdp-rvf-box textarea {
	border-bottom: 1px solid var(--pdp-line);
}

.pdp-rvf-box input + input {
	border-top: 1px solid var(--pdp-line);
}

.pdp-rvf-box textarea:focus,
.pdp-rvf-box input:focus {
	outline: 2px solid var(--ff-ink);
	outline-offset: -2px;
}

/* ---- green tile rating (reference block) ----------------------------- */

.pdp-rv-tiles {
	display: inline-flex;
	gap: 3px;
	vertical-align: middle;
}

.pdp-rv-tile {
	position: relative;
	display: block;
	width: 26px;
	height: 26px;
	background: #dfe3e6;
	overflow: hidden;
}

/* The fill is a hard-edged mask so a 4.8 average shows four full tiles and
   one 80%-filled tile, exactly like the reference. */
.pdp-rv-tile-fill {
	position: absolute;
	inset: 0;
	background: #00b67a;
}

.pdp-rv-tile svg {
	position: relative;
	width: 100%;
	height: 100%;
	fill: #fff;
}

.pdp-rv-tiles-lb {
	margin-left: 10px;
	font-size: var(--ff-text-md);
	font-weight: 700;
	vertical-align: middle;
}

.pdp-info-row.pdp-rating {
	display: flex;
	align-items: center;
}

/* The score is a way into the reviews, so it has to look like one. Only the
   tiles and the words are the target — the row is full width and a pointer
   over empty space to its right would promise a link that is not there. */
.pdp-info-row.pdp-rating[role="button"] {
	cursor: pointer;
	width: fit-content;
	border-radius: 4px;
}

@media (hover: hover) {
	.pdp-info-row.pdp-rating[role="button"]:hover .pdp-rv-tiles-lb {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

.pdp-info-row.pdp-rating[role="button"]:focus-visible {
	outline: 2px solid var(--ff-ink);
	outline-offset: 3px;
}

/* Sends the band clear of the sticky header when the score jumps to it. The
   script measures the header too; this is the floor under that. */
.pdp-trust {
	scroll-margin-top: 96px;
}

/* ---- review pager ---------------------------------------------------- */

.pdp-rv-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 22px;
}

.pdp-rv-pg,
.pdp-rv-step {
	min-width: 34px;
	padding: 7px 9px;
	border: 0;
	background: none;
	color: var(--ff-ink);
	font-family: inherit;
	font-size: var(--ff-text-md);
	cursor: pointer;
}

.pdp-rv-pg.is-on {
	color: var(--ff-ink);
	font-weight: 700;
}

/* ---- review form: media first --------------------------------------- */

.pdp-rvf-drop {
	display: grid;
	place-items: center;
	gap: 8px;
	padding: 40px 20px;
	border: 1px dashed var(--pdp-line);
	color: var(--ff-ink-soft);
	font-size: var(--ff-text-md);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.pdp-rvf-drop:hover {
	border-color: var(--ff-ink);
	background: var(--pdp-fill);
}

.pdp-rvf-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.pdp-rvf-previews > * {
	position: relative;
	width: 78px;
	height: 78px;
	border: 1px solid var(--pdp-line);
	object-fit: cover;
	background: var(--pdp-fill);
}

.pdp-rvf-previews .is-clip {
	display: grid;
	place-items: center;
	color: var(--ff-ink-soft);
	font-size: var(--ff-text-xs);
	font-weight: 700;
	text-align: center;
	overflow: hidden;
	padding: 4px;
}

/* The caption is deliberately quieter than the camera above it. */
.pdp-rvf-caption {
	width: 100%;
	margin-top: 14px;
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--pdp-line);
	border-radius: 0;
	font-family: inherit;
	font-size: var(--ff-text-sm);
}

.pdp-rvf-caption:focus {
	outline: 0;
	border-bottom-color: var(--ff-ink);
}

/* ---- showcase strip (under the delivery steps) ----------------------- */

.pdp-strip {
	margin: 4px 0 26px;
	min-width: 0;
	max-width: 100%;
}

.pdp-strip-h {
	margin: 0 0 12px;
	font-size: var(--ff-text-lg);
	font-weight: 700;
	line-height: 1.25;
}

.pdp-strip-rail {
	display: flex;
	gap: 8px;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.pdp-strip-rail::-webkit-scrollbar {
	display: none;
}

.pdp-strip-tile {
	position: relative;
	flex: 0 0 auto;
	width: 110px;
	aspect-ratio: 9 / 16;
	margin: 0;
	background: var(--pdp-fill);
	overflow: hidden;
	scroll-snap-align: start;
}

.pdp-strip-tile img,
.pdp-strip-tile video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =======================================================================
 * adidas pass — taller stage, fewer rules, one spacing rhythm.
 *
 * The reference separates sections with whitespace, not hairlines, and its
 * gallery is a tall panel rather than a square. Everything below overrides
 * the earlier, boxier take.
 * ==================================================================== */

/* Botiga's content wrapper adds its own top padding above our first row. */
.pdp {
	margin-top: -14px;
}

.pdp-head {
	padding-top: 0;
}

.pdp-title {
	font-size: clamp(1.5rem, 5vw, 2.125rem);
	line-height: 1.08;
}

.pdp-price {
	margin-top: 8px;
	font-size: 1.25rem;
}

/* ---- gallery --------------------------------------------------------- */

.pdp-gal {
	margin-top: 14px;
}

/* Taller than wide, like the reference — a square crops boots badly and
   leaves the clip letterboxed. */
.pdp-stage {
	aspect-ratio: 4 / 5;
}

.pdp-stage-item.is-video video {
	object-fit: contain;
	background: #000;
}

.pdp-stage-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--ff-ink);
	box-shadow: 0 1px 4px rgba(11, 15, 20, .18);
	opacity: 0;
	transition: opacity .15s ease;
	cursor: pointer;
}

.pdp-gal:hover .pdp-stage-nav,
.pdp-stage-nav:focus-visible {
	opacity: 1;
}

.pdp-stage-nav.is-prev {
	left: 10px;
}

.pdp-stage-nav.is-next {
	right: 10px;
}

/* Touch has no hover, so the arrows stay put once a clip is playing. */
@media (hover: none) {
	.pdp-stage-nav {
		opacity: 1;
		background: rgba(255, 255, 255, .82);
	}
}

/* Sound toggle, drawn in CSS so there is no second icon file. */
.pdp-video-mute {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(11, 15, 20, .55) no-repeat center / 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H3v6h3l5 4z'/%3E%3Cpath d='M17 9l4 6M21 9l-4 6'/%3E%3C/svg%3E");
	cursor: pointer;
}

/* Full screen. Bottom-left, the mirror of the sound button on the right, so
   the frame has one control in each lower corner and neither lands on the
   currency switcher sitting under the gallery. Hidden by the script when the
   browser offers no full-screen route at all. */
.pdp-video-fs {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(11, 15, 20, .55) no-repeat center / 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M15 20h5v-5M9 20H4v-5'/%3E%3C/svg%3E");
	cursor: pointer;
	transition: opacity .2s ease;
}

/* In full screen the same button closes it, so it says so. */
.pdp-video-fs.is-on {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h5V4M20 9h-5V4M20 15h-5v5M4 15h5v5'/%3E%3C/svg%3E");
}

.pdp-video-fs[hidden] {
	display: none;
}

/* The stage crops its clips to fill a square frame. Full screen is the one
   place that would be wrong — the shopper asked to see the whole thing — so
   the picture is fitted there instead, on black. */
.pdp-stage-item.is-video:fullscreen video,
.pdp-stage-item.is-video:-webkit-full-screen video {
	object-fit: contain;
	background: #000;
}

.pdp-stage-item.is-video:fullscreen,
.pdp-stage-item.is-video:-webkit-full-screen {
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 1;
	visibility: visible;
}

.pdp-video-mute.is-on {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 6a9 9 0 0 1 0 12'/%3E%3C/svg%3E");
}

/* Selected thumbnail gets an underline, not a heavy border. */
.pdp-thumbs {
	gap: 6px;
	padding-top: 8px;
}

.pdp-thumb {
	width: 62px;
	height: 62px;
	border: 1px solid transparent;
	border-bottom: 2px solid transparent;
	background: var(--pdp-fill);
}

.pdp-thumb.is-on {
	border-width: 1px;
	border-color: transparent;
	border-bottom: 2px solid var(--ff-ink);
}

/* ---- one rhythm, and far fewer rules --------------------------------- */

.pdp-currency {
	margin: 12px 0 0;
}

.pdp-buy {
	margin-top: 18px;
}

.pdp-fit,
.pdp-sizes-block {
	margin-bottom: 18px;
}

.pdp-lbl,
.pdp-strip-h {
	font-size: var(--ff-text-md);
	font-weight: 700;
}

.pdp-sizes {
	gap: 2px; /* adidas cells sit almost flush */
}

.pdp-size {
	padding: 17px 4px;
}

/* The delivery rail is a step diagram, not a boxed panel. */
.pdp-rail {
	margin: 26px 0 24px;
	padding: 0;
	border: 0;
}

.pdp-rail-ic {
	width: 44px;
	height: 44px;
}

/* The info card keeps one outline; its rows are split by space, not rules. */
.pdp-info {
	border: 0;
	border-top: 1px solid var(--pdp-line);
}

.pdp-info-row,
.pdp-info .pdp-acc > summary {
	padding: 15px 0;
}

.pdp-info .pdp-acc-body {
	padding: 0 0 15px;
}

.pdp-info-row.is-pays {
	padding: 14px 0 4px;
}

.pdp-strip {
	margin: 0 0 24px;
}

.pdp-specs {
	margin-top: 30px;
}

.pdp-spec {
	gap: 20px;
	padding: 16px 0;
}

.pdp-spec + .pdp-spec {
	border: 0; /* whitespace does this job in the reference */
}

.pdp-acc-group {
	margin-top: 22px;
}

.pdp-ugc,
.pdp-reviews,
.pdp-trust,
.pdp-grid-wrap {
	margin-top: 44px;
}

/* ---- desktop: adidas proportions ------------------------------------- */

@media (min-width: 900px) {
	.pdp-wrap {
		/* The reference gives the imagery well over half the width and keeps
		   the buy column narrow and calm. */
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		column-gap: 64px;
	}

	.pdp-gal {
		margin-top: 0;
	}

	.pdp-stage {
		aspect-ratio: 1 / 1;
	}

	.pdp-head {
		padding-top: 4px;
	}

	.pdp-title {
		font-size: 2rem;
	}

	.pdp-specs,
	.pdp-acc-group {
		margin-top: 26px;
	}
}

/* The theme's 60px wrapper margin pushes the title away from the header;
   on this page the two belong together. Scoped to the marker body class so
   every other template keeps its normal spacing. */
.ff-pdp26 .content-wrapper {
	margin-top: 0;
}

.ff-pdp26 .pdp {
	margin-top: 0;
	padding-top: 14px;
}

/* =======================================================================
 * Fixes round 2
 * ==================================================================== */

/* The supplier clips are 9:16; letterboxing them inside a 4:5 stage put
   black bars down both sides. Filling the frame is the lesser crop. */
.pdp-stage-item.is-video video {
	object-fit: cover;
	background: var(--pdp-stage);
}

/* A silent source gets no sound button at all — the JS hides it once
   playback proves there is no audio track. */
.pdp-video-mute[hidden] {
	display: none;
}

/* Imagery stops at a sane height instead of running the full column. */
@media (min-width: 900px) {
	.pdp-stage {
		max-height: 62vh;
	}

	.pdp-stage-item img {
		object-fit: contain;
	}
}

/* ---- spec rows: adidas ----------------------------------------------- */

.pdp-specs {
	margin-top: 26px;
	padding: 22px 0 6px;
	border-top: 1px solid var(--pdp-line);
}

@media (min-width: 900px) {
	/* The reference lays them three across in one band, not stacked. */
	.pdp-specs {
		grid-column: 1 / -1;
		grid-row: auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px 32px;
		margin-top: 34px;
		padding: 26px 0 10px;
	}

	.pdp-spec {
		padding: 6px 0;
	}

	/* With the specs full width, the drawers take the whole column too —
	   which is exactly how the reference reads. */
	.pdp-acc-group {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-top: 6px;
	}

	/* The sticky gallery now releases at the end of the buy column. */
	.pdp-gal {
		grid-row: 1 / 4;
	}
}

.pdp-spec-k {
	font-size: var(--ff-text-sm);
}

.pdp-acc-sub {
	margin: 18px 0 6px;
	font-size: var(--ff-text-md);
	font-weight: 700;
}

/* The drawers are the calm part of the page: hairlines, no fills. */
.pdp-acc-group {
	border-top: 1px solid var(--pdp-line);
}

.pdp-acc.is-lg > summary {
	padding: 22px 0;
	font-size: var(--ff-text-md);
	font-weight: 700;
}

/* Facts list inside the Details drawer. */
.pdp-acc-facts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pdp-acc-facts li {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 11px 0;
	border-bottom: 1px solid var(--pdp-line);
	font-size: var(--ff-text-sm);
}

.pdp-acc-facts li:last-child {
	border-bottom: 0;
}

.pdp-acc-facts span {
	color: var(--ff-ink-mute);
}

.pdp-acc-facts strong {
	text-align: right;
}

/* =======================================================================
 * Currency chip, express checkout, payment sheet
 * ==================================================================== */

/* The switcher rides inside the image frame, bottom-left, so it holds
   still while the gallery is swiped. */
.pdp-currency {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	display: flex;
	margin: 0;
	padding: 2px 4px;
	border-radius: var(--ff-radius-pill);
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(6px);
	box-shadow: 0 1px 4px rgba(11, 15, 20, .14);
}

.pdp-currency:empty {
	display: none;
}

.pdp-currency select,
.pdp-currency .yay-currency-custom-select {
	padding: 5px 24px 5px 8px;
	color: var(--ff-ink);
	font-size: var(--ff-text-xs);
	font-weight: 600;
	background-position: right 6px center;
	background-size: 13px;
}

.pdp-currency .yay-currency-custom-options {
	bottom: 100%;
	top: auto;
}

.pdp-stage {
	touch-action: pan-y; /* horizontal drags belong to the gallery */
}

.pdp-stage:focus-visible {
	outline: 2px solid var(--ff-ink);
	outline-offset: -2px;
}

/* ---- shipping sentence ----------------------------------------------- */

.pdp-rail-copy {
	margin: -8px 0 22px;
	color: var(--ff-ink-soft);
	font-size: var(--ff-text-sm);
	text-align: center;
}

/* The payment page is a tab of its own now, so the panel is only ever as
   tall as the order it is holding. */

/* Once the tab is already open this is a second chance, not the main road. */

/* Nothing floats over anything here, so the spinner takes its own room. */

/* =======================================================================
 * Grid rebuild
 *
 * The sticky gallery used to share one grid with the full-width sections
 * below it. A sticky box is only bounded by its own grid area, so those
 * sections scrolled underneath the pinned photo and the drawer titles
 * disappeared behind it. The two-column area is now its own container and
 * everything after it is a plain full-width block, so the overlap cannot
 * happen at all.
 * ==================================================================== */

.pdp-top {
	min-width: 0;
}

@media (min-width: 900px) {
	.pdp-wrap {
		display: block;
	}

	.pdp-top {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		column-gap: 64px;
		align-items: start;
	}

	.pdp-head {
		grid-column: 2;
		grid-row: 1;
	}

	.pdp-gal {
		grid-column: 1;
		grid-row: 1 / 3;
		position: sticky;
		top: 90px;
		margin-top: 0;
	}

	.pdp-buy {
		grid-column: 2;
		grid-row: 2;
		margin-top: 6px;
	}

	/* Everything below the fold is full width and never grid-placed. */
	.pdp-specs,
	.pdp-acc-group,
	.pdp-ugc,
	.pdp-trust,
	.pdp-reviews,
	.pdp-grid-wrap {
		grid-column: auto;
		grid-row: auto;
	}

	.pdp-specs {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px 32px;
	}
}

/* =======================================================================
 * The payment sheet showed its spinner on top of a perfectly loaded
 * checkout: `display: grid` / `display: block` on these two elements beat
 * the `hidden` attribute, which only carries `display: none` from the UA
 * stylesheet. Both need an explicit override or `hidden` does nothing.
 * ==================================================================== */

.pdp-xps-wait[hidden],
.pdp-xps-sum[hidden],
.pdp-xps-paid[hidden],
.pdp-xps-hint[hidden],
.pdp-xps-loading[hidden],
.pdp-video-mute[hidden],
.pdp-video-fs[hidden],
.pdp-sticky[hidden],
.pdp-rv-card[hidden],
.pdp-ugc-tile[hidden] {
	display: none !important;
}

/* A slow sheen crossing the button, the way a wallet button breathes. */

/* ---- express: sticky twin, waiting state, inline notice -------------- */

.pdp-sticky {
	display: grid;
	gap: 8px;
}

/* Not disabled — it still responds, it just says the size is missing.
   A greyed-out button gives the shopper nothing to act on. */

/* =======================================================================
 * Express checkout, step one: our own details form.
 *
 * The provider's page asked for these six fields in its own type on its own
 * domain — a hand-off in the middle of a hand-off. Asking here keeps the
 * shopper on the shop until the only screen that has to be someone else's:
 * Stripe's card form.
 * ==================================================================== */

/* =======================================================================
 * Frame corners: currency (left) and the material note (right).
 *
 * Both are labels on the photo, not controls the page is about, so they are
 * sized to be read when looked for and ignored otherwise — one chip height,
 * one pill shape, one translucent white. The currency chip was the louder of
 * the two and comes down to meet the new one.
 * ==================================================================== */

.pdp-currency {
	align-items: center;
	padding: 0;
}

/* YayCurrency replaces its <select> with a widget of its own: a trigger row
   (flag + name + arrow) sized by a `medium` class that is 36px tall. The
   plain select is styled too — it is what shows for the split second before
   their script runs, and if it ever fails to. */
.pdp .pdp-currency select {
	height: 26px;
	padding: 0 20px 0 8px;
	font-size: .6875rem;
	background-position: right 5px center;
	background-size: 11px;
}

/* Their own arrow is kept; ours would be the second chevron in the row. */
.pdp .pdp-currency .yay-currency-custom-select {
	padding: 0;
	background-image: none;
}

.pdp .pdp-currency .yay-currency-custom-select__trigger {
	height: 26px;
	min-height: 0;
	padding: 0 8px;
	gap: 6px;
	border: 0;
	background: transparent;
}

.pdp .pdp-currency .yay-currency-custom-selected-option {
	gap: 6px;
}

/* ff-components.css pins the flag and the label site-wide with !important (the
   header switcher needs them that size), so the only way to shrink this one
   copy is to out-shout it inside this scope. Nothing else on the site moves. */
.pdp .pdp-currency .yay-currency-flag {
	width: 14px !important;
	height: 14px !important;
	min-width: 14px !important;
	min-height: 0;
}

.pdp .pdp-currency .yay-currency-selected-option {
	font-size: .6875rem !important;
	letter-spacing: .02em;
}

.pdp .pdp-currency .yay-currency-custom-arrow svg {
	width: 12px;
	height: 12px;
}

/* The list it opens keeps the same small type. */
.pdp .pdp-currency .yay-currency-custom-options {
	max-height: 240px;
	font-size: var(--ff-text-xs);
}

/* The video's sound button owns this corner already. It moves up a row so the
   two never overlap, and fades out entirely while the note is open.
   The full-screen button is the same furniture on the opposite side and must
   follow every one of these rules — left on its own at bottom:10px it dropped
   a row below its twin and landed on the currency switcher. The two belong on
   one line, always. */
.pdp-video-mute,
.pdp-video-fs {
	transition: opacity .2s ease;
}

.pdp-stage:has(.pdp-mat) .pdp-video-mute,
.pdp-stage:has(.pdp-mat) .pdp-video-fs {
	bottom: 46px;
}

.pdp-stage:has(.pdp-mat.is-open) .pdp-video-mute,
.pdp-stage:has(.pdp-mat.is-open) .pdp-video-fs {
	opacity: 0;
	pointer-events: none;
}

/* The wrapper spans the frame so the panel can be measured against the photo
   rather than against the chip; nothing in it takes a pointer except the chip
   and the panel itself, so swiping the gallery still works through it. */
.pdp-mat {
	position: absolute;
	inset: 10px;
	z-index: 4;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	pointer-events: none;
}

.pdp-mat-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--ff-radius-pill);
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 1px 4px rgba(11, 15, 20, .14);
	color: var(--ff-ink);
	font-family: inherit;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	pointer-events: auto;
	transition: background .2s ease, color .2s ease;
}

.pdp-mat-chip svg {
	flex: 0 0 auto;
	opacity: .7;
}

.pdp-mat-chip:hover {
	background: #fff;
}

/* Open reads as pressed, the way a filter chip does. */
.pdp-mat.is-open .pdp-mat-chip {
	background: var(--ff-ink);
	color: #fff;
}

.pdp-mat.is-open .pdp-mat-chip svg {
	opacity: 1;
}

/* Rises out of the chip rather than dropping over the photo — the shopper
   asked a small question and gets a small card back. */
.pdp-mat-panel {
	position: absolute;
	right: 0;
	bottom: 34px;
	width: min(322px, 100%);
	max-height: calc(100% - 42px);
	overflow: auto;
	padding: 14px 15px 15px;
	border: 1px solid rgba(11, 15, 20, .09);
	border-radius: 4px;
	background: rgba(255, 255, 255, .93);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	box-shadow: var(--ff-shadow-pop);
	pointer-events: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(.985);
	transform-origin: 100% 100%;
	transition: opacity .26s ease, transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s;
}

.pdp-mat.is-open .pdp-mat-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.pdp-mat-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.pdp-mat-head h3 {
	margin: 0;
	font-family: var(--ff-font-display);
	font-size: 1.0625rem;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.pdp-mat-x {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: -2px -4px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ff-ink);
	opacity: .45;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.pdp-mat-x:hover {
	opacity: .8;
}

.pdp-mat-lead {
	margin: 7px 0 0;
	color: var(--ff-ink-soft);
	font-size: .8125rem;
	line-height: 1.5;
}

.pdp-mat-rows {
	margin: 11px 0 0;
	padding: 0;
	border-top: 1px solid rgba(11, 15, 20, .1);
}

.pdp-mat-rows > div {
	padding: 9px 0;
	border-bottom: 1px solid rgba(11, 15, 20, .08);
}

.pdp-mat-rows > div:last-child {
	padding-bottom: 2px;
	border-bottom: 0;
}

.pdp-mat-rows dt {
	margin: 0 0 2px;
	color: var(--ff-ink);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.pdp-mat-rows dd {
	margin: 0;
	color: var(--ff-ink-soft);
	font-size: .8125rem;
	line-height: 1.5;
}

/* =======================================================================
 * Shirts: version tiles and personalisation.
 *
 * A kit has to read like the boot page — same tiles, same hairlines, same
 * one dark action — or the shop looks like two shops.
 * ==================================================================== */

.ff-hidden-field {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- which version --------------------------------------------------- */

.pdp-vers {
	width: 100%;
	flex: 1 0 100%;
	margin-bottom: 20px;
}

.pdp-vers-grid {
	display: grid;
	gap: 8px;
}

.pdp-vers-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--pdp-line);
	background: #fff;
	color: var(--ff-ink);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .14s ease, box-shadow .14s ease;
}

.pdp-vers-opt:hover {
	border-color: var(--ff-ink);
}

.pdp-vers-opt.is-on {
	border-color: var(--ff-ink);
	box-shadow: inset 0 0 0 1px var(--ff-ink);
}

.pdp-vers-main {
	display: grid;
	gap: 2px;
}

.pdp-vers-main strong {
	font-size: var(--ff-text-sm);
	font-weight: 700;
}

.pdp-vers-main span {
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-xs);
}

.pdp-vers-price {
	flex: 0 0 auto;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-xs);
	font-weight: 700;
	white-space: nowrap;
}

.pdp-vers-opt.is-on .pdp-vers-price {
	color: var(--ff-ink);
}

/* ---- the personalisation row ----------------------------------------- */

.pdp-pers {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	flex: 1 0 100%;
	padding: 14px 16px;
	margin-bottom: 20px;
	border: 1px solid var(--pdp-line);
	background: var(--pdp-fill);
}

.pdp-pers.is-set {
	border-color: var(--ff-ink);
	background: #fff;
}

.pdp-pers-ico {
	flex: 0 0 auto;
	color: var(--ff-ink);
}

.pdp-pers-txt {
	display: grid;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.pdp-pers-txt strong {
	font-size: var(--ff-text-sm);
}

.pdp-pers-txt span {
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-xs);
	line-height: 1.45;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pdp-pers.is-set .pdp-pers-txt span {
	color: var(--ff-ink);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.pdp-pers-go {
	flex: 0 0 auto;
	padding: 10px 18px;
	border: 1px solid var(--ff-ink);
	background: #fff;
	color: var(--ff-ink);
	font-family: inherit;
	font-size: var(--ff-text-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.pdp-pers-go:hover {
	background: var(--ff-ink);
	color: #fff;
}

/* ---- the panel ------------------------------------------------------- */

.pdp-cz {
	/* Same reason as the checkout sheet: this panel is appended to <body>. */
	--pdp-line: #d7dbde;
	--pdp-fill: #f1f3f4;
	position: fixed;
	inset: 0;
	z-index: 130;
}

.pdp-cz[hidden] {
	display: none !important;
}

.pdp-cz-scrim {
	position: absolute;
	inset: 0;
	background: rgba(11, 15, 20, .6);
	opacity: 0;
	transition: opacity .25s ease;
}

.pdp-cz.is-open .pdp-cz-scrim {
	opacity: 1;
}

.pdp-cz-panel {
	position: absolute;
	left: 50%;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(560px, 100%);
	height: 82vh;
	max-height: 82vh;
	background: #fff;
	border-radius: 14px 14px 0 0;
	transform: translate(-50%, 100%);
	transition: transform .32s cubic-bezier(.22, .61, .36, 1);
	overflow: hidden;
}

.pdp-cz.is-open .pdp-cz-panel {
	transform: translate(-50%, 0);
}

.pdp-cz-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 18px;
	border-bottom: 1px solid var(--pdp-line);
	font-family: var(--ff-font-display);
	font-size: 1.05rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.pdp-cz-x {
	border: 0;
	background: none;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
}

.pdp-cz-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 20px 18px 24px;
}

/* The preview is the whole point: it is the thing people show a friend. */
.pdp-cz-preview {
	display: grid;
	justify-items: center;
	margin-bottom: 22px;
}

.pdp-cz-shirt {
	width: min(220px, 60%);
	height: auto;
}

.pdp-cz-fabric {
	fill: var(--ff-ink);
}

.pdp-cz-collar {
	fill: rgba(255, 255, 255, .22);
}

.pdp-cz-name,
.pdp-cz-number {
	fill: #fff;
	font-family: var(--ff-font-display), 'Anton', sans-serif;
	letter-spacing: .06em;
}

.pdp-cz-name {
	font-size: 30px;
}

.pdp-cz-number {
	font-size: 116px;
	letter-spacing: .02em;
}

.pdp-cz-name.is-ghost,
.pdp-cz-number.is-ghost {
	fill: rgba(255, 255, 255, .28);
}

.pdp-cz-hint {
	margin: 8px 0 0;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-xs);
}

.pdp-cz-form {
	display: grid;
	gap: 16px;
}

.pdp-cz-field > span {
	display: block;
	margin-bottom: 6px;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-xs);
}

.pdp-cz-field i {
	font-style: normal;
	opacity: .7;
}

.pdp-cz-field input {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--pdp-line);
	border-radius: 4px;
	background: #f2f4f6;
	font-family: inherit;
	font-size: var(--ff-text-md);
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background .15s ease, border-color .15s ease;
}

.pdp-cz-field input:focus {
	outline: none;
	background: #fff;
	border-color: var(--ff-ink);
}

.pdp-cz-field.is-short input {
	max-width: 120px;
	text-align: center;
}

.pdp-cz-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.pdp-cz-chip {
	padding: 8px 12px;
	border: 1px solid var(--pdp-line);
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: var(--ff-text-xs);
	cursor: pointer;
}

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

.pdp-cz-free {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: #17913a;
	font-size: var(--ff-text-xs);
}

.pdp-cz-foot {
	display: flex;
	gap: 10px;
	padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--pdp-line);
}

.pdp-cz-clear {
	padding: 15px 20px;
	border: 1px solid var(--pdp-line);
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	font-size: var(--ff-text-sm);
	cursor: pointer;
}

.pdp-cz-save {
	flex: 1;
	padding: 15px 20px;
	border: 0;
	border-radius: 4px;
	background: var(--ff-ink);
	color: #fff;
	font-family: inherit;
	font-size: var(--ff-text-sm);
	font-weight: 700;
	letter-spacing: .03em;
	cursor: pointer;
}

@media (min-width: 700px) {
	.pdp-cz-body {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 26px;
		align-items: start;
	}

	.pdp-cz-preview {
		margin-bottom: 0;
		position: sticky;
		top: 0;
	}

	.pdp-cz-shirt {
		width: 100%;
	}
}

/* =======================================================================
 * Specs, the way the sportswear sites lay them out.
 *
 * The old row — icon, small grey label, big uppercase value, hairline,
 * repeat — read as a settings list. adidas and Nike both do the same thing
 * instead: a quiet grid of cards, the label small and lettered wide above,
 * the value in plain sentence case, and a lot of air. It reads as
 * information about a product rather than as a form.
 * ==================================================================== */

.pdp-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: 34px;
	padding: 1px;
	background: var(--pdp-line);
	border: 1px solid var(--pdp-line);
}

.pdp-spec,
.pdp-spec + .pdp-spec {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	padding: 20px 18px;
	border: 0;
	background: #fff;
}

.pdp-spec-ic {
	color: var(--ff-ink-mute);
}

.pdp-spec-ic svg {
	width: 26px;
	height: 26px;
	display: block;
}

.pdp-spec-txt {
	gap: 5px;
	min-width: 0;
}

.pdp-spec-k {
	color: var(--ff-ink-mute);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* The value stops shouting: sentence case, body face, room to wrap. */
.pdp-spec-v {
	font-family: var(--ff-font-body);
	font-size: var(--ff-text-sm);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.45;
	text-transform: none;
	overflow-wrap: anywhere;
}

/* An odd number of rows: the last one runs the full width rather than
   leaving a hole in the grid. */
.pdp-spec:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

@media (max-width: 560px) {
	.pdp-specs {
		grid-template-columns: minmax(0, 1fr);
	}

	.pdp-spec {
		padding: 16px 15px;
	}
}

/* ---- shirts and everything that is not a boot ------------------------ */

/* Portrait photography, shown whole: no crop, no side pillars. */
.pdp-gal.is-tall .pdp-stage {
	aspect-ratio: 3 / 4;
}

.pdp-gal.is-tall .pdp-stage-item img {
	object-fit: contain;
}

/* The message chip: it now says what it is and shows that it opens. */
.pdp-mat-chip {
	height: 28px;
	padding: 0 8px 0 10px;
	font-weight: 700;
	letter-spacing: .02em;
}

.pdp-mat-arrow {
	opacity: .55;
	transition: transform .18s ease, opacity .18s ease;
}

.pdp-mat-chip:hover .pdp-mat-arrow {
	opacity: 1;
	transform: translateX(2px);
}

.pdp-mat-chip[aria-expanded="true"] .pdp-mat-arrow {
	transform: rotate(90deg);
	opacity: 1;
}

/* =======================================================================
 * Customise, as a sheet.
 *
 * Same shape as the checkout: it rises from the bottom edge, claims most of
 * the screen, and asks before it throws work away. One action at the foot.
 * ==================================================================== */

.pdp-cz-panel {
	height: 88vh;
	max-height: 88vh;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -18px 60px rgba(10, 12, 14, .18);
	transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 700px) {
	.pdp-cz-panel {
		height: min(88vh, 900px);
		max-height: min(88vh, 900px);
	}
}

/* Name and number are one thought, so they share a row. */
.pdp-cz-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 110px;
	gap: 12px;
	align-items: end;
}

.pdp-cz-row .pdp-cz-field.is-short input {
	max-width: none;
}

.pdp-cz-save {
	width: 100%;
}

/* ---- "are you sure" — the checkout's question, in ink ------------------ */

.pdp-cz-confirm {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 22px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(2px);
}

.pdp-cz-confirm[hidden] {
	display: none !important;
}

.pdp-cz-confirm-box {
	max-width: 320px;
	text-align: center;
}

.pdp-cz-confirm h3 {
	margin: 0 0 8px;
	font-family: var(--ff-font-display);
	font-size: 1.15rem;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.pdp-cz-confirm p {
	margin: 0 0 20px;
	color: var(--ff-ink-mute);
	font-size: var(--ff-text-sm);
	line-height: 1.6;
}

.pdp-cz-keep,
.pdp-cz-drop {
	display: block;
	width: 100%;
	padding: 14px 18px;
	border-radius: 4px;
	font-family: inherit;
	font-size: var(--ff-text-sm);
	font-weight: 700;
	cursor: pointer;
}

.pdp-cz-keep {
	border: 0;
	background: var(--ff-ink);
	color: #fff;
}

.pdp-cz-drop {
	margin-top: 8px;
	border: 1px solid var(--pdp-line);
	background: #fff;
	color: var(--ff-ink);
}

.pdp-cz-panel {
	position: absolute;
}

/* =======================================================================
 * Customise, rebuilt to the site's own rules.
 *
 * It was a narrow centred card with form-ish type. It is now the same thing
 * the bag drawer and the checkout are: full width, rising from the bottom
 * edge, Anton for the name of the thing, 11px letter-spaced small caps for
 * every label, hairlines rather than boxes, and one dark action at the foot.
 * ==================================================================== */

.pdp-cz-panel {
	left: 0;
	width: 100%;
	max-width: none;
	transform: translateY(100%);
	border-radius: 16px 16px 0 0;
}

.pdp-cz.is-open .pdp-cz-panel {
	transform: none;
}

/* A short bar at the top says "drag me", the way a sheet should. */
.pdp-cz-panel::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	border-radius: 999px;
	background: var(--pdp-line);
}

.pdp-cz-head {
	padding: 22px 20px 14px;
	border-bottom: 1px solid var(--pdp-line);
	font-family: var(--ff-font-display);
	font-size: 1.25rem;
	letter-spacing: .02em;
}

.pdp-cz-body {
	padding: 26px 20px 30px;
}

/* The preview is the hero of this sheet, so it gets the room to be one. */
.pdp-cz-preview {
	padding: 26px 0 22px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--pdp-line);
	background: var(--pdp-fill);
	border-radius: 6px;
}

.pdp-cz-shirt {
	width: min(240px, 62%);
}

.pdp-cz-hint {
	margin-top: 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ff-ink-mute);
}

/* Labels read like the spec rows on the product page. */
.pdp-cz-field > span {
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ff-ink-mute);
}

.pdp-cz-field i {
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: none;
	opacity: .8;
}

.pdp-cz-field input {
	padding: 15px 16px;
	border-radius: 4px;
	font-size: 1.05rem;
	font-weight: 600;
}

.pdp-cz-form {
	gap: 20px;
}

.pdp-cz-free {
	padding-top: 4px;
	font-size: var(--ff-text-xs);
	letter-spacing: .01em;
}

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

.pdp-cz-save {
	padding: 17px 20px;
	border-radius: 4px;
	font-size: var(--ff-text-sm);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* On a wide screen a full-bleed sheet would stretch the fields across a
   metre of glass; the sheet stays full width, its contents do not. */
@media (min-width: 700px) {
	.pdp-cz-head,
	.pdp-cz-foot {
		max-width: 760px;
		margin: 0 auto;
		width: 100%;
	}

	.pdp-cz-body {
		max-width: 760px;
		margin: 0 auto;
		width: 100%;
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		gap: 34px;
		align-items: start;
	}

	.pdp-cz-preview {
		margin-bottom: 0;
		border-bottom: 0;
		position: sticky;
		top: 0;
	}
}

/* =======================================================================
 * Product rails.
 *
 * The two-column grid at the end of the page was a list of things. adidas
 * and Nike both end a product page with a row you drag: big pictures on a
 * soft ground, the name and price quiet underneath, and the row running off
 * the edge so it is obvious there is more. Same hairlines, same type, same
 * two colours as the rest of the page.
 * ==================================================================== */

.pdp-shelf {
	margin-top: 46px;
}

.pdp-shelf-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.pdp-shelf-head .pdp-h2 {
	margin: 0;
	flex: 1;
}

.pdp-shelf-more {
	color: var(--ff-ink);
	font-size: var(--ff-text-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.pdp-shelf-more:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pdp-shelf-nav {
	display: none;
	gap: 6px;
}

.pdp-shelf-arrow {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--pdp-line);
	background: #fff;
	color: var(--ff-ink);
	cursor: pointer;
	transition: border-color .14s ease;
}

.pdp-shelf-arrow:hover {
	border-color: var(--ff-ink);
}

.pdp-shelf-arrow[disabled] {
	opacity: .35;
	cursor: default;
}

/* The track bleeds to both edges on a phone so a card is always half-shown —
   that half-card is what tells a thumb there is more to the right. */
.pdp-shelf-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(210px, 1fr);
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin: 0 -16px;
	padding: 0 16px 4px;
	scroll-padding-left: 16px;
}

.pdp-shelf-track::-webkit-scrollbar {
	display: none;
}

.pdp-rcard {
	scroll-snap-align: start;
	display: block;
	/* Never stretched by a flex or grid parent: the card's height is its
	   photograph's height plus its text, and that is the whole point. */
	align-self: start;
	color: inherit;
	text-decoration: none;
}

.pdp-rcard-img {
	position: relative;
	display: block;
	/* Every card carries its own `aspect-ratio` inline, taken from the file it
	   is about to draw, so a wide cleat is a wide frame and a square shirt is
	   a square one and neither sits in a band of empty backdrop. The ratios
	   below are only the fallback for a photo with no size on record — and
	   there is deliberately no padding here: the frame is the photograph, so
	   any inset would put the letterboxing straight back.
	   The background still paints behind the shot, which is what the
	   per-product colour in the product panel is for on a cut-out PNG. */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #fff;
}

.pdp-rcard.is-tall .pdp-rcard-img {
	aspect-ratio: 3 / 4;
}

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

.pdp-rcard:hover .pdp-rcard-img img {
	transform: scale(1.04);
}

.pdp-rcard-flag {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 8px;
	background: var(--ff-ink);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.pdp-rcard-txt {
	display: block;
	padding: 12px 2px 0;
}

.pdp-rcard-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--ff-text-sm);
	font-weight: 600;
	line-height: 1.4;
}

.pdp-rcard-price {
	display: block;
	margin-top: 6px;
	font-size: var(--ff-text-sm);
	font-weight: 700;
}

.pdp-rcard-price del {
	margin-right: 6px;
	color: var(--ff-ink-mute);
	font-weight: 400;
}

.pdp-rcard-price ins {
	color: var(--ff-sale);
	text-decoration: none;
}

@media (min-width: 700px) {
	.pdp-shelf-track {
		grid-auto-columns: minmax(240px, 1fr);
		gap: 16px;
		margin: 0;
		padding: 0 0 4px;
		scroll-padding-left: 0;
	}

	.pdp-shelf-nav {
		display: flex;
	}
}

/* =========================================================================
 * Review media: sending, and what a clip looks like before it plays.
 * ====================================================================== */

/* ---- the drop target now states its limit ---------------------------- */

.pdp-rvf-drop small {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--ff-ink-mute);
}

/* A picked clip wears its own first frame as soon as the browser has cut
   one, so the customer sees what they are about to send. */
.pdp-rvf-previews .is-clip {
	position: relative;
	background-size: cover;
	background-position: center;
}

.pdp-rvf-previews .is-clip.has-poster {
	color: #fff;
	text-shadow: 0 1px 6px rgba(11, 15, 20, .8);
}

/* ---- the progress bar ------------------------------------------------ */

.pdp-rvf-sending {
	margin-top: 14px;
}

.pdp-rvf-sending[hidden] {
	display: none;
}

.pdp-rvf-bar {
	height: 3px;
	border-radius: 999px;
	background: var(--pdp-fill, #f1f3f4);
	overflow: hidden;
}

.pdp-rvf-bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--ff-ink);
	transition: width .18s ease-out;
}

/* Once the file has landed the bar has nothing left to measure, so it stops
   claiming to: the fill breathes in place while the server works. */
.pdp-rvf-bar span.is-waiting {
	animation: ff-rvf-wait 1.1s ease-in-out infinite;
}

@keyframes ff-rvf-wait {
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

.pdp-rvf-sending-lb {
	margin: 8px 0 0;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--ff-ink-mute);
	font-variant-numeric: tabular-nums;
}

/* ---- clips on the photo surfaces ------------------------------------- */

.pdp-loopclip {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--pdp-fill, #f1f3f4);
}

/* The badge is a fallback for autoplay refusals and reduced-motion, so it
   steps out of the way the moment a clip is actually running. */
.pdp-strip-tile .pdp-ugc-play,
.pdp-ugc-tile .pdp-ugc-play {
	transition: opacity .25s ease;
}

.pdp-strip-tile.is-playing .pdp-ugc-play,
.pdp-ugc-tile.is-playing .pdp-ugc-play {
	opacity: 0;
	pointer-events: none;
}

/* ---- a clip in the written list has a face --------------------------- */

.pdp-rv-shot.is-video {
	position: relative;
	overflow: hidden;
	background: var(--pdp-fill, #f1f3f4);
}

.pdp-rv-shot.is-video img,
.pdp-rv-shot.is-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* The play mark sits over the frame rather than on an empty tile, so it
   reads as "this picture moves" instead of "something is missing". */
.pdp-rv-shot.is-video .pdp-rv-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: linear-gradient(180deg, rgba(11, 15, 20, 0) 40%, rgba(11, 15, 20, .35));
	text-shadow: 0 1px 8px rgba(11, 15, 20, .6);
}

/* =========================================================================
 * The product card, with what else there is to look at.
 * ====================================================================== */

/**
 * A row of small stills under the main shot — the gallery, visible without
 * opening the product. The featured image is never repeated here; it is
 * already the large one above.
 *
 * On a rail these would fight the horizontal scroll, so they only appear in
 * a grid.
 */
/**
 * The gallery row under a card.
 *
 * Tight against the photograph on purpose — a gap here would read as a
 * separate thing rather than as more of the same product. And the stills
 * share the width instead of claiming a fixed one, so a product with six
 * photos fits the card exactly as neatly as one with two.
 */
/* Shown on every surface that draws this card — category grid, search,
   homepage grid, the shelves on a product page. A product should look the
   same wherever it is met, and half the point of the stills is that a
   shopper can tell two colourways apart without opening either. */
.pdp-rcard-shots {
	display: flex;
	gap: 3px;
	margin-top: 3px;
}

.pdp-rcard-shot {
	position: relative;
	display: block;
	/* Share the row, but never grow into a second hero: two stills beside
	   each other at half the card width would compete with the photo above
	   them. */
	flex: 1 1 0;
	min-width: 0;
	max-width: 46px;
	aspect-ratio: 1;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--pdp-line);
}

.pdp-rcard-shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* The clip's own tile: the same size as a photo, with the mark over it, so
   the row reads as "four pictures and a video" at a glance. */
.pdp-rcard-shot.is-clip img {
	object-fit: cover;
	opacity: .82;
}

.pdp-rcard-shot.is-clip svg {
	position: absolute;
	inset: 0;
	margin: auto;
	color: #fff;
	filter: drop-shadow(0 1px 3px rgba(11, 15, 20, .7));
}

/**
 * The mark on the main image.
 *
 * The first thing anyone sees of a product has to be the product, so a clip
 * is never the opening frame — it is announced instead, and it plays on the
 * product page where there is room for it.
 */
.pdp-rcard-vmark {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	/* Frosted rather than filled, so it sits on the photograph instead of
	   punching a hole in it, and ringed in white so it holds on a dark shot
	   as well as on a pale one. */
	background-color: rgba(11, 15, 20, .5);
	box-shadow:
		inset 0 0 0 1.5px rgba(255, 255, 255, .7),
		0 4px 14px rgba(11, 15, 20, .28);
	color: #fff;
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	transition: transform .3s cubic-bezier(.22, .61, .36, 1), background-color .3s ease;
}

/* One slow ring pushing outward — the smallest possible way to say "this
   one moves" without animating anything on the product itself. */
.pdp-rcard-vmark::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55);
	animation: pdp-vmark-ring 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
	pointer-events: none;
}

@keyframes pdp-vmark-ring {
	0%   { transform: scale(1);    opacity: .55; }
	70%  { transform: scale(1.55); opacity: 0; }
	100% { transform: scale(1.55); opacity: 0; }
}

.pdp-rcard:hover .pdp-rcard-vmark {
	transform: scale(1.08);
	background-color: rgba(11, 15, 20, .78);
}

.pdp-rcard-vmark svg {
	position: relative;
	z-index: 1;
	margin-left: 2px;
	filter: drop-shadow(0 1px 2px rgba(11, 15, 20, .45));
}

@media (prefers-reduced-motion: reduce) {
	.pdp-rcard-vmark::after { animation: none; }
}

/* ---- the frame reel --------------------------------------------------- */

/**
 * Stacked stills, one visible at a time. The layers cross-fade rather than
 * cutting because a hard cut between two still frames reads as a glitch,
 * while a fade reads as footage.
 */
.pdp-reel {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background: var(--pdp-fill, #f1f3f4);
}

.pdp-reel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .6s ease;
}

.pdp-reel img.is-on {
	opacity: 1;
}

/* A reel carries no badge at all. The strip is a shop window: it runs by
   itself and there is nothing on it to press. */

.pdp-reel-live {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
	z-index: 2;
}

/* ======================================================================
 * Real player reviews — the wall, 2026-08-23
 *
 * Square-ish tiles with a soft corner, and the score the customer gave
 * printed over the bottom of their own picture. The strip under the delivery
 * steps is deliberately left alone: that one is a silent looping window and
 * carries no furniture.
 * ==================================================================== */

.pdp-ugc.is-photos .pdp-ugc-tile {
	aspect-ratio: 1 / 1;
	border-radius: 14px;
}

/* The stars sit on a short gradient rather than a bar, so a light photo does
   not lose them and a dark one does not grow a black stripe.
   Written as a descendant of the tile on purpose: this is a <figcaption>, and
   the generic `.pdp-ugc-tile figcaption` rule further up is a COLUMN flex box
   with its own padding. Inheriting that column silently stretched the star
   row to the full width of the tile and packed it against the left edge —
   which is why these were never actually centred. */
.pdp-ugc-tile .pdp-ugc-rate {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	padding: 30px 8px 12px;
	background: linear-gradient(to top, rgba(11, 15, 20, .58), rgba(11, 15, 20, 0));
	text-shadow: none;
	pointer-events: none;
}

/* Bigger here than anywhere else on the page: on a wall of photographs the
   score is the only thing carrying words, and at fourteen pixels it read as
   decoration. The empty squares keep their grey — over a dark gradient that
   is what makes four stars visibly not five. */
.pdp-ugc-rate .pdp-rv-stars i {
	width: 18px;
	height: 18px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* Sized off the tile, which is why the steps follow the grid rather than the
   page: two columns all the way to 900px, four above it. */
@media (min-width: 520px) {
	.pdp-ugc-rate .pdp-rv-stars i {
		width: 22px;
		height: 22px;
	}
}

@media (min-width: 900px) {
	.pdp-ugc-rate .pdp-rv-stars i {
		width: 24px;
		height: 24px;
	}
}

/* ---- the wall's clips wait to be asked -------------------------------
 *
 * Nothing moves on this wall. A tile with a clip behind it is one frame, a
 * word, and a disc — the visitor decides, and only then is the file pulled.
 * The disc is glass rather than a black puck so it reads as a control on top
 * of the photograph instead of a hole punched through it.
 * -------------------------------------------------------------------- */

.pdp-ugc-play.is-still {
	background: none;
	z-index: 2;
}

.pdp-ugc-play.is-still::before {
	display: none;
}

.pdp-ugc-disc {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: #fff;
	background: rgba(11, 15, 20, .34);
	border: 1px solid rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(6px) saturate(130%);
	backdrop-filter: blur(6px) saturate(130%);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .26);
	transition: transform .22s cubic-bezier(.2, .7, .3, 1), background .22s ease;
}

.pdp-ugc-disc svg {
	position: relative;
	transform: translateX(2px);
}

/* A second ring, drawn just outside the disc, that opens on hover. It is the
   whole hover state: nothing on the photograph itself changes. */
.pdp-ugc-disc::after {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .4);
	opacity: 0;
	transform: scale(.88);
	transition: opacity .22s ease, transform .22s ease;
}

.pdp-ugc-play.is-still:hover .pdp-ugc-disc,
.pdp-ugc-play.is-still:focus-visible .pdp-ugc-disc {
	transform: scale(1.07);
	background: rgba(11, 15, 20, .5);
}

.pdp-ugc-play.is-still:hover .pdp-ugc-disc::after,
.pdp-ugc-play.is-still:focus-visible .pdp-ugc-disc::after {
	opacity: 1;
	transform: scale(1);
}

.pdp-ugc-flag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 3px 9px 4px;
	border-radius: 999px;
	background: rgba(11, 15, 20, .4);
	border: 1px solid rgba(255, 255, 255, .28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .09em;
	line-height: 1.5;
	text-transform: uppercase;
	pointer-events: none;
	transition: opacity .25s ease;
}

.pdp-ugc-tile.is-playing .pdp-ugc-flag,
.pdp-ugc-tile.is-playing .pdp-ugc-rate {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.pdp-ugc-disc,
	.pdp-ugc-disc::after {
		transition: none;
	}
}