/*
 * AE-TECH Theme — Component Styles (Phase 4)
 *
 * Only uses tokens declared in main.css (var(--color-*), var(--font-*),
 * var(--space-*), var(--radius-*)). Do not declare new color values here —
 * exactly 6 approved colors: #06348C, #DB0000, #FFFFFF, #111827, #EEF4FF,
 * #FFF1F1. No gray/yellow/green/orange/purple, no new shades, no opacity
 * tricks to fake a new color, no color shadows, no gradients outside the
 * palette. If a light border/background is needed, reuse --color-soft-blue.
 *
 * Enqueued after main.css (see inc/enqueue.php), so base button classes
 * (.btn, .btn--primary, .btn--secondary) already exist — this file only
 * adds the specialized variants plus every reusable page component per
 * Step 21 (visual design system) and Step 15/19 (component system).
 */

/* -----------------------------------------------------------------------
 * Button — specialized variants
 * --------------------------------------------------------------------- */

.btn--text {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	background: transparent;
	border: none;
	padding: 0;
	min-height: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--color-blue);
}

.btn--text:hover,
.btn--text:focus {
	color: var(--color-red);
	text-decoration: underline;
}

/* Technical Resource — public download CTA ("Tải tài liệu") */
.btn--download {
	background-color: var(--color-white);
	color: var(--color-blue);
	border-color: var(--color-blue);
}

.btn--download:hover,
.btn--download:focus {
	background-color: var(--color-soft-blue);
	color: var(--color-blue);
}

/* Technical Resource — request-required CTA ("Yêu cầu tài liệu kỹ thuật") */
.btn--resource {
	background-color: var(--color-red);
	color: var(--color-white);
	border-color: var(--color-red);
}

.btn--resource:hover,
.btn--resource:focus {
	background-color: var(--color-blue);
	border-color: var(--color-blue);
}

.btn--full {
	display: flex;
	width: 100%;
}

/* -----------------------------------------------------------------------
 * Badge / tag system — Step 21 §19
 * --------------------------------------------------------------------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	padding: var(--space-4) var(--space-8);
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
}

.badge--technical {
	background-color: var(--color-soft-blue);
	color: var(--color-blue);
	border-color: var(--color-blue);
}

.badge--risk {
	background-color: var(--color-soft-red);
	color: var(--color-red);
	border-color: var(--color-red);
}

.badge--neutral {
	background-color: var(--color-white);
	color: var(--color-dark);
	border-color: var(--color-soft-blue);
}

/* -----------------------------------------------------------------------
 * Brand motif — abstract shape inspired by the logo's "E" element.
 * Kept deliberately restrained: a few offset bars, 6-color palette only.
 * Never a substitute for the real logo.
 * --------------------------------------------------------------------- */

.component-brand-motif {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	width: 40px;
}

.component-brand-motif span {
	display: block;
	height: 6px;
	border-radius: 3px;
}

.component-brand-motif span:nth-child(1) {
	width: 100%;
}

.component-brand-motif span:nth-child(2) {
	width: 70%;
}

.component-brand-motif span:nth-child(3) {
	width: 45%;
}

.component-brand-motif--blue-on-white span {
	background-color: var(--color-blue);
}

.component-brand-motif--blue-on-white span:nth-child(2) {
	background-color: var(--color-red);
}

.component-brand-motif--white-on-blue span {
	background-color: var(--color-white);
}

.component-brand-motif--white-on-blue span:nth-child(2) {
	background-color: var(--color-soft-red);
}

.component-brand-motif--corner {
	position: absolute;
	top: var(--space-24);
	right: var(--space-24);
}

/* -----------------------------------------------------------------------
 * Hero — 3 variants per Step 21 §6.2
 * --------------------------------------------------------------------- */

.component-hero {
	position: relative;
	padding-top: var(--space-64);
	padding-bottom: var(--space-64);
	overflow: hidden;
}

@media (min-width: 1024px) {
	.component-hero {
		padding-top: 96px;
		padding-bottom: 96px;
	}
}

.component-hero__inner {
	display: grid;
	gap: var(--space-32);
	align-items: center;
}

.component-hero--white-panel .component-hero__inner,
.component-hero--soft-blue .component-hero__inner,
.component-hero--blue .component-hero__inner {
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.component-hero--white-panel .component-hero__inner {
		grid-template-columns: 1.1fr 0.9fr;
	}

	/* Task 26C Batch 4 (QA-ARCHIVE-001 / TECH-CSS-002) — soft-blue never had
	 * this split at all, so an archive hero with real configured media
	 * (hero_image) would otherwise still render full-width, stacked below
	 * the text, at every screen size — same "oversized" symptom the SVG
	 * fallback had, only with a real photo instead of a placeholder.
	 * Deliberately scoped to `.component-hero--has-real-image` (added by
	 * hero.php only when a real resolved image is present) rather than
	 * blanket `.component-hero--soft-blue`, so this fix never changes the
	 * layout of existing soft-blue callers still using the SVG illustration
	 * fallback (single-solution.php, single-service_package.php generic
	 * branch, single-insight.php, single-application_area.php) — none of
	 * those are in this batch's audited scope. Matches white-panel's ratio. */
	.component-hero--soft-blue.component-hero--has-real-image .component-hero__inner {
		grid-template-columns: 1.1fr 0.9fr;
	}

	/* Task 13 §4.1 — proper split hero: content left, a SMALL visual panel
	 * right. Previously the blue hero had no column template at all, so the
	 * visual stacked full-width below the text ("khổng lồ"). */
	.component-hero--blue .component-hero__inner {
		grid-template-columns: 1.3fr 0.7fr;
		align-items: center;
	}

	.component-hero--blue .component-hero__visual {
		max-width: 360px;
		margin-left: auto;
	}

	.component-hero--blue .component-hero__visual .illustration-panel,
	.component-hero--blue .component-hero__visual .media-panel {
		min-height: 200px;
	}

	.component-hero--balanced-media .component-hero__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: clamp(48px, 4vw, 64px);
	}

	.component-hero--balanced-media .component-hero__visual {
		max-width: none;
		margin-left: 0;
	}
}

.component-hero__eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-red);
	margin-bottom: var(--space-12);
}

.component-hero__title {
	margin-bottom: var(--space-16);
}

.component-hero__subtitle {
	font-size: 18px;
	margin-bottom: var(--space-24);
	max-width: 42em;
}

.component-hero__cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
}

.component-hero__visual {
	background-color: var(--color-soft-blue);
	border-radius: var(--radius-lg);
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.component-hero__visual img,
.component-hero__visual svg {
	max-width: 100%;
	border-radius: var(--radius-lg);
}

/* Used when the visual slot is filled by a trusted component (e.g.
 * illustration-panel) or a real image that already supplies its own
 * background/padding — avoids a redundant double-frame. */
.component-hero__visual--bare {
	background-color: transparent;
	padding: 0;
	min-height: 0;
	display: block;
}

/* Real hero image (Task 13 — image-first). Fixed aspect box so a real
 * photo never distorts or blows out the hero layout; object-fit keeps it
 * cropped nicely regardless of the source image's own aspect ratio. */
.component-hero__visual-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
	display: block;
}

.component-hero--balanced-media .component-hero__visual,
.component-hero--balanced-media .component-hero__visual-image {
	width: 100%;
}

.component-hero--balanced-media .component-hero__visual-image {
	aspect-ratio: 3 / 2;
	object-position: center;
}

/* Variant A — Blue hero (Home, About, Solutions Archive, Contact, Partner) */
.component-hero--blue {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.component-hero--blue .component-hero__title,
.component-hero--blue .component-hero__subtitle {
	color: var(--color-white);
}

.component-hero--blue .component-hero__visual {
	background-color: var(--color-white);
}

/* Variant B — White hero with blue/soft-blue visual panel (detail pages) */
.component-hero--white-panel {
	background-color: var(--color-white);
	color: var(--color-dark);
}

.component-hero--white-panel .component-hero__visual {
	background-color: var(--color-soft-blue);
}

.component-hero--white-panel .component-hero__visual--strong {
	background-color: var(--color-blue);
}

/* Variant C — Soft blue hero (lighter archive/supporting pages) */
.component-hero--soft-blue {
	background-color: var(--color-soft-blue);
	color: var(--color-dark);
}

.component-hero--soft-blue .component-hero__title {
	color: var(--color-blue);
}

/* -----------------------------------------------------------------------
 * Compact text-first hero (Task 26C Batch 4, QA-ARCHIVE-001). Applied
 * automatically by hero.php (component-hero--compact modifier) whenever no
 * real visual will render — never opted into per-template. Reuses the same
 * spacing tokens as every other reduced-padding section on the site
 * (.section--compact uses the same var(--space-32)/var(--space-48) pair in
 * main.css) rather than inventing new values, and constrains text width
 * (46em, matching .section__header's existing convention) since there's no
 * second grid column competing for space. No min-height, no forced media
 * column, no SVG — the hero is exactly as tall as its real content.
 * ------------------------------------------------------------------------- */
.component-hero--compact {
	padding-top: var(--space-32);
	padding-bottom: var(--space-32);
}

@media (min-width: 1024px) {
	.component-hero--compact {
		padding-top: var(--space-48);
		padding-bottom: var(--space-48);
	}
}

.component-hero--compact .component-hero__content {
	max-width: 46em;
}

.component-hero--layout-editorial.component-hero--compact .component-hero__content {
	width: 100%;
	max-width: none;
}

.component-hero--layout-editorial .component-hero__title {
	max-width: 1200px;
}

.component-hero--layout-editorial .component-hero__subtitle {
	max-width: 960px;
}

@media (min-width: 1024px) {
	.component-hero--white-panel.component-hero--compact .component-hero__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.post-type-archive-product .component-hero--compact {
		padding-top: var(--space-16);
		padding-bottom: var(--space-24);
	}

	.post-type-archive-product .component-hero--compact .component-breadcrumb {
		padding-top: var(--space-8);
		padding-bottom: var(--space-8);
	}

	.post-type-archive-product .component-hero--compact .component-hero__eyebrow,
	.post-type-archive-product .component-hero--compact .component-hero__title {
		margin-bottom: var(--space-8);
	}

	.post-type-archive-product .component-hero--compact .component-hero__subtitle {
		margin-bottom: var(--space-16);
	}
}

.catalogue-application-grid .problem-grid__item {
	height: auto;
}

/* -----------------------------------------------------------------------
 * Direct Answer — Step 21 §16
 * --------------------------------------------------------------------- */

.component-direct-answer {
	padding-top: var(--space-48);
	padding-bottom: var(--space-48);
}

.component-direct-answer__card {
	background-color: var(--color-white);
	border-left: 4px solid var(--color-blue);
	border-radius: var(--radius-md);
	padding: var(--space-24) var(--space-32);
}

.component-direct-answer__title {
	color: var(--color-blue);
	font-size: 18px;
	margin-bottom: var(--space-8);
}

.component-direct-answer__body {
	color: var(--color-dark);
	font-family: var(--font-body);
}

.component-direct-answer__body :last-child {
	margin-bottom: 0;
}

/* On a blue section, the answer card itself stays white so text stays readable. */
.section-band--blue .component-direct-answer__card {
	background-color: var(--color-white);
}

/* -----------------------------------------------------------------------
 * CTA Block — Step 21 §6.6. Default CTA label is always "Nhận tư vấn ngay"
 * unless the action is genuinely different in kind (document/partner).
 * --------------------------------------------------------------------- */

.component-cta-block {
	padding-top: var(--space-64);
	padding-bottom: var(--space-64);
	text-align: center;
}

.component-cta-block__title {
	margin-bottom: var(--space-12);
}

.component-cta-block__body {
	max-width: 42em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-24);
}

.component-cta-block__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-16);
}

.component-cta-block--blue {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.component-cta-block--blue .component-cta-block__title,
.component-cta-block--blue .component-cta-block__body {
	color: var(--color-white);
}

.component-cta-block--soft-blue {
	background-color: var(--color-soft-blue);
	color: var(--color-dark);
}

.component-cta-block--white {
	background-color: var(--color-white);
	color: var(--color-dark);
}

/* -----------------------------------------------------------------------
 * Risk / Warning block — Step 21 §17
 * --------------------------------------------------------------------- */

.component-risk-block {
	background-color: var(--color-soft-red);
	border-left: 4px solid var(--color-red);
	border-radius: var(--radius-md);
	padding: var(--space-24) var(--space-32);
}

.component-risk-block__title {
	color: var(--color-red);
	font-size: 18px;
	margin-bottom: var(--space-8);
}

.component-risk-block__body {
	color: var(--color-dark);
}

.component-risk-block__body :last-child {
	margin-bottom: 0;
}

.component-risk-block__cta {
	margin-top: var(--space-16);
}

/* -----------------------------------------------------------------------
 * Card system — Step 21 §18. No price/stock/rating/add-to-cart anywhere.
 * --------------------------------------------------------------------- */

.component-card-grid {
	display: grid;
	gap: var(--space-24);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.component-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.component-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.component-card-grid--molykote {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.component-card-grid--compact {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Task 26C.1 (QA-ARCHIVE-006) — border-contrast fix. Root cause: the border
 * previously reused --color-soft-blue (#EEF4FF) at full opacity — nearly
 * indistinguishable from the white card background, and literally identical
 * to a `section-band--soft-blue` page background, making cards look
 * borderless there too. Fixed at the shared base rule (not a page-specific
 * override) since every archive/card-grid card renders through this one
 * class. Uses a low-alpha rgba() of the approved --color-dark token — same
 * established pattern as --shadow-card/--shadow-card-hover (main.css) —
 * rather than inventing a new color value: a neutral, restrained border
 * visible on both white and soft-blue backgrounds. */
.component-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	border: 1px solid rgba(17, 24, 39, 0.14);
	border-radius: var(--radius-lg);
	padding: var(--space-24);
	height: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.component-card:hover,
.component-card:focus-within {
	border-color: var(--color-blue);
	box-shadow: var(--shadow-card-hover);
}

/* Task 26C.1 (QA-ARCHIVE-005/007) — Warehouse Supply Package featured
 * treatment inside the unified Solution Archive grid. Additive modifier
 * only (never replaces .component-card); same grid, same card width, no
 * full-width layout, no separate section, no content-type badge — the
 * distinction is carried by background + a stronger permanent border +
 * a subtle shadow together (not color alone), plus a thin red accent bar
 * using ::before rather than a border-left (keeps the box border uniform on
 * all 4 sides). Replaces the retired .solution-card--integrated modifier,
 * which framed Service Package as a public "integrated solution" category —
 * this modifier instead marks one specific, notable solution post, and is
 * applied via aetech_theme_is_featured_solution_card() (inc/archive-helpers.php),
 * never automatically to every Service Package card. */
.solution-card--featured {
	position: relative;
	background-color: var(--color-soft-blue);
	border-color: var(--color-blue);
	border-width: 2px;
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.solution-card--featured::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background-color: var(--color-red);
}

.solution-card--featured:hover,
.solution-card--featured:focus-within {
	box-shadow: var(--shadow-card-hover);
}

/* Small public badge — distinct from .component-card__eyebrow (content-type
 * label). Reuses the same visual language as .badge--technical (soft-blue
 * background, blue text) so no new color is introduced. Never used for
 * price/stock/sale/e-commerce badges, and never used as a content-type/
 * category label (Task 26C.1 retired 'Giải pháp tích hợp'). */
.component-card__badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-4) var(--space-8);
	border-radius: var(--radius-sm);
	background-color: var(--color-soft-blue);
	color: var(--color-blue);
	font-size: 12px;
	font-weight: 600;
	margin-bottom: var(--space-8);
}

/* Task 21 — Media / Featured Image Workflow: standardized card media box.
 * .card__media / .archive-card__media / .product-card__media are aliases so
 * any component using those class names gets the same rules for free —
 * no template markup had to change today since every existing card
 * component already renders .component-card__image. Fixed 3:2 aspect-ratio
 * (Task 21 §4/§7 image size guideline) instead of a fixed pixel height, so
 * a real uploaded photo never distorts and always crops predictably
 * regardless of its native size. */
.component-card__image,
.card__media,
.archive-card__media,
.product-card__media {
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-16);
	background-color: var(--color-soft-blue);
}

.component-card__image img,
.card__media img,
.archive-card__media img,
.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-md);
}

/* Exact Product packshots and long tools must remain fully visible. */
.component-product-card .component-card__image,
.aetech-discovery-card[data-result-type="product"] .component-card__image,
.single-product .component-hero__visual {
	border: 1px solid var(--color-soft-blue);
	background-color: var(--color-white);
}

.component-product-card .component-card__image img,
.aetech-discovery-card[data-result-type="product"] .component-card__image img,
.single-product .component-hero__visual-image {
	object-fit: contain;
	background-color: var(--color-white);
	padding: var(--space-12);
}

.single-product .component-hero__visual {
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.single-product .component-hero__visual-image {
	padding: var(--space-24);
}

@media (max-width: 480px) {
	.single-product .component-hero__visual-image {
		padding: var(--space-16);
	}
}

/* Icon panel — lightweight visual cue for cards that have no real photo
 * (Task 12 — UI/UX rescue). Never a substitute for a real image once one
 * exists; card.php prefers 'image' over 'icon' automatically. */
.component-card__icon-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-16);
	background-color: var(--color-soft-blue);
	color: var(--color-blue);
}

.component-card__icon-panel--compact {
	height: 64px;
}

.component-product-card .component-card__icon-panel--compact {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
}

.component-card:hover .component-card__icon-panel {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.component-card__eyebrow {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: var(--space-8);
}

.component-card__title {
	font-size: 18px;
	margin-bottom: var(--space-8);
	color: var(--color-dark);
}

.component-card__title a {
	color: inherit;
}

.component-card__excerpt {
	color: var(--color-dark);
	font-size: 15px;
	margin-bottom: var(--space-16);
	flex: 1;
}

.component-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin-bottom: var(--space-16);
	font-size: 13px;
	color: var(--color-dark);
}

.component-card__cta {
	margin-top: auto;
}

.component-card:hover .component-card__cta.btn--text {
	color: var(--color-red);
}

/* Archive card — generic listing card, all CPTs */
.component-archive-card {
	/* Inherits .component-card; no additional overrides needed. */
}

/* Product card — no price/stock/rating/add-to-cart/discount */
.component-product-card__code {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-blue);
	margin-bottom: var(--space-4);
}

.component-product-card__selection {
	border-top: 1px solid var(--color-soft-blue);
	padding-top: var(--space-12);
	margin-bottom: var(--space-16);
	color: var(--color-dark);
	font-size: 14px;
}

.component-product-card__selection strong {
	display: block;
	color: var(--color-blue);
	margin-bottom: var(--space-4);
}

.component-product-card__differentiator {
	margin-bottom: var(--space-12);
	color: var(--color-dark);
	font-size: 14px;
}

.component-product-card__differentiator strong,
.component-product-card__compatibility > strong {
	display: block;
	color: var(--color-blue);
	margin-bottom: var(--space-4);
}

.component-product-card__compatibility {
	border-top: 1px solid var(--color-soft-blue);
	padding-top: var(--space-12);
	margin-bottom: var(--space-16);
	color: var(--color-dark);
	font-size: 14px;
}

.component-product-card__compatibility ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-12);
	list-style: none;
	margin: 0;
	padding: 0;
}

.component-product-card__compatibility a {
	color: var(--color-blue);
	font-weight: 700;
}

.component-hero__identity-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8) var(--space-16);
	margin-bottom: var(--space-8);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
}

.component-hero__identity-meta span + span {
	border-left: 1px solid currentColor;
	padding-left: var(--space-16);
}

.component-hero__identity-meta a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.component-hero__identity-meta a:hover,
.component-hero__identity-meta a:focus-visible {
	color: var(--color-blue);
	text-decoration-thickness: 2px;
}

.component-hero__identity-meta a:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 3px;
	border-radius: 2px;
}

.problem-grid__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: var(--space-16);
}

@media (max-width: 479px) {
	.component-hero__identity-meta {
		flex-direction: column;
		gap: var(--space-4);
	}

	.component-hero__identity-meta span + span {
		border-left: 0;
		padding-left: 0;
	}
}

/* Product Group card */
.component-product-group-card__doc-note {
	font-size: 13px;
	color: var(--color-blue);
}

/* Technical Resource card */
.component-resource-card__type {
	margin-bottom: var(--space-8);
}

.component-resource-card__updated {
	font-size: 13px;
	color: var(--color-dark);
}

/* Brand card */
.component-brand-card {
	text-align: center;
}

.component-brand-card__logo {
	max-height: 56px;
	width: auto;
	margin: 0 auto var(--space-16);
}

.component-brand-card__name-text {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	color: var(--color-blue);
	margin-bottom: var(--space-16);
}

/* Technology partner strip */
.component-technology-partners__header {
	max-width: 760px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.component-technology-partners__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-16);
	max-width: 760px;
	margin: var(--space-24) auto 0;
}

.component-technology-partners__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 152px;
	padding: var(--space-24);
	border: 1px solid var(--color-soft-blue);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-blue);
	text-align: center;
	text-decoration: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.component-technology-partners__card:hover,
.component-technology-partners__card:focus-visible {
	border-color: var(--color-blue);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.component-technology-partners__logo-area {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 64px;
}

.component-brand-logo-surface--light {
	padding: var(--space-8);
	border-radius: var(--radius-sm);
	background: var(--color-white);
}

.component-technology-partners__logo {
	display: block;
	width: auto;
	max-width: min(220px, 100%);
	height: auto;
	max-height: 56px;
	object-fit: contain;
}

.component-technology-partners__text-logo {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.component-technology-partners__name {
	margin-top: var(--space-12);
	font-size: 14px;
	font-weight: 700;
}

.component-technology-partners__description {
	margin-top: var(--space-8);
	color: var(--color-dark);
	font-size: 14px;
	line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
	.component-technology-partners__card {
		transition: none;
	}

	.component-technology-partners__card:hover,
	.component-technology-partners__card:focus-visible {
		transform: none;
	}
}

@media (max-width: 399px) {
	.component-technology-partners__grid {
		grid-template-columns: 1fr;
	}
}

/* Solution landing capability proof */
.component-capability-statistics__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	background: var(--color-white);
	border: 1px solid var(--color-white);
	border-radius: var(--radius-sm);
}

.component-capability-statistics__item {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: center;
	min-height: 168px;
	padding: var(--space-24);
	text-align: center;
}

.component-capability-statistics__item + .component-capability-statistics__item {
	border-top: 1px solid var(--color-soft-blue);
}

.component-capability-statistics__value {
	margin: 0 0 var(--space-8);
	font-family: var(--font-heading);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-blue);
}

.component-capability-statistics__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-dark);
}

@media (min-width: 640px) {
	.component-capability-statistics__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.component-capability-statistics__item + .component-capability-statistics__item {
		border-top: 0;
		border-left: 1px solid var(--color-soft-blue);
	}

	.component-capability-statistics__value {
		font-size: 56px;
	}
}

.component-technology-partners--logo-only .component-technology-partners__grid {
	max-width: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.component-technology-partners--logo-only .component-technology-partners__grid.component-technology-partners__grid--count-1 {
	grid-template-columns: 1fr;
	max-width: 240px;
}

.component-technology-partners--logo-only .component-technology-partners__card {
	min-height: 112px;
	padding: var(--space-24) var(--space-16);
}

.component-technology-partners--logo-only .component-technology-partners__logo-area {
	height: 56px;
}

@media (min-width: 640px) {
	.component-technology-partners--logo-only .component-technology-partners__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.component-technology-partners--logo-only .component-technology-partners__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.component-featured-projects__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
}

.component-featured-project {
	min-width: 0;
	overflow: hidden;
	background: var(--color-white);
	border-radius: var(--radius-sm);
	color: var(--color-dark);
}

.component-featured-project__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-soft-blue);
}

.component-featured-project__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.component-featured-project__body {
	padding: var(--space-24);
}

.component-featured-project__eyebrow {
	display: block;
	margin-bottom: var(--space-8);
	color: var(--color-red);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.component-featured-project__title {
	margin-bottom: var(--space-8);
	color: var(--color-blue);
	font-size: 22px;
}

.component-featured-project__customer {
	font-weight: 700;
}

.component-featured-project__metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-8);
	margin: var(--space-24) 0;
}

.component-featured-project__metrics div {
	padding: var(--space-12);
	background: var(--color-soft-blue);
	text-align: center;
}

.component-featured-project__metrics dt {
	font-size: 12px;
}

.component-featured-project__metrics dd {
	margin: var(--space-4) 0 0;
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-blue);
}

.component-featured-project__link {
	font-weight: 700;
	color: var(--color-blue);
}

@media (min-width: 768px) {
	.component-featured-projects__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -----------------------------------------------------------------------
 * Detail content — the editorial WYSIWYG body on Solution/Service Package/
 * Product Group/Technical Resource detail pages (Task 12 — UI/UX rescue).
 * Framed as a readable "editorial" panel instead of raw unstyled prose.
 * --------------------------------------------------------------------- */

.component-detail-content {
	background-color: var(--color-white);
	border: 1px solid var(--color-soft-blue);
	border-radius: var(--radius-lg);
	padding: var(--space-32);
}

.component-detail-content h2,
.component-detail-content h3 {
	color: var(--color-blue);
}

.component-detail-content h2:not(:first-child),
.component-detail-content h3:not(:first-child) {
	margin-top: var(--space-32);
}

.component-detail-content p,
.component-detail-content li {
	font-size: 16px;
}

.component-detail-content ul,
.component-detail-content ol {
	padding-left: var(--space-24);
	margin: 0 0 var(--space-16);
}

.component-detail-content li {
	margin-bottom: var(--space-8);
}

.component-detail-content > :last-child {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------
 * Related Content wrapper
 * --------------------------------------------------------------------- */

.component-related-content {
	padding-top: var(--space-48);
	padding-bottom: var(--space-48);
}

.component-related-content__title {
	margin-bottom: var(--space-24);
}

/* -----------------------------------------------------------------------
 * Breadcrumb
 * --------------------------------------------------------------------- */

.component-breadcrumb {
	font-family: var(--font-body);
	font-size: 13px;
	padding: var(--space-16) 0;
}

.component-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--space-8);
}

.component-breadcrumb li {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	color: var(--color-dark);
}

.component-breadcrumb li:not(:last-child)::after {
	content: "/";
	color: var(--color-blue);
}

.component-breadcrumb a {
	color: var(--color-blue);
}

.component-breadcrumb [aria-current="page"] {
	color: var(--color-dark);
}

.section-band--blue .component-breadcrumb li,
.section-band--blue .component-breadcrumb [aria-current="page"] {
	color: var(--color-white);
}

.section-band--blue .component-breadcrumb a {
	color: var(--color-white);
}

/* -----------------------------------------------------------------------
 * FAQ accordion — native <details>/<summary> for baseline accessibility
 * --------------------------------------------------------------------- */

.component-faq {
	padding-top: var(--space-48);
	padding-bottom: var(--space-48);
}

.component-faq__title {
	margin-bottom: var(--space-24);
}

.component-faq__item {
	background-color: var(--color-white);
	border: 1px solid var(--color-soft-blue);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-12);
	padding: var(--space-16) var(--space-24);
}

.component-faq__item summary {
	cursor: pointer;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--color-dark);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-16);
}

.component-faq__item summary::-webkit-details-marker {
	display: none;
}

.component-faq__item summary::after {
	content: "+";
	color: var(--color-blue);
	font-family: var(--font-heading);
	font-size: 20px;
	flex-shrink: 0;
}

.component-faq__item[open] summary::after {
	content: "\2212"; /* minus sign */
}

.component-faq__item[open] summary {
	color: var(--color-blue);
}

.component-faq__answer {
	margin-top: var(--space-12);
	color: var(--color-dark);
	font-family: var(--font-body);
}

/* -----------------------------------------------------------------------
 * Form wrapper — Step 21 §20
 * --------------------------------------------------------------------- */

.component-form-wrapper {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-32);
	max-width: var(--container-narrow);
	margin-left: auto;
	margin-right: auto;
}

.component-form-wrapper__title {
	margin-bottom: var(--space-8);
}

.component-form-wrapper__helper {
	color: var(--color-dark);
	margin-bottom: var(--space-24);
}

.component-form-wrapper__slot {
	min-height: 120px;
}

.component-form-wrapper__slot--fallback {
	min-height: 0;
}

.component-form-wrapper__fallback {
	background-color: var(--color-soft-blue);
	border-left: 4px solid var(--color-blue);
	padding: var(--space-24);
}

.component-form-wrapper__fallback p {
	margin-bottom: var(--space-16);
}

.component-form-wrapper__slot-placeholder {
	background-color: var(--color-soft-blue);
	border: 1px dashed var(--color-blue);
	border-radius: var(--radius-md);
	padding: var(--space-24);
	color: var(--color-blue);
	font-size: 14px;
	text-align: center;
}

.component-form-wrapper label {
	display: block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	margin-bottom: var(--space-8);
}

.component-form-wrapper .required-marker {
	color: var(--color-red);
}

.component-form-wrapper input[type="text"],
.component-form-wrapper input[type="email"],
.component-form-wrapper input[type="tel"],
.component-form-wrapper input[type="url"],
.component-form-wrapper select,
.component-form-wrapper textarea {
	width: 100%;
	background-color: var(--color-white);
	color: var(--color-dark);
	border: 1px solid var(--color-soft-blue);
	border-radius: var(--radius-sm);
	padding: var(--space-12);
	margin-bottom: var(--space-16);
	font-size: 15px;
}

.component-form-wrapper input:focus,
.component-form-wrapper select:focus,
.component-form-wrapper textarea:focus {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
	border-color: var(--color-blue);
}

.component-form-wrapper .field--error input,
.component-form-wrapper .field--error select,
.component-form-wrapper .field--error textarea {
	border-color: var(--color-red);
	background-color: var(--color-soft-red);
}

.component-form-wrapper__submit {
	width: 100%;
}

.component-form-wrapper__message {
	border-radius: var(--radius-sm);
	padding: var(--space-16);
	margin-top: var(--space-16);
	font-size: 14px;
}

.component-form-wrapper__message--success {
	background-color: var(--color-soft-blue);
	color: var(--color-blue);
	border: 1px solid var(--color-blue);
}

.component-form-wrapper__message--error {
	background-color: var(--color-soft-red);
	color: var(--color-red);
	border: 1px solid var(--color-red);
}

.component-form-wrapper__consent {
	font-size: 12px;
	color: var(--color-dark);
	margin-top: var(--space-16);
}

/* -----------------------------------------------------------------------
 * Filter bar (desktop) + Filter drawer (mobile) — Step 21 §21
 * --------------------------------------------------------------------- */

.component-filter-bar {
	background-color: var(--color-soft-blue);
	border-radius: var(--radius-lg);
	padding: var(--space-24);
	/* Task 13 §6.3 — filter bar had no bottom margin at all, so the card
	 * grid immediately below it had 0px gap (cards touching/misaligning
	 * against the filter box). 32px minimum, per spec. */
	margin-bottom: var(--space-32);
}

.component-filter-bar__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
	align-items: flex-end;
}

.component-filter-bar__search {
	flex: 1 1 240px;
}

.component-filter-bar__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 160px;
}

.component-filter-bar__group label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-dark);
}

.component-filter-bar__group select,
.component-filter-bar__search input {
	background-color: var(--color-white);
	border: 1px solid var(--color-blue);
	border-radius: var(--radius-sm);
	padding: var(--space-12);
	font-size: 14px;
	width: 100%;
}

.component-filter-bar__group select:focus-visible,
.component-filter-bar__search input:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 2px;
}

.component-filter-bar__actions {
	display: flex;
	gap: var(--space-12);
}

.component-filter-bar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin-top: var(--space-16);
}

.component-filter-bar__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	background-color: var(--color-white);
	border: 1px solid var(--color-blue);
	color: var(--color-blue);
	border-radius: 999px;
	padding: var(--space-4) var(--space-12);
	font-size: 13px;
}

.component-filter-bar__chip a {
	background: transparent;
	border: none;
	color: var(--color-blue);
	cursor: pointer;
	font-weight: 700;
	line-height: 1;
	padding: 0;
}

.component-filter-bar__result-count {
	font-size: 14px;
	color: var(--color-dark);
	margin-top: var(--space-12);
}

.component-filter-bar__toggle {
	display: none;
}

@media (max-width: 1023px) {
	.component-filter-bar__row--desktop-only {
		display: none;
	}

	.component-filter-bar__toggle {
		display: inline-flex;
	}
}

.component-filter-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
}

.component-filter-drawer.is-open {
	display: block;
}

body.aetech-filter-open {
	overflow: hidden;
}

.component-filter-drawer__backdrop {
	position: absolute;
	inset: 0;
	background-color: var(--color-dark);
}

.component-filter-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(320px, 90vw);
	background-color: var(--color-white);
	padding: var(--space-24);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.component-filter-drawer__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--color-soft-blue);
	padding-bottom: var(--space-16);
}

.component-filter-drawer__close {
	background: transparent;
	border: none;
	font-size: 20px;
	color: var(--color-dark);
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
}

.component-filter-drawer__footer {
	display: flex;
	gap: var(--space-12);
	border-top: 1px solid var(--color-soft-blue);
	padding-top: var(--space-16);
}

/* NOTE: the drawer backdrop above intentionally does not use rgba/opacity
 * tricks to fake a translucent overlay (forbidden by the color rules) — it
 * is a solid --color-dark panel behind the drawer, which still separates
 * the drawer from page content without introducing a new color. */

/* -----------------------------------------------------------------------
 * Table — Step 21 §22
 * --------------------------------------------------------------------- */

.component-table-section {
	margin-bottom: var(--space-32);
}

.component-table-section__title {
	margin-bottom: var(--space-16);
}

.component-table-wrapper {
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	background-color: var(--color-soft-blue);
	border-radius: var(--radius-lg);
	padding: var(--space-16);
}

.component-table-wrapper:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 3px;
}

.component-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--color-white);
	font-size: 14px;
}

.component-table--dupont-decision,
.component-table--automotive-decision {
	min-width: 960px;
	table-layout: fixed;
}

.component-table th,
.component-table td {
	border: 1px solid var(--color-soft-blue);
	padding: var(--space-12) var(--space-16);
	text-align: left;
}

.component-table th {
	background-color: var(--color-soft-blue);
	color: var(--color-blue);
	font-family: var(--font-heading);
	font-weight: 700;
}

.component-table td {
	color: var(--color-dark);
}

.component-table tr.is-important td {
	background-color: var(--color-soft-red);
	color: var(--color-red);
}

/* -----------------------------------------------------------------------
 * Task 40 — shared V2 catalogue architecture.
 * --------------------------------------------------------------------- */

.component-section-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: var(--color-white);
	border-top: 1px solid var(--color-soft-blue);
	border-bottom: 1px solid var(--color-soft-blue);
}

.admin-bar .component-section-nav {
	top: 32px;
}

.component-section-nav ul {
	display: flex;
	gap: var(--space-8);
	margin: 0;
	padding: var(--space-12) 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: thin;
}

.component-section-nav li {
	flex: 0 0 auto;
}

.component-section-nav a {
	display: block;
	padding: var(--space-8) var(--space-12);
	border-radius: var(--radius-sm);
	color: var(--color-blue);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.component-section-nav a:hover,
.component-section-nav a:focus-visible {
	background-color: var(--color-soft-blue);
	text-decoration: none;
}

.component-capability-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-24);
}

.component-capability-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--space-24);
	background-color: var(--color-white);
	border: 1px solid rgba(17, 24, 39, 0.14);
	border-radius: var(--radius-md);
}

.section-band--white .component-capability-card {
	background-color: var(--color-soft-blue);
	border-color: var(--color-soft-blue);
}

.component-capability-card__eyebrow,
.component-decision-guide__eyebrow,
.component-evaluation-prompt__eyebrow {
	margin: 0 0 var(--space-8);
	color: var(--color-red);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.component-capability-card__title {
	color: var(--color-blue);
	font-size: 20px;
	margin-bottom: var(--space-8);
	overflow-wrap: anywhere;
}

.component-capability-card__description {
	margin-bottom: var(--space-16);
	font-size: 15px;
}

.component-capability-card__meta {
	margin-top: auto;
	margin-bottom: var(--space-12);
	color: var(--color-blue);
	font-size: 13px;
	font-weight: 700;
}

.component-capability-card__link {
	margin-top: auto;
}

.component-decision-guide {
	display: grid;
	gap: var(--space-16);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.component-decision-guide__item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--space-16);
	padding: var(--space-24);
	background-color: var(--color-white);
	border: 1px solid rgba(17, 24, 39, 0.14);
	border-radius: var(--radius-md);
}

.component-decision-guide__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background-color: var(--color-blue);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
}

.component-decision-guide__item h3 {
	color: var(--color-blue);
	font-size: 20px;
	margin-bottom: var(--space-8);
	overflow-wrap: anywhere;
}

.component-decision-guide__item p:not(.component-decision-guide__eyebrow) {
	margin-bottom: var(--space-12);
}

.component-decision-guide--system .component-decision-guide__item {
	position: relative;
	border-left: 4px solid var(--color-blue);
}

.component-evaluation-prompt {
	display: grid;
	gap: var(--space-24);
	align-items: center;
	padding: var(--space-32);
	background-color: var(--color-soft-blue);
	border-left: 4px solid var(--color-blue);
	border-radius: var(--radius-md);
}

.section-band--soft-blue .component-evaluation-prompt {
	background-color: var(--color-white);
}

.component-evaluation-prompt__title {
	color: var(--color-blue);
	font-size: 26px;
	margin-bottom: var(--space-8);
}

.component-evaluation-prompt__body {
	margin-bottom: 0;
	max-width: 60em;
}

.component-evaluation-prompt .btn {
	justify-self: start;
	white-space: nowrap;
}

.v2-relationship-note,
.v2-identity-note {
	padding: var(--space-16);
	background-color: var(--color-soft-blue);
	border-left: 4px solid var(--color-blue);
	border-radius: var(--radius-sm);
}

.v2-usage-note {
	margin-top: var(--space-24);
}

.v2-catalogue-segment + .v2-catalogue-segment {
	margin-top: var(--space-40);
}

.v2-catalogue-segment__title {
	color: var(--color-blue);
	font-size: 24px;
	margin-bottom: var(--space-16);
}

.v2-compatibility {
	display: grid;
	gap: var(--space-12);
	margin-top: var(--space-24);
}

.v2-compatibility__item {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-16);
	background-color: var(--color-white);
	border: 1px solid rgba(17, 24, 39, 0.14);
	border-radius: var(--radius-sm);
}

.v2-compatibility__item:hover,
.v2-compatibility__item:focus-visible {
	border-color: var(--color-blue);
	text-decoration: none;
}

.v2-compatibility__item span {
	color: var(--color-red);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.v2-compatibility__item strong {
	color: var(--color-blue);
	overflow-wrap: anywhere;
}

.v2-section {
	scroll-margin-top: 80px;
}

@media (min-width: 768px) {
	.component-capability-grid--2,
	.component-capability-grid--3,
	.component-capability-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.component-evaluation-prompt {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.v2-compatibility {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.component-capability-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.component-capability-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.component-decision-guide--system {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.admin-bar .component-section-nav {
		top: 46px;
	}
}

@media (max-width: 479px) {
	.component-section-nav .container {
		padding-left: var(--space-16);
		padding-right: var(--space-16);
	}

	.component-capability-card,
	.component-decision-guide__item,
	.component-evaluation-prompt {
		padding: var(--space-16);
	}

	.component-evaluation-prompt__title {
		font-size: 22px;
	}

	.component-evaluation-prompt .btn {
		width: 100%;
		white-space: normal;
		text-align: center;
	}
}

/* -----------------------------------------------------------------------
 * Technical Resource Access Block — Step 21 §23
 * --------------------------------------------------------------------- */

.component-access-block {
	border-radius: var(--radius-md);
	padding: var(--space-24);
}

.component-access-block__title {
	font-size: 18px;
	margin-bottom: var(--space-8);
}

.component-access-block__body {
	color: var(--color-dark);
	margin-bottom: var(--space-16);
}

.component-access-block--public {
	background-color: var(--color-soft-blue);
	border: 1px solid var(--color-blue);
}

.component-access-block--public .component-access-block__title {
	color: var(--color-blue);
}

.component-access-block--request {
	background-color: var(--color-soft-red);
	border: 1px solid var(--color-red);
}

.component-access-block--request .component-access-block__title {
	color: var(--color-red);
}

/* Internal-only intentionally has no style rule — it must never render
 * on the frontend (see resource-access-block.php guard). */

/* -----------------------------------------------------------------------
 * Empty state — Step 22 §27. Never "Không có dữ liệu."
 * --------------------------------------------------------------------- */

.component-empty-state {
	background-color: var(--color-soft-blue);
	border-radius: var(--radius-lg);
	padding: var(--space-48) var(--space-24);
	text-align: center;
}

.component-empty-state--white {
	background-color: var(--color-white);
	border: 1px solid var(--color-soft-blue);
}

.component-empty-state__icon {
	margin: 0 auto var(--space-16);
	color: var(--color-blue);
}

.component-empty-state__message {
	max-width: 36em;
	margin: 0 auto var(--space-24);
	color: var(--color-dark);
}

.component-empty-state__actions {
	display: flex;
	justify-content: center;
	gap: var(--space-16);
	flex-wrap: wrap;
}

.section__actions {
	margin-top: var(--space-32);
}

.editorial-topic-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
}

.editorial-topic-list__item {
	white-space: normal;
}

/* -----------------------------------------------------------------------
 * Contact Router — Phase 5A (Contact page intent selector)
 * Selected state uses --color-blue background + --color-white text (no new
 * color introduced). Panels are shown/hidden via the native `hidden`
 * attribute, toggled by main.js — no inline display styles.
 * --------------------------------------------------------------------- */

.component-contact-router__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-16);
	margin: var(--space-24) 0;
}

.component-contact-router__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
	width: 100%;
	text-align: left;
	background-color: var(--color-soft-blue);
	border: 2px solid var(--color-soft-blue);
	border-radius: var(--radius-md);
	padding: var(--space-16) var(--space-24);
	cursor: pointer;
	font-family: var(--font-body);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.component-contact-router__item:hover,
.component-contact-router__item:focus-visible {
	border-color: var(--color-blue);
}

.component-contact-router__item.is-active {
	background-color: var(--color-blue);
	border-color: var(--color-blue);
}

.component-contact-router__item-title {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-blue);
}

.component-contact-router__item.is-active .component-contact-router__item-title {
	color: var(--color-white);
}

.component-contact-router__item-desc {
	font-size: 14px;
	color: var(--color-dark);
}

.component-contact-router__item.is-active .component-contact-router__item-desc {
	color: var(--color-white);
}

.component-contact-router__panels {
	background-color: var(--color-white);
	border: 1px solid var(--color-soft-blue);
	border-radius: var(--radius-lg);
	padding: var(--space-32);
}

.component-contact-router__panel[hidden] {
	display: none;
}

/* Task 47 shared contextual MISA surface. */
.contextual-misa-section {
	scroll-margin-top: calc(var(--header-height, 88px) + var(--space-24));
}

.contextual-misa-section--landing:not(.contextual-misa-section--embedded) {
	padding-top: var(--space-32);
	padding-bottom: var(--space-32);
}

.contextual-misa-section__container {
	max-width: 1008px;
}

.contextual-misa-section:focus {
	outline: none;
}

.contextual-misa-form {
	display: grid;
	gap: var(--space-24);
	min-width: 0;
}

.contextual-misa-section--landing .contextual-misa-form {
	gap: var(--space-16);
}

.contextual-misa-form > * {
	min-width: 0;
	max-width: 100%;
}

.contextual-misa-section--landing:not(.contextual-misa-section--embedded) .contextual-misa-form {
	background: var(--color-white);
	border: 1px solid var(--color-blue);
	border-radius: var(--radius-md);
	padding: var(--space-24);
}

.contextual-misa-section--embedded {
	margin-top: var(--space-24);
}

.contextual-misa-section--landing.contextual-misa-section--embedded {
	margin-top: 0;
}

.contextual-misa-form__modes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-8);
}

.contextual-misa-form__mode {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--space-8) var(--space-16);
	border: 2px solid var(--color-blue);
	border-radius: var(--radius-sm);
	color: var(--color-blue);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.contextual-misa-form__mode:hover,
.contextual-misa-form__mode:focus-visible,
.contextual-misa-form__mode.is-active {
	background: var(--color-blue);
	color: var(--color-white);
}

.contextual-misa-form .component-form-wrapper {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.contextual-misa-section--landing:not(.contextual-misa-section--embedded) .component-form-wrapper {
	padding: 0;
}

.contextual-misa-section--landing.contextual-misa-section--embedded .component-form-wrapper {
	padding: var(--space-24);
}

.contextual-misa-section--landing .component-form-wrapper__helper {
	margin-bottom: var(--space-16);
}

.contextual-misa-section--landing .component-form-wrapper__title {
	color: var(--color-blue);
	font-size: 24px;
	line-height: 1.3;
}

.contextual-misa-section--landing .component-form-wrapper__helper,
.contextual-misa-section--landing .component-form-wrapper__consent {
	color: var(--color-dark);
}

.contextual-misa-section--landing .component-form-wrapper__slot {
	min-height: 0;
}

/* -----------------------------------------------------------------------
 * Task 20 — Warehouse Supply Package detail redesign. Scoped to the new
 * package-component-card / warehouse-package-flow / operation-flow /
 * value-card-grid / integration-model components (single-service_package.php
 * warehouse-supply-package branch only). Only the 6 approved tokens below —
 * no new hex, no gray/yellow/green/orange.
 * ----------------------------------------------------------------------- */

/* Card grid five-up modifier (Safety Operation Package's 5 items row) —
 * reuses the existing .component-card-grid base (1 col mobile, 2 col
 * tablet), just widens the desktop breakpoint to 5 columns. */
.single-service_package .warehouse-form-cta {
	display: flex;
	justify-content: center;
	margin-top: var(--space-32);
}

@media (min-width: 1200px) {
	.component-card-grid--five {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Package Component Card — generic package/sub-package descriptor card. */
.component-package-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	border: 1px solid var(--color-soft-blue);
	border-radius: var(--radius-lg);
	padding: var(--space-24);
	height: 100%;
}

.component-package-card__header {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	margin-bottom: var(--space-16);
}

.component-package-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background-color: var(--color-red);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
}

.component-package-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	color: var(--color-white);
	background-color: var(--color-blue);
	flex-shrink: 0;
}

.component-package-card--red .component-package-card__icon {
	background-color: var(--color-red);
}

.component-package-card__title {
	font-size: 17px;
	margin-bottom: var(--space-8);
}

.component-package-card__body {
	font-size: 14px;
	color: var(--color-dark);
	margin-bottom: 0;
}

.component-package-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.component-package-card__list li {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-size: 14px;
	color: var(--color-dark);
}

.component-package-card__list-icon {
	color: var(--color-blue);
	flex-shrink: 0;
	display: inline-flex;
}

.component-package-card--red .component-package-card__list-icon {
	color: var(--color-red);
}

/* Warehouse Package Flow — 3-step vendor -> partner maturity comparison. */
.component-warehouse-flow {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-16);
}

.component-warehouse-flow__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-12);
}

.component-warehouse-flow__card {
	width: 100%;
	background-color: var(--color-white);
	border: 1px solid var(--color-soft-blue);
	border-radius: var(--radius-lg);
	padding: var(--space-24);
	text-align: center;
}

.component-warehouse-flow__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background-color: var(--color-soft-blue);
	color: var(--color-blue);
	font-family: var(--font-heading);
	font-weight: 700;
	margin-bottom: var(--space-12);
}

.component-warehouse-flow__title {
	font-size: 16px;
	color: var(--color-blue);
	margin-bottom: var(--space-8);
}

.component-warehouse-flow__body {
	font-size: 14px;
	color: var(--color-dark);
	margin-bottom: 0;
}

.component-warehouse-flow__badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-4) var(--space-16);
	border-radius: 999px;
	border: 1px solid var(--color-blue);
	color: var(--color-blue);
	font-size: 12px;
	font-weight: 700;
	background-color: var(--color-white);
}

.component-warehouse-flow__arrow {
	display: flex;
	justify-content: center;
	color: var(--color-red);
	transform: rotate(90deg);
}

@media (min-width: 900px) {
	.component-warehouse-flow {
		flex-direction: row;
		align-items: stretch;
	}

	.component-warehouse-flow__step {
		flex: 1;
		justify-content: space-between;
	}

	.component-warehouse-flow__arrow {
		align-items: center;
		transform: none;
		flex: 0 0 auto;
		padding-top: var(--space-48);
	}
}

/* Operation Flow — compact icon-chain diagram (Sản xuất -> ... -> Giao nhận). */
.component-operation-flow-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.component-operation-flow {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-12);
}

.component-operation-flow__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	text-align: center;
}

.component-operation-flow__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 1.5px solid var(--color-blue);
	color: var(--color-blue);
	background-color: var(--color-white);
	flex-shrink: 0;
}

.component-operation-flow__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-dark);
	margin-bottom: 0;
}

.component-operation-flow__arrow {
	display: flex;
	justify-content: center;
	color: var(--color-red);
	transform: rotate(90deg);
}

.component-operation-flow__note {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	background-color: var(--color-soft-blue);
	border-radius: var(--radius-md);
	padding: var(--space-16) var(--space-24);
	color: var(--color-dark);
	font-size: 14px;
	margin-bottom: 0;
}

.component-operation-flow__note-icon {
	color: var(--color-red);
	flex-shrink: 0;
	display: inline-flex;
}

@media (min-width: 900px) {
	.component-operation-flow {
		flex-direction: row;
		align-items: flex-start;
	}

	.component-operation-flow__step {
		flex: 1;
	}

	.component-operation-flow__arrow {
		align-items: flex-start;
		transform: none;
		flex: 0 0 auto;
		padding-top: var(--space-24);
	}
}

/* Value Card Grid — Section 9 "Một đầu mối, nhiều giá trị vận hành". */
.component-value-grid {
	display: grid;
	gap: var(--space-24);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.component-value-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.component-value-card {
	display: flex;
	gap: var(--space-16);
	background-color: var(--color-white);
	border: 1px solid var(--color-soft-blue);
	border-radius: var(--radius-lg);
	padding: var(--space-24);
}

.component-value-card__panel {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	color: var(--color-white);
}

.component-value-card__panel--red {
	background-color: var(--color-red);
}

.component-value-card__panel--blue {
	background-color: var(--color-blue);
}

.component-value-card__number {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
}

.component-value-card__icon {
	display: inline-flex;
}

.component-value-card__title {
	font-size: 16px;
	margin-bottom: var(--space-8);
}

.component-value-card__body {
	font-size: 14px;
	color: var(--color-dark);
	margin-bottom: 0;
}

/* Integration Model — Section 10 root -> 3 packages -> operational flow. */
.component-integration-model {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
}

.component-integration-model__root {
	display: inline-flex;
	align-items: center;
	gap: var(--space-12);
	background-color: var(--color-white);
	border: 1.5px solid var(--color-red);
	border-radius: var(--radius-lg);
	padding: var(--space-16) var(--space-32);
}

.component-integration-model__root-icon {
	color: var(--color-red);
	display: inline-flex;
}

.component-integration-model__root-label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--color-dark);
}

.component-integration-model__connector {
	width: 2px;
	height: var(--space-24);
	background-color: var(--color-soft-blue);
}

.component-integration-model__children {
	width: 100%;
	display: grid;
	gap: var(--space-24);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.component-integration-model__children {
		grid-template-columns: repeat(3, 1fr);
	}
}

.component-integration-model__child {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	border-top: 4px solid var(--color-blue);
	padding: var(--space-24);
	text-align: center;
}

.component-integration-model__child--red {
	border-top-color: var(--color-red);
	background-color: var(--color-soft-red);
}

.component-integration-model__child--blue {
	background-color: var(--color-soft-blue);
}

.component-integration-model__child-icon {
	display: inline-flex;
	color: var(--color-blue);
	margin-bottom: var(--space-12);
}

.component-integration-model__child--red .component-integration-model__child-icon {
	color: var(--color-red);
}

.component-integration-model__child-title {
	font-size: 16px;
	margin-bottom: var(--space-8);
}

.component-integration-model__child-body {
	font-size: 13px;
	color: var(--color-dark);
	margin-bottom: 0;
}

.component-integration-model__flow-intro {
	font-weight: 700;
	color: var(--color-blue);
	text-align: center;
	margin-bottom: 0;
}

/* Compare block — Safety Operation Package "not just the knife" callout
 * (Section 7): a red "no" panel next to a blue "yes" panel. */
.component-compare-row {
	display: grid;
	gap: var(--space-16);
	grid-template-columns: 1fr;
	margin-bottom: var(--space-32);
}

@media (min-width: 768px) {
	.component-compare-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

.component-compare-row__item {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	border-radius: var(--radius-md);
	padding: var(--space-24);
	font-size: 15px;
	font-weight: 600;
}

.component-compare-row__item--no {
	background-color: var(--color-soft-red);
	color: var(--color-red);
}

.component-compare-row__item--yes {
	background-color: var(--color-soft-blue);
	color: var(--color-blue);
}

.component-compare-row__icon {
	flex-shrink: 0;
	display: inline-flex;
}

/* Section-level short note paragraph (Safety Operation Package closing
 * note) — centered, muted, narrow measure. */
.component-section-note {
	text-align: center;
	color: var(--color-dark);
	font-size: 14px;
	max-width: 640px;
	margin: var(--space-24) auto 0;
}

/* -----------------------------------------------------------------------
 * Task 22 — Image Strip (role-based media: gallery/application/detail/
 * comparison/group_*). Reuses the same 3:2 aspect-ratio + object-fit:cover
 * convention Task 21 standardized for card images, so a role image never
 * distorts or blows out its container regardless of the source photo's own
 * aspect ratio.
 * ----------------------------------------------------------------------- */
.component-image-strip--rail {
	display: flex;
	gap: var(--space-16);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--space-16);
	-webkit-overflow-scrolling: touch;
}

.component-image-strip--rail .component-image-strip__item {
	flex: 0 0 220px;
	scroll-snap-align: start;
}

.component-image-strip--grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-16);
}

@media (min-width: 640px) {
	.component-image-strip--grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.component-image-strip__item {
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-soft-blue);
}

.component-image-strip__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-md);
}

@media (max-width: 480px) {
	.component-image-strip--rail .component-image-strip__item {
		flex-basis: 160px;
	}
}

@media (max-width: 1024px) {
	.component-contact-router__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.component-contact-router__list {
		grid-template-columns: 1fr;
	}

	.component-contact-router__panels {
		padding: var(--space-16);
	}

	.contextual-misa-form__modes {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------
 * Search form — Phase 5A (search.php)
 * --------------------------------------------------------------------- */

.component-search-form {
	display: flex;
	gap: var(--space-12);
	margin: var(--space-24) 0 var(--space-16);
	flex-wrap: wrap;
}

.component-search-form__input {
	flex: 1 1 320px;
	min-height: 48px;
	border: 1px solid var(--color-soft-blue);
	border-radius: var(--radius-md);
	padding: 0 var(--space-16);
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-dark);
	background-color: var(--color-white);
}

.component-search-form__count {
	color: var(--color-dark);
	font-size: 14px;
}

/* -----------------------------------------------------------------------
 * Contact info list — Phase 5A (page-contact.php)
 * --------------------------------------------------------------------- */

.component-contact-info {
	list-style: none;
	padding: 0;
	margin: var(--space-16) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.component-contact-info a {
	color: var(--color-blue);
}

/* Shared official social links. Platform marks keep their supplied colors
 * inside a stable neutral control on both light and dark backgrounds. */
.component-social-links__title {
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
}

.component-social-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	list-style: none;
	margin: var(--space-12) 0 0;
	padding: 0;
}

.component-social-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 9px;
	border: 1px solid var(--color-blue);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	color: var(--color-blue);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.component-social-links__link--text {
	width: auto;
	min-width: 44px;
	padding-right: var(--space-12);
	padding-left: var(--space-12);
}

.component-social-links__icon {
	display: block;
	width: auto;
	height: auto;
	max-width: 24px;
	max-height: 24px;
	object-fit: contain;
}

.component-social-links__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.component-social-links--footer {
	margin-top: var(--space-24);
	color: var(--color-white);
}

.component-social-links--footer .component-social-links__title {
	color: var(--color-white);
	margin: 0;
}

.component-social-links--footer .component-social-links__link:hover,
.component-social-links--footer .component-social-links__link:focus-visible {
	background-color: var(--color-soft-blue);
	color: var(--color-blue);
}

.component-social-links--contact .component-social-links__title {
	margin: 0;
	font-size: 18px;
}

.component-social-links--contact .component-social-links__link {
	background-color: var(--color-white);
	color: var(--color-blue);
}

.component-social-links--contact .component-social-links__link:hover,
.component-social-links--contact .component-social-links__link:focus-visible {
	background-color: var(--color-soft-blue);
	color: var(--color-blue);
}

/* -----------------------------------------------------------------------
 * Task 46 — Contact page form + supporting information layout.
 * --------------------------------------------------------------------- */

.contact-layout__intro {
	max-width: 760px;
	margin-bottom: var(--space-32);
}

.contact-layout__intro h2 {
	margin-bottom: var(--space-12);
}

.contact-layout__intro p {
	margin: 0;
	font-size: 18px;
	line-height: 1.7;
}

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
	align-items: start;
	gap: clamp(var(--space-24), 3vw, var(--space-48));
}

.contact-layout--without-panel {
	grid-template-columns: minmax(0, 1fr);
}

.contact-layout__form {
	min-width: 0;
}

.contact-layout__selector-title {
	margin: 0;
	font-size: 20px;
}

.contact-layout .component-contact-router__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--space-16);
}

.contact-layout .component-contact-router__panels {
	padding: clamp(var(--space-24), 3vw, var(--space-32));
}

.contact-layout__panel {
	min-width: 0;
	background: var(--color-soft-blue);
	border: 1px solid var(--color-blue);
	border-radius: var(--radius-md);
	padding: clamp(var(--space-24), 3vw, var(--space-32));
}

.contact-layout__panel > h2 {
	margin: 0;
	font-size: clamp(24px, 2.2vw, 30px);
}

.contact-layout__group {
	padding-top: var(--space-24);
	margin-top: var(--space-24);
	border-top: 1px solid var(--color-blue);
}

.contact-layout__group h3 {
	margin: 0 0 var(--space-8);
	font-size: 18px;
}

.contact-layout__group address {
	margin: 0;
	font-style: normal;
	line-height: 1.65;
}

.contact-layout__group .component-contact-info {
	gap: var(--space-16);
	margin-top: var(--space-12);
}

.contact-layout__group .component-contact-info li {
	display: grid;
	gap: 4px;
}

.contact-layout__group .component-contact-info span {
	font-size: 14px;
	font-weight: 700;
}

.contact-layout__group .component-contact-info a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	overflow-wrap: anywhere;
	font-weight: 700;
}

.contact-layout__group .component-contact-info p,
.contact-layout__pending {
	margin: 0;
	overflow-wrap: anywhere;
}

.contact-layout__pending.is-pending {
	color: var(--color-dark);
	font-style: italic;
	opacity: 0.72;
}

@media (max-width: 1100px) {
	.contact-layout .component-contact-router__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.contact-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-32);
	}

	.contact-layout__intro p {
		font-size: 16px;
	}

	.contact-layout .component-contact-router__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.contact-layout .component-contact-router__panels,
	.contact-layout__panel {
		padding: var(--space-24);
	}
}

/* -----------------------------------------------------------------------
 * Task 19 — Admin-only notice (draft preview label / draft-count notice).
 * Never shown to public visitors — the calling template gates visibility
 * with current_user_can(); this is styling only.
 * --------------------------------------------------------------------- */

.component-admin-notice-wrap {
	padding-top: var(--space-16);
}

.component-admin-notice {
	display: inline-flex;
	flex-direction: column;
	gap: var(--space-4);
	border-radius: var(--radius-md);
	padding: var(--space-12) var(--space-16);
	margin-bottom: var(--space-16);
	max-width: 100%;
}

.component-admin-notice--draft {
	background-color: var(--color-soft-red);
	border: 1px dashed var(--color-red);
}

.component-admin-notice--info {
	background-color: var(--color-soft-blue);
	border: 1px dashed var(--color-blue);
}

.component-admin-notice__label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-red);
}

.component-admin-notice--info .component-admin-notice__label {
	color: var(--color-blue);
}

.component-admin-notice__message {
	margin: 0;
	font-size: 14px;
	color: var(--color-dark);
}

/* -----------------------------------------------------------------------
 * Task 19 — Product Role block ("Sản phẩm này dùng để làm gì?").
 * 2-column card layout, stacks to 1 column on mobile.
 * --------------------------------------------------------------------- */

.component-product-role {
	display: grid;
	gap: var(--space-24);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.component-product-role {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.component-product-role__panel {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-24);
	height: 100%;
}

.component-product-role__title {
	font-size: 20px;
	margin-bottom: var(--space-12);
}

.component-product-role__summary {
	color: var(--color-dark);
	margin-bottom: 0;
}

.component-product-role__panel--list {
	background-color: var(--color-white);
	border: 1px solid var(--color-soft-blue);
}

.component-product-role__list-title {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-blue);
	margin-bottom: var(--space-12);
}

.component-product-role__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.component-product-role__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	font-size: 14px;
	color: var(--color-dark);
}

.component-product-role__list-icon {
	flex-shrink: 0;
	color: var(--color-blue);
	margin-top: 1px;
}

/* -----------------------------------------------------------------------
 * Task 19 — Comparison table (Product Group detail, Section 5).
 * Reuses .component-table / .component-table-wrapper (Step 21 §22) —
 * only adds the wrapper spacing + column-header alignment specific to the
 * comparison use case.
 * --------------------------------------------------------------------- */

.component-comparison-table-wrapper {
	margin-bottom: var(--space-32);
}

.component-comparison-table thead th {
	background-color: var(--color-blue);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
}

.component-comparison-table tbody th {
	background-color: var(--color-soft-blue);
	color: var(--color-blue);
	font-family: var(--font-heading);
	font-weight: 700;
	white-space: nowrap;
}

.component-comparison-table tbody th a {
	color: var(--color-blue);
}

@media (max-width: 767px) {
	.component-comparison-table {
		min-width: 760px;
	}
}

/* -----------------------------------------------------------------------
 * Task 19 — Product Families section (Product Group detail, Section 4).
 * Subheading above each card-rail grouping (Dao an toàn / Hộp bẻ và chứa
 * lưỡi dao / Các model cần owner review).
 * --------------------------------------------------------------------- */

.component-product-family {
	margin-bottom: var(--space-40);
}

.component-product-family:last-child {
	margin-bottom: 0;
}

.component-product-family__title {
	font-size: 18px;
	margin-bottom: var(--space-16);
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.component-product-family__description {
	max-width: 720px;
	margin-top: calc(-1 * var(--space-8));
	margin-bottom: var(--space-16);
	color: var(--color-dark);
	font-size: 15px;
}

.component-product-family__count {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	color: var(--color-blue);
	background-color: var(--color-soft-blue);
	border-radius: 999px;
	padding: 2px var(--space-8);
}

/* =========================================================================
 * TASK 23A — Design system foundation synced from the approved static
 * prototype (design-prototypes/aetech-static-html/assets/css/prototype.css).
 *
 * Everything below this line is ADDITIVE: new classes made available for
 * later template mapping (Task 23B). Nothing above this line was renamed,
 * removed, or restructured — every existing `.component-*` class, every
 * existing template-part, keeps working exactly as before. Where a
 * prototype concept already has a working theme equivalent with different
 * naming (e.g. `.component-cta-block` vs `.cta-band`, `.component-card` vs
 * `.problem-card`/`.solution-card`/etc.), BOTH are kept side by side rather
 * than merged — see content-import/phase23-theme-sync/
 * 04_component_mapping_from_prototype.md for the full class-name mapping
 * table and which one Task 23B should standardize on per template.
 *
 * Only the 6 approved tokens declared in main.css are used here — no new
 * colors, no new font families.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * CTA band — 3 variants (blue / light / form). New, parallel to the
 * existing `.component-cta-block` (kept unchanged, still used by any
 * template that already renders it). Fixes the "white text on soft-blue"
 * contrast bug the static prototype review caught: `.cta-band--light` uses
 * dark text + a red left accent instead.
 * ------------------------------------------------------------------------- */

.cta-row {
	display: flex;
	gap: var(--space-16);
	flex-wrap: wrap;
	align-items: center;
}

.cta-band {
	border-radius: var(--radius-lg);
	padding: var(--space-48);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-32);
}

.cta-band h2,
.cta-band h3 {
	margin-bottom: var(--space-8);
}

.cta-band p {
	margin-bottom: 0;
	max-width: 520px;
}

/* Variant 1 — blue background, white text, red button (default for most
 * final-CTA sections). */
.cta-band--blue {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.cta-band--blue h2,
.cta-band--blue h3 {
	color: var(--color-white);
}

.cta-band--blue p {
	color: rgba(255, 255, 255, 0.84);
}

/* Variant 2 — soft-blue background, dark text, red left accent, red
 * button. Use instead of light text on a light background. */
.cta-band--light {
	background-color: var(--color-soft-blue);
	color: var(--color-dark);
	border-left: 6px solid var(--color-red);
}

.cta-band--light h2,
.cta-band--light h3 {
	color: var(--color-dark);
}

.cta-band--light p {
	color: rgba(17, 24, 39, 0.72);
}

.cta-band--light.cta-band--on-white {
	background-color: var(--color-white);
	border: 1px solid var(--color-soft-blue);
	border-left: 6px solid var(--color-red);
}

/* Variant 3 — landing-page CTA with an embedded-form layout slot. Not
 * necessarily used by every template yet; provided so Task 23B can wire a
 * real .component-form-wrapper into `.cta-band--form__grid`'s second
 * column without inventing new layout CSS at that point. */
.cta-band--form {
	background-color: var(--color-blue);
	color: var(--color-white);
	display: block;
}

.cta-band--form h2,
.cta-band--form h3 {
	color: var(--color-white);
}

.cta-band--form p {
	color: rgba(255, 255, 255, 0.84);
}

.cta-band--form__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--space-48);
	align-items: center;
}

.cta-band__benefits {
	margin-top: var(--space-16);
	list-style: none;
	padding: 0;
}

.cta-band__benefits li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: var(--space-8);
}

.cta-band__benefits li::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 7px;
	border-radius: 50%;
	background-color: var(--color-white);
}

@media (max-width: 767px) {
	.cta-band {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		padding: var(--space-24);
		border-radius: var(--radius-md);
	}

	.cta-band--form__grid {
		grid-template-columns: 1fr;
	}

	.cta-row {
		flex-direction: column;
		align-items: stretch;
	}
}

/* -------------------------------------------------------------------------
 * Info callout — generic "note/clarification" box (distinct from
 * `.component-direct-answer`, which is specifically the SEO Direct Answer
 * block, and `.component-risk-block`, which is a stronger warning). Used
 * in the prototype for things like "this is not a blog post" clarifications
 * and confidentiality notes.
 * ------------------------------------------------------------------------- */

.info-callout {
	display: flex;
	gap: var(--space-16);
	background-color: var(--color-soft-blue);
	border-left: 4px solid var(--color-blue);
	border-radius: var(--radius-sm);
	padding: var(--space-16) var(--space-24);
}

.info-callout--risk {
	background-color: var(--color-soft-red);
	border-left-color: var(--color-red);
}

.info-callout__icon {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-blue);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 700;
}

.info-callout--risk .info-callout__icon {
	background-color: var(--color-red);
}

.info-callout p {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Intent card — selectable "need" card used by a contact-hub style page
 * (pick your intent, then a matching form panel appears). New and unwired:
 * no template currently renders `.intent-card`; provided so Task 23B (or a
 * future contact-hub rebuild) doesn't have to invent this from scratch.
 * The `.is-active` state is a plain class toggle — any future JS just
 * needs to add/remove it, no framework required.
 * ------------------------------------------------------------------------- */

.intent-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-16);
	margin-bottom: var(--space-32);
}

@media (max-width: 767px) {
	.intent-card-grid {
		grid-template-columns: 1fr;
	}
}

.intent-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
	background: var(--color-white);
	border: 2px solid rgba(17, 24, 39, 0.1);
	border-radius: var(--radius-md);
	padding: var(--space-20, 20px);
	cursor: pointer;
	font-family: var(--font-body);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.intent-card:hover {
	border-color: rgba(6, 52, 140, 0.35);
	transform: translateY(-1px);
}

.intent-card.is-active {
	border-color: var(--color-blue);
	background: var(--color-soft-blue);
	box-shadow: var(--shadow-card);
}

.intent-card__icon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: var(--color-soft-blue);
	color: var(--color-blue);
	display: flex;
	align-items: center;
	justify-content: center;
}

.intent-card.is-active .intent-card__icon {
	background: var(--color-white);
}

.intent-card__icon svg {
	width: 20px;
	height: 20px;
}

.intent-card__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-dark);
}

.intent-card__desc {
	font-size: 0.8438rem;
	color: rgba(17, 24, 39, 0.62);
	margin: 0;
}

.intent-card__check {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-blue);
	color: var(--color-white);
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
}

.intent-card.is-active .intent-card__check {
	display: flex;
}

/* Task 23B-1 — Contact Hub compatibility fix: page-contact.php now puts
 * `.intent-card` on the SAME element as the existing, already-live
 * `.component-contact-router__item` (Task 23A added `.intent-card`
 * additively; nothing here changed the router's own rules above). Both
 * `.is-active` rules have equal specificity, so without this the later
 * `.intent-card.is-active` (soft-blue background) would silently win over
 * `.component-contact-router__item.is-active` (solid blue background)
 * while the router's own white title/desc text color rule stayed active —
 * white text on soft-blue would be unreadable. This restores the
 * already-correct solid-blue + white-text pairing whenever both classes
 * are present together, so Contact Hub's active-card contrast never
 * breaks regardless of CSS source order. */
.component-contact-router__item.intent-card.is-active {
	background: var(--color-blue);
}

.component-contact-router__item.intent-card.is-active .intent-card__title,
.component-contact-router__item.intent-card.is-active .intent-card__desc {
	color: var(--color-white);
}

.component-contact-router__item.intent-card.is-active .intent-card__icon {
	background: rgba(255, 255, 255, 0.16);
	color: var(--color-white);
}

/* -------------------------------------------------------------------------
 * Article / sidebar foundation — porting the Insight Detail reading layout
 * (TOC, sticky sidebar, related-content cards, risk/summary callouts) as
 * unwired foundation classes. Not used by single-insight.php yet (that
 * template keeps its current markup in this phase per the Task 23A scope
 * list) — available for Task 23B to wire in.
 * ------------------------------------------------------------------------- */

.article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 0.875rem;
	color: rgba(17, 24, 39, 0.56);
	padding: var(--space-16) 0 var(--space-24);
	border-bottom: var(--border-soft);
	margin-bottom: var(--space-24);
}

.article-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.article-body p {
	color: rgba(17, 24, 39, 0.78);
}

.article-body h3 {
	margin-top: var(--space-32);
}

.article-caption {
	font-size: 0.8125rem;
	color: rgba(17, 24, 39, 0.56);
	text-align: center;
	margin-top: 10px;
}

.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	align-items: start;
}

@media (max-width: 1024px) {
	.article-layout {
		grid-template-columns: 1fr;
	}
}

.article-main {
	max-width: 760px;
	min-width: 0;
}

.article-summary {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--color-soft-blue);
	border-left: 3px solid var(--color-blue);
	border-radius: var(--radius-md);
	padding: 22px 28px;
	margin-bottom: 48px;
}

.article-summary .article-callout__icon {
	background: var(--color-blue);
	margin-top: 1px;
}

.article-summary p {
	margin-bottom: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
}

.article-summary strong {
	display: block;
	margin-bottom: 4px;
}

.article-section {
	scroll-margin-top: 112px;
}

.article-section + .article-section {
	margin-top: 32px;
	padding-top: 24px;
	border-top: var(--border-soft);
}

.article-section h2 {
	font-size: 1.5rem;
	margin-top: 0;
	margin-bottom: 18px;
}

.article-section h3 {
	font-size: 1.125rem;
	margin-top: 32px;
	margin-bottom: 12px;
}

.article-section .article-body p {
	margin-bottom: 18px;
	line-height: 1.75;
}

.article-section .article-body p:last-child {
	margin-bottom: 0;
}

.article-related-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-24);
	margin-top: 20px;
}

@media (max-width: 600px) {
	.article-related-grid {
		grid-template-columns: 1fr;
	}
}

.article-risk-list {
	display: grid;
	gap: 16px;
	margin: 28px 0 0;
}

.article-callout {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: var(--color-soft-red);
	border-left: 3px solid var(--color-red);
	border-radius: var(--radius-md);
	padding: 18px 22px;
}

.article-callout--blue {
	background: var(--color-soft-blue);
	border-left-color: var(--color-blue);
}

.article-callout__icon {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-red);
	color: var(--color-white);
	font-size: 0.8125rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.article-callout--blue .article-callout__icon {
	background: var(--color-blue);
}

.article-callout p {
	margin-bottom: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.article-callout strong {
	display: block;
	margin-bottom: 3px;
}

.article-checklist {
	list-style: none;
	margin: 24px 0 48px;
	padding: 20px 22px;
	background: var(--color-soft-blue);
	border-radius: var(--radius-md);
}

.article-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.9375rem;
	margin-bottom: 12px;
}

.article-checklist li:last-child {
	margin-bottom: 0;
}

.article-checklist li::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: 4px;
	border: 2px solid var(--color-blue);
}

/* Sidebar — sticky TOC + related-content + CTA blocks. `.sidebar-card` is
 * a shared padding/radius rule meant to be applied alongside
 * `.article-toc` / `.related-card` / `.sidebar-cta` so all blocks in the
 * column stay visually consistent even though each keeps its own
 * background/color rule. */
.article-sidebar {
	display: grid;
	gap: 18px;
	position: sticky;
	top: 104px;
	align-self: start;
}

@media (max-width: 1024px) {
	.article-sidebar {
		position: static;
	}
}

.sidebar-card,
.article-toc,
.related-card,
.sidebar-cta {
	border-radius: 12px;
	padding: 20px;
}

.article-toc,
.related-card {
	background: var(--color-white);
	border: var(--border-soft);
}

.article-toc {
	padding: 20px 22px;
}

.article-toc__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
	margin-bottom: 14px;
}

.article-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.article-toc__link {
	display: block;
	font-size: 0.875rem;
	color: rgba(17, 24, 39, 0.68);
	padding: 8px 0 8px 12px;
	border-left: 2px solid transparent;
	line-height: 1.45;
}

.article-toc__link:hover {
	color: var(--color-blue);
}

.article-toc__link.is-active {
	color: var(--color-blue);
	border-left-color: var(--color-red);
	font-weight: 700;
}

.related-card__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
	margin-bottom: 14px;
}

.related-card__body {
	font-size: 0.875rem;
	color: rgba(17, 24, 39, 0.68);
	margin-bottom: 12px;
	line-height: 1.5;
}

.related-card__list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.related-card__list li {
	font-size: 0.875rem;
	line-height: 1.4;
}

.related-card__list a {
	color: var(--color-dark);
}

.related-card__list a:hover {
	color: var(--color-blue);
}

.related-card__cta {
	margin-top: 12px;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--color-blue);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.related-card__cta:hover {
	color: var(--color-red);
}

.sidebar-cta {
	background: var(--color-blue);
	color: var(--color-white);
	text-align: center;
}

.sidebar-cta p {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
	margin-bottom: 16px;
}

.sidebar-cta .btn {
	width: 100%;
}

/* Major section transitions for an article/reading page — each sets its
 * own background + padding rather than stacking two sections' default
 * paddings on top of each other. */
.article-reading-section {
	padding-top: 0;
	padding-bottom: 88px;
	background: var(--color-white);
}

.article-final-cta-section {
	background: var(--color-soft-blue);
	padding: 80px 0;
}

.article-final-cta-section .cta-band {
	max-width: 1080px;
	margin: 0 auto;
}

.article-related-section {
	background: var(--color-white);
	padding: 80px 0;
}

/* =========================================================================
 * TASK 23B-2 — Archive pages: featured-insight block (Insight Archive only,
 * shown for the latest published post on page 1 when no filter/search is
 * active). Reuses the existing `.content-media.split-layout` layout and
 * `.card__title`/`.card__body` typography (Task 23A) rather than a new
 * type system.
 * ========================================================================= */

.archive-featured-insight {
	background: var(--color-soft-blue);
	border-radius: var(--radius-lg);
	padding: var(--space-32);
	margin-bottom: var(--space-32);
}

.archive-featured-insight .card__title {
	font-size: 1.375rem;
}

/* Product Group pagination is a standalone route control, so its links need
 * stable dimensions across numeric, previous, and next states. */
.single-product_group .pagination {
	margin-top: var(--space-32);
}

.single-product_group .pagination .page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.single-product_group .pagination li {
	margin: 0;
}

.single-product_group .pagination a.page-numbers,
.single-product_group .pagination span.page-numbers {
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--color-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-blue);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.single-product_group .pagination span.page-numbers.current {
	background: var(--color-blue);
	color: var(--color-white);
}

.single-product_group .pagination span.page-numbers.disabled {
	border-color: rgba(17, 24, 39, 0.28);
	color: rgba(17, 24, 39, 0.48);
	cursor: not-allowed;
}

.single-product_group .pagination span.page-numbers.dots {
	border-color: transparent;
	min-width: 24px;
	padding-inline: 4px;
}

.single-product_group .pagination a.page-numbers:hover {
	background: var(--color-soft-blue);
	color: var(--color-blue);
}

.single-product_group .pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 3px;
}

/* Product Archive uses WordPress core pagination markup rather than the
 * Product Group list wrapper. Keep its controls independently sized so the
 * archive gains accessible touch targets without changing route behavior. */
.post-type-archive-product .pagination,
.post-type-archive-product_group .pagination,
.search-results .pagination {
	margin-top: var(--space-32);
}

.post-type-archive-product .pagination .nav-links,
.post-type-archive-product_group .pagination .nav-links,
.search-results .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.post-type-archive-product .pagination a.page-numbers,
.post-type-archive-product .pagination span.page-numbers.current,
.post-type-archive-product_group .pagination a.page-numbers,
.post-type-archive-product_group .pagination span.page-numbers.current,
.search-results .pagination a.page-numbers,
.search-results .pagination span.page-numbers.current {
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--color-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-blue);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.post-type-archive-product .pagination span.page-numbers.current,
.post-type-archive-product_group .pagination span.page-numbers.current,
.search-results .pagination span.page-numbers.current {
	background: var(--color-blue);
	color: var(--color-white);
}

.post-type-archive-product .pagination span.page-numbers.dots,
.post-type-archive-product_group .pagination span.page-numbers.dots,
.search-results .pagination span.page-numbers.dots {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.post-type-archive-product .pagination a.page-numbers:hover,
.post-type-archive-product_group .pagination a.page-numbers:hover,
.search-results .pagination a.page-numbers:hover {
	background: var(--color-soft-blue);
	color: var(--color-blue);
}

.post-type-archive-product .pagination a.page-numbers:focus-visible,
.post-type-archive-product_group .pagination a.page-numbers:focus-visible,
.search-results .pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 3px;
}

/* Task 56: compact, source-verified Product metrics. */
.product-key-data {
	display: grid;
	gap: var(--space-32);
}

.product-key-data__table-wrap {
	border: 1px solid var(--color-blue);
	background: var(--color-white);
}

.product-key-data__title {
	margin: 0;
	padding: 16px 20px;
	background: var(--color-soft-blue);
	color: var(--color-blue);
	font-size: 1.25rem;
}

.product-key-data__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.product-key-data__table th,
.product-key-data__table td {
	padding: 14px 16px;
	border-top: 1px solid var(--color-soft-blue);
	color: var(--color-ink);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.product-key-data__table thead th {
	border-top: 0;
	background: var(--color-blue);
	color: var(--color-white);
	font-weight: 700;
}

.product-key-data__table tbody th {
	color: var(--color-blue);
	font-weight: 700;
}

.product-key-data__component {
	display: block;
	margin-top: 4px;
	color: var(--color-ink);
	font-size: 0.875rem;
	font-weight: 400;
}

.product-key-data__disclaimer {
	max-width: 78ch;
	margin: 0;
	color: var(--color-ink);
	font-size: 0.9375rem;
}

@media (max-width: 767px) {
	.product-key-data__table,
	.product-key-data__table tbody,
	.product-key-data__table tr,
	.product-key-data__table th,
	.product-key-data__table td {
		display: block;
		width: 100%;
	}

	.product-key-data__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.product-key-data__table tr {
		padding: 12px 16px;
		border-top: 1px solid var(--color-blue);
	}

	.product-key-data__table tbody tr:first-child {
		border-top: 0;
	}

	.product-key-data__table th,
	.product-key-data__table td {
		padding: 4px 0;
		border: 0;
	}

	.product-key-data__table td::before {
		content: attr(data-label) ": ";
		color: var(--color-blue);
		font-weight: 700;
	}
}