/* ---------------------------------------------------------------------------
 * GENERATED FILE — DO NOT EDIT HERE.
 *
 * Source: design/components.css
 * Sync:   python tools/sync-theme-css.py
 *
 * Edits made in this copy are lost on the next sync and are invisible to the
 * prototypes in design/prototypes/, which read the source directly.
 * ------------------------------------------------------------------------ */

/**
 * Mervia Group — components, part 1
 * Buttons · form controls · badges · tables · cards · callouts · media
 *
 * Part 2 (header, mega-menu, footer, breadcrumbs, hero, CTA band, language
 * switcher, sticky quote bar) is appended to this file in step 5.
 *
 * Load order: tokens.css → base.css → components.css
 * Every component is BEM: .c-block__element--modifier. No nesting beyond one
 * element level, no bare tag selectors outside the block scope.
 */

/* ==========================================================================
   1. BUTTONS
   ==========================================================================
   One shape, four weights of emphasis. The primary (ember) button is reserved
   for the single most valuable action on a page — in practice always some
   variant of "Request a quote" or "Add to enquiry". Anything else is quiet.
   ---------------------------------------------------------------------- */

.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--co-space-2);
	min-height: var(--co-control-height);
	padding-inline: var(--co-space-5);
	border: var(--co-border-width) solid transparent;
	border-radius: var(--co-radius-md);
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-semibold);
	line-height: var(--co-leading-none);
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--co-transition-base),
		border-color var(--co-transition-base), color var(--co-transition-base),
		transform var(--co-duration-instant) var(--co-ease-out);
}

.c-btn:active {
	transform: translateY(1px);
}

.c-btn:disabled,
.c-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Primary — ember. Maximum one per viewport section. */
.c-btn--primary {
	background: var(--co-color-action);
	border-color: var(--co-color-action);
	color: var(--co-color-action-text);
}

.c-btn--primary:hover {
	background: var(--co-color-action-hover);
	border-color: var(--co-color-action-hover);
	color: var(--co-color-action-text);
}

.c-btn--primary:active {
	background: var(--co-color-action-active);
	border-color: var(--co-color-action-active);
}

/* Secondary — solid slate. Same weight of intent, lower visual heat. */
.c-btn--secondary {
	background: var(--co-color-action-quiet);
	border-color: var(--co-color-action-quiet);
	color: var(--co-color-text-inverse);
}

.c-btn--secondary:hover {
	background: var(--co-color-action-quiet-hover);
	border-color: var(--co-color-action-quiet-hover);
	color: var(--co-color-text-inverse);
}

/* Outline — the workhorse. "Download spec sheet", "View all products". */
.c-btn--outline {
	background: transparent;
	border-color: var(--co-color-border-strong);
	color: var(--co-color-text);
}

.c-btn--outline:hover {
	background: var(--co-color-surface-sunken);
	border-color: var(--co-slate-500);
	color: var(--co-color-text);
}

/* Ghost — tertiary, inside cards and table rows. */
.c-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--co-color-action);
	padding-inline: var(--co-space-3);
}

.c-btn--ghost:hover {
	background: var(--co-color-surface-accent);
	color: var(--co-color-action-hover);
}

/* On dark backgrounds (hero, CTA band, footer). */
.c-btn--inverse {
	background: var(--co-white);
	border-color: var(--co-white);
	color: var(--co-slate-900);
}

.c-btn--inverse:hover {
	background: var(--co-stone-100);
	border-color: var(--co-stone-100);
	color: var(--co-slate-900);
}

.c-btn--inverse-outline {
	background: transparent;
	border-color: var(--co-color-border-inverse);
	color: var(--co-color-text-inverse);
}

.c-btn--inverse-outline:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--co-color-text-inverse);
}

/* Sizes */
.c-btn--sm {
	min-height: var(--co-control-height-sm);
	padding-inline: var(--co-space-4);
	font-size: var(--co-text-xs);
}

.c-btn--lg {
	min-height: 3.25rem;
	padding-inline: var(--co-space-7);
	font-size: var(--co-text-base);
}

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

.c-btn__icon {
	width: var(--co-icon-sm);
	height: var(--co-icon-sm);
	flex: 0 0 auto;
}

.c-btn--lg .c-btn__icon {
	width: var(--co-icon-md);
	height: var(--co-icon-md);
}

/* Busy state for AJAX actions (add to enquiry, calculator PDF). */
.c-btn[data-mv-busy="true"] {
	pointer-events: none;
	opacity: 0.7;
}

.c-btn[data-mv-busy="true"] .c-btn__icon {
	animation: co-spin var(--co-duration-slow) linear infinite;
}

@keyframes co-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Text link that behaves like an action: "All bin liners →" */
.c-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--co-space-2);
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-semibold);
	color: var(--co-color-action);
	text-decoration: none;
}

.c-link-arrow:hover {
	color: var(--co-color-action-hover);
}

.c-link-arrow::after {
	content: "→";
	transition: transform var(--co-transition-base);
}

.c-link-arrow:hover::after {
	transform: translateX(3px);
}

/* ==========================================================================
   2. FORM CONTROLS
   ==========================================================================
   Used by the RFQ forms, the enquiry basket and all nine calculators, so the
   control set has to survive both a 12-field form and a dense calculator panel.
   ---------------------------------------------------------------------- */

.c-field {
	display: flex;
	flex-direction: column;
	gap: var(--co-space-2);
}

.c-field__label {
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-semibold);
	color: var(--co-color-text);
}

.c-field__label--required::after {
	content: "*";
	color: var(--co-color-danger);
	margin-inline-start: 0.2em;
}

.c-field__hint {
	font-size: var(--co-text-xs);
	color: var(--co-color-text-muted);
}

.c-field__error {
	display: flex;
	align-items: center;
	gap: var(--co-space-2);
	font-size: var(--co-text-xs);
	font-weight: var(--co-weight-medium);
	color: var(--co-color-danger);
}

.c-input,
.c-select,
.c-textarea {
	width: 100%;
	min-height: var(--co-control-height);
	padding: var(--co-space-3) var(--co-control-padding-x);
	background: var(--co-color-surface);
	border: var(--co-border-width) solid var(--co-color-border-strong);
	border-radius: var(--co-radius-md);
	font-size: var(--co-text-sm);
	color: var(--co-color-text);
	transition: border-color var(--co-transition-base),
		box-shadow var(--co-transition-base);
}

.c-input::placeholder,
.c-textarea::placeholder {
	color: var(--co-stone-400);
}

.c-input:hover,
.c-select:hover,
.c-textarea:hover {
	border-color: var(--co-slate-400);
}

.c-input:focus,
.c-select:focus,
.c-textarea:focus {
	outline: none;
	border-color: var(--co-color-focus);
	box-shadow: var(--co-focus-ring);
}

.c-textarea {
	min-height: 8rem;
	line-height: var(--co-leading-normal);
	padding-block: var(--co-space-3);
}

/* Native select arrow replaced — the default differs wildly across platforms
   and looks broken next to the flat inputs. */
.c-select {
	appearance: none;
	padding-inline-end: var(--co-space-8);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2355666e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--co-space-4) center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* Inline select: sits in a toolbar row rather than in a form field stack. */
.c-select--inline {
	width: auto;
	min-height: var(--co-control-height-sm);
	padding-block: var(--co-space-1);
	font-size: var(--co-text-xs);
}

[dir="rtl"] .c-select {
	background-position: left var(--co-space-4) center;
}

.c-field--invalid .c-input,
.c-field--invalid .c-select,
.c-field--invalid .c-textarea,
.c-input[aria-invalid="true"],
.c-select[aria-invalid="true"],
.c-textarea[aria-invalid="true"] {
	border-color: var(--co-color-danger);
	background: var(--co-color-danger-bg);
}

.c-input:disabled,
.c-select:disabled,
.c-textarea:disabled {
	background: var(--co-color-surface-sunken);
	color: var(--co-color-text-subtle);
	cursor: not-allowed;
}

/* Input with a unit suffix — "40 [micron]", "1200 [mm]". Everywhere in the
   calculators; the unit must not be typed by the user. */
.c-input-group {
	display: flex;
	align-items: stretch;
}

.c-input-group .c-input {
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.c-input-group__unit {
	display: flex;
	align-items: center;
	padding-inline: var(--co-space-4);
	background: var(--co-color-surface-sunken);
	border: var(--co-border-width) solid var(--co-color-border-strong);
	border-inline-start: 0;
	border-start-end-radius: var(--co-radius-md);
	border-end-end-radius: var(--co-radius-md);
	font-family: var(--co-font-mono);
	font-size: var(--co-text-xs);
	color: var(--co-color-text-muted);
	white-space: nowrap;
}

/* Checkbox / radio. Native control kept (accessibility, autofill), restyled. */
.c-check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--co-space-3);
	align-items: start;
	cursor: pointer;
	font-size: var(--co-text-sm);
	line-height: var(--co-leading-normal);
}

.c-check__input {
	appearance: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-block-start: 0.18rem;
	background: var(--co-color-surface);
	border: var(--co-border-width-thick) solid var(--co-color-border-strong);
	border-radius: var(--co-radius-sm);
	cursor: pointer;
	transition: background-color var(--co-transition-base),
		border-color var(--co-transition-base);
}

.c-check__input[type="radio"] {
	border-radius: var(--co-radius-pill);
}

.c-check__input:checked {
	background-color: var(--co-color-action);
	border-color: var(--co-color-action);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4 4.8 8.7 9.5 3.9' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.85rem;
}

.c-check__input[type="radio"]:checked {
	background-image: none;
	box-shadow: inset 0 0 0 3px var(--co-color-surface);
}

.c-check__input:hover {
	border-color: var(--co-slate-400);
}

.c-check__text {
	color: var(--co-color-text-muted);
}

.c-check__text strong {
	color: var(--co-color-text);
	font-weight: var(--co-weight-medium);
}

/* Segmented control — calculator mode switches (Sacks / Stretch film,
   Hand / Machine film, EPAL / industrial pallet). */
.c-segmented {
	display: inline-flex;
	padding: 3px;
	background: var(--co-color-surface-sunken);
	border: var(--co-border-width) solid var(--co-color-border);
	border-radius: var(--co-radius-md);
	gap: 2px;
}

.c-segmented__option {
	position: relative;
}

.c-segmented__input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.c-segmented__label {
	display: block;
	padding: var(--co-space-2) var(--co-space-4);
	border-radius: var(--co-radius-sm);
	font-size: var(--co-text-xs);
	font-weight: var(--co-weight-semibold);
	color: var(--co-color-text-muted);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--co-transition-base),
		color var(--co-transition-base);
}

.c-segmented__input:checked + .c-segmented__label {
	background: var(--co-color-surface);
	color: var(--co-color-text);
	box-shadow: var(--co-shadow-xs);
}

.c-segmented__input:focus-visible + .c-segmented__label {
	outline: var(--co-border-width-thick) solid var(--co-color-focus);
	outline-offset: 1px;
}

/* Form layouts */
.c-form-grid {
	display: grid;
	gap: var(--co-space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.c-form-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.c-form-grid__full {
	grid-column: 1 / -1;
}

.c-fieldset {
	border: 0;
	padding: 0;
	/* Only the inline margin, which is what the browser actually sets on a
	   fieldset. A blanket `margin: 0` also silently beats every .u-mt-*
	   utility, because components.css loads after base.css — so a fieldset
	   with a spacing utility on it would sit flush against the one above. */
	margin-inline: 0;
}

.c-fieldset__legend {
	font-size: var(--co-text-xs);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-color-text-muted);
	margin-block-end: var(--co-space-4);
	padding-block-end: var(--co-space-2);
	border-block-end: var(--co-border-width) solid var(--co-color-rule);
	width: 100%;
}

/* Honeypot: must be reachable by bots, invisible and unreachable for humans.
   display:none is skipped by some bots, so it is offset instead. */
.c-form__trap {
	position: absolute !important;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   3. BADGES & PILLS
   ========================================================================== */

.c-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--co-space-1);
	padding: 0.2rem var(--co-space-3);
	border-radius: var(--co-radius-sm);
	background: var(--co-color-surface-sunken);
	color: var(--co-color-text-muted);
	font-size: var(--co-text-2xs);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	white-space: nowrap;
	line-height: 1.5;
}

.c-badge--accent {
	background: var(--co-color-surface-accent);
	color: var(--co-ember-700);
}

.c-badge--success {
	background: var(--co-color-success-bg);
	color: var(--co-color-success);
}

.c-badge--warning {
	background: var(--co-color-warning-bg);
	color: var(--co-color-warning);
}

.c-badge--danger {
	background: var(--co-color-danger-bg);
	color: var(--co-color-danger);
}

.c-badge--info {
	background: var(--co-color-info-bg);
	color: var(--co-color-info);
}

.c-badge--inverse {
	background: rgba(255, 255, 255, 0.12);
	color: var(--co-color-text-inverse);
}

.c-badge--outline {
	background: transparent;
	border: var(--co-border-width) solid var(--co-color-border-strong);
}

/* Certification marks: EN 13432, ISPM 15, FSC, EPAL, PEFC. Not uppercase —
   these are proper standard designations and must read exactly as written. */
.c-cert {
	display: inline-flex;
	align-items: center;
	gap: var(--co-space-2);
	padding: var(--co-space-1) var(--co-space-3);
	border: var(--co-border-width) solid var(--co-color-border);
	border-radius: var(--co-radius-sm);
	background: var(--co-color-surface);
	font-family: var(--co-font-mono);
	font-size: var(--co-text-2xs);
	color: var(--co-color-text-muted);
	white-space: nowrap;
}

.c-cert__icon {
	width: var(--co-icon-sm);
	height: var(--co-icon-sm);
	color: var(--co-color-success);
	flex: 0 0 auto;
}

/* Filter pill — active facet in the catalogue, removable. */
.c-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--co-space-2);
	padding: var(--co-space-1) var(--co-space-2) var(--co-space-1) var(--co-space-3);
	background: var(--co-color-surface-accent);
	border: var(--co-border-width) solid var(--co-ember-200);
	border-radius: var(--co-radius-pill);
	font-size: var(--co-text-xs);
	font-weight: var(--co-weight-medium);
	color: var(--co-ember-700);
	text-decoration: none;
}

.c-pill__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: var(--co-radius-pill);
	background: var(--co-ember-200);
	color: var(--co-ember-700);
	font-size: 0.7rem;
	line-height: 1;
}

.c-pill:hover .c-pill__remove {
	background: var(--co-color-action);
	color: var(--co-white);
}

/* ==========================================================================
   4. TABLES
   ==========================================================================
   Two distinct jobs:
   .c-spec-table  — label/value pairs for one product (vertical, two columns)
   .c-data-table  — variant matrix, many rows and columns, scrolls on mobile
   ---------------------------------------------------------------------- */

.c-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--co-text-sm);
}

.c-spec-table th,
.c-spec-table td {
	padding: var(--co-table-row-padding);
	text-align: start;
	vertical-align: top;
	border-block-end: var(--co-border-width) solid var(--co-color-border);
}

.c-spec-table th {
	width: 42%;
	font-weight: var(--co-weight-medium);
	color: var(--co-color-text-muted);
}

.c-spec-table td {
	font-family: var(--co-font-mono);
	font-size: var(--co-text-xs);
	color: var(--co-color-text);
}

.c-spec-table tr:last-child th,
.c-spec-table tr:last-child td {
	border-block-end: 0;
}

.c-spec-table__group th {
	background: var(--co-color-surface-sunken);
	font-family: var(--co-font-sans);
	font-size: var(--co-text-2xs);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-color-text);
}

.c-data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--co-text-sm);
	white-space: nowrap;
}

.c-data-table thead th {
	position: sticky;
	top: 0;
	z-index: var(--co-z-base);
	padding: var(--co-space-3) var(--co-space-4);
	background: var(--co-slate-800);
	color: var(--co-color-text-inverse);
	font-size: var(--co-text-2xs);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	text-align: start;
}

.c-data-table tbody td {
	padding: var(--co-space-3) var(--co-space-4);
	border-block-end: var(--co-border-width) solid var(--co-color-border);
	font-family: var(--co-font-mono);
	font-size: var(--co-text-xs);
	vertical-align: middle;
}

.c-data-table tbody td:first-child {
	font-family: var(--co-font-sans);
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-medium);
	white-space: normal;
}

.c-data-table tbody tr:nth-child(even) {
	background: var(--co-stone-050);
}

.c-data-table tbody tr:hover {
	background: var(--co-color-surface-accent);
}

.c-data-table__num {
	text-align: end;
}

.c-data-table__action {
	text-align: end;
	white-space: nowrap;
}

/* Wraps either table on narrow screens. Shadow hints at hidden columns. */
.c-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: var(--co-border-width) solid var(--co-color-border);
	border-radius: var(--co-radius-md);
	background:
		linear-gradient(to right, var(--co-color-surface) 30%, rgba(250, 249, 247, 0)),
		linear-gradient(to left, var(--co-color-surface) 30%, rgba(250, 249, 247, 0)) 100% 0,
		linear-gradient(to right, rgba(14, 26, 31, 0.09), rgba(14, 26, 31, 0)),
		linear-gradient(to left, rgba(14, 26, 31, 0.09), rgba(14, 26, 31, 0)) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

.c-table-scroll .c-spec-table,
.c-table-scroll .c-data-table {
	background: transparent;
}

/* ==========================================================================
   5. CARDS
   ========================================================================== */

.c-card {
	display: flex;
	flex-direction: column;
	background: var(--co-color-surface);
	border: var(--co-border-width) solid var(--co-color-border);
	border-radius: var(--co-radius-md);
	overflow: hidden;
	transition: border-color var(--co-transition-base),
		box-shadow var(--co-transition-base), transform var(--co-transition-base);
}

.c-card--link:hover {
	border-color: var(--co-color-border-strong);
	box-shadow: var(--co-shadow-md);
	transform: translateY(-2px);
}

.c-card__media {
	position: relative;
	background: var(--co-color-surface-sunken);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.c-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--co-duration-slow) var(--co-ease-out);
}

.c-card--link:hover .c-card__media img {
	transform: scale(1.03);
}

.c-card__media--contain {
	background: var(--co-white);
}

.c-card__media--contain img {
	object-fit: contain;
	padding: var(--co-space-4);
}

.c-card__flag {
	position: absolute;
	top: var(--co-space-3);
	inset-inline-start: var(--co-space-3);
	z-index: var(--co-z-raised);
}

.c-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--co-space-3);
	padding: var(--co-card-padding);
	flex: 1 1 auto;
}

.c-card__eyebrow {
	font-size: var(--co-text-2xs);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-color-text-subtle);
}

.c-card__title {
	font-size: var(--co-text-lg);
	font-weight: var(--co-weight-semibold);
	line-height: var(--co-leading-snug);
	color: var(--co-color-text);
	margin: 0;
}

.c-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Whole-card click target without nesting interactive elements. */
.c-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--co-z-base);
}

.c-card--link {
	position: relative;
}

.c-card__text {
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
	margin: 0;
}

.c-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--co-space-2) var(--co-space-4);
	font-size: var(--co-text-xs);
	color: var(--co-color-text-subtle);
}

/* Key specs shown on a product card without opening the product page —
   this is what lets a buyer scan a category grid and shortlist in seconds. */
.c-card__specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--co-space-1) var(--co-space-4);
	margin: 0;
	font-size: var(--co-text-xs);
}

.c-card__specs dt {
	color: var(--co-color-text-subtle);
}

.c-card__specs dd {
	margin: 0;
	font-family: var(--co-font-mono);
	color: var(--co-color-text);
}

.c-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--co-space-3);
	padding: var(--co-space-4) var(--co-card-padding);
	border-block-start: var(--co-border-width) solid var(--co-color-border);
	margin-block-start: auto;
	position: relative;
	z-index: var(--co-z-raised); /* stays clickable above the title overlay */
}

.c-card--flush .c-card__body {
	padding-inline: 0;
}

/* Category card — larger title, no image crop, used on /products/ hub. */
.c-card--category .c-card__title {
	font-size: var(--co-text-xl);
}

.c-card--category .c-card__media {
	aspect-ratio: 16 / 10;
}

/* Compact horizontal card — search results, related items, basket rows. */
.c-card--row {
	flex-direction: row;
	align-items: stretch;
}

.c-card--row .c-card__media {
	flex: 0 0 clamp(84px, 22%, 160px);
	aspect-ratio: 1;
}

/* Stat card — trust bar figures ("4 categories", "1 invoice", "12–15 days"). */
.c-stat {
	display: flex;
	flex-direction: column;
	gap: var(--co-space-1);
}

.c-stat__value {
	font-size: var(--co-text-2xl);
	font-weight: var(--co-weight-bold);
	line-height: var(--co-leading-none);
	letter-spacing: var(--co-tracking-tight);
	color: var(--co-color-text);
}

.c-stat--accent .c-stat__value {
	color: var(--co-color-action);
}

.co-section--inverse .c-stat__value,
.c-stat--inverse .c-stat__value {
	color: var(--co-color-text-inverse);
}

.c-stat__label {
	font-size: var(--co-text-xs);
	color: var(--co-color-text-muted);
	text-wrap: balance;
}

.c-stat--inverse .c-stat__label {
	color: var(--co-color-text-inverse-muted);
}

/* Numbered step card — ordering process, how we work. */
.c-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--co-space-4);
	align-items: start;
}

.c-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 auto;
	border-radius: var(--co-radius-pill);
	background: var(--co-color-surface-inverse);
	color: var(--co-color-text-inverse);
	font-family: var(--co-font-mono);
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-semibold);
}

.c-step--accent .c-step__number {
	background: var(--co-color-action);
}

.c-step__title {
	font-size: var(--co-text-base);
	font-weight: var(--co-weight-semibold);
	margin-block-end: var(--co-space-1);
}

.c-step__text {
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
}

/* ==========================================================================
   6. CALLOUTS
   ==========================================================================
   Compliance content leans on these heavily — a PPWR page is 60% warnings and
   requirements. Left rule instead of a filled box so a page of six callouts
   does not turn into a colour riot.
   ---------------------------------------------------------------------- */

.c-callout {
	display: flex;
	gap: var(--co-space-4);
	padding: var(--co-space-5);
	background: var(--co-color-surface-sunken);
	border-inline-start: var(--co-border-accent-width) solid var(--co-color-border-strong);
	border-radius: 0 var(--co-radius-md) var(--co-radius-md) 0;
	font-size: var(--co-text-sm);
}

.c-callout__icon {
	width: var(--co-icon-md);
	height: var(--co-icon-md);
	flex: 0 0 auto;
	margin-block-start: 0.15rem;
	color: var(--co-color-text-muted);
}

.c-callout__title {
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-semibold);
	margin-block-end: var(--co-space-1);
}

.c-callout__body > * + * {
	margin-block-start: var(--co-space-3);
}

.c-callout--info {
	background: var(--co-color-info-bg);
	border-color: var(--co-color-info);
}

.c-callout--info .c-callout__icon {
	color: var(--co-color-info);
}

.c-callout--success {
	background: var(--co-color-success-bg);
	border-color: var(--co-color-success);
}

.c-callout--success .c-callout__icon {
	color: var(--co-color-success);
}

.c-callout--warning {
	background: var(--co-color-warning-bg);
	border-color: var(--co-color-warning);
}

.c-callout--warning .c-callout__icon {
	color: var(--co-color-warning);
}

.c-callout--danger {
	background: var(--co-color-danger-bg);
	border-color: var(--co-color-danger);
}

.c-callout--danger .c-callout__icon {
	color: var(--co-color-danger);
}

.c-callout--accent {
	background: var(--co-color-surface-accent);
	border-color: var(--co-color-action);
}

.c-callout--accent .c-callout__icon {
	color: var(--co-color-action);
}

/* ==========================================================================
   7. MEDIA
   ========================================================================== */

.c-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--co-radius-md);
	background: var(--co-color-surface-sunken);
}

.c-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-media--4-3 { aspect-ratio: 4 / 3; }
.c-media--16-9 { aspect-ratio: 16 / 9; }
.c-media--3-2 { aspect-ratio: 3 / 2; }
.c-media--square { aspect-ratio: 1; }

.c-media__caption {
	margin-block-start: var(--co-space-2);
	font-size: var(--co-text-xs);
	color: var(--co-color-text-muted);
}

/* Product gallery: one main frame, thumbnails beneath.
   The wrapper carries no styling of its own, but theme.js scopes each gallery
   to it — without it, a page with two galleries would wire every thumbnail to
   the first main frame. */
.c-gallery {
	display: block;
}

.c-gallery__main {
	background: var(--co-white);
	border: var(--co-border-width) solid var(--co-color-border);
	border-radius: var(--co-radius-md);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.c-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--co-space-5);
}

.c-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: var(--co-space-2);
	margin-block-start: var(--co-space-3);
}

.c-gallery__thumb {
	aspect-ratio: 1;
	background: var(--co-white);
	border: var(--co-border-width) solid var(--co-color-border);
	border-radius: var(--co-radius-sm);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--co-transition-base);
}

.c-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--co-space-2);
}

.c-gallery__thumb[aria-current="true"],
.c-gallery__thumb:hover {
	border-color: var(--co-color-action);
}

/* Logo / certification strip — greyscale until hover so it never competes
   with the CTA for attention. */
.c-logo-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--co-space-7);
}

.c-logo-strip img {
	height: 2.25rem;
	width: auto;
	opacity: 0.55;
	filter: grayscale(1);
	transition: opacity var(--co-transition-base), filter var(--co-transition-base);
}

.c-logo-strip img:hover {
	opacity: 1;
	filter: grayscale(0);
}

/* ==========================================================================
   8. UTILITY BAR
   ==========================================================================
   Thin top strip: catalogue PDF, contact, phone, language. Everything here is
   secondary — it exists so the main header can stay at five items plus CTA.
   Hidden below 1024px; its contents move into the mobile drawer.
   ---------------------------------------------------------------------- */

.c-utilbar {
	display: none;
	background: var(--co-slate-900);
	color: var(--co-color-text-inverse-muted);
	font-size: var(--co-text-xs);
	border-block-end: var(--co-border-width) solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 1152px) {
	.c-utilbar {
		display: block;
	}
}

.c-utilbar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--co-space-5);
	min-height: var(--co-utility-bar-height);
}

.c-utilbar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--co-space-2);
	color: inherit;
	text-decoration: none;
	transition: color var(--co-transition-base);
}

.c-utilbar__item:hover {
	color: var(--co-white);
}

.c-utilbar__item svg {
	width: var(--co-icon-sm);
	height: var(--co-icon-sm);
	opacity: 0.7;
}

.c-utilbar__sep {
	width: 1px;
	height: 0.9rem;
	background: rgba(255, 255, 255, 0.16);
}

.c-utilbar__phone {
	font-family: var(--co-font-mono);
	color: var(--co-white);
	font-weight: var(--co-weight-medium);
}

/* ==========================================================================
   9. HEADER
   ==========================================================================
   Menu width is the binding constraint, not aesthetics.

   Measured at 1280 and 1024 with real German labels (Produkte / Branchen /
   So arbeiten wir / Wissen & Werkzeuge / Unternehmen + "Angebot anfordern"):
     1280px  brand 173 + nav 806 + actions 174 + gaps  = fits, 100px spare
     1024px  brand 173 + nav 610 + actions 174 + gaps  = 69px over (EN: 13px over)
   So the desktop nav starts at 1152px, not 1024px, and 1024–1151px uses the
   drawer. Losing the horizontal nav on a landscape tablet costs less than a
   crushed or wrapping German menu. Five items plus a CTA
   fit English comfortably and German tightly — "How We Work" becomes
   "So arbeiten wir", "Resources" becomes "Wissen & Werkzeuge". The nav font
   drops to 14px and letter-spacing to 0 between 1024 and 1200px so the German
   build does not wrap. Verify in DE before EN (spec §3).
   ---------------------------------------------------------------------- */

.c-header {
	position: sticky;
	top: 0;
	z-index: var(--co-z-header);
	background: var(--co-slate-900);
	color: var(--co-color-text-inverse);
	transition: box-shadow var(--co-transition-base);
}

.c-header[data-mv-scrolled="true"] {
	box-shadow: var(--co-shadow-md);
}

.c-header__inner {
	display: flex;
	align-items: center;
	gap: var(--co-space-5);
	min-height: var(--co-header-height);
}

.c-header__brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--co-white);
	text-decoration: none;
}

.c-header__logo {
	height: 1.75rem;
	width: auto;
}

/* The logo only grows once there is slack to spare. At 1152–1279px the German
   menu clears the header by ~15px; a 32px logo there would eat most of it. */
@media (min-width: 1280px) {
	.c-header__logo {
		height: 2rem;
	}
}

.c-header__nav {
	display: none;
	flex: 1 1 auto;
}

@media (min-width: 1152px) {
	.c-header__nav {
		display: block;
	}
}

.c-header__actions {
	display: flex;
	align-items: center;
	gap: var(--co-space-3);
	margin-inline-start: auto;
	flex: 0 0 auto;
}

/* Primary navigation ---------------------------------------------------- */

.c-nav {
	display: flex;
	align-items: center;
	gap: var(--co-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--co-space-2);
	padding: var(--co-space-3) var(--co-space-3);
	border-radius: var(--co-radius-sm);
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-medium);
	color: var(--co-stone-200);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--co-transition-base), background-color var(--co-transition-base);
}

@media (min-width: 1200px) {
	.c-nav__link {
		padding-inline: var(--co-space-4);
	}
}

.c-nav__link:hover,
.c-nav__item[data-mv-open="true"] > .c-nav__link {
	color: var(--co-white);
	background: rgba(255, 255, 255, 0.07);
}

/* Current section gets an ember underline, not a colour change — colour alone
   would fail contrast against slate at this size. */
.c-nav__item--current > .c-nav__link {
	color: var(--co-white);
	box-shadow: inset 0 -2px 0 var(--co-color-action);
}

.c-nav__caret {
	width: 0.6rem;
	height: 0.6rem;
	opacity: 0.6;
	transition: transform var(--co-transition-base);
}

.c-nav__item[data-mv-open="true"] .c-nav__caret {
	transform: rotate(180deg);
}

/* Mega-menu ------------------------------------------------------------- */

/* The panel lives inside .c-nav__item but must span the full header width, so
   it positions against .c-header (sticky counts as a positioned ancestor).
   Never give .c-nav__item position:relative — the panel would collapse to the
   width of one menu label. */
.c-mega {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: var(--co-z-megamenu);
	background: var(--co-color-surface);
	color: var(--co-color-text);
	border-block-start: var(--co-border-width) solid var(--co-color-border);
	box-shadow: var(--co-shadow-menu);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--co-transition-base), transform var(--co-transition-base),
		visibility var(--co-duration-fast);
}

.c-nav__item[data-mv-open="true"] > .c-mega,
.c-nav__item:hover > .c-mega,
.c-nav__item:focus-within > .c-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.c-mega__inner {
	display: grid;
	gap: var(--co-space-7);
	padding-block: var(--co-space-7);
	grid-template-columns: 1fr;
}

/* The grid follows the number of columns the menu actually has, capped at four
   per row: five or more wrap to a second row, which is what the layout was
   designed for. Pinning it at four leaves a hole on the right the day a
   category is removed — and a hole reads as a page that failed to load, not as
   a menu with three entries.

   German and Dutch category labels run 30–40% longer than English, so the
   columns are equal fractions rather than fixed widths: "Müllsäcke &
   Abfallsäcke" wraps to two lines inside its column instead of pushing the
   column beside it. */
@media (min-width: 1024px) {
	.c-mega__inner {
		grid-template-columns: repeat(4, 1fr);
	}

	.c-mega__inner--cols-1 {
		grid-template-columns: minmax(0, 22rem);
	}

	.c-mega__inner--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c-mega__inner--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.c-mega__inner--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.c-mega__inner--with-aside {
		grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
	}

	.c-mega__inner--cols-1.c-mega__inner--with-aside {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.c-mega__inner--cols-2.c-mega__inner--with-aside {
		grid-template-columns: repeat(2, minmax(0, 1fr)) 300px;
	}

	.c-mega__inner--cols-4.c-mega__inner--with-aside {
		grid-template-columns: repeat(4, minmax(0, 1fr)) 300px;
	}
}

.c-mega__col > * + * {
	margin-block-start: var(--co-space-3);
}

.c-mega__heading {
	display: flex;
	align-items: center;
	gap: var(--co-space-3);
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-semibold);
	color: var(--co-color-text);
	text-decoration: none;
	padding-block-end: var(--co-space-3);
	border-block-end: var(--co-border-width) solid var(--co-color-rule);
}

.c-mega__heading:hover {
	color: var(--co-color-action);
}

.c-mega__thumb {
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	object-fit: cover;
	border-radius: var(--co-radius-sm);
	background: var(--co-color-surface-sunken);
}

.c-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.c-mega__link {
	display: block;
	padding: var(--co-space-2) var(--co-space-2);
	margin-inline-start: calc(var(--co-space-2) * -1);
	border-radius: var(--co-radius-sm);
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
	text-decoration: none;
	transition: color var(--co-transition-base), background-color var(--co-transition-base);
}

.c-mega__link:hover {
	color: var(--co-color-action);
	background: var(--co-color-surface-accent);
}

.c-mega__all {
	margin-block-start: var(--co-space-3);
}

/* Flat panel: a section whose children have no children of their own —
   Industries, How We Work. Ten bordered headings in a four-column grid read as
   a broken table, so those render as one spanning multi-column list instead. */
.c-mega__col--span {
	grid-column: 1 / -1;
}

.c-mega__list--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
	gap: 0 var(--co-space-6);
}

/* Promo column: catalogue download, PPWR banner, calculator teaser. */
.c-mega__aside {
	padding: var(--co-space-5);
	background: var(--co-color-surface-sunken);
	border-radius: var(--co-radius-md);
	font-size: var(--co-text-sm);
}

.c-mega__aside-title {
	font-size: var(--co-text-base);
	font-weight: var(--co-weight-semibold);
	margin-block-end: var(--co-space-2);
}

.c-mega__aside-text {
	color: var(--co-color-text-muted);
	margin-block-end: var(--co-space-4);
}

/* Mobile navigation ------------------------------------------------------ */

.c-navtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--co-control-height);
	height: var(--co-control-height);
	margin-inline-end: calc(var(--co-space-2) * -1);
	border-radius: var(--co-radius-md);
	color: var(--co-white);
}

@media (min-width: 1152px) {
	.c-navtoggle {
		display: none;
	}
}

.c-navtoggle__bars,
.c-navtoggle__bars::before,
.c-navtoggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--co-transition-base), opacity var(--co-duration-instant);
}

.c-navtoggle__bars {
	position: relative;
}

.c-navtoggle__bars::before,
.c-navtoggle__bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.c-navtoggle__bars::before { top: -7px; }
.c-navtoggle__bars::after { top: 7px; }

.c-navtoggle[aria-expanded="true"] .c-navtoggle__bars {
	background: transparent;
}

.c-navtoggle[aria-expanded="true"] .c-navtoggle__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.c-navtoggle[aria-expanded="true"] .c-navtoggle__bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

.c-drawer {
	position: fixed;
	inset: var(--co-header-height) 0 0;
	z-index: var(--co-z-overlay);
	background: var(--co-color-surface);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--co-space-5) var(--co-space-gutter) var(--co-space-10);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform var(--co-duration-base) var(--co-ease-out),
		visibility var(--co-duration-base);
}

.c-drawer[data-mv-open="true"] {
	transform: translateX(0);
	visibility: visible;
}

@media (min-width: 1152px) {
	.c-drawer {
		display: none;
	}
}

.c-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-drawer__item {
	border-block-end: var(--co-border-width) solid var(--co-color-rule);
}

.c-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--co-space-3);
	width: 100%;
	padding: var(--co-space-4) 0;
	font-size: var(--co-text-md);
	font-weight: var(--co-weight-medium);
	color: var(--co-color-text);
	text-decoration: none;
	text-align: start;
}

.c-drawer__link[aria-expanded="true"] {
	color: var(--co-color-action);
}

.c-drawer__caret {
	width: 0.75rem;
	height: 0.75rem;
	flex: 0 0 auto;
	transition: transform var(--co-transition-base);
}

.c-drawer__link[aria-expanded="true"] .c-drawer__caret {
	transform: rotate(180deg);
}

.c-drawer__panel {
	display: none;
	padding-block-end: var(--co-space-4);
}

.c-drawer__panel[data-mv-open="true"] {
	display: block;
}

.c-drawer__sublink {
	display: block;
	padding: var(--co-space-2) 0 var(--co-space-2) var(--co-space-4);
	border-inline-start: var(--co-border-width-thick) solid var(--co-color-border);
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
	text-decoration: none;
}

.c-drawer__sublink:hover {
	color: var(--co-color-action);
	border-color: var(--co-color-action);
}

.c-drawer__footer {
	margin-block-start: var(--co-space-7);
	padding-block-start: var(--co-space-5);
	border-block-start: var(--co-border-width) solid var(--co-color-rule);
	display: flex;
	flex-direction: column;
	gap: var(--co-space-4);
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
}

/* ==========================================================================
   10. LANGUAGE SWITCHER
   ==========================================================================
   Renders Polylang output. Language names stay in their own language
   (Deutsch, Nederlands) — a German buyer looks for "Deutsch", not "German".
   ---------------------------------------------------------------------- */

.c-lang {
	position: relative;
}

.c-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--co-space-2);
	padding: var(--co-space-2) var(--co-space-3);
	border-radius: var(--co-radius-sm);
	font-size: var(--co-text-xs);
	font-weight: var(--co-weight-medium);
	color: inherit;
	background: transparent;
	text-decoration: none;
	white-space: nowrap;
}

.c-lang__toggle:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--co-white);
}

.c-lang__code {
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	font-weight: var(--co-weight-semibold);
}

.c-lang__menu {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + var(--co-space-2));
	z-index: var(--co-z-megamenu);
	min-width: 11rem;
	padding: var(--co-space-2);
	list-style: none;
	margin: 0;
	background: var(--co-color-surface);
	border: var(--co-border-width) solid var(--co-color-border);
	border-radius: var(--co-radius-md);
	box-shadow: var(--co-shadow-md);
	display: none;
}

.c-lang[data-mv-open="true"] .c-lang__menu {
	display: block;
}

.c-lang__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--co-space-3);
	padding: var(--co-space-2) var(--co-space-3);
	border-radius: var(--co-radius-sm);
	font-size: var(--co-text-sm);
	color: var(--co-color-text);
	text-decoration: none;
}

.c-lang__option:hover {
	background: var(--co-color-surface-sunken);
	color: var(--co-color-action);
}

.c-lang__option[aria-current="true"] {
	font-weight: var(--co-weight-semibold);
	color: var(--co-color-action);
}

/* A language with no translation of the current page points at that language's
   home page and says so, rather than silently 404-ing or dropping out. */
.c-lang__option--fallback .c-lang__note {
	font-size: var(--co-text-2xs);
	color: var(--co-color-text-subtle);
}

/* In the mobile drawer the switcher sits on a light surface, not on slate. */
.c-lang--drawer {
	align-self: flex-start;
}

.c-lang--drawer .c-lang__toggle {
	padding-inline: 0;
	color: var(--co-color-text-muted);
}

.c-lang--drawer .c-lang__toggle:hover {
	background: transparent;
	color: var(--co-color-action);
}

.c-lang--drawer .c-lang__menu {
	inset-inline: 0 auto;
	top: auto;
	bottom: calc(100% + var(--co-space-2));
}

/* ==========================================================================
   11. BREADCRUMBS
   ==========================================================================
   Non-negotiable on a catalogue four levels deep, and the visible counterpart
   of the BreadcrumbList schema emitted in step 22.
   ---------------------------------------------------------------------- */

.c-crumbs {
	padding-block: var(--co-space-4);
	font-size: var(--co-text-xs);
	color: var(--co-color-text-subtle);
}

.c-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--co-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-crumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--co-space-2);
}

.c-crumbs__item:not(:last-child)::after {
	content: "/";
	color: var(--co-stone-300);
}

.c-crumbs__link {
	color: var(--co-color-text-muted);
	text-decoration: none;
}

.c-crumbs__link:hover {
	color: var(--co-color-action);
	text-decoration: underline;
}

.c-crumbs__current {
	color: var(--co-color-text);
	font-weight: var(--co-weight-medium);
}

.c-crumbs--inverse {
	color: var(--co-color-text-inverse-muted);
}

.c-crumbs--inverse .c-crumbs__link {
	color: var(--co-color-text-inverse-muted);
}

.c-crumbs--inverse .c-crumbs__link:hover,
.c-crumbs--inverse .c-crumbs__current {
	color: var(--co-white);
}

/* ==========================================================================
   12. HERO
   ========================================================================== */

.c-hero {
	position: relative;
	background: var(--co-slate-900);
	color: var(--co-color-text-inverse);
	overflow: hidden;
}

.c-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.c-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Two-stop scrim: strong on the text side, transparent over the image so the
   product stays readable. Direction-aware so it flips for RTL locales later. */
.c-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(14, 26, 31, 0.94) 0%,
		rgba(14, 26, 31, 0.82) 42%,
		rgba(14, 26, 31, 0.35) 100%
	);
}

.c-hero__inner {
	position: relative;
	z-index: var(--co-z-base);
	padding-block: clamp(3rem, 2rem + 6vw, 6.5rem);
}

.c-hero__content {
	max-width: 44rem;
}

.c-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--co-space-2);
	font-size: var(--co-text-xs);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-ember-200);
	margin-block-end: var(--co-space-4);
}

.c-hero__title {
	font-size: var(--co-text-4xl);
	font-weight: var(--co-weight-bold);
	line-height: var(--co-leading-tight);
	letter-spacing: var(--co-tracking-tight);
	color: var(--co-white);
	margin: 0;
	text-wrap: balance;
}

.c-hero__title em {
	font-style: normal;
	color: var(--co-ember-200);
}

.c-hero__lede {
	font-size: var(--co-text-md);
	line-height: var(--co-leading-normal);
	color: var(--co-color-text-inverse-muted);
	margin-block-start: var(--co-space-5);
	max-width: 38rem;
}

.c-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--co-space-3);
	margin-block-start: var(--co-space-7);
}

/* Proof points sitting directly under the hero CTA — the fastest available
   answer to "is there anything behind this website" (spec §0, fear 1). */
.c-hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: var(--co-space-5) var(--co-space-8);
	margin-block-start: var(--co-space-8);
	padding-block-start: var(--co-space-6);
	border-block-start: var(--co-border-width) solid var(--co-color-border-inverse);
}

/* Compact page hero for interior pages: no image, no scrim. */
.c-hero--page .c-hero__inner {
	padding-block: var(--co-space-8) var(--co-space-8);
}

.c-hero--page .c-hero__title {
	font-size: var(--co-text-3xl);
}

.c-hero--light {
	background: var(--co-color-surface-sunken);
	color: var(--co-color-text);
}

.c-hero--light .c-hero__title {
	color: var(--co-color-text);
}

.c-hero--light .c-hero__lede {
	color: var(--co-color-text-muted);
}

.c-hero--light .c-hero__eyebrow {
	color: var(--co-color-action);
}

/* ==========================================================================
   13. CTA BAND
   ==========================================================================
   Closing block on every template. Deliberately one pattern site-wide: the
   buyer should recognise where the quote request lives without reading.
   ---------------------------------------------------------------------- */

.c-ctaband {
	background: var(--co-slate-800);
	color: var(--co-color-text-inverse);
}

.c-ctaband__inner {
	display: grid;
	gap: var(--co-space-6);
	align-items: center;
	padding-block: var(--co-space-9);
}

@media (min-width: 900px) {
	.c-ctaband__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--co-space-9);
	}
}

.c-ctaband__title {
	font-size: var(--co-text-2xl);
	font-weight: var(--co-weight-bold);
	line-height: var(--co-leading-tight);
	letter-spacing: var(--co-tracking-tight);
	color: var(--co-white);
	margin: 0;
	text-wrap: balance;
}

.c-ctaband__text {
	margin-block-start: var(--co-space-3);
	color: var(--co-color-text-inverse-muted);
	max-width: var(--co-measure);
}

.c-ctaband__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--co-space-3);
}

.c-ctaband--accent {
	background: var(--co-ember-700);
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.c-footer {
	background: var(--co-slate-900);
	color: var(--co-color-text-inverse-muted);
	font-size: var(--co-text-sm);
}

.c-footer__main {
	display: grid;
	gap: var(--co-space-8);
	padding-block: var(--co-space-9);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.c-footer__main {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.c-footer__main {
		grid-template-columns: 1.4fr repeat(4, 1fr);
		gap: var(--co-space-7);
	}
}

.c-footer__brand {
	max-width: 22rem;
}

.c-footer__logo {
	height: 1.75rem;
	width: auto;
	margin-block-end: var(--co-space-4);
}

.c-footer__tagline {
	color: var(--co-color-text-inverse-muted);
	margin-block-end: var(--co-space-5);
}

.c-footer__address {
	font-style: normal;
	line-height: var(--co-leading-relaxed);
	font-size: var(--co-text-xs);
}

.c-footer__heading {
	font-size: var(--co-text-2xs);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-white);
	margin-block-end: var(--co-space-4);
}

.c-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--co-space-3);
}

.c-footer__link {
	color: var(--co-color-text-inverse-muted);
	text-decoration: none;
	transition: color var(--co-transition-base);
}

.c-footer__link:hover {
	color: var(--co-white);
	text-decoration: underline;
}

.c-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--co-space-4);
	padding-block: var(--co-space-5);
	border-block-start: var(--co-border-width) solid var(--co-color-border-inverse);
	font-size: var(--co-text-xs);
}

.c-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--co-space-2) var(--co-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   15. STICKY QUOTE BAR (mobile)
   ==========================================================================
   The header CTA scrolls away on phones; this replaces it. Also surfaces the
   enquiry basket count, which is the whole point of the mixed-load model.
   ---------------------------------------------------------------------- */

.c-stickycta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--co-z-sticky-cta);
	display: flex;
	gap: var(--co-space-3);
	padding: var(--co-space-3) var(--co-space-gutter);
	padding-block-end: calc(var(--co-space-3) + env(safe-area-inset-bottom, 0px));
	background: var(--co-color-surface);
	border-block-start: var(--co-border-width) solid var(--co-color-border);
	box-shadow: 0 -4px 16px rgba(14, 26, 31, 0.1);
	transform: translateY(110%);
	transition: transform var(--co-duration-base) var(--co-ease-out);
}

.c-stickycta[data-mv-visible="true"] {
	transform: translateY(0);
}

@media (min-width: 1152px) {
	.c-stickycta {
		display: none;
	}
}

.c-basket-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding-inline: 0.35rem;
	border-radius: var(--co-radius-pill);
	background: var(--co-color-action);
	color: var(--co-white);
	font-size: var(--co-text-2xs);
	font-weight: var(--co-weight-bold);
	line-height: 1;
}

.c-basket-count[data-mv-count="0"] {
	display: none;
}

/* ==========================================================================
   15a. SEARCH FORM
   ========================================================================== */

.c-searchform__row {
	display: flex;
	gap: var(--co-space-2);
}

.c-searchform__row .c-input {
	flex: 1 1 auto;
	min-width: 0;
}

.c-searchform__row .c-btn {
	flex: 0 0 auto;
}

@media (max-width: 479px) {
	/* Below 480px the button label and a usable input cannot share a row. */
	.c-searchform__row {
		flex-direction: column;
	}
}

/* ==========================================================================
   15b. CONTACT LIST
   ==========================================================================
   Phone, e-mail and opening hours in a sidebar or a contact panel. A list
   rather than prose, because a buyer scanning for a number should find it
   without reading a sentence.
   ---------------------------------------------------------------------- */

.c-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--co-space-3);
	font-size: var(--co-text-sm);
}

.c-contact-list__item {
	display: inline-flex;
	align-items: center;
	gap: var(--co-space-3);
	color: var(--co-color-text-muted);
	text-decoration: none;
}

.c-contact-list__item svg {
	color: var(--co-color-text-subtle);
}

a.c-contact-list__item:hover {
	color: var(--co-color-action);
}

a.c-contact-list__item:hover svg {
	color: var(--co-color-action);
}

/* ==========================================================================
   16. PAGINATION
   ========================================================================== */

.c-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--co-space-2);
	margin-block-start: var(--co-space-8);
}

.c-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--co-control-height-sm);
	height: var(--co-control-height-sm);
	padding-inline: var(--co-space-3);
	border: var(--co-border-width) solid var(--co-color-border);
	border-radius: var(--co-radius-sm);
	background: var(--co-color-surface);
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
	text-decoration: none;
}

.c-pagination__link:hover {
	border-color: var(--co-color-border-strong);
	color: var(--co-color-text);
}

.c-pagination__link[aria-current="page"] {
	background: var(--co-color-surface-inverse);
	border-color: var(--co-color-surface-inverse);
	color: var(--co-white);
	font-weight: var(--co-weight-semibold);
}

.c-pagination__dots {
	padding-inline: var(--co-space-2);
	color: var(--co-color-text-subtle);
}

/* ==========================================================================
   17. ACCORDION & TABS
   ==========================================================================
   Accordion carries the FAQ blocks that answer MOQ / lead time / Incoterms
   objections inline on product pages.
   ---------------------------------------------------------------------- */

.c-accordion {
	border-block-start: var(--co-border-width) solid var(--co-color-border);
}

.c-accordion__item {
	border-block-end: var(--co-border-width) solid var(--co-color-border);
}

.c-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--co-space-4);
	width: 100%;
	padding: var(--co-space-4) 0;
	font-size: var(--co-text-base);
	font-weight: var(--co-weight-semibold);
	color: var(--co-color-text);
	text-align: start;
}

.c-accordion__trigger:hover {
	color: var(--co-color-action);
}

.c-accordion__icon {
	position: relative;
	width: 0.9rem;
	height: 0.9rem;
	flex: 0 0 auto;
}

.c-accordion__icon::before,
.c-accordion__icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform var(--co-transition-base), opacity var(--co-transition-base);
}

.c-accordion__icon::before {
	inset-block-start: 50%;
	inset-inline: 0;
	height: 2px;
	transform: translateY(-50%);
}

.c-accordion__icon::after {
	inset-inline-start: 50%;
	inset-block: 0;
	width: 2px;
	transform: translateX(-50%);
}

.c-accordion__trigger[aria-expanded="true"] .c-accordion__icon::after {
	opacity: 0;
	transform: translateX(-50%) rotate(90deg);
}

.c-accordion__panel {
	display: none;
	padding-block-end: var(--co-space-5);
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
	max-width: var(--co-measure);
}

.c-accordion__panel[data-mv-open="true"] {
	display: block;
}

.c-tabs__list {
	display: flex;
	gap: var(--co-space-1);
	overflow-x: auto;
	border-block-end: var(--co-border-width) solid var(--co-color-border);
	scrollbar-width: none;
}

.c-tabs__list::-webkit-scrollbar {
	display: none;
}

.c-tabs__tab {
	padding: var(--co-space-3) var(--co-space-4);
	border-block-end: var(--co-border-width-thick) solid transparent;
	margin-block-end: -1px;
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-medium);
	color: var(--co-color-text-muted);
	white-space: nowrap;
	transition: color var(--co-transition-base), border-color var(--co-transition-base);
}

.c-tabs__tab:hover {
	color: var(--co-color-text);
}

.c-tabs__tab[aria-selected="true"] {
	color: var(--co-color-action);
	border-block-end-color: var(--co-color-action);
	font-weight: var(--co-weight-semibold);
}

.c-tabs__panel {
	padding-block-start: var(--co-space-6);
}

.c-tabs__panel[hidden] {
	display: none;
}

/* ==========================================================================
   18. FILTER SIDEBAR
   ==========================================================================
   Catalogue facets. Server-side rendered with clean URLs (spec §7), so every
   control is a link or a real form input — nothing depends on JavaScript.
   ---------------------------------------------------------------------- */

.c-filters {
	font-size: var(--co-text-sm);
}

.c-filters__group + .c-filters__group {
	margin-block-start: var(--co-space-5);
	padding-block-start: var(--co-space-5);
	border-block-start: var(--co-border-width) solid var(--co-color-rule);
}

.c-filters__legend {
	font-size: var(--co-text-xs);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-color-text-muted);
	margin-block-end: var(--co-space-3);
}

.c-filters__options {
	display: flex;
	flex-direction: column;
	gap: var(--co-space-2);
}

/* A child category sits under its parent in the sidebar. Indented with a rule
   rather than a bullet, so the relationship is visible without a nested list
   that a screen reader would announce as a second navigation. */
.c-filters__child {
	padding-inline-start: var(--co-space-4);
	border-inline-start: var(--co-border-width-thick) solid var(--co-color-border);
	margin-inline-start: var(--co-space-2);
	font-size: var(--co-text-xs);
}

.c-filters__count {
	margin-inline-start: auto;
	font-family: var(--co-font-mono);
	font-size: var(--co-text-2xs);
	color: var(--co-color-text-subtle);
}

.c-filters__active {
	display: flex;
	flex-wrap: wrap;
	gap: var(--co-space-2);
	margin-block-end: var(--co-space-5);
}

.c-filters__form {
	margin-block-start: var(--co-space-5);
}

.c-filters__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--co-space-3);
	padding-block-end: var(--co-space-4);
	margin-block-end: var(--co-space-6);
	border-block-end: var(--co-border-width) solid var(--co-color-rule);
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
}

/* ==========================================================================
   19. TABLE OF CONTENTS
   ==========================================================================
   Pillar guides run 2000+ words; the sticky ToC is what keeps them navigable
   and feeds the jump-links Google shows as sitelinks.
   ---------------------------------------------------------------------- */

.c-toc {
	padding: var(--co-space-5);
	background: var(--co-color-surface-sunken);
	border-radius: var(--co-radius-md);
	font-size: var(--co-text-sm);
}

.c-toc__title {
	font-size: var(--co-text-2xs);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-color-text-muted);
	margin-block-end: var(--co-space-3);
}

.c-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--co-space-2);
}

.c-toc__link {
	display: block;
	padding-inline-start: var(--co-space-3);
	border-inline-start: var(--co-border-width-thick) solid transparent;
	color: var(--co-color-text-muted);
	text-decoration: none;
	line-height: var(--co-leading-snug);
}

.c-toc__link:hover,
.c-toc__link[aria-current="true"] {
	color: var(--co-color-action);
	border-inline-start-color: var(--co-color-action);
}

.c-toc__item--sub .c-toc__link {
	padding-inline-start: var(--co-space-6);
	font-size: var(--co-text-xs);
}

/* ==========================================================================
   20. NOTICES
   ==========================================================================
   Form results and the "added to enquiry" confirmation. Toast is polite-live
   for screen readers, so it must never carry information available nowhere else.
   ---------------------------------------------------------------------- */

.c-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--co-space-3);
	padding: var(--co-space-4) var(--co-space-5);
	border-radius: var(--co-radius-md);
	font-size: var(--co-text-sm);
	background: var(--co-color-surface-sunken);
	border: var(--co-border-width) solid var(--co-color-border);
}

.c-notice--success {
	background: var(--co-color-success-bg);
	border-color: var(--co-color-success);
	color: var(--co-color-success);
}

.c-notice--error {
	background: var(--co-color-danger-bg);
	border-color: var(--co-color-danger);
	color: var(--co-color-danger);
}

.c-toast {
	position: fixed;
	inset-block-end: var(--co-space-5);
	inset-inline-end: var(--co-space-5);
	z-index: var(--co-z-toast);
	max-width: 22rem;
	padding: var(--co-space-4) var(--co-space-5);
	background: var(--co-slate-900);
	color: var(--co-white);
	border-radius: var(--co-radius-md);
	box-shadow: var(--co-shadow-lg);
	font-size: var(--co-text-sm);
	opacity: 0;
	transform: translateY(12px);
	visibility: hidden;
	transition: opacity var(--co-transition-base), transform var(--co-transition-base),
		visibility var(--co-duration-fast);
}

.c-toast[data-mv-visible="true"] {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

@media (max-width: 640px) {
	.c-toast {
		inset-inline: var(--co-space-4);
		inset-block-end: calc(var(--co-space-4) + 4.5rem); /* clears the sticky CTA */
		max-width: none;
	}
}