/* ALOFTAURA — home section 2. Namespaced under .aura2 and sharing no class name
 * with the theme's own markup (.slidersectin, .bb-left-side, .product-description)
 * ON PURPOSE: custom.css carries !important height rules for those, and
 * inheriting them is how the old fixed heights come back. Nothing here needs
 * !important.
 *
 * Ratios throughout, never device heights. There is not one hardcoded pixel
 * height in this file.
 */

.aura2 {
	/* ── the configuration ───────────────────────────────────────────────────
	   --a2-ar        the proportion of the photograph on the left. Written onto
	                  the stage by the script on every change; everything about
	                  the split is derived from it. Declared here only as a
	                  square fallback for the moment before the script runs.
	   --a2-ar-r      the same for the second picture, top right. Used to give
	                  that frame the picture's own shape once the two stack on a
	                  phone, where there is no leftover height to hand it.
	   --a2-media-min the share of the STAGE HEIGHT the top-right media keeps, as
	                  a bare number. It is multiplied by --a2-h rather than
	                  written as a percentage on purpose — see the note on
	                  .aura2__media.
	   --a2-h         the height of the stage. A MINIMUM: a product whose copy
	                  runs long makes it taller rather than having the copy cut.
	   --a2-lmin/max  how thin and how wide the photograph's pane may get, so one
	                  extreme upload cannot run the layout.
	   --a2-morph     how long the seam takes to travel between two products.  */
	--a2-ar: 1;
	--a2-ar-r: 1.3333;              /* the second picture's own proportion */
	--a2-h: min(78vh, 780px);
	--a2-lmin: 26%;
	--a2-lmax: 60%;
	--a2-media-min: 0.46;
	--a2-strip: 16 / 9;
	--a2-morph: 820ms;

	--a2-ink: #f2efe9;              /* warm off-white — pure #fff is clinical */
	--a2-dim: rgba(242, 239, 233, 0.46);
	--a2-black: #000;               /* one black, no near-blacks anywhere */
	--a2-rule: rgba(242, 239, 233, 0.16);
	--a2-fade: 560ms;
	--a2-ease: cubic-bezier(0.16, 0.84, 0.28, 1);
	--a2-pad: clamp(18px, 2.2vw, 40px);

	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: var(--a2-black);
	color: var(--a2-ink);
	position: relative;
	isolation: isolate;

	/* The theme's own face. It is declared here rather than left to inherit
	   because the theme sets it on `body, h1-h6, p, a, span` — a list that does
	   NOT include <button>, and every control in this section is a button.
	   Without this the tabs and the arrows fall back to the UA font while the
	   copy beside them does not, which reads as two different sections. */
	font-family: 'intrepid-regular', 'Intrepid', sans-serif;

	/* The widget is a flex ITEM of an Elementor container, so width:100% alone
	   leaves it shrink-to-fit — measured at 664px inside a 1440px container on
	   the live page. */
	flex: 1 1 100%;
	align-self: stretch;

	/* Nothing inside may add to the page's scrollable width: on a 390px phone a
	   transform that escaped made the document 498px wide, which the browser
	   answers by zooming the whole page out. `clip` clips transformed
	   descendants without creating a scroll container. */
	overflow: hidden;
	overflow: clip;
}

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

/* A section cannot widen itself out of a shrink-to-fit parent, so the wrappers
   between it and the Elementor container are widened — only those that actually
   contain it. The script does the same walk for browsers without :has(), which
   is also what covers the first paint. */
.elementor-widget:has(.aura2),
.elementor-widget-container:has(.aura2),
.elementor-shortcode:has(.aura2) {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
	padding-left: 0;
	padding-right: 0;
}

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

.aura2__stage {
	position: relative;
	display: grid;
	width: 100%;
	background: var(--a2-black);
	overflow: hidden;
	overflow: clip;
}

.aura2__track {
	display: grid;
	position: relative;
	touch-action: pan-y;            /* vertical page scroll stays the page's */
}

/* Every slide sits in the same grid cell, so the stage is as tall as the
   tallest one and changing product never moves the page under a reader. */
.aura2__slide {
	grid-area: 1 / 1;
	display: flex;
	align-items: stretch;
	min-width: 0;
	max-width: 100%;
	min-height: var(--a2-h);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--a2-fade) var(--a2-ease),
	            visibility 0s linear var(--a2-fade);
}

.aura2__slide[data-active="true"] {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--a2-fade) var(--a2-ease), visibility 0s;
	z-index: 1;
}

/* ---- left: the photograph, flush top and bottom -------------------------- */

/* THE PHOTOGRAPH RUNS THE FULL HEIGHT OF THE SECTION.
 *
 * `align-self: stretch` makes the pane exactly as tall as the stage, so the
 * picture is flush against the top and bottom edges with no black band at
 * either end. Its WIDTH is then that height times the picture's own proportion
 *
 *     width = H · ar
 *
 * which is precisely how wide that photograph is at that height — so it fills
 * the pane corner to corner with nothing cut off and nothing padded. A fixed
 * half-width column cannot do that: whichever photo is not 1:1 with it gets
 * either cropped or letterboxed, and the old section did both.
 *
 * When the product changes only that one number changes, so the seam TRAVELS
 * to the new shape and the column beside it widens or narrows in step.
 */
.aura2__photo {
	flex: 0 0 auto;
	align-self: stretch;
	position: relative;
	aspect-ratio: var(--a2-ar);
	min-width: var(--a2-lmin);
	max-width: var(--a2-lmax);
	overflow: hidden;
	overflow: clip;
	background: var(--a2-black);
	transition: aspect-ratio var(--a2-morph) var(--a2-ease);
}

/* `cover`, not `contain`, and only because the pane is already the picture's
   own shape: at that size the two are identical and nothing is cropped. Where a
   clamp above bites — one panorama, one very tall portrait — the pane is no
   longer the picture's shape, and there `cover` keeps the photograph flush top
   and bottom where `contain` would open black bars across the full height. Top
   and bottom flush is the property being protected. */
.aura2__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	border: 0;
}

/* ---- right: media, tabs, words, arrows ----------------------------------- */

.aura2__col {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--a2-black);
}

/* THE MEDIA IS ALWAYS TALLER THAN THE WORDS BENEATH IT.
 *
 * It grows into whatever height the rest of the column does not need, and it
 * has a floor besides — so it keeps the largest share of the column and cannot
 * be pushed under the description by a wordy product.
 *
 * THE FLOOR IS A LENGTH, NOT A PERCENTAGE, and that is not a style choice.
 * `min-height: 56%` resolves against the column's height, which is itself the
 * stage's height, which is what this content is supposed to be able to grow.
 * The percentage therefore resolved against a height that had ALREADY been
 * fixed, the floor came out larger than the space left over, and the column
 * overflowed its own box by 67px — the arrows ran out of the bottom of the
 * section. Multiplying --a2-h by a bare number breaks that circularity: the
 * floor is a fixed length, so when the copy is long the stage grows to fit
 * instead of the arrows falling off it. */
.aura2__media {
	position: relative;
	flex: 1 1 auto;
	min-height: calc(var(--a2-h) * var(--a2-media-min));
	overflow: hidden;
	overflow: clip;
	background: var(--a2-black);
}

/* `cover` never distorts a picture — it fills the frame and crops the overflow,
   so the garment keeps its true proportions whatever shape the frame ends up.
   Resolution is a separate matter and is handled by the `sizes` attribute the
   script writes: this frame is about 45vw on a desktop, so telling the browser
   60vw would have it fetch a file half again larger than it can display, and
   telling it 25vw would have it fetch one too small and show it soft. */
.aura2__media img,
.aura2__media .aura2__vid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	border: 0;
}

/* The fallback when a product has only one photograph: the same picture, pushed
   in and up so it reads as a detail of the garment rather than a duplicate. One
   gallery image retires this. */
.aura2__media img.is-echo { object-position: 50% 28%; }

/* `data-video` swaps this frame's <img> for a <video>. It is given the image's
   geometry above rather than rules of its own, so the two are the same frame and
   cannot drift apart. Only the parts an <img> has no equivalent for are set
   here: the poster has to be told to fill the same box, and the element must not
   take the pointer — it carries no controls, and a click landing on it instead
   of the slide would swallow a swipe. */
.aura2__media .aura2__vid {
	pointer-events: none;
	background: var(--a2-black);
}
.aura2__media .aura2__vid::-webkit-media-controls { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
	.aura2__slide .aura2__media img,
	.aura2__slide .aura2__media .aura2__vid {
		transform: scale(1.05);
		transition: transform 1.5s var(--a2-ease);
	}
	.aura2__slide[data-active="true"] .aura2__media img,
	.aura2__slide[data-active="true"] .aura2__media .aura2__vid { transform: scale(1); }
	.aura2__slide .aura2__media img.is-echo { transform: scale(1.32); }
	.aura2__slide[data-active="true"] .aura2__media img.is-echo { transform: scale(1.26); }
}

/* INTREPID, EVERYWHERE, NOT JUST WHERE IT INHERITS.
   The face is declared on .aura2 above, but inheritance is not enough on its
   own: <button>, <a> and <video> all carry a UA font that beats an inherited
   one, the theme re-states its own face on `a` and `span`, and a plugin that
   loads after this can restate it again. Naming every element the section
   actually prints text in costs one rule and closes all three routes. */
.aura2 button,
.aura2 a,
.aura2 span,
.aura2 p,
.aura2 h3,
.aura2 input,
.aura2 select {
	font-family: 'intrepid-regular', 'Intrepid', sans-serif;
}

/* ---- the MEN / WOMEN tabs, directly under that media --------------------- */

.aura2__tabs {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	/* Centred with everything else in this column. The tabs, the words, the
	   button and the arrows now share one axis down the middle of the panel
	   rather than a left edge — which is what makes the column read as one
	   block against the full-height photograph beside it. */
	justify-content: center;
	gap: clamp(20px, 3vw, 46px);
	padding: clamp(14px, 1.6vw, 24px) var(--a2-pad) clamp(12px, 1.4vw, 20px);
	border-top: 1px solid var(--a2-rule);
	background: var(--a2-black);
}

.aura2__tab {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	color: var(--a2-dim);
	font: inherit;
	font-size: clamp(11px, 0.82vw, 13px);
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-align: center;
	padding: 8px 0;
	min-height: 40px;               /* thumb-sized, not mouse-sized */
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	transition: color 0.45s var(--a2-ease), opacity 0.45s var(--a2-ease);
}

/* A rule that draws itself in, not a filled chip — on a black ground a filled
   chip is a rectangle of nothing. Driven by the slider's own index, so it stays
   correct after an arrow or a swipe and not only after a tap. */
.aura2__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0.3em;                   /* the letter-spacing's trailing gap */
	bottom: 2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.55s var(--a2-ease);
}

.aura2__tab:hover { color: var(--a2-ink); }
.aura2__tab[aria-selected="true"] { color: var(--a2-ink); }
.aura2__tab[aria-selected="true"]::after { transform: scaleX(1); }
.aura2__tab:focus-visible { outline: 1px solid var(--a2-ink); outline-offset: 5px; }

/* ---- the words, ranged left ---------------------------------------------- */

.aura2__panel {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	/* CENTRED. The column is a narrow measure beside a full-height photograph,
	   and centring is what makes the title, the copy and the button read as one
	   block against it rather than three things sharing a left edge.
	   TO PUT IT BACK: `align-items: flex-start` here and `text-align: left` on
	   the three rules below — nothing else depends on this. */
	align-items: center;
	text-align: center;
	gap: clamp(8px, 1vw, 14px);
	padding: clamp(16px, 1.9vw, 30px) var(--a2-pad) clamp(16px, 1.8vw, 28px);
	border-top: 1px solid var(--a2-rule);
	background: var(--a2-black);
	position: relative;
	z-index: 2;
}

.aura2__title {
	margin: 0;
	color: var(--a2-ink);
	font-size: clamp(13px, 1.1vw, 17px);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.4;
}

/* Shown in full. Not clamped, and certainly not the old `height: 379px;
   overflow: overlay` — a box that scrolls inside a page that scrolls is a trap
   on a phone, and copy nobody can finish is copy nobody wrote for a reason. The
   measure is capped in CHARACTERS rather than pixels, so the line length stays
   readable at every width without a breakpoint. */
.aura2__info {
	min-height: 0;
	max-width: 52ch;
	/* `auto` on the sides, not 0 — a centred block still has to centre itself
	   once the measure caps it, or it sits left inside its own column. */
	margin: 0 auto;
	color: var(--a2-dim);

	/* IT ADJUSTS TO WHAT IS IN IT.
	 *
	 * These descriptions are not written to a length: one product gives two
	 * lines and another seven, and a size picked for the short one either
	 * overflows the column on the long one or wastes the space on the short one.
	 * The script counts the lines it just wrote into `--a2-lines`, and the size
	 * and the leading are interpolated from it: the more lines there are, the
	 * tighter both get, down to a floor that is still comfortably readable.
	 *
	 * Done here rather than by measuring the rendered height in JavaScript,
	 * because reading a height forces a layout on every slide change and the
	 * value is only right until the viewport moves. This holds at every width on
	 * its own, and falls back to the middle of the range where the property is
	 * missing. */
	--a2-lines: 4;
	/* 0 at three lines or fewer, 1 at seven or more, sliding between. */
	--a2-tight: clamp(0, calc((var(--a2-lines) - 3) / 4), 1);
	font-size: clamp(12.5px, calc(0.45vw + 8.1px - 2px * var(--a2-tight)), 14.5px);
	line-height: calc(1.95 - 0.35 * var(--a2-tight));
	letter-spacing: 0.06em;
	text-align: center;
	text-wrap: pretty;              /* no orphaned last word, where supported */
	transition: color 0.45s var(--a2-ease), font-size 0.45s var(--a2-ease),
	            line-height 0.45s var(--a2-ease);
}

.aura2__info p { margin: 0; }
.aura2__info p + p { margin-top: 0.85em; }
.aura2__info a { color: inherit; }

/* A BOX, not a bare rule. On a black ground an underlined phrase reads as a
   link and gets missed; an outlined box reads as the thing you press, and it is
   the only element in the section with a border on all four sides, which is
   what makes it the obvious target. It inverts on hover rather than merely
   changing colour, so the state change is unmistakable. */
.aura2__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	/* The label sits in the middle of the box. It used to be pushed left with a
	   rule held out to the right; that rule is gone, and centring is the only
	   thing that reads as deliberate once it is — a lone left-ranged label in a
	   330px box looks like the other half failed to load. */
	justify-content: center;
	align-self: center;
	width: min(330px, 100%);
	margin-top: clamp(8px, 1.1vw, 16px);
	min-height: 52px;
	padding: 15px clamp(16px, 1.4vw, 22px);
	border: 1px solid var(--a2-rule);
	border-radius: 0;
	background: transparent;
	color: var(--a2-ink);
	font: inherit;
	font-family: inherit;
	font-size: clamp(10px, 0.78vw, 12px);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: border-color 0.45s var(--a2-ease), color 0.45s var(--a2-ease);
}

/* The fill arrives from the left, under the label, rather than the whole box
   flipping colour at once. */
.aura2__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--a2-ink);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.5s var(--a2-ease);
	z-index: 0;
}

.aura2__cta > * { position: relative; z-index: 1; }

.aura2__cta:hover,
.aura2__cta:focus-visible { border-color: var(--a2-ink); color: var(--a2-black); }
.aura2__cta:hover::after,
.aura2__cta:focus-visible::after { transform: scaleX(1); }

.aura2__cta:focus-visible { outline: 1px solid var(--a2-ink); outline-offset: 4px; }

/* ---- the arrows and the position rules ----------------------------------- */

.aura2__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	/* The arrows and the product selection, centred under the button. */
	justify-content: center;
	gap: clamp(12px, 1.6vw, 24px);
	min-height: 58px;
	padding: 6px var(--a2-pad) clamp(12px, 1.4vw, 20px);
	border-top: 1px solid var(--a2-rule);
	background: var(--a2-black);
}

/* The theme's arrow is long and open, not a chevron in a circle — so the target
   is a wide rectangle and the arrow is drawn at the size the theme draws it. */
.aura2__arrow {
	flex: 0 0 auto;
	width: 54px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 2px;
	border: 0;
	background: none;
	color: var(--a2-ink);
	cursor: pointer;
	transition: opacity 0.4s var(--a2-ease),
	            transform 0.4s var(--a2-ease),
	            color 0.4s var(--a2-ease);
}

.aura2__arrow svg { width: 100%; height: auto; max-height: 18px; display: block; }

.aura2__arrow--prev:hover:not([disabled]) { transform: translateX(-4px); }
.aura2__arrow--next:hover:not([disabled]) { transform: translateX(4px); }
.aura2__arrow:focus-visible { outline: 1px solid var(--a2-ink); outline-offset: 3px; }

/* At either end the arrow says so rather than silently doing nothing, which is
   exactly what the old dead arrows did on every press. */
.aura2__arrow[disabled] {
	opacity: 0.2;
	cursor: default;
	transform: none;
}

.aura2__arrow[hidden] { display: none; }

.aura2__ticks { display: none; align-items: center; gap: 9px; }
.aura2__ticks[data-active="true"] { display: flex; }

/* Rules, not dots and not a tally: they say where you are and how much is left
   without putting a number on the page. */
.aura2__tick {
	appearance: none;
	-webkit-appearance: none;
	width: 24px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}

.aura2__tick::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--a2-ink);
	opacity: 0.22;
	transform: scaleY(1);
	transform-origin: 50% 50%;
	transition: opacity 0.45s var(--a2-ease), transform 0.45s var(--a2-ease);
}

.aura2__tick:hover::after { opacity: 0.6; }
.aura2__tick[aria-current="true"]::after { opacity: 1; transform: scaleY(2); }
.aura2__tick:focus-visible { outline: 1px solid var(--a2-ink); outline-offset: 2px; }

/* ---- phones: one column -------------------------------------------------- */

@media (max-width: 767px) {
	/* Side by side on a 390px screen the photograph would be a thumbnail, which
	   is the opposite of what this section is for. So it stacks — and the two
	   pictures are not treated alike: the product keeps its own proportion at
	   the full width of the screen, and the supporting detail becomes a strip. */
	.aura2__slide {
		flex-direction: column;
		min-height: 0;
	}

	.aura2__photo {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		aspect-ratio: var(--a2-ar);
		transition: none;            /* nothing is splitting; nothing to morph */
	}

	/* Stacked there is no leftover height to hand this frame, so it takes the
	   picture's OWN proportion instead of an arbitrary strip — the second photo
	   is shown at the shape it was uploaded at. Capped so a tall one cannot push
	   the words off the screen. */
	.aura2__media {
		flex: none;
		aspect-ratio: var(--a2-ar-r);
		min-height: 0;
		max-height: 62vh;
	}

	.aura2__tabs,
	.aura2__panel,
	.aura2__nav { padding-left: clamp(16px, 5vw, 28px); padding-right: clamp(16px, 5vw, 28px); }

	.aura2__info { line-height: 1.9; max-width: none; }

	.aura2__nav { min-height: 54px; gap: 14px; }
	.aura2__tick { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.aura2__slide,
	.aura2__photo,
	.aura2__tab,
	.aura2__tab::after,
	.aura2__cta::after,
	.aura2__cta::before,
	.aura2__arrow,
	.aura2__tick::after,
	.aura2__media img,
	.aura2__media .aura2__vid { transition-duration: 0.01ms; }
}

/* ── 2026-10-15: a clearer stage ─────────────────────────────────────────
   Right column, top to bottom: the product film in a fixed 16:9 frame
   (edge to edge — upload 1920×1080), the MEN / WOMEN tabs, the product
   (name → price → material), the two actions, and the photo bar at the foot:
   ‹  segmented progress  01 / 03  ›. */
html body .aura2 .aura2__col > .aura2__media { order: 1; }
html body .aura2 .aura2__col > .aura2__tabs { order: 2; }
html body .aura2 .aura2__col > .aura2__panel { order: 3; }
html body .aura2 .aura2__col > .aura2__nav { order: 4; }
html body .aura2 .aura2__media {
	flex: 0 0 auto !important;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 0 !important;
	max-height: none;
}
html body .aura2 .aura2__media .aura2__vid,
html body .aura2 .aura2__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
html body .aura2 .aura2__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}
html body .aura2 .aura2__title a { color: inherit; text-decoration: none; }
html body .aura2 .aura2__title a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
html body .aura2 .aura2__price {
	margin: 0;
	font-size: 15px;
	letter-spacing: .08em;
	color: var(--a2-ink);
}
html body .aura2 .aura2__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
	width: 100%;
}
html body .aura2 .aura2__actions > a { flex: 1 1 200px; max-width: 280px; }
html body .aura2 .aura2__shop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 22px;
	background: var(--a2-ink);
	color: var(--a2-black);
	border: 1px solid var(--a2-ink);
	font-size: 11px;
	letter-spacing: .32em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .3s var(--a2-ease), color .3s var(--a2-ease);
}
html body .aura2 .aura2__shop:hover { background: transparent; color: var(--a2-ink); }
html body .aura2 .aura2__shop:focus-visible { outline: 1px solid var(--a2-ink); outline-offset: 4px; }
html body .aura2 .aura2__actions .aura2__cta { margin: 0 !important; }

/* The photo bar: slim arrows, one continuous segmented line, a counter. */
html body .aura2 .aura2__nav {
	gap: 14px;
	min-height: 52px;
	padding-top: 10px;
	padding-bottom: 14px;
}
html body .aura2 .aura2__arrow { width: 36px; height: 36px; opacity: .85; }
html body .aura2 .aura2__arrow:hover:not([disabled]) { opacity: 1; }
html body .aura2 .aura2__arrow svg { max-height: 12px; }
html body .aura2 .aura2__ticks { gap: 4px; }
html body .aura2 .aura2__tick { width: 34px; }
html body .aura2 .aura2__count {
	min-width: 54px;
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--a2-ink);
	opacity: .7;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

@media (max-width: 767px) {
html body .aura2 .aura2__media { aspect-ratio: 16 / 9 !important; max-height: none; }
html body .aura2 .aura2__actions > a { flex: 1 1 140px; }
html body .aura2 .aura2__tick { width: 22px; }
}

/* Fixed proportions, so uploads can be made to an exact size:
   left photograph 3:4 (upload 1500×2000), top-right film 16:9 (1920×1080). */
@media (min-width: 768px) {
	html body .aura2 .aura2__photo {
		flex: 0 0 44% !important;
		width: 44% !important;
		min-width: 0 !important;
		max-width: 44% !important;
		aspect-ratio: 3 / 4 !important;
		align-self: flex-start !important;
		transition: none !important;
	}
	html body .aura2 .aura2__slide { min-height: 0 !important; }
	html body .aura2 .aura2__panel { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 767px) {
	html body .aura2 .aura2__photo { aspect-ratio: 3 / 4 !important; }
}
/* The right column is exactly as tall as the 3:4 photograph on desktop:
   spacing trimmed so film + tabs + product + photo bar fit beside it. */
@media (min-width: 768px) {
	html body .aura2 .aura2__tabs { min-height: 0 !important; padding-top: 16px !important; padding-bottom: 4px !important; }
	html body .aura2 .aura2__panel { padding-top: 14px !important; padding-bottom: 14px !important; gap: 8px; }
	html body .aura2 .aura2__nav { min-height: 46px !important; padding-top: 6px !important; padding-bottom: 10px !important; }
	html body .aura2 .aura2__actions > a { min-height: 46px; }
}
/* Phones: the product photograph first, then the film, then the rest. */
@media (max-width: 767px) {
	html body .aura2 .aura2__photo { order: 1; }
	html body .aura2 .aura2__col { order: 2; }
}

/* ── 2026-10-15: Products recommended ───────────────────────────────────
   Square tiles in place of the Shop now button: up to four other pieces,
   each a link to its product, price beneath. Personalize my aura stays as
   the one call to action under them. */
html body .aura2 .aura2__recs {
	width: 100%;
	max-width: 520px;
	margin: 6px auto 0;
}
html body .aura2 .aura2__recs-h {
	margin: 0 0 10px;
	font-size: 10.5px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--a2-ink);
	opacity: .62;
}
html body .aura2 .aura2__recs-grid {
	display: grid;
	grid-template-columns: repeat(var(--a2-recs, 4), minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
html body .aura2 .aura2__recs-grid > li { margin: 0; padding: 0; list-style: none; min-width: 0; }
html body .aura2 .aura2__rec {
	display: flex;
	flex-direction: column;
	gap: 7px;
	color: var(--a2-ink);
	text-decoration: none;
}
html body .aura2 .aura2__rec-img {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #111;
	border: 1px solid rgba(242, 239, 233, .14);
	transition: border-color .3s var(--a2-ease);
}
html body .aura2 .aura2__rec-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform .6s var(--a2-ease), opacity .3s var(--a2-ease);
}
html body .aura2 .aura2__rec:hover .aura2__rec-img,
html body .aura2 .aura2__rec:focus-visible .aura2__rec-img { border-color: rgba(242, 239, 233, .7); }
html body .aura2 .aura2__rec:hover .aura2__rec-img img { transform: scale(1.06); }
html body .aura2 .aura2__rec:focus-visible { outline: none; }
html body .aura2 .aura2__rec-price {
	font-size: 11px;
	letter-spacing: .08em;
	opacity: .8;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
html body .aura2 .aura2__actions { margin-top: 4px; }
html body .aura2 .aura2__actions > a { flex: 1 1 260px; max-width: 520px; }

/* With the tiles the right column can be taller than a 3:4 photograph; the
   photograph then grows to match (cropped from the centre) rather than
   leaving a gap beneath it. */
@media (min-width: 768px) {
	html body .aura2 .aura2__photo {
		aspect-ratio: auto !important;
		align-self: stretch !important;
		min-height: calc(44vw * 4 / 3);
	}
	html body .aura2 .aura2__photo img { width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 767px) {
	html body .aura2 .aura2__recs-grid { gap: 8px; }
	html body .aura2 .aura2__rec-price { font-size: 10px; }
}
@media (min-width: 768px) {
	html body .aura2 .aura2__recs,
	html body .aura2 .aura2__actions > a { max-width: 440px; }
	html body .aura2 .aura2__recs { margin-top: 2px; }
	html body .aura2 .aura2__recs-h { margin-bottom: 8px; }
	html body .aura2 .aura2__panel { gap: 6px; }
}

/* ── 2026-10-15: phones — the photo bar fits the screen ─────────────────
   On a 360–430px screen the two arrows were pushed off both edges (the
   segmented line took the room). The line now shares what is left, and
   every control has a 40px touch target. */
@media (max-width: 767px) {
	html body .aura2 .aura2__nav {
		gap: 6px !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
		justify-content: space-between;
	}
	html body .aura2 .aura2__arrow { flex: 0 0 40px; width: 40px; height: 40px; opacity: 1; }
	html body .aura2 .aura2__ticks[data-active="true"] { display: flex; flex: 1 1 auto; min-width: 0; gap: 4px; }
	html body .aura2 .aura2__tick { flex: 1 1 0; width: auto; min-width: 10px; max-width: 64px; height: 40px; }
	html body .aura2 .aura2__count { flex: 0 0 auto; min-width: 0; font-size: 10.5px; letter-spacing: .12em; }
	html body .aura2 .aura2__tab { min-height: 44px; }
	html body .aura2 .aura2__title { letter-spacing: .14em; overflow-wrap: anywhere; }
	html body .aura2 .aura2__info p { overflow-wrap: anywhere; }
}
@media (min-width: 768px) {
	html body .aura2 .aura2__tick { height: 32px; }
}

/* ── 2026-10-16: Best match ──────────────────────────────────────────────
   Three tiles at most, each answering the shopper's own inputs. A quiet
   heading line (label left, reason right), the name under each square so
   nobody has to guess, the size they fit marked on the picture, and the top
   match edged in the house gold. */
html body .aura2 .aura2__recs[hidden] { display: none !important; }
html body .aura2 .aura2__recs { max-width: 440px; margin-top: 8px; }
html body .aura2 .aura2__recs-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 14px;
	flex-wrap: wrap;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(242, 239, 233, .12);
}
html body .aura2 .aura2__recs-top .aura2__recs-h { margin: 0; opacity: .9; font-weight: 600; }
html body .aura2 .aura2__recs-why {
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #cbb994;
	white-space: nowrap;
}
html body .aura2 .aura2__recs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html body .aura2 .aura2__rec { gap: 6px; text-align: left; }
html body .aura2 .aura2__rec.is-top .aura2__rec-img { border-color: rgba(203, 185, 148, .75); }
html body .aura2 .aura2__rec-tag {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	padding: 3px 6px;
	font-size: 9.5px;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #0b0b0c;
	background: rgba(242, 239, 233, .92);
}
html body .aura2 .aura2__rec-name {
	display: block;
	font-size: 10.5px;
	line-height: 1.35;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--a2-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
html body .aura2 .aura2__rec-price { font-size: 11px; opacity: .72; margin-top: -2px; }
@media (max-width: 767px) {
	html body .aura2 .aura2__recs { max-width: none; }
	html body .aura2 .aura2__recs-grid { gap: 8px; }
	html body .aura2 .aura2__rec-name { font-size: 9.5px; letter-spacing: .06em; }
	html body .aura2 .aura2__recs-why { font-size: 9.5px; letter-spacing: .1em; }
}
html body .aura2 .aura2__rec-best {
	position: absolute; left: 0; top: 0; z-index: 1;
	padding: 3px 6px; font-size: 9px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
	color: #0b0b0c; background: #cbb994;
}