/* Etheria Lab — palette, type scale and shared components.
   Loaded site-wide so the landing and the WooCommerce pages share one look.
   Values are ported from /design (colors, fonts, spacing). */

:root {
	--eth-bg: #f4f1ea;
	--eth-bg-alt: #fbf9f4;
	--eth-ink: #2c3329;
	--eth-green: #1f3d28;
	--eth-green-soft: #4a5346;
	--eth-muted: #5c6356;
	--eth-gold: #b08d4f;
	--eth-gold-light: #d9b873;
	--eth-line: #e4ddcf;
	--eth-line-soft: #ece6d9;
	--eth-field-bg: #fcfbf8;
	--eth-field-border: #d9d2c4;

	--eth-serif-display: 'Cormorant Garamond', Georgia, serif;
	--eth-serif: 'EB Garamond', Georgia, serif;
	--eth-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
	--eth-mono: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	--eth-radius: 4px;
	--eth-focus: 0 0 0 3px rgba(176, 141, 79, .3);
	--eth-max: 1120px;

	/* Page measure. --eth-max is the one container width on the whole site: the
	   shared header (.eth-nav__inner), the shared footer (.eth-contact__inner,
	   .eth-footer) and the cart frame all use it with the same 32px inner
	   padding, so everything lines up on the same edges at every width.
	   --eth-pad drops to 20px on phones, matching chrome.css. */
	--eth-pad: 32px;
}

@media (max-width: 760px) {
	:root { --eth-pad: 20px; }
}

/* Keyboard focus stays visible everywhere (accessibility). */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--eth-gold);
	outline-offset: 2px;
	border-radius: 3px;
}

/* --- Language switch (header) --- */
.eth-lang { display: inline-flex; align-items: center; gap: 5px; }
.eth-lang__btn {
	background: none; border: none; cursor: pointer; padding: 4px 6px;
	font-family: var(--eth-sans); font-size: 12px; font-weight: 700;
	letter-spacing: .06em; color: #a9a294; text-decoration: none;
	line-height: 1; border-radius: 3px;
}
.eth-lang__btn.is-active,
.eth-lang__btn[aria-current="true"] { color: var(--eth-green); }
.eth-lang__btn[disabled] { cursor: not-allowed; opacity: .8; }
.eth-lang__sep { color: #c9bfa8; }

/* --- Shared button shapes (reused by landing + restyled Woo buttons) --- */
/* !important: Storefront underlines every link inside .entry-content and
   #colophon, which would strike through our buttons. */
.eth-btn {
	display: inline-block; cursor: pointer; text-decoration: none !important;
	font-family: var(--eth-sans); font-weight: 600; font-size: 14px;
	letter-spacing: .03em; padding: 15px 30px; border-radius: 3px; border: 1px solid transparent;
	text-align: center; line-height: 1.2; transition: background-color .15s, color .15s, border-color .15s;
	/* room for longer translated labels without breaking the layout */
	min-height: 48px; white-space: normal;
}
.eth-btn--primary { background: var(--eth-green); color: var(--eth-bg); }
.eth-btn--primary:hover { background: #16301f; color: var(--eth-bg); }
.eth-btn--gold { background: var(--eth-gold); color: #1f2a1d; }
.eth-btn--gold:hover { background: #9c7c43; }
.eth-btn--ghost { background: none; color: var(--eth-green); border-color: #c9bfa8; }
.eth-btn--ghost:hover { border-color: var(--eth-gold); }
.eth-btn[disabled], .eth-btn.is-disabled { background: #cfc8b8; color: #fff; cursor: not-allowed; border-color: transparent; }

/* small helper */
.eth-kicker {
	font-family: var(--eth-mono); font-size: 11px; letter-spacing: .3em;
	color: var(--eth-gold); text-transform: uppercase;
}
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}