/*
 * GEMobile Phone Finder v1
 */

.gem-finder,
.gem-finder * {
	box-sizing: border-box;
}

.gem-finder {
	--gf-black: #0f1115;
	--gf-graphite: #202633;
	--gf-cream: #fbf7ee;
	--gf-cream-2: #fffdf8;
	--gf-gold: #d6b35a;
	--gf-gold-dark: #8a671e;
	--gf-green: #1f7a4d;
	--gf-border: #e8ddc7;
	--gf-text: #111827;
	--gf-muted: #667085;
	margin: 34px 0;
	color: var(--gf-text);
	font-family: inherit;
}

.gem-finder__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 24px;
	align-items: stretch;
	padding: clamp(26px, 5vw, 52px);
	border-radius: 32px;
	background:
		radial-gradient(circle at 18% 20%, rgba(214,179,90,.18), transparent 32%),
		radial-gradient(circle at 86% 84%, rgba(31,122,77,.14), transparent 34%),
		linear-gradient(135deg, #0d0d0d 0%, #24211b 60%, #151b17 100%);
	color: #fff;
	box-shadow: 0 24px 70px rgba(17,24,39,.16);
}

.gem-finder__eyebrow {
	margin: 0 0 8px;
	color: var(--gf-gold);
	font-size: 12px;
	font-weight: 950;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.gem-finder__hero h2,
.gem-finder__results-head h3 {
	margin: 0;
	color: inherit;
	font-size: clamp(34px, 5vw, 64px);
	line-height: 1.05;
	letter-spacing: -.055em;
}

.gem-finder__hero p:not(.gem-finder__eyebrow) {
	max-width: 760px;
	margin: 18px 0 0;
	color: rgba(255,255,255,.78);
	font-size: 17px;
	line-height: 1.62;
}

.gem-finder__hero-card {
	display: grid;
	align-content: end;
	gap: 8px;
	min-height: 180px;
	padding: 24px;
	border-radius: 26px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.14);
}

.gem-finder__hero-card span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gf-gold);
	color: #111;
	font-weight: 950;
}

.gem-finder__hero-card strong {
	display: block;
	color: #fff;
	font-size: 20px;
	line-height: 1.2;
}

.gem-finder__hero-card em {
	color: rgba(255,255,255,.7);
	font-style: normal;
	line-height: 1.45;
}

.gem-finder__quiz {
	margin-top: 18px;
	padding: clamp(20px, 4vw, 36px);
	border: 1px solid var(--gf-border);
	border-radius: 32px;
	background:
		radial-gradient(circle at 12% 100%, rgba(31,122,77,.10), transparent 34%),
		radial-gradient(circle at 88% 12%, rgba(214,179,90,.15), transparent 34%),
		linear-gradient(120deg, #fff 0%, var(--gf-cream) 56%, #f3fbf6 100%);
	box-shadow: 0 18px 55px rgba(17,24,39,.08);
}

.gem-finder__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 26px;
}

.gem-finder__bar span {
	color: var(--gf-muted);
	font-size: 13px;
	font-weight: 950;
}

.gem-finder__bar div {
	flex: 1;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(214,179,90,.20);
}

.gem-finder__bar i {
	display: block;
	width: 16.666%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #111 0%, var(--gf-gold) 100%);
	transition: width .22s ease;
}

.gem-finder__step {
	display: none;
	min-height: 270px;
}

.gem-finder__step.is-active {
	display: block;
}

.gem-finder__step h3 {
	margin: 0;
	color: #111;
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.06;
	letter-spacing: -.045em;
}

.gem-finder__step p {
	max-width: 760px;
	margin: 12px 0 0;
	color: var(--gf-muted);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.56;
}

.gem-finder__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.gem-finder__choice {
	display: inline-grid;
	gap: 3px;
	align-content: center;
	min-height: 58px;
	padding: 10px 22px;
	border: 2px solid #d7c6a6;
	border-radius: 999px;
	background: #fffdf8;
	color: #5f4a19;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.gem-finder__choice span {
	font-weight: 950;
	font-size: 16px;
}

.gem-finder__choice small {
	color: inherit;
	opacity: .74;
	font-weight: 750;
}

.gem-finder__choice:hover,
.gem-finder__choice.is-active {
	transform: translateY(-1px);
	background: #111;
	border-color: #111;
	color: #fff;
	box-shadow: 0 16px 36px rgba(17,17,17,.16);
}

.gem-finder__nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
}

.gem-finder__nav button,
.gem-finder__results-head button,
.gem-finder__card-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 950;
	text-decoration: none;
	cursor: pointer;
}

.gem-finder__back {
	background: #fff;
	color: #111;
	border: 1px solid var(--gf-border) !important;
}

.gem-finder__next,
.gem-finder__submit {
	margin-left: auto;
	background: #111;
	color: #fff;
}

.gem-finder__results {
	margin-top: 20px;
	padding: clamp(20px, 4vw, 34px);
	border-radius: 32px;
	border: 1px solid var(--gf-border);
	background: #fffdf8;
	box-shadow: 0 18px 55px rgba(17,24,39,.08);
}

.gem-finder__results-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 22px;
}

.gem-finder__results-head h3 {
	color: #111;
	font-size: clamp(28px, 4vw, 44px);
}

.gem-finder__results-head button {
	background: #f6efe0;
	color: #111;
	border: 1px solid var(--gf-border);
}

.gem-finder__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.gem-finder__card {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	border: 1px solid #ece4d7;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(17,24,39,.06);
}

.gem-finder__badge {
	position: absolute;
	z-index: 2;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 12px;
	font-weight: 950;
}

.gem-finder__badge--near {
	background: #f6efe0;
	color: #5f4a19;
	border: 1px solid #d7c6a6;
}

.gem-finder__image {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 210px;
	padding: 26px;
	background: linear-gradient(135deg, #f9f4e9 0%, #f3fbf6 100%);
}

.gem-finder__image img {
	max-width: 100%;
	max-height: 190px;
	object-fit: contain;
}

.gem-finder__card-body {
	display: grid;
	gap: 12px;
	padding: 18px;
}

.gem-finder__card h4 {
	margin: 0;
	color: #111;
	font-size: 18px;
	line-height: 1.26;
	letter-spacing: -.02em;
}

.gem-finder__price {
	color: #111;
	font-size: 20px;
	font-weight: 950;
}

.gem-finder__stock {
	color: var(--gf-green);
	font-size: 13px;
	font-weight: 850;
}

.gem-finder__card-actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-top: 4px;
}

.gem-finder__card-actions a:first-child {
	background: #111;
	color: #fff;
}

.gem-finder__card-actions a:last-child {
	background: #f6efe0;
	color: #111;
	border: 1px solid var(--gf-border);
}

.gem-finder__empty {
	padding: 22px;
	border-radius: 22px;
	background: #fff;
	border: 1px solid #ece4d7;
	color: var(--gf-muted);
	font-weight: 750;
	line-height: 1.5;
}

.gem-finder.is-loading .gem-finder__submit {
	opacity: .7;
	pointer-events: none;
}

@media (max-width: 980px) {
	.gem-finder__hero,
	.gem-finder__grid {
		grid-template-columns: 1fr;
	}

	.gem-finder__hero-card {
		min-height: auto;
	}

	.gem-finder__grid {
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.gem-finder__hero,
	.gem-finder__quiz,
	.gem-finder__results {
		border-radius: 24px;
	}

	.gem-finder__choices {
		display: grid;
		grid-template-columns: 1fr;
	}

	.gem-finder__choice {
		width: 100%;
	}

	.gem-finder__nav {
		display: grid;
		grid-template-columns: 1fr;
	}

	.gem-finder__nav button {
		width: 100%;
	}

	.gem-finder__next,
	.gem-finder__submit {
		margin-left: 0;
	}

	.gem-finder__results-head {
		display: grid;
	}

	.gem-finder__image {
		min-height: 180px;
	}
}


/* v2: dynamic model-dependent memory and color choices */
.gem-finder__choices[data-storage-options],
.gem-finder__choices[data-color-options] {
	min-height: 58px;
}