/* ==========================================================================
   Lifesol Site — full front-end design system
   Swiss/clinical: strong grid, generous whitespace, hairline rules,
   one brand green, one accent, no decoration for its own sake.
   ========================================================================== */

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

:root {
	--ls-brand: #1b6b45;
	--ls-accent: #e07a13;
	--ls-logo-h: 46px;

	/* Derived shades. The flat value is the fallback for old browsers;
	   the color-mix line below it wins wherever it is supported, so the
	   whole palette follows the brand colour chosen in the settings. */
	--ls-brand-900: #0b3322;
	--ls-brand-900: color-mix(in srgb, var(--ls-brand) 55%, #05130c);
	--ls-brand-800: #145234;
	--ls-brand-800: color-mix(in srgb, var(--ls-brand) 78%, #000);
	--ls-brand-600: #2e8a5e;
	--ls-brand-600: color-mix(in srgb, var(--ls-brand) 82%, #fff);
	--ls-brand-100: #e6f1eb;
	--ls-brand-100: color-mix(in srgb, var(--ls-brand) 12%, #fff);
	--ls-brand-050: #f2f8f5;
	--ls-brand-050: color-mix(in srgb, var(--ls-brand) 6%, #fff);

	--ls-accent-100: #fdf0e0;
	--ls-accent-100: color-mix(in srgb, var(--ls-accent) 14%, #fff);

	--ls-ink: #0e1a15;
	--ls-body: #47574f;
	/* Dark enough to clear 4.5:1 on the tinted surface, not just on white. */
	--ls-mute: #5f6f66;
	--ls-line: #e2eae5;
	--ls-line-2: #f0f5f2;
	--ls-surf: #f6faf8;
	--ls-white: #fff;

	--ls-r-sm: 8px;
	--ls-r: 14px;
	--ls-r-lg: 22px;
	--ls-r-full: 999px;

	--ls-sh-1: 0 1px 2px rgba(14, 26, 21, .05), 0 2px 8px rgba(14, 26, 21, .04);
	--ls-sh-2: 0 4px 12px rgba(14, 26, 21, .07), 0 16px 34px -18px rgba(14, 26, 21, .22);
	--ls-sh-3: 0 20px 60px -24px rgba(11, 51, 34, .38);

	--ls-wrap: 1240px;
	--ls-gut: 20px;

	--ls-head: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ls-body-f: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--ls-t: 220ms cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Scoped reset — :where() keeps specificity at 0 so component
      classes below always win (no !important anywhere in this file).
   -------------------------------------------------------------------------- */

.ls-site {
	margin: 0;
	background: var(--ls-white);
	color: var(--ls-body);
	font-family: var(--ls-body-f);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	/* Deliberately no overflow-x:hidden — it would paper over a real layout
	   overflow instead of showing it. Nothing here overflows at 375px. */
}

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

.ls-site :where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 .5em;
	font-family: var(--ls-head);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.018em;
	color: var(--ls-ink);
	text-wrap: balance;
}

.ls-site :where(p) { margin: 0 0 1em; }
.ls-site :where(p:last-child) { margin-bottom: 0; }
.ls-site :where(img) { max-width: 100%; height: auto; }
.ls-site :where(a) { color: var(--ls-brand); text-decoration: none; transition: color var(--ls-t); }
.ls-site :where(a:hover) { color: var(--ls-accent); }
.ls-site :where(ul, ol) { margin: 0 0 1em; padding-left: 1.2em; }
.ls-site :where(button) { font: inherit; cursor: pointer; }
.ls-site :where(table) { border-collapse: collapse; width: 100%; }

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

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

.ls-skip {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--ls-brand); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--ls-r-sm) 0;
}
.ls-skip:focus { left: 0; color: #fff; }

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

.ls-ic { width: 20px; height: 20px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   3. Buttons + links
   -------------------------------------------------------------------------- */

.ls-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 12px 22px;
	border: 1.5px solid transparent; border-radius: var(--ls-r-full);
	font-family: var(--ls-head); font-weight: 600; font-size: 15px; line-height: 1;
	text-align: center; cursor: pointer;
	transition: background var(--ls-t), color var(--ls-t), border-color var(--ls-t), transform var(--ls-t), box-shadow var(--ls-t);
}
.ls-btn .ls-ic { width: 18px; height: 18px; }
.ls-btn:active { transform: translateY(1px); }

.ls-btn-primary { background: var(--ls-brand); color: #fff; }
.ls-btn-primary:hover { background: var(--ls-brand-800); color: #fff; box-shadow: var(--ls-sh-2); }

/* Dark ink on the orange: white text on #e07a13 is only 3:1. */
.ls-btn-accent { background: var(--ls-accent); color: var(--ls-ink); }
.ls-btn-accent:hover { background: var(--ls-accent); color: var(--ls-ink); filter: brightness(1.07); box-shadow: var(--ls-sh-2); }

.ls-btn-ghost { background: transparent; color: var(--ls-brand); border-color: var(--ls-line); }
.ls-btn-ghost:hover { background: var(--ls-brand-050); color: var(--ls-brand-800); border-color: var(--ls-brand); }

.ls-btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.ls-btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.ls-btn-lg { min-height: 54px; padding: 15px 30px; font-size: 16px; }
.ls-btn-sm { min-height: 38px; padding: 9px 16px; font-size: 13.5px; }
.ls-btn-block { width: 100%; }

.ls-link {
	display: inline-flex; align-items: center; gap: 4px;
	font-family: var(--ls-head); font-weight: 600; font-size: 14px; color: var(--ls-brand);
}
.ls-link .ls-ic { width: 16px; height: 16px; transition: transform var(--ls-t); }
.ls-link:hover .ls-ic { transform: translateX(3px); }

.ls-chip {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; padding: 0 7px;
	background: var(--ls-brand-100); color: var(--ls-brand-900);
	border-radius: var(--ls-r-full);
	font-family: var(--ls-head); font-size: 12px; font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ls-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 0 14px;
	font-family: var(--ls-head); font-size: 12.5px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--ls-brand);
}
.ls-eyebrow::before {
	content: ""; width: 26px; height: 2px; background: var(--ls-accent); border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. Preview bar + top bar
   -------------------------------------------------------------------------- */

.ls-previewbar {
	background: var(--ls-accent); color: var(--ls-ink);
	font-size: 13.5px; text-align: center; padding: 8px 16px;
	font-family: var(--ls-head); font-weight: 600;
}
.ls-previewbar a { color: var(--ls-ink); text-decoration: underline; }

.ls-topbar {
	background: var(--ls-brand-900); color: rgba(255, 255, 255, .82);
	font-size: 13px;
}
.ls-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 42px; }

.ls-topbadges { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.ls-topbadges li { display: flex; align-items: center; gap: 7px; }
.ls-topbadges .ls-ic { width: 15px; height: 15px; color: var(--ls-accent); }

.ls-topcontact { display: flex; align-items: center; gap: 18px; }
.ls-topcontact a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .9); }
.ls-topcontact a:hover { color: #fff; }
.ls-topcontact .ls-ic { width: 15px; height: 15px; color: var(--ls-accent); }

/* --------------------------------------------------------------------------
   5. Header + navigation
   -------------------------------------------------------------------------- */

.ls-header {
	position: sticky; top: 0; z-index: 90;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--ls-line);
	transition: box-shadow var(--ls-t);
}
.ls-header.is-stuck { box-shadow: var(--ls-sh-2); }

/* Logged-in admins get the WordPress toolbar fixed over the top of the page.
   Without this the sticky header slides underneath it and the logo is cut in
   half. The toolbar is 32px wide-screen, 46px on tablet, and stops being
   fixed (so needs no offset) at 600px and below. */
.admin-bar .ls-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .ls-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .ls-header { top: 0; } }

.ls-header-in { display: flex; align-items: center; gap: 24px; min-height: 76px; }

.ls-logo { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.ls-logo-img { height: var(--ls-logo-h); width: auto; display: block; }
.ls-logo-mark {
	display: grid; place-items: center; width: 42px; height: 42px;
	background: var(--ls-brand); color: #fff; border-radius: 12px;
}
.ls-logo-mark .ls-ic { width: 24px; height: 24px; }
.ls-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.ls-logo-text strong { font-family: var(--ls-head); font-size: 21px; font-weight: 800; color: var(--ls-ink); letter-spacing: -.02em; }
.ls-logo-text em { font-style: normal; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ls-mute); }

.ls-nav { margin-inline-start: auto; }
.ls-nav-list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ls-nav-list > li { position: relative; }

.ls-nav-list > li > a,
.ls-mega-toggle {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 10px 14px; border: 0; background: none; border-radius: var(--ls-r-sm);
	font-family: var(--ls-head); font-size: 15px; font-weight: 600; color: var(--ls-ink);
	transition: background var(--ls-t), color var(--ls-t);
}
.ls-nav-list > li > a:hover,
.ls-mega-toggle:hover { background: var(--ls-brand-050); color: var(--ls-brand); }

.ls-nav-list > li.is-current > a,
.ls-nav-list > li.is-current .ls-mega-toggle { color: var(--ls-brand); }
.ls-nav-list > li.is-current > a::after,
.ls-nav-list > li.is-current .ls-mega-toggle::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
	height: 2px; background: var(--ls-accent); border-radius: 2px;
}

.ls-mega-toggle .ls-ic { width: 16px; height: 16px; transition: transform var(--ls-t); }
.ls-mega-toggle[aria-expanded="true"] .ls-ic { transform: rotate(180deg); }

.ls-header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.ls-iconbtn {
	display: grid; place-items: center; width: 44px; height: 44px;
	background: transparent; border: 1.5px solid var(--ls-line); border-radius: var(--ls-r-full);
	color: var(--ls-ink); transition: all var(--ls-t);
}
.ls-iconbtn:hover { background: var(--ls-brand-050); border-color: var(--ls-brand); color: var(--ls-brand); }
.ls-burger { display: none; }

/* Mega menu ---------------------------------------------------------------- */

.ls-mega {
	position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
	width: min(1100px, calc(100vw - 40px));
	background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-r-lg);
	box-shadow: var(--ls-sh-3); overflow: hidden; z-index: 95;
}
.ls-mega[hidden] { display: none; }

/* With 8 families the panel is taller than a laptop viewport, which put the
   bottom rows and the footer buttons off-screen and out of reach. Cap it and
   let the panel scroll instead. */
.ls-mega-in {
	padding: 0; max-width: none;
	max-height: calc(100vh - 150px);
	max-height: calc(100dvh - 150px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.admin-bar .ls-mega-in { max-height: calc(100vh - 182px); }
.ls-mega-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 4px 28px; padding: 28px 30px 22px;
}
.ls-mega-col { min-width: 0; }
.ls-mega-head {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--ls-line);
	font-family: var(--ls-head); font-size: 14.5px; font-weight: 700; color: var(--ls-ink);
}
.ls-mega-head:hover { color: var(--ls-brand); }
.ls-mega-sub { margin: 0; padding: 0; list-style: none; }
.ls-mega-sub li { margin-bottom: 1px; }
.ls-mega-sub a {
	display: block; padding: 5px 8px; margin-left: -8px; border-radius: 6px;
	font-size: 13.5px; color: var(--ls-body); line-height: 1.45;
}
.ls-mega-sub a:hover { background: var(--ls-brand-050); color: var(--ls-brand); }
.ls-mega-more { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--ls-brand); }
.ls-mega-more .ls-ic { width: 14px; height: 14px; }

/* Sticky so the two call-to-action buttons stay reachable while the list
   above them scrolls. */
.ls-mega-foot {
	position: sticky; bottom: 0; z-index: 1;
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	padding: 16px 30px; background: var(--ls-brand-050); border-top: 1px solid var(--ls-line);
}

/* Search bar --------------------------------------------------------------- */

.ls-searchbar { border-top: 1px solid var(--ls-line); background: var(--ls-surf); padding: 16px 0; }
.ls-searchbar[hidden] { display: none; }
.ls-searchform { position: relative; display: flex; align-items: center; gap: 10px; }
.ls-searchform > .ls-ic { position: absolute; left: 18px; color: var(--ls-mute); }
.ls-searchform input[type="search"] {
	flex: 1; min-width: 0; height: 52px; padding: 0 18px 0 48px;
	border: 1.5px solid var(--ls-line); border-radius: var(--ls-r-full);
	background: #fff; font: inherit; font-size: 15px; color: var(--ls-ink);
}
.ls-searchform input[type="search"]:focus { border-color: var(--ls-brand); }

/* Drawer ------------------------------------------------------------------- */

.ls-drawer {
	position: fixed; inset: 0 0 0 auto; z-index: 120;
	width: min(400px, 88vw); background: #fff;
	display: flex; flex-direction: column;
	box-shadow: var(--ls-sh-3);
	transform: translateX(100%); transition: transform 280ms cubic-bezier(.2, .7, .3, 1);
}
.ls-drawer[hidden] { display: flex; }
.ls-drawer.is-open { transform: none; }

.ls-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--ls-line); }
.ls-drawer-nav { flex: 1; overflow-y: auto; padding: 10px 12px 20px; }
.ls-drawer-nav > a {
	display: block; padding: 13px 12px; border-radius: var(--ls-r-sm);
	font-family: var(--ls-head); font-size: 16px; font-weight: 600; color: var(--ls-ink);
}
.ls-drawer-nav > a:hover { background: var(--ls-brand-050); color: var(--ls-brand); }

.ls-acc { border-bottom: 1px solid var(--ls-line-2); }
.ls-acc-btn {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; padding: 13px 12px; background: none; border: 0; text-align: left;
	font-family: var(--ls-head); font-size: 16px; font-weight: 600; color: var(--ls-ink);
}
.ls-acc-btn .ls-ic { transition: transform var(--ls-t); color: var(--ls-mute); }
.ls-acc-btn[aria-expanded="true"] { color: var(--ls-brand); }
.ls-acc-btn[aria-expanded="true"] .ls-ic { transform: rotate(180deg); }
.ls-acc-panel { padding: 0 12px 12px 22px; }
.ls-acc-panel[hidden] { display: none; }
.ls-acc-panel a { display: block; padding: 8px 0; font-size: 14.5px; color: var(--ls-body); }
.ls-acc-panel a:hover { color: var(--ls-brand); }
.ls-acc-all { font-weight: 700; color: var(--ls-brand); }

.ls-drawer-foot { display: grid; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--ls-line); }

.ls-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(9, 24, 18, .5); opacity: 0; transition: opacity var(--ls-t); }
.ls-scrim[hidden] { display: none; }
.ls-scrim.is-on { opacity: 1; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.ls-hero { position: relative; overflow: hidden; background: var(--ls-surf); }
.ls-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(760px 420px at 88% -10%, var(--ls-brand-100), transparent 62%),
		radial-gradient(520px 380px at 2% 105%, var(--ls-accent-100), transparent 60%);
}
.ls-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image:
		linear-gradient(var(--ls-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--ls-line) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
}

.ls-hero-in {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 56px; align-items: center;
	padding: clamp(48px, 7vw, 88px) var(--ls-gut) clamp(56px, 8vw, 96px);
}

.ls-hero-t {
	font-size: clamp(34px, 5vw, 58px);
	font-weight: 800;
	letter-spacing: -.03em;
	margin-bottom: 20px;
}
.ls-hero-t em {
	font-style: normal; position: relative; white-space: nowrap; color: var(--ls-brand);
}
.ls-hero-t em::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .16em;
	background: var(--ls-accent); opacity: .35; border-radius: 3px; z-index: -1;
}
.ls-hero-x { font-size: clamp(16px, 1.5vw, 18.5px); max-width: 56ch; margin-bottom: 30px; }

.ls-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.ls-hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 24px; border-top: 1px solid var(--ls-line); }
.ls-hero-facts div { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ls-ink); font-family: var(--ls-head); }
.ls-hero-facts .ls-ic { width: 18px; height: 18px; color: var(--ls-brand); }

/* Hero collage ------------------------------------------------------------- */

/* The badge sits in reserved space under the collage so it can never
   cover a tile caption. */
.ls-hero-art { position: relative; padding-bottom: 76px; }
.ls-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ls-hero-tile {
	position: relative; display: block; overflow: hidden;
	background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-r-lg);
	box-shadow: var(--ls-sh-2);
	aspect-ratio: 1 / 1;
}
.ls-hero-tile:nth-child(1) { transform: translateY(-18px); }
.ls-hero-tile:nth-child(4) { transform: translateY(18px); }
.ls-hero-tile img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform 400ms cubic-bezier(.2, .7, .3, 1); }
.ls-hero-tile:hover img { transform: scale(1.06); }
.ls-hero-tile span {
	position: absolute; left: 12px; right: 12px; bottom: 11px;
	font-family: var(--ls-head); font-size: 12px; font-weight: 700; color: var(--ls-ink);
	background: rgba(255, 255, 255, .9); border-radius: var(--ls-r-full);
	padding: 5px 11px; text-align: center;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ls-hero-badge {
	position: absolute; left: 0; bottom: 0;
	display: flex; align-items: center; gap: 12px;
	background: var(--ls-brand-900); color: #fff;
	padding: 14px 20px; border-radius: var(--ls-r);
	box-shadow: var(--ls-sh-3);
}
.ls-hero-badge .ls-ic { width: 30px; height: 30px; color: var(--ls-accent); }
.ls-hero-badge strong { display: block; font-family: var(--ls-head); font-size: 15px; }
.ls-hero-badge span { font-size: 12.5px; color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */

.ls-sec { padding: clamp(56px, 7vw, 92px) 0; }
.ls-sec-tight { padding: clamp(40px, 5vw, 64px) 0; }
.ls-sec-surf { background: var(--ls-surf); }
.ls-sec-dark { background: var(--ls-brand-900); color: rgba(255, 255, 255, .8); }
.ls-sec-dark :where(h1, h2, h3, h4) { color: #fff; }

.ls-sechead { max-width: 720px; margin-bottom: 44px; }
.ls-sechead.is-center { margin-inline: auto; text-align: center; }
.ls-sechead.is-center .ls-eyebrow { justify-content: center; }
.ls-sechead h2 { font-size: clamp(27px, 3.4vw, 40px); margin-bottom: 14px; }
.ls-sechead p { font-size: 17px; }

.ls-sechead-row {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
	margin-bottom: 40px; flex-wrap: wrap;
}
.ls-sechead-row .ls-sechead { margin-bottom: 0; }

.ls-grid { display: grid; gap: 22px; }
.ls-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ls-grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.ls-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Trust strip -------------------------------------------------------------- */

.ls-trust { border-block: 1px solid var(--ls-line); background: #fff; }
.ls-trust-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 34px; padding: 22px 0; }
.ls-trust-item { display: flex; align-items: center; gap: 12px; }
.ls-trust-item .ls-ic { width: 24px; height: 24px; color: var(--ls-brand); }
.ls-trust-item strong { display: block; font-family: var(--ls-head); font-size: 15px; color: var(--ls-ink); line-height: 1.3; }
.ls-trust-item span { font-size: 13px; color: var(--ls-mute); }

/* Family cards ------------------------------------------------------------- */

.ls-fam {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-r-lg);
	transition: border-color var(--ls-t), box-shadow var(--ls-t), transform var(--ls-t);
}
.ls-fam:hover { border-color: var(--ls-brand); box-shadow: var(--ls-sh-2); transform: translateY(-3px); }
.ls-fam-media {
	display: grid; place-items: center; aspect-ratio: 16 / 11;
	background: var(--ls-surf); border-bottom: 1px solid var(--ls-line); overflow: hidden;
}
.ls-fam-media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; mix-blend-mode: multiply; transition: transform 400ms cubic-bezier(.2, .7, .3, 1); }
.ls-fam:hover .ls-fam-media img { transform: scale(1.05); }
.ls-fam-body { position: relative; display: block; flex: 1; padding: 20px 22px 22px; }
.ls-fam-count {
	display: inline-block; margin-bottom: 9px;
	font-family: var(--ls-head); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ls-brand);
}
.ls-fam-t { display: block; font-family: var(--ls-head); font-size: 19px; font-weight: 700; color: var(--ls-ink); line-height: 1.25; margin-bottom: 8px; }
.ls-fam-sub { display: block; font-size: 13.5px; color: var(--ls-mute); line-height: 1.55; padding-right: 40px; }
.ls-fam-go {
	position: absolute; right: 20px; bottom: 20px;
	display: grid; place-items: center; width: 38px; height: 38px;
	background: var(--ls-brand-050); color: var(--ls-brand); border-radius: var(--ls-r-full);
	transition: background var(--ls-t), color var(--ls-t), transform var(--ls-t);
}
.ls-fam:hover .ls-fam-go { background: var(--ls-brand); color: #fff; transform: translateX(3px); }

/* Product cards ------------------------------------------------------------ */

.ls-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-r);
	transition: border-color var(--ls-t), box-shadow var(--ls-t), transform var(--ls-t);
}
.ls-card:hover { border-color: var(--ls-brand); box-shadow: var(--ls-sh-2); transform: translateY(-3px); }
.ls-card-media {
	display: grid; place-items: center; aspect-ratio: 4 / 3;
	background: var(--ls-surf); border-bottom: 1px solid var(--ls-line); overflow: hidden;
}
.ls-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; mix-blend-mode: multiply; transition: transform 400ms cubic-bezier(.2, .7, .3, 1); }
.ls-card:hover .ls-card-media img { transform: scale(1.06); }
.ls-card-ph { display: grid; place-items: center; color: var(--ls-line); }
.ls-card-ph .ls-ic { width: 46px; height: 46px; }

.ls-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.ls-card-cat { margin: 0 0 6px; font-family: var(--ls-head); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-brand); }
.ls-card-t { font-size: 16px; line-height: 1.32; margin-bottom: 8px; }
.ls-card-t a { color: var(--ls-ink); }
.ls-card-t a:hover { color: var(--ls-brand); }
.ls-card-x { font-size: 13.8px; color: var(--ls-mute); line-height: 1.6; margin-bottom: 14px; }
.ls-card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ls-line-2); display: flex; flex-direction: column; gap: 10px; }

/* Buttons injected by the Lifesol Enquiry Cart plugin */
.ls-enqbtns .lsq-btns { margin: 0; }
.ls-enqbtns-loop .lsq-btns { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.ls-enqbtns .lsq-add,
.ls-enqbtns .lsq-brochure { border-radius: var(--ls-r-full); font-family: var(--ls-head); }

/* Feature cards ------------------------------------------------------------ */

.ls-feature {
	position: relative; padding: 28px 26px 26px;
	background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-r);
	transition: border-color var(--ls-t), box-shadow var(--ls-t), transform var(--ls-t);
}
.ls-feature:hover { border-color: var(--ls-brand); box-shadow: var(--ls-sh-1); transform: translateY(-2px); }
.ls-feature-ic {
	display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px;
	background: var(--ls-brand-050); color: var(--ls-brand); border-radius: 14px;
}
.ls-feature-ic .ls-ic { width: 26px; height: 26px; }
.ls-feature h3 { font-size: 18px; margin-bottom: 9px; }
.ls-feature p { font-size: 14.6px; color: var(--ls-body); margin: 0; }
.ls-feature-n {
	position: absolute; top: 22px; right: 24px;
	font-family: var(--ls-head); font-size: 34px; font-weight: 800; color: var(--ls-line);
	font-variant-numeric: tabular-nums; line-height: 1;
}

/* Stats -------------------------------------------------------------------- */

.ls-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px; background: rgba(255, 255, 255, .12); border-radius: var(--ls-r); overflow: hidden; }
.ls-stat { background: var(--ls-brand-900); padding: 30px 26px; text-align: center; }
.ls-stat-n { display: block; font-family: var(--ls-head); font-size: clamp(32px, 4vw, 46px); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ls-stat-l { display: block; margin-top: 10px; font-size: 13.5px; color: rgba(255, 255, 255, .7); }

/* Split (image + copy) ----------------------------------------------------- */

.ls-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.ls-split-media { position: relative; }
.ls-split-media img { width: 100%; border-radius: var(--ls-r-lg); border: 1px solid var(--ls-line); box-shadow: var(--ls-sh-2); }
.ls-split-media::after {
	content: ""; position: absolute; inset: auto -14px -14px auto; width: 58%; height: 58%;
	border: 2px solid var(--ls-accent); border-radius: var(--ls-r-lg); opacity: .45; z-index: -1;
}

.ls-factlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ls-factlist li { display: flex; align-items: center; gap: 10px; font-size: 14.4px; color: var(--ls-body); }
.ls-factlist .ls-ic { width: 18px; height: 18px; color: var(--ls-brand); flex: 0 0 auto; }

.ls-checklist { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.ls-checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.4px; }
.ls-checklist .ls-ic { width: 20px; height: 20px; margin-top: 3px; color: var(--ls-brand); flex: 0 0 auto; }

/* Quality / quote ---------------------------------------------------------- */

.ls-quote {
	position: relative; padding: 34px 34px 34px 78px;
	background: #fff; border: 1px solid var(--ls-line); border-left: 4px solid var(--ls-accent);
	border-radius: var(--ls-r);
	font-family: var(--ls-head); font-size: clamp(18px, 2.1vw, 23px); font-style: italic;
	line-height: 1.45; color: var(--ls-ink);
}
.ls-quote .ls-ic { position: absolute; left: 30px; top: 34px; width: 32px; height: 32px; color: var(--ls-accent); opacity: .5; }
.ls-quote cite { display: block; margin-top: 14px; font-size: 14px; font-style: normal; font-weight: 600; color: var(--ls-mute); }

/* Testimonials ------------------------------------------------------------- */

.ls-testi { padding: 26px 26px 24px; background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-r); }
.ls-testi-q { font-size: 15.4px; color: var(--ls-body); margin-bottom: 18px; }
.ls-testi-by { display: flex; align-items: center; gap: 12px; }
.ls-testi-av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--ls-r-full); background: var(--ls-brand-050); color: var(--ls-brand); overflow: hidden; }
.ls-testi-av img { width: 100%; height: 100%; object-fit: cover; }
.ls-testi-by strong { display: block; font-family: var(--ls-head); font-size: 14.5px; color: var(--ls-ink); }
.ls-testi-by span { font-size: 12.5px; color: var(--ls-mute); }

/* CTA band ----------------------------------------------------------------- */

.ls-cta { position: relative; overflow: hidden; background: var(--ls-brand-900); color: rgba(255, 255, 255, .8); }
.ls-cta::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(620px 300px at 80% 0%, rgba(255, 255, 255, .1), transparent 70%);
}
.ls-cta-in {
	position: relative; display: flex; align-items: center; justify-content: space-between;
	gap: 32px; flex-wrap: wrap; padding: clamp(40px, 5vw, 60px) var(--ls-gut);
}
.ls-cta-copy { max-width: 620px; }
.ls-cta-copy h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); margin-bottom: 10px; }
.ls-cta-copy p { font-size: 15.6px; margin: 0; }
.ls-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   8. Page head + breadcrumbs
   -------------------------------------------------------------------------- */

.ls-pagehead { position: relative; overflow: hidden; background: var(--ls-surf); border-bottom: 1px solid var(--ls-line); padding: clamp(28px, 4vw, 46px) 0 clamp(32px, 4.5vw, 52px); }
.ls-pagehead-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 300px at 92% -20%, var(--ls-brand-100), transparent 65%); }
.ls-pagehead .ls-wrap { position: relative; z-index: 1; }
.ls-pagehead-t { font-size: clamp(28px, 4vw, 44px); margin-bottom: 12px; max-width: 20ch; }
.ls-pagehead-x { font-size: 17px; max-width: 65ch; margin: 0; }
.ls-pagehead.is-dark { background: var(--ls-brand-900); border-bottom: 0; color: rgba(255, 255, 255, .78); }
.ls-pagehead.is-dark .ls-pagehead-t { color: #fff; }
/* Brand green on the dark green head is unreadable — use the accent. */
.ls-pagehead.is-dark .ls-eyebrow { color: var(--ls-accent); }
.ls-pagehead.is-dark .ls-crumbs a,
.ls-pagehead.is-dark .ls-crumbs span { color: rgba(255, 255, 255, .7); }
.ls-pagehead.is-dark .ls-crumbs a:hover { color: #fff; }

.ls-crumbs { margin-bottom: 18px; font-size: 13.2px; }
.ls-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ls-crumbs li { display: flex; align-items: center; gap: 6px; }
.ls-crumbs li + li::before { content: "/"; color: var(--ls-line); }
.ls-crumbs a { color: var(--ls-mute); }
.ls-crumbs a:hover { color: var(--ls-brand); }
.ls-crumbs span { color: var(--ls-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Catalogue (sidebar + grid)
   -------------------------------------------------------------------------- */

.ls-catalog { display: grid; grid-template-columns: 286px minmax(0, 1fr); gap: 40px; align-items: start; }

.ls-side { position: sticky; top: 100px; }
.ls-side-box { background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-r); overflow: hidden; }
.ls-side-box + .ls-side-box { margin-top: 18px; }
.ls-side-h {
	padding: 15px 18px; border-bottom: 1px solid var(--ls-line); background: var(--ls-surf);
	font-family: var(--ls-head); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ls-ink);
	margin: 0;
}
.ls-side-body { padding: 8px 10px 12px; }

.ls-tree { list-style: none; margin: 0; padding: 0; }
.ls-tree > li { border-bottom: 1px solid var(--ls-line-2); }
.ls-tree > li:last-child { border-bottom: 0; }
.ls-tree-row { display: flex; align-items: stretch; }
.ls-tree-row > a {
	flex: 1; min-width: 0; padding: 10px 8px; border-radius: 6px;
	font-family: var(--ls-head); font-size: 14.2px; font-weight: 600; color: var(--ls-ink); line-height: 1.35;
}
.ls-tree-row > a:hover { color: var(--ls-brand); }
.ls-tree-row.is-active > a { color: var(--ls-brand); }
.ls-tree-toggle {
	width: 34px; background: none; border: 0; color: var(--ls-mute); display: grid; place-items: center; border-radius: 6px;
}
.ls-tree-toggle:hover { background: var(--ls-brand-050); color: var(--ls-brand); }
.ls-tree-toggle .ls-ic { width: 16px; height: 16px; transition: transform var(--ls-t); }
.ls-tree-toggle[aria-expanded="true"] .ls-ic { transform: rotate(180deg); }
.ls-tree-sub { list-style: none; margin: 0 0 10px; padding: 0 0 0 10px; border-left: 2px solid var(--ls-line); }
.ls-tree-sub[hidden] { display: none; }
.ls-tree-sub a { display: block; padding: 7px 8px; font-size: 13.6px; color: var(--ls-body); border-radius: 6px; }
.ls-tree-sub a:hover { background: var(--ls-brand-050); color: var(--ls-brand); }
.ls-tree-sub a.is-active { color: var(--ls-brand); font-weight: 700; }

.ls-filterbar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--ls-line);
}
.ls-count { font-size: 14px; color: var(--ls-mute); font-variant-numeric: tabular-nums; }
.ls-count strong { color: var(--ls-ink); }

.ls-catsearch { position: relative; display: flex; align-items: center; }
.ls-catsearch .ls-ic { position: absolute; left: 14px; color: var(--ls-mute); width: 17px; height: 17px; }
.ls-catsearch input {
	height: 44px; width: min(320px, 70vw); padding: 0 14px 0 40px;
	border: 1.5px solid var(--ls-line); border-radius: var(--ls-r-full);
	font: inherit; font-size: 14.5px; background: #fff; color: var(--ls-ink);
}
.ls-catsearch input:focus { border-color: var(--ls-brand); }

.ls-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ls-chips a, .ls-chips button {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 38px; padding: 8px 15px;
	background: #fff; border: 1.5px solid var(--ls-line); border-radius: var(--ls-r-full);
	font-family: var(--ls-head); font-size: 13.6px; font-weight: 600; color: var(--ls-ink);
	transition: all var(--ls-t);
}
.ls-chips a:hover, .ls-chips button:hover { border-color: var(--ls-brand); color: var(--ls-brand); background: var(--ls-brand-050); }
.ls-chips .is-on { background: var(--ls-brand); border-color: var(--ls-brand); color: #fff; }
.ls-chips .is-on:hover { background: var(--ls-brand-800); color: #fff; }

.ls-empty { padding: 60px 24px; text-align: center; border: 1px dashed var(--ls-line); border-radius: var(--ls-r); background: var(--ls-surf); }
.ls-empty .ls-ic { width: 40px; height: 40px; color: var(--ls-mute); margin-bottom: 12px; }
.ls-empty h3 { font-size: 19px; margin-bottom: 8px; }

.ls-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
.ls-pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px;
	border: 1.5px solid var(--ls-line); border-radius: var(--ls-r-full);
	font-family: var(--ls-head); font-weight: 600; font-size: 14.5px; color: var(--ls-ink); background: #fff;
}
.ls-pager .page-numbers:hover { border-color: var(--ls-brand); color: var(--ls-brand); }
.ls-pager .page-numbers.current { background: var(--ls-brand); border-color: var(--ls-brand); color: #fff; }

/* --------------------------------------------------------------------------
   10. Single product
   -------------------------------------------------------------------------- */

.ls-pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 56px); align-items: start; }

.ls-pd-gallery { position: sticky; top: 100px; }
.ls-pd-main {
	display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
	background: var(--ls-surf); border: 1px solid var(--ls-line); border-radius: var(--ls-r-lg);
}
.ls-pd-main img { width: 100%; height: 100%; object-fit: contain; padding: 28px; mix-blend-mode: multiply; }
.ls-pd-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ls-pd-thumb {
	width: 78px; height: 78px; padding: 6px; background: #fff;
	border: 1.5px solid var(--ls-line); border-radius: var(--ls-r-sm); cursor: pointer;
	display: grid; place-items: center; transition: border-color var(--ls-t);
}
.ls-pd-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ls-pd-thumb:hover, .ls-pd-thumb.is-on { border-color: var(--ls-brand); }

.ls-pd-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ls-pd-cats a {
	padding: 6px 13px; background: var(--ls-brand-050); border-radius: var(--ls-r-full);
	font-family: var(--ls-head); font-size: 12.6px; font-weight: 600; color: var(--ls-brand);
}
.ls-pd-cats a:hover { background: var(--ls-brand); color: #fff; }

.ls-pd-t { font-size: clamp(24px, 3.2vw, 36px); margin-bottom: 16px; }
.ls-pd-lead { font-size: 16.5px; color: var(--ls-body); margin-bottom: 22px; }
.ls-pd-sku { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13.5px; color: var(--ls-mute); }
.ls-pd-sku code { background: var(--ls-surf); padding: 3px 9px; border-radius: 5px; font-size: 13px; color: var(--ls-ink); }

.ls-pd-actions { padding: 20px; background: var(--ls-surf); border: 1px solid var(--ls-line); border-radius: var(--ls-r); margin-bottom: 24px; }
.ls-pd-actions .ls-enqbtns .lsq-btns { flex-direction: row; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.ls-pd-help { display: flex; align-items: center; gap: 9px; font-size: 13.6px; color: var(--ls-mute); margin: 0; }
.ls-pd-help .ls-ic { width: 17px; height: 17px; color: var(--ls-brand); }

.ls-pd-usp { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ls-pd-usp li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.6px; }
.ls-pd-usp .ls-ic { width: 19px; height: 19px; margin-top: 2px; color: var(--ls-brand); flex: 0 0 auto; }

/* Rendered product copy ---------------------------------------------------- */

.ls-content { font-size: 15.6px; color: var(--ls-body); }
.ls-content :where(h2) { font-size: 24px; margin: 34px 0 12px; }
.ls-content :where(h3, .ls-ct-h) {
	display: block; font-family: var(--ls-head); font-size: 18px; font-weight: 700;
	color: var(--ls-ink); margin: 28px 0 12px; letter-spacing: -.01em;
}
.ls-content :where(h2:first-child, h3:first-child, .ls-ct-h:first-child) { margin-top: 0; }
.ls-content :where(a) { text-decoration: underline; text-underline-offset: 2px; }

.ls-feat { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.ls-feat li { position: relative; padding-left: 30px; font-size: 15.2px; line-height: 1.6; }
.ls-feat li::before {
	content: ""; position: absolute; left: 0; top: .42em; width: 18px; height: 18px;
	border-radius: 50%; background: var(--ls-brand-050);
}
.ls-feat li::after {
	content: ""; position: absolute; left: 5px; top: .62em; width: 8px; height: 4.5px;
	border-left: 2px solid var(--ls-brand); border-bottom: 2px solid var(--ls-brand);
	transform: rotate(-45deg);
}

.ls-tablewrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--ls-line); border-radius: var(--ls-r); background: #fff; }
.ls-tablewrap table { width: 100%; min-width: 440px; border: 0; font-size: 14.2px; }
.ls-tablewrap :where(th, td) { padding: 11px 15px; border: 0; border-bottom: 1px solid var(--ls-line); text-align: left; vertical-align: top; }
.ls-tablewrap :where(thead th) {
	background: var(--ls-brand-050); color: var(--ls-ink);
	font-family: var(--ls-head); font-weight: 700; font-size: 13px;
	letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.ls-tablewrap :where(tbody tr:last-child td) { border-bottom: 0; }
.ls-tablewrap :where(tbody tr:nth-child(even)) { background: var(--ls-surf); }
.ls-tablewrap :where(td) { font-variant-numeric: tabular-nums; }

.ls-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ls-line); margin-bottom: 26px; overflow-x: auto; }
.ls-tab {
	padding: 13px 20px; background: none; border: 0; border-bottom: 3px solid transparent;
	font-family: var(--ls-head); font-size: 15px; font-weight: 600; color: var(--ls-mute); white-space: nowrap;
	transition: color var(--ls-t), border-color var(--ls-t);
}
.ls-tab:hover { color: var(--ls-ink); }
.ls-tab.is-on { color: var(--ls-brand); border-bottom-color: var(--ls-brand); }
.ls-tabpanel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   11. Editorial / generic page content + forms
   -------------------------------------------------------------------------- */

.ls-prose { max-width: 78ch; font-size: 16.4px; }
.ls-prose :where(h2) { font-size: clamp(23px, 2.6vw, 30px); margin: 44px 0 14px; }
.ls-prose :where(h3) { font-size: 20px; margin: 32px 0 10px; }
.ls-prose :where(h2:first-child, h3:first-child) { margin-top: 0; }
.ls-prose :where(blockquote) {
	margin: 26px 0; padding: 20px 26px;
	background: var(--ls-brand-050); border-left: 4px solid var(--ls-accent); border-radius: 0 var(--ls-r) var(--ls-r) 0;
	font-family: var(--ls-head); font-size: 18px; font-style: italic; color: var(--ls-ink);
}
.ls-prose :where(hr) { border: 0; border-top: 1px solid var(--ls-line); margin: 40px 0; }
.ls-prose :where(li) { margin-bottom: 7px; }
.ls-prose :where(img) { border-radius: var(--ls-r); }

.ls-form-card { padding: clamp(24px, 3vw, 34px); background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-r-lg); box-shadow: var(--ls-sh-1); }

.ls-site :where(.ls-form-card input[type="text"], .ls-form-card input[type="email"], .ls-form-card input[type="tel"], .ls-form-card input[type="url"], .ls-form-card input[type="number"], .ls-form-card textarea, .ls-form-card select) {
	width: 100%; min-height: 48px; padding: 12px 15px;
	border: 1.5px solid var(--ls-line); border-radius: var(--ls-r-sm);
	background: #fff; font: inherit; font-size: 15px; color: var(--ls-ink);
	transition: border-color var(--ls-t), box-shadow var(--ls-t);
}
.ls-site :where(.ls-form-card input:focus, .ls-form-card textarea:focus, .ls-form-card select:focus) {
	border-color: var(--ls-brand); box-shadow: 0 0 0 4px var(--ls-brand-050);
}
.ls-site :where(.ls-form-card label) { display: block; margin-bottom: 6px; font-family: var(--ls-head); font-size: 14px; font-weight: 600; color: var(--ls-ink); }
.ls-site :where(.ls-form-card p) { margin-bottom: 16px; }
.ls-site :where(.ls-form-card input[type="submit"], .ls-form-card button[type="submit"], .ls-form-card .wpcf7-submit) {
	width: auto; min-height: 50px; padding: 14px 30px;
	background: var(--ls-brand); color: #fff; border: 0; border-radius: var(--ls-r-full);
	font-family: var(--ls-head); font-size: 15.5px; font-weight: 600; cursor: pointer;
	transition: background var(--ls-t);
}
.ls-site :where(.ls-form-card input[type="submit"]:hover, .ls-form-card .wpcf7-submit:hover) { background: var(--ls-brand-800); }

.ls-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(30px, 4vw, 54px); align-items: start; }
.ls-info { display: grid; gap: 14px; }
.ls-info-item { display: flex; gap: 14px; padding: 20px; background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-r); }
.ls-info-item .ls-ic { width: 22px; height: 22px; color: var(--ls-brand); flex: 0 0 auto; margin-top: 2px; }
.ls-info-item strong { display: block; font-family: var(--ls-head); font-size: 14px; color: var(--ls-ink); margin-bottom: 4px; }
.ls-info-item span, .ls-info-item a { font-size: 15px; color: var(--ls-body); line-height: 1.6; }
.ls-info-item a:hover { color: var(--ls-brand); }

/* Blog --------------------------------------------------------------------- */

.ls-post { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-r); transition: border-color var(--ls-t), box-shadow var(--ls-t), transform var(--ls-t); }
.ls-post:hover { border-color: var(--ls-brand); box-shadow: var(--ls-sh-2); transform: translateY(-3px); }
.ls-post-media { aspect-ratio: 16 / 10; background: var(--ls-surf); overflow: hidden; }
.ls-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.2, .7, .3, 1); }
.ls-post:hover .ls-post-media img { transform: scale(1.05); }
.ls-post-body { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 22px; }
.ls-post-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.6px; color: var(--ls-mute); }
.ls-post-meta .ls-ic { width: 15px; height: 15px; }
.ls-post-t { font-size: 18px; line-height: 1.3; margin-bottom: 10px; }
.ls-post-t a { color: var(--ls-ink); }
.ls-post-t a:hover { color: var(--ls-brand); }
.ls-post-x { font-size: 14.4px; color: var(--ls-mute); margin-bottom: 16px; }
.ls-post-body .ls-link { margin-top: auto; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.ls-footer { background: var(--ls-brand-900); color: rgba(255, 255, 255, .72); padding-top: clamp(48px, 6vw, 72px); }
.ls-footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 40px; padding-bottom: 46px; }
.ls-footer :where(h3) { color: #fff; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.ls-footer :where(a) { color: rgba(255, 255, 255, .72); }
.ls-footer :where(a:hover) { color: var(--ls-accent); }
.ls-footer .ls-logo-text strong { color: #fff; }
.ls-footer .ls-logo-text em { color: rgba(255, 255, 255, .55); }
.ls-footer .ls-logo-img { filter: brightness(0) invert(1); opacity: .95; }

.ls-footer-about { margin: 18px 0; font-size: 14.4px; line-height: 1.7; max-width: 42ch; }
.ls-footer-badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ls-footer-badges li { display: flex; align-items: center; gap: 9px; font-size: 13.4px; }
.ls-footer-badges .ls-ic { width: 17px; height: 17px; color: var(--ls-accent); }

.ls-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ls-footer-col ul a { font-size: 14.4px; }

.ls-addr { display: flex; gap: 11px; margin-bottom: 18px; }
.ls-addr .ls-ic { width: 18px; height: 18px; color: var(--ls-accent); flex: 0 0 auto; margin-top: 3px; }
.ls-addr strong { display: block; color: #fff; font-family: var(--ls-head); font-size: 13.4px; margin-bottom: 3px; }
.ls-addr span { font-size: 13.8px; line-height: 1.65; }

.ls-footer-links { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.ls-footer-links li, .ls-footer-links a { display: flex; align-items: center; gap: 9px; font-size: 14.2px; }
.ls-footer-links .ls-ic { width: 17px; height: 17px; color: var(--ls-accent); }

.ls-footer-bot {
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	padding: 20px 0 24px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.ls-footer-bot p { margin: 0; font-size: 13.4px; }
.ls-totop {
	display: inline-flex; align-items: center; gap: 7px;
	background: none; border: 1.5px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .8);
	padding: 9px 17px; border-radius: var(--ls-r-full);
	font-family: var(--ls-head); font-size: 13.4px; font-weight: 600; transition: all var(--ls-t);
}
.ls-totop:hover { border-color: var(--ls-accent); color: var(--ls-accent); }
.ls-totop .ls-ic { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   12b. Playing nicely with the other plugins in the corner
   -------------------------------------------------------------------------- */

/* The enquiry basket button (Lifesol Enquiry Cart) and the Chaty bubble both
   want the bottom-left corner. Lift ours clear when Chaty is active. */
.ls-has-chaty #lsq-fab { bottom: 104px; }
@media (max-width: 680px) { .ls-has-chaty #lsq-fab { bottom: 92px; } }

/* Belt and braces: if the old theme's JS is ever re-enabled, its leftover
   off-canvas shell (which renders the literal text "undefined") stays hidden. */
.ls-site #sidr-main,
.ls-site .sidr { display: none; }

/* --------------------------------------------------------------------------
   13. Motion
   -------------------------------------------------------------------------- */

/* Content is visible by default. It is only hidden for the reveal animation
   when the inline probe in <head> has confirmed that the script which reveals
   it can actually run — so a JS error, a blocked file or an old browser can
   never leave the page blank. */
.ls-reveal { opacity: 1; transform: none; }

.ls-js .ls-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 520ms ease, transform 520ms cubic-bezier(.2, .7, .3, 1);
}
.ls-js .ls-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.ls-site *,
	.ls-site *::before,
	.ls-site *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.ls-js .ls-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.ls-catalog { grid-template-columns: 250px minmax(0, 1fr); gap: 30px; }
	.ls-footer-top { grid-template-columns: 1.4fr 1fr 1.4fr; }
	.ls-footer-col:nth-child(3) { display: none; }
}

@media (max-width: 1040px) {
	.ls-nav, .ls-header-cta { display: none; }
	.ls-burger { display: grid; }
	.ls-header-in { min-height: 68px; justify-content: space-between; }
	.ls-hero-in { grid-template-columns: 1fr; gap: 44px; }
	/* No `order` here on purpose: the headline should be read and seen first,
	   and visual order must match DOM order for screen-reader users. */
	.ls-hero-art { max-width: 520px; }
	.ls-pd { grid-template-columns: 1fr; }
	.ls-pd-gallery { position: static; max-width: 520px; }
	.ls-contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.ls-catalog { grid-template-columns: 1fr; }
	.ls-side { position: static; }
	.ls-topbadges li:nth-child(n+2) { display: none; }
	.ls-footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
	.ls-footer-col:nth-child(3) { display: block; }
}

@media (max-width: 680px) {
	:root { --ls-gut: 16px; }
	.ls-topbar { font-size: 12.4px; }
	.ls-topbadges { display: none; }
	.ls-topcontact { width: 100%; justify-content: space-between; gap: 10px; }
	/* Icon-only links still need a real tap target. */
	.ls-topcontact a { min-height: 36px; padding: 6px 10px; }
	/* Hidden visually, not from screen readers — display:none here would
	   leave these links with no accessible name at all. */
	.ls-topcontact a span {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.ls-topcontact .ls-top-wa span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
	.ls-hero-facts { gap: 10px 18px; }
	.ls-hero-art { padding-bottom: 0; }
	.ls-hero-badge { position: static; margin-top: 16px; }
	.ls-sechead-row { flex-direction: column; align-items: flex-start; }
	.ls-cta-in { flex-direction: column; align-items: flex-start; }
	.ls-cta-actions { width: 100%; }
	.ls-cta-actions .ls-btn { flex: 1; }
	.ls-footer-top { grid-template-columns: 1fr; gap: 30px; }
	.ls-quote { padding: 26px 22px 26px 22px; }
	.ls-quote .ls-ic { position: static; display: block; margin-bottom: 10px; }
	.ls-filterbar { align-items: stretch; }
	.ls-catsearch input { width: 100%; }
	.ls-pd-main img { padding: 16px; }
}

@media (max-width: 420px) {
	.ls-hero-grid { gap: 10px; }
	.ls-hero-tile:nth-child(1), .ls-hero-tile:nth-child(4) { transform: none; }
	.ls-btn { padding: 12px 18px; font-size: 14.5px; }
}

/* --------------------------------------------------------------------------
   15. Print
   -------------------------------------------------------------------------- */

@media print {
	.ls-topbar, .ls-header, .ls-drawer, .ls-scrim, .ls-cta, .ls-footer, .ls-previewbar, #lsq-fab { display: none; }
	.ls-site { color: #000; }
	.ls-js .ls-reveal { opacity: 1; transform: none; }
}