/* ========================================
   Details – Fully Display
   ======================================== */

.details-page .fully-display {
	position: relative;
	overflow: hidden;
	min-height: 100vh; /* 暂时 100vh，后续按内容调整 */
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #D2D8DE 100%);
}

.details-page .fully-display .fully-display__inner {
	margin-left: auto;
	margin-right: auto;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	justify-content: center;
}

.details-page .fully-display .fully-display__title {
	margin: 0px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 24px;
	color: #1d1817;
}

.details-page .fully-display .fully-display__desc {
	margin: 0px;
	margin-top: 16px;
	font-size: 12px;
	line-height: 20px;
	color: rgba(29, 24, 23, 0.72);
}

/* The mobile product display is implemented by its own component. */
.details-page .fully-display {
	display: none;
}

@media (min-width: 768px) {
	.details-page .fully-display {
		position: relative;
		overflow: hidden;
		display: block;
		--fully-display-height: calc(100dvh - var(--header-h, 0px) + 20px);
		min-height: var(--fully-display-height);
		background-color: #eef0f2;
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 20%, #d2d8de 100%);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.details-page .fully-display .fully-display__inner {
		width: 100%;
		position: relative;
		isolation: isolate;
		display: block;
		min-height: var(--fully-display-height);
	}

	.details-page .fully-display .fully-display__top-decoration {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 60;
		width: 100%;
		height: var(--fully-display-top-decoration-height, 110px);
		background: url('../../../images/details/top-side.png') left top / var(--fully-display-top-side-width, 30px) var(--fully-display-top-decoration-height, 110px) repeat-x;
		overflow: hidden;
		pointer-events: none;
	}

	.details-page .fully-display .fully-display__category-view {
		position: relative;
		z-index: 1;
	}

	.details-page .fully-display .fully-display__color-switcher {
		position: absolute;
		left: 0px;
		right: 0px;
		z-index: 10;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		top: 30px;
		gap: 20px;
	}

	.details-page .fully-display .fully-display__color-option {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0px;
		width: 80px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.details-page .fully-display .fully-display__color-slot {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80px;
		height: 80px;
	}

	.details-page .fully-display .fully-display__color-swatch {
		display: block;
		border-radius: 9999px;
		width: 48px;
		height: 48px;
		-o-object-fit: cover;
		   object-fit: cover;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
		transition: width 200ms ease, height 200ms ease;
	}

	.details-page .fully-display .fully-display__color-option.is-active .fully-display__color-swatch {
		width: 80px;
		height: 80px;
	}

	.details-page .fully-display .fully-display__color-label {
		margin-top: 8px;
		font-size: 12px;
		line-height: 1.4;
		color: #303030;
	}

	.details-page .fully-display .fully-display__color-option.is-active .fully-display__color-label {
		font-weight: 700;
	}

	.details-page .fully-display .fully-display__color-option:focus-visible {
		outline: 2px solid #811e8f;
		outline-offset: 4px;
	}

	.details-page .fully-display .fully-display__color-option:disabled,
	.details-page .fully-display .fully-display__product-option:disabled {
		cursor: default;
	}

	.details-page .fully-display .fully-display__content {
		position: relative;
		display: grid;
		align-items: flex-start;
		grid-template-columns: 400px minmax(0, 1fr) 400px;
	}

	.details-page .fully-display .fully-display__category-view {
		min-height: var(--fully-display-height);
	}

	.details-page .fully-display .fully-display__category-view[hidden],
	.details-page .fully-display .fully-display__product-option[hidden],
	.details-page .fully-display [hidden] {
		display: none;
	}

	.details-page .fully-display .fully-display__product-panel-wrap {
		position: absolute;
		left: 0;
		top: 32px;
		z-index: 20;
		width: 400px;
	}

	.details-page .fully-display .fully-display__product-panel-wrap::before,
	.details-page .fully-display .fully-display__product-panel-wrap::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		z-index: 5;
		height: 110px;
		pointer-events: none;
		opacity: 0;
		transition: opacity 180ms ease;
	}

	.details-page .fully-display .fully-display__product-panel-wrap::before {
		/* product-panel 向上借出 32px，顶部渐变需覆盖同一滚动边界 */
		top: -32px;
		background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
	}

	.details-page .fully-display .fully-display__product-panel-wrap::after {
		bottom: 0;
		background: linear-gradient(180deg, rgba(224, 228, 231, 0) 0%, #d2d8dd 100%);
	}

	.details-page .fully-display .fully-display__product-panel-wrap.has-scroll-up::before,
	.details-page .fully-display .fully-display__product-panel-wrap.has-scroll-down::after {
		opacity: 1;
	}

	.details-page .fully-display .fully-display__product-panel {
		width: 400px;
		/* 面板借出顶部空间，保证首项上方和末项下方的激活阴影不被滚动区裁剪；选项位置保持不变 */
		max-height: calc(var(--fully-display-height) + 8px);
		margin-top: -32px;
		padding: 32px 32px 32px 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.details-page .fully-display .fully-display__product-panel::-webkit-scrollbar {
		display: none;
	}

	.details-page .fully-display .fully-display__product-scroll {
		position: absolute;
		left: 50%;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0px;
		width: 60px;
		height: 48px;
		border: 0;
		background: transparent;
		cursor: pointer;
		transform: translateX(-50%);
	}

	.details-page .fully-display .fully-display__product-scroll--up {
		top: -16px;
	}

	.details-page .fully-display .fully-display__product-scroll--down {
		bottom: 12px;
	}

	.details-page .fully-display .fully-display__product-scroll[hidden] {
		display: none;
	}

	.details-page .fully-display .fully-display__product-scroll img {
		display: block;
		width: 60px;
		height: 48px;
		-o-object-fit: contain;
		   object-fit: contain;
	}

	.details-page .fully-display .fully-display__product-scroll--up img {
		transform: rotate(180deg);
	}

	.details-page .fully-display .fully-display__product-scroll:focus-visible {
		outline: 2px solid #811e8f;
		outline-offset: 2px;
	}

	.details-page .fully-display .fully-display__gallery {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		grid-column: 2;
		justify-self: center;
		width: 800px;
		max-width: 100%;
		margin-top: 180px;
	}

	.details-page .fully-display .fully-display__gallery-panel {
		display: flex;
		justify-content: center;
		grid-column: 2;
	}

	.details-page .fully-display .fully-display__gallery-panel[hidden],
	.details-page .fully-display .fully-display__copy-panel[hidden] {
		display: none;
	}

	.details-page .fully-display .fully-display__gallery-main,
	.details-page .fully-display .fully-display__gallery-main-image,
	.details-page .fully-display .fully-display__gallery-model {
		width: 800px;
		height: 450px;
		max-width: 100%;
	}

	.details-page .fully-display .fully-display__gallery-main {
		position: relative;
	}

	.details-page .fully-display .fully-display__gallery-main-image {
		display: block;
		-o-object-fit: contain;
		   object-fit: contain;
	}

	.details-page .fully-display .fully-display__gallery-main-image[hidden] {
		display: none;
	}

	.details-page .fully-display .fully-display__gallery-model {
		display: block;
		width: 100%;
		height: 100%;
		background: transparent;
		--progress-bar-height: 0;
		--progress-bar-color: transparent;
	}

	.details-page .fully-display .fully-display__gallery-model-wrap {
		position: absolute;
		inset: 0px;
	}

	.details-page .fully-display .fully-display__gallery-model-wrap[hidden],
	.details-page .fully-display .fully-display__gallery-model[hidden],
	.details-page .fully-display .fully-display__gallery-model-badge[hidden] {
		display: none;
	}

	.details-page .fully-display .fully-display__gallery-model-loader {
		position: absolute;
		inset: 0px;
		z-index: 20;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background: transparent;
		opacity: 1;
		visibility: visible;
		pointer-events: none;
		transition: opacity 200ms ease, visibility 200ms ease;
	}

	.details-page .fully-display .fully-display__gallery-model-loader.is-hidden {
		opacity: 0;
		visibility: hidden;
	}

	.details-page .fully-display .fully-display__gallery-model-loader-text {
		font-size: 13px;
		line-height: 1.4;
		color: rgba(48, 48, 48, 0.7);
	}

	.details-page .fully-display .fully-display__gallery-model-loader-track {
		display: block;
		width: min(180px, 42%);
		height: 4px;
		border-radius: 999px;
		overflow: hidden;
		background: rgba(48, 48, 48, 0.16);
	}

	.details-page .fully-display .fully-display__gallery-model-loader-fill {
		display: block;
		width: 0;
		height: 100%;
		background: linear-gradient(90deg, #2a3180, #cd1378);
		transition: width 120ms linear;
	}

	.details-page .fully-display .fully-display__gallery-model-badge {
		position: absolute;
		z-index: 10;
		display: block;
		padding: 0px;
		left: 8px;
		top: 8px;
		width: clamp(32px, 2.5vw, 48px);
		height: auto;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.details-page .fully-display .fully-display__gallery-model-badge-icon {
		display: block;
		width: 100%;
		height: auto;
	}

	.details-page .fully-display .fully-display__gallery-model-badge:focus-visible {
		outline: 2px solid #811e8f;
		outline-offset: 2px;
	}

	.details-page .fully-display .fully-display__gallery-controls {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 496px;
		max-width: 100%;
		margin-top: 18px;
		gap: 20px;
	}

	.details-page .fully-display .fully-display__gallery-nav {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		padding: 0px;
		width: 24px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.details-page .fully-display .fully-display__gallery-nav-icon {
		display: block;
		width: 24px;
		height: auto;
		-o-object-fit: contain;
		   object-fit: contain;
	}

	.details-page .fully-display .fully-display__gallery-nav-icon--disabled {
		display: none;
	}

	.details-page .fully-display .fully-display__gallery-nav:disabled {
		cursor: default;
	}

	.details-page .fully-display .fully-display__gallery-nav:disabled .fully-display__gallery-nav-icon--default {
		display: none;
	}

	.details-page .fully-display .fully-display__gallery-nav:disabled .fully-display__gallery-nav-icon--disabled {
		display: block;
	}

	.details-page .fully-display .fully-display__gallery-swiper {
		width: 448px;
		max-width: 100%;
		overflow-x: clip;
		overflow-y: visible;
	}

	.details-page .fully-display .fully-display__gallery-swiper .swiper-wrapper {
		align-items: center;
	}

	.details-page .fully-display .fully-display__gallery-swiper .swiper-slide {
		display: flex;
		align-items: center;
		justify-content: center;
		height: auto;
	}

	.details-page .fully-display .fully-display__gallery-thumb {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0px;
		position: relative;
		width: 100px;
		height: 134px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.details-page .fully-display .fully-display__gallery-thumb-indicator {
		position: absolute;
		left: 50%;
		top: calc(0px - var(--fully-display-active-indicator-height));
		z-index: 30;
		width: var(--fully-display-active-indicator-dot-size);
		height: var(--fully-display-active-indicator-height);
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transform: translateX(-50%);
		transition: opacity 180ms ease, visibility 180ms ease;
	}

	.details-page .fully-display .fully-display__gallery-thumb-indicator::before,
	.details-page .fully-display .fully-display__gallery-thumb-indicator::after {
		position: absolute;
		content: '';
	}

	.details-page .fully-display .fully-display__gallery-thumb-indicator::before {
		left: 50%;
		bottom: 0;
		width: var(--fully-display-active-indicator-stem-width);
		height: var(--fully-display-active-indicator-stem-height);
		border-radius: 999px;
		background: linear-gradient(180deg, #cd1378 0%, #2a3180 100%);
		transform: translateX(-50%);
	}

	.details-page .fully-display .fully-display__gallery-thumb-indicator::after {
		left: 0;
		top: 0;
		width: var(--fully-display-active-indicator-dot-size);
		height: var(--fully-display-active-indicator-dot-size);
		border-radius: 999px;
		background: #cd1378;
		box-shadow: 0 2px 5px rgba(109, 18, 104, 0.28);
	}

	.details-page .fully-display .fully-display__gallery-thumb.is-active .fully-display__gallery-thumb-indicator {
		opacity: 1;
		visibility: visible;
	}

	.details-page .fully-display .fully-display__gallery-thumb-slot {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100px;
		height: 100px;
	}

	.details-page .fully-display .fully-display__gallery-thumb-circle {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 9999px;
		width: 80px;
		height: 80px;
		box-shadow: 0 3px 9px rgba(109, 115, 132, 0.6);
		transition: width 200ms ease, height 200ms ease, box-shadow 200ms ease;
	}

	.details-page .fully-display .fully-display__gallery-thumb-image {
		position: relative;
		z-index: 10;
		display: block;
		border-radius: 9999px;
		width: 80px;
		height: 80px;
		-o-object-fit: contain;
		   object-fit: contain;
		transition: width 200ms ease, height 200ms ease;
	}

	.details-page .fully-display .fully-display__gallery-thumb.is-active .fully-display__gallery-thumb-circle {
		width: 100px;
		height: 100px;
		background: linear-gradient(180deg, rgba(230, 233, 237, 0) 0%, #eff1f4 63.14%, rgba(230, 233, 237, 0.68) 100%);
		box-shadow: 0 3px 9px rgba(109, 115, 132, 0.6);
	}

	.details-page .fully-display .fully-display__gallery-thumb.is-active .fully-display__gallery-thumb-circle::before {
		content: '';
		position: absolute;
		inset: 0;
		padding: 2px;
		border-radius: inherit;
		background: linear-gradient(200deg, #2a3180, #cd1378);
		-webkit-mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
	}

	.details-page .fully-display .fully-display__gallery-thumb.is-active .fully-display__gallery-thumb-image {
		width: 96px;
		height: 96px;
	}

	.details-page .fully-display .fully-display__gallery-thumb-model-badge {
		position: absolute;
		z-index: 20;
		display: block;
		right: 8px;
		top: -2px;
		width: 20px;
		height: auto;
		-o-object-fit: contain;
		   object-fit: contain;
		pointer-events: none;
	}

	.details-page .fully-display .fully-display__gallery-thumb-label {
		margin-top: 0.625rem;
		text-align: center;
		width: 100%;
		font-size: 14px;
		line-height: 20px;
		color: #303030;
	}

	.details-page .fully-display .fully-display__gallery-thumb:focus-visible,
	.details-page .fully-display .fully-display__gallery-nav:focus-visible {
		outline: 2px solid #811e8f;
		outline-offset: 3px;
	}

	.details-page .fully-display .fully-display__copy {
		position: absolute;
		left: calc(50% + (var(--fully-display-gallery-max-width) / 2) + clamp(24px, 3vw, 48px));
		top: 50%;
		transform: translateY(-50%);
		width: min(400px, calc(50% - (var(--fully-display-gallery-max-width) / 2) - clamp(48px, 5vw, 84px)));
		color: #303030;
	}

	.details-page .fully-display .fully-display__copy-title {
		margin: 0px;
		font-weight: 700;
		font-size: 32px;
		line-height: 32px;
		color: inherit;
	}

	.details-page .fully-display .fully-display__copy-desc {
		margin: 0px;
		margin-top: 10px;
		font-size: 14px;
		line-height: 20px;
		color: inherit;
	}

	.details-page .fully-display .fully-display__product-option {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
		padding-top: 20px;
		padding-bottom: 20px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.details-page .fully-display .fully-display__product-option.is-active {
		background: #e4e7ec;
		border-radius: 0 12px 12px 0;
		box-shadow: 8px 8px 28px rgba(0, 0, 0, 0.22);
	}

	.details-page .fully-display .fully-display__product-image {
		display: block;
		width: 240px;
		height: 135px;
		-o-object-fit: contain;
		   object-fit: contain;
	}

	.details-page .fully-display .fully-display__product-name {
		margin-top: 0.625rem;
		text-align: center;
		width: 240px;
		font-size: 16px;
		line-height: 24px;
		color: #303030;
	}

	.details-page .fully-display .fully-display__product-option:focus-visible {
		outline: 2px solid #811e8f;
		outline-offset: -2px;
	}
}

@media (min-width: 960px) {
	.details-page .fully-display .fully-display__copy-title {
		font-size: 36px;
		line-height: 36px;
	}

	.details-page .fully-display .fully-display__copy-desc {
		margin-top: 18px;
	}
}

@media (min-width: 1280px) {
	.details-page .fully-display .fully-display__copy-title {
		font-size: 40px;
		line-height: 40px;
	}

	.details-page .fully-display .fully-display__copy-desc {
		margin-top: 22px;
	}
}

@media (min-width: 1440px) {
	.details-page .fully-display .fully-display__copy-title {
		font-size: 46px;
		line-height: 46px;
	}
}

@media (min-width: 1860px) {
	.details-page .fully-display .fully-display__gallery-controls {
		width: 708px;
		gap: 30px;
	}

	.details-page .fully-display .fully-display__gallery-swiper {
		width: 600px;
	}
}

/* Keep the desktop experience within the visible viewport as width or height changes. */
@media (min-width: 768px) {
	.details-page .fully-display {
		--fully-display-side-width: clamp(268px, 21.25vw, 408px);
		--fully-display-panel-top: clamp(12px, 2.222vh, 24px);
		--fully-display-top-safe-space: clamp(150px, 17vh, 200px);
		--fully-display-gallery-gap: clamp(10px, 1.667vh, 18px);
		--fully-display-thumb-row-height: 134px;
		--fully-display-gallery-max-width: min(660px, 45.833vw, 100%);
		--fully-display-bottom-safe-space: clamp(16px, 2.222vh, 24px);
		--fully-display-main-height: min(450px, max(160px, calc(
			var(--fully-display-height)
			- var(--fully-display-top-safe-space)
			- var(--fully-display-thumb-row-height)
			- var(--fully-display-gallery-gap)
			- var(--fully-display-active-indicator-height)
			- var(--fully-display-bottom-safe-space)
		)));
		--fully-display-product-padding: 20px;
		--fully-display-product-image-width: min(240px, 72%);
		--fully-display-product-fade-height: clamp(72px, 10.185vh, 110px);
		--fully-display-top-decoration-height: min(110px, 5.729vw);
		--fully-display-top-side-width: min(30px, 1.563vw);
		--fully-display-gallery-nav-size: clamp(16px, 1.25vw, 24px);
		--fully-display-color-slot: clamp(64px, 4.167vw, 80px);
		--fully-display-color-swatch: clamp(40px, 2.5vw, 48px);
		--fully-display-thumb-slot: clamp(84px, 5.6vw, 108px);
		--fully-display-thumb-size: clamp(68px, 4.7vw, 88px);
		--fully-display-active-indicator-dot-size: clamp(8px, 0.521vw, 10px);
		--fully-display-active-indicator-stem-width: 2px;
		--fully-display-active-indicator-stem-height: clamp(20px, 1.563vw, 30px);
		--fully-display-active-indicator-height: calc(var(--fully-display-active-indicator-dot-size) + var(--fully-display-active-indicator-stem-height));
		height: var(--fully-display-height);
		min-height: 0;
		max-height: var(--fully-display-height);
	}

	.details-page .fully-display .fully-display__inner,
	.details-page .fully-display .fully-display__category-view,
	.details-page .fully-display .fully-display__content {
		height: 100%;
		min-height: 0;
	}

	.details-page .fully-display .fully-display__content {
		grid-template-columns:
			var(--fully-display-side-width)
			minmax(0, 1fr)
			var(--fully-display-side-width);
	}

	.details-page .fully-display .fully-display__color-switcher {
		top: calc(var(--fully-display-panel-top) + 6px);
	}

	.details-page .fully-display .fully-display__color-option,
	.details-page .fully-display .fully-display__color-slot {
		width: var(--fully-display-color-slot);
	}

	.details-page .fully-display .fully-display__color-slot {
		height: var(--fully-display-color-slot);
	}

	.details-page .fully-display .fully-display__color-swatch {
		width: var(--fully-display-color-swatch);
		height: var(--fully-display-color-swatch);
	}

	.details-page .fully-display .fully-display__color-option.is-active .fully-display__color-swatch {
		width: var(--fully-display-color-slot);
		height: var(--fully-display-color-slot);
	}

	.details-page .fully-display .fully-display__product-panel-wrap,
	.details-page .fully-display .fully-display__product-panel {
		width: var(--fully-display-side-width);
	}

	.details-page .fully-display .fully-display__product-panel {
		max-height: var(--fully-display-height);
	}

	.details-page .fully-display .fully-display__product-panel-wrap::before,
	.details-page .fully-display .fully-display__product-panel-wrap::after {
		height: var(--fully-display-product-fade-height);
	}

	.details-page .fully-display .fully-display__product-option {
		padding-top: var(--fully-display-product-padding);
		padding-bottom: var(--fully-display-product-padding);
	}

	.details-page .fully-display .fully-display__product-image,
	.details-page .fully-display .fully-display__product-name {
		width: var(--fully-display-product-image-width);
	}

	.details-page .fully-display .fully-display__product-image {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.details-page .fully-display .fully-display__product-name {
		font-size: clamp(14px, 0.833vw, 16px);
		line-height: 1.5;
	}

	.details-page .fully-display .fully-display__gallery-panel {
		min-width: 0;
	}

	.details-page .fully-display .fully-display__gallery {
		width: var(--fully-display-gallery-max-width);
		margin-top: var(--fully-display-top-safe-space);
	}

	.details-page .fully-display .fully-display__gallery-main {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--fully-display-gallery-max-width);
		height: auto;
		max-width: 100%;
		max-height: var(--fully-display-main-height);
		aspect-ratio: 16 / 9;
	}

	.details-page .fully-display .fully-display__gallery-main-image,
	.details-page .fully-display .fully-display__gallery-model {
		width: 100%;
		height: 100%;
		max-width: 100%;
	}

	.details-page .fully-display .fully-display__gallery-main-image {
		-o-object-fit: contain;
		   object-fit: contain;
	}

	.details-page .fully-display .fully-display__gallery-controls {
		margin-top: calc(var(--fully-display-gallery-gap) + var(--fully-display-active-indicator-height));
	}

	.details-page .fully-display .fully-display__gallery-nav,
	.details-page .fully-display .fully-display__gallery-nav-icon {
		width: var(--fully-display-gallery-nav-size);
	}

	.details-page .fully-display .fully-display__gallery-thumb-slot {
		width: var(--fully-display-thumb-slot);
		height: var(--fully-display-thumb-slot);
	}

	.details-page .fully-display .fully-display__gallery-thumb-circle,
	.details-page .fully-display .fully-display__gallery-thumb-image {
		width: var(--fully-display-thumb-size);
		height: var(--fully-display-thumb-size);
	}

	.details-page .fully-display .fully-display__gallery-thumb.is-active .fully-display__gallery-thumb-circle {
		width: var(--fully-display-thumb-slot);
		height: var(--fully-display-thumb-slot);
	}

	.details-page .fully-display .fully-display__gallery-thumb.is-active .fully-display__gallery-thumb-image {
		width: calc(var(--fully-display-thumb-slot) - 4px);
		height: calc(var(--fully-display-thumb-slot) - 4px);
	}

	.details-page .fully-display .fully-display__gallery-thumb {
		width: var(--fully-display-thumb-slot);
		height: auto;
	}

	.details-page .fully-display .fully-display__gallery-thumb-label {
		font-size: 12px;
		line-height: 1.35;
	}

	.details-page .fully-display .fully-display__copy {
		min-width: 0;
	}

	.details-page .fully-display .fully-display__copy-title {
		font-size: clamp(18px, 1.458vw, 28px);
		line-height: 1;
	}

	.details-page .fully-display .fully-display__copy-desc {
		margin-top: clamp(10px, 1.146vw, 22px);
	}
}

/* Restore the full-size gallery on >=1920px screens. */
@media (min-width: 1920px) {
	.details-page .fully-display {
		--fully-display-gallery-max-width: min(800px, 100%);
	}
}

@media (min-width: 1680px) {
	.details-page .fully-display {
		--fully-display-top-decoration-height: 96px;
		--fully-display-top-side-width: 26px;
		--fully-display-top-safe-space: clamp(130px, 14vh, 170px);
	}
}

@media (min-width: 768px) and (max-width: 1679px) {
	.details-page .fully-display {
		--fully-display-top-decoration-height: min(96px, 5.714vw);
		--fully-display-top-side-width: min(26px, 1.548vw);
		--fully-display-top-safe-space: clamp(120px, 14vh, 150px);
		--fully-display-gallery-gap: clamp(8px, 1.25vh, 14px);
		--fully-display-thumb-row-height: clamp(92px, 6.5vw, 110px);
		--fully-display-thumb-slot: clamp(64px, 4.8vw, 84px);
		--fully-display-thumb-size: clamp(54px, 4vw, 72px);
		--fully-display-bottom-safe-space: clamp(8px, 1.5vh, 16px);
	}
}

@media (min-width: 1680px) and (max-width: 1859px) {
	.details-page .fully-display {
		--fully-display-thumb-slot: clamp(76px, 4.8vw, 84px);
		--fully-display-thumb-size: clamp(62px, 4vw, 72px);
	}
}

@media (min-width: 960px) and (max-width: 1679px) {
	.details-page .fully-display .fully-display__gallery-thumb-circle {
		flex: 0 0 auto;
		width: calc(var(--fully-display-thumb-size) * 1.08);
		height: calc(var(--fully-display-thumb-size) * 1.08);
	}

	.details-page .fully-display .fully-display__gallery-thumb.is-active .fully-display__gallery-thumb-circle {
		width: calc(var(--fully-display-thumb-slot) * 1.08);
		height: calc(var(--fully-display-thumb-slot) * 1.08);
	}
}

@media (min-width: 1024px) and (max-width: 1439px) {
	.details-page .fully-display {
		--fully-display-top-side-width: min(22px, 1.5vw);
	}
}

@media (min-width: 768px) and (max-height: 760px) {
	.details-page .fully-display {
		/* Must stay below the absolutely-positioned color switcher (~116px tall). */
		--fully-display-top-safe-space: 130px;
		--fully-display-gallery-gap: 8px;
		--fully-display-thumb-row-height: 100px;
		--fully-display-bottom-safe-space: 8px;
		--fully-display-product-image-width: min(190px, 72%);
		/* Shrink the gallery further on short laptop viewports. */
		--fully-display-gallery-max-width: min(600px, 41.667vw, 100%);
	}

	.details-page .fully-display .fully-display__gallery-thumb-label {
		margin-top: 6px;
	}
}