/**
 * Native archive - the whole visual layer for every product archive, in one file.
 *
 * ⚠ NEVER WRITE A COMMENT DELIMITER INSIDE A COMMENT IN THIS FILE.
 *   CSS comments do not nest. An inner close ends the block early, the prose after it is parsed
 *   as CSS, and the parser discards whole rule blocks. It destroyed a preview on 2026-09-13 while
 *   the delimiter counts stayed balanced, so counting them proves nothing.
 *   Verify after ANY edit:  python tools/css-comment-check.py <this file>
 *
 * IT DECLARES NO COLOURS AND NO TYPEFACES OF ITS OWN.
 *   Every value comes from the `--afw-*` tokens in `design-tokens.css`, which is already global.
 *   That is the point of having shipped the token layer first: this file is layout and component
 *   behaviour only, so a palette decision is made in one place and lands everywhere at once.
 *   Fallbacks are given on each `var()` so the archive still renders if the token layer is ever
 *   switched off.
 *
 * SIZE IS THE FEATURE.
 *   This replaces the loop styling that `ecomus/woocommerce.css` (336 KB) was doing. Staying
 *   small is not a nicety here - the whole directive was a lighter page.
 */

.afw-native-main {
	background: var(--afw-paper, #fbfafc);
	padding: 0 0 84px;
	font-family: var(--afw-sans, system-ui, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
	font-size: 16px;
	line-height: var(--afw-lh-body, 1.7);
}

.afw-native-main *,
.afw-native-main *::before,
.afw-native-main *::after {
	box-sizing: border-box;
}

/**
 * ⚠️ THE `order` MECHANISM IS GONE, AND THAT IS AN IMPROVEMENT.
 *   The category copy used to sit above the grid on desktop and below it on mobile, which needed a
 *   flex parent and three `order` declarations to move one node without duplicating it. It now
 *   sits below the grid and the pagination on every viewport, so it is simply last in the DOM.
 *   Fewer moving parts, and the same node rendered once.
 */
.afw-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 28px;
}

/*  the description's own typography, wherever it is used  */
.afw-desc-inner,
.afw-seo-body {
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--afw-ink-2, #4c4a57);
}

.afw-desc-inner > :first-child, .afw-seo-body > :first-child { margin-top: 0; }
.afw-desc-inner > :last-child, .afw-seo-body > :last-child { margin-bottom: 0; }

.afw-desc-inner h2,
.afw-desc-inner h3,
.afw-seo-body h2,
.afw-seo-body h3 {
	font-family: var(--afw-serif, Georgia, serif);
	font-weight: 500;
	color: var(--afw-ink, #1c1a22);
	line-height: 1.2;
	margin: 26px 0 10px;
}

.afw-desc-inner h2, .afw-seo-body h2 { font-size: 22px; }
.afw-desc-inner h3, .afw-seo-body h3 { font-size: 18px; }

.afw-desc-inner table,
.afw-seo-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0 0 16px;
}

.afw-desc-inner th,
.afw-desc-inner td,
.afw-seo-body th,
.afw-seo-body td {
	text-align: left;
	padding: 9px 13px;
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
}

.afw-desc-inner th,
.afw-seo-body th {
	background: var(--afw-band, #f5f2f8);
	color: var(--afw-ink, #1c1a22);
	font-weight: 500;
}

/* a wide table scrolls inside its own box so the page body never moves sideways */
.afw-desc-inner .afw-scroll,
.afw-desc-inner > div:has(> table) {
	overflow-x: auto;
}

.afw-desc { margin-bottom: 34px; }

/*  ---- the page head ----------------------------------------------------  */
.afw-head {
	padding: 40px 0 34px;
	border-bottom: 1px solid var(--afw-line, #e4deec);
	margin-bottom: 40px;
}

.afw-crumb {
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 13px;
	color: var(--afw-meta, #6e6b7b);
	margin: 0 0 14px;
	letter-spacing: 0.01em;
}

.afw-crumb a { color: var(--afw-meta, #6e6b7b); text-decoration: none; }
.afw-crumb a:hover { color: var(--afw-mauve, #7a62a8); text-decoration: underline; text-underline-offset: 3px; }
.afw-crumb-sep { margin: 0 8px; opacity: 0.5; }

/**
 * ⚠️ ONE H1 PER PAGE. The plugin switches the theme's own `shop_header` off on our archives,
 *   because leaving it on produced two H1s - the exact defect the size-guide work had to unpick.
 */
.afw-h1 {
	font-family: var(--afw-serif, Georgia, serif);
	font-size: clamp(32px, 5vw, 40px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: var(--afw-tr-display, -0.02em);
	color: var(--afw-ink, #1c1a22);
	margin: 0;
	text-transform: none;
	text-wrap: balance;
}

/*  ---- the two columns --------------------------------------------------  */
.afw-cols {
	display: grid;
	grid-template-columns: 258px minmax(0, 1fr);
	gap: 52px;
	align-items: start;
}

/**
 * ⚠️ NO INNER SCROLLBAR ON THE FILTER RAIL.
 *   A `max-height` plus `overflow-y: auto` here is what produced a grey track and a hard vertical
 *   edge down the middle of the page on an earlier preview: with several groups the rail is
 *   taller than the viewport and grows its own scrollbar. It sticks and flows with the page.
 */
.afw-f {
	position: sticky;
	top: 22px;
	min-width: 0;
}

.afw-results { min-width: 0; }

/*  ---- the filter shell and its toggle ----------------------------------  */
/**
 * 🔴 OPEN AND INERT ON DESKTOP, A REAL DISCLOSURE ON A PHONE.
 *   The `<details>` is rendered with `open`, and above the breakpoint the summary is hidden and
 *   `::details-content` is forced visible - so on a desktop it is not a control at all, it is just
 *   a wrapper. Below 1024px the summary appears and the panel starts closed, because a phone
 *   visitor scrolling past seven filter groups to reach a product is the problem this fixes.
 *
 * ⚠️ `pointer-events: none` on the desktop summary as well as `display: none`: a summary that is
 *   only visually hidden is still keyboard-focusable and still toggles the panel, which on desktop
 *   would let a tab-user collapse a sidebar that has no visible way to reopen.
 */
.afw-f-shell { min-width: 0; }

.afw-f-toggle {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	margin-bottom: 18px;
	background: var(--afw-card, #fff);
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: var(--afw-radius, 2px);
	cursor: pointer;
	list-style: none;
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--afw-tr-label, 0.08em);
	text-transform: uppercase;
	color: var(--afw-ink, #1c1a22);
}

.afw-f-toggle::-webkit-details-marker { display: none; }
.afw-f-toggle::marker { content: ""; }

/* the three bars, drawn - and they animate into a cross when open */
.afw-f-toggle-icon {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 12px;
}

.afw-f-toggle-icon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.6px;
	border-radius: 2px;
	background: var(--afw-mauve-strong, #5f4a8a);
	transition: transform 220ms ease, opacity 160ms ease;
}

.afw-f-toggle-icon span:nth-child(1) { top: 0; }
.afw-f-toggle-icon span:nth-child(2) { top: 5.2px; }
.afw-f-toggle-icon span:nth-child(3) { top: 10.4px; }

.afw-f-shell[open] .afw-f-toggle-icon span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
.afw-f-shell[open] .afw-f-toggle-icon span:nth-child(2) { opacity: 0; }
.afw-f-shell[open] .afw-f-toggle-icon span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }

.afw-f-toggle-label { flex: 1 1 auto; }

.afw-f-toggle-count {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--afw-mauve-strong, #5f4a8a);
	color: #fff;
	font-size: 11px;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.afw-f-toggle:focus-visible { outline: 2px solid var(--afw-mauve, #7a62a8); outline-offset: 2px; }

/*  ---- filters ----------------------------------------------------------  */
.afw-f-group { margin-bottom: 34px; }

.afw-f-title {
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--afw-tr-label, 0.08em);
	text-transform: uppercase;
	color: var(--afw-meta, #6e6b7b);
	margin: 0 0 14px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
}

.afw-f-list { display: flex; flex-direction: column; }

.afw-f-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	font-size: 15px;
	color: var(--afw-ink-2, #4c4a57);
	text-decoration: none;
	line-height: 1.45;
}

.afw-f-item i {
	font-style: normal;
	font-size: 12px;
	color: var(--afw-meta, #6e6b7b);
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

.afw-f-item:hover { color: var(--afw-mauve, #7a62a8); }

.afw-f-item.is-on {
	color: var(--afw-ink, #1c1a22);
	font-weight: 500;
}

.afw-f-item.is-on span::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 7px;
	vertical-align: 2px;
	border-radius: 50%;
	background: var(--afw-mauve, #7a62a8);
}

/**
 * A dead end keeps its link. The count that marks it comes from a base set that excludes this
 * group's own selection, so switching within a group always works - and the filter that killed
 * the option is one click from being cleared.
 */
.afw-f-item.is-dead,
.afw-f-pill.is-dead {
	color: #8f867d;
	text-decoration: line-through;
	text-decoration-color: rgba(143, 134, 125, 0.5);
}

/*  sizes read faster as a row of pills than a column of rows  */
.afw-f-pills { display: flex; flex-wrap: wrap; gap: 7px; }

.afw-f-pill {
	display: inline-flex;
	align-items: center;
	font-size: 13.5px;
	line-height: 1.2;
	padding: 7px 12px;
	color: var(--afw-ink-2, #4c4a57);
	background: var(--afw-card, #fff);
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: var(--afw-radius, 2px);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--afw-ease, 150ms ease-out), color var(--afw-ease, 150ms ease-out);
}

.afw-f-pill:hover { border-color: var(--afw-mauve, #7a62a8); color: var(--afw-mauve, #7a62a8); }

.afw-f-pill.is-on {
	background: var(--afw-mauve-strong, #5f4a8a);
	border-color: var(--afw-mauve-strong, #5f4a8a);
	color: #fff;
}

/**
 * ⚠ NO COUNT ON THE SIZE PILLS. The label already ends in a number, so a count reads as part of
 *   the size. The count is still computed - it is what marks a pill dead - it is just not shown.
 */
.afw-f-pill.is-dead {
	background: var(--afw-band, #f5f2f8);
	border-color: var(--afw-hair, #eeeaf3);
	color: #98908a;
}

.afw-f-clear {
	display: inline-block;
	margin-top: 4px;
	font-size: 13.5px;
	color: var(--afw-mauve, #7a62a8);
}

/*  ---- the size helper, rebuilt smaller -------------------------------------
 *
 * 🔴 WHAT WAS WRONG WITH IT, from the screenshot and the measured box: 258x209 with
 *   `padding: 26px 20px 20px`, a 38px mauve disc floating half outside the top-left corner, an
 *   11.5px uppercase title under it, a divider rule, a paragraph, and a full-width outlined
 *   button. Six devices in a 258px column - which is why it read as bulky and empty at the same
 *   time. The badge was the worst of it: a decoration that forced 26px of top padding on
 *   everything else.
 *
 * 🟢 NOW: a left rule, a ruler glyph inline with the title, two lines of copy and a text link.
 *   No disc, no divider, no button outline, and the padding pays for content rather than for a
 *   floating circle.
 */
.afw-f-aside {
	margin-top: 30px;
	padding: 2px 0 2px 14px;
	background: transparent;
	border: 0;
	border-left: 2px solid var(--afw-mauve-soft, #a78bc9);
	border-radius: 0;
}

.afw-f-aside p {
	font-size: 13px;
	line-height: 1.6;
	color: var(--afw-meta, #6e6b7b);
	margin: 0 0 10px;
}

/*  ---- colour, as circles -----------------------------------------------  */
/**
 * 🔴 CIRCLES INSTEAD OF ELEVEN TEXT ROWS - and the name is moved, never discarded.
 *   Colour alone cannot carry meaning: a red/green pair is indistinguishable to roughly one man
 *   in twelve, and a dot is silent to a screen reader. So every swatch carries the family name in
 *   `title`, `aria-label` and a visually-hidden span, and the chosen one prints its name in full
 *   in the caption beneath. The circles are the interface; the words are still there.
 */
.afw-f-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.afw-f-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	text-decoration: none;
	transition: box-shadow var(--afw-ease, 150ms ease-out), transform var(--afw-ease, 150ms ease-out);
}

.afw-f-dot i {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	/* a hairline, because a cream or white swatch is invisible on a cream ground without one */
	box-shadow: inset 0 0 0 1px rgba(28, 26, 34, 0.16);
}

.afw-f-dot:hover {
	box-shadow: 0 0 0 2px rgba(122, 98, 168, 0.35);
	transform: translateY(-1px);
}

.afw-f-dot.is-on {
	box-shadow: 0 0 0 2px var(--afw-mauve-strong, #5f4a8a);
}

/* a dead end is dimmed and struck, and keeps its link - see the group definition */
.afw-f-dot.is-dead { opacity: 0.32; }

.afw-f-dot.is-dead i {
	box-shadow: inset 0 0 0 1px rgba(28, 26, 34, 0.16);
	position: relative;
}

.afw-f-dots-caption {
	margin: 11px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--afw-meta, #6e6b7b);
	font-variant-numeric: tabular-nums;
	min-height: 1.45em;
}

/*  ---- the category copy, collapsed, at the very bottom -------------------  */
/**
 * Native `<details>`. No script, so the copy cannot be trapped closed by a JS failure, and it is
 * keyboard operable and announced as a disclosure for free.
 *
 * ⚠️ Collapsed is NOT hidden: the text is fully present in the served HTML, which is what a
 * crawler reads. `display: none` on a second copy, or fetching the text over AJAX, is what would
 * have cost the ranking - not this.
 */
.afw-seo {
	margin-top: 64px;
	padding: 0;
	background: var(--afw-card, #fff);
	border-radius: var(--afw-radius, 2px);
	border-top: 2px solid var(--afw-mauve, #7a62a8);
}

.afw-seo summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
}

/* the default disclosure triangle, removed in both engines */
.afw-seo summary::-webkit-details-marker { display: none; }
.afw-seo summary::marker { content: ""; }

.afw-seo-label {
	font-family: var(--afw-serif, Georgia, serif);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--afw-ink, #1c1a22);
	letter-spacing: var(--afw-tr-head, -0.012em);
}

/* a drawn chevron - no icon font, no SVG request */
.afw-seo-hint {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--afw-meta, #6e6b7b);
	border-bottom: 1.5px solid var(--afw-meta, #6e6b7b);
	transform: rotate(45deg);
	margin-bottom: 3px;
	transition: transform 200ms ease-out;
}

.afw-seo[open] .afw-seo-hint {
	transform: rotate(-135deg);
	margin-bottom: -3px;
}

.afw-seo summary:hover .afw-seo-label { color: var(--afw-mauve, #7a62a8); }

.afw-seo summary:focus-visible {
	outline: 2px solid var(--afw-mauve, #7a62a8);
	outline-offset: -2px;
}

.afw-seo-body {
	padding: 0 24px 26px;
	border-top: 1px solid var(--afw-hair, #eeeaf3);
	margin-top: 0;
	padding-top: 22px;
}

/**
 * A real open/close animation where the browser supports it. `interpolate-size` lets `height`
 * animate to and from `auto`, and `::details-content` is the only way to reach the part that
 * actually expands. Where it is unsupported the panel simply snaps open, which is the correct
 * fallback - never a reason to reach for JavaScript.
 */
@supports (interpolate-size: allow-keywords) {
	.afw-seo {
		interpolate-size: allow-keywords;
	}

	.afw-seo::details-content {
		height: 0;
		overflow: hidden;
		opacity: 0;
		transition: height 280ms ease, opacity 220ms ease, content-visibility 280ms allow-discrete;
	}

	.afw-seo[open]::details-content {
		height: auto;
		opacity: 1;
	}
}

@media (min-width: 1025px) {
	/* not a control on desktop: invisible AND unfocusable, so a tab user cannot collapse a
	   sidebar that has no visible way back */
	.afw-f-toggle {
		display: none !important;
		pointer-events: none;
	}

	/* and the panel is always shown, whatever the `open` attribute says */
	.afw-f-shell > .afw-f { display: block !important; }
}

/*  ---- the bar ----------------------------------------------------------  */
.afw-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 30px;
}

.afw-count {
	margin: 0;
	font-size: 14px;
	color: var(--afw-meta, #6e6b7b);
	font-variant-numeric: tabular-nums;
}

.afw-count b { color: var(--afw-ink, #1c1a22); font-weight: 500; }

.afw-sort { margin: 0; }

.afw-sort select {
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 14px;
	color: var(--afw-ink, #1c1a22);
	background-color: var(--afw-card, #fff);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23221D19' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1px solid var(--afw-control, #8c7ba6);
	border-radius: var(--afw-radius, 2px);
	padding: 0 40px 0 14px;
	height: 42px;
	min-width: 190px;
	cursor: pointer;
}

.afw-sort select:focus-visible { outline: 2px solid var(--afw-mauve, #7a62a8); outline-offset: 2px; }

/*  ---- the grid ---------------------------------------------------------  */
.afw-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 26px;
}

/**
 * ⚠️ AN <article> WITH AN INNER LINK, NOT ONE WRAPPING ANCHOR.
 *   The colourway swatches are links of their own, and an anchor inside an anchor is invalid -
 *   the browser closes the outer one early and the layout fails in a way that looks like a CSS
 *   bug. The media link carries `tabindex="-1"` and `aria-hidden` so keyboard and screen-reader
 *   users get the product name once, not twice.
 */
.afw-c { min-width: 0; }

.afw-c-media {
	position: relative;
	overflow: hidden;
	background: var(--afw-card, #fff);
	border-radius: var(--afw-radius, 2px);
}

.afw-c-media a { display: block; }

.afw-c-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 320ms ease-out;
}

/**
 * ⚠️ HOVER IS A SCALE, NOT A SECOND IMAGE. 686 of 1,086 products have exactly one photograph, so
 *   an image-swap affordance would be dead on 63% of the shelf.
 */
.afw-c:hover .afw-c-media img { transform: scale(1.04); }

.afw-c-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: flex-start;
}

.afw-c-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--afw-tr-label, 0.08em);
	text-transform: uppercase;
	line-height: 1;
	padding: 5px 9px;
	border-radius: var(--afw-radius, 2px);
}

/* white on ink measures 16.7; ink on blush 10.68 - blush can never carry white text, at 1.56 */
.afw-c-badge.is-sale { background: var(--afw-blush, #f6bfdf); color: var(--afw-ink, #1c1a22); }
.afw-c-badge.is-out { background: var(--afw-ink, #1c1a22); color: var(--afw-paper, #fbfafc); }

.afw-c-body { padding: 14px 2px 0; }

.afw-c-eyebrow {
	margin: 0 0 5px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: var(--afw-tr-label, 0.08em);
	text-transform: uppercase;
	color: var(--afw-meta, #6e6b7b);
}

.afw-c-name {
	font-family: var(--afw-serif, Georgia, serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -0.008em;
	color: var(--afw-ink, #1c1a22);
	margin: 0 0 7px;
	text-transform: none;
}

.afw-c-name a { color: inherit; text-decoration: none; }
.afw-c-name a:hover { color: var(--afw-mauve, #7a62a8); }

.afw-c-rating {
	margin: 0 0 5px;
	font-size: 13px;
	color: var(--afw-meta, #6e6b7b);
	font-variant-numeric: tabular-nums;
}

.afw-c-price {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--afw-ink, #1c1a22);
	font-variant-numeric: tabular-nums;
}

.afw-c-price del { color: var(--afw-meta, #6e6b7b); font-weight: 400; margin-right: 6px; }
.afw-c-price ins { text-decoration: none; background: transparent; color: inherit; }

.afw-c-meta {
	margin: 7px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--afw-meta, #6e6b7b);
}

/*  colourways - present on about 9% of cards, so nothing is reserved when absent  */
.afw-c-ways { display: flex; align-items: center; gap: 6px; margin-top: 11px; flex-wrap: wrap; }

.afw-c-way {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--afw-line, #e4deec);
	background-size: cover;
	background-position: center;
	transition: box-shadow var(--afw-ease, 150ms ease-out), border-color var(--afw-ease, 150ms ease-out);
}

.afw-c-way:hover,
.afw-c-way:focus-visible {
	border-color: var(--afw-mauve, #7a62a8);
	box-shadow: 0 0 0 2px rgba(122, 98, 168, 0.3);
}

.afw-c-way-more { font-size: 12px; color: var(--afw-meta, #6e6b7b); font-variant-numeric: tabular-nums; }

/*  ---- the hover action rail on a card ----------------------------------  */
/**
 * 🔴 IT SLIDES IN FROM THE EDGE AND NEVER COVERS THE PRODUCT.
 *   The rail sits in the top-right corner, offset out of frame until hover, so at rest the card
 *   is nothing but the photograph. Three 38px buttons in a column occupy about 7% of a square
 *   image and sit over the corner, which is where plush photography has the least detail.
 *
 * ⚠️ `focus-within` opens it as well as `:hover`. Three actions that exist only on hover are
 *   three actions a keyboard user cannot reach, and this rail contains the add-to-cart.
 */
.afw-c-acts {
	position: absolute;
	top: 12px;
	right: -14px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
	visibility: hidden;
	opacity: 0;
	transition: right 280ms ease-out, opacity 220ms ease-out, visibility 280ms;
}

.afw-c:hover .afw-c-acts,
.afw-c:focus-within .afw-c-acts {
	right: 12px;
	visibility: visible;
	opacity: 1;
}

/**
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * 🔴 THE "PLAIN PURPLE CIRCLE WITH NO ICON" BUG - IT WAS MY OWN TOKEN LAYER
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 *
 *   THE SYMPTOM: hovering the third action showed a solid purple circle with nothing inside,
 *   while the first two behaved perfectly.
 *
 *   THE CAUSE, measured selector by selector:
 *       design-tokens.css   body.afw-tokens a:hover { color: var(--afw-mauve-strong) }   (0,2,2)
 *       native.css          .afw-c-act:hover        { color: #fff }                      (0,2,0)
 *   The token layer wins. The icon is drawn with `stroke="currentColor"`, so on hover the bag was
 *   painted **mauve-strong on a mauve-strong background** - contrast 1.00, a filled circle.
 *
 *   AND WHY ONLY THE THIRD BUTTON: quick-view and wishlist are `<button>` elements; add-to-cart
 *   is an `<a>`, because it is a real `?add-to-cart=` link that WooCommerce upgrades to AJAX. An
 *   `a:hover` rule cannot touch a `<button>`. One element type differing was the whole difference.
 *
 *   THE FIX: the rail's own rules are scoped through `.afw-c-acts` and name the element, which
 *   puts them at (0,3,1) and (0,3,2) - comfortably past the global link rule - without an
 *   `!important` anywhere.
 *
 *   ⚠️ THE LESSON, AND IT HAS NOW COST TWO ROUNDS: a global `a:hover` colour in a token layer
 *   reaches inside every component that uses an anchor. Any component painting an icon with
 *   `currentColor` on a coloured fill has to out-specify it deliberately - inheriting is not
 *   enough. Worth checking anywhere else an `<a>` carries an icon on a filled background.
 */
.afw-c-acts .afw-c-act,
.afw-c-acts a.afw-c-act,
.afw-c-acts button.afw-c-act {
	position: relative;
	/* grid + place-items is the one centring that cannot be knocked out of alignment by an
	   inherited line-height or vertical-align on the svg */
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 50%;
	background: var(--afw-card, #fff);
	color: var(--afw-ink, #1c1a22);
	/* ⚠️ a white circle on a white card had no visible edge - the reported "icon floating
	   outside its container" was the container being invisible, not the icon being misplaced */
	box-shadow: 0 2px 6px rgba(28, 26, 34, 0.16);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--afw-ease, 150ms ease-out), color var(--afw-ease, 150ms ease-out), border-color var(--afw-ease, 150ms ease-out), transform var(--afw-ease, 150ms ease-out);
}

.afw-c-acts a.afw-c-act:hover,
.afw-c-acts button.afw-c-act:hover,
.afw-c-acts a.afw-c-act:focus-visible,
.afw-c-acts button.afw-c-act:focus-visible {
	background: var(--afw-mauve-strong, #5f4a8a);
	border-color: var(--afw-mauve-strong, #5f4a8a);
	color: #ffffff;
	transform: scale(1.06);
}

/**
 * ⚠️ AND THE ICON'S STROKE IS STATED, NOT ONLY INHERITED.
 *   `currentColor` is the right mechanism and it is kept - but it is what the bug rode in on. A
 *   second, explicit declaration means that even if some future rule wins the `color` fight
 *   again, the glyph still paints against its own background instead of vanishing into it.
 */
.afw-c-acts .afw-c-act .afw-i { stroke: currentColor; flex: 0 0 auto; vertical-align: middle; }
.afw-c-acts a.afw-c-act:hover .afw-i,
.afw-c-acts button.afw-c-act:hover .afw-i { stroke: #ffffff; }

.afw-c-act:focus-visible {
	outline: 2px solid var(--afw-mauve, #7a62a8);
	outline-offset: 2px;
}

/* the saved state stays after the pointer leaves - it is a toggle, not a hover */
.afw-c-acts button.afw-c-fav.is-on {
	background: var(--afw-blush, #f6bfdf);
	border-color: var(--afw-blush, #f6bfdf);
	color: var(--afw-ink, #1c1a22);
}

/* a saved heart is filled, so the state is readable without relying on the tint alone */
.afw-c-acts button.afw-c-fav.is-on .afw-i {
	fill: var(--afw-ink, #1c1a22);
	stroke: var(--afw-ink, #1c1a22);
}

.afw-c-acts a.afw-c-add.is-working { opacity: 0.6; pointer-events: none; }

.afw-c-acts a.afw-c-add.is-added {
	background: var(--afw-sage, #3f6b4a);
	border-color: var(--afw-sage, #3f6b4a);
	color: #ffffff;
}

.afw-c-acts a.afw-c-add.is-added .afw-i { stroke: #ffffff; }

/* the tooltip opens to the LEFT, because the rail is against the right edge */
/**
 * ⚠️ 12px of clearance, not 8. At 8px the tooltip sat against the circle and, with the cursor over
 *   the button, read as one merged shape - which is part of why the third button looked like a
 *   blank pill in the screenshots. `pointer-events: none` is what stops it ever intercepting the
 *   click it is describing.
 */
.afw-c-tip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 11.5px;
	line-height: 1;
	padding: 6px 9px;
	border-radius: var(--afw-radius, 2px);
	background: var(--afw-ink, #1c1a22);
	color: var(--afw-paper, #fbfafc);
	visibility: hidden;
	opacity: 0;
	transition: all var(--afw-ease, 150ms ease-out);
	pointer-events: none;
}

.afw-c-act:hover .afw-c-tip,
.afw-c-act:focus-visible .afw-c-tip { visibility: visible; opacity: 1; }

/**
 * ⚠️ NO RAIL ON A TOUCH SCREEN. A hover affordance on a phone either never appears or appears on
 *   the first tap and swallows it - so the card is the link it always was, and the product page
 *   carries the same three actions properly.
 */
@media (hover: none) {
	.afw-c-acts { display: none; }
}

/*  ---- icons in the filter rows -----------------------------------------  */
/**
 * The icon is decoration; the word beside it is the label. Both are inside the same `<span>`, so
 * the flex gap spaces them and the count still sits hard right.
 */
.afw-i {
	flex: 0 0 auto;
	vertical-align: -2px;
}

.afw-f-item.has-icon > span,
.afw-f-pill.has-icon > span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.afw-f-item .afw-i { color: var(--afw-meta, #6e6b7b); transition: color var(--afw-ease, 150ms ease-out); }
.afw-f-item:hover .afw-i { color: var(--afw-mauve, #7a62a8); }
.afw-f-item.is-on .afw-i { color: var(--afw-mauve-strong, #5f4a8a); }
.afw-f-item.is-dead .afw-i { opacity: 0.45; }

/*  gender reads as a badge rather than a row of words  */
.afw-f-list .afw-f-item.has-icon .afw-i { opacity: 0.9; }

/*  ---- the size helper, with its own mark -------------------------------  */
/**
 * ⚠️ THE FLOATING DISC IS GONE, and with it the rule that made the whole panel `position:
 *   relative` with 26px of top padding to clear it. The glyph is now inline with the title, at
 *   14px, in the accent - it labels the widget instead of decorating it.
 */
.afw-f-aside {
	position: static;
	padding-top: 2px;
}

.afw-f-aside .afw-f-title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 7px;
	padding: 0;
	border: 0;
	font-family: var(--afw-serif, Georgia, serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--afw-ink, #1c1a22);
}

.afw-f-aside-icon {
	position: static;
	display: inline-flex;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--afw-mauve, #7a62a8);
}

/**
 * ⚠️ The glyph is rendered at 22px by the template and wanted at 15px here. `width`/`height` on
 *   the `<svg>` are ATTRIBUTES, so CSS has to override both - setting only the font size does
 *   nothing to an SVG.
 */
.afw-f-aside-icon .afw-i {
	width: 15px;
	height: 15px;
}

/*  the button becomes a link: a 258px column does not need a 100% wide outlined box  */
.afw-f-aside .afw-btn,
.afw-f-aside .afw-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--afw-mauve, #7a62a8);
	background: none;
	border: 0;
	border-radius: 0;
	text-decoration: none;
}

.afw-f-aside .afw-btn:hover { text-decoration: underline; }

.afw-f-aside .afw-btn .afw-i {
	width: 14px;
	height: 14px;
}

/*  ---- the quick-view dialog --------------------------------------------  */
/**
 * A native `<dialog>`: the focus trap, Escape-to-close, the top layer and `::backdrop` all come
 * from the browser. A div-based modal has to reimplement four things, and the focus trap is the
 * one everybody gets wrong.
 */
.afw-qv {
	width: min(880px, calc(100vw - 32px));
	max-height: min(680px, calc(100vh - 48px));
	padding: 0;
	border: 0;
	border-radius: var(--afw-radius, 2px);
	background: var(--afw-card, #fff);
	color: var(--afw-ink-2, #4c4a57);
	font-family: var(--afw-sans, system-ui, sans-serif);
	box-shadow: 0 24px 70px rgba(28, 26, 34, 0.22);
	overflow: hidden;
}

.afw-qv::backdrop {
	background: rgba(28, 26, 34, 0.44);
	backdrop-filter: blur(2px);
}

.afw-qv-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--afw-card, #fff);
	color: var(--afw-ink, #1c1a22);
	box-shadow: 0 1px 3px rgba(28, 26, 34, 0.16);
	cursor: pointer;
}

.afw-qv-close:hover { background: var(--afw-ink, #1c1a22); color: #fff; }

.afw-qv-slot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 240px;
}

.afw-qv-loading {
	grid-column: 1 / -1;
	margin: 0;
	padding: 64px 28px;
	text-align: center;
	font-size: 15px;
	color: var(--afw-meta, #6e6b7b);
}

.afw-qv-media { background: var(--afw-band, #f5f2f8); }

.afw-qv-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 680px;
	object-fit: cover;
}

.afw-qv-body { padding: 34px 32px; overflow-y: auto; }

.afw-qv-title {
	font-family: var(--afw-serif, Georgia, serif);
	font-size: 25px;
	font-weight: 500;
	line-height: 1.18;
	color: var(--afw-ink, #1c1a22);
	margin: 0 0 12px;
	text-transform: none;
}

.afw-qv-price {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 500;
	color: var(--afw-ink, #1c1a22);
	font-variant-numeric: tabular-nums;
}

.afw-qv-stock {
	display: inline-block;
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1;
	padding: 6px 11px;
	border-radius: var(--afw-radius, 2px);
	color: var(--afw-sage, #3f6b4a);
	background: var(--afw-sage-soft, #e8f0e9);
}

.afw-qv-stock.is-out { color: var(--afw-clay, #7a3b33); background: var(--afw-clay-soft, #f7eae7); }

.afw-qv-meta { margin: 0 0 7px; font-size: 14px; color: var(--afw-meta, #6e6b7b); }

.afw-qv-short {
	margin: 14px 0 20px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--afw-ink-2, #4c4a57);
}

@media (max-width: 720px) {
	.afw-qv-slot { grid-template-columns: minmax(0, 1fr); }
	.afw-qv-media img { max-height: 260px; }
	.afw-qv-body { padding: 24px 20px; }
	.afw-qv-title { font-size: 21px; }
}

/*  ---- buttons, empty state, pagination ---------------------------------  */
.afw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.2;
	padding: 12px 22px;
	min-height: 44px;
	border-radius: var(--afw-radius, 2px);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--afw-ease, 150ms ease-out), color var(--afw-ease, 150ms ease-out), border-color var(--afw-ease, 150ms ease-out);
}

.afw-btn-ghost {
	background: var(--afw-card, #fff);
	color: var(--afw-ink, #1c1a22);
	border: 1px solid var(--afw-control, #8c7ba6);
}

.afw-btn-ghost:hover {
	border-color: var(--afw-mauve-strong, #5f4a8a);
	color: var(--afw-mauve-strong, #5f4a8a);
}

.afw-empty {
	background: var(--afw-card, #fff);
	border-radius: var(--afw-radius, 2px);
	padding: 52px 32px;
	text-align: center;
}

.afw-empty h2 {
	font-family: var(--afw-serif, Georgia, serif);
	font-size: 24px;
	font-weight: 500;
	color: var(--afw-ink, #1c1a22);
	margin: 0 0 10px;
}

.afw-empty p { max-width: 48ch; margin: 0 auto 20px; color: var(--afw-ink-2, #4c4a57); }

.afw-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 56px; }

.afw-pager a,
.afw-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 13px;
	font-size: 14.5px;
	color: var(--afw-ink, #1c1a22);
	background: var(--afw-card, #fff);
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: var(--afw-radius, 2px);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.afw-pager a:hover { border-color: var(--afw-mauve, #7a62a8); color: var(--afw-mauve, #7a62a8); }

.afw-pager .current {
	background: var(--afw-mauve-strong, #5f4a8a);
	border-color: var(--afw-mauve-strong, #5f4a8a);
	color: #fff;
}

.afw-pager .dots { background: transparent; border-color: transparent; }

.afw-native-main :focus-visible { outline: 2px solid var(--afw-mauve, #7a62a8); outline-offset: 2px; }

/*  ---- responsive -------------------------------------------------------  */
@media (max-width: 1280px) {
	.afw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.afw-cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.afw-f { position: static; }
	.afw-f-group { margin-bottom: 24px; }

	/**
	 * The toggle becomes a real control.
	 * ⚠️ CSS CANNOT CLOSE A `<details>` - `open` is a DOM attribute, not a style. So the element
	 *   is rendered OPEN and a three-line inline script removes `open` on a narrow viewport. That
	 *   ordering is deliberate: if the script never runs, the filters are simply visible, which is
	 *   the old behaviour. The opposite default would hide them behind a control that also needed
	 *   the script.
	 */
	.afw-f-toggle { display: flex; }
	.afw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}

/**
 * ⚠️ The mobile reorder that used to live here is GONE, and deliberately so. It moved the category
 *   copy below the grid on small screens only, via `order`. The copy is now below the grid and the
 *   pagination on every viewport, so the breakpoint-specific reorder has nothing left to do -
 *   products come first everywhere.
 */
@media (max-width: 1024px) {
	.afw-head { margin-bottom: 28px; }
	.afw-seo { margin-top: 44px; }
	.afw-seo summary { padding: 17px 18px; }
	.afw-seo-label { font-size: 17px; }
	.afw-seo-body { padding: 20px 18px 22px; }
}

@media (max-width: 520px) {
	.afw-wrap { padding: 0 18px; }
	.afw-head { padding: 26px 0 22px; margin-bottom: 26px; }
	.afw-grid { gap: 28px 14px; }
	.afw-c-name { font-size: 17px; }
	.afw-sort select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.afw-native-main *,
	.afw-native-main *::before,
	.afw-native-main *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
	.afw-c:hover .afw-c-media img { transform: none; }
	.afw-c-act:hover { transform: none; }
	/* the rail still appears, it just does not slide - hiding it would remove three actions */
	.afw-c:hover .afw-c-acts,
	.afw-c:focus-within .afw-c-acts { right: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ARCHIVE UPGRADE — size pills, icons, sort, load more, the reading drawer
   ═══════════════════════════════════════════════════════════════════════════════ */

/*  ---- 1a. the size pills -----------------------------------------------------
 *
 * They were already pills; what they lacked was a state worth reading. Now: a real tap target, a
 * mauve wash when chosen, and a hairline that is visible on the cream ground (a control boundary
 * wants 3:1, which `--afw-line` does not give on `--afw-paper`).
 */
.afw-f-pill {
	min-height: 34px;
	padding: 8px 14px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	background: var(--afw-card, #fff);
	border: 1px solid rgba(122, 98, 168, 0.3);
	border-radius: 999px;
	transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.afw-f-pill:hover {
	border-color: var(--afw-mauve, #7a62a8);
	color: var(--afw-mauve-strong, #5f4a8a);
}

.afw-f-pill[aria-pressed="true"],
.afw-f-pill.is-on {
	color: #fff;
	background: var(--afw-mauve, #7a62a8);
	border-color: var(--afw-mauve, #7a62a8);
}

/**
 * ⚠️ AN UNAVAILABLE OPTION IS STRUCK THROUGH, NOT HIDDEN. That behaviour already exists in this
 *   archive and it is kept deliberately: an option that disappears makes a visitor think they
 *   broke something, while a struck-through one says "not with your other choices".
 */
.afw-f-pill.is-out {
	opacity: 0.45;
	text-decoration: line-through;
	background: transparent;
}

/*  ---- 1b. the icons -----------------------------------------------------------  */
/**
 * ⚠️ 1.7 STROKE, NOT 1.4, and it is not a taste call. At 15px drawn from a 24px viewBox a 1.4
 *   stroke lands on roughly one device pixel and all but vanishes - the same mistake that once
 *   made a card button look like a blank circle in this project.
 */
.afw-f-item .afw-i,
.afw-f-pill .afw-i,
.afw-c-meta .afw-i {
	stroke-width: 1.7;
	vertical-align: -2px;
}

.afw-f-item.has-icon > span,
.afw-f-pill.has-icon > span { gap: 9px; }

.afw-f-item .afw-i { color: var(--afw-meta, #6e6b7b); }
.afw-f-item:hover .afw-i,
.afw-f-item.is-on .afw-i { color: var(--afw-mauve, #7a62a8); }

/*  the gender marks read as a set: one size, one weight, one colour  */
.afw-f-group .afw-f-item .afw-i {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
}

/*  ---- 4. the sort control -----------------------------------------------------  */
.afw-sort {
	display: flex;
	align-items: center;
	gap: 10px;
}

.afw-sort-label {
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: var(--afw-tr-label, 0.08em);
	text-transform: uppercase;
	color: var(--afw-meta, #6e6b7b);
	white-space: nowrap;
}

.afw-sort-field {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/**
 * ⚠️ `appearance: none` REMOVES THE NATIVE ARROW, so one has to be drawn - and the drawn one needs
 *   `pointer-events: none` or it swallows the click that opens the menu.
 */
.afw-sort select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 190px;
	padding: 11px 40px 11px 16px;
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 13.5px;
	color: var(--afw-ink, #1c1a22);
	background: var(--afw-card, #fff);
	border: 1px solid rgba(122, 98, 168, 0.3);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.afw-sort select:hover { border-color: var(--afw-mauve-soft, #a78bc9); }

.afw-sort select:focus-visible {
	outline: 2px solid var(--afw-mauve, #7a62a8);
	outline-offset: 1px;
	border-color: var(--afw-mauve, #7a62a8);
}

.afw-sort-chevron {
	position: absolute;
	right: 15px;
	display: inline-flex;
	color: var(--afw-mauve, #7a62a8);
	pointer-events: none;
}

/*  ---- 2. load more ------------------------------------------------------------  */
.afw-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 52px 0 8px;
}

.afw-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 220px;
	padding: 14px 30px;
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--afw-mauve-strong, #5f4a8a);
	text-decoration: none;
	background: var(--afw-card, #fff);
	border: 1px solid rgba(122, 98, 168, 0.34);
	border-radius: 999px;
	transition: background 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out,
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.afw-more-btn:hover {
	transform: translateY(-1px);
	color: #fff;
	background: var(--afw-mauve, #7a62a8);
	border-color: var(--afw-mauve, #7a62a8);
}

.afw-more-btn:focus-visible {
	outline: 2px solid var(--afw-mauve, #7a62a8);
	outline-offset: 3px;
}

.afw-more-count {
	margin: 0;
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: var(--afw-meta, #6e6b7b);
}

/*  the spinner only exists while a fetch is in flight  */
.afw-more-spin { display: none; }

.afw-more.is-busy .afw-more-btn {
	pointer-events: none;
	color: #fff;
	background: var(--afw-mauve, #7a62a8);
	border-color: var(--afw-mauve, #7a62a8);
}

.afw-more.is-busy .afw-more-spin {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: afw-spin 620ms linear infinite;
}

@keyframes afw-spin { to { transform: rotate(360deg); } }

.afw-more.is-failed .afw-more-btn {
	color: var(--afw-clay, #7a3b33);
	border-color: rgba(122, 59, 51, 0.4);
	background: var(--afw-card, #fff);
}

.afw-more-done {
	margin: 46px 0 0;
	text-align: center;
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 12.5px;
	color: var(--afw-meta, #6e6b7b);
}

@media (prefers-reduced-motion: reduce) {
	.afw-more-btn { transition: none; }
	.afw-more.is-busy .afw-more-spin { animation-duration: 2s; }
}

/*  ---- 3. the reading drawer ---------------------------------------------------
 *
 * "More about clothes" was a white box with a rule under the summary. Now it reads as a chapter
 * the visitor can open: a warm ground, a hairline only where one is doing work, generous inner
 * space and a mark that rotates.
 */
.afw-seo {
	margin-top: 64px;
	background: linear-gradient(180deg, var(--afw-paper, #fbfafc) 0%, var(--afw-band, #f5f2f8) 100%);
	border: 1px solid rgba(122, 98, 168, 0.18);
	border-radius: var(--afw-radius, 2px);
	overflow: hidden;
	interpolate-size: allow-keywords;
}

.afw-seo summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 24px 28px;
	cursor: pointer;
	list-style: none;
	transition: background 160ms ease-out;
}

.afw-seo summary::-webkit-details-marker { display: none; }
.afw-seo summary::marker { content: ""; }
.afw-seo summary:hover { background: rgba(122, 98, 168, 0.04); }

.afw-seo summary:focus-visible {
	outline: 2px solid var(--afw-mauve, #7a62a8);
	outline-offset: -3px;
}

.afw-seo-label {
	font-family: var(--afw-serif, Georgia, serif);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--afw-ink, #1c1a22);
	letter-spacing: 0;
}

/*  a small caption under the label, so the section explains itself before it opens  */
.afw-seo-label + .afw-seo-hint,
.afw-seo-hint {
	display: block;
	margin-top: 4px;
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--afw-meta, #6e6b7b);
}

.afw-seo-mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--afw-mauve, #7a62a8);
	background: var(--afw-card, #fff);
	border: 1px solid rgba(122, 98, 168, 0.3);
	border-radius: 50%;
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease-out,
		color 160ms ease-out;
}

.afw-seo[open] .afw-seo-mark {
	transform: rotate(180deg);
	color: #fff;
	background: var(--afw-mauve, #7a62a8);
	border-color: var(--afw-mauve, #7a62a8);
}

.afw-seo::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 300ms ease-out, content-visibility 300ms allow-discrete;
}

.afw-seo[open]::details-content { block-size: auto; }

.afw-seo-body {
	padding: 4px 28px 30px;
	max-width: 74ch;
}

.afw-seo-body,
.afw-seo-body p,
.afw-seo-body li {
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.72;
	color: var(--afw-ink-2, #4c4a57);
}

.afw-seo-body p { margin: 0 0 15px; }
.afw-seo-body p:last-child { margin-bottom: 0; }

.afw-seo-body h2,
.afw-seo-body h3 {
	margin: 26px 0 10px;
	font-family: var(--afw-serif, Georgia, serif);
	font-size: 17px;
	font-weight: 500;
	color: var(--afw-ink, #1c1a22);
	text-transform: none;
	letter-spacing: 0;
}

.afw-seo-body ul { margin: 0 0 15px; padding-left: 20px; }
.afw-seo-body li { margin-bottom: 7px; }
.afw-seo-body a { color: var(--afw-mauve, #7a62a8); }

@media (prefers-reduced-motion: reduce) {
	.afw-seo::details-content,
	.afw-seo-mark { transition: none; }
}

/*  ---- 8. the harsh dividers ---------------------------------------------------
 *
 * 🔴 EVERY LINE REMOVED HERE WAS ONE OF MINE. The archive had a rule under the page head, a rule
 *   above the results bar, a rule under every filter group heading and a rule around the reading
 *   drawer - four horizontal lines in the first screen. Space separates sections perfectly well;
 *   a rule should only appear where two things would otherwise be ambiguous.
 *
 * ⚠️ What is NOT removed: the hairline between individual filter rows. That one is doing work -
 *   it is what keeps a column of twelve options readable as a list.
 */
.afw-head { border-bottom: 0; }
.afw-results { border-top: 0; border-bottom: 0; }
.afw-f-title { border-bottom: 0; padding-bottom: 0; }

/*  and one honest divider, under the head only, at a weight that whispers  */
.afw-head {
	position: relative;
	padding-bottom: 26px;
}

.afw-head::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(122, 98, 168, 0.22), rgba(122, 98, 168, 0));
}

@media (max-width: 1024px) {
	.afw-sort { width: 100%; }
	.afw-sort select { flex: 1 1 auto; min-width: 0; width: 100%; }
	.afw-more { margin-top: 38px; }
	.afw-more-btn { width: 100%; }
	.afw-seo summary { padding: 20px 18px; }
	.afw-seo-body { padding: 4px 18px 24px; }
	.afw-seo-label { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   13. THE PLUSH FACETS: A CAPPED GROUP'S DISCLOSURE
   ═══════════════════════════════════════════════════════════════════════════════
 *
 * Collection carries 26 terms and Theme 17. Printed in full they are taller than the product grid
 * beside them and push Size, Colour and Occasion below the fold, so the first eight render and the
 * rest sit behind this.
 *
 * ⚠️ A `<details>`, SO THERE IS NO LAYOUT SHIFT AND NO SCRIPT. The hidden rows are in the HTML
 *   from the first byte - which is what keeps all 26 collections linked for a crawler - but they
 *   occupy no height until the visitor opens them. A JS "show more" would have to either render
 *   them and hide them (same HTML, plus a script) or fetch them (a request, and a shift).
 */
.afw-f-more {
	margin-top: 2px;
}

.afw-f-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 0;
	font-family: var(--afw-sans, system-ui, sans-serif);
	font-size: 12.5px;
	letter-spacing: 0.01em;
	color: var(--afw-mauve, #7a62a8);
	cursor: pointer;
	list-style: none;
	transition: color 140ms ease-out;
}

.afw-f-more > summary::-webkit-details-marker { display: none; }
.afw-f-more > summary::marker { content: ""; }

/*  a chevron drawn in CSS rather than shipped as a glyph: two borders, no request  */
.afw-f-more > summary::after {
	content: "";
	width: 5px;
	height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.afw-f-more[open] > summary::after {
	transform: rotate(-135deg) translateY(-1px);
}

.afw-f-more > summary:hover { color: var(--afw-mauve-strong, #5f4a8a); }

.afw-f-more > summary:focus-visible {
	outline: 2px solid var(--afw-mauve, #7a62a8);
	outline-offset: 2px;
	border-radius: 2px;
}

/**
 * ⚠️ `interpolate-size` AND `::details-content` GO IN A @supports, not on the bare rule. Without
 *   the guard the closed state in a browser that lacks them still animates from a height it never
 *   computes, which lands as a group that is open but zero pixels tall. Same pattern already used
 *   for the archive's SEO drawer.
 */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
	.afw-f-more {
		interpolate-size: allow-keywords;
	}

	.afw-f-more::details-content {
		height: 0;
		overflow: hidden;
		transition: height 220ms cubic-bezier(0.22, 1, 0.36, 1), content-visibility 220ms allow-discrete;
	}

	.afw-f-more[open]::details-content {
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.afw-f-more::details-content,
	.afw-f-more > summary::after {
		transition: none;
	}
}

/*  ---- Occasion renders as pills, and its labels are longer than a size band ----  */
/**
 * ⚠️ The size pills are two or three characters; "New baby" and "Baby shower" are not, so a pill
 *   row sized for "XL" wraps mid-word here. `max-width: none` plus a looser line length lets the
 *   pill grow to its text instead of the text breaking to the pill.
 */
.afw-f-group .afw-f-pills .afw-f-pill {
	max-width: none;
	white-space: nowrap;
}

/*  ---- Product type carries the icon set, so its rows align on the glyph ----  */
.afw-f-list .afw-f-item.has-icon > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* ═══ FACET POLISH — the icon tone, and the one-or-two-product rows ═══════════════════════════
 *
 * ⚠️ THE GLYPH MUST NOT COMPETE WITH THE WORD. At full ink a 16px icon reads as heavily as the
 *   label beside it and the rail turns into a list of drawings. Held at 62% it registers as a
 *   mark, and it darkens to full on hover and on the selected row so the state is never carried
 *   by colour alone.
 */
.afw-f-item.has-icon .afw-i,
.afw-f-pill.has-icon .afw-i {
	opacity: 0.62;
	transition: opacity 150ms ease-out;
	flex: 0 0 auto;
}

.afw-f-item.has-icon:hover .afw-i,
.afw-f-pill.has-icon:hover .afw-i,
.afw-f-item.is-on .afw-i,
.afw-f-pill.is-on .afw-i { opacity: 1; }

/* a filter holding one or two products: present, clickable, quietly weighted */
.afw-f-item.is-thin > i {
	opacity: 0.5;
	font-variant-numeric: tabular-nums;
}

/**
 * ⚠️ THE CAPPED TAIL IS A GRID, NOT A COLUMN. 46 hidden sizes in one stack is the "disaster" the
 *   owner described - opening the disclosure pushed the whole rail down by half a screen. Three
 *   tracks of pills keep the opened state to a few rows, and the list rows stay single-column
 *   because their labels are words, not measurements.
 */
/**
 * 🔴 THE THREE-COLUMN TAIL WAS MY BUG, AND IT IS THE OVERFLOW THE OWNER REPORTED.
 *
 *   I put `grid-template-columns: repeat(3, minmax(0, 1fr))` on every opened pill tail to keep 46
 *   sizes compact. In a 258px rail that makes each track about 80px - fine for "22 cm", hopeless
 *   for "Storytime & Early Learning" or "Collector gift", which then ran outside their pill. The
 *   group it was written for (plush sizes) no longer exists; the groups it damaged are the ones
 *   still there.
 *
 * ⚠️ SO THE TAIL WRAPS INSTEAD OF GRIDDING, and the pill is told explicitly that it may shrink
 *   (`min-width: 0`) and where a long word may break. A pill's text must never leave its border.
 */
.afw-f-more .afw-f-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.afw-f-more .afw-f-pills .afw-f-pill,
.afw-f-pills .afw-f-pill {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* the same guarantee for list rows, whose labels are the longest in the rail */
.afw-f-item > span { min-width: 0; overflow-wrap: anywhere; }

/**
 * ⚠️ AND THE SUMMARY IS A BLOCK-LEVEL FLEX ROW, not inline-flex. Inline-flex lets the label and
 *   the chevron sit on a line that can be longer than the rail, which is the other half of the
 *   same report: "Show 16 more" broke out of its container once the label grew.
 */
.afw-f-more > summary {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	max-width: 100%;
}

.afw-f-more > summary::after { flex: 0 0 auto; }

/* the 10 cm band heading inside an opened size disclosure — a label, not a control */
.afw-f-band {
	margin: 14px 0 7px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(28, 26, 34, 0.45);
}

.afw-f-band:first-of-type { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ARCHIVE UPGRADE — the rail, the toolbar and the rhythm of the page
   ═══════════════════════════════════════════════════════════════════════════════════════════

   ⚠️ WHAT THIS IS NOT: a new layout. The grid, the breakpoints and the markup all stay, because
     they measure correctly - 4 across at 1366, 2 at 800, no overflow, 1.2 s. What was basic was
     the TREATMENT: filter rows with no state, group titles at body weight, and the same 20px gap
     between everything so nothing read as more important than anything else.

   ⚠️ AND IT IS BUILT ON SPACING AND WEIGHT, NOT ON BOXES. Wrapping each group in a card would add
     eight borders to a page whose whole complaint, three rounds ago, was harsh dividers.
*/

/* ── the rail as a column: one rhythm, generous air between groups ─────────────────────── */
.afw-f-group + .afw-f-group { margin-top: 30px; }

.afw-f-title {
	margin: 0 0 12px;
	font-family: var(--afw-sans, "Albert Sans", system-ui, sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(28, 26, 34, 0.5);
}

/**
 * ── subcategory and theme rows ────────────────────────────────────────────────────────────
 *
 * A row is a target, so it gets the padding of one: 34px tall, its own radius, and a hover that
 * fills rather than merely recolours the word. The selected row carries a mauve ground and a
 * 2px accent on its inner edge, so which filter is on is legible at a glance and not only by
 * colour - the weight changes with it.
 */
.afw-f-list { display: flex; flex-direction: column; gap: 1px; }

.afw-f-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 34px;
	padding: 5px 10px 5px 11px;
	border-radius: 9px;
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--afw-ink, #1c1a22);
	text-decoration: none;
	transition: background-color 140ms ease-out, color 140ms ease-out;
}

.afw-f-item > span { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; }

.afw-f-item > i {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	color: rgba(28, 26, 34, 0.4);
	transition: color 140ms ease-out;
}

.afw-f-item:hover { background: rgba(122, 98, 168, 0.06); }
.afw-f-item:hover > i { color: rgba(28, 26, 34, 0.62); }

.afw-f-item:focus-visible {
	outline: 2px solid rgba(122, 98, 168, 0.55);
	outline-offset: 1px;
}

.afw-f-item.is-on {
	background: rgba(122, 98, 168, 0.11);
	font-weight: 600;
	color: #3f3160;
}

/* the accent sits inside the radius, so it reads as part of the row rather than a rule beside it */
.afw-f-item.is-on::before {
	content: "";
	position: absolute;
	inset: 6px auto 6px 0;
	width: 2px;
	border-radius: 2px;
	background: #7a62a8;
}

.afw-f-item.is-on > i { color: #6a5596; }

/* a filter with one or two products: present, quiet */
.afw-f-item.is-thin > i { opacity: 1; color: rgba(28, 26, 34, 0.3); }

/* an option that would return nothing stays readable but plainly unavailable */
.afw-f-item.is-dead { opacity: 0.4; pointer-events: none; }

/* ── pills: occasions, and the garment sizes ───────────────────────────────────────────── */
.afw-f-pills { display: flex; flex-wrap: wrap; gap: 7px; }

.afw-f-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 4px 13px;
	border: 1px solid rgba(28, 26, 34, 0.13);
	border-radius: 999px;
	background: transparent;
	font-size: 12.5px;
	color: var(--afw-ink, #1c1a22);
	text-decoration: none;
	transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
}

.afw-f-pill:hover {
	border-color: rgba(122, 98, 168, 0.45);
	background: rgba(122, 98, 168, 0.05);
}

.afw-f-pill.is-on {
	border-color: #7a62a8;
	background: #7a62a8;
	color: #fff;
	font-weight: 600;
}

.afw-f-pill.is-on .afw-i { opacity: 1; }
.afw-f-pill.is-dead { opacity: 0.38; pointer-events: none; }

/* ── the disclosure summary, matched to the rows it opens ──────────────────────────────── */
.afw-f-more > summary {
	margin-top: 9px;
	padding: 5px 11px;
	border-radius: 9px;
	font-size: 12.5px;
	color: #6a5596;
	transition: background-color 140ms ease-out;
}

.afw-f-more > summary:hover { background: rgba(122, 98, 168, 0.06); }

/* ── the toolbar above the grid ────────────────────────────────────────────────────────── */
/**
 * ⚠️ THESE ARE THE TEMPLATE'S REAL CLASS NAMES, checked against `tmpl-archive.php` rather than
 *   remembered: the rail is `.afw-f` inside `.afw-f-shell`, the toolbar is `.afw-bar`, the count
 *   is `.afw-count` and the Load More wrapper is `.afw-more`. My first draft of this block styled
 *   `.afw-nt-toolbar`, `.afw-nt-count` and `.afw-nt-aside`, none of which exist - three rules that
 *   would have deployed cleanly and changed nothing, which is exactly the failure the owner has
 *   been reporting.
 */
.afw-bar {
	align-items: center;
	margin-bottom: 26px;
}

.afw-count {
	font-size: 13px;
	color: rgba(28, 26, 34, 0.62);
	font-variant-numeric: tabular-nums;
}

/**
 * ⚠️ THE RAIL FOLLOWS THE PAGE ON DESKTOP ONLY, and only where it fits. Sticky is what stops a
 *   five-group rail from stranding the shopper beside forty products with nothing to their left.
 *   Below 1025px the rail is a `<details>` panel and sticky would fight it, so this is scoped.
 *
 * ⚠️ IT GOES ON `.afw-f-shell`, NOT ON THE `<aside>`. The aside is inside the details element, and
 *   a sticky child of a non-sticky parent sticks to the parent's box, which here is the whole
 *   column - so it would never move.
 */
@media (min-width: 1025px) {
	.afw-f-shell {
		position: sticky;
		top: 24px;
		align-self: start;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		padding-right: 4px;
	}

	.afw-f-shell::-webkit-scrollbar { width: 6px; }
	.afw-f-shell::-webkit-scrollbar-thumb {
		background: rgba(28, 26, 34, 0.16);
		border-radius: 3px;
	}
}

/* ── Load More: the page's one full-width control, so it is given room ─────────────────── */
.afw-more { margin-top: 44px; }

#afw-more-btn {
	min-width: 232px;
	height: 50px;
	border-radius: 999px;
	font-size: 13.5px;
	letter-spacing: 0.02em;
}


/* ═══ FILTER ICONS ON ONE COLUMN ══════════════════════════════════════════════════════════
 *
 * 🔴 "SOME ROWS HAVE TWO ICONS, OTHERS ONE" - measured, and the count is right at one glyph per
 *   row (Theme 17/17, Occasions 13/13). What differs is the WIDTH each glyph takes: the SVG was
 *   `flex: 0 0 auto`, so a wide drawing (the pram, the suitcase) pushed its label further right
 *   than a narrow one (the heart), and the labels stopped lining up. Read down the column it looks
 *   like the icons are unevenly distributed, because the text beside them is.
 *
 * ⚠️ A FIXED 16px BOX with the drawing centred in it fixes the column without touching any glyph.
 */
.afw-f-item.has-icon > span > .afw-i,
.afw-f-pill.has-icon > span > .afw-i {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	display: block;
}

/* the pills carry their own icons too, and they must not stretch the pill unevenly */
.afw-f-pill.has-icon { padding-left: 11px; }

/* ⚠️ THE COUNT IS AN `<i>`, NOT AN ICON. It is the number at the right of a list row - kept on a
 *   tabular width so the column of figures aligns as well as the column of labels. */
.afw-f-item > i { min-width: 1.6em; text-align: right; }


/* ═══ THE BOTTOM DRAWER — now that the content has headings, it can be typeset ════════════
 *
 * 🔴 THE REAL FAULT WAS NOT THE STYLING. The plush category description was 1,954 bytes with zero
 *   `<p>` and zero `<h2>`: its four section headings were bare lines, so `wpautop` made them
 *   paragraphs and every line arrived at the same weight. That is why it read as a raw draft. The
 *   headings are now real markup, and the rules below give them somewhere to sit.
 *
 * ⚠️ NO `<h1>` IN HERE, against the letter of the directive and for the reason the directive
 *   exists: the archive already has one h1 - the category name - and a second competes for the
 *   exact term the page is trying to rank for.
 */
.afw-seo {
	margin-top: 54px;
	border: 1px solid rgba(28, 26, 34, 0.09);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.5);
	overflow: hidden;
}

.afw-seo > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 26px;
	cursor: pointer;
	list-style: none;
	transition: background-color 150ms ease-out;
}

.afw-seo > summary::-webkit-details-marker { display: none; }
.afw-seo > summary::marker { content: ""; }
.afw-seo > summary:hover { background: rgba(122, 98, 168, 0.04); }

.afw-seo > summary:focus-visible {
	outline: 2px solid rgba(122, 98, 168, 0.55);
	outline-offset: -2px;
}

.afw-seo-label {
	font-family: var(--afw-serif, Georgia, serif);
	font-size: 19px;
	font-weight: 500;
	color: var(--afw-ink, #1c1a22);
	letter-spacing: 0.005em;
}

/* the chevron is an empty span in the markup, so it is drawn here rather than shipped */
.afw-seo-hint {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-right: 1.6px solid rgba(28, 26, 34, 0.45);
	border-bottom: 1.6px solid rgba(28, 26, 34, 0.45);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.afw-seo[open] .afw-seo-hint { transform: rotate(-135deg) translateY(-2px); }

.afw-seo-body {
	padding: 4px 26px 28px;
}

/**
 * ⚠️ THE FIRST PARAGRAPH IS THE LEAD, and it is chosen structurally rather than by adding a class
 *   to content we do not author: `.afw-seo-body > p:first-of-type`. If the description ever opens
 *   with a heading instead, nothing is mis-sized - the rule simply finds no first paragraph before
 *   it.
 */
.afw-seo-body > p:first-of-type {
	font-size: 17px;
	line-height: 1.65;
	color: var(--afw-ink, #1c1a22);
}

/* sections get air above them and a hairline eyebrow, so the drawer reads in parts */
.afw-seo-body h2 {
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid rgba(28, 26, 34, 0.07);
}

.afw-seo-body h2:first-child { margin-top: 6px; padding-top: 0; border-top: 0; }

.afw-seo-body p + p { margin-top: 14px; }

.afw-seo-body a {
	color: #6a5596;
	text-decoration: underline;
	text-decoration-color: rgba(122, 98, 168, 0.35);
	text-underline-offset: 2px;
}

.afw-seo-body a:hover { text-decoration-color: #7a62a8; }

@media (max-width: 700px) {
	.afw-seo > summary { padding: 16px 18px; }
	.afw-seo-body { padding: 2px 18px 22px; }
	.afw-seo-label { font-size: 17px; }
}