/* ==========================================================================
   Omega Oils — base layer (design system v2, DESIGN.md "Artisanal
   Cold-Pressed Botanicals")

   Tokens, base element styles and shared components. Loaded on every page
   before the part files (header, footer, home, shop, product …), which should
   only use these tokens and components.

   Contents
     1. Tokens (v2) + legacy aliases (v1 names still used by older part CSS)
     2. Base elements
     3. Layout: .o-container, .o-section, .o-band
     4. Type scale: .o-display-hero, .o-headline-lg|md|sm, .o-title-card,
        .o-body-lg|md|sm, .o-label-caps, .o-label-sm|lg, .o-meta, .o-muted
     5. Icons: .o-icon (+ --fill, --sm, --lg)
     6. Buttons: .o-btn (+ --primary, --secondary, --ghost, --accent, --dark,
        --light, --product, --sm, --lg, --block, --mono), .o-icon-btn
     7. Chips, badges, tags: .o-chip, .o-badge, .o-tag, .o-sticker,
        .o-seal (gold Ω)
     8. Cards: .o-card (+ --flat, --lift, --well, --cream)
     9. Form fields: .o-input, .o-textarea, .o-select, .o-field, .o-check
    10. Omega nutrition pill: .o-omega-pill
    11. Newsletter band: .o-newsletter
    12. Product card: .o-product-card (markup: omega_home_product_article())
    13. Marquee: .o-marquee
    14. Motion preferences

   Product colours: cards and pages set
     style="<?php echo esc_attr( omega_product_style( $product ) ); ?>"
   which defines --o-product, --o-product-hover, --o-product-ink and
   --o-product-tint (see omega_product_color() in inc/omega-setup.php).
   Anything inside can then use var(--o-product) etc.; without the style
   attribute the variables fall back to the primary forest green.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Brand / product-line colours */
	--o-forest: #165B43;           /* primary: sunflower botanical forest */
	--o-forest-deep: #13513B;      /* primary hover */
	--o-indigo: #1B2B65;           /* sesame */
	--o-indigo-royal: #22387B;
	--o-espresso: #2F2118;         /* secondary: linseed roasted espresso (text, footer) */
	--o-espresso-umber: #382419;
	--o-ochre: #DDA72A;            /* tertiary: walnut golden ochre */
	--o-ochre-deep: #C89218;
	--o-gold: #D9A441;             /* Omega seal accent only */
	--o-gold-bright: #E5B242;

	/* Substrates */
	--o-white: #FFFFFF;
	--o-surface-cream: #FBF6EC;    /* page background */
	--o-surface-cream-alt: #F3ECE0;/* recessed wells */
	--o-surface: #F8FAF6;
	--o-border-warm: #E5DCCE;
	--o-text: #2F2118;
	--o-text-muted: #6E6358;

	/* Material roles from DESIGN.md (used sparingly) */
	--o-primary: #165B43;
	--o-primary-dark: #00422E;
	--o-primary-fixed: #AEF1D1;
	--o-primary-fixed-dim: #92D4B5;
	--o-on-primary-container: #8FD1B2;
	--o-on-surface: #191C1A;
	--o-on-surface-variant: #404944;
	--o-outline: #707973;
	--o-outline-variant: #BFC9C2;
	--o-error: #BA1A1A;
	--o-error-container: #FFDAD6;
	--o-on-error-container: #93000A;
	--o-success: #165B43;

	/* Product colour (overridden per element by omega_product_style()) */
	--o-product: var(--o-forest);
	--o-product-hover: var(--o-forest-deep);
	--o-product-ink: #FFFFFF;
	--o-product-tint: #E8EFEC;

	/* Typography: Rubik (headings, labels), Manrope (body, UI) */
	--o-font-heading: 'Rubik', system-ui, sans-serif;
	--o-font-body: 'Manrope', system-ui, sans-serif;
	--o-font-label: 'Rubik', system-ui, sans-serif;

	/* Radius (DESIGN.md "rounded") */
	--o-radius-sm: 0.25rem;   /* 4px */
	--o-radius: 0.5rem;       /* 8px */
	--o-radius-md: 0.75rem;   /* 12px: recessed wells, inputs */
	--o-radius-lg: 1rem;      /* 16px: cards */
	--o-radius-card: 20px;    /* product / section cards */
	--o-radius-xl: 1.5rem;    /* 24px: hero panels */
	--o-radius-full: 9999px;

	/* Spacing */
	--o-space-xs: 0.25rem;
	--o-space-sm: 0.5rem;
	--o-space-md: 1rem;
	--o-space-lg: 1.5rem;
	--o-space-xl: 2.5rem;
	--o-space-2xl: 4rem;
	--o-space-3xl: 6rem;
	--o-gutter: 1.5rem;
	--o-gutter-sm: 1rem;
	--o-margin: 2rem;
	--o-margin-mobile: 1rem;
	--o-container: 1280px;

	/* Elevation: warm espresso-tinted shadows only */
	--o-hairline: 1px solid var(--o-border-warm);
	--o-shadow-card: 0 4px 18px rgba(47, 33, 24, 0.05);
	--o-shadow-soft: 0 2px 8px rgba(47, 33, 24, 0.04);
	--o-shadow-lift: 0 12px 30px rgba(47, 33, 24, 0.10);
	--o-shadow-float: 0 14px 36px -4px rgba(47, 33, 24, 0.14);
	--o-shadow-ring: 0 0 0 3px rgba(22, 91, 67, 0.22);

	--o-ease: 180ms ease;

	/* ---- Legacy aliases (v1 names). Older part CSS still uses these; they
	   now resolve to v2 values. New CSS should use the v2 names above. ---- */
	--o-cream: var(--o-surface-cream);
	--o-charcoal: var(--o-espresso);
	--o-green: var(--o-primary-fixed-dim);   /* light green: v1 used it behind dark text */
	--o-green-light: var(--o-primary-fixed);
	--o-yellow: var(--o-gold-bright);        /* behind dark text */
	--o-coral: #B4461A;                      /* sale / alert fill (white text) */
	--o-coral-dark: var(--o-error);
	--o-coral-soft: var(--o-error-container);
	--o-warm-grey: var(--o-text-muted);
	--o-olive-gold: var(--o-gold);
	--o-olive-gold-dark: var(--o-ochre-deep);
	--o-surface-low: var(--o-surface-cream-alt);
	--o-font-display: var(--o-font-heading);
	--o-font-mono: var(--o-font-label);
	--o-border: 1px solid var(--o-border-warm);
	--o-shadow-xs: var(--o-shadow-soft);
	--o-shadow-sm: var(--o-shadow-card);
	--o-shadow-md: var(--o-shadow-lift);
	--o-shadow-focus: var(--o-shadow-ring);
}

/* --------------------------------------------------------------------------
   2. Base elements
   -------------------------------------------------------------------------- */

body.omega {
	margin: 0;
	background: var(--o-surface-cream);
	color: var(--o-text);
	font-family: var(--o-font-body);
	font-size: 16px;
	line-height: 24px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-numeric: proportional-nums;
}

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

html:has(body.omega) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Content pasted from other sites (e.g. the cookie banner text) can contain <pre> */
:where(body.omega) pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

:where(body.omega) input,
:where(body.omega) select,
:where(body.omega) textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

body.omega ::selection {
	background: var(--o-primary-fixed);
	color: var(--o-espresso);
}

:where(body.omega) img {
	max-width: 100%;
	height: auto;
	display: block;
}

:where(body.omega) a {
	color: inherit;
	text-decoration: none;
}

:where(body.omega) button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

body.omega :focus-visible {
	outline: 2px solid var(--o-forest);
	outline-offset: 2px;
}

/* WooCommerce focuses notices (tabindex="-1") for screen readers. */
body.omega .woocommerce-message:focus,
body.omega .woocommerce-error:focus,
body.omega .woocommerce-info:focus,
body.omega .woocommerce-notices-wrapper:focus {
	outline: none;
}

:where(body.omega) h1,
:where(body.omega) h2,
:where(body.omega) h3,
:where(body.omega) h4,
:where(body.omega) h5,
:where(body.omega) h6 {
	margin: 0;
	font-family: var(--o-font-heading);
	font-weight: 700;
	color: var(--o-espresso);
}

:where(body.omega) p {
	margin: 0;
}

.o-main {
	display: block;
}

.o-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: var(--o-space-sm) var(--o-space-md);
	background: var(--o-forest);
	color: var(--o-white);
	border-radius: var(--o-radius-full);
	font-family: var(--o-font-body);
	font-weight: 700;
	box-shadow: var(--o-shadow-float);
}

.o-skip-link:focus {
	left: var(--o-space-md);
	top: var(--o-space-md);
}

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.o-container {
	width: 100%;
	max-width: var(--o-container);
	margin-inline: auto;
	padding-inline: var(--o-margin-mobile);
}

@media (min-width: 768px) {
	.o-container {
		padding-inline: var(--o-gutter);
	}
}

/* Vertical rhythm between sections: 64px phones, 96px desktop. */
.o-section {
	padding-block: var(--o-space-2xl);
}

.o-section--tight {
	padding-block: var(--o-space-xl);
}

@media (min-width: 1024px) {
	.o-section {
		padding-block: var(--o-space-3xl);
	}

	.o-section--tight {
		padding-block: var(--o-space-2xl);
	}
}

/* Full-width colour bands (ornaments are placed behind these automatically). */
.o-band {
	background: var(--o-surface-cream);
}

.o-band--white { background: var(--o-white); }
.o-band--alt { background: var(--o-surface-cream-alt); }
.o-band--forest { background: var(--o-forest); color: var(--o-white); }
.o-band--espresso { background: var(--o-espresso); color: var(--o-surface-cream); }
.o-band--product { background: var(--o-product); color: var(--o-product-ink); }

:is(.o-band--forest, .o-band--espresso, .o-band--product) :where(h1, h2, h3, h4) {
	color: inherit;
}

/* Section heading block: eyebrow + title + intro */
.o-eyebrow {
	display: inline-block;
	font-family: var(--o-font-label);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--o-forest);
}

.o-eyebrow--gold {
	color: var(--o-gold);
}

/* --------------------------------------------------------------------------
   4. Type scale (DESIGN.md typography; phones get the -mobile sizes)
   -------------------------------------------------------------------------- */

.o-display-hero {
	font-family: var(--o-font-heading);
	font-size: 36px;
	line-height: 44px;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.o-headline-lg {
	font-family: var(--o-font-heading);
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.o-display-hero {
		font-size: 56px;
		line-height: 64px;
		letter-spacing: 0.02em;
	}

	.o-headline-lg {
		font-size: 40px;
		line-height: 48px;
		letter-spacing: 0.02em;
	}
}

.o-headline-md {
	font-family: var(--o-font-heading);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

@media (min-width: 768px) {
	.o-headline-md {
		font-size: 28px;
		line-height: 36px;
	}
}

.o-headline-sm {
	font-family: var(--o-font-heading);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

.o-title-card {
	font-family: var(--o-font-heading);
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.o-uppercase {
	text-transform: uppercase;
}

.o-body-lg {
	font-family: var(--o-font-body);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
}

.o-body-md {
	font-family: var(--o-font-body);
	font-size: 16px;
	line-height: 24px;
}

.o-body-sm {
	font-family: var(--o-font-body);
	font-size: 14px;
	line-height: 20px;
}

/* label-caps (Rubik 12/16 bold, 0.06em, uppercase). .o-label-sm is the v1 name. */
.o-label-caps,
.o-label-sm {
	font-family: var(--o-font-label);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.o-label-lg {
	font-family: var(--o-font-label);
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* meta-detail: Manrope 12/16 medium */
.o-meta {
	font-family: var(--o-font-body);
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
}

.o-button-text {
	font-family: var(--o-font-body);
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.o-muted {
	color: var(--o-text-muted);
}

.o-prose > * + * {
	margin-top: var(--o-space-md);
}

/* --------------------------------------------------------------------------
   5. Icons (Material Symbols Outlined)
   Usage: <span class="o-icon" aria-hidden="true">search</span>
   -------------------------------------------------------------------------- */

.o-icon {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'liga';
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	flex-shrink: 0;
}

.o-icon--fill {
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.o-icon--sm { font-size: 16px; }
.o-icon--lg { font-size: 26px; }
.o-icon--gold { color: var(--o-gold); }

/* --------------------------------------------------------------------------
   6. Buttons — pill, Manrope 15/600
   -------------------------------------------------------------------------- */

.o-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--o-space-xs);
	min-height: 44px;
	padding: 12px 28px;
	border: 1.5px solid transparent;
	border-radius: var(--o-radius-full);
	background: var(--o-forest);
	color: var(--o-white);
	font-family: var(--o-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--o-ease), color var(--o-ease), border-color var(--o-ease), box-shadow var(--o-ease);
}

.o-btn:hover {
	background: var(--o-forest-deep);
}

.o-btn .o-icon {
	font-size: 18px;
}

.o-btn[disabled],
.o-btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.o-btn--primary {
	background: var(--o-forest);
	color: var(--o-white);
	box-shadow: 0 4px 16px rgba(22, 91, 67, 0.25);
}

.o-btn--primary:hover {
	background: var(--o-forest-deep);
	box-shadow: 0 6px 20px rgba(22, 91, 67, 0.35);
}

/* Secondary = ghost outline in espresso (DESIGN.md "Secondary / Ghost") */
.o-btn--secondary,
.o-btn--ghost {
	background: transparent;
	border-color: var(--o-espresso);
	color: var(--o-espresso);
}

.o-btn--secondary:hover,
.o-btn--ghost:hover {
	background: var(--o-surface-cream);
	color: var(--o-espresso);
}

/* Soft cream button (hero "secondary" CTA in the designs) */
.o-btn--light {
	background: var(--o-surface-cream);
	color: var(--o-espresso);
}

.o-btn--light:hover {
	background: var(--o-surface-cream-alt);
}

/* Accent: golden ochre with espresso text */
.o-btn--accent,
.o-btn--coral {
	background: var(--o-ochre);
	color: var(--o-espresso);
}

.o-btn--accent:hover,
.o-btn--coral:hover {
	background: var(--o-ochre-deep);
	color: var(--o-espresso);
}

.o-btn--dark {
	background: var(--o-espresso);
	color: var(--o-surface-cream);
}

.o-btn--dark:hover {
	background: var(--o-espresso-umber);
	color: var(--o-white);
}

/* Product-coloured button: set --o-product* on an ancestor */
.o-btn--product {
	background: var(--o-product);
	color: var(--o-product-ink);
}

.o-btn--product:hover {
	background: var(--o-product-hover);
	color: var(--o-product-ink);
}

/* Label-style text (Rubik caps) */
.o-btn--mono {
	font-family: var(--o-font-label);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.o-btn--sm {
	min-height: 36px;
	padding: 6px 16px;
	font-size: 14px;
}

.o-btn--lg {
	min-height: 52px;
	padding: 16px 40px;
}

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

/* Round icon button (menu, close, cart) */
.o-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--o-radius-full);
	background: transparent;
	color: var(--o-on-surface-variant);
	transition: background-color var(--o-ease), color var(--o-ease);
}

.o-icon-btn:hover {
	background: var(--o-surface-cream-alt);
	color: var(--o-on-surface);
}

.o-icon-btn .o-icon {
	font-size: 22px;
}

.o-icon-btn--filled {
	background: var(--o-white);
	box-shadow: var(--o-shadow-soft);
}

/* --------------------------------------------------------------------------
   7. Chips, badges, tags, stickers, Ω seal
   -------------------------------------------------------------------------- */

/* Filter chip / pill. Selected: .is-selected or [aria-pressed="true"] */
.o-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--o-space-xs);
	padding: 6px 14px;
	border: var(--o-hairline);
	border-radius: var(--o-radius-full);
	background: var(--o-surface-cream);
	color: var(--o-text-muted);
	font-family: var(--o-font-body);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--o-ease), color var(--o-ease), border-color var(--o-ease);
}

a.o-chip:hover,
button.o-chip:hover {
	border-color: var(--o-text-muted);
	color: var(--o-espresso);
}

.o-chip.is-selected,
.o-chip[aria-pressed="true"],
.o-chip[aria-current] {
	background: var(--o-product);
	border-color: var(--o-product);
	color: var(--o-product-ink);
}

/* Gold micro-dot on selected chips */
.o-chip.is-selected::before,
.o-chip[aria-pressed="true"]::before,
.o-chip[aria-current]::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--o-gold-bright);
}

/* Small badges (v1 chip modifiers keep working) */
.o-chip--thin,
.o-badge {
	padding: 3px 10px;
	font-family: var(--o-font-label);
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.o-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border-radius: var(--o-radius-full);
	background: var(--o-product);
	color: var(--o-product-ink);
}

.o-chip--yellow,
.o-badge--gold { background: var(--o-ochre); border-color: var(--o-ochre); color: var(--o-espresso); }
.o-chip--green,
.o-badge--forest { background: var(--o-forest); border-color: var(--o-forest); color: var(--o-white); }
.o-chip--cream,
.o-badge--cream { background: var(--o-surface-cream); border-color: var(--o-border-warm); color: var(--o-espresso); }
.o-badge--white { background: rgba(255, 255, 255, 0.9); color: var(--o-espresso); }
.o-chip--coral,
.o-badge--sale { background: var(--o-coral); border-color: var(--o-coral); color: var(--o-white); }
.o-badge--espresso { background: var(--o-espresso); color: var(--o-surface-cream); }
.o-chip--flat { box-shadow: none; }

/* v1 rotated sticker: v2 has no tilted elements, so the tilt is dropped. */
.o-sticker {
	transform: none;
}

/* Volume / price tag */
.o-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--o-radius-full);
	background: rgba(255, 255, 255, 0.9);
	color: var(--o-espresso);
	font-family: var(--o-font-body);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
}

/* Gold Omega seal: <span class="o-seal" aria-hidden="true">Ω</span> */
.o-seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(217, 164, 65, 0.2);
	color: var(--o-gold);
	font-family: var(--o-font-heading);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

.o-seal--solid {
	background: var(--o-gold);
	color: var(--o-espresso);
}

.o-seal--lg {
	width: 40px;
	height: 40px;
	font-size: 20px;
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

.o-card {
	background: var(--o-white);
	border-radius: var(--o-radius-card);
	box-shadow: var(--o-shadow-card);
}

.o-card--bordered {
	border: var(--o-hairline);
}

.o-card--flat {
	box-shadow: none;
}

.o-card--cream {
	background: var(--o-surface-cream);
}

/* Recessed well inside a white container */
.o-card--well {
	background: var(--o-surface-cream-alt);
	border-radius: var(--o-radius-md);
	box-shadow: none;
}

.o-card--lift {
	transition: transform var(--o-ease), box-shadow var(--o-ease);
}

.o-card--lift:hover {
	transform: translateY(-2px);
	box-shadow: var(--o-shadow-lift);
}

/* --------------------------------------------------------------------------
   9. Form fields
   -------------------------------------------------------------------------- */

.o-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.o-field__label {
	font-family: var(--o-font-body);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--o-espresso);
}

.o-field__hint {
	font-size: 12px;
	line-height: 16px;
	color: var(--o-text-muted);
}

.o-field__error {
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--o-error);
}

.o-input,
.o-textarea,
.o-select {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--o-border-warm);
	border-radius: var(--o-radius-md);
	background: var(--o-white);
	color: var(--o-espresso);
	font-family: var(--o-font-body);
	font-size: 16px; /* 16px: no iOS zoom on focus */
	line-height: 22px;
	font-weight: 500;
	transition: border-color var(--o-ease), box-shadow var(--o-ease);
}

.o-textarea {
	min-height: 120px;
	resize: vertical;
}

.o-select {
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%236E6358' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.o-input::placeholder,
.o-textarea::placeholder {
	color: var(--o-text-muted);
	font-weight: 400;
	opacity: 1;
}

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

.o-input[aria-invalid="true"],
.o-textarea[aria-invalid="true"],
.o-select[aria-invalid="true"] {
	border-color: var(--o-error);
}

/* Pill variant (search, newsletter) */
.o-input--pill {
	border-radius: var(--o-radius-full);
	padding-inline: 20px;
}

/* Checkbox / radio row */
.o-check {
	display: flex;
	align-items: flex-start;
	gap: var(--o-space-sm);
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
}

.o-check input {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	flex-shrink: 0;
	accent-color: var(--o-forest);
}

/* --------------------------------------------------------------------------
   10. Omega nutrition pill
   <p class="o-omega-pill"><span class="o-omega-pill__seal" aria-hidden="true">Ω</span>
      <span class="o-omega-pill__value">Омега-3: 53 g</span></p>
   Only with values from product-content.json / _omega_pdp.
   -------------------------------------------------------------------------- */

.o-omega-pill {
	display: inline-flex;
	align-items: stretch;
	border-radius: var(--o-radius-full);
	overflow: hidden;
	background: var(--o-surface-cream);
	border: var(--o-hairline);
	font-family: var(--o-font-body);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	color: var(--o-espresso);
}

.o-omega-pill__seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	padding: 4px 8px;
	background: var(--o-gold);
	color: var(--o-espresso);
	font-family: var(--o-font-heading);
	font-size: 13px;
}

.o-omega-pill__value {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px 4px 8px;
}

.o-omega-pill--white {
	background: var(--o-white);
}

/* --------------------------------------------------------------------------
   11. Newsletter band
   <section class="o-newsletter [o-newsletter--espresso]">
     <div class="o-newsletter__copy"> eyebrow, title, text </div>
     <form class="o-newsletter__form"> <input class="o-newsletter__input"> <button class="o-newsletter__submit"> </form>
   </section>
   -------------------------------------------------------------------------- */

h3) {
	color: inherit;
}

.o-newsletter__text {
	margin-top: var(--o-space-xs);
	color: var(--o-primary-fixed);
	opacity: 0.9;
	font-size: 14px;
	line-height: 20px;
}

.o-newsletter__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: var(--o-radius-full);
	background: var(--o-white);
	box-shadow: inset 0 1px 3px rgba(47, 33, 24, 0.08);
}

.o-newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--o-radius-full);
	background: transparent;
	color: var(--o-espresso);
	font-family: var(--o-font-body);
	font-size: 16px;
	line-height: 20px;
}

.o-newsletter__input::placeholder {
	color: var(--o-text-muted);
	opacity: 1;
}

.o-newsletter__input:focus {
	outline: none;
}

.o-newsletter__form:focus-within {
	box-shadow: 0 0 0 3px rgba(229, 178, 66, 0.55);
}

.o-newsletter__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 40px;
	padding: 8px 18px;
	border: 0;
	border-radius: var(--o-radius-full);
	background: var(--o-gold);
	color: var(--o-espresso);
	font-family: var(--o-font-body);
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color var(--o-ease);
}

.o-newsletter__submit:hover {
	background: var(--o-gold-bright);
}

.o-newsletter__status {
	display: flex;
	align-items: center;
	gap: var(--o-space-xs);
	margin-top: var(--o-space-sm);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.o-newsletter__note {
	margin-top: var(--o-space-xs);
	font-size: 12px;
	line-height: 16px;
	opacity: 0.75;
}

.o-newsletter__note a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   12. Product card (shared by the home carousels, the shop grid and any
   other product list). Markup: omega_home_product_article() in
   inc/omega-home.php. The article carries the product colour variables.
   -------------------------------------------------------------------------- */

.o-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--o-space-md);
	border-radius: var(--o-radius-card);
	background: var(--o-white);
	box-shadow: var(--o-shadow-card);
	transition: box-shadow var(--o-ease), transform var(--o-ease);
}

.o-product-card:hover {
	box-shadow: var(--o-shadow-lift);
}

/* Product well: cream chamber with the bottle */
.o-product-card__well {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	padding: 0;
	border-radius: var(--o-radius-lg);
	background: var(--o-surface-cream);
	overflow: hidden;
}

.o-product-card__chip {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	max-width: calc(100% - 64px);
	padding: 4px 10px;
	border-radius: var(--o-radius-full);
	background: var(--o-product);
	color: var(--o-product-ink);
	font-family: var(--o-font-label);
	font-size: 11px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.o-product-card__seal {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
}

/* Status (sale / sold out / admin badge) replaces the seal */
.o-product-card__status {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
}

/* With a seed chip too, the status goes under it (left), so the two never
   overlap on narrow cards (phones, 2-column shop). */
.o-product-card__chip ~ .o-product-card__status {
	top: 44px;
	right: auto;
	left: 12px;
}

.o-product-card__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.o-product-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* the WooCommerce photos are square studio shots, not cut-outs */
	transition: transform 300ms ease;
}

.o-product-card:hover .o-product-card__img img {
	transform: scale(1.05);
}

.o-product-card.is-out .o-product-card__img img {
	opacity: 0.55;
	filter: grayscale(0.6);
}

/* Frosted strip at the bottom of the well: volume + tagline */
.o-product-card__strip {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--o-space-sm);
	padding: 6px 10px;
	border-radius: var(--o-radius);
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	font-family: var(--o-font-body);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	color: var(--o-espresso);
}

.o-product-card__strip-accent {
	color: var(--o-product);
	text-align: right;
}

/* Walnut ochre etc. are too light as text on white: use the ink colour. */
.o-product-card[data-light] .o-product-card__strip-accent {
	color: var(--o-espresso);
}

.o-product-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	margin-top: var(--o-space-md);
}

.o-product-card__rating {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-bottom: 4px;
	color: var(--o-gold);
}

.o-product-card__rating .o-icon {
	font-size: 16px;
}

.o-product-card__rating-count {
	margin-left: 4px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: var(--o-text-muted);
}

.o-product-card__title {
	font-family: var(--o-font-heading);
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--o-espresso);
}

.o-product-card__title a {
	transition: color var(--o-ease);
}

.o-product-card__title a:hover {
	color: var(--o-forest);
}

/* Whole card clickable through the title link */
.o-product-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
}

.o-product-card__sub {
	margin-top: 2px;
	font-family: var(--o-font-label);
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--o-text-muted);
}

.o-product-card__text {
	margin-top: var(--o-space-xs);
	font-size: 14px;
	line-height: 20px;
	color: var(--o-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.o-product-card__foot {
	position: relative;
	z-index: 1; /* above the stretched title link */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--o-space-sm);
	margin-top: var(--o-space-md);
	padding-top: var(--o-space-md);
	border-top: var(--o-hairline);
}

.o-product-card__price {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.o-product-card__price-label {
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: var(--o-text-muted);
}

.o-product-card__price-value {
	font-family: var(--o-font-heading);
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: var(--o-espresso);
}

.o-product-card__price-value del {
	margin-right: 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--o-text-muted);
}

.o-product-card__price-value ins {
	text-decoration: none;
	color: var(--o-coral);
}

/* EU unit price ("10,32 € / л") under the price */
.o-product-card__unit {
	font-size: 11px;
	line-height: 14px;
	font-weight: 500;
	color: var(--o-text-muted);
}

/* Buy button: brand green on every card, whatever the product colour
   (client decision 2026-10-09). */
.o-product-card__buy,
.o-product-card .home-product__add {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 40px;
	padding: 8px 18px;
	border: 0;
	border-radius: var(--o-radius-full);
	background: var(--o-forest);
	color: var(--o-white);
	font-family: var(--o-font-body);
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(47, 33, 24, 0.1);
	cursor: pointer;
	transition: background-color var(--o-ease), opacity var(--o-ease);
}

.o-product-card__buy:hover,
.o-product-card .home-product__add:hover {
	background: var(--o-forest-deep);
	color: var(--o-white);
}

.o-product-card__buy .o-icon,
.o-product-card .home-product__add .o-icon {
	font-size: 18px;
}

.o-product-card__buy[disabled],
.o-product-card .home-product__add[disabled] {
	background: var(--o-surface-cream-alt);
	color: var(--o-text-muted);
	box-shadow: none;
	cursor: not-allowed;
}

.o-product-card__buy--choose {
	background: transparent;
	color: var(--o-espresso);
	box-shadow: inset 0 0 0 1.5px var(--o-espresso);
}

.o-product-card__buy--choose:hover {
	background: var(--o-surface-cream);
	color: var(--o-espresso);
}

/* WooCommerce AJAX states */
.o-product-card .loading {
	opacity: 0.7;
	pointer-events: none;
}

.o-product-card .loading .o-icon {
	animation: o-spin 0.9s linear infinite;
}

/* WooCommerce appends a "View cart" link after an AJAX add */
.o-product-card__foot a.added_to_cart {
	flex-basis: 100%;
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	color: var(--o-forest);
	text-align: right;
	text-decoration: underline;
	text-underline-offset: 2px;
}

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

/* --------------------------------------------------------------------------
   13. Marquee ticker
   Markup: <div class="o-marquee"><div class="o-marquee__track"> items x2 </div></div>
   The track holds the item list twice so -50% loops seamlessly.
   -------------------------------------------------------------------------- */

.o-marquee {
	overflow: hidden;
	white-space: nowrap;
	user-select: none;
	background: var(--o-espresso);
	color: var(--o-surface-cream);
	font-family: var(--o-font-label);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-block: 10px;
}

.o-marquee .o-icon {
	color: var(--o-gold);
	font-size: 16px;
}

.o-marquee__track {
	display: inline-flex;
	align-items: center;
	animation: o-marquee 35s linear infinite;
}

.o-marquee:hover .o-marquee__track {
	animation-play-state: paused;
}

.o-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--o-space-sm);
	margin-inline: var(--o-space-md);
}

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

/* --------------------------------------------------------------------------
   14. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.omega *,
	body.omega *::before,
	body.omega *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	/* Client requirement: marquee bands always scroll. With reduced motion
	   they run slower; hover still pauses them. */
	body.omega .o-marquee__track {
		animation-duration: 80s !important;
		animation-iteration-count: infinite !important;
	}
}

/* --------------------------------------------------------------------------
   CookieYes banner and preference centre in the site's look (client request
   2026-10-09). The plugin prints inline colours from its settings, hence
   !important. The banner text contains a pasted <pre>, reset to body text.
   -------------------------------------------------------------------------- */

.cky-consent-container .cky-consent-bar,
.cky-preference-center {
	border: 1px solid var(--o-border-warm) !important;
	border-radius: var(--o-radius-card) !important;
	background-color: var(--o-white) !important;
	box-shadow: 0 16px 48px rgba(47, 33, 24, 0.18) !important;
	font-family: var(--o-font-body) !important;
}

.cky-consent-container .cky-title,
.cky-preference-center .cky-preference-title {
	font-family: var(--o-font-heading) !important;
	font-weight: 700 !important;
	color: var(--o-espresso) !important;
}

.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des *,
.cky-preference-center .cky-preference-content-wrapper,
.cky-preference-center .cky-accordion-header-des,
.cky-preference-center .cky-accordion-btn {
	font-family: var(--o-font-body) !important;
	color: var(--o-text) !important;
}

.cky-consent-container .cky-notice-des pre {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	font-size: 14px !important;
	line-height: 20px !important;
	white-space: normal !important;
}

.cky-consent-container .cky-btn,
.cky-preference-center .cky-btn {
	min-height: 44px;
	border-radius: var(--o-radius-full) !important;
	font-family: var(--o-font-body) !important;
	font-weight: 700 !important;
	transition: background-color var(--o-ease), color var(--o-ease);
}

.cky-btn.cky-btn-accept,
.cky-btn.cky-btn-preferences.cky-btn-accept {
	border-color: var(--o-forest) !important;
	background-color: var(--o-forest) !important;
	color: var(--o-white) !important;
}

.cky-btn.cky-btn-accept:hover {
	border-color: var(--o-forest-deep) !important;
	background-color: var(--o-forest-deep) !important;
	opacity: 1 !important;
}

.cky-btn.cky-btn-reject,
.cky-btn.cky-btn-customize,
.cky-btn.cky-btn-preferences {
	border-color: var(--o-espresso) !important;
	background-color: transparent !important;
	color: var(--o-espresso) !important;
}

.cky-btn.cky-btn-reject:hover,
.cky-btn.cky-btn-customize:hover,
.cky-btn.cky-btn-preferences:hover {
	background-color: var(--o-surface-cream) !important;
	opacity: 1 !important;
}

.cky-switch input[type="checkbox"]:checked {
	background: var(--o-forest) !important;
}

.cky-preference-center .cky-always-active {
	color: var(--o-forest) !important;
}

.cky-btn-revisit-wrapper {
	background-color: var(--o-forest) !important;
}

/* --------------------------------------------------------------------------
   Social links (omega_social_list()): icon links; colours come from the context
   -------------------------------------------------------------------------- */

.o-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--o-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 32px;
	min-height: 32px;
	border-radius: var(--o-radius-full);
	color: inherit;
	text-decoration: none;
	transition: color var(--o-ease), background-color var(--o-ease), opacity var(--o-ease);
}

.o-social__icon {
	flex-shrink: 0;
}