/*
 * HRD signature styles. Tokens live in theme.json; this file only adds the
 * brand motifs core blocks can't express. Each motif is a block style
 * (is-style-*) or an hrd-* utility class so editors can apply it visually.
 */

/* ---------- Metric-matched fallback for Helvetica Now (theme.json's stack) ----------
   Until the OTFs arrive, text renders in Arial resized to Helvetica Now's widths
   (bold caps ≈ 0.965, regular ≈ 1.05, measured in the browser) with its hhea
   ascent/descent (1.11 / 0.36), so headings wrap the same before and after the
   swap: no layout shift (docs/COLLECTION-PAGES.md, the two-line category titles). */
@font-face {
	font-family: "Helvetica Now Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
	font-weight: 700;
	size-adjust: 96.5%;
	ascent-override: 115%;
	descent-override: 37.3%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Helvetica Now Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
	font-weight: 400;
	size-adjust: 105%;
	ascent-override: 105.7%;
	descent-override: 34.3%;
	line-gap-override: 0%;
}

/* ---------- Micro label: UPPERCASE, tiny, wide tracking ---------- */
.is-style-micro,
.hrd-micro {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--track--micro);
	line-height: 1.2;
}

/* ---------- "Quoted" label. BRAND RULE: straight quotes (U+0022), never curly. ---------- */
.is-style-quoted {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--track--micro);
	line-height: 1.2;
}
.is-style-quoted::before,
.is-style-quoted::after { content: "\0022"; }

/* ---------- Arrow link: LEARN MORE ↗ ---------- */
.is-style-arrow-link a,
a.hrd-arrow-link {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--track--label);
	text-underline-offset: 3px;
}
.is-style-arrow-link a::after,
a.hrd-arrow-link::after {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-left: 0.45em;
	vertical-align: -0.05em;
	background: currentColor;
	-webkit-mask: var(--hrd-arrow-svg) center / contain no-repeat;
	mask: var(--hrd-arrow-svg) center / contain no-repeat;
	transform: rotate(90deg); /* base glyph points up-left; rotate to up-right */
	transition: transform 0.4s var(--wp--custom--ease-out);
}
.is-style-arrow-link a:hover::after,
a.hrd-arrow-link:hover::after { transform: rotate(90deg) translate(-2px, -2px); }

/* ---------- Slashes: the HRD hazard mark ////// ---------- */
.wp-block-separator.is-style-slashes,
.hrd-slashes {
	--hz: 16px;
	width: calc(var(--hz) * 5.3) !important;
	max-width: none;
	height: var(--hz);
	margin-left: 0;
	border: 0 !important;
	opacity: 1;
	background: repeating-linear-gradient(55deg, currentColor 0 calc(var(--hz) * 0.33), transparent calc(var(--hz) * 0.33) calc(var(--hz) * 0.56)) !important;
}
.wp-block-separator.is-style-slashes { color: var(--wp--preset--color--ink); }
.is-style-camo .wp-block-separator.is-style-slashes,
.has-ink-background-color .wp-block-separator.is-style-slashes,
.has-ink-band-background-color .wp-block-separator.is-style-slashes { color: var(--wp--preset--color--sky); }

/* ---------- Corner arrows ↖ ↗ (top) / ↙ ↘ (bottom) ---------- */
:root {
	--hrd-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2h13v4.2H9.2L22 19l-3 3L6.2 9.2V15H2z'/%3E%3C/svg%3E");
	--hrd-arrow-size: clamp(28px, 3vw, 44px);
}
.hrd-corners,
.hrd-corners--bottom { position: relative; }
.hrd-corners::before,
.hrd-corners::after,
.hrd-corners--bottom::before,
.hrd-corners--bottom::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: var(--hrd-arrow-size);
	height: var(--hrd-arrow-size);
	background: var(--wp--preset--color--sky);
	-webkit-mask: var(--hrd-arrow-svg) center / contain no-repeat;
	mask: var(--hrd-arrow-svg) center / contain no-repeat;
	pointer-events: none;
}
.hrd-corners::before { top: var(--wp--preset--spacing--40); left: var(--wp--preset--spacing--40); }
.hrd-corners::after { top: var(--wp--preset--spacing--40); right: var(--wp--preset--spacing--40); transform: rotate(90deg); }
.hrd-corners--bottom::before { bottom: var(--wp--preset--spacing--40); left: var(--wp--preset--spacing--40); transform: rotate(-90deg); }
.hrd-corners--bottom::after { bottom: var(--wp--preset--spacing--40); right: var(--wp--preset--spacing--40); transform: rotate(180deg); }

/* ---------- Knockout: giant headline filled with an image ---------- */
.is-style-knockout {
	--hrd-knockout-image: url("../images/camo-sky.jpg");
	background: var(--hrd-knockout-image) center / cover;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	font-size: var(--wp--preset--font-size--statement);
	line-height: 0.9;
	letter-spacing: -0.06em;
	text-align: center;
}

/* ---------- Surfaces ---------- */
.is-style-tile {
	background: var(--wp--preset--color--paper);
	text-align: center;
}
.is-style-camo {
	/* HRD's camo, vectorised from the master (crisp at any size); own tones */
	background-color: var(--wp--custom--camo--ground);
	background-image: url("../images/camo-hero.svg");
	background-size: cover;
	background-position: center;
	color: var(--wp--preset--color--white);
}
.is-style-camo :where(h1, h2, h3, h4) { color: var(--wp--preset--color--white); }

/* Tight Apple-style tile grid with hairline gutters */
.hrd-tiles { gap: var(--wp--custom--gutter) !important; }

/* Header controls sit on texture (homepage camo): no solid button fills. */
header .wp-block-search__button,
header .wc-block-mini-cart__button,
header .wp-block-woocommerce-customer-account a {
	background: transparent !important;
	color: inherit !important;
	border: 0 !important;
}

/* Bands meet edge to edge: no default block gap above the footer. */
.wp-site-blocks > footer { margin-block-start: 0 !important; }

/* ---------- Header on standard pages (docs/HEADER.md) ----------
   A slim bar, Apple's proportion for a 14px menu (the user, 2026-11-08, option H): 56 tall (6.5 + the 43px icon
   cells + 6.5), a 56px box mark, the homepage's gutters; sticky at one height, no compact
   step. --hrd-head is the bar's height for everything that sticks under it. The homepage keeps its own floating
   header (story.css) at the same height. Phone: 65 tall, 15px gutters; chip, search, menu, cart. */
:root { --hrd-head: 56px; }
/* One page frame for every template (the user, 2026-11-08: "everything to match the homepage how it is boxed"): the
   homepage header's edge, the theme's spacing-40 gutter (20-28px), widening to centre a 1440 column on big screens.
   --hrd-sb is the classic scrollbar's width (0 on overlay scrollbars), set by functions.php, so 100vw matches the
   header's box. Templates use it at desktop widths; their phone gutters stay their own. */
:root { --hrd-edge: max(var(--wp--preset--spacing--40), calc((100vw - var(--hrd-sb, 0px) - 1440px) / 2)); }
body:not(.hrd-has-story) .wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	height: var(--hrd-head);
}
/* Side gutters match the homepage's (the user, 2026-11-08): the theme's spacing-40, clamp(20px, 2vw, 28px). */
body:not(.hrd-has-story) .hrd-header { padding: 6.5px var(--wp--preset--spacing--40) !important; }
/* Boxed like the homepage's header (the user, 2026-11-08): a 1440 column, centred on wide screens (desktop only;
   the phone row reaches into the gutter, below). */
body:not(.hrd-has-story) .hrd-header .hrd-header__row { align-items: center; }
@media (min-width: 1024px) and (min-aspect-ratio: 1001/1000) {
	body:not(.hrd-has-story) .hrd-header .hrd-header__row { max-width: 1440px; margin-inline: auto; }
}
body:not(.hrd-has-story) .hrd-header .wp-block-site-logo img { width: 56px !important; height: auto; display: block; }
/* The homepage bar: the same 56 and the same mark on desktop (its block padding is inline in header.html).
   Phones keep their own headers. */
@media (min-width: 1024px) and (min-aspect-ratio: 1001/1000) {
	.hrd-has-story .wp-site-blocks > header:first-child > .hrd-header { padding-block: 6.5px !important; }
	.hrd-has-story .hrd-header .wp-block-site-logo img { width: 56px !important; height: auto; }
}
/* One menu type on every header (the user, 2026-11-08: "Homepage style everywhere"): the menu, "Ask HRD" and
   "Select your car" all read these, so they cannot drift apart. docs/HEADER.md. */
.hrd-header { --hrd-menu-size: 14px; --hrd-menu-track: -0.02em; }
.hrd-header .wp-block-navigation { font-size: var(--hrd-menu-size) !important; letter-spacing: var(--hrd-menu-track) !important; }
/* One gap on every header too (the user, 2026-11-08: 16px, the homepage's). */
body .hrd-header .wp-block-navigation .wp-block-navigation__container { gap: 0 16px; }
/* Below 1280 the car chip keeps its icon only (the label is still read by screen readers), so the menu stays
   on one line and centred. Below 1024 see the phone rule. */
@media (min-width: 769px) and (max-width: 1279px) {
	.hrd-header .hrd-chip { padding: 7.5px; }
	.hrd-header .hrd-chip__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* The menu sits on the page's centre line (the user, 2026-11-08), on every desktop header, the homepage's
   too: logo | menu | icons as a 1fr auto 1fr grid. Where the icons outgrow their side, the 1fr tracks stop
   being equal and the menu gives way instead of colliding. To keep it exactly centred with clear air after
   Contact (at least twice the menu's 16px gap, so nothing on the right reads as an eighth menu item), the
   right side has to fit beside half the 561px menu: "Ask HRD" shows from 1280 (ask-entry.css) and, beside
   it, "Select your car" keeps its label from 1440 (from 1280 where Ask is off, and on the homepage).
   docs/HEADER.md has the measured table. */
@media (min-width: 1024px) and (min-aspect-ratio: 1001/1000) {
	.hrd-header .hrd-header__row {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		column-gap: 24px;
	}
	.hrd-header__row > .wp-block-site-logo { justify-self: start; }
	.hrd-header__row > .wp-block-navigation { justify-self: center; }
	.hrd-header__row > .hrd-header__icons { justify-self: end; }
}
@media (min-width: 1280px) and (max-width: 1439px) and (min-aspect-ratio: 1001/1000) {
	/* The label folds only to make room for "Ask HRD"; without it (Ask off) the label fits. */
	.hrd-header:has(.hrd-askpill) .hrd-chip__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.hrd-header__icons { gap: 0 !important; }
.hrd-header__icons > * { display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 43px; }
.hrd-header__icons svg { width: 28px; height: 28px; }
.hrd-header__icons .hrd-chip svg { width: 28px; height: 28px; }
/* Desktop: the icons sized to the 14px menu and drawn as one group (the user, 2026-11-08): 22px glyphs in 40px
   cells, 18px of air between glyphs, the same after the car's label. The cells stay 43 tall. The phone header
   keeps 28px glyphs in its own cells. */
@media (min-width: 1024px) and (min-aspect-ratio: 1001/1000) {
	.hrd-header { --hrd-icon-size: 22px; --hrd-icon-cell: 40px; }
	.hrd-header__icons svg,
	.hrd-header__icons .hrd-chip svg,
	.hrd-header__icons .hrd-chip__icon,
	.hrd-header__icons .hrd-searchask svg,
	.hrd-header__icons .hrd-cartbtn svg,
	.hrd-header__icons .hrd-search-glyph { width: var(--hrd-icon-size); height: var(--hrd-icon-size); }
	.hrd-header .hrd-header__icons > :not(.hrd-askpill),
	.hrd-header .hrd-header__icons .hrd-cartbtn,
	.hrd-header .hrd-header__icons .hrd-searchask,
	.hrd-header .hrd-header__icons .wp-block-search__button,
	.hrd-header .hrd-header__icons .wp-block-woocommerce-customer-account a { min-width: var(--hrd-icon-cell); }
	.hrd-header .hrd-header__icons .hrd-searchask,
	.hrd-header .hrd-header__icons .wp-block-search__button-only .wp-block-search__button,
	.hrd-header .hrd-header__icons .wp-block-woocommerce-customer-account a { padding-inline: 0; justify-content: center; }
	.hrd-header .hrd-header__icons .hrd-search-glyph { width: var(--hrd-icon-size); height: var(--hrd-icon-size); min-width: 0; min-height: 0; }
	.hrd-header .hrd-header__icons .hrd-chip { padding-inline: calc((var(--hrd-icon-cell) - var(--hrd-icon-size)) / 2) !important; }
	/* The cart's ink ends on the gutter, mirroring the logo's left edge: 9px of cell + 4.5px inside the bag glyph. */
	.hrd-header .hrd-header__icons { margin-right: -13.5px; }
}
/* The phone header (menu button + drawer) below 1024 px and on any portrait screen (the user, 2026-11-07: the
   7-item menu can't fit one line there; on an upright tablet it wrapped onto the homepage's strut). Core shows its
   menu button only under 600 px: below 1024 / portrait the button shows and the inline menu hides. */
@media (max-width: 1023px), (max-aspect-ratio: 1/1) {
	.hrd-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.hrd-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	body:not(.hrd-has-story) .wp-site-blocks > header.wp-block-template-part { height: 65px; }
	body:not(.hrd-has-story) .hrd-header { padding: 7px var(--wp--preset--spacing--40) !important; } /* the homepage's gutter */
	body:not(.hrd-has-story) .hrd-header .hrd-header__row { min-height: 51px; }
	/* One phone mark, 48 wide (the user, 2026-11-08: the phone logo was too big), the homepage's too, which now
	   shares the store's 65px bar. */
	body .hrd-header .wp-block-site-logo .custom-logo-link img { width: 48px !important; height: auto; }
	.hrd-has-story .wp-site-blocks > header:first-child > .hrd-header { padding-block: 7px !important; }
	.hrd-has-story .hrd-header .hrd-header__row { min-height: 51px; }
	/* Flatten the icon group so the menu button can sit between search and cart. */
	.hrd-header__icons { display: contents !important; }
	.hrd-header__row > .wp-block-site-logo { order: 0; margin-right: auto; }
	.hrd-header__row .hrd-chip { order: 1; }
	.hrd-header__row .wp-block-search { order: 2; }
	.hrd-header__row > .wp-block-navigation { order: 3; flex: none; }
	.hrd-header__row .wp-block-woocommerce-mini-cart { order: 4; }
	.hrd-header__row .wp-block-woocommerce-customer-account { display: none !important; }
	.hrd-header .hrd-header__row { justify-content: flex-end !important; gap: 0 !important; margin-right: -11.3px !important; } /* the cart's ink ends on the gutter, mirroring the logo (its cell reaches into the gutter) */
	.hrd-header__row > .wp-block-navigation { min-width: 45px; justify-content: center; }
	/* Shopify's phone icon cells: chip 43, search 40, menu 45, cart 39. */
	.hrd-header__row .hrd-chip { min-width: 43px; width: 43px; }
	.hrd-header__row .wp-block-search { min-width: 40px; width: 40px; }
	.hrd-header__row .wp-block-woocommerce-mini-cart { min-width: 39px; width: 39px; }
}
/* Core's button-only search renders a 60px form; the icon cell is 48×43 like its neighbours. */
.hrd-header .wp-block-search__button-only .wp-block-search__inside-wrapper { padding: 0; border: 0; }
.hrd-header .wp-block-search__button-only .wp-block-search__button { margin: 0; padding: 7px 10px; min-height: 43px; }
.hrd-header .wp-block-search__button-only { margin: 0 !important; }
/* WordPress's search button (homepage, or Ask off) wears the Ask button's magnifier (search-ask/render.php). */
.hrd-header .wp-block-search__button { display: flex; align-items: center; justify-content: center; }
.hrd-header .hrd-search-glyph { display: block; width: 24px; height: 24px; fill: none !important; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- Announcement bar (product page, Shop, listings; docs/PRODUCT-PAGE.md §2) ---------- */
.wp-site-blocks > .hrd-announce,
.wp-site-blocks > .wp-block-template-part:has(> .hrd-announce) { margin-block-start: 0; }
.hrd-announce {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 38px;
	padding: 10px 16px;
	background: var(--wp--preset--color--ink-band);
	color: #fff;
	font-size: 13.6px;
	line-height: 1.3;
	text-align: center;
	letter-spacing: -0.025em;
}
.hrd-announce.is-layout-flow > * { margin: 0; }
.hrd-announce__slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; }
.hrd-announce__slide.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
	.hrd-announce__slide { transition: opacity 0.4s ease, visibility 0.4s; }
}
.hrd-announce__slide strong { font-size: 12.24px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-right: 5px; }
.hrd-announce__slide a { color: inherit; text-decoration: none; }
.hrd-announce__slide a span { text-decoration: underline; }
@media (max-width: 768px) {
	.hrd-announce { min-height: 50px; font-size: 12px; line-height: 1.25; }
	.hrd-announce__slide strong { display: block; margin: 0; }
}


/* Hover (the user, 2026-11-08, option B): the item you point at stays full and the rest of the menu dims to 55%,
   so the current page's underline never competes with a second one. An open dropdown (hover or keyboard) holds
   its section full the same way. Pointer devices only; never in the phone drawer. */
@media (hover: hover) and (pointer: fine) {
	.hrd-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li > :is(a, .hrd-mm__toggle) { transition: opacity 0.15s var(--wp--custom--ease-out); }
	.hrd-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container:has(> li:hover, > li.is-open) > li:not(:hover, .is-open) > :is(a, .hrd-mm__toggle) { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
	.hrd-header .wp-block-navigation__container > li > :is(a, .hrd-mm__toggle) { transition: none !important; }
}

/* Header: the current section (functions.php marks it; docs/SHOP-PAGE.md §4.8). */
.hrd-header .wp-block-navigation-item__content[aria-current] { text-decoration: underline; text-decoration-color: var(--wp--preset--color--sky); text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* ---------- Shop dropdowns: the "Flyout" (docs/HEADER.md; the user, 2026-11-08: D3; markup: hrd-core Shop_Menu) ----------
   The bar grows down in its own colour: ink on store pages, the homepage header's ground (--hdr-bg) and tone there.
   Big line names start under the menu's first word (--mm-indent, shop-menu.js); the line's Shop tile render sits
   beside them and is exactly as tall as the column, so every section's flyout sizes its own render. In WordPress's
   overlay (phone) the same markup is the section's accordion (below). */
.hrd-mm-has { position: relative; display: flex; align-items: center; }
.hrd-mm__toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 32px; margin: 0 -6px 0 2px; padding: 0; background: none; border: 0; color: rgba(255, 255, 255, 0.75); cursor: pointer; }
.hrd-mm__toggle svg { transition: transform 0.15s var(--wp--custom--ease-out); }
.hrd-mm-has.is-open .hrd-mm__toggle svg { transform: rotate(180deg); }
.hrd-mm__toggle:focus-visible { outline: 2px solid var(--wp--preset--color--sky); outline-offset: 2px; }
.hrd-mm {
	--mm-bg: var(--wp--preset--color--ink);
	--mm-fg: #fff;
	--mm-dim: rgba(255, 255, 255, 0.6);
	--mm-hair: rgba(255, 255, 255, 0.12);
	--mm-fit: var(--wp--preset--color--sky);
	position: fixed;
	left: 0;
	right: 0;
	z-index: 60;
	padding: 26px var(--hrd-edge) 32px;
	background: var(--mm-bg);
	color: var(--mm-fg);
	box-shadow: inset 0 1px 0 var(--mm-hair), 0 1px 0 var(--mm-hair);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.02em;
	text-align: left;
}
.hrd-has-story .hrd-mm { --mm-bg: var(--hdr-bg, var(--wp--preset--color--paper)); --mm-fg: var(--wp--preset--color--ink); --mm-dim: var(--wp--preset--color--gray); --mm-hair: rgba(4, 1, 29, 0.1); --mm-fit: var(--wp--preset--color--ink); }
.hrd-has-story header[data-dock][data-tone="dark"] .hrd-mm { --mm-fg: #fff; --mm-dim: rgba(255, 255, 255, 0.6); --mm-hair: rgba(255, 255, 255, 0.12); --mm-fit: var(--wp--preset--color--sky); }
.hrd-mm[hidden] { display: none; }
.hrd-mm__in { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 64px; padding-left: var(--mm-indent, 0px); }
.hrd-mm__col { display: flex; flex-direction: column; min-width: 0; }
.hrd-mm__sec,
.hrd-mm__meta,
.hrd-mm__car { color: var(--mm-dim); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; }
.hrd-mm__sec { margin: 0 0 10px; }
.hrd-mm__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hrd-mm a.hrd-mm__row { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; color: inherit; text-decoration: none; transition: opacity 0.15s var(--wp--custom--ease-out); }
.hrd-mm__name { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; white-space: nowrap; }
.hrd-mm__meta { display: flex; gap: 4px 10px; white-space: nowrap; }
.hrd-mm__fit { color: var(--mm-fit); }
.hrd-mm__fit[hidden],
.hrd-mm__car[hidden] { display: none; }
/* Product rows (the damper tools, the thrust tool): the menu's own size, the price beside. */
.hrd-mm__more { margin-top: 14px; }
.hrd-mm__more .hrd-mm__name { font-size: 15px; letter-spacing: -0.02em; }
.hrd-mm__more .hrd-mm__meta { color: var(--mm-dim); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.hrd-mm__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 18px; }
.hrd-mm a.hrd-mm__all { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.hrd-mm__all > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.hrd-mm__n { color: var(--mm-dim); }
.hrd-mm__go { display: block; width: 9px; height: 9px; transform: rotate(90deg); }
.hrd-mm__go svg { display: block; width: 100%; height: 100%; }
.hrd-mm__car { margin: 0; }
.hrd-mm a:focus-visible { outline: 2px solid var(--mm-fit); outline-offset: 4px; }
/* The render: as tall as the column beside it (the grid row), never taller; it swaps as you point at a line. */
.hrd-mm__stage { position: relative; min-height: 0; }
.hrd-mm__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* Pointing at a row dims the others, as the menu itself does. */
@media (hover: hover) and (pointer: fine) {
	.hrd-mm__col:has(a.hrd-mm__row:hover) a.hrd-mm__row:not(:hover) { opacity: 0.45; }
}
.hrd-mm-scrim { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: rgba(4, 1, 29, 0.62); opacity: 0; pointer-events: none; transition: opacity 0.15s var(--wp--custom--ease-out); }
.hrd-mm-open .hrd-mm-scrim { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
	.hrd-mm__toggle svg,
	.hrd-mm a.hrd-mm__row,
	.hrd-mm-scrim { transition: none; }
}

/* The phone drawer: left-aligned sections with hairlines; the chevron opens a section in place. */
.wp-block-navigation__responsive-container.is-menu-open { padding: 16px 20px 40px; }
.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: 0 !important; }
.is-menu-open .wp-block-navigation__container { align-items: stretch !important; width: 100%; gap: 0 !important; }
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; width: 100%; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12); }
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a { flex: 1; padding: 9px 0 !important; font-size: 24px; line-height: 1.1; letter-spacing: -0.04em; }
.is-menu-open .wp-block-navigation-item__content[aria-current] { text-underline-offset: 6px; }
.is-menu-open .hrd-mm__toggle { width: 48px; height: 48px; margin: 0 -12px 0 0; color: #fff; }
.is-menu-open .hrd-mm__toggle svg { width: 16px; height: 16px; }
.is-menu-open .hrd-mm { --mm-fg: #fff; --mm-dim: rgba(255, 255, 255, 0.6); --mm-fit: var(--wp--preset--color--sky); position: static; flex-basis: 100%; padding: 2px 0 16px; background: none; box-shadow: none; color: #fff; }
.is-menu-open .hrd-mm__in { display: block; padding: 0; }
.is-menu-open .hrd-mm__sec,
.is-menu-open .hrd-mm__stage { display: none; }
.is-menu-open .hrd-mm__list { width: 100%; min-width: 0; }
.is-menu-open .hrd-mm__more { margin-top: 0; }
.is-menu-open .hrd-mm__more .hrd-mm__meta { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.is-menu-open .hrd-mm__name { white-space: normal; }
.is-menu-open .hrd-mm a.hrd-mm__row { opacity: 1 !important; }
.is-menu-open .hrd-mm__foot { gap: 0; margin-top: 4px; }
.is-menu-open .hrd-mm a.hrd-mm__row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 0; color: #fff; }
.is-menu-open .hrd-mm a.hrd-mm__row:hover { background: none; }
.is-menu-open .hrd-mm__name { font-size: 17px; letter-spacing: -0.02em; }
.is-menu-open .hrd-mm__meta,
.is-menu-open .hrd-mm__car { color: rgba(255, 255, 255, 0.6); }
.is-menu-open .hrd-mm__fit { color: var(--wp--preset--color--sky); }
.is-menu-open .hrd-mm__car { margin: 4px 0 0; }
.is-menu-open .hrd-mm a.hrd-mm__all { min-height: 44px; margin: 0; color: #fff; }
.is-menu-open .hrd-mm__n { color: rgba(255, 255, 255, 0.6); }
.is-menu-open .hrd-mm a:focus-visible { outline-color: var(--wp--preset--color--sky); }

/* The phone menu's extras (the user, 2026-11-08: "P2 tiles"; markup hrd-core Menu_Drawer, moved in by menu-drawer.js):
   the mark and a search field above the menu; under it four tiles (your car in sky, Account, "Ask HRD", Track an
   order) and the free-shipping line with Instagram and Facebook. Every tile's title sits the same distance under
   its icon, so the titles line up across a row whatever the subtitle says. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .hrd-dw-x { display: none !important; }
.hrd-dw__mark { position: relative; height: 44px; margin: 0 0 14px; }
.hrd-dw__mark img { position: absolute; top: 10px; left: 0; display: block; width: 48px; height: auto; } /* menu-drawer.js puts it on the header logo */
.hrd-dw__search { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; margin: 0 0 10px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); font: inherit; font-size: 16px; font-weight: 400; letter-spacing: -0.02em; text-align: left; cursor: pointer; }
.hrd-dw__search svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hrd-dw__ph { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hrd-dw__search:focus-visible { outline: none; border-color: var(--wp--preset--color--sky); }
.hrd-dw__q { flex: none; color: var(--wp--preset--color--sky); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }
.hrd-dw__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 0; }
.hrd-dw__tile { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 84px; margin: 0; padding: 14px; border: 0; border-radius: 0; background: var(--wp--preset--color--ink-band); color: #fff; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.hrd-dw__tile svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hrd-dw__t { display: block; width: 100%; margin-top: 18px; }
.hrd-dw__t b { display: block; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; }
.hrd-dw__t small { display: block; overflow: hidden; margin-top: 4px; color: rgba(255, 255, 255, 0.6); font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.hrd-dw__tile.is-car { background: var(--wp--preset--color--sky); color: var(--wp--preset--color--ink); }
.hrd-dw__tile.is-car small { color: rgba(4, 1, 29, 0.68); }
.hrd-dw__tile:focus-visible,
.hrd-dw__social a:focus-visible { outline: 2px solid var(--wp--preset--color--sky); outline-offset: 2px; }
.hrd-dw__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; color: rgba(255, 255, 255, 0.6); font-size: 12px; letter-spacing: -0.01em; }
.hrd-dw__social { display: flex; margin-right: -11px; }
.hrd-dw__social a { display: grid; place-items: center; width: 44px; height: 44px; color: #fff; }
.hrd-dw__social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* The footer is the hrd/site-footer block (hrd-core, docs/FOOTER.md). */

/* Phone menu controls keep their glyph alignment with a transparent touch area. */
@media (max-width: 781px) {
	.hrd-header .wp-block-navigation__responsive-container-open { position: relative; }
	.hrd-header .wp-block-navigation__responsive-container-open::before,
	.hrd-header .wp-block-navigation__responsive-container-close::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}

/* Keep Close in its measured corner while the phone menu scrolls underneath it. */
@media (max-width: 1023px), (max-aspect-ratio: 1/1) {
	/* Core's retained identity transform would otherwise make fixed Close scroll with the overlay. */
	.hrd-header .wp-block-navigation__responsive-container.is-menu-open { animation-fill-mode: none; }
	.hrd-header .wp-block-navigation__responsive-container-close { position: fixed; z-index: 61; } /* above the submenu's 60 */
	.hrd-header .wp-block-navigation__responsive-container-close::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); background: var(--wp--preset--color--ink); z-index: -1; }
}

/* Owner-approved controls for automatic reviews; the header reserves their height before JS. */
.hrd-rotation { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.hrd-rotation[hidden] { display: none; }
.hrd-rotation:focus-visible { outline: 2px solid var(--wp--preset--color--sky); outline-offset: 3px; }
.hrd-rotation:not(:disabled):hover { color: var(--wp--preset--color--sky); }
.hrd-rotation:disabled { cursor: default; }

.hrd-rotation { min-width: 136px; }
/* Reserve the pause hit area in CSS before the announcement script runs. */
.hrd-announce { min-height: 44px; padding-inline: 60px; }
.hrd-announce__pause { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font: inherit; font-size: 16px; cursor: pointer; }
.hrd-announce__pause:focus-visible { outline: 2px solid var(--wp--preset--color--sky); outline-offset: -3px; }
.hrd-announce__pause:not(:disabled):hover { color: var(--wp--preset--color--sky); }
.hrd-announce__pause:disabled { opacity: .55; cursor: default; }
@media (max-width: 768px) { .hrd-announce { min-height: 50px; } }

/* The sign-in skeleton stays visibly inactive until its application is ready. */
.hrd-acct-in[aria-busy="true"] input:disabled,
.hrd-acct-in[aria-busy="true"] button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Sale prices (docs/SALE-MANAGEMENT.md §4, decision A 2026-11-10) ----------
 * HRD's own colours, no sale red: the price now in ink, first and big; the price it was
 * smaller, gray and struck, on the same line after it. Brand-sale badge: ink with the sky slash mark. */
.hrd-pair { display: inline-flex; align-items: baseline; gap: .35em; white-space: nowrap; }
.hrd-pair__now { color: inherit; text-decoration: none; }
.hrd-pair__was { font-size: .45em; font-weight: 700; line-height: 1; color: var(--wp--preset--color--gray); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.hrd-sale__badge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.hrd-sale__tag { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 3px; background: var(--wp--preset--color--ink); color: #fff; }
.hrd-sale__sl { --hz: 10px; display: inline-block; width: calc(var(--hz) * 3.2); height: var(--hz); color: var(--wp--preset--color--sky); background: repeating-linear-gradient(55deg, currentColor 0 calc(var(--hz) * 0.33), transparent calc(var(--hz) * 0.33) calc(var(--hz) * 0.56)); }
.hrd-sale__ends { color: var(--wp--preset--color--gray); }
.hrd-sale__save { margin: 8px 0 0; color: var(--wp--preset--color--ink); }
.hrd-card__sale { position: absolute; z-index: 1; top: 12px; right: 12px; padding: 6px 9px 5px; background: var(--wp--preset--color--ink); color: #fff; }
.hrd-sale__price { margin: 2px 0 0; }
.hrd-sale__save { margin-top: 10px; }
/* The struck price stays readable where the price itself is small */
.hrd-card__price .hrd-pair__was { font-size: .7em; }
.hrd-bl__price .hrd-pair { align-items: baseline; flex-wrap: wrap; justify-content: flex-end; white-space: normal; }
.hrd-bl__price .hrd-pair__was { margin-top: 0; font-size: 12px; }