/*!
 * UNEC — Products archive  v1.3.1
 * Figma 88:1456 "Products_archive", file Q5ckGwby9XewAE51OXln5p.
 *
 * Every selector is scoped under #top. !important is used in exactly three
 * places, each marked and explained where it appears:
 *   - the container release (4 declarations)
 *   - the [hidden] restatements (5), which beat the UA stylesheet
 *   - the search field and sort select. Those two also carry a raised
 *     selector: !important alone is NOT enough against Enfold, whose
 *     `#top div input[type='search']` is more specific than a plain class and
 *     carries !important of its own — between two !important declarations,
 *     specificity still decides. `#top .unec_prd_sec input.unec_prd_search_input`
 *     is 1-2-1 against its 1-1-2, so ours wins on class count.
 *
 * Derived numbers — read README.md before editing:
 *   1408 = 343 + 130 + 935   the split, so the ratio holds from one set of numbers
 *   68   = 24 + 20 + 24      a facet header is sized by its CHEVRON, not its text
 *   759.84 = 40+282+40+79.84+40+1+40+92+40+64+40   the card height, Figma draws 759
 *   90.14 = 14.14 + 20 + 56  Load More
 */

/* ---------------------------------------------------------------------------
 * 1. The container release
 *
 * Enfold caps content at .responsive .container { max-width: 1310px } with
 * 50px of inset. This module ships its OWN release rather than borrowing
 * unec-service's, which is enqueued only on pages carrying a unec-service
 * shortcode — claude/container-release.md.
 *
 * The third selector walks UP to .container, which is an ANCESTOR of the
 * section. !important beats Enfold's generated post-<id>.css.
 * ------------------------------------------------------------------------ */

#top .unec_svc_host .container,
#top .unec_prd_host .container,
#top .container_wrap:has(> .container .unec_prd_sec:not(.unec_prd_sec_contained)) > .container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 2. Tokens
 *
 * Declared on the section AND on the popup. The popup is appended to `#top`
 * so its `position: fixed` is not trapped by a transformed ancestor — which
 * means it is NOT inside `.unec_prd_sec`, and a token block scoped to the
 * section alone leaves every var() in the drawer unresolved. That fails
 * silently and strangely: `background: var(--unec_prd_brand)` becomes
 * transparent, and a `calc()` with an unresolved multiplier throws the whole
 * declaration away, so type falls back to the theme's size.
 * ------------------------------------------------------------------------ */

#top .unec_prd_sec,
#top .unec_prd_qv {
	--unec_prd_ink: #231F20;
	--unec_prd_ground: #F8F8F9;
	--unec_prd_white: #FFFFFF;
	--unec_prd_brand: #FFC20E;
	--unec_prd_brand_deep: #F0B200;
	--unec_prd_hair: rgba(35, 31, 32, 0.2);
	--unec_prd_mute: rgba(35, 31, 32, 0.64);
	--unec_prd_faint: rgba(35, 31, 32, 0.56);

	--unec_prd_max: 1408px;
	--unec_prd_gutter_min: 50px;
	--unec_prd_pad_v: 100px;

	/* 343 + 130 + 935 = 1408 exactly. fr, not px, so the split survives a
	 * narrower page without a second ladder. */
	--unec_prd_side_w: 343fr;
	--unec_prd_main_w: 935fr;
	--unec_prd_col_gap: 130px;

	--unec_prd_head_gap: 64px;
	--unec_prd_facet_gap: 8px;
	--unec_prd_facet_pad_x: 32px;
	--unec_prd_facet_pad_y: 24px;
	--unec_prd_opt_gap: 20px;
	--unec_prd_bar_gap: 48px;

	--unec_prd_card_pad: 40px;
	--unec_prd_card_gap: 40px;
	--unec_prd_grid_gap: 12px;
	--unec_prd_media_h: 282px;
	--unec_prd_media_inset: 32px;
	--unec_prd_btn_h: 64px;
	--unec_prd_more_gap: 80px;

	--unec_prd_font: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Pretendard typo metrics, USE_TYPO_METRICS set. 2048 / 1949 / 494 / 1448,
	 * verified with fontTools on five previous modules. */
	--unec_prd_upm_asc: 0.9516601563;
	--unec_prd_upm_desc: 0.2412109375;
	--unec_prd_upm_cap: 0.7070312500;

	/* The responsive rules move these MULTIPLIERS and never the values, because
	 * --unec_prd_pt / --unec_prd_pb are written INLINE by PHP and an inline
	 * custom property beats every stylesheet rule — claude/section-padding.md
	 * trap 1. A multiplier ladder is monotonic by construction. */
	--unec_prd_pad_scale: 1;
	--unec_prd_gap_scale: 1;
	--unec_prd_type_scale: 1;
}

/* ---------------------------------------------------------------------------
 * 3. Cap-height trim, as a reusable pair
 *
 * Set --unec_prd_tfs / --unec_prd_tlh on any BLOCK element and it is trimmed
 * to its cap height, so "40px below the image" is 40px to the top of the
 * letters — which is what Figma measures.
 * ------------------------------------------------------------------------ */

#top .unec_prd_trim {
	--unec_prd_half_lead: calc((var(--unec_prd_tlh) - (var(--unec_prd_upm_asc) + var(--unec_prd_upm_desc)) * var(--unec_prd_tfs)) / 2);
	--unec_prd_trim_top: calc(var(--unec_prd_half_lead) + (var(--unec_prd_upm_asc) - var(--unec_prd_upm_cap)) * var(--unec_prd_tfs));
	--unec_prd_trim_bot: calc(var(--unec_prd_half_lead) + var(--unec_prd_upm_desc) * var(--unec_prd_tfs));

	font-size: var(--unec_prd_tfs);
	line-height: var(--unec_prd_tlh);
}

/* `display: table` stops the negative margins collapsing into the element's
 * own, so this composes with the flex gaps instead of fighting them. */
#top .unec_prd_trim::before,
#top .unec_prd_trim::after {
	content: '';
	display: table;
}

#top .unec_prd_trim::before {
	margin-bottom: calc(-1 * var(--unec_prd_trim_top));
}

#top .unec_prd_trim::after {
	margin-top: calc(-1 * var(--unec_prd_trim_bot));
}

@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
	#top .unec_prd_trim {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
	}

	#top .unec_prd_trim::before,
	#top .unec_prd_trim::after {
		content: none;
	}
}

/* ---------------------------------------------------------------------------
 * 4. The section
 * ------------------------------------------------------------------------ */

#top .unec_prd_sec {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	background-color: var(--unec_prd_white);
	padding-top: calc(var(--unec_prd_pt, var(--unec_prd_pad_v)) * var(--unec_prd_pad_scale));
	padding-bottom: calc(var(--unec_prd_pb, var(--unec_prd_pad_v)) * var(--unec_prd_pad_scale));
	padding-left: max(var(--unec_prd_gutter_min), calc((100% - var(--unec_prd_max)) / 2));
	padding-right: max(var(--unec_prd_gutter_min), calc((100% - var(--unec_prd_max)) / 2));
	color: var(--unec_prd_ink);
}

/*
 * Enfold's bare-element rules beat inheritance, so the family is restated on
 * descendants — claude/services-page.md trap 1. Cap trim computed against the
 * wrong face shifts the whole rhythm, and it does so *quietly*: the popup
 * title came out 38.53 tall instead of 39.59, which is 0.688 x 56 — Verdana's
 * cap ratio, not Pretendard's 0.707.
 *
 * The list is repeated for the popup rather than folded into `:where()`,
 * because `:where()` contributes no specificity and these have to keep beating
 * the theme's own element rules.
 *
 * td/th/span are here for the rich text: that markup is the author's, so it
 * gets no classes of ours and inherits nothing it is not given.
 */
#top .unec_prd_sec,
#top .unec_prd_sec p,
#top .unec_prd_sec a,
#top .unec_prd_sec li,
#top .unec_prd_sec h2,
#top .unec_prd_sec h3,
#top .unec_prd_sec h4,
#top .unec_prd_sec dt,
#top .unec_prd_sec dd,
#top .unec_prd_sec td,
#top .unec_prd_sec th,
#top .unec_prd_sec span,
#top .unec_prd_sec input,
#top .unec_prd_sec select,
#top .unec_prd_sec button,
#top .unec_prd_qv,
#top .unec_prd_qv p,
#top .unec_prd_qv a,
#top .unec_prd_qv li,
#top .unec_prd_qv h2,
#top .unec_prd_qv h3,
#top .unec_prd_qv h4,
#top .unec_prd_qv dt,
#top .unec_prd_qv dd,
#top .unec_prd_qv td,
#top .unec_prd_qv th,
#top .unec_prd_qv span,
#top .unec_prd_qv input,
#top .unec_prd_qv select,
#top .unec_prd_qv button {
	font-family: var(--unec_prd_font);
}

#top .unec_prd_inner {
	box-sizing: border-box;
	max-width: var(--unec_prd_max);
	margin: 0 auto;
}

#top .unec_prd_form {
	display: grid;
	grid-template-columns: var(--unec_prd_side_w) var(--unec_prd_main_w);
	column-gap: calc(var(--unec_prd_col_gap) * var(--unec_prd_gap_scale));
	align-items: start;
	margin: 0;
}

#top .unec_prd_sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * 5. Sidebar
 * ------------------------------------------------------------------------ */

#top .unec_prd_side {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

#top .unec_prd_side_panel {
	display: flex;
	flex-direction: column;
	gap: calc(var(--unec_prd_head_gap) * var(--unec_prd_gap_scale));
	min-width: 0;
}

#top .unec_prd_side_head {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/*
 * BASELINE alignment, and both children cap-trimmed. That is what keeps the
 * row exactly as tall as the heading's cap (22.63 at 32px) — so adding this
 * control does not move the search box, and Figma's 24 to it still measures 24.
 */
#top .unec_prd_side_top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

#top .unec_prd_clear_top {
	display: block;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--unec_prd_mute);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 4px;
}

#top .unec_prd_clear_top:hover,
#top .unec_prd_clear_top:focus-visible {
	color: var(--unec_prd_ink);
}

#top .unec_prd_clear_top[hidden] {
	display: none !important;
}

#top .unec_prd_clear_label {
	--unec_prd_tfs: calc(17px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(26px * var(--unec_prd_type_scale));

	display: block;
	font-weight: 500;
}

#top .unec_prd_side_title {
	--unec_prd_tfs: calc(32px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(38px * var(--unec_prd_type_scale));

	margin: 0;
	padding: 0;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--unec_prd_ink);
	text-transform: none;
}

/* The search box: 343 x 72, 2px border. Figma puts the icon 32 from the OUTER
 * edge, so the padding is 32 minus the border. */
#top .unec_prd_search {
	--unec_prd_search_bw: 2px;

	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 72px;
	padding: calc(24px - var(--unec_prd_search_bw)) calc(32px - var(--unec_prd_search_bw));
	background: var(--unec_prd_white);
	border: var(--unec_prd_search_bw) solid var(--unec_prd_ink);
}

#top .unec_prd_search_icon {
	display: flex;
	flex: 0 0 auto;
	color: var(--unec_prd_brand);
}

/*
 * !important AND a raised selector, deliberately — neither alone is enough.
 *
 * Enfold styles form fields hard and its declarations carry !important of
 * their own, so !important on a plain class does not win: between two
 * !important declarations SPECIFICITY still decides, and
 * `#top div input[type='search']` (1-1-2 — an attribute selector counts as a
 * class) beats `#top .unec_prd_search_input` (1-1-0) on type count. Hence
 * `#top .unec_prd_sec input.unec_prd_search_input`, at 1-2-1.
 *
 * Without it the field arrives with the theme's border, its own height, a
 * radius and its own type, inside our 2px box. The entries that look unusual
 * are the ones that actually break the geometry: `height`/`min-height`
 * (Enfold sets a fixed field height, which fights the 72px box),
 * `border-radius`, and `background-image` (Enfold draws its own control art).
 *
 * tests/out/enfold-forms.html injects the theme's real form CSS and the suite
 * asserts these survive it, negative-controlled by dropping the raised
 * selector — without which the search box blows out to 104px.
 */
#top .unec_prd_sec input.unec_prd_search_input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--unec_prd_ink) !important;
	font-family: var(--unec_prd_font) !important;
	font-size: calc(20px * var(--unec_prd_type_scale)) !important;
	line-height: 24px !important;
	letter-spacing: -0.01em !important;
	font-weight: 400 !important;
	text-transform: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

#top .unec_prd_sec input.unec_prd_search_input::placeholder {
	color: var(--unec_prd_mute) !important;
	opacity: 1 !important;
}

#top .unec_prd_sec input.unec_prd_search_input:focus {
	outline: none;
}

#top .unec_prd_search:focus-within {
	box-shadow: 0 0 0 3px rgba(255, 194, 14, 0.55);
}

#top .unec_prd_search_go {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	padding: 0;
	background: transparent;
}

#top .unec_prd_facets {
	display: flex;
	flex-direction: column;
	gap: var(--unec_prd_facet_gap);
}

#top .unec_prd_facet {
	background: var(--unec_prd_ground);
}

#top .unec_prd_facet_h {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	text-transform: none;
}

/* 24 + 20 + 24 = 68. The header's height comes from the 20px chevron, not
 * from the label — which is why a longer facet name does not change it. */
#top .unec_prd_facet_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: var(--unec_prd_facet_pad_y) var(--unec_prd_facet_pad_x);
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--unec_prd_ink);
	text-align: left;
	cursor: pointer;
	box-shadow: none;
}

/*
 * The open header's hairline is an INSET SHADOW, not a border. Figma's 68
 * includes the rule; a real border on an auto-height box adds to it, so the
 * open panel would sit 1px taller than every collapsed one and the 8px gaps
 * would stop being equal. A shadow paints without occupying space.
 */
#top .unec_prd_facet.is_open .unec_prd_facet_head {
	box-shadow: inset 0 -1px 0 0 var(--unec_prd_hair);
}

#top .unec_prd_facet_label {
	--unec_prd_tfs: calc(20px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(30px * var(--unec_prd_type_scale));

	display: block;
	font-weight: 500;
	letter-spacing: -0.01em;
}

#top .unec_prd_facet_chev {
	display: flex;
	flex: 0 0 auto;
	color: var(--unec_prd_ink);
	transition: transform 0.18s ease;
}

#top .unec_prd_facet.is_open .unec_prd_facet_chev {
	transform: rotate(180deg);
}

#top .unec_prd_facet_head:hover .unec_prd_facet_chev,
#top .unec_prd_facet_head:focus-visible .unec_prd_facet_chev {
	color: var(--unec_prd_brand);
}

#top .unec_prd_facet_head:focus-visible {
	outline: 2px solid var(--unec_prd_ink);
	outline-offset: -4px;
}

#top .unec_prd_facet_body {
	padding: 32px var(--unec_prd_facet_pad_x);
}

/* An author rule beats the UA stylesheet's [hidden] { display: none }
 * regardless of specificity, so anything this module gives a `display` to has
 * to restate it — claude/certificates-page.md. */
#top .unec_prd_facet_body[hidden] {
	display: none !important;
}

#top .unec_prd_opts {
	display: flex;
	flex-direction: column;
	gap: var(--unec_prd_opt_gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_prd_opt_row {
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_prd_opt {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	min-height: 16px;
}

#top .unec_prd_opt.is_empty {
	opacity: 0.45;
}

/* The real control stays in the tab order and keeps its semantics; the box
 * beside it is what gets drawn. */
#top .unec_prd_check {
	position: absolute;
	width: 16px;
	height: 16px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

#top .unec_prd_box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	background: var(--unec_prd_white);
	border: 1.5px solid var(--unec_prd_hair);
	color: var(--unec_prd_ink);
}

#top .unec_prd_box .unec_prd_icon {
	opacity: 0;
}

#top .unec_prd_check:checked + .unec_prd_box {
	background: var(--unec_prd_brand);
	border-color: var(--unec_prd_brand);
}

#top .unec_prd_check:checked + .unec_prd_box .unec_prd_icon {
	opacity: 1;
}

#top .unec_prd_check:focus-visible + .unec_prd_box {
	outline: 2px solid var(--unec_prd_ink);
	outline-offset: 3px;
}

/*
 * BLOCK, not flex. The Capsize fallback puts `display: table` pseudo-elements
 * on a trimmed element, and inside a flex container those become flex ITEMS —
 * two invisible columns that break the layout and trim nothing. Anything
 * carrying .unec_prd_trim has to be a block container; the label and its count
 * are inline anyway, so they sit on one baseline for free.
 */
#top .unec_prd_opt_text {
	--unec_prd_tfs: calc(17px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(26px * var(--unec_prd_type_scale));

	display: block;
	min-width: 0;
	white-space: nowrap;
}

#top .unec_prd_opt_count {
	margin-left: 4px;
}

#top .unec_prd_opt_label {
	font-weight: 500;
}

#top .unec_prd_opt_count {
	font-size: calc(14px * var(--unec_prd_type_scale));
	font-weight: 400;
	color: var(--unec_prd_faint);
}

/* Present and usable whenever the script has not removed it — which is
 * exactly the no-JS case. */
#top .unec_prd_apply {
	display: block;
}

#top .unec_prd_apply_btn {
	width: 100%;
	padding: 18px 24px;
	background: var(--unec_prd_ink);
	color: var(--unec_prd_white);
	border: 0;
	font-size: 17px;
	line-height: 26px;
	font-weight: 500;
	cursor: pointer;
}

/* The mobile disclosure. Hidden on desktop, where the panel is always open. */
#top .unec_prd_side_toggle {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 6. Toolbar
 * ------------------------------------------------------------------------ */

#top .unec_prd_results {
	min-width: 0;
	transition: opacity 0.15s ease;
}

#top .unec_prd_results[aria-busy='true'] {
	opacity: 0.45;
}

#top .unec_prd_bar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: calc(var(--unec_prd_bar_gap) * var(--unec_prd_gap_scale));
}

#top .unec_prd_bar_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 20px;
}

#top .unec_prd_showing {
	--unec_prd_tfs: calc(20px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(30px * var(--unec_prd_type_scale));

	margin: 0;
	font-weight: 500;
	letter-spacing: -0.01em;
}

#top .unec_prd_sort {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

/*
 * A native <select> stripped back to the drawn text: keyboard behaviour, the
 * platform picker on a phone, and no bespoke listbox to get wrong.
 *
 * !important for the same reason as the search field. `background-image: none`
 * matters twice over here — Enfold paints its own dropdown arrow into the
 * select, which would sit alongside the chevron we draw beside it.
 */
#top .unec_prd_sec select.unec_prd_sort_select {
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--unec_prd_ink) !important;
	font-family: var(--unec_prd_font) !important;
	font-size: calc(18px * var(--unec_prd_type_scale)) !important;
	line-height: 20px !important;
	letter-spacing: -0.01em !important;
	font-weight: 500 !important;
	text-transform: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	text-align: right;
	text-align-last: right;
	direction: ltr;
}

#top .unec_prd_sec select.unec_prd_sort_select:focus-visible {
	outline: 2px solid var(--unec_prd_ink);
	outline-offset: 4px;
}

#top .unec_prd_sort_chev {
	display: flex;
	flex: 0 0 auto;
	color: var(--unec_prd_brand);
	pointer-events: none;
}

#top .unec_prd_bar_rule {
	height: 1px;
	background: var(--unec_prd_ink);
	opacity: 0.2;
}

/* ---------------------------------------------------------------------------
 * 7. The grid and the card
 * ------------------------------------------------------------------------ */

#top .unec_prd_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--unec_prd_grid_gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_prd_card {
	display: flex;
	flex-direction: column;
	gap: calc(var(--unec_prd_card_gap) * var(--unec_prd_gap_scale));
	box-sizing: border-box;
	margin: 0;
	padding: calc(var(--unec_prd_card_pad) * var(--unec_prd_gap_scale));
	background: var(--unec_prd_ground);
	list-style: none;
}

#top .unec_prd_media {
	position: relative;
	box-sizing: border-box;
	height: calc(var(--unec_prd_media_h) * var(--unec_prd_gap_scale));
	padding: calc(var(--unec_prd_media_inset) * var(--unec_prd_gap_scale));
	background: var(--unec_prd_white);
}

#top .unec_prd_gal {
	position: relative;
	height: 100%;

	/* splide-core hides .splide until it initialises, so with JavaScript off
	 * every card would show an empty white plate. Restored unconditionally
	 * rather than through :not(.is-initialized), so nothing depends on when
	 * Splide adds its own class. */
	visibility: visible;
}

#top .unec_prd_track,
#top .unec_prd_slides {
	height: 100%;
}

#top .unec_prd_slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The un-mounted state shows the first photo and clips the rest — which is
 * what splide-core's own `overflow: hidden` on the track already does. Gated
 * on OUR class, never on Splide's `.is-initialized`: Splide adds that in the
 * LAST statement of mount(), long after Layout has measured the slides, and a
 * `display: none` slide measures as an all-zero rect. claude/services-page.md
 * trap 6 and claude/about-page-story-and-team.md. */
#top .unec_prd_gal:not(.unec_prd_ready) .unec_prd_slides {
	width: 100%;
}

#top .unec_prd_gal:not(.unec_prd_ready) .unec_prd_slide {
	width: 100%;
	flex: 0 0 100%;
}

#top .unec_prd_photo {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Bare 32px chevrons inset 12 and vertically centred — no circle, as drawn. */
#top .unec_prd_arrows {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

#top .unec_prd_arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--unec_prd_ink);
	cursor: pointer;
	pointer-events: auto;
	opacity: 1;
	box-shadow: none;
}

#top .unec_prd_arrow_prev {
	left: calc(12px - var(--unec_prd_media_inset));
}

#top .unec_prd_arrow_next {
	right: calc(12px - var(--unec_prd_media_inset));
}

#top .unec_prd_arrow:hover,
#top .unec_prd_arrow:focus-visible {
	color: var(--unec_prd_brand);
}

#top .unec_prd_arrow:disabled {
	opacity: 0.3;
}

/* 5 dots of 8 on a 10 gap = 80 wide, 20 above the plate's bottom edge. */
#top .unec_prd_dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(20px - var(--unec_prd_media_inset));
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_prd_dots li {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 0;
}

#top .unec_prd_dots .splide__pagination__page {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(35, 31, 32, 0.2);
	opacity: 1;
	transform: none;
	cursor: pointer;
}

#top .unec_prd_dots .splide__pagination__page.is-active {
	background: var(--unec_prd_ink);
	transform: none;
}

#top .unec_prd_head {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

#top .unec_prd_title {
	--unec_prd_tfs: calc(28px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(34px * var(--unec_prd_type_scale));

	margin: 0;
	padding: 0;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-transform: none;
}

#top .unec_prd_title_link {
	color: inherit;
	text-decoration: none;
}

#top .unec_prd_title_link:hover,
#top .unec_prd_title_link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

#top .unec_prd_meta {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#top .unec_prd_kv {
	--unec_prd_tfs: calc(17px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(26px * var(--unec_prd_type_scale));

	margin: 0;
	min-width: 0;
}

#top .unec_prd_k {
	color: var(--unec_prd_mute);
	font-weight: 400;
}

#top .unec_prd_v {
	color: var(--unec_prd_ink);
	font-weight: 500;
}

#top .unec_prd_rule {
	height: 1px;
	background: var(--unec_prd_ink);
	opacity: 0.2;
}

/* 3 rows of 20 on a 16 gutter = 92. The row height is the ICON. */
#top .unec_prd_specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 12px;
	row-gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_prd_spec {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_prd_spec_icon {
	display: flex;
	flex: 0 0 auto;
	color: var(--unec_prd_ink);
}

#top .unec_prd_spec .unec_prd_kv {
	display: block;
	white-space: nowrap;
}

#top .unec_prd_v {
	margin-left: 4px;
}

#top .unec_prd_actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

#top .unec_prd_more {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--unec_prd_btn_h);
	height: var(--unec_prd_btn_h);
	padding: 20px;
	background: var(--unec_prd_ink);
	color: var(--unec_prd_white);
	border: 0;
	cursor: pointer;
	text-decoration: none;
}

#top .unec_prd_more:hover,
#top .unec_prd_more:focus-visible {
	background: var(--unec_prd_brand);
	color: var(--unec_prd_ink);
}

#top .unec_prd_quote {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 1 1 auto;
	box-sizing: border-box;
	min-height: var(--unec_prd_btn_h);
	padding: 20px 32px;
	background: var(--unec_prd_brand);
	color: var(--unec_prd_ink);
	text-decoration: none;
}

#top .unec_prd_quote:hover,
#top .unec_prd_quote:focus-visible {
	background: var(--unec_prd_brand_deep);
}

#top .unec_prd_quote_chev {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: var(--unec_prd_ink);
	color: var(--unec_prd_brand);
	border-radius: 999px;
}

#top .unec_prd_quote_label {
	--unec_prd_tfs: calc(17px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(26px * var(--unec_prd_type_scale));

	display: block;
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * 8. Load More, and the empty state
 * ------------------------------------------------------------------------ */

#top .unec_prd_more_wrap {
	display: flex;
	justify-content: center;
	margin-top: calc(var(--unec_prd_more_gap) * var(--unec_prd_gap_scale));
}

/* Restated for the same reason as the facet body: an author `display` beats
 * the UA's [hidden] rule. Measured in the suite by layout, not by the
 * property — claude/certificates-page.md. */
#top .unec_prd_more_wrap[hidden] {
	display: none !important;
}

#top .unec_prd_loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	color: var(--unec_prd_ink);
	text-decoration: none;
	cursor: pointer;
}

#top .unec_prd_loadmore_label {
	--unec_prd_tfs: calc(20px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(30px * var(--unec_prd_type_scale));

	display: block;
	font-weight: 500;
	letter-spacing: -0.01em;
}

#top .unec_prd_loadmore_circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--unec_prd_ink);
	color: var(--unec_prd_white);
	border-radius: 999px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

#top .unec_prd_loadmore:hover .unec_prd_loadmore_circle,
#top .unec_prd_loadmore:focus-visible .unec_prd_loadmore_circle {
	background: var(--unec_prd_brand);
	color: var(--unec_prd_ink);
}

#top .unec_prd_loadmore.is_busy {
	pointer-events: none;
	opacity: 0.5;
}

#top .unec_prd_empty {
	padding: 80px 0;
	text-align: center;
}

#top .unec_prd_empty_title {
	margin: 0 0 12px;
	font-size: calc(28px * var(--unec_prd_type_scale));
	line-height: 34px;
	font-weight: 500;
	letter-spacing: -0.02em;
}

#top .unec_prd_empty_body {
	margin: 0 0 32px;
	font-size: 17px;
	line-height: 26px;
	color: var(--unec_prd_mute);
}

#top .unec_prd_empty .unec_prd_clear {
	padding: 18px 32px;
	background: var(--unec_prd_ink);
	color: var(--unec_prd_white);
	border: 0;
	font-size: 17px;
	line-height: 26px;
	font-weight: 500;
	cursor: pointer;
}

#top .unec_prd_empty .unec_prd_clear:hover,
#top .unec_prd_empty .unec_prd_clear:focus-visible {
	background: var(--unec_prd_brand);
	color: var(--unec_prd_ink);
}

/* ---------------------------------------------------------------------------
 * 9. The product popup — Figma 88:2049 and 88:3463
 *
 * A right-hand drawer 1095 wide, content 903 inside a 96 inset:
 *   1095 = 96 + 903 + 96
 *   hero 903 = 414 + 64 + 425
 *   tab 52 = 20 + 12.02 + 20   (the cap, as everywhere else)
 * ------------------------------------------------------------------------ */

#top .unec_prd_qv {
	--unec_prd_qv_w: 1095px;
	--unec_prd_qv_inset: 96px;
	--unec_prd_qv_media_w: 414fr;
	--unec_prd_qv_intro_w: 425fr;
	--unec_prd_qv_col_gap: 64px;
	--unec_prd_qv_plate_h: 450px;
	--unec_prd_qv_photo_h: 279px;
	--unec_prd_qv_tabs_gap: 80px;
	--unec_prd_qv_panel_gap: 64px;
	--unec_prd_qv_dl_gap: 64px;
	--unec_prd_qv_pad_b: var(--unec_prd_qv_inset);

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	padding: 0;
	background: rgba(35, 31, 32, 0.72);
}

#top .unec_prd_qv[hidden] {
	display: none !important;
}

#top .unec_prd_qv_panel {
	position: relative;
	box-sizing: border-box;
	width: min(var(--unec_prd_qv_w), 100%);
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--unec_prd_qv_inset);

	/*
	 * The bottom pad is its own token, and picks up the phone's home-indicator
	 * inset on top of it — the last row of a spec table ending flush against
	 * the bezel is the one place a drawer always feels unfinished.
	 */
	padding-bottom: calc(var(--unec_prd_qv_pad_b) + env(safe-area-inset-bottom, 0px));
	background: var(--unec_prd_white);
	-webkit-overflow-scrolling: touch;
}

/* Flush into the drawer's own corner, not inset with the content. */
#top .unec_prd_qv_close {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0;
	padding: 0;
	background: var(--unec_prd_brand);
	border: 0;
	border-radius: 0;
	color: var(--unec_prd_ink);
	cursor: pointer;
	z-index: 2;
}

#top .unec_prd_qv_close:hover,
#top .unec_prd_qv_close:focus-visible {
	background: var(--unec_prd_ink);
	color: var(--unec_prd_brand);
}

/* --------------------------------------------------------------- the hero */

#top .unec_prd_qv_hero {
	display: grid;
	grid-template-columns: var(--unec_prd_qv_media_w) var(--unec_prd_qv_intro_w);
	column-gap: var(--unec_prd_qv_col_gap);
	align-items: center;
}

/*
 * The plate is bigger here than on the card and has no inset of its own, so
 * the module's media tokens are re-pointed rather than the rules rewritten —
 * the arrows and dots position themselves off those same tokens.
 */
#top .unec_prd_qv .unec_prd_media {
	--unec_prd_media_inset: 0px;

	height: var(--unec_prd_qv_plate_h);
	padding: 0;
	background: #ffffff;
}

#top .unec_prd_qv .unec_prd_photo {
	max-height: var(--unec_prd_qv_photo_h);
}

#top .unec_prd_qv .unec_prd_dots {
	bottom: 28px;
}

#top .unec_prd_qv_intro {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

#top .unec_prd_qv_titles {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

#top .unec_prd_qv_title {
	--unec_prd_tfs: calc(56px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(52px * var(--unec_prd_type_scale));

	margin: 0;
	padding: 0;
	font-weight: 600;
	letter-spacing: -0.04em;
	text-transform: none;
	overflow-wrap: break-word;
}

/* 32 + 24 + 64 + 93 + 32 = 245, so space-between yields the drawn 64 gap. */
#top .unec_prd_quote_qv {
	flex: 0 0 auto;
	width: 245px;
	max-width: 100%;
}

/* --------------------------------------------------------------- the tabs */

#top .unec_prd_tabs {
	margin-top: var(--unec_prd_qv_tabs_gap);
}

#top .unec_prd_tabbar,
#top .unec_prd_tablist {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

/*
 * The bar SCROLLS rather than wraps. Four tabs will not fit a phone, and
 * wrapping them onto three lines pushes the content that matters off the
 * screen; a single row that can be swiped keeps the tabs where they are drawn
 * and keeps the panel where the reader left it.
 *
 * The negative margin lets it bleed to the drawer's edges so the last tab can
 * be scrolled fully into view, and `flex: 0 0 auto` on the tabs stops them
 * being squeezed instead of overflowing — without it there is nothing to
 * scroll.
 */
#top .unec_prd_tabbar {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	margin-left: calc(-1 * var(--unec_prd_qv_inset));
	margin-right: calc(-1 * var(--unec_prd_qv_inset));
	padding-left: var(--unec_prd_qv_inset);
	padding-right: var(--unec_prd_qv_inset);
	scroll-padding-left: var(--unec_prd_qv_inset);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

#top .unec_prd_tabbar::-webkit-scrollbar {
	display: none;
}

#top .unec_prd_tablist {
	flex: 0 0 auto;
}

#top .unec_prd_tab {
	flex: 0 0 auto;
}

#top .unec_prd_tab {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	padding: 20px 32px;
	background: var(--unec_prd_ground);
	border: 0;
	border-radius: 0;
	color: var(--unec_prd_ink);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

#top .unec_prd_tab_label {
	--unec_prd_tfs: calc(17px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(26px * var(--unec_prd_type_scale));

	display: block;
	font-weight: 500;
}

#top .unec_prd_tab.is_active {
	background: var(--unec_prd_ink);
	color: var(--unec_prd_white);
}

#top .unec_prd_tab:not(.is_active):hover,
#top .unec_prd_tab:not(.is_active):focus-visible {
	background: var(--unec_prd_brand);
}

#top .unec_prd_tab:focus-visible {
	outline: 2px solid var(--unec_prd_ink);
	outline-offset: 2px;
}

#top .unec_prd_panels {
	margin-top: var(--unec_prd_qv_panel_gap);
}

#top .unec_prd_panel:focus-visible {
	outline: 2px solid var(--unec_prd_ink);
	outline-offset: 8px;
}

#top .unec_prd_panel[hidden] {
	display: none !important;
}

/* ------------------------------------------------ Technical Features, as
 * written in ONE rich text field.
 *
 * The design draws two headed tables side by side, and the client writes them
 * in a single editor — so the panel is a two-column FLOW rather than two
 * boxes. `break-inside: avoid` keeps a table whole and `break-after: avoid`
 * keeps its heading attached to it, which is what makes "heading, table,
 * heading, table" land as the drawn layout without the author arranging
 * anything.
 *
 * Cap trim is not applied in here: the markup is the author's and cannot
 * carry the class. Line heights are the design's.
 * ------------------------------------------------------------------------ */

#top .unec_prd_rt {
	column-count: 2;
	column-gap: 64px;
}

#top .unec_prd_rt > *:first-child {
	margin-top: 0;
}

#top .unec_prd_rt h2,
#top .unec_prd_rt h3,
#top .unec_prd_rt h4 {
	margin: 0 0 24px;
	font-size: calc(28px * var(--unec_prd_type_scale));
	line-height: 34px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--unec_prd_ink);
	text-transform: none;
	break-after: avoid;
	page-break-after: avoid;
}

#top .unec_prd_rt table {
	width: 100%;
	margin: 0 0 40px;
	border: 0;
	border-collapse: collapse;
	break-inside: avoid;
	page-break-inside: avoid;
}

#top .unec_prd_rt tr {
	background: var(--unec_prd_white);
}

#top .unec_prd_rt tr:nth-child(odd) {
	background: var(--unec_prd_ground);
}

#top .unec_prd_rt th,
#top .unec_prd_rt td {
	padding: 14px;
	border: 0;
	font-size: calc(17px * var(--unec_prd_type_scale));
	line-height: 26px;
	vertical-align: middle;
}

#top .unec_prd_rt td:first-child,
#top .unec_prd_rt th:first-child {
	color: var(--unec_prd_mute);
	font-weight: 400;
	text-align: left;
}

#top .unec_prd_rt td:last-child,
#top .unec_prd_rt th:last-child {
	color: var(--unec_prd_ink);
	font-weight: 500;
	text-align: right;
}

#top .unec_prd_rt td:only-child,
#top .unec_prd_rt th:only-child {
	text-align: left;
}

#top .unec_prd_rt p,
#top .unec_prd_rt ul,
#top .unec_prd_rt ol {
	margin: 0 0 26px;
	font-size: calc(17px * var(--unec_prd_type_scale));
	line-height: 26px;
	color: var(--unec_prd_ink);
}

#top .unec_prd_rt ul,
#top .unec_prd_rt ol {
	padding-left: 20px;
}

#top .unec_prd_rt li {
	margin: 0 0 8px;
	list-style: inherit;
}

#top .unec_prd_rt img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------ Power Calculator
 * Figma 184:14059. Card 285 x 128 on a 24 gutter: 3 x 285 + 2 x 24 = 903.
 * Stepper 237 = 44 + 16 + 117 + 16 + 44.
 * ------------------------------------------------------------------------ */

#top .unec_prd_calc {
	--unec_prd_calc_card: 285px;
	--unec_prd_calc_gap: 24px;
}

/*
 * FLEX, not grid — because the last row has two cards and Figma centres them.
 * A grid fills from the start and there is no clean way to centre a short
 * final row; a wrapping flex row with `justify-content: center` centres the
 * remainder for free, and a full row still lands flush because the basis is
 * computed to fill exactly.
 */
#top .unec_prd_calc_grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_prd_calc_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;

	/*
	 * A FIXED card width, and the wrap decides the column count.
	 *
	 * This was a basis of `(100% - gaps) / cols` with `cols` stepped down by
	 * breakpoint, and that is a guess at a width the browser already knows: at
	 * a 1000px viewport the drawer is full width and gives the grid 919px —
	 * ample for 3 x 285 + 2 x 24 = 903 — but the `max-width: 1024` rule had
	 * already forced two columns and left 200px of slack either side.
	 *
	 * 285 is not arbitrary: it is the stepper's 237 plus 2 x 24 of padding, so
	 * it is the narrowest the card can be before the drawn controls stop
	 * fitting. Fixing it and letting flex-wrap count the columns means the grid
	 * fits as many as genuinely fit, at any width, with no breakpoint to keep
	 * in step.
	 */
	flex: 0 0 var(--unec_prd_calc_card);
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 24px;
	background: var(--unec_prd_white);

	/*
	 * The frame is an INSET SHADOW, not a border — the same reason the facet
	 * header's hairline is. Figma's 285 card has 24 padding and a 237 stepper,
	 * which fills it exactly; a real border eats 2px of that, the stepper no
	 * longer fits, flexbox's min-content floor pushes the card out to 287, and
	 * the label wraps to two lines and takes the height from 128 to 156. A
	 * shadow paints the same 1px and costs no layout.
	 */
	box-shadow: inset 0 0 0 1px rgba(35, 31, 32, 0.12);
	list-style: none;
}

#top .unec_prd_calc_label {
	--unec_prd_tfs: calc(17px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(26px * var(--unec_prd_type_scale));

	display: block;
	width: 100%;
	margin: 0;
	font-weight: 500;
	text-align: center;
	cursor: pointer;

	/*
	 * A 1% tracking nudge, and the only deviation from the type token on this
	 * panel. Measured: the longest label, "Bulb - Incandescent - 60 Watt",
	 * renders 240px at tracking 0 against the 237 the card gives it — Figma
	 * fits it, the browser is 3px wider. Left alone it wraps to two lines and
	 * takes that card, AND every card beside it, from 128 to 154, so one
	 * string ruins a whole row of the grid. -0.01em is 0.17px a character and
	 * invisible; a ragged row is not.
	 */
	letter-spacing: -0.01em;
}

#top .unec_prd_calc_step {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
}

#top .unec_prd_calc_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 12px;
	background: var(--unec_prd_ink);
	border: 0;
	border-radius: 999px;
	color: var(--unec_prd_white);
	cursor: pointer;
}

#top .unec_prd_calc_btn:hover,
#top .unec_prd_calc_btn:focus-visible {
	background: var(--unec_prd_brand);
	color: var(--unec_prd_ink);
}

/*
 * A minus at zero is `disabled` — assistive tech should not offer "one fewer"
 * of nothing, and the click is pointless — but it is NOT dimmed, because Figma
 * draws every minus solid dark and dimming nineteen of twenty cards is the
 * loudest thing on the panel. The state is legible anyway: the count beside it
 * reads 0. A deliberate departure from the usual convention.
 */
#top .unec_prd_calc_btn:disabled {
	cursor: default;
}

#top .unec_prd_calc_btn:disabled:hover {
	background: var(--unec_prd_ink);
	color: var(--unec_prd_white);
}

/* The + turns brand yellow once the device is counted — the only state Figma
 * draws, and the thing that makes a filled card readable at a glance. */
#top .unec_prd_calc_item.is_active .unec_prd_calc_plus {
	background: var(--unec_prd_brand);
	color: var(--unec_prd_ink);
}

/*
 * Same treatment as the search field and the sort select: Enfold styles number
 * inputs hard and partly with !important, so this needs a raised selector as
 * well as !important. 117 x 48 with an 18/48 pad is the drawn box.
 */
#top .unec_prd_calc .unec_prd_calc_step input.unec_prd_calc_input {
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	width: 117px !important;
	max-width: 117px !important;
	min-width: 0 !important;
	height: 48px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 18px 8px !important;
	background: var(--unec_prd_white) !important;
	background-image: none !important;
	border: 1px solid rgba(35, 31, 32, 0.12) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--unec_prd_mute) !important;
	font-family: var(--unec_prd_font) !important;
	font-size: calc(17px * var(--unec_prd_type_scale)) !important;
	line-height: 12px !important;
	font-weight: 500 !important;
	text-align: center !important;
	text-transform: none !important;
	-webkit-appearance: textfield !important;
	appearance: textfield !important;
}

/* The spinners would sit on top of the buttons that replace them. */
#top .unec_prd_calc_input::-webkit-outer-spin-button,
#top .unec_prd_calc_input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#top .unec_prd_calc_input::placeholder {
	color: var(--unec_prd_mute) !important;
	opacity: 1 !important;
}

#top .unec_prd_calc_item.is_active input.unec_prd_calc_input {
	border-color: var(--unec_prd_ink) !important;
	color: var(--unec_prd_ink) !important;
}

#top .unec_prd_calc .unec_prd_calc_step input.unec_prd_calc_input:focus-visible {
	outline: 2px solid var(--unec_prd_ink);
	outline-offset: 2px;
}

#top .unec_prd_calc_go {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* ---------------------------------------------- Technical Drawings, and the
 * download control both tabs end on. */

#top .unec_prd_drawing {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0 auto;
}

#top .unec_prd_dl_wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--unec_prd_qv_dl_gap);
}

#top .unec_prd_dl {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--unec_prd_ink);
	text-decoration: none;
}

/* White chevron at rest, brand yellow only on hover — the client's call. */
#top .unec_prd_dl_disc {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: var(--unec_prd_ink);
	color: var(--unec_prd_white);
	border-radius: 999px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

#top .unec_prd_dl_label {
	--unec_prd_tfs: calc(17px * var(--unec_prd_type_scale));
	--unec_prd_tlh: calc(26px * var(--unec_prd_type_scale));

	display: block;
	font-weight: 500;
}

#top .unec_prd_dl:hover .unec_prd_dl_disc,
#top .unec_prd_dl:focus-visible .unec_prd_dl_disc {
	background: var(--unec_prd_brand);
	color: var(--unec_prd_ink);
}

#top .unec_prd_qv_loading {
	padding: 48px 0;
	text-align: center;
	color: var(--unec_prd_mute);
}

/* ---------------------------------------------------------------------------
 * 10. Responsive — multipliers only, never the values
 * ------------------------------------------------------------------------ */

@media only screen and (max-width: 1400px) {
	#top .unec_prd_sec,
	#top .unec_prd_qv {
		--unec_prd_pad_scale: 0.85;
		--unec_prd_gap_scale: 0.9;
	}
}

@media only screen and (max-width: 1180px) {
	#top .unec_prd_sec,
	#top .unec_prd_qv {
		--unec_prd_pad_scale: 0.75;
		--unec_prd_gap_scale: 0.8;
		--unec_prd_type_scale: 0.95;
	}
}

@media only screen and (max-width: 1024px) {
	#top .unec_prd_sec,
	#top .unec_prd_qv {
		--unec_prd_pad_scale: 0.65;
		--unec_prd_gap_scale: 0.7;
		--unec_prd_type_scale: 0.92;
	}

	/* The sidebar stops being a column and becomes a disclosure above the
	 * results, so seven facet panels do not push the products off the screen. */
	#top .unec_prd_form {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	#top .unec_prd_side_toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		box-sizing: border-box;
		padding: 20px 24px;
		background: var(--unec_prd_ink);
		color: var(--unec_prd_white);
		border: 0;
		font-size: 17px;
		line-height: 26px;
		font-weight: 500;
		cursor: pointer;
	}

	#top .unec_prd_side_panel {
		display: flex;
		flex-direction: column;
		gap: 32px;
		margin-top: 16px;
	}

	#top .unec_prd_side_panel[hidden] {
		display: none !important;
	}

	#top .unec_prd_side_title {
		--unec_prd_tfs: 26px;
		--unec_prd_tlh: 32px;
	}

	/* The drawer takes the whole screen, and the hero stacks. */
	#top .unec_prd_qv {
		--unec_prd_qv_inset: 40px;
		--unec_prd_qv_plate_h: 360px;
		--unec_prd_qv_photo_h: 240px;
		--unec_prd_qv_tabs_gap: 48px;
		--unec_prd_qv_panel_gap: 32px;
		--unec_prd_qv_dl_gap: 40px;
		--unec_prd_qv_pad_b: 64px;
	}

	/*
	 * FIXED, not absolute. The panel is what scrolls, so an absolutely
	 * positioned close button leaves the screen with the first swipe and the
	 * only way out of a long spec table is to scroll all the way back up.
	 * Fixed resolves against the viewport, and the drawer is flush to the
	 * right edge at every width, so the corner is the same corner.
	 */
	#top .unec_prd_qv_close {
		position: fixed;
		top: 0;
		right: 0;

		/*
		 * A fixed control passes over whatever is scrolling beneath it, and
		 * this one is a yellow square that will sooner or later sit against
		 * the yellow Get a Quote button and read as one shape. The shadow is
		 * what keeps it legible as a separate, floating thing.
		 */
		box-shadow: 0 2px 14px rgba(35, 31, 32, 0.22);
	}

	#top .unec_prd_qv_hero {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	#top .unec_prd_qv_title {
		--unec_prd_tfs: 40px;
		--unec_prd_tlh: 40px;
	}

	/* One column: the two tables are taller than a narrow screen, and a
	 * balanced two-column flow would put half of each above the fold. */
	#top .unec_prd_rt {
		column-count: 1;
	}

}

@media only screen and (max-width: 768px) {
	#top .unec_prd_sec,
	#top .unec_prd_qv {
		--unec_prd_pad_scale: 0.55;
		--unec_prd_gap_scale: 0.6;
		--unec_prd_type_scale: 0.9;
		--unec_prd_gutter_min: 40px;
		--unec_prd_media_h: 240px;
	}

	#top .unec_prd_grid {
		grid-template-columns: minmax(0, 1fr);
	}

	#top .unec_prd_bar_row {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	#top .unec_prd_sec select.unec_prd_sort_select {
		text-align: left;
		text-align-last: left;
	}

	/*
	 * Client tuning: a flat 200px plate below 768, not the scaled token.
	 *
	 * This is a DIRECT property, so it beats the token-derived height in the
	 * same block — which leaves `--unec_prd_media_h: 240px` above, and the
	 * 200px it is set to at 480, doing nothing at all. Both are kept so the
	 * ladder still reads in one piece, but edit THIS rule, not those tokens.
	 */
	#top .unec_prd_media {
		height: 200px;
	}

	#top .unec_prd_qv {
		--unec_prd_qv_inset: 24px;
		--unec_prd_qv_plate_h: 280px;
		--unec_prd_qv_photo_h: 200px;
		--unec_prd_qv_tabs_gap: 40px;
		--unec_prd_qv_panel_gap: 24px;
		--unec_prd_qv_dl_gap: 32px;
		--unec_prd_qv_pad_b: 56px;
	}

	/* The plate override above is scoped to the card's own token; the popup
	 * re-points it, so it needs its own height back. */
	#top .unec_prd_qv .unec_prd_media {
		height: var(--unec_prd_qv_plate_h);
	}

	#top .unec_prd_qv_title {
		--unec_prd_tfs: 34px;
		--unec_prd_tlh: 36px;
	}

	#top .unec_prd_tab {
		padding: 14px 20px;
	}

	#top .unec_prd_calc {
		--unec_prd_calc_gap: 16px;
	}
}

@media only screen and (max-width: 480px) {
	#top .unec_prd_sec,
	#top .unec_prd_qv {
		--unec_prd_pad_scale: 0.45;
		--unec_prd_gap_scale: 0.5;
		--unec_prd_type_scale: 0.86;
		--unec_prd_gutter_min: 24px;
		--unec_prd_media_h: 200px;
	}

	#top .unec_prd_specs {
		grid-template-columns: minmax(0, 1fr);
	}

	#top .unec_prd_actions {
		flex-wrap: wrap;
	}

	#top .unec_prd_quote_qv {
		width: 100%;
	}

	/*
	 * Narrower than one drawn card. The card fills the row and the stepper's
	 * field gives up its fixed 117 so the two buttons stay their drawn size —
	 * the controls are what the visitor aims at; the box is just a readout.
	 */
	#top .unec_prd_calc {
		--unec_prd_calc_card: 100%;
	}

	#top .unec_prd_calc .unec_prd_calc_step input.unec_prd_calc_input {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: none !important;
		min-width: 60px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#top .unec_prd_facet_chev,
	#top .unec_prd_loadmore_circle,
	#top .unec_prd_results {
		transition: none;
	}
}