/*
Theme Name: EauClarity
Theme URI: https://eauclarity.com
Description: Custom WooCommerce child theme for EauClarity — a modern, editorial storefront built around the HOCl face mist. Lightweight, schema-rich and tuned for Core Web Vitals.
Author: EauClarity
Version: 1.0.22
Template: storefront
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: eauclarity
Tags: e-commerce, custom-colors, custom-menu, featured-images, full-width-template, accessibility-ready
WC requires at least: 8.0
WC tested up to: 9.9
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	/* Surfaces — warm, water-washed neutrals */
	--ec-cream:        #F5F3EF;
	--ec-cream-deep:   #ECE8E1;
	--ec-sand:         #E1DBD2;
	--ec-white:        #FFFDFA;

	/* Ink */
	--ec-ink:          #14171A;
	--ec-ink-soft:     #3D4348;
	--ec-muted:        #7A8085;

	/* Water accent */
	--ec-water:        #29A6DE;   /* brand blue, sampled from the logo */
	--ec-water-soft:   #E8F4FB;
	--ec-water-deep:   #0E6E9E;   /* 5.1:1 on cream — AA for body text */

	/* Signal */
	--ec-line:         rgba(20, 23, 26, .12);
	--ec-line-strong:  rgba(20, 23, 26, .24);
	--ec-success:      #3F7A5E;
	--ec-sale:         #A6503C;

	/* Type */
	--ec-font-display: "Schibsted Grotesk", "Schibsted Grotesk Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ec-font-body:    "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ec-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

	/* Scale — fluid, clamps at both ends so nothing reflows badly */
	--ec-step--1: clamp(.75rem, .72rem + .15vw, .82rem);
	--ec-step-0:  clamp(.94rem, .90rem + .20vw, 1.04rem);
	--ec-step-1:  clamp(1.10rem, 1.02rem + .38vw, 1.35rem);
	--ec-step-2:  clamp(1.38rem, 1.20rem + .85vw, 1.95rem);
	--ec-step-3:  clamp(1.85rem, 1.45rem + 1.90vw, 3.10rem);
	--ec-step-4:  clamp(2.40rem, 1.60rem + 3.80vw, 5.00rem);
	--ec-step-5:  clamp(3.00rem, 1.50rem + 6.60vw, 7.50rem);

	/* Rhythm */
	--ec-gutter:   clamp(1.15rem, .70rem + 2.2vw, 2.75rem);
	--ec-section:  clamp(3.75rem, 2.20rem + 7.0vw, 8.00rem);
	--ec-max:      1440px;
	--ec-max-text: 62ch;

	/* Form */
	--ec-radius:    4px;
	--ec-radius-lg: 14px;
	--ec-radius-pill: 999px;

	/* Motion */
	--ec-ease: cubic-bezier(.22, .61, .36, 1);
	--ec-dur:  .42s;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

/* --------------------------------------------------------------------------
   Metric-matched fallback fonts.

   The webfonts load with font-display: swap, so the first paint uses a system
   font and the text re-flows when the real face arrives. Measured on this site,
   Inter sets 4.91% wider than Arial and Schibsted Grotesk 2.83% wider — enough
   to move every paragraph below the fold and put real numbers on the CLS score.

   These faces re-scale the local fallback to occupy exactly the space the
   webfont will, so the swap changes the letterforms and nothing else. The
   percentages are measured, not guessed: canvas TextMetrics on the live site,
   fallback Arial (Helvetica and Liberation Sans share its metrics).
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 104.91%;
	ascent-override: 92.37%;
	descent-override: 22.97%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Schibsted Grotesk Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 102.83%;
	ascent-override: 95.01%;
	descent-override: 25.09%;
	line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 92px;
}

body {
	margin: 0;
	background: var(--ec-cream);
	color: var(--ec-ink);
	font-family: var(--ec-font-body);
	font-size: var(--ec-step-0);
	line-height: 1.62;
	letter-spacing: -.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ec-font-display);
	font-weight: 500;
	letter-spacing: -.035em;
	line-height: 1.04;
	margin: 0 0 .5em;
	text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

:focus-visible {
	outline: 2px solid var(--ec-water-deep);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.ec-skip {
	position: absolute; top: -100px; left: 12px; z-index: 999;
	background: var(--ec-ink); color: var(--ec-cream);
	padding: .7rem 1.1rem; border-radius: var(--ec-radius);
	transition: top .2s var(--ec-ease);
}
.ec-skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.ec-wrap {
	width: 100%;
	max-width: var(--ec-max);
	margin-inline: auto;
	padding-inline: var(--ec-gutter);
}

.ec-wrap--narrow { max-width: 940px; }
.ec-wrap--text   { max-width: 720px; }

.ec-section { padding-block: var(--ec-section); }
.ec-section--tight { padding-block: calc(var(--ec-section) * .55); }

.ec-section--cream { background: var(--ec-cream-deep); }
.ec-section--ink   { background: var(--ec-ink); color: var(--ec-cream); }
.ec-section--water { background: var(--ec-water-soft); }
.ec-section--white { background: var(--ec-white); }

.ec-grid { display: grid; gap: var(--ec-gutter); }

.ec-eyebrow {
	font-family: var(--ec-font-body);
	font-size: var(--ec-step--1);
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ec-muted);
	margin: 0 0 1.1rem;
	display: block;
}

.ec-section--ink .ec-eyebrow { color: var(--ec-water); }

.ec-lede {
	font-size: var(--ec-step-1);
	line-height: 1.5;
	color: var(--ec-ink-soft);
	max-width: var(--ec-max-text);
}

.ec-section--ink .ec-lede { color: rgba(245, 243, 239, .78); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.ec-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	font-family: var(--ec-font-body);
	font-size: var(--ec-step--1);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	padding: 1.15em 2.1em;
	border: 1px solid var(--ec-ink);
	border-radius: var(--ec-radius-pill);
	background: var(--ec-ink);
	color: var(--ec-cream);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ec-dur) var(--ec-ease),
	            color var(--ec-dur) var(--ec-ease),
	            border-color var(--ec-dur) var(--ec-ease),
	            transform .18s var(--ec-ease);
	-webkit-appearance: none;
	appearance: none;
}

.ec-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--ec-water-deep);
	border-color: var(--ec-water-deep);
	color: var(--ec-white);
	transform: translateY(-1px);
}

.ec-btn:active { transform: translateY(0); }

.ec-btn--ghost {
	background: transparent;
	color: var(--ec-ink);
	border-color: var(--ec-line-strong);
}
.ec-btn--ghost:hover {
	background: var(--ec-ink);
	border-color: var(--ec-ink);
	color: var(--ec-cream);
}

.ec-btn--light {
	background: var(--ec-cream);
	color: var(--ec-ink);
	border-color: var(--ec-cream);
}
.ec-btn--light:hover {
	background: var(--ec-water);
	border-color: var(--ec-water);
	color: var(--ec-ink);
}

.ec-btn--wide { width: 100%; }

.ec-link-underline {
	font-size: var(--ec-step--1);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: .35em;
	border-bottom: 1px solid var(--ec-line-strong);
	transition: border-color var(--ec-dur) var(--ec-ease);
}
.ec-link-underline:hover { border-color: currentColor; }

/* ==========================================================================
   5. ANNOUNCEMENT MARQUEE
   ========================================================================== */

.ec-announce {
	background: var(--ec-ink);
	color: var(--ec-cream);
	overflow: hidden;
	padding-block: .62rem;
	font-size: var(--ec-step--1);
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ec-announce__track {
	display: inline-flex;
	gap: 3.5rem;
	padding-left: 3.5rem;
	animation: ec-marquee 34s linear infinite;
	will-change: transform;
}

.ec-announce:hover .ec-announce__track { animation-play-state: paused; }

.ec-announce__item { display: inline-flex; align-items: center; gap: .8rem; }
.ec-announce__item::before { content: "◦"; color: var(--ec-water); }

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

/* ==========================================================================
   6. HEADER + NAVIGATION
   ========================================================================== */

.ec-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(245, 243, 239, .82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ec-ease), background .3s var(--ec-ease);
}

.ec-header.is-stuck { border-bottom-color: var(--ec-line); }

.ec-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	min-height: 68px;
}

.ec-brand {
	grid-column: 2;
	justify-self: center;
	font-family: var(--ec-font-display);
	font-size: 1.32rem;
	font-weight: 500;
	letter-spacing: -.04em;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}

.ec-brand img { max-height: 34px; width: auto; }

.ec-nav {
	grid-column: 1;
	display: flex;
	align-items: center;
	gap: 1.85rem;
}

.ec-nav ul {
	display: flex;
	align-items: center;
	gap: 1.85rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ec-nav a {
	font-size: var(--ec-step--1);
	font-weight: 500;
	letter-spacing: .11em;
	text-transform: uppercase;
	text-decoration: none;
	position: relative;
	padding-block: .4rem;
}

.ec-nav a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--ec-dur) var(--ec-ease);
}
.ec-nav a:hover::after,
.ec-nav .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }

.ec-header__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 1.35rem;
}

.ec-icon-btn {
	background: none;
	border: 0;
	padding: .3rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: var(--ec-step--1);
	font-weight: 500;
	letter-spacing: .11em;
	text-transform: uppercase;
	text-decoration: none;
}

.ec-cart-count {
	display: inline-grid;
	place-items: center;
	min-width: 19px; height: 19px;
	padding-inline: 5px;
	border-radius: var(--ec-radius-pill);
	background: var(--ec-ink);
	color: var(--ec-cream);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.ec-burger { display: none; }

/* Mobile drawer */
.ec-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--ec-cream);
	padding: 5.5rem var(--ec-gutter) 2rem;
	transform: translateX(-100%);
	transition: transform .46s var(--ec-ease);
	overflow-y: auto;
	visibility: hidden;
}
.ec-drawer.is-open { transform: translateX(0); visibility: visible; }

.ec-drawer ul { list-style: none; margin: 0; padding: 0; }
.ec-drawer li { border-bottom: 1px solid var(--ec-line); }
.ec-drawer a {
	display: block;
	padding: 1.05rem 0;
	font-family: var(--ec-font-display);
	font-size: var(--ec-step-2);
	letter-spacing: -.03em;
	text-decoration: none;
	text-transform: lowercase;
}

.ec-drawer__close {
	position: absolute;
	top: 1.5rem; right: var(--ec-gutter);
	background: none; border: 0; cursor: pointer;
	font-size: 1.6rem; line-height: 1;
}

@media (max-width: 900px) {
	.ec-nav { display: none; }
	.ec-burger { display: inline-flex; }
	.ec-header__inner { grid-template-columns: 1fr auto 1fr; }
}

/* ==========================================================================
   7. HERO
   ========================================================================== */

.ec-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1.02fr 1fr;
	align-items: stretch;
	min-height: min(88vh, 860px);
	background: var(--ec-cream);
	overflow: hidden;
}

.ec-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 1rem + 7vw, 7rem) clamp(1.15rem, .5rem + 4vw, 5rem);
	max-width: 780px;
	margin-left: auto;
}

.ec-hero__title {
	font-size: var(--ec-step-5);
	text-transform: lowercase;
	letter-spacing: -.045em;
	line-height: .93;
	margin-bottom: .34em;
}

.ec-hero__title em {
	font-style: normal;
	color: var(--ec-water-deep);
}

.ec-hero__sub {
	font-size: var(--ec-step-1);
	line-height: 1.48;
	color: var(--ec-ink-soft);
	max-width: 46ch;
	margin-bottom: 2.2rem;
}

.ec-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.4rem;
}

.ec-hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem .5rem;
	margin-top: 2.6rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--ec-line);
}

.ec-chip {
	font-size: var(--ec-step--1);
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: .5em 1em;
	border: 1px solid var(--ec-line-strong);
	border-radius: var(--ec-radius-pill);
	color: var(--ec-ink-soft);
	white-space: nowrap;
}

.ec-hero__media {
	position: relative;
	background: var(--ec-water-soft);
	min-height: 52vh;
}

.ec-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.ec-hero { grid-template-columns: 1fr; min-height: 0; }
	.ec-hero__copy { order: 2; margin-left: 0; padding-block: 3rem 3.5rem; }
	.ec-hero__media { order: 1; aspect-ratio: 4 / 3; min-height: 0; }
}

/* ==========================================================================
   8. TICKER STRIP (values band)
   ========================================================================== */

.ec-strip {
	background: var(--ec-water-soft);
	border-block: 1px solid var(--ec-line);
	padding-block: 1.4rem;
}

.ec-strip__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem 1.5rem;
	text-align: center;
}

.ec-strip__item {
	font-size: var(--ec-step--1);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ec-water-deep);
	font-weight: 500;
}

/* ==========================================================================
   9. FEATURE / BENEFIT GRID
   ========================================================================== */

.ec-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1.5rem, .8rem + 2.4vw, 3.25rem);
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.ec-feature__num {
	font-family: var(--ec-font-mono);
	font-size: var(--ec-step--1);
	color: var(--ec-water-deep);
	display: block;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--ec-line);
}

.ec-feature h3 {
	font-size: var(--ec-step-1);
	letter-spacing: -.025em;
	margin-bottom: .55em;
}

.ec-feature p {
	font-size: var(--ec-step-0);
	color: var(--ec-ink-soft);
	margin: 0;
}

/* ==========================================================================
   10. SPLIT / EDITORIAL BLOCK
   ========================================================================== */

.ec-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2rem, 1rem + 4vw, 5.5rem);
}

.ec-split--reverse .ec-split__media { order: 2; }

.ec-split__media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--ec-radius-lg);
	overflow: hidden;
	background: var(--ec-sand);
}

.ec-split__media img { width: 100%; height: 100%; object-fit: cover; }

.ec-split__title {
	font-size: var(--ec-step-3);
	text-transform: lowercase;
	margin-bottom: .5em;
}

@media (max-width: 820px) {
	.ec-split { grid-template-columns: 1fr; }
	.ec-split--reverse .ec-split__media { order: 0; }
	.ec-split__media { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   11. CONCERNS CLOUD
   ========================================================================== */

.ec-concerns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem;
	max-width: 900px;
	margin: clamp(2rem, 1rem + 3vw, 3.5rem) auto 0;
}

.ec-concerns .ec-chip {
	background: var(--ec-white);
	border-color: var(--ec-line);
	font-size: var(--ec-step-0);
	letter-spacing: .02em;
	text-transform: none;
	padding: .68em 1.35em;
	color: var(--ec-ink);
	transition: background var(--ec-dur) var(--ec-ease), border-color var(--ec-dur) var(--ec-ease);
}
.ec-concerns .ec-chip:hover {
	background: var(--ec-water-soft);
	border-color: var(--ec-water);
}

/* ==========================================================================
   12. STEPS (how to use)
   ========================================================================== */

.ec-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1.5rem, .8rem + 2.4vw, 3rem);
	counter-reset: ec-step;
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.ec-step { counter-increment: ec-step; }

.ec-step::before {
	content: counter(ec-step, decimal-leading-zero);
	display: block;
	font-family: var(--ec-font-display);
	font-size: var(--ec-step-2);
	color: var(--ec-water);
	letter-spacing: -.03em;
	margin-bottom: .55rem;
}

.ec-step h3 {
	font-size: var(--ec-step-1);
	margin-bottom: .45em;
}

.ec-step p { font-size: var(--ec-step-0); color: var(--ec-ink-soft); margin: 0; }

.ec-section--ink .ec-step p { color: rgba(245, 243, 239, .72); }

/* ==========================================================================
   13. INGREDIENTS (two-ingredient panel)
   ========================================================================== */

.ec-ingredients {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(1.25rem, .8rem + 2vw, 2.5rem);
	margin-top: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
}

.ec-ingredient {
	background: var(--ec-white);
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-radius-lg);
	padding: clamp(1.6rem, 1rem + 2vw, 2.75rem);
}

.ec-ingredient__formula {
	font-family: var(--ec-font-mono);
	font-size: var(--ec-step-2);
	color: var(--ec-water-deep);
	letter-spacing: -.02em;
	display: block;
	margin-bottom: 1rem;
}

.ec-ingredient h3 { font-size: var(--ec-step-1); margin-bottom: .5em; }
.ec-ingredient p { color: var(--ec-ink-soft); margin: 0; font-size: var(--ec-step-0); }

/* ==========================================================================
   14. REVIEWS
   ========================================================================== */

.ec-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: clamp(1.25rem, .8rem + 2vw, 2.25rem);
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.ec-review {
	background: var(--ec-white);
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-radius-lg);
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ec-stars { color: var(--ec-water-deep); letter-spacing: .18em; font-size: .95rem; }

.ec-review blockquote {
	margin: 0;
	font-size: var(--ec-step-1);
	line-height: 1.45;
	letter-spacing: -.02em;
	font-family: var(--ec-font-display);
}

.ec-review cite {
	font-style: normal;
	font-size: var(--ec-step--1);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ec-muted);
	margin-top: auto;
}

/* ==========================================================================
   15. FAQ ACCORDION
   ========================================================================== */

.ec-faq { max-width: 860px; margin-inline: auto; }

.ec-faq details {
	border-bottom: 1px solid var(--ec-line);
}

.ec-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--ec-font-display);
	font-size: var(--ec-step-1);
	letter-spacing: -.025em;
}

.ec-faq summary::-webkit-details-marker { display: none; }

.ec-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 13px; height: 13px;
	background: currentColor;
	transition: transform var(--ec-dur) var(--ec-ease);
	clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
}

.ec-faq details[open] summary::after { transform: rotate(135deg); }

.ec-faq__answer {
	padding-bottom: 1.6rem;
	color: var(--ec-ink-soft);
	max-width: var(--ec-max-text);
}

/* ==========================================================================
   16. NEWSLETTER + FOOTER
   ========================================================================== */

.ec-newsletter {
	background: var(--ec-ink);
	color: var(--ec-cream);
	text-align: center;
}

.ec-newsletter h2 {
	font-size: var(--ec-step-3);
	text-transform: lowercase;
	margin-bottom: .4em;
}

.ec-newsletter p { color: rgba(245, 243, 239, .72); max-width: 52ch; margin-inline: auto; }

.ec-form-inline {
	display: flex;
	gap: .6rem;
	max-width: 480px;
	margin: 2.2rem auto 0;
	flex-wrap: wrap;
}

.ec-form-inline input[type="email"] {
	flex: 1 1 220px;
	background: transparent;
	border: 1px solid rgba(245, 243, 239, .34);
	border-radius: var(--ec-radius-pill);
	padding: 1.1em 1.5em;
	color: var(--ec-cream);
	font-size: var(--ec-step-0);
}

.ec-form-inline input::placeholder { color: rgba(245, 243, 239, .5); }
.ec-form-inline input:focus { border-color: var(--ec-water); outline: none; }

/* --- Signup state ------------------------------------------------------- */

/* Honeypot. Hidden from people without display:none, which some bots detect. */
.ec-signup__pot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ec-signup .ec-btn[disabled] { opacity: .6; cursor: progress; }

.ec-signup__msg {
	flex: 1 0 100%;
	margin: 0;
	min-height: 1.4em;
	font-size: var(--ec-step-0);
	color: rgba(245, 243, 239, .72);
	transition: color .2s ease;
}

.ec-signup__msg:empty { min-height: 0; }
.ec-signup__msg.is-ok { color: var(--ec-water); }
.ec-signup__msg.is-error { color: #FFB4A8; }

/* MailPoet renders its own markup and ships inline styles from its form
   editor, so these rules need !important to land the form inside the dark
   newsletter band. Scoped to .ec-newsletter so MailPoet forms placed
   elsewhere keep their own styling. */

.ec-newsletter .ec-newsletter__form { max-width: 480px; margin: 2.2rem auto 0; }

.ec-newsletter .mailpoet_form,
.ec-newsletter .mailpoet_form_form,
.ec-newsletter form.mailpoet_form {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	width: 100% !important;
}

.ec-newsletter .mailpoet_form_columns,
.ec-newsletter .mailpoet_form_column,
.ec-newsletter .wp-block-columns,
.ec-newsletter .wp-block-column {
	gap: .6rem;
	margin: 0 !important;
	padding: 0 !important;
}

.ec-newsletter .mailpoet_paragraph {
	margin: 0 0 .6rem !important;
	padding: 0 !important;
	line-height: 1.4;
}

.ec-newsletter .mailpoet_paragraph:last-of-type { margin-bottom: 0 !important; }

.ec-newsletter .mailpoet_form input.mailpoet_text,
.ec-newsletter .mailpoet_form input.mailpoet_email,
.ec-newsletter .mailpoet_form input[type="email"],
.ec-newsletter .mailpoet_form input[type="text"] {
	width: 100% !important;
	background: transparent !important;
	border: 1px solid rgba(245, 243, 239, .34) !important;
	border-radius: var(--ec-radius-pill) !important;
	padding: 1.1em 1.5em !important;
	color: var(--ec-cream) !important;
	font-family: var(--ec-font-body) !important;
	font-size: var(--ec-step-0) !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
}

.ec-newsletter .mailpoet_form input::placeholder { color: rgba(245, 243, 239, .5) !important; }

.ec-newsletter .mailpoet_form input.mailpoet_text:focus,
.ec-newsletter .mailpoet_form input[type="email"]:focus {
	border-color: var(--ec-water) !important;
	outline: none !important;
}

.ec-newsletter .mailpoet_form input.mailpoet_submit,
.ec-newsletter .mailpoet_form input[type="submit"],
.ec-newsletter .mailpoet_form button[type="submit"] {
	width: 100% !important;
	background: var(--ec-cream) !important;
	color: var(--ec-ink) !important;
	border: 0 !important;
	border-radius: var(--ec-radius-pill) !important;
	padding: 1.1em 1.8em !important;
	font-family: var(--ec-font-body) !important;
	font-size: var(--ec-step-0) !important;
	font-weight: 600 !important;
	letter-spacing: .01em;
	cursor: pointer;
	transition: opacity .2s ease, transform .2s ease;
}

.ec-newsletter .mailpoet_form input.mailpoet_submit:hover,
.ec-newsletter .mailpoet_form input[type="submit"]:hover {
	opacity: .88;
	transform: translateY(-1px);
}

/* Side by side once there is room, matching .ec-form-inline. */
@media (min-width: 520px) {
	.ec-newsletter .mailpoet_form_form {
		display: flex;
		gap: .6rem;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.ec-newsletter .mailpoet_paragraph { flex: 1 1 220px; margin-bottom: 0 !important; }
	.ec-newsletter .mailpoet_paragraph.last { flex: 0 0 auto; }
	.ec-newsletter .mailpoet_form input.mailpoet_submit,
	.ec-newsletter .mailpoet_form input[type="submit"] { width: auto !important; }
	.ec-newsletter .mailpoet_message,
	.ec-newsletter .mailpoet_validate_success,
	.ec-newsletter .mailpoet_validate_error { flex: 1 0 100%; }
}

.ec-newsletter .mailpoet_form .mailpoet_text_label,
.ec-newsletter .mailpoet_form label { color: rgba(245, 243, 239, .72) !important; }

.ec-newsletter .mailpoet_validate_success { color: var(--ec-water) !important; }
.ec-newsletter .mailpoet_validate_error,
.ec-newsletter .parsley-errors-list { color: #FFB4A8 !important; }

.ec-newsletter .mailpoet_message,
.ec-newsletter .mailpoet_validate_success,
.ec-newsletter .mailpoet_validate_error {
	margin-top: .9rem !important;
	font-size: var(--ec-step--1);
}

/* MailPoet's own captcha/recaptcha wrapper centres badly in a flex row. */
.ec-newsletter .mailpoet_recaptcha { flex: 1 0 100%; display: flex; justify-content: center; }

.ec-footer {
	background: var(--ec-cream-deep);
	padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem;
	font-size: var(--ec-step-0);
}

.ec-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	border-bottom: 1px solid var(--ec-line);
}

.ec-footer__brand {
	font-family: var(--ec-font-display);
	font-size: var(--ec-step-2);
	letter-spacing: -.04em;
	margin-bottom: .6rem;
}

.ec-footer h3 {
	font-family: var(--ec-font-body);
	font-size: var(--ec-step--1);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ec-muted);
	margin-bottom: 1.15rem;
}

.ec-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .72rem; }
.ec-footer a { text-decoration: none; color: var(--ec-ink-soft); transition: color .2s var(--ec-ease); }
.ec-footer a:hover { color: var(--ec-ink); text-decoration: underline; }

.ec-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.8rem;
	font-size: var(--ec-step--1);
	color: var(--ec-muted);
}

.ec-social { display: flex; gap: 1.1rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }

@media (max-width: 820px) {
	.ec-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.ec-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17. WOOCOMMERCE — SHOP GRID
   ========================================================================== */

.woocommerce ul.products {
	display: grid;
	/* auto-FILL, not auto-fit: with one product in the catalogue, auto-fit would
	   stretch the single card across the full 1400px. */
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
	display: flex;
	flex-direction: column;
	max-width: 460px;
}

.woocommerce ul.products li.product a img {
	margin: 0 0 1.15rem;
	border-radius: var(--ec-radius-lg);
	background: var(--ec-sand);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	transition: transform .7s var(--ec-ease);
}

.woocommerce ul.products li.product:hover a img { transform: scale(1.028); }

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	overflow: hidden;
	border-radius: var(--ec-radius-lg);
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ec-font-display);
	font-size: var(--ec-step-1) !important;
	letter-spacing: -.03em;
	padding: 0 !important;
	margin: 0 0 .3rem !important;
}

.woocommerce ul.products li.product .price {
	color: var(--ec-ink-soft);
	font-size: var(--ec-step-0);
	font-weight: 500;
	margin-bottom: 1.1rem;
	display: block;
}

.woocommerce ul.products li.product .price del { color: var(--ec-muted); margin-right: .5em; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--ec-sale); }

.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; }

.woocommerce span.onsale {
	background: var(--ec-water-deep);
	color: var(--ec-white);
	border-radius: var(--ec-radius-pill);
	font-size: var(--ec-step--1);
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .45em 1em;
	min-height: 0;
	line-height: 1;
	min-width: 0;
	width: auto;
	position: absolute;
	top: 1rem; left: 1rem;
	right: auto;
	z-index: 2;
	margin: 0;
}

/* ==========================================================================
   18. WOOCOMMERCE — SINGLE PRODUCT
   ========================================================================== */

.ec-pdp { padding-block: clamp(2rem, 1rem + 3vw, 4rem); }

.woocommerce div.product {
	position: relative;   /* anchors span.onsale, which is absolutely positioned */
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}

.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce div.product > .summary { grid-column: 2; width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .ec-pdp-extra { grid-column: 1 / -1; }

.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: var(--ec-radius-lg); background: var(--ec-sand); }

.woocommerce div.product .product_title {
	font-size: var(--ec-step-3);
	letter-spacing: -.04em;
	margin-bottom: .3em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ec-ink);
	font-size: var(--ec-step-2);
	font-family: var(--ec-font-display);
	letter-spacing: -.03em;
	margin-bottom: 1.2rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--ec-ink-soft);
	font-size: var(--ec-step-1);
	line-height: 1.5;
	padding-bottom: 1.6rem;
	margin-bottom: 1.6rem;
	border-bottom: 1px solid var(--ec-line);
}

.woocommerce div.product form.cart { margin-bottom: 1.8rem; }

.woocommerce div.product form.cart div.quantity { margin-right: .7rem; }

.woocommerce .quantity input.qty {
	width: 74px;
	height: 100%;
	min-height: 52px;
	text-align: center;
	border: 1px solid var(--ec-line-strong);
	border-radius: var(--ec-radius-pill);
	background: transparent;
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product form.cart .button { min-height: 52px; }

.woocommerce div.product .product_meta {
	font-size: var(--ec-step--1);
	color: var(--ec-muted);
	letter-spacing: .04em;
	padding-top: 1.4rem;
	border-top: 1px solid var(--ec-line);
}

/* PDP trust row */
.ec-pdp-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
	gap: .9rem 1rem;
	padding: 1.4rem 0;
	margin-bottom: 1.4rem;
	border-block: 1px solid var(--ec-line);
	font-size: var(--ec-step--1);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ec-water-deep);
	text-align: center;
	text-wrap: balance;
}

/* Accordion inside PDP */
.ec-pdp-accordion details { border-bottom: 1px solid var(--ec-line); }
.ec-pdp-accordion summary {
	display: flex; justify-content: space-between; align-items: center;
	padding: 1.15rem 0; cursor: pointer; list-style: none;
	font-size: var(--ec-step--1); font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
}
.ec-pdp-accordion summary::-webkit-details-marker { display: none; }
.ec-pdp-accordion summary::after { content: "+"; font-size: 1.2rem; font-weight: 400; }
.ec-pdp-accordion details[open] summary::after { content: "–"; }
.ec-pdp-accordion .ec-pdp-accordion__body { padding-bottom: 1.4rem; color: var(--ec-ink-soft); font-size: var(--ec-step-0); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	gap: 2rem;
	list-style: none;
	border-bottom: 1px solid var(--ec-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0 0 1rem;
	font-size: var(--ec-step--1);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-muted);
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ec-ink); border-bottom-color: var(--ec-ink); }

@media (max-width: 860px) {
	.woocommerce div.product { grid-template-columns: 1fr; }
	.woocommerce div.product > .summary { position: static; grid-column: 1; }
	.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; }
}

/* ==========================================================================
   19. WOOCOMMERCE — CART, CHECKOUT, NOTICES
   ========================================================================== */

.woocommerce table.shop_table {
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--ec-white);
}

.woocommerce table.shop_table th {
	font-family: var(--ec-font-body);
	font-size: var(--ec-step--1);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-muted);
	padding: 1.1rem 1.25rem;
}

.woocommerce table.shop_table td { padding: 1.35rem 1.25rem; border-top: 1px solid var(--ec-line); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: var(--ec-step-2);
	text-transform: lowercase;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	background: var(--ec-white);
	border: 1px solid var(--ec-line-strong);
	border-radius: var(--ec-radius);
	padding: .95em 1.1em;
	height: auto;
	font-size: var(--ec-step-0);
}

.woocommerce form .form-row label {
	font-size: var(--ec-step--1);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ec-muted);
	margin-bottom: .45rem;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--ec-water-soft);
	border-top: 0;
	border-left: 3px solid var(--ec-water-deep);
	border-radius: var(--ec-radius);
	padding: 1.1rem 1.4rem 1.1rem 1.6rem;
	color: var(--ec-ink);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-error { background: #FBEEEA; border-left-color: var(--ec-sale); }

.woocommerce .woocommerce-breadcrumb {
	font-size: var(--ec-step--1);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ec-muted);
	margin-bottom: 2rem;
}

/* ==========================================================================
   20. PAGE HEADERS + PROSE
   ========================================================================== */

.ec-pagehead {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
	border-bottom: 1px solid var(--ec-line);
}

.ec-pagehead h1 {
	font-size: var(--ec-step-4);
	text-transform: lowercase;
	margin-bottom: .25em;
}

.ec-prose { max-width: var(--ec-max-text); }
.ec-prose h2 { font-size: var(--ec-step-2); margin-top: 2.2em; text-transform: lowercase; }
.ec-prose h3 { font-size: var(--ec-step-1); margin-top: 1.8em; }
.ec-prose ul, .ec-prose ol { padding-left: 1.3em; margin-bottom: 1.3em; }
.ec-prose li { margin-bottom: .5em; }
.ec-prose > *:first-child { margin-top: 0; }

/* ==========================================================================
   21. REVEAL ON SCROLL
   ========================================================================== */

.ec-reveal {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity .75s var(--ec-ease), transform .75s var(--ec-ease);
}
.ec-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.ec-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   22. STOREFRONT OVERRIDES (parent theme neutralisation)
   ========================================================================== */

.storefront-full-width-content .site-content,
.site-content { padding: 0; }
.site-content .col-full { max-width: none; padding: 0; margin: 0; width: 100%; }
.storefront-breadcrumb { padding: 0; margin: 0; background: transparent; }
.site-header, .storefront-handheld-footer-bar, .site-footer.site-footer { display: none !important; }

/* ==========================================================================
   23. REMAINING COMPONENTS
   ========================================================================== */

/* Lists that are semantically lists but visually not */
.ec-hero__proof,
.ec-concerns,
.ec-strip__grid { list-style: none; padding: 0; margin: 0; }

/* Keeps its own margins from section 18 — reset only the list affordances. */
.ec-pdp-trust { list-style: none; padding-inline: 0; }

.ec-hero__proof { margin-top: 2.6rem; padding-top: 1.8rem; }

/* Full-bleed water band inside the science section */
.ec-waterband {
	margin: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0 0;
	border-radius: var(--ec-radius-lg);
	overflow: hidden;
	line-height: 0;
}
.ec-waterband img { width: 100%; height: clamp(120px, 16vw, 230px); object-fit: cover; }

/* Lifestyle triptych */
.ec-triptych {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1rem, .6rem + 1.6vw, 1.75rem);
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.ec-triptych figure {
	margin: 0;
	border-radius: var(--ec-radius-lg);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--ec-sand);
}
.ec-triptych img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ec-ease); }
.ec-triptych figure:hover img { transform: scale(1.04); }

/* Shop-loop excerpt */
.ec-loop-excerpt {
	color: var(--ec-muted);
	font-size: var(--ec-step-0);
	margin: 0 0 .75rem;
	max-width: 40ch;
}

/* Cart upsell */
.ec-cart-nudge {
	background: var(--ec-water-soft);
	border-left: 3px solid var(--ec-water);
	border-radius: var(--ec-radius);
	padding: 1.1rem 1.4rem;
	margin-bottom: 1.6rem;
	font-size: var(--ec-step-0);
}
.ec-cart-nudge a { color: var(--ec-water-deep); font-weight: 600; }

/* WooCommerce page shell */
.ec-woo { padding-block: clamp(2rem, 1.2rem + 3vw, 4.5rem); }
.ec-woo .ec-pdp-extra { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.ec-woo .ec-pdp-extra .ec-section:first-child { margin-inline: calc(var(--ec-gutter) * -1); }

.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
	font-size: var(--ec-step-4);
	text-transform: lowercase;
	margin-bottom: .3em;
}

.term-description { color: var(--ec-ink-soft); max-width: var(--ec-max-text); margin-bottom: 2.5rem; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul,
.pagination .nav-links {
	display: flex;
	gap: .4rem;
	justify-content: center;
	border: 0;
	list-style: none;
	padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px; height: 42px;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-radius-pill);
	text-decoration: none;
	font-size: var(--ec-step-0);
	background: transparent;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.pagination .page-numbers.current {
	background: var(--ec-ink);
	color: var(--ec-cream);
	border-color: var(--ec-ink);
}

/* Product reviews */
.woocommerce #reviews h2,
.woocommerce #reviews h3 { font-size: var(--ec-step-2); text-transform: lowercase; }
.woocommerce #reviews ol.commentlist { padding: 0; }
.woocommerce #reviews ol.commentlist li .comment-text {
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-radius-lg);
	background: var(--ec-white);
	padding: 1.6rem;
}
.woocommerce p.stars a { color: var(--ec-water-deep); }
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--ec-water-deep); }

/* Quantity + add-to-cart sit on one line */
.woocommerce div.product form.cart::after { content: ""; display: block; clear: both; }
.woocommerce div.product form.cart div.quantity { float: left; }
.woocommerce div.product form.cart .single_add_to_cart_button { float: left; }

@media (max-width: 400px) {
	.woocommerce div.product form.cart div.quantity,
	.woocommerce div.product form.cart .single_add_to_cart_button { float: none; width: 100%; margin-bottom: .6rem; }
}

/* WordPress core alignment + caption classes used inside .ec-prose */
.ec-prose .alignleft  { float: left;  margin: .4rem 1.6rem 1.2rem 0; }
.ec-prose .alignright { float: right; margin: .4rem 0 1.2rem 1.6rem; }
.ec-prose .aligncenter { display: block; margin-inline: auto; }
.ec-prose figure { margin: 2rem 0; }
.ec-prose figcaption { font-size: var(--ec-step--1); color: var(--ec-muted); margin-top: .6rem; }
.ec-prose blockquote {
	margin: 2rem 0;
	padding-left: 1.4rem;
	border-left: 2px solid var(--ec-water);
	font-family: var(--ec-font-display);
	font-size: var(--ec-step-1);
	letter-spacing: -.02em;
}

/* Storefront leaves a couple of wrappers behind; make them harmless */
#content, .site, .site-content { background: transparent; }

/* Product gallery thumbnails */
.ec-pdp-thumbs,
.woocommerce div.product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .6rem;
	margin: .75rem 0 0;
	padding: 0;
	list-style: none;
}
.ec-pdp-thumbs img,
.woocommerce div.product .flex-control-thumbs li img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	background: var(--ec-sand);
	opacity: .68;
	cursor: pointer;
	transition: opacity .25s var(--ec-ease);
	float: none;
}
.ec-pdp-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs li img:hover,
.woocommerce div.product .flex-control-thumbs li img.flex-active { opacity: 1; }
.woocommerce div.product .flex-control-thumbs li { width: auto; margin: 0; float: none; }

/* ==========================================================================
   24. PACK SELECTOR + PURCHASE PLANS
   ========================================================================== */

/* Woo's own <select> stays in the DOM and stays authoritative — it is just
   taken out of the visual flow once the cards are built. */
.ec-variations-native {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.ec-packs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	gap: .7rem;
	margin-bottom: 1.5rem;
}

.ec-pack {
	position: relative;
	display: grid;
	gap: .18rem;
	justify-items: start;
	text-align: left;
	padding: 1.05rem 1.15rem 1.1rem;
	background: var(--ec-white);
	border: 1px solid var(--ec-line-strong);
	border-radius: var(--ec-radius-lg);
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: border-color .22s var(--ec-ease), box-shadow .22s var(--ec-ease), background .22s var(--ec-ease);
	-webkit-appearance: none;
	appearance: none;
}

/* The server-rendered skeleton: occupies the exact space the real cards will,
   without flashing empty boxes on the way. visibility rather than opacity so it
   is also skipped by assistive tech and hit testing. */
.ec-pack--skeleton { visibility: hidden; }
.ec-packs--pending { pointer-events: none; }

.ec-pack:hover:not(:disabled) { border-color: var(--ec-ink); }

.ec-pack.is-selected {
	border-color: var(--ec-ink);
	box-shadow: inset 0 0 0 1px var(--ec-ink);
	background: var(--ec-cream);
}

.ec-pack:disabled,
.ec-pack.is-unavailable {
	opacity: .42;
	cursor: not-allowed;
}

.ec-pack__name {
	font-family: var(--ec-font-display);
	font-size: var(--ec-step-1);
	letter-spacing: -.028em;
	line-height: 1.15;
}

.ec-pack__note {
	font-size: var(--ec-step--1);
	color: var(--ec-muted);
	letter-spacing: .02em;
}

.ec-pack__price {
	margin-top: .5rem;
	font-size: var(--ec-step-0);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ec-pack__each {
	font-size: var(--ec-step--1);
	color: var(--ec-muted);
	font-variant-numeric: tabular-nums;
}

.ec-pack__badge {
	position: absolute;
	top: -.62rem; right: .9rem;
	background: var(--ec-water-deep);
	color: var(--ec-white);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .34em .74em;
	border-radius: var(--ec-radius-pill);
	line-height: 1;
}

/* Woo prints a "Clear" link under the variation table; redundant with cards. */
.woocommerce div.product form.cart .reset_variations { display: none !important; }

/* The chosen variation's price block sits between the cards and the button. */
.woocommerce div.product .woocommerce-variation-price span.price {
	font-size: var(--ec-step-2);
	margin-bottom: 1rem;
	display: block;
}
.woocommerce div.product .woocommerce-variation-availability p { font-size: var(--ec-step--1); color: var(--ec-muted); }

/* --- Purchase plans (All Products for WooCommerce Subscriptions) ---------
   The plugin's own markup is styled defensively: spacing, rules and accent
   colour only, so nothing breaks if its class names shift between releases. */

.ec-plan-heading {
	font-size: var(--ec-step--1);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-muted);
	margin: 0 0 .75rem;
}

.wcsatt-options-wrapper,
.wcsatt-options-prompt {
	margin-bottom: 1.5rem;
	accent-color: var(--ec-ink);
}

.wcsatt-options-wrapper ul,
.wcsatt-options-prompt ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.wcsatt-options-wrapper ul li,
.wcsatt-options-prompt ul li {
	margin: 0;
	border: 1px solid var(--ec-line-strong);
	border-radius: var(--ec-radius-lg);
	background: var(--ec-white);
	transition: border-color .22s var(--ec-ease);
}

.wcsatt-options-wrapper ul li:hover,
.wcsatt-options-prompt ul li:hover { border-color: var(--ec-ink); }

.wcsatt-options-wrapper ul li label,
.wcsatt-options-prompt ul li label {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .95rem 1.15rem;
	margin: 0;
	cursor: pointer;
	font-size: var(--ec-step-0);
	line-height: 1.4;
}

.wcsatt-options-wrapper ul li input[type="radio"],
.wcsatt-options-prompt ul li input[type="radio"] {
	flex: 0 0 auto;
	width: 17px; height: 17px;
	margin: 0;
}

.wcsatt-options-wrapper .wcsatt-sub-discount,
.wcsatt-options-wrapper .subscription-details {
	color: var(--ec-water-deep);
	font-size: var(--ec-step--1);
	letter-spacing: .02em;
}

.wcsatt-options-wrapper .wcsatt-options-product-prompt-description,
.wcsatt-options-wrapper small {
	display: block;
	color: var(--ec-muted);
	font-size: var(--ec-step--1);
}

@media (max-width: 380px) {
	.ec-packs { grid-template-columns: 1fr; }
}

/* Plan rows: on narrow screens the fine print gets its own line rather than
   squeezing the plan name into two. */
@media (max-width: 460px) {
	.wcsatt-options-wrapper ul li label,
	.wcsatt-options-prompt ul li label { flex-wrap: wrap; }
	.wcsatt-options-wrapper ul li label small,
	.wcsatt-options-prompt ul li label small { flex: 1 0 100%; padding-left: 1.6rem; margin-top: .15rem; }
}

/* Catalogue ordering (only rendered when the catalogue outgrows a few items) */
.woocommerce .woocommerce-ordering { margin-bottom: 2rem; }
.woocommerce .woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 1px solid var(--ec-line-strong);
	border-radius: var(--ec-radius-pill);
	padding: .7em 2.4em .7em 1.2em;
	font-size: var(--ec-step--1);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* ==========================================================================
   25. CART / CHECKOUT PAGES (WooCommerce blocks)
   ========================================================================== */

/* These render through page.php, whose reading measure squeezed the Cart block
   into one column. Give them the room the block layout expects. */
.woocommerce-cart .ec-wrap--narrow,
.woocommerce-checkout .ec-wrap--narrow,
.woocommerce-account .ec-wrap--narrow { max-width: 1180px; }

.woocommerce-cart .ec-prose,
.woocommerce-checkout .ec-prose,
.woocommerce-account .ec-prose { max-width: none; }

/* A transactional page does not need a full editorial page header. */
.woocommerce-cart .ec-pagehead,
.woocommerce-checkout .ec-pagehead {
	padding-block: clamp(2rem, 1.4rem + 1.8vw, 3.25rem) clamp(1.1rem, .8rem + .8vw, 1.6rem);
}
.woocommerce-cart .ec-pagehead h1,
.woocommerce-checkout .ec-pagehead h1 { font-size: var(--ec-step-3); }

.woocommerce-cart .ec-section--tight,
.woocommerce-checkout .ec-section--tight { padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.75rem) var(--ec-section); }

/* Cart cross-sell */
.ec-cart-promo {
	background: var(--ec-water-soft);
	border-left: 3px solid var(--ec-water);
	border-radius: var(--ec-radius);
	padding: 1rem 1.35rem;
	margin-bottom: 1.75rem;
	font-size: var(--ec-step-0);
	line-height: 1.5;
}
.ec-cart-promo p { margin: 0; }
.ec-cart-promo strong { font-weight: 600; }
.ec-cart-promo a {
	color: var(--ec-water-deep);
	font-weight: 600;
	white-space: nowrap;
}
.ec-cart-promo .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* The blocks inherit theme type; nudge the few things that read as unstyled. */
.wc-block-components-title,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item__label {
	font-family: var(--ec-font-display);
	letter-spacing: -.02em;
}
.wc-block-components-button:not(.is-link) {
	border-radius: var(--ec-radius-pill) !important;
	font-family: var(--ec-font-body);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* --- Purchase plans: the classes the extension actually ships ------------- */

/*
 * The extension renders BOTH a "Deliver:" dropdown and a radio list, and marks
 * the list --hidden because the dropdown is the control it intends to use. The
 * theme's reset was overriding that, so both showed at once.
 */
.wcsatt-options-product--hidden { display: none !important; }

.wcsatt-options-product-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem .8rem;
	margin: 0 0 1.6rem;
}

.wcsatt-options-product-dropdown-label {
	margin: 0;
	font-size: var(--ec-step--1);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-muted);
}

select.wcsatt-options-product-dropdown {
	flex: 1 1 240px;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--ec-white);
	border: 1px solid var(--ec-line-strong);
	border-radius: var(--ec-radius-pill);
	padding: .85em 2.6em .85em 1.3em;
	font-size: var(--ec-step-0);
	line-height: 1.3;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 22px) 55%, calc(100% - 17px) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
select.wcsatt-options-product-dropdown:hover { border-color: var(--ec-ink); }

/* "— or subscribe to save up to 10%" sits inside the big price line and was
   inheriting its display size. */
.woocommerce div.product .summary .price .wcsatt-sub-options,
.woocommerce div.product .summary .price .wcsatt-sub-discount {
	font-family: var(--ec-font-body);
	font-size: var(--ec-step-0);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.4;
}
.woocommerce div.product .summary .price .wcsatt-sub-options { color: var(--ec-ink-soft); }
.woocommerce div.product .summary .price .wcsatt-sub-discount { color: var(--ec-water-deep); font-weight: 600; }

/* One-time / Subscribe toggle */
.wcsatt-sub-action-options,
.wcsatt-subscribe-to-action { display: grid; gap: .5rem; margin-bottom: 1.2rem; }

/* ==========================================================================
   26. PRODUCT GALLERY LIGHTBOX TRIGGER
   ========================================================================== */

/*
 * WooCommerce drops a bare magnifier glyph in the gallery's top-left corner.
 * Storefront styles it; this theme dequeues Storefront, so it needs styling here.
 * Rebuilt as a discreet button in the bottom-right of the image.
 */
.woocommerce div.product .woocommerce-product-gallery { position: relative; }

.woocommerce div.product .woocommerce-product-gallery__trigger {
	/* Anchored to the top of the gallery, which is the top of the main image.
	   Bottom-anchoring would place it below the thumbnail row. */
	position: absolute;
	top: 1rem;
	right: 1rem;
	bottom: auto;
	left: auto;
	z-index: 3;
	width: 42px;
	height: 42px;
	margin: 0;
	border-radius: 50%;
	background-color: var(--ec-white);
	border: 1px solid var(--ec-line);
	box-shadow: 0 1px 4px rgba(20, 23, 26, .10);
	font-size: 0;
	line-height: 0;
	color: transparent;
	text-indent: -9999px;
	overflow: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171A' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.6 4.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
	transition: background-color .25s var(--ec-ease), border-color .25s var(--ec-ease), transform .18s var(--ec-ease);
}

.woocommerce div.product .woocommerce-product-gallery__trigger:hover {
	background-color: var(--ec-cream);
	border-color: var(--ec-line-strong);
	transform: translateY(-1px);
}

.woocommerce div.product .woocommerce-product-gallery__trigger::before,
.woocommerce div.product .woocommerce-product-gallery__trigger::after { display: none; }

/* ==========================================================================
   27. NEWS — ARCHIVE CARDS + ARTICLE
   ========================================================================== */

.ec-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}

.ec-news-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-radius-lg);
	overflow: hidden;
	transition: transform .35s var(--ec-ease), box-shadow .35s var(--ec-ease), border-color .35s var(--ec-ease);
}

.ec-news-card:hover,
.ec-news-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--ec-line-strong);
	box-shadow: 0 18px 40px -24px rgba(20, 23, 26, .45);
}

.ec-news-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ec-water-soft);
}

.ec-news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--ec-ease);
}

.ec-news-card:hover .ec-news-card__media img { transform: scale(1.04); }

/* Posts without a featured image still need to hold the grid's rhythm. */
.ec-news-card__placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 20% 15%, rgba(41, 166, 222, .22), transparent 60%),
		linear-gradient(160deg, var(--ec-water-soft), var(--ec-cream));
}

.ec-news-card__body {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
	flex: 1 1 auto;
}

.ec-news-card__cat {
	align-self: flex-start;
	font-size: var(--ec-step--1);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ec-water-deep);
	background: var(--ec-water-soft);
	border-radius: var(--ec-radius-pill);
	padding: .42em .95em;
	line-height: 1;
}

.ec-news-card__title {
	font-size: var(--ec-step-1);
	line-height: 1.22;
	letter-spacing: -.02em;
	margin: 0;
}

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

/* One anchor, whole card clickable — the link keeps its own accessible name. */
.ec-news-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ec-news-card__title a:focus-visible { outline: none; }
.ec-news-card:focus-within { outline: 2px solid var(--ec-water-deep); outline-offset: 3px; }

.ec-news-card__excerpt {
	color: var(--ec-ink-soft);
	font-size: var(--ec-step-0);
	margin: 0;
}

.ec-news-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: .9rem;
	border-top: 1px solid var(--ec-line);
	font-size: var(--ec-step--1);
	color: var(--ec-muted);
}

.ec-news-card__more {
	color: var(--ec-water-deep);
	font-weight: 500;
	white-space: nowrap;
}

.ec-news-card:hover .ec-news-card__more { text-decoration: underline; }

/* --- Pagination --------------------------------------------------------- */

.ec-pagination,
.navigation.pagination {
	margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.navigation.pagination .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	justify-content: center;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	padding: .6em .9em;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-radius-pill);
	color: var(--ec-ink-soft);
	text-decoration: none;
	font-size: var(--ec-step-0);
	transition: border-color .25s var(--ec-ease), background .25s var(--ec-ease);
}

.navigation.pagination a.page-numbers:hover { border-color: var(--ec-line-strong); background: #fff; }

.navigation.pagination .page-numbers.current {
	background: var(--ec-ink);
	border-color: var(--ec-ink);
	color: var(--ec-cream);
}

.navigation.pagination .page-numbers.dots { border-color: transparent; }

/* --- Single article ----------------------------------------------------- */

.ec-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .55rem;
	color: var(--ec-muted);
	font-size: var(--ec-step-0);
	margin: .9rem 0 0;
}

.ec-article__hero {
	margin: 0 0 clamp(2rem, 1.5rem + 1.5vw, 3rem);
	border-radius: var(--ec-radius-lg);
	overflow: hidden;
}

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

.ec-article__hero figcaption {
	font-size: var(--ec-step--1);
	color: var(--ec-muted);
	padding: .8rem .2rem 0;
}

/* The article body is the one place readers meet long-form copy, so it gets a
   slightly looser measure than the site's default 62ch — centred inside the
   940px wrap so it lines up under the hero image rather than hugging its left
   edge. */
.ec-article__head,
.ec-article .ec-prose,
.ec-article .ec-article__back,
.ec-article .ec-article__pages {
	max-width: 68ch;
	margin-inline: auto;
}

/* Headlines are the author's words. The site's lowercase treatment is a design
   flourish for fixed labels; applied to an article it would render "HOCl" as
   "hocl" and flatten every proper noun, so it stops at the article boundary. */
.ec-article .ec-pagehead h1,
.ec-article .ec-prose h2 { text-transform: none; }

/* The site's page headings are display-scale; a headline set in a 68ch column
   needs to come down a step or it wraps to five lines. */
.ec-article .ec-pagehead h1 {
	font-size: var(--ec-step-3);
	line-height: 1.1;
	letter-spacing: -.03em;
}

.ec-article .ec-prose p { margin-bottom: 1.35em; }
.ec-article .ec-prose > p:first-of-type { font-size: var(--ec-step-1); color: var(--ec-ink-soft); }

.ec-article .ec-prose img,
.ec-article .ec-prose figure img {
	border-radius: var(--ec-radius-lg);
	height: auto;
}

.ec-article .ec-prose blockquote {
	margin: 2em 0;
	padding-left: 1.4em;
	border-left: 3px solid var(--ec-water);
	font-size: var(--ec-step-1);
	color: var(--ec-ink-soft);
}

.ec-article__pages { margin-top: 2rem; display: flex; gap: .5rem; }

.ec-article__back {
	margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-top: 1.6rem;
	border-top: 1px solid var(--ec-line);
	font-size: var(--ec-step-0);
}

.ec-article__back a { color: var(--ec-water-deep); text-decoration: none; }
.ec-article__back a:hover { text-decoration: underline; }

.ec-article__related { background: var(--ec-cream-deep); }

.ec-article__related-title {
	font-size: var(--ec-step-2);
	text-transform: lowercase;
	margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}