/**
 * Apex Shop Quick Add 1.1.7 — selectors prefixed .apex-qa / .apex-modal / .apx-lock
 * (RUCSS include substrings: ".apex-qa", ".apex-modal", "#apex-modal-root", ".apx-lock").
 */

.apex-qa-row, .apex-qa-coa-badge, #apex-modal-root {
	--apx-accent: var(--ast-global-color-0, #0067FF);
	--apx-action: var(--ast-global-color-1, #005EE9);
	--apx-ink: var(--ast-global-color-2, #0F172A);
	--apx-body: var(--ast-global-color-3, #364151);
	--apx-icetint: var(--ast-global-color-4, #E7F6FF);
	--apx-border: var(--ast-global-color-6, #D1DAE5);
	--apx-teal: #126d8d;
	--apx-muted: #587183;
	--apx-hint: #475569;
	--apx-glass: rgba(126, 172, 190, .28);
	font-family: 'Inter', sans-serif;
}

/* ================= archive card row =================
   Specificity (0,6,3) deliberately exceeds snippet 90's (0,5,3) !important
   rules that force the loop button to width:100%/margin-top:16px. */
body.woocommerce ul.products li.product .astra-shop-summary-wrap .apex-qa-row {
	display: flex !important; gap: 8px; margin-top: 10px; height: 38px; width: 100%;
}
body.woocommerce ul.products li.product .astra-shop-summary-wrap .apex-qa-row .add_to_cart_button,
body.woocommerce ul.products li.product .astra-shop-summary-wrap .apex-qa-row a.button {
	flex: 1 1 auto !important; width: auto !important; height: 38px !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 12px !important; border-radius: 4px !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	background: var(--apx-action, #005EE9) !important; border: 1px solid var(--apx-action, #005EE9) !important;
	color: #fff !important; font-size: 11.5px !important; font-weight: 700 !important;
	text-transform: uppercase !important; letter-spacing: 1.5px !important; line-height: 1 !important;
	box-shadow: none !important; transition: background .2s ease, color .2s ease !important;
}
body.woocommerce ul.products li.product .astra-shop-summary-wrap .apex-qa-row .add_to_cart_button:hover,
body.woocommerce ul.products li.product .astra-shop-summary-wrap .apex-qa-row .add_to_cart_button:focus-visible {
	background: #fff !important; color: var(--apx-action, #005EE9) !important;
}
/* ================= COA certification seal on the vial (1.1.2) =================
   Light-green seal (shield-check + batch purity + hairline rule + "View COA"), bottom-centre INSIDE
   Astra's thumbnail wrap but low enough to sit on the vial's clear glass base, clear of the label's
   fine print. Near-opaque fill so the hex label never mottles the digits. Always visible — touch
   devices have no hover. Selector specificity (0,4,3) beats the theme's card rules. */
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { position: relative; }
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-wrap {
	position: absolute; left: 0; right: 0; bottom: 4px; z-index: 3;
	display: flex; justify-content: center; pointer-events: none;
}
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge {
	--apx-seal-fill: rgba(232, 247, 238, .96); --apx-seal-line: rgba(22, 101, 52, .34);
	--apx-seal-ink: #14532D; --apx-seal-verb: #1F6B45; --apx-seal-icon: #15803D;
	position: relative; pointer-events: auto;
	display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px;
	box-sizing: border-box; border-radius: 999px; max-width: calc(100% - 16px);
	background: var(--apx-seal-fill); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border: 1px solid var(--apx-seal-line);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 3px 8px rgba(15, 23, 42, .06);
	color: var(--apx-seal-verb); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; line-height: 1;
	transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* invisible hit extension: ~42px tall target without covering more of the vial */
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge::before { content: ''; position: absolute; inset: -6px -4px; }
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge .apex-qa-coa-badge__icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--apx-seal-icon); }
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge .apex-qa-coa-badge__pct { flex: 0 0 auto; font-weight: 700; color: var(--apx-seal-ink); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
/* 1.1.3: a clamped pill can never paint text past its rounded edge */
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge .apex-qa-coa-badge__text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge .apex-qa-coa-badge__sep { flex: 0 0 auto; width: 1px; height: 12px; margin: 0 1px; background: rgba(22, 101, 52, .28); }
@media (hover: hover) {
	body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge:hover {
		background: #D7F0E1; border-color: rgba(22, 101, 52, .55); transform: translateY(-1px);
		box-shadow: 0 2px 4px rgba(15, 23, 42, .12), 0 6px 14px rgba(20, 83, 45, .14); color: var(--apx-seal-ink);
	}
}
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge:focus-visible {
	background: #D7F0E1; border-color: rgba(22, 101, 52, .55); color: var(--apx-seal-ink);
	outline: 2px solid var(--apx-action, #005EE9); outline-offset: 2px;
}
/* 1.1.3: plain :focus (focus restored by script after a tap/click) paints nothing — Astra ships a:focus{outline:thin dotted} */
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge:focus:not(:focus-visible) { outline: 0; }
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge:active { transform: translateY(0) scale(.98); }
.apex-qa-coa-badge__icon { flex: 0 0 auto; }
/* 1.1.1 (CARD-01): sold-out cards — Astra's full-width "Out of stock" band shares the bottom edge with the
   badge; make it a compact ink pill at the top of the vial instead (specificity 0,5,3 beats the theme's 0,3,3). */
body.woocommerce ul.products li.product.outofstock .astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock {
	top: 12px; bottom: auto; left: 50%; right: auto; width: auto; transform: translateX(-50%); pointer-events: none;
	display: inline-flex; align-items: center; height: 30px; padding: 0 12px; box-sizing: border-box;
	border-radius: 999px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border: 1px solid rgba(15, 23, 42, .14); box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 3px 8px rgba(15, 23, 42, .06);
	color: #334155; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
	letter-spacing: .06em; line-height: 1; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 480px) {
	body.woocommerce ul.products li.product.outofstock .astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock { top: 10px; height: 26px; padding: 0 10px; font-size: 10.5px; letter-spacing: .04em; }
}
/* 1.1.7: narrow thumbnails — every width where Astra's grid gives images under ~235px (2/3 columns up to
   768px; the 4-column tablet band 922–1040px). The seal keeps its full "99.49% | VIEW COA" wording (owner's
   call) in a tighter cut and hangs 9px BELOW the image so it never covers the label; the title keeps its gap
   via summary padding. Plain media ranges: FlyingPress's critical-CSS step rewrites @container into @media,
   and a site rule sets overflow:hidden !important on the wrap at equal specificity, hence the html prefix. */
@media (max-width: 768px), (min-width: 922px) and (max-width: 1040px) {
	html body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { overflow: visible !important; }
	body.woocommerce ul.products li.product .astra-shop-summary-wrap { padding-top: 14px; }
	body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-wrap { bottom: -9px; }
	body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge { height: 26px; padding: 0 8px 0 7px; gap: 4px; font-size: 10px; letter-spacing: .03em; max-width: calc(100% + 8px); } /* hangs below the vial, so a few px of overhang on 130px images is invisible */
	body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge .apex-qa-coa-badge__icon { width: 11px; height: 11px; }
	body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge .apex-qa-coa-badge__sep { height: 11px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
	body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge { transition: none; }
	body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge:hover,
	body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge:active { transform: none; }
}

/* ================= shared modal ================= */
html.apx-lock { overflow: hidden; }
#apex-modal-root[hidden] { display: none !important; }
#apex-modal-root .apex-modal__overlay {
	position: fixed; inset: 0; z-index: 99960;
	background: rgba(0, 0, 0, .4);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	opacity: 0; transition: opacity 200ms ease;
}
#apex-modal-root.apex-modal-open .apex-modal__overlay { opacity: 1; }
#apex-modal-root .apex-modal {
	position: fixed; z-index: 99970; background: #fff; color: var(--apx-ink);
	box-shadow: 0 12px 40px rgba(15, 23, 42, .22); outline: none;
	display: flex; flex-direction: column;
	opacity: 0; transition: opacity 160ms ease, transform 160ms ease;
}
/* centered dialog (desktop) → bottom sheet (≤544px) */
#apex-modal-root .apex-modal--center {
	left: 50%; top: 50%; width: min(440px, calc(100vw - 32px)); max-height: 82vh;
	border-radius: 14px; transform: translate(-50%, -50%) scale(.96);
	/* 1.1.2: the shop search bar's Ice-Hex asset at ~70% white overlay (owner-picked strength) */
	background: linear-gradient(rgba(255, 255, 255, .70), rgba(255, 255, 255, .70)), url('https://apexlab.org/wp-content/uploads/2026/06/Ice-Hex-Glass-Surface-1024x576.jpg') center / cover no-repeat #F3F7FB;
	border: 1px solid rgba(126, 172, 190, .4);
}
#apex-modal-root.apex-modal-open .apex-modal--center {
	opacity: 1; transform: translate(-50%, -50%) scale(1);
	transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.apex-modal__handle { display: none; }
@media (max-width: 544px) {
	#apex-modal-root .apex-modal--center {
		left: 0; right: 0; top: auto; bottom: 0; width: 100vw; max-height: 86vh;
		border-radius: 16px 16px 0 0; transform: translateY(100%);
		padding-bottom: max(0px, env(safe-area-inset-bottom));
	}
	#apex-modal-root.apex-modal-open .apex-modal--center {
		transform: translateY(0);
		transition: opacity 120ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
	}
	.apex-modal__handle { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--apx-border); margin: 10px auto 0; }
}
/* COA dialog (desktop) → full-screen (≤768px) */
#apex-modal-root .apex-modal--coa {
	left: 50%; top: 50%; width: min(880px, calc(100vw - 32px)); height: min(740px, 88vh);
	border-radius: 8px; transform: translate(-50%, -50%) scale(.96);
	box-shadow: 0 12px 40px rgba(15, 23, 42, .25);
}
#apex-modal-root.apex-modal-open .apex-modal--coa {
	opacity: 1; transform: translate(-50%, -50%) scale(1);
	transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 768px) {
	#apex-modal-root .apex-modal--coa {
		left: 0; top: 0; width: 100vw; height: 100vh; border-radius: 0; transform: translateY(100%);
	}
	@supports (height: 100dvh) { #apex-modal-root .apex-modal--coa { height: 100dvh; } }
	#apex-modal-root.apex-modal-open .apex-modal--coa {
		transform: translateY(0);
		transition: opacity 120ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
	}
}
.apex-modal__close {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	background: transparent; border: 0; padding: .5em; margin: -.5em -.5em -.5em 0;
	color: var(--apx-ink); cursor: pointer; transition: color .2s ease;
}
.apex-modal__close:hover, .apex-modal__close:focus { color: var(--apx-action); background: transparent; }

/* spinners + loading */
.apex-qa-spinner {
	display: inline-block; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid rgba(18, 109, 141, .25); border-top-color: var(--apx-teal, #126d8d);
	animation: apex-qa-spin 700ms linear infinite; vertical-align: -3px;
}
.apex-qa-spinner--light { width: 14px; height: 14px; border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }
@keyframes apex-qa-spin { to { transform: rotate(360deg); } }
.apex-qa-loading {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 48px 20px; font-size: 12.5px; color: var(--apx-muted);
}

/* ================= quick-add popup ================= */
.apex-qa-pop { display: flex; flex-direction: column; padding: 20px 22px 20px; min-height: 0; overflow: hidden; }
@media (max-width: 544px) { .apex-qa-pop { padding: 8px 16px 18px; } }
.apex-qa-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 0; }
.apex-qa-pop__ident { display: flex; align-items: center; gap: 12px; min-width: 0; }
.apex-qa-pop__thumb {
	flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; border-radius: 12px;
	background: #fff; border: 1px solid var(--apx-glass); box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.apex-qa-pop__titles { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.apex-qa-pop__eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--apx-teal); line-height: 1.2; }
/* 1.1.1: the id selector beats the theme's h2 margin so the head stays 48px and aligns to the thumb */
#apex-modal-root .apex-qa-pop__title, .apex-qa-pop h2.apex-qa-pop__title { margin: 0; padding: 0; font-size: 16px; font-weight: 600; color: var(--apx-ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.apex-qa-pop__label {
	margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid rgba(126, 172, 190, .4);
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--apx-teal); line-height: 1.2;
}
.apex-qa-pop__rows { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: -4px; scrollbar-width: thin; }
/* 1.1.1: when more sizes sit below the fold, fade the bottom edge so the list reads as scrollable (class toggled by JS, removed at the end) */
.apex-qa-pop__rows--more { -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), rgba(0, 0, 0, .12)); mask-image: linear-gradient(#000 calc(100% - 34px), rgba(0, 0, 0, .12)); }
.apex-qa-pop__rows--busy { pointer-events: none; }
.apex-qa-opt {
	display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
	min-height: 52px; padding: 10px 12px 10px 16px; text-align: left;
	background: rgba(255, 255, 255, .95); border: 1px solid rgba(126, 172, 190, .42); border-radius: 10px; color: var(--apx-ink);
	font-family: inherit; letter-spacing: 0; text-transform: none; line-height: 1.2; min-height: 52px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	cursor: pointer; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, background 200ms ease;
}
/* UX-04: pin the colour — Astra's button:hover/:focus would turn the size label blue while the price stays navy */
.apex-qa-opt:hover:not(:disabled) { border-color: var(--apx-action); box-shadow: 0 6px 16px rgba(0, 94, 233, .14); background: #fff; color: var(--apx-ink); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .apex-qa-opt:hover:not(:disabled) { transform: none; } }
.apex-qa-opt:focus-visible { border-color: var(--apx-action); outline: 2px solid var(--apx-action); outline-offset: 2px; background: #fff; color: var(--apx-ink); }
.apex-qa-opt:focus { background: #fff; color: var(--apx-ink); } /* plain :focus (auto-focused first row after a mouse click) must not go Astra-blue */
.apex-qa-opt:disabled:hover { color: var(--apx-ink); }
.apex-qa-opt__size { flex: 1 1 auto; font-size: 13.5px; font-weight: 700; letter-spacing: .3px; }
.apex-qa-opt__price { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--apx-ink); }
.apex-qa-opt__price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.apex-qa-opt__price--oos { font-size: 11px; color: var(--apx-muted); }
.apex-qa-opt__btn {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 999px;
	background: linear-gradient(135deg, #12395c, #0b2740); border: 1px solid #0b2740; color: #fff;
	box-shadow: 0 2px 6px rgba(15, 35, 55, .18);
	transition: background 200ms ease, border-color 200ms ease;
}
.apex-qa-opt:hover:not(:disabled) .apex-qa-opt__btn { background: var(--apx-action); border-color: var(--apx-action); }
.apex-qa-opt--busy { opacity: .7; }
.apex-qa-opt--done { border-color: var(--apx-teal); }
.apex-qa-opt--done .apex-qa-opt__btn { background: var(--apx-teal) !important; border-color: var(--apx-teal) !important; }
.apex-qa-opt--oos { opacity: .45; cursor: default; }
.apex-qa-opt__btn svg { display: block; }
.apex-qa-pop__err {
	margin: 0 0 10px; padding: 10px 14px; border-radius: 4px;
	background: #fdf3f2; border: 1px solid #ecc8c4; color: #7f2d24; font-size: 13px; line-height: 1.45;
}
.apex-qa-pop__trust { margin: 16px 0 0; text-align: center; font-size: 11px; letter-spacing: .2px; color: var(--apx-hint); line-height: 1.35; }
.apex-qa-pop--done { align-items: center; text-align: center; }
.apex-qa-pop--done .apex-qa-pop__head { width: 100%; }
.apex-qa-done {
	display: flex; align-items: center; justify-content: center; width: 64px; height: 64px;
	border-radius: 50%; background: var(--apx-icetint); color: var(--apx-teal); margin: 18px 0 16px;
}
.apex-qa-cta {
	display: inline-block; padding: 12px 24px; border-radius: 4px;
	background: var(--apx-action); border: 1px solid var(--apx-action); color: #fff;
	font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.apex-qa-cta:hover, .apex-qa-cta:focus { background: #fff; color: var(--apx-action); }

/* ================= COA modal ================= */
.apex-qa-coa-modal { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; }
.apex-qa-coa-modal__head {
	display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 20px;
	border-bottom: 1px solid var(--apx-border); flex: 0 0 auto;
}
.apex-qa-coa-modal__titles { min-width: 0; flex: 1 1 auto; }
.apex-qa-coa-modal__eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--apx-teal); }
.apex-qa-coa-modal__name { font-size: 14px; font-weight: 600; color: var(--apx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apex-qa-coa-modal__pill {
	flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
	background: var(--apx-icetint); border: 1px solid rgba(18, 109, 141, .25); color: var(--apx-teal);
	font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
}
@media (max-width: 420px) { .apex-qa-coa-modal__pill { display: none; } }
.apex-qa-coa-modal__body { position: relative; flex: 1 1 auto; min-height: 0; background: #F1F5F9; display: flex; }
.apex-qa-coa-modal__body .apex-qa-loading { position: absolute; inset: 0; margin: auto; height: 60px; }
.apex-qa-coa-modal__frame { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: #F1F5F9; opacity: 0; transition: opacity 200ms ease; }
.apex-qa-coa-modal__frame--ready { opacity: 1; }
.apex-qa-coa-pages {
	flex: 1 1 auto; min-height: 0; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
	touch-action: pan-x pan-y pinch-zoom; padding: 12px; box-sizing: border-box; background: #E9EEF3;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.apex-qa-coa-page { display: block; flex: 0 0 auto; width: 100%; max-width: 100%; height: auto; background: #fff; border-radius: 3px; box-shadow: 0 1px 4px rgba(15, 23, 42, .16); }
.apex-qa-coa-modal__open {
	flex: 0 0 auto; margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
	color: var(--apx-action); text-decoration: none; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(0, 94, 233, .35); white-space: nowrap;
}
.apex-qa-coa-modal__open:hover, .apex-qa-coa-modal__open:focus-visible { background: var(--apx-action); color: #fff; }
.apex-qa-coa-modal__frame[aria-hidden="true"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.apex-qa-coa-modal__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	min-height: 40px; padding: 8px 20px; border-top: 1px solid var(--apx-border);
	background: rgba(250, 253, 253, .9); font-size: 11px; color: var(--apx-hint); flex: 0 0 auto;
}
.apex-qa-coa-modal__meta { font-weight: 500; }
.apex-qa-coa-fallback {
	margin: auto; padding: 32px 24px; max-width: 360px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.apex-qa-coa-fallback__icon { color: var(--apx-teal); margin-bottom: 4px; }
.apex-qa-coa-fallback__name { font-size: 15px; font-weight: 600; color: var(--apx-ink); }
.apex-qa-coa-fallback__meta { font-size: 12px; color: var(--apx-muted); }
.apex-qa-coa-fallback__text { margin: 6px 0 14px; font-size: 13px; color: var(--apx-body); }
.apex-qa-coa-fallback__lib { margin-top: 12px; font-size: 12px; color: var(--apx-action); text-decoration: underline; }

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
	#apex-modal-root .apex-modal { transition: opacity 150ms ease !important; }
	/* QA-2: keep the centering transform — only the scale/slide motion goes */
	#apex-modal-root .apex-modal--center, #apex-modal-root .apex-modal--coa { transform: translate(-50%, -50%) !important; }
	@media (max-width: 544px) { #apex-modal-root .apex-modal--center { transform: translateY(0) !important; } }
	@media (max-width: 768px) { #apex-modal-root .apex-modal--coa { transform: translateY(0) !important; } }
	.apex-qa-spinner { animation-duration: 1.4s; }
}

/* ---- A11Y-05: visible keyboard focus inside the modal + on the card row (Astra ships button:focus{outline:0}) ---- */
#apex-modal-root button:focus-visible, #apex-modal-root a:focus-visible,
body.woocommerce ul.products li.product .astra-shop-summary-wrap .apex-qa-row a:focus-visible {
	outline: 2px solid var(--apx-action); outline-offset: 2px;
}

/* 1.2.0: compact, size-specific two-page report previews. */
#apex-modal-root .apex-qa-coa-modal__head { padding: 12px 18px; gap: 12px; background: #fff; }
#apex-modal-root .apex-qa-coa-modal__name { white-space: normal; overflow: visible; font-size: 17px; line-height: 1.35; color: #10243b; }
#apex-modal-root .apex-qa-coa-modal__eyebrow { font-size: 10px; line-height: 1.4; margin-bottom: 3px; letter-spacing: 1.2px; }
#apex-modal-root .apex-qa-coa-modal__purity { color: #24434d; font-size: 12px; line-height: 1.45; margin-top: 3px; font-variant-numeric: tabular-nums; }
#apex-modal-root .apex-qa-coa-controls { display: flex; flex: 0 0 auto; align-items: end; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #d5dfe6; background: #fff; }
#apex-modal-root .apex-qa-coa-size { flex: 1 1 220px; min-width: 0; margin: 0; display: grid; gap: 4px; color: #243b53; font-size: 12px; line-height: 1.25; }
#apex-modal-root select.apex-qa-coa-size__select { width: 100%; max-width: 100%; min-height: 44px; padding: 8px 30px 8px 10px; border: 1px solid #aabcc9; border-radius: 6px; background-color: #fff; color: #10243b; font: inherit; font-size: 16px; line-height: 1.3; }
#apex-modal-root .apex-qa-coa-page-controls { display: flex; gap: 6px; flex: 1 1 auto; }
#apex-modal-root .apex-qa-coa-page-controls button { flex: 1 1 auto; min-height: 44px; padding: 9px 12px; margin: 0; border: 1px solid #bacbd5; border-radius: 6px; background: #fff; color: #243b53; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; white-space: nowrap; }
#apex-modal-root .apex-qa-coa-page-controls button[aria-pressed=true] { background: #102d46; border-color: #102d46; color: #fff; }
#apex-modal-root .apex-qa-coa-modal__body { display: block; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
#apex-modal-root img.apex-qa-coa-first-page { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; background: #fff; }
#apex-modal-root .apex-qa-coa-preview-caption { padding: 10px 16px; margin: 0; color: #334155; font-size: 12px; line-height: 1.5; }
#apex-modal-root .apex-qa-coa-modal__foot { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 10px 18px; background: #fff; }
#apex-modal-root .apex-qa-coa-modal__meta { flex: 1 1 260px; min-width: 0; color: #334155; font-size: 12px; line-height: 1.45; letter-spacing: 0; }
#apex-modal-root .apex-qa-coa-modal__links { display: flex; gap: 8px; }
#apex-modal-root .apex-qa-coa-modal__open { margin: 0; min-height: 40px; display: inline-flex; align-items: center; font-size: 12px; letter-spacing: .3px; }
#apex-modal-root select:focus-visible { outline: 2px solid #005ee9; outline-offset: 2px; }
@media (max-width: 600px) {
  #apex-modal-root .apex-qa-coa-controls { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  #apex-modal-root .apex-qa-coa-size { flex-basis: 100%; }
  #apex-modal-root .apex-qa-coa-page-controls { width: 100%; }
  #apex-modal-root .apex-qa-coa-modal__head { padding: 10px 12px; }
  #apex-modal-root .apex-qa-coa-modal__name { font-size: 16px; }
  #apex-modal-root .apex-qa-coa-modal__foot { padding: 8px 12px; gap: 3px; }
  #apex-modal-root .apex-qa-coa-modal__meta { flex-basis: 100%; }
  #apex-modal-root .apex-qa-coa-modal__links { width: 100%; justify-content: space-between; }
  body.woocommerce ul.products li.product .apex-qa-coa-badge__pct { font-size: 10px; letter-spacing: 0; }
}

/* 1.2.1: preserve complete recorded purity and the COA action on narrow cards. */
@media (max-width: 544px) {
  body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge .apex-qa-coa-badge__verb { display: none; }
  body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge .apex-qa-coa-badge__text { flex-shrink: 0; overflow: visible; text-overflow: clip; }
}
@media (max-width: 420px) {
  body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge--pct {
    display: inline-grid; grid-template-columns: 11px max-content; grid-template-rows: auto auto;
    column-gap: 6px; row-gap: 2px; justify-content: center; align-content: center;
    height: 40px; padding: 4px 7px; border-radius: 12px; font-size: 11px; line-height: 1.2; letter-spacing: 0;
  }
  body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge--pct .apex-qa-coa-badge__icon { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge--pct .apex-qa-coa-badge__pct { grid-column: 2; grid-row: 1; font-size: 11px; letter-spacing: 0; }
  body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge--pct .apex-qa-coa-badge__text { grid-column: 2; grid-row: 2; justify-self: center; font-size: 11px; line-height: 1.2; }
  body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .apex-qa-coa-badge--pct .apex-qa-coa-badge__sep { display: none; }
}

/* Exact component-minimum explanation; endpoint tables remain in the full report. */
.apex-qa-coa-modal__purity-note{margin:8px 0 0;color:#536477;font-size:13px;line-height:1.45;max-width:64ch}
.apex-qa-coa-modal__purity-note[hidden]{display:none}