/**
 * Page Blocks — JUNK Plastic Rehab
 * Covers: Hero, Banner, Split, Product Grid section, Marquee, FAQ, Rich Text.
 */

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */

.block-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Height variants */
.block-hero--fullscreen { min-height: 100svh; }
.block-hero--tall       { min-height: 80vh;  }
.block-hero--short      { min-height: 50vh;  }

/* Con l'header transparent ora in position:sticky (non più absolute),
   il hero nel DOM parte dopo la topbar+header (y = topbarH + headerH).
   margin-top negativo lo rialza visivamente così l'immagine scorre dietro
   l'header trasparente. Il padding-top resta invariato per mantenere
   il testo nella stessa posizione visiva di prima.
   ⚠️  Desktop-only: su mobile l'header è solid (non trasparente) e il
   hero non deve sovrapporsi — il reset è gestito in header.css ma viene
   isolato qui con min-width per evitare problemi di cascade priority. */
@media (min-width: 768px) {
	.home .block-hero {
		margin-top: calc( -1 * var(--header-height, 64px) );
		padding-top: calc( var(--topbar-height, 36px) + var(--header-height, 64px) );
	}
}

/* Overlay */
.block-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-bg-overlay, rgba(0,0,0,0.5));
	pointer-events: none;
}

/* BG video */
.block-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Content layer */
.block-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: var(--section-spacing, 80px);
	padding-bottom: var(--section-spacing, 80px);
}

.block-hero__content {
	max-width: 700px;
}

/* Alignment */
.block-hero--align-center .block-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.block-hero--align-center .block-hero__content {
	text-align: center;
}

.block-hero--align-right .block-hero__inner {
	display: flex;
	justify-content: flex-end;
}

/* ── Hero buttons — dark background (default) ─────────────────────────────
   The hero always has a dark overlay, so the default primary button
   (black bg + white text by global default) would be invisible.
   Override: white bg + dark text, inverts to outlined on hover.       */
.block-hero .btn--primary {
	background-color: var(--color-text-light, #fff);
	color: var(--color-text, #1a1a1a);
	border-color: var(--color-text-light, #fff);
}
.block-hero .btn--primary:visited {
	color: var(--color-text, #1a1a1a);
}
.block-hero .btn--primary:hover {
	background-color: transparent;
	color: var(--color-text-light, #fff);
	border-color: var(--color-text-light, #fff);
}

.block-hero .btn--secondary {
	background-color: transparent;
	border-color: rgba(255,255,255,0.6);
	color: var(--color-text-light, #fff);
}
.block-hero .btn--secondary:visited {
	color: var(--color-text-light, #fff);
}
.block-hero .btn--secondary:hover {
	background-color: var(--color-text-light, #fff);
	color: var(--color-text, #1a1a1a);
}

/* ── .block-hero--light = "force white text" — matches ACF hero_light_text ─
   Explicitly keeps white text & white-variant buttons (same as default dark bg).
   Use .block-hero--light-bg for heroes with a bright/white background.        */
.block-hero--light .block-hero__eyebrow,
.block-hero--light .block-hero__title,
.block-hero--light .block-hero__subtitle {
	color: var(--color-text-light, #fff);
}

/* ── .block-hero--light-bg = hero on a bright/white background ──────────── */
.block-hero--light-bg .block-hero__eyebrow,
.block-hero--light-bg .block-hero__title,
.block-hero--light-bg .block-hero__subtitle {
	color: var(--color-text);
}

.block-hero--light-bg .btn--primary {
	background-color: var(--color-primary);
	color: var(--color-text-light);
	border-color: var(--color-primary);
}
.block-hero--light-bg .btn--primary:visited {
	color: var(--color-text-light);
}
.block-hero--light-bg .btn--primary:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-text-light);
	border-color: var(--color-primary-hover);
}

.block-hero--light-bg .btn--secondary {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background-color: transparent;
}
.block-hero--light-bg .btn--secondary:visited {
	color: var(--color-primary);
}
.block-hero--light-bg .btn--secondary:hover {
	background-color: var(--color-primary);
	color: var(--color-text-light);
}

/* Eyebrow */
.block-hero__eyebrow {
	display: block;
	margin-bottom: 16px;
	opacity: 0.7;
	color: var(--color-text-light, #fff);
}

/* Title */
.block-hero__title {
	font-size: clamp( 2.5rem, 7vw, 5.5rem );
	font-weight: var(--typo-h1-weight, 700);
	line-height: 1.05;
	letter-spacing: var(--typo-h1-ls, -0.02em);
	margin-bottom: 20px;
	color: var(--color-text-light, #fff);
}

/* Subtitle */
.block-hero__subtitle {
	font-size: clamp( 1rem, 2vw, 1.25rem );
	line-height: 1.6;
	margin-bottom: 36px;
	opacity: 0.85;
	color: var(--color-text-light, #fff);
}

/* CTAs */
.block-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.block-hero--align-center .block-hero__ctas {
	justify-content: center;
}

.block-hero .btn {
	padding: 14px 32px;
	font-size: var(--typo-button-size, 14px);
}

/* Responsive */
@media ( max-width: 600px ) {
	.block-hero__ctas {
		flex-direction: column;
	}

	.block-hero .btn {
		width: 100%;
		text-align: center;
	}

	.block-hero__content {
		max-width: 100%;
	}
}

/* ═══════════════════════════════════════
   BANNER
═══════════════════════════════════════ */

.block-banner {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Height variants */
.block-banner--short  { min-height: 300px; }
.block-banner--medium { min-height: 480px; }
.block-banner--tall   { min-height: 600px; }
.block-banner--auto   { min-height: 0; padding: 80px 0; }

/* Mobile bg swap */
@media ( max-width: 600px ) {
	.block-banner {
		background-image: var(--banner-bg-mobile, inherit);
	}
}

.block-banner__fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
	pointer-events: none;
}

.block-banner__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-bg-overlay, rgba(0,0,0,0.5));
	pointer-events: none;
	z-index: 1;
}

.block-banner__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.block-banner__content {
	max-width: 520px;
}

.block-banner--center .block-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.block-banner--center .block-banner__content {
	text-align: center;
}

.block-banner--right .block-banner__inner {
	display: flex;
	justify-content: flex-end;
}

/* Default: white text (banners are always on dark images / overlays) */
.block-banner__eyebrow,
.block-banner__title,
.block-banner__text {
	color: var(--color-text-light, #fff);
}

/* --light modifier = light text on dark bg (same as default, kept for BC) */
.block-banner--light .block-banner__eyebrow,
.block-banner--light .block-banner__title,
.block-banner--light .block-banner__text {
	color: var(--color-text-light, #fff);
}

/* --dark-text modifier = dark text, for banners on bright/light bg images */
.block-banner--dark-text .block-banner__eyebrow,
.block-banner--dark-text .block-banner__title,
.block-banner--dark-text .block-banner__text {
	color: var(--color-text);
}

/* Fallback bg for banners without an image */
.block-banner:not([style*="background-image"]) {
	background-color: var(--color-bg-alt);
}

.block-banner--light .btn--primary {
	background-color: var(--color-text-light);
	color: var(--color-text);
	border-color: var(--color-text-light);
}

.block-banner--light .btn--primary:hover {
	background-color: rgba(255,255,255,0.85);
}

.block-banner__eyebrow { display: block; margin-bottom: 12px; opacity: 0.7; }
.block-banner__title   { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: var(--typo-h2-weight, 700); line-height: 1.1; margin-bottom: 16px; }
.block-banner__text    { margin-bottom: 28px; line-height: 1.6; opacity: 0.9; }

/* ═══════════════════════════════════════
   SPLIT (Image + Text)
═══════════════════════════════════════ */

.block-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 80px;
	align-items: center;
}

.block-split--image-right .block-split__media {
	order: 2;
}

.block-split--image-right .block-split__body {
	order: 1;
}

.block-split__figure {
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-sm);
	margin: 0;
}

.block-split__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.block-split__eyebrow {
	display: block;
	margin-bottom: 16px;
	color: var(--color-text-secondary);
}

.block-split__title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 20px;
}

.block-split__content {
	margin-bottom: 28px;
	line-height: 1.7;
	color: var(--color-text-secondary);
}

.block-split__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--typo-button-size, 14px);
	font-weight: var(--typo-button-weight, 600);
	letter-spacing: var(--typo-button-ls, 0.04em);
	text-transform: var(--typo-button-transform, uppercase);
	color: var(--color-text);
	text-decoration: none;
	transition: gap var(--transition);
}

.block-split__cta-link:hover {
	gap: 12px;
	color: var(--color-primary);
}

@media ( max-width: 800px ) {
	.block-split__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}

	.block-split--image-right .block-split__media,
	.block-split--image-right .block-split__body {
		order: unset;
	}
}

/* ═══════════════════════════════════════
   PRODUCT GRID SECTION
   (wrapper/header around product-grid template)
═══════════════════════════════════════ */

.block-product-grid__header {
	text-align: center;
	margin-bottom: 48px;
}

.block-product-grid__title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: 12px;
}

.block-product-grid__subtitle {
	color: var(--color-text-secondary);
	max-width: 520px;
	margin: 0 auto;
}

.block-product-grid__grid {
	display: grid;
	grid-template-columns: repeat( var(--pg-cols, 4), 1fr );
	gap: var(--gap, 24px);
	list-style: none;
	padding: 0;
	margin: 0;
}

.block-product-grid__cta {
	text-align: center;
	margin-top: 48px;
	/* Ensure the button is never clipped on mobile (safe-area / reduced section padding) */
	padding-bottom: 4px;
}

@media (max-width: 767px) {
	.block-product-grid__cta {
		margin-top: 32px;
		/* Respect iOS safe-area-inset-bottom so the border is never behind the home indicator */
		padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
	}
}

.block-product-grid--padding-compact {
	padding-top: calc( var(--section-spacing) * 0.6 );
	padding-bottom: calc( var(--section-spacing) * 0.6 );
}

.block-product-grid--padding-none {
	padding-top: 0;
	padding-bottom: 0;
}

@media ( max-width: 900px ) {
	.block-product-grid__grid {
		grid-template-columns: repeat( min( var(--pg-cols, 4), 2 ), 1fr );
	}
}

@media ( max-width: 480px ) {
	.block-product-grid__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ═══════════════════════════════════════
   MARQUEE / TICKER
═══════════════════════════════════════ */

.block-marquee {
	overflow: hidden;
	padding: 14px 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.block-marquee__track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	animation: marquee linear infinite;
	will-change: transform;
}

@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.block-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 24px;
	font-size: var(--typo-nav-size, 13px);
	font-weight: var(--typo-nav-weight, 500);
	letter-spacing: var(--typo-nav-ls, 0.06em);
	text-transform: var(--typo-nav-transform, uppercase);
}

.block-marquee__icon {
	height: 20px;
	width: auto;
}

.block-marquee__sep {
	opacity: 0.4;
}

/* Pause on hover */
.block-marquee:hover .block-marquee__track {
	animation-play-state: paused;
}

/* Static (non-animated) variant — items laid out in a centered row */
.block-marquee--static .block-marquee__track {
	animation: none;
	flex-wrap: wrap;
	justify-content: center;
	white-space: normal;
}

/* Default icon (asterisk) — slightly smaller than custom icons */
.block-marquee__icon--default {
	height: 10px;
	opacity: 0.5;
}

/* ═══════════════════════════════════════
   FAQ ACCORDION
═══════════════════════════════════════ */

.block-faq__header {
	text-align: center;
	margin-bottom: 48px;
}

.block-faq__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 12px;
}

.block-faq__subtitle {
	color: var(--color-text-secondary);
}

.block-faq__list {
	margin: 0;
}

.block-faq__item {
	border-top: 1px solid var(--color-border);
}

.block-faq__item:last-child {
	border-bottom: 1px solid var(--color-border);
}

.block-faq__question {
	margin: 0;
}

.block-faq__trigger {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 20px 0;
	background: none;
	border: none;
	text-align: left;
	font-size: var(--typo-body-size, 16px);
	font-weight: 500;
	font-family: var(--font-body);
	color: var(--color-text);
	cursor: pointer;
	transition: color var(--transition);
}

.block-faq__trigger:hover {
	color: var(--color-primary);
}

.block-faq__chevron {
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.block-faq__trigger[aria-expanded="true"] .block-faq__chevron {
	transform: rotate(180deg);
}

.block-faq__answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.35s ease, padding 0.25s ease;
	margin: 0;
	padding: 0;
}

.block-faq__answer[aria-hidden="false"] {
	max-height: 800px;
	padding-bottom: 20px;
}

.block-faq__answer-inner {
	color: var(--color-text-secondary);
	line-height: 1.7;
}

/* ═══════════════════════════════════════
   RICH TEXT BLOCK
═══════════════════════════════════════ */

.block-rich-text--align-center {
	text-align: center;
}

.block-rich-text__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 24px;
}

/* ── Shared WYSIWYG styles ──────────────────────────── */
.wysiwyg p                      { margin-top: 0; margin-bottom: 1em; line-height: 1.7; }
.wysiwyg p:last-child           { margin-bottom: 0; }
.wysiwyg a                      { color: var(--color-primary); text-decoration: underline; }
.wysiwyg ul, .wysiwyg ol        { padding-left: 1.5em; margin-bottom: 1em; }
.wysiwyg li                     { margin-bottom: 0.4em; }
.wysiwyg strong                 { font-weight: 600; }
.wysiwyg em                     { font-style: italic; }
.wysiwyg blockquote             { border-left: 3px solid var(--color-border); padding-left: 20px; margin: 1.5em 0; color: var(--color-text-secondary); font-style: italic; }
.wysiwyg h2                     { font-size: 1.5em; margin: 1.5em 0 0.5em; }
.wysiwyg h3                     { font-size: 1.25em; margin: 1.25em 0 0.4em; }


/* ═══════════════════════════════════════
   404 — Not Found
═══════════════════════════════════════ */

.error-404 {
	min-height: calc(100vh - var(--header-height, 64px) - 200px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--header-height, 64px) + 60px) 0 80px;
}

.error-404__inner {
	text-align: center;
	max-width: 560px;
	width: 100%;
}

/* Large "404" display number */
.error-404__number {
	font-family: var(--font-headings);
	font-size: clamp(7rem, 20vw, 14rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 2px var(--color-border, #e5e7eb);
	text-stroke: 2px var(--color-border, #e5e7eb);
	margin: 0 0 24px;
	user-select: none;
}

.error-404__title {
	font-family: var(--font-headings);
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--color-text, #1a1a1a);
	margin: 0 0 14px;
}

.error-404__desc {
	font-size: 15px;
	line-height: 1.65;
	color: var(--color-text-secondary, #6b7280);
	margin: 0 0 40px;
}

/* CTA buttons row */
.error-404__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.error-404__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 26px;
	border-radius: var(--radius-sm, 8px);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition:
		background var(--transition, 0.2s),
		color var(--transition, 0.2s),
		border-color var(--transition, 0.2s),
		opacity var(--transition, 0.2s);
}

.error-404__btn--primary,
.error-404__btn--primary:link,
.error-404__btn--primary:visited {
	background: var(--color-text, #1a1a1a);
	color: #fff;
	border: 1px solid var(--color-text, #1a1a1a);
}

.error-404__btn--primary:hover {
	opacity: 0.8;
	color: #fff;
}

.error-404__btn--outline,
.error-404__btn--outline:link,
.error-404__btn--outline:visited {
	background: transparent;
	color: var(--color-text, #1a1a1a);
	border: 1px solid var(--color-border, #e5e7eb);
}

.error-404__btn--outline:hover {
	border-color: var(--color-text, #1a1a1a);
	color: var(--color-text, #1a1a1a);
}

/* Divider with "or try" label */
.error-404__divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 48px 0 32px;
}

.error-404__divider::before,
.error-404__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border, #e5e7eb);
}

.error-404__divider-text {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-secondary, #6b7280);
	white-space: nowrap;
}

/* Suggested links grid */
.error-404__links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.error-404__link,
.error-404__link:link,
.error-404__link:visited {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 16px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text, #1a1a1a);
	text-decoration: none;
	border: 1px solid var(--color-border, #e5e7eb);
	background: transparent;
	transition:
		background var(--transition, 0.2s),
		border-color var(--transition, 0.2s);
}

.error-404__link:hover {
	background: var(--color-bg-alt, #f5f5f5);
	border-color: var(--color-border-dark, #d1d5db);
}

@media (max-width: 767px) {
	.error-404 {
		padding-top: calc(var(--header-height, 56px) + 40px);
	}
	.error-404__number {
		font-size: clamp(5rem, 25vw, 8rem);
	}
}


/* ═══════════════════════════════════════
   WOOCOMMERCE GLOBAL NOTICES
   Covers: add-to-cart, errors, info banners.
═══════════════════════════════════════ */

.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	position: relative;
}

/* ── Base notice bar ── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	/* Constrain content to container width while keeping full-width bg */
	padding-top: 14px;
	padding-bottom: 14px;
	padding-left: max(var(--container-padding, 24px), calc((100vw - var(--container-max, 1440px)) / 2 + var(--container-padding, 24px)));
	padding-right: max(var(--container-padding, 24px), calc((100vw - var(--container-max, 1440px)) / 2 + var(--container-padding, 24px)));
	font-size: var(--typo-body_small-size, 13px);
	font-weight: 500;
	line-height: 1.5;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid transparent;
	list-style: none;
	margin: 0;
}

/* ── Success / add-to-cart (woocommerce-message) ── */
.woocommerce-message {
	background-color: var(--color-primary, #000);
	color: var(--color-text-light, #fff);
	border-bottom-color: rgba(255,255,255,0.1);
	overflow: hidden;   /* clip dither canvas to the bar       */
	isolation: isolate; /* stacking context → z-index:-1 stays inside */
}

/* WebGL dither canvas injected by theme.js */
.wc-notice-fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	z-index: -1; /* behind all flex children of the notice */
}

/* Icon: checkmark before message text */
.woocommerce-message::before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ── Error ── */
.woocommerce-error {
	background-color: color-mix(in srgb, var(--color-error, #c0392b) 12%, transparent);
	color: var(--color-error, #c0392b);
	border-bottom-color: color-mix(in srgb, var(--color-error, #c0392b) 25%, transparent);
}

.woocommerce-error::before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ── Info ── */
.woocommerce-info {
	background-color: color-mix(in srgb, var(--color-primary, #000) 6%, transparent);
	color: var(--color-text);
	border-bottom-color: var(--color-border);
}

.woocommerce-info::before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ── "View cart" / action links inside notices ── */
.woocommerce-message .button,
.woocommerce-message a.button {
	margin-left: auto;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 7px 18px;
	background: #fff;
	color: var(--color-primary, #000) !important;
	border: none;
	border-radius: 100px; /* pill */
	font-size: var(--typo-badge-size, 11px);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity var(--transition);
	white-space: nowrap;
}

.woocommerce-message .button:hover,
.woocommerce-message a.button:hover {
	opacity: 0.85;
}

.woocommerce-error .button,
.woocommerce-info .button {
	margin-left: auto;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	background: transparent;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm, 4px);
	font-size: var(--typo-badge-size, 11px);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Reset WooCommerce default notice list styles */
.woocommerce-error li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Dismiss / close button if present */
.woocommerce-message .dismiss,
.woocommerce-info .dismiss {
	margin-left: auto;
	background: none;
	border: none;
	color: inherit;
	opacity: 0.6;
	cursor: pointer;
	padding: 2px 4px;
	font-size: 18px;
	line-height: 1;
	transition: opacity var(--transition);
}

.woocommerce-message .dismiss:hover,
.woocommerce-info .dismiss:hover {
	opacity: 1;
}


/* ═══════════════════════════════════════
   IMPACT COUNTER
   (used on homepage; styles were missing)
═══════════════════════════════════════ */

.block-impact-counter__header {
	text-align: center;
	margin-bottom: 48px;
}

.block-impact-counter__eyebrow {
	display: block;
	font-size: var(--typo-overline-size, 12px);
	font-weight: var(--typo-overline-weight, 500);
	letter-spacing: var(--typo-overline-ls, 0.1em);
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin-bottom: 12px;
}

.block-impact-counter__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 0;
}

.block-impact-counter__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 40px;
	text-align: center;
}

.block-impact-counter__number {
	display: block;
	font-family: var(--font-headings);
	font-size: clamp( 2.5rem, 6vw, 4rem );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-text);
	margin-bottom: 10px;
}

.block-impact-counter__label {
	display: block;
	font-size: var(--typo-body_small-size, 14px);
	color: var(--color-text-secondary);
	line-height: 1.4;
}

@media ( max-width: 600px ) {
	.block-impact-counter__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}


/* ═══════════════════════════════════════
   ABOUT — MANIFESTO
   Centered editorial text, light & dark
═══════════════════════════════════════ */

.block-manifesto {
	text-align: center;
	position: relative;  /* PixelBlast canvas is absolute inside */
	overflow: hidden;
}

/* PixelBlast WebGL canvas — identical stacking to .block-banner__fx */
.block-manifesto__fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
	pointer-events: none;
}

/* Ensure text/inner content sits above the canvas */
.block-manifesto--pixelblast .block-manifesto__inner {
	position: relative;
	z-index: 2;
}

/* When PixelBlast is active the background is always dark —
   force all text to full white */
.block-manifesto--pixelblast .block-manifesto__eyebrow {
	color: #ffffff;
}

.block-manifesto--pixelblast .block-manifesto__body {
	color: #ffffff;
}

.block-manifesto--pixelblast .block-manifesto__tagline {
	color: #ffffff;
}

.block-manifesto__inner {
	max-width: 800px;
	margin: 0 auto;
}

.block-manifesto__eyebrow {
	display: block;
	margin-bottom: 28px;
	color: var(--color-text-secondary);
}

.block-manifesto--dark .block-manifesto__eyebrow {
	color: #ffffff;
}

.block-manifesto__body {
	font-size: clamp( 1.05rem, 2vw, 1.35rem );
	line-height: 1.8;
	color: var(--color-text-secondary);
	margin-bottom: 40px;
}

.block-manifesto__body p {
	margin: 0;
}

.block-manifesto__body p + p {
	margin-top: 1.1em;
}

.block-manifesto--dark .block-manifesto__body {
	color: #ffffff;
}

.block-manifesto__tagline {
	font-family: var(--font-headings);
	font-size: clamp( 1.4rem, 2.8vw, 2rem );
	font-weight: 700;
	font-style: italic;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-text);
	margin: 0;
}

.block-manifesto--dark .block-manifesto__tagline {
	color: var(--color-text-light, #fff);
}


/* ═══════════════════════════════════════
   ABOUT — EDITORIAL (two-column)
   Left: eyebrow + title  |  Right: body
═══════════════════════════════════════ */

.block-editorial__grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	column-gap: 80px;
	align-items: start;
}

.block-editorial--reverse .block-editorial__lead {
	order: 2;
}

.block-editorial--reverse .block-editorial__body {
	order: 1;
}

.block-editorial__eyebrow {
	display: block;
	margin-bottom: 20px;
	color: var(--color-text-secondary);
}

.block-editorial__title {
	font-size: clamp( 1.75rem, 3vw, 2.5rem );
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--typo-h2-ls, -0.01em);
	margin: 0;
}

.block-editorial__body {
	padding-top: 8px; /* optical alignment with title baseline */
	font-size: var(--typo-body-size, 16px);
	line-height: 1.8;
	color: var(--color-text-secondary);
}

.block-editorial__body p {
	margin: 0;
}

.block-editorial__body p + p {
	margin-top: 1.1em;
}

@media ( max-width: 860px ) {
	.block-editorial__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.block-editorial--reverse .block-editorial__lead,
	.block-editorial--reverse .block-editorial__body {
		order: unset;
	}

	.block-editorial__body {
		padding-top: 0;
	}
}

/* ── Editorial: image variant ───────────────────────────── */

/* When an image is present the lead column holds all text and
   the media column holds the image. */
.block-editorial--has-image .block-editorial__grid {
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.block-editorial--has-image .block-editorial__lead {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Body sits inside the lead column when image is present */
.block-editorial--has-image .block-editorial__body {
	padding-top: 0;
}

.block-editorial__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md, 4px);
}

.block-editorial__media img {
	width: 100%;
	height: auto;
	display: block;
}

/* Reverse: image goes left */
.block-editorial--reverse.block-editorial--has-image .block-editorial__media {
	order: 1;
}
.block-editorial--reverse.block-editorial--has-image .block-editorial__lead {
	order: 2;
}

@media ( max-width: 860px ) {
	.block-editorial--has-image .block-editorial__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}
	.block-editorial--reverse.block-editorial--has-image .block-editorial__media,
	.block-editorial--reverse.block-editorial--has-image .block-editorial__lead {
		order: unset;
	}
}


/* ═══════════════════════════════════════
   ABOUT — MATERIALS GRID
   Three cards separated by 2px gaps
═══════════════════════════════════════ */

.block-materials__header {
	max-width: 580px;
	margin-bottom: 56px;
}

.block-materials__eyebrow {
	display: block;
	margin-bottom: 16px;
	color: var(--color-text-secondary);
}

.block-materials__title {
	font-size: clamp( 1.35rem, 2.5vw, 1.875rem );
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: var(--typo-h2-ls, -0.01em);
	margin: 0;
}

/* Grid: cards joined by 2px gap acting as dividers */
.block-materials__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2px;
	background-color: var(--color-border, #e5e7eb);
}

.block-materials__card {
	background-color: var(--color-bg, #fff);
	padding: 44px 40px;
}

.block-materials__tag {
	display: block;
	font-size: var(--typo-badge-size, 11px);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin-bottom: 28px;
}

.block-materials__card-title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin-bottom: 14px;
	margin-top: 0;
}

.block-materials__card-text {
	font-size: 15px;
	line-height: 1.75;
	color: var(--color-text-secondary);
	margin: 0;
}

@media ( max-width: 860px ) {
	.block-materials__grid {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 600px ) {
	.block-materials__card {
		padding: 32px 24px;
	}
}


/* ═══════════════════════════════════════
   ABOUT — CLOSING CTA
═══════════════════════════════════════ */

.block-about-cta__inner {
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
}

.block-about-cta__title {
	font-size: clamp( 2rem, 5vw, 3.5rem );
	font-weight: 700;
	letter-spacing: var(--typo-h1-ls, -0.02em);
	line-height: 1.1;
	margin-bottom: 16px;
}

.block-about-cta__text {
	font-size: var(--typo-body-size, 16px);
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: 36px;
}


/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — Luxury editorial overrides
   Scoped to body.page-id-737 (About, confirmed via SQLite)
   Aesthetic: monochromatic, high-end, editorial minimalism
   ══════════════════════════════════════════════════════════ */

/* ── Generous breathing room ─────────────────────────── */
body.page-id-737 {
	--section-spacing: 120px;
}

@media ( max-width: 768px ) {
	body.page-id-737 {
		--section-spacing: 72px;
	}
}


/* Hero banner: dark bg so white text is readable without image */
body.page-id-737 .block-banner {
	background-color: #0a0a0a;
}

/* CTA closing block: thicker rule in text color for visual weight */
body.page-id-737 .block-about-cta {
	border-top: 2px solid var(--color-text, #1a1a1a);
}

/* ── Eyebrow labels — pill badge ───────────────────────── */
body.page-id-737 .block-manifesto__eyebrow,
body.page-id-737 .block-editorial__eyebrow,
body.page-id-737 .block-materials__eyebrow {
	display: inline-block;
	width: fit-content;      /* shrink to text, not parent width */
	align-self: flex-start;  /* no stretch when inside a flex column */
	background: #1a1a1a;
	color: #ffffff;
	padding: 5px 14px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	position: static;
	margin-bottom: 28px;
}

/* No line decoration needed with pill style */
body.page-id-737 .block-manifesto__eyebrow::before,
body.page-id-737 .block-editorial__eyebrow::before,
body.page-id-737 .block-materials__eyebrow::before {
	display: none;
}

/* Dark / PixelBlast: outline pill — black would be invisible on dark bg */
body.page-id-737 .block-manifesto--dark .block-manifesto__eyebrow,
body.page-id-737 .block-manifesto--pixelblast .block-manifesto__eyebrow {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #ffffff;
}

/* ── Manifesto: left-aligned, larger editorial body text ── */
body.page-id-737 .block-manifesto {
	text-align: left;
}

body.page-id-737 .block-manifesto__inner {
	max-width: 840px;
	margin-left: 0;
	margin-right: 0;
}

body.page-id-737 .block-manifesto__body {
	font-size: clamp( 1.15rem, 2.8vw, 1.75rem );
	line-height: 1.7;
	color: var(--color-text);
	margin-bottom: 0;
}

/* Dark variant stays centered — visual contrast break */
body.page-id-737 .block-manifesto--dark {
	text-align: center;
}

body.page-id-737 .block-manifesto--dark .block-manifesto__inner {
	max-width: 800px;
	margin: 0 auto;
}

body.page-id-737 .block-manifesto--dark .block-manifesto__body {
	font-size: clamp( 1rem, 2vw, 1.4rem );
	color: #ffffff;
	margin-bottom: 0;
}


/* ── Editorial: larger title, wider column gap ─────────── */
body.page-id-737 .block-editorial__grid {
	column-gap: 120px;
}

body.page-id-737 .block-editorial__title {
	font-size: clamp( 2rem, 4.5vw, 3.75rem );
	letter-spacing: -0.03em;
	line-height: 1.05;
	font-weight: 700;
}

body.page-id-737 .block-editorial__body {
	font-size: 1rem;
	line-height: 1.9;
	padding-top: 4px;
}

/* ── Editorial image column (About page) ─────────────────── */
body.page-id-737 .block-editorial--has-image .block-editorial__grid {
	grid-template-columns: 1fr 1fr;
	column-gap: 80px;
	align-items: center;
}

body.page-id-737 .block-editorial__media {
	aspect-ratio: 1 / 1;
	border-radius: 0; /* square crop — no rounding */
}

body.page-id-737 .block-editorial__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* body inside lead: tighter on About page */
body.page-id-737 .block-editorial--has-image .block-editorial__lead {
	gap: 28px;
}

body.page-id-737 .block-editorial--has-image .block-editorial__body {
	padding-top: 0;
	color: var(--color-text-secondary);
}

/* ── Materials: full-width header ──────────────────────── */
body.page-id-737 .block-materials__header {
	max-width: none;
	margin-bottom: 64px;
}

body.page-id-737 .block-materials__title {
	font-size: clamp( 1.5rem, 3vw, 2.5rem );
	letter-spacing: -0.025em;
	margin-top: 8px;
}

body.page-id-737 .block-materials__tag {
	font-size: 10px;
	letter-spacing: 0.2em;
}

/* ── Closing CTA: oversized title, left-aligned ─────────── */
body.page-id-737 .block-about-cta__inner {
	text-align: left;
	max-width: none;
}

body.page-id-737 .block-about-cta__title {
	font-size: clamp( 2.5rem, 7vw, 6rem );
	letter-spacing: -0.04em;
	line-height: 1.0;
	margin-bottom: 40px;
}

body.page-id-737 .block-about-cta__text {
	font-size: 0.95rem;
	max-width: 400px;
	margin-bottom: 40px;
}

/* ── Mobile ─────────────────────────────────────────────── */
@media ( max-width: 860px ) {
	body.page-id-737 .block-editorial__grid {
		column-gap: 0;
	}
}


/* ═══════════════════════════════════════
   NOISE OVERLAY
   Animated grain canvas controlled via ACF → Effects & FX.
   noiseScale in JS shrinks canvas resolution; CSS stretches it
   back to 100vw/100vh so each pixel = scale screen-px.
   mix-blend-mode: soft-light integrates grain with page tones.
═══════════════════════════════════════ */

.noise-overlay {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 500;
	mix-blend-mode: soft-light;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	will-change: contents;
}


/* ═══════════════════════════════════════
   SCANLINES OVERLAY
   Fixed div with two pseudo-elements:
     ::before — single scanline sweeping top → bottom
     ::after  — repeating horizontal line grid
   Opacity controlled via --sl-opacity CSS custom property
   set inline by JS from ACF → Effects & FX.
═══════════════════════════════════════ */

.scanlines-overlay {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 499; /* just below noise */
	overflow: hidden;
}

/* Single animated sweep line */
.scanlines-overlay::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 2px;
	background: rgba( 0, 0, 0, var( --sl-opacity, 0.2 ) );
	animation: jpr-scanline 8s linear infinite;
}

/* Repeating grid of horizontal lines */
.scanlines-overlay::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 50%,
		rgba( 0, 0, 0, var( --sl-opacity, 0.2 ) ) 51%
	);
	background-size: 100% 4px;
	animation: jpr-scanlines-shift 1s steps( 60 ) infinite;
}

@keyframes jpr-scanline {
	0%   { transform: translate3d( 0, -100%, 0 ); }
	100% { transform: translate3d( 0, 100vh, 0 ); }
}

@keyframes jpr-scanlines-shift {
	0% { background-position: 0 0; }
	100% { background-position: 0 4px; }
}


/* ═══════════════════════════════════════
   BLOCK: Contact Form 7
   Two variants: centered (default) and split.
   CF7 field styles override plugin defaults
   to match the JUNK design system.
═══════════════════════════════════════ */

/* ── Shared header ──────────────────────────────────────── */
.block-cf7__eyebrow {
	display: inline-block;
	width: fit-content;
	align-self: flex-start;
	background: #1a1a1a;
	color: #ffffff;
	padding: 5px 14px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.block-cf7__title {
	font-size: clamp( 2rem, 4vw, 3.25rem );
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 20px;
}

.block-cf7__intro {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--color-text-secondary);
	max-width: 560px;
}

.block-cf7__intro p { margin: 0; }
.block-cf7__intro p + p { margin-top: 1em; }

/* ── Centered layout ────────────────────────────────────── */
.block-cf7--centered .block-cf7__header {
	text-align: center;
	margin-bottom: 16px;
}

.block-cf7--centered .block-cf7__eyebrow {
	margin-left: auto;
	margin-right: auto;
}

.block-cf7--centered .block-cf7__intro {
	text-align: center;
	margin: 0 auto 40px;
}

.block-cf7--centered .block-cf7__form {
	max-width: 640px;
	margin: 40px auto 0;
}

/* ── Split layout ───────────────────────────────────────── */
.block-cf7--split .block-cf7__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	column-gap: 80px;
	align-items: start;
}

.block-cf7--split .block-cf7__col-info {
	display: flex;
	flex-direction: column;
	padding-top: 8px;
}

.block-cf7--split .block-cf7__title {
	margin-bottom: 28px;
}

.block-cf7--split .block-cf7__intro {
	max-width: none;
}

@media ( max-width: 860px ) {
	.block-cf7--split .block-cf7__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}
}

/* ── Contact Form 7 field overrides ─────────────────────── */

/* Remove CF7 default wrapper margin */
.wpcf7 { margin: 0; }

/* Labels */
.wpcf7 label {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text);
	margin-bottom: 8px;
}

/* Text, email, tel, url inputs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	padding: 14px 16px;
	background: transparent;
	border: 1px solid var(--color-border, #d0d0d0);
	border-radius: 0;
	font-size: 0.9rem;
	font-family: var(--font-body);
	color: var(--color-text);
	transition: border-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--color-text);
}

.wpcf7 textarea {
	min-height: 140px;
	resize: vertical;
}

/* Field wrappers — stack fields vertically */
.wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 20px;
}

/* Submit button — matches theme .btn style */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	display: inline-block;
	padding: 14px 36px;
	background: var(--color-text, #1a1a1a);
	color: var(--color-bg, #fff);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: opacity 0.2s;
	margin-top: 8px;
	width: auto;
	-webkit-appearance: none;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
	opacity: 0.75;
}

/* Response output (success / error message) */
.wpcf7-response-output {
	margin-top: 20px;
	padding: 12px 16px;
	font-size: 0.875rem;
	border: 1px solid currentColor;
}

.wpcf7-mail-sent-ok {
	color: #1e6b3c;
	border-color: #1e6b3c;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked {
	color: #c0392b;
	border-color: #c0392b;
}

/* Validation error per-field */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: 0.8rem;
	color: #c0392b;
}

/* Loading spinner (CF7 sends via Ajax) */
.wpcf7 .ajax-loader {
	display: inline-block;
	margin-left: 10px;
	vertical-align: middle;
}


/* ═══════════════════════════════════════
   EU DECLARATION OF CONFORMITY — Page
   Template: page-eu-declaration-of-conformity.php
═══════════════════════════════════════ */

.site-main--declaration {
	padding: var(--section-spacing, 80px) 0;
}

/* ── Page header ─────────────────────────────────────────── */
.declaration-header {
	max-width: 640px;
	margin: 0 0 64px;
}

.declaration-header__eyebrow {
	display: inline-block;
	width: fit-content;
	background: #1a1a1a;
	color: #fff;
	padding: 5px 14px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.declaration-header__title {
	font-size: clamp( 2rem, 4vw, 3rem );
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 20px;
}

.declaration-header__desc {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--color-text-secondary);
	margin: 0;
}

/* ── Document list ───────────────────────────────────────── */
.declaration-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border, #e8e8e8);
}

.declaration-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-border, #e8e8e8);
}

.declaration-list__name {
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-text);
}

.declaration-list__download {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid var(--color-text, #1a1a1a);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.18s, color 0.18s;
}

.declaration-list__download:hover {
	background: var(--color-text, #1a1a1a);
	color: var(--color-bg, #fff);
}

.declaration-list__download svg {
	flex-shrink: 0;
}

.declaration-empty {
	font-size: 1rem;
	color: var(--color-text-secondary);
}

@media ( max-width: 480px ) {
	.declaration-list__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}