/**
 * MO Global — Shop by Goal.
 * Uses the theme's :root tokens; every class is prefixed .mo-sbg.
 */

.mo-sbg {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

/* Homepage embeds it inside .mo-section, which already sets padding-block —
   avoid stacking both. */
.mo-home-sbg .mo-sbg {
	padding-block: 0;
}

.mo-sbg__head {
	max-width: none;
}

/* ---------- layout ---------- */
.mo-sbg__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.mo-sbg__grid {
		/* form on the LEFT, heading + "what you'll get" on the RIGHT */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* Mobile stack order: heading → calculator → "what you'll get".
   display:contents dissolves the aside so its heading and teaser become direct
   grid items, letting the teaser drop BELOW the form while the section title
   stays on top. (order also overrides the later base sticky rule.) */
@media (max-width: 899.98px) {
	.mo-sbg__grid .mo-sbg__aside {
		display: contents;
	}
	.mo-sbg__grid .mo-sbg__head { order: 1; }
	.mo-sbg__grid .mo-sbg__main { order: 2; }
	.mo-sbg__grid .mo-sbg__teaser {
		order: 3;
		position: static; /* nothing sticks inside the stacked mobile flow */
	}
}

/* Left column: the calculator form and its output live in the same place. */
.mo-sbg__main {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 3vw, 2rem);
	min-width: 0;
}
/* Result card follows the form in the same column — no sticky here. */
.mo-sbg__main .mo-sbg__resultcard {
	position: static;
	top: auto;
}

/* Right column: heading + "what you'll get", constant beside the calculator. */
.mo-sbg__aside {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 3vw, 2rem);
	min-width: 0;
	position: sticky;
	top: calc(var(--header-h, 76px) + 1rem);
}
.mo-sbg__aside .mo-sbg__head {
	margin-bottom: 0;
}

/* ---------- form ---------- */
.mo-sbg__form {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	background: var(--paper-2);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.mo-sbg__field {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.mo-sbg__field legend,
.mo-sbg__label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--fg-muted);
	padding: 0;
}

.mo-sbg__row3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75rem;
}

@media (max-width: 420px) {
	.mo-sbg__row3 {
		grid-template-columns: 1fr;
	}
}

.mo-sbg__form input[type="number"],
.mo-sbg__form select {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--fg);
	background: var(--paper);
	border: 1.5px solid var(--border);
	border-radius: var(--r);
	padding: .8rem .9rem;
	min-height: 48px;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color var(--dur, .2s) var(--ease, ease), box-shadow var(--dur, .2s) var(--ease, ease);
}

.mo-sbg__form input[type="number"]::placeholder {
	color: var(--fg-dim);
}

.mo-sbg__form input[type="number"]:focus,
.mo-sbg__form select:focus,
.mo-sbg__form select:focus-visible {
	outline: none;
	border-color: var(--lime-600);
	box-shadow: 0 0 0 3px rgba(193, 251, 82, .45);
}

.mo-sbg__selectwrap {
	position: relative;
}

.mo-sbg__selectwrap i {
	position: absolute;
	right: .9rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--fg-muted);
	font-size: .95rem;
}

/* segmented radio chips (gender + goal) */
.mo-sbg__seg {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem;
}

.mo-sbg__seg--goal {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 480px) {
	.mo-sbg__seg--goal {
		grid-template-columns: 1fr;
	}
}

.mo-sbg__chip {
	position: relative;
	display: block;
	cursor: pointer;
}

.mo-sbg__chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.mo-sbg__chip span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	text-align: center;
	min-height: 48px;
	padding: .6rem .5rem;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1rem;
	color: var(--fg);
	background: var(--paper);
	border: 1.5px solid var(--border);
	border-radius: var(--r);
	transition: border-color var(--dur, .2s) var(--ease, ease),
		background var(--dur, .2s) var(--ease, ease),
		color var(--dur, .2s) var(--ease, ease);
}

.mo-sbg__chip span i {
	font-size: 1.05em;
	color: var(--lime-600);
}

.mo-sbg__chip:hover span {
	border-color: var(--fg-dim);
}

.mo-sbg__chip input:checked + span {
	background: var(--lime);
	border-color: var(--lime);
	color: var(--on-lime);
}

.mo-sbg__chip input:checked + span i {
	color: var(--on-lime);
}

.mo-sbg__chip input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(193, 251, 82, .55);
}

.mo-sbg__error {
	margin: 0;
	color: var(--sale, #FF3B30);
	font-size: .9rem;
	font-weight: 500;
}

.mo-sbg__submit {
	margin-top: .25rem;
}

/* ---------- results card ---------- */
.mo-sbg__results {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--dur-2, .4s) var(--ease, ease), transform var(--dur-2, .4s) var(--ease, ease);
}

.mo-sbg__results.is-in {
	opacity: 1;
	transform: none;
}

.mo-sbg__resultcard {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	position: sticky;
	top: 90px;
}

/* ---------- pre-submit teaser (fills the results column before the form is used) ---------- */
.mo-sbg__teaser {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	position: sticky;
	top: 90px;
}
/* On the dark homepage the ink card vanishes into the ink section — give it a
   raised surface so its padding reads as a card, not stray indentation. */
.mo-home-sbg .mo-sbg__teaser {
	background: rgba(244, 245, 239, .05);
	border: 1px solid rgba(244, 245, 239, .13);
}

.mo-sbg__teaser-eyebrow {
	margin: 0 0 1.1rem;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1.3rem;
	color: var(--on-ink, #F4F5EF);
}

.mo-sbg__teaser-list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.mo-sbg__teaser-list li {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-size: .98rem;
	line-height: 1.4;
	color: var(--on-ink, #F4F5EF);
}

.mo-sbg__teaser-list li i {
	flex: 0 0 auto;
	margin-top: .18rem;
	color: var(--lime);
	font-size: 1.05rem;
}

.mo-sbg__teaser-note {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--border-dark, #252D1D);
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--on-ink-muted, #A7AE99);
}

.mo-sbg__teaser-note i {
	color: var(--lime);
}

/* once real results are calculated, the teaser steps aside */
#mo-sbg-results.is-in ~ #mo-sbg-teaser {
	display: none;
}

.mo-sbg__metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.mo-sbg__metric {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: 1rem 1.1rem;
	background: rgba(244, 245, 239, .05);
	border: 1px solid var(--border-dark, #252D1D);
	border-radius: var(--r);
}

.mo-sbg__num {
	font-family: var(--font-impact, 'Anton');
	font-weight: 400;
	line-height: 1;
	font-size: clamp(2.4rem, 6vw, 3.4rem);
	color: var(--lime);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.mo-sbg__unit {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--on-ink-muted, #A7AE99);
}

.mo-sbg__plan {
	margin: 0 0 1.1rem;
	font-size: 1.02rem;
	line-height: 1.5;
	color: var(--on-ink, #F4F5EF);
}

.mo-sbg__breakdown {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.mo-sbg__breakdown li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .7rem;
	padding: .6rem 0;
	border-top: 1px solid var(--border-dark, #252D1D);
}

.mo-sbg__breakdown li i {
	color: var(--lime);
	font-size: 1rem;
}

.mo-sbg__bk-k {
	color: var(--on-ink-muted, #A7AE99);
	font-size: .92rem;
}

.mo-sbg__bk-v {
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--on-ink, #F4F5EF);
	font-variant-numeric: tabular-nums;
}

/* ---------- bundle ---------- */
.mo-sbg__bundle {
	margin-top: clamp(2rem, 5vw, 3.5rem);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--dur-2, .4s) var(--ease, ease), transform var(--dur-2, .4s) var(--ease, ease);
}

.mo-sbg__bundle.is-in {
	opacity: 1;
	transform: none;
}

.mo-sbg__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(.75rem, 2vw, 1.25rem);
}

@media (min-width: 700px) {
	.mo-sbg__cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mo-sbg__card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform var(--dur, .2s) var(--ease, ease), box-shadow var(--dur, .2s) var(--ease, ease);
}

.mo-sbg__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.mo-sbg__card-media {
	display: block;
	aspect-ratio: 1 / 1;
	background: #fff;
	border-bottom: 1px solid var(--border);
	overflow: hidden;
}

/* The women's edit carries the same faint wash here as it does in the shop
   grids, so a recommendation is recognisably the card the visitor saw there.
   Tokens live in style.css :root — custom properties are global. */
.mo-sbg__card--women {
	border-color: var(--women-line, #F2DFE7);
}

.mo-sbg__card--women .mo-sbg__card-media {
	background: var(--women-wash, #FDF6F9);
	border-bottom-color: var(--women-line, #F2DFE7);
}

.mo-sbg__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-2, .4s) var(--ease, ease);
}

.mo-sbg__card:hover .mo-sbg__card-media img {
	transform: scale(1.06);
}

.mo-sbg__card-body {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: .85rem .9rem 1rem;
}

.mo-sbg__card-cat {
	align-self: flex-start;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .62rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--on-lime);
	background: var(--lime);
	border-radius: var(--r-pill);
	padding: .2rem .6rem;
}

.mo-sbg__card-name {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.25;
	color: var(--fg);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mo-sbg__card-name:hover {
	color: var(--lime-600);
}

.mo-sbg__card .mo-price {
	margin-top: auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mo-sbg__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 1.5rem;
	text-align: center;
	color: var(--fg-muted);
	background: var(--paper-2);
	border: 1px dashed var(--border);
	border-radius: var(--r);
}

/* ---------- checkout row ---------- */
.mo-sbg__checkout {
	margin-top: clamp(1.25rem, 3vw, 2rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	background: var(--ink);
	border-radius: var(--r-lg);
}

.mo-sbg__totals {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.mo-sbg__totlabel {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--on-ink-muted, #A7AE99);
}

.mo-sbg__tot {
	font-family: var(--font-impact, 'Anton');
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1;
	color: var(--lime);
	font-variant-numeric: tabular-nums;
}

.mo-sbg__ship {
	font-size: .82rem;
	color: var(--on-ink-muted, #A7AE99);
}

.mo-sbg__ship.is-free {
	color: var(--lime);
	font-weight: 600;
}

.mo-sbg__addall {
	flex: 0 0 auto;
}

.mo-sbg__addall.is-added {
	background: var(--success, #27B24B);
	border-color: var(--success, #27B24B);
	color: #fff;
}

.mo-sbg__addall:disabled {
	cursor: default;
}

@media (max-width: 560px) {
	.mo-sbg__checkout {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.mo-sbg__totals {
		align-items: center;
	}
	.mo-sbg__addall {
		width: 100%;
	}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.mo-sbg__results,
	.mo-sbg__bundle {
		transition: none;
	}
	.mo-sbg__card,
	.mo-sbg__card-media img {
		transition: none;
	}
}