/**
 * Policy pages - Shipping & Delivery, Returns & Refunds, FAQs
 *
 * These are read, not scanned, so the typography does most of the work: a
 * measured column, a clear heading rhythm, and no decoration competing with
 * the text. The header band and the glossy aside card match the rest of the
 * site; everything else is restraint.
 *
 * The prose lives in the page content, so the styles below target plain HTML
 * elements inside .ml-policy__content rather than classes the editor would
 * have to remember.
 */

/* -------------------------------------------------------------------------
 * Header band
 * ---------------------------------------------------------------------- */

.ml-policy__head {
	background: linear-gradient(180deg, var(--ml-stage) 0%, var(--ml-stage-soft) 100%);
	padding: 22px 24px 30px;
}

.ml-policy__head-inner {
	max-width: var(--ml-container);
	margin: 0 auto;
}

.ml-policy__eyebrow {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ml-cyan);
}

.ml-policy__title {
	margin: 0 0 14px;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ml-navy);
}

.ml-policy__updated {
	margin: 0;
	font-size: 13.5px;
	color: var(--ml-muted);
}

/* -------------------------------------------------------------------------
 * Body layout
 * ---------------------------------------------------------------------- */

.ml-policy__body {
	padding: 36px 24px 64px;
	background: var(--ml-white);
}

.ml-policy__body-inner {
	max-width: var(--ml-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 44px;
	align-items: start;
}

.ml-policy__body-inner--wide {
	grid-template-columns: minmax(0, 1fr);
}

.ml-policy__content {
	min-width: 0;
	/* Roughly 68 characters at this size - comfortable for continuous reading. */
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ml-body);
}

/* -------------------------------------------------------------------------
 * Prose
 * ---------------------------------------------------------------------- */

.ml-policy__content > *:first-child {
	margin-top: 0;
}

.ml-policy__content p {
	margin: 0 0 22px;
}

.ml-policy__content h2 {
	margin: 40px 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--ml-line);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ml-navy);
	text-wrap: balance;
}

.ml-policy__content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.ml-policy__content h3 {
	margin: 26px 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ml-navy);
}

.ml-policy__content strong {
	font-weight: 600;
	color: var(--ml-navy);
}

.ml-policy__content a {
	color: var(--ml-cyan);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

.ml-policy__content a:hover,
.ml-policy__content a:focus-visible {
	color: var(--ml-cyan-dark);
}

.ml-policy__content ul,
.ml-policy__content ol {
	margin: 0 0 18px;
	padding: 0 0 0 4px;
	list-style: none;
}

.ml-policy__content li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 26px;
}

.ml-policy__content ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 11px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ml-cyan);
}

.ml-policy__content ol {
	counter-reset: ml-policy-step;
}

.ml-policy__content ol > li {
	counter-increment: ml-policy-step;
}

.ml-policy__content ol > li::before {
	content: counter(ml-policy-step);
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ml-stage);
	color: var(--ml-cyan);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---------- Standfirst ---------- */

.ml-policy__content .ml-policy__lede {
	margin-bottom: 26px;
	font-size: 18px;
	line-height: 1.65;
	color: var(--ml-navy);
	text-wrap: pretty;
}

/* ---------- Emphasised note ---------- */

.ml-policy__content .ml-policy__note {
	margin: 0 0 20px;
	padding: 16px 18px;
	border-left: 3px solid var(--ml-cyan);
	border-radius: 0 10px 10px 0;
	background: var(--ml-stage-soft);
	font-size: 15.5px;
	color: #3d4d5a;
}

.ml-policy__content .ml-policy__note strong {
	color: var(--ml-navy);
}

/* -------------------------------------------------------------------------
 * FAQ accordion
 *
 * Native <details>, so it works with JavaScript disabled, is keyboard
 * operable, and browser in-page search can open a closed answer.
 * ---------------------------------------------------------------------- */

.ml-policy__content .ml-faq {
	margin: 0 0 12px;
	border: 1px solid var(--ml-line);
	border-radius: 12px;
	background: var(--ml-white);
	overflow: hidden;
	transition: border-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard), transform var(--ml-t-base) var(--ml-e-standard);
}

.ml-policy__content .ml-faq:hover {
	transform: translateY(-2px);
	border-color: #bfe3f7;
	box-shadow: 0 16px 28px -22px rgba(10, 37, 64, 0.75);
}

.ml-policy__content .ml-faq[open] {
	border-color: #bfe3f7;
	box-shadow: 0 16px 30px -24px rgba(10, 37, 64, 0.7);
}

.ml-policy__content .ml-faq > summary {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ml-navy);
	cursor: pointer;
	list-style: none;
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

/* Hide the native disclosure triangle in both engines. */
.ml-policy__content .ml-faq > summary::-webkit-details-marker {
	display: none;
}

.ml-policy__content .ml-faq > summary::marker {
	content: "";
}

.ml-policy__content .ml-faq > summary:hover {
	color: var(--ml-cyan);
}

.ml-policy__content .ml-faq > summary:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: -3px;
}

/* The chevron, drawn in CSS so no icon font or SVG is needed per question. */
.ml-policy__content .ml-faq > summary::after {
	content: "";
	flex: 0 0 auto;
	order: 2;
	width: 9px;
	height: 9px;
	margin: 6px 2px 0 auto;
	border-right: 2px solid var(--ml-cyan);
	border-bottom: 2px solid var(--ml-cyan);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.25s var(--ml-e-enter);
}

.ml-policy__content .ml-faq[open] > summary::after {
	transform: rotate(-135deg);
}

.ml-policy__content .ml-faq > summary > * {
	order: 1;
}

.ml-policy__content .ml-faq > *:not(summary) {
	margin: 0 18px 14px;
	font-size: 15.5px;
	line-height: 1.7;
}

.ml-policy__content .ml-faq > summary + * {
	padding-top: 2px;
	margin-top: -2px;
}

.ml-policy__content .ml-faq ul {
	margin-bottom: 14px;
}

/* -------------------------------------------------------------------------
 * Aside
 * ---------------------------------------------------------------------- */

.ml-policy__aside {
	position: sticky;
	top: 24px;
}

.ml-policy__card {
	padding: 22px;
	border-radius: 14px;
}

/* A reference panel, not a target - keep the depth, drop the tilt and sheen. */
.ml-policy__card.ml-glass:hover,
.ml-policy__card.ml-glass:focus-within {
	transform: none;
}

.ml-policy__card.ml-glass::after {
	display: none;
}

.ml-policy__card-title {
	margin: 0 0 22px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ml-navy);
}

/* margin-bottom only, (0,2,0): Astra's `.woocommerce-js h2 { margin-bottom: .7em }` (0,1,1) beat the rule above. 22px is the spacing scale (CLAUDE.md). */
.ml-policy__card-title.ml-policy__card-title {
	margin-bottom: 22px;
}

.ml-policy__facts {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ml-policy__facts li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	padding: 0;
}

.ml-policy__facts li::before {
	display: none;
}

/* The shared trust icon ships at 30px; this card wants it smaller. */
.ml-policy__facts .medlife-trust__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--ml-cyan);
}

.ml-policy__facts span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ml-policy__facts strong {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.ml-policy__facts em {
	font-style: normal;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ml-navy);
}

.ml-policy__facts a {
	color: var(--ml-cyan);
	text-decoration: none;
}

.ml-policy__facts a:hover,
.ml-policy__facts a:focus-visible {
	text-decoration: underline;
}

.ml-policy__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 20px;
	border-radius: 8px;
	background: var(--ml-cyan);
	color: var(--ml-white);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 14px 26px -16px rgba(var(--ml-shadow-tint), 0.95);
	transition: transform var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

.ml-policy__cta:hover,
.ml-policy__cta:focus-visible {
	background: var(--ml-cyan-dark);
	transform: translateY(-2px);
	color: var(--ml-white);
	box-shadow: 0 22px 34px -16px rgba(var(--ml-shadow-tint), 1);
}

.ml-policy__links {
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--ml-line);
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ml-policy__links li {
	margin: 0;
	padding: 0;
}

.ml-policy__links li::before {
	display: none;
}

.ml-policy__links a {
	font-size: 14px;
	font-weight: 500;
	color: var(--ml-body);
	text-decoration: none;
	transition: color var(--ml-t-base) var(--ml-e-standard), transform var(--ml-t-base) var(--ml-e-standard);
	display: inline-block;
}

.ml-policy__links a:hover,
.ml-policy__links a:focus-visible {
	color: var(--ml-cyan);
	transform: translateX(2px);
}

/* -------------------------------------------------------------------------
 * Astra reset
 * ---------------------------------------------------------------------- */

/*
 * width: 100% is load-bearing. .ml-policy is a FLEX ITEM of Astra's
 * .ast-container (display: flex), so without it the shell shrink-wraps to
 * its content: 1095 of 1425px on /faqs/, where long prose hid it, and 493px
 * on /wishlist/, where an empty state did not - the header band stopped
 * short with bare white beyond it. Found 2026-09-18.
 */
.ml-policy {
	width: 100%;
	min-width: 0;
	background: var(--ml-white);
}

.ml-policy-page .site-content > .ast-container {
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
}

.ml-policy-page #primary,
.ml-policy-page .ast-article-single {
	margin: 0;
	padding: 0;
	border: 0;
}

.ml-policy-page .entry-content {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1000px) {
	.ml-policy__body-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.ml-policy__aside {
		position: static;
	}

	.ml-policy__card {
		max-width: 460px;
	}
}

@media (max-width: 560px) {
	.ml-policy__head,
	.ml-policy__body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ml-policy__content {
		font-size: 15.5px;
	}

	.ml-policy__content .ml-policy__lede {
		font-size: 17px;
	}

	.ml-policy__content .ml-faq > summary {
		font-size: 15.5px;
		padding: 14px 16px;
	}

	.ml-policy__content .ml-faq > *:not(summary) {
		margin-left: 16px;
		margin-right: 16px;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ml-policy__content .ml-faq:hover,
	.ml-policy__cta:hover,
	.ml-policy__cta:focus-visible,
	.ml-policy__links a:hover,
	.ml-policy__links a:focus-visible {
		transform: none;
	}

	.ml-policy__content .ml-faq,
	.ml-policy__content .ml-faq > summary,
	.ml-policy__content .ml-faq > summary::after,
	.ml-policy__cta,
	.ml-policy__links a,
	.ml-policy__content a {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Print
 *
 * These are the pages customers are most likely to print or save as PDF.
 * ---------------------------------------------------------------------- */

@media print {
	.ml-policy__aside,
	.ml-shop__crumbs {
		display: none;
	}

	.ml-policy__head,
	.ml-policy__body {
		padding: 0;
		background: none;
	}

	.ml-policy__content {
		max-width: none;
		font-size: 11pt;
	}

	.ml-policy__content .ml-faq {
		border: 0;
		box-shadow: none;
	}

	/* Answers must be visible on paper even if the accordion was closed. */
	.ml-policy__content .ml-faq > *:not(summary) {
		display: block !important;
		margin-left: 0;
		margin-right: 0;
	}

	.ml-policy__content .ml-faq > summary::after {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Order tracking form
 *
 * WooCommerce's [woocommerce_order_tracking] renders <form class="track_order">
 * with two <p class="form-row"> fields and a bare <button type="submit">. All
 * three of the Astra traps recorded in CLAUDE.md apply to it, and none of them
 * is visible until you look:
 *
 *   1. `input[type="text"]` is (0,1,1) and beats any single-class rule, so the
 *      field selectors below are multi-class.
 *   2. `button:focus, button:hover { background-color: var(--ast-global-color-1) }`
 *      is (0,1,1) and repaints a bare button to #045cb4 - and a clicked button
 *      KEEPS :focus, so it would stay repainted. Hence the state lock.
 *   3. Astra paints `input:focus { border-style: dotted }`, so the focus rule
 *      restates the style as well as the colour.
 * ---------------------------------------------------------------------- */

.ml-policy__content form.track_order {
	margin: 0 0 8px;
}

.ml-policy__content form.track_order p {
	margin: 0 0 18px;
}

.ml-policy__content form.track_order label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--ml-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--ml-navy);
}

/* MULTI-CLASS - see trap 1 above. */
.ml-policy .ml-policy__content form.track_order input[type="text"],
.ml-policy .ml-policy__content form.track_order input[type="email"] {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid var(--ml-line);
	border-radius: 9px;
	background: var(--ml-white);
	box-shadow: none;
	color: var(--ml-navy);
	font-family: var(--ml-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	height: 48px;
	transition: border-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

.ml-policy .ml-policy__content form.track_order input[type="text"]:focus,
.ml-policy .ml-policy__content form.track_order input[type="email"]:focus {
	outline: none;
	border: 1px solid var(--ml-cyan);
	border-style: solid;
	box-shadow: 0 0 0 3px rgba(0, 175, 240, 0.16);
}

.ml-policy .ml-policy__content form.track_order ::placeholder {
	color: var(--ml-muted);
	opacity: 1;
}

/* STATE LOCK at (0,3,1) - see trap 2 above. */
.ml-policy .ml-policy__content form.track_order button[type="submit"],
.ml-policy .ml-policy__content form.track_order button[type="submit"]:hover,
.ml-policy .ml-policy__content form.track_order button[type="submit"]:focus,
.ml-policy .ml-policy__content form.track_order button[type="submit"]:focus-visible,
.ml-policy .ml-policy__content form.track_order button[type="submit"]:active {
	min-width: 200px;
	height: 50px;
	margin: 4px 0 0;
	padding: 0 30px;
	border: 0;
	border-radius: 8px;
	background: var(--ml-cyan);
	color: var(--ml-white);
	font-family: var(--ml-font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 14px 26px -16px rgba(var(--ml-shadow-tint), 0.95);
	transition: background-color var(--ml-t-base) var(--ml-e-standard), transform var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

.ml-policy .ml-policy__content form.track_order button[type="submit"]:hover,
.ml-policy .ml-policy__content form.track_order button[type="submit"]:focus-visible {
	background: var(--ml-cyan-dark);
	transform: translateY(-2px);
	box-shadow: 0 20px 32px -16px rgba(var(--ml-shadow-tint), 1);
}

.ml-policy .ml-policy__content form.track_order button[type="submit"]:focus-visible {
	outline: 2px solid var(--ml-navy);
	outline-offset: 2px;
}

/* The two fields sit side by side once there is room for them. */
@media (min-width: 700px) {
	.ml-policy__content form.track_order {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 20px;
	}

	.ml-policy__content form.track_order > p:last-of-type {
		grid-column: 1 / -1;
	}
}

/*
 * The result WooCommerce prints after a successful lookup, plus its own
 * notices. Left as WooCommerce's own markup so its selectors keep working.
 */
.ml-policy__content .woocommerce-order-overview,
.ml-policy__content ul.order_details {
	list-style: none;
	margin: 24px 0 0;
	padding: 22px 24px;
	border: 1px solid var(--ml-line);
	border-radius: 12px;
	background: var(--ml-white);
	font-family: var(--ml-font);
}

.ml-policy__content ul.order_details li {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--ml-body);
}

.ml-policy__content ul.order_details li strong {
	display: block;
	margin-top: 2px;
	font-size: 16px;
	color: var(--ml-navy);
}

@media (prefers-reduced-motion: reduce) {
	.ml-policy .ml-policy__content form.track_order input[type="text"],
	.ml-policy .ml-policy__content form.track_order input[type="email"],
	.ml-policy .ml-policy__content form.track_order button[type="submit"] {
		transition: none;
	}

	.ml-policy .ml-policy__content form.track_order button[type="submit"]:hover,
	.ml-policy .ml-policy__content form.track_order button[type="submit"]:focus-visible {
		transform: none;
	}
}

/*
 * POINTER FOCUS - ASTRA a:focus { outline: thin dotted } (main.min.css L3).
 * A mouse click leaves :focus set, so every anchor that names no outline of its
 * own kept a thin dotted ring until focus moved. Measured 2026-09-13 by the
 * sitewide anchor sweep (CLAUDE.md, "Anchor pointer-focus sweep").
 *
 * :not(:focus-visible) IS LOAD-BEARING: this only ever applies to pointer focus,
 * so the keyboard ring each family already has is untouched. Outline only -
 * nothing moves, so there is no reduced-motion twin.
 */
.ml-policy__content a:focus:not(:focus-visible),
.ml-policy__links a:focus:not(:focus-visible),
.ml-faq a:focus:not(:focus-visible),
.ml-policy__facts a:focus:not(:focus-visible),
a.ml-policy__cta:focus:not(:focus-visible),
.ml-policy__note a:focus:not(:focus-visible),
.ml-policy__lede a:focus:not(:focus-visible) {
	outline: none;
}

/*
 * KEYBOARD RINGS - 2026-09-14. These families had NO focus ring of their own:
 * keyboard focus showed only Astra's a:focus-visible 1px dotted in the text
 * colour, or nothing at all where a theme rule said outline: none. Measured by
 * the sitewide anchor sweep (CLAUDE.md, "Keyboard ring pass").
 *
 * Light surface: 3px --ml-cyan offset 3px. Navy surface: 2px. border-radius is
 * RESTATED on every ring - a rule wins only the properties it names, and a
 * shared focus rule has squared a round control on this site before. Text links
 * take 4px corners; boxed controls keep their own radius.
 *
 * The pointer pin (:focus:not(:focus-visible)) above is untouched - the two
 * selectors can never match the same state. Contrast: cyan on white 2.50:1 is
 * the owner's recorded decision (CLAUDE.md, "THE FOCUS-RING RULE").
 */
.ml-policy__lede a:focus-visible,
.ml-faq a:focus-visible,
.ml-policy__facts a:focus-visible,
.ml-policy__links a:focus-visible,
.ml-policy__content a:focus-visible,
.ml-policy__note a:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}
a.ml-policy__cta:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 8px;
}

/*
 * RING FADE - ASTRA'S INLINE `a { transition: all .2s linear }`. "all" includes
 * outline, so these families' keyboard rings slid and faded in over 200ms
 * instead of appearing at once. Each family now names exactly what its hover /
 * focus-visible state really changes, measured 2026-09-14 (CLAUDE.md, "Ring fade
 * pass"): colour where Astra's a:hover repaints the ink, nothing at all where
 * only the (discrete) underline changes or nothing visible changes.
 * Outline is never in the list. Colour-only fades need no reduced-motion twin.
 */
.ml-policy__facts a {
	transition: none;
}

/* =========================================================================
 * TRACK YOUR ORDER (2026-09-23)
 *
 * Scoped with `:has(form.track_order)` - that form exists on this page and
 * nowhere else, so the five other policy pages cannot see any of it. `:has()`
 * is already used elsewhere in this theme (the nav band, the assurance strip).
 *
 * MEASURED FIRST, at 1440, and two of the reported symptoms were not what
 * they looked like:
 *
 *   .ml-policy__body-inner  grid  minmax(0,1fr) 320px, gap 44, max 1360
 *   track 1 = 1360 - 320 - 44 = 996px
 *   .ml-policy__content     max-width: 68ch = 683.25px
 *
 * So the prose column stopped 313px short of its own track and the aside sat
 * far off to the right with a gulf between them. THE ASIDE WAS NEVER OUTSIDE
 * THE PAGE - its right edge measured 40px INSIDE the viewport (1400 of 1440),
 * and 16px inside at 375. What it was, was stranded.
 * ====================================================================== */

/*
 * 68ch is a READING measure and this page is a form. 1040 = 676 + 44 + 320,
 * so the two columns sit together and the pair centres on the page instead of
 * being pushed to its edges.
 */
.ml-policy__body-inner:has(form.track_order) {
	/* 676 + 44 + 360. The aside is 40px wider than the shared 320 because of
	   the delivery line below - the sum moves with it. */
	max-width: 1080px;
	grid-template-columns: minmax(0, 1fr) 360px;
}

/*
 * THE DELIVERY LINE WRAPPED TO FOUR LINES IN A 274px COLUMN.
 *
 * The aside card is 320px shared across the policy pages; inside it the fact
 * <li> is a flex row whose text column measured 274px, and "Flat Rs 200
 * delivery across Pakistan" does not fit two lines there. 360px gives the
 * text ~314px, which is enough - measured, not estimated.
 *
 * The amount keeps its own nowrap below, so "Rs 200" can never be the thing
 * that breaks whatever the width ends up being.
 */

.ml-policy__body-inner:has(form.track_order) .ml-policy__content {
	max-width: none;
}

/*
 * ONE COLUMN, 320px. WooCommerce ships `.form-row-first`/`.form-row-last` at
 * `width: 47%`, which inside the form's 331.625px grid tracks resolved to
 * 155.9px each - the same percentage-inside-a-track trap the account sidebar
 * hit. (0,2,1) beats WooCommerce's (0,1,0), so this does not rely on order.
 */
.ml-policy form.track_order {
	display: grid;
	grid-template-columns: minmax(0, 320px);
	gap: 0;
}

.ml-policy form.track_order .form-row,
.ml-policy form.track_order .form-row-first,
.ml-policy form.track_order .form-row-last {
	width: 100%;
	max-width: 320px;
	float: none;
	margin-inline: 0;
}

/* The button belongs under the fields, at their width, not beside them. */
.ml-policy form.track_order .form-row button,
.ml-policy form.track_order .form-row input[type="submit"] {
	width: 100%;
	max-width: 320px;
}

/*
 * THE CYAN BORDER IS NOT A STUCK RING - IT IS THE FIELD SAYING IT HAS FOCUS,
 * AND THERE IS DELIBERATELY NO RULE HERE.
 *
 * A pointer pin was written for it and then removed, because it can never
 * match. Measured after a real dispatched click on the Order ID box:
 *
 *     focused = true   :focus = true   :focus-visible = TRUE
 *     matches( '...input:focus:not(:focus-visible)' ) = false
 *
 * Browsers always match :focus-visible on a TEXT-ENTRY field however it was
 * focused, because the visitor is about to type into it. So
 * :focus:not(:focus-visible) is dead CSS on an input[type=text] - unlike a
 * link or a button, where it is the right tool and this theme uses it widely.
 *
 * Suppressing it another way would be worse than leaving it: a focused text
 * field with no indicator fails WCAG 2.4.7 and leaves the visitor unable to
 * see which box they are typing in. The border clears on blur, so it is not
 * stuck - it is showing focus for exactly as long as the field has focus.
 */

/*
 * "Flat / Rs / 200 / delivery across Pakistan" - FOUR LINES, AND IT WAS NEVER
 * ABOUT THE WIDTH.
 *
 * `.ml-policy__facts span { display: flex; flex-direction: column }` is the
 * label-over-value stack, written as a bare descendant selector. But
 * `medlife_delivery_message()` returns HTML - it calls `wc_price()`, which
 * emits its own `<span class="woocommerce-Price-amount">` with a nested
 * currency span - and those nested spans matched the very same selector. So
 * the price became a COLUMN FLEX CONTAINER and stacked "Rs" above "200",
 * inside a value that was already stacking. A wider card could never have
 * fixed it.
 *
 * Two rules: put the stack back on the direct child only, and return any
 * nested price span to inline flow. `nowrap` then keeps the amount whole.
 */
.ml-policy__facts li > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ml-policy__facts .woocommerce-Price-amount,
.ml-policy__facts .woocommerce-Price-currencySymbol,
.ml-policy__facts bdi {
	display: inline;
	white-space: nowrap;
}

/* The phone number is a single token to a reader; never break it. */
.ml-policy__facts a[href^="tel:"],
.ml-policy__content a[href^="tel:"] {
	white-space: nowrap;
}

/*
 * THE STACK OVERRIDE HAS TO BE RAISED WITH THE RULE ABOVE, AND THIS WAS
 * MEASURED BREAKING BEFORE IT WAS WRITTEN.
 *
 * The shared `@media (max-width: 1000px) { .ml-policy__body-inner {
 * grid-template-columns: minmax(0, 1fr) } }` is (0,1,0). The two-column rule
 * above is (0,1,0) plus :has(), i.e. (0,2,0), so it won at every width - and
 * a phone kept a 360px aside beside a content column that collapsed to ZERO,
 * with the card 35px off the right edge and the page finally overflowing.
 *
 * This is the same checklist item that bit the account sidebar earlier today:
 * raise a selector and its responsive twin is stranded. Matching specificity.
 */
@media (max-width: 1000px) {
	.ml-policy__body-inner:has(form.track_order) {
		grid-template-columns: minmax(0, 1fr);
		max-width: var(--ml-container);
	}
}