/* ALOFTAURA — PERSONALIZE MY AURA.
 *
 * Same language as the home section it opens from: black ground, warm off-white
 * ink, hairlines instead of boxes, letterspaced caps, rules instead of numbers.
 * Namespaced under .aura-fit and sharing no class name with the theme, whose
 * custom.css carries !important rules on generic selectors.
 *
 * Mobile first in the literal sense: the phone layout is the base and the desk
 * layout is the media query, because on this store the phone is the shop.
 *
 * ── THE FOUR TONES, AND WHAT EACH ONE MEANS ───────────────────────────────────
 * There are exactly four and they are never used decoratively:
 *
 *   white       a question. Only ever a question — it is the brightest thing on
 *               the screen and it should be the thing you read first.
 *   ink         an answer, or prose you are meant to read.
 *   dim         a label, a hint, or something already understood.
 *   champagne   yours. A choice you made, a value you set, an action to take.
 *
 * A fifth tone, or champagne used anywhere it does not mean "this is yours",
 * is the point at which a black-and-gold panel stops reading as luxury and
 * starts reading as a sale banner.
 */

.aura-fit {
	--af-ink: #f2efe9;
	--af-white: #fff;
	--af-dim: rgba(242, 239, 233, 0.46);
	--af-faint: rgba(242, 239, 233, 0.14);
	--af-hair: rgba(242, 239, 233, 0.08);
	--af-black: #000;
	--af-panel: #000;

	/* The one colour in the whole thing. Champagne, used only where a choice has
	   been made or an answer given — so it never decorates, it only ever means
	   "this is yours". Anything more than that on a black ground stops reading as
	   luxury and starts reading as a sale banner. */
	--af-lux: #cbb994;
	--af-lux-soft: rgba(203, 185, 148, 0.32);
	--af-lux-faint: rgba(203, 185, 148, 0.10);

	--af-ease: cubic-bezier(0.16, 0.84, 0.28, 1);

	/* THE SITE'S OWN FACE, NAMED ONCE, AND NOT NEGOTIABLE.
	   The panel used to declare no family at all and inherit whatever it landed
	   in — which reads correctly on aloftaura.com and as system sans in the
	   harness, so the two never looked like the same product. `intrepid-regular`
	   is the family the live site actually computes to (verified against
	   aloftaura.com, not taken from a stylesheet). No @font-face here on
	   purpose: the child theme already loads it, and a second declaration is a
	   second download.

	   EVERY control in this panel restates `font: inherit`. That is not
	   belt-and-braces — an input, a textarea, a select and a button do NOT
	   inherit the family in any browser, they fall back to the UA's own form
	   font. One missed rule and a text field renders in system sans in the
	   middle of a panel that is otherwise entirely Intrepid, which is precisely
	   the kind of thing that reads as broken without anyone being able to say
	   why. */
	--af-font: "intrepid-regular", "Intrepid", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Width lives in variables so the two breakpoints below are the only places
	   that know how wide this thing is. 560 was the whole panel before the right
	   column existed; it is now the phone width only. */
	--af-panel-w: 560px;
	--af-aside-w: 0px;

	position: fixed;
	inset: 0;
	z-index: 999999;          /* over the theme's fixed bottom icon bar */
	display: flex;
	align-items: flex-end;
	justify-content: center;
	color: var(--af-ink);
	font-family: var(--af-font);
	font-size: 14px;
	line-height: 1.5;
}

.aura-fit[hidden] { display: none; }

.aura-fit *,
.aura-fit *::before,
.aura-fit *::after { box-sizing: border-box; }

/* Belt and braces on the family, for every element type that would otherwise
   reach for a UA default. */
.aura-fit input,
.aura-fit textarea,
.aura-fit select,
.aura-fit button { font-family: var(--af-font); }

/* The page behind must not scroll while a full-screen panel is open — on iOS
   that is the difference between a panel and a trapdoor. */
:root.aura-fit-open,
:root.aura-fit-open body { overflow: hidden; }

.aura-fit__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.86);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: aura-fit-in 0.4s var(--af-ease);
}

.aura-fit__panel {
	position: relative;
	width: 100%;
	max-width: var(--af-panel-w);
	max-height: 92dvh;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	background: var(--af-panel);
	border-top: 1px solid var(--af-faint);
	animation: aura-fit-up 0.5s var(--af-ease);
	outline: none;
}

@keyframes aura-fit-in { from { opacity: 0; } }
@keyframes aura-fit-up { from { transform: translateY(3%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.aura-fit__scrim, .aura-fit__panel { animation: none; }
}

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

.aura-fit__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 14px;
}

.aura-fit__eyebrow {
	margin: 0;
	font-size: 10px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--af-dim);
}

.aura-fit__close {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: -10px -10px -10px 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--af-ink);
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s var(--af-ease);
}
.aura-fit__close:hover { opacity: 1; }
.aura-fit__close svg { width: 16px; height: 16px; }

/* ---- progress, as rules -------------------------------------------------- */

.aura-fit__rules {
	flex: 0 0 auto;
	display: flex;
	gap: 6px;
	padding: 0 20px 18px;
}

.aura-fit__rule {
	flex: 1 1 0%;
	height: 1px;
	background: var(--af-ink);
	opacity: 0.16;
	transition: opacity 0.5s var(--af-ease), transform 0.5s var(--af-ease);
	transform-origin: 0 50%;
}
.aura-fit__rule[data-on="true"] { opacity: 1; transform: scaleY(2); background: var(--af-lux); }

/* ---- the two columns ------------------------------------------------------
   .aura-fit__main holds the question column and the figure column. On a phone
   it is a plain vertical flex and the figure is a band pinned above the
   questions; from 700px up it becomes a two-column grid.

   The aside is FIRST IN SOURCE ORDER, which is what makes the phone layout work
   with no `order:` and no moving nodes from JS. It now contains real inputs, so
   being first in source order is also first in tab order — which is correct:
   the invitation to say who you are is the first thing in the panel.
   -------------------------------------------------------------------------- */

.aura-fit__main {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.aura-fit__body {
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;             /* it becomes a grid track at 700px; without this a
	                             long unbroken product name widens the column */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 20px 8px;
}

.aura-fit__step[hidden] { display: none; }

/* A QUESTION IS WHITE. It is the only thing in the panel that is, which is what
   makes it the thing the eye lands on before anything else. */
.aura-fit__q {
	margin: 0 0 6px;
	color: var(--af-white);
	font-size: clamp(19px, 5vw, 25px);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.25;
}

.aura-fit__hint {
	margin: 0 0 22px;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--af-dim);
}
/* A question with no hint under it still needs the same air before the options
   as one that has a hint. */
.aura-fit__q + .aura-fit__choices,
.aura-fit__q + .aura-fit__units,
.aura-fit__q + .aura-fit__free { margin-top: 24px; }

/* ---- who they are ---------------------------------------------------------
   The one block in the panel that asks for something rather than offering
   something, so it is drawn as quietly as it can be while still being findable:
   an underline instead of a box, dim until touched, champagne once given.
   -------------------------------------------------------------------------- */

.aura-fit__id { min-width: 0; }

.aura-fit__id-name {
	margin: 0 0 6px;
	color: var(--af-lux);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.aura-fit__id-name[hidden] { display: none; }

/* Two lines at most. On a phone this block sits above the questions for the
   whole flow, so every line it grows is a line the actual question loses. */
.aura-fit__id-pitch {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0 0 6px;
	color: var(--af-dim);
	font-size: 9.5px;
	line-height: 1.5;
	letter-spacing: 0.04em;
}
/* Once we have a name the invitation has done its job and is only taking room. */
.aura-fit__id[data-named="true"] .aura-fit__id-pitch { display: none; }

.aura-fit__id-input {
	display: block;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 10px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--af-faint);
	color: var(--af-ink);
	font: inherit;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: none;
	border-radius: 0;         /* iOS rounds a text input on its own */
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.35s var(--af-ease), color 0.35s var(--af-ease);
}
.aura-fit__id-input::placeholder { color: var(--af-dim); text-transform: none; }
.aura-fit__id-input:hover { border-color: var(--af-lux-soft); }
.aura-fit__id-input:focus { outline: none; border-color: var(--af-lux); }
.aura-fit__id-input:focus-visible { outline: 1px solid var(--af-lux); outline-offset: 3px; }

/* NOT SHOWN UNTIL THERE IS A NAME. Asking for somebody's email before they
   have told you who they are is the order every abandoned form is filled in,
   and on a phone it is also 40px of the question's space spent on an offer
   nobody has reached yet. */
.aura-fit__id[data-named="false"] .aura-fit__id-more,
.aura-fit__id[data-named="false"] .aura-fit__id-extra { display: none; }

.aura-fit__id-more {
	display: block;
	margin: 4px 0 0;
	padding: 10px 0;
	min-height: 40px;
	background: none;
	border: 0;
	color: var(--af-dim);
	font: inherit;
	font-size: 9.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	text-align: left;
	transition: color 0.3s var(--af-ease);
}
.aura-fit__id-more:hover { color: var(--af-ink); }
.aura-fit__id-more::before { content: "+ "; }
.aura-fit__id-more[aria-expanded="true"]::before { content: "− "; }
.aura-fit__id-more:focus-visible { outline: 1px solid var(--af-ink); outline-offset: 2px; }

.aura-fit__id-extra { display: grid; gap: 2px; animation: aura-fit-reveal 0.45s var(--af-ease); }
.aura-fit__id-extra[hidden] { display: none; }

.aura-fit__id-note {
	margin: 8px 0 0;
	color: var(--af-dim);
	font-size: 9.5px;
	line-height: 1.6;
	letter-spacing: 0.05em;
}

/* ---- the figure column ----------------------------------------------------
   A drawing of the person being fitted, redrawn on every answer, and a list of
   what has been understood so far.

   It earns its place by making the questions feel cumulative: the figure grows
   when you set your height, thickens with weight, changes shape when you pick a
   build and puts on the garment when you choose how it should fit. A wizard
   that shows nothing until the end asks you to take nine questions on trust.

   Phone: a band above the questions — name across the top, figure and readout
          side by side beneath it.
   Desk:  a full column on the right, name over figure over readout.
   -------------------------------------------------------------------------- */

.aura-fit__aside {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px 14px;
	padding: 0 20px 14px;
	border-bottom: 1px solid var(--af-faint);
}
/* Every JS-toggled element in this file needs its own [hidden] rule, because the
   `display` above would otherwise beat the attribute. That has caught this
   stylesheet three times already. */
.aura-fit__aside[hidden] { display: none; }

.aura-fit__id { grid-column: 1 / -1; }

/* HEIGHT IS THE CONSTRAINT, NOT WIDTH, and getting that backwards is what
   sawed the figure's legs off. The viewBox is 150 × 300, so a width of 196px is
   a height of 392px — far more than the column has, and the aside simply
   scrolled the feet away. Sized by height with `meet`, the whole person is
   always in frame and the drawing letterboxes horizontally instead. */
.aura-fit__avatar {
	display: block;
	grid-column: 1;
	flex: 0 0 auto;
	width: 50px;
	height: 100px;
	overflow: visible;
}
/* One stroke width at both sizes. The same SVG is drawn at 58px on a phone and
   280px on a desk, and without this the outline would be five times heavier at
   the small size — which is where legibility is already hardest. */
.aura-fit__avatar [stroke] { vector-effect: non-scaling-stroke; }

/* THE FIGURE'S OWN PALETTE.
   A gradient across the body rather than a flat fill, because the single thing
   that separates a drawing of a person from a silhouette of one is that a body
   is round and catches light down one side. */
/* THE FILLS ARE NOT SET HERE, and that is deliberate. Each figure carries its
   own gradients under its own generated ids and points at them with a `fill`
   presentation attribute, because a shared id resolves document-wide and the
   panel's own hidden copy wins that race — see the note beside AV_UID in the
   generator. A `fill` declaration in this file would beat the attribute and put
   the bug straight back. */
.aura-fit__avatar-skin {
	stroke: var(--af-dim);
	stroke-width: 1;
	stroke-linejoin: round;
}
/* The head carries its own, brighter gradient. See the note beside it in the
   generator: the face is a tenth of the area and nine tenths of the identity,
   and at the body's tone there is nothing for the features to read against. */
.aura-fit__avatar-face-skin {
	stroke: var(--af-dim);
	stroke-width: 1;
	stroke-linejoin: round;
}
/* Hair is DARKER than the face and lighter than the ground, which is the only
   arrangement that reads as hair from both directions: against the lit face it
   is the dark mass, and against the black panel its own outline holds it. */
.aura-fit__avatar-hair {
	fill: #2b2823;
	stroke: var(--af-dim);
	stroke-width: 0.9;
	stroke-linejoin: round;
}
.aura-fit__avatar-shade { fill: rgba(0, 0, 0, 0.22); stroke: none; }
.aura-fit__avatar-line {
	fill: none;
	stroke: var(--af-dim);
	stroke-width: 0.9;
	stroke-linecap: round;
	opacity: 0.7;
}
.aura-fit__avatar-eye { fill: rgba(242, 239, 233, 0.78); stroke: none; }
.aura-fit__avatar-lid {
	fill: none; stroke: rgba(20, 18, 15, 0.85);
	stroke-width: 1.1; stroke-linecap: round;
}
.aura-fit__avatar-iris { fill: #17140f; stroke: none; }
.aura-fit__avatar-spark { fill: rgba(255, 255, 255, 0.9); stroke: none; }
.aura-fit__avatar-lip { fill: rgba(203, 185, 148, 0.38); stroke: rgba(20, 18, 15, 0.4); stroke-width: 0.5; }
.aura-fit__avatar-brow { fill: none; stroke: rgba(20, 18, 15, 0.7); stroke-width: 1.5; stroke-linecap: round; }
.aura-fit__avatar-brow--fine { stroke-width: 1.1; }
.aura-fit__avatar-wear {
	stroke: var(--af-lux);
	stroke-width: 1.1;
	stroke-linejoin: round;
}

/* At 74px a nose is two grey pixels where a nose should be, an ear is one, and
   the sum of them is mud. The face is drawn in two tiers so the small size can
   drop the fine one and keep the eyes and the mouth, which do survive. */
.aura-fit__avatar-face--fine { display: none; }

@media (prefers-reduced-motion: no-preference) {
	/* Chrome and Safari interpolate `d` because the generator always emits the
	   same segment count for the same figure; Firefox snaps to the new shape.
	   Both are fine — this is a courtesy, not a mechanism, and nothing is
	   tested on it. */
	.aura-fit__avatar-skin, .aura-fit__avatar-wear { transition: d 0.35s var(--af-ease); }
}

/* The running readout. Same <dl> vocabulary as the result's reasoning list, so
   the panel has one way of showing a labelled fact rather than two. */
.aura-fit__read { margin: 0; min-width: 0; grid-column: 2; }
.aura-fit__read div { display: flex; gap: 10px; justify-content: space-between; padding: 2px 0; }
.aura-fit__read dt {
	margin: 0; color: var(--af-dim); font-size: 9px; letter-spacing: 0.16em;
	text-transform: uppercase; white-space: nowrap;
}
.aura-fit__read dd {
	margin: 0; font-size: 11px; letter-spacing: 0.04em; text-align: right;
	min-width: 0; overflow-wrap: anywhere;
}
/* On the phone band the list is capped to the height of the figure beside it,
   and the newest answer is the one worth showing — so it is reversed and
   clipped rather than scrolled. On the desk column this cap is lifted. */
.aura-fit__read { max-height: 100px; overflow: hidden; }

/* ---- choices ------------------------------------------------------------- */

.aura-fit__choices { display: grid; gap: 8px; }
.aura-fit__choices--2 { grid-template-columns: repeat(2, 1fr); }
.aura-fit__choices--3 { grid-template-columns: repeat(3, 1fr); }
.aura-fit__choices--fig { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.aura-fit__choices--sizes { grid-template-columns: repeat(5, 1fr); }
.aura-fit__choices--stack { grid-template-columns: 1fr; }
.aura-fit__choices[hidden] { display: none; }

.aura-fit__choice {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 12px 8px;
	background: none;
	border: 1px solid var(--af-faint);
	color: var(--af-ink);
	font: inherit;
	cursor: pointer;
	text-align: center;
	/* CONTENT STAYS IN THE BOX.
	   Five build cards across a 360px phone is a 62px cell holding a word like
	   "Inverted triangle" and a sentence under it. Left alone the long words
	   push the label out past the border and the note runs under its neighbour,
	   and it looks exactly like a bug because it is one. min-width:0 lets the
	   grid cell actually shrink, the wrap rules break the long words rather than
	   overflowing, and the clip is the backstop for anything that still cannot
	   be made to fit. */
	min-width: 0;
	overflow: hidden;
	transition: border-color 0.35s var(--af-ease), background 0.35s var(--af-ease), color 0.35s var(--af-ease);
}
.aura-fit__choice > * {
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

.aura-fit__choice-label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.3;
}

.aura-fit__choice-note {
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--af-dim);
	text-transform: none;
}

.aura-fit__choice:hover { border-color: var(--af-lux-soft); }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.aura-fit__choice { transition: border-color 0.35s var(--af-ease), background 0.35s var(--af-ease), color 0.35s var(--af-ease), transform 0.35s var(--af-ease); }
	.aura-fit__choice:hover { transform: translateY(-2px); }
}

/* Chosen is inverted, not tinted: at 11px on a phone in daylight, a border that
   changes shade is not a state anyone can see. */
.aura-fit__choice[aria-pressed="true"] {
	background: var(--af-lux);
	border-color: var(--af-lux);
	color: var(--af-black);
}
.aura-fit__choice[aria-pressed="true"] .aura-fit__choice-note { color: rgba(0, 0, 0, 0.62); }
.aura-fit__choice[aria-pressed="true"] .aura-fit__fig { fill: rgba(0, 0, 0, 0.16); stroke: var(--af-black); }
/* On the inverted (chosen) card the champagne marker would vanish into a
   champagne ground, so it goes to ink for that state only. */
.aura-fit__choice[aria-pressed="true"] .aura-fit__fig-mark { stroke: var(--af-black); opacity: 0.85; }
.aura-fit__choice[aria-pressed="true"] .aura-fit__fig-waist { stroke: var(--af-black); }
.aura-fit__choice[aria-pressed="true"] .aura-fit__fig-head { fill: rgba(0, 0, 0, 0.28); }

.aura-fit__choice:focus-visible { outline: 1px solid var(--af-ink); outline-offset: 2px; }

.aura-fit__choice--row {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	text-align: left;
	gap: 8px 14px;
	padding: 14px 16px;
	flex-wrap: wrap;          /* a long label and a long note must stack, not clip */
}
.aura-fit__choice--row .aura-fit__choice-note { text-align: right; }

.aura-fit__choice--size {
	min-height: 52px;
	font-size: 12px;
	letter-spacing: 0.14em;
}

/* The shape IS the icon: shoulder, waist and hip are the three measurements
   that define each of these, so the drawing is the definition. Filled faintly so
   the silhouette reads as a body at a glance, outlined so it stays legible when
   the card inverts. */
.aura-fit__fig {
	width: 32px;
	height: 47px;
	display: block;
	flex: 0 0 auto;
	fill: rgba(242, 239, 233, 0.1);
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linejoin: round;
	transition: fill 0.35s var(--af-ease), stroke 0.35s var(--af-ease);
}
.aura-fit__fig-head { fill: rgba(242, 239, 233, 0.16); }
/* The width marker across the shape's widest point, and the waist notch. These
   are what make five silhouettes that differ by two pixels at the waist into
   five things you can tell apart at arm's length. The marker is champagne so the
   eye lands on the measurement first and reads the outline second. */
.aura-fit__fig-mark {
	stroke: var(--af-lux);
	stroke-width: 1.6;
	stroke-linecap: round;
	opacity: 0.75;
}
.aura-fit__fig-waist { stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; opacity: 0.5; }

/* At the wider breakpoints the cell grows from 70px to ~102px, so the drawing
   can grow with it rather than floating in a bigger box. */
@media (min-width: 1024px) {
	.aura-fit__fig { width: 40px; height: 59px; }
}

.aura-fit__choice--shape {
	gap: 8px;
	padding: 13px 3px 11px;
	justify-content: flex-start;
}
/* Five cards across a 360px phone is a 62px cell, and "HOURGLASS" set at 9.5px
   with normal tracking is 56px of word in 54px of room — so it broke across two
   lines as "HOURGLAS / S", which is the containment rules working correctly and
   looking like a fault. The fix is the type size, not the wrap rule. */
.aura-fit__choice--shape .aura-fit__choice-label {
	font-size: 9px;
	letter-spacing: 0.02em;
}
/* Two lines of room reserved whether the note needs them or not. Without it
   "Defined waist" sets one line and "Broad chest, narrow hips" sets two, so the
   five cards in a row end at five different heights — and a row of options that
   does not line up reads as broken before anybody has read a word of it. */
.aura-fit__choice--shape .aura-fit__choice-note {
	font-size: 9px;
	line-height: 1.35;
	letter-spacing: 0.01em;
	min-height: calc(9px * 1.35 * 2);
}

.aura-fit__choice--tall { min-height: 76px; gap: 6px; }

/* ---- how pronounced ------------------------------------------------------ */

/* Revealed only once a shape is chosen. Height and opacity together, so it
   arrives rather than appears. */
.aura-fit__intensity {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--af-faint);
	display: grid;
	gap: 12px;
	animation: aura-fit-reveal 0.55s var(--af-ease);
}
.aura-fit__intensity[hidden] { display: none; }

@keyframes aura-fit-reveal {
	from { opacity: 0; transform: translateY(-6px); }
}

.aura-fit__intensity-q {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--af-dim);
}

.aura-fit__degrees {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--af-faint);
}

/* A weight, drawn as a rising rule under each step — subtle is a short one,
   pronounced is a tall one. The word alone does not say it is a scale. */
.aura-fit__degree {
	position: relative;
	min-height: 52px;
	padding: 14px 6px 16px;
	background: none;
	border: 0;
	border-right: 1px solid var(--af-faint);
	color: var(--af-dim);
	font: inherit;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	transition: color 0.4s var(--af-ease), background 0.4s var(--af-ease);
}
.aura-fit__degree:last-child { border-right: 0; }

.aura-fit__degree::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 8px;
	width: 26px;
	margin-left: -13px;
	background: currentColor;
	opacity: 0.3;
	transition: height 0.45s var(--af-ease), opacity 0.45s var(--af-ease), background 0.45s var(--af-ease);
}
.aura-fit__degree:nth-child(1)::after { height: 1px; }
.aura-fit__degree:nth-child(2)::after { height: 3px; }
.aura-fit__degree:nth-child(3)::after { height: 6px; }

.aura-fit__degree:hover { color: var(--af-ink); }
.aura-fit__degree[aria-pressed="true"] { color: var(--af-lux); background: var(--af-lux-faint); }
.aura-fit__degree[aria-pressed="true"]::after { opacity: 1; background: var(--af-lux); }
.aura-fit__degree:focus-visible { outline: 1px solid var(--af-lux); outline-offset: -3px; }

.aura-fit__intensity-read {
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--af-dim);
	font-variant-numeric: tabular-nums;
}

.aura-fit__skip {
	display: block;
	margin: 18px auto 0;
	padding: 12px 4px;
	min-height: 44px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--af-faint);
	color: var(--af-dim);
	font: inherit;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.3s var(--af-ease), border-color 0.3s var(--af-ease);
}
.aura-fit__skip:hover { color: var(--af-ink); border-color: var(--af-ink); }

/* ---- units + sliders ----------------------------------------------------- */

.aura-fit__units { display: inline-flex; border: 1px solid var(--af-faint); }

.aura-fit__unit {
	min-height: 40px;
	padding: 8px 16px;
	background: none;
	border: 0;
	color: var(--af-dim);
	font: inherit;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.3s var(--af-ease), background 0.3s var(--af-ease);
}
.aura-fit__unit[aria-pressed="true"] { background: var(--af-lux); color: var(--af-black); }
.aura-fit__unit:focus-visible { outline: 1px solid var(--af-ink); outline-offset: -3px; }

.aura-fit__readout {
	margin: 26px 0 18px;
	color: var(--af-white);
	font-size: clamp(34px, 11vw, 46px);
	line-height: 1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

/* A hairline track with a solid thumb — the same drawing language as the rest,
   and a 26px thumb because a 12px one is not a thing a thumb can catch. */
.aura-fit__range {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 44px;
	margin: 0;
	background: none;
	cursor: pointer;
}

.aura-fit__range::-webkit-slider-runnable-track {
	height: 1px;
	background: linear-gradient(to right, var(--af-lux) 0 var(--pct, 50%), var(--af-faint) var(--pct, 50%) 100%);
}
.aura-fit__range::-moz-range-track { height: 1px; background: var(--af-faint); }
.aura-fit__range::-moz-range-progress { height: 1px; background: var(--af-lux); }

.aura-fit__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	border-radius: 50%;
	background: var(--af-lux);
	border: 0;
	cursor: grab;
}
.aura-fit__range::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--af-lux);
	border: 0;
	cursor: grab;
}
.aura-fit__range:focus-visible { outline: 1px solid var(--af-ink); outline-offset: 4px; }

.aura-fit__scale {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--af-dim);
}

/* ---- the voice ------------------------------------------------------------
   One line back for every answer. It sits between the questions and the
   buttons, which is the path the eye takes after a tap.

   Sentence case, and it has to fight for it: the theme's custom.css uppercases
   `p` directly and with !important, so anything of ours that is not also
   !important loses. Shouted, these lines stop being a remark and become a
   notification, which is precisely the tone they exist to avoid.
   -------------------------------------------------------------------------- */

.aura-fit__quip {
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 20px 12px 22px;
	border-top: 1px solid var(--af-faint);
	color: var(--af-ink);
	font-size: 11.5px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-transform: none !important;
	position: relative;
	overflow-wrap: anywhere;
}
.aura-fit__quip[hidden] { display: none; }
.aura-fit__quip::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 14px;
	bottom: 14px;
	width: 1px;
	background: var(--af-lux);
}
@media (prefers-reduced-motion: no-preference) {
	.aura-fit__quip.is-in { animation: aura-fit-quip 0.5s var(--af-ease); }
}
@keyframes aura-fit-quip {
	from { opacity: 0; transform: translateY(4px); }
}

/* ---- result -------------------------------------------------------------- */

.aura-fit__noted {
	margin: 0 0 26px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--af-faint);
	font-size: 13px;
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--af-ink);
}

.aura-fit__size { margin-bottom: 26px; }

.aura-fit__size-label {
	display: block;
	margin-bottom: 8px;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--af-dim);
}

.aura-fit__size-value {
	display: block;
	color: var(--af-lux);
	font-size: clamp(54px, 17vw, 76px);
	line-height: 0.9;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.aura-fit__size-alt {
	display: block;
	margin-top: 12px;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--af-dim);
}

/* What drove it, said plainly. A recommendation nobody can see the reasoning
   for is a recommendation nobody trusts enough to buy against. */
.aura-fit__why {
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 18px;
	font-size: 12px;
	letter-spacing: 0.06em;
}
.aura-fit__why dt { color: var(--af-dim); margin: 0; }
.aura-fit__why dd { margin: 0; text-align: right; }

.aura-fit__confidence {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--af-faint);
	border-bottom: 1px solid var(--af-faint);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--af-dim);
}

.aura-fit__confidence-rules { display: inline-flex; gap: 5px; }
.aura-fit__confidence-rules i { width: 22px; height: 1px; background: var(--af-ink); opacity: 0.18; }
.aura-fit__confidence-rules i[data-on="true"] { opacity: 1; transform: scaleY(2); background: var(--af-lux); }

/* Quiet, but not hidden: a hairline down its left edge marks it as an aside
   rather than a warning banner, which is the tone that keeps someone shopping. */
.aura-fit__dev {
	margin: 18px 0 0;
	padding: 2px 0 2px 14px;
	border-left: 1px solid var(--af-faint);
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--af-dim);
}

.aura-fit__privacy {
	margin: 12px 0 0;
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--af-dim);
}

.aura-fit__result-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 22px;
}

.aura-fit__cta {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 16px;
	background: var(--af-lux);
	color: var(--af-black);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.3s var(--af-ease);
}
.aura-fit__cta:hover { opacity: 0.86; color: var(--af-black); }

.aura-fit__restart {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 12px 2px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--af-faint);
	color: var(--af-dim);
	font: inherit;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
}
.aura-fit__restart:hover { color: var(--af-ink); }

/* ---- what they type -------------------------------------------------------
   font: inherit is not optional on a textarea — left alone it renders in the
   UA's own monospace-ish default, which in a panel that has just set one family
   for everything else looks like a bug. */
.aura-fit__free {
	width: 100%;
	min-height: 92px;
	padding: 14px;
	background: rgba(242, 239, 233, 0.04);
	border: 1px solid var(--af-faint);
	color: var(--af-ink);
	font: inherit;
	font-size: 14px;
	line-height: 1.55;
	letter-spacing: 0.02em;
	text-transform: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	resize: vertical;
	transition: border-color 0.35s var(--af-ease);
}
.aura-fit__free::placeholder { color: var(--af-dim); text-transform: none; }
.aura-fit__free:focus { outline: none; border-color: var(--af-lux-soft); }
.aura-fit__free:focus-visible { outline: 1px solid var(--af-ink); outline-offset: 2px; }

/* The suggested prompts. Tapping one appends it, so two of them stack into a
   brief nobody would have typed out — which is the point, because the honest
   truth about a free-text box is that most people type nothing at all. */
.aura-fit__prompts { margin-top: 14px; }

.aura-fit__prompts-h {
	display: block;
	margin-bottom: 8px;
	color: var(--af-dim);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.aura-fit__prompts-list { display: flex; flex-wrap: wrap; gap: 6px; }

.aura-fit__prompt {
	max-width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	background: none;
	border: 1px solid var(--af-faint);
	border-radius: 999px;
	color: var(--af-dim);
	font: inherit;
	font-size: 10.5px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: none !important;
	text-align: left;
	cursor: pointer;
	overflow-wrap: anywhere;
	transition: color 0.3s var(--af-ease), border-color 0.3s var(--af-ease), background 0.3s var(--af-ease);
}
.aura-fit__prompt:hover { color: var(--af-ink); border-color: var(--af-lux-soft); background: var(--af-lux-faint); }
.aura-fit__prompt:focus-visible { outline: 1px solid var(--af-ink); outline-offset: 2px; }

/* What was understood, facet by facet. The chips prove which WORDS were seen,
   which is what makes a wrong reading traceable to the word that caused it. */
.aura-fit__free-read {
	margin: 14px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 0;
}
.aura-fit__free-read:empty { display: none; }

.aura-fit__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--af-lux-soft);
	background: var(--af-lux-faint);
	color: var(--af-lux);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	max-width: 100%;
	overflow-wrap: anywhere;
}
.aura-fit__chip i {
	font-style: normal;
	color: var(--af-dim);
	font-size: 8.5px;
	letter-spacing: 0.16em;
}

/* And the scenario: what the whole request adds up to, in one sentence. The
   chips are evidence; this is the reading. */
.aura-fit__scenario {
	margin: 12px 0 0;
	padding-left: 14px;
	border-left: 1px solid var(--af-lux-soft);
	color: var(--af-ink);
	font-size: 12px;
	line-height: 1.65;
	letter-spacing: 0.02em;
	text-transform: none !important;
	overflow-wrap: anywhere;
}
.aura-fit__scenario[hidden] { display: none; }
.aura-fit__scenario--result { margin: 0 0 24px; }

/* ---- the pieces we chose --------------------------------------------------
   The line above the result used to promise that products would be suggested,
   and then nothing was. This is where that gets paid. */
.aura-fit__picks { margin-top: 26px; border-top: 1px solid var(--af-faint); padding-top: 20px; }
.aura-fit__picks[hidden] { display: none; }
.aura-fit__picks-h {
	margin: 0 0 14px; font-size: 11px; font-weight: 400;
	letter-spacing: 0.3em; text-transform: uppercase; color: var(--af-dim);
}
.aura-fit__picks-list { display: grid; gap: 10px; }

.aura-fit__pick {
	display: flex; gap: 14px; align-items: flex-start;
	padding: 12px; border: 1px solid var(--af-faint);
	color: var(--af-ink); text-decoration: none;
	min-width: 0;
}
.aura-fit__pick:hover { border-color: var(--af-lux-soft); }
.aura-fit__pick:focus-visible { outline: 1px solid var(--af-ink); outline-offset: 2px; }

.aura-fit__pick-img {
	flex: 0 0 64px; width: 64px; height: 80px;
	object-fit: cover; background: rgba(242, 239, 233, 0.05);
}
.aura-fit__pick-img--none { display: block; }

.aura-fit__pick-text { display: block; min-width: 0; }
.aura-fit__pick-name {
	display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
	overflow-wrap: anywhere;
}
.aura-fit__pick-price { display: block; margin-top: 3px; font-size: 12px; color: var(--af-lux); }
/* The reason is the only sentence-case prose in the panel, and the theme forces
   uppercase on span with !important — so this one has to fight back in kind. */
.aura-fit__pick-why {
	display: block; margin-top: 7px;
	font-size: 11.5px; line-height: 1.55; color: var(--af-dim);
	letter-spacing: 0.01em;
	text-transform: none !important;
}
/* A weak match is marked in the margin as well as in the words. Someone
   scanning three cards should be able to see which one we are less sure of
   before they read a syllable. */
.aura-fit__pick[data-band="stretch"] { border-style: dashed; }
.aura-fit__pick[data-band="strong"] { border-color: var(--af-lux-soft); }

@media (min-width: 1024px) {
	.aura-fit__picks-list { grid-template-columns: 1fr 1fr; }
	.aura-fit__pick:first-child { grid-column: 1 / -1; }
}

/* ---- foot ---------------------------------------------------------------- */

.aura-fit__foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--af-faint);
}

.aura-fit__foot-spacer { flex: 1 1 auto; }

.aura-fit__back,
.aura-fit__next {
	min-height: 44px;
	padding: 12px 18px;
	background: none;
	border: 1px solid var(--af-faint);
	color: var(--af-ink);
	font: inherit;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.3s var(--af-ease), background 0.3s var(--af-ease), color 0.3s var(--af-ease);
}

.aura-fit__back { border-color: transparent; color: var(--af-dim); padding-left: 2px; }
.aura-fit__back:hover { color: var(--af-ink); }
.aura-fit__back[hidden], .aura-fit__next[hidden] { display: none; }

.aura-fit__next { background: var(--af-lux); border-color: var(--af-lux); color: var(--af-black); }
.aura-fit__next:hover { opacity: 0.86; }

.aura-fit__back:focus-visible,
.aura-fit__next:focus-visible,
.aura-fit__cta:focus-visible,
.aura-fit__restart:focus-visible,
.aura-fit__skip:focus-visible { outline: 1px solid var(--af-ink); outline-offset: 3px; }

/* ---- desks: a centred card rather than a sheet --------------------------- */

@media (min-width: 700px) {
	.aura-fit {
		align-items: center;
		padding: 24px;
		--af-panel-w: 760px;
		--af-aside-w: 252px;
	}

	.aura-fit__panel {
		max-height: 88vh;
		border: 1px solid var(--af-faint);
		/* min-height, not height: the panel should not collapse around a short
		   step and then jump when a long one arrives. `min()` rather than a flat
		   580 because min-height beats max-height in CSS — on a 640px laptop a
		   bare 580 would overflow the 88vh cap set two lines up. */
		min-height: min(580px, 88vh);
	}

	/* Two columns. minmax(0,1fr) on the question column so its contents can
	   shrink; minmax(0,100%) on the row so each column scrolls inside itself
	   rather than the row growing to fit the taller of the two. */
	.aura-fit__main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--af-aside-w);
		grid-template-rows: minmax(0, 100%);
	}

	.aura-fit__body { grid-column: 1; grid-row: 1; }

	.aura-fit__aside {
		grid-column: 2;
		grid-row: 1;
		display: block;
		overflow-y: auto;
		align-content: start;
		padding: 0 24px 16px;
		border-bottom: 0;
		border-left: 1px solid var(--af-faint);
	}

	.aura-fit__id {
		padding-bottom: 16px;
		margin-bottom: 4px;
		border-bottom: 1px solid var(--af-faint);
	}
	.aura-fit__id-name { font-size: 12px; }
	.aura-fit__id-pitch { font-size: 10.5px; -webkit-line-clamp: 3; margin-bottom: 8px; }
	.aura-fit__choice--shape .aura-fit__choice-label { font-size: 9.5px; letter-spacing: 0.04em; }

	/* Sized so the identity block, the whole figure and a full readout all fit
	   the column without it scrolling — a readout clipped mid-row reads as a
	   layout fault even though the column scrolls perfectly well. */
	.aura-fit__avatar {
		width: 100%;
		height: clamp(158px, 26vh, 226px);
		margin: 10px auto 12px;
	}

	/* At this size the fine tier of the face is legible, so it comes back. */
	.aura-fit__avatar-face--fine { display: block; }

	/* The cap that keeps the phone band to three rows is a phone measure only. */
	.aura-fit__read { max-height: none; overflow: visible; }
	.aura-fit__read div { padding: 5px 0; border-bottom: 1px solid var(--af-faint); }
	.aura-fit__read div:last-child { border-bottom: 0; }

	.aura-fit__head { padding: 24px 32px 18px; }
	.aura-fit__rules { padding: 0 32px 22px; }
	.aura-fit__body { padding: 0 32px 10px; }
	.aura-fit__quip { padding: 14px 32px 14px 34px; font-size: 12px; }
	.aura-fit__quip::before { left: 32px; }
	.aura-fit__foot { padding: 18px 32px; }
	.aura-fit__readout { margin: 30px 0 20px; }
}

/* Wider still. The brief asked for a larger, sleeker window than the 560px sheet
   this started as; 940/300 gives the question column ~576px of usable width,
   which is where the five build figures stop being thumbnails (~104px a cell
   against 68px on a phone) and the product cards can sit two-up. */
@media (min-width: 1024px) {
	.aura-fit {
		--af-panel-w: 940px;
		--af-aside-w: 300px;
	}
	.aura-fit__aside { padding: 0 28px 20px; }
	.aura-fit__avatar { height: clamp(210px, 38vh, 320px); }
	.aura-fit__choice--shape .aura-fit__choice-label { font-size: 10.5px; letter-spacing: 0.1em; }
}

/* Very short screens — a landscape phone — must not lose the Continue button
   off the bottom. The body scrolls; the head and foot never do.
   This block sits after the min-width ones deliberately, so it wins on a
   landscape phone, where there is no room for a figure and the button matters
   more than the flourish.

   The FIGURE goes, not the whole column: the name field is the one thing in
   there that cannot be reached any other way, and hiding the aside outright —
   which is what this rule used to do — would make it unreachable on a phone
   held sideways. */
@media (max-height: 520px) {
	.aura-fit__panel { max-height: 100vh; min-height: 0; }
	.aura-fit__avatar { display: none; }
	.aura-fit__read { display: none; }
	.aura-fit__aside { padding-bottom: 10px; }
	.aura-fit__id-pitch { display: none; }
	.aura-fit__readout { margin: 14px 0 10px; font-size: 30px; }
	.aura-fit__q { font-size: 18px; }
	.aura-fit__hint { margin-bottom: 14px; }
	.aura-fit__quip { padding-top: 9px; padding-bottom: 9px; }
}

/* ═══════════════════════ 3.0 — the upgrade (2026-10-15) ═══════════════════════
   Brighter secondary text, clearer cards, larger shape icons with their names,
   a typed occasion, a size guide, a full-width edit. */
.aura-fit {
	--af-dim: rgba(242, 239, 233, 0.72);
	--af-faint: rgba(242, 239, 233, 0.20);
	--af-hair: rgba(242, 239, 233, 0.12);
}
.aura-fit__panel { background: linear-gradient(180deg, #0b0b0c 0%, #000 42%); }
.aura-fit__eyebrow { color: var(--af-lux); font-size: 11px; }
.aura-fit__close {
	width: 40px; height: 40px; margin: -8px -6px -8px 0;
	border: 1px solid var(--af-faint); border-radius: 50%;
	opacity: 0.9;
	transition: opacity .3s var(--af-ease), border-color .3s var(--af-ease), transform .3s var(--af-ease);
}
.aura-fit__close:hover { opacity: 1; border-color: var(--af-lux); transform: translateY(2px); }
.aura-fit__close svg { width: 18px; height: 18px; }
.aura-fit__q { font-size: clamp(21px, 5.2vw, 28px); }
.aura-fit__hint { font-size: 13px; line-height: 1.6; letter-spacing: .03em; color: var(--af-dim); }
.aura-fit__choice { border-color: rgba(242, 239, 233, 0.24); background: rgba(242, 239, 233, 0.025); }
.aura-fit__choice:hover { border-color: var(--af-lux); background: rgba(242, 239, 233, 0.05); }
.aura-fit__choice-label { font-size: 12px; color: var(--af-white); }
.aura-fit__choice[aria-pressed="true"] .aura-fit__choice-label { color: var(--af-black); }
.aura-fit__choice-note { font-size: 11.5px; color: rgba(242, 239, 233, 0.70); }
.aura-fit__quip { color: var(--af-ink); }
.aura-fit__read dt { color: rgba(242, 239, 233, 0.62); font-size: 9.5px; }
.aura-fit__read dd { font-size: 12px; color: var(--af-white); }
.aura-fit__id-pitch, .aura-fit__id-more, .aura-fit__id-note { font-size: 10.5px; color: var(--af-dim); }

/* body shapes: bigger figures, outlined in ink, named underneath */
.aura-fit .aura-fit__choice--shape { padding: 14px 4px 12px; gap: 9px; }
.aura-fit .aura-fit__choice--shape .aura-fit__fig {
	width: 44px; height: 65px;
	fill: rgba(242, 239, 233, 0.14); stroke: #f2efe9; stroke-width: 1.3;
}
.aura-fit .aura-fit__choice--shape .aura-fit__fig-head { fill: rgba(242, 239, 233, 0.26); }
.aura-fit .aura-fit__choice--shape .aura-fit__fig-mark { stroke: var(--af-lux); stroke-width: 2; opacity: 1; }
.aura-fit .aura-fit__choice--shape .aura-fit__fig-waist { opacity: .8; }
.aura-fit .aura-fit__choice--shape .aura-fit__choice-label { font-size: 10px; letter-spacing: .06em; color: var(--af-white); font-weight: 500; }
.aura-fit .aura-fit__choice--shape .aura-fit__choice-note { font-size: 9.5px; color: rgba(242, 239, 233, .66); }
.aura-fit .aura-fit__choice--shape[aria-pressed="true"] .aura-fit__fig { fill: rgba(0, 0, 0, .14); stroke: #000; }
.aura-fit .aura-fit__choice--shape[aria-pressed="true"] .aura-fit__choice-label { color: #000; }
.aura-fit .aura-fit__choice--shape[aria-pressed="true"] .aura-fit__choice-note { color: rgba(0, 0, 0, .66); }
@media (min-width: 1024px) {
	.aura-fit .aura-fit__choice--shape .aura-fit__fig { width: 54px; height: 80px; }
	.aura-fit .aura-fit__choice--shape .aura-fit__choice-label { font-size: 11px; letter-spacing: .1em; }
	.aura-fit .aura-fit__choice--shape .aura-fit__choice-note { font-size: 10.5px; }
}

/* the figure, larger and with a floor */
.aura-fit__avatar { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
.aura-fit__avatar-low { stroke: rgba(242, 239, 233, .35); }
@media (min-width: 700px) {
	.aura-fit__aside { background: radial-gradient(120% 60% at 50% 40%, rgba(203, 185, 148, .07), transparent 70%); }
	.aura-fit__avatar { height: clamp(200px, 34vh, 300px); }
}
@media (min-width: 1024px) { .aura-fit__avatar { height: clamp(240px, 42vh, 360px); } }

/* wearing it for — typed */
.aura-fit__occ { margin: 18px 0 16px; }
.aura-fit__occ-input {
	display: block; width: 100%; min-height: 50px; padding: 12px 16px;
	background: rgba(242, 239, 233, .04); color: var(--af-white);
	border: 1px solid rgba(242, 239, 233, .26); border-radius: 0;
	font: inherit; font-size: 14px; letter-spacing: .03em;
	-webkit-appearance: none; appearance: none;
	transition: border-color .3s var(--af-ease), background .3s var(--af-ease);
}
.aura-fit__occ-input::placeholder { color: rgba(242, 239, 233, .5); }
.aura-fit__occ-input:focus { outline: none; border-color: var(--af-lux); background: rgba(242, 239, 233, .06); }
.aura-fit__occ-read { min-height: 18px; margin: 8px 0 0; font-size: 12px; letter-spacing: .03em; color: var(--af-dim); }
.aura-fit__occ-read[data-hit="true"] { color: var(--af-lux); }
.aura-fit__choice.is-guess { border-color: var(--af-lux); box-shadow: inset 0 0 0 1px var(--af-lux); background: var(--af-lux-faint); }

/* footer skip */
.aura-fit__skipfoot {
	min-height: 44px; padding: 12px 16px; margin-right: 4px;
	background: none; border: 0; color: var(--af-dim);
	font: inherit; font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
	cursor: pointer; text-decoration: underline; text-underline-offset: 5px;
	text-decoration-color: rgba(242, 239, 233, .3);
	transition: color .3s var(--af-ease);
}
.aura-fit__skipfoot:hover { color: var(--af-white); }
.aura-fit__skipfoot[hidden] { display: none; }
.aura-fit__skipfoot:focus-visible { outline: 1px solid var(--af-ink); outline-offset: 3px; }

/* sizes with a guide on hover */
.aura-fit__choice--size { position: relative; overflow: visible; min-height: 56px; }
.aura-fit__sz { font-size: 14px; letter-spacing: .12em; }
.aura-fit__tip {
	position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5;
	display: grid; gap: 3px; width: max-content; max-width: 240px;
	padding: 10px 12px;
	background: #f2efe9; color: #0c0c0e; text-align: left;
	font-size: 11px; line-height: 1.45; letter-spacing: .02em; text-transform: none;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translate(-50%, 6px);
	transition: opacity .2s var(--af-ease), transform .2s var(--af-ease), visibility .2s;
}
.aura-fit__tip::after {
	content: ""; position: absolute; left: 50%; top: 100%;
	border: 6px solid transparent; border-top-color: #f2efe9; transform: translateX(-50%);
}
.aura-fit__tip b { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; }
.aura-fit__choices--sizes .aura-fit__choice:first-child .aura-fit__tip { left: 0; transform: translate(0, 6px); }
.aura-fit__choices--sizes .aura-fit__choice:first-child .aura-fit__tip::after { left: 22px; }
.aura-fit__choices--sizes .aura-fit__choice:last-child .aura-fit__tip { left: auto; right: 0; transform: translate(0, 6px); }
.aura-fit__choices--sizes .aura-fit__choice:last-child .aura-fit__tip::after { left: auto; right: 16px; transform: none; }
@media (hover: hover) {
	.aura-fit__choice--size:hover .aura-fit__tip,
	.aura-fit__choice--size:focus-visible .aura-fit__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
	.aura-fit__choices--sizes .aura-fit__choice:first-child:hover .aura-fit__tip,
	.aura-fit__choices--sizes .aura-fit__choice:last-child:hover .aura-fit__tip,
	.aura-fit__choices--sizes .aura-fit__choice:first-child:focus-visible .aura-fit__tip,
	.aura-fit__choices--sizes .aura-fit__choice:last-child:focus-visible .aura-fit__tip { transform: translate(0, 0); }
}
.aura-fit__choices--sizes { margin-top: 20px; }
.aura-fit__guide { margin-top: 22px; border: 1px solid var(--af-faint); }
.aura-fit__guide-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--af-faint); }
.aura-fit__guide-h { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--af-dim); }
.aura-fit__guide-units { display: inline-flex; border: 1px solid var(--af-faint); }
.aura-fit__gunit {
	min-width: 40px; min-height: 30px; padding: 4px 10px;
	background: none; border: 0; color: var(--af-dim);
	font: inherit; font-size: 11px; letter-spacing: .1em; cursor: pointer;
}
.aura-fit__gunit[aria-pressed="true"] { background: var(--af-lux); color: #000; }
.aura-fit__guide-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.aura-fit__guide-table table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.aura-fit__guide-table th, .aura-fit__guide-table td {
	padding: 9px 10px; text-align: left; white-space: nowrap;
	border-bottom: 1px solid var(--af-hair); color: var(--af-ink); font-weight: 400;
}
.aura-fit__guide-table thead th { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--af-dim); }
.aura-fit__guide-table tbody th { color: var(--af-white); letter-spacing: .1em; font-weight: 600; }
.aura-fit__guide-table tbody tr:last-child > * { border-bottom: 0; }
.aura-fit__guide-table tr.is-on > * { background: var(--af-lux-faint); color: var(--af-lux); }
.aura-fit__step:has(.aura-fit__choice--size[data-value="S"]:hover) tr[data-size="S"] > *,
.aura-fit__step:has(.aura-fit__choice--size[data-value="M"]:hover) tr[data-size="M"] > *,
.aura-fit__step:has(.aura-fit__choice--size[data-value="L"]:hover) tr[data-size="L"] > *,
.aura-fit__step:has(.aura-fit__choice--size[data-value="XL"]:hover) tr[data-size="XL"] > *,
.aura-fit__step:has(.aura-fit__choice--size[data-value="XXL"]:hover) tr[data-size="XXL"] > * { background: rgba(242, 239, 233, .07); }

/* the prompt */
.aura-fit__free {
	background: rgba(242, 239, 233, .04) !important;
	border: 1px solid rgba(242, 239, 233, .26) !important;
	color: var(--af-white) !important;
	font-size: 14px !important; line-height: 1.6 !important;
	padding: 14px 16px !important;
}
.aura-fit__free:focus { border-color: var(--af-lux) !important; outline: none; }
.aura-fit__free::placeholder { color: rgba(242, 239, 233, .5); }
.aura-fit__prompt { color: var(--af-ink); border-color: rgba(242, 239, 233, .26); font-size: 11.5px; }
.aura-fit__prompt:hover { border-color: var(--af-lux); color: var(--af-white); }
.aura-fit__chip i { font-size: 9px; color: var(--af-dim); }
.aura-fit__scenario { font-size: 13px; color: var(--af-white); }

/* ── the result: the whole panel, wide ─────────────────────────────── */
.aura-fit__noted { font-size: 15px; line-height: 1.6; color: var(--af-white); }
.aura-fit__size-value { color: var(--af-lux); }
.aura-fit__dev, .aura-fit__privacy { font-size: 11.5px; line-height: 1.6; color: rgba(242, 239, 233, .6); }
.aura-fit__picks { margin-top: 24px; padding-top: 22px; }
.aura-fit__picks-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.aura-fit__picks-h { margin: 0; color: var(--af-white); font-size: 12px; }
.aura-fit__picks-note { font-size: 11.5px; color: var(--af-lux); letter-spacing: .04em; }
.aura-fit .aura-fit__picks-list {
	display: grid; gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aura-fit .aura-fit__pick {
	display: flex; flex-direction: column; gap: 0; padding: 0;
	border: 1px solid var(--af-faint); background: rgba(242, 239, 233, .02);
	grid-column: auto !important; min-width: 0;
	transition: border-color .3s var(--af-ease);
}
.aura-fit .aura-fit__pick:hover { border-color: var(--af-lux-soft); }
.aura-fit .aura-fit__pick[data-band="stretch"] { border-style: solid; }
.aura-fit__pick-media { position: relative; display: block; overflow: hidden; background: rgba(242, 239, 233, .05); }
.aura-fit .aura-fit__pick-img {
	display: block; flex: none; width: 100%; height: auto; aspect-ratio: 4 / 5;
	object-fit: cover; transition: transform .7s var(--af-ease);
}
.aura-fit .aura-fit__pick:hover .aura-fit__pick-img { transform: scale(1.04); }
.aura-fit__pick-tag {
	position: absolute; left: 10px; top: 10px;
	padding: 5px 9px; background: var(--af-lux); color: #000;
	font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
}
.aura-fit .aura-fit__pick-text { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; flex: 1 1 auto; }
.aura-fit .aura-fit__pick-name {
	color: var(--af-white); text-decoration: none;
	font-size: 11.5px; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase;
}
.aura-fit .aura-fit__pick-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.aura-fit .aura-fit__pick-price { margin: 0; font-size: 14px; letter-spacing: .04em; color: var(--af-lux); font-variant-numeric: tabular-nums; }
.aura-fit .aura-fit__pick-why { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(242, 239, 233, .72); }
.aura-fit__pick-actions { display: grid; gap: 8px; margin-top: auto; padding-top: 8px; }
.aura-fit__pick-cart, .aura-fit__pick-view {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 42px; padding: 10px 12px; text-decoration: none; text-align: center;
	font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
	transition: background .3s var(--af-ease), color .3s var(--af-ease), border-color .3s var(--af-ease);
}
.aura-fit__pick-cart { background: var(--af-lux); color: #000; border: 1px solid var(--af-lux); }
.aura-fit__pick-cart:hover { background: var(--af-white); border-color: var(--af-white); color: #000; }
.aura-fit__pick-view { color: var(--af-ink); border: 1px solid var(--af-faint); }
.aura-fit__pick-view:hover { border-color: var(--af-ink); color: var(--af-white); }
.aura-fit__pick-cart:focus-visible, .aura-fit__pick-view:focus-visible, .aura-fit__pick-name:focus-visible { outline: 1px solid var(--af-ink); outline-offset: 3px; }
@media (max-width: 420px) {
	.aura-fit .aura-fit__picks-list { gap: 10px; }
	.aura-fit .aura-fit__pick-text { padding: 10px 10px 12px; }
	.aura-fit .aura-fit__pick-why { display: none; }
	.aura-fit__pick-cart, .aura-fit__pick-view { font-size: 9px; letter-spacing: .16em; padding: 9px 6px; }
}
@media (min-width: 700px) {
	.aura-fit.is-result { --af-panel-w: 980px; }
	.aura-fit.is-result .aura-fit__main { grid-template-columns: minmax(0, 1fr); }
	.aura-fit.is-result .aura-fit__aside { display: none; }
	.aura-fit.is-result .aura-fit__picks-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
	.aura-fit .aura-fit__picks-list .aura-fit__pick:first-child { grid-column: auto !important; }
}
@media (min-width: 1024px) {
	.aura-fit.is-result { --af-panel-w: 1180px; }
	.aura-fit.is-result .aura-fit__picks-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* the panel height, in the units mobile toolbars respect (the original
   declared dvh first and then overrode it with vh) */
@supports (height: 100dvh) {
	.aura-fit__panel { max-height: 92dvh; }
	@media (min-width: 700px) { .aura-fit__panel { max-height: 88dvh; } }
	@media (max-height: 520px) { .aura-fit__panel { max-height: 100dvh; } }
}