/* Baltic Agro Koduaed – design tokens (design handoff "Design tokens"). Use the custom properties, not raw values. */
:root {
	/* Brand */
	--ba-green: #426716;          /* primary: buttons, links, active states (PMS 2280 C) */
	--ba-green-hover: #304e0f;    /* primary hover / pressed */
	--ba-green-deep: #1e3405;     /* strong accents, labels, fact-chip text, hero */
	--ba-accent: #a3c02c;         /* accent on dark backgrounds only */
	--ba-green-tint: rgba(66, 103, 22, .07);  /* row hover */
	--ba-green-ring: rgba(66, 103, 22, .18);  /* input focus ring */

	/* Dark */
	--ba-dark: #1a1c20;           /* footer, dark button */
	--ba-dark-hover: #2c2f35;
	--ba-dark-card: #232629;      /* dark cards on the footer */

	/* Surfaces */
	--ba-white: #fff;
	--ba-surface: #f7f8f2;        /* strips, panels, breadcrumb band */
	--ba-surface-icon: #f1f2ea;   /* round icon buttons, segmented control */
	--ba-surface-chip: #f1f3e6;   /* fact chips, selected option */
	--ba-surface-soft: #fbfcf7;

	/* Borders */
	--ba-border: #e8e8e0;         /* cards */
	--ba-divider: #ecede2;        /* dividers, hairlines */
	--ba-divider-soft: #f0f0e8;   /* list rows */
	--ba-control: #dcddd0;        /* chips, packs, pager, dropdown buttons (handoff "controls") */
	--ba-field: #8a8c7e;          /* text field / select boundary: ≥3:1 on white and --ba-surface (WCAG 1.4.11); QA a11y-5 */
	--ba-border-green: #dfe4c6;
	--ba-border-green-2: #d8ddb8;
	--ba-border-green-3: #cfd5b4; /* outline buttons */

	/* Text */
	--ba-text-strong: #2e2e28;    /* headings, strong */
	--ba-text: #3d3d3d;           /* body */
	--ba-text-title: #3f3f3f;     /* page H1 */
	--ba-text-2: #5a5a52;         /* secondary */
	--ba-text-muted: #6b6b62;     /* muted (AA on white and on --ba-surface) */
	--ba-error: #a33a1f;

	/* Typography */
	--ba-font: Nunito, Helvetica, Arial, Verdana, sans-serif;
	--ba-fs-body: 16px;
	--ba-lh-body: 1.75;
	--ba-fs-small: 14px;
	--ba-fs-page-title: 32px;
	--ba-fs-hero: 56px;
	--ba-fs-h2: 34px;

	/* Layout */
	--ba-container: 1220px;       /* content width; .ba-container adds the gutters outside it (prototype: content-box) */
	--ba-gutter: 40px;            /* 20px ≤760px */
	--ba-section: 96px;           /* home section rhythm; 56px ≤760px */
	--ba-section-inner-top: 44px; /* inner pages */
	--ba-section-inner-bottom: 100px;
	--ba-sidebar: 240px;
	--ba-gap-sm: 24px;
	--ba-gap: 28px;
	--ba-gap-lg: 48px;
	--ba-sticky-top: 100px;       /* sticky sidebar offset under the header */
	--ba-scroll-offset: 110px;    /* scroll-margin for anchors under the sticky header */

	/* Product images (pack shots, trimmed to the content by the P24 import): white frame inside every product image box */
	--ba-pimg-pad: 9%;            /* of the box width, on all sides; the box keeps its size (no layout shift) */
	--ba-pimg-bg: #fff;

	/* Radius */
	--ba-r-xs: 4px;    /* buttons, chips, tags */
	--ba-r-sm: 6px;    /* inputs */
	--ba-r-md: 8px;    /* panels */
	--ba-r-card: 10px; /* cards */
	--ba-r-lg: 12px;   /* images, large panels */
	--ba-r-xl: 14px;   /* footer cards, cookie card */
	--ba-r-pill: 999px;

	/* Shadows */
	--ba-shadow-card-hover: 0 22px 40px -26px rgba(30, 52, 5, .5);
	--ba-shadow-row-hover: 0 12px 26px -20px rgba(30, 52, 5, .5);
	--ba-shadow-drawer: -24px 0 48px -24px rgba(20, 30, 8, .35);
	--ba-shadow-seg: 0 1px 3px rgba(30, 52, 5, .15);
	--ba-shadow-pop: 0 22px 44px -20px rgba(20, 30, 8, .4);
	--ba-shadow-float: 0 30px 60px -24px rgba(20, 30, 8, .45);

	/* Motion */
	--ba-ease: .15s ease;
	--ba-drawer-ease: .32s cubic-bezier(.2, .8, .2, 1);

	/* Layers */
	--ba-z-header: 20;
	--ba-z-cookie: 58;
	--ba-z-drawer: 60;
	--ba-z-menu: 65;
}

@media (max-width: 760px) {
	:root {
		--ba-gutter: 20px;
		--ba-section: 56px;
		--ba-section-inner-top: 32px;
		--ba-section-inner-bottom: 72px;
		--ba-fs-page-title: 24px;
		--ba-fs-hero: 38px;
		--ba-fs-h2: 26px;
		--ba-sticky-top: 76px;     /* compact phone header (63px) */
		--ba-scroll-offset: 80px;
	}
}

/* Low windows (panel P-82): landscape phones / tablets get the compact header (header-footer.css) and its offsets;
   at ≤480 px the header is not sticky at all, so anchors and sticky columns need only a small gap. */
@media (max-height: 500px) and (max-width: 1024px) {
	:root {
		--ba-sticky-top: 76px;
		--ba-scroll-offset: 80px;
	}
}
@media (max-height: 480px) {
	:root {
		--ba-sticky-top: 16px;
		--ba-scroll-offset: 16px;
	}
}
/* Baltic Agro Koduaed – base: Nunito (self-hosted, variable 200–1000), page, links, focus, motion, helpers. */

/* Nunito, same files as the performance package (Google Fonts woff2, latin/latin-ext/cyrillic/cyrillic-ext; the browser
   downloads only the subsets a page uses). One variable file covers every weight 400–800. SIL Open Font License. */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(../fonts/nunito-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(../fonts/nunito-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(../fonts/nunito-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin + Š š Ž ž (panel P-96): Estonian needs only this one file (š/ž – multš, tšilli – used to pull in the 35 KB
   latin-ext file). Declared after latin-ext, so it wins for the overlapping š/ž. Built by
   staging-fixes/panel-fixes/A/scripts/p96_fonts.sh from Nunito[wght].ttf 3.602 (google/fonts); the old
   nunito-400-latin.woff2 stays on the server for cached pages / inlined critical CSS until those are rebuilt. */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(../fonts/nunito-400-latin-plus.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0160-0161, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/nunito-400i-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/nunito-400i-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/nunito-400i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/nunito-400i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The language link "Русский" on Estonian/English pages: its 6 letters (2.5 KB) instead of the 20 KB Cyrillic file
   (panel P-96). Same Nunito outlines; text and hreflang unchanged. Russian pages use the normal Cyrillic file. */
@font-face { font-family: 'Nunito Lang'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(../fonts/nunito-lang-ru.woff2) format('woff2'); unicode-range: U+0420, U+0438-0439, U+043A, U+0441, U+0443; }
html:not([lang|="ru"]) .ba-utility__lang[lang="ru"] { font-family: 'Nunito Lang', var(--ba-font); }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.ba-design-new {
	margin: 0;
	background: var(--ba-white);
	color: var(--ba-text);
	font-family: var(--ba-font);
	font-size: var(--ba-fs-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.ba-site *, .ba-site *::before, .ba-site *::after { box-sizing: border-box; }
.ba-site { min-height: 100vh; display: flex; flex-direction: column; }
.ba-site:focus { outline: none; }
.ba-main { flex: 1 0 auto; display: block; }
::selection { background: rgba(66, 103, 22, .25); }

/* Links */
.ba-design-new a { color: var(--ba-green); text-decoration: none; }
.ba-design-new a:hover { color: var(--ba-green-hover); }

/* Headings: Nunito everywhere (also in WPBakery content); sizes/margins come from the component classes. */
.ba-design-new h1, .ba-design-new h2, .ba-design-new h3, .ba-design-new h4, .ba-design-new h5, .ba-design-new h6 {
	font-family: var(--ba-font);
	overflow-wrap: break-word;
	hyphens: auto;
}
.ba-site img, .ba-site svg, .ba-site video { max-width: 100%; }
.ba-site img { height: auto; }
.ba-site svg { flex-shrink: 0; }
.ba-site button, .ba-site input, .ba-site select, .ba-site textarea { font-family: var(--ba-font); }

/* Keyboard focus (design spec: 3px brand green; light ring on dark/green backgrounds). The ring follows the element's
   own radius (pill and round buttons stay round – panel P-65); only text links get the spec's 3px rounding, at
   specificity 0,1,0 so every component's own radius (later in core.css) wins. */
.ba-design-new :focus-visible {
	outline: 3px solid var(--ba-focus, var(--ba-green));
	outline-offset: 2px;
}
:where(.ba-design-new a):focus-visible { border-radius: 3px; }
.ba-utility, .ba-footer, .ba-fcard--green { --ba-focus: #fff; }

/* Motion */
@keyframes ba-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ba-view { animation: ba-fade-up .4s ease both; }
@media (prefers-reduced-motion: reduce) {
	.ba-design-new *, .ba-design-new *::before, .ba-design-new *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* Layout helpers. The prototype's containers are content-box (1220 content + 40 gutters = 1300 outer); ours are
   border-box, so the gutters are added to the max-width (QA visual-2). */
.ba-container {
	width: 100%;
	max-width: calc(var(--ba-container) + 2 * var(--ba-gutter));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ba-gutter);
	padding-right: var(--ba-gutter);
}

/* Accessibility helpers */
.ba-sr-only, .ba-design-new .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.ba-design-new .screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; white-space: normal; }
.ba-skip-link {
	position: absolute; left: 12px; top: 8px; z-index: 100;
	transform: translateY(-200%);
	background: var(--ba-white); color: var(--ba-green-deep) !important;
	padding: 10px 16px; border-radius: var(--ba-r-sm);
	font-weight: 700;
}
.ba-skip-link:focus { transform: none; box-shadow: var(--ba-shadow-pop); }
.ba-design-new abbr[title] { text-decoration: none; border: 0; cursor: inherit; }

/* Sticky header offset for in-page anchors and keyboard focus. While focus is inside the sticky header the offset is
   0: an element of the header always sits inside the 110px zone, so the browser would otherwise scroll the page by half
   a screen whenever the header gets focus (e.g. the burger after closing the menu, Shift+Tab back into the nav) – QA resp-1. */
html:has(body.ba-design-new) { scroll-padding-top: var(--ba-scroll-offset); }
html:has(.ba-header:focus-within) { scroll-padding-top: 0; }

/* WPBakery content: full-width rows reach the viewport edges (100vw incl. a classic scrollbar) – clip what sticks out
   of <main> (overflow: clip is no scroll container, sticky elements keep working); regressions #18. */
@supports (overflow: clip) { .ba-mode-builder .ba-main { overflow-x: clip; } }
/* Baltic Agro Koduaed – shared components (used by all templates; class list in staging-fixes/redesign/A/NOTES.md). */

/* ---------- Typography ---------- */
.ba-page-title {                       /* page-title spec, every page H1 */
	font-family: var(--ba-font);
	font-size: var(--ba-fs-page-title);
	line-height: 1.25;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--ba-text-title);
	margin: 0 0 24px;
	text-wrap: balance;
}
.ba-h1-hero { font-size: var(--ba-fs-hero); line-height: 1.05; font-weight: 800; margin: 0; text-wrap: balance; }
.ba-h2 { font-size: var(--ba-fs-h2); line-height: 1.15; font-weight: 800; color: var(--ba-text-strong); margin: 0; text-wrap: balance; }
.ba-h2--lg { font-size: 36px; line-height: 1.12; }
.ba-h2--md { font-size: 28px; }
.ba-h2--sm { font-size: 24px; line-height: 1.2; }
.ba-h3 { font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--ba-text-strong); margin: 0; }
@media (max-width: 760px) { .ba-h2--lg { font-size: 26px; } }
.ba-eyebrow {                          /* "SOOVITAME", "TOOTED", theme eyebrows */
	font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ba-green); margin: 0 0 8px;
	display: flex; align-items: center; gap: 8px;
}
.ba-eyebrow--muted { color: var(--ba-text-muted); }
.ba-eyebrow--accent { color: var(--ba-accent); }   /* on dark */
.ba-label {                            /* small uppercase label, e.g. "KATEGOORIAD", "PAKEND" */
	font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--ba-text-muted); margin: 0;
}
.ba-label--green { color: var(--ba-green); letter-spacing: .08em; font-size: 13px; }
.ba-lead { font-size: 18px; line-height: 1.65; color: var(--ba-text); margin: 0 0 32px; }
.ba-muted { color: var(--ba-text-muted); }
.ba-small { font-size: 13.5px; }

/* ---------- Sections ---------- */
.ba-section { padding-top: var(--ba-section); padding-bottom: var(--ba-section); }
.ba-section--alt { background: var(--ba-surface); }
.ba-section-inner { padding-top: var(--ba-section-inner-top); padding-bottom: var(--ba-section-inner-bottom); }
.ba-band { background: var(--ba-surface); border-bottom: 1px solid var(--ba-divider); }
.ba-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; }

/* ---------- Breadcrumb strip ---------- */
.ba-crumbs { background: var(--ba-surface); border-bottom: 1px solid var(--ba-divider); }
.ba-crumbs > .ba-container { padding-top: 30px; padding-bottom: 30px; }
.ba-crumbs__nav { font-size: 13.5px; line-height: 1.5; color: var(--ba-text-muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.ba-crumbs__label { white-space: nowrap; margin-right: 2px; }
.ba-crumbs__list { display: contents; list-style: none; margin: 0; padding: 0; }
.ba-crumbs__item { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; min-width: 0; }
.ba-crumbs__sep { color: var(--ba-text-muted); }
.ba-crumbs__current { color: var(--ba-text-2); overflow-wrap: anywhere; }
.ba-crumbs--flush > .ba-container { padding-top: 0; padding-bottom: 0; }  /* inside an existing band */
.ba-crumbs--flush { background: none; border: 0; }
/* Phones (regressions #4): a slim strip on one line; "Sa oled siin:" only for screen readers; the current page (repeated
   in the H1 right below) shortens with an ellipsis instead of wrapping the strip to a second line. Same in low windows
   up to tablet width (landscape phones, panel P-82). */
@media (max-width: 760px), (max-height: 500px) and (max-width: 1024px) {
	.ba-crumbs > .ba-container { padding-top: 9px; padding-bottom: 9px; }
	.ba-crumbs__nav { font-size: 13px; }
	.ba-crumbs__label {
		position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
		clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
	}
	.ba-crumbs__item a { display: inline-block; padding: 2px 0; }
	.ba-crumbs__item:last-child { flex: 1 1 0; min-width: 7em; overflow: hidden; }
	.ba-crumbs__current { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
}

/* ---------- Buttons ---------- */
.ba-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font-family: var(--ba-font); font-size: 16px; font-weight: 700; line-height: 1.25;
	padding: 15px 28px; border-radius: var(--ba-r-xs);
	border: 1px solid transparent; background: none; cursor: pointer;
	text-align: center; text-decoration: none; white-space: normal;
	transition: background-color var(--ba-ease), border-color var(--ba-ease), color var(--ba-ease);
}
.ba-design-new .ba-btn--primary, .ba-btn--primary { background: var(--ba-green); border-color: var(--ba-green); color: #fff; }
.ba-design-new .ba-btn--primary:hover, .ba-btn--primary:hover { background: var(--ba-green-hover); border-color: var(--ba-green-hover); color: #fff; }
.ba-design-new .ba-btn--outline, .ba-btn--outline { background: #fff; border-color: var(--ba-border-green-3); color: var(--ba-green-deep); }
.ba-design-new .ba-btn--outline:hover, .ba-btn--outline:hover { border-color: var(--ba-green); color: var(--ba-green-deep); }
.ba-design-new .ba-btn--dark, .ba-btn--dark { background: var(--ba-dark); border-color: var(--ba-dark); color: #fff; }
.ba-design-new .ba-btn--dark:hover, .ba-btn--dark:hover { background: var(--ba-dark-hover); border-color: var(--ba-dark-hover); color: #fff; }
.ba-design-new .ba-btn--light, .ba-btn--light { background: #fff; border-color: #fff; color: var(--ba-green-deep); }
.ba-design-new .ba-btn--light:hover, .ba-btn--light:hover { background: #eef2e2; border-color: #eef2e2; color: var(--ba-green-deep); }
.ba-design-new .ba-btn--ghost, .ba-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }  /* on dark/hero */
.ba-design-new .ba-btn--ghost:hover, .ba-btn--ghost:hover { border-color: #fff; color: #fff; }
.ba-design-new .ba-btn--text, .ba-btn--text { padding: 6px 0; border: 0; color: var(--ba-green); font-size: 14px; }
.ba-btn--sm { font-size: 14.5px; padding: 12px 16px; }
.ba-btn--md { font-size: 15px; padding: 14px 26px; }
.ba-btn--lg { padding: 16px 30px; }
.ba-btn--pill { border-radius: var(--ba-r-pill); font-size: 15.5px; padding: 14px 24px; }
.ba-btn--block { display: flex; width: 100%; }
.ba-btn--start { justify-content: flex-start; text-align: left; }
.ba-btn[disabled], .ba-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ba-btn .ba-icon { flex-shrink: 0; }

/* Round icon button (search, close) */
.ba-iconbtn {
	width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0;
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	background: var(--ba-surface-icon); color: var(--ba-green); cursor: pointer;
	transition: background-color var(--ba-ease), color var(--ba-ease);
}
.ba-design-new .ba-iconbtn { color: var(--ba-green); }
.ba-design-new .ba-iconbtn:hover { background: #e4e7d6; color: var(--ba-green-hover); }
.ba-design-new .ba-iconbtn.is-active, .ba-design-new .ba-iconbtn--green { background: var(--ba-green); color: #fff; }
.ba-design-new .ba-iconbtn--green:hover, .ba-design-new .ba-iconbtn.is-active:hover { background: var(--ba-green-hover); color: #fff; }
.ba-iconbtn--sm { width: 38px; height: 38px; }

/* ---------- Product images: one frame everywhere (owner request 2026-10-17) ----------
   Pack shots come trimmed to their content (P24 import: 5 px white, square). Every product image box – cards in grids
   (category, search, home favourites, [ba_products]/[products] cards), product rows and mini thumbnails (home modules,
   "Samast kategooriast", article "Seotud tooted"), the product page image and thumbnails, the store drawer's mini-card –
   keeps its size and shape; the image is contained inside it with --ba-pimg-pad of white around it (padding of the
   <img> in % of the box width = the same white on all four sides). Blog/category photos are not product boxes. */
.ba-pcard .ba-card__media,
.ba-prow__thumb, .ba-related__product .ba-row__thumb, .ba-mini__thumb,
.ba-product__top .ba-gallery__main, .ba-product__top .ba-gallery__thumb { background: var(--ba-pimg-bg); }
.ba-site .ba-pcard .ba-card__media > img,
.ba-site .ba-prow__thumb > img,
.ba-site .ba-related__product .ba-row__thumb > img,
.ba-site .ba-mini__thumb > img,
.ba-site .ba-product__top .ba-gallery__main img,
.ba-site .ba-product__top .ba-gallery__thumb img {
	box-sizing: border-box; width: 100%; height: 100%; padding: var(--ba-pimg-pad); object-fit: contain; background: var(--ba-pimg-bg);
}

/* ---------- Content images that open the lightbox (inc/lightbox.php) ---------- */
a.ba-lb { display: inline-block; max-width: 100%; vertical-align: top; cursor: zoom-in; }
a.ba-lb > img { display: block; }
a.ba-lb.aligncenter { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
[data-ba-lb], [data-ba-lb-for] { cursor: zoom-in; }

/* ---------- Chips, tags, badges ---------- */
.ba-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ba-chip {                             /* filter chip (subcategory, blog tag filter) */
	display: inline-flex; align-items: center; gap: 4px;
	font-family: var(--ba-font); font-size: 14.5px; font-weight: 700; line-height: 1.3;
	padding: 8px 16px; border-radius: var(--ba-r-xs);
	border: 1px solid var(--ba-control); background: #fff; color: var(--ba-text-2);
	cursor: pointer; transition: all .12s ease; text-decoration: none;
}
.ba-design-new a.ba-chip { color: var(--ba-text-2); }
.ba-design-new .ba-chip:hover { border-color: var(--ba-green); color: var(--ba-green-deep); }
.ba-design-new .ba-chip.is-active, .ba-design-new .ba-chip[aria-pressed="true"], .ba-design-new .ba-chip[aria-current] {
	background: var(--ba-green); border-color: var(--ba-green); color: #fff;
}
.ba-chip__count { opacity: .65; font-weight: 600; margin-left: 4px; }
.ba-chip--on-dark {                    /* chain names on the dark store card */
	font-size: 13px; padding: 4px 10px;
	background: transparent; color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .16);
}
/* Chain chips are links that open the store drawer filtered by the chain: light text on the dark card in every state
   (the generic chip/link colours are dark green, unreadable here). */
.ba-design-new a.ba-chip--on-dark { color: rgba(255, 255, 255, .85); text-decoration: none; }
.ba-design-new a.ba-chip--on-dark:hover,
.ba-design-new a.ba-chip--on-dark:focus-visible { color: #fff; border-color: var(--ba-accent); background: rgba(163, 192, 44, .14); }
.ba-fact {                             /* product fact chip */
	display: inline-flex; font-size: 14px; font-weight: 600; line-height: 1.35;
	color: var(--ba-green-deep); background: var(--ba-surface-chip);
	border: 1px solid var(--ba-border-green); padding: 6px 12px; border-radius: var(--ba-r-xs);
}
.ba-pill {                             /* tag pill (Silt:, article tags) */
	display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; line-height: 1.4;
	padding: 3px 10px; border: 1px solid var(--ba-control); border-radius: var(--ba-r-pill);
	background: #fff;
}
.ba-design-new a.ba-pill { color: var(--ba-green); }
.ba-design-new a.ba-pill:hover { border-color: var(--ba-green); color: var(--ba-green-hover); }
.ba-badge {                            /* "HOOAEG · SÜGIS" */
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: #fff; background: var(--ba-green); padding: 7px 16px; border-radius: var(--ba-r-xs);
}
.ba-badge-pdf {                        /* PDF badge in document rows */
	display: inline-flex; font-size: 12px; font-weight: 800; letter-spacing: .04em; line-height: 1.2;
	color: #fff; background: var(--ba-green-deep); border-radius: 3px; padding: 5px 8px;
}

/* ---------- Cards ---------- */
.ba-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--ba-gap); }
.ba-card {
	position: relative; display: flex; flex-direction: column; min-width: 0;
	background: #fff; border: 1px solid var(--ba-border); border-radius: var(--ba-r-card); overflow: hidden;
	transition: transform var(--ba-ease), box-shadow var(--ba-ease);
}
.ba-card--hover:hover, .ba-card:has(.ba-card__link:hover), .ba-card:focus-within {
	transform: translateY(-5px); box-shadow: var(--ba-shadow-card-hover);
}
.ba-card__media { display: block; aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid var(--ba-divider-soft); overflow: hidden; }
.ba-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ba-card__media--cover img { object-fit: cover; }
.ba-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.ba-card__title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ba-text-strong); margin: 0; flex: 1; }
.ba-design-new .ba-card__title a { color: inherit; }
.ba-card__meta { font-size: 13.5px; line-height: 1.45; color: var(--ba-text-muted); margin: 0; }
.ba-card__cta { font-size: 13px; font-weight: 700; color: var(--ba-green); }
/* Whole card clickable: put .ba-card__link on the title link; its ::after covers the card (keyboard: one tab stop). */
.ba-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ba-card__link:focus-visible { outline: none; }
.ba-card:has(.ba-card__link:focus-visible) { outline: 3px solid var(--ba-green); outline-offset: 2px; }

/* List rows with thumbnail (theme modules, related products) */
.ba-row {
	position: relative; display: flex; gap: 16px; align-items: center;
	padding: 12px; border-bottom: 1px solid var(--ba-divider); border-radius: var(--ba-r-md);
	color: var(--ba-text-strong);
	transition: background-color var(--ba-ease), box-shadow var(--ba-ease), transform var(--ba-ease);
}
.ba-row:hover, .ba-row:has(.ba-card__link:hover) { background: var(--ba-green-tint); box-shadow: var(--ba-shadow-row-hover); transform: translateX(4px); }
.ba-row__thumb { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--ba-r-md); border: 1px solid var(--ba-divider); overflow: hidden; background: #fff; }
.ba-row__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ba-row__thumb--wide { width: 88px; }
.ba-row__thumb--wide img { object-fit: cover; }
.ba-row__title { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.ba-row__arrow { color: var(--ba-green); font-weight: 800; }

/* Panels */
.ba-panel { background: var(--ba-surface); border: 1px solid var(--ba-divider); border-radius: var(--ba-r-md); padding: 18px 22px; }
.ba-panel--lg { border-radius: var(--ba-r-lg); padding: 28px 32px; }
@media (max-width: 760px) { .ba-panel--lg { padding: 22px 18px; } }

/* ---------- Form controls ---------- */
.ba-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.ba-field__label { font-size: 14.5px; font-weight: 700; color: var(--ba-text-strong); }
.ba-field__hint { font-size: 13px; color: var(--ba-text-muted); }
.ba-field__error { font-size: 13.5px; font-weight: 600; color: var(--ba-error); }
.ba-input, .ba-textarea, .ba-select {
	width: 100%; font-family: var(--ba-font); font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--ba-text-strong);
	background: #fff; border: 1.5px solid var(--ba-field); border-radius: var(--ba-r-sm);
	padding: 12px 14px; outline: none;
	transition: border-color var(--ba-ease), box-shadow var(--ba-ease);
}
/* Gravity Forms fields in the new design (kontakt) use --ba-control for their border: give them the field colour. */
.ba-design-new .gform_wrapper .ginput_container { --ba-control: var(--ba-field); }
.ba-textarea { min-height: 140px; resize: vertical; }
.ba-input::placeholder, .ba-textarea::placeholder { color: var(--ba-text-muted); opacity: 1; }
.ba-input:focus, .ba-textarea:focus, .ba-select:focus { border-color: var(--ba-green); box-shadow: 0 0 0 3px var(--ba-green-ring); }
.ba-input:focus-visible, .ba-textarea:focus-visible, .ba-select:focus-visible { outline: none; }
.ba-input[aria-invalid="true"], .ba-textarea[aria-invalid="true"], .ba-input.is-invalid { border-color: var(--ba-error); }
.ba-input--search {                    /* search page input */
	max-width: 680px; font-size: 17px; border: 2px solid var(--ba-green); padding: 14px 18px;
}
.ba-input--search:focus { box-shadow: 0 0 0 4px rgba(66, 103, 22, .2); }
.ba-input--pill { border: 0; border-radius: var(--ba-r-pill); padding: 15px 22px; }
.ba-input--pill:focus { box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
.ba-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.ba-check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ba-green); flex-shrink: 0; }
.ba-searchform { display: flex; flex-wrap: wrap; gap: 10px; max-width: 680px; margin: 0 0 32px; }
.ba-searchform .ba-input { flex: 1 1 260px; width: auto; }

/* Native select styled as the design's dropdown trigger */
.ba-select {
	-webkit-appearance: none; appearance: none; width: auto; max-width: 100%;
	font-size: 15px; font-weight: 700; padding: 10px 40px 10px 14px; border-width: 1px; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23426716' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.ba-select:hover { border-color: var(--ba-green); }
/* Touch screens: 16 px, so iOS Safari does not zoom the page when a native select gets focus (panel P-42). */
@media (pointer: coarse) { .ba-select { font-size: 16px; } }
/* Custom dropdown (button + listbox), e.g. sort and county */
.ba-dropdown { position: relative; flex-shrink: 0; }
.ba-dropdown__btn {
	display: flex; align-items: center; gap: 10px; white-space: nowrap; cursor: pointer;
	font-family: var(--ba-font); font-size: 15px; font-weight: 700; color: var(--ba-text-strong);
	background: #fff; border: 1px solid var(--ba-control); border-radius: var(--ba-r-sm); padding: 10px 14px;
}
.ba-dropdown__btn:hover { border-color: var(--ba-green); }
.ba-dropdown__btn .ba-icon { color: var(--ba-green); }
.ba-listbox {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 31; min-width: 230px; max-height: 320px; overflow-y: auto;
	background: #fff; border: 1px solid var(--ba-border); border-radius: var(--ba-r-card); box-shadow: var(--ba-shadow-pop);
	padding: 6px; margin: 0; list-style: none;
}
.ba-listbox[hidden] { display: none; }
.ba-listbox__option {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 10px 12px; border-radius: var(--ba-r-sm); cursor: pointer;
	font-size: 15px; font-weight: 500; color: var(--ba-text-strong);
}
.ba-listbox__option:hover, .ba-listbox__option.is-focused { background: var(--ba-surface); }
.ba-listbox__option[aria-selected="true"] { font-weight: 700; color: var(--ba-green-deep); background: var(--ba-surface-chip); }

/* Segmented control (Kauplused | E-poed) */
.ba-seg { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; background: var(--ba-surface-icon); border-radius: var(--ba-r-sm); padding: 4px; gap: 4px; }
.ba-seg__btn {
	font-family: var(--ba-font); font-size: 15px; font-weight: 700; line-height: 1.3;
	border: 0; border-radius: var(--ba-r-xs); padding: 9px 8px; cursor: pointer;
	background: transparent; color: var(--ba-text-muted);
}
.ba-seg__btn.is-active, .ba-seg__btn[aria-pressed="true"], .ba-seg__btn[aria-selected="true"] { background: #fff; color: var(--ba-green-deep); box-shadow: var(--ba-shadow-seg); }

/* Switch (role="switch") */
.ba-switch { width: 46px; height: 26px; border-radius: var(--ba-r-pill); border: 0; padding: 3px; cursor: pointer; display: flex; justify-content: flex-start; background: #cfd2c2; transition: background-color var(--ba-ease); flex-shrink: 0; }
.ba-switch::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.ba-switch[aria-checked="true"] { background: var(--ba-green); justify-content: flex-end; }

/* Tabs (role="tablist") */
.ba-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--ba-divider); margin-bottom: 32px; scroll-margin-top: var(--ba-scroll-offset); }
.ba-tab {
	font-family: var(--ba-font); font-size: 17px; font-weight: 700; line-height: 1.3;
	padding: 12px 22px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
	color: var(--ba-text-muted); cursor: pointer;
}
.ba-tab:hover { color: var(--ba-green-deep); }
.ba-tab[aria-selected="true"], .ba-tab.is-active { border-bottom-color: var(--ba-green); color: var(--ba-green-deep); }
@media (max-width: 760px) { .ba-tab { padding: 12px 14px; font-size: 15.5px; } }

/* Prose (text pages, WP content in our templates) */
.ba-prose { font-size: 16px; line-height: 1.75; color: var(--ba-text); overflow-wrap: break-word; }
.ba-prose > :first-child { margin-top: 0; }
.ba-prose p, .ba-prose ul, .ba-prose ol, .ba-prose table, .ba-prose figure, .ba-prose blockquote { margin: 0 0 16px; }
.ba-prose h2 { font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--ba-text-strong); margin: 32px 0 8px; }
.ba-prose h3 { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--ba-text-strong); margin: 24px 0 8px; }
.ba-prose h4 { font-size: 16px; font-weight: 700; color: var(--ba-text-strong); margin: 20px 0 6px; }
.ba-prose ul, .ba-prose ol { padding-left: 1.4em; }
.ba-prose li { margin: 0 0 6px; }
.ba-prose a { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(66, 103, 22, .35); text-underline-offset: 2px; }
.ba-prose a:hover { text-decoration-color: currentColor; }
.ba-prose strong, .ba-prose b { font-weight: 700; color: var(--ba-text-strong); }
.ba-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; display: block; overflow-x: auto; }
.ba-prose th, .ba-prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--ba-divider); }
.ba-prose th { background: var(--ba-surface); font-weight: 700; color: var(--ba-text-2); }
.ba-prose img { border-radius: var(--ba-r-md); }
.ba-prose blockquote { border-left: 3px solid var(--ba-green); padding: 4px 0 4px 18px; color: var(--ba-text-2); }

/* ---------- Windows high-contrast mode (forced colors), panel P-66 ----------
   The system replaces background colours and turns transparent borders into visible lines, so every tab, nav link and
   category row looked selected and the filled "selected" chips/packs/segments looked like the others. Here: spacer
   borders take the page colour (Canvas, invisible, no layout shift – border-style stays), the selected item is
   marked with Highlight (a line, or a filled box with forced-color-adjust: none – then every colour inside is a system
   colour; SVG icons use currentColor). Field focus: panel P-64. !important only where shop.css (later in the cascade)
   sets the same property. */
@media (forced-colors: active) {
	.ba-tab, .ba-design-new .ba-nav__link { border-bottom-color: Canvas; }
	.ba-tab[aria-selected="true"], .ba-tab.is-active,
	.ba-design-new .ba-nav__link.is-active { border-bottom-color: Highlight; }
	.ba-side .ba-catnav__row { border-left-color: Canvas !important; }
	.ba-side .ba-catnav .is-current > .ba-catnav__row,
	.ba-side .ba-catnav__list > .is-ancestor > .ba-catnav__row { border-left-color: Highlight !important; }
	.ba-design-new .ba-chip.is-active, .ba-design-new .ba-chip[aria-pressed="true"], .ba-design-new .ba-chip[aria-current],
	.ba-design-new a.ba-pack.is-current,
	.ba-seg__btn.is-active, .ba-seg__btn[aria-pressed="true"], .ba-seg__btn[aria-selected="true"],
	.ba-listbox__option[aria-selected="true"], .ba-design-new .ba-sort__list .ba-listbox__option[aria-current] {
		forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText;
	}
	.ba-design-new .ba-chip[aria-current] *, .ba-design-new .ba-chip[aria-pressed="true"] *, .ba-design-new .ba-chip.is-active *,
	.ba-design-new a.ba-pack.is-current *, .ba-listbox__option[aria-selected="true"] *,
	.ba-design-new .ba-sort__list .ba-listbox__option[aria-current] * { color: inherit !important; opacity: 1; }
	.ba-gallery__thumb[aria-current="true"] { border-color: Highlight; }
	.ba-switch { outline: 1px solid CanvasText; }   /* the track (outline: no layout shift) */
	.ba-switch[aria-checked="true"] { forced-color-adjust: none; background: Highlight; }
	.ba-switch::after { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; }
}
/* Baltic Agro Koduaed – utility bar, sticky header, mobile menu, footer (design sections 1–3, L). */

/* ---------- 1. Utility bar ---------- */
.ba-utility { background: var(--ba-green); color: rgba(255, 255, 255, .9); font-size: 13px; line-height: 1.4; }
.ba-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.ba-utility__langs, .ba-utility__links { display: flex; align-items: center; flex-wrap: wrap; }
.ba-utility__langs { gap: 16px; flex-wrap: nowrap; }
.ba-utility__links { gap: 20px; justify-content: flex-end; min-width: 0; }
.ba-utility a { white-space: nowrap; }   /* a label never breaks; ru uses a shorter e-shop label here (QA resp-8/i18n-4) */
.ba-design-new .ba-utility a { color: rgba(255, 255, 255, .92); }
.ba-design-new .ba-utility .ba-utility__lang { color: rgba(255, 255, 255, .85); }
.ba-design-new .ba-utility .ba-utility__lang.is-current { color: #fff; font-weight: 600; }
.ba-design-new .ba-utility .ba-utility__contact { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.ba-design-new .ba-utility a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 2. Sticky header ---------- */
.ba-header {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: var(--ba-z-header);
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--ba-border);
}
.ba-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 16px; padding-bottom: 16px; }
.ba-header__logo { display: flex; flex-shrink: 0; }
.ba-site .ba-logo--header { height: 54px; width: auto; display: block; }
.ba-header__end { display: flex; align-items: center; justify-content: flex-end; column-gap: 22px; min-width: 0; }
.ba-nav { min-width: 0; }
.ba-nav__list { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 22px; row-gap: 2px; list-style: none; margin: 0; padding: 0; }
.ba-nav__item { margin: 0; }
.ba-design-new .ba-nav__link {
	display: block; white-space: nowrap; padding: 10px 0 8px;
	font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: .005em;
	color: var(--ba-text-strong); border-bottom: 2px solid transparent;
	transition: color var(--ba-ease), border-color var(--ba-ease);
}
.ba-design-new .ba-nav__link:hover { color: var(--ba-green); }
.ba-design-new .ba-nav__link.is-active { color: var(--ba-green); border-bottom-color: var(--ba-green); }
.ba-header__search { margin-left: 4px; }
/* Links that leave the site / open a new tab (menus, utility bar, footer): a small ↗ after the label (owner request
   EXT-LINK; ba_koduaed_ext_mark()). */
.ba-site .ba-extmark { display: inline-block; width: max(10px, .72em); height: max(10px, .72em); margin-left: .3em; vertical-align: .02em; }
.ba-burger { display: none; }

/* ---------- Mobile menu (≤1024px) ---------- */
.ba-mmenu {
	position: fixed; inset: 0; z-index: var(--ba-z-menu);
	background: #fff; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
.ba-mmenu[hidden] { display: none; }
.ba-mmenu__top { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--ba-border); }
/* The bar with × stays at the top while the menu scrolls (landscape phones: the menu is taller than the window –
   panel P-83); focused links scroll into view below it. */
.ba-mmenu { scroll-padding-top: 76px; }
.ba-mmenu__top { position: sticky; top: 0; z-index: 1; background: #fff; }
.ba-site .ba-logo--menu { height: 44px; width: auto; display: block; }
.ba-design-new .ba-mmenu__close { color: var(--ba-green-deep); }
.ba-mmenu__nav { padding: 8px 20px; }
.ba-mmenu__list { list-style: none; margin: 0; padding: 0; }
.ba-design-new .ba-mmenu__link {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 16px 0; border-bottom: 1px solid var(--ba-divider-soft);
	font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--ba-text-strong);
}
.ba-design-new .ba-mmenu__link.is-active { color: var(--ba-green); }
.ba-mmenu__arrow { color: var(--ba-green); }
.ba-mmenu__actions { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ba-mmenu__actions .ba-btn { border-radius: var(--ba-r-sm); padding: 15px 20px; }
.ba-mmenu__langs { display: flex; gap: 18px; padding-top: 12px; font-size: 15px; font-weight: 700; }
.ba-design-new .ba-mmenu__langs a { color: var(--ba-text-muted); padding: 4px 0; }
.ba-design-new .ba-mmenu__langs a.is-current { color: var(--ba-green-deep); }

/* Between the burger breakpoint and the full container width: a little tighter, so 8 items (et/ru) stay on one row. */
@media (min-width: 1025px) and (max-width: 1240px) {
	.ba-header__inner { gap: 24px; }
	.ba-nav__list { column-gap: 16px; }
	.ba-design-new .ba-nav__link { font-size: 15px; }
	.ba-header__end { column-gap: 16px; }
}
@media (min-width: 1025px) and (max-width: 1100px) {
	/* 10/16 px (was 12/24): ru stays on one row with the ↗ mark after "Секаторы" (EXT-LINK). */
	.ba-header__inner { gap: 16px; }
	.ba-nav__list { column-gap: 10px; }
	.ba-design-new .ba-nav__link { font-size: 14.5px; }
}
@media (max-width: 1024px) {
	.ba-nav { display: none; }
	.ba-burger { display: inline-flex; }
	.ba-header__end { column-gap: 12px; }
}
@media (min-width: 1025px) {
	.ba-mmenu { display: none !important; }
}
/* Compact phone header (regressions #4); also in low windows up to tablet width (landscape phones 844×390, 250 %
   zoom – panel P-82): 30 + 63 px instead of 34 + 87 px. The sticky offsets follow in tokens.css. */
@media (max-width: 760px), (max-height: 500px) and (max-width: 1024px) {
	.ba-utility__links { display: none; }
	.ba-utility__inner { padding-top: 6px; padding-bottom: 6px; }
	.ba-header__inner { padding-top: 10px; padding-bottom: 10px; }
	.ba-site .ba-logo--header { height: 42px; }
}
@media (min-width: 761px) and (max-width: 900px) {
	.ba-utility__links { gap: 16px; }
}
/* Very low windows (≤480 px: landscape phones, 400 % zoom): the header scrolls away with the page instead of covering
   a quarter of the screen (panel P-82, a11y-15); tokens.css sets the sticky/scroll offsets for it. No hide-on-scroll. */
@media (max-height: 480px) {
	.ba-header { position: relative; top: auto; }
}
/* Low windows: a slimmer bar in the mobile menu. */
@media (max-height: 500px) {
	.ba-mmenu { scroll-padding-top: 60px; }
	.ba-mmenu__top { padding-top: 8px; padding-bottom: 8px; }
	.ba-site .ba-logo--menu { height: 36px; }
	.ba-design-new .ba-mmenu__link { padding-top: 12px; padding-bottom: 12px; }
}

/* ---------- 3. Footer ---------- */
.ba-footer { background: var(--ba-dark); color: rgba(255, 255, 255, .85); margin-top: auto; }
.ba-footer h2 { margin: 0; }

/* Cards */
.ba-fcards-wrap { padding-top: 72px; }
.ba-fcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 24px; }
.ba-fcard { border-radius: var(--ba-r-xl); padding: 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ba-fcard--dark { background: var(--ba-dark-card); border: 1px solid rgba(255, 255, 255, .08); }
.ba-fcard--green { background: var(--ba-green); }
.ba-fcard__eyebrow {
	display: flex; align-items: center; gap: 8px; margin: 0;
	font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4;
	color: var(--ba-accent);
}
.ba-fcard--green .ba-fcard__eyebrow { color: rgba(255, 255, 255, .8); }
.ba-footer .ba-fcard__title { font-size: 24px; line-height: 1.2; font-weight: 800; color: #fff; margin: 0; hyphens: manual; }
.ba-fcard__text { font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .88); margin: 0; }
.ba-fcard__text--muted { color: rgba(255, 255, 255, .75); }
.ba-fcard__fine { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .8); margin: 0; text-align: center; }
.ba-fcard__actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ba-fcard--newsletter .ba-fcard__actions { align-items: stretch; }
.ba-fcal { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.ba-fcal__item { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); margin: 0; }
.ba-fcal__item:last-child { border-bottom: 0; }
.ba-fcal__num { font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--ba-accent); min-width: 34px; }
.ba-fcal__text { font-size: 16px; line-height: 1.45; color: #fff; }
.ba-fcard__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 700; }
.ba-design-new .ba-fcard__links a { color: var(--ba-accent); }
.ba-design-new .ba-fcard__links a:hover { color: #fff; }
.ba-fcard__chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 761px) and (max-width: 1024px) {
	.ba-fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ba-fcard--stores { grid-column: 1 / -1; }
}

/* Columns */
.ba-fcols {
	margin-top: 56px; padding-top: 56px; padding-bottom: 56px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 48px;
}
.ba-fcol { min-width: 0; }
.ba-fcol--about { min-width: 240px; }
.ba-fcol__logo { display: inline-flex; margin-bottom: 20px; }
.ba-site .ba-logo--footer { height: 50px; width: auto; display: block; }
.ba-fcol__about { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .62); max-width: 300px; margin: 0 0 26px; }
.ba-fcol__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .55); margin: 0 0 12px; }
.ba-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ba-design-new .ba-social__link {
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
	display: flex; align-items: center; justify-content: center; color: #fff;
	transition: background-color var(--ba-ease), border-color var(--ba-ease);
}
.ba-design-new .ba-social__link:hover { background: var(--ba-green); border-color: var(--ba-green); color: #fff; }
.ba-footer .ba-fcol__title { font-size: 13px; font-weight: 800; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin: 0 0 18px; }
.ba-fcol__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; line-height: 1.45; }
.ba-fcol__list li { margin: 0; }
.ba-design-new .ba-fcol__list a, .ba-design-new .ba-fcontact__ext a { color: rgba(255, 255, 255, .78); }
.ba-design-new .ba-fcol__list a:hover, .ba-design-new .ba-fcontact__ext a:hover { color: #fff; }
.ba-fcontact { display: flex; flex-direction: column; gap: 18px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.ba-fcontact__label { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.ba-design-new .ba-fcontact__value { color: #fff; font-style: normal; font-size: 14.5px; }
.ba-design-new a.ba-fcontact__value { font-size: 14px; }
.ba-design-new a.ba-fcontact__value:hover { color: var(--ba-accent); }
.ba-fcontact__value span { display: inline-block; }
.ba-fcontact__ext { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }

/* Bottom bar */
.ba-fbottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.ba-fbottom__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; padding-bottom: 20px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.ba-fbottom__copy { margin: 0; }
.ba-fbottom__end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ba-fbottom__langs { display: flex; gap: 14px; }
.ba-design-new .ba-fbottom__langs a { color: rgba(255, 255, 255, .55); }
.ba-design-new .ba-fbottom__langs a.is-current { color: #fff; font-weight: 700; }
.ba-design-new .ba-fbottom__langs a:hover { color: #fff; }
.ba-design-new .ba-fbottom__consent { color: rgba(255, 255, 255, .65); font-weight: 700; padding: 7px 4px; }
.ba-design-new .ba-fbottom__consent:hover { color: #fff; }
.ba-design-new .ba-fbottom__top {
	color: rgba(255, 255, 255, .8); font-weight: 700; padding: 7px 16px;
	border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--ba-r-pill);
}
.ba-design-new .ba-fbottom__top:hover { color: #fff; border-color: #fff; }

@media (max-width: 760px) {
	.ba-fcards-wrap { padding-top: 56px; }
	.ba-fcard { padding: 28px 24px; }
	.ba-fcols { margin-top: 40px; padding-top: 40px; padding-bottom: 40px; gap: 36px; }
	.ba-fcol--about { min-width: 0; }
}