/**
 * Size guide - the /size-guide/ page and the native <dialog>.
 *
 * DESIGN SOURCE: "SHOP PREVIEW.html" (Downloads, 2026-09-09), the owner-approved boutique
 * system. Its tokens are reproduced verbatim below - warm ground, hairline rules, a single
 * ⚠️ STALE-COMMENT CORRECTION: this line used to describe a terracotta accent and a Palatino
 * serif. Both were retired on 2026-09-13; the page now takes its accent and its heading face from
 * the global tokens. Corrected rather than left, because a comment describing a palette the file
 * no longer has is worse than no comment.
 *
 * 🔴 THE TOKENS ARE SCOPED TO .afw-sg, NOT TO :root
 *   The preview is a standalone mockup and can own :root. This file ships into a live
 *   WooCommerce theme with 1,086 product pages, and redefining :root would repaint Ecomus
 *   everywhere our stylesheet happens to load. Scoping to the block means the size guide reads
 *   as the boutique system while nothing outside it moves. The page header is handled the same
 *   way, through a body class this plugin adds rather than a global selector.
 *
 * The dark variants that used to live here are gone - see the note beside the token block.
 */

/**
 * ═════════════════════════════════════════════════════════════════════════════════════════════
 * 🔴 HARMONISED: THIS BLOCK NOW CONSUMES THE GLOBAL TOKENS INSTEAD OF REDEFINING THEM
 * ═════════════════════════════════════════════════════════════════════════════════════════════
 *
 *   WHAT WAS WRONG, and it is exactly the "uncoordinated colours" that was reported:
 *   this page was built before the global token layer existed and carried its own complete
 *   palette - the WARM system, with **terracotta `#a8443b`** as the accent and **Palatino** as
 *   the serif. Both were retired by the Brand Dossier on 2026-09-13 in favour of mauve `#7A62A8`
 *   and Fraunces. So the size guide was the last page still painted in the old system, sitting
 *   inside a site that had moved on - and Fraunces was even being LOADED on the page while this
 *   file overrode it with Palatino.
 *
 * 🟢 A COLLISION I SUSPECTED AND DISPROVED, recorded so it is not re-raised: these token names
 *   are the same as the global ones (`--afw-card`, `--afw-ink`, `--afw-line`, `--afw-hair`,
 *   `--afw-serif`). They were NOT polluting the rest of the site, because they are scoped to
 *   `.afw-sg` rather than `:root` - and measured, this stylesheet loads BEFORE
 *   `design-tokens.css` on every page it appears on, so it would have lost anyway.
 *
 *   Now: names that exist globally are simply not redeclared, so the global value cascades in.
 *   The five that have no global equivalent are mapped to one.
 */
.afw-sg {
	/* mapped - no global token of this name exists */
	--afw-ground: var(--afw-paper, #fbfafc);
	--afw-soft: var(--afw-ink-2, #4c4a57);
	--afw-faint: var(--afw-meta, #6e6b7b);
	--afw-accent: var(--afw-mauve, #7a62a8);
	--afw-accent-soft: var(--afw-wash, #f1ebf8);

	/**
	 * ⚠️ `--afw-card`, `--afw-ink`, `--afw-line`, `--afw-hair`, `--afw-serif`, `--afw-sans`,
	 *   `--afw-sage` and `--afw-shadow` are deliberately NOT declared here. They all exist on
	 *   `:root` in the global layer, so leaving them out is what makes this page inherit the
	 *   site's palette and its Fraunces heading face. Redeclaring one - even to the same value -
	 *   would pin this page to a copy that stops tracking the tokens.
	 */

	font: 15px/1.7 var(--afw-sans, system-ui, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
}


/**
 * 🔴 THE DARK-MODE BLOCKS WERE REMOVED, and that is a consistency decision rather than a loss.
 *   This page carried a full dark palette - the only page on the site that did. So with the
 *   visitor's OS set to dark the size guide went near-black while every other page stayed cream:
 *   a customer following the "Which size fits my plush?" link from a product page watched the
 *   site change identity mid-journey. One theme, everywhere, is the more boutique answer, and
 *   the dossier's palette is a light system by design.
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   THE PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */

/**
 * 🔴 IT WAS 760px INSIDE A 1266px CONTAINER, AND THAT IS THE MEASURED FAULT.
 *   At 1366px `.afw-sg--page` sat at `max-width: 760px` with **253px of empty margin each side**,
 *   inside an `.em-container` already offering 1266px. Half the usable width was unused while a
 *   three-column table and a five-card grid competed for the other half - which is exactly what
 *   "cramped and under-designed" looks like from the outside.
 *
 * ⚠️ WIDE IS NOT UNLIMITED. Running text still needs a measure, so the width lives on the
 *   PAGE and the measure lives on the paragraphs (`max-width` in ch on the prose blocks). A
 *   1266px column of 15px body copy would be worse than 760px, not better.
 */
.afw-sg--page {
	max-width: 1180px;
	margin: 0 auto;
	padding: 4px 0 64px;
	display: flex;
	flex-direction: column;
	gap: 34px;
}

.afw-sg h2,
.afw-sg h3 {
	font-family: var(--afw-serif);
	font-weight: 600;
	text-wrap: balance;
	color: var(--afw-ink);
	margin: 0;
}

.afw-sg p {
	margin: 0 0 13px;
	color: var(--afw-soft);
}

.afw-sg a {
	color: inherit;
}

/* the opening sentence carries the page; it is ink, not soft, and set a size up */
.afw-sg-opener {
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--afw-ink);
	margin: 0 0 30px;
	max-width: 62ch;
}

/* ── a brand block ─────────────────────────────────────────────────────────── */

.afw-sg-card {
	background: var(--afw-card);
	border: 1px solid var(--afw-line);
	border-radius: 14px;
	overflow: hidden;
	margin: 0 0 26px;
}

.afw-sg-card__head {
	padding: 22px 26px 16px;
}

.afw-sg-card__title {
	font-size: 23px;
	line-height: 1.2;
	display: flex;
	align-items: baseline;
	gap: 11px;
	flex-wrap: wrap;
}

/* "two exact sizes" / "six bands" - says how the brand is cut before the table does */
.afw-sg-kind {
	font-family: var(--afw-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--afw-faint);
	border: 1px solid var(--afw-line);
	border-radius: 99px;
	padding: 2px 9px;
	white-space: nowrap;
}

.afw-sg-card__lead {
	margin: 9px 0 0;
	font-size: 14.5px;
	max-width: 58ch;
}

/* ── the table ─────────────────────────────────────────────────────────────── */

/* wide tables scroll inside their own box; the page body never scrolls sideways */
.afw-sg-scroll {
	overflow-x: auto;
	border-top: 1px solid var(--afw-line);
}

.afw-sg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.afw-sg-table th,
.afw-sg-table td {
	text-align: left;
	padding: 12px 16px;
	vertical-align: middle;
	border-bottom: 1px solid var(--afw-hair);
}

.afw-sg-table thead th {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--afw-faint);
	background: var(--afw-ground);
	border-bottom: 1px solid var(--afw-line);
	white-space: nowrap;
	padding-top: 10px;
	padding-bottom: 10px;
}

.afw-sg-table tbody tr:last-child th,
.afw-sg-table tbody tr:last-child td {
	border-bottom: 0;
}

/* the size letter is the row's identity, so it gets the serif and the ink */
.afw-sg-table tbody th {
	font-family: var(--afw-serif);
	font-size: 16px;
	font-weight: 600;
	color: var(--afw-ink);
	white-space: nowrap;
	width: 1%;
}

.afw-sg-table td {
	color: var(--afw-soft);
}

/* figures align column-wise, which is the whole point of a size table */
.afw-sg-fits {
	color: var(--afw-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ── card footer ───────────────────────────────────────────────────────────── */

.afw-sg-card__foot {
	padding: 14px 26px 16px;
	border-top: 1px solid var(--afw-line);
	background: var(--afw-ground);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.afw-sg-link {
	font-size: 13.5px;
	color: var(--afw-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.14s;
}

.afw-sg-link:hover,
.afw-sg-link:focus-visible {
	border-bottom-color: currentColor;
	color: var(--afw-accent);
}

.afw-sg-link span {
	display: inline-block;
	margin-left: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE TRIGGER
   ═══════════════════════════════════════════════════════════════════════════════ */

.afw-sg-trigger {
	/**
	 * ⚠️ REMOVED, not re-pointed: `--afw-line` exists globally, so declaring it here pinned the
	 *   trigger's border to a copy (#e7dfd6) of a value the global layer now sets to #e4deec. Two
	 *   colours a shade apart is invisible today and diverges the moment the token is retuned -
	 *   which is the whole failure mode a token system exists to prevent. Deleting the line is what
	 *   makes it track.
	 */
	--afw-soft: #6d645c;
	/**
	 * 🔴 A SECOND HARD-CODED TERRACOTTA, AND THIS ONE WAS NOT EVEN ON THIS PAGE.
	 *   `.afw-sg-trigger` is the "Which size fits my plush?" link, hooked onto
	 *   `woocommerce_before_add_to_cart_button` - so it renders on every PRODUCT page. It has been
	 *   sitting there in the retired terracotta while everything around it moved to mauve. Found
	 *   only by grepping the whole file rather than the token block at the top.
	 */
	--afw-accent: var(--afw-mauve, #7a62a8);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
	padding: 5px 13px 5px 11px;
	border: 1px solid var(--afw-line);
	border-radius: 99px;
	font: 12.5px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif;
	letter-spacing: 0.01em;
	color: var(--afw-soft);
	text-decoration: none;
	background: transparent;
	cursor: pointer;
	transition: 0.14s;
}

.afw-sg-trigger:hover,
.afw-sg-trigger:focus-visible {
	border-color: var(--afw-accent);
	color: var(--afw-accent);
}

/* a ruler mark, drawn rather than loaded as an icon font */
.afw-sg-trigger::before {
	content: "";
	width: 13px;
	height: 11px;
	flex: 0 0 13px;
	border: 1px solid currentColor;
	border-radius: 2px;
	background:
		linear-gradient(currentColor, currentColor) 3px 0 / 1px 4px no-repeat,
		linear-gradient(currentColor, currentColor) 6px 0 / 1px 6px no-repeat,
		linear-gradient(currentColor, currentColor) 9px 0 / 1px 4px no-repeat;
	opacity: 0.8;
}



/* ═══════════════════════════════════════════════════════════════════════════════
   THE DIALOG
   ═══════════════════════════════════════════════════════════════════════════════ */

.afw-sg-dialog {
	width: min(560px, calc(100vw - 32px));
	max-height: min(82vh, 760px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
	overflow: hidden;
	background: transparent;   /* .afw-sg--modal paints it, in the right theme */
}

.afw-sg-dialog::backdrop {
	background: rgba(20, 16, 13, 0.55);
}

.afw-sg--modal {
	background: var(--afw-card);
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;   /* scrolling the modal must not scroll the page behind it */
	padding: 0 0 22px;
}

/* the head stays put while the tables scroll under it */
.afw-sg-head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 20px 24px 15px;
	background: var(--afw-card);
	border-bottom: 1px solid var(--afw-line);
}

.afw-sg-head h2 {
	font-size: 20px;
	line-height: 1.2;
}

.afw-sg-head p {
	margin: 5px 0 0;
	font-size: 13px;
	line-height: 1.55;
	max-width: 44ch;
}

.afw-sg-close {
	appearance: none;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border: 1px solid var(--afw-line);
	border-radius: 99px;
	background: var(--afw-card);
	color: var(--afw-soft);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: 0.14s;
}

.afw-sg-close:hover,
.afw-sg-close:focus-visible {
	border-color: var(--afw-accent);
	color: var(--afw-accent);
}

.afw-sg--modal .afw-sg-card {
	border: 0;
	border-radius: 0;
	margin: 0;
	background: transparent;
}

.afw-sg--modal .afw-sg-card + .afw-sg-card {
	border-top: 1px solid var(--afw-line);
}

.afw-sg--modal .afw-sg-card__head {
	padding: 18px 24px 12px;
}

.afw-sg--modal .afw-sg-card__title {
	font-size: 18px;
}

.afw-sg--modal .afw-sg-scroll {
	border-top: 0;
}

.afw-sg--modal .afw-sg-table {
	font-size: 13px;
}

.afw-sg--modal .afw-sg-table th,
.afw-sg--modal .afw-sg-table td {
	padding: 10px 24px;
}

.afw-sg--modal .afw-sg-table tbody th {
	font-size: 15px;
}

.afw-sg--modal .afw-sg-card__foot {
	padding: 13px 24px;
	background: transparent;
	border-top: 1px solid var(--afw-hair);
}

.afw-sg-more {
	margin: 0;
	padding: 16px 24px 0;
	font-size: 13px;
}

@media (prefers-reduced-motion: no-preference) {
	.afw-sg-dialog[open] {
		animation: afw-sg-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
	}
}

@keyframes afw-sg-in {
	from { opacity: 0; transform: translateY(8px) scale(0.99); }
	to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE PAGE HEADER, ON THIS PAGE ONLY
   ═══════════════════════════════════════════════════════════════════════════════
   afw-size-guide.php adds `afw-size-guide-page` to <body>. Targeting that rather than
   `.page-header--page` keeps the other 35 pages exactly as they are, and survives the
   page being re-created with a new ID. */

body.afw-size-guide-page .page-header.page-header--page {
	background: #fbfafc;
	background-image: none !important;   /* the theme writes the artwork as an inline style */
	border-bottom: 1px solid #e7dfd6;
	padding-top: 40px;
	padding-bottom: 34px;
	margin-bottom: 44px;
}

body.afw-size-guide-page .page-header.page-header--page .page-header__title {
	/* the global serif - Fraunces - rather than a second copy of a retired stack */
	font-family: var(--afw-serif, Georgia, serif);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.005em;
	color: #1c1a22;
	max-width: 24ch;       /* a 48-character title needs two balanced lines, not three ragged */
	text-wrap: balance;
}

body.afw-size-guide-page .page-header.page-header--page .site-breadcrumb,
body.afw-size-guide-page .page-header.page-header--page .site-breadcrumb a,
body.afw-size-guide-page .page-header.page-header--page .site-breadcrumb strong {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #9c9186;
}

body.afw-size-guide-page .page-header.page-header--page .site-breadcrumb {
	margin-top: 13px;
}




/* ═══════════════════════════════════════════════════════════════════════════════
   NARROW SCREENS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	.afw-sg--page {
		padding-bottom: 36px;
	}

	.afw-sg-opener {
		font-size: 16px;
		margin-bottom: 24px;
	}

	.afw-sg-card__head,
	.afw-sg-card__foot {
		padding-left: 18px;
		padding-right: 18px;
	}

	.afw-sg-card__title {
		font-size: 20px;
	}

	.afw-sg-table th,
	.afw-sg-table td {
		padding: 10px 12px;
	}

	.afw-sg-dialog {
		width: calc(100vw - 20px);
		max-height: 88vh;
	}

	.afw-sg--modal .afw-sg-table th,
	.afw-sg--modal .afw-sg-table td,
	.afw-sg--modal .afw-sg-card__head,
	.afw-sg--modal .afw-sg-card__foot,
	.afw-sg-head,
	.afw-sg-more {
		padding-left: 17px;
		padding-right: 17px;
	}

	body.afw-size-guide-page .page-header.page-header--page {
		padding-top: 26px;
		padding-bottom: 22px;
		margin-bottom: 30px;
	}

	body.afw-size-guide-page .page-header.page-header--page .page-header__title {
		font-size: 25px;
	}
}


/*  ════════════════════════════════════════════════════════════════════════  */
/*  THE MODULE GRID - the same copy, in cards                                */
/*  ════════════════════════════════════════════════════════════════════════  */
/**
 * Five sections that were one column of unbroken text. The words did not change; the container
 * did. Two columns on a desktop so the page can be scanned, one on a phone so it can be read.
 */
.afw-sg-mods {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 44px;
}

.afw-sg-mod {
	position: relative;
	background: var(--afw-card, #fff);
	border-radius: var(--afw-radius, 2px);
	padding: 26px 26px 24px;
}

.afw-sg-mod h2 {
	font-family: var(--afw-serif, Georgia, serif);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.26;
	letter-spacing: var(--afw-tr-head, -0.012em);
	color: var(--afw-ink, #1c1a22);
	margin: 14px 0 10px;
	text-transform: none;
}

.afw-sg-mod p,
.afw-sg-mod li {
	font-size: 15px;
	line-height: 1.72;
	color: var(--afw-ink-2, #4c4a57);
}

.afw-sg-mod p { margin: 0 0 12px; }
.afw-sg-mod p:last-child { margin-bottom: 0; }

/**
 * The mark. ⚠️ Decorative and `aria-hidden` in the markup - the heading beside it is the label.
 *   A 38px disc in the accent is enough to break the column without competing with the tables,
 *   which are the part of this page a customer actually acts on.
 */
.afw-sg-mod-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--afw-wash, #f1ebf8);
	color: var(--afw-mauve, #7a62a8);
}

/* the "sizes we do not make" mark reads as a caution, not an invitation */
@media (max-width: 900px) {
	.afw-sg-mods { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.afw-sg-mod { padding: 22px 20px 20px; }
}


/*  ════════════════════════════════════════════════════════════════════════════════════════════  */
/*  THE REBUILT PAGE — 2026-09-20                                                                */
/*  ════════════════════════════════════════════════════════════════════════════════════════════  */
/**
 * Everything below is new with the 3.0.0 rebuild: the introduction and its sizes-at-a-glance
 * panel, the three-step banner, the filled model column, the fit-support block and the FAQ.
 *
 * ⚠️ NO NEW TOKENS AND NO NEW TYPEFACES. Every colour here is one of the eight already mapped
 *   on `.afw-sg` at the top of this file, and headings take `--afw-serif` (Fraunces) exactly as
 *   the rest of the site does. A rebuild is a reason to use the design system harder, not a
 *   reason to start a second one.
 *
 * ⚠️ THE PAGE IS A FLEX COLUMN WITH `gap`, so section spacing lives in one place instead of in a
 *   margin on each block. Sibling margins on a page assembled by a shortcode are how the gap
 *   between two sections ends up depending on which one was emitted first.
 */


/*  ── the introduction ──────────────────────────────────────────────────────────────────────  */
/**
 * Two columns: the explanation, and the sizes it is talking about. The panel is built from the
 * same array the tables are, so it cannot claim a size the tables do not list.
 */
.afw-sg-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

/* the measure lives here, not on the container - see the note on `.afw-sg--page` */
.afw-sg-intro__body p {
	max-width: 66ch;
	font-size: 15.5px;
	line-height: 1.75;
}

.afw-sg-intro__body p:last-child {
	margin-bottom: 0;
}

/* the parent class is the specificity: see the note above `.afw-sg-glance .afw-sg-glance__note` */
.afw-sg-intro__body .afw-sg-opener {
	margin: 0 0 16px;
}

.afw-sg-opener {
	font-size: 18.5px;
	line-height: 1.66;
	color: var(--afw-ink);
	margin: 0 0 16px;
}

.afw-sg-opener b {
	font-weight: 600;
	color: var(--afw-ink);
}

.afw-sg-glance {
	border: 1px solid var(--afw-line);
	border-radius: 16px;
	background: var(--afw-card);
	padding: 20px 22px 18px;
	box-shadow: 0 1px 2px rgba(28, 26, 34, 0.03), 0 18px 40px -30px rgba(28, 26, 34, 0.2);
}

/**
 * 🔴 THIS LABEL IS A `<p>` BECAUSE IT HAD TO BE. As an `<h2>` it lost twice: first to
 *   `.afw-sg h2, .afw-sg h3` at (0,1,1), and then - once that was beaten at (0,2,1) - to
 *   **`body.afw-tokens h2 { font-family: var(--afw-serif) !important }`**, a site-wide rule that
 *   no ordinary selector can outrank. That rule is right for headings and wrong for a 10.5px
 *   uppercase micro-label, so the markup stopped claiming to be a heading rather than this file
 *   adding an `!important` to argue with the design system. See the note in afw-size-guide.php.
 */
.afw-sg-glance .afw-sg-glance__title {
	margin: 0 0 14px;
	font-family: var(--afw-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--afw-accent);
}

.afw-sg-glance__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.afw-sg-glance__list li {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.afw-sg-glance__label {
	font-size: 12.5px;
	color: var(--afw-faint);
}

.afw-sg-glance__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.afw-sg-chip {
	font-family: var(--afw-serif);
	font-size: 14.5px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--afw-ink);
	background: var(--afw-accent-soft);
	border-radius: 8px;
	padding: 4px 10px 5px;
	white-space: nowrap;
}

/**
 * 🔴 THIS ONE WAS VISIBLE: the hairline sat directly on the size chips.
 *   `.afw-sg p { margin: 0 0 13px }` is (0,1,1) and beat the class-only rule at (0,1,0), so the
 *   note's 16px top margin became 0 and only its 14px padding separated the rule from the chips
 *   above it. The parent class takes the selector to (0,2,0) and it wins.
 */
.afw-sg-glance .afw-sg-glance__note {
	margin: 18px 0 0;
}

.afw-sg-glance__note {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--afw-hair);
	font-size: 12.5px;
	color: var(--afw-faint);
}


/**
 * 🔴 ONE TRAP, FOUND FOUR TIMES IN THIS FILE - WRITTEN DOWN ONCE SO IT IS NOT FOUND A FIFTH.
 *
 *   The block's own base rules are element rules:
 *       `.afw-sg h2, .afw-sg h3 { margin: 0; font-family: …; color: … }`   (0,1,1)
 *       `.afw-sg p            { margin: 0 0 13px; color: … }`              (0,1,1)
 *   A rule on a single class is (0,1,0) and therefore LOSES to both, however far down the file it
 *   is written. Source order never enters into it. Measured casualties before this pass:
 *       .afw-sg-how__title    margin-bottom  wanted 22px -> got 0
 *       .afw-sg-step__name    margin-bottom  wanted  7px -> got 0
 *       .afw-sg-step__text    margin-bottom  wanted  0   -> got 13px
 *       .afw-sg-glance__note  margin-top     wanted 16px -> got 0    (visible: rule on the chips)
 *       .afw-sg-opener        margin-bottom  wanted 16px -> got 13px
 *
 * ⚠️ THE RULE FOR THIS FILE: any heading or paragraph rule inside `.afw-sg` names its parent
 *   too - `.afw-sg-step .afw-sg-step__name`, not `.afw-sg-step__name`. That is (0,2,0) and wins.
 *   Better still, put the spacing on the container's `gap`, which no descendant rule can outrank.
 *   And do not reach for `!important`: `body.afw-tokens h1…h4 { font-family: … !important }`
 *   already exists site-wide, and a second `!important` here would start an argument nobody wins.
 */

/*  ── the three steps ───────────────────────────────────────────────────────  */
/**
 * ⚠️ AN `<ol>`, NOT THREE DIVS WITH NUMBERS DRAWN ON THEM. The order is the information here -
 *   you cannot match a height you have not measured - so it is marked up as a sequence and a
 *   screen reader announces "3 items" before the first one.
 */
.afw-sg-how {
	border: 1px solid var(--afw-line);
	border-radius: 18px;
	background: var(--afw-ground);
	padding: 26px 28px 28px;
}

.afw-sg-how .afw-sg-how__title {
	font-size: 22px;
	margin: 0 0 22px;
}

.afw-sg-how__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.afw-sg-step {
	min-width: 0;
	position: relative;
}

/* the icon and the ordinal read as one mark: the glyph says what, the number says when */
.afw-sg-step__mark {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.afw-sg-step__icon {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 12px;
	background: var(--afw-card);
	border: 1px solid var(--afw-line);
	color: var(--afw-accent);
	display: grid;
	place-items: center;
}

.afw-sg-step__n {
	font-family: var(--afw-serif);
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--afw-accent);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--afw-accent);
	display: grid;
	place-items: center;
	line-height: 1;
}

.afw-sg-step .afw-sg-step__name {
	font-size: 16.5px;
	line-height: 1.35;
	margin: 0 0 7px;
}

.afw-sg-step .afw-sg-step__text {
	margin: 0;
}

.afw-sg-step__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--afw-soft);
}


/*  ── the tables ────────────────────────────────────────────────────────────────────────────  */
.afw-sg-tables {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

/* the card carried its own bottom margin when it was a loose sibling; the wrapper owns it now */
.afw-sg-tables .afw-sg-card {
	margin: 0;
}

.afw-sg-card__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "icon title" ". lead";
	align-items: center;
	column-gap: 13px;
	/* the lead's own `margin-top` loses to `.afw-sg p`; a grid gap cannot be outranked */
	row-gap: 8px;
}

.afw-sg-card__icon {
	grid-area: icon;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--afw-accent-soft);
	color: var(--afw-accent);
	display: grid;
	place-items: center;
}

.afw-sg-card__title { grid-area: title; }
.afw-sg-card__lead  { grid-area: lead; max-width: 74ch; }

/* the modal has no icon, so it must not inherit the icon column */
.afw-sg--modal .afw-sg-card__head {
	display: block;
}

/**
 * ⚠️ THE MODEL COLUMN TAKES THE SLACK, and it is the reason the page had to get wider. It is the
 *   only column holding a sentence; the other two hold figures and are `nowrap`. Giving it the
 *   remainder is what stopped the numbers from being crushed.
 */
.afw-sg-models {
	min-width: 30ch;
}

.afw-sg-models__list {
	display: block;
	color: var(--afw-soft);
	font-size: 13.5px;
	line-height: 1.55;
}

/**
 * The attributed figure, where one exists. It is deliberately quieter than the models it sits
 * under: it is provenance, not the answer. ⚠️ A row without one is NOT incomplete - see the
 * header note in afw-size-guide.php on which rows may carry a centimetre figure at all.
 */
.afw-sg-cite {
	display: block;
	margin-top: 5px;
	padding-left: 10px;
	border-left: 2px solid var(--afw-accent-soft);
	font-size: 12px;
	line-height: 1.5;
	color: var(--afw-faint);
}


/*  ── fit support ───────────────────────────────────────────────────────────────────────────  */
.afw-sg-help {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 22px;
	padding: 24px 28px;
	border: 1px solid var(--afw-accent-soft);
	border-radius: 18px;
	background: linear-gradient(180deg, var(--afw-accent-soft), var(--afw-card) 78%);
}

.afw-sg-help__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--afw-card);
	border: 1px solid var(--afw-line);
	color: var(--afw-accent);
	display: grid;
	place-items: center;
}

.afw-sg-help__body {
	min-width: 0;
}

.afw-sg-help__body h2 {
	font-size: 20px;
	margin: 0 0 7px;
}

.afw-sg-help__body p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	max-width: 70ch;
}

.afw-sg-help__actions {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/**
 * 🔴 `color: #ffffff` ON `.afw-sg-btn` LOST, AND THE TEXT CAME OUT MAUVE ON MAUVE.
 *   Asked of the engine rather than guessed: the winning declaration is
 *   **`body.afw-tokens a { color: var(--afw-mauve) }`** at (0,2,1), which beats `.afw-sg-btn`
 *   at (0,1,0) and even `.afw-sg a { color: inherit }` at (0,1,1). The button background is
 *   also `--afw-mauve`, so the label was invisible - a solid mauve pill with nothing on it.
 *
 * ⚠️ `:any-link` IS THE SPECIFICITY, NOT A FLOURISH. `.afw-sg a.afw-sg-btn` would be (0,2,1)
 *   too - an exact tie, decided by source order between two of our OWN stylesheets, whose
 *   relative order nothing guarantees. The pseudo-class takes it to (0,3,1), which wins outright,
 *   and it is honest: this element really is a link.
 *
 * ⚠️ `.afw-sg-link` WAS ALSO LOSING, all along - it asked for `--afw-accent` and the theme
 *   rule handed it `--afw-mauve`, which is the same colour. It looked correct by luck. Left as
 *   it is rather than "fixed", because changing it would change nothing on screen.
 */
.afw-sg .afw-sg-btn:any-link {
	color: #ffffff;
}

.afw-sg .afw-sg-btn--quiet:any-link {
	color: var(--afw-soft);
}

.afw-sg .afw-sg-btn--quiet:any-link:hover,
.afw-sg .afw-sg-btn--quiet:any-link:focus-visible {
	color: var(--afw-ink);
}

.afw-sg-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 17px;
	border-radius: 11px;
	background: var(--afw-accent);
	border: 1px solid var(--afw-accent);
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.15s, background 0.15s, border-color 0.15s;
}

.afw-sg-btn:hover,
.afw-sg-btn:focus-visible {
	color: #ffffff;
	filter: brightness(1.08);
}

.afw-sg-btn--quiet {
	background: var(--afw-card);
	border-color: var(--afw-line);
	color: var(--afw-soft);
}

.afw-sg-btn--quiet:hover,
.afw-sg-btn--quiet:focus-visible {
	color: var(--afw-ink);
	border-color: var(--afw-accent);
	filter: none;
}

.afw-sg-btn__i {
	display: grid;
	place-items: center;
	color: currentColor;
}


/*  ── the FAQ ───────────────────────────────────────────────────────────────────────────────  */
.afw-sg-faq__head {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 18px;
}

.afw-sg-faq__head h2 {
	font-size: 22px;
}

.afw-sg-faq__list {
	border: 1px solid var(--afw-line);
	border-radius: 16px;
	background: var(--afw-card);
	overflow: hidden;
}

.afw-sg-qa + .afw-sg-qa {
	border-top: 1px solid var(--afw-hair);
}

/**
 * ⚠️ `list-style: none` PLUS the WebKit pseudo-element. Removing the disclosure triangle needs
 *   both: the standard property, and `::-webkit-details-marker` for Safari, which still ignores
 *   it. Miss the second and the summary renders our chevron next to the browser's triangle.
 */
.afw-sg-qa__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 17px 22px;
	font-family: var(--afw-serif);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--afw-ink);
	transition: background 0.14s;
}

.afw-sg-qa__q::-webkit-details-marker {
	display: none;
}

.afw-sg-qa__q:hover {
	background: var(--afw-ground);
}

.afw-sg-qa__q:focus-visible {
	outline: 2px solid var(--afw-accent);
	outline-offset: -2px;
}

/* the chevron, drawn rather than fetched: two borders on a rotated square */
.afw-sg-qa__mark {
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
	margin-right: 3px;
	border-right: 1.6px solid var(--afw-accent);
	border-bottom: 1.6px solid var(--afw-accent);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.18s ease;
}

.afw-sg-qa[open] > .afw-sg-qa__q .afw-sg-qa__mark {
	transform: rotate(225deg) translateY(-2px);
}

.afw-sg-qa[open] > .afw-sg-qa__q {
	color: var(--afw-accent);
}

.afw-sg-qa__a {
	padding: 0 22px 19px;
}

.afw-sg-qa__a p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	max-width: 76ch;
}

@media (prefers-reduced-motion: reduce) {
	.afw-sg-qa__mark,
	.afw-sg-btn {
		transition: none;
	}
}


/*  ── narrow screens ───────────────────────────────────────────────────────────────────────  */
/**
 * 🔴 THREE THINGS COLLAPSE, AND EACH FOR ITS OWN REASON, not all at one arbitrary breakpoint:
 *   the introduction's side panel has nowhere to sit below ~1000px; the three steps stop being
 *   readable as columns below ~860px; and the support block's buttons need the full width once
 *   the text beside them has wrapped.
 */
@media (max-width: 1040px) {
	.afw-sg-intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 860px) {
	.afw-sg--page {
		gap: 26px;
	}

	.afw-sg-how {
		padding: 22px 20px 24px;
	}

	.afw-sg-how__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.afw-sg-how .afw-sg-how__title {
		font-size: 20px;
		margin-bottom: 18px;
	}

	.afw-sg-help {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 22px 20px 24px;
	}

	.afw-sg-help__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.afw-sg-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.afw-sg-opener {
		font-size: 16.5px;
	}

	.afw-sg-intro__body p {
		font-size: 15px;
	}

	.afw-sg-glance {
		padding: 17px 18px 16px;
	}

	/**
	 * ⚠️ THE LEAD DROPS TO THE LEFT EDGE ON A PHONE. The desktop head reserves an icon
	 *   column and starts the lead under the title, which is right at 1180px and wrong at 390:
	 *   measured, it cost the paragraph about 45px of a 318px measure and turned four lines into
	 *   six. The icon and title keep their row; the lead spans both columns.
	 */
	.afw-sg-card__head {
		column-gap: 11px;
		grid-template-areas: "icon title" "lead lead";
	}

	.afw-sg-card__icon {
		width: 34px;
		height: 34px;
		border-radius: 10px;
	}

	.afw-sg-faq__head h2 {
		font-size: 20px;
	}

	.afw-sg-qa__q {
		padding: 15px 17px;
		font-size: 15.5px;
	}

	.afw-sg-qa__a {
		padding: 0 17px 17px;
	}

	/**
	 * ⚠️ THE MODEL COLUMN KEEPS A MINIMUM AND THE CARD SCROLLS. It is tempting to let it shrink
	 *   so the table fits a phone, but a sentence in a 90px column is unreadable and the two
	 *   figure columns get crushed with it. `.afw-sg-scroll` already owns the overflow, so the
	 *   card scrolls inside itself and the PAGE does not - which is the behaviour to keep.
	 */
	.afw-sg-models {
		min-width: 26ch;
	}
}


/*  ── the page table stops being a table on a phone ────────────────────────────────────────  */
/**
 * 🔴 IT SCROLLED SIDEWAYS AND HID THE COLUMN WORTH READING. Measured at 390px: the three-column
 *   page table wanted 474px inside a 358px scroll box, so "Plush it was cut for" - the column a
 *   customer actually came for - sat off the right edge with no cue that it was there.
 *
 *   Under 767px each row becomes its own card: the size as the card's title, then each remaining
 *   column as a micro-label above its value, read from `data-h` which the template copies onto
 *   every cell from the table's own head. Nothing is hidden and nothing scrolls.
 *
 * ⚠️ THE SAME TREATMENT AS THE SIZING TABLE ON PRODUCT PAGES (`.afw-pl-tablewrap` in plush.css),
 *   deliberately. It is one table in two places; two different answers to the same phone would
 *   read as two different shops.
 *
 * ⚠️ SCOPED TO `.afw-sg--page`. The modal's table is two narrow figure columns and fits a phone
 *   as a table; restacking it would repeat "Our size" above every row for nothing.
 */
@media (max-width: 767px) {
	.afw-sg--page .afw-sg-scroll {
		overflow-x: visible;
		border-top: 0;
	}

	.afw-sg--page .afw-sg-table,
	.afw-sg--page .afw-sg-table tbody,
	.afw-sg--page .afw-sg-table tbody tr {
		display: block;
		width: 100%;
	}

	/* the head's words are on the cells now, so it is redundant rather than lost */
	.afw-sg--page .afw-sg-table thead {
		display: none;
	}

	.afw-sg--page .afw-sg-table tbody tr {
		border-top: 1px solid var(--afw-line);
	}

	.afw-sg--page .afw-sg-table tbody td,
	.afw-sg--page .afw-sg-table tbody th {
		display: block;
		width: auto;
		padding: 11px 20px 12px;
		border: 0;
		text-align: left;
		white-space: normal;
	}

	.afw-sg--page .afw-sg-table tbody td[data-h]::before,
	.afw-sg--page .afw-sg-table tbody th[data-h]::before {
		content: attr(data-h);
		display: block;
		margin-bottom: 3px;
		font-family: var(--afw-sans);
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--afw-faint);
	}

	/* the size is the card's title: the band, the serif, and no label above it */
	.afw-sg--page .afw-sg-table tbody tr > :first-child {
		width: auto;
		padding: 12px 20px 13px;
		background: var(--afw-ground);
		border-bottom: 1px solid var(--afw-hair);
		font-family: var(--afw-serif);
		font-size: 19px;
		font-weight: 600;
		color: var(--afw-ink);
		white-space: nowrap;
	}

	.afw-sg--page .afw-sg-table tbody tr > :first-child::before {
		display: none;
	}

	.afw-sg--page .afw-sg-fits {
		font-size: 14.5px;
		color: var(--afw-ink);
	}

	/* the min-width was there to stop the sentence being crushed in a column; there is no
	   column any more, so it would only force the page sideways again */
	.afw-sg--page .afw-sg-models {
		min-width: 0;
	}
}