/* ==========================================================================
   PolarLabs — COA / Verification Center restyle (DR-COA-REF-001)
   Route-scoped stylesheet, enqueued ONLY on /coa (inc/verification-center.php).
   Presentation-only reference-led restyle of the existing product-first
   Verification Center (DR-COA-004). NO data / query / approval / fail-closed
   behaviour is changed here — this file only restyles the markup emitted by
   page-templates/template-coa-index.php + inc/coa-library.php.

   SCOPE: every rule is prefixed with `.pl-coa.pl-coa--v2` (both classes are on
   the directory root <div>). That compound (0,2,0) out-specifies the base
   `.pl-coa` / `.pl-coa .pl-coa-*` rules in woocommerce.css, so this restyle wins
   REGARDLESS of stylesheet load order and WITHOUT editing woocommerce.css (which
   also styles the FROZEN Shop archive + PDP). Tokens come from main.css :root;
   literal fallbacks mirror the shipped values.

   Assets (assets/images/coa/): coa-atmosphere{,-mobile}.jpg = "Our standard" supporting art.
   (The former coa-hero{,-mobile}.jpg hero art is no longer referenced by any rule — DR-COA-HERO-COMPACT-001.)
   ========================================================================== */

/* ---- Root ---------------------------------------------------------------- */
.pl-coa.pl-coa--v2 {
	display: block;
	background: var(--pl-surface, #fff);
}

/* ==========================================================================
   1. HERO — compact, text-only hero on a calm icy field (no artwork).
   A masked blueprint-grid hairline + a faint cobalt corner wash give the flat
   field a premium finish without competing with the copy.
   ========================================================================== */
.pl-coa.pl-coa--v2 .pl-coa-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--pl-icy, #F4F8FF);
	border-bottom: 1px solid var(--pl-line, #DCE6F2);
	padding: 0;
}
/* DR-COA-HERO-COMPACT-001 (owner 2026-08-25): decorative hero laboratory artwork removed.
   The .pl-coa-hero__art layer (its desktop, ≤1024 and ≤820 background-image rules) and its markup
   span are gone, so neither coa-hero.jpg nor coa-hero-mobile.jpg is requested; the hero now sits on
   the plain icy field from .pl-coa-hero. Padding + the base min-height floor are cut so the hero
   reflows compact and the product directory rises (esp. mobile). Presentation-only — no COA
   data/logic/fail-closed change. */
.pl-coa.pl-coa--v2 .pl-coa-hero__inner {
	position: relative;
	z-index: 2;
	min-height: 0;                      /* override base woocommerce.css min-height floor (≤240px) */
	padding-block: clamp(12px, 2vw, 24px);
}
.pl-coa.pl-coa--v2 .pl-coa-hero__content {
	max-width: 760px;                   /* freed width (art gone) without over-stretching the measure */
}
/* DR-COA-HERO-FIELD-001 — premium PolarLabs field for the flat icy hero: a masked blueprint
   hairline grid + a faint cobalt corner wash (the affiliate-hero recipe, inverted to DARK
   hairlines on the light field). CSS-only, ZERO raster/network, static (no motion → no
   reduced-motion guard). Both pseudo-elements sit BELOW .pl-coa-hero__inner (z-index:2); the
   hero's overflow:hidden clips them + isolation:isolate contains the stack. Pseudo ⇒ auto
   aria-hidden + pointer-events:none. Masked to the top-right so the field fades out before the
   copy — text keeps WCAG AA over the busiest area (title ~14:1, eyebrow ~8.5:1,
   muted intro ~6.6:1). */
.pl-coa.pl-coa--v2 .pl-coa-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(7, 24, 45, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(7, 24, 45, .045) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(120% 125% at 88% -10%, #000 0%, transparent 60%);
	        mask-image: radial-gradient(120% 125% at 88% -10%, #000 0%, transparent 60%);
}
.pl-coa.pl-coa--v2 .pl-coa-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(58% 78% at 92% -12%, rgba(0, 78, 255, .07) 0%, rgba(0, 78, 255, 0) 58%);
}
.pl-coa.pl-coa--v2 .pl-coa-hero__eyebrow {
	margin: 0 0 8px;
	font-family: var(--pl-mono, ui-monospace, monospace);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pl-blue-600, #0039CC);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.pl-coa.pl-coa--v2 .pl-coa-hero__eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--pl-blue, #004EFF);
	border-radius: 2px;
}
.pl-coa.pl-coa--v2 .pl-coa-hero__title {
	margin: 0 0 10px;
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.03;
	font-size: clamp(1.95rem, 1.4rem + 2.1vw, 2.85rem);
	color: var(--pl-navy, #07182D);
}
.pl-coa.pl-coa--v2 .pl-coa-hero__intro {
	margin: 0 0 16px;
	max-width: 46ch;
	font-size: clamp(1rem, .96rem + .3vw, 1.14rem);
	line-height: 1.6;
	color: var(--pl-muted, #42526A);
}
/* Hero record count — a single compact "instrument readout" line (DR-COA-COMPACT-TOP-001,
   owner 2026-09-05). Replaces the former stat cards AND the page-level "Primary laboratory"
   summary: one laboratory should not become a page-wide identity statement, and laboratory
   identity is stated per record (cert rows / product headers) instead — the underlying lab
   data is unchanged. Factual, dynamic, screen-reader-plain; scales at any corpus size. */
.pl-coa.pl-coa--v2 .pl-coa-hero__count {
	margin: 0;
	font-family: var(--pl-mono, ui-monospace, monospace);
	font-size: .82rem;
	letter-spacing: .04em;
	line-height: 1.4;
	color: var(--pl-muted, #42526A);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   2. SEARCH TOOLBAR — the ONE real, server-side lookup (no dead facets).
   ========================================================================== */
.pl-coa.pl-coa--v2 .pl-coa-toolbar {
	background: var(--pl-surface, #fff);
	padding: clamp(12px, 2vw, 18px) 0 0;
}
.pl-coa.pl-coa--v2 .pl-coa-herosearch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 760px;
	padding: 8px 8px 8px 46px;
	background: var(--pl-surface-2, #F6F9FD);
	border: 1px solid var(--pl-field-border, #6E8098);
	border-radius: var(--pl-radius-pill, 999px);
}
.pl-coa.pl-coa--v2 .pl-coa-herosearch:focus-within {
	border-color: var(--pl-blue, #004EFF);
	box-shadow: 0 0 0 3px rgba(0, 78, 255, .18);
}
.pl-coa.pl-coa--v2 .pl-coa-herosearch__icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	color: var(--pl-muted, #42526A);
	pointer-events: none;
}
.pl-coa.pl-coa--v2 .pl-coa-herosearch__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	border: 0;
	background: transparent;
	font-size: 1rem;
	color: var(--pl-navy, #07182D);
	-webkit-appearance: none;
	appearance: none;
}
.pl-coa.pl-coa--v2 .pl-coa-herosearch__input:focus {
	outline: none;
}
.pl-coa.pl-coa--v2 .pl-coa-herosearch__input::placeholder {
	color: var(--pl-muted-soft, #718096);
}
.pl-coa.pl-coa--v2 .pl-coa-herosearch__submit {
	flex: none;
	min-height: 44px;
	border-radius: var(--pl-radius-pill, 999px);
}

/* ==========================================================================
   3. BODY / RESULTS
   ========================================================================== */
.pl-coa.pl-coa--v2 .pl-coa__body {
	padding-block: clamp(14px, 2.4vw, 24px) clamp(36px, 5vw, 64px);
}
.pl-coa.pl-coa--v2 .pl-coa-results__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--pl-line, #DCE6F2);
}
.pl-coa.pl-coa--v2 .pl-coa-results__title {
	margin: 0;
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-weight: 800;
	letter-spacing: -.01em;
	font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem);
	color: var(--pl-navy, #07182D);
}
.pl-coa.pl-coa--v2 .pl-coa-results__count {
	margin: 0;
	font-family: var(--pl-mono, ui-monospace, monospace);
	font-size: .84rem;
	letter-spacing: .02em;
	color: var(--pl-muted, #42526A);
}

/* ---- Product directory (ARIA disclosure cards) — premium "database" rows -- */
.pl-coa.pl-coa--v2 .pl-coa-products {
	display: grid;
	gap: 14px;
}
.pl-coa.pl-coa--v2 .pl-coa-product {
	background: var(--pl-surface, #fff);
	border: 1px solid var(--pl-line, #DCE6F2);
	border-radius: var(--pl-radius-lg, 18px);
	overflow: hidden;
	transition: border-color var(--pl-dur, .2s) var(--pl-ease, ease), box-shadow var(--pl-dur, .2s) var(--pl-ease, ease);
}
.pl-coa.pl-coa--v2 .pl-coa-product:hover {
	border-color: var(--pl-line-strong, #C4D2E3);
	box-shadow: var(--pl-shadow-sm, 0 1px 2px rgba(2, 11, 22, .06), 0 1px 3px rgba(2, 11, 22, .05));
}
.pl-coa.pl-coa--v2 .pl-coa-product.is-focus {
	border-color: var(--pl-blue, #004EFF);
	box-shadow: 0 0 0 3px rgba(0, 78, 255, .16);
}
.pl-coa.pl-coa--v2 .pl-coa-product__header {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: clamp(14px, 1.6vw, 20px);
}
.pl-coa.pl-coa--v2 .pl-coa-product__media {
	display: grid;
	place-items: center;                /* still centers the no-image placeholder svg */
	width: 64px;
	height: 64px;
	border-radius: var(--pl-radius, 12px);
	background: var(--pl-surface-2, #F6F9FD);
	border: 0;                          /* DR-COA-THUMB-BORDER-001: override the base woocommerce.css .pl-coa-product__media 1px border → truly borderless edge-to-edge, matching .pl-coa-tcard__media */
	overflow: hidden;                   /* clip the image to the rounded frame */
}
/* Edge-to-edge product thumbnail (DR-COA-HERO-COMPACT-001) — the square product image fills the
   rounded media frame with no inset padding or nested border, matching the .pl-coa-tcard__img
   pattern, so it reads as a clean thumbnail instead of a small image floating inside a boxed card. */
.pl-coa.pl-coa--v2 .pl-coa-product__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pl-coa.pl-coa--v2 .pl-coa-product__ph {
	display: grid;
	place-items: center;
	color: var(--pl-blue, #004EFF);
	opacity: .7;
}
.pl-coa.pl-coa--v2 .pl-coa-product__title {
	display: inline-block;
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-weight: 700;
	font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
	line-height: 1.25;
	color: var(--pl-navy, #07182D);
	text-decoration: none;
}
.pl-coa.pl-coa--v2 .pl-coa-product__title:hover {
	color: var(--pl-blue-600, #0039CC);
}
.pl-coa.pl-coa--v2 .pl-coa-product__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 6px 0 0;
	font-size: .84rem;
	color: var(--pl-muted, #42526A);
}
.pl-coa.pl-coa--v2 .pl-coa-product__count {
	font-weight: 600;
	color: var(--pl-navy, #07182D);
}
.pl-coa.pl-coa--v2 .pl-coa-product__lab,
.pl-coa.pl-coa--v2 .pl-coa-product__date {
	position: relative;
	padding-left: 14px;
}
.pl-coa.pl-coa--v2 .pl-coa-product__lab::before,
.pl-coa.pl-coa--v2 .pl-coa-product__date::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--pl-icy-200, #CBDDFF);
}
.pl-coa.pl-coa--v2 .pl-coa-product__date {
	font-family: var(--pl-mono, ui-monospace, monospace);
	font-size: .78rem;
	color: var(--pl-muted, #42526A);
}
.pl-coa.pl-coa--v2 .pl-coa-product__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--pl-field-border, #6E8098);
	border-radius: var(--pl-radius-pill, 999px);
	background: var(--pl-surface, #fff);
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-weight: 600;
	font-size: .92rem;
	color: var(--pl-navy, #07182D);
	cursor: pointer;
	transition: background var(--pl-dur, .2s) var(--pl-ease, ease), border-color var(--pl-dur, .2s) var(--pl-ease, ease);
}
.pl-coa.pl-coa--v2 .pl-coa-product__toggle:hover {
	background: var(--pl-blue-050, #EAF0FF);
	border-color: var(--pl-blue, #004EFF);
}
.pl-coa.pl-coa--v2 .pl-coa-product__chev {
	transition: transform var(--pl-dur, .2s) var(--pl-ease, ease);
}
.pl-coa.pl-coa--v2 .pl-coa-product__toggle[aria-expanded="true"] .pl-coa-product__chev {
	transform: rotate(180deg);
}
.pl-coa.pl-coa--v2 .pl-coa-product__panel {
	border-top: 1px solid var(--pl-line, #DCE6F2);
	padding: 4px clamp(14px, 1.6vw, 20px) clamp(10px, 1.4vw, 16px);
	background: var(--pl-surface-2, #F6F9FD);
}

/* ---- Certificate record — a clean, scannable spec line ------------------- */
.pl-coa.pl-coa--v2 .pl-coa-record {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--pl-line, #DCE6F2);
}
.pl-coa.pl-coa--v2 .pl-coa-record:last-child {
	border-bottom: 0;
}
.pl-coa.pl-coa--v2 .pl-coa-record__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.pl-coa.pl-coa--v2 .pl-coa-record__f {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.pl-coa.pl-coa--v2 .pl-coa-record__f dt {
	margin: 0;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pl-muted, #42526A);
}
.pl-coa.pl-coa--v2 .pl-coa-record__f dd {
	margin: 0;
	font-size: .95rem;
	line-height: 1.35;
	color: var(--pl-navy, #07182D);
}
.pl-coa.pl-coa--v2 .pl-coa-record__v--mono {
	font-family: var(--pl-mono, ui-monospace, monospace);
	font-size: .9rem;
	letter-spacing: .01em;
}
.pl-coa.pl-coa--v2 .pl-coa-record__action {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--pl-radius-pill, 999px);
	background: var(--pl-blue, #004EFF);
	color: #fff;
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
	transition: background var(--pl-dur, .2s) var(--pl-ease, ease);
}
.pl-coa.pl-coa--v2 .pl-coa-record__action:hover {
	background: var(--pl-blue-600, #0039CC);
}
.pl-coa.pl-coa--v2 .pl-coa-record__action svg {
	transition: transform var(--pl-dur, .2s) var(--pl-ease, ease);
}
.pl-coa.pl-coa--v2 .pl-coa-record__action:hover svg {
	transform: translateX(2px);
}
.pl-coa.pl-coa--v2 .pl-coa-record__extnote {
	flex: 1 0 100%;
	margin: 0;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--pl-muted, #42526A);
}

/* ==========================================================================
   4. EMPTY STATES + PAGINATION
   ========================================================================== */
.pl-coa.pl-coa--v2 .pl-coa-empty {
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 10px;
	padding: clamp(48px, 8vw, 96px) 20px;
	background: var(--pl-surface-2, #F6F9FD);
	border: 1px solid var(--pl-line, #DCE6F2);
	border-radius: var(--pl-radius-lg, 18px);
}
.pl-coa.pl-coa--v2 .pl-coa-empty__icon {
	color: var(--pl-icy-200, #CBDDFF);
}
.pl-coa.pl-coa--v2 .pl-coa-empty__text {
	margin: 0;
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--pl-navy, #07182D);
}
.pl-coa.pl-coa--v2 .pl-coa-empty__sub {
	margin: 0;
	max-width: 46ch;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--pl-muted, #42526A);
}
.pl-coa.pl-coa--v2 .pl-coa-empty .pl-btn {
	margin-top: 8px;
}
.pl-coa.pl-coa--v2 .pl-coa-pager {
	margin-top: 28px;
}
.pl-coa.pl-coa--v2 .pl-coa-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pl-coa.pl-coa--v2 .pl-coa-pager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--pl-line, #DCE6F2);
	border-radius: var(--pl-radius, 12px);
	background: var(--pl-surface, #fff);
	color: var(--pl-navy, #07182D);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--pl-dur, .2s) var(--pl-ease, ease), background var(--pl-dur, .2s) var(--pl-ease, ease);
}
.pl-coa.pl-coa--v2 a.pl-coa-pager__link:hover {
	border-color: var(--pl-blue, #004EFF);
	background: var(--pl-blue-050, #EAF0FF);
}
.pl-coa.pl-coa--v2 .pl-coa-pager__link.is-current {
	background: var(--pl-blue, #004EFF);
	border-color: var(--pl-blue, #004EFF);
	color: #fff;
}

/* ==========================================================================
   5. TESTING PIPELINE (transparency — text + dot status, never colour-alone)
   ========================================================================== */
.pl-coa.pl-coa--v2 .pl-coa-testing {
	padding: clamp(32px, 5vw, 60px) 0 0;
}
.pl-coa.pl-coa--v2 .pl-coa-testing__head {
	margin-bottom: 20px;
}
.pl-coa.pl-coa--v2 .pl-coa-testing__title {
	margin: 0 0 6px;
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-weight: 800;
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
	color: var(--pl-navy, #07182D);
}
.pl-coa.pl-coa--v2 .pl-coa-testing__sub {
	margin: 0;
	font-size: .95rem;
	color: var(--pl-muted, #42526A);
}
.pl-coa.pl-coa--v2 .pl-coa-testing__grid {
	display: grid;
	/* Wide enough that the connected status/notify capsule (DOCUMENTATION PENDING + Notify me,
	   ~296px) fits under the name without crushing the action segment: 2–3 columns on desktop,
	   1 column on tablet/mobile. */
	grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
	gap: 14px;
}
.pl-coa.pl-coa--v2 .pl-coa-tcard {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 12px 14px 12px 16px;
	background: linear-gradient(180deg, #fff 0%, var(--pl-surface-2, #F6F9FD) 100%);
	border: 1px solid var(--pl-line, #DCE6F2);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(7, 24, 45, .04);
	overflow: hidden;
}
/* DR-COA-TESTING-CARD-002 (owner 2026-08-19): tighter/cleaner card, brand-cobalt status pill,
   and an edge-to-edge product thumbnail. The left accent bar carries the cobalt brand structure. */
.pl-coa.pl-coa--v2 .pl-coa-tcard::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--pl-blue, #004EFF);
	opacity: .6;
}
.pl-coa.pl-coa--v2 .pl-coa-tcard__media {
	flex: none;
	display: grid;
	place-items: center;                /* still centers the no-image placeholder svg */
	width: 48px;
	height: 48px;
	border-radius: 11px;
	background: var(--pl-ice, #EAF3FF);
	overflow: hidden;
}
/* Edge-to-edge thumbnail — the product image (square, light-field) fills the rounded frame
   with no inset padding/border, so it reads as a clean thumbnail, not a boxed square. */
.pl-coa.pl-coa--v2 .pl-coa-tcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pl-coa.pl-coa--v2 .pl-coa-tcard__ph {
	color: var(--pl-blue, #004EFF);
	opacity: .6;
}
.pl-coa.pl-coa--v2 .pl-coa-tcard__body {
	flex: 1 1 auto;
	min-width: 0;
}
.pl-coa.pl-coa--v2 .pl-coa-tcard__title {
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-weight: 700;
	font-size: .95rem;
	color: var(--pl-navy, #07182D);
	text-decoration: none;
}
.pl-coa.pl-coa--v2 .pl-coa-tcard__title:hover {
	color: var(--pl-blue-600, #0039CC);
}
.pl-coa.pl-coa--v2 .pl-coa-tcard__variation {
	margin: 1px 0 6px;
	font-size: .8rem;
	color: var(--pl-muted, #42526A);
}
.pl-coa.pl-coa--v2 .pl-coa-tcard__statusline {
	margin: 0 0 8px;
}
.pl-coa.pl-coa--v2 .pl-coa-tstatus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--pl-radius-pill, 999px);
	font-family: var(--pl-mono, ui-monospace, monospace);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.pl-coa.pl-coa--v2 .pl-coa-tstatus__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
/* Route-scoped AA correction (DR-COA-REF-001): the shared --pl-pending token (#A66A08) on
   --pl-pending-bg measures 4.05:1 for this small chip text (below AA 4.5:1). Darken ONLY
   this COA "Testing in progress" chip foreground to a deeper amber (#7A4E06 = 6.51:1 on
   the unchanged soft bg), preserving the amber pending semantic + the text+dot pattern
   (.pl-coa-tstatus__dot uses currentColor, so it darkens in lockstep). This is NOT a global
   token change — badges.php and every other --pl-pending consumer are untouched. */
.pl-coa.pl-coa--v2 .pl-coa-tstatus--in_testing {
	color: #7A4E06;
	background: var(--pl-pending-bg, #FFF3D2);
	border: 1px solid rgba(122, 78, 6, .22);
}
/* D-06 (rc.6.53) — status hierarchy rebalanced (supersedes the 2026-08-19 solid-cobalt scheduled
   pill). "Scheduled for testing" is now the informational / neutral tier: navy text on the ice
   surface with a hairline border. It reads quieter than the solid-cobalt "Documentation Available"
   (strongest) and the amber "Testing in progress" (active), but stronger than the grey
   "Documentation Pending" (quietest). Navy on #EAF3FF is high-contrast (AA-pass); the ::__dot uses
   currentColor so it stays navy in lockstep. No green, no PASS/success semantics. */
.pl-coa.pl-coa--v2 .pl-coa-tstatus--scheduled {
	color: var(--pl-navy, #07182D);
	background: var(--pl-ice, #EAF3FF);
	border: 1px solid var(--pl-line, #DCE6F2);
}
/* DR-COA-TESTING-CARD-001: compact status-ledger — label/value rows with hairline dividers,
   tighter hierarchy, no dead white space. Real fields only (submitted / est. result / lab). */
.pl-coa.pl-coa--v2 .pl-coa-tcard__meta {
	display: grid;
	gap: 0;
	margin: 2px 0 0;
	border-top: 1px solid var(--pl-line, #DCE6F2);
}
.pl-coa.pl-coa--v2 .pl-coa-tcard__m {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	border-bottom: 1px solid var(--pl-surface-3, #EEF3FA);
}
.pl-coa.pl-coa--v2 .pl-coa-tcard__m:last-child { border-bottom: 0; padding-bottom: 0; }
.pl-coa.pl-coa--v2 .pl-coa-tcard__m dt {
	flex: none;
	font-weight: 600;
	color: var(--pl-muted, #42526A);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .7rem;
}
.pl-coa.pl-coa--v2 .pl-coa-tcard__m dd {
	margin: 0;
	min-width: 0;
	color: var(--pl-navy, #07182D);
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
	font-size: .8rem;
}

/* --------------------------------------------------------------------------
   Documentation-Pending "Notify" action — CONNECTED DUAL-PILL (DR-COA-NOTIFY-001; P1 owner 2026-09-12).
   The DOCUMENTATION PENDING status pill (LEFT segment; its pale-ice fill, dot, text + letter-spacing
   unchanged) and the Notify me / On list action (RIGHT segment) form ONE segmented capsule joined by a
   thin divider, sitting below the product name. The connection is achieved by the group clipping its
   corners + a divider — the pill markup itself is never changed. Opening the <details> drops the email
   form below the capsule. -------------------------------------------------- */
/* Keep the DOCUMENTATION PENDING pill text on a SINGLE line (its original look). */
.pl-coa.pl-coa--v2 .pl-coa-tstatus { white-space: nowrap; }
/* The connected capsule is a compact content-width unit (pill + action), left-aligned under the name —
   not a stretched bar. max-width:100% + the mobile full-row rule below keep it from ever crushing. */
.pl-coa.pl-coa--v2 .pl-coa-notify-group { display: flex; align-items: stretch; width: fit-content; max-width: 100%; min-height: 44px; margin: 6px 0 0; border: 1px solid var(--pl-line, #DCE6F2); border-radius: var(--pl-radius-pill, 999px); background: var(--pl-surface, #fff); overflow: hidden; }
.pl-coa.pl-coa--v2 summary.pl-coa-notify-group { cursor: pointer; list-style: none; }
.pl-coa.pl-coa--v2 summary.pl-coa-notify-group::-webkit-details-marker { display: none; }
.pl-coa.pl-coa--v2 summary.pl-coa-notify-group:focus-visible { outline: 2px solid var(--pl-blue, #004EFF); outline-offset: 2px; }
/* Left segment = the real status pill. Keep its fill/dot/text; drop its own border + radius (the group
   provides them) and add a thin divider on the right. It does not shrink, so the pending text is never
   clipped; the action segment takes the remaining width. */
.pl-coa.pl-coa--v2 .pl-coa-notify-group .pl-coa-tstatus { flex: 0 0 auto; border: 0; border-right: 1px solid var(--pl-line, #DCE6F2); border-radius: 0; }
/* Right action segment (cobalt bell + Notify me) — natural width, never stretched or crushed. */
.pl-coa.pl-coa--v2 .pl-coa-notify__seg { flex: 0 0 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; color: var(--pl-blue, #004EFF); font-family: var(--pl-mono, ui-monospace, monospace); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pl-coa.pl-coa--v2 .pl-coa-notify__ico { flex: none; }
.pl-coa.pl-coa--v2 .pl-coa-notify__segtext { overflow: hidden; text-overflow: ellipsis; }
.pl-coa.pl-coa--v2 .pl-coa-notify__seg--onlist { background: var(--pl-blue, #004EFF); color: #fff; }
.pl-coa.pl-coa--v2 summary.pl-coa-notify-group:hover .pl-coa-notify__seg { background: var(--pl-ice, #EAF3FF); }
@media (prefers-reduced-motion: no-preference) { .pl-coa.pl-coa--v2 .pl-coa-notify__seg { transition: background .15s ease; } }
/* Record-scoped disclosure summary (polarlabs_coa_notify_form) — PDP-reserved, not rendered on the
   /coa list; kept styled so the reserved component is coherent if a later PDP pass wires it in. */
.pl-coa.pl-coa--v2 .pl-coa-notify__cta { list-style: none; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; color: var(--pl-blue, #004EFF); font-weight: 700; }
.pl-coa.pl-coa--v2 .pl-coa-notify__cta::-webkit-details-marker { display: none; }
/* The email form drops below the capsule when the <details> opens. */
.pl-coa.pl-coa--v2 .pl-coa-notify__panel { margin-top: 8px; }
.pl-coa.pl-coa--v2 .pl-coa-notify__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--pl-line, #DCE6F2); border-radius: 12px; background: var(--pl-surface, #fff); }
.pl-coa.pl-coa--v2 .pl-coa-notify__copy { flex: 1 0 100%; margin: 0 0 2px; font-size: .82rem; color: var(--pl-muted, #42526A); }
.pl-coa.pl-coa--v2 .pl-coa-notify__email { flex: 1 1 180px; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--pl-field-border, #C7D6E8); border-radius: 10px; background: var(--pl-surface, #fff); color: var(--pl-navy, #07182D); font-size: 1rem; }
/* Logged-in visitors: the email field is hidden (account email posted server-side); this note replaces it. */
.pl-coa.pl-coa--v2 .pl-coa-notify__acct { flex: 1 1 180px; min-width: 0; margin: 0; align-self: center; font-size: .82rem; color: var(--pl-muted, #42526A); }
.pl-coa.pl-coa--v2 .pl-coa-notify__submit { flex: none; min-height: 44px; }
.pl-coa.pl-coa--v2 .pl-coa-notify__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Narrow mobile: the connected capsule needs the full row width. Restructure the card into a 2-column
   grid ([thumbnail][name] on row 1) and let the capsule — plus the plain statusline / variation / meta —
   span the full width below, so DOCUMENTATION PENDING + Notify me stay side-by-side and readable without
   shrinking the thumbnail. Rows stay content-tight (no tall empty space). */
@media (max-width: 480px) {
	.pl-coa.pl-coa--v2 .pl-coa-tcard { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 6px; }
	.pl-coa.pl-coa--v2 .pl-coa-tcard__media { grid-column: 1; grid-row: 1; }
	.pl-coa.pl-coa--v2 .pl-coa-tcard__body { display: contents; }
	.pl-coa.pl-coa--v2 .pl-coa-tcard__title { grid-column: 2; grid-row: 1; }
	.pl-coa.pl-coa--v2 .pl-coa-tcard__body > .pl-coa-notify,
	.pl-coa.pl-coa--v2 .pl-coa-tcard__body > .pl-coa-notify-group,
	.pl-coa.pl-coa--v2 .pl-coa-tcard__body > .pl-coa-tcard__statusline,
	.pl-coa.pl-coa--v2 .pl-coa-tcard__body > .pl-coa-tcard__variation,
	.pl-coa.pl-coa--v2 .pl-coa-tcard__body > .pl-coa-tcard__meta { grid-column: 1 / -1; margin-top: 0; }
}

/* ==========================================================================
   Verification Center — compact, mobile-first redesign (owner 2026-09-11).
   A shorter, action-focused top (eyebrow / title / helper / search / stats /
   compact testing-status card), a truthful availability chip on published
   rows, and a compact "Record process" list. Presentation only; every
   fail-closed gate + the certificate viewer are unchanged.
   ========================================================================== */
.pl-coa.pl-coa--v2 .pl-coa-vc { padding: clamp(16px, 4vw, 28px) 0 4px; }
.pl-coa.pl-coa--v2 .pl-coa-vc__eyebrow { margin: 0 0 6px; font-family: var(--pl-mono, ui-monospace, monospace); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pl-blue, #004EFF); }
.pl-coa.pl-coa--v2 .pl-coa-vc__title { margin: 0 0 6px; font-family: var(--pl-font-heading, "Manrope", sans-serif); font-weight: 800; font-size: clamp(1.7rem, 6vw, 2.35rem); line-height: 1.06; color: var(--pl-navy, #07182D); }
.pl-coa.pl-coa--v2 .pl-coa-vc__helper { margin: 0 0 16px; font-size: 1rem; line-height: 1.5; color: var(--pl-muted, #42526A); max-width: 46ch; }
.pl-coa.pl-coa--v2 .pl-coa-vc .pl-coa-herosearch { margin: 0; }
.pl-coa.pl-coa--v2 .pl-coa-vc__stats { margin: 12px 0 0; font-family: var(--pl-mono, ui-monospace, monospace); font-size: .8rem; color: var(--pl-muted, #42526A); }

.pl-coa.pl-coa--v2 .pl-coa-status { display: flex; gap: 12px; margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--pl-line, #DCE6F2); border-left: 3px solid var(--pl-blue, #004EFF); border-radius: 12px; background: var(--pl-surface, #fff); box-shadow: 0 1px 2px rgba(7, 24, 45, .04); }
.pl-coa.pl-coa--v2 .pl-coa-status__icon { flex: none; color: var(--pl-blue, #004EFF); margin-top: 1px; }
.pl-coa.pl-coa--v2 .pl-coa-status__body { min-width: 0; }
.pl-coa.pl-coa--v2 .pl-coa-status__title { margin: 0 0 4px; font-size: .98rem; font-weight: 700; color: var(--pl-navy, #07182D); }
.pl-coa.pl-coa--v2 .pl-coa-status__text { margin: 0 0 6px; font-size: .9rem; line-height: 1.5; color: var(--pl-muted, #42526A); }
.pl-coa.pl-coa--v2 .pl-coa-status__highlight { margin: 0 0 8px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--pl-navy, #07182D); }
.pl-coa.pl-coa--v2 .pl-coa-status__more { display: inline-block; font-size: .85rem; font-weight: 700; color: var(--pl-blue, #004EFF); text-decoration: none; }
.pl-coa.pl-coa--v2 .pl-coa-status__more:hover { color: var(--pl-blue-600, #0039CC); }
/* Research Library cross-links (publish-gated). Stack the second hero link under
   "Learn more" instead of running inline; space the section-level pending link. */
.pl-coa.pl-coa--v2 .pl-coa-status__more--reslib { display: block; margin-top: 8px; }
.pl-coa.pl-coa--v2 .pl-coa-pending-learn { margin-top: 16px; }

.pl-coa.pl-coa--v2 .pl-coa-product__avail { display: inline-flex; align-self: start; width: -moz-fit-content; width: fit-content; max-width: 100%; align-items: center; gap: 6px; margin: 2px 0 4px; padding: 3px 10px; border-radius: var(--pl-radius-pill, 999px); background: var(--pl-ice, #EAF3FF); color: var(--pl-blue-600, #0039CC); border: 1px solid var(--pl-line, #DCE6F2); font-family: var(--pl-mono, ui-monospace, monospace); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pl-coa.pl-coa--v2 .pl-coa-product__availdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.pl-coa.pl-coa--v2 .pl-coa-process--compact { padding: clamp(20px, 4vw, 32px) 0; }
.pl-coa.pl-coa--v2 .pl-coa-process--compact .pl-coa-process__title { margin: 0 0 14px; font-size: 1.15rem; font-weight: 800; color: var(--pl-navy, #07182D); }
.pl-coa.pl-coa--v2 .pl-coa-proclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pl-coa.pl-coa--v2 .pl-coa-procstep { display: flex; gap: 12px; align-items: flex-start; }
.pl-coa.pl-coa--v2 .pl-coa-procstep__n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pl-blue, #004EFF); color: #fff; font-weight: 700; font-size: .85rem; }
.pl-coa.pl-coa--v2 .pl-coa-procstep__body { min-width: 0; }
.pl-coa.pl-coa--v2 .pl-coa-procstep__t { margin: 2px 0 2px; font-size: .98rem; font-weight: 700; color: var(--pl-navy, #07182D); }
.pl-coa.pl-coa--v2 .pl-coa-procstep__d { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--pl-muted, #42526A); }

/* ==========================================================================
   5b. "WHERE OUR TESTING STANDS" — transparency note (rc.6.51 / DR-COA-STATUS-001)
   Fixed transparency copy + an evidence-driven status legend. Neutral, clinical;
   no green, no PASS/verified semantics. Every status is a text label + a
   currentColor dot (never colour-alone), matching the pipeline chip pattern.
   ========================================================================== */
.pl-coa.pl-coa--v2 .pl-coa-note {
	padding: clamp(12px, 2vw, 20px) 0 0;
}
/* rc.6.54 (DR-COA-COMPACT-DISCLOSURE-001) — a tighter editorial disclosure, NOT a giant card. Reduced
   padding, smaller radius, subtle ice ground, and one restrained cobalt top rule as the accent. The
   four-status explanatory legend was removed; the per-record status chips elsewhere are unchanged. */
.pl-coa.pl-coa--v2 .pl-coa-note__inner {
	padding: clamp(13px, 2vw, 18px) clamp(18px, 3vw, 24px);
	background: var(--pl-icy, #F4F8FF);
	border: 1px solid var(--pl-line, #DCE6F2);
	border-top: 2px solid var(--pl-blue, #004EFF);
	border-radius: 12px;
}
.pl-coa.pl-coa--v2 .pl-coa-note__lead {
	margin-bottom: 10px;
}
.pl-coa.pl-coa--v2 .pl-coa-note__eyebrow {
	margin: 0 0 4px;
	font-family: var(--pl-mono, ui-monospace, monospace);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pl-blue-600, #0039CC);
}
.pl-coa.pl-coa--v2 .pl-coa-note__title {
	margin: 0;
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-weight: 800;
	font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--pl-navy, #07182D);
}
.pl-coa.pl-coa--v2 .pl-coa-note__body {
	display: grid;
	gap: 10px;
	max-width: 56ch;
}
.pl-coa.pl-coa--v2 .pl-coa-note__body p {
	margin: 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--pl-muted, #42526A);
}
/* The one restrained principle: a thin cobalt vertical rule + small uppercase/semibold navy text.
   Not a pill, not a card, no green/PASS semantics. */
.pl-coa.pl-coa--v2 .pl-coa-note__highlight {
	padding-left: 12px;
	border-left: 3px solid var(--pl-blue, #004EFF);
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--pl-navy, #07182D);
}
/* Evidence-driven status variants shared by the legend + the "Documentation pending" cards.
   --available: cobalt on ice (positive but NOT green). --pending: neutral slate on soft grey
   (the fail-closed default). --in_testing (amber) and --scheduled (cobalt) are defined above. */
/* D-06 (rc.6.53) — "Documentation Available" is the STRONGEST documentation state: the solid
   PolarLabs cobalt fill with white text (the boldest chip). It is brand cobalt, NOT green, with NO
   checkmark / success iconography, so it never reads as a PASS or "verified" badge; the emphasis
   comes from weight + fill only. White on the #0A57FF->#0039CC gradient is AA-pass; the ::__dot is
   white via currentColor. */
.pl-coa.pl-coa--v2 .pl-coa-tstatus--available {
	color: #fff;
	background: linear-gradient(180deg, #0A57FF 0%, var(--pl-blue-600, #0039CC) 100%);
	border: 1px solid var(--pl-blue-600, #0039CC);
}
.pl-coa.pl-coa--v2 .pl-coa-tstatus--pending {
	color: var(--pl-muted, #42526A);
	background: var(--pl-surface-3, #EEF3FA);
	border: 1px solid var(--pl-line, #DCE6F2);
}
/* The "Documentation pending" section reuses the pipeline card, but pending is the neutral
   default state, so its left accent bar is muted to a hairline grey (scoped to the pending
   section only — the in-testing/scheduled cards keep the cobalt brand bar). */
.pl-coa.pl-coa--v2 .pl-coa-testing--pending .pl-coa-tcard::before {
	background: var(--pl-line, #DCE6F2);
	opacity: 1;
}
.pl-coa.pl-coa--v2 .pl-coa-testing--pending .pl-coa-tcard__ph {
	color: var(--pl-muted, #42526A);
	opacity: .5;
}

/* ==========================================================================
   6. "OUR STANDARD" — publication process with atmospheric artwork, text-safe.
   ========================================================================== */
.pl-coa.pl-coa--v2 .pl-coa-standard {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: clamp(40px, 6vw, 76px);
	background: var(--pl-icy, #F4F8FF);
	border-top: 1px solid var(--pl-line, #DCE6F2);
}
.pl-coa.pl-coa--v2 .pl-coa-standard__art {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(90deg, rgba(244, 248, 255, .97) 0%, rgba(244, 248, 255, .90) 44%, rgba(244, 248, 255, .35) 70%, rgba(244, 248, 255, .2) 100%),
		url("../images/coa/coa-atmosphere.jpg");
	background-repeat: no-repeat, no-repeat;
	background-position: center, right bottom;
	background-size: cover, cover;
	opacity: .9;
}
.pl-coa.pl-coa--v2 .pl-coa-standard__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(44px, 6vw, 84px);
}
.pl-coa.pl-coa--v2 .pl-coa-standard__lead {
	max-width: 560px;
	margin-bottom: clamp(26px, 3vw, 40px);
}
.pl-coa.pl-coa--v2 .pl-coa-process__eyebrow {
	margin: 0 0 12px;
	font-family: var(--pl-mono, ui-monospace, monospace);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pl-blue-600, #0039CC);
}
.pl-coa.pl-coa--v2 .pl-coa-process__title {
	margin: 0 0 14px;
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-weight: 800;
	letter-spacing: -.015em;
	font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
	color: var(--pl-navy, #07182D);
}
.pl-coa.pl-coa--v2 .pl-coa-standard__intro {
	margin: 0;
	max-width: 52ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--pl-muted, #42526A);
}
.pl-coa.pl-coa--v2 .pl-coa-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pl-coa.pl-coa--v2 .pl-coa-step {
	padding: clamp(20px, 2vw, 26px);
	background: rgba(255, 255, 255, .86);
	backdrop-filter: blur(2px);
	border: 1px solid var(--pl-line, #DCE6F2);
	border-radius: var(--pl-radius-lg, 18px);
}
.pl-coa.pl-coa--v2 .pl-coa-step__n {
	display: inline-block;
	margin-bottom: 10px;
	font-family: var(--pl-mono, ui-monospace, monospace);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pl-blue-600, #0039CC);
}
.pl-coa.pl-coa--v2 .pl-coa-step__t {
	margin: 0 0 8px;
	font-family: var(--pl-font-heading, "Manrope", sans-serif);
	font-weight: 700;
	font-size: 1.12rem;
	color: var(--pl-navy, #07182D);
}
.pl-coa.pl-coa--v2 .pl-coa-step__d {
	margin: 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--pl-muted, #42526A);
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	.pl-coa.pl-coa--v2 .pl-coa-steps {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 820px) {
	/* Hero: text on a calm icy field. The decorative art (and its reserved bottom band) is removed,
	   so the phone hero is compact and the product directory rises. */
	.pl-coa.pl-coa--v2 .pl-coa-hero__content {
		max-width: none;
	}
	.pl-coa.pl-coa--v2 .pl-coa-standard__art {
		background-image:
			linear-gradient(180deg, rgba(244, 248, 255, .96) 0%, rgba(244, 248, 255, .9) 55%, rgba(244, 248, 255, .5) 100%),
			url("../images/coa/coa-atmosphere-mobile.jpg");
		background-position: center, center bottom;
		background-size: cover, cover;
	}
	.pl-coa.pl-coa--v2 .pl-coa-record {
		flex-direction: column;
		align-items: stretch;
	}
	.pl-coa.pl-coa--v2 .pl-coa-record__action {
		align-self: flex-start;
	}
}

@media (max-width: 640px) {
	/* Compact hero field on the narrow full-width hero: smaller grid cell + tighter mask so the
	   motif hugs the top-right corner and never reaches the copy; lower cobalt wash. */
	.pl-coa.pl-coa--v2 .pl-coa-hero::before {
		background-size: 40px 40px;
		-webkit-mask-image: radial-gradient(120% 90% at 92% -8%, #000 0%, transparent 52%);
		        mask-image: radial-gradient(120% 90% at 92% -8%, #000 0%, transparent 52%);
	}
	.pl-coa.pl-coa--v2 .pl-coa-hero::after {
		background: radial-gradient(70% 60% at 96% -14%, rgba(0, 78, 255, .06) 0%, rgba(0, 78, 255, 0) 60%);
	}
	/* Product header — adopt the proven owner-tuned mobile grid (DR-COA-007/008):
	   media spans both rows (left), title top, chevron-only toggle top-right, meta
	   spans the full width below. This MUST be re-specified under .pl-coa--v2 because
	   our desktop header grid out-specifies the base mobile grid; base flattens
	   __identity with display:contents, so title/meta need real grid areas here or
	   they collide. */
	.pl-coa.pl-coa--v2 .pl-coa-product__header {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "media title toggle" "media avail avail" "media meta meta";
		column-gap: 12px;
		row-gap: 3px;
		align-items: start;
		padding: 12px;
	}
	.pl-coa.pl-coa--v2 .pl-coa-product__identity {
		display: contents;
	}
	/* DR-COA-VC-REDESIGN-001: with the identity display:contents on mobile, the availability chip is a
	   direct grid child — give it its own area so it never becomes an unplaced item that squeezes the row. */
	.pl-coa.pl-coa--v2 .pl-coa-product__avail {
		grid-area: avail;
		align-self: start;
		justify-self: start;
	}
	.pl-coa.pl-coa--v2 .pl-coa-product__media {
		grid-area: media;
		width: 56px;
		height: 56px;
		align-self: start;
	}
	.pl-coa.pl-coa--v2 .pl-coa-product__title {
		grid-area: title;
		align-self: center;
	}
	.pl-coa.pl-coa--v2 .pl-coa-product__meta {
		grid-area: meta;
		margin-top: 0;
	}
	.pl-coa.pl-coa--v2 .pl-coa-product__toggle {
		grid-area: toggle;
		align-self: start;
		width: auto;
		min-width: 44px;
		padding: 12px;
		gap: 0;
	}
	.pl-coa.pl-coa--v2 .pl-coa-product__toggletext {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.pl-coa.pl-coa--v2 .pl-coa-record__facts {
		gap: 10px 20px;
	}
	.pl-coa.pl-coa--v2 .pl-coa-record__action {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 400px) {
	.pl-coa.pl-coa--v2 .pl-coa-herosearch {
		flex-wrap: wrap;
		border-radius: var(--pl-radius-lg, 18px);
		padding: 10px 10px 10px 42px;
	}
	.pl-coa.pl-coa--v2 .pl-coa-herosearch__submit {
		width: 100%;
	}
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.pl-coa.pl-coa--v2 .pl-coa-product,
	.pl-coa.pl-coa--v2 .pl-coa-product__chev,
	.pl-coa.pl-coa--v2 .pl-coa-product__toggle,
	.pl-coa.pl-coa--v2 .pl-coa-record__action,
	.pl-coa.pl-coa--v2 .pl-coa-record__action svg {
		transition: none;
	}
}