/* Custom Measurements — separate, mobile-first tailoring workflow. */

.lk-custom-measurements {
	width: min(100%, 42rem);
	margin-inline: auto;
	padding: clamp(1rem, 4vw, 2rem) 0 calc(2rem + env(safe-area-inset-bottom));
}

.lk-custom-measurements__app { min-width: 0; }

.lk-custom-measurements__screen,
.lk-custom-measurements__introduction,
.lk-custom-measurements__processing,
.lk-custom-measurements__confirmation,
.lk-custom-measurements__error-state {
	display: grid;
	gap: var(--lk-space-l);
	min-width: 0;
	padding: var(--lk-space-l) 0;
}

.lk-custom-measurements__introduction,
.lk-custom-measurements__processing,
.lk-custom-measurements__confirmation,
.lk-custom-measurements__error-state {
	min-height: min(35rem, 72vh);
	align-content: center;
}

.lk-custom-measurements__eyebrow {
	margin: 0;
	color: var(--lk-color-mulberry);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.lk-custom-measurements__title {
	max-width: 17ch;
	margin: 0;
	font-family: var(--lk-font-serif);
	font-size: clamp(2rem, 9vw, 3.25rem);
	font-weight: 400;
	line-height: 0.98;
}

.lk-custom-measurements__lead,
.lk-custom-measurements__privacy,
.lk-custom-measurements__disclaimer,
.lk-custom-measurements__product-context,
.lk-custom-measurements__processing > p:not(.lk-custom-measurements__eyebrow),
.lk-custom-measurements__error-state > p:not(.lk-custom-measurements__eyebrow) {
	max-width: 44ch;
	margin: 0;
	font-size: 0.9375rem;
}

.lk-custom-measurements__privacy,
.lk-custom-measurements__disclaimer {
	border-left: 2px solid var(--lk-color-mulberry);
	padding-left: var(--lk-space-s);
	color: var(--lk-color-stone);
	font-size: 0.8125rem;
}

.lk-custom-measurements__product-context {
	border-bottom: var(--lk-border);
	padding-bottom: var(--lk-space-s);
	font-size: 0.8125rem;
}

.lk-custom-measurements__product-context--error { color: #9a3024; }

.lk-custom-measurements__progress { display: grid; gap: var(--lk-space-xs); }

.lk-custom-measurements__progress-copy {
	color: var(--lk-color-stone);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lk-custom-measurements__progress-track {
	height: 0.25rem;
	overflow: hidden;
	background: var(--lk-color-sand);
}

.lk-custom-measurements__progress-track span {
	display: block;
	height: 100%;
	background: var(--lk-color-mulberry);
	transition: width 180ms ease;
}

.lk-custom-measurements__guidance-list {
	display: grid;
	gap: var(--lk-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.lk-custom-measurements__guidance-list li { position: relative; padding-left: 1.3rem; }
.lk-custom-measurements__guidance-list li::before { position: absolute; left: 0; color: var(--lk-color-mulberry); content: "—"; }

.lk-custom-measurements__measurement-heading {
	display: flex;
	gap: var(--lk-space-s);
	align-items: flex-start;
	justify-content: space-between;
}

.lk-custom-measurements__measurement-heading .lk-custom-measurements__title { min-width: 0; }

.lk-custom-measurements__placeholder {
	display: grid;
	min-height: 10rem;
	place-items: center;
	border: var(--lk-border);
	background: var(--lk-color-white);
	color: var(--lk-color-stone);
	font-size: 0.75rem;
	text-align: center;
}

.lk-custom-measurements__placeholder span {
	position: relative;
	width: 4.75rem;
	height: 6rem;
	border: 1px solid color-mix(in srgb, var(--lk-color-mulberry) 58%, transparent);
	border-radius: 50% 50% 42% 42%;
}

.lk-custom-measurements__placeholder span::after {
	position: absolute;
	top: 50%;
	left: -0.75rem;
	width: 6.25rem;
	border-top: 1px solid var(--lk-color-mulberry);
	content: "";
}

.lk-custom-measurements__placeholder p { margin: 0; }

.lk-custom-measurements__screen > img {
	width: 100%;
	max-height: 18rem;
	object-fit: cover;
}

.lk-custom-measurements__units {
	display: inline-flex;
	justify-self: start;
	border: var(--lk-border);
	background: var(--lk-color-white);
}

.lk-custom-measurements__unit {
	min-height: 2.5rem;
	border: 0;
	border-right: var(--lk-border);
	padding: 0.5rem var(--lk-space-m);
	background: transparent;
	color: var(--lk-color-ink);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	text-transform: none;
}

.lk-custom-measurements__unit:last-child { border-right: 0; }
.lk-custom-measurements__unit:hover,
.lk-custom-measurements__unit:active { background: var(--lk-color-sand); transform: none; }
.lk-custom-measurements__unit.is-selected { background: var(--lk-color-ink); color: var(--lk-color-white); }

.lk-custom-measurements__field { display: grid; gap: var(--lk-space-xs); }
.lk-custom-measurements__field > label,
.lk-custom-measurements__field-label { margin: 0; font-size: 0.875rem; font-weight: 700; }

.lk-custom-measurements__number {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	border: var(--lk-border);
	background: var(--lk-color-white);
}

.lk-custom-measurements__number:focus-within { box-shadow: var(--lk-focus-ring); }
.lk-custom-measurements__number input { min-width: 0; border: 0; box-shadow: none !important; font-size: 1.125rem; }

.lk-custom-measurements__number span {
	display: flex;
	align-items: center;
	padding: var(--lk-space-s) var(--lk-space-m);
	border-left: var(--lk-border);
	color: var(--lk-color-stone);
	font-size: 0.8125rem;
}

.lk-custom-measurements__field.has-error .lk-custom-measurements__number { border-color: #9a3024; }

.lk-custom-measurements__error {
	margin: 0;
	color: #9a3024;
	font-size: 0.8125rem;
	font-weight: 600;
}

.lk-custom-measurements__not-applicable {
	display: grid;
	gap: 0.25rem;
	border-left: 2px solid var(--lk-color-stone);
	padding: var(--lk-space-m);
	background: var(--lk-color-white);
	font-size: 0.875rem;
}

.lk-custom-measurements__not-applicable span { color: var(--lk-color-stone); font-size: 0.8125rem; }

.lk-custom-measurements__text-action,
.lk-custom-measurements__restart,
.lk-custom-measurements__edit {
	justify-self: start;
	min-height: auto;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--lk-color-mulberry);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-transform: none;
}

.lk-custom-measurements__text-action:hover,
.lk-custom-measurements__restart:hover,
.lk-custom-measurements__edit:hover,
.lk-custom-measurements__text-action:active,
.lk-custom-measurements__restart:active,
.lk-custom-measurements__edit:active { background: transparent; color: var(--lk-color-ink); transform: none; }

.lk-custom-measurements__how {
	border-top: var(--lk-border);
	padding-top: var(--lk-space-m);
	color: var(--lk-color-stone);
	font-size: 0.8125rem;
}

.lk-custom-measurements__how summary { color: var(--lk-color-ink); font-weight: 700; cursor: pointer; }
.lk-custom-measurements__how p { max-width: 50ch; margin-bottom: 0; }

.lk-custom-measurements__actions {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: var(--lk-space-s);
	align-items: center;
	margin-top: var(--lk-space-s);
}

.lk-custom-measurements__actions .lk-button { width: 100%; min-width: 0; }
.lk-custom-measurements__actions .lk-button--ghost { justify-content: flex-start; }

.lk-custom-measurements__review {
	display: grid;
	margin: 0;
	border-top: var(--lk-border);
	padding: 0;
	list-style: none;
}

.lk-custom-measurements__review li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--lk-space-s);
	align-items: center;
	border-bottom: var(--lk-border);
	padding: var(--lk-space-m) 0;
}

.lk-custom-measurements__review span { display: grid; gap: 0.15rem; min-width: 0; }
.lk-custom-measurements__review strong { font-size: 0.8125rem; }
.lk-custom-measurements__review small { color: var(--lk-color-stone); font-size: 0.8125rem; }

.lk-custom-measurements__spinner {
	width: 2.25rem;
	height: 2.25rem;
	border: 2px solid var(--lk-color-sand);
	border-top-color: var(--lk-color-mulberry);
	border-radius: 50%;
	animation: lk-custom-measurements-spin 0.8s linear infinite;
}

.lk-custom-measurements__result-actions { display: grid; gap: var(--lk-space-s); margin-top: var(--lk-space-s); }
.lk-custom-measurements__result-actions .lk-button--wide,
.lk-custom-measurements__introduction .lk-button--wide { width: 100%; }
.lk-custom-measurements__utility { display: flex; flex-wrap: wrap; gap: var(--lk-space-m); align-items: center; }
.lk-custom-measurements__error-state { border-left: 3px solid #9a3024; padding-left: var(--lk-space-l); }

@keyframes lk-custom-measurements-spin { to { transform: rotate(360deg); } }

@media (min-width: 48rem) {
	.lk-custom-measurements { padding-top: var(--lk-space-2xl); }
	.lk-custom-measurements__screen,
	.lk-custom-measurements__introduction,
	.lk-custom-measurements__processing,
	.lk-custom-measurements__confirmation,
	.lk-custom-measurements__error-state { padding-inline: var(--lk-space-xl); }
	.lk-custom-measurements__actions { max-width: 28rem; }
}

@media (prefers-reduced-motion: reduce) {
	.lk-custom-measurements__progress-track span,
	.lk-custom-measurements__spinner { animation: none; transition: none; }
}