/*
Theme Name: Cenvia Child
Theme URI: https://cenvialabs.com
Description: Child theme of Blocksy for the Cenvia Labs storefront. Steel blue, off-white and near-black; Bricolage Grotesque display, Inter body, IBM Plex Mono for scientific data; dotted hero texture. Presentation only: commerce logic lives in cenvia-store, compliance in cenvia-compliance.
Author: Cenvia Labs
Template: blocksy
Version: 2.1.2
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: cenvia-labs
*/

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
	--c-bg: #f4f6f8;
	--c-surface: #ffffff;
	--c-ink: #111418;
	--c-ink-muted: #4a5361;
	--c-line: #e2e5e9;
	--c-line-strong: #c7cbd1;
	--c-accent: #4a7296;
	--c-accent-hover: #395c79;
	--c-accent-tint: #e4edf4;
	--c-accent-panel: #d7e3ec;
	--c-dark: #14171b;
	--c-dark-2: #1c2026;
	--c-ok: #1a7f37;
	--c-ok-tint: #e7f6ec;
	--c-warn: #9a6700;
	--c-warn-tint: #fdf3e0;
	--c-err: #a02b2b;
	--c-err-tint: #fbe9e9;

	--ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-base: 0.5s;

	--font-display: 'Bricolage Grotesque', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

	--fs-caption: 0.75rem;
	--fs-small: 0.875rem;
	--fs-body: 1rem;
	--fs-lead: 1.25rem;
	--fs-h4: 1.375rem;
	--fs-h3: 1.75rem;
	--fs-h2: 2.375rem;
	--fs-h1: 3.5rem;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	--radius-sm: 8px;
	--radius-card: 12px;
	--radius-lg: 18px;
	--radius-pill: 999px;
	--shadow-card: 0 20px 40px -24px rgba(17, 20, 24, 0.18), 0 2px 8px -2px rgba(17, 20, 24, 0.06);
	--shadow-hover: 0 24px 48px -20px rgba(17, 20, 24, 0.26), 0 4px 12px -2px rgba(17, 20, 24, 0.1);

	--container-max: 1200px;
	--container-pad: var(--space-6);
	--content-max: var(--container-max);

	/* Header geometry. --header-height mirrors Blocksy's middle-row --height
	   (120px desktop, 70px below 1000px) so sticky offsets and anchor
	   margins match the real header. --header-shrink is the visual shrink in
	   the scrolled state; it is applied as a transform, never as a layout
	   change (see §5). --compliance-bar-height is the bar's fixed height, so
	   the header's sticky offset equals the bar exactly at every zoom. */
	--header-height: 120px;
	--header-shrink: 48px;
	--compliance-bar-height: 36px;
	--dots: radial-gradient(rgba(17, 20, 24, 0.12) 1.5px, transparent 1.5px);
}

@media (max-width: 999.98px) {
	:root {
		--header-height: 70px;
		--header-shrink: 0px;
	}
}

@media (max-width: 768px) {
	:root {
		--container-pad: var(--space-4);
	}
}

@media (max-width: 540px) {
	:root {
		--compliance-bar-height: 52px; /* the bar's text wraps to two lines */
	}
}

/* Blocksy's own button/link variables (its customizer CSS sets them on :root
   after this file loads; html:root outranks it). Every Blocksy- or
   WooCommerce-styled button then uses the steel-blue accent. */
html:root {
	--theme-palette-color-1: var(--c-accent);
	--theme-palette-color-2: var(--c-accent-hover);
	--theme-button-background-initial-color: var(--c-accent);
	--theme-button-background-hover-color: var(--c-accent-hover);
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;
	--theme-link-initial-color: var(--c-accent);
	--theme-link-hover-color: var(--c-accent-hover);
	--theme-form-field-border-focus-color: var(--c-accent);
	--theme-button-border-radius: var(--radius-pill);
}

/* =============================================================
   2. FONTS (self-hosted, latin subset, variable)
   ============================================================= */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('assets/fonts/inter-variable.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url('assets/fonts/bricolage-grotesque-variable.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); }

/* =============================================================
   3. BASE
   ============================================================= */
html:root { scroll-behavior: auto; }

html body {
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

[id] { scroll-margin-top: calc(var(--header-height) - var(--header-shrink) + var(--compliance-bar-height) + var(--space-4)); }

body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	text-wrap: balance;
	margin: 0 0 var(--space-4);
}

body h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, var(--fs-h1)); line-height: 1.04; }
body h2 { font-size: clamp(1.7rem, 1.35rem + 1.3vw, var(--fs-h2)); line-height: 1.12; }
body h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, var(--fs-h3)); line-height: 1.2; }
body h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0 0 var(--space-4); max-width: 68ch; }

html a { color: var(--c-accent); }
html a:hover { color: var(--c-accent-hover); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

small, .cenvia-caption { font-size: var(--fs-caption); color: var(--c-ink-muted); letter-spacing: 0.02em; }

.cenvia-data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cenvia-formula sub { font-size: 0.72em; line-height: 0; }

hr { border: none; border-top: 1px solid var(--c-line); margin: var(--space-6) 0; }

button, input, select, textarea, .button { border-radius: var(--radius-pill); font-family: inherit; }

::selection { background: var(--c-accent); color: #fff; }

img { max-width: 100%; height: auto; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Reveal (opt-in via JS; content is visible without JS) */
@media (prefers-reduced-motion: no-preference) {
	.cenvia-reveal.cenvia-reveal--armed { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-base) var(--ease-premium), transform var(--dur-base) var(--ease-premium); }
	.cenvia-reveal.cenvia-reveal--armed.is-visible { opacity: 1; transform: none; }
	.cenvia-reveal-group.is-visible > *:nth-child(2) { transition-delay: 60ms; }
	.cenvia-reveal-group.is-visible > *:nth-child(3) { transition-delay: 120ms; }
	.cenvia-reveal-group.is-visible > *:nth-child(4) { transition-delay: 180ms; }
	.cenvia-reveal-group.is-visible > *:nth-child(n+5) { transition-delay: 240ms; }
}
@media (prefers-reduced-motion: reduce) {
	.cenvia-reveal, .cenvia-reveal.cenvia-reveal--armed { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media print {
	.cenvia-reveal, .cenvia-reveal.cenvia-reveal--armed { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =============================================================
   4. BUTTONS, CHIPS, EYEBROWS, SECTIONS
   ============================================================= */
.btn-primary, .btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-small);
	line-height: 1.2;
	padding: 0.8rem var(--space-6);
	border-radius: var(--radius-pill);
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform 0.2s var(--ease-premium), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
}
/* Specificity: Blocksy styles bare [type="submit"] and .woocommerce button.button;
   the html/body prefixes and the .woocommerce variants win everywhere without !important. */
html body .btn-primary, html body button.btn-primary, html body input.btn-primary, html body.woocommerce button.btn-primary, html body.woocommerce .btn-primary, html body.woocommerce .cenvia-auth .button { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
html body .btn-primary:hover, html body .btn-primary:focus-visible, html body button.btn-primary:hover, html body.woocommerce button.btn-primary:hover, html body.woocommerce .btn-primary:hover, html body.woocommerce .cenvia-auth .button:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: #fff; transform: translateY(-1px); }
html body button.btn-primary, html body input.btn-primary { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-small); line-height: 1.2; padding: 0.8rem var(--space-6); border-radius: var(--radius-pill); text-transform: none; letter-spacing: normal; min-height: 0; }
html body button.btn-primary.btn-lg { padding: 1rem var(--space-7); font-size: var(--fs-body); }
.btn-outline { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.btn-outline:hover, .btn-outline:focus-visible { border-color: var(--c-ink); color: var(--c-ink); transform: translateY(-1px); }
.btn-outline--light { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn-outline--light:hover { color: #fff; border-color: #fff; }
.btn-lg { padding: 1rem var(--space-7); font-size: var(--fs-body); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: var(--c-line-strong); border-color: var(--c-line-strong); color: var(--c-ink-muted); cursor: not-allowed; transform: none; }

.cenvia-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-accent-hover); /* the lighter accent is 3.9:1 on the tinted hero panels; this shade is 5.4:1 there and 7:1 on white */
	font-weight: 500;
	margin: 0 0 var(--space-3);
}

.cenvia-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--radius-pill);
	padding: 4px var(--space-3);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-caption);
	line-height: 1.4;
	white-space: nowrap;
	border: 1px solid transparent;
}
.cenvia-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.cenvia-chip--on_hand { background: var(--c-ok-tint); color: var(--c-ok); border-color: #bce4c7; }
.cenvia-chip--made_to_order { background: var(--c-accent-tint); color: var(--c-accent-hover); border-color: #c5d6e3; }
.cenvia-chip--unavailable { background: var(--c-bg); color: var(--c-ink-muted); border-color: var(--c-line-strong); }

.cenvia-icon { width: 1.1em; height: 1.1em; flex: none; }

.cenvia-section-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--container-pad); }
.cenvia-section--white { background: var(--c-surface); border-top: 1px solid var(--c-line); }
.cenvia-section--tint { background: var(--c-bg); border-top: 1px solid var(--c-line); }
.cenvia-section--dark { background: var(--c-dark); color: #fff; }
.cenvia-section--dark h2, .cenvia-section--dark h3, .cenvia-section--dark p { color: #fff; }
.cenvia-section--dark .cenvia-eyebrow { color: #a9c3d8; }

.cenvia-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.cenvia-section-head h2 { margin: 0; }
.cenvia-section-head .cenvia-eyebrow { margin-bottom: var(--space-2); }
.cenvia-section-head__link { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--fs-small); text-decoration: none; color: var(--c-ink); white-space: nowrap; }
.cenvia-section-head__link:hover { color: var(--c-accent); }
.cenvia-section-head--center { justify-content: center; text-align: center; }
.cenvia-section-head--center p { margin: var(--space-3) auto 0; color: var(--c-ink-muted); }

.cenvia-two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.cenvia-two-col > div:first-child { position: sticky; top: calc(var(--header-height) - var(--header-shrink) + var(--compliance-bar-height) + var(--space-6)); }
.cenvia-two-col h2 { margin-bottom: 0; }
.cenvia-prose p { color: var(--c-ink-muted); line-height: 1.75; max-width: 68ch; }
.cenvia-prose p:last-child { margin-bottom: 0; }
.cenvia-prose .btn-outline { margin-top: var(--space-2); }

.cenvia-check-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.cenvia-check-list li { position: relative; padding-left: 30px; color: var(--c-ink); line-height: 1.55; }
.cenvia-check-list li::before {
	content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-accent-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7296' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 11px; background-repeat: no-repeat; background-position: center;
}

.cenvia-cta { text-align: center; }
.cenvia-cta h2 { max-width: 22ch; margin: 0 auto var(--space-4); }
.cenvia-cta p { margin: 0 auto var(--space-6); color: rgba(255, 255, 255, 0.75) !important; }
.cenvia-cta__actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }

/* Cards used by "Why Cenvia" (home + about) */
.cenvia-why__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.cenvia-why__card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); transition: box-shadow 0.2s ease, transform 0.2s var(--ease-premium); }
.cenvia-why__card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.cenvia-why__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--c-accent-tint); color: var(--c-accent); margin-bottom: var(--space-2); }
.cenvia-why__icon .cenvia-icon { width: 22px; height: 22px; }
.cenvia-why__card h3 { font-size: var(--fs-lead); margin: 0; }
.cenvia-why__card p { color: var(--c-ink-muted); font-size: var(--fs-small); margin: 0; }

/* Steps */
.cenvia-steps__grid { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.cenvia-step { position: relative; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: var(--space-5); }
.cenvia-step__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-ink); color: #fff; font-weight: 800; font-size: var(--fs-small); margin-bottom: var(--space-4); }
.cenvia-step h3 { font-size: var(--fs-lead); margin: 0 0 var(--space-2); }
.cenvia-step p { color: var(--c-ink-muted); font-size: var(--fs-small); margin: 0; }

/* Accordion */
.cenvia-faq { border-top: 1px solid var(--c-line); }
.cenvia-faq__item { border-bottom: 1px solid var(--c-line); }
.cenvia-faq__heading { margin: 0; font-size: inherit; }
.cenvia-faq__question {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; background: none; border: none; text-align: left; cursor: pointer;
	padding: var(--space-4) var(--space-1); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body); color: var(--c-ink); border-radius: 0;
}
.cenvia-faq__question:hover { color: var(--c-accent); }
.cenvia-faq__icon { flex: none; width: 18px; height: 18px; position: relative; }
.cenvia-faq__icon::before, .cenvia-faq__icon::after { content: ''; position: absolute; background: var(--c-accent); border-radius: 2px; transition: transform 0.2s var(--ease-premium), opacity 0.2s ease; }
.cenvia-faq__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.cenvia-faq__icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.cenvia-faq__item.is-open .cenvia-faq__icon::after { transform: rotate(90deg); opacity: 0; }
.cenvia-faq__panel { overflow: hidden; transition: max-height 0.3s var(--ease-premium); }
.cenvia-faq__panel[hidden] { display: none; }
.cenvia-faq__answer { padding: 0 var(--space-1) var(--space-5); color: var(--c-ink-muted); line-height: 1.7; }
.cenvia-faq__answer p { max-width: none; }
.cenvia-faq__answer p:last-child { margin-bottom: 0; }

/* Empty states (cart, 404, search) */
.cenvia-empty-state { text-align: center; padding: var(--space-8) var(--space-4); max-width: 640px; margin: 0 auto; }
.cenvia-empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-accent-tint); color: var(--c-accent); margin-bottom: var(--space-4); }
.cenvia-empty-state__icon .cenvia-icon { width: 28px; height: 28px; }
.cenvia-empty-state__title { margin-bottom: var(--space-3); }
.cenvia-empty-state__text { color: var(--c-ink-muted); margin: 0 auto var(--space-6); }
.cenvia-empty-state .return-to-shop { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin: 0; }
.cenvia-empty-state__links { list-style: none; display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-6) 0 0; padding: 0; }
.cenvia-empty-state__links a { font-weight: 700; text-decoration: none; }
.cenvia-empty-state__products { margin-top: var(--space-8); }
.cenvia-empty-state__products h2, .cenvia-empty-state__products h3 { text-align: center; margin-bottom: var(--space-5); }
.cenvia-search-form { display: flex; gap: var(--space-2); max-width: 520px; margin: 0 auto; }
.cenvia-search-form input[type="search"] { flex: 1; min-width: 0; border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); padding: 0.8rem var(--space-4); font-size: var(--fs-small); background: var(--c-surface); }

/* Forms */
.cenvia-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.cenvia-form-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.cenvia-form-row label { font-weight: 700; font-size: var(--fs-small); color: var(--c-ink); }
.cenvia-form-required { color: var(--c-accent); }
.cenvia-form-optional { font-weight: 400; color: var(--c-ink-muted); }
.cenvia-form-row input, .cenvia-form-row textarea, .cenvia-form-row select {
	font: inherit; font-size: var(--fs-body); color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); padding: 0.75rem var(--space-4); width: 100%;
}
.cenvia-form-row textarea { resize: vertical; min-height: 8rem; }
.cenvia-form-row select { appearance: none; -webkit-appearance: none; line-height: 1.4; min-height: 3rem; padding-right: var(--space-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5361' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; background-size: 18px; }
.cenvia-form-row input:focus, .cenvia-form-row textarea:focus, .cenvia-form-row select:focus { border-color: var(--c-accent); }
.cenvia-form-banner { padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); font-size: var(--fs-small); font-weight: 600; margin: 0 0 var(--space-6); }
.cenvia-form-banner--success { background: var(--c-ok-tint); color: #1e6b3c; border: 1px solid #bfe2cc; }
.cenvia-form-banner--error { background: var(--c-err-tint); color: var(--c-err); border: 1px solid #f2c4c4; }

/* =============================================================
   5. HEADER
   ============================================================= */
.cenvia-compliance-bar { background: var(--c-dark); position: sticky; top: 0; z-index: 501; height: var(--compliance-bar-height); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.cenvia-compliance-bar__text { max-width: var(--container-max); margin: 0; padding: 0 var(--container-pad); font-family: var(--font-mono); font-size: var(--fs-caption); line-height: 1.35; letter-spacing: 0.06em; color: #fff; text-align: center; }

.cenvia-promo-bar { background: var(--c-accent-tint); border-bottom: 1px solid #c5d6e3; }
.cenvia-promo-bar[hidden], html.cenvia-promo-dismissed .cenvia-promo-bar { display: none; }
.cenvia-promo-bar { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-2) var(--space-6); position: relative; }
.cenvia-promo-bar__text { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); text-align: center; max-width: none; }
.cenvia-promo-bar__text a { color: var(--c-accent-hover); text-decoration: underline; text-decoration-color: rgba(57, 92, 121, 0.4); text-underline-offset: 3px; }
.cenvia-promo-bar__dismiss { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.25rem; line-height: 1; color: var(--c-ink-muted); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; }
.cenvia-promo-bar__dismiss:hover { background: rgba(17, 20, 24, 0.06); color: var(--c-ink); }

#header.ct-header { background: var(--c-surface); border-bottom: 1px solid var(--c-line); position: sticky; top: var(--compliance-bar-height); z-index: 500; transition: box-shadow 0.2s ease, transform 0.2s var(--ease-premium); }
/* Scrolled state. The header's in-flow height never changes with scroll:
   a sticky element whose layout height depends on scrollY feeds back
   through scroll anchoring (the browser moves scrollY to keep the content
   still, which re-crosses the threshold) and the page vibrates. The shrink
   is therefore a transform: the header slides up by --header-shrink under
   the compliance bar and its row content slides down by half of that, so
   the visible band is 72px tall with the logo and menu centred in it.
   Transforms are composited, cause no layout and never move the scroll
   position. */
#header.ct-header.is-scrolled { box-shadow: 0 2px 12px -4px rgba(17, 20, 24, 0.15); transform: translateY(calc(-1 * var(--header-shrink))); }
#header.ct-header [data-row="middle"] > div { transition: transform 0.2s var(--ease-premium); }
#header.ct-header.is-scrolled [data-row="middle"] > div { transform: translateY(calc(var(--header-shrink) / 2)); }
@media (prefers-reduced-motion: reduce) {
	#header.ct-header, #header.ct-header [data-row="middle"] > div { transition: none; }
}
/* Logged-in admin bar: WordPress fixes it at the top above 600px, so the sticky stack starts below it. */
@media (min-width: 601px) {
	.admin-bar .cenvia-compliance-bar { top: var(--wp-admin--admin-bar--height, 32px); }
	.admin-bar #header.ct-header { top: calc(var(--compliance-bar-height) + var(--wp-admin--admin-bar--height, 32px)); }
	.admin-bar .cenvia-two-col > div:first-child { top: calc(var(--header-height) - var(--header-shrink) + var(--compliance-bar-height) + var(--space-6) + var(--wp-admin--admin-bar--height, 32px)); }
	.admin-bar [id] { scroll-margin-top: calc(var(--header-height) - var(--header-shrink) + var(--compliance-bar-height) + var(--space-4) + var(--wp-admin--admin-bar--height, 32px)); }
}

/* Links on the accent-tinted surfaces: the base link colour is 4.3:1 on
   --c-accent-tint, so these use the darker shade (5.9:1). */
.cenvia-checkout-nudge a, .cenvia-legal-note a, .cenvia-welcome-card a, .cenvia-dispatch a, .cenvia-payment-explainer__facts a, html .woocommerce-info a, html .woocommerce-message a, .woocommerce-checkout .create-account a { color: var(--c-accent-hover); }

/* Tap targets on phones and tablets (WCAG 2.5.8): the header icons are 20px
   glyphs, so their links get a 40px hit box that does not move the layout. */
@media (max-width: 999.98px) {
	#header .ct-header-account .ct-account-item, #header .ct-header-cart .ct-cart-item, #header .ct-header-search .ct-search-item { padding: 10px; margin: -10px; box-sizing: content-box; }
	#header button.ct-header-trigger[data-id="trigger"] { padding: 10px; margin: -10px -10px -10px 0; width: 40px; height: 40px; box-sizing: border-box; }
	#header .site-logo-container { padding: 8px 0; margin: -8px 0; }
}

body.wp-custom-logo #header .site-title-container, body.wp-custom-logo #offcanvas .site-title-container { display: none; }
#header .site-logo-container { height: auto; } /* Blocksy reserves 50px; the 34px logo then sat 8px above the menu's centre line. */
#header .site-logo-container img, #offcanvas .site-logo-container img { display: block; height: 34px; width: auto; }
@media (max-width: 999.98px) { #header .site-logo-container img { height: 28px; } }

#header nav.menu-container ul.menu { gap: var(--space-5); justify-content: center; }
#header .ct-menu-link { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); text-decoration: none; padding: var(--space-2) 0; }
#header .ct-menu-link:hover, #header li.current-menu-item > .ct-menu-link { color: var(--c-accent); }

#header .ct-header-search svg, #header .ct-header-trigger svg, #header .ct-header-account svg, #header .ct-header-cart svg { fill: var(--c-ink); width: 20px; height: 20px; }
#header .ct-header-search:hover svg, #header .ct-header-trigger:hover svg, #header .ct-header-account:hover svg, #header .ct-header-cart:hover svg { fill: var(--c-accent); }
#header .ct-header-account .ct-account-item, #header .ct-header-cart .ct-cart-item { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--c-ink); }
#header .ct-header-account .ct-label, #header .ct-header-cart .ct-label { display: none; }
#header .ct-icon-container { position: relative; }
#header .ct-dynamic-count-cart {
	position: absolute; top: -8px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--c-accent); color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 16px; text-align: center;
}
#header .ct-dynamic-count-cart[data-count="0"] { display: none; }
#header [data-id="account"], #header [data-id="cart"], #header [data-id="search"] { margin-left: var(--space-3); }

/* Account dropdown (Blocksy Companion) */
#header .ct-header-account .ct-header-account-dropdown, #header .ct-header-account .ct-account-dropdown { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }

/* Off-canvas (mobile) menu. Blocksy paints the visible drawer on
   .ct-panel-inner, not on the #offcanvas overlay, and caps its width with
   --side-panel-width (90vw below 690px, 65vw below 1000px). The overlay is
   already the full viewport width; it was the drawer that stopped short,
   leaving a strip of overlay bare down the left edge. Background and text
   colour are set together here on purpose: the drawer's near-black came
   from Blocksy while this file set the panel white with dark ink, and that
   disagreement is what rendered the links dark-on-dark. Scoped to the
   widths where the hamburger exists, so the desktop header is untouched. */
@media (max-width: 999.98px) {
	html #offcanvas.ct-panel {
		--side-panel-width: 100%;   /* fill the overlay: no bare strip beside the drawer */
		--side-panel-offset: 0px;   /* Blocksy's default, pinned so a theme option cannot inset the drawer again */
		--cenvia-panel-bg: var(--c-dark);
		--cenvia-panel-accent: #a9c3d8; /* 10:1 on the panel; the tint the footer already uses on dark */
		background: var(--cenvia-panel-bg); /* matches the drawer, so nothing pale shows while it slides in */
	}
	html #offcanvas .ct-panel-inner { background-color: var(--cenvia-panel-bg); }
	#offcanvas .ct-menu-link { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-lead); color: #fff; }
	#offcanvas .ct-menu-link:hover,
	#offcanvas .ct-menu-link:focus-visible,
	#offcanvas li[class*="current-menu-"] > .ct-menu-link { color: var(--cenvia-panel-accent); }
}

/* =============================================================
   6. FOOTER
   ============================================================= */
.cenvia-footer { background: var(--c-dark); color: rgba(255, 255, 255, 0.72); position: relative; }
.cenvia-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); }
.cenvia-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--container-pad) var(--space-7); display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
.cenvia-footer__logo { display: block; height: 30px; width: auto; margin-bottom: var(--space-4); }
.cenvia-footer__blurb { font-size: var(--fs-small); line-height: 1.7; margin: 0 0 var(--space-4); max-width: 38ch; color: rgba(255, 255, 255, 0.72); }
.cenvia-footer__facts { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-2); }
.cenvia-footer__facts li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: rgba(255, 255, 255, 0.85); }
.cenvia-footer__facts .cenvia-icon { color: #a9c3d8; }
.cenvia-footer__facts a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.cenvia-footer__facts a:hover { color: #fff; text-decoration: underline; }
.cenvia-footer__social { list-style: none; display: flex; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; }
.cenvia-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); }
.cenvia-footer__social a:hover { background: var(--c-accent); color: #fff; }
.cenvia-footer__social svg { width: 15px; height: 15px; }
.cenvia-footer__heading { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin: 0 0 var(--space-4); }
.cenvia-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cenvia-footer__col a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: var(--fs-small); }
.cenvia-footer__col a:hover { color: #fff; }

.cenvia-footer__disclaimer { background: var(--c-dark-2); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cenvia-footer__disclaimer-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-6) var(--container-pad); }
.cenvia-footer__disclaimer-title { display: flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin: 0 0 var(--space-3); }
.cenvia-footer__disclaimer-title .cenvia-icon { color: #a9c3d8; }
.cenvia-footer .cenvia-footer-notice, .cenvia-footer__disclaimer-text { font-size: var(--fs-caption); line-height: 1.7; color: rgba(255, 255, 255, 0.72); max-width: 90ch; margin: 0 0 var(--space-2); background: none; border: none; padding: 0; box-shadow: none; }
.cenvia-footer .cenvia-footer-notice { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.cenvia-footer__disclaimer-text { margin-bottom: 0; }

.cenvia-footer__strip { background: var(--c-dark); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cenvia-footer__strip-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-4) var(--container-pad); display: flex; gap: var(--space-5); flex-wrap: wrap; }
.cenvia-footer__badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.cenvia-footer__badge .cenvia-icon { color: #a9c3d8; }

#footer.ct-footer { background: var(--c-dark); border-top: 1px solid rgba(255, 255, 255, 0.08); }
#footer .ct-footer-copyright { max-width: var(--container-max); margin: 0 auto; padding: var(--space-4) var(--container-pad); font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.5); }
#footer .ct-footer-copyright a { color: rgba(255, 255, 255, 0.5); }

/* Footer email capture */
.cenvia-capture--inline { margin-top: var(--space-2); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.1); max-width: 380px; }
.cenvia-capture--inline .cenvia-capture__title { font-weight: 800; color: #fff; font-size: var(--fs-small); margin: 0 0 var(--space-1); }
.cenvia-capture--inline .cenvia-capture__lede { font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.65); margin: 0 0 var(--space-3); }
.cenvia-capture__row { display: flex; gap: var(--space-2); }
.cenvia-capture__row input[type="email"] { flex: 1; min-width: 0; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: #fff; padding: 0.7rem var(--space-4); font-size: var(--fs-small); }
.cenvia-capture--inline .cenvia-capture__row input::placeholder { color: rgba(255, 255, 255, 0.45); }
.cenvia-capture--inline .cenvia-capture__row input:focus { border-color: #a9c3d8; }
.cenvia-capture--inline .btn-primary { padding: 0.7rem var(--space-4); white-space: nowrap; }
.cenvia-capture__consent { font-size: 0.6875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.45); margin: var(--space-2) 0 0; max-width: none; }

.cenvia-two-col > *, .cenvia-why__grid > *, .cenvia-steps__grid > *, .cenvia-footer__inner > * { min-width: 0; }
@media (max-width: 1100px) { .cenvia-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cenvia-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 900px) { .cenvia-two-col { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .cenvia-two-col > div:first-child { position: static; } .cenvia-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cenvia-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cenvia-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cenvia-why__grid, .cenvia-steps__grid { grid-template-columns: minmax(0, 1fr); } .cenvia-section-inner { padding-top: var(--space-7); padding-bottom: var(--space-7); } }

/* Page hero (custom templates) */
.cenvia-page-hero { background: var(--c-accent-panel); background-image: var(--dots); background-size: 22px 22px; background-position: -8px -8px; border-bottom: 1px solid var(--c-line-strong); }
.cenvia-page-hero__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--container-pad); }
.cenvia-page-hero__title { max-width: 20ch; margin-bottom: var(--space-4); }
.cenvia-page-hero__lede { color: var(--c-ink-muted); font-size: var(--fs-lead); max-width: 62ch; margin: 0; line-height: 1.55; }
.cenvia-page-hero__actions { margin: var(--space-5) 0 0; }

/* Blocksy page hero on remaining default pages (cart, checkout, account, legal pages).
   Blocksy pads the content container by 50px above the hero; the hero is full-bleed here. */
body.page .ct-container-full:has(> article > .hero-section:first-child), body.woocommerce-shop .ct-container-full, body.tax-product_cat .ct-container-full { padding-top: 0; }
body.page .hero-section[data-type="type-1"].is-width-constrained, body.woocommerce-shop .hero-section, body.tax-product_cat .hero-section {
	max-width: none; width: 100%; margin: 0; background: var(--c-accent-panel); background-image: var(--dots); background-size: 22px 22px; background-position: -8px -8px; border-bottom: 1px solid var(--c-line-strong);
}
body.page .hero-section[data-type="type-1"] .entry-header, body.woocommerce-shop .hero-section .entry-header.ct-container-narrow, body.tax-product_cat .hero-section .entry-header.ct-container-narrow {
	width: 100%; box-sizing: border-box; max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--container-pad); text-align: left;
}
body.woocommerce-shop .hero-section .page-title, body.tax-product_cat .hero-section .page-title, body.woocommerce-shop .hero-section .page-description, body.tax-product_cat .hero-section .page-description { text-align: left; margin-left: 0; margin-right: 0; }
body.page .page-title, body.woocommerce-shop .page-title, body.tax-product_cat .page-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--c-ink); font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); line-height: 1.1; margin: 0; }
body.page .hero-section[data-type="type-1"] .page-description, body.woocommerce-shop .hero-section .page-description, body.tax-product_cat .hero-section .page-description { color: var(--c-ink-muted); font-size: var(--fs-lead); max-width: 52ch; margin: var(--space-4) 0 0; }

/* Default page body (Shipping, Returns, Privacy, Terms, How payment works, Track order) */
body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) article .entry-content,
body.woocommerce-cart article .entry-content, body.woocommerce-checkout article .entry-content, body.woocommerce-account article .entry-content {
	max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--container-pad) var(--space-9);
}
body.page article .entry-content.is-layout-constrained > * { margin-left: 0 !important; margin-right: 0 !important; }
body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.cenvia-custom-page) article .entry-content { max-width: 820px; }
body.page article .entry-content > h2 { font-size: var(--fs-h3); margin: var(--space-7) 0 var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--c-line); }
body.page article .entry-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
body.page article .entry-content h3 { font-size: var(--fs-h4); margin: var(--space-5) 0 var(--space-2); }
body.page article .entry-content p, body.page article .entry-content li { color: var(--c-ink-muted); line-height: 1.75; }
body.page article .entry-content p { max-width: none; }
body.page article .entry-content ul, body.page article .entry-content ol { padding-left: 1.25em; }
body.page article .entry-content li { margin-bottom: var(--space-2); }
body.page article .entry-content li::marker { color: var(--c-accent); }
body.page article .entry-content a { text-decoration: underline; text-decoration-color: var(--c-accent-tint); text-decoration-thickness: 2px; text-underline-offset: 3px; }
body.page article .entry-content a:hover { text-decoration-color: var(--c-accent); }
body.page article .entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin: var(--space-4) 0 var(--space-6); }
body.page article .entry-content th, body.page article .entry-content td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-line); vertical-align: top; }
body.page article .entry-content th { color: var(--c-ink); font-weight: 700; background: var(--c-bg); }
.cenvia-legal-note { background: var(--c-accent-tint); border: 1px solid #c5d6e3; border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); font-size: var(--fs-small) !important; color: var(--c-ink) !important; }