/**
 * Ask HRD entry points on store pages (docs/ASK-HRD.md §3.2): the header pill
 * and the product page's buy-box row. Loaded only when Ask HRD is live; the
 * panel's own styles (ask.css) load on first open.
 */

/* Header: "Ask HRD" as a quoted text link in the menu's own type (the user, 2026-11-08: no pill), first in
   the icon group. Store-page desktop header from 1280 (below that the centred menu needs the room, and
   search, whose panel opens on an Ask row, carries it); hrd.css folds "Select your car" beside it below 1440. */
.hrd-header__icons > .hrd-askpill { min-width: 0; margin-right: 0; padding-right: 9px; } /* 9 + the car cell's 9 = the group's 18px rhythm */
.hrd-askpill {
	display: inline-flex;
	align-items: center;
	height: 43px;
	padding: 0 10px;
	border: 0;
	background: none;
	color: #fff;
	font: 700 var(--hrd-menu-size, 14px)/1 var(--wp--preset--font-family--helvetica-now, "Helvetica Now", Helvetica, Arial, sans-serif);
	letter-spacing: var(--hrd-menu-track, -0.02em);
	white-space: nowrap;
	cursor: pointer;
}
.hrd-askpill .q { color: var(--wp--preset--color--sky, #91D2FF); letter-spacing: 0; }
/* At the menu's -0.02em the quotes sit 1.25px off the A and the D, both sides (measured at 4x, 2026-11-08). The
   old -0.075em pulled the closing quote onto the D and needed a 1.75px nudge; re-measure if the tracking changes. */
@media (hover: hover) { .hrd-askpill:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--sky, #91D2FF); text-decoration-thickness: 2px; text-underline-offset: 8px; } }
.hrd-askpill:focus-visible { outline: 2px solid var(--wp--preset--color--sky, #91D2FF); outline-offset: 2px; }
.hrd-askpill[aria-busy="true"] { opacity: .7; }
@media (max-width: 1279px), (max-aspect-ratio: 1/1) {
	.hrd-header__icons > .hrd-askpill { display: none; }
}

/* Buy-box row, under stock and shipping. */
.hrd-askrow {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 16px 0 0;
	padding: 14px 16px;
	border: 0;
	border-radius: 14px;
	background: var(--wp--preset--color--paper, #F5F5F7);
	color: var(--wp--preset--color--ink, #04011D);
	font: 400 14px/1.35 var(--wp--preset--font-family--helvetica-now, "Helvetica Now", Helvetica, Arial, sans-serif);
	letter-spacing: -.015em;
	text-align: left;
	cursor: pointer;
	transition: background-color .2s;
}
@media (hover: hover) { .hrd-askrow:hover { background: #ECECEF; } }
.hrd-askrow:focus-visible { outline: 2px solid var(--wp--preset--color--ink, #04011D); outline-offset: 2px; }
.hrd-askrow b { display: block; font-weight: 700; }
.hrd-askrow__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wp--preset--color--ink, #04011D); color: var(--wp--preset--color--sky, #91D2FF); }
.hrd-askrow__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.hrd-askrow__go { margin-left: auto; font-size: 18px; }

/* While the panel is docked (desktop), the page narrows beside it. */
html.hrd-askp-docked body { margin-right: 420px; }
@media (max-width: 1700px) {
	html.hrd-askp-docked .hrd-header .wp-block-navigation { display: none; }
}
html.hrd-askp-sheet body { overflow: hidden; }

/* ---------- Search or ask (decision 3, option A) ---------- */
.hrd-header__icons > .hrd-searchask { min-width: 48px; }
.hrd-searchask { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 43px; padding: 0 6px; border: 0; background: none; color: #fff; cursor: pointer; }
.hrd-searchask svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hrd-searchask__label { display: none; font: 700 11px/1 var(--wp--preset--font-family--helvetica-now, "Helvetica Now", Helvetica, Arial, sans-serif); letter-spacing: .14em; }
.hrd-searchask__label .q { color: var(--wp--preset--color--sky, #91D2FF); letter-spacing: 0; }
/* The homepage header on paper (its dark chapters keep the store's look): an ink hairline and ink quotes; sky is
   about 1.5:1 on paper. */
.hrd-has-story .wp-site-blocks > header:first-child:not([data-dock][data-tone="dark"]) .hrd-header__icons > .hrd-searchask { border-color: rgba(4, 1, 29, 0.25); }
.hrd-has-story .wp-site-blocks > header:first-child:not([data-dock][data-tone="dark"]) :is(.hrd-askpill, .hrd-searchask__label) .q { color: inherit; }
.hrd-searchask:focus-visible { outline: 2px solid var(--wp--preset--color--sky, #91D2FF); outline-offset: 2px; border-radius: 999px; }
@media (max-width: 1023px), (max-aspect-ratio: 1/1) {
	/* Phones and tablets (the phone header): search and ask in search's slot, drawn like the desktop link
	   (the user, 2026-11-08: "Ask HRD" in quotes, no pill). Same button, so it still opens the search/Ask
	   panel. On the desktop header search stays an icon, so the centred menu has room (hrd.css). */
	.hrd-header__icons > .hrd-searchask { height: 43px; margin: 0; padding: 0 8px; border: 0; border-radius: 0; }
	.hrd-searchask svg { display: none; }
	.hrd-searchask__label { display: inline; font: 700 16px/1 var(--wp--preset--font-family--helvetica-now, "Helvetica Now", Helvetica, Arial, sans-serif); letter-spacing: -0.02em; white-space: nowrap; }
	@media (hover: hover) { .hrd-searchask:hover .hrd-searchask__label { text-decoration: underline; text-decoration-color: var(--wp--preset--color--sky, #91D2FF); text-decoration-thickness: 2px; text-underline-offset: 8px; } }
}

/* One gutter (--ss-g) on both sides (the user, 2026-11-08: prices and chevrons sat on the edge): the glyph, section
   labels, row text and Ask's text start on it; prices, chevrons, the arrow and Cancel end on it. Rows and the Ask box
   bleed 8px past it, so their hover fills and outline sit outside the text. */
.hrd-ss { --ss-g: 20px; position: fixed; inset: 0; z-index: 99995; font-family: var(--wp--preset--font-family--helvetica-now, "Helvetica Now", Helvetica, Arial, sans-serif); letter-spacing: -.015em; color: var(--wp--preset--color--ink, #04011D); }
.hrd-ss[hidden] { display: none; }
.hrd-ss__scrim { position: absolute; inset: 0; background: rgba(4, 1, 29, .4); opacity: 0; transition: opacity .2s; }
.hrd-ss__panel { position: absolute; left: 50%; top: 72px; width: 640px; max-width: calc(100% - 32px); max-height: calc(100dvh - 120px); margin-left: -320px; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(4, 1, 29, .25); overflow: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .28s cubic-bezier(.16, 1, .3, 1); }
.hrd-ss.is-open .hrd-ss__scrim { opacity: 1; }
.hrd-ss.is-open .hrd-ss__panel { opacity: 1; transform: none; }
.hrd-ss__bar { display: flex; align-items: center; gap: 10px; padding: 12px var(--ss-g); border-bottom: 1px solid #E6E6E6; margin: 0; }
.hrd-ss__bar svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #595959; stroke-width: 2; stroke-linecap: round; }
.hrd-ss .hrd-ss__bar input { flex: 1; min-width: 0; height: 40px; margin: 0; padding: 0 2px; border: 0; box-shadow: none; outline: none; background: none; font: inherit; font-size: 17px; color: inherit; }
.hrd-ss__bar input::-webkit-search-cancel-button { display: none; }
.hrd-ss__cancel { border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: inherit; cursor: pointer; padding: 6px 0; }
.hrd-ss__res { overflow-y: auto; padding: 6px calc(var(--ss-g) - 8px) 14px; }
.hrd-ss__sec { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 14px 8px 6px; }
.hrd-ss__sec span { color: #595959; letter-spacing: .08em; margin-left: 6px; }
.hrd-ss__row, .hrd-ss__link, .hrd-ss__ask { box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.hrd-ss [data-ss-option].is-active { background: #F5F5F7; }
@media (hover: hover) { .hrd-ss__row:hover, .hrd-ss__link:hover, .hrd-ss__ask:hover { background: #F5F5F7; } }
.hrd-ss__row .tile { width: 52px; height: 52px; flex: none; border-radius: 10px; background: #F0F0F0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hrd-ss__row .tile img { max-width: 100%; max-height: 90%; mix-blend-mode: multiply; }
.hrd-ss__row .b { flex: 1; min-width: 0; }
.hrd-ss__row b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; letter-spacing: -.02em; line-height: 1.3; }
.hrd-ss__row small { display: block; font-size: 12px; color: #595959; margin-top: 2px; }
.hrd-ss__row .fitk { display: inline-block; margin-top: 4px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--wp--preset--color--sky, #91D2FF); border-radius: 999px; padding: 3px 7px 2px; }
.hrd-ss__row .p { flex: none; font-size: 14.5px; font-weight: 700; }
/* Product lines carry their Shop tile render (a touch smaller than a part's photo); recent searches can be cleared. */
.hrd-ss__row.is-line { padding-block: 6px; }
.hrd-ss__row.is-line .tile { width: 44px; height: 44px; border-radius: 9px; }
.hrd-ss__row.is-line .tile img { max-width: 86%; max-height: 86%; mix-blend-mode: normal; }
.hrd-ss__row.is-line b { font-size: 14.5px; -webkit-line-clamp: 1; }
.hrd-ss__row .go { flex: none; color: #8A8A92; font-size: 14.5px; }
.hrd-ss__sec--row { display: flex; align-items: baseline; justify-content: space-between; }
.hrd-ss__clear { margin: 0; padding: 4px 0; border: 0; background: none; color: #595959; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.hrd-ss__clear:hover { color: var(--wp--preset--color--ink, #04011D); }
.hrd-ss__link { justify-content: space-between; font-size: 14.5px; font-weight: 700; padding: 11px 8px; }
.hrd-ss__link span { color: #8A8A92; font-weight: 400; }
.hrd-ss__ask { margin-top: 8px; padding: 12px 8px; box-shadow: inset 0 0 0 1px #E6E6E6; font-size: 14.5px; }
.hrd-ss__ask .q { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.hrd-ss__ask .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #2A2A33; }
.hrd-ss__ask .go { color: #8A8A92; }
.hrd-ss__ask.is-top { background: var(--wp--preset--color--ink, #04011D); color: #fff; box-shadow: none; }
.hrd-ss__ask.is-top.is-active { background: #100E28; }
@media (hover: hover) { .hrd-ss__ask.is-top:hover { background: #100E28; } }
.hrd-ss__ask.is-top .q { color: var(--wp--preset--color--sky, #91D2FF); }
.hrd-ss__ask.is-top .t { color: #fff; }
.hrd-ss__ask .ret { flex: none; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .14); border-radius: 8px; padding: 4px 8px; }
.hrd-ss__wait, .hrd-ss__none { padding: 10px 8px; font-size: 14px; color: #595959; }
html.hrd-ss-open body { overflow: hidden; }
@media (max-width: 768px) {
	.hrd-ss { --ss-g: 16px; }
	.hrd-ss__panel { inset: 0; top: 0; left: 0; width: 100%; max-width: none; max-height: none; height: 100dvh; margin: 0; border-radius: 0; transform: translateY(12px); }
	.hrd-ss__bar { padding-top: calc(10px + env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: reduce) {
	.hrd-ss__scrim, .hrd-ss__panel { transition: none; }
}
@media (pointer: coarse) {
	.hrd-ss__cancel { padding: 13px 8px; margin: -7px -8px; } /* a bigger tap area; the word stays on the gutter */
}