/**
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * THE SCOPE HERE IS `.afw-p--lux`, AND IT IS THE DESIGN SYSTEM — NOT "plush"
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 *
 * 🔴 READ THIS BEFORE JUDGING THE FILENAME. From 2026-09-20 this stylesheet dresses BOTH product
 *   templates: `tmpl-product-plush.php` (which adds `.afw-p--plush`) and `tmpl-product.php` for
 *   OUTFITS (which adds `.afw-p--outfit`). Both carry `.afw-p--lux`, and that is what every rule
 *   below hangs off. The owner approved extending the plush design to the Outfits category; the
 *   file keeps its name because renaming it would mean re-pointing the enqueue, the handle and
 *   every reference for no gain.
 *
 * ⚠️ THE TWO TEMPLATES SHARE A STRUCTURAL VOCABULARY, which is why one stylesheet can serve both:
 *   `afw-p-top`, `afw-p-gallery`, `afw-p-rail`, `afw-p-stage`, `afw-p-info`, `afw-p-title`,
 *   `afw-p-price`, `afw-p-sizes`, `afw-p-cart`, `afw-p-tabs`, `afw-p-related` and the rest are
 *   emitted by both. Rules keyed on those dress both.
 *
 * ⚠️ PLUSH-ONLY RULES ARE INERT ON OUTFITS BY ELEMENT, NOT BY SCOPE. Every plush-specific rule also
 *   names an `afw-pl-*` class - the arrival line, the assurance block, the plush FAQ, the
 *   description header - and the outfit template emits none of them. So they match nothing there.
 *   If you ever add a rule that must NOT reach outfits, scope it `.afw-p--plush`, not `.afw-p--lux`.
 *
 * ⚠️ AND ANYTHING TRULY OUTFIT-ONLY GOES UNDER `.afw-p--outfit`, at the end of this file, never by
 *   editing a `--lux` rule - that would silently restyle the plush pages the owner signed off.
 */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PLUSH PRODUCT PAGE — 2026-09-19. Loaded only on plush products, after product.css.
   Every rule is scoped under .afw-p--lux, so nothing here can reach an outfit page even if the
   file were loaded there by mistake.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── under the buy box ────────────────────────────────────────────────────────────────────── */
.afw-p--lux .afw-pl-ship strong { font-weight: 600; color: var(--afw-ink, #1c1a22); }
.afw-p--lux .afw-pl-eta {
	display: block;
	margin-top: 4px;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--afw-meta, #6e6b7b);
}
.afw-p--lux .afw-pl-eta.is-live { display: grid; gap: 1px; }
.afw-p--lux .afw-pl-eta b { font-weight: 600; color: var(--afw-ink-2, #4c4a57); font-variant-numeric: tabular-nums; }

/* ── description: a small icon beside each heading ───────────────────────────────────────── */
.afw-p--lux .afw-pl-desc .afw-pl-dh {
	display: flex;
	align-items: center;
	gap: 12px;
}
.afw-p--lux .afw-pl-dh-i {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--afw-mauve-tint, #f3f0f9);
	color: var(--afw-mauve-strong, #5f4a8a);
}
.afw-p--lux .afw-pl-desc h3.afw-pl-dh .afw-pl-dh-i { width: 28px; height: 28px; }
.afw-p--lux .afw-pl-dh-i .afw-i { width: 16px; height: 16px; }

/* ── Read more / Read less ───────────────────────────────────────────────────────────────── */
.afw-p--lux .afw-pl-desc.is-folded {
	position: relative;
	/* the fold height is a variable so `plush.js` can push the line past the sizing table; the
	   fallback is the original 460px, so a plush page computes exactly what it always did */
	max-height: var(--afw-pl-fold, 460px);
	overflow: hidden;
}
.afw-p--lux .afw-pl-desc.is-folded::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 120px;
	background: linear-gradient(180deg, rgba(251, 250, 252, 0) 0%, var(--afw-paper, #fbfafc) 88%);
	pointer-events: none;
}
.afw-p--lux .afw-pl-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0 0 3px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--afw-mauve-soft, #a78bc9);
	border-radius: 0;
	font: 600 0.9rem/1.4 var(--afw-sans, sans-serif);
	color: var(--afw-mauve-strong, #5f4a8a);
	cursor: pointer;
}
.afw-p--lux .afw-pl-more i {
	width: 7px; height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 200ms ease;
}
.afw-p--lux .afw-pl-more[aria-expanded="true"] i { transform: translateY(2px) rotate(-135deg); }
.afw-p--lux .afw-pl-more:hover { color: var(--afw-ink, #1c1a22); }
.afw-p--lux .afw-pl-more:focus-visible { outline: 2px solid var(--afw-mauve, #7a62a8); outline-offset: 4px; }

/* ── You may also like: a slider ─────────────────────────────────────────────────────────────
   The track keeps `afw-grid` so every card is styled exactly as it is in the catalogue; only the
   layout changes. (0,4,0) outranks product.css's `.afw-p-related .afw-grid` grid rules. */
.afw-p--lux .afw-pl-rel-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}
.afw-p--lux .afw-pl-rel-head h2 { margin-bottom: 0; }
.afw-p--lux .afw-pl-rel-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.afw-p--lux .afw-pl-rel-nav[hidden] { display: none; }
.afw-p--lux .afw-pl-rel-nav button {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: var(--afw-card, #fff);
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 50%;
	color: var(--afw-ink, #1c1a22);
	cursor: pointer;
	transition: border-color var(--afw-ease, 150ms ease-out), background-color var(--afw-ease, 150ms ease-out),
	            opacity var(--afw-ease, 150ms ease-out);
}
.afw-p--lux .afw-pl-rel-nav button:hover:not(:disabled) {
	border-color: var(--afw-mauve-soft, #a78bc9);
	background: var(--afw-mauve-tint, #f3f0f9);
}
.afw-p--lux .afw-pl-rel-nav button:disabled { opacity: 0.35; cursor: default; }
.afw-p--lux .afw-pl-rel-nav button:focus-visible { outline: 2px solid var(--afw-mauve, #7a62a8); outline-offset: 2px; }
.afw-p--lux .afw-pl-prev .afw-i { transform: rotate(180deg); }

.afw-p-related.afw-pl-rel .afw-grid.afw-pl-track {
	display: flex;
	grid-template-columns: none;
	gap: 22px;
	margin-top: 26px;
	padding: 4px 2px 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.afw-p-related.afw-pl-rel .afw-grid.afw-pl-track::-webkit-scrollbar { display: none; }
.afw-p-related.afw-pl-rel .afw-grid.afw-pl-track:focus-visible {
	outline: 2px solid var(--afw-mauve, #7a62a8);
	outline-offset: 4px;
}
.afw-p-related.afw-pl-rel .afw-grid.afw-pl-track > .afw-c {
	flex: 0 0 calc((100% - 3 * 22px) / 4);
	min-width: 0;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.afw-p-related.afw-pl-rel .afw-grid.afw-pl-track { gap: 16px; }
	/* 2.3 cards in view: the cut-off third card is the cue that the row scrolls */
	.afw-p-related.afw-pl-rel .afw-grid.afw-pl-track > .afw-c { flex-basis: calc((100% - 2 * 16px) / 2.3); }
}
@media (max-width: 600px) {
	.afw-p--lux .afw-pl-rel-nav button { width: 38px; height: 38px; }
	.afw-p--lux .afw-pl-dh-i { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.afw-p--lux .afw-pl-more i,
	.afw-p--lux .afw-pl-rel-nav button { transition: none; }
}

/* ── the tab bar on phones ───────────────────────────────────────────────────────────────────
   Measured at 390px: "Additional information" made the three tabs 438px wide in a 354px bar, so
   Reviews sat off-screen in a scroller with a hidden scrollbar. A shorter label below 600px and no
   tab icons below 420px bring it to 298px + gaps: fits at 390 and at 360, nothing to discover. */
.afw-p--lux .afw-pl-tab-short { display: none; }
@media (max-width: 600px) {
	.afw-p--lux .afw-p-tabs .afw-p-tabnav button { padding: 13px 11px 14px; gap: 7px; }
	.afw-p--lux .afw-pl-tab-long { display: none; }
	.afw-p--lux .afw-pl-tab-short { display: inline; }
}
@media (max-width: 420px) {
	.afw-p--lux .afw-p-tabs .afw-p-tabnav button svg { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ROUND 2 — 2026-09-19: badges, product FAQ, one background, sticky bar
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the four badges ─────────────────────────────────────────────────────────────────────────
   Two-tone icons in the brand purple (#7850c0, the logo's purple) inside one round chip each:
   a soft fill under a fine line, the way a printed seal reads. */
.afw-p--lux .afw-p-trust.afw-pl-tb {
	display: grid;
	gap: 0;
	margin: 22px 0 0;
	padding: 4px 0;
	border-top: 1px solid var(--afw-hair, #eeeaf3);
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
	list-style: none;
}
.afw-p--lux .afw-pl-tb li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 11px 0;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--afw-ink-2, #4c4a57);
}
.afw-p--lux .afw-pl-tb li + li { border-top: 1px solid var(--afw-hair, #eeeaf3); }
.afw-p--lux .afw-pl-tb-i {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #ffffff 0%, var(--afw-mauve-tint, #f3f0f9) 70%);
	box-shadow: inset 0 0 0 1px rgba(120, 80, 192, 0.16);
	color: var(--afw-mauve-brand, #7850c0);
}
/* (0,4,1): must outrank product.css `.afw-p-info .afw-p-trust li svg` (0,2,2), which pins every
   trust icon to 15px, a darker stroke and 0.9 opacity - measured on the first render, where the
   new icons came out 15px wide inside 40px chips */
.afw-p--lux .afw-p-info .afw-pl-tb .afw-pl-tb-i svg {
	width: 22px;
	height: 22px;
	margin: 0;
	opacity: 1;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.55;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.afw-p--lux .afw-p-info .afw-pl-tb .afw-pl-tb-i svg .f { fill: currentColor; fill-opacity: 0.14; stroke: none; }
.afw-p--lux .afw-p-info .afw-pl-tb .afw-pl-tb-i svg .b { fill: var(--afw-card, #fff); stroke: none; }
.afw-p--lux .afw-pl-tb-t strong { font-weight: 600; color: var(--afw-ink, #1c1a22); }
.afw-p--lux .afw-pl-tb-t a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--afw-line, #e4deec);
	transition: border-color var(--afw-ease, 150ms ease-out), color var(--afw-ease, 150ms ease-out);
}
.afw-p--lux .afw-pl-tb-t a:hover { color: var(--afw-mauve-strong, #5f4a8a); border-bottom-color: var(--afw-mauve-soft, #a78bc9); }
.afw-p--lux .afw-pl-tb .afw-pl-ship a { border-bottom: 0; }
.afw-p--lux .afw-pl-tb .afw-pl-eta { margin-top: 2px; font-size: 0.84rem; }

/* ── the product FAQ ───────────────────────────────────────────────────────────────────────── */
.afw-p--lux .afw-pl-faq {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
	gap: 56px;
	margin-top: 76px;
	padding-top: 56px;
	border-top: 1px solid var(--afw-line, #e4deec);
}
.afw-p--lux .afw-pl-faq-eyebrow {
	margin: 0 0 10px;
	font: 600 0.72rem/1.2 var(--afw-sans, sans-serif);
	letter-spacing: var(--afw-tr-label, 0.08em);
	text-transform: uppercase;
	color: var(--afw-mauve-strong, #5f4a8a);
}
.afw-p--lux .afw-pl-faq-head h2 {
	margin: 0;
	font: 400 clamp(1.6rem, 2.6vw, 2.1rem)/1.15 var(--afw-serif, Georgia, serif);
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.afw-p--lux .afw-pl-q { border-bottom: 1px solid var(--afw-line, #e4deec); }
.afw-p--lux .afw-pl-q:first-child { border-top: 1px solid var(--afw-line, #e4deec); }
.afw-p--lux .afw-pl-q summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 19px 0;
	list-style: none;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--afw-ink, #1c1a22);
}
.afw-p--lux .afw-pl-q summary::-webkit-details-marker { display: none; }
.afw-p--lux .afw-pl-q summary:hover .afw-pl-q-t { color: var(--afw-mauve-strong, #5f4a8a); }
.afw-p--lux .afw-pl-q summary:focus-visible { outline: 2px solid var(--afw-mauve, #7a62a8); outline-offset: 4px; }
.afw-p--lux .afw-pl-q-x {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 50%;
	transition: background-color var(--afw-ease, 150ms ease-out), border-color var(--afw-ease, 150ms ease-out);
}
.afw-p--lux .afw-pl-q-x::before,
.afw-p--lux .afw-pl-q-x::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 11px; height: 1.5px;
	margin: -0.75px 0 0 -5.5px;
	background: var(--afw-mauve-strong, #5f4a8a);
	transition: transform 220ms ease;
}
.afw-p--lux .afw-pl-q-x::after { transform: rotate(90deg); }
.afw-p--lux .afw-pl-q[open] .afw-pl-q-x { background: var(--afw-mauve-tint, #f3f0f9); border-color: var(--afw-mauve-soft, #a78bc9); }
.afw-p--lux .afw-pl-q[open] .afw-pl-q-x::after { transform: rotate(0deg); }
.afw-p--lux .afw-pl-a { padding: 0 48px 20px 0; font-size: 0.96rem; line-height: 1.7; color: var(--afw-ink-2, #4c4a57); }
.afw-p--lux .afw-pl-a p { margin: 0 0 10px; }
.afw-p--lux .afw-pl-a > :last-child { margin-bottom: 0; }
.afw-p--lux .afw-pl-a-link a {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 600;
	color: var(--afw-mauve-strong, #5f4a8a);
	text-decoration: none;
	border-bottom: 1px solid var(--afw-mauve-soft, #a78bc9);
}

/* ── ONE BACKGROUND, TOP TO BOTTOM ─────────────────────────────────────────────────────────────
   product.css paints "You may also like" as a panel with its own gradient, which on a wide screen
   showed as a lighter box with visible side edges. On plush pages every section sits on the same
   paper; the footer's own band begins below the last section. */
.afw-p--lux,
.afw-p--lux .afw-p-tabs,
.afw-p--lux .afw-pl-faq,
.afw-p--lux .afw-p-related { background: var(--afw-paper, #fbfafc); }
.afw-p--lux .afw-p-related { padding-top: 8px; }

/* ── THE STICKY ADD-TO-CART BAR ────────────────────────────────────────────────────────────────
   Desktop: a floating card, centred, frosted, with the product's own photograph. Phone: a bottom
   sheet with rounded top corners that respects the home-indicator safe area. product.js still owns
   when it appears and what it submits; this is appearance only. */
body.afw-lux .afw-p-stickybar {
	left: 50%;
	right: auto;
	bottom: 18px;
	width: min(880px, calc(100% - 40px));
	transform: translate(-50%, calc(100% + 30px));
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(120, 80, 192, 0.16);
	border-radius: 18px;
	box-shadow: 0 22px 60px rgba(44, 30, 78, 0.18), 0 3px 10px rgba(44, 30, 78, 0.07);
}
@supports (backdrop-filter: blur(1px)) {
	body.afw-lux .afw-p-stickybar {
		background: rgba(255, 255, 255, 0.78);
		backdrop-filter: blur(18px) saturate(1.2);
	}
}
body.afw-lux .afw-p-stickybar.is-on { transform: translate(-50%, 0); }
body.afw-lux .afw-p-sb-in {
	max-width: none;
	gap: 14px;
	padding: 10px 10px 10px 10px;
}
body.afw-lux .afw-pl-sb-thumb {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	object-fit: cover;
	border-radius: 12px;
	background: var(--afw-paper, #fbfafc);
	box-shadow: inset 0 0 0 1px rgba(28, 26, 34, 0.06);
}
body.afw-lux .afw-pl-sb-info {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	gap: 2px;
}
body.afw-lux .afw-p-sb-name { font-size: 16.5px; }
body.afw-lux .afw-p-sb-price { font-size: 14.5px; font-weight: 600; color: var(--afw-mauve-strong, #5f4a8a); }
body.afw-lux .afw-p-sb-cta {
	min-height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: 13px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	background: linear-gradient(135deg, #8a64d6 0%, var(--afw-mauve-brand, #7850c0) 45%, #5b3ba3 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(120, 80, 192, 0.32);
}
body.afw-lux .afw-p-sb-cta:hover {
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 30px rgba(120, 80, 192, 0.4);
}
/* the Contact us button steps up above the floating bar instead of sitting on it */
body.afw-lux:has(.afw-p-stickybar.is-on) .afw-cd-trigger { bottom: 112px; }

@media (max-width: 767px) {
	body.afw-lux .afw-p-stickybar {
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		transform: translateY(102%);
		border-width: 1px 0 0;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -12px 36px rgba(44, 30, 78, 0.14);
	}
	body.afw-lux .afw-p-stickybar.is-on { transform: translateY(0); }
	body.afw-lux .afw-p-sb-in {
		gap: 12px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	}
	body.afw-lux .afw-pl-sb-thumb { width: 46px; height: 46px; border-radius: 10px; }
	body.afw-lux .afw-p-sb-name { font-size: 14.5px; }
	body.afw-lux .afw-p-sb-price { font-size: 13.5px; }
	body.afw-lux .afw-p-sb-cta { min-height: 48px; padding: 0 20px; font-size: 14.5px; }
	body.afw-lux:has(.afw-p-stickybar.is-on) .afw-cd-trigger { bottom: 90px; }

	.afw-p--lux .afw-pl-faq { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 56px; padding-top: 40px; }
	.afw-p--lux .afw-pl-a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.afw-p--lux .afw-pl-q-x::before,
	.afw-p--lux .afw-pl-q-x::after,
	body.afw-lux .afw-p-sb-cta { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ROUND 3 — 2026-09-19: buy box, assurance card, swatches, CTA motion, docked contact, cards
   Measured before: on Rose Dragon the buy column ran 435px past the bottom of the image, the buy
   box was 258px tall, and Add to cart / Buy now ended 12px apart on the right.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1a. the photograph stays beside the buy column ──────────────────────────────────────────
   The buy column is always longer than one image. Pinning the gallery under the sticky header
   (80px tall) keeps picture and purchase side by side for the whole column, instead of the
   picture ending while the buy column is still going. Desktop only. */
@media (min-width: 1025px) {
	.afw-p--lux .afw-p-gallery {
		position: sticky;
		top: 104px;
		align-self: start;
	}
}

/* ── 1b. a compact buy box ─────────────────────────────────────────────────────────────────── */
.afw-p--lux .afw-p-info .afw-p-cart {
	margin: 18px 0 0;
	padding: 16px;
	border-radius: 16px;
}
.afw-p--lux .afw-p-info .afw-p-cart .variations tr { margin-bottom: 12px; }
.afw-p--lux .afw-p-info .afw-p-cart .variations .label label {
	font: 600 0.72rem/1.2 var(--afw-sans, sans-serif);
	letter-spacing: var(--afw-tr-label, 0.08em);
	text-transform: uppercase;
	color: var(--afw-meta, #6e6b7b);
}
.afw-p--lux .afw-pl-selval { text-transform: none; letter-spacing: 0; color: var(--afw-ink, #1c1a22); font-weight: 600; }
/* one row: quantity + Add to cart filling it exactly; Buy now below, the same width. row-gap
   stays 0 because the Stripe express-checkout container sits between them as zero-height flex
   items - a row gap would open a 42px hole (measured 2026-09-18) */
.afw-p--lux .afw-p-info .afw-p-cart form.cart,
.afw-p--lux .afw-p-info .afw-p-cart .woocommerce-variation-add-to-cart {
	column-gap: 10px;
	row-gap: 0;
}
.afw-p--lux .afw-p-info .afw-p-cart .quantity { height: 52px; flex: 0 0 auto; }
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	height: 52px;
	min-height: 52px;          /* product.css sets min-height: 58px, which outranks a plain height */
	padding-top: 0;
	padding-bottom: 0;
	margin: 0;
}
/* WooCommerce's <wc-order-attribution-inputs> is a zero-width flex item that still claimed a 10px
   column gap, leaving Add to cart 10px short of Buy now (measured). It holds hidden inputs that
   must still submit, so it is taken out of the flow, not hidden or removed. */
.afw-p--lux .afw-p-info .afw-p-cart wc-order-attribution-inputs { position: absolute; }
@media (max-width: 767px) {
	/* phones: a compact quantity box so Add to cart - with its price once a size is chosen - has
	   the room; measured 138px wide before this */
	.afw-p--lux .afw-p-info .afw-p-cart .quantity { width: 126px; flex: 0 0 126px; padding: 0 4px; }
	/* ...and its parts shrink with it: at 118px the "+" was clipped (seen in the 390px capture) */
	.afw-p--lux .afw-p-info .afw-p-cart .quantity .ecomus-qty-button { flex: 0 0 36px; width: 36px; }
	.afw-p--lux .afw-p-info .afw-p-cart .quantity input.qty { flex: 1 1 auto; width: auto; min-width: 0; padding: 0; }
}
/* size products: WooCommerce caps the variation wrapper's width, so the buttons stopped ~70px short
   of the box while "Clear" reached its edge (measured on Rose Dragon at 1366px) */
.afw-p--lux .afw-p-info .afw-p-cart form.variations_form,
.afw-p--lux .afw-p-info .afw-p-cart .single_variation_wrap,
.afw-p--lux .afw-p-info .afw-p-cart .woocommerce-variation-add-to-cart { width: 100%; max-width: none; }
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button {
	flex: 0 0 100%;
	height: 50px;
	margin: 10px 0 0;
}

/* ── 5a. size swatches ─────────────────────────────────────────────────────────────────────── */
.afw-p--lux .afw-p-cart .afw-p-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.afw-p--lux .afw-p-info .afw-p-cart .afw-p-sw.is-text {
	position: relative;
	min-width: 78px;
	height: 46px;
	padding: 0 18px;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 12px;
	background: #fff;
	color: var(--afw-ink, #1c1a22);
	font: 500 14.5px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 2px rgba(28, 26, 34, 0.04);
	cursor: pointer;
	transition: border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out,
	            background-color 160ms ease-out, color 160ms ease-out;
}
.afw-p--lux .afw-p-info .afw-p-cart .afw-p-sw.is-text:hover:not(:disabled) {
	border-color: var(--afw-mauve-soft, #a78bc9);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(120, 80, 192, 0.12);
}
.afw-p--lux .afw-p-info .afw-p-cart .afw-p-sw.is-text[aria-pressed="true"] {
	border-color: var(--afw-mauve-brand, #7850c0);
	background: linear-gradient(180deg, #ffffff 0%, var(--afw-mauve-tint, #f3f0f9) 100%);
	color: var(--afw-mauve-strong, #5f4a8a);
	font-weight: 600;
	box-shadow: inset 0 0 0 1px var(--afw-mauve-brand, #7850c0), 0 6px 16px rgba(120, 80, 192, 0.18);
}
/* a small check on the chosen size */
.afw-p--lux .afw-p-info .afw-p-cart .afw-p-sw.is-text[aria-pressed="true"]::after {
	content: "";
	position: absolute;
	top: -6px;
	right: -6px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--afw-mauve-brand, #7850c0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
	box-shadow: 0 0 0 2px #fff;
}
.afw-p--lux .afw-p-info .afw-p-cart .afw-p-sw.is-text.is-unavailable,
.afw-p--lux .afw-p-info .afw-p-cart .afw-p-sw.is-text:disabled {
	opacity: 0.45;
	text-decoration: line-through;
	cursor: not-allowed;
	box-shadow: none;
}
.afw-p--lux .afw-p-info .afw-p-cart .afw-p-sw.is-text:focus-visible {
	outline: 2px solid var(--afw-mauve, #7a62a8);
	outline-offset: 2px;
}

/* ── 5b. a gentle glow on the two buying buttons ────────────────────────────────────────────
   Not a shake, not a bounce: a soft purple halo that breathes in and out every few seconds, and
   stops the moment the pointer is on the button. The two buttons breathe on alternate beats so
   the eye is led, not pulled. Add to cart only glows once it CAN be used - on a product with
   sizes it stays still until a size is chosen, which is exactly when a nudge helps. */
@keyframes afw-pl-glow {
	0%, 64%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 16px rgba(95, 74, 138, 0.2); }
	32% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 5px rgba(120, 80, 192, 0.13), 0 14px 34px rgba(120, 80, 192, 0.34); }
}
@keyframes afw-pl-ring {
	0%, 64%, 100% { box-shadow: 0 0 0 0 rgba(120, 80, 192, 0); }
	32% { box-shadow: 0 0 0 4px rgba(120, 80, 192, 0.12); }
}
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button:not(.disabled):not(:disabled) {
	animation: afw-pl-glow 3.8s ease-in-out 1.2s infinite;
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button {
	animation: afw-pl-ring 3.8s ease-in-out 3.1s infinite;
}
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button:hover,
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button:focus-visible,
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:hover,
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:focus-visible { animation-play-state: paused; }

/* ── 2 + 3. ONE ASSURANCE CARD: the badges, then the payment row ─────────────────────────────
   The badges keep their exact words and icons. What changes is the frame: one soft card instead
   of rules running the full width of the column, and dividers inset past the icon column so they
   separate the words, not the icons. The payment row is the card's footer - lock, one line of
   text, the card marks - so the two read as one assurance block. */
.afw-p--lux .afw-pl-assure {
	margin-top: 16px;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 16px;
	background: var(--afw-card, #fff);
	box-shadow: 0 1px 2px rgba(28, 26, 34, 0.03), 0 10px 26px rgba(28, 26, 34, 0.04);
	overflow: hidden;
}
.afw-p--lux .afw-pl-assure .afw-p-trust.afw-pl-tb {
	margin: 0;
	padding: 6px 18px;
	border: 0;
}
.afw-p--lux .afw-pl-assure .afw-pl-tb li {
	position: relative;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 14px;
	padding: 12px 0;
}
.afw-p--lux .afw-pl-assure .afw-pl-tb li + li { border-top: 0; }
.afw-p--lux .afw-pl-assure .afw-pl-tb li + li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50px;
	right: 0;
	height: 1px;
	background: var(--afw-hair, #eeeaf3);
}
.afw-p--lux .afw-pl-assure .afw-pl-tb-i { width: 36px; height: 36px; }
.afw-p--lux .afw-p-info .afw-pl-assure .afw-pl-tb .afw-pl-tb-i svg { width: 20px; height: 20px; }

.afw-p--lux .afw-p-info .afw-pl-assure .afw-p-pay {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 0;
	padding: 13px 18px;
	border: 0;
	border-top: 1px solid var(--afw-hair, #eeeaf3);
	background: linear-gradient(180deg, var(--afw-paper, #fbfafc) 0%, var(--afw-mauve-tint, #f3f0f9) 100%);
}
.afw-p--lux .afw-p-info .afw-pl-assure .afw-p-pay p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 500 0.84rem/1.3 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
}
.afw-p--lux .afw-p-info .afw-pl-assure .afw-p-pay p br { display: none; }
.afw-p--lux .afw-p-info .afw-pl-assure .afw-p-pay p::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: var(--afw-mauve-brand, #7850c0);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.2'/%3E%3Cpath d='M8 10.5V7.8a4 4 0 0 1 8 0v2.7'/%3E%3Cpath d='M12 14.6v2.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.2'/%3E%3Cpath d='M8 10.5V7.8a4 4 0 0 1 8 0v2.7'/%3E%3Cpath d='M12 14.6v2.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.afw-p--lux .afw-p-info .afw-pl-assure .afw-p-pay img { display: block; height: 22px; width: auto; margin: 0; }

/* ── 4. CONTACT US DOCKS BESIDE THE STICKY BAR ───────────────────────────────────────────────
   Desktop: the bar and Contact us become one centred group - same height (76px), same 18px
   corners, same frosted surface, 12px apart. Contact us is anchored by `left` in BOTH states, so
   docking is a slide, not a jump. Phone: the bar is a bottom sheet, so Contact us docks INSIDE it,
   as a square the height of the Add to cart button, at the sheet's right edge. */
@media (min-width: 768px) {
	body.afw-lux {
		--afw-dock-gap: 12px;
		--afw-dock-cw: 172px;
		--afw-bar-w: min(840px, calc(100% - 48px - var(--afw-dock-cw) - var(--afw-dock-gap)));
	}
	body.afw-lux .afw-p-stickybar {
		width: var(--afw-bar-w);
		left: calc(50% - (var(--afw-bar-w) + var(--afw-dock-gap) + var(--afw-dock-cw)) / 2);
		transform: translateY(calc(100% + 30px));
	}
	body.afw-lux .afw-p-stickybar.is-on { transform: translateY(0); }

	body.afw-lux .afw-cd-trigger {
		right: auto;
		left: calc(100% - 22px - var(--afw-dock-cw));
		width: var(--afw-dock-cw);
		height: 58px;
		justify-content: flex-start;
		transition: left 340ms cubic-bezier(0.2, 0.7, 0.3, 1), bottom 340ms cubic-bezier(0.2, 0.7, 0.3, 1),
		            height 340ms cubic-bezier(0.2, 0.7, 0.3, 1), border-radius 340ms ease,
		            box-shadow 200ms ease, transform 200ms ease;
	}
	body.afw-lux:has(.afw-p-stickybar.is-on) .afw-cd-trigger {
		left: calc(50% - (var(--afw-bar-w) + var(--afw-dock-gap) + var(--afw-dock-cw)) / 2 + var(--afw-bar-w) + var(--afw-dock-gap));
		bottom: 18px;
		height: 76px;
		padding-left: 12px;
		border-radius: 18px;
		border-color: rgba(120, 80, 192, 0.16);
		box-shadow: 0 22px 60px rgba(44, 30, 78, 0.18), 0 3px 10px rgba(44, 30, 78, 0.07);
	}
}
@media (max-width: 767px) {
	body.afw-lux:has(.afw-p-stickybar.is-on) .afw-p-sb-in { padding-right: 76px; }
	body.afw-lux:has(.afw-p-stickybar.is-on) .afw-cd-trigger {
		right: 14px;
		left: auto;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		width: 48px;
		height: 48px;
		border-radius: 13px;
		border: 1px solid rgba(120, 80, 192, 0.22);
		background: var(--afw-mauve-tint, #f3f0f9);
		color: var(--afw-mauve-brand, #7850c0);
		box-shadow: none;
	}
	body.afw-lux:has(.afw-p-stickybar.is-on) .afw-cd-trigger .afw-cd-i { color: var(--afw-mauve-brand, #7850c0); }
}

/* ── 6. "You may also like" cards ──────────────────────────────────────────────────────────────
   A gallery frame for each plush: a square white mat (4:5 until round 4) with soft corners, the photograph contained with
   room around it; then a quiet label, a serif name in ink (two lines at most), and the price. */
.afw-p--lux .afw-p-related .afw-pl-track .afw-c { background: transparent; box-shadow: none; }
.afw-p--lux .afw-p-related .afw-pl-track .afw-c .afw-c-media {
	position: relative;
	aspect-ratio: 1 / 1;       /* round 4: strictly square, one shape across the whole row */
	border-radius: 16px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(28, 26, 34, 0.05);
	overflow: hidden;
	transition: box-shadow 260ms ease;
}
.afw-p--lux .afw-p-related .afw-pl-track .afw-c .afw-c-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 7%;
	transition: transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.afw-p--lux .afw-p-related .afw-pl-track .afw-c:hover .afw-c-media {
	box-shadow: inset 0 0 0 1px rgba(120, 80, 192, 0.18), 0 16px 34px rgba(44, 30, 78, 0.1);
}
.afw-p--lux .afw-p-related .afw-pl-track .afw-c:hover .afw-c-media img { transform: scale(1.045); }
.afw-p--lux .afw-p-related .afw-pl-track .afw-c .afw-c-body { padding: 14px 2px 0; }
.afw-p--lux .afw-p-related .afw-pl-track .afw-c .afw-c-eyebrow {
	margin: 0 0 6px;
	font: 600 10.5px/1.2 var(--afw-sans, sans-serif);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--afw-meta, #6e6b7b);
}
.afw-p--lux .afw-p-related .afw-pl-track .afw-c .afw-c-name {
	margin: 0;
	font: 400 17px/1.3 var(--afw-serif, Georgia, serif);
	letter-spacing: -0.005em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.afw-p--lux .afw-p-related .afw-pl-track .afw-c .afw-c-name a {
	color: var(--afw-ink, #1c1a22);
	text-decoration: none;
	transition: color 160ms ease-out;
}
.afw-p--lux .afw-p-related .afw-pl-track .afw-c:hover .afw-c-name a { color: var(--afw-mauve-strong, #5f4a8a); }
.afw-p--lux .afw-p-related .afw-pl-track .afw-c .afw-c-price {
	margin: 8px 0 0;
	font: 600 14.5px/1.3 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
	font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
	.afw-p--lux .afw-p-related .afw-pl-track .afw-c .afw-c-name { font-size: 15.5px; }
	.afw-p--lux .afw-p-related .afw-pl-track .afw-c .afw-c-media { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button,
	.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button { animation: none !important; }
	.afw-p--lux .afw-p-info .afw-p-cart .afw-p-sw.is-text,
	.afw-p--lux .afw-p-related .afw-pl-track .afw-c .afw-c-media img,
	body.afw-lux .afw-cd-trigger { transition: none; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ROUND 4 — 2026-09-19: white minimal buy box, badge micro-cards, square gallery, unified dock
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. the buy box: white, one hairline, generous but disciplined spacing ────────────────────
   The glass gradient and its highlight layer go; what is left is a white card that lets the two
   purple buttons carry the colour. The out-of-stock pane keeps its own clay treatment. */
.afw-p--lux .afw-p-info .afw-p-cart:not(.is-oos) {
	padding: 20px;
	border: 1px solid rgba(28, 26, 34, 0.08);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(28, 26, 34, 0.03), 0 18px 48px rgba(44, 30, 78, 0.06);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.afw-p--lux .afw-p-info .afw-p-cart:not(.is-oos)::before { display: none; }
.afw-p--lux .afw-p-info .afw-p-cart .variations tr { margin-bottom: 16px; }
.afw-p--lux .afw-p-info .afw-p-cart .reset_variations {
	font-size: 0.78rem;
	color: var(--afw-meta, #6e6b7b);
	text-decoration: none;
	border-bottom: 1px solid var(--afw-line, #e4deec);
}
.afw-p--lux .afw-p-info .afw-p-cart .woocommerce-variation-price .price {
	display: block;
	margin: 0 0 14px;
	font: 400 1.35rem/1.2 var(--afw-serif, Georgia, serif);
	color: var(--afw-ink, #1c1a22);
}
.afw-p--lux .afw-p-info .afw-p-cart .afw-p-sw.is-text { border-radius: 14px; }

/* quantity, Add to cart and Buy now share one shape: 52px tall, 14px corners */
.afw-p--lux .afw-p-info .afw-p-cart .quantity {
	border: 1px solid rgba(28, 26, 34, 0.1);
	border-radius: 14px;
	background: #fff;
	box-shadow: none;
}
.afw-p--lux .afw-p-info .afw-p-cart .quantity .ecomus-qty-button {
	border-radius: 10px;
	color: var(--afw-ink-2, #4c4a57);
	transition: background-color 150ms ease-out, color 150ms ease-out;
}
.afw-p--lux .afw-p-info .afw-p-cart .quantity .ecomus-qty-button:hover {
	background: var(--afw-mauve-tint, #f3f0f9);
	color: var(--afw-mauve-brand, #7850c0);
}
.afw-p--lux .afw-p-info .afw-p-cart .quantity input.qty { font: 600 15px/1 var(--afw-sans, sans-serif); color: var(--afw-ink, #1c1a22); }
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button {
	border-radius: 14px;
	font: 600 15px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.02em;
}
/* the brand gradient only once the button can be used. Measured at 390px: applying it to the
   disabled state too (a size not yet chosen) gave dark grey text on purple - a button that looked
   broken rather than waiting */
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button:not(.disabled):not(:disabled) {
	border: 0;
	background: linear-gradient(135deg, #8a64d6 0%, var(--afw-mauve-brand, #7850c0) 45%, #5b3ba3 100%);
	color: #fff;
}
/* waiting for a size: calm and clearly not ready, never grey-on-purple */
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button.disabled,
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button:disabled {
	border: 1px dashed rgba(120, 80, 192, 0.35);
	background: #f7f4fb;
	color: var(--afw-mauve-strong, #5f4a8a);
	opacity: 1;
	box-shadow: none;
	cursor: not-allowed;
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button {
	min-height: 50px;
	border: 1px solid rgba(28, 26, 34, 0.12);
	border-radius: 14px;
	background: #fff;
	color: var(--afw-ink, #1c1a22);
	font: 600 14.5px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.02em;
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:hover {
	border-color: var(--afw-mauve-soft, #a78bc9);
	background: var(--afw-mauve-tint, #f3f0f9);
	color: var(--afw-mauve-strong, #5f4a8a);
}

/* ── 2. badges as soft micro-cards: no lines anywhere ─────────────────────────────────────────
   Each badge is its own tile on a faint lilac ground, separated by white space alone. The
   payment row sits beneath as one more tile of the same family. */
.afw-p--lux .afw-pl-assure {
	margin-top: 14px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}
.afw-p--lux .afw-pl-assure .afw-p-trust.afw-pl-tb {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 0;
}
.afw-p--lux .afw-pl-assure .afw-pl-tb li {
	align-items: center;
	padding: 14px 14px;
	border-radius: 18px;
	background: linear-gradient(180deg, #faf8fd 0%, #f4f0fa 100%);
	transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.afw-p--lux .afw-pl-assure .afw-pl-tb li + li::before { display: none; }
.afw-p--lux .afw-pl-assure .afw-pl-tb li:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(44, 30, 78, 0.07);
}
.afw-p--lux .afw-pl-assure .afw-pl-tb-i {
	background: #fff;
	box-shadow: 0 2px 8px rgba(120, 80, 192, 0.1);
}
.afw-p--lux .afw-p-info .afw-pl-assure .afw-p-pay {
	margin-top: 10px;
	border: 0;
	border-radius: 18px;
	background: linear-gradient(180deg, #faf8fd 0%, #f4f0fa 100%);
	padding: 13px 16px;
}
@media (max-width: 600px) {
	.afw-p--lux .afw-pl-assure .afw-p-trust.afw-pl-tb { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ── 3. the gallery: strictly square, one rail below, arrivals that settle ─────────────────────
   Measured before: the rail ran down the LEFT with 2-3 photos (image 508px) and BELOW with 4+
   (image 604px) - two layouts for one template. Now always below, and the stage itself is 1:1,
   so it stays square even while an image is loading or missing. */
.afw-p--lux .afw-p-gallery,
.afw-p--lux .afw-p-gallery:has(.afw-p-rail) {
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}
.afw-p--lux .afw-p-gallery .afw-p-stage {
	order: 1;
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(28, 26, 34, 0.07);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(28, 26, 34, 0.03), 0 18px 48px rgba(44, 30, 78, 0.06);
}
.afw-p--lux .afw-p-gallery .afw-p-stage::after { display: none; }
.afw-p--lux .afw-p-gallery .afw-p-stage img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	padding: 4%;
}
@keyframes afw-pl-img-in {
	from { opacity: 0; transform: scale(1.03); }
	to   { opacity: 1; transform: none; }
}
.afw-p--lux .afw-p-gallery .afw-p-stage img.is-in { animation: afw-pl-img-in 440ms cubic-bezier(0.2, 0.7, 0.3, 1); }
/* the zoom lens rests while the pointer is on an arrow */
.afw-p--lux .afw-p-gallery .afw-p-stage.afw-p-lens:has(.afw-pl-gnav:hover) img { transform: none; }

.afw-p--lux .afw-p-gallery .afw-p-rail {
	order: 2;
	display: flex;
	flex-direction: row;
	gap: 10px;
	min-width: 0;
	overflow-x: auto;
	padding: 3px 3px 8px;
	scrollbar-width: none;
}
.afw-p--lux .afw-p-gallery .afw-p-rail::-webkit-scrollbar { display: none; }
.afw-p--lux .afw-p-gallery .afw-p-rail button {
	flex: 0 0 76px;
	width: 76px;
	height: 76px;
	border: 1px solid rgba(28, 26, 34, 0.08);
	border-radius: 16px;
	background-color: #fff;
	background-size: 84%;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: none;
	opacity: 0.72;
	transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.afw-p--lux .afw-p-gallery .afw-p-rail button:hover { opacity: 1; transform: translateY(-2px); }
.afw-p--lux .afw-p-gallery .afw-p-rail button.is-on {
	opacity: 1;
	border-color: transparent;
	box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--afw-mauve-brand, #7850c0), 0 8px 18px rgba(120, 80, 192, 0.18);
}

/* arrows + counter on the image (plush.js adds them when there is more than one photo) */
.afw-p--lux .afw-pl-gnav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 1px solid rgba(28, 26, 34, 0.08);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.84);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--afw-ink, #1c1a22);
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms ease, transform 200ms ease, background-color 200ms ease;
}
.afw-p--lux .afw-pl-gnav.prev { left: 14px; }
.afw-p--lux .afw-pl-gnav.next { right: 14px; }
.afw-p--lux .afw-pl-gnav.prev svg { transform: rotate(180deg); }
.afw-p--lux .afw-p-stage:hover .afw-pl-gnav,
.afw-p--lux .afw-pl-gnav:focus-visible { opacity: 1; }
.afw-p--lux .afw-pl-gnav:hover { background: #fff; transform: scale(1.06); }
.afw-p--lux .afw-pl-gnav:focus-visible { outline: 2px solid var(--afw-mauve, #7a62a8); outline-offset: 2px; }
.afw-p--lux .afw-pl-gcount {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	padding: 6px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.84);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font: 600 12px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.04em;
	color: var(--afw-ink-2, #4c4a57);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
/* touch screens swipe instead of aiming at arrows */
@media (hover: none) {
	.afw-p--lux .afw-pl-gnav { display: none; }
}
@media (max-width: 600px) {
	.afw-p--lux .afw-p-gallery .afw-p-stage { border-radius: 18px; }
	.afw-p--lux .afw-p-gallery .afw-p-rail button { flex-basis: 64px; width: 64px; height: 64px; border-radius: 14px; }
}

/* ── 5. ONE FROSTED FINISH FOR THE DOCK ───────────────────────────────────────────────────────
   Round 3 docked the two side by side, but each still carried its own glass recipe (0.78 vs 0.82
   white, 18px vs 14px blur). Both now read the same five values, so they are one surface in two
   pieces; the chat button alone uses the same recipe while the bar is hidden. */
body.afw-lux {
	--afw-dock-bg: rgba(255, 255, 255, 0.8);
	--afw-dock-blur: blur(18px) saturate(1.2);
	--afw-dock-edge: rgba(120, 80, 192, 0.16);
	--afw-dock-radius: 18px;
	--afw-dock-shadow: 0 22px 60px rgba(44, 30, 78, 0.18), 0 3px 10px rgba(44, 30, 78, 0.07);
}
body.afw-lux .afw-cd-trigger {
	background: var(--afw-dock-bg);
	-webkit-backdrop-filter: var(--afw-dock-blur);
	backdrop-filter: var(--afw-dock-blur);
	border: 1px solid var(--afw-dock-edge);
}
@media (min-width: 768px) {
	body.afw-lux .afw-p-stickybar,
	body.afw-lux:has(.afw-p-stickybar.is-on) .afw-cd-trigger {
		background: var(--afw-dock-bg);
		-webkit-backdrop-filter: var(--afw-dock-blur);
		backdrop-filter: var(--afw-dock-blur);
		border: 1px solid var(--afw-dock-edge);
		border-radius: var(--afw-dock-radius);
		box-shadow: var(--afw-dock-shadow);
	}
	body.afw-lux .afw-cd-trigger { border-radius: 16px; }
	body.afw-lux:has(.afw-p-stickybar.is-on) .afw-cd-trigger { border-radius: var(--afw-dock-radius); }
}
@media (max-width: 767px) {
	/* phones: the round-3 purple square stays when the bar is hidden; docked, it is a tile of the sheet */
	body.afw-lux .afw-cd-trigger { background: linear-gradient(135deg, #8a64d6 0%, var(--afw-mauve-brand, #7850c0) 50%, #5b3ba3 100%); border: 0; }
	body.afw-lux:has(.afw-p-stickybar.is-on) .afw-cd-trigger {
		background: var(--afw-mauve-tint, #f3f0f9);
		border: 1px solid rgba(120, 80, 192, 0.22);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.afw-p--lux .afw-p-gallery .afw-p-stage img.is-in { animation: none; }
	.afw-p--lux .afw-pl-gnav,
	.afw-p--lux .afw-p-gallery .afw-p-rail button,
	.afw-p--lux .afw-pl-assure .afw-pl-tb li { transition: none; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ROUND 5 — 2026-09-19: Buy it now hierarchy, breadcrumbs, cross-sell, auto-slide, small life
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. BUY IT NOW: the contrasting, eye-catching second route ────────────────────────────────
   Add to cart stays the purple primary. Buy it now becomes a white card with a lightning chip, a
   crisp purple-tinted edge and a lift - the contrast, not the colour, is what draws the eye - and
   its invitation is stronger than Add to cart's: a slow sheen crossing the button as well as the
   ring. */
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button {
	position: relative;
	overflow: hidden;
	gap: 10px;
	min-height: 54px;
	border: 1px solid rgba(120, 80, 192, 0.3);
	border-radius: 14px;
	background: #fff;
	color: var(--afw-ink, #1c1a22);
	box-shadow: 0 1px 2px rgba(28, 26, 34, 0.04), 0 10px 26px rgba(44, 30, 78, 0.1);
	transition: border-color 180ms ease, box-shadow 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
	            transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1), background-color 180ms ease;
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:hover {
	border-color: var(--afw-mauve-brand, #7850c0);
	background: #fdfcff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(28, 26, 34, 0.04), 0 16px 34px rgba(120, 80, 192, 0.2);
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:active { transform: translateY(0); }
.afw-p--lux .afw-pl-bn-chip {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 9px;
	background: linear-gradient(135deg, #8a64d6 0%, var(--afw-mauve-brand, #7850c0) 50%, #5b3ba3 100%);
	color: #fff;
	box-shadow: 0 4px 10px rgba(120, 80, 192, 0.32);
	flex: 0 0 auto;
}
/* the sheen is its own element: it cannot collide with anything product.css draws here */
.afw-p--lux .afw-pl-bn-sheen {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -45%;
	width: 38%;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(120, 80, 192, 0) 0%, rgba(120, 80, 192, 0.1) 50%, rgba(120, 80, 192, 0) 100%);
	animation: afw-pl-bn-sweep 5.5s ease-in-out 2s infinite;
}
@keyframes afw-pl-bn-sweep {
	0%   { transform: translateX(0); }
	18%  { transform: translateX(420%); }
	100% { transform: translateX(420%); }
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:hover .afw-pl-bn-sheen { animation-play-state: paused; }

/* ── 2. BREADCRUMBS ──────────────────────────────────────────────────────────────────────────
   Quiet, wide-set type; the trail in grey, this page in ink; the slashes become fine chevrons so
   the eye follows the path instead of stopping at punctuation. */
.afw-p--lux .afw-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 4px;
	margin-bottom: 20px;
	font: 500 12.5px/1.6 var(--afw-sans, sans-serif);
	letter-spacing: 0.02em;
	color: var(--afw-ink, #1c1a22);
}
.afw-p--lux .afw-crumb a {
	color: var(--afw-meta, #6e6b7b);
	text-decoration: none;
	padding: 2px 0;
	border-bottom: 1px solid transparent;
	transition: color 150ms ease-out, border-color 150ms ease-out;
}
.afw-p--lux .afw-crumb a:hover { color: var(--afw-mauve-strong, #5f4a8a); border-bottom-color: var(--afw-mauve-soft, #a78bc9); }
.afw-p--lux .afw-crumb a:focus-visible { outline: 2px solid var(--afw-mauve, #7a62a8); outline-offset: 3px; border-radius: 2px; }
.afw-p--lux .afw-crumb .afw-crumb-sep {
	display: inline-flex;
	width: 16px;
	justify-content: center;
	font-size: 0;            /* the "/" is replaced by a chevron */
	color: var(--afw-line, #e4deec);
}
.afw-p--lux .afw-crumb .afw-crumb-sep::before {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1.2px solid currentColor;
	border-right: 1.2px solid currentColor;
	transform: rotate(45deg);
}

/* ── 3. CROSS-SELL: the row earns its place ──────────────────────────────────────────────────── */
.afw-p--lux .afw-pl-rel-sub {
	margin: 6px 0 0;
	font-size: 0.9rem;
	color: var(--afw-meta, #6e6b7b);
}
.afw-p--lux .afw-pl-rel-head { align-items: flex-start; }
.afw-p--lux .afw-p-related .afw-pl-track .afw-c-price { font-size: 15px; }
/* on touch there is no hover, so the card's own actions are simply shown */
@media (hover: none) {
	.afw-p--lux .afw-p-related .afw-pl-track .afw-c .afw-c-acts { visibility: visible; opacity: 1; right: 10px; }
}

/* ── 4. the drifting row ─────────────────────────────────────────────────────────────────────
   While looping the snap points are dropped: snapping fights a continuous scroll, and the clones
   would make it stutter at the seam. */
.afw-p-related.afw-pl-rel .afw-grid.afw-pl-track.is-looping { scroll-snap-type: none; }
.afw-p-related.afw-pl-rel .afw-grid.afw-pl-track.is-looping > .afw-c { scroll-snap-align: none; }

/* ── 5. a little life, kept quiet ────────────────────────────────────────────────────────────── */
.afw-p--lux .afw-pl-settle {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 620ms cubic-bezier(0.2, 0.7, 0.3, 1), transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.afw-p--lux .afw-pl-settle.is-seen { opacity: 1; transform: none; }
/* every button on the page answers a press */
.afw-p--lux .afw-p-info .afw-p-cart .afw-p-sw.is-text:active,
.afw-p--lux .afw-p-info .afw-p-cart .quantity .ecomus-qty-button:active,
.afw-p--lux .afw-pl-rel-nav button:active,
.afw-p--lux .afw-pl-gnav:active { transform: scale(0.96); }
.afw-p--lux .afw-pl-q summary { transition: color 150ms ease-out; }
.afw-p--lux .afw-pl-a-link a { transition: border-color 150ms ease-out, color 150ms ease-out; }
.afw-p--lux .afw-pl-a-link a:hover { color: var(--afw-ink, #1c1a22); border-bottom-color: var(--afw-ink, #1c1a22); }

@media (prefers-reduced-motion: reduce) {
	.afw-p--lux .afw-pl-bn-sheen { animation: none; display: none; }
	.afw-p--lux .afw-pl-settle { opacity: 1; transform: none; transition: none; }
	.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ROUND 6 — 2026-09-19 FINAL: stock counter, buy box, Buy it now icon on the right
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 3. "Only N left", beside the stock pill ──────────────────────────────────────────────────
   Warm amber rather than the brand mauve, so it reads as a live stock fact next to the green
   "In stock" instead of blending into the page furniture. It appears only where WooCommerce is
   actually counting units, so it can never be theatre. */
.afw-p--lux .afw-pl-left {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(214, 138, 58, 0.1);
	font: 600 12px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.01em;
	color: #8a5a20;
	font-variant-numeric: tabular-nums;
}
.afw-p--lux .afw-pl-left-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d68a3a;
	box-shadow: 0 0 0 0 rgba(214, 138, 58, 0.5);
	animation: afw-pl-left-pulse 2.6s ease-out infinite;
}
@keyframes afw-pl-left-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(214, 138, 58, 0.5); }
	60%  { box-shadow: 0 0 0 6px rgba(214, 138, 58, 0); }
	100% { box-shadow: 0 0 0 0 rgba(214, 138, 58, 0); }
}

/* ── 4a. the buy box, final ───────────────────────────────────────────────────────────────────
   One white card, a little more air, and a hairline that separates choosing from buying. */
.afw-p--lux .afw-p-info .afw-p-cart:not(.is-oos) {
	padding: 22px;
	border-radius: 20px;
}
.afw-p--lux .afw-p-info .afw-p-cart .variations { margin-bottom: 0; }
.afw-p--lux .afw-p-info .afw-p-cart .single_variation_wrap {
	padding-top: 18px;
	border-top: 1px solid var(--afw-hair, #eeeaf3);
}
.afw-p--lux .afw-p-info .afw-p-cart .variations tr { margin-bottom: 14px; }
.afw-p--lux .afw-p-info .afw-p-cart .variations tr:last-child { margin-bottom: 4px; }

/* ── 4b. Buy it now: checkout icon, on the right ─────────────────────────────────────────────── */
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button { gap: 12px; }
.afw-p--lux .afw-pl-bn-chip {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	order: 2;                      /* after the label, whatever order the theme printed them in */
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button .ecomus-button-text { order: 1; }
.afw-p--lux .afw-pl-bn-sheen { order: 3; }

@media (max-width: 600px) {
	.afw-p--lux .afw-p-info .afw-p-cart:not(.is-oos) { padding: 18px; }
	.afw-p--lux .afw-pl-left { padding: 4px 9px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.afw-p--lux .afw-pl-left-dot { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ROUND 7 — 2026-09-19  cart feedback · Buy it now · the click spinner
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. THE "GLITCHY CIRCLE" ──────────────────────────────────────────────────────────────────
   🔴 IT IS THE THEME'S LOADING SPINNER, NOT A RIPPLE. ecomus style.css:1776 draws an 18px
     `border-radius: 100%` ring with a transparent top border, absolutely centred over the button,
     spinning — and the rule above it sets `color: transparent` on the button itself. So the
     moment Add to cart is pressed the words disappear and a bare ring wobbles in the middle of
     the purple gradient, in the THEME's button colour rather than ours. That is what reads as a
     glitch: the button appears to empty itself.

   The ring is not deleted — a click that reaches the network should say so. It is moved out of
   the centre, sized down, given our colour, and the label is put back, so the button keeps its
   shape and its words and simply shows that it is working. */
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.loading,
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button.loading,
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.loading {
	color: #ffffff;                       /* undo the theme's `color: transparent` */
	cursor: progress;
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.loading,
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.is-working {
	color: var(--afw-ink, #1c1a22);       /* Buy it now is the white button — its ink is dark */
}
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.loading::before,
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button.loading::before,
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.loading::before {
	width: 15px;
	height: 15px;
	border-width: 2px;
	border-color: currentColor;
	border-top-color: transparent;
	opacity: 0.85;
	/* out of the centre: hard right, vertically centred. `inset: 0 + margin: auto` is what put it
	   in the middle, so both have to be undone, not just one. */
	top: 50%;
	bottom: auto;
	left: auto;
	right: 18px;
	margin: -7.5px 0 0 0;
	animation-duration: 0.7s;
}
/* the Buy it now chip and the spinner would sit on top of each other; the chip stands down */
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.loading .afw-pl-bn-chip,
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.is-working .afw-pl-bn-chip {
	opacity: 0;
	transition: opacity 0.14s linear;
}
/* and the sheen sweep stops while the button is busy — two animations at once is the glitch again */
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.loading::after,
.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button.loading::after {
	display: none;
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.loading .afw-pl-bn-sheen,
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.is-working .afw-pl-bn-sheen {
	animation: none;
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.loading::before,
	.afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button.loading::before,
	.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.loading::before {
		animation: none;
		border-top-color: currentColor;
		opacity: 0.45;
	}
}

/* ── 2. THE CART DRAWER ───────────────────────────────────────────────────────────────────────
   It holds `div.widget_shopping_cart_content`, which is the exact selector WooCommerce's own
   fragment refresh targets, so its contents are kept current by WooCommerce and never by us. */
.afw-cart {
	position: fixed;
	inset: 0;
	z-index: 100000;              /* above the sticky buy bar (9000) and the contact dock (9500) */
}
.afw-cart[hidden] { display: none; }

.afw-cart-veil {
	position: absolute;
	inset: 0;
	background: rgba(28, 26, 34, 0.38);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.3s var(--afw-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.afw-cart.is-open .afw-cart-veil { opacity: 1; }

.afw-cart-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--afw-card, #fff);
	box-shadow: -24px 0 60px -28px rgba(28, 26, 34, 0.42);
	transform: translateX(100%);
	transition: transform 0.34s var(--afw-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
	outline: none;
}
.afw-cart.is-open .afw-cart-panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	.afw-cart-veil,
	.afw-cart-panel { transition: none; }
}

/* the drawer takes the scroll, the page underneath does not */
html.afw-cart-lock { overflow: hidden; }

.afw-cart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
}
.afw-cart-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 600 16px/1.3 var(--afw-sans, sans-serif);
	letter-spacing: -0.005em;
	color: var(--afw-ink, #1c1a22);
}
.afw-cart-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 50%;
	background: var(--afw-sage-soft, #e8f0e9);
	color: var(--afw-sage, #3f6b4a);
}
.afw-cart-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	padding: 0;
	border: 1px solid var(--afw-hair, #eeeaf3);
	border-radius: 10px;
	background: transparent;
	color: var(--afw-meta, #6e6b7b);
	cursor: pointer;
	transition: background 0.16s linear, color 0.16s linear;
}
.afw-cart-x:hover {
	background: var(--afw-band, #f5f2f8);
	color: var(--afw-ink, #1c1a22);
}

.afw-cart-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 4px 20px;
	overscroll-behavior: contain;
}
.afw-cart-note {
	margin: 0;
	padding: 12px 20px 18px;
	border-top: 1px solid var(--afw-hair, #eeeaf3);
	font: 500 12.5px/1.45 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
	text-align: center;
}

/* ── 2b. WooCommerce's mini cart, restyled in place ───────────────────────────────────────────
   ⚠️ This markup is WooCommerce's, not ours, and it is REPLACED WHOLESALE on every add. So every
     rule here is written against WooCommerce's own class names and nothing is added to the DOM
     that a fragment refresh would wipe out. */
.afw-cart .widget_shopping_cart_content { font-family: var(--afw-sans, sans-serif); }
.afw-cart .woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
}
.afw-cart .woocommerce-mini-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 16px 26px 16px 0;
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
}
.afw-cart .woocommerce-mini-cart-item:last-child { border-bottom: 0; }
.afw-cart .woocommerce-mini-cart-item img {
	grid-row: span 2;
	width: 62px;
	height: 62px;
	object-fit: cover;
	border-radius: 12px;
	background: var(--afw-band, #f5f2f8);
}
.afw-cart .woocommerce-mini-cart-item a:not(.remove) {
	display: block;
	font: 500 14px/1.4 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
	text-decoration: none;
}
.afw-cart .woocommerce-mini-cart-item a:not(.remove):hover { text-decoration: underline; }
.afw-cart .woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: 4px;
	font: 500 13px/1.4 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
	font-variant-numeric: tabular-nums;
}
.afw-cart .woocommerce-mini-cart-item .remove,
.afw-cart .woocommerce-mini-cart-item .remove_from_cart_button {
	position: absolute;
	top: 14px;
	right: 0;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	color: var(--afw-meta, #6e6b7b);
	background: transparent;
	transition: background 0.16s linear, color 0.16s linear;
}
.afw-cart .woocommerce-mini-cart-item .remove:hover,
.afw-cart .woocommerce-mini-cart-item .remove_from_cart_button:hover {
	background: var(--afw-clay-soft, #f7eae7);
	color: var(--afw-clay, #7a3b33);
}
.afw-cart .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 16px 0 14px;
	border-top: 1px solid var(--afw-line, #e4deec);
	font: 500 14px/1.3 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
}
.afw-cart .woocommerce-mini-cart__total strong { font-weight: 500; }
.afw-cart .woocommerce-mini-cart__total .amount {
	font: 600 19px/1.2 var(--afw-serif, serif);
	color: var(--afw-ink, #1c1a22);
	font-variant-numeric: tabular-nums;
}
.afw-cart .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	font: 400 14.5px/1.5 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
}

/* the two WooCommerce buttons, as one clear pair */
.afw-cart .woocommerce-mini-cart__buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 0;
	padding: 4px 0 18px;
}
.afw-cart .woocommerce-mini-cart__buttons .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0;
	padding: 0 14px;
	border-radius: 13px;
	border: 1px solid var(--afw-line, #e4deec);
	background: #ffffff;
	font: 600 14px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.005em;
	color: var(--afw-ink, #1c1a22);
	text-decoration: none;
	text-transform: none;
	transition: border-color 0.16s linear, background 0.16s linear, transform 0.16s var(--afw-ease, ease);
}
.afw-cart .woocommerce-mini-cart__buttons .button:hover {
	border-color: var(--afw-mauve-soft, #a78bc9);
	background: var(--afw-band, #f5f2f8);
}
.afw-cart .woocommerce-mini-cart__buttons .button.checkout {
	border-color: transparent;
	background: linear-gradient(135deg, var(--afw-mauve, #7a62a8), var(--afw-mauve-strong, #5f4a8a));
	color: #ffffff;
	box-shadow: 0 10px 22px -14px rgba(95, 74, 138, 0.9);
}
.afw-cart .woocommerce-mini-cart__buttons .button.checkout:hover {
	background: linear-gradient(135deg, var(--afw-mauve-strong, #5f4a8a), var(--afw-mauve-strong, #5f4a8a));
	transform: translateY(-1px);
}
.afw-cart .woocommerce-mini-cart__buttons .button:focus-visible {
	outline: 2px solid var(--afw-control, #8c7ba6);
	outline-offset: 2px;
}

/* ── 3. THE TOAST ─────────────────────────────────────────────────────────────────────────────
   The drawer is the confirmation; the toast is what a screen reader hears and what confirms an
   add that did NOT open the drawer (an error, or a choice not yet made). */
.afw-toast-host {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 100001;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
	width: min(420px, calc(100vw - 32px));
}
.afw-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 13px;
	border: 1px solid var(--afw-hair, #eeeaf3);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 18px 42px -22px rgba(28, 26, 34, 0.55);
	font: 500 13.5px/1.45 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.26s var(--afw-ease, ease), transform 0.26s var(--afw-ease, ease);
}
.afw-toast.is-on {
	opacity: 1;
	transform: translateY(0);
}
.afw-toast.is-ok  { border-left: 3px solid var(--afw-sage, #3f6b4a); }
.afw-toast.is-warn { border-left: 3px solid var(--afw-clay, #7a3b33); }
@media (prefers-reduced-motion: reduce) {
	.afw-toast { transition: none; transform: none; }
}

/* ── 4. narrow screens ────────────────────────────────────────────────────────────────────────
   ⚠️ The sticky buy bar sits at the bottom on a phone, so the toast has to clear it or it lands
     underneath and is never read. */
@media (max-width: 600px) {
	.afw-cart-panel { width: 100vw; }
	.afw-cart-head { padding: 16px 16px 14px; }
	.afw-cart-body { padding: 4px 16px; }
	.afw-cart-note { padding: 10px 16px 16px; }
	.afw-toast-host { bottom: 92px; }
	.afw-cart .woocommerce-mini-cart__buttons { padding-bottom: 14px; }
}

/* ── 5. ROUND 7, SECOND PASS — four things the first screenshots caught ───────────────────────
   Measured at 1366 and 390 with the drawer actually open, not reasoned about. */

/* (a) THE QUANTITY LINE WAS WEARING THE QUANTITY STEPPER'S SKIN.
   product.css styles `.afw-p-cart .quantity` as the +/- box: a grey rounded control. WooCommerce
   uses the SAME class name for the plain "1 x $39.95" text inside a mini-cart line, so the text
   inherited a full-width grey band. Nothing in product.css is changed - the mini-cart's copy is
   simply told it is text. */
.afw-cart .woocommerce-mini-cart-item .quantity,
.afw-cart .widget_shopping_cart_content .quantity {
	display: block;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 0;
	padding: 0;
	margin: 4px 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: 500 13px/1.4 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
	font-variant-numeric: tabular-nums;
}
.afw-cart .woocommerce-mini-cart-item .quantity .amount { font: inherit; color: inherit; }

/* (b) THE TWO BUTTONS CLIPPED THEIR OWN LABELS AT 390px.
   "View cart" wrapped onto a second line inside a fixed 48px pill and the descender was cut off.
   One line, always, and the pair shrinks instead of the text. */
.afw-cart .woocommerce-mini-cart__buttons .button {
	white-space: nowrap;
	padding: 0 10px;
	font-size: 13.5px;
	min-width: 0;
}
@media (max-width: 420px) {
	.afw-cart .woocommerce-mini-cart__buttons { gap: 8px; }
	.afw-cart .woocommerce-mini-cart__buttons .button {
		font-size: 13px;
		padding: 0 8px;
		min-height: 46px;
	}
}

/* (c) THE CONTACT DOCK SAT ON TOP OF THE CHECKOUT BUTTON.
   ⚠️ It is deliberately pinned at z-index 2147483000 so nothing can bury it - which means the cart
     drawer cannot out-stack it, and raising the drawer above that number is a race nobody wins.
     So the dock stands down while the drawer is open, and comes straight back when it closes. It
     is hidden from the pointer AND from the tab order, otherwise it stays reachable behind a modal. */
html.afw-cart-lock .afw-cd-trigger {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s linear, visibility 0s linear 0.18s;
}

/* (d) THE TOAST COVERED THE DRAWER'S OWN BUTTONS ON A PHONE.
   The drawer IS the confirmation for a successful add, so a second confirmation on top of it was
   both redundant and in the way. The toast now only carries what the drawer cannot: a stock error,
   or "choose an option first". It is also nudged clear of the drawer's edge on desktop. */
@media (min-width: 601px) {
	.afw-toast-host {
		left: auto;
		right: calc(min(420px, 100vw) + 24px);
		transform: none;
	}
}

/* (e) 🔴 THE MINI CART MUST NOT FILL THE DRAWER.
   It used to carry `min-height: 100%` so the total and the buttons sat at the bottom of the panel
   rather than floating under a single item. Measured 2026-09-20, after the cross-sell strip was
   added below it in the same scrolling area: filling the panel pushed the whole strip below the
   fold, so the feature was present in the HTML and invisible on screen. Natural flow instead -
   items, then the total and the buttons, then what goes well with them. */
.afw-cart .widget_shopping_cart_content {
	display: block;
	min-height: 0;
	/* 🔴 AND ITS HEIGHT HAS TO BE RELEASED, NOT JUST ITS MIN-HEIGHT. Measured 2026-09-20: the
	   container rendered 780px tall while its children (list + total + buttons) came to 187px -
	   the theme sizes this element for its OWN cart panel. That left 427px of dead space between
	   the Checkout button and the cross-sell strip, which pushed the strip to y=951 in a 950px
	   viewport: present, correct, and never seen. */
	height: auto;
	max-height: none;
}

/* (f) the pair did not fill its two columns. A grid cell stretches a BLOCK child, but the theme
   leaves `.button` inline-flex with an intrinsic width, so each label sat in a shrink-wrapped pill
   floating in its half. Stated outright rather than relying on stretch. */
.afw-cart .woocommerce-mini-cart__buttons .button {
	width: 100%;
	justify-self: stretch;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ROUND 8 — 2026-09-20  Buy it now: the glyph itself, with nothing behind it
   ═══════════════════════════════════════════════════════════════════════════════════════════════

   Owner, 2026-09-20: no filled container behind the icon. The button stays white with its purple
   edge, and the icon is drawn in solid brand purple, on the right of the words.

   ⚠️ THIS OVERRIDES TWO EARLIER BLOCKS IN THIS SAME FILE (the gradient chip at ~line 1070 and the
     28px square at ~line 1228). They are left in place rather than deleted so the history of the
     button stays readable, and every property they set is explicitly undone here - a half-undone
     rule is how a "removed" background comes back at the next screen size. */
.afw-p--lux .afw-pl-bn-chip {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 0;
	background: none;
	background-image: none;
	box-shadow: none;
	color: var(--afw-mauve-brand, #7850c0);
	order: 2;
	flex: 0 0 auto;
	transition: transform 0.18s var(--afw-ease, ease), color 0.18s linear;
}
.afw-p--lux .afw-pl-bn-chip svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
	stroke-width: 1.85;
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button { gap: 10px; }
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:hover .afw-pl-bn-chip {
	transform: translateX(2px);
	color: #5b3ba3;
}
@media (prefers-reduced-motion: reduce) {
	.afw-p--lux .afw-pl-bn-chip { transition: none; }
	.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:hover .afw-pl-bn-chip { transform: none; }
}

/* ⚠️ THE INCENTIVE PANEL AND THE CROSS-SELL STRIP ARE STYLED IN commerce.css, NOT HERE.
   They appear in three places - this drawer, the cart page and the checkout - and two copies of
   the same rules is how the three slowly stop matching. commerce.css is enqueued on product pages
   for exactly this reason. */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   THE DRAWER, REBUILT — 2026-09-20
   ═══════════════════════════════════════════════════════════════════════════════════════════════

   🔴 THIS BLOCK IS THE FINAL WORD ON THE DRAWER AND IT SUPERSEDES THE EARLIER PASSES ABOVE.
     The panel had accumulated three rounds of rules with three different gutters (20px in the
     head, 20px in the body, 0 on the progress bar) and no shared rhythm, which is what read as
     "broken": the bar ran edge to edge while its own sentence was inset, the item sat flush
     against the tinted band, and the subtotal had no separation from the line above it.

     Everything below is expressed against ONE gutter and ONE vertical scale, declared here as
     custom properties, so the sections cannot drift apart again.

   ⚠️ Specificity is raised with `.afw-cart` on every selector so these win over the earlier
     passes regardless of source order. */
.afw-cart {
	--afw-dw-gutter: 22px;
	--afw-dw-gap: 18px;
	--afw-dw-hair: var(--afw-hair, #eeeaf3);
}

/* ── the panel ────────────────────────────────────────────────────────────────────────────── */
.afw-cart .afw-cart-panel {
	width: min(432px, 100vw);
	background: var(--afw-card, #fff);
	box-shadow: -30px 0 70px -34px rgba(28, 26, 34, 0.45);
}

/* ── 1. the head ──────────────────────────────────────────────────────────────────────────── */
.afw-cart .afw-cart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 20px var(--afw-dw-gutter);
	border-bottom: 1px solid var(--afw-dw-hair);
	background: var(--afw-card, #fff);
}
.afw-cart .afw-cart-title {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	font: 500 16.5px/1.25 var(--afw-sans, sans-serif);
	letter-spacing: -0.008em;
	color: var(--afw-ink, #1c1a22);
}
.afw-cart .afw-cart-tick {
	width: 24px;
	height: 24px;
	flex: none;
}
.afw-cart .afw-cart-x {
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 11px;
}

/* ── 2. the incentive band ────────────────────────────────────────────────────────────────────
   One inset, shared by the sentence, the bar and the tier row. The bar used to be full-bleed
   while its sentence was inset by 20px, which is the single most visible misalignment in the
   panel. */
.afw-cart .afw-inc {
	padding: 16px var(--afw-dw-gutter) 17px;
	border-bottom: 1px solid var(--afw-dw-hair);
	background: linear-gradient(180deg, rgba(241, 235, 248, 0.85) 0%, rgba(241, 235, 248, 0.28) 100%);
}
.afw-cart .afw-inc-line {
	margin: 0 0 10px;
	font: 400 13.5px/1.45 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
}
.afw-cart .afw-inc-bar {
	height: 6px;
	background: rgba(120, 80, 192, 0.14);
}
.afw-cart .afw-inc-tier {
	margin-top: 12px;
	gap: 9px;
}

/* ── 3. the body ──────────────────────────────────────────────────────────────────────────── */
.afw-cart .afw-cart-body {
	padding: 0 var(--afw-dw-gutter);
	overscroll-behavior: contain;
}

/* the line items */
.afw-cart .woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 26px;
	gap: 14px;
	align-items: start;
	padding: var(--afw-dw-gap) 0;
	border-bottom: 1px solid var(--afw-dw-hair);
}
.afw-cart .woocommerce-mini-cart-item:last-child { border-bottom: 0; }
.afw-cart .woocommerce-mini-cart-item img {
	grid-row: auto;
	width: 64px;
	height: 64px;
	border-radius: 12px;
}
.afw-cart .woocommerce-mini-cart-item a:not(.remove) {
	font: 500 14px/1.4 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
}
.afw-cart .woocommerce-mini-cart-item .quantity {
	margin-top: 5px;
	font: 400 13px/1.4 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
}
/* ⚠️ the remove control sits in its own grid column now, not absolutely positioned - the absolute
   version drifted out of line the moment a product name wrapped to two lines */
.afw-cart .woocommerce-mini-cart-item .remove,
.afw-cart .woocommerce-mini-cart-item .remove_from_cart_button {
	position: static;
	grid-column: 3;
	grid-row: 1;
	width: 26px;
	height: 26px;
	margin-top: -2px;
	font-size: 16px;
}

/* the subtotal, with a real separation above it */
.afw-cart .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--afw-line, #e4deec);
	font: 400 14px/1.3 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
}
.afw-cart .woocommerce-mini-cart__total .amount {
	font: 600 21px/1.1 var(--afw-serif, Georgia, serif);
	color: var(--afw-ink, #1c1a22);
}

/* the two buttons */
.afw-cart .woocommerce-mini-cart__buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 0;
	padding: 0 0 var(--afw-dw-gap);
}
.afw-cart .woocommerce-mini-cart__buttons .button {
	width: 100%;
	min-height: 50px;
	border-radius: 13px;
	font-size: 14px;
	white-space: nowrap;
}

/* ── 4. the footer note ───────────────────────────────────────────────────────────────────── */
.afw-cart .afw-cart-note {
	padding: 13px var(--afw-dw-gutter) 16px;
	border-top: 1px solid var(--afw-dw-hair);
	background: var(--afw-paper, #fbfafc);
	font: 400 12.5px/1.45 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
	text-align: center;
}

/* ── 5. the recommendation strip, inside the drawer ───────────────────────────────────────── */
.afw-cart .afw-reco {
	padding: var(--afw-dw-gap) 0 var(--afw-dw-gap);
	border-top: 1px solid var(--afw-dw-hair);
}
.afw-cart .afw-reco-list { gap: 9px; }

@media (max-width: 600px) {
	.afw-cart { --afw-dw-gutter: 18px; }
	.afw-cart .afw-cart-panel { width: 100vw; }
	.afw-cart .woocommerce-mini-cart__buttons .button { min-height: 48px; font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   THE DRAWER'S LINE ITEM — written against the THEME'S REAL MARKUP — 2026-09-20
   ═══════════════════════════════════════════════════════════════════════════════════════════════

   🔴 EVERY EARLIER RULE FOR THIS ROW WAS WRITTEN AGAINST MARKUP NO SHOPPER EVER SEES.
     The screenshot harness stubs the add-to-cart response so it can open the drawer, and the stub
     supplied a hand-written simplified mini-cart. The theme's real one is completely different:

        li.woocommerce-mini-cart-item
          div.woocommerce-mini-cart-item__thumbnail  >  a > img
          div.woocommerce-mini-cart-item__summary
            div.woocommerce-mini-cart-item__box
              span.woocommerce-mini-cart-item__data   (name, price, a hidden "QTY: 1")
              span.woocommerce-mini-cart-item__qty    >  div.quantity  - a REAL working stepper
              a.remove

     So `grid-template-columns: 64px 1fr 26px` on the <li> was sizing two children, not four; the
     stepper - which the earlier CSS flattened with `display:block` - collapsed into a vertical
     stack of minus, 1, plus, Remove. That stack is what looked broken, and it was real.

   ⚠️ The drawer has a WORKING QUANTITY STEPPER. That is worth keeping, so it is styled as one
     rather than flattened. It posts through the theme's own `wc_ajax_update_cart_item`. */

/* the row: image | everything else */
.afw-cart .woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 18px 0;
	border-bottom: 1px solid var(--afw-dw-hair, #eeeaf3);
}
.afw-cart .woocommerce-mini-cart-item:last-of-type { border-bottom: 0; }

.afw-cart .woocommerce-mini-cart-item__thumbnail { width: 68px; }
.afw-cart .woocommerce-mini-cart-item__thumbnail a { display: block; }
.afw-cart .woocommerce-mini-cart-item__thumbnail img {
	width: 68px;
	height: 68px;
	object-fit: cover;
	border-radius: 12px;
	background: var(--afw-band, #f5f2f8);
	display: block;
}

.afw-cart .woocommerce-mini-cart-item__summary { min-width: 0; }
.afw-cart .woocommerce-mini-cart-item__box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	min-width: 0;
}
.afw-cart .woocommerce-mini-cart-item__data {
	display: block;
	min-width: 0;
	width: 100%;
}
.afw-cart .woocommerce-mini-cart-item__name { display: block; }
.afw-cart .woocommerce-mini-cart-item__name a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font: 500 14px/1.4 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
	text-decoration: none;
}
.afw-cart .woocommerce-mini-cart-item__name a:hover { text-decoration: underline; }
.afw-cart .woocommerce-mini-cart-item__data > .amount {
	display: block;
	margin-top: 3px;
	font: 600 13.5px/1.3 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
	font-variant-numeric: tabular-nums;
}
/* the theme prints a duplicate "QTY: 1" for screen readers and marks it .hidden itself; make sure
   it never becomes visible through one of our own display rules */
.afw-cart .woocommerce-mini-cart-item__qty--text.hidden { display: none !important; }

/* the row under the name: the stepper on the left, Remove on the right.
   ⚠️ A GRID, NOT AN ABSOLUTELY POSITIONED "Remove". The absolute version sat wherever the box
     happened to end, which put it between the price and the stepper instead of on the stepper's
     line - and it would have moved again the moment a product name wrapped to two lines. Named
     areas place all three explicitly, so the row cannot drift with the content. */
.afw-cart .woocommerce-mini-cart-item__box {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"data data"
		"qty  remove";
	align-items: center;
	gap: 10px 12px;
	position: static;
	padding-right: 0;
}
.afw-cart .woocommerce-mini-cart-item__data { grid-area: data; }
.afw-cart .woocommerce-mini-cart-item__qty {
	grid-area: qty;
	display: inline-block;
	width: auto;
	justify-self: start;
}
.afw-cart .woocommerce-mini-cart-item .quantity {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-width: 0;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: none;
}
.afw-cart .woocommerce-mini-cart-item .quantity input[type="number"],
.afw-cart .woocommerce-mini-cart-item .quantity .qty {
	width: 40px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font: 500 13px/1 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}
.afw-cart .woocommerce-mini-cart-item .quantity input::-webkit-outer-spin-button,
.afw-cart .woocommerce-mini-cart-item .quantity input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.afw-cart .woocommerce-mini-cart-item .quantity input:focus { outline: none; box-shadow: none; }
.afw-cart .woocommerce-mini-cart-item .quantity .ecomus-qty-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 34px;
	cursor: pointer;
	color: var(--afw-ink-2, #4c4a57);
	transition: background 0.14s linear;
}
.afw-cart .woocommerce-mini-cart-item .quantity .ecomus-qty-button:hover {
	background: var(--afw-band, #f5f2f8);
}

/* Remove: a quiet text link at the end of the stepper row, not a stacked word */
.afw-cart .woocommerce-mini-cart-item .remove,
.afw-cart .woocommerce-mini-cart-item .remove_from_cart_button {
	grid-area: remove;
	position: static;
	justify-self: end;
	align-self: center;
	width: auto;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	font: 400 12.5px/1 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.16s linear, border-color 0.16s linear;
}
.afw-cart .woocommerce-mini-cart-item .remove:hover,
.afw-cart .woocommerce-mini-cart-item .remove_from_cart_button:hover {
	background: none;
	color: var(--afw-clay, #7a3b33);
	border-bottom-color: currentColor;
}

/* ⚠️ belt and braces on the theme's upsell: it is unhooked in afw-commerce.php, so this only
   matters if a theme update restores it under a different hook. Hiding a block that is not there
   costs nothing; letting a dress reappear beside a bunny does not. */
.afw-cart .ecomus-mini-cart-recommended,
.afw-cart .mini-cart-recommended,
.afw-cart .recommendation-heading { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ROUND 9 — 2026-09-20  BUY IT NOW: concept B4, "Split Face" (approved by the owner)
   ═══════════════════════════════════════════════════════════════════════════════════════════════

   One control, divided by a hairline: the label takes the room it needs, and a fixed cell on the
   right carries the icon. At rest the cell is a wash tint; on hover it fills solid and the glyph
   turns white. The affordance is the division itself, so the button needs no shadow, no lift and
   no sheen to be read as pressable.

   ⚠️ THIS SUPERSEDES ROUND 5 *AND* ROUND 8, WHICH ARE LEFT IN PLACE AS THE RECORD.
     Round 5 made it a white card with a gradient chip, a drop shadow, a hover lift and a sheen
     sweep. Round 8 stripped the chip to a bare 20px glyph with a 2px nudge on hover. Every
     property either of them sets is restated below - size, background, shadow, transform,
     transition, gap - because a half-overridden button is how a "removed" background comes
     back at the next screen size, and this file has already been caught by that once.

   ⚠️ THE ICON IS THE SHOPPING BAG WITH A TICK, NOT AN ARROW. The bag was an explicit owner
     instruction on 2026-09-19 - "a checkout icon, and on the RIGHT of the words - a shopping bag
     with a tick, which says 'bought' rather than 'fast'". The B4 concept drawing used an arrow,
     but what B4 approves is the LAYOUT; changing the glyph would quietly reverse a decision made
     the day before. `plush.js` still injects the bag.

   ⚠️ `.afw-pl-bn-chip` IS NOW A CELL, NOT A CHIP. Renaming it would mean touching the JS that
     injects it and every rule above that names it, for no gain - so it keeps the class and
     changes shape. The comment is here so the name does not mislead the next reader. */

.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
	min-height: 52px;
	height: 52px;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 12px;
	background: #ffffff;
	color: var(--afw-ink, #1c1a22);
	box-shadow: none;
	transform: none;
	transition: border-color 160ms linear, background-color 160ms linear;
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:hover,
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:focus-visible {
	border-color: var(--afw-mauve-soft, #a78bc9);
	background: #ffffff;
	transform: none;
	box-shadow: none;
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:active { transform: none; }
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:focus-visible {
	outline: 2px solid var(--afw-control, #8c7ba6);
	outline-offset: 2px;
}

/* the label side: takes the free space, reads from the left edge like a row rather than a badge */
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button .ecomus-button-text {
	order: 1;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 0 18px;
	font: 600 14px/1.2 var(--afw-sans, sans-serif);
	letter-spacing: 0.005em;
	color: inherit;
	text-align: left;
}

/* the icon side: a fixed cell, its own ground, divided by the same hairline as the frame */
.afw-p--lux .afw-pl-bn-chip {
	order: 2;
	flex: 0 0 58px;
	width: 58px;
	height: auto;
	align-self: stretch;
	display: grid;
	place-items: center;
	border-radius: 0;
	border-left: 1px solid var(--afw-line, #e4deec);
	background: var(--afw-wash, #f1ebf8);
	color: var(--afw-mauve-brand, #7850c0);
	box-shadow: none;
	transition: background-color 160ms linear, color 160ms linear, border-color 160ms linear;
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:hover .afw-pl-bn-chip,
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button:focus-visible .afw-pl-bn-chip {
	background: var(--afw-mauve-brand, #7850c0);
	border-left-color: var(--afw-mauve-brand, #7850c0);
	color: #ffffff;
	transform: none;                  /* round 8 nudged the glyph 2px on hover; the cell fills instead */
}
/* the glyph, sized for a cell rather than for a bare line of text */
.afw-p--lux .afw-pl-bn-chip svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
	stroke-width: 1.85;
}

/* ⚠️ THE SHEEN IS OFF, NOT DELETED. `plush.js` still appends the element; hiding it here means the
     JS needs no change and the effect is one line away from coming back. A sweep across a button
     whose whole idea is a clean division is noise. */
.afw-p--lux .afw-pl-bn-sheen {
	display: none;
	animation: none;
}

/* ── the spinner, moved into the cell ─────────────────────────────────────────────────────────
   🔴 IT WOULD OTHERWISE LAND ON TOP OF THE ICON. The ring is pinned `right: 18px` by the round-7
     block above - which is inside the 58px cell. So the cell becomes its home: the glyph fades,
     the ring appears centred in the cell, and the button keeps its shape and its words. This is
     the same ring that was reported as the "glitchy circle"; it is moved, never removed, because
     a click that reaches the network should say so. 29px = half of 58. */
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.loading::before {
	right: 29px;
	margin: -7.5px -7.5px 0 0;
	color: var(--afw-mauve-brand, #7850c0);
	border-color: currentColor;
	border-top-color: transparent;
	opacity: 1;
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.loading .afw-pl-bn-chip,
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.is-working .afw-pl-bn-chip {
	background: var(--afw-wash, #f1ebf8);
	opacity: 1;                       /* the CELL stays - only its glyph goes */
}
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.loading .afw-pl-bn-chip > svg,
.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.is-working .afw-pl-bn-chip > svg {
	opacity: 0;
	transition: opacity 0.14s linear;
}

@media (prefers-reduced-motion: reduce) {
	.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button { transition: none; }
	.afw-p--lux .afw-pl-bn-chip { transition: none; }
}

@media (max-width: 600px) {
	.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button { height: 50px; min-height: 50px; }
	.afw-p--lux .afw-pl-bn-chip { flex-basis: 52px; width: 52px; }
	.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button .ecomus-button-text { padding: 0 15px; }
	.afw-p--lux .afw-p-info .afw-p-cart .em-buy-now-button.loading::before { right: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   🔴 THE STICKY-BAR THUMBNAIL, CONSTRAINED WITHOUT DEPENDING ON ANY SCOPE — 2026-09-20
   ═══════════════════════════════════════════════════════════════════════════════════════════════

   THE BUG THIS FIXES, AND IT WAS MINE. `plush.js` INJECTS `<img class="afw-pl-sb-thumb">` into the
   sticky add-to-cart bar, and every rule that sized it was scoped to `body.afw-plush`. When the
   script began running on outfit pages, the class was not on their body - so the image was inserted
   with NO width, NO height and NO object-fit, and rendered at whatever the flex line gave it:
   measured **600x600 at 1366px and 358x358 on a 390px phone**, the largest image on the page and
   almost the full width of the screen. It appears on scroll because that is when the bar slides in,
   and it looks blurred because a 400px source was being stretched. Exactly what the owner reported.

   ⚠️ THE SCOPE IS NOW `body.afw-lux` AND OUTFITS CARRY IT, which fixes it properly. This block is
     the second line of defence: an injected element that has no size of its own must never be able
     to blow out again just because a class did not arrive. It is scoped to the ELEMENT, not to a
     page type, so it holds even if the body class is missing, renamed, or the script runs somewhere
     nobody has thought about yet.

   ⚠️ `max-width` AND `max-height` AS WELL AS `width`/`height`, because `flex` can stretch a fixed
     width and `object-fit` cannot rescue an element whose BOX is wrong. */
.afw-pl-sb-thumb {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	max-width: 52px;
	max-height: 52px;
	min-width: 0;
	object-fit: cover;
	border-radius: 11px;
	display: block;
}
@media (max-width: 600px) {
	.afw-pl-sb-thumb {
		width: 44px;
		height: 44px;
		max-width: 44px;
		max-height: 44px;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ROUND 10 — 2026-09-20  THE SIZING TABLE INSIDE A PRODUCT DESCRIPTION
   ═══════════════════════════════════════════════════════════════════════════════════════════════

   🔴 IT HAD NO STYLING AT ALL, which is the whole reason it looked unfinished. Measured before this
     round: rules in `plush.css` matching a table inside `.afw-pl-desc` = **0**. The
     "Our size / Fits a plush measuring / Friends it suits" table is plain `<table>` markup sitting
     in 408 product descriptions and was rendering with browser defaults - hairline borders, cramped
     cells, a bold centred head - in the middle of a page built to a typographic scale.

   ⚠️ `/size-guide/` WAS NOT THE PROBLEM AND IS NOT TOUCHED. That page is already designed, served
     by the `[afw_size_guide]` shortcode with its own 23KB stylesheet (`.afw-sg-card`,
     `.afw-sg-table`, `.afw-sg-measure`). This block deliberately borrows that page's visual
     language - uppercase micro-head, serif first column, hairline rows - so the measurement idea
     reads as ONE idea in both places rather than two designs for the same table.

   ⚠️ SCOPED TO `.afw-p--lux .afw-pl-desc`, so it cannot reach the size-guide page, the tabs' own
     spec list, or any other table on the site.

   ⚠️ AND IT SCROLLS RATHER THAN SQUEEZES. Three columns, one of them a sentence, do not fit 354px.
     `.afw-pl-tablewrap` (added around the table by the template, since a table cannot scroll
     itself) takes the overflow, and `min-width` on the table stops the browser crushing the two
     numeric columns to fit - which is what makes a small table unreadable rather than just small.
     The wrapper having its own `overflow-x` is also what keeps the PAGE from scrolling sideways. */

.afw-p--lux .afw-pl-desc .afw-pl-tablewrap {
	margin: 22px 0 26px;
	border: 1px solid var(--afw-hair, #eeeaf3);
	border-radius: 16px;
	background: var(--afw-card, #ffffff);
	box-shadow: 0 1px 2px rgba(28, 26, 34, 0.03), 0 14px 34px -24px rgba(28, 26, 34, 0.18);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.afw-p--lux .afw-pl-desc .afw-pl-tablewrap table {
	width: 100%;
	min-width: 470px;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: none;
	font: 400 13.5px/1.55 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
}

/* the head: a quiet micro-label, not a heavy bar */
.afw-p--lux .afw-pl-desc .afw-pl-tablewrap thead th {
	padding: 13px 18px;
	background: var(--afw-band, #f5f2f8);
	border: 0;
	border-bottom: 1px solid var(--afw-line, #e4deec);
	font: 600 10.5px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.08em;   /* the same figure as `.afw-sg-table thead th` */
	text-transform: uppercase;
	color: var(--afw-meta, #6e6b7b);
	text-align: left;
	white-space: nowrap;
	vertical-align: middle;
}

.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody td,
.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody th {
	padding: 15px 18px;
	border: 0;
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
	text-align: left;
	vertical-align: middle;
	background: none;
}
.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr:last-child td,
.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr:last-child th {
	border-bottom: 0;
}

/* the first column is the size: serif, tabular, the anchor the eye lands on */
.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr > :first-child {
	font: 500 17px/1.2 var(--afw-serif, Georgia, serif);
	color: var(--afw-ink, #1c1a22);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	width: 1%;
}
/* the measurement column is still a figure, so it stays tabular and unwrapped */
.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody td:nth-child(2) {
	font-weight: 500;
	color: var(--afw-ink, #1c1a22);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* the last column is prose, and is the only one allowed to wrap */
.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody td:last-child {
	color: var(--afw-meta, #6e6b7b);
	font-size: 13px;
	min-width: 230px;
	white-space: normal;
}

.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr:hover td,
.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr:hover th {
	background: var(--afw-wash, #f1ebf8);
}

/* ───────────────────────────────────────────────────────────────────────────────────────────────
   ROUND 10b — 2026-09-20  the same table, measured and then fixed twice more

   ⚠️ A CLAIM I MADE HERE AND THEN MEASURED AWAY, KEPT SO IT IS NOT MADE AGAIN. Seeing
     90 / 187 / 468 at 1366px for "18 cm" / "18–20 cm" / a sentence, I read the middle column as
     hoarding width and gave it `width: 1%`. Desktop did not move a pixel: 187px is the *heading's*
     own min-content width - "Fits a plush measuring" is `nowrap`, so the column is already as
     narrow as its widest cell allows. The rule did nothing here and broke the phone layout, where
     `:nth-child(2)` outranked the block's own `td { width: auto }` and left a 32px column of
     single characters. It is gone. The distribution was content-driven all along.

   🔴 ON A PHONE IT IS NO LONGER A TABLE AT ALL. Measured at 390px: the wrapper was 352 wide
     holding a 461px table, so the third column - the sentence naming which plush it suits, which
     is the answer people came for - was cut off at the edge with no cue that it continued.
     Sideways scrolling is a poor answer to "will this fit my plush?".

     Under 600px each row becomes its own card: the size as the card's title in the serif, then
     each remaining column as a micro-label above its value, taken from `data-h` - which the
     template copies onto every cell from the table's own `<thead>`. Nothing is hidden, nothing
     scrolls, and the head can be dropped because its words are now inside the rows.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	/* the card moves from the wrapper onto each row, so the wrapper stops being a box */
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap {
		margin: 18px 0 22px;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		overflow-x: visible;
	}

	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap table,
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody,
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr {
		display: block;
		width: 100%;
		min-width: 0;
	}

	/* the column names live on the cells now, so the head is redundant rather than lost */
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap thead {
		display: none;
	}

	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr {
		margin: 0 0 10px;
		border: 1px solid var(--afw-hair, #eeeaf3);
		border-radius: 14px;
		background: var(--afw-card, #ffffff);
		box-shadow: 0 1px 2px rgba(28, 26, 34, 0.03);
		overflow: hidden;
	}
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr:last-child {
		margin-bottom: 0;
	}

	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody td,
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody th {
		display: block;
		width: auto;
		padding: 11px 16px 12px;
		border: 0;
		border-top: 1px solid var(--afw-hair, #eeeaf3);
		white-space: normal;
	}

	/* the micro-label, from the column this cell came from */
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody td[data-h]::before,
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody th[data-h]::before {
		content: attr(data-h);
		display: block;
		margin-bottom: 3px;
		font: 600 10px/1.2 var(--afw-sans, sans-serif);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--afw-meta, #6e6b7b);
	}

	/* the size is the card's title: the band, the serif, and no label above it */
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr > :first-child {
		width: auto;
		padding: 12px 16px 13px;
		border-top: 0;
		border-bottom: 1px solid var(--afw-line, #e4deec);
		background: var(--afw-band, #f5f2f8);
		font: 500 19px/1.15 var(--afw-serif, Georgia, serif);
		color: var(--afw-ink, #1c1a22);
		white-space: nowrap;
	}
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr > :first-child::before {
		display: none;
	}

	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody td:nth-child(2) {
		font-size: 14.5px;
		white-space: normal;
	}
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody td:last-child {
		min-width: 0;
		font-size: 13px;
	}

	/* the row is the card, so nothing inside it takes a hover tint */
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr:hover td,
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr:hover th {
		background: none;
	}
	.afw-p--lux .afw-pl-desc .afw-pl-tablewrap tbody tr:hover > :first-child {
		background: var(--afw-band, #f5f2f8);
	}
}