/*
 * Brant Bio — component layer.
 *
 * The Industry design system expressed against theme.json's generated
 * custom properties. Every colour, size, space and radius below reads a
 * --wp--preset--* or --wp--custom--* variable; there are no literals, so
 * retuning theme.json retunes this file.
 *
 * Contents
 *   1. Primitives      blueprint frame, registration marks, duotone
 *   2. Type roles      spec/mono, kicker, eyebrow, muted, wordmark
 *   3. Controls        buttons, fields, focus, disabled, error
 *   4. Objects         card, tag, table, dialog
 *   5. Chrome          announcement bar, header, footer
 *   6. Commerce        product spec sheet, RUO notice, COA link,
 *                      shipping meter, attestation, age gate
 */

/* ── 1. Primitives ─────────────────────────────────────────────────── */

.brant-blueprint {
	position: relative;
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--object);
}

/* Halftone/duotone clip their overlay; the frame's marks sit outside the
   box, so when both share a wrapper the frame wins. */
.brant-blueprint.brant-duotone { overflow: visible; }

.brant-blueprint > .corner {
	position: absolute;
	width: var(--wp--custom--corner--size);
	height: var(--wp--custom--corner--size);
	color: var(--wp--custom--corner--ink);
	pointer-events: none;
}
.brant-blueprint > .corner::before,
.brant-blueprint > .corner::after {
	content: "";
	position: absolute;
	background: currentColor;
}
.brant-blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.brant-blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.brant-blueprint > .corner.tl { top: var(--wp--custom--corner--offset); left: var(--wp--custom--corner--offset); }
.brant-blueprint > .corner.tr { top: var(--wp--custom--corner--offset); right: var(--wp--custom--corner--offset); }
.brant-blueprint > .corner.bl { bottom: var(--wp--custom--corner--offset); left: var(--wp--custom--corner--offset); }
.brant-blueprint > .corner.br { bottom: var(--wp--custom--corner--offset); right: var(--wp--custom--corner--offset); }

.brant-duotone { position: relative; overflow: hidden; }
.brant-duotone::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--wp--preset--color--accent);
	mix-blend-mode: color;
}
/* The vial keeps its white — the one object exempt from the duotone. */
.brant-duotone--exempt::after { content: none; }

/* ── 2. Type roles ─────────────────────────────────────────────────── */

.brant-spec {
	font-family: var(--wp--preset--font-family--spec);
	font-variant-numeric: tabular-nums;
}
.brant-kicker {
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-700);
}
.brant-eyebrow {
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--custom--muted);
}
.brant-muted { color: var(--wp--custom--muted); }
.brant-wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wordmark);
	line-height: 1;
}
.brant-wordmark__domain {
	display: block;
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--custom--muted);
}

/* ── 3. Controls ───────────────────────────────────────────────────── */

/* Focus is visible everywhere and is never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
::selection { background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent); }

.brant-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	cursor: pointer;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--custom--control--font-size);
	line-height: 1.2;
	color: var(--wp--preset--color--text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--object);
	padding: var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--30) * 1.2);
}
.brant-btn--primary {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg);
}
.brant-btn--primary:hover  { background: var(--wp--preset--color--accent-600); border-color: var(--wp--preset--color--accent-600); }
.brant-btn--primary:active { background: var(--wp--preset--color--accent-700); border-color: var(--wp--preset--color--accent-700); }
.brant-btn--secondary { border-color: var(--wp--preset--color--divider); }
.brant-btn--secondary:hover  { background: color-mix(in srgb, var(--wp--preset--color--text) 7%, transparent); }
.brant-btn--secondary:active { background: color-mix(in srgb, var(--wp--preset--color--text) 14%, transparent); }
.brant-btn--ghost {
	color: var(--wp--preset--color--accent-700);
	border-color: transparent;
	padding-inline: var(--wp--preset--spacing--10);
}
.brant-btn--ghost:hover  { background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent); }
.brant-btn--ghost:active { background: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent); }
.brant-btn--block { width: 100%; }
.brant-btn[disabled],
.brant-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.brant-field > label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 5px;
	color: color-mix(in srgb, var(--wp--preset--color--text) 70%, transparent);
}
.brant-input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	min-height: var(--wp--custom--control--min-height);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font: inherit;
	font-size: var(--wp--custom--control--font-size);
	color: var(--wp--preset--color--text);
	caret-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--object);
}
.brant-input:hover { border-color: color-mix(in srgb, var(--wp--preset--color--text) 45%, transparent); }
.brant-input:focus-visible { border-color: var(--wp--preset--color--accent); outline-offset: 0; }
.brant-input[aria-invalid="true"],
.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--wp--preset--color--accent-800);
	border-width: 2px;
}
.brant-field__error {
	display: block;
	margin-top: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-800);
}
.brant-input[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── 4. Objects ────────────────────────────────────────────────────── */

.brant-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	background: transparent;
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--object);
}
.brant-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--h5);
	line-height: 1.2;
	margin: 0;
}
.brant-card__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--muted);
	flex: 1;
}
.brant-card__meta {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--custom--muted);
}

.brant-tag {
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--tiny);
	padding: 3px var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--object);
}
.brant-tag--accent  { background: var(--wp--preset--color--accent-100); color: var(--wp--preset--color--accent-800); }
.brant-tag--neutral { background: var(--wp--preset--color--neutral-100); color: var(--wp--preset--color--neutral-800); }
.brant-tag--outline { border: 1px solid var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-700); }
.brant-tag--low     { background: var(--wp--preset--color--accent-900); color: var(--wp--preset--color--bg); font-family: var(--wp--preset--font-family--spec); }

.brant-table { width: 100%; border-collapse: collapse; font-size: var(--wp--custom--control--font-size); }
.brant-table th {
	text-align: left;
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--custom--muted);
	padding: var(--wp--preset--spacing--20);
	border-bottom: var(--wp--custom--rule--hairline);
}
.brant-table td {
	padding: var(--wp--preset--spacing--20);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--text) 8%, transparent);
}
.brant-table tbody tr:hover { background: color-mix(in srgb, var(--wp--preset--color--text) 4%, transparent); }
/* Wide tables scroll in their own box; the page never scrolls sideways. */
.brant-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.brant-dialog-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--50);
	background: color-mix(in srgb, var(--wp--preset--color--neutral-900) 50%, transparent);
}
.brant-dialog {
	width: min(440px, 100%);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--bg);
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--object);
	box-shadow: var(--wp--preset--shadow--lg);
}
.brant-dialog__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--h4);
	margin: 0;
}
.brant-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
}

/* ── 5. Chrome ─────────────────────────────────────────────────────── */

.brant-announce {
	background: var(--wp--preset--color--accent-900);
	color: var(--wp--preset--color--bg);
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
}
.brant-announce__inner {
	max-width: var(--wp--custom--container--page);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--20) var(--wp--custom--container--gutter);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	justify-content: center;
}
.brant-announce a { color: inherit; }

.brant-header__inner {
	max-width: var(--wp--custom--container--page);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--custom--container--gutter);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}
/* The wordmark takes the slack so navigation sits against the right edge. */
.brant-header__inner > :first-child { margin-right: auto; }
.brant-header nav a {
	color: inherit;
	text-decoration: none;
	font-size: var(--wp--custom--control--font-size);
}
.brant-header nav a:hover,
.brant-header nav a[aria-current="page"] { color: var(--wp--preset--color--accent-700); }

.brant-footer {
	border-top: var(--wp--custom--rule--hairline);
	margin-top: var(--wp--preset--spacing--90);
	padding-block: var(--wp--preset--spacing--80);
	font-size: var(--wp--preset--font-size--small);
}
.brant-footer__legal {
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--custom--muted);
	max-width: 68ch;
}

/* ── 6. Commerce ───────────────────────────────────────────────────── */

/* Spec sheet — the identity table above the fold on a product. */
.brant-spec-sheet { width: 100%; border-collapse: collapse; }
.brant-spec-sheet th {
	text-align: left;
	width: 40%;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--muted);
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--text) 8%, transparent);
}
.brant-spec-sheet td {
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--text) 8%, transparent);
}

/*
 * RUO notice. Sits above the add-to-cart control at body-text size — it is
 * a build requirement, not fine print, so it takes the accent frame and is
 * never collapsed, truncated or moved into a tooltip.
 */
.brant-ruo {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--object);
	background: var(--wp--preset--color--accent-100);
	color: var(--wp--preset--color--accent-900);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}
.brant-ruo p { margin: 0; }

/* COA download — a visible, self-describing link, never buried. */
.brant-coa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--object);
}
.brant-coa__meta {
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--custom--muted);
}
.brant-coa__link { font-weight: 500; }

/* Free-shipping progress meter. */
.brant-meter {
	height: 3px;
	background: color-mix(in srgb, var(--wp--preset--color--text) 12%, transparent);
	overflow: hidden;
}
.brant-meter__fill { height: 100%; background: var(--wp--preset--color--accent); }

/*
 * Checkout attestation. Unchecked by default, required, and given a real
 * hit area — the customer must make a deliberate choice.
 */
.brant-attest {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--object);
	background: var(--wp--preset--color--accent-100);
	color: var(--wp--preset--color--accent-900);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	cursor: pointer;
}
.brant-attest input[type="checkbox"] {
	flex: none;
	width: var(--wp--custom--control--hit-area);
	height: var(--wp--custom--control--hit-area);
	margin-top: 2px;
	accent-color: var(--wp--preset--color--accent);
}
.brant-attest--invalid { border-width: 2px; border-color: var(--wp--preset--color--accent-800); }

/* Age gate — full-viewport, blocks the page until answered. */
.brant-agegate {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--accent-900);
	color: var(--wp--preset--color--bg);
}
.brant-agegate__panel {
	width: min(460px, 100%);
	text-align: left;
}
.brant-agegate__panel h1 {
	font-size: var(--wp--preset--font-size--h2);
	color: var(--wp--preset--color--bg);
	margin-block: 0 var(--wp--preset--spacing--40);
}
.brant-agegate__panel p { color: var(--wp--preset--color--bg); }
.brant-agegate__actions {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}
.brant-agegate .brant-btn--primary {
	background: var(--wp--preset--color--bg);
	border-color: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--accent-900);
}
.brant-agegate .brant-btn--secondary {
	color: var(--wp--preset--color--bg);
	border-color: color-mix(in srgb, var(--wp--preset--color--bg) 45%, transparent);
}
.brant-agegate .brant-btn:focus-visible { outline-color: var(--wp--preset--color--bg); }
/* No JS: the gate stays put and the page below is inert. */
html.brant-gated body > :not(.brant-agegate) { display: none; }

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.brant-header__inner { flex-wrap: wrap; gap: var(--wp--preset--spacing--30); }
	.brant-announce__inner { font-size: var(--wp--preset--font-size--micro); gap: var(--wp--preset--spacing--30); }
	.brant-spec-sheet th { width: 45%; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── 7. Catalog ────────────────────────────────────────────────────── */

.brant-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.brant-pcard {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
	color: inherit;
	text-decoration: none;
}
.brant-pcard:hover { background: color-mix(in srgb, var(--wp--preset--color--text) 3%, transparent); }
.brant-pcard:hover .brant-pcard__title { color: var(--wp--preset--color--accent-700); }

/* Fixed aspect box: the card reserves its image space before load, so the
   grid never reflows as vials arrive. */
.brant-pcard__media {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	overflow: hidden;
}
.brant-pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.brant-pcard__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}
.brant-pcard__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--h4);
	line-height: 1.15;
	margin: 0;
}
.brant-pcard__blurb {
	margin: 0;
	flex: 1;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--muted);
}
.brant-pcard__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	align-items: baseline;
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--rule--hairline);
	font-size: var(--wp--preset--font-size--tiny);
}
.brant-pcard__sizes { color: var(--wp--custom--muted); }
.brant-pcard__price { color: var(--wp--preset--color--text); }

/* — filters — */
.brant-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	justify-content: space-between;
	align-items: flex-end;
	margin-block: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: var(--wp--custom--rule--hairline);
}
.brant-filters__chips { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.brant-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--object);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--custom--control--font-size);
	text-decoration: none;
	color: inherit;
}
.brant-chip:hover { background: color-mix(in srgb, var(--wp--preset--color--text) 7%, transparent); }
.brant-chip.is-current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg);
}
.brant-chip__count {
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--micro);
	opacity: 0.7;
}
.brant-filters__search { display: flex; gap: var(--wp--preset--spacing--20); align-items: stretch; }
.brant-filters__search .brant-input { min-width: 220px; }

.brant-pagination {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--70);
}
.brant-pagination__link {
	min-width: 36px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: var(--wp--custom--rule--hairline);
	text-align: center;
	text-decoration: none;
	color: inherit;
	font-family: var(--wp--preset--font-family--spec);
}
.brant-pagination__link.is-current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg);
}

.brant-empty {
	padding: var(--wp--preset--spacing--80) 0;
	color: var(--wp--custom--muted);
}

/* — the QD-100 spec plate — */
.brant-plate { margin-block: var(--wp--preset--spacing--60); }
.brant-plate__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border-bottom: var(--wp--custom--rule--hairline);
	font-size: var(--wp--preset--font-size--tiny);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
}
.brant-plate__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.brant-plate__cell {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-right: var(--wp--custom--rule--hairline);
}
.brant-plate__cell:last-child { border-right: 0; }
.brant-plate__value {
	font-size: var(--wp--preset--font-size--h2);
	line-height: 1;
}
.brant-plate__unit { font-size: var(--wp--preset--font-size--h4); }
.brant-plate__note {
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--custom--muted);
}
.brant-plate__foot {
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--rule--hairline);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--custom--muted);
}

/* — home hero — */
.brant-hero {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--wp--preset--spacing--80);
	align-items: center;
	padding-block: clamp(56px, 8vw, 112px) var(--wp--preset--spacing--80);
}
.brant-hero__lead { max-width: 54ch; font-size: var(--wp--preset--font-size--large); }
.brant-hero__actions { display: flex; gap: var(--wp--preset--spacing--30); flex-wrap: wrap; }
.brant-hero__badges {
	display: flex;
	gap: var(--wp--preset--spacing--60);
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--tiny);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	color: var(--wp--custom--muted);
}
.brant-hero__figure { display: grid; place-items: center; }
.brant-hero__figure img { max-width: 440px; }

/* — steel band (dispatch) — */
.brant-band {
	background: var(--wp--preset--color--accent-900);
	color: var(--wp--preset--color--bg);
	padding-block: var(--wp--preset--spacing--80);
}
.brant-band :where(h1, h2, h3, p) { color: var(--wp--preset--color--bg); }
.brant-band .brant-kicker { color: var(--wp--preset--color--accent-300); }

/* — section header row — */
.brant-sectionhead {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--50);
}

@media (max-width: 900px) {
	.brant-hero { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
	.brant-plate__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.brant-plate__cell:nth-child(2) { border-right: 0; }
}
@media (max-width: 560px) {
	.brant-grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
	.brant-plate__grid { grid-template-columns: 1fr; }
	.brant-plate__cell { border-right: 0; border-bottom: var(--wp--custom--rule--hairline); }
	.brant-plate__cell:last-child { border-bottom: 0; }
	.brant-filters { flex-direction: column; align-items: stretch; }
	.brant-filters__search .brant-input { min-width: 0; flex: 1; }
}

/* ── 8. Forms & content ────────────────────────────────────────────── */

.brant-form,
.brant-subscribe {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	max-width: 34rem;
}
.brant-form .brant-btn,
.brant-subscribe .brant-btn { align-self: flex-start; }
.brant-subscribe__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--custom--muted);
}

/* Honeypot: removed from layout and from the accessibility tree, but not
   display:none — some bots skip hidden fields, and some do not. */
.brant-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* FAQ — native details/summary, no script. */
.wp-block-details {
	border-bottom: var(--wp--custom--rule--hairline);
	padding-block: var(--wp--preset--spacing--40);
}
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--h4);
	list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	float: right;
	font-family: var(--wp--preset--font-family--spec);
	color: var(--wp--preset--color--accent-700);
}
.wp-block-details[open] summary::after { content: "−"; }
.wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Numbered document sections (Shipping, legal). */
.brant-doc__section {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--rule--hairline);
}
.brant-doc__no {
	font-family: var(--wp--preset--font-family--spec);
	color: var(--wp--preset--color--accent-700);
}
.brant-doc__section h2 {
	font-size: var(--wp--preset--font-size--h4);
	margin-top: 0;
}
.brant-doc__section p:last-child { margin-bottom: 0; }

/* Draft banner on documents awaiting counsel review. */
.brant-draft {
	margin-bottom: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40);
	border: 2px solid var(--wp--preset--color--accent-800);
	border-radius: var(--wp--custom--radius--object);
	background: var(--wp--preset--color--accent-100);
	color: var(--wp--preset--color--accent-900);
	font-size: var(--wp--preset--font-size--small);
}
.brant-draft p { margin: 0; }

@media (max-width: 560px) {
	.brant-doc__section { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); }
}

/* ── 9. Consent banner ─────────────────────────────────────────────── */

.brant-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9998;
	background: var(--wp--preset--color--accent-900);
	color: var(--wp--preset--color--bg);
	border-top: 1px solid var(--wp--preset--color--accent-700);
}
.brant-consent__inner {
	max-width: var(--wp--custom--container--page);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--custom--container--gutter);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	justify-content: space-between;
}
.brant-consent__text {
	margin: 0;
	flex: 1 1 30rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--bg);
}
.brant-consent__text a { color: var(--wp--preset--color--accent-300); }
.brant-consent__actions { display: flex; gap: var(--wp--preset--spacing--30); }
.brant-consent .brant-btn--primary {
	background: var(--wp--preset--color--bg);
	border-color: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--accent-900);
}
.brant-consent .brant-btn--secondary {
	color: var(--wp--preset--color--bg);
	border-color: color-mix(in srgb, var(--wp--preset--color--bg) 45%, transparent);
}
.brant-consent .brant-btn:focus-visible { outline-color: var(--wp--preset--color--bg); }

@media (max-width: 560px) {
	.brant-consent__inner { flex-direction: column; align-items: stretch; }
	.brant-consent__actions .brant-btn { flex: 1; }
}

/* ── 10. WooCommerce classic markup ────────────────────────────────── */
/* Woo's shortcode templates emit their own class names; these map them onto
   the blueprint system rather than overriding Woo's stylesheet wholesale. */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--custom--control--font-size);
	line-height: 1.2;
	border-radius: var(--wp--custom--radius--object);
	border: 1px solid var(--wp--preset--color--divider);
	background: transparent;
	color: var(--wp--preset--color--text);
	padding: var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--30) * 1.2);
	text-transform: none;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover { background: color-mix(in srgb, var(--wp--preset--color--text) 7%, transparent); }

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce #place_order,
.woocommerce button.single_add_to_cart_button {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg);
}
.woocommerce .button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce button.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--accent-600);
	border-color: var(--wp--preset--color--accent-600);
	color: var(--wp--preset--color--bg);
}
.woocommerce .button:disabled,
.woocommerce button.button:disabled { opacity: 0.45; cursor: not-allowed; }

/* Tables — cart, order review, account orders. */
.woocommerce table.shop_table,
.woocommerce table.shop_attributes,
.woocommerce-account table.my_account_orders {
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--object);
	border-collapse: collapse;
	font-size: var(--wp--custom--control--font-size);
}
.woocommerce table.shop_table th,
.woocommerce-account table.my_account_orders th {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--custom--muted);
	border-bottom: var(--wp--custom--rule--hairline);
}
.woocommerce table.shop_table td,
.woocommerce-account table.my_account_orders td {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--text) 8%, transparent);
}
.woocommerce table.shop_table .amount,
.woocommerce .order-total .amount,
.woocommerce-Price-amount { font-family: var(--wp--preset--font-family--spec); }

/* Product gallery and summary. */
.woocommerce div.product div.images img { border-radius: var(--wp--custom--radius--object); }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--h4);
	color: var(--wp--preset--color--text);
}
.woocommerce div.product .product_title { font-size: var(--wp--preset--font-size--h1); }
.woocommerce div.product form.cart .variations select { min-height: var(--wp--custom--control--min-height); }
.woocommerce .quantity .qty {
	min-height: var(--wp--custom--control--min-height);
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--object);
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--spec);
}
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	border-radius: var(--wp--custom--radius--object);
	background: var(--wp--preset--color--accent-900);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 0; }

/* Notices — Woo's green/blue defaults replaced with the steel system. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-radius: var(--wp--custom--radius--object);
	border: 1px solid var(--wp--preset--color--accent);
	border-top-width: 1px;
	background: var(--wp--preset--color--accent-100);
	color: var(--wp--preset--color--accent-900);
	font-size: var(--wp--preset--font-size--medium);
}
.woocommerce-error {
	border-color: var(--wp--preset--color--accent-800);
	border-width: 2px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--wp--preset--color--accent-700); }

/* Checkout and account forms. */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-navigation {
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--object);
	padding: var(--wp--preset--spacing--50);
}
.woocommerce-checkout h3,
.woocommerce-account h2,
.woocommerce-billing-fields h3 { font-size: var(--wp--preset--font-size--h4); }
.woocommerce form .form-row label { font-size: var(--wp--preset--font-size--small); color: color-mix(in srgb, var(--wp--preset--color--text) 70%, transparent); }
.woocommerce form .form-row .required { color: var(--wp--preset--color--accent-800); text-decoration: none; }
.woocommerce .select2-container .select2-selection--single {
	min-height: var(--wp--custom--control--min-height);
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--object);
	background: var(--wp--preset--color--surface);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { padding-block: var(--wp--preset--spacing--20); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--wp--preset--color--accent-700); font-weight: 500; }

/* Order confirmation. */
.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--60);
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0;
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--rule--hairline);
}
.woocommerce ul.order_details li {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--tiny);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	color: var(--wp--custom--muted);
}
.woocommerce ul.order_details li strong {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--medium);
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--text);
}

/* Woo's own breadcrumb, restyled rather than replaced. */
.woocommerce .woocommerce-breadcrumb {
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--tiny);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	color: var(--wp--custom--muted);
}
