/*
 * Milpa Tech brand tokens, pulled from the original React/Tailwind app
 * (Inter font, slate neutrals, emerald primary, amber/red semantic colors —
 * see src/index.css and the Tailwind class usage in the AI Studio export).
 */

:root {
	--milpa-ink: #020617;
	--milpa-surface: #0f172a;
	--milpa-surface-2: #1e293b;
	--milpa-line: #334155;
	--milpa-muted: #94a3b8;
	--milpa-paper: #f8fafc;
	--milpa-emerald: #059669;
	--milpa-emerald-2: #10b981;
	--milpa-amber: #f59e0b;
	--milpa-red: #dc2626;
}

/* Front page: the hero built into the page content already carries the
   title, so suppress the theme's default page-title block there. */
.page-template-default.page h1.wp-block-post-title,
body.home .wp-block-post-title {
	display: none;
}

body,
button,
input,
select,
textarea {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Header logo mark, injected by branding.php next to the site title */
.wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.milpa-mark {
	width: 28px;
	height: 30px;
	display: inline-block;
}

/* Language switcher (i18n.php) */
.milpa-lang-switch {
	margin-left: 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
	color: #94a3b8; display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
}
.milpa-lang-switch a { color: inherit; text-decoration: none; }
.milpa-lang-switch a.is-active { color: var(--milpa-emerald, #059669); }
.milpa-lang-switch a:hover { text-decoration: underline; }

/* WooCommerce product grid → investment card look */
.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 1px 2px rgba(2, 6, 23, .04);
	transition: box-shadow .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product:hover {
	box-shadow: 0 8px 24px -8px rgba(2, 6, 23, .15);
	transform: translateY(-2px);
}
.woocommerce ul.products li.product img {
	border-radius: 10px;
}
.woocommerce ul.products li.product .price {
	color: var(--milpa-emerald);
	font-weight: 700;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
	background: var(--milpa-emerald) !important;
	color: #fff !important;
	border-radius: 8px !important;
	border: none !important;
	font-weight: 600 !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--milpa-emerald-2) !important;
}

/* Risk badge + funding progress bar, injected by shop-display.php */
.milpa-risk-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 20px;
	margin-bottom: 8px;
}
.milpa-risk-BAJO { background: #d1fae5; color: #065f46; }
.milpa-risk-MEDIO { background: #fef3c7; color: #92400e; }
.milpa-risk-ALTO { background: #fee2e2; color: #991b1b; }

.milpa-fund-bar {
	height: 6px;
	border-radius: 4px;
	background: #e2e8f0;
	overflow: hidden;
	margin: 8px 0 4px;
}
.milpa-fund-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--milpa-emerald), var(--milpa-emerald-2));
}
.milpa-fund-label {
	font-size: 12px;
	color: #64748b;
	display: flex;
	justify-content: space-between;
}
.milpa-yield {
	font-size: 12.5px;
	color: #0f172a;
	margin-top: 6px;
}
.milpa-yield b {
	color: var(--milpa-emerald);
}

/* Community directory + reviews (directory.php, reviews.php) */
.milpa-muted { color: #64748b; font-size: 13px; }
.milpa-btn {
	display: inline-block; background: var(--milpa-emerald); color: #fff !important;
	border-radius: 8px; border: none; font-weight: 600; padding: 10px 18px;
	text-decoration: none; cursor: pointer; font-size: 14px;
}
.milpa-btn:hover { background: var(--milpa-emerald-2); }

.milpa-directory-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.milpa-tab {
	padding: 8px 16px; border-radius: 20px; background: #f1f5f9; color: #334155;
	text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.milpa-tab.is-active { background: var(--milpa-emerald); color: #fff; }

.milpa-directory-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.milpa-directory-card {
	background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px;
	text-align: center; text-decoration: none; color: inherit;
	box-shadow: 0 1px 2px rgba(2,6,23,.04); transition: box-shadow .15s ease, transform .15s ease;
}
.milpa-directory-card:hover { box-shadow: 0 8px 24px -8px rgba(2,6,23,.15); transform: translateY(-2px); }
.milpa-directory-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.milpa-directory-name { font-weight: 700; font-size: 15px; color: var(--milpa-ink); margin-bottom: 6px; }
.milpa-directory-location { font-size: 12.5px; color: #64748b; margin: 4px 0; }
.milpa-directory-rating { font-size: 13px; color: var(--milpa-amber); margin-top: 6px; }

.milpa-role-pill {
	display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
	text-transform: uppercase; padding: 3px 10px; border-radius: 20px; margin: 2px;
}
.milpa-role-producer { background: #d1fae5; color: #065f46; }
.milpa-role-trader { background: #fef3c7; color: #92400e; }
.milpa-role-investor { background: #dbeafe; color: #1e40af; }
.milpa-role-comprador { background: #ede9fe; color: #5b21b6; }

.milpa-profile-head { display: flex; gap: 20px; align-items: center; margin-bottom: 18px; }
.milpa-profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.milpa-profile-bio { color: #334155; margin: 12px 0 20px; line-height: 1.6; }
.milpa-back-link { display: inline-block; margin-bottom: 18px; color: var(--milpa-emerald); text-decoration: none; font-size: 13.5px; font-weight: 600; }

.milpa-reviews { margin-top: 32px; border-top: 1px solid #e2e8f0; padding-top: 24px; }
.milpa-review { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.milpa-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.milpa-review-avatar { width: 36px; height: 36px; border-radius: 50%; }
.milpa-review-stars { display: block; color: var(--milpa-amber); font-size: 12.5px; }
.milpa-review-date { margin-left: auto; font-size: 12px; color: #94a3b8; }
.milpa-review-comment { font-size: 13.5px; color: #334155; margin: 0; }
.milpa-review-endorsements { margin-top: 8px; }
.milpa-endorsement-pill {
	display: inline-block; background: #ecfdf5; color: #065f46; font-size: 11px; font-weight: 600;
	padding: 3px 9px; border-radius: 20px; margin: 2px 4px 2px 0;
}

.milpa-review-form { background: #f8fafc; border-radius: 12px; padding: 18px; margin-top: 18px; }
.milpa-review-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--milpa-ink); }
.milpa-review-form select,
.milpa-review-form textarea,
.milpa-review-form input[type="text"] {
	display: block; width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid #cbd5e1;
	border-radius: 8px; font-size: 13.5px; font-family: inherit;
}
.milpa-notice { padding: 10px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; }
.milpa-notice-ok { background: #d1fae5; color: #065f46; }
.milpa-notice-error { background: #fee2e2; color: #991b1b; }

/* Investor portfolio (portfolio.php) */
.milpa-portfolio-summary {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 32px;
}
.milpa-summary-card {
	background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 18px;
	display: flex; flex-direction: column; gap: 6px;
}
.milpa-summary-label { font-size: 12px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.milpa-summary-value { font-size: 22px; font-weight: 700; color: var(--milpa-ink); }
.milpa-summary-value.milpa-positive { color: #059669; }
.milpa-summary-value.milpa-negative { color: #dc2626; }

/* NFT verification (opensea-verify.php) */
.milpa-nft-verify { margin: 18px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; }
.milpa-nft-badge {
	display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
	padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
}
.milpa-nft-badge-ok { background: #d1fae5; color: #065f46; }
.milpa-nft-badge-pending { background: #fef3c7; color: #92400e; }
.milpa-nft-verified { display: flex; flex-direction: column; gap: 8px; }
.milpa-nft-thumb { width: 100%; max-width: 160px; border-radius: 8px; display: block; }
.milpa-nft-details { font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.milpa-nft-collection { color: #64748b; font-size: 12.5px; }
.milpa-nft-unverified p { margin: 4px 0 10px; }

/* Weather (weather.php) */
.milpa-weather-box, .milpa-trend-box { margin: 18px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; }
.milpa-weather-grid { display: flex; gap: 20px; margin: 8px 0; }
.milpa-weather-grid div { display: flex; flex-direction: column; }
.milpa-weather-grid strong { font-size: 18px; color: var(--milpa-ink); }
.milpa-weather-grid span { font-size: 11.5px; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.milpa-weather-source { margin: 4px 0 0; font-size: 12px; }

/* Price trend (price-tracking.php) */
.milpa-trend-box p { margin: 6px 0 0; }
.milpa-trend-box strong { font-size: 20px; }

/* Field log (field-log.php) */
.milpa-field-log { margin: 24px 0; padding-top: 20px; border-top: 1px solid #e2e8f0; }
.milpa-field-log-entry { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.milpa-field-log-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.milpa-field-log-date { margin-left: auto; font-size: 12px; color: #94a3b8; }
.milpa-field-log-entry p { margin: 6px 0 0; font-size: 13.5px; color: #334155; }
.milpa-log-type-inspection { background: #dbeafe; color: #1e40af; }
.milpa-log-type-iot { background: #e0f2fe; color: #075985; }
.milpa-log-type-drone { background: #ede9fe; color: #5b21b6; }
.milpa-log-type-biodynamics { background: #d1fae5; color: #065f46; }
.milpa-log-type-pest { background: #fee2e2; color: #991b1b; }
.milpa-field-log-form { margin-top: 16px; }

/* Marketplace (marketplace.php) */
.milpa-marketplace-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 8px;
}
.milpa-marketplace-card { text-align: left; display: flex; flex-direction: column; gap: 8px; }
.milpa-marketplace-card img { border-radius: 8px; width: 100%; height: auto; margin-bottom: 8px; }
.milpa-marketplace-price { color: var(--milpa-emerald); font-weight: 700; font-size: 14px; }
.milpa-marketplace-add-to-cart { margin-top: 4px; text-align: center; }

.milpa-table-scroll { overflow-x: auto; margin-bottom: 32px; }
.milpa-portfolio-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.milpa-portfolio-table th {
	text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: #64748b;
	padding: 10px 12px; border-bottom: 2px solid #e2e8f0;
}
.milpa-portfolio-table td { padding: 12px; border-bottom: 1px solid #f1f5f9; }
.milpa-portfolio-table tr:hover td { background: #f8fafc; }
.milpa-ledger-note { margin-top: -8px; margin-bottom: 16px; }

/* =====================================================================
 * HOMEPAGE DESIGN SYSTEM
 *
 * Previously this lived in a <style> block inside the page content —
 * and therefore existed twice, character for character: once in the
 * Spanish post content and again in content-i18n.php's English copy.
 * Two copies of the same stylesheet is a guarantee that one of them
 * eventually drifts, so it now lives here and both languages share it.
 *
 * Type scale rebuilt on a 1.25 ratio. The previous scale ran 37px for
 * the hero against 30px for section headings — only 1.2x apart, which
 * read as flat, and the impact figures at 28.8px were nearly the same
 * size as the headings above them, so the numbers that carry the
 * argument didn't carry any visual weight.
 * ===================================================================== */

:root {
	--milpa-display: "Space Grotesk", "Inter", system-ui, sans-serif;
	--milpa-body: "Inter", system-ui, -apple-system, sans-serif;

	/* Fluid type: scales with viewport between the two bounds. */
	--milpa-t-hero: clamp(2.5rem, 1.5rem + 4.2vw, 3.75rem);   /* 40 → 60 */
	--milpa-t-h2:   clamp(1.875rem, 1.4rem + 2.1vw, 2.5rem);  /* 30 → 40 */
	--milpa-t-stat: clamp(2.25rem, 1.6rem + 2.8vw, 3.25rem);  /* 36 → 52 */
	--milpa-t-h3:   1.25rem;
	--milpa-t-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);

	--milpa-ring: 0 0 0 3px rgba(16, 185, 129, .45);
	--milpa-lift: 0 10px 30px -10px rgba(2, 6, 23, .45);
}

.milpa-home {
	font-family: var(--milpa-body);
	color: var(--milpa-ink);
}
.milpa-home h1,
.milpa-home h2,
.milpa-home h3,
.milpa-home .milpa-stat-num {
	font-family: var(--milpa-display);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ---- Hero ---- */
.milpa-hero {
	position: relative;
	isolation: isolate;
	padding: clamp(72px, 9vw, 120px) 24px clamp(64px, 8vw, 104px);
	text-align: center;
	background:
		radial-gradient(at 22% 18%, rgba(16, 185, 129, .16) 0, transparent 55%),
		radial-gradient(at 78% 70%, rgba(6, 182, 212, .12) 0, transparent 50%),
		linear-gradient(180deg, #0b2030 0%, #020617 70%);
	overflow: hidden;
}
/* Circuit-grid texture: a nod to the logo's traces, kept faint enough
   to register as material rather than pattern. */
.milpa-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
	pointer-events: none;
}
.milpa-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--milpa-display);
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #6ee7b7;
	font-weight: 500;
	margin-bottom: 24px;
}
.milpa-eyebrow::before {
	content: "";
	width: 6px; height: 6px;
	background: var(--milpa-emerald-2);
	border-radius: 50%;
	box-shadow: 0 0 12px 2px rgba(16, 185, 129, .7);
}
.milpa-hero h1 {
	font-size: var(--milpa-t-hero);
	line-height: 1.08;
	color: #f8fafc;
	max-width: 17ch;
	margin: 0 auto 22px;
	text-wrap: balance;
}
.milpa-hero h1 span {
	background: linear-gradient(100deg, #4ade80, #22c55e 45%, #06b6d4);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.milpa-hero > p {
	font-size: var(--milpa-t-lead);
	font-weight: 400;
	color: #b6c2d4;
	max-width: 56ch;
	margin: 0 auto 36px;
	line-height: 1.62;
	text-wrap: pretty;
}
.milpa-manifest {
	max-width: 68ch;
	margin: 0 auto;
	font-size: .75rem;
	letter-spacing: .07em;
	line-height: 2;
	color: #64748b;
	text-transform: uppercase;
	border-top: 1px solid rgba(148, 163, 184, .18);
	padding-top: 28px;
}

/* ---- Buttons ----
   The three hero actions used to be visually identical, so nothing
   told a first-time visitor which one to take. Primary now carries
   weight and elevation; the other two step back to outlines. */
.milpa-cta-row {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 48px;
}
.milpa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 10px;
	font-family: var(--milpa-body);
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease,
	            background-color .18s ease, border-color .18s ease;
}
.milpa-btn-primary {
	background: linear-gradient(135deg, #10b981, #059669);
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(5, 150, 105, .75);
}
.milpa-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -10px rgba(5, 150, 105, .85);
}
.milpa-btn-ghost {
	background: rgba(148, 163, 184, .07);
	border: 1px solid rgba(148, 163, 184, .34);
	color: #e2e8f0;
}
.milpa-btn-ghost:hover {
	border-color: var(--milpa-emerald-2);
	color: #6ee7b7;
	background: rgba(16, 185, 129, .1);
	transform: translateY(-2px);
}
/* Keyboard users could not see which control they were on. */
.milpa-btn:focus-visible {
	outline: none;
	box-shadow: var(--milpa-ring);
}
.milpa-btn:active { transform: translateY(0); }

/* ---- Features ---- */
.milpa-features {
	position: relative;
	padding: clamp(72px, 8vw, 104px) 24px;
	background:
		radial-gradient(at 15% 0%, rgba(16, 185, 129, .10) 0, transparent 45%),
		radial-gradient(at 88% 100%, rgba(6, 182, 212, .09) 0, transparent 42%),
		var(--milpa-paper);
}
.milpa-features::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(15, 23, 42, .055) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 65%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 65%);
	pointer-events: none;
}
.milpa-section-inner {
	max-width: 1120px;
	margin: 0 auto;
	position: relative;
}
.milpa-features h2 {
	text-align: center;
	font-size: var(--milpa-t-h2);
	line-height: 1.12;
	margin: 0 0 14px;
	color: var(--milpa-surface);
	text-wrap: balance;
}
.milpa-features .milpa-sub {
	text-align: center;
	color: #556377;
	font-size: var(--milpa-t-lead);
	max-width: 58ch;
	margin: 0 auto 52px;
	line-height: 1.6;
}
.milpa-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 24px;
}
.milpa-feature-card {
	background: #fff;
	border: 1px solid #e6ebf2;
	border-radius: 18px;
	padding: 32px 28px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.milpa-feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--milpa-lift);
	border-color: #cfe6dc;
}
.milpa-feature-icon {
	width: 52px; height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.milpa-feature-card h3 {
	font-size: var(--milpa-t-h3);
	margin: 0 0 10px;
	color: var(--milpa-surface);
}
.milpa-feature-card p {
	font-size: .9375rem;
	font-weight: 400;
	color: #5b6878;
	line-height: 1.65;
	margin: 0;
	text-wrap: pretty;
}

/* ---- Stats ---- */
.milpa-stats {
	position: relative;
	padding: clamp(64px, 7vw, 88px) 24px;
	background:
		radial-gradient(at 50% 0%, rgba(16, 185, 129, .13) 0, transparent 60%),
		var(--milpa-ink);
	overflow: hidden;
}
.milpa-stats h2 {
	text-align: center;
	color: #f8fafc;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
	margin: 0 0 48px;
}
.milpa-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 36px 32px;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
.milpa-stat-num {
	font-size: var(--milpa-t-stat);
	line-height: 1;
	background: linear-gradient(135deg, #4ade80, #22c55e 55%, #14b8a6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 10px;
}
.milpa-stat-label {
	font-size: .75rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #8f9fb4;
	font-weight: 500;
}

/* ---- Closing ---- */
.milpa-closing {
	position: relative;
	padding: clamp(64px, 7vw, 96px) 24px;
	text-align: center;
	background:
		radial-gradient(at 80% 20%, rgba(16, 185, 129, .18) 0, transparent 55%),
		linear-gradient(135deg, #064e3b 0%, #0f172a 65%);
	overflow: hidden;
}
.milpa-closing h2 {
	color: #fff;
	font-size: var(--milpa-t-h2);
	margin: 0 0 16px;
	text-wrap: balance;
}
.milpa-closing p {
	color: #a7f3d0;
	font-size: var(--milpa-t-lead);
	max-width: 58ch;
	margin: 0 auto 32px;
	line-height: 1.6;
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
	.milpa-btn, .milpa-feature-card { transition: none; }
	.milpa-btn:hover, .milpa-feature-card:hover { transform: none; }
}

/* =====================================================================
 * FIT AND FINISH
 * Three defects found by measuring the rendered page, not by reading
 * the markup — each one invisible until the layout is under pressure.
 * ===================================================================== */

/* ---- 1. Header wrapping ----
   Six menu entries plus the account and cart icons overflow the header
   at mid widths, dropping the last item onto its own line. Tightening
   the gap and type size buys back enough room to keep one row until
   the mobile breakpoint takes over. */
@media (min-width: 782px) and (max-width: 1200px) {
	/* nowrap is the part that actually does the work: without it the
	   container wraps the last item onto a second row even when there
	   is room, and the items themselves break mid-label. */
	.wp-block-navigation__container { flex-wrap: nowrap; }
	.wp-block-navigation {
		--wp--style--block-gap: 0.7rem;
		font-size: 0.9rem;
	}
	.wp-block-navigation .wp-block-navigation-item__content {
		padding: 0;
		white-space: nowrap;
	}
	.wp-block-site-title a { font-size: 1.0625rem; }
}
/* Below ~1010px the wordmark is what pushes the row over; the mark on
   its own still identifies the site. */
@media (min-width: 782px) and (max-width: 1010px) {
	header .wp-block-site-title { display: none; }
}

/* The footer logo inherits the site logo at full size — 120x159px,
   which dwarfs everything around it. */
footer .wp-block-site-logo img { max-width: 52px; }

/* ---- 2. Stat label alignment ----
   "Productores Beneficiados" wraps to two lines while "Hectáreas
   Protegidas" fits on one, so the figures above them sat at different
   heights. Reserving two lines of space for every label squares the
   row regardless of label length. */
.milpa-stat-grid > div {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.milpa-stat-label {
	min-height: 2.6em;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	text-wrap: balance;
}

/* ---- 3. Product image proportions ----
   The coffee photo is portrait (1200x1800) where every other crop is
   landscape, so its card stretched and broke the grid's rhythm. A
   fixed 3:2 box with object-fit crops to a consistent shape instead of
   letting each image dictate its own height — and it holds for any
   image uploaded later, which re-cropping this one file would not. */
.woocommerce ul.products li.product a img,
.milpa-marketplace-card img,
.wc-block-grid__product-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: 12px;
	transition: transform .35s ease;
}
.woocommerce ul.products li.product:hover a img,
.milpa-marketplace-card:hover img {
	transform: scale(1.03);
}
/* Clip the zoom to the card's rounded corners. */
.woocommerce ul.products li.product a,
.milpa-marketplace-card > a:first-child {
	display: block;
	overflow: hidden;
	border-radius: 12px;
}

/* =====================================================================
 * CATALOGUE PAGES — Shop and Marketplace
 *
 * Measured against the homepage before writing any of this. Shop was
 * rendering WooCommerce's stock block markup with no treatment at all:
 * no card surface, no border, no radius, and a black pill button that
 * fought the brand's green. Marketplace was closer (it uses this
 * plugin's own markup) but drifted on radius and type.
 *
 * Everything below pulls both onto the same surface language as the
 * homepage feature cards: white card, 1px cool border, 18px radius,
 * lift on hover.
 * ===================================================================== */

/* ---- Page header band ----
   Catalogue pages opened straight onto a white page with an Inter
   title, which read as a different site than the homepage. This gives
   them the same layered ground treatment. */
.woocommerce-shop main > .wp-block-group,
body:has(.milpa-marketplace) main > .wp-block-group,
body:has(.milpa-directory) main > .wp-block-group {
	background:
		radial-gradient(at 12% 0%, rgba(16, 185, 129, .08) 0, transparent 42%),
		radial-gradient(at 90% 4%, rgba(6, 182, 212, .07) 0, transparent 38%),
		var(--milpa-paper);
}

/* The page heading is a query-title (Shop) or a post-title that is not
   inside a product card — products use post-title too, so scoping by
   class alone would resize every card heading on the page. */
.wp-block-query-title,
body:has(.milpa-marketplace) main > .wp-block-group > .wp-block-post-title,
body:has(.milpa-directory) main > .wp-block-group > .wp-block-post-title {
	font-family: var(--milpa-display);
	font-size: var(--milpa-t-h2);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: var(--milpa-surface);
}

/* ---- Shop: product cards ----
   WooCommerce's block template renders each product as a bare <li>. */
.wc-block-grid__products li.wc-block-product,
.wp-block-woocommerce-product-template li.wc-block-product {
	background: #fff;
	border: 1px solid #e6ebf2;
	border-radius: 18px;
	padding: 16px 16px 20px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wp-block-woocommerce-product-template li.wc-block-product:hover {
	transform: translateY(-4px);
	box-shadow: var(--milpa-lift);
	border-color: #cfe6dc;
}
.wp-block-woocommerce-product-template li.wc-block-product img {
	border-radius: 12px;
}
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-post-title,
.wp-block-woocommerce-product-template li.wc-block-product h3 {
	font-family: var(--milpa-display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 14px 0 8px;
}
.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-price {
	font-family: var(--milpa-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--milpa-surface);
}

/* ---- Shop: the add-to-cart button ----
   Stock style is a black pill, which belongs to the theme rather than
   to this brand. */
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-button__link,
.wc-block-grid__products .wp-block-button__link,
.woocommerce a.button.add_to_cart_button {
	background: linear-gradient(135deg, #10b981, #059669) !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 12px 22px !important;
	font-family: var(--milpa-body) !important;
	font-weight: 600 !important;
	font-size: .9375rem !important;
	box-shadow: 0 6px 16px -8px rgba(5, 150, 105, .7);
	transition: transform .18s ease, box-shadow .18s ease;
}
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-button__link:hover,
.woocommerce a.button.add_to_cart_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(5, 150, 105, .8);
}
.wp-block-woocommerce-product-template .wp-block-button__link:focus-visible {
	outline: none;
	box-shadow: var(--milpa-ring);
}

/* ---- Crop investment summary (shop-display.php) ---- */
.milpa-risk-badge {
	font-family: var(--milpa-display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	border-radius: 6px;
	padding: 4px 9px;
}
.milpa-fund-bar { border-radius: 999px; overflow: hidden; }
.milpa-fund-bar-fill { background: linear-gradient(90deg, #10b981, #059669); }
.milpa-fund-label,
.milpa-yield { font-size: .8125rem; color: #5b6878; }
.milpa-yield b { font-family: var(--milpa-display); color: var(--milpa-emerald); }

/* ---- Marketplace: align to the same card language ---- */
.milpa-marketplace-card {
	border-radius: 18px;
	border-color: #e6ebf2;
	padding: 16px 16px 20px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.milpa-marketplace-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--milpa-lift);
	border-color: #cfe6dc;
}
.milpa-marketplace-card .milpa-directory-name {
	font-family: var(--milpa-display);
	font-size: 1.0625rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.milpa-marketplace-price {
	font-family: var(--milpa-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--milpa-surface);
}
.milpa-marketplace-add-to-cart {
	background: linear-gradient(135deg, #10b981, #059669);
	box-shadow: 0 6px 16px -8px rgba(5, 150, 105, .7);
	transition: transform .18s ease, box-shadow .18s ease;
}
.milpa-marketplace-add-to-cart:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(5, 150, 105, .8);
}

/* ---- Category tabs ---- */
.milpa-tab {
	font-family: var(--milpa-body);
	font-weight: 600;
	font-size: .875rem;
	border-radius: 999px;
	transition: background-color .18s ease, color .18s ease;
}
.milpa-tab:not(.is-active) {
	background: #fff;
	border: 1px solid #e2e8f0;
	color: #475569;
}
.milpa-tab:not(.is-active):hover {
	border-color: var(--milpa-emerald-2);
	color: var(--milpa-emerald);
}
.milpa-tab:focus-visible { outline: none; box-shadow: var(--milpa-ring); }

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-product-template li.wc-block-product,
	.milpa-marketplace-card,
	.milpa-marketplace-add-to-cart { transition: none; }
	.wp-block-woocommerce-product-template li.wc-block-product:hover,
	.milpa-marketplace-card:hover { transform: none; }
}

/* =====================================================================
 * GROUNDS AND FRAMES
 *
 * Depth here comes from layered shadows and a faint texture rather than
 * from heavier borders. A single hard shadow reads as a sticker on the
 * page; two stacked shadows — one tight and dark for the contact edge,
 * one wide and soft for the ambient falloff — is how real objects sit
 * on a surface, and it stays subtle at small sizes.
 * ===================================================================== */

:root {
	--milpa-shadow-sm:
		0 1px 2px rgba(2, 6, 23, .05),
		0 4px 12px -4px rgba(2, 6, 23, .07);
	--milpa-shadow-md:
		0 2px 4px rgba(2, 6, 23, .06),
		0 12px 28px -8px rgba(2, 6, 23, .14);
	--milpa-shadow-lg:
		0 4px 8px rgba(2, 6, 23, .07),
		0 24px 48px -12px rgba(2, 6, 23, .20);
}

/* ---- Page header band ----
   Interior pages opened on a flat ground while the homepage had a
   textured one, so moving between them felt like leaving the site.
   Same circuit grid as the hero, masked so it fades before the
   content starts. */
.wp-block-query-title,
body:has(.milpa-marketplace) main > .wp-block-group > .wp-block-post-title,
body:has(.milpa-directory) main > .wp-block-group > .wp-block-post-title {
	position: relative;
	padding-bottom: 4px;
}
.woocommerce-shop main > .wp-block-group::before,
body:has(.milpa-marketplace) main > .wp-block-group::before,
body:has(.milpa-directory) main > .wp-block-group::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 340px;
	background-image:
		linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	pointer-events: none;
	z-index: 0;
}
.woocommerce-shop main > .wp-block-group,
body:has(.milpa-marketplace) main > .wp-block-group,
body:has(.milpa-directory) main > .wp-block-group { position: relative; }
.woocommerce-shop main > .wp-block-group > *,
body:has(.milpa-marketplace) main > .wp-block-group > *,
body:has(.milpa-directory) main > .wp-block-group > * { position: relative; z-index: 1; }

/* ---- Card frames ---- */
.wp-block-woocommerce-product-template li.wc-block-product,
.milpa-marketplace-card,
.milpa-feature-card {
	box-shadow: var(--milpa-shadow-sm);
}
.wp-block-woocommerce-product-template li.wc-block-product:hover,
.milpa-marketplace-card:hover,
.milpa-feature-card:hover {
	box-shadow: var(--milpa-shadow-md);
}

/* ---- Risk accent on crop cards ----
   The risk badge already carries this information, but only as a small
   label. Repeating it as a hairline along the top edge lets the grid
   be scanned for risk profile at a glance, without adding any new
   element to read. Colour is a reinforcement, never the only signal —
   the badge text stays. */
.wp-block-woocommerce-product-template li.wc-block-product {
	position: relative;
	overflow: hidden;
}
.wp-block-woocommerce-product-template li.wc-block-product::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: #cbd5e1;
	z-index: 2;
}
.wp-block-woocommerce-product-template li.wc-block-product:has(.milpa-risk-BAJO)::before {
	background: linear-gradient(90deg, #10b981, #059669);
}
.wp-block-woocommerce-product-template li.wc-block-product:has(.milpa-risk-MEDIO)::before {
	background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.wp-block-woocommerce-product-template li.wc-block-product:has(.milpa-risk-ALTO)::before {
	background: linear-gradient(90deg, #fb7185, #e11d48);
}

/* Badge colours to match. */
.milpa-risk-badge { border: 1px solid transparent; }
.milpa-risk-BAJO  { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.milpa-risk-MEDIO { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.milpa-risk-ALTO  { background: #ffe4e6; color: #9f1239; border-color: #fecdd3; }

/* ---- Image frames ----
   A hairline inside the image edge keeps light photos from bleeding
   into the white card. */
.wp-block-woocommerce-product-template li.wc-block-product img,
.milpa-marketplace-card img {
	box-shadow: inset 0 0 0 1px rgba(2, 6, 23, .07);
}

/* ---- Section seam ----
   A hairline where two pale bands meet, so the change of ground reads
   as intentional rather than as a rendering gap. */
.milpa-features { border-top: 1px solid rgba(15, 23, 42, .06); }

/* ---- Focus ring, site-wide ----
   The theme's default focus outline disappears against the dark bands. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--milpa-emerald-2);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =====================================================================
 * DIRECTORY AND PORTFOLIO
 *
 * The last two sections still on the old surface language: 14px and
 * 12px radii against the 18px used everywhere else, flat single
 * shadows, and Inter where the rest of the site had moved to Space
 * Grotesk for names and figures.
 * ===================================================================== */

/* ---- Directory cards ---- */
.milpa-directory-card {
	border-radius: 18px;
	border-color: #e6ebf2;
	padding: 24px 20px;
	box-shadow: var(--milpa-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.milpa-directory-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--milpa-shadow-md);
	border-color: #cfe6dc;
}
.milpa-directory-name {
	font-family: var(--milpa-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.milpa-directory-avatar,
.milpa-directory-card img {
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e6ebf2;
}
.milpa-directory-location { font-size: .8125rem; color: #5b6878; }

/* Role pills: the four roles are structurally different things
   (who sells crops vs. who buys them), so they get different colours
   rather than one neutral chip for all. */
.milpa-role-pill {
	font-family: var(--milpa-display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 4px 10px;
	border: 1px solid transparent;
	background: #f1f5f9;
	color: #475569;
}
.milpa-role-pill.milpa-role-producer   { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.milpa-role-pill.milpa-role-trader,
.milpa-role-pill.milpa-role-vendedor   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.milpa-role-pill.milpa-role-investor   { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.milpa-role-pill.milpa-role-comprador  { background: #fef3c7; color: #92400e; border-color: #fde68a; }

.milpa-directory-rating {
	font-family: var(--milpa-display);
	font-weight: 700;
	color: var(--milpa-surface);
}

/* ---- Portfolio summary ----
   These four numbers are the whole point of the page — what the
   holdings are worth, what went in, what came back. They were set at
   22px in the body face, smaller than a section heading, so the page
   led with its labels instead of its figures. */
.milpa-portfolio-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px;
}
.milpa-summary-card {
	position: relative;
	border-radius: 18px;
	border-color: #e6ebf2;
	padding: 22px 22px 20px;
	background:
		radial-gradient(at 100% 0%, rgba(16, 185, 129, .07) 0, transparent 60%),
		#fff;
	box-shadow: var(--milpa-shadow-sm);
	overflow: hidden;
}
.milpa-summary-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, #10b981, #059669);
}
.milpa-summary-label {
	display: block;
	font-size: .6875rem;
	letter-spacing: .09em;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 8px;
}
.milpa-summary-value {
	display: block;
	font-family: var(--milpa-display);
	font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--milpa-surface);
}
.milpa-summary-value.milpa-positive { color: #059669; }
.milpa-summary-value.milpa-negative { color: #dc2626; }

/* ---- Portfolio tables ---- */
.milpa-portfolio h3 {
	font-family: var(--milpa-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 40px 0 14px;
	color: var(--milpa-surface);
}
.milpa-table-scroll {
	overflow-x: auto;
	border: 1px solid #e6ebf2;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--milpa-shadow-sm);
}
.milpa-portfolio-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
}
.milpa-portfolio-table thead th {
	font-family: var(--milpa-display);
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: #64748b;
	text-align: left;
	padding: 14px 16px;
	background: #f8fafc;
	border-bottom: 1px solid #e6ebf2;
	white-space: nowrap;
}
.milpa-portfolio-table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid #f1f5f9;
	color: #334155;
}
.milpa-portfolio-table tbody tr:last-child td { border-bottom: none; }
.milpa-portfolio-table tbody tr { transition: background-color .15s ease; }
.milpa-portfolio-table tbody tr:hover { background: #f8fafc; }
.milpa-portfolio-table td a { color: var(--milpa-emerald); text-decoration: none; font-weight: 600; }
.milpa-portfolio-table td a:hover { text-decoration: underline; }
.milpa-ledger-note { font-size: .8125rem; color: #64748b; margin-bottom: 14px; }

/* ---- Empty state ----
   "No investments yet" is the first thing most visitors will see here,
   so it carries a route onward rather than sitting as a dead sentence. */
.milpa-portfolio > .milpa-muted {
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 16px;
	padding: 28px 24px;
	text-align: center;
	color: #5b6878;
}
.milpa-portfolio > .milpa-muted a {
	color: var(--milpa-emerald);
	font-weight: 600;
	text-decoration: none;
}
.milpa-portfolio > .milpa-muted a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.milpa-directory-card { transition: none; }
	.milpa-directory-card:hover { transform: none; }
}

/* ---- Initials avatars ----
   The <img> sits on top of the initials and is transparent unless the
   member actually has a Gravatar, so both cases use the same markup
   and neither needs a lookup to decide which to render. */
.milpa-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	background: hsl(var(--milpa-av-h, 160) 42% 46%);
	color: #fff;
	font-family: var(--milpa-display);
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	user-select: none;
}
.milpa-avatar::before {
	content: attr(data-initials);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.milpa-avatar img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}