/*
 * NCP Search 0.3.0 — core styles: the F8 design tokens every module reads, the resets that keep a theme's bare
 * element styles off NCP's surfaces, the focus ring, reduced motion, the base components (buttons, pills, notes,
 * the shortcut row, the divider), the page layer (live region, toast, dialog, bottom sheet), the default page
 * shell, and the silencers that keep Doofinder and the theme's live search closed for NCP's share.
 * Plan of record: docs/recon/site-search-3.md §E.5–E.6. Loaded first; card, panel, phone and results build on it.
 *
 * ⚠ EVERY RULE IS SCOPED. Under .ncp-s2 (every surface root, the page layer .ncp-s2-host included) or under
 * html.ncp-s2-on, which only a visitor in NCP's share carries (R11). Outside the share nothing here applies.
 *
 * ⚠ THE STORE'S OWN SKIN (F8 Look 1). The values below are defaults; ncp-s2-core.js N.skin() samples the theme
 * (WoodMart --wd-*, XStore --et_*, a theme price, primary button and input) and the store's brand colour, and
 * writes them over these in <style id="ncp-s2-skin"> before any surface is drawn. ONE accent: the primary
 * action, the focus ring and the sale price — nothing else is coloured.
 *
 * ⚠ CALM (Look 2): flat colour only, no coloured boxes, no decorative icons; hairline borders; a soft shadow only
 * on the open panel (--s2-shadow-panel) and on hover (--s2-shadow-hover).
 * ⚠ TYPE (Look 3): nothing below 13 px on a desktop or 14 px on a phone; numbers tabular.
 * ⚠ SPACE (Look 4): an 8 px grid (--s2-sp-1…4); card padding 16; grid gap 24 desktop, 12 phone.
 * ⚠ MOTION (Look 5): opacity and transform only, 160 ms, ease-out — and none when the device asks for less.
 * ⚠ ACCESS: every text colour reads at ≥ 4.5 : 1 on the page colour (--s2-mute #5c6370 is 6.0 : 1 on white;
 * 0.2.x's #757A84 was 4.31 : 1), the focus ring is the accent, colour is never the only signal.
 */

/* ── the tokens (§E.6) ─────────────────────────────────────────────────────────────────────────────────────── */
.ncp-s2,
.ncp-s2-host {
	--s2-font: inherit;
	--s2-text: #1f2328;
	--s2-mute: #5c6370;
	--s2-bg: #ffffff;
	--s2-line: rgba(0, 0, 0, .12);
	--s2-line-strong: #8a8f98;
	--s2-accent: #b3372c;
	--s2-accent-ink: #ffffff;
	--s2-accent-text: #b3372c;
	--s2-radius: 8px;
	--s2-btn-radius: var(--s2-radius);
	--s2-btn-case: none;
	--s2-btn-weight: 600;
	--s2-btn-tracking: normal;
	--s2-price-color: var(--s2-text);
	--s2-price-font: inherit;
	--s2-shadow-panel: 0 12px 32px rgba(0, 0, 0, .14);
	--s2-shadow-hover: 0 6px 18px rgba(0, 0, 0, .10);
	--s2-sp-1: 8px;
	--s2-sp-2: 16px;
	--s2-sp-3: 24px;
	--s2-sp-4: 32px;
	--s2-card-pad: 16px;
	--s2-gap: 24px;
	--s2-body-size: 15px;
	--s2-title-size: 15px;
	--s2-title-weight: 500;
	--s2-price-size: 19px;
	--s2-price-weight: 700;
	--s2-meta-size: 13px;
	--s2-in: #1a7f37;
	--s2-low: #b25e09;
	--s2-grey: #6b7280;
	--s2-dur: 160ms;
	--s2-ease: cubic-bezier(.2, 0, 0, 1);
	--s2-focus: 2px solid var(--s2-accent-text, var(--s2-accent));
	--s2-z: 99990;
	/* WoodMart draws every focus ring itself, !important, from these variables: inside NCP's surfaces they name the
	   plugin's ring, so the theme's own rule draws the accent (F8 Access) — nothing here needs !important */
	--wd-otl-width: 2px;
	--wd-otl-style: solid;
	--wd-otl-color: var(--s2-accent-text, var(--s2-accent));
	--wd-otl-offset: 2px;
}

@media (max-width: 768px) {
	.ncp-s2,
	.ncp-s2-host {
		--s2-gap: 12px;
		--s2-meta-size: 14px;
	}
}

/* ── the root and the resets: the theme's bare element styles stop at NCP's surfaces ─────────────────────────── */
.ncp-s2 {
	font-family: var(--s2-font);
	font-size: var(--s2-body-size);
	line-height: 1.45;
	color: var(--s2-text);
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ncp-s2,
.ncp-s2 *,
.ncp-s2 *::before,
.ncp-s2 *::after {
	box-sizing: border-box;
}

.ncp-s2 :where(div, span, p, ul, ol, li, dl, dt, dd, figure, form, fieldset, legend, label, section, header, footer, nav, aside, h1, h2, h3, h4, h5, h6) {
	margin: 0;
	padding: 0;
}

.ncp-s2 h1,
.ncp-s2 h2,
.ncp-s2 h3,
.ncp-s2 h4,
.ncp-s2 h5,
.ncp-s2 h6 {
	font-family: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.3;
}

.ncp-s2 ul,
.ncp-s2 ol {
	list-style: none;
}

.ncp-s2 a {
	color: inherit;
	text-decoration: none;
	transition: none;
}

.ncp-s2 a:hover,
.ncp-s2 a:focus {
	color: inherit;
}

.ncp-s2 button,
.ncp-s2 input,
.ncp-s2 select,
.ncp-s2 textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: 1.2;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	/* a theme's own button / link fade (WoodMart: transition all .25s) stops here — F8 Look 5 */
	transition: none;
}

.ncp-s2 button {
	width: auto;
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ncp-s2 img {
	max-width: 100%;
	border: 0;
	box-shadow: none;
}

.ncp-s2 mark {
	background: none;
	color: inherit;
	font-weight: 700;
	padding: 0;
}

.ncp-s2 .s2-ic {
	display: block;
	flex: none;
}

.ncp-s2 .s2-num {
	font-variant-numeric: tabular-nums;
}

/* ── the focus ring: the accent, always visible for keys ──────────────────────────────────────────────────────── */
.ncp-s2 :focus-visible {
	outline: var(--s2-focus);
	outline-offset: 2px;
}

.ncp-s2 :focus:not(:focus-visible) {
	outline: none;
}

/* ── hidden from the eye, read aloud ───────────────────────────────────────────────────────────────────────────── */
.ncp-s2 .s2-vh,
.ncp-s2 .s2-live {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ── buttons: the theme's own shape (radius, case, weight), ONE accent for the primary action ──────────────────── */
.ncp-s2 .s2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2-sp-1);
	min-height: 40px;
	padding: 0 var(--s2-sp-2);
	border: 1px solid var(--s2-line);
	border-radius: var(--s2-btn-radius);
	background: var(--s2-bg);
	color: var(--s2-text);
	font-size: 15px;
	font-weight: var(--s2-btn-weight);
	text-transform: var(--s2-btn-case);
	letter-spacing: var(--s2-btn-tracking);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity var(--s2-dur) var(--s2-ease);
}

.ncp-s2 .s2-btn:hover {
	color: var(--s2-text);
	border-color: var(--s2-line-strong);
}

.ncp-s2 .s2-btn--primary,
.ncp-s2 .s2-btn--primary:hover,
.ncp-s2 .s2-btn--primary:focus {
	background: var(--s2-accent);
	border-color: var(--s2-accent);
	color: var(--s2-accent-ink);
}

.ncp-s2 .s2-btn--primary:hover {
	filter: brightness(.94);
}

.ncp-s2 .s2-btn--quiet,
.ncp-s2 .s2-btn--quiet:hover {
	background: none;
	border-color: transparent;
	color: var(--s2-text);
}

.ncp-s2 .s2-btn--quiet:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ncp-s2 .s2-btn[disabled],
.ncp-s2 .s2-btn[aria-disabled="true"] {
	opacity: .6;
	cursor: default;
	filter: none;
}

.ncp-s2 .s2-btn[aria-busy="true"] {
	opacity: .7;
	cursor: progress;
}

/* a quiet control that is only an icon: compare, wishlist, close, clear, the microphone — its name is its aria-label */
.ncp-s2 .s2-icon-btn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--s2-btn-radius);
	background: none;
	color: var(--s2-mute);
	cursor: pointer;
}

.ncp-s2 .s2-icon-btn:hover {
	color: var(--s2-text);
}

/* ── pills: quick filters, recent searches, active filters (with ×), Understood chips ─────────────────────────── */
.ncp-s2 .s2-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s2-sp-1);
	min-height: 36px;
	padding: 0 var(--s2-sp-2);
	border: 1px solid var(--s2-line);
	border-radius: 999px;
	background: var(--s2-bg);
	color: var(--s2-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.ncp-s2 .s2-pill:hover {
	border-color: var(--s2-line-strong);
}

.ncp-s2 .s2-pill[aria-pressed="true"],
.ncp-s2 .s2-pill.is-on {
	background: var(--s2-text);
	border-color: var(--s2-text);
	color: var(--s2-bg);
}

.ncp-s2 .s2-pill__count {
	color: var(--s2-mute);
	font-variant-numeric: tabular-nums;
}

.ncp-s2 .s2-pill[aria-pressed="true"] .s2-pill__count,
.ncp-s2 .s2-pill.is-on .s2-pill__count {
	color: inherit;
}

.ncp-s2 .s2-pill__x {
	display: inline-grid;
	place-items: center;
	margin-right: calc(var(--s2-sp-1) * -1);
	color: inherit;
}

/* ── a note: plain words, muted, never a coloured box ──────────────────────────────────────────────────────────── */
.ncp-s2 .s2-note {
	display: flex;
	align-items: flex-start;
	gap: var(--s2-sp-1);
	font-size: var(--s2-meta-size);
	line-height: 1.45;
	color: var(--s2-mute);
}

.ncp-s2 .s2-note a,
.ncp-s2 .s2-note button {
	color: var(--s2-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── "Go to Gas Heaters →": the shortcut drawn first ───────────────────────────────────────────────────────────── */
.ncp-s2 .s2-shortcut {
	display: flex;
	align-items: center;
	gap: var(--s2-sp-1);
	min-height: 44px;
	padding: var(--s2-sp-1) var(--s2-sp-2);
	border: 1px solid var(--s2-line);
	border-radius: var(--s2-radius);
	background: var(--s2-bg);
	color: var(--s2-text);
	font-weight: 600;
	text-decoration: none;
}

.ncp-s2 .s2-shortcut:hover {
	color: var(--s2-text);
	box-shadow: var(--s2-shadow-hover);
}

.ncp-s2 .s2-shortcut > .s2-ic:last-child {
	margin-left: auto;
}

/* ── a divider, with or without words ("More results for ‘ceiling’") ──────────────────────────────────────────── */
.ncp-s2 .s2-divider {
	display: flex;
	align-items: center;
	gap: var(--s2-sp-2);
	margin: var(--s2-sp-3) 0 var(--s2-sp-2);
	color: var(--s2-mute);
	font-size: var(--s2-meta-size);
	font-weight: 600;
}

.ncp-s2 .s2-divider::before,
.ncp-s2 .s2-divider::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--s2-line);
}

.ncp-s2 .s2-divider:empty::after {
	display: none;
}

/* ── the page layer: fixed at the top of the window, covering nothing — only what is drawn in it does ──────────── */
.ncp-s2.ncp-s2-host {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: visible;
	z-index: var(--s2-z);
}

/* ── the toast ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.ncp-s2 .s2-toast {
	position: fixed;
	left: 50%;
	bottom: var(--s2-sp-3);
	z-index: 30;
	max-width: min(560px, calc(100vw - 32px));
	padding: 12px var(--s2-sp-2);
	border-radius: var(--s2-radius);
	background: var(--s2-text);
	color: var(--s2-bg);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	opacity: 0;
	transform: translate(-50%, 8px);
	pointer-events: none;
	transition: opacity var(--s2-dur) var(--s2-ease), transform var(--s2-dur) var(--s2-ease);
}

.ncp-s2 .s2-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ── a dialog over the page: a request to a person, compare ────────────────────────────────────────────────────── */
.ncp-s2 .s2-modal {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: grid;
	place-items: center;
	padding: var(--s2-sp-2);
}

.ncp-s2 .s2-modal__scrim,
.ncp-s2 .s2-sheet-scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .4);
	animation: ncp-s2-fade var(--s2-dur) var(--s2-ease) both;
}

.ncp-s2 .s2-modal__box {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 32px);
	overflow: auto;
	overscroll-behavior: contain;
	padding: var(--s2-sp-3);
	border-radius: var(--s2-radius);
	background: var(--s2-bg);
	color: var(--s2-text);
	animation: ncp-s2-rise var(--s2-dur) var(--s2-ease) both;
}

.ncp-s2 .s2-modal__box:focus {
	outline: none;
}

/* the request forms ("Tell us what you're looking for", "Request a quote") */
.ncp-s2 .s2-form__head {
	display: flex;
	align-items: center;
	gap: var(--s2-sp-2);
	margin-bottom: var(--s2-sp-1);
}

.ncp-s2 .s2-form__title {
	flex: 1 1 auto;
	font-size: 18px;
	font-weight: 600;
}

.ncp-s2 .s2-form__body {
	display: flex;
	flex-direction: column;
	gap: var(--s2-sp-2);
	margin-top: var(--s2-sp-2);
}

.ncp-s2 .s2-field {
	display: flex;
	flex-direction: column;
	gap: var(--s2-sp-1);
}

.ncp-s2 .s2-field__label {
	font-size: 14px;
	font-weight: 500;
}

.ncp-s2 .s2-field input,
.ncp-s2 .s2-field textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: var(--s2-sp-1) 12px;
	border: 1px solid var(--s2-line-strong);
	border-radius: var(--s2-radius);
	background: var(--s2-bg);
	color: var(--s2-text);
	font-size: 15px;
	line-height: 1.4;
}

.ncp-s2 .s2-field textarea {
	min-height: 96px;
	resize: vertical;
}

.ncp-s2 .s2-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.ncp-s2 .s2-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2-sp-1);
}

.ncp-s2 .s2-form__msg:empty {
	display: none;
}

.ncp-s2 .s2-form__msg {
	font-size: 14px;
	font-weight: 500;
	color: var(--s2-text);
}

.ncp-s2 .s2-form__done {
	display: flex;
	align-items: center;
	gap: var(--s2-sp-1);
	font-size: 15px;
	font-weight: 500;
}

/* ── the bottom sheet (the phone's filters and sort, "Show n results") ─────────────────────────────────────────── */
.ncp-s2 .s2-sheet-wrap {
	position: fixed;
	inset: 0;
	z-index: 20;
}

.ncp-s2 .s2-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 88vh;
	max-height: 88dvh;
	overflow: auto;
	overscroll-behavior: contain;
	padding: var(--s2-sp-2);
	padding: var(--s2-sp-2) var(--s2-sp-2) max(var(--s2-sp-2), env(safe-area-inset-bottom));
	border-radius: var(--s2-radius) var(--s2-radius) 0 0;
	background: var(--s2-bg);
	color: var(--s2-text);
	animation: ncp-s2-rise var(--s2-dur) var(--s2-ease) both;
}

.ncp-s2 .s2-sheet:focus {
	outline: none;
}

@keyframes ncp-s2-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ncp-s2-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ── the default page shell (a theme with no container of its own; WoodMart and XStore have theirs) ────────────── */
.ncp-s2-shell {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--s2-shell-max, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--s2-shell-pad, 16px);
	padding-right: var(--s2-shell-pad, 16px);
}

/* ── the phone: 44 px targets, 16 px fields (iOS does not zoom), dialogs rise from the bottom ─────────────────── */
@media (max-width: 768px) {
	.ncp-s2 .s2-btn {
		min-height: 44px;
	}

	.ncp-s2 .s2-icon-btn {
		width: 44px;
		height: 44px;
	}

	.ncp-s2 .s2-pill {
		min-height: 44px;
	}

	.ncp-s2 .s2-field input,
	.ncp-s2 .s2-field textarea {
		font-size: 16px;
	}

	.ncp-s2 .s2-modal {
		place-items: end center;
		padding: 0;
	}

	.ncp-s2 .s2-modal__box {
		max-width: none;
		max-height: 92vh;
		max-height: 92dvh;
		padding: var(--s2-sp-2);
		padding: var(--s2-sp-2) var(--s2-sp-2) max(var(--s2-sp-2), env(safe-area-inset-bottom));
		border-radius: var(--s2-radius) var(--s2-radius) 0 0;
	}
}

/* ── less motion when the device asks for it: nothing moves ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ncp-s2,
	.ncp-s2-host {
		--s2-dur: 0ms;
	}

	.ncp-s2 *,
	.ncp-s2 *::before,
	.ncp-s2 *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ── for a visitor in NCP's share only: Doofinder's layer and the theme's own live-search dropdowns stay closed —
      the plugin never dequeues or edits either, so everyone else keeps them whole ─────────────────────────────── */
html.ncp-s2-on .dfd-root,
html.ncp-s2-on .doofinder-layer,
html.ncp-s2-on #df-layer,
html.ncp-s2-on .wd-search-results,
html.ncp-s2-on .woodmart-search-results,
html.ncp-s2-on .search-results-wrapper .autocomplete-suggestions,
html.ncp-s2-on .et_b_search-results,
html.ncp-s2-on .ajax-search-results {
	display: none !important;
}

/* the theme's own title band above NCP's results page (WoodMart .page-title, XStore .page-heading) */
body.ncp-s2-body .page-title,
body.ncp-s2-body .wd-page-title,
body.ncp-s2-body .page-heading,
body.ncp-s2-body .et-page-heading {
	display: none !important;
}