/* ══════════════════════════════════════════════════════════════
   Components + token bridge.

   The v2 stylesheet (app.css) was written against an older set of
   variable names. Rather than rewrite ~700 lines and risk breaking
   working layout, those names are re-pointed at the design tokens
   here. One place to look, no duplicated values, and the whole
   sheet inherits IBM Plex, the new palette and theme switching.
   ══════════════════════════════════════════════════════════════ */

:root {
	--bg:       var(--an-bg);
	--page:     var(--an-bg);
	--surface:  var(--an-surface);
	--card:     var(--an-surface);
	--raised:   var(--an-surface);
	--sunk:     var(--an-sunk);
	--line:     var(--an-line);
	--line-2:   var(--an-line-soft);
	--rule:     var(--an-line);
	--rule-2:   var(--an-line-soft);

	--ink:      var(--an-text);
	--ink-2:    var(--an-text-2);
	--ink-3:    var(--an-text-3);

	--ember:    var(--an-accent);
	--brand:    var(--an-accent);
	--on-brand: #fff;
	--shoot:    var(--an-primary);
	--live:     var(--an-primary);

	--chrome:   var(--an-chrome);
	--glass:    color-mix(in srgb, var(--an-text) 5%, transparent);
	--elev-s:   var(--an-shadow-1);
	--elev-m:   var(--an-shadow-2);
	--shadow:   var(--an-shadow-1);

	--f-ui: var(--an-font-ui);
	--f-ed: var(--an-font-editorial);
	--f-mo: var(--an-font-mono);

	--rail: var(--an-rail);
	--pad:  var(--an-gutter);
}

body.an-app { font-size: var(--an-t-body); line-height: var(--an-lh-body); }

/* ══ 1. MARKETPLACE IMAGERY ════════════════════════════════════
   The product must never be cropped. Cards keep one consistent
   outer shape, but the photograph is contained inside a generous
   neutral canvas that fills ~58% of the card. Different aspect
   ratios coexist without the grid going ragged. */

.an-prod .an-ph {
	height: auto;
	aspect-ratio: 4 / 3;
	min-height: 210px;
	background-color: var(--an-canvas);
	background-size: contain;          /* never crop the product */
	background-repeat: no-repeat;
	background-position: center;
	border-bottom: 1px solid var(--an-line-soft);
	padding: var(--an-space-3);
}
/* The gradient fallback should still fill, not sit as a tiny tile. */
.an-prod .an-ph.no-img { background-size: cover; }

@media (max-width: 720px) {
	.an-prod .an-ph { aspect-ratio: 1 / 1; min-height: 170px; }
}

.an-prod { background: var(--an-surface); }
.an-prod-b { padding: var(--an-space-4) var(--an-space-4) var(--an-space-4); gap: var(--an-space-2); }
.an-prod-t {
	font-size: 0.9375rem; font-weight: 500; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Marketplace grids breathe more than editorial ones. */
.an-prod-d {
	font-size: 0.8125rem; line-height: 1.45; color: var(--an-text-2);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── marketplace search + facets ────────────────────────────── */
.an-shop-bar {
	display: flex; gap: var(--an-space-3); flex-wrap: wrap;
	align-items: center; padding: 0 var(--an-gutter) var(--an-space-4);
}
.an-shop-search {
	display: flex; align-items: center; gap: var(--an-space-2);
	flex: 1; min-width: min(320px, 100%);
	background: var(--an-surface); border: 1px solid var(--an-line);
	border-radius: var(--an-radius-md); padding: 10px 14px; color: var(--an-text-3);
	box-shadow: var(--an-shadow-1);
}
.an-shop-search input {
	flex: 1; min-width: 0; border: 0; background: none; font: inherit;
	font-size: 0.9375rem; color: var(--an-text); padding: 0;
}
.an-shop-search input:focus { outline: none; }
.an-shop-search:focus-within { border-color: var(--an-primary); }
.an-shop-count {
	font-family: var(--an-font-mono); font-size: 0.75rem; color: var(--an-text-3);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.an-affiliate {
	margin: 0 var(--an-gutter) var(--an-space-5);
	padding: var(--an-space-3) var(--an-space-4);
	border: 1px solid var(--an-line); border-left: 3px solid var(--an-accent);
	border-radius: var(--an-radius-sm); background: var(--an-surface);
	font-size: 0.8125rem; color: var(--an-text-2); max-width: 90ch;
}

.an-prods { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--an-space-4); }

/* ══ 2. THEME SWITCHER ═════════════════════════════════════════ */
.an-theme {
	display: inline-flex; align-items: center; gap: 2px;
	background: var(--an-sunk); border: 1px solid var(--an-line);
	border-radius: 999px; padding: 3px;
}
.an-theme button {
	display: grid; place-items: center;
	width: 30px; height: 26px; border: 0; border-radius: 999px;
	background: transparent; color: var(--an-text-3);
	cursor: pointer; font: inherit; transition: background var(--an-fast) var(--an-ease), color var(--an-fast) var(--an-ease);
}
.an-theme button svg { width: 15px; height: 15px; }
.an-theme button:hover { color: var(--an-text); }
.an-theme button[aria-pressed="true"] {
	background: var(--an-surface); color: var(--an-text);
	box-shadow: var(--an-shadow-1);
}

/* ══ 3. EDITORIAL / MAGAZINE ═══════════════════════════════════ */
.an-eyebrow {
	display: block; font-family: var(--an-font-mono); font-size: 0.6875rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--an-text-3);
	margin-bottom: var(--an-space-2);
}

/* Asymmetric editorial grid — sections should not all look alike. */
.an-grid { display: grid; gap: var(--an-space-5); }
.an-grid-8-4  { grid-template-columns: 2fr 1fr; }
.an-grid-7-5  { grid-template-columns: 1.4fr 1fr; }
.an-grid-3-6-3{ grid-template-columns: 1fr 2fr 1fr; }
.an-grid-4    { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
	.an-grid-8-4, .an-grid-7-5, .an-grid-3-6-3 { grid-template-columns: 1fr; }
	.an-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) { .an-grid-4 { grid-template-columns: 1fr; } }

/* Editorial headings pick up the serif; UI chrome stays sans. */
.an-sec-h h2, .an-cathero h1, .an-art-t, .an-feat-t,
.an-wing-n, .an-hero h1, .an-crops-head h2 {
	font-family: var(--an-font-editorial);
}
.an-prose { font-family: var(--an-font-editorial); max-width: var(--an-measure); }
.an-prose h2, .an-prose h3, .an-prose h4 { font-family: var(--an-font-editorial); }

/* ══ 4. CROP INTELLIGENCE ══════════════════════════════════════ */
.an-crops {
	padding: var(--an-space-8) var(--an-gutter);
	border-top: 1px solid var(--an-line-soft);
	background: var(--an-surface-2);
}
.an-crops-head {
	display: flex; align-items: flex-end; gap: var(--an-space-6);
	flex-wrap: wrap; margin-bottom: var(--an-space-5);
}
.an-crops-head h2 {
	font-size: var(--an-t-h3); font-weight: 400; line-height: var(--an-lh-snug);
	letter-spacing: -.02em; margin: 0;
}
.an-crops-head p {
	margin: var(--an-space-2) 0 0; color: var(--an-text-2);
	font-size: 0.9375rem; max-width: 62ch;
}
.an-crops-search {
	margin-inline-start: auto; display: flex; align-items: center; gap: var(--an-space-2);
	background: var(--an-surface); border: 1px solid var(--an-line);
	border-radius: var(--an-radius-md); padding: 10px 14px;
	min-width: min(320px, 100%); color: var(--an-text-3);
}
.an-crops-search input {
	flex: 1; min-width: 0; border: 0; background: none; font: inherit;
	font-size: 0.9375rem; color: var(--an-text); padding: 0;
}
.an-crops-search input:focus { outline: none; }
.an-crops-search:focus-within { border-color: var(--an-primary); }

.an-crops-filters {
	display: flex; gap: var(--an-space-2); flex-wrap: wrap;
	align-items: center; margin-bottom: var(--an-space-4);
}
.an-chip {
	font: inherit; font-size: 0.8125rem; cursor: pointer;
	background: var(--an-surface); color: var(--an-text-2);
	border: 1px solid var(--an-line); border-radius: 999px;
	padding: 6px 13px; transition: all var(--an-fast) var(--an-ease);
}
.an-chip:hover { border-color: var(--an-primary); color: var(--an-text); }
.an-chip.is-on {
	background: var(--an-primary); border-color: var(--an-primary);
	color: var(--an-primary-c); font-weight: 500;
}
.an-chip-n {
	display: inline-block; margin-inline-start: 6px;
	font-family: var(--an-font-mono); font-size: 0.6875rem;
	color: var(--an-text-3); font-variant-numeric: tabular-nums;
}
.an-chip.is-on .an-chip-n { color: var(--an-primary-c); opacity: .75; }

.an-chip-div { width: 1px; height: 20px; background: var(--an-line); margin-inline: var(--an-space-2); }

.an-crops-meta {
	display: flex; align-items: center; gap: var(--an-space-2);
	font-family: var(--an-font-mono); font-size: 0.75rem;
	color: var(--an-text-3); margin-bottom: var(--an-space-3);
}
.an-count { color: var(--an-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.an-clear {
	margin-inline-start: var(--an-space-2); background: none; border: 0;
	color: var(--an-accent); font: inherit; font-size: 0.75rem;
	cursor: pointer; text-decoration: underline;
}

.an-crops-scroll {
	overflow-x: auto; border: 1px solid var(--an-line);
	border-radius: var(--an-radius-lg); background: var(--an-surface);
	-webkit-overflow-scrolling: touch;
}
.an-crops-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; min-width: 1080px; }
.an-crops-table thead th {
	position: sticky; top: 0; z-index: 2;
	background: var(--an-surface-2); text-align: start;
	font-family: var(--an-font-mono); font-size: 0.6875rem;
	letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-3);
	font-weight: 500; padding: 12px 14px; white-space: nowrap;
	border-bottom: 1px solid var(--an-line);
}
.an-sort {
	background: none; border: 0; padding: 0; font: inherit; color: inherit;
	cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.an-sort::after { content: "↕"; opacity: .45; font-size: .9em; }
.an-sort[data-dir="asc"]::after  { content: "↑"; opacity: 1; color: var(--an-primary); }
.an-sort[data-dir="desc"]::after { content: "↓"; opacity: 1; color: var(--an-primary); }

.an-crops-table tbody tr { border-bottom: 1px solid var(--an-line-soft); }
.an-crops-table tbody tr:last-child { border-bottom: 0; }
.an-crops-table tbody tr:hover { background: var(--an-surface-2); }
.an-crops-table td, .an-crops-table tbody th { padding: 11px 14px; vertical-align: top; }
.an-crop-name {
	font-family: var(--an-font-editorial); font-size: 0.9375rem;
	font-weight: 600; color: var(--an-text); text-align: start; white-space: nowrap;
}
.an-num { font-family: var(--an-font-mono); font-variant-numeric: tabular-nums; color: var(--an-text-2); white-space: nowrap; }
.an-watch { color: var(--an-text-2); min-width: 200px; }

.an-tagdot {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 0.75rem; color: var(--an-text-2); white-space: nowrap;
}
.an-tagdot::before {
	content: ""; width: 7px; height: 7px; border-radius: 2px;
	background: var(--an-text-3); flex: none;
}
.an-g-cereal::before    { background: #C9A227; }
.an-g-pulse::before     { background: #6E8C3A; }
.an-g-oilseed::before   { background: #C8781F; }
.an-g-vegetable::before { background: #2E8B57; }
.an-g-fruit::before     { background: #C0455F; }
.an-g-spice::before     { background: #B4501C; }
.an-g-fibre::before     { background: #5B7FA8; }
.an-g-cash::before      { background: #7B5EA7; }
.an-g-millet::before    { background: #B8912F; }
.an-g-plantation::before{ background: #2F6E52; }
.an-g-nut::before       { background: #8A6642; }
.an-g-flower::before    { background: #C2418A; }
.an-g-medicinal::before { background: #1F8A7A; }
.an-g-fodder::before    { background: #7A8B3F; }

.an-crops-empty { padding: var(--an-space-7); text-align: center; color: var(--an-text-3); font-size: 0.9375rem; }
.an-crops-note {
	margin: var(--an-space-4) 0 0; font-size: 0.75rem;
	color: var(--an-text-3); max-width: 78ch;
}

/* ══ 5. A11Y + MOTION ══════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--an-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.an-rail, .an-head, .an-crops-filters, .an-crops-search, .an-theme { display: none !important; }
	.an-shell { margin: 0 !important; }
	.an-crops-scroll { overflow: visible; border: 0; }
	.an-crops-table { min-width: 0; font-size: 9pt; }
}

/* ── infinite scroll ────────────────────────────────────────── */
.an-inf-sentinel {
	display: flex; flex-direction: column; align-items: center; gap: var(--an-space-3);
	padding: var(--an-space-7) var(--an-gutter);
}
.an-inf-more {
	font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer;
	background: var(--an-surface); color: var(--an-text);
	border: 1px solid var(--an-line); border-radius: 999px;
	padding: 11px 26px; box-shadow: var(--an-shadow-1);
	transition: border-color var(--an-fast) var(--an-ease);
}
.an-inf-more:hover:not(:disabled) { border-color: var(--an-primary); }
.an-inf-more:disabled { opacity: .55; cursor: default; }
.an-inf-status {
	font-family: var(--an-font-mono); font-size: 0.75rem; color: var(--an-text-3);
	min-height: 1em;
}