/**
 * MeasureMade configurator — PatternMade-look cards.
 *
 * The configurator renders as four numbered white cards on the
 * #f5f5f7 ground the theme's PatternMade product template provides
 * (the look is defined in PRODUCT-PAGE-LOOK.md): 1 Your dog —
 * saved-dog picker, the PatternMade measuring button, unit toggle,
 * five measurements; 2 Colours — the live layered preview at card
 * size + the Neck/Body swatch groups; 3 Warmth & materials —
 * build / fabrics / closure / extras; 4 Total — the itemised live
 * price (the theme turns this card into the sticky bottom buy bar
 * at mobile widths). Tokens mirror the PatternMade app: system
 * font stack, #1d1d1f ink, #f5f5f7 surfaces, deep-rose actions;
 * Steppets brand pink (--measuremade-primary) carries brand and
 * selection moments (step discs, swatch rings, the measure
 * button). All class names are the configurator's long-standing
 * contract — the script toggles .mm-invalid / .is-selected /
 * .mm-price-flash and reads structure, never styles.
 */
.mm-configurator {
	--mm-primary: var(--measuremade-primary, #bb5c80);
	--mm-accent: var(--measuremade-action, #9c3d63);
	--mm-accent-dark: var(--measuremade-action-dark, #883556);
	--mm-text: var(--measuremade-text, #1d1d1f);
	--mm-grey: #6e6e73;
	--mm-border: var(--measuremade-border, #d2d2d7);
	--mm-surface: var(--measuremade-surface, #f5f5f7);
	--mm-track: #e8e8ed;
	--mm-card-shadow: 0 2px 20px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .02);
	display: grid;
	gap: 20px;
	margin: 0;
	color: var(--mm-text);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.mm-configurator *,
.mm-configurator *::before,
.mm-configurator *::after {
	box-sizing: border-box;
}

/* ---- Cards ------------------------------------------------- */
.mm-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: var(--mm-card-shadow);
	padding: 26px 28px;
	display: grid;
	gap: 18px;
	align-content: start;
}

.mm-card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
}

.mm-card-num {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mm-primary);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 700;
}

/* ---- Lane selector (lead-in card): the three ways to buy ----- */
.mm-lanes {
	border: 0;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}

.mm-lane-legend {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
	padding: 0;
	margin-bottom: 2px;
}

.mm-lane-options {
	display: grid;
	gap: 10px;
}

.mm-lane-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--mm-surface);
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 14px 16px;
	cursor: pointer;
}

.mm-lane-option input {
	margin: 3px 0 0;
	accent-color: var(--mm-primary);
	flex: none;
}

.mm-lane-option.is-selected {
	border-color: var(--mm-primary);
	background: #fff;
	box-shadow: 0 0 0 1px var(--mm-primary);
}

.mm-lane-option:has(input:focus-visible) {
	outline: 2px solid var(--mm-accent);
	outline-offset: 2px;
}

.mm-lane-text {
	display: grid;
	gap: 2px;
}

.mm-lane-name {
	font-weight: 600;
	font-size: 16px;
}

/* Per-lane "from" price beside the lane title (fix round 18):
 * quiet secondary text — the live total in the Total card is
 * the number that moves; this one never does. */
.mm-lane-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.mm-lane-from {
	color: var(--mm-grey);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.mm-lane-desc {
	color: var(--mm-grey);
	font-size: 14px;
	line-height: 1.45;
}

/* ---- Card 2 in the pattern-only lane: present but out of play - */
.mm-colours-skip-note {
	margin: 0;
	color: var(--mm-grey);
	font-size: 14px;
}

.mm-card-colours.is-disabled {
	background: #fbfbfd;
}

.mm-card-colours.is-disabled .mm-preview,
.mm-card-colours.is-disabled .mm-swatches {
	opacity: .45;
	filter: grayscale(.5);
}

/* ---- Card 1: saved dogs ------------------------------------ */
.mm-dog-picker {
	display: grid;
	gap: 8px;
}

.mm-dog-picker-label {
	font-weight: 600;
	font-size: 15px;
}

.mm-dog-picker-select {
	width: 100%;
	background: var(--mm-surface);
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 13px 14px;
	font: inherit;
	font-size: 16px;
	color: inherit;
}

/* The profile photo slot beside the select (round 66): the
 * script swaps its content as dogs are picked. The base
 * .mm-dog-photo rule lives in launch.css (the account surface
 * shares it); here only the slot layout + picker size. */
.mm-dog-picker-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mm-dog-picker-row .mm-dog-picker-select {
	flex: 1;
	width: auto;
	min-width: 0;
}

.mm-dog-picker-photo {
	display: inline-flex;
	flex: none;
}

.mm-dog-picker-photo .mm-dog-photo {
	width: 44px;
	height: 44px;
	font-size: 17px;
}

/* ---- Card 1: PatternMade measuring entry -------------------- */
.mm-patternmade-entry {
	display: grid;
	gap: 10px;
}

.mm-patternmade-open {
	width: 100%;
	min-height: 52px;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--mm-primary);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.mm-patternmade-open:hover {
	background: #a34c6d;
}

.mm-patternmade-open:focus-visible {
	background: #a34c6d;
	outline: 2px solid var(--mm-accent);
	outline-offset: 2px;
}

.mm-patternmade-entry-note {
	margin: 0;
	color: var(--mm-grey);
	font-size: 14px;
}

/* ---- Card 1: unit toggle (segmented chips) ------------------ */
.mm-unit {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.mm-unit legend {
	padding: 0;
	margin: 0 6px 0 0;
	font-weight: 600;
	font-size: 15px;
}

.mm-unit label {
	position: relative;
	display: inline-flex;
	align-items: center;
	background: var(--mm-track);
	color: var(--mm-grey);
	border-radius: 999px;
	padding: 9px 20px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

.mm-unit input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.mm-unit label:has(input:checked) {
	background: var(--mm-text);
	color: #fff;
}

.mm-unit label:has(input:focus-visible) {
	outline: 2px solid var(--mm-accent);
	outline-offset: 2px;
}

/* ---- Card 1: measurements ----------------------------------- */
.mm-measures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}

.mm-measure {
	display: grid;
	gap: 6px;
	font-size: 15px;
}

.mm-measure-label {
	font-weight: 600;
}

.mm-unit-suffix {
	color: var(--mm-grey);
	font-weight: 500;
}

.mm-measure input {
	width: 100%;
	background: var(--mm-surface);
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 12px 14px;
	font: inherit;
	font-size: 16px;
	color: inherit;
}

.mm-measure input:focus {
	background: #fff;
	outline: 2px solid var(--mm-accent);
	outline-offset: 0;
}

.mm-measure input.mm-invalid {
	border-color: #b3261e;
	background: #fff1f0;
}

.mm-measure-error {
	color: #b3261e;
	font-size: 13px;
}

/* ---- Card 2: live preview ----------------------------------- */
.mm-preview {
	position: relative;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	background: var(--mm-surface);
	border-radius: 16px;
	overflow: hidden;
}

.mm-preview img {
	display: block;
	width: 100%;
	height: auto;
}

.mm-preview-layer {
	position: absolute;
	inset: 0;
}

/* ---- Card 2: swatches --------------------------------------- */
.mm-swatches {
	border: 0;
	padding: 0;
	margin: 0;
}

.mm-swatches legend {
	padding: 0;
	margin-bottom: 10px;
	font-weight: 600;
	font-size: 15px;
}

.mm-swatch-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mm-swatch {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 76px;
	padding: 10px 4px 8px;
	border: 2px solid transparent;
	border-radius: 14px;
	cursor: pointer;
	text-align: center;
}

.mm-swatch input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.mm-swatch img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--mm-border);
}

.mm-swatch-fallback {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mm-track);
	border: 1px solid var(--mm-border);
}

/* Component colour tiles (fix round 25): no fabric photos exist
 * for component terms, so the tile is the term's tint itself —
 * same 40px circle slot as the Griffin's swatch photos, with the
 * background colour set inline from the term data. */
.mm-swatch-chip {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--mm-border);
}

/* The component Colours card's preview keeps the component media
 * rhythm (the render at card size above its swatches). */
.mm-card-colours-component .mm-component-media {
	margin-bottom: 14px;
}

.mm-swatch:hover {
	background: var(--mm-surface);
}

.mm-swatch.is-selected {
	border-color: var(--mm-primary);
	background: var(--mm-surface);
}

.mm-swatch:has(input:focus-visible) {
	outline: 2px solid var(--mm-accent);
	outline-offset: 2px;
}

.mm-swatch-name {
	font-size: 12px;
	line-height: 1.25;
}

/* ---- Card 3: build / fabrics / closure / extras -------------- */
.mm-options {
	display: grid;
	gap: 14px;
}

.mm-options label {
	display: grid;
	gap: 6px;
	font-weight: 600;
	font-size: 15px;
}

.mm-options select {
	width: 100%;
	background: var(--mm-surface);
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 13px 14px;
	font: inherit;
	font-weight: 400;
	font-size: 16px;
	color: inherit;
}

.mm-extras {
	border: 0;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
}

.mm-extras legend {
	padding: 0;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 15px;
}

.mm-extras label {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--mm-surface);
	border-radius: 12px;
	padding: 12px 14px;
	font-weight: 500;
	cursor: pointer;
}

.mm-extras input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--mm-accent);
}

/* ---- Card 4: itemised price ---------------------------------- */
.mm-price {
	display: grid;
	gap: 2px;
}

.mm-price-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mm-price-rows li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 9px 0;
	border-bottom: 1px solid #f0f0f2;
	font-size: 15px;
}

.mm-price-rows li:last-child {
	border-bottom: 0;
}

.mm-price-floor-note {
	color: var(--mm-grey);
	font-size: .9em;
}

.mm-price-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 10px 0 0;
	padding: 14px 16px;
	background: var(--mm-text);
	color: #fff;
	border-radius: 14px;
	font-size: 16px;
}

.mm-price-total strong {
	font-size: 22px;
}

.mm-price-currency {
	opacity: .65;
	font-size: 13px;
	font-weight: 500;
}

.mm-price-hint {
	margin: 8px 0 0;
	color: var(--mm-grey);
	font-size: 14px;
}

/* Add-to-cart gating: the configurator script disables the
 * WooCommerce button (same form) until the configuration prices. */
.single_add_to_cart_button.mm-disabled {
	opacity: .55;
}

/* One-shot ring on the price block when measurements land from
 * the PatternMade overlay or the saved-dog picker — the script
 * adds .mm-price-flash and removes it after 1800ms. */
@keyframes mm-price-flash-ring {
	0% { box-shadow: 0 0 0 0 rgba(187, 92, 128, 0); }
	25% { box-shadow: 0 0 0 3px rgba(187, 92, 128, .75); }
	100% { box-shadow: 0 0 0 3px rgba(187, 92, 128, 0); }
}

.mm-price.mm-price-flash {
	border-radius: 14px;
	animation: mm-price-flash-ring 1.8s ease-out;
}

/* ---- Component products (fix round 16) -----------------------
 * Card 2 of a component page: the product's own image at card
 * size and its layer note; the snood's variant choice reuses the
 * lane-option treatment (same tokens, own class names so the
 * Griffin's contract classes stay untouched). */
.mm-component-media {
	max-width: 420px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--mm-surface);
}

.mm-component-media img {
	display: block;
	width: 100%;
	height: auto;
}

.mm-component-note {
	margin: 0;
	color: var(--mm-grey);
	font-size: 15px;
	line-height: 1.55;
}

/* The component's "from" price in its product card (fix
 * round 18) — same quiet treatment as the lane rows. */
.mm-component-from {
	margin: 0;
	color: var(--mm-grey);
	font-size: 15px;
	font-weight: 500;
}

.mm-variants {
	border: 0;
	margin: 0;
	padding: 0;
}

.mm-variant-legend {
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 10px;
}

.mm-variant-options {
	display: grid;
	gap: 10px;
}

.mm-variant-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--mm-surface);
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 14px 16px;
	cursor: pointer;
}

.mm-variant-option input {
	margin: 3px 0 0;
	accent-color: var(--mm-primary);
	flex: none;
}

.mm-variant-option.is-selected {
	border-color: var(--mm-primary);
	background: #fff;
	box-shadow: 0 0 0 1px var(--mm-primary);
}

.mm-variant-option:has(input:focus-visible) {
	outline: 2px solid var(--mm-accent);
	outline-offset: 2px;
}

.mm-variant-text {
	display: grid;
	gap: 2px;
}

.mm-variant-name {
	font-weight: 600;
	font-size: 16px;
}

/* Per-variant "from" price beside the variant name (fix
 * round 18) — mirrors .mm-lane-head / .mm-lane-from. */
.mm-variant-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.mm-variant-from {
	color: var(--mm-grey);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.mm-variant-desc {
	color: var(--mm-grey);
	font-size: 14px;
	line-height: 1.45;
}

/* ---- Family cross-sell (fix round 16) -------------------------
 * Printed after the add-to-cart form (outside .mm-configurator),
 * so it carries its own card chrome on the configurator tokens. */
.mm-card-family {
	--mm-primary: var(--measuremade-primary, #bb5c80);
	--mm-text: var(--measuremade-text, #1d1d1f);
	--mm-grey: #6e6e73;
	--mm-surface: var(--measuremade-surface, #f5f5f7);
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .02);
	padding: 26px 28px;
	margin-top: 20px;
	display: grid;
	gap: 14px;
	align-content: start;
	color: var(--mm-text);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
}

.mm-family-note {
	margin: 0;
	color: var(--mm-grey);
	font-size: 15px;
	line-height: 1.55;
}

.mm-family-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}

.mm-family-item {
	display: grid;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	background: var(--mm-surface);
	border-radius: 14px;
	padding: 12px;
}

.mm-family-item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.mm-family-name {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
}

.mm-family-price {
	color: var(--mm-grey);
	font-size: 14px;
}

/* ---- Small screens ------------------------------------------- */
@media (max-width: 560px) {
	.mm-card {
		padding: 20px 18px;
		border-radius: 18px;
	}

	.mm-card-title {
		font-size: 19px;
	}

	.mm-preview {
		max-width: none;
	}
}