/* Diamond Carat Size Guide - Styles */
.dcsg {
	position: relative;
	--stone-left: 38.4%;
	--stone-top: 37.5%;
	--stone-size: 25%;
	--stone-origin: 50% 50%;
	--stone-filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.25));
	--dcsg-scale: 1;
}

.dcsg__header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1rem;
	text-align: center;
	color: #fff;
	z-index: 5;
}

.dcsg__title {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.1;
	margin: 0 0 0.15rem 0;
}

.dcsg__note {
	margin: 0;
	font-size: 0.6875rem;
	opacity: 0.85;
}

.dcsg__note--desktop { display: none; }
.dcsg__note--mobile { display: block; text-align: left; }


.dcsg__imageWrap {
	position: relative;
	border-radius: 0.75rem;
	overflow: hidden;
	background: transparent;
	margin-top: 0;
	/* Aspect square */
	width: 100%;
	aspect-ratio: 1 / 1;
}

.dcsg__shownWith {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0.75rem;
	z-index: 3;
	white-space: nowrap;
	background: rgba(255,255,255,0.75);
	color: #404040;
	border-radius: 100px;
	padding: 0.25rem 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.1;
}

.dcsg__hand {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

.dcsg__shapeContainer {
	position: absolute;
	left: var(--stone-left);
	top: var(--stone-top);
	width: var(--stone-size);
	height: var(--stone-size);
	z-index: 2;
}

.dcsg__shapeImage {
	width: 100%;
	height: 100%;
	filter: var(--stone-filter);
	transform-origin: var(--stone-origin);
	transform: scale(var(--dcsg-scale));
	transition: transform 300ms ease-in-out;
}

.dcsg__controls {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 0.5rem 0.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	z-index: 4;
}

.dcsg__values {
	position: relative;
	font-family: inherit;
}

.dcsg__selector {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	transition: left 300ms ease, width 300ms ease, height 300ms ease;
	z-index: 0;
}

.dcsg__buttons {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.dcsg__buttons--desktop { display: none; }
.dcsg__buttons--mobile { display: inline-flex; }

.dcsg__btn {
	appearance: none;
	border: 1px solid #e0e0e0;
	border-right-width: 1px;
	background: #fff;
	color: #404040;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.dcsg__btn:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.dcsg__btn:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; border-right-width: 1px; }
.dcsg__btn + .dcsg__btn { border-left-width: 0; }

.dcsg__btn.is-active .dcsg__btnText { color: #000; font-weight: 600; font-size: 0.75rem; }
.dcsg__btn .dcsg__btnText { color: #404040; font-weight: 500; font-size: 0.6rem; line-height: 1; }

@media (min-width: 768px) {
	.dcsg__note--desktop { display: block; color: #fff; text-align: center; }
	.dcsg__note--mobile { display: none; }
	.dcsg__buttons--desktop { display: inline-flex; }
	.dcsg__buttons--mobile { display: none; }
	.dcsg__imageWrap { border-radius: 0; }
	.dcsg__title { font-size: 1.125rem; }
	.dcsg__note { font-size: 0.75rem; }
	.dcsg__selector { width: 32px; height: 32px; }
	.dcsg__btn { width: 32px; height: 32px; }
	.dcsg__btn .dcsg__btnText { font-size: 0.7rem; }
}

@media (min-width: 1024px) {
	.dcsg__header { position: absolute; top: 0; left: 0; right: 0; color: #fff; padding: 1rem; }
	.dcsg__shownWith { display: none; }
}