.fsds-detail {
	background: var(--fsds-hero-bg, #0f1e1c);
	position: relative;
	/* clip, NOT hidden. Per spec, when one axis is `hidden` the other
	   computes from `visible` to `auto` — so `overflow-x: hidden` alone
	   quietly turns this into a VERTICAL SCROLL CONTAINER. With even a few
	   pixels of internal overflow the page scroll chains into it: the wheel
	   is consumed until it reaches this element's own end, stops dead, and
	   only then does the document scroll again. That's the "sticking" scroll
	   on the product page. `clip` clips without creating a scroll container
	   and leaves the other axis alone. The `hidden` above it is the fallback
	   for engines predating clip support (pre-2022), which keep the old
	   behaviour rather than losing the horizontal clipping the image bleed
	   depends on. */
	overflow-x: hidden;
	overflow-x: clip;
	min-height: var(--fsds-hero-min-height, 100vh);
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	box-sizing: border-box;
}

.fsds-detail * {
	box-sizing: border-box;
}

.fsds-columns {
	position: relative;
	max-width: var(--fsds-content-max-width, 1400px);
	width: 100%;
	margin: 0 auto;
}

/* Row 2: stats + all remaining content on the left, product image on the
   right — genuine 50/50 flex columns (not absolute positioning). The
   WHOLE row gets pulled up via negative margin so it overlaps the
   banner's lower portion; unlike an earlier version of this, nothing
   compensates to keep the text at its original position — circles, meta
   row, and info lines all move up together with the image, as one row,
   per the explicit layout spec this was rebuilt against. */
.fsds-row-2 {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--fsds-column-gap, 80px);
	margin-top: var(--fsds-row2-margin-top, -100px);
	/* Inside the negative margin above, so padding-top here eats back into
	   the overlap rather than adding to the space below the banner. The two
	   settings sit next to each other in the panel for that reason. */
	padding: var(--fsds-row2-padding, 0);
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.fsds-row-2 {
		flex-direction: column;
		margin-top: 24px;
	}
	/* Image first, then the text content below it — matches the Figma
	   mobile reference. .fsds-image-col is .fsds-row-2's second child in
	   the markup (text content comes first, since on desktop it's the
	   left column and reads first) — order is the right tool here
	   specifically because both are already direct siblings of the same
	   flex container; nothing needs to actually move in the DOM the way
	   the circle badges did, since this isn't crossing into a different
	   parent element. */
	.fsds-row-2-right {
		order: -1;
	}
}

/* On mobile specifically, the image needs to overlap the banner's own
   bottom-right corner (see the Mobile Style settings) — a plain negative
   margin on .fsds-row-2-right would pull it up as intended, but since
   it's a flex sibling of .fsds-row-2-left, that same margin would also
   drag .fsds-row-2-left (the actual text content below it) up right
   along with it, tightening or colliding with content that has nothing
   to do with the image's own overlap. Absolute positioning removes it
   from that flow calculation entirely — same technique already used for
   the circle badges' own desktop overlap — so only the image moves,
   and .fsds-row-2-left keeps its own independent, undisturbed position.
   The reserved space below (mobile_image_space) exists because that
   independence is exactly what makes this need a manual number in the
   first place: nothing here can size itself off the image's own real
   height once it's out of flow, the way ordinary spacing would. */
@media (max-width: 600px) {
	.fsds-row-2 {
		position: relative;
		padding-top: calc(var(--fsds-mobile-image-space, 260px) + 30px);
	}
	/* !important because .fsds-image-col's own mobile rule (position:
	   static; margin: 24px 0;) appears later in this file and would
	   otherwise silently win at this same viewport width — both media
	   queries (900px and 600px) are active simultaneously here, and with
	   equal selector specificity, CSS cascade rules mean whichever rule
	   comes LAST in the file wins, not whichever is "more specific" to
	   mobile. Confirmed by checking both rules' actual line numbers
	   directly rather than assuming source order matched intent. */
	/* overflow:hidden is a hard backstop, not just cosmetic: the img's
	   own transform (scale + the content-box correction's translate, see
	   FS_Image_Bounds::frame_vars()) doesn't change this wrapper's own
	   layout box, only where the artwork paints — so on a product whose
	   correction shifts it further than most, the artwork could paint
	   above this element's own top edge even though the edge itself
	   never moved. Clipping here means the wrapper's own -90px position
	   is the actual, guaranteed limit of how far up anything ever
	   becomes visible, regardless of what any single image's own
	   correction computes to. */
	.fsds-row-2-right {
		position: absolute !important;
		top: var(--fsds-mobile-image-overlap, -50px) !important;
		left: 0 !important;
		right: 0 !important;
		margin: 0 !important;
		overflow: hidden !important;
	}
}

.fsds-row-2-left {
	flex: 0 0 calc(50% - var(--fsds-column-gap, 80px) / 2);
	width: calc(50% - var(--fsds-column-gap, 80px) / 2);
	max-width: calc(50% - var(--fsds-column-gap, 80px) / 2);
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

@media (max-width: 900px) {
	.fsds-row-2-left {
		width: 100%;
		max-width: none;
	}
}

/* --- Banner: brand-colored, rounded, split into two real 50/50 columns
   — text (back-link/title/subtitle) on the left, logo on the right.
   Each column simply constrains itself to its own half; neither needs
   to know anything about the other's content to avoid colliding with
   it, which is what made the previous single-column-plus-absolute-logo
   version fragile against long titles or wide logos. */
.fsds-banner {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	background: var(--fsds-banner-bg, #0f1e1c);
	color: var(--fsds-banner-text, #ffffff);
	border-radius: var(--fsds-banner-radius, 24px);
	padding: var(--fsds-banner-padding, 40px 48px 48px 48px);
	overflow: hidden;
}

/* Tiled, rotated repeat of the brand name behind the banner's actual
   content — see FS_Detail_Split_Element::watermark_background() for how
   the tile itself is generated. A pseudo-element rather than the
   banner's own background-image so its opacity can be controlled
   independently of the banner's solid brand-color background sitting
   behind IT in turn. */
.fsds-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--fsds-banner-watermark, none);
	background-repeat: repeat-x;
	background-position: center;
	background-size: auto var(--fsds-watermark-height, 70%);
	transform: rotate(var(--fsds-watermark-rotation, -3deg));
	opacity: var(--fsds-watermark-opacity, 0.06);
	pointer-events: none;
	z-index: 0;
}

.fsds-banner-col {
	position: relative;
	z-index: 1;
}

.fsds-banner-col--text {
	flex: 0 0 50%;
	width: 50%;
	min-width: 0;
}

.fsds-banner-col--logo {
	flex: 0 0 50%;
	width: 50%;
	min-width: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

@media (max-width: 900px) {
	.fsds-banner {
		flex-wrap: wrap;
	}
	.fsds-banner-col--text,
	.fsds-banner-col--logo {
		flex: 0 0 100%;
		width: 100%;
	}
	.fsds-banner-col--logo {
		justify-content: flex-start;
		margin-top: 16px;
	}
}

@media (max-width: 600px) {
	.fsds-banner-col--logo {
		display: none;
	}
	.fsds-banner-subtitle {
		flex-wrap: nowrap;
	}
}

.fsds-banner-back {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--fsds-banner-text, #ffffff) !important;
	text-decoration: none;
	opacity: 0.75;
	margin-bottom: 24px;
}

.fsds-banner-back:hover {
	opacity: 1;
}

.fsds-banner-back svg {
	width: 16px !important;
	height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	flex: none !important;
	color: currentColor;
}

.fsds-banner-title {
	font-size: var(--fsds-title-size, 48px);
	font-weight: var(--fsds-title-weight, 400);
	line-height: var(--fsds-title-line-height, normal);
	color: var(--fsds-banner-text, #ffffff) !important;
	margin: 0 0 12px;
	max-width: var(--fsds-title-max-width, none);
}

.fsds-banner-subtitle {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	font-size: var(--fsds-subtitle-value-size, 18px);
	line-height: var(--fsds-subtitle-value-line-height, 24px);
	font-weight: var(--fsds-subtitle-value-weight, normal);
	color: var(--fsds-subtitle-value-color, #FEFDFD) !important;
	text-transform: none;
}

.fsds-banner-subtitle-label {
	font-size: var(--fsds-subtitle-label-size, 18px);
	line-height: var(--fsds-subtitle-label-line-height, 24px);
	font-weight: var(--fsds-subtitle-label-weight, normal);
	color: color-mix(in srgb, var(--fsds-subtitle-label-color, #FEFDFDB2) 70%, transparent) !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-right: 4px;
}

.fsds-banner-logo {
	max-height: var(--fsds-banner-logo-height, 64px);
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.fsds-banner-logo-inverted {
	filter: brightness(0) invert(1);
}

.fsds-banner-brand-name {
	font-size: 24px;
	font-weight: 700;
	color: var(--fsds-banner-text, #ffffff) !important;
}

/* --- Circle badges: Form/THC/CBD, pulled up via negative margin so they
   sit astride the seam between the banner and the dark background below
   it — see FS_Detail_Split_Element::render()'s $circle_margin_top for
   how far up that actually is. */
.fsds-circle-badges {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fsds-circle-gap, 16px);
	margin-bottom: 24px;
	width: fit-content;
}

.fsds-circle-badge {
	width: var(--fsds-circle-size, 128px);
	height: var(--fsds-circle-size, 128px);
	border-radius: 50%;
	border: 1px solid var(--fsds-circle-border, #FEFDFD29);
	background: var(--fsds-circle-bg, #162C2F);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	box-sizing: border-box;
	flex: none;
}

.fsds-circle-label {
	font-size: var(--fsds-circle-label-font-size, 24px);
	font-weight: var(--fsds-circle-label-weight, normal);
	line-height: var(--fsds-circle-label-line-height, normal);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fsds-circle-label-color, #FEFDFDB2);
}

.fsds-circle-value {
	font-size: var(--fsds-circle-value-font-size, 40px);
	font-weight: var(--fsds-circle-value-weight, 400);
	line-height: var(--fsds-circle-value-line-height, 1);
	color: var(--fsds-circle-value-color, #FEFDFD);
	/* The badge is a fixed-size circle, so a long value has to be allowed to
	   break rather than push the circle out of shape — but only where the
	   figure genuinely has no room, hence the unit being split onto its own
	   line instead (see FS_Detail_Split_Element::circle_value()). */
	max-width: 100%;
}

/* The unit from a value like "20 mg/unit": demoted to a smaller line under
   the figure, in the label's colour, so the number still reads as the point
   of the badge. Restores the hierarchy the design has for "17%", where the
   unit happens to be a single character. */
.fsds-circle-unit {
	font-size: max(11px, calc(var(--fsds-circle-value-font-size, 40px) * 0.32));
	font-weight: var(--fsds-circle-label-weight, normal);
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--fsds-circle-label-color, #FEFDFDB2);
	margin-top: 2px;
	max-width: 100%;
}

/* Both lines together are already tight in the circle; the flex gap is sized
   for label + figure, not label + figure + unit. */
.fsds-circle-badge:has(.fsds-circle-unit) {
	gap: 2px;
}

.fsds-circle-icon {
	width: 28px !important;
	height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	object-fit: contain;
	flex: none !important;
	color: var(--fsds-circle-value-color, #ffffff);
}

/* Recolors the Form circle's icon to a solid silhouette — brightness(0)
   crushes every color to black while keeping the original alpha, then
   invert(1) flips that black to white. Only applies to an uploaded <img>
   icon; the inline SVG fallback already inherits --fsds-circle-value-color
   directly via currentColor, so it needs no filter at all. */
.fsds-circle-badges--invert-icons img.fsds-circle-icon {
	filter: brightness(0) invert(1);
}

/* --- Meta row (Intended Use / Quantity) and info lines
   (Terpenes/Flavour/Ingredients) — single-column now, no more
   alternating two-column split. */
.fsds-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fsds-meta-row-gap, 32px);
}

.fsds-meta-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fsds-value-font-size, 17px);
	color: var(--fsds-value-color, #ffffff);
}

.fsds-meta-item svg {
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	flex: none !important;
	color: var(--fsds-value-color, #ffffff);
}

.fsds-info-lines {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fsds-info-row-gap, 16px);
}

.fsds-info-line {
	width: fit-content;
	padding-bottom: var(--fsds-info-line-padding-bottom, 12px);
	border-bottom: 2px solid color-mix(in srgb, var(--fsds-brand-color, #ffffff) 100%, transparent);
}

/* Each successive line's border is 30% less opaque than the one before
   it (100% -> 70% -> 49% -> ...), all built from the same brand color
   rather than a separate color per line. */
.fsds-info-line:nth-child(2) {
	border-bottom-color: color-mix(in srgb, var(--fsds-brand-color, #ffffff) 70%, transparent);
}

.fsds-info-line:nth-child(3) {
	border-bottom-color: color-mix(in srgb, var(--fsds-brand-color, #ffffff) 49%, transparent);
}

.fsds-info-line:nth-child(4) {
	border-bottom-color: color-mix(in srgb, var(--fsds-brand-color, #ffffff) 34.3%, transparent);
}

.fsds-info-line:nth-child(5) {
	border-bottom-color: color-mix(in srgb, var(--fsds-brand-color, #ffffff) 24%, transparent);
}

.fsds-info-line:nth-child(6) {
	border-bottom-color: color-mix(in srgb, var(--fsds-brand-color, #ffffff) 16.8%, transparent);
}

.fsds-label {
	font-size: var(--fsds-label-font-size, 13px);
	font-weight: var(--fsds-label-weight, normal);
	line-height: var(--fsds-label-line-height, normal);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fsds-label-color, #8a9a95);
	margin-right: 6px;
}

.fsds-value {
	font-size: var(--fsds-value-font-size, 17px);
	font-weight: var(--fsds-value-weight, normal);
	line-height: var(--fsds-value-line-height, normal);
	color: var(--fsds-value-color, #ffffff);
}

.fsds-image-col {
	position: relative;
	flex: 0 0 calc(50% - var(--fsds-column-gap, 80px) / 2);
	width: calc(50% - var(--fsds-column-gap, 80px) / 2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

@media (max-width: 900px) {
	.fsds-image-col {
		position: static;
		flex: 0 0 100%;
		width: 100%;
		margin: 24px 0;
	}
}

.fsds-image-col::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--fsds-glow-size, 80%);
	height: var(--fsds-glow-size, 80%);
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, var(--fsds-glow-color, transparent) 0%, transparent 70%);
	filter: blur(var(--fsds-glow-blur, 50px));
	z-index: 0;
	pointer-events: none;
}


.fsds-image-col img {
	display: block !important;
	position: relative !important;
	left: var(--fsds-image-bleed, 40px) !important;
	z-index: 1 !important;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	object-fit: contain !important;
	/* Negative when the artwork is anchored to the top: the element still
	   occupies the PNG's full canvas height, and that blank bottom would
	   otherwise push the nav down. See FS_Image_Bounds::frame_vars(). */
	margin-bottom: var(--fsds-image-trim-bottom, 0) !important;
	/* --fsds-image-frame-* are only emitted when image framing is on AND a
	   content box was measured for this product; the fallbacks are the
	   plain scale and no offset, i.e. byte-for-byte the previous
	   behaviour. That's what makes the setting instantly reversible. */
	transform:
		scale(var(--fsds-image-frame-scale, var(--fsds-image-scale, 1.15)))
		translate(var(--fsds-image-frame-x, 0), var(--fsds-image-frame-y, 0)) !important;
	transform-origin: left center !important;
}

@media (max-width: 900px) {
	.fsds-image-col img {
		/* left:0 removes the desktop bleed's own separate positioning
		   (--fsds-image-bleed, a plain CSS `left` offset — a different
		   mechanism from the transform below entirely), which doesn't
		   apply on mobile. */
		left: 0 !important;
		/* Keeps the FULL content-box correction — scale AND both
		   translate axes — see FS_Image_Bounds::frame_vars(). An
		   earlier version of this zeroed out the X axis specifically,
		   on the assumption that horizontal translate was only ever
		   about the desktop bleed effect. It isn't: frame_vars()'s own
		   docblock is explicit that X is the HORIZONTAL CENTERING
		   correction, compensating for each source image's own
		   artwork sitting off-centre within its canvas — a completely
		   separate concern from the bleed, and one that matters on
		   mobile just as much as desktop. Dropping it meant images
		   whose artwork happens to sit left-of-centre in their own
		   source file rendered visibly left-shifted on mobile, and
		   right-of-centre ones rendered right-shifted, entirely
		   dependent on each file's own padding rather than appearing
		   centred the way every product should. Falls back to
		   scale(1)/no offset on both axes when image framing isn't
		   enabled or no box was measured, matching the plain,
		   uncorrected behaviour in that case. */
		transform:
			scale(var(--fsds-image-frame-scale, 1))
			translate(var(--fsds-image-frame-x, 0), var(--fsds-image-frame-y, 0)) !important;
	}
}

/* Two real copies of the circle badges exist in the DOM (see
   FS_Detail_Split_Element::render_circle_badges(), called twice from
   render()) — one inside the banner (under the subtitle), one in its
   original spot in row 2. Exactly one is ever visible at a time; which
   one flips at the same breakpoint the banner already stacks its own
   columns at, since that's the same point the mobile layout needs the
   badges to move into the banner's own row instead of row 2's. */
.fsds-circle-badges--mobile {
	display: none;
}

@media (max-width: 600px) {
	.fsds-circle-badges--mobile {
		display: flex;
	}
	.fsds-circle-badges--row2 {
		display: none;
	}
}

/* Three circles at the desktop default size (128px, configurable, but
   128px either way if left alone) don't fit in one row on a phone-width
   screen — 3 × 128px plus two gaps comfortably exceeds even a wide phone's
   own content width once the hero's own side padding is subtracted. There
   was no mobile override for this at all before, which is why they were
   wrapping onto extra rows instead of sitting side by side the way the
   design calls for. Sized here to fit three across at typical phone
   widths regardless of whatever the desktop size is configured to. */
@media (max-width: 600px) {
	.fsds-circle-badges {
		gap: 10px;
		flex-wrap: nowrap;
		width: 100%;
		justify-content: space-between;
		margin-top: 16px;
	}
	.fsds-circle-badge {
		width: 30vw;
		height: 30vw;
		max-width: 100px;
		max-height: 100px;
	}
	.fsds-circle-label {
		font-size: 12px;
	}
	.fsds-circle-value {
		font-size: 20px;
	}
	.fsds-circle-icon {
		width: 20px !important;
		height: 20px !important;
		max-width: 20px !important;
		max-height: 20px !important;
	}
}

/* --- Previous/Next Navigation — ported from product-detail.css's
   .fsd-adjacent-nav block, renamed to this element's own fsds prefix
   (both the --fsds- custom properties and the .fsds- classes) so styling
   one detail layout never touches the other.

   LAYOUT: .fsds-detail is flex-direction:column with justify-content:
   space-around, so .fsds-columns and .fsds-adjacent-nav — its only two
   children — stack vertically with space distributed around them,
   reading as "content, then a nav row toward the bottom" without literal
   pixel-pinning. An earlier version used position:absolute to pin this
   exactly to the bottom edge, which was technically more precise but ran
   into a real problem: Salient (or another theme rule) had an equally
   specific !important declaration that won ties by loading later in the
   cascade, no matter how many !important flags were added here — CSS
   resolves competing !important rules by specificity first, and only
   falls back to source order when specificity is tied. flex-direction:
   column sidesteps that fight entirely, since it doesn't depend on
   overriding position/top/bottom at all. */
.fsds-adjacent-nav {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: var(--fsds-nav-column-gap, 24px);
	max-width: var(--fsds-content-max-width, 1400px);
	margin: var(--fsds-nav-margin-top, 64px) auto 0;
	padding-top: var(--fsds-nav-padding-top, 32px);
}

@media (max-width: 640px) {
	.fsds-adjacent-nav {
		flex-direction: row;
	}
	.fsds-adjacent.fsds-adjacent--prev {
		align-items: flex-start;
	}
	.fsds-adjacent.fsds-adjacent--next {
		align-items: flex-end;
	}

	/* Fixed to the bottom of the viewport rather than sitting in its
	   normal in-flow position — replaces that position entirely on
	   mobile (not an additional copy), matching the same "persistent
	   bottom bar" pattern already used for the product grid's own
	   search/filter bar. The selector is doubled (.fsds-adjacent-nav
	   twice) purely for extra specificity, and every positioning
	   property carries !important — see this file's own comment above
	   .fsds-adjacent-nav for exactly why: an earlier attempt to pin this
	   same element via position:absolute ran into a Salient theme rule
	   with equal specificity that won the tie by loading later in the
	   cascade, regardless of how many !important flags were added here.
	   Doubling the class and forcing every property gives this the best
	   chance of avoiding that same conflict a second time; if it
	   recurs, the fix is more specificity here, not fewer !important
	   flags. max-width/margin are reset since the fixed bar should span
	   the full viewport width here, not stay constrained to the
	   content's own max-width the way the in-flow version is. */
	.fsds-adjacent-nav.fsds-adjacent-nav {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		z-index: 40 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 12px 16px !important;
		background: var(--fsds-hero-bg, #0f1e1c);
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
	}

	/* Reserves the space the fixed bar now occupies, so it doesn't
	   overlap whatever content (the product image, meta rows, etc.)
	   would otherwise render underneath it. Sized generously rather
	   than to the exact pixel, since the bar's own height flexes
	   slightly with label text length. */
	.fsds-detail {
		padding-bottom: 72px;
	}
}

.fsds-adjacent {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--fsds-nav-icon-gap, 20px);
	text-decoration: none;
	color: var(--fsds-nav-label-color, #8a9a95);
}

.fsds-adjacent-arrow,
.fsds-adjacent > span {
	position: relative;
	z-index: 1;
}

.fsds-adjacent-thumb {
	position: absolute;
	top: 50%;
	width: var(--fsds-nav-thumb-size, 140px);
	height: var(--fsds-nav-thumb-size, 140px);
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	transition: opacity var(--fsds-nav-thumb-transition, 0.35s) ease, transform var(--fsds-nav-thumb-transition, 0.35s) ease;
}

.fsds-adjacent--prev .fsds-adjacent-thumb {
	left: 0;
	transform: translateY(-50%) rotate(calc(-1 * var(--fsds-nav-thumb-rotation, -8deg))) scale(0.9);
}

.fsds-adjacent--next .fsds-adjacent-thumb {
	right: 0;
	transform: translateY(-50%) rotate(var(--fsds-nav-thumb-rotation, -8deg)) scale(0.9);
}

.fsds-adjacent--prev:hover .fsds-adjacent-thumb {
	opacity: var(--fsds-nav-thumb-opacity, 0.35);
	transform: translateY(-50%) rotate(calc(-1 * var(--fsds-nav-thumb-rotation, -8deg))) scale(1);
}

.fsds-adjacent--next:hover .fsds-adjacent-thumb {
	opacity: var(--fsds-nav-thumb-opacity, 0.35);
	transform: translateY(-50%) rotate(var(--fsds-nav-thumb-rotation, -8deg)) scale(1);
}

.fsds-adjacent--next {
	justify-content: flex-end;
	text-align: right;
}

@media (max-width: 640px) {
	.fsds-adjacent--next {
		justify-content: flex-start;
		text-align: left;
	}
}

.fsds-adjacent-arrow {
	width: var(--fsds-nav-arrow-size, 32px) !important;
	height: var(--fsds-nav-arrow-size, 32px) !important;
	max-width: var(--fsds-nav-arrow-size, 32px) !important;
	max-height: var(--fsds-nav-arrow-size, 32px) !important;
	flex: none !important;
	color: var(--fsds-nav-arrow-color, #ffffff);
}

.fsds-adjacent-label {
	display: block;
	font-size: var(--fsds-nav-label-font-size, 13px);
	font-weight: var(--fsds-nav-label-weight, normal);
	line-height: var(--fsds-nav-label-line-height, normal);
	color: var(--fsds-nav-label-color, #8a9a95);
	margin-bottom: 4px;
}

.fsds-adjacent-title {
	display: block;
	max-width: var(--fsds-nav-title-max-width, none);
	font-size: var(--fsds-nav-title-size, 18px);
	font-weight: var(--fsds-nav-title-weight, 600);
	line-height: var(--fsds-nav-title-line-height, normal);
	color: var(--fsds-nav-title-color, #ffffff);
}

.fsds-adjacent-arrow-mobile {
	display: none;
}

.fsds-adjacent-label-mobile {
	display: none;
}

/* A deliberately minimal version for mobile — just a short "Previous"/
   "Next" label and a plain directional arrow, sitting inline with each
   other rather than stacked, no product title, fuller "Previous
   product"/"Next product" label, or hover thumbnail (the thumbnail is a
   hover-reveal effect that doesn't really translate to touch anyway).
   Previous/Next sit side by side at this same breakpoint (see
   .fsds-adjacent-nav above). */
@media (max-width: 640px) {
	.fsds-adjacent {
		flex-direction: row;
		align-items: center;
		gap: 6px;
	}
	.fsds-adjacent-arrow,
	.fsds-adjacent-thumb,
	.fsds-adjacent-title,
	.fsds-adjacent-label {
		display: none !important;
	}
	.fsds-adjacent-arrow-mobile {
		display: block;
		width: 20px !important;
		height: 20px !important;
		max-width: 20px !important;
		max-height: 20px !important;
		flex: none !important;
		color: var(--fsds-nav-arrow-color, #ffffff);
	}
	.fsds-adjacent-label-mobile {
		display: block;
		font-size: var(--fsds-nav-label-font-size, 13px);
		font-weight: var(--fsds-nav-label-weight, normal);
		color: var(--fsds-nav-label-color, #8a9a95);
	}
}