.fsd-detail {
	background: var(--fsd-hero-bg, #0f1e1c);
	padding: 64px 24px;
	position: relative;
	/* clip, not hidden — a single-axis `hidden` makes the other axis compute
	   to `auto`, which turns this into a vertical scroll container nested in
	   the page's own scroller and makes scrolling stick. Same fix as
	   .fsds-detail in product-detail-split.css; `hidden` stays as the
	   fallback for engines predating clip. */
	overflow-x: hidden;
	overflow-x: clip;
	min-height: var(--fsd-hero-min-height, 100vh);
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

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

.fsd-inner {
	max-width: var(--fsd-content-max-width, 1280px);
	width: 100%;
	margin: 0 auto;
}

.fsd-back {
	display: flex;
	width: fit-content;
	margin: 0 auto 24px;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	color: var(--fsd-body-color, #d7ddd9);
	text-decoration: none;
	opacity: 0.8;
}

.fsd-back:hover {
	opacity: 1;
}

.fsd-back-arrow {
	width: 16px !important;
	height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	flex: none !important;
	color: currentColor;
}

.fsd-title {
	font-size: var(--fsd-title-size, 48px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--fsd-title-color, #ffffff);
	text-align: center;
	margin: 0 0 28px;
}

.fsd-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--fsd-badge-gap, 16px);
	margin-bottom: 48px;
}

.fsd-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--fsd-badge-height, 32px);
	padding: var(--fsd-badge-padding, 8px 16px);
	border-radius: 999px;
	border: 1px solid var(--fsd-badge-border, #FEFDFD29);
	background: var(--fsd-badge-bg, #FEFDFD05);
	backdrop-filter: blur(var(--fsd-badge-blur, 8px));
	-webkit-backdrop-filter: blur(var(--fsd-badge-blur, 8px));
	font-size: var(--fsd-badge-font-size, 13px);
	line-height: 1;
	color: var(--fsd-badge-text, #FEFDFD);
	white-space: nowrap;
	box-sizing: border-box;
}

.fsd-badge--brand {
	font-weight: 700;
	background: var(--fsd-brand-color, var(--fsd-title-color, #ffffff));
	color: var(--fsd-hero-bg, #0f1e1c);
	border-color: transparent;
}

.fsd-badge--brand-dark {
	color: #ffffff;
}

.fsd-badge--logo {
	background: var(--fsd-brand-color, transparent) !important;
	border-color: var(--fsd-badge-border, #FEFDFD29) !important;
	color: inherit !important;
	padding: var(--fsd-badge-padding, 8px 16px) !important;
}

.fsd-badge--logo img {
	display: block !important;
	height: 14px !important;
	width: auto !important;
	max-width: 90px !important;
	max-height: 14px !important;
	flex: none !important;
	object-fit: contain !important;
}

.fsd-badge--logo-inverted img {
	filter: brightness(0) invert(1);
}

.fsd-badge--stock {
	background: var(--fsd-in-stock-bg, #007E3933);
	text-transform: uppercase;
}

.fsd-badge-icon {
	width: 14px !important;
	height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
	object-fit: contain;
	flex: none !important;
}

.fsd-prefix {
	opacity: 0.7;
	margin-right: 4px;
}

.fsd-stock-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #FEFDFD66;
	background: var(--fsd-stock-color, #007E39);
	flex: none;
	box-sizing: border-box;
}

.fsd-columns {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center;
}

@media (max-width: 900px) {
	.fsd-columns {
		grid-template-columns: 1fr;
	}
}

.fsd-content-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px 48px;
}

@media (max-width: 600px) {
	.fsd-content-columns {
		grid-template-columns: 1fr;
	}
}

.fsd-col-left,
.fsd-col-right {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fsd-col-right {
	gap: 30px;
}

.fsd-description {
	font-size: 20px;
	line-height: 28px;
	color: var(--fsd-body-color, #d7ddd9);
	margin: 0 0 8px;
}

.fsd-description.fsd-stub {
	margin: 0;
	padding: 0;
}

.fsd-tags {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fsd-tag {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	height: var(--fsd-badge-height, 32px);
	padding: var(--fsd-badge-padding, 8px 16px);
	border-radius: 999px;
	border: 1px solid var(--fsd-badge-border, #FEFDFD29);
	background: var(--fsd-badge-bg, #FEFDFD05);
	backdrop-filter: blur(var(--fsd-badge-blur, 8px));
	-webkit-backdrop-filter: blur(var(--fsd-badge-blur, 8px));
	font-size: var(--fsd-badge-font-size, 13px);
	line-height: 1;
	color: var(--fsd-badge-text, #FEFDFD);
	text-transform: uppercase;
	box-sizing: border-box;
}

.fsd-col-image {
	position: relative;
	display: flex;
	justify-content: center;
	min-width: 0;
}

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

.fsd-col-image img {
	position: relative !important;
	left: var(--fsd-image-bleed, 80px) !important;
	z-index: 1 !important;
	width: 100% !important;
	max-width: var(--fsd-image-max-width, 420px) !important;
	height: auto !important;
	object-fit: contain !important;
	margin-bottom: 0 !important;
}

@media (max-width: 900px) {
	.fsd-col-image img {
		left: 0 !important;
	}
}

.fsd-info-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fsd-info-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.fsd-label {
	font-size: var(--fsd-label-font-size, 16px);
	font-weight: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fsd-label-color, #8a9a95);
}

.fsd-value {
	font-size: 16px;
	color: var(--fsd-body-color, #d7ddd9);
}

.fsd-adjacent-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fsd-nav-column-gap, 24px);
	margin-top: var(--fsd-nav-margin-top, 64px);
	padding-top: var(--fsd-nav-padding-top, 32px);
}

@media (max-width: 640px) {
	.fsd-adjacent-nav {
		grid-template-columns: 1fr;
	}
}

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

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

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

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

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

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

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

.fsd-adjacent--next {
	justify-content: flex-end;
	text-align: right;
	grid-column: 2;
}

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

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

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

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