/* Seymour Ring Builder — cold luxury storefront (cool light, RC-adjacent) */
@font-face {
	font-family: "ALTA Regular";
	src: url("../fonts/Alta_regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--srb-bg: #f5f6f8;
	--srb-surface: #ffffff;
	--srb-ink: #1a1d22;
	--srb-black: var(--srb-ink);
	--srb-muted: #4a5560;
	--srb-border: #e3e6eb;
	--srb-accent: #4a5d73;
	--srb-accent-soft: #eef2f6;
	--srb-white: #ffffff;
	--srb-shadow: 0 10px 30px rgba(26, 29, 34, 0.06);
	--srb-shadow-hover: 0 14px 36px rgba(26, 29, 34, 0.1);
	--srb-display: "ALTA Regular", Georgia, "Times New Roman", serif;
	--srb-serif: "ALTA Regular", Georgia, "Times New Roman", serif;
	--srb-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--srb-space: clamp(1rem, 2vw, 2rem);
	--srb-radius: 0;
	--srb-focus: 2px solid var(--srb-accent);
	--srb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.srb-builder {
	font-family: var(--srb-sans);
	color: var(--srb-ink);
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(74, 93, 115, 0.07), transparent 55%),
		radial-gradient(90% 60% at 0% 100%, rgba(74, 93, 115, 0.05), transparent 50%),
		var(--srb-bg);
	padding: clamp(1rem, 2.5vw, 2rem) var(--srb-space);
	box-sizing: border-box;
	overflow-x: clip;
	max-width: 100%;
}

.srb-builder *,
.srb-builder *::before,
.srb-builder *::after {
	box-sizing: border-box;
}

.srb-builder__inner {
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	min-width: 0;
}

.srb-builder__brand {
	margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
	max-width: 36rem;
}

.srb-builder__eyebrow {
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--srb-accent);
	margin: 0 0 0.55rem;
	font-weight: 600;
}

.srb-builder__title {
	font-family: var(--srb-display);
	font-weight: 500;
	font-size: clamp(1.85rem, 3.8vw, 2.75rem);
	line-height: 1.1;
	margin: 0 0 0.5rem;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: var(--srb-ink);
}

.srb-builder__lede {
	margin: 0;
	color: #3d4654;
	font-size: 1.02rem;
	line-height: 1.55;
	max-width: 34rem;
	text-wrap: pretty;
}

.srb-builder__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.25rem);
	padding-bottom: clamp(5.5rem, 12vw, 7rem);
	min-width: 0;
}

.srb-builder__visual {
	order: -1;
	min-width: 0;
}

.srb-builder__panel {
	min-width: 0;
}

@media (min-width: 1024px) {
	.srb-builder__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: start;
		gap: 2.75rem;
		padding-bottom: 50px;
	}

	.srb-builder__visual {
		order: 1;
		position: sticky;
		top: 1.25rem;
	}

	.srb-builder__panel {
		order: 2;
		min-width: 0;
	}
}

/* —— Ring preview —— */
.srb-preview {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.srb-preview__frame {
	aspect-ratio: 1;
	background:
		linear-gradient(160deg, var(--srb-accent-soft) 0%, var(--srb-surface) 55%, #f0f2f5 100%);
	border: 1px solid var(--srb-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.srb-preview__image {
	width: 100%;
	height: 100%;
	/* Contain so centre-stone cut silhouettes (oval/pear/marquise/etc.) stay visible */
	object-fit: contain;
	object-position: center;
	display: block;
	opacity: 1;
	transform: scale(var(--srb-carat-scale, 1));
	transform-origin: 50% 45%;
	transition: opacity 0.4s var(--srb-ease), transform 0.4s var(--srb-ease);
}

.srb-preview__image.is-fading {
	opacity: 0;
}

.srb-preview__carat-badge {
	position: absolute;
	left: 50%;
	bottom: 0.85rem;
	transform: translateX(-50%);
	z-index: 3;
	margin: 0;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--srb-border);
	background: rgba(255, 255, 255, 0.92);
	color: var(--srb-ink);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.srb-preview__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.5rem;
	text-align: center;
	color: var(--srb-muted);
	pointer-events: none;
}

.srb-preview__empty[hidden] {
	display: none !important;
}

.srb-preview__empty-art {
	width: 5.5rem;
	height: 5.5rem;
	display: block;
	opacity: 0.55;
	margin: 0 auto 0.35rem;
}

.srb-preview__ring {
	width: 76px;
	height: 76px;
	border: 1.5px solid rgba(74, 93, 115, 0.35);
	border-radius: 50%;
	position: relative;
	opacity: 0.9;
}

.srb-preview__ring::after {
	content: "";
	position: absolute;
	inset: 20px;
	border: 1px solid var(--srb-accent);
	border-radius: 50%;
	opacity: 0.45;
}

.srb-preview__empty-title {
	font-family: var(--srb-display);
	font-size: 1.25rem;
	color: var(--srb-ink);
	margin: 0;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.srb-preview__empty-hint {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.45;
	max-width: 16rem;
}

.srb-preview__strip {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.4rem;
	margin-top: 0.15rem;
	padding: 0.75rem 0 0;
	border-top: 1px solid var(--srb-border);
	min-height: 2.5rem;
}

.srb-preview__chip {
	appearance: none;
	border: 1px solid var(--srb-border);
	background: var(--srb-surface);
	color: var(--srb-muted);
	font: inherit;
	font-size: 0.72rem;
	padding: 0.4rem 0.6rem;
	min-height: 36px;
	border-radius: var(--srb-radius);
	cursor: default;
	max-width: 100%;
	flex: 1 1 auto;
	overflow: visible;
	white-space: normal;
	line-height: 1.35;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.3rem;
}

@media (min-width: 560px) {
	.srb-preview__chip {
		font-size: 0.78rem;
		padding: 0.5rem 0.75rem;
		min-height: 40px;
		flex: 0 1 auto;
	}
}

.srb-preview__chip.is-filled {
	color: var(--srb-ink);
	border-color: var(--srb-ink);
	background: var(--srb-accent-soft);
}

.srb-preview__chip-label {
	color: var(--srb-muted);
	margin-right: 0;
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	flex: 0 0 auto;
}

@media (min-width: 1024px) {
	.srb-builder__price {
		display: none;
	}
}

@media (max-width: 1023px) {
	.srb-builder__visual {
		order: -1;
	}
}

/* Left preview price — hidden; estimate lives in footer / panel */
.srb-preview__price,
.srb-preview .srb-preview__price {
	display: none !important;
}

.srb-preview__price-label {
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--srb-muted);
}

.srb-preview__price-value {
	font-family: var(--srb-display);
	font-size: 1.45rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

@media (max-width: 1023px) {
	.srb-preview__frame {
		aspect-ratio: 4 / 3;
		max-height: 280px;
	}
}

.srb-builder__panel {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}

/* Progress */
.srb-progress {
	list-style: none;
	margin: 0;
	padding: 0 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.15rem;
	border-bottom: 1px solid var(--srb-border);
}

.srb-progress__item {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--srb-muted);
	display: inline-flex;
	gap: 0.35rem;
	align-items: baseline;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid transparent;
	transition: color 0.2s var(--srb-ease), border-color 0.2s var(--srb-ease);
}

.srb-progress__item.is-current {
	color: var(--srb-ink);
	font-weight: 600;
	border-bottom-color: var(--srb-ink);
}

.srb-progress__item.is-complete {
	color: var(--srb-accent);
}

.srb-progress__num {
	font-variant-numeric: tabular-nums;
}

.srb-builder__error {
	border: 1px solid #e8b4b4;
	background: #fdf6f6;
	color: #6b2424;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
}

.srb-builder__status:empty {
	display: none;
}

/* Options (metal / size) */
.srb-options {
	border: 0;
	margin: 0;
	padding: 0;
}

.srb-options__legend {
	font-family: var(--srb-display);
	font-size: clamp(1.4rem, 2.5vw, 1.7rem);
	margin-bottom: 1rem;
	padding: 0;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.srb-options__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem;
}

@media (max-width: 379px) {
	.srb-options__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 720px) {
	.srb-options__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.65rem;
	}
}

@media (min-width: 1024px) {
	.srb-options__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.75rem;
	}
}

.srb-option {
	appearance: none;
	background: var(--srb-surface);
	border: 1px solid var(--srb-border);
	padding: 0.75rem;
	text-align: left;
	cursor: pointer;
	display: flex;
	gap: 0.65rem;
	align-items: stretch;
	color: inherit;
	font: inherit;
	transition: border-color 0.2s var(--srb-ease), background 0.2s var(--srb-ease), transform 0.15s var(--srb-ease);
	min-height: 4.25rem;
	min-width: 0;
	width: 100%;
}

.srb-option:hover {
	border-color: var(--srb-ink);
	transform: translateY(-1px);
}

.srb-option:focus-visible {
	outline: var(--srb-focus);
	outline-offset: 2px;
}

.srb-option:active {
	transform: scale(0.99);
}

.srb-option.is-selected {
	border-color: var(--srb-ink);
	background: var(--srb-accent-soft);
}

.srb-option__media {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--srb-bg);
}

@media (min-width: 560px) {
	.srb-option {
		padding: 0.85rem;
		gap: 0.85rem;
	}

	.srb-option__media {
		width: 64px;
		height: 64px;
	}
}

.srb-option__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.srb-option__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	justify-content: center;
}

.srb-option__name {
	font-weight: 600;
	font-size: 0.98rem;
	overflow: visible;
	white-space: normal;
}

.srb-option__desc {
	font-size: 0.85rem;
	color: var(--srb-muted);
	line-height: 1.4;
	overflow: visible;
	white-space: normal;
}

.srb-summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 1rem;
	margin: 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--srb-border);
	font-size: 0.92rem;
}

.srb-summary dt {
	color: var(--srb-muted);
	margin: 0;
}

.srb-summary dd {
	margin: 0;
}

.srb-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	color: var(--srb-accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
	font: inherit;
	transition: color 0.2s var(--srb-ease);
}

.srb-link:hover {
	color: var(--srb-ink);
}

.srb-link:focus-visible {
	outline: var(--srb-focus);
	outline-offset: 2px;
}

.srb-builder__price {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 1rem 0;
	border-top: 1px solid var(--srb-border);
	border-bottom: 1px solid var(--srb-border);
}

.srb-builder__price-label {
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--srb-muted);
}

.srb-builder__price-value {
	font-family: var(--srb-display);
	font-size: 1.65rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.srb-builder__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Fixed bottom action bar (reference-style sticky footer) */
.srb-builder--footer {
	padding-bottom: 0;
	overflow-x: clip;
}

.srb-builder--footer .srb-flow {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 6rem);
	padding-bottom: 0;
}

.srb-builder--footer .srb-builder__layout {
	flex: 1 1 auto;

}

.srb-footer-bar {
	position: sticky;
	bottom: 0;
	z-index: 40;
	margin-top: auto;
	/* Full-bleed within .srb-builder padding — avoid 100vw (causes horizontal scroll) */
	width: auto;
	max-width: none;
	margin-left: calc(-1 * var(--srb-space));
	margin-right: calc(-1 * var(--srb-space));
	background: var(--srb-white);
	border-top: 1px solid var(--srb-border);
	box-shadow: 0 -8px 28px rgba(26, 29, 34, 0.06);
}

.srb-footer-bar[hidden] {
	display: none !important;
}

.srb-footer-bar__inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0.95rem var(--srb-space);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.85rem 1.5rem;
	box-sizing: border-box;
}

.srb-footer-bar__left {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.55rem 1.1rem;
	min-width: 0;
}

.srb-footer-bar__title {
	margin: 0;
	font-family: var(--srb-serif);
	font-size: clamp(1.2rem, 2.4vw, 1.65rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--srb-ink);
	line-height: 1.2;
	overflow: visible;
	white-space: normal;
	flex: 1 1 auto;
	min-width: 0;
}

.srb-footer-bar__back,
.srb-footer-bar__reset {
	color: #2c3138;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	font-weight: 500;
	opacity: 1;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: transparent !important;
	border: 0 !important;
	padding: 0.25rem 0;
	box-shadow: none !important;
}

.srb-footer-bar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.55rem;
	margin-left: 0;
	flex: 0 0 auto;
}

.srb-btn--consult {
	border-color: #7a8458;
	background: #7a8458;
	color: var(--srb-white);
	min-width: 11rem;
}

.srb-btn--consult:hover {
	background: #6a744c;
	border-color: #6a744c;
	color: var(--srb-white);
}

.srb-btn--next {
	border-color: var(--srb-ink);
	background: var(--srb-ink);
	color: var(--srb-white);
	min-width: 11rem;
}

.srb-btn--next:hover {
	background: #000;
	border-color: #000;
	color: var(--srb-white);
}

@media (max-width: 720px) {
	.srb-footer-bar__inner {
		grid-template-columns: 1fr;
		align-items: stretch;
		padding: 0.75rem var(--srb-space);
		gap: 0.65rem;
	}

	.srb-footer-bar__left {
		width: 100%;
		gap: 0.4rem 0.85rem;
	}

	.srb-footer-bar__title {
		font-size: clamp(1.05rem, 4.5vw, 1.35rem);
		flex: 1 1 100%;
	}

	.srb-footer-bar__actions {
		width: 100%;
		margin-left: 0;
	}

	.srb-footer-bar__actions .srb-btn,
	.srb-footer-bar__actions .srb-btn--next,
	.srb-footer-bar__actions .srb-btn--consult {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
	}
}

/* Buttons */
.srb-btn {
	appearance: none;
	border: 1px solid var(--srb-ink);
	background: var(--srb-ink);
	color: var(--srb-white);
	font: inherit;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.9rem 1.25rem;
	cursor: pointer;
	transition: background 0.2s var(--srb-ease), color 0.2s var(--srb-ease), transform 0.15s var(--srb-ease), border-color 0.2s var(--srb-ease);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

.srb-btn:hover {
	background: #2c3138;
	border-color: #2c3138;
}

.srb-btn:focus-visible {
	outline: var(--srb-focus);
	outline-offset: 2px;
}

.srb-btn:active {
	transform: scale(0.98);
}

.srb-btn--ghost {
	background: transparent;
	color: var(--srb-ink);
	border-color: var(--srb-border);
}

.srb-btn--ghost:hover {
	background: var(--srb-surface);
	border-color: var(--srb-ink);
	color: var(--srb-ink);
}

.srb-btn--secondary {
	background: var(--srb-surface);
	border-color: var(--srb-accent);
	color: var(--srb-ink);
}

.srb-btn--secondary:hover {
	background: var(--srb-accent-soft);
}

.srb-btn--sm {
	padding: 0.45rem 0.8rem;
	font-size: 0.72rem;
	min-height: 36px;
}

.srb-btn--primary {
	/* alias for default filled */
}

.srb-review__list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: 0;
}

.srb-review__list li {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--srb-border);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.5rem;
	overflow-wrap: anywhere;
}

.srb-review h2,
.srb-consult h2,
.srb-thankyou h2 {
	font-family: var(--srb-display);
	font-weight: 500;
	font-size: clamp(1.45rem, 2.5vw, 1.7rem);
	margin: 0 0 1rem;
	letter-spacing: -0.02em;
}

.srb-consult {
	display: grid;
	gap: 1rem;
}

.srb-consult__field {
	display: grid;
	gap: 0.35rem;
}

.srb-consult__field label {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--srb-muted);
}

.srb-consult__field input,
.srb-consult__field textarea,
.srb-consult__field select {
	font: inherit;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--srb-border);
	background: var(--srb-surface);
	color: var(--srb-ink);
	min-height: 44px;
	transition: border-color 0.2s var(--srb-ease);
}

.srb-consult__field input:focus-visible,
.srb-consult__field textarea:focus-visible,
.srb-consult__field select:focus-visible {
	outline: var(--srb-focus);
	outline-offset: 2px;
	border-color: var(--srb-ink);
}

.srb-thankyou__id {
	font-family: var(--srb-display);
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}

/* Boot / loading shell (visible before JS hydrates) */
.srb-boot {
	min-height: min(70dvh, 540px);
	content-visibility: auto;
	contain: layout paint style;
	will-change: opacity;
	transition: opacity 0.28s var(--srb-ease), transform 0.28s var(--srb-ease);
}

.srb-boot[hidden] {
	display: none !important;
}

.srb-boot.is-leaving {
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
}

.srb-boot__card {
	display: grid;
	gap: 0;
	background: var(--srb-surface);
	box-shadow: var(--srb-shadow);
	overflow: hidden;
	min-height: min(70dvh, 540px);
}

@media (min-width: 900px) {
	.srb-boot__card {
		grid-template-columns: 1.05fr 0.95fr;
		min-height: clamp(420px, 56vw, 540px);
	}
}

.srb-boot__media {
	position: relative;
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), transparent 45%),
		linear-gradient(145deg, #eef2f6 0%, #d9e0e8 48%, #c5ced8 100%);
	overflow: hidden;
	order: -1;
}

.srb-boot__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 35%,
		rgba(255, 255, 255, 0.45) 50%,
		transparent 65%
	);
	transform: translateX(-120%);
	animation: srb-sheen 1.8s var(--srb-ease) infinite;
}

@media (min-width: 900px) {
	.srb-boot__media {
		aspect-ratio: auto;
		min-height: 100%;
		order: 2;
	}
}

.srb-boot__ring {
	position: relative;
	z-index: 1;
	width: 88px;
	height: 88px;
	border: 1.5px solid rgba(74, 93, 115, 0.35);
	border-radius: 50%;
	opacity: 0.85;
}

.srb-boot__ring::after {
	content: "";
	position: absolute;
	inset: 22px;
	border: 1px solid var(--srb-accent);
	border-radius: 50%;
	opacity: 0.5;
}

.srb-boot__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.7rem;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	max-width: 34rem;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 246, 248, 0.96));
}

.srb-boot__eyebrow {
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--srb-accent);
	margin: 0;
	font-weight: 600;
}

.srb-boot__title {
	font-family: var(--srb-display);
	font-weight: 500;
	font-size: clamp(2.1rem, 4.5vw, 3.1rem);
	line-height: 1.08;
	margin: 0;
	letter-spacing: -0.02em;
	color: var(--srb-ink);
	text-wrap: balance;
}

.srb-boot__bone {
	display: block;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		var(--srb-accent-soft) 0%,
		#e4e9ef 45%,
		var(--srb-accent-soft) 90%
	);
	background-size: 200% 100%;
	animation: srb-shimmer 1.35s ease-in-out infinite;
}

.srb-boot__bone--lede {
	height: 0.9rem;
	width: min(100%, 22rem);
	margin: 0.15rem 0 0;
}

.srb-boot__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.55rem 0 0.15rem;
}

.srb-boot__bone--btn {
	height: 2.75rem;
	width: min(100%, 11.5rem);
}

.srb-boot__bone--ghost {
	background: transparent;
	border: 1px solid var(--srb-border);
	animation: none;
}

.srb-boot__status {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0.55rem 0 0;
	color: var(--srb-muted);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	font-weight: 500;
}

.srb-boot__dot {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--srb-accent);
	flex-shrink: 0;
	animation: srb-pulse 1.1s ease-in-out infinite;
}

.srb-boot__label {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.72rem;
	font-weight: 600;
}

.srb-boot__ellipsis::before {
	content: ".";
	letter-spacing: 0.05em;
	animation: srb-dots 1.2s steps(1, end) infinite;
}

@keyframes srb-dots {
	0%,
	20% { content: "."; opacity: 0.35; }
	40% { content: ".."; opacity: 0.65; }
	60%,
	100% { content: "..."; opacity: 1; }
}

@keyframes srb-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes srb-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

@keyframes srb-sheen {
	0% {
		transform: translateX(-120%);
	}
	55%,
	100% {
		transform: translateX(120%);
	}
}

@keyframes srb-pulse {
	0%,
	100% {
		opacity: 0.35;
		transform: scale(0.9);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.srb-boot,
	.srb-boot.is-leaving {
		transition: none;
		transform: none;
	}

	.srb-boot__media::after,
	.srb-boot__bone,
	.srb-boot__dot,
	.srb-boot__ellipsis::before {
		animation: none;
	}

	.srb-boot__ellipsis::before {
		content: "...";
		opacity: 1;
	}
}

/* Landing */
.srb-landing[hidden],
.srb-flow[hidden] {
	display: none !important;
}

.srb-landing {
	display: flex;
	flex-direction: column;
	gap: clamp(2.25rem, 5vw, 3.75rem);
}

.srb-landing__hero {
	display: grid;
	gap: 0;
	align-items: stretch;
	background: var(--srb-surface);
	border: 0;
	padding: 0;
	overflow: hidden;
	box-shadow: var(--srb-shadow);
	min-height: min(72dvh, 560px);
}

@media (min-width: 900px) {
	.srb-landing__hero {
		grid-template-columns: 1.05fr 0.95fr;
		min-height: clamp(420px, 56vw, 560px);
	}
}

.srb-landing__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background:
		linear-gradient(145deg, var(--srb-accent-soft), #dfe5ec 40%, #c8d0da);
	border: 0;
	order: -1;
}

@media (min-width: 900px) {
	.srb-landing__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 100%;
		order: 2;
	}
}

.srb-landing__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--srb-ease);
}

.srb-landing__hero:hover .srb-landing__media img {
	transform: scale(1.03);
}

.srb-landing__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 34rem;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 246, 248, 0.96));
}

.srb-landing__copy .srb-builder__title {
	font-size: clamp(2.1rem, 4.5vw, 3.1rem);
	line-height: 1.08;
}

.srb-landing__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.35rem 0 0.75rem;
}

.srb-landing__actions .srb-btn {
	min-width: min(100%, 200px);
}

.srb-landing__specialist {
	align-self: flex-start;
	margin-top: 0.15rem;
}

.srb-landing__popular {
	padding-top: 1.5rem;
	margin-top: 0.5rem;
	border-top: 1px solid var(--srb-border);
}

.srb-landing__popular-title {
	font-family: var(--srb-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	margin: 0 0 1.5rem;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--srb-ink);
}

.srb-landing__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem 1.25rem;
	align-items: stretch;
}

@media (min-width: 560px) {
	.srb-landing__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.srb-landing__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem 1.5rem;
	}
}

.srb-landing__card {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	text-align: center;
	cursor: pointer;
	color: var(--srb-ink);
	font: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: opacity 0.25s var(--srb-ease), transform 0.25s var(--srb-ease);
	overflow: visible;
	box-shadow: none;
	border-radius: 0;
}

.srb-landing__card:hover {
	border: 0;
	box-shadow: none;
	transform: none;
	opacity: 0.88;
	background: transparent;
}

.srb-landing__card:focus-visible {
	outline: var(--srb-focus);
	outline-offset: 4px;
}

.srb-landing__card:active {
	transform: none;
	opacity: 0.8;
}

.srb-landing__card-media {
	aspect-ratio: 1;
	background: var(--srb-bg);
	display: block;
	overflow: hidden;
	width: 100%;
}

.srb-landing__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--srb-ease);
}

.srb-landing__card:hover .srb-landing__card-media img {
	transform: scale(1.03);
}

.srb-landing__card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.45rem;
	padding: 1rem 0.35rem 0;
	flex: 1 1 auto;
	background: transparent;
	min-height: 4.75rem;
}

.srb-landing__card-name {
	font-family: var(--srb-display);
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.35;
	color: var(--srb-ink);
	text-align: center;
	text-transform: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.7em;
	width: 100%;
	word-break: break-word;
}

.srb-landing__card-price {
	font-family: var(--srb-sans);
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--srb-muted);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	text-align: center;
	margin-top: auto;
	padding-top: 0.15rem;
}

/* Shape chips */
.srb-shape-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-bottom: 0;
}

.srb-shape-chips--prefs {
	gap: 0.6rem;
}

.srb-shape-chip {
	appearance: none;
	border: 1px solid var(--srb-border);
	background: var(--srb-surface);
	color: var(--srb-ink);
	font: inherit;
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.6rem 0.55rem 0.55rem;
	min-width: 4.75rem;
	min-height: 4.75rem;
	cursor: pointer;
	border-radius: 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	position: relative;
	transition: background 0.2s var(--srb-ease), border-color 0.2s var(--srb-ease), color 0.2s var(--srb-ease);
}

.srb-shape-chip__icon {
	display: inline-flex;
	width: 1.85rem;
	height: 1.85rem;
	color: inherit;
	flex-shrink: 0;
}

.srb-shape-chip__icon--photo {
	width: 2.5rem;
	height: 2.5rem;
}

.srb-shape-chip__icon svg,
.srb-shape-chip__icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.srb-shape-chip__label {
	line-height: 1.1;
	text-align: center;
}

.srb-shape-chip:hover {
	border-color: #aeb6c0;
	background: #fff;
}

.srb-shape-chip:focus-visible {
	outline: var(--srb-focus);
	outline-offset: 2px;
}

.srb-shape-chip.is-active {
	border-color: var(--srb-ink);
	background: #f3f5f7;
	color: var(--srb-ink);
}

.srb-shape-chip.is-active::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: -1px;
	height: 2px;
	background: var(--srb-ink);
}

.srb-shape-chip.is-active .srb-shape-chip__icon {
	color: var(--srb-ink);
}

.srb-progress__icon img {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
	object-fit: contain;
}

.srb-progress__item.is-current .srb-progress__icon img {
	filter: brightness(0) invert(1);
}

/* Catalog */
.srb-catalog-toolbar {
	margin-bottom: 1rem;
}

.srb-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: flex-end;
	padding: 1rem;
	background: var(--srb-surface);
	border: 1px solid var(--srb-border);
}

.srb-filter {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--srb-muted);
	font-weight: 600;
}

.srb-filter select,
.srb-filter input[type="number"] {
	font: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--srb-ink);
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--srb-border);
	background: var(--srb-white);
	min-width: 7rem;
	min-height: 40px;
}

.srb-filter input[type="number"] {
	min-width: 5.5rem;
	max-width: 7rem;
}

.srb-catalog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
	gap: 0.85rem;
}

@media (min-width: 720px) {
	.srb-catalog__grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 1.15rem;
	}
}

.srb-card {
	border: 1px solid var(--srb-border);
	background: var(--srb-surface);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 0.25s var(--srb-ease), box-shadow 0.25s var(--srb-ease), transform 0.25s var(--srb-ease);
}

.srb-card:hover {
	border-color: var(--srb-ink);
	box-shadow: var(--srb-shadow-hover);
	transform: translateY(-3px);
}

.srb-card.is-selected {
	border-color: var(--srb-ink);
	background: var(--srb-accent-soft);
	box-shadow: none;
	transform: none;
}

.srb-card__media {
	aspect-ratio: 1;
	background: var(--srb-bg);
	overflow: hidden;
}

.srb-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--srb-ease);
}

.srb-card:hover .srb-card__media img {
	transform: scale(1.04);
}

.srb-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, var(--srb-accent-soft), var(--srb-border));
}

.srb-card__body {
	padding: 0.9rem 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
}

.srb-card__title {
	font-family: var(--srb-display);
	font-size: 1.05rem;
	font-weight: 500;
	margin: 0;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.srb-card__meta {
	margin: 0;
	font-size: 0.8rem;
	color: var(--srb-muted);
	line-height: 1.4;
}

.srb-card__price {
	margin: 0.2rem 0 0;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}

.srb-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	margin-top: auto;
	padding-top: 0.65rem;
}

.srb-badge {
	display: inline-block;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--srb-muted);
	border: 1px solid var(--srb-border);
	padding: 0.2rem 0.45rem;
	width: fit-content;
	background: var(--srb-white);
}

.srb-pagination {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
	font-size: 0.85rem;
	color: var(--srb-muted);
}

.srb-detail {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.srb-detail__title {
	font-family: var(--srb-display);
	font-size: clamp(1.4rem, 2.8vw, 1.85rem);
	font-weight: 500;
	margin: 0;
	letter-spacing: -0.02em;
}

.srb-detail__specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 1rem;
	margin: 0;
}

.srb-detail__specs dt {
	color: var(--srb-muted);
	font-size: 0.8rem;
}

.srb-detail__specs dd {
	margin: 0;
}

.srb-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	color: var(--srb-muted);
	padding: 2rem 0;
}

.srb-review__price {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.35rem 1.5rem;
	margin: 0 0 1rem;
}

.srb-consult__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.85rem;
	margin: 1rem 0 1.25rem;
}

.srb-consult__grid label {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.8rem;
	color: var(--srb-muted);
}

.srb-consult__grid input,
.srb-consult__grid select,
.srb-consult__grid textarea {
	font: inherit;
	color: var(--srb-ink);
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--srb-border);
	background: var(--srb-surface);
	min-height: 40px;
}

.srb-consult__full {
	grid-column: 1 / -1;
}

.srb-thankyou__ref {
	font-size: 0.85rem;
	color: var(--srb-muted);
	letter-spacing: 0.04em;
}

.srb-filters-toggle {
	display: none;
	margin-bottom: 0.75rem;
}

.srb-controls__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.srb-controls__start-over {
	margin-left: auto;
}

.srb-review__consult-only {
	padding: 0.75rem 1rem;
	border: 1px solid var(--srb-border);
	background: var(--srb-accent-soft);
	color: var(--srb-muted);
	font-size: 0.9rem;
	margin: 0 0 1rem;
}

.srb-catalog__heading {
	font-family: var(--srb-display);
	font-size: clamp(1.35rem, 2.4vw, 1.7rem);
	font-weight: 500;
	margin: 0 0 1rem;
	letter-spacing: -0.02em;
}

/* Motion */
@media (prefers-reduced-motion: no-preference) {
	.srb-landing__hero,
	.srb-landing__popular,
	.srb-flow {
		animation: srb-rise 0.65s var(--srb-ease) both;
	}

	.srb-landing__popular {
		animation-delay: 0.08s;
	}

	.srb-card,
	.srb-landing__card {
		animation: srb-rise 0.5s var(--srb-ease) both;
	}

	.srb-catalog__grid .srb-card:nth-child(1) { animation-delay: 0.02s; }
	.srb-catalog__grid .srb-card:nth-child(2) { animation-delay: 0.05s; }
	.srb-catalog__grid .srb-card:nth-child(3) { animation-delay: 0.08s; }
	.srb-catalog__grid .srb-card:nth-child(4) { animation-delay: 0.11s; }
	.srb-catalog__grid .srb-card:nth-child(5) { animation-delay: 0.14s; }
	.srb-catalog__grid .srb-card:nth-child(6) { animation-delay: 0.17s; }
	.srb-catalog__grid .srb-card:nth-child(7) { animation-delay: 0.2s; }
	.srb-catalog__grid .srb-card:nth-child(8) { animation-delay: 0.23s; }
}

@keyframes srb-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.srb-landing__hero:hover .srb-landing__media img,
	.srb-landing__card:hover .srb-landing__card-media img,
	.srb-card:hover .srb-card__media img {
		transform: none;
	}

	.srb-option:hover,
	.srb-landing__card:hover,
	.srb-card:hover {
		transform: none;
	}
}

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

@media (max-width: 768px) {
	.srb-filters-toggle {
		display: inline-flex;
	}

	.srb-catalog-toolbar:not(.is-filters-open) .srb-filters {
		display: none;
	}

	.srb-catalog-toolbar.is-filters-open .srb-filters {
		display: flex;
	}
}

@media (max-width: 319px) {
	.srb-builder {
		padding: 1rem;
	}
}

/* Legacy class aliases used by older markup hooks */
.srb-builder__visual-frame {
	/* superseded by .srb-preview__frame */
}

.srb-builder__image {
	/* superseded by .srb-preview__image */
}

.srb-builder__visual-placeholder {
	/* superseded by .srb-preview__empty */
}

/* Fine-grained tab stepper (Style / Metal / Shape …) */
.srb-progress--tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0 0 0.35rem;
	border-bottom: 1px solid var(--srb-border);
	max-width: 100%;
}

.srb-progress--tabs .srb-progress__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.srb-progress--tabs .srb-progress__tab {
	appearance: none;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: #3d4654;
	font: inherit;
	font-size: clamp(0.62rem, 2.4vw, 0.7rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.65rem 0.55rem;
	min-height: 44px;
	cursor: pointer;
	white-space: nowrap;
}

.srb-progress--tabs .srb-progress__item.is-current .srb-progress__tab {
	color: var(--srb-ink);
	border-bottom-color: #7a8458;
}

.srb-progress--tabs .srb-progress__item.is-complete .srb-progress__tab {
	color: var(--srb-ink);
}

.srb-progress--tabs .srb-progress__tab:disabled {
	opacity: 0.45;
	cursor: default;
}

.srb-choice-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem;
}

.srb-choice-list--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
}

@media (min-width: 900px) {
	.srb-choice-list:not(.srb-metal-list) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 420px) {
	.srb-choice-list:not(.srb-metal-list) {
		grid-template-columns: 1fr;
	}
}

.srb-choice-row {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	min-width: 0;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--srb-border);
	background: var(--srb-white);
	color: var(--srb-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s var(--srb-ease), background 0.2s var(--srb-ease);
}

.srb-choice-row:hover {
	border-color: #7a8458;
}

.srb-choice-row.is-active {
	border-color: #7a8458;
	box-shadow: inset 0 0 0 1px #7a8458;
	background: rgba(122, 132, 88, 0.06);
}

.srb-choice-row__icon {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.srb-choice-row__icon img,
.srb-choice-row__icon svg {
	width: 2rem;
	height: 2rem;
}

.srb-choice-row__label {
	font-size: 0.9rem;
	font-weight: 500;
	min-width: 0;
	overflow-wrap: anywhere;
	line-height: 1.3;
}

/* Combined metal + karat list with circular image swatches — 2 columns */
.srb-choice-list.srb-metal-list,
.srb-metal-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

@media (max-width: 359px) {
	.srb-choice-list.srb-metal-list,
	.srb-metal-list {
		grid-template-columns: 1fr;
	}
}

.srb-metal-row {
	padding: 0.65rem 0.75rem;
	min-width: 0;
	gap: 0.55rem;
}

.srb-metal-row .srb-choice-row__label {
	overflow: visible;
	white-space: normal;
	line-height: 1.3;
	font-size: 0.82rem;
}

.srb-metal-swatch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--srb-metal-swatch, #ccc);
	border: 1px solid rgba(26, 29, 34, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.srb-metal-swatch img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.srb-metal-swatch__badge {
	position: relative;
	z-index: 1;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	color: #1a1d22;
	text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.75);
	text-align: center;
	padding: 0 0.15rem;
	pointer-events: none;
}

.srb-metal-row.is-active .srb-metal-swatch {
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.4),
		0 0 0 2px #7a8458;
}

/* Band Polished / Pave image cards */
.srb-band-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.srb-band-card {
	appearance: none;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.75rem 0.55rem 0.55rem;
	border: 1px solid var(--srb-ink);
	background: transparent;
	color: var(--srb-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	min-height: 7.5rem;
	transition: border-color 0.2s var(--srb-ease), background 0.2s var(--srb-ease), box-shadow 0.2s var(--srb-ease);
}

.srb-band-card.is-active {
	background: var(--srb-white);
	border-color: #7a8458;
	box-shadow: inset 0 0 0 1px #7a8458;
}

.srb-band-card__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #f7f5f2;
}

.srb-band-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.srb-band-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.srb-band-card__name {
	font-size: 1rem;
	font-weight: 500;
}

@media (max-width: 640px) {
	.srb-band-grid {
		grid-template-columns: 1fr;
	}
}

.srb-check-row {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0.5rem 0 1rem;
	cursor: pointer;
}

.srb-pdp__hint {
	margin: 0.4rem 0 0;
	font-size: 0.78rem;
	color: var(--srb-muted);
	line-height: 1.45;
}

.srb-builder--footer .srb-builder__summary {
	display: none;
}

/* —— TMC chevron progress —— */
.srb-progress--chevron {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	padding: 0;
	border-bottom: 0;
	overflow: hidden;
}

.srb-progress--chevron .srb-progress__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 1rem 0.85rem 1.35rem;
	margin: 0;
	border: 0;
	border-bottom: 0;
	background: linear-gradient(180deg, #f7f8fa 0%, #eef0f3 100%);
	color: var(--srb-muted);
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.78rem;
	min-height: 3.4rem;
}

.srb-progress--chevron .srb-progress__item:first-child {
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
	padding-left: 0.9rem;
}

.srb-progress--chevron .srb-progress__item.is-current {
	background: linear-gradient(180deg, #1a1c1f 0%, #0e1012 100%);
	color: #f5f2ec;
	font-weight: 600;
}

.srb-progress--chevron .srb-progress__item.is-complete {
	background: linear-gradient(180deg, #e8ecef 0%, #d9dee3 100%);
	color: var(--srb-ink);
}

.srb-progress__icon {
	display: inline-flex;
	width: 1.35rem;
	height: 1.35rem;
	flex-shrink: 0;
}

.srb-progress__icon svg {
	width: 100%;
	height: 100%;
}

.srb-progress__copy {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.srb-progress__price {
	font-family: var(--srb-display);
	font-size: 0.85rem;
	letter-spacing: 0;
	font-weight: 500;
}

@media (max-width: 720px) {
	.srb-progress--chevron {
		grid-template-columns: 1fr 1fr;
		gap: 0.35rem;
	}
	.srb-progress--chevron .srb-progress__item,
	.srb-progress--chevron .srb-progress__item:first-child {
		clip-path: none;
		border-radius: 2px;
		padding: 0.7rem 0.75rem;
	}
}

/* —— Gallery thumbs —— */
.srb-preview__stage {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: stretch;
}

.srb-preview__thumbs {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	max-height: min(52vh, 420px);
	overflow-y: auto;
	padding-right: 0.15rem;
}

.srb-preview__thumbs[hidden] {
	display: none;
}

.srb-preview__thumb {
	appearance: none;
	border: 1px solid var(--srb-border);
	background: #fff;
	padding: 0;
	width: 3.4rem;
	height: 3.4rem;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.2s var(--srb-ease), opacity 0.2s var(--srb-ease);
}

.srb-preview__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.srb-preview__thumb.is-active {
	border-color: var(--srb-ink);
}

@media (max-width: 900px) {
	.srb-preview__stage {
		grid-template-columns: 1fr;
	}
	.srb-preview__thumbs {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
	}
	.srb-preview__thumb {
		flex: 0 0 auto;
	}
}

/* —— PDP customisations (compact) —— */
.srb-pdp {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.srb-pdp--custom {
	gap: 0.9rem;
}

.srb-pdp__title {
	font-family: var(--srb-display);
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
	line-height: 1.15;
	color: var(--srb-ink);
}

.srb-pdp__lede {
	margin: -0.15rem 0 0;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--srb-muted);
	max-width: 36rem;
}

.srb-pdp__price {
	margin: 0;
	font-size: 0.9rem;
	color: var(--srb-muted);
}

.srb-pdp__desc {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--srb-muted);
}

.srb-pdp__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.srb-pdp__field--divider {
	padding-top: 0.85rem;
	border-top: 1px solid var(--srb-border);
	margin-top: 0.1rem;
}

.srb-pdp__field--metals {
	gap: 0.55rem;
}

.srb-pdp__label {
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--srb-muted);
	font-weight: 500;
	margin: 0;
}

.srb-pdp__value {
	font-weight: 700;
	color: var(--srb-ink);
	letter-spacing: 0.02em;
	text-transform: none;
	font-size: 0.86rem;
	margin-left: 0.2rem;
}

.srb-pdp__select {
	appearance: none;
	border: 1px solid var(--srb-border);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1c1f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
	padding: 0.65rem 2.2rem 0.65rem 0.85rem;
	font: inherit;
	font-size: 0.9rem;
	color: var(--srb-ink);
	width: 100%;
	max-width: 18rem;
}

.srb-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.srb-swatches--metals {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem;
}

@media (min-width: 560px) {
	.srb-swatches--metals {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.65rem;
	}
}

.srb-swatch {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	padding: 0.2rem;
	border-radius: 999px;
	cursor: pointer;
}

.srb-swatch--metal {
	border: 1px solid var(--srb-border);
	border-radius: 0;
	background: #fff;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
	text-align: center;
	font: inherit;
	color: var(--srb-ink);
	transition: border-color 0.2s var(--srb-ease);
}

.srb-swatch--metal .srb-swatch__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1.15;
	background: #fff;
	padding: 0.4rem;
}

.srb-swatch--metal .srb-swatch__media--chip {
	min-height: 3.5rem;
}

.srb-swatch--metal .srb-swatch__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.srb-swatch--metal .srb-swatch__name {
	display: block;
	padding: 0.4rem 0.35rem 0.5rem;
	font-size: 0.7rem;
	letter-spacing: 0.01em;
	line-height: 1.25;
	background: #fff;
	border-top: 1px solid transparent;
	color: var(--srb-ink);
}

.srb-swatch.is-active {
	border-color: var(--srb-ink);
}

.srb-swatch--metal:hover {
	border-color: #aeb6c0;
}

.srb-swatch--metal.is-active {
	border-color: var(--srb-ink);
	border-width: 1.5px;
	background: #fff;
}

.srb-swatch--metal.is-active .srb-swatch__name {
	background: var(--srb-accent-soft);
	border-top-color: var(--srb-border);
}

.srb-swatch__chip {
	display: block;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.srb-design-sheet {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.5rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--srb-border);
}

.srb-design-sheet__preview {
	background: #fff;
	border: 1px solid var(--srb-border);
	padding: 0.75rem;
	text-align: center;
	max-width: 14rem;
}

.srb-design-sheet__preview img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 11rem;
	object-fit: contain;
	margin: 0 auto;
}

.srb-height-toggles {
	display: flex;
	gap: 0.45rem;
	flex-wrap: wrap;
}

.srb-height-toggle {
	appearance: none;
	border: 1px solid var(--srb-border);
	background: #fff;
	padding: 0.65rem 1.1rem;
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	transition: background 0.2s var(--srb-ease), color 0.2s var(--srb-ease), border-color 0.2s var(--srb-ease);
}

.srb-height-toggle.is-active {
	background: var(--srb-ink);
	border-color: var(--srb-ink);
	color: #f5f2ec;
}

.srb-pdp__guide {
	margin: 0.25rem 0 0;
	font-size: 0.85rem;
}

.srb-pdp__guide .srb-link,
button.srb-size-guide-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	color: var(--srb-ink);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
}

.srb-pdp__guide .srb-link:hover,
button.srb-size-guide-trigger:hover {
	color: var(--srb-ink);
	opacity: 0.75;
}

.srb-pdp__guide-icon {
	width: 1rem;
	height: 1rem;
	display: block;
	flex-shrink: 0;
}

.srb-pdp__guide-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.srb-size-step {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Size guide modal */
.srb-size-guide {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

.srb-size-guide[hidden] {
	display: none !important;
}

.srb-size-guide__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 29, 34, 0.48);
}

.srb-size-guide__panel {
	position: relative;
	z-index: 1;
	width: min(34rem, 100%);
	max-height: min(88vh, 40rem);
	overflow: auto;
	background: var(--srb-surface, #f7f5f1);
	color: var(--srb-ink, #1a1d22);
	border: 1px solid var(--srb-border, #d8d2c8);
	box-shadow: 0 24px 64px rgba(26, 29, 34, 0.22);
	padding: 1.35rem 1.4rem 1.5rem;
}

.srb-size-guide__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
}

.srb-size-guide__title {
	margin: 0;
	font-family: var(--srb-serif, "ALTA Regular", Georgia, serif);
	font-size: 1.55rem;
	font-weight: 500;
	line-height: 1.2;
}

.srb-size-guide__close {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.1rem 0.35rem;
}

.srb-size-guide__lede,
.srb-size-guide__note,
.srb-size-guide__help {
	margin: 0 0 0.85rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--srb-muted, #5c616a);
}

.srb-size-guide__steps {
	margin: 0 0 1rem;
	padding-left: 1.2rem;
	font-size: 0.9rem;
	line-height: 1.55;
}

.srb-size-guide__steps li + li {
	margin-top: 0.4rem;
}

.srb-size-guide__table-wrap {
	overflow-x: auto;
	margin-bottom: 1rem;
}

.srb-size-guide__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

.srb-size-guide__table caption {
	caption-side: top;
	text-align: left;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.7rem;
	margin-bottom: 0.5rem;
}

.srb-size-guide__table th,
.srb-size-guide__table td {
	border-bottom: 1px solid var(--srb-border, #d8d2c8);
	padding: 0.55rem 0.4rem;
	text-align: left;
}

.srb-size-guide__table th {
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--srb-muted, #5c616a);
}

html.srb-size-guide-open {
	overflow: hidden;
}

.srb-builder button.srb-size-guide-trigger,
.srb-builder .srb-size-guide-trigger {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	color: var(--srb-ink) !important;
	box-shadow: none !important;
}

.srb-complete__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

/* Custom design style cards — readable full copy */
.srb-design-styles__group {
	margin: 1.35rem 0 0.65rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--srb-muted, #66707c);
}

.srb-design-styles__group:first-of-type {
	margin-top: 0.35rem;
}

.srb-design-styles__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin-top: 0.25rem;
}

@media (min-width: 720px) {
	.srb-design-styles__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.85rem;
	}
}

.srb-design-style {
	appearance: none;
	border: 1px solid var(--srb-border);
	background: var(--srb-surface);
	color: var(--srb-ink);
	text-align: left;
	padding: 0;
	cursor: pointer;
	font: inherit;
	display: grid;
	grid-template-columns: minmax(72px, 88px) minmax(0, 1fr);
	gap: 0;
	overflow: visible;
	min-height: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	transition: border-color 0.2s var(--srb-ease), background 0.2s var(--srb-ease);
}

.srb-design-style__media {
	display: block;
	position: relative;
	background: #f7f5f2;
	aspect-ratio: 1;
	align-self: stretch;
	overflow: hidden;
	min-width: 72px;
	max-width: 88px;
	width: 100%;
}

@media (min-width: 560px) {
	.srb-design-style {
		grid-template-columns: 104px minmax(0, 1fr);
	}

	.srb-design-style__media {
		min-width: 104px;
		max-width: 104px;
	}
}

.srb-design-style__media img,
.srb-design-style__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.srb-design-style__media--swap .srb-design-style__img {
	position: absolute;
	inset: 0;
	transition: opacity 0.28s ease;
}

.srb-design-style__media--swap .srb-design-style__img--primary {
	opacity: 1;
	position: relative;
	z-index: 1;
}

.srb-design-style__media--swap .srb-design-style__img--hover {
	opacity: 0;
	z-index: 2;
	pointer-events: none;
}

.srb-design-style:hover .srb-design-style__media--swap .srb-design-style__img--primary,
.srb-design-style:focus-visible .srb-design-style__media--swap .srb-design-style__img--primary {
	opacity: 0;
}

.srb-design-style:hover .srb-design-style__media--swap .srb-design-style__img--hover,
.srb-design-style:focus-visible .srb-design-style__media--swap .srb-design-style__img--hover {
	opacity: 1;
}

@media (hover: none) {
	.srb-design-style:hover .srb-design-style__media--swap .srb-design-style__img--primary {
		opacity: 1;
	}

	.srb-design-style:hover .srb-design-style__media--swap .srb-design-style__img--hover {
		opacity: 0;
	}
}

.srb-design-style__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.7rem 0.75rem;
	justify-content: center;
	min-width: 0;
	overflow: visible;
	z-index: 1;
	background: var(--srb-surface);
}

@media (min-width: 560px) {
	.srb-design-style__body {
		padding: 0.85rem 1rem;
		gap: 0.35rem;
	}
}

.srb-design-style:hover,
.srb-design-style.is-active {
	border-color: var(--srb-ink);
	background: var(--srb-accent-soft);
}

.srb-design-style__name {
	font-family: var(--srb-display);
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--srb-ink);
	overflow: visible;
	white-space: normal;
	padding-inline-start: 0.02em;
}

.srb-design-style__desc {
	font-size: 0.82rem;
	color: #3d4654;
	line-height: 1.45;
	display: block;
	overflow: visible;
	white-space: normal;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	max-height: none;
}

.srb-design-style__band {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--srb-ink);
	opacity: 0.85;
	font-weight: 600;
	overflow: visible;
	white-space: normal;
}

.srb-diamond-prefs .srb-shape-chips {
	margin-bottom: 0.35rem;
}

/* Metal colour: CSS filters only for legacy SVG empty art — never tint photoreal ring photos */
.srb-preview__frame--metal-photo .srb-preview__image,
.srb-preview__image--metal-photo,
.srb-preview__frame--metal-photo .srb-preview__image[data-metal],
.srb-preview__image--metal-photo[data-metal],
.srb-preview__image[src*="/images/styles/"],
.srb-preview__image[src*="/images/previews/"],
.srb-preview__image[src*="/images/bands/"] {
	filter: none !important;
}

.srb-preview__frame:not(.srb-preview__frame--metal-photo)[data-metal="yellow_gold"] .srb-preview__image,
.srb-preview__image:not(.srb-preview__image--metal-photo)[data-metal="yellow_gold"],
.srb-preview__empty-art[data-metal="yellow_gold"] {
	filter: sepia(0.55) saturate(1.55) hue-rotate(-8deg) brightness(1.06);
}

.srb-preview__frame:not(.srb-preview__frame--metal-photo)[data-metal="white_gold"] .srb-preview__image,
.srb-preview__frame:not(.srb-preview__frame--metal-photo)[data-metal="platinum"] .srb-preview__image,
.srb-preview__image:not(.srb-preview__image--metal-photo)[data-metal="white_gold"],
.srb-preview__image:not(.srb-preview__image--metal-photo)[data-metal="platinum"],
.srb-preview__empty-art[data-metal="white_gold"],
.srb-preview__empty-art[data-metal="platinum"] {
	filter: none;
}

.srb-preview__frame:not(.srb-preview__frame--metal-photo)[data-metal="rose_gold"] .srb-preview__image,
.srb-preview__image:not(.srb-preview__image--metal-photo)[data-metal="rose_gold"],
.srb-preview__empty-art[data-metal="rose_gold"] {
	filter: sepia(0.4) saturate(1.45) hue-rotate(-28deg) brightness(1.03);
}

.srb-preview__frame:not(.srb-preview__frame--metal-photo)[data-metal="yg_platinum"] .srb-preview__image,
.srb-preview__image:not(.srb-preview__image--metal-photo)[data-metal="yg_platinum"],
.srb-preview__empty-art[data-metal="yg_platinum"] {
	filter: sepia(0.35) saturate(1.25) hue-rotate(-5deg) brightness(1.05);
}

.srb-preview__frame:not(.srb-preview__frame--metal-photo)[data-metal="rg_platinum"] .srb-preview__image,
.srb-preview__image:not(.srb-preview__image--metal-photo)[data-metal="rg_platinum"],
.srb-preview__empty-art[data-metal="rg_platinum"] {
	filter: sepia(0.3) saturate(1.2) hue-rotate(-20deg) brightness(1.04);
}

.srb-builder button.srb-design-style,
.srb-builder .srb-design-style {
	display: grid !important;
	grid-template-columns: minmax(72px, 88px) minmax(0, 1fr) !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
	text-indent: 0 !important;
	letter-spacing: normal !important;
	background-color: var(--srb-surface) !important;
	border-color: var(--srb-border) !important;
	color: var(--srb-ink) !important;
	box-sizing: border-box !important;
	float: none !important;
	overflow: visible !important;
}

.srb-builder .srb-design-style__media {
	min-width: 72px !important;
	max-width: 88px !important;
}

@media (min-width: 560px) {
	.srb-builder button.srb-design-style,
	.srb-builder .srb-design-style {
		grid-template-columns: 104px minmax(0, 1fr) !important;
	}

	.srb-builder .srb-design-style__media {
		min-width: 104px !important;
		max-width: 104px !important;
	}
}

.srb-builder .srb-design-style__desc {
	display: block !important;
	overflow: visible !important;
	-webkit-line-clamp: unset !important;
	line-clamp: unset !important;
	max-height: none !important;
	color: #3d4654 !important;
	white-space: normal !important;
}

.srb-builder button.srb-design-style:hover,
.srb-builder button.srb-design-style.is-active,
.srb-builder .srb-design-style:hover,
.srb-builder .srb-design-style.is-active {
	background-color: var(--srb-accent-soft) !important;
	border-color: var(--srb-ink) !important;
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-design-style.is-active .srb-design-style__body,
.srb-builder .srb-design-style.is-active .srb-design-style__body,
.srb-builder button.srb-design-style:hover .srb-design-style__body,
.srb-builder .srb-design-style:hover .srb-design-style__body {
	background: transparent !important;
}

.srb-builder .srb-design-style__name,
.srb-builder .srb-design-style__desc,
.srb-builder .srb-design-style__band {
	color: inherit;
	text-indent: 0 !important;
	float: none !important;
}

.srb-complete {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.srb-complete .srb-review {
	padding-top: 1rem;
	border-top: 1px solid var(--srb-border);
}

/* —— Theme-proof interactive states (beat Hello Elementor #c36) —— */
/* Kill theme `[type=button]:hover { background:#c36; color:#fff }` globally inside builder */
.srb-builder button,
.srb-builder [type="button"],
.srb-builder [type="submit"] {
	background-color: transparent;
	color: var(--srb-ink);
	text-decoration: none;
}

.srb-builder button:hover,
.srb-builder button:focus,
.srb-builder button:focus-visible,
.srb-builder [type="button"]:hover,
.srb-builder [type="button"]:focus,
.srb-builder [type="button"]:focus-visible,
.srb-builder [type="submit"]:hover,
.srb-builder [type="submit"]:focus,
.srb-builder [type="submit"]:focus-visible {
	background-color: var(--srb-accent-soft) !important;
	background-image: none !important;
	color: var(--srb-ink) !important;
	text-decoration: none !important;
}

.srb-builder button.srb-btn,
.srb-builder .srb-btn {
	background-color: var(--srb-ink) !important;
	border-color: var(--srb-ink) !important;
	color: var(--srb-white) !important;
}

.srb-builder button.srb-btn:hover,
.srb-builder button.srb-btn:focus,
.srb-builder button.srb-btn:focus-visible,
.srb-builder .srb-btn:hover,
.srb-builder .srb-btn:focus,
.srb-builder .srb-btn:focus-visible {
	background-color: #2c3138 !important;
	border-color: #2c3138 !important;
	color: var(--srb-white) !important;
}

.srb-builder button.srb-btn--ghost,
.srb-builder .srb-btn--ghost {
	background-color: transparent !important;
	border-color: var(--srb-border) !important;
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-btn--ghost:hover,
.srb-builder button.srb-btn--ghost:focus,
.srb-builder button.srb-btn--ghost:focus-visible,
.srb-builder .srb-btn--ghost:hover,
.srb-builder .srb-btn--ghost:focus,
.srb-builder .srb-btn--ghost:focus-visible {
	background-color: var(--srb-accent-soft) !important;
	border-color: var(--srb-ink) !important;
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-btn--secondary,
.srb-builder .srb-btn--secondary {
	background-color: var(--srb-surface) !important;
	border-color: var(--srb-accent) !important;
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-btn--secondary:hover,
.srb-builder button.srb-btn--secondary:focus,
.srb-builder button.srb-btn--secondary:focus-visible,
.srb-builder .srb-btn--secondary:hover,
.srb-builder .srb-btn--secondary:focus,
.srb-builder .srb-btn--secondary:focus-visible {
	background-color: var(--srb-accent-soft) !important;
	border-color: var(--srb-ink) !important;
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-btn--next:hover,
.srb-builder button.srb-btn--next:focus,
.srb-builder .srb-btn--next:hover,
.srb-builder .srb-btn--next:focus {
	background-color: #000 !important;
	border-color: #000 !important;
	color: var(--srb-white) !important;
}

.srb-builder button.srb-btn--consult,
.srb-builder .srb-btn--consult {
	background-color: #7a8458 !important;
	border-color: #7a8458 !important;
	color: var(--srb-white) !important;
}

.srb-builder button.srb-btn--consult:hover,
.srb-builder button.srb-btn--consult:focus,
.srb-builder .srb-btn--consult:hover,
.srb-builder .srb-btn--consult:focus {
	background-color: #6a744c !important;
	border-color: #6a744c !important;
	color: var(--srb-white) !important;
}

.srb-builder button.srb-choice-row,
.srb-builder .srb-choice-row {
	background-color: var(--srb-white) !important;
	color: var(--srb-ink) !important;
	box-shadow: none !important;
}

.srb-builder button.srb-choice-row:hover,
.srb-builder button.srb-choice-row:focus,
.srb-builder button.srb-choice-row:focus-visible,
.srb-builder .srb-choice-row:hover,
.srb-builder .srb-choice-row:focus,
.srb-builder .srb-choice-row:focus-visible {
	background-color: rgba(122, 132, 88, 0.06) !important;
	background-image: none !important;
	border-color: #7a8458 !important;
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-choice-row.is-active,
.srb-builder button.srb-choice-row.is-active:hover,
.srb-builder .srb-choice-row.is-active,
.srb-builder .srb-choice-row.is-active:hover {
	background-color: rgba(122, 132, 88, 0.1) !important;
	border-color: #7a8458 !important;
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-footer-bar__back:hover,
.srb-builder button.srb-footer-bar__reset:hover,
.srb-builder button.srb-footer-bar__back:focus,
.srb-builder button.srb-footer-bar__reset:focus,
.srb-builder .srb-footer-bar__back:hover,
.srb-builder .srb-footer-bar__reset:hover {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--srb-ink) !important;
	text-decoration: underline !important;
}

/* Beat theme button:hover pink (#c36) — !important required on Elementor themes */
.srb-builder button.srb-shape-chip,
.srb-builder .srb-shape-chips button.srb-shape-chip,
.srb-builder .srb-shape-chip {
	background-color: var(--srb-surface) !important;
	background-image: none !important;
	border: 1px solid var(--srb-border) !important;
	color: var(--srb-ink) !important;
	box-shadow: none !important;
}

.srb-builder button.srb-shape-chip:hover,
.srb-builder button.srb-shape-chip:focus,
.srb-builder button.srb-shape-chip:focus-visible,
.srb-builder button.srb-shape-chip:active,
.srb-builder .srb-shape-chips button.srb-shape-chip:hover,
.srb-builder .srb-shape-chips button.srb-shape-chip:focus,
.srb-builder .srb-shape-chips button.srb-shape-chip:focus-visible,
.srb-builder .srb-shape-chip:hover,
.srb-builder .srb-shape-chip:focus,
.srb-builder .srb-shape-chip:focus-visible {
	background-color: #fff !important;
	background-image: none !important;
	border-color: #aeb6c0 !important;
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-shape-chip:hover .srb-shape-chip__icon,
.srb-builder .srb-shape-chip:hover .srb-shape-chip__icon {
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-shape-chip.is-active,
.srb-builder button.srb-shape-chip.is-active:hover,
.srb-builder button.srb-shape-chip.is-active:focus,
.srb-builder button.srb-shape-chip.is-active:focus-visible,
.srb-builder .srb-shape-chips button.srb-shape-chip.is-active,
.srb-builder .srb-shape-chips button.srb-shape-chip.is-active:hover,
.srb-builder .srb-shape-chip.is-active,
.srb-builder .srb-shape-chip.is-active:hover,
.srb-builder .srb-shape-chip.is-active:focus {
	background-color: #f3f5f7 !important;
	background-image: none !important;
	border-color: var(--srb-ink) !important;
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-shape-chip.is-active .srb-shape-chip__icon,
.srb-builder .srb-shape-chip.is-active .srb-shape-chip__icon {
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-option,
.srb-builder .srb-option {
	background-color: var(--srb-surface);
	border-color: var(--srb-border);
	color: var(--srb-ink);
}

.srb-builder button.srb-option:hover,
.srb-builder button.srb-option:focus,
.srb-builder button.srb-option:focus-visible,
.srb-builder .srb-option:hover,
.srb-builder .srb-option:focus,
.srb-builder .srb-option:focus-visible {
	background-color: var(--srb-accent-soft);
	border-color: var(--srb-ink);
	color: var(--srb-ink);
}

.srb-builder button.srb-option.is-selected,
.srb-builder .srb-option.is-selected {
	background-color: var(--srb-accent-soft);
	border-color: var(--srb-ink);
	color: var(--srb-ink);
}

.srb-builder button.srb-height-toggle,
.srb-builder .srb-height-toggle {
	background-color: var(--srb-surface);
	border-color: var(--srb-border);
	color: var(--srb-ink);
}

.srb-builder button.srb-height-toggle:hover,
.srb-builder button.srb-height-toggle:focus,
.srb-builder button.srb-height-toggle:focus-visible,
.srb-builder .srb-height-toggle:hover,
.srb-builder .srb-height-toggle:focus,
.srb-builder .srb-height-toggle:focus-visible {
	background-color: var(--srb-accent-soft);
	border-color: var(--srb-ink);
	color: var(--srb-ink);
}

.srb-builder button.srb-height-toggle.is-active,
.srb-builder button.srb-height-toggle.is-active:hover,
.srb-builder .srb-height-toggle.is-active,
.srb-builder .srb-height-toggle.is-active:hover {
	background-color: var(--srb-ink);
	border-color: var(--srb-ink);
	color: var(--srb-white);
}

.srb-builder button.srb-swatch:hover,
.srb-builder button.srb-swatch:focus,
.srb-builder .srb-swatch:hover,
.srb-builder .srb-swatch:focus {
	border-color: var(--srb-ink);
	background-color: transparent;
}

.srb-builder button.srb-swatch.is-active,
.srb-builder .srb-swatch.is-active {
	border-color: var(--srb-ink);
	background-color: transparent;
}

.srb-builder button.srb-swatch--metal,
.srb-builder .srb-swatch--metal {
	background-color: #fff !important;
	border-radius: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	color: var(--srb-ink) !important;
	padding: 0 !important;
}

.srb-builder button.srb-swatch--metal:hover,
.srb-builder button.srb-swatch--metal:focus,
.srb-builder .srb-swatch--metal:hover,
.srb-builder .srb-swatch--metal:focus {
	background-color: #fff !important;
	border-color: #aeb6c0 !important;
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-swatch--metal.is-active,
.srb-builder button.srb-swatch--metal.is-active:hover,
.srb-builder .srb-swatch--metal.is-active,
.srb-builder .srb-swatch--metal.is-active:hover {
	background-color: #fff !important;
	border-color: var(--srb-ink) !important;
	color: var(--srb-ink) !important;
}

.srb-builder button.srb-swatch--metal.is-active .srb-swatch__name,
.srb-builder .srb-swatch--metal.is-active .srb-swatch__name {
	background: var(--srb-accent-soft) !important;
}

.srb-builder .srb-card .srb-btn:hover,
.srb-builder .srb-card .srb-btn:focus {
	background-color: #2c3138;
	border-color: #2c3138;
	color: var(--srb-white);
}

.srb-builder .srb-link:hover,
.srb-builder .srb-link:focus {
	color: var(--srb-ink);
}

/* Popular Settings cards — kill theme button pink / WC defaults */
.srb-builder button.srb-landing__card,
.srb-builder .srb-landing__grid button.srb-landing__card,
.srb-builder .srb-landing__card {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--srb-ink) !important;
	text-transform: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

.srb-builder button.srb-landing__card:hover,
.srb-builder button.srb-landing__card:focus,
.srb-builder button.srb-landing__card:focus-visible,
.srb-builder button.srb-landing__card:active,
.srb-builder .srb-landing__grid button.srb-landing__card:hover,
.srb-builder .srb-landing__grid button.srb-landing__card:focus,
.srb-builder .srb-landing__card:hover,
.srb-builder .srb-landing__card:focus,
.srb-builder .srb-landing__card:active {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--srb-ink) !important;
}

.srb-builder .srb-landing__card-body,
.srb-builder button.srb-landing__card .srb-landing__card-body {
	background: transparent !important;
	color: var(--srb-ink) !important;
}

.srb-builder .srb-landing__card-name,
.srb-builder button.srb-landing__card .srb-landing__card-name {
	color: var(--srb-ink) !important;
	font-family: var(--srb-display) !important;
	text-transform: none !important;
}

.srb-builder .srb-landing__card-price,
.srb-builder button.srb-landing__card .srb-landing__card-price {
	color: var(--srb-muted) !important;
	background: transparent !important;
}

/* —— Carat list (distinct from reference olive/circle rows) —— */
.srb-carat-list {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-top: 0.35rem;
}

.srb-carat-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	gap: 0.45rem;
	background: var(--srb-surface);
	border: 1px solid var(--srb-border);
	border-left: 3px solid transparent;
	transition: border-color 0.2s var(--srb-ease), background 0.2s var(--srb-ease);
}

.srb-carat-row.is-active {
	border-color: var(--srb-ink);
	border-left-color: var(--srb-accent);
	background: var(--srb-accent-soft);
}

.srb-carat-row__select {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	padding: 0.85rem 0.9rem;
	border: 0;
	background: transparent;
	color: var(--srb-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.srb-carat-row__mark {
	flex: 0 0 auto;
	min-width: 2.4rem;
	font-family: var(--srb-display);
	font-size: 1.35rem;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--srb-accent);
}

.srb-carat-row__copy {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.srb-carat-row__label {
	font-size: 0.92rem;
	font-weight: 500;
}

.srb-carat-row__chosen {
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--srb-accent);
}

.srb-carat-row__view {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	align-self: center;
	margin-right: 0.65rem;
	padding: 0.45rem 0.55rem;
	border: 0;
	border-bottom: 1px solid var(--srb-ink);
	background: transparent;
	color: var(--srb-ink);
	font: inherit;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
}

.srb-carat-row__view:hover {
	color: var(--srb-accent);
	border-bottom-color: var(--srb-accent);
}

.srb-carat-row__view-icon {
	display: inline-flex;
	opacity: 0.85;
}

/* —— Carat on-hand viewer (sheet, not split beige/olive modal) —— */
.srb-carat-viewer {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	background: rgba(12, 16, 22, 0.55);
	opacity: 0;
	transition: opacity 0.25s var(--srb-ease);
}

.srb-carat-viewer.is-open {
	opacity: 1;
}

.srb-carat-viewer__panel {
	width: min(420px, 100%);
	max-height: min(92vh, 760px);
	overflow: auto;
	background: #10141a;
	color: #f4f6f8;
	padding: 1rem 1rem 1.25rem;
	transform: translateY(18px);
	transition: transform 0.3s var(--srb-ease);
}

.srb-carat-viewer.is-open .srb-carat-viewer__panel {
	transform: translateY(0);
}

.srb-carat-viewer__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
}

.srb-carat-viewer__eyebrow {
	margin: 0 0 0.2rem;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9aa3ad;
}

.srb-carat-viewer__title {
	margin: 0;
	font-family: var(--srb-display);
	font-size: 1.45rem;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.srb-carat-viewer__close {
	appearance: none;
	width: 2rem;
	height: 2rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: #f4f6f8;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.srb-carat-viewer__stage {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #1a2028;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.srb-carat-viewer__hand {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 1;
	transition: opacity 0.28s var(--srb-ease);
}

.srb-carat-viewer__hand.is-swapping {
	opacity: 0.35;
}

.srb-carat-viewer__readout {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	margin: 0;
	padding: 0.3rem 0.55rem;
	background: rgba(16, 20, 26, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.srb-carat-viewer__hint {
	margin: 0.75rem 0 0.65rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: #9aa3ad;
}

.srb-carat-viewer__ticks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.4rem;
	margin-bottom: 0.9rem;
}

.srb-carat-viewer__tick {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	padding: 0.55rem 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: transparent;
	color: #f4f6f8;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.srb-carat-viewer__tick.is-active {
	border-color: #c8d0d8;
	background: rgba(255, 255, 255, 0.08);
}

.srb-carat-viewer__tick-mark {
	font-family: var(--srb-display);
	font-size: 1.05rem;
	line-height: 1;
}

.srb-carat-viewer__tick-label {
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	color: #9aa3ad;
}

.srb-carat-viewer__cta {
	appearance: none;
	width: 100%;
	padding: 0.9rem 1rem;
	border: 0;
	background: #f4f6f8;
	color: #10141a;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.srb-carat-viewer__cta:hover {
	background: #ffffff;
}

@media (min-width: 720px) {
	.srb-carat-viewer {
		align-items: center;
		padding: 1.5rem;
	}

	.srb-carat-viewer__panel {
		transform: translateY(10px) scale(0.98);
	}

	.srb-carat-viewer.is-open .srb-carat-viewer__panel {
		transform: none;
	}
}

.srb-carat-list--simple {
	gap: 0.45rem;
}

.srb-carat-row--simple {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--srb-border);
	border-left: 3px solid transparent;
	background: var(--srb-surface);
	color: var(--srb-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	appearance: none;
	transition: border-color 0.2s var(--srb-ease), background 0.2s var(--srb-ease);
}

.srb-carat-row--simple:hover {
	border-color: var(--srb-ink);
}

.srb-carat-row--simple.is-active {
	border-color: var(--srb-ink);
	border-left-color: var(--srb-accent);
	background: var(--srb-accent-soft);
}

.srb-preview__carat-badge[hidden] {
	display: none !important;
}

/* —— Responsive polish —— */
@media (max-width: 1023px) {
	.srb-builder__title {
		font-size: clamp(1.55rem, 6vw, 2.2rem);
	}

	.srb-preview__frame {
		aspect-ratio: 1;
		max-height: min(70vw, 360px);
		margin-inline: auto;
		width: 100%;
	}

	.srb-design-style__name {
		font-size: 0.88rem;
	}

	.srb-design-style__desc {
		font-size: 0.78rem;
	}

	.srb-pdp__title,
	.srb-options__legend {
		font-size: clamp(1.25rem, 5vw, 1.55rem);
	}

	.srb-shape-chip {
		min-width: 4.25rem;
		min-height: 4.25rem;
		font-size: 0.6rem;
	}

	.srb-metal-swatch {
		width: 2.35rem;
		height: 2.35rem;
	}
}

@media (max-width: 560px) {
	.srb-builder {
		padding-left: max(0.85rem, env(safe-area-inset-left));
		padding-right: max(0.85rem, env(safe-area-inset-right));
		padding-bottom: max(1rem, env(safe-area-inset-bottom));
	}

	.srb-builder--footer .srb-footer-bar {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.srb-option {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
	}

	.srb-option__media {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		max-width: none;
	}

	.srb-btn--next,
	.srb-btn--consult {
		min-width: 0;
	}

	.srb-design-sheet__preview img {
		max-width: 100%;
		height: auto;
	}
}