/**
 * MoonRock Order Tracking
 *
 * The approved design: Cormorant Garamond headings, Montserrat detail, the
 * house palette. Every value is a custom property or a plain declaration so
 * Elementor can override any of it.
 */

.mrot {
	--mrot-ink: #3A2A21;
	--mrot-ink-deep: #241A15;
	--mrot-accent: #C9A96A;
	--mrot-body: #6B5648;
	--mrot-body-strong: #4A382E;
	--mrot-muted: #8A7565;
	--mrot-label: #A08D7D;
	--mrot-bg: #F6F2EA;
	--mrot-bg-alt: #EFE8DC;
	--mrot-line: #E0D6C6;
	--mrot-line-soft: #E7DED0;
	--mrot-line-strong: #D8CDBC;
	--mrot-error: #A6503C;
	--mrot-serif: "Cormorant Garamond", Georgia, serif;
	--mrot-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

	font-family: var(--mrot-sans);
	color: var(--mrot-ink);
	scroll-margin-top: 120px;
}

.mrot * {
	box-sizing: border-box;
}

/* ---------- shared type ---------- */

.mrot-eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--mrot-label);
}

.mrot-label {
	display: block;
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mrot-muted);
}

/* ---------- page head ---------- */

.mrot-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: clamp(30px, 4vh, 46px);
}

.mrot-head__title {
	margin: 0;
	font-family: var(--mrot-serif);
	font-size: clamp(34px, 5.2vw, 68px);
	font-weight: 300;
	line-height: 1.02;
	color: var(--mrot-ink-deep);
}

.mrot-head__intro {
	margin: 0;
	max-width: 34em;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.9;
	color: var(--mrot-body);
	text-wrap: pretty;
}

/* ---------- buttons ---------- */

.mrot-btn.mrot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 44px;
	padding: 19px 36px;
	border-radius: 0;
	border: 0;
	background-image: none;
	box-shadow: none;
	font-family: var(--mrot-sans);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.24em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.mrot-btn--primary.mrot-btn--primary {
	background: var(--mrot-ink);
	color: var(--mrot-bg);
}

.mrot-btn--primary.mrot-btn--primary:hover,
.mrot-btn--primary.mrot-btn--primary:focus {
	background: var(--mrot-ink-deep);
	color: var(--mrot-bg);
}

.mrot-btn--outline.mrot-btn--outline {
	background: transparent;
	color: var(--mrot-ink);
	border: 1px solid var(--mrot-line-strong);
}

.mrot-btn--outline.mrot-btn--outline:hover,
.mrot-btn--outline.mrot-btn--outline:focus {
	border-color: var(--mrot-accent);
}

.mrot-btn--text.mrot-btn--text {
	padding: 4px 0;
	min-height: 36px;
	background: none;
	color: var(--mrot-muted);
	border-bottom: 1px solid #C9BBA8;
	font-size: 10px;
	letter-spacing: 0.2em;
}

.mrot-btn--text.mrot-btn--text:hover,
.mrot-btn--text.mrot-btn--text:focus {
	color: var(--mrot-ink);
	border-bottom-color: var(--mrot-accent);
}

.mrot-btn:focus-visible {
	outline: 1px solid var(--mrot-accent);
	outline-offset: 2px;
}

/* ---------- lookup ---------- */

.mrot-lookup {
	display: grid;
	gap: clamp(34px, 5vw, 80px);
	align-items: center;
	padding-bottom: clamp(50px, 8vh, 110px);
}

.mrot-lookup--split {
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.mrot-lookup__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mrot-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 30em;
}

.mrot-form__title {
	margin: 0;
	font-family: var(--mrot-serif);
	font-size: clamp(26px, 3.4vw, 44px);
	font-weight: 300;
	line-height: 1.12;
	color: var(--mrot-ink-deep);
}

.mrot-form__intro,
.mrot-form__help {
	margin: 0;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--mrot-body);
	text-wrap: pretty;
}

.mrot-form__help {
	font-size: 12px;
	color: var(--mrot-muted);
}

.mrot-form__help a {
	color: inherit;
	border-bottom: 1px solid #C9BBA8;
	text-decoration: none;
}

.mrot-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mrot-input.mrot-input {
	width: 100%;
	min-height: 44px;
	padding: 11px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--mrot-line-strong);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--mrot-sans);
	font-size: 14px;
	font-weight: 300;
	color: var(--mrot-ink-deep);
}

.mrot-input.mrot-input:focus {
	outline: none;
	border-bottom-color: var(--mrot-accent);
}

.mrot-error {
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--mrot-error);
}

.mrot-form .mrot-btn {
	align-self: flex-start;
	margin-top: 6px;
}

/* ---------- summary strip ---------- */

.mrot-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	gap: clamp(18px, 3vw, 40px);
	padding: clamp(22px, 3vh, 32px) 0;
	border-top: 1px solid var(--mrot-line);
	border-bottom: 1px solid var(--mrot-line);
}

.mrot-summary__item {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.mrot-summary__value {
	font-size: 14px;
	font-weight: 300;
	color: var(--mrot-ink);
}

.mrot-summary__ref {
	letter-spacing: 0.08em;
	font-weight: 400;
}

/* ---------- progress ---------- */

.mrot-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(34px, 5vw, 80px);
	align-items: start;
	padding: clamp(34px, 5vh, 60px) 0 clamp(40px, 6vh, 70px);
}

.mrot-progress {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.mrot-progress__title {
	margin: 0;
	font-family: var(--mrot-serif);
	font-size: clamp(26px, 3.4vw, 44px);
	font-weight: 300;
	line-height: 1.12;
	color: var(--mrot-ink-deep);
}

.mrot-bar {
	height: 2px;
	width: 100%;
	max-width: 34em;
	background: var(--mrot-line-soft);
}

.mrot-bar__fill {
	display: block;
	height: 100%;
	background: var(--mrot-accent);
}

/* ---------- the stage list ---------- */

.mrot-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.mrot-step {
	position: relative;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 14px;
	padding-bottom: 26px;
}

/* the connecting line */
.mrot-step::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 22px;
	bottom: -4px;
	width: 1px;
	background: var(--mrot-line);
}

.mrot-step.is-done::before {
	background: var(--mrot-accent);
}

.mrot-step:last-child::before {
	display: none;
}

.mrot-step__marker {
	width: 11px;
	height: 11px;
	margin: 6px 0 0 5px;
	border-radius: 50%;
	background: var(--mrot-bg);
	border: 1px solid #C9BBA8;
}

.mrot-step.is-done .mrot-step__marker {
	background: var(--mrot-ink);
	border-color: var(--mrot-ink);
}

.mrot-step.is-now .mrot-step__marker {
	width: 15px;
	height: 15px;
	margin: 4px 0 0 3px;
	background: var(--mrot-accent);
	border-color: var(--mrot-accent);
	box-shadow: 0 0 0 5px rgba(201, 169, 106, 0.22);
}

.mrot-step__text {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.mrot-step__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
}

.mrot-step__label {
	font-size: 13.5px;
	color: var(--mrot-label);
}

.mrot-step.is-done .mrot-step__label {
	color: var(--mrot-ink);
}

.mrot-step.is-now .mrot-step__label {
	color: var(--mrot-ink-deep);
	font-weight: 500;
}

.mrot-step__when {
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mrot-label);
}

.mrot-step.is-now .mrot-step__when {
	color: var(--mrot-accent);
}

.mrot-step__note {
	margin: 0;
	max-width: 34em;
	font-size: 12.5px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--mrot-muted);
	text-wrap: pretty;
}

.mrot-step.is-now .mrot-step__note {
	color: var(--mrot-body-strong);
}

/* ---------- the piece ---------- */

.mrot-pieces {
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: var(--mrot-bg-alt);
	padding: clamp(22px, 3vw, 34px);
}

.mrot-piece {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mrot-piece__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: #E5DCCD;
}

.mrot-piece__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease;
}

.mrot-piece__media:hover img {
	transform: scale(1.04);
}

.mrot-piece__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mrot-piece__collection {
	font-size: 9.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mrot-label);
}

.mrot-piece__name.mrot-piece__name {
	margin: 0;
	font-family: var(--mrot-serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.16;
}

.mrot-piece__name a {
	color: var(--mrot-ink-deep);
	text-decoration: none;
}

.mrot-piece__ref {
	font-size: 10.5px;
	letter-spacing: 0.12em;
	color: var(--mrot-label);
}

/* ---------- closing band ---------- */

.mrot-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
	background: var(--mrot-bg-alt);
	padding: clamp(50px, 9vh, 110px) clamp(20px, 4vw, 56px);
}

.mrot-cta__title {
	margin: 0;
	font-family: var(--mrot-serif);
	font-size: clamp(26px, 3.6vw, 46px);
	font-weight: 300;
	line-height: 1.12;
	color: var(--mrot-ink-deep);
}

.mrot-cta__body {
	margin: 0;
	max-width: 32em;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.9;
	color: var(--mrot-body);
	text-wrap: pretty;
}

.mrot-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 6px;
}

@media (max-width: 600px) {
	.mrot-summary {
		gap: 20px;
	}

	.mrot-btn.mrot-btn {
		padding: 17px 28px;
	}
}