/*
Theme Name: Living Earth Store
Theme URI: https://store.living-earth.africa
Author: Living Earth
Description: Fast, phone-first block theme for the Living Earth marketplace. Works with WooCommerce and the Living Earth Market plugin.
Version: 0.7.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
License: GPLv2 or later
Text Domain: living-earth-store
Update URI: https://ops.immobohm.com/toolbox/living-earth-store
*/

/* Living Earth Store 0.5.0 — base styles. Colours and type live in theme.json.
 * Marketplace colours: navy #203b5f, lime #cadb36, orange #d9622b, cream ground #faf5ea, warm white cards #fffdf8.
 * Headings Fraunces (serif), text Nunito; both self-hosted in assets/fonts (SIL OFL).
 * Navy on lime 7.4:1. White on lime is never used. Orange text and badges use #b04a1c. */

:root {
	--les-radius-s: 6px;
	--les-radius-m: 12px;
	--les-focus: 3px solid #1f6feb;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Visible keyboard focus everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--les-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Skip link */
.les-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	padding: .75rem 1rem;
	font-weight: 600;
}
.les-skip:focus { left: 1rem; top: 1rem; }

/* ---------- Header: lime band, navy category bar ---------- */
.les-header { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--ink); }
.les-header a { color: var(--wp--preset--color--ink); }
.les-logo { display: block; color: var(--wp--preset--color--ink); line-height: 0; }
.les-logo svg { height: 64px; width: auto; display: block; }
.les-search { flex: 1 1 260px; max-width: 420px; }
.les-header .wp-block-search__inside-wrapper { background: #fff; border: 0; border-radius: 8px; padding: 0; overflow: hidden; }
.les-header .wp-block-search__input { min-height: 46px; border: 0; padding: 0 14px; background: #fff; color: var(--wp--preset--color--ink-deep); }
.les-header .wp-block-search__button { min-height: 46px; min-width: 50px; border-radius: 0; margin: 0; background: #eef0f2 !important; color: var(--wp--preset--color--ink) !important; }
.les-header .wc-block-mini-cart__button,
.les-header .wc-block-customer-account a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--wp--preset--color--ink); }
.les-header .wc-block-mini-cart__badge { background: var(--wp--preset--color--ink); color: #fff; }
.les-header .les-nav { font-size: 1rem; font-weight: 600; }
.les-header .les-nav .wp-block-navigation-item__label { white-space: nowrap; } /* Labels never wrap (issue #32). */
.wp-block-navigation__submenu-icon { display: none; } /* No menu arrows (issue #32). */
.les-header .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; justify-content: center; }
.les-catbar { background: var(--wp--preset--color--ink); position: relative; z-index: 50; }

/* ---------- Mega menu ---------- */
.les-mega__bar { list-style: none; margin: 0 auto; padding: 0 16px; max-width: 1200px; display: flex; gap: 0 .25rem; overflow-x: auto; scrollbar-width: none; }
.les-mega__bar::-webkit-scrollbar { display: none; }
.les-mega__top {
	display: flex; align-items: center; gap: .3rem;
	min-height: 52px; padding: 0 .75rem;
	color: #fff; background: none; border: 0; border-radius: 0;
	font: inherit; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer;
	border-bottom: 3px solid transparent;
}
.les-mega__top:hover, .les-mega__top:focus-visible { color: var(--wp--preset--color--lime); }
.les-mega__top[aria-expanded="true"] { color: var(--wp--preset--color--lime); border-bottom-color: var(--wp--preset--color--lime); }
.les-mega__map { color: var(--wp--preset--color--lime); font-weight: 700; }
.les-mega__panel {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink-deep);
	border-top: 3px solid var(--wp--preset--color--lime);
	box-shadow: 0 12px 28px rgba(16, 36, 58, .18);
	max-height: calc(100vh - 160px); overflow-y: auto;
}
.les-mega__inner { max-width: 1200px; margin: 0 auto; padding: 20px 16px 24px; display: grid; grid-template-columns: 1fr 200px; gap: 24px; box-sizing: border-box; }
.les-mega__all { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--wp--preset--color--ink); font-size: 1.1rem; text-underline-offset: 4px; }
.les-mega__links ul { list-style: none; margin: .5rem 0 0; padding: 0; columns: 4 190px; column-gap: 20px; }
.les-mega__links li { break-inside: avoid; }
.les-mega__links li a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding: 0 .6rem; border-radius: 8px; color: var(--wp--preset--color--ink-deep); text-decoration: none; }
.les-mega__links li a:hover, .les-mega__links li a:focus-visible { background: var(--wp--preset--color--lime-soft); color: var(--wp--preset--color--ink); }
.les-mega__count { font-size: .8rem; color: var(--wp--preset--color--ink-soft); background: var(--wp--preset--color--ground); border-radius: 999px; padding: .1rem .5rem; }
.les-mega__feature { display: grid; gap: .25rem; align-content: start; color: var(--wp--preset--color--ink-deep); text-decoration: none; font-size: .95rem; }
.les-mega__feature img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--wp--preset--color--ground); }
.les-mega__feature:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.les-mega__new { font-size: .75rem; font-weight: 700; color: var(--wp--preset--color--orange-text); text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
.les-mega__by { color: var(--wp--preset--color--ink-soft); font-size: .875rem; }
@media (max-width: 859px) {
	.les-mega__inner { grid-template-columns: 1fr; padding-top: 12px; }
	.les-mega__links ul { columns: 2 140px; column-gap: 8px; }
	.les-mega__feature { display: none; }
}
@media (max-width: 599px) {
	.les-logo svg { height: 46px; }
	.les-search { order: 3; flex-basis: 100%; max-width: none; }
	.les-header__tools .les-nav { order: 3; }
}

/* Sell / buy bands */
.les-bands { display: grid; grid-template-columns: 1fr 1fr; }
.les-band { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 72px; padding: .75rem 1rem; font-size: clamp(1.2rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: .01em; text-decoration: none; }
.les-band--sell { background: var(--wp--preset--color--orange); color: #fff; }
.les-band--buy { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--ink); }
.les-band:hover { text-decoration: underline; text-underline-offset: 5px; }
.les-band--sell:hover, .les-band--sell:focus { color: #fff; }
@media (max-width: 599px) { .les-bands { grid-template-columns: 1fr; } }

/* ---------- Front page ---------- */
/* The map sits beside the headline on a PC and right under it on a phone. */
.les-hero--map { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.les-hero--map > * { margin-block: 0 !important; }
.les-hero__text > * + * { margin-block-start: 1.1rem; }
.les-hero--map h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.1; }
@media (max-width: 859px) {
	.les-hero--map { grid-template-columns: 1fr; }
}
.les-hero h1 {
	max-width: 18ch;
	text-wrap: balance;
}
.les-hero p { max-width: 52ch; }

.les-promise {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.les-promise p { margin: 0; max-width: 34ch; }

/* ---------- Product grid (classic WooCommerce markup) ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: 1.75rem 1.25rem;
	margin: 0 0 2rem !important;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	position: relative;
}
.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--les-radius-m);
	margin: 0 0 .5rem !important;
	background: var(--wp--preset--color--lime-soft);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem !important;
	font-weight: 600;
	line-height: 1.3;
	padding: 0 !important;
	color: var(--wp--preset--color--ink);
}
/* Who grew it: shown by the Market plugin under the title. */
.woocommerce ul.products li.product .lem-grower {
	font-size: .95rem;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}
.lem-grower .lem-grower__town { color: var(--wp--preset--color--ink-soft); }

.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--ink) !important;
	font-size: 1.05rem !important;
	font-weight: 700;
	margin: 0 !important;
}
.woocommerce ul.products li.product .button {
	margin-top: auto !important;
	align-self: flex-start;
}
.woocommerce ul.products li.product .onsale {
	position: absolute !important;
	top: .6rem !important;
	left: .6rem !important;
	right: auto !important;
	margin: 0 !important;
	z-index: 2;
}

/* Buttons: one style for WooCommerce and core. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link) {
	background: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--ink) !important;
	border-radius: var(--les-radius-s) !important;
	font-weight: 700 !important;
	box-sizing: border-box;
	min-height: 44px;
	height: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: .6rem 1.1rem !important;
	border: 0 !important;
	line-height: 1.2 !important;
	font-size: 1rem !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: #d7e65a !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wp--preset--color--ink) !important;
	color: #fff !important;
}

.woocommerce span.onsale {
	background: var(--wp--preset--color--orange-text) !important;
	color: #fff !important;
	border-radius: 999px !important;
	min-height: auto !important;
	line-height: 1 !important;
	padding: .45rem .7rem !important;
	font-weight: 700;
}

/* Single product */
.woocommerce div.product .product_title { color: var(--wp--preset--color--ink); }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--wp--preset--color--ink) !important; font-weight: 700; }
.woocommerce div.product div.images img { border-radius: var(--les-radius-m); }
.woocommerce div.product form.cart .qty { height: 44px; width: 4.5rem; padding: 0 .5rem; border: 1.5px solid var(--wp--preset--color--line-strong); border-radius: var(--les-radius-s); }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: .5rem; }
.woocommerce div.product form.cart .variations select { min-height: 44px; min-width: 12rem; max-width: 100%; border-radius: var(--les-radius-s); }
.woocommerce div.product form.cart .single_variation_wrap { width: 100%; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.woocommerce div.product .lem-grower--single { margin-top: .25rem; }

/* Phones: photo above the details, one column. */
@media (max-width: 768px) {
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary,
	.woocommerce #content div.product div.images,
	.woocommerce #content div.product div.summary {
		float: none !important;
		width: 100% !important;
	}
	.woocommerce div.product form.cart .variations th,
	.woocommerce div.product form.cart .variations td { display: block; padding: 0 0 .35rem; }
	.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0 .25rem .25rem 0 !important; }
	.woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count { float: none; margin: 0 0 1rem; }
	.woocommerce .woocommerce-ordering select { min-height: 44px; width: 100%; }
	.woocommerce-cart table.cart img { width: 64px; }
}

/* Notices */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--wp--preset--color--lime) !important;
	background: var(--wp--preset--color--lime-soft) !important;
}
.woocommerce-error { border-top-color: var(--wp--preset--color--alert) !important; }

/* Tables fold into cards on phones */
@media (max-width: 640px) {
	.woocommerce table.shop_table_responsive tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
}

/* ---------- Vendor shop (from the Market plugin) ---------- */
.lem-shop-head {
	background: var(--wp--preset--color--lime-soft);
	border-radius: var(--les-radius-m);
	padding: clamp(1.25rem, 4vw, 2.5rem);
	display: grid;
	gap: 1rem;
	grid-template-columns: auto 1fr;
	align-items: center;
	margin-bottom: 2rem;
}
.lem-shop-head img {
	width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
	background: #fff;
}
.lem-shop-head h1 { margin: 0; }
.lem-shop-head p { margin: .25rem 0 0; max-width: 60ch; }
@media (max-width: 520px) { .lem-shop-head { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.les-footer { background: var(--wp--preset--color--ink); color: #fff; }
.les-footer a, .les-footer h2, .les-footer .wp-block-site-title a { color: #fff; }
.les-footer .has-ink-soft-color, .les-footer .les-version { color: #c4cfdc !important; }
.les-footer a:hover { color: var(--wp--preset--color--lime); }
.les-footer a { text-underline-offset: 3px; }
.les-version { font-size: .8rem; color: var(--wp--preset--color--ink-soft); }

/* ---------- Platform pages: coming soon, 404, nothing found ----------
 * One look for every page the platform draws: lime band, white card on the
 * pale ground, a short kicker, a heading that says what happened, one
 * sentence on what to do, and buttons that name the next step. */
.les-page { padding: var(--wp--preset--spacing--50) 16px var(--wp--preset--spacing--60); background: var(--wp--preset--color--ground); }
.les-page-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(16, 36, 58, .06), 0 6px 18px rgba(16, 36, 58, .06);
	padding: clamp(20px, 4vw, 36px);
	box-sizing: border-box;
}
.les-page-card > * { margin-block: 0; }
.les-page-card > * + * { margin-block-start: 1rem; }
.les-page-card h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; text-wrap: balance; color: var(--wp--preset--color--ink); }
.les-kicker {
	display: inline-block;
	background: var(--wp--preset--color--lime-soft);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	padding: .3rem .8rem;
	font-size: .875rem;
	font-weight: 700;
}
.les-lead { font-size: 1.15rem; color: var(--wp--preset--color--ink-deep); }
.les-actions { gap: .75rem; margin-block-start: 1.5rem !important; }
.les-actions .wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--ink);
	padding: calc(.7rem - 2px) calc(1.2rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--lime-soft); }
.les-page-search .wp-block-search__inside-wrapper { border: 1px solid var(--wp--preset--color--line-strong); border-radius: 8px; padding: 0; overflow: hidden; }
.les-page-search .wp-block-search__input { min-height: 46px; border: 0; padding: 0 14px; font-size: 1rem; }
.les-page-search .wp-block-search__button { min-height: 46px; margin: 0; border-radius: 0; }
.les-tile {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--wp--preset--color--lime-soft);
	color: var(--wp--preset--color--ink);
	display: inline-grid;
	place-items: center;
}

/* Coming soon */
body:has(.les-soon) { background: var(--wp--preset--color--ground); }
.les-soon__band { background: var(--wp--preset--color--lime); padding: 28px 16px 96px; }
.les-soon__band .les-logo { display: flex; justify-content: center; }
.les-soon__band .les-logo svg { height: auto; width: min(100%, 320px); }
.les-soon { margin-top: -72px !important; padding: 0 16px; }
.les-soon__points { list-style: none; padding: 0; display: grid; gap: .75rem; margin-block-start: 1.5rem !important; }
.les-soon__points li { display: flex; align-items: center; gap: .85rem; font-weight: 600; }
.les-soon__foot { padding: 8px 16px 32px; }
.les-soon__foot .wp-block-group { justify-content: center !important; gap: .25rem 1.5rem; margin-top: 1rem !important; }
@media (max-width: 599px) {
	.les-actions, .les-actions .wp-block-button { width: 100%; }
	.les-actions .wp-block-button__link { width: 100%; justify-content: center; }
}
@media (min-width: 640px) {
	.les-soon__points { grid-template-columns: repeat(3, 1fr); }
	.les-soon__points li { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* Nothing found in the shop */
.les-none { margin: 0 0 2rem; }
.les-none h2 { font-size: 1.5rem; margin: 0 0 .5rem; }
.les-none ul { margin: .5rem 0 0; padding-left: 1.2em; }
.les-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0 !important; margin: .75rem 0 0 !important; }
.les-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
	background: var(--wp--preset--color--paper);
}
.les-chips a:hover { background: var(--wp--preset--color--lime-soft); border-color: var(--wp--preset--color--ink); }

/* ---------- Account pages: log in, register, lost and new password ----------
 * Same card as the platform pages, so a customer meets one look from the
 * shop to the login. */
.woocommerce-account:not(.logged-in) .wp-block-post-title,
.woocommerce-lost-password .wp-block-post-title { text-align: center; }
.woocommerce-account:not(.logged-in) .woocommerce,
.woocommerce-lost-password .woocommerce { max-width: 480px; margin-inline: auto; }
.woocommerce-account:not(.logged-in) .woocommerce:has(.u-columns) { max-width: 980px; }
.woocommerce-account:not(.logged-in) .woocommerce h2 { font-size: 1.35rem; margin: 0 0 .75rem; }
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.woocommerce-ResetPassword,
.woocommerce form.lost_reset_password {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(16, 36, 58, .06), 0 6px 18px rgba(16, 36, 58, .06);
	padding: clamp(20px, 4vw, 28px) !important;
	margin: 0 0 1rem !important;
}
.woocommerce form .form-row { padding: 0; margin: 0 0 1rem; }
.woocommerce form .form-row label { font-weight: 600; margin-bottom: .35rem; display: block; }
.woocommerce form .form-row .required { color: var(--wp--preset--color--alert); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	box-sizing: border-box;
	min-height: 44px;
	padding: 8px 12px;
	font-size: 1rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 8px;
	background: #fff;
	color: var(--wp--preset--color--ink-deep);
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--wp--preset--color--ink); }
.woocommerce .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-direction: column; gap: .75rem; align-items: stretch; }
.woocommerce .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: .6rem; font-weight: 400 !important; min-height: 44px; margin: 0 !important; }
.woocommerce .woocommerce-form-login__rememberme input { width: 22px; height: 22px; margin: 0; accent-color: var(--wp--preset--color--ink); }
.woocommerce form.woocommerce-form-login .button,
.woocommerce form.woocommerce-form-register .button,
.woocommerce form.woocommerce-ResetPassword .button,
.woocommerce form.lost_reset_password .button { width: 100%; margin: 0 !important; float: none !important; }
.woocommerce .woocommerce-LostPassword { margin: .25rem 0 0; text-align: center; }
.woocommerce .woocommerce-LostPassword a { display: inline-flex; align-items: center; min-height: 44px; color: var(--wp--preset--color--ink); }
.woocommerce .show-password-input { min-width: 44px; min-height: 44px; top: 50% !important; right: 0 !important; transform: translateY(-50%); display: grid; place-items: center; }
.woocommerce form.woocommerce-ResetPassword .form-row,
.woocommerce form.lost_reset_password .form-row { width: 100% !important; float: none !important; }
.woocommerce-account:not(.logged-in) .woocommerce > h2 { text-align: center; }
.woocommerce-account .woocommerce-privacy-policy-text { font-size: .875rem; color: var(--wp--preset--color--ink-soft); }

/* ---------- Home: words that take turns, steps, sell card (0.4.0) ---------- */
.les-rotate { display: inline-block; color: var(--wp--preset--color--orange-text); transition: opacity .28s, transform .28s; }
.les-rotate.is-out { opacity: 0; transform: translateY(.25em); }
@media (prefers-reduced-motion: reduce) { .les-rotate { transition: none; } }
.les-steps { margin-block: var(--wp--preset--spacing--40) !important; padding: clamp(20px, 3vw, 32px); background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; }
.les-steps__h { margin: 0 0 1rem; font-size: 1.5rem; }
.les-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem 1.5rem; }
.les-steps__item { position: relative; padding-left: 0; }
.les-steps__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--wp--preset--color--lime-soft); color: var(--wp--preset--color--ink); }
.les-steps__num { position: absolute; left: 40px; top: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--wp--preset--color--orange-text); color: #fff; font-size: .8rem; font-weight: 800; display: grid; place-items: center; }
.les-steps__item h3 { margin: .6rem 0 .25rem; font-size: 1.1rem; }
.les-steps__item p { margin: 0; color: var(--wp--preset--color--ink-soft); }
.les-steps__more { margin: 1rem 0 0; }
.les-steps__more a { font-weight: 700; color: var(--wp--preset--color--ink); text-underline-offset: 3px; }
.les-sell { margin-block: var(--wp--preset--spacing--50) !important; display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center; padding: clamp(20px, 4vw, 36px); border-radius: 18px; background: var(--wp--preset--color--ink); color: #fff; }
.les-sell h2 { color: #fff; margin: .4rem 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.les-sell p { margin: 0; color: #e6ecf3; max-width: 60ch; }
.les-sell .les-kicker { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--ink); }
.les-sell__go { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.les-sell__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 10px; background: var(--wp--preset--color--orange-text); color: #fff !important; font-weight: 800; text-decoration: none; }
.les-sell__btn:hover { filter: brightness(1.06); }
.les-sell__link { color: #fff !important; text-underline-offset: 3px; }
@media (max-width: 699px) { .les-sell { grid-template-columns: 1fr; } }

/* ---------- Search suggestions ---------- */
.les-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 80; max-height: min(70vh, 520px); max-height: min(60dvh, 520px); overflow-y: auto; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(16, 36, 58, .18); padding: 6px; text-align: left; }
.les-suggest__h { margin: .5rem .6rem .25rem; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); }
.les-suggest__item { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: 6px 10px; border-radius: 8px; color: var(--wp--preset--color--ink-deep) !important; text-decoration: none; }
.les-suggest__item:hover, .les-suggest__item.is-active, .les-suggest__all.is-active, .les-suggest__all:hover { background: var(--wp--preset--color--lime-soft); }
.les-suggest__item img, .les-suggest__noimg { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; background: var(--wp--preset--color--ground); }
.les-suggest__text { display: grid; flex: 1; min-width: 0; }
.les-suggest__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.les-suggest__meta { font-size: .85rem; color: var(--wp--preset--color--ink-soft); }
.les-suggest__item > .les-suggest__meta { margin-left: auto; }
.les-suggest__price { font-weight: 700; white-space: nowrap; }
.les-suggest__all { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; margin-top: 4px; border-top: 1px solid var(--wp--preset--color--line); font-weight: 700; color: var(--wp--preset--color--ink) !important; }
.les-suggest__none { margin: .5rem .6rem; color: var(--wp--preset--color--ink-soft); }
.les-header .wp-block-search__inside-wrapper { overflow: visible; }

/* 0.4.0 warm market look: soft serif headings, warm cards. */
h1, h2, h3, h4, .wp-block-heading, .wp-block-post-title, .woocommerce-loop-product__title, .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--serif);
	font-variation-settings: "SOFT" 100, "WONK" 0;
}
.les-mega__all, .les-steps__num, .les-sell__btn { font-family: var(--wp--preset--font-family--sans); }
.wc-block-product, .woocommerce ul.products li.product { background: var(--wp--preset--color--paper); border-radius: 12px; }
.les-header .wp-block-search__button { background: var(--wp--preset--color--lime-soft) !important; }

/* 0.5.0: footer rules and help list (same look as the other footer lists). */
.les-footer__list { list-style: none; padding-left: 0; margin: 0; line-height: 2; }

/* The Living Earth family bar (0.6.0) */
.les-family{background:#1a4548;color:#e3f3ea;font-size:.85rem;line-height:1}
.les-family__in{max-width:1200px;margin:0 auto;padding:0 max(16px,4vw);display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:34px}
.les-family a{color:#e3f3ea;text-decoration:none;padding:9px 0;display:inline-block}
.les-family a:hover,.les-family a:focus-visible{color:#fff;text-decoration:underline}
.les-family__home{font-weight:700}
.les-family__links{display:flex;gap:18px}
@media (max-width:560px){.les-family__links a:not(:last-child){display:none}}

/* 0.7.0 (Immo's screenshots, 7 Nov 2026): the header search keeps its rounded corners, cards have room inside, no arrows on the category bar. */
.les-header .wp-block-search__inside-wrapper { border-radius: 10px; }
.les-header .wp-block-search__input { border-radius: 10px 0 0 10px; }
.les-header .wp-block-search__button { border-radius: 0 10px 10px 0 !important; }
.les-mega__top { white-space: nowrap; }
.les-mega__top[aria-expanded="true"] { background: rgba(255,255,255,.08); border-radius: 8px 8px 0 0; }
.woocommerce ul.products li.product, .wc-block-product { padding: 10px 16px 16px !important; box-sizing: border-box; border: 1px solid var(--wp--preset--color--line); }
.woocommerce ul.products li.product a img.attachment-woocommerce_thumbnail, .woocommerce ul.products li.product a img.woocommerce-placeholder { width: calc(100% + 12px) !important; max-width: none; margin: 0 -6px .5rem !important; }
.woocommerce ul.products li.product .button { margin-top: auto !important; padding: .6rem 1.1rem; border-radius: 10px; }
.woocommerce ul.products li.product .price { margin-bottom: .75rem !important; }
