.cr-model {
	--cr-model-ink: #1c2431;
	--cr-model-accent: #35472d;
	--cr-model-line: #ded8cd;
	--cr-model-direction: 1;
	box-sizing: border-box;
	display: grid;
	block-size: 100vh;
	block-size: 100dvh;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 42%) minmax(0, 1fr);
	min-inline-size: 0;
	color: var(--cr-model-ink);
	background: #faf7f0;
	border: 1px solid #dce1e9;
	border-radius: 1rem;
	overflow: clip;
	isolation: isolate;
}

.cr-model:dir(rtl) {
	--cr-model-direction: -1;
}

.cr-model-stage {
	position: relative;
	min-inline-size: 0;
	min-block-size: 0;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 73% 32%, #ffffff96, transparent 65%),
		linear-gradient(0deg, #202b4614, transparent 36%),
		var(--cr-model-background, #edf0f5);
	touch-action: pan-y pinch-zoom;
	user-select: none;
}

.cr-model.is-ready .cr-model-stage {
	cursor: grab;
}

.cr-model .cr-model-stage.is-dragging {
	cursor: grabbing;
}

.cr-model-lineup {
	position: absolute;
	inset: 0;
	max-block-size: 52rem;
	margin-block: auto;
	pointer-events: none;
}

.cr-model-figure {
	--cr-model-position: 70%;
	--cr-model-floor: 5%;
	--cr-model-scale: 1;
	--cr-model-blur: 0px;
	--cr-model-opacity: 1;
	position: absolute;
	inset-inline-start: var(--cr-model-position);
	inset-block-end: var(--cr-model-floor);
	inline-size: 47%;
	block-size: 90%;
	opacity: var(--cr-model-opacity);
	transform: translateX(calc(-50% * var(--cr-model-direction))) scale(var(--cr-model-scale));
	transform-origin: center bottom;
	filter: blur(var(--cr-model-blur));
	z-index: 5;
}

.cr-model.is-ready .cr-model-figure {
	transition: inset-inline-start .38s cubic-bezier(.2,.65,.25,1), inset-block-end .38s ease-out,
		transform .38s cubic-bezier(.2,.65,.25,1), filter .38s ease-out, opacity .3s ease-out;
}

/* The back slot enters in place, even when the product wraps from the front. */
.cr-model.is-ready .cr-model-figure[data-depth="4"] {
	transition: none;
	animation: cr-model-back-fade .36s ease-out both;
}

@keyframes cr-model-back-fade {
	from { opacity: 0; }
	to { opacity: var(--cr-model-opacity); }
}

.cr-model-figure img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	object-position: center bottom;
}

.cr-model-figure[data-depth="1"] {
	--cr-model-position: 47%;
	--cr-model-floor: 12%;
	--cr-model-scale: .78;
	--cr-model-blur: 1px;
	--cr-model-opacity: .86;
	z-index: 4;
}

.cr-model-figure[data-depth="2"] {
	--cr-model-position: 31%;
	--cr-model-floor: 18%;
	--cr-model-scale: .61;
	--cr-model-blur: 2.5px;
	--cr-model-opacity: .7;
	z-index: 3;
}

.cr-model-figure[data-depth="3"] {
	--cr-model-position: 19%;
	--cr-model-floor: 23%;
	--cr-model-scale: .49;
	--cr-model-blur: 4px;
	--cr-model-opacity: .55;
	z-index: 2;
}

.cr-model-figure[data-depth="4"],
.cr-model-figure[data-depth="5"] {
	--cr-model-position: 9%;
	--cr-model-floor: 27%;
	--cr-model-scale: .39;
	--cr-model-blur: 6px;
	--cr-model-opacity: .45;
	z-index: 1;
}

.cr-model-figure[data-depth="5"] {
	--cr-model-position: -8%;
	--cr-model-opacity: 0;
	z-index: 0;
}

.cr-model-figure[data-depth="6"] {
	--cr-model-position: 114%;
	--cr-model-opacity: 0;
}

.cr-model-sidebar {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	min-block-size: 0;
	background: linear-gradient(145deg, #fffdf8, #f8f3e9);
}

.cr-model-controls {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.cr-model-controls[hidden] {
	display: none;
}

.cr-model .cr-model-controls button {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid #cbd3de;
	border-radius: 50%;
	background: #fff;
	color: var(--cr-model-ink);
	font: inherit;
	cursor: pointer;
}

.cr-model-controls button span {
	transform: scaleX(var(--cr-model-direction));
}

.cr-model .cr-model-controls button:hover {
	background: #edf0f5;
}

.cr-model :focus-visible {
	outline: 2px solid #3c5d9a;
	outline-offset: -3px;
}

.cr-model-details {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.cr-model .cr-model-name {
	margin: 0 0 .5rem;
	color: inherit;
	font-size: clamp(1.35rem, 3vw, 2.5rem);
	line-height: 1.12;
}

.cr-model-price {
	font-size: 1.15rem;
	font-weight: 600;
}

.cr-model-description,
.cr-model-stock {
	margin: .75rem 0 0;
}

.cr-model .cr-model-shop {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	margin-block-start: 1.1rem;
	padding: .5rem 1rem;
	border-radius: .45rem;
	background: var(--cr-model-ink);
	color: #fff;
	text-decoration: none;
}

.cr-model-status {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.cr-model.is-ready .cr-model-figure,
	.cr-model.is-ready .cr-model-figure[data-depth="4"] {
		animation: none;
		transition: none;
	}
}

.cr-model-details * {
	box-sizing: border-box;
}

.cr-model-details .cr-detail {
	display: block;
}

.cr-model-details .cr-summary {
	padding: 0;
}

.cr-model-details .cr-runway-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .65rem;
	background: transparent;
}

.cr-runway-gallery > a {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid #fff;
	border-radius: .75rem;
	background: rgb(255 255 255 / 55%);
	color: var(--cr-model-ink);
	cursor: zoom-in;
}

.cr-model-details .cr-runway-gallery img {
	width: 100%;
	height: 100%;
	padding: .35rem;
	object-fit: contain;
}

.cr-runway-gallery > a span {
	position: absolute;
	inset-inline-end: .4rem;
	inset-block-end: .4rem;
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	background: #fff;
	font-size: 1.2rem;
}

.cr-model .cr-runway-lightbox {
	box-sizing: border-box;
	inline-size: min(60rem, calc(100% - 2rem));
	max-block-size: calc(100dvh - 2rem);
	margin: auto;
	padding: .75rem;
	border: 1px solid #eee;
	border-radius: 1rem;
	background: #fff9f5;
	color: var(--cr-model-ink);
}

.cr-runway-lightbox::backdrop {
	background: rgb(20 24 32 / 76%);
}

.cr-runway-lightbox-tools {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 .5rem;
}

.cr-runway-lightbox-tools button {
	min-block-size: 44px;
}

.cr-runway-lightbox-image {
	position: relative;
	block-size: min(76vh, 48rem);
	block-size: min(76dvh, 48rem, max(4rem, calc(100dvh - 9rem)));
	overflow: hidden;
	touch-action: none;
	user-select: none;
}

.cr-model .cr-runway-lightbox-image > img {
	position: absolute;
	inset: 0;
	display: block;
	margin: auto;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	pointer-events: none;
}

.cr-model-more {
	margin-block: .6rem;
	border-block-start: 1px solid rgb(28 36 49 / 18%);
}

.cr-model-more summary {
	padding-block: .65rem;
	cursor: pointer;
}

.cr-model-more :is(img, video) {
	max-inline-size: 100%;
	height: auto;
}

.cr-model-more table {
	table-layout: fixed;
	inline-size: 100%;
	overflow-wrap: anywhere;
}

.cr-model-request [hidden] {
	display: none;
}


.cr-model-controls, .cr-model-scroll, .cr-runway-purchase {
	padding-inline: clamp(.85rem, 2vw, 1.65rem);
}
.cr-model-controls {
	padding-block: .65rem;
	border-block-end: 1px solid var(--cr-model-line);
}
.cr-model-scroll {
	flex: 1;
	min-block-size: 0;
	overflow-y: auto;
	padding-block: .85rem 1rem;
}
.cr-runway-product-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: .6rem;
	margin-block-end: .75rem;
}
.cr-runway-product-header h2 {
	font-size: clamp(1.25rem, 2vw, 1.85rem);
	line-height: 1.15;
	margin: 0 0 .35rem;
	overflow-wrap: anywhere;
}
.cr-runway-price { font-weight: 600; }
.cr-runway-price del { font-weight: 400; }
.cr-runway-wishlist:empty { display: none; }
.cr-runway-wishlist .cr-wishlist {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 0;
	border-radius: 50%;
	color: var(--cr-model-accent);
	background: #fff;
	border: 1px solid var(--cr-model-line);
}
.cr-runway-wishlist .cr-wishlist::before { content: "♡" / ""; font-size: 23px; }
.cr-runway-wishlist .cr-wishlist[aria-pressed="true"]::before { content: "♥" / ""; }
.cr-runway-wishlist .cr-wishlist-status:not(:empty) {
	display: block;
	max-inline-size: 10ch;
	font-size: .75rem;
	overflow-wrap: anywhere;
}
.cr-runway-selected:not(:empty) {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	margin-block-end: .35rem;
}
.cr-model-details .cr-runway-gallery { margin-block-end: 1rem; }
.cr-runway-purchase {
	position: sticky;
	inset-block-end: 0;
	z-index: 7;
	margin-block-start: auto;
	padding-block: .65rem max(.65rem, env(safe-area-inset-bottom));
	background: #fffdf8;
	border-block-start: 1px solid var(--cr-model-line);
}
.cr-model-controls, .cr-runway-purchase { flex: none; }
.cr-runway-purchase-price:not(:empty) { font-weight: 600; margin-block-end: .45rem; }
.cr-runway-purchase-row, .cr-runway-quantity {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	align-items: center;
}
.cr-runway-purchase [hidden], .cr-runway-purchase[hidden],
.cr-runway-proxied :is(.quantity, .single_add_to_cart_button, .cr-buy),
.cr-model-details:has(.cr-runway-proxied) .cr-cart-feedback { display: none !important; }
.cr-runway-purchase button, .cr-runway-quantity input {
	min-block-size: 44px;
	padding: .4rem .55rem;
	border: 1px solid var(--cr-model-accent);
	border-radius: .5rem;
	color: var(--cr-model-accent);
	background: #fff;
	font: inherit;
	font-size: .85rem;
}
.cr-runway-quantity input {
	inline-size: 4.25rem;
	text-align: center;
	appearance: textfield;
}
.cr-runway-quantity input::-webkit-inner-spin-button { appearance: none; }
.cr-runway-quantity button { min-inline-size: 44px; }
.cr-runway-purchase [data-runway-cart] { background: var(--cr-model-accent); color: #fff; }
.cr-runway-purchase button:disabled { opacity: .55; cursor: not-allowed; }
.cr-runway-purchase-status:not(:empty) { font-size: .85rem; margin-block-end: .5rem; }
.cr-runway-purchase-status p { margin: 0; }
.cr-runway-purchase-status a { margin-inline-end: .65rem; }
.cr-runway-lightbox-tools [hidden] { display: none; }
/* Keep both panes usable in landscape, including phones with a short viewport. */
@media (min-width: 901px), (min-width: 600px) and (orientation: landscape) {
	.cr-model {
		grid-template-columns: minmax(0, 1fr) minmax(17rem, 34%);
		grid-template-rows: minmax(0, 1fr);
	}
	.cr-model-sidebar { border-inline-start: 1px solid var(--cr-model-line); }
}
@media (max-width: 900px) and (orientation: portrait), (max-width: 599px) {
	.cr-model-sidebar { border-block-start: 1px solid var(--cr-model-line); }
}
/* Short windows let the entire sidebar scroll so controls never squeeze out the details. */
@media (max-height: 480px) {
	.cr-model-sidebar { overflow-y: auto; }
	.cr-model-scroll { flex: 1 0 auto; overflow: visible; }
}
