/*
 * Layout CSS for the hand-written AgriFeeds Elementor widgets (§6.3):
 * category tiles, product grid, farm grid. Component-level tokens (colors,
 * radius, motion) live in agrifeeds-tokens.css; this file is grid/card
 * layout only.
 *
 * Grids use auto-fill/minmax rather than fixed breakpoint columns — a
 * pragmatic approximation of the design system's 4/3/2/1-up rule that
 * reflows naturally without explicit media queries.
 */

/* Belt-and-suspenders override for the homepage category-tiles section
   (element id categories-section) -- its own atomic style already sets
   mobile padding-inline to 0 (confirmed in the compiled Elementor CSS),
   but a real phone screenshot still showed a visible side margin, so this
   duplicates the same result via a higher-specificity selector + !important
   directly in our own stylesheet, removing any dependency on winning an
   Elementor-internal specificity race to get edge-to-edge tiles. */
@media (max-width: 767px) {
	.elementor-element.elementor-element-categories-section {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

.agf-empty {
	color: var(--text-muted, #6B7476);
	font-size: 14px;
	padding: var(--space-6) 0;
}

/* Homepage stats band -- native Counter widgets (element id stats-band),
   each bound to a Dynamic Shortcodes power-shortcode for a live count. */
.elementor-element-stats-band {
	display: flex;
	justify-content: center;
	gap: var(--space-6);
	padding: var(--space-5) 0;
	flex-wrap: wrap;
}
.elementor-element-stats-band .elementor-counter {
	text-align: center;
}
.elementor-element-stats-band .elementor-counter-number-wrapper {
	font-family: var(--font-primary);
	font-size: 36px;
	font-weight: 900;
	color: var(--accent);
	line-height: 1;
}
.elementor-element-stats-band .elementor-counter-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-muted, #6B7476);
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-top: 6px;
}

/* Homepage "Popular products" (element id homepage-product-grid, a native
   Elementor "Products" widget) -- out of the box this renders WooCommerce's
   bare shop-loop markup (image/title/price, no card boundary at all) inside
   a fixed 4-column grid with no mobile override, which is both "not a card"
   and, on a phone, four columns squeezed illegibly narrow. On mobile this
   becomes a horizontally-scrolling row of bordered cards instead -- matches
   the farm grid's own mobile behavior below, and packs more items into less
   vertical space per the brief. Desktop keeps WooCommerce's native 4-column
   grid untouched. */
@media (max-width: 767px) {
	#homepage-product-grid .woocommerce.columns-4 {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding-bottom: 4px;
	}
	#homepage-product-grid ul.products.columns-4 {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 12px;
		width: auto !important;
	}
	#homepage-product-grid ul.products.columns-4 li.product {
		flex: 0 0 62% !important;
		max-width: 62% !important;
		margin: 0 !important;
		padding: 10px !important;
		border: 1px solid var(--border-hairline);
		border-radius: var(--radius-card);
		background: #FFFFFF;
		scroll-snap-align: start;
	}
	#homepage-product-grid ul.products.columns-4 li.product img {
		border-radius: var(--radius-sm);
	}
	#homepage-product-grid .woocommerce-loop-product__title {
		color: var(--ink);
		font-family: var(--font-primary);
		font-weight: 700;
		font-size: 13.5px;
		margin: 8px 0 4px;
	}
	#homepage-product-grid .price {
		color: var(--accent);
		font-weight: 800;
	}
}

/* Homepage "Verified farms" (element id homepage-farm-grid, an Elementor Pro
   Loop Grid widget) -- columns_mobile is set to 1, so on a phone this was a
   tall single-column stack (each farm card its own full-width row). Same
   horizontally-scrolling treatment as the product grid above -- the farm
   card template (post 433) already has its own card border/styling, so
   this only needs to turn the grid into a scrollable row. */
@media (max-width: 767px) {
	#homepage-farm-grid .elementor-loop-container {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		gap: 12px;
		padding-bottom: 4px;
	}
	#homepage-farm-grid .e-loop-item {
		flex: 0 0 68% !important;
		max-width: 68% !important;
		scroll-snap-align: start;
	}
}

/* Homepage "For Farmers / For Transporters / For Suppliers" CTA row (element
   IDs 02a7d00/9baef5b/277d2e4) -- equal-width columns regardless of
   description length. Elementor's own per-item flex-size control only
   exposes grow/shrink, not flex-basis, so with flex-basis left at its
   content-driven "auto" default the Transporters card (much longer copy)
   still rendered noticeably wider than the other two even with matching
   grow/shrink values. */
.elementor-element-02a7d00,
.elementor-element-9baef5b,
.elementor-element-277d2e4 {
	flex-basis: 0 !important;
}
/* Stack the three cards on mobile instead of squeezing them into a row.
   Targets .e-con-inner directly (the actual flex container arranging the
   three cards) rather than Elementor's own flex_direction_mobile container
   setting -- that setting only reached the outer boxed-width wrapper (whose
   sole child is .e-con-inner), not the inner wrapper doing the real layout,
   and caused the whole row to vanish on mobile instead of stacking it.
   flex-basis resets to auto here since in a column flex container
   flex-basis governs height, not width -- the unconditional flex-basis:0
   above (for equal desktop column widths) would otherwise apply to each
   card's height instead once stacked. */
@media (max-width: 767px) {
	.elementor-element-a3f01fe .e-con-inner {
		flex-direction: column !important;
	}
	.elementor-element-02a7d00,
	.elementor-element-9baef5b,
	.elementor-element-277d2e4 {
		flex-basis: auto !important;
		width: 100% !important;
	}
}

/* Category tiles */
.agf-category-tiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}
.agf-category-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 18px;
	flex: 1 1 150px;
	max-width: 200px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	background: var(--bg);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.agf-category-tile:hover {
	background: #FAFBF9;
	border-color: var(--border-strong);
}
.agf-category-tile__image {
	width: 100%;
	height: 84px;
	object-fit: cover;
	border-radius: var(--radius, 8px);
}
.agf-category-tile__label {
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 800;
	color: var(--ink);
}
.agf-category-tile__count {
	font-size: 12px;
	color: var(--text-muted, #6B7476);
	font-weight: 600;
}

/* Shared badge/chip */
.agf-badge {
	position: absolute;
	left: 10px;
	top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: var(--radius-chip);
	font-size: 11px;
	font-weight: 800;
}
.agf-badge--mustard {
	background: var(--accent2);
	color: var(--ink);
}
.agf-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: var(--radius-chip);
	background: var(--surface-inset);
	color: var(--ink);
	font-size: 11px;
	font-weight: 700;
}

/* Product grid */
.agf-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-4);
}
.agf-product-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.agf-product-card__image {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--surface-inset);
	display: flex;
	align-items: center;
	justify-content: center;
}
.agf-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.agf-product-card__body {
	padding: 10px 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}
.agf-product-card__name {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 800;
	color: var(--ink);
	line-height: 1.25;
}
.agf-product-card__price {
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 22px;
	letter-spacing: -.02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.agf-product-card__farm {
	font-size: 13px;
	font-weight: 700;
	color: #2C3436;
}
.agf-product-card__location {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
}
.agf-product-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 14px;
	color: var(--ink);
}
.agf-product-card__rating-empty {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
}
.agf-product-card__available {
	font-size: 12px;
	font-weight: 700;
	color: var(--accent-hover);
}
.agf-product-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: auto;
	padding-top: 6px;
}
/* Scoped smaller chip padding/gap -- at 4-per-row desktop widths, the
   default .agf-chip padding left "Collection"/"Delivery" ~8px too wide to
   share one line, wrapping to a second line and undoing the card-height
   trim above. */
.agf-product-card__badges .agf-chip {
	padding: 3px 6px;
	gap: 4px;
}

/* Farm grid */
.agf-farm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-4);
}
.agf-farm-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}
/* overflow:hidden on both .agf-*-card__image boxes above/below -- without
   it, a flex item with aspect-ratio set still falls back to its own
   content's intrinsic size for its automatic minimum height (CSS Flexbox
   spec). A farm/product whose image is missing its expected crop size
   (falls back to the original upload, whatever aspect ratio that happens
   to be -- e.g. Brafurn Test Farm's 474x316 original vs the standard
   960x540 crop) renders visibly taller than every sibling card, even
   though object-fit:cover + a fixed aspect-ratio should make that
   impossible. Found 2026-09-04, measured live: 190.7px vs the correct
   160.9px for a 286px-wide card. */
.agf-farm-card__image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--surface-inset);
	display: flex;
	align-items: center;
	justify-content: center;
}
.agf-farm-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.agf-farm-card__body {
	padding: 14px 16px 16px;
}
.agf-farm-card__header {
	display: flex;
	gap: 11px;
	align-items: flex-start;
}
.agf-farm-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 16px;
	flex: 0 0 auto;
	margin-top: 2px;
	overflow: hidden;
}
.agf-farm-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.agf-farm-card__name {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 800;
	color: var(--ink);
}
.agf-farm-card__location {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 2px;
}
.agf-farm-card__rating {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.agf-farm-card__rating-value {
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 14px;
	color: var(--ink);
}
.agf-farm-card__rating-count {
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	font-weight: 500;
}
.agf-farm-card__description {
	font-size: 13px;
	color: #2C3436;
	margin-top: 8px;
	line-height: 1.5;
}
.agf-farm-card__footer {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-hairline);
	flex-wrap: wrap;
}
.agf-farm-card__products {
	font-size: 12px;
	font-weight: 800;
	color: var(--ink);
}
.agf-farm-card__tag {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--text-muted, #6B7476);
}

/* Product archive (shop + category pages) */
.agf-archive {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-8) var(--gutter-desktop);
}
/* Mobile was using the desktop gutter (32px each side), leaving 2-column
   product cards only ~145px wide -- narrow enough that every text row
   (name, price, availability) wrapped 2-3 lines each, stacking into a very
   tall card. The mobile gutter gives each card real width back. */
@media (max-width: 640px) {
	.agf-archive {
		padding: var(--space-6) var(--gutter-mobile);
	}
}
/* Product archive: always 2 columns -- scoped to .agf-archive only so the
   homepage's carousel widget (same .agf-product-grid class, §7.7) keeps its
   own column count. */
.agf-archive .agf-product-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* On a real phone, 2 columns leaves each card only ~140px of text width --
   narrow enough that the name/price/rating/availability rows each wrapped
   2-3 lines, stacking into a very tall card. One column gives each card its
   full-width single-line layout back. */
@media (max-width: 480px) {
	.agf-archive .agf-product-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
.agf-archive__header {
	margin-bottom: var(--space-6);
}
.agf-archive__title {
	font-family: var(--font-primary);
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -0.015em;
	color: var(--ink);
}
.agf-archive .pagination {
	margin-top: var(--space-7);
}
.agf-archive .pagination .nav-links {
	display: flex;
	gap: 6px;
	justify-content: center;
}
.agf-archive .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-control);
	color: var(--ink);
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
}
.agf-archive .pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #FFFFFF;
}
.agf-archive .pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* Category tiles: 4 per row on mobile, compact enough for that width --
   the desktop tile sizing (flex-basis 150px) is too wide for a 4-up phone
   row, so mobile switches to a real grid with its own smaller tile styling. */
@media (max-width: 640px) {
	.agf-category-tiles {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-2);
	}
	.agf-category-tile {
		max-width: none;
		padding: 10px 6px;
		gap: 6px;
		align-items: center;
		text-align: center;
	}
	.agf-category-tile__image {
		height: 40px;
	}
	.agf-category-tile__label {
		font-size: 11px;
		line-height: 1.2;
	}
	.agf-category-tile__count {
		font-size: 10px;
	}
}

/* Archive layout: sidebar (filters + map) beside the product grid on
   desktop, stacked above it on mobile -- the filters box renders as a
   native <details>/<summary> dropdown so mobile gets a real collapsible
   "Filter by farm or location" control under the category tiles for free,
   with no separate mobile-only markup to keep in sync. */
.agf-archive__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
	margin-top: var(--space-6);
}
.agf-archive__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.agf-archive__filters {
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: var(--space-4);
	background: #FFFFFF;
}
.agf-archive__filters-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 14px;
	color: var(--ink);
}
.agf-archive__filters-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-4);
}
.agf-archive__filters-form .agf-link-more {
	margin-left: 0;
}
.agf-archive__map {
	display: none;
}
@media (min-width: 900px) {
	.agf-archive__layout {
		grid-template-columns: 260px minmax(0, 1fr);
	}
	.agf-archive__filters {
		padding: var(--space-5);
	}
	.agf-archive__map {
		display: block;
	}
	/* All 8 categories in one row -- the mobile/tablet flex-wrap (below) is
	   what let "Other" spill onto its own line; a real grid guarantees
	   exactly 8 equal columns regardless of rounding. */
	.agf-category-tiles {
		display: grid;
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
	/* Archive product grid: 4 per row on desktop -- 2 stays the default for
	   narrower viewports (tablet/mobile), where 4 columns would be too
	   cramped next to the sidebar/stacked filters. */
	.agf-archive .agf-product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.agf-archive__section-title {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 800;
	color: var(--ink);
	margin-top: var(--space-6);
	margin-bottom: var(--space-3);
}
.agf-archive__search-farms {
	display: flex;
	gap: 6px;
	width: 100%;
}
.agf-archive__search-farms input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input, var(--radius-sm));
	padding: 10px 12px;
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--ink);
}
.agf-archive__search-farms button {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input, var(--radius-sm));
	background: var(--surface-inset);
	color: var(--ink);
	cursor: pointer;
}
.agf-archive__nearme {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.agf-archive__nearme select {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input, var(--radius-sm));
	padding: 10px 12px;
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--ink);
}
.agf-archive__nearme button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.agf-archive__map-status {
	margin-top: 8px;
	font-size: 12px;
	color: var(--text-muted, #6B7476);
}

/* Shared button */
.agf-btn--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: #FFFFFF;
	border: none;
	font-family: var(--font-primary);
	font-weight: 700;
	cursor: pointer;
	width: 100%;
}
.agf-btn--primary:hover {
	background: var(--accent-hover);
}
.agf-btn--primary:active {
	transform: scale(var(--press-scale));
	background: var(--accent-press);
}
.agf-btn--lg {
	height: var(--control-h-lg);
	border-radius: var(--radius-control);
	font-size: 15px;
	padding: 0 24px;
}
.agf-chip--green {
	background: var(--accent-soft);
	color: var(--accent-hover);
}
.agf-eyebrow {
	margin-top: 26px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted, #6B7476);
}

/* Product detail page */
.agf-breadcrumb {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	color: var(--text-muted, #6B7476);
	margin-bottom: 18px;
}
.agf-breadcrumb a {
	color: var(--text-muted, #6B7476);
	text-decoration: none;
}
.agf-breadcrumb a:hover {
	color: var(--ink);
}
.agf-product-detail {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 20px var(--gutter-desktop) var(--space-10);
}
.agf-product-detail__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 40px;
	align-items: start;
}
.agf-product-detail__image {
	aspect-ratio: 4 / 3;
	background: var(--surface-inset);
	border-radius: var(--radius-image);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.agf-product-detail__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.agf-product-detail__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.agf-product-detail__thumb {
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--surface-inset);
	overflow: hidden;
	cursor: pointer;
	flex-shrink: 0;
}
.agf-product-detail__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.agf-product-detail__thumb--active {
	border-color: var(--accent);
}
.agf-product-detail__about {
	margin-top: 32px;
}
.agf-product-detail__about h2 {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 800;
	color: var(--ink);
}
.agf-product-detail__description {
	font-size: 15px;
	line-height: 1.6;
	color: #2C3436;
	margin-top: 10px;
	max-width: 68ch;
}
.agf-spec-table {
	margin-top: 28px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.agf-spec-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border: 1px solid var(--ink);
	border-radius: var(--radius-sm);
}
.agf-spec-row span:first-child {
	font-size: 13.5px;
	color: var(--ink);
	font-weight: 800;
}
.agf-spec-row span:last-child {
	font-size: 13.5px;
	color: var(--ink);
	font-weight: 500;
	text-align: right;
}
.agf-spec-row--photo {
	height: auto;
	flex-direction: column;
	align-items: stretch;
}
.agf-spec-row--full {
	grid-column: 1 / -1;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.agf-spec-row--full span:last-child {
	text-align: left;
}
.agf-composition-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.agf-composition-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.agf-composition-row__name {
	flex: 1 1 auto;
	min-width: 0;
}
.agf-composition-row__pct {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	width: 84px;
}
.agf-composition-row__pct input {
	width: 100%;
}
.agf-composition-row__pct span {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-muted, #6B7476);
}
.agf-composition-row__remove {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: var(--radius-sm);
}
.agf-composition-row__remove:hover {
	background: var(--surface-inset, #F3F4F1);
}
.agf-spec-row--photo-start {
	grid-column: 1;
}
.agf-spec-row__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.agf-spec-row__value {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}
.agf-spec-row__photo {
	position: relative;
	display: block;
	width: 100%;
	margin-top: 10px;
}
.agf-spec-row__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-xs);
}
.agf-spec-row--photo .agf-spec-row__photo .agf-spec-row__photo-date {
	position: absolute;
	left: 6px;
	bottom: 6px;
	background: rgba(16,21,22,.78);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
	padding: 2px 6px;
	border-radius: var(--radius-xs);
	white-space: nowrap;
	text-align: left;
}
.agf-bale-photo-preview-wrap {
	position: relative;
	display: inline-block;
}
.agf-bale-photo-preview {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	margin-bottom: 6px;
}
.agf-bale-photo-preview-wrap--pending::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-sm);
	background: rgba(16,21,22,.45);
}
.agf-bale-photo-preview-wrap--pending::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 32px;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 999px;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #FFFFFF;
	animation: agf-spin .8s linear infinite;
	z-index: 1;
}
.agf-bale-photo-preview__date {
	position: absolute;
	left: 3px;
	bottom: 9px;
	background: rgba(16,21,22,.78);
	color: #FFFFFF;
	font-size: 9px;
	font-weight: 800;
	line-height: 1.3;
	padding: 1px 4px;
	border-radius: 3px;
	white-space: nowrap;
}
.agf-product-detail__title {
	font-family: var(--font-primary);
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -0.015em;
	color: var(--ink);
}
.agf-product-detail__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
	flex-wrap: wrap;
}
.agf-product-detail__rating,
.agf-product-detail__location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--text-muted, #6B7476);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.agf-product-detail__location:hover {
	color: var(--accent);
	text-decoration: underline;
}
.agf-product-detail__rating-count {
	font-weight: 500;
}
.agf-product-detail__price-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
}
.agf-product-detail__price {
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 30px;
	letter-spacing: -0.02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.agf-product-detail__badges {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}
.agf-buy-box.agf-card {
	/* Compound selector, not just .agf-buy-box: a later, same-specificity
	   ".agf-card { padding: 16px }" rule further down this file was winning
	   the cascade tie purely on source order and silently overriding this
	   padding regardless of what value it was set to. */
	margin-top: 22px;
	padding: var(--card-pad-lg);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.agf-buy-box__row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.agf-qty-input {
	width: 100px;
	height: var(--control-h);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input);
	padding: 0 12px;
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 700;
}
.agf-qty-input:focus {
	outline: none;
	box-shadow: var(--ring-focus);
	border-color: var(--accent);
}
.agf-buy-box__unit {
	font-size: 13px;
	color: var(--text-muted, #6B7476);
	font-weight: 600;
}
.agf-buy-box__note {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
}
.agf-sold-by {
	margin-top: 10px;
	padding: var(--card-pad);
	display: flex;
	gap: 13px;
	align-items: center;
}
.agf-sold-by__name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 16px;
	color: var(--ink);
}
.agf-sold-by__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 5px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}
.agf-sold-by__location {
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 4px;
}

/* Fulfilment options */
.agf-fulfilment-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}
.agf-fulfilment-option {
	display: flex;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
}
.agf-fulfilment-option__icon {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: var(--radius-sm);
	background: var(--surface-inset);
	display: flex;
	align-items: center;
	justify-content: center;
}
.agf-fulfilment-option__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.agf-fulfilment-option__title {
	font-family: var(--font-primary);
	font-size: 15.5px;
	font-weight: 800;
	color: var(--ink);
}
.agf-fulfilment-option__price {
	margin-left: auto;
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 900;
	color: var(--ink);
}
.agf-fulfilment-option__detail {
	font-size: 13px;
	color: #2C3436;
	margin-top: 4px;
	line-height: 1.5;
}
.agf-fulfilment-option__detail--link {
	display: block;
	text-decoration: none;
}
.agf-fulfilment-option__detail--link:hover {
	color: var(--accent);
	text-decoration: underline;
}
.agf-fulfilment-option__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 8px;
}
.agf-fulfilment-option__meta span {
	font-size: 12px;
	color: var(--text-muted, #6B7476);
	font-weight: 600;
}

/* Reviews */
.agf-reviews {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--border-hairline);
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 40px;
}
.agf-reviews__summary h2 {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 800;
	color: var(--ink);
}
.agf-reviews__score {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 14px;
}
.agf-reviews__score-value {
	font-family: var(--font-primary);
	font-size: 42px;
	font-weight: 900;
	color: var(--ink);
	line-height: 1;
}
.agf-reviews__score-max {
	font-size: 15px;
	color: var(--text-muted, #6B7476);
	font-weight: 700;
}
.agf-reviews__count {
	font-size: 13px;
	color: var(--text-muted, #6B7476);
	margin-top: 6px;
}
.agf-rating-bars {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.agf-rating-bar__label {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	font-weight: 700;
	color: #2C3436;
}
.agf-rating-bar__track {
	height: 6px;
	background: var(--surface-inset);
	border-radius: 999px;
	margin-top: 5px;
	overflow: hidden;
}
.agf-rating-bar__fill {
	height: 100%;
	background: var(--accent);
}
.agf-reviews__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.agf-review-item {
	display: flex;
	gap: 12px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border-hairline);
}
.agf-review-item__avatar {
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 14px;
}
.agf-review-item__header {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.agf-review-item__author {
	font-size: 14px;
	font-weight: 800;
	color: var(--ink);
}
.agf-review-item__date {
	font-size: 12px;
	color: var(--text-subtle, #949B9C);
	margin-left: auto;
}
.agf-review-item__rating {
	margin-top: 6px;
}
.agf-review-item__text {
	font-size: 14px;
	color: #2C3436;
	margin-top: 8px;
	line-height: 1.55;
}
.agf-review-item__reply {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--surface-inset);
	border-radius: var(--radius-sm);
}
.agf-review-item__reply-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent-hover);
}
.agf-review-item__reply p {
	font-size: 13.5px;
	color: #2C3436;
	margin-top: 6px;
	line-height: 1.5;
}

@media (max-width: 900px) {
	.agf-product-detail__grid,
	.agf-reviews {
		grid-template-columns: 1fr;
	}
}

/* Farm storefront */
.agf-chip--dark {
	background: rgba(255, 255, 255, .14);
	color: #FFFFFF;
}
.agf-storefront-hero {
	position: relative;
	height: 260px;
	background: var(--border-strong);
	overflow: hidden;
}
.agf-storefront-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.agf-storefront-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16, 21, 22, .78), transparent 62%);
}
.agf-storefront-hero__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--gutter-desktop) 22px;
	display: flex;
	align-items: flex-end;
	gap: 16px;
}
.agf-storefront-hero__avatar {
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
	border: 3px solid #FFFFFF;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 28px;
	overflow: hidden;
}
.agf-storefront-hero__title-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.agf-storefront-hero__title-row h1 {
	color: #FFFFFF;
	font-family: var(--font-primary);
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -0.015em;
}
.agf-storefront-hero__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.agf-storefront-hero__meta span {
	display: flex;
	align-items: center;
	gap: 5px;
	color: rgba(255, 255, 255, .88);
	font-size: 13.5px;
	font-weight: 700;
}
.agf-storefront {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 24px var(--gutter-desktop) var(--space-10);
}
.agf-storefront__description {
	font-size: 17px;
	color: #2C3436;
	max-width: 68ch;
}
.agf-storefront__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 22px;
}
.agf-stat-tile {
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: 14px 16px;
}
.agf-stat-tile__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted, #6B7476);
}
.agf-stat-tile__value {
	font-family: var(--font-primary);
	font-size: 22px;
	font-weight: 900;
	color: var(--ink);
	margin-top: 4px;
}
.agf-storefront__section-title {
	font-family: var(--font-primary);
	font-size: 22px;
	font-weight: 800;
	color: var(--ink);
	margin-top: 40px;
	margin-bottom: 18px;
}
.agf-storefront__reviews {
	max-width: 680px;
}

@media (max-width: 700px) {
	.agf-storefront__stats {
		grid-template-columns: 1fr;
	}
	.agf-storefront-hero__content {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Cart */
.agf-btn--outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-control);
	height: var(--control-h);
	padding: 0 20px;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.agf-btn--outline:hover {
	border-color: var(--border-strong);
	background: #FAFBF9;
}
/* Hello Elementor's own generic page-title banner ("Basket") sits above
   .agf-cart's own "Your basket" heading with a different container padding
   than ours -- the mismatch a real phone screenshot flagged. .agf-cart
   already has a complete, properly-styled title, so the redundant generic
   one is hidden rather than realigned. */
body.woocommerce-cart .page-header {
	display: none;
}
.agf-cart {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 28px var(--gutter-desktop) var(--space-10);
}
.agf-cart__title {
	font-family: var(--font-primary);
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin-bottom: 22px;
}
.agf-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: var(--space-10) 0;
	text-align: center;
}
.agf-cart__empty p {
	font-size: 15px;
	color: var(--text-muted, #6B7476);
}
.agf-cart__empty .agf-btn--primary {
	width: auto;
	padding: 0 24px;
}
.agf-cart__grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 32px;
	align-items: start;
}
.agf-cart__items {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.agf-cart-item {
	display: flex;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
}
.agf-cart-item__image {
	width: 76px;
	height: 76px;
	flex: 0 0 auto;
	background: var(--surface-inset);
	border-radius: var(--radius-image);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.agf-cart-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.agf-cart-item__body {
	flex: 1;
	min-width: 0;
}
.agf-cart-item__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.agf-cart-item__name a {
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 800;
	color: var(--ink);
	text-decoration: none;
}
.agf-cart-item__farm {
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 3px;
}
.agf-cart-item__price {
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 900;
	color: var(--ink);
	white-space: nowrap;
}
.agf-cart-item__controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}
.agf-qty-input--sm {
	width: 80px;
	height: 34px;
	font-size: 13px;
}
.agf-cart-item__unit {
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	font-weight: 600;
}
.agf-cart-item__remove {
	margin-left: auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--danger);
	text-decoration: none;
}
.agf-cart__note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 14px;
	background: var(--surface-inset);
	border-radius: var(--radius-card);
	font-size: 13px;
	color: #2C3436;
}
.agf-cart-summary {
	position: sticky;
	top: 20px;
	padding: var(--card-pad);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.agf-cart-summary__row {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	color: #2C3436;
}
.agf-cart-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-top: 1px solid var(--border-hairline);
	padding-top: 12px;
	font-family: var(--font-primary);
}
.agf-cart-summary__total span:first-child {
	font-size: 14px;
	font-weight: 800;
	color: var(--ink);
}
.agf-cart-summary__total span:last-child {
	font-size: 22px;
	font-weight: 900;
	color: var(--ink);
}
.agf-cart-summary__note {
	display: flex;
	gap: 7px;
	align-items: flex-start;
	font-size: 12px;
	color: var(--text-muted, #6B7476);
	line-height: 1.5;
}
@media (max-width: 900px) {
	.agf-cart__grid {
		grid-template-columns: 1fr;
	}
	.agf-cart-summary {
		position: static;
	}
}
@media (max-width: 640px) {
	.agf-cart {
		padding: 20px var(--gutter-mobile, 16px) var(--space-10);
	}
}

/* Fulfilment field on checkout */
.agf-checkout-fulfilment {
	margin-bottom: 24px;
}
.agf-checkout-fulfilment h3 {
	font-family: var(--font-primary);
	font-size: 17px;
	font-weight: 800;
	color: var(--ink);
	margin-bottom: 12px;
}
.agf-fulfilment-radio {
	display: block;
	position: relative;
	margin-bottom: 10px;
	cursor: pointer;
}
.agf-fulfilment-radio input {
	position: absolute;
	top: 18px;
	left: 16px;
}
.agf-fulfilment-radio .agf-fulfilment-option {
	padding-left: 40px;
}
.agf-fulfilment-radio input:checked ~ .agf-fulfilment-option {
	border: 2px solid var(--accent);
	background: var(--accent-soft);
	padding: 15px 15px 15px 39px;
}

/* Classic checkout skin — reskins WooCommerce's own markup rather than
   replacing the template, so built-in validation/AJAX/payment stay intact.
   `.woocommerce-cart` is deliberately NOT included here: it's a body class,
   not a template wrapper (cart.php is a full custom override, see
   woocommerce/cart/cart.php), so this rule was padding the whole <body> in
   addition to .agf-cart's own padding below -- compounding to a mobile
   inset of var(--gutter-desktop) [no mobile override] + var(--gutter-mobile)
   = 48px per side on the cart page alone, vs. the 16px every other page
   uses (.agf-archive, .agf-cart itself). Found 2026-10-09: a real phone
   comparison flagged the cart page visibly narrower than Marketplace. */
.woocommerce-checkout {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 28px var(--gutter-desktop) var(--space-10);
	font-family: var(--font-primary);
}
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
	max-width: none;
}
.woocommerce-checkout .form-row label {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 4px;
	display: block;
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select {
	width: 100%;
	height: var(--control-h);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input);
	padding: 0 12px;
	font-family: var(--font-primary);
	font-size: 14px;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus {
	outline: none;
	box-shadow: var(--ring-focus);
	border-color: var(--accent);
}
.woocommerce-checkout #order_review,
.woocommerce-checkout table.shop_table {
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	border-collapse: separate;
	overflow: hidden;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-hairline);
	font-size: 13.5px;
}
.woocommerce-checkout .order-total td,
.woocommerce-checkout .order-total th {
	font-weight: 900;
	font-size: 18px;
	color: var(--ink);
}
.woocommerce-checkout #payment {
	background: var(--surface-inset);
	border-radius: var(--radius-card);
	margin-top: 16px;
}
.woocommerce-checkout #payment ul.payment_methods {
	padding: 16px;
}
.woocommerce-checkout #place_order,
.woocommerce-cart .checkout-button {
	background: var(--accent);
	color: #FFFFFF;
	border: none;
	border-radius: var(--radius-control);
	height: var(--control-h-lg);
	padding: 0 28px;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-cart .checkout-button:hover {
	background: var(--accent-hover);
}

/* Status pill */
.agf-mono {
	font-family: var(--font-mono);
}
.agf-status-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--radius-chip);
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}
.agf-status-pill--neutral {
	background: var(--surface-inset);
	color: var(--ink);
}
.agf-status-pill--info {
	background: #E5EDEE;
	color: #2C4B52;
}
.agf-status-pill--success {
	background: var(--accent-soft);
	color: var(--accent-hover);
}
.agf-status-pill--danger {
	background: #FBE6E4;
	color: var(--danger);
}

/* Order timeline */
.agf-order-timeline {
	display: flex;
	flex-direction: column;
}
.agf-timeline-step {
	display: flex;
	gap: 12px;
	position: relative;
	padding-bottom: 22px;
}
.agf-timeline-step:last-child {
	padding-bottom: 0;
}
.agf-timeline-step::before {
	content: '';
	position: absolute;
	left: 9px;
	top: 20px;
	bottom: 0;
	width: 2px;
	background: var(--border-hairline);
}
.agf-timeline-step:last-child::before {
	display: none;
}
.agf-timeline-step--done::before {
	background: var(--accent);
}
.agf-timeline-step__dot {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border-radius: 999px;
	border: 2px solid var(--border-hairline);
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.agf-timeline-step--done .agf-timeline-step__dot {
	background: var(--accent);
	border-color: var(--accent);
}
.agf-timeline-step--current .agf-timeline-step__dot {
	border-color: var(--accent);
	background: var(--accent-soft);
}
.agf-timeline-step__label {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 14px;
	color: var(--text-muted, #6B7476);
}
.agf-timeline-step--done .agf-timeline-step__label,
.agf-timeline-step--current .agf-timeline-step__label {
	color: var(--ink);
	font-weight: 800;
}
.agf-timeline-step__actor {
	font-size: 11.5px;
	color: var(--text-subtle, #949B9C);
	margin-top: 2px;
	text-transform: capitalize;
}

/* Order placed / order detail */
.agf-order-placed {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 48px var(--gutter-desktop) var(--space-10);
}
.agf-order-placed__header {
	display: flex;
	align-items: center;
	gap: 12px;
}
.agf-order-placed__header h1 {
	font-family: var(--font-primary);
	font-size: 26px;
	font-weight: 900;
	color: var(--ink);
}
.agf-order-placed__header p {
	font-size: 14px;
	color: var(--text-muted, #6B7476);
	margin-top: 4px;
}
.agf-order-placed__check {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.agf-order-placed__card {
	margin-top: 28px;
	padding: var(--card-pad);
}
.agf-order-placed__farm {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border-hairline);
}
.agf-order-placed__farm > div:nth-child(2) {
	flex: 1;
}
.agf-order-placed__actions {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}
.agf-order-detail__items {
	margin-top: 24px;
}
.agf-order-detail__items h3 {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 800;
	color: var(--ink);
	margin-bottom: 8px;
}

/* My orders */
.agf-my-orders__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.agf-order-card {
	display: block;
	padding: 16px;
}
.agf-order-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.agf-order-card__number {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 14.5px;
	color: var(--ink);
}
.agf-order-card__date {
	font-size: 12px;
	color: var(--text-muted, #6B7476);
	margin-top: 2px;
}
.agf-order-card__body {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-hairline);
	flex-wrap: wrap;
}
.agf-order-card__items {
	font-size: 13px;
	color: #2C3436;
	font-weight: 600;
}
.agf-order-card__fulfilment {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--text-muted, #6B7476);
	font-weight: 600;
}
.agf-order-card__total {
	margin-left: auto;
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 15px;
	color: var(--ink);
}

/* Farmer app shell */
.agf-farmer-app {
	max-width: 480px;
	margin: 0 auto;
	background: var(--bg);
	min-height: 100vh;
}
/* Mobile-first by design (farmer app is a touch-first surface), but "expands"
   was never actually implemented past 480px -- every farmer page rendered as
   a narrow centred column with huge empty margins on a real desktop browser,
   confirmed from a live screenshot (2026-09-02). The chrome (app bar, tab bar)
   now spans the site's own --container-max, matching how desktop content goes
   full-width everywhere else -- but the content column itself stays at a
   readable width rather than stretching cards/forms edge-to-edge across
   1280px, which would look worse, not better. Stat/shortcut grids are the
   exception: they widen to actually use the room. */
@media (min-width: 900px) {
	.agf-farmer-app {
		max-width: var(--container-max);
	}
	.agf-appbar {
		padding-left: var(--gutter-desktop);
		padding-right: var(--gutter-desktop);
	}
	.agf-app-body {
		max-width: 880px;
		margin: 0 auto;
		width: 100%;
		padding-left: var(--gutter-desktop);
		padding-right: var(--gutter-desktop);
		box-sizing: border-box;
	}
	.agf-stat-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.agf-shortcuts {
		grid-template-columns: repeat(5, 1fr);
	}
}
.agf-appbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--bg);
	border-bottom: 1px solid var(--border-hairline);
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 56px;
}
.agf-appbar__back {
	display: flex;
	color: var(--ink);
	padding: 6px;
	margin-left: -6px;
}
.agf-appbar__logo {
	display: flex;
}
.agf-appbar__title {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 17px;
	color: var(--ink);
}
.agf-appbar__logout {
	display: flex;
	margin-left: auto;
	margin-right: -6px;
	padding: 6px;
	color: var(--text-muted);
}
.agf-app-body {
	padding: 16px 16px 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: calc(100vh - 56px - 76px);
}
.agf-tabbar {
	position: sticky;
	bottom: 0;
	background: var(--bg);
	box-shadow: var(--shadow-sticky);
	display: flex;
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.agf-tabbar__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 4px;
	text-decoration: none;
	color: var(--text-muted, #6B7476);
	font-size: 11px;
	font-weight: 700;
}
.agf-tabbar__item--active {
	color: var(--accent);
}
.agf-farmer-greeting {
	font-family: var(--font-primary);
	font-size: 24px;
	font-weight: 900;
	color: var(--ink);
	margin-top: 6px;
}
.agf-stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.agf-stat-tile--accent {
	border-color: var(--accent2);
	background: #FDF7E7;
}
.agf-attention-card {
	padding: 14px;
	border: 1px solid var(--border-hairline);
	border-top: 3px solid var(--accent2);
	border-radius: var(--radius-card);
	display: block;
	text-decoration: none;
	color: inherit;
}
.agf-attention-card__top {
	display: flex;
	align-items: center;
	gap: 8px;
}
.agf-attention-card__ref {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--ink);
}
.agf-attention-card__items {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 15px;
	color: var(--ink);
	margin-top: 8px;
}
.agf-attention-card__meta {
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 3px;
}
.agf-attention-card__footer {
	display: flex;
	align-items: center;
	margin-top: 10px;
}
.agf-attention-card__total {
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 17px;
	color: var(--ink);
}
.agf-btn--sm {
	margin-left: auto;
	height: var(--control-h-sm);
	padding: 0 14px;
	font-size: 12.5px;
	width: auto;
	white-space: nowrap;
}
.agf-shortcuts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.agf-shortcut {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	min-height: 88px;
	text-decoration: none;
	color: inherit;
}
.agf-shortcut__label {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 14px;
	color: var(--ink);
}
.agf-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted, #6B7476);
	margin-bottom: 10px;
	display: block;
}
/* Farmer orders -- list + detail */
.agf-tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 4px;
}
.agf-tab {
	flex: 0 0 auto;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-hairline);
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 13px;
	color: var(--text-muted, #6B7476);
	text-decoration: none;
	white-space: nowrap;
}
.agf-tab--active {
	background: var(--ink);
	border-color: var(--ink);
	color: #FFFFFF;
}
.agf-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 48px 20px;
	color: var(--text-muted, #6B7476);
	text-align: center;
}
.agf-card {
	padding: 16px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
}
.agf-order-detail {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.agf-order-detail__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.agf-buyer-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.agf-buyer-row__name {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 15px;
	color: var(--ink);
}
.agf-buyer-row__meta {
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 2px;
}
.agf-buyer-row__call {
	margin-left: auto;
}
.agf-avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--accent2);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 16px;
	overflow: hidden;
}
.agf-inset-card {
	background: var(--inset, #F5F3EE);
	border-color: transparent;
}
.agf-inline-form {
	display: flex;
	gap: 8px;
	margin-left: auto;
}
.agf-farmer-order-card {
	padding: 14px;
}
.agf-farmer-order-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.agf-farmer-order-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}
.agf-sticky-bar {
	position: sticky;
	bottom: 0;
	background: #FFFFFF;
	border-top: 1px solid var(--border-hairline);
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	margin: 16px -16px -16px;
}
.agf-sticky-bar__form {
	display: flex;
	gap: 10px;
}
.agf-sticky-bar__form .agf-btn--outline,
.agf-sticky-bar__form .agf-btn--primary {
	flex: 1;
}
.agf-commission-breakdown {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.agf-commission-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: var(--ink);
}
.agf-commission-row--muted {
	color: var(--text-muted, #6B7476);
}
.agf-commission-row--strong {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 16px;
	color: var(--ink);
}
.agf-commission-divider {
	height: 1px;
	background: var(--border-hairline);
}
.agf-commission-note {
	font-size: 12px;
	color: var(--text-muted, #6B7476);
	margin-top: 2px;
}
/* Farmer products list */
.agf-products-header {
	display: flex;
	justify-content: flex-end;
}
.agf-btn--ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	color: var(--ink);
	border: none;
	font-family: var(--font-primary);
	font-weight: 700;
	cursor: pointer;
}
.agf-farmer-product-card {
	display: flex;
	gap: 12px;
}
.agf-farmer-product-card__image {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	border-radius: var(--radius-sm);
	background: var(--inset, #F5F3EE);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.agf-farmer-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.agf-farmer-product-card__body {
	flex: 1;
	min-width: 0;
}
.agf-farmer-product-card__name {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 15px;
	color: var(--ink);
}
.agf-farmer-product-card__price {
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 16px;
	color: var(--ink);
	margin-top: 2px;
}
.agf-farmer-product-card__meta {
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 3px;
}
.agf-farmer-product-card__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}
.agf-toggle-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 13px;
	color: var(--text-muted, #6B7476);
}
.agf-toggle-switch--on {
	color: var(--ink);
}
.agf-toggle-switch__track {
	width: 34px;
	height: 20px;
	border-radius: var(--radius-pill);
	background: var(--border-hairline);
	position: relative;
	transition: background var(--motion-fast, .15s);
}
.agf-toggle-switch--on .agf-toggle-switch__track {
	background: var(--accent);
}
.agf-toggle-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #FFFFFF;
	transition: left var(--motion-fast, .15s);
}
.agf-toggle-switch--on .agf-toggle-switch__thumb {
	left: 16px;
}
/* Farmer sales & payouts */
.agf-sales-chart {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 120px;
	margin-top: 16px;
}
.agf-sales-chart__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.agf-sales-chart__bar {
	width: 100%;
	background: var(--accent-soft, #D9EBD3);
	border-radius: 4px 4px 0 0;
}
.agf-sales-chart__bar--current {
	background: var(--accent);
}
.agf-sales-chart__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-muted, #6B7476);
}
.agf-payout-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 0;
	border-bottom: 1px solid var(--border-hairline);
}
.agf-payout-row:last-child {
	border-bottom: none;
}
.agf-payout-row__ref {
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink);
}
.agf-payout-row__date {
	font-size: 12px;
	color: var(--text-muted, #6B7476);
}
.agf-payout-row__amount {
	margin-left: auto;
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 15px;
	color: var(--ink);
}

/* Farmer reviews */
.agf-reviews-summary {
	display: flex;
	gap: 18px;
	align-items: center;
}
.agf-reviews-summary__score {
	flex: 0 0 auto;
	text-align: center;
}
.agf-reviews-summary__value {
	font-family: var(--font-primary);
	font-size: 32px;
	font-weight: 900;
	color: var(--ink);
	line-height: 1;
}
.agf-reviews-summary__stars {
	margin-top: 6px;
}
.agf-reviews-summary__count {
	font-size: 12px;
	color: var(--text-muted, #6B7476);
	margin-top: 4px;
}
.agf-reviews-summary__bars {
	flex: 1;
}
.agf-review-reply-form {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.agf-review-reply-form textarea {
	width: 100%;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input, var(--radius-sm));
	padding: 10px 12px;
	font-family: var(--font-primary);
	font-size: 13.5px;
	resize: vertical;
}
.agf-review-reply-form .agf-btn--sm {
	margin-left: 0;
	width: auto;
}

/* My farm */
.agf-farm-hero__cover {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--inset, #F5F3EE) center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}
.agf-farm-hero__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16,21,22,.78), transparent 62%);
}
.agf-farm-hero__photo-form {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 2;
}
.agf-farm-hero__photo-btn {
	display: inline-block;
	border-radius: var(--radius-control);
	background: rgba(255,255,255,.92);
	padding: 7px 11px;
	font-size: 12px;
	font-weight: 800;
	font-family: var(--font-primary);
	color: var(--ink);
	cursor: pointer;
}
.agf-farm-hero__id {
	position: absolute;
	left: 14px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: 10px;
}
.agf-farm-hero__id .agf-avatar {
	border: 2px solid #FFFFFF;
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.agf-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.agf-farm-hero__name {
	color: #FFFFFF;
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 18px;
}
.agf-farm-hero__location {
	color: rgba(255,255,255,.86);
	font-size: 12px;
	font-weight: 700;
}
.agf-farm-hero__footer {
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.agf-chip--verified {
	background: var(--accent-soft, #D9EBD3);
	color: var(--accent);
}
.agf-chip--success {
	background: var(--accent-soft, #D9EBD3);
	color: var(--success, var(--accent));
}
.agf-chip--info {
	background: var(--surface-inset);
	color: var(--info, var(--ink));
}
.agf-chip--neutral {
	background: var(--surface-inset);
	color: var(--text-muted, #6B7476);
}
.agf-farm-hero__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-muted, #6B7476);
}
.agf-farm-hero__footer .agf-btn--sm {
	margin-left: auto;
}
.agf-transport-note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.agf-transport-note__title {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--ink);
}
.agf-transport-note p {
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 3px;
	line-height: 1.5;
}
.agf-transport-note__badges {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}
.agf-farm-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--border-hairline);
}
.agf-farm-row__link {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}
.agf-farm-row__value {
	margin-left: auto;
	font-size: 13px;
	color: var(--text-muted, #6B7476);
}
.agf-farm-open-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
}
.agf-farm-open-toggle__title {
	font-size: 14px;
	font-weight: 800;
	color: var(--ink);
}
.agf-farm-open-toggle__body {
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 2px;
}
.agf-farm-open-toggle .agf-toggle-switch {
	flex: 0 0 auto;
}
.agf-farm-profile-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 4px;
}
.agf-farm-profile-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-muted, #6B7476);
}
.agf-farm-profile-form input[type="text"],
.agf-farm-profile-form textarea {
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input, var(--radius-sm));
	padding: 10px 12px;
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--ink);
}
.agf-farm-profile-form textarea {
	resize: vertical;
}
.agf-farm-profile-form .agf-btn--sm {
	margin-left: 0;
	width: auto;
	align-self: flex-start;
}
/* Add product wizard */
.agf-wizard-count {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--text-muted, #6B7476);
}
.agf-wizard-progress {
	padding: 12px 16px 0;
}
.agf-wizard-progress__bars {
	display: flex;
	gap: 4px;
}
.agf-wizard-progress__bar {
	flex: 1;
	height: 4px;
	border-radius: var(--radius-pill);
	background: var(--border-hairline);
}
.agf-wizard-progress__bar--done {
	background: var(--accent);
}
.agf-wizard-progress__label {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--text-muted, #6B7476);
	margin-top: 8px;
}
.agf-wizard-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.agf-wizard-title {
	font-family: var(--font-primary);
	font-size: 22px;
	font-weight: 800;
	color: var(--ink);
}
.agf-wizard-subtitle {
	font-size: 14px;
	color: var(--text-muted, #6B7476);
	margin-top: -8px;
}
.agf-wizard-hint {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	color: var(--ink);
	line-height: 1.5;
}
.agf-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-muted, #6B7476);
}
.agf-form-error {
	color: var(--danger);
	font-size: 12.5px;
	font-weight: 600;
}
.agf-form-field input[type="text"],
.agf-form-field input[type="number"],
.agf-form-field select,
.agf-form-field textarea {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input, var(--radius-sm));
	padding: 10px 12px;
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--ink);
	height: var(--control-h-lg);
}
.agf-form-field textarea {
	height: auto;
	resize: vertical;
}
.agf-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.agf-photo-slot {
	aspect-ratio: 1;
	border-radius: var(--radius-sm);
	background: var(--inset, #F5F3EE);
	position: relative;
	overflow: hidden;
}
.agf-signup-photo-preview {
	width: 96px;
	margin-top: 8px;
}
.agf-page-loader {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: rgba(255,255,255,.92);
	z-index: 10000;
}
.agf-page-loader__spinner {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 3px solid var(--border-hairline);
	border-top-color: var(--accent);
	animation: agf-spin .8s linear infinite;
}
.agf-page-loader p {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	margin: 0;
}
.agf-photo-slot--filled img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.agf-photo-slot--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: 1px dashed var(--border-strong);
	background: transparent;
	cursor: pointer;
}
.agf-photo-slot--empty span {
	font-size: 10px;
	font-weight: 700;
	color: var(--text-muted, #6B7476);
}
.agf-photo-slot--pending::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(16,21,22,.45);
}
.agf-photo-slot--pending::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 999px;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #FFFFFF;
	animation: agf-spin .8s linear infinite;
	z-index: 1;
}
@keyframes agf-spin {
	to { transform: rotate(360deg); }
}
.agf-photo-slot__badge {
	position: absolute;
	left: 4px;
	bottom: 4px;
	background: rgba(16,21,22,.78);
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 800;
	padding: 2px 6px;
	border-radius: var(--radius-xs);
}
.agf-photo-slot__delete-form {
	position: absolute;
	top: 4px;
	right: 4px;
}
.agf-photo-slot__delete {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	border: none;
	background: rgba(16,21,22,.78);
	cursor: pointer;
}
.agf-photo-slot__delete:hover {
	background: var(--danger);
}
.agf-photo-slot__primary-form {
	position: absolute;
	top: 4px;
	left: 4px;
}
.agf-photo-slot__make-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	border: none;
	background: rgba(16,21,22,.78);
	cursor: pointer;
}
.agf-photo-slot__make-primary:hover {
	background: var(--accent);
}
.agf-photo-upload-row {
	display: flex;
	gap: var(--space-3);
}
.agf-photo-upload {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px dashed var(--border-strong, var(--border-hairline));
	border-radius: var(--radius-card);
	padding: 18px;
	font-family: var(--font-primary);
	font-weight: 700;
	color: var(--accent);
	cursor: pointer;
}
.agf-photo-upload-row .agf-photo-upload {
	flex: 1;
	text-align: center;
}
@media (max-width: 480px) {
	.agf-photo-upload-row {
		flex-direction: column;
	}
}
.agf-map-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid var(--border-hairline);
}
.agf-map-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.agf-map-view-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin-top: 10px;
}
.agf-radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.agf-radio-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
}
.agf-radio-option:has(input:checked) {
	border-color: var(--accent);
	background: var(--accent-soft, #D9EBD3);
}
.agf-radio-option input {
	margin-top: 2px;
}
.agf-radio-option small {
	display: block;
	font-size: 12px;
	color: var(--text-muted, #6B7476);
	font-weight: 400;
}
.agf-radio-suboption {
	margin-left: 24px;
}
.agf-checkbox-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}
.agf-checkbox-option input {
	margin-top: 3px;
}
.agf-checkbox-option strong {
	display: block;
	font-size: 14.5px;
	color: var(--ink);
}
.agf-checkbox-option small {
	display: block;
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 2px;
}
.agf-collection-times {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.agf-collection-day-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--border-hairline);
}
.agf-collection-day-row:last-child {
	border-bottom: none;
}
.agf-collection-day-check {
	flex: 0 0 auto;
	min-width: 110px;
}
.agf-collection-day-check span {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}
.agf-collection-day-times {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
}
.agf-collection-day-times input[type="time"] {
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input, var(--radius-sm));
	padding: 6px 8px;
	font-family: var(--font-primary);
	font-size: 13px;
	color: var(--ink);
	height: var(--control-h);
}
.agf-wizard-subform {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: -6px;
}
.agf-publish-preview__image {
	aspect-ratio: 4 / 3;
	background: var(--inset, #F5F3EE);
	display: flex;
	align-items: center;
	justify-content: center;
}
.agf-publish-preview__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.agf-publish-preview__body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.agf-publish-preview__name {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 17px;
	color: var(--ink);
}
.agf-publish-preview__price {
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 22px;
	color: var(--ink);
}
.agf-publish-preview__meta {
	font-size: 13px;
	color: var(--text-muted, #6B7476);
}
.agf-publish-preview__badges {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}
.agf-whatsnext {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 10px;
	list-style: none;
	padding: 0;
}
.agf-whatsnext li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 13px;
	color: var(--ink);
	line-height: 1.5;
}
/* Transporter app -- desktop-oriented TopNav shell, distinct from the farmer
   app's mobile AppBar + BottomTabBar (design system: ui_kits/transporter). */
.agf-transporter-page {
	background: var(--bg, #FAF8F3);
}
.agf-topnav {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 0 var(--gutter-desktop);
	height: 64px;
	background: #FFFFFF;
	border-bottom: 1px solid var(--border-hairline);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.agf-topnav__logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 16px;
	color: var(--ink);
	text-decoration: none;
}
.agf-topnav__links {
	display: flex;
	gap: 22px;
	flex-shrink: 0;
}
@media (max-width: 900px) {
	.agf-topnav {
		padding: 0 var(--gutter-tablet);
	}
}
.agf-topnav__auth-mobile {
	display: none;
}
@media (max-width: 600px) {
	.agf-topnav {
		gap: 12px;
		padding: 0 var(--gutter-mobile);
	}
	.agf-topnav__links {
		gap: 12px;
	}
	.agf-topnav__identity {
		display: none;
	}
	/* Sign in + Sign up as two separate buttons ate too much of the
	   already-tight mobile header row -- one combined button expands into a
	   small menu with both options instead. */
	.agf-topnav__auth-desktop {
		display: none;
	}
	.agf-topnav__auth-mobile {
		display: block;
		position: relative;
	}
	.agf-topnav__auth-mobile > summary {
		list-style: none;
		cursor: pointer;
	}
	.agf-topnav__auth-mobile > summary::-webkit-details-marker {
		display: none;
	}
	.agf-topnav__auth-menu {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		z-index: 20;
		display: flex;
		flex-direction: column;
		min-width: 150px;
		padding: 6px;
		background: #FFFFFF;
		border: 1px solid var(--border-hairline);
		border-radius: var(--radius-card);
		box-shadow: var(--shadow-menu);
	}
	.agf-topnav__auth-menu a {
		padding: 10px 12px;
		border-radius: var(--radius-sm);
		font-family: var(--font-primary);
		font-weight: 700;
		font-size: 14px;
		color: var(--ink);
		text-decoration: none;
	}
	.agf-topnav__auth-menu a:hover {
		background: var(--surface-inset);
	}
}
.agf-topnav__link {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 14px;
	color: var(--text-muted, #6B7476);
	text-decoration: none;
	padding: 8px 0;
	border-bottom: 2px solid transparent;
}
.agf-topnav__link--active {
	color: var(--ink);
	border-bottom-color: var(--accent);
}
.agf-topnav__right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
}
.agf-topnav__right .agf-btn--outline {
	background: var(--surface-inset, #F3F4F1);
}
.agf-topnav__identity {
	line-height: 1.2;
}
.agf-topnav__company {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--ink);
}
.agf-topnav__role {
	font-size: 11px;
	color: var(--text-muted, #6B7476);
}
.agf-avatar--square {
	border-radius: var(--radius-sm);
}
.agf-transporter-main {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 32px var(--gutter-desktop) 64px;
}
.agf-transporter-header {
	display: flex;
	align-items: flex-end;
	gap: 16px;
}
.agf-transporter-header h1 {
	margin-top: 6px;
}
.agf-transporter-header .agf-btn--primary {
	margin-left: auto;
	width: auto;
	padding: 0 20px;
}
.agf-transporter-subtitle {
	font-size: 13.5px;
	color: var(--text-muted, #6B7476);
	line-height: 1.5;
}
.agf-stat-grid--4 {
	grid-template-columns: repeat(4, 1fr);
	margin-top: 26px;
}
@media (max-width: 640px) {
	.agf-stat-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.agf-fleet-grid,
	.agf-two-col,
	.agf-profile-form-grid {
		grid-template-columns: 1fr;
	}
}
.agf-transporter-columns {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	margin-top: 36px;
	align-items: start;
}
@media (max-width: 900px) {
	.agf-transporter-columns {
		grid-template-columns: 1fr;
	}
}
.agf-transporter-section-head {
	display: flex;
	align-items: flex-end;
	margin-bottom: 16px;
}
.agf-link-more {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 13px;
	color: var(--accent);
	text-decoration: none;
}
.agf-link-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 13px;
	color: var(--text-muted, #6B7476);
	text-decoration: none;
}
.agf-job-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.agf-empty-state--sm {
	padding: 24px;
}
.agf-job-row {
	display: flex;
	gap: 18px;
	align-items: center;
	text-decoration: none;
	color: inherit;
}
.agf-job-row__main {
	flex: 1;
	min-width: 0;
}
.agf-job-row__top {
	display: flex;
	align-items: center;
	gap: 10px;
}
.agf-job-row__ref {
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink);
}
.agf-job-row__route {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}
.agf-job-row__route span {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 15.5px;
	color: var(--ink);
}
.agf-job-row__km {
	font-size: 13px !important;
	color: var(--text-muted, #6B7476) !important;
	font-weight: 700 !important;
}
.agf-job-row__meta {
	display: flex;
	gap: 16px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.agf-job-row__meta span {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	font-weight: 600;
}
.agf-job-row__pay {
	text-align: right;
	flex: 0 0 auto;
}
.agf-job-row__amount {
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 24px;
	color: var(--ink);
	margin-top: 2px;
}
.agf-area-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 12px;
}
.agf-area-chip {
	background: #FFFFFF;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-pill);
	padding: 5px 11px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink);
}
.agf-fleet-preview {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.agf-truck-card {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.agf-truck-card__icon {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: var(--radius-sm);
	background: var(--inset, #F5F3EE);
	display: flex;
	align-items: center;
	justify-content: center;
}
.agf-truck-card__body {
	flex: 1;
	min-width: 0;
}
.agf-truck-card__top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.agf-truck-card__type {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 16px;
	color: var(--ink);
}
.agf-truck-card__meta {
	display: flex;
	gap: 14px;
	margin-top: 6px;
	flex-wrap: wrap;
}
.agf-truck-card__meta span {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}
.agf-truck-card__reg {
	font-family: var(--font-mono) !important;
	font-size: 12.5px !important;
	color: var(--text-muted, #6B7476) !important;
	font-weight: 400 !important;
}
.agf-truck-card__actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.agf-fleet-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.agf-job-detail-header {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	margin-top: 14px;
}
.agf-job-detail-header h1 {
	margin-top: 6px;
}
.agf-job-detail-header__pay {
	margin-left: auto;
	text-align: right;
}
.agf-job-detail-header__amount {
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 26px;
	color: var(--ink);
}
.agf-spec-grid {
	margin-top: 12px;
}
.agf-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.agf-contact-row {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 12px;
}
.agf-contact-row__name {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 15px;
	color: var(--ink);
}
.agf-contact-row__meta {
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 2px;
}
.agf-contact-row .agf-btn--sm {
	margin-left: auto;
}
.agf-job-timeline {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.agf-job-accept-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 14px;
}
.agf-checkbox-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 12px;
}
.agf-checkbox-option--tight {
	padding: 4px 0;
}
.agf-verify-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}
.agf-verify-row span:first-of-type {
	font-size: 13.5px;
	color: var(--ink);
	font-weight: 600;
}
.agf-verify-row__status {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-muted, #6B7476);
}
.agf-profile-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.agf-buyer-confirm-form {
	margin-top: 16px;
}
.agf-buyer-confirm-form .agf-btn--primary {
	width: 100%;
}
/* Admin console -- desktop-only SideNav shell, ui_kits/admin (S7.6). */
.agf-admin-page {
	background: var(--inset, #F5F3EE);
}
.agf-admin-app {
	display: flex;
	min-height: 100vh;
}
.agf-sidenav {
	width: 248px;
	flex: 0 0 auto;
	background: var(--dark, #101516);
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.agf-sidenav__head {
	height: 64px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	border-bottom: 1px solid var(--darkSoft, #1C2224);
}
.agf-sidenav__badge {
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: .1em;
	color: rgba(255,255,255,.4);
	margin-left: auto;
}
.agf-sidenav__items {
	padding: 12px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}
.agf-sidenav__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 600;
	color: rgba(255,255,255,.7);
}
.agf-sidenav__item--active {
	background: var(--accent);
	color: #FFFFFF;
	font-weight: 800;
}
.agf-sidenav__count {
	margin-left: auto;
	font-size: 11px;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	background: var(--accent2);
	color: var(--ink);
}
.agf-sidenav__item--active .agf-sidenav__count {
	background: rgba(255,255,255,.2);
	color: #FFFFFF;
}
.agf-sidenav__footer {
	padding: 14px 18px;
	border-top: 1px solid var(--darkSoft, #1C2224);
	font-size: 12.5px;
	color: rgba(255,255,255,.4);
}
/* Admin console mobile layout -- the sidebar's fixed 248px width (no
   collapse of any kind) left as little as ~125px for .agf-admin-main's own
   content on a typical phone width, squeezing every admin page's content
   enough that controls like the Products page's Feature/Featured star
   button effectively disappeared (either wrapped into an unreadably narrow
   sliver or pushed into horizontal-scroll territory with no visual cue
   there was more to the right). Collapses the sidebar into a horizontally
   scrollable pill row above the content instead of a fixed-width column,
   so .agf-admin-main gets the full viewport width back. */
@media (max-width: 900px) {
	.agf-admin-app {
		flex-direction: column;
		min-height: auto;
	}
	.agf-sidenav {
		width: 100%;
		min-height: auto;
	}
	.agf-sidenav__head {
		display: none;
	}
	.agf-sidenav__items {
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px;
	}
	.agf-sidenav__item {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.agf-sidenav__footer {
		display: none;
	}
}
.agf-admin-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.agf-admin-topbar {
	height: 64px;
	background: #FFFFFF;
	border-bottom: 1px solid var(--border-hairline);
	display: flex;
	align-items: center;
	padding: 0 24px;
}
.agf-admin-topbar__right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}
.agf-admin-topbar__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}
.agf-admin-content {
	flex: 1;
	padding: 28px 24px 56px;
	max-width: 1400px;
}
.agf-admin-page-head {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 22px;
}
.agf-admin-page-head h1 {
	font-size: 26px;
}
.agf-admin-page-head p {
	font-size: 13.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 5px;
}
.agf-admin-page-head__action {
	margin-left: auto;
}
.agf-admin-table-wrap {
	background: #FFFFFF;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	overflow: hidden;
	overflow-x: auto;
}
.agf-admin-table {
	width: 100%;
	border-collapse: collapse;
}
.agf-admin-table th {
	background: var(--inset, #F5F3EE);
	padding: 11px 16px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted, #6B7476);
	border-bottom: 1px solid var(--border-hairline);
	white-space: nowrap;
}
.agf-admin-table td {
	padding: 13px 16px;
	font-size: 13.5px;
	color: var(--ink);
	border-bottom: 1px solid var(--border-hairline);
	white-space: nowrap;
}
.agf-admin-table tr:last-child td {
	border-bottom: none;
}
.agf-admin-table__empty {
	text-align: center;
	color: var(--text-muted, #6B7476);
	padding: 24px;
}
.agf-admin-mono-link {
	font-family: var(--font-mono);
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}
.agf-admin-mono {
	font-family: var(--font-mono);
	font-weight: 700;
	color: var(--ink);
}
.agf-admin-columns {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 24px;
	margin-top: 28px;
	align-items: start;
}
.agf-admin-bar-row {
	margin-bottom: 12px;
}
.agf-admin-bar-row:last-child {
	margin-bottom: 0;
}
.agf-admin-bar-row__label {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}
.agf-admin-bar-row__track {
	height: 7px;
	background: var(--border-hairline);
	border-radius: var(--radius-pill);
	margin-top: 5px;
	overflow: hidden;
}
.agf-admin-bar-row__fill {
	height: 100%;
	background: var(--accent);
}
.agf-admin-attention-card {
	border-top: 3px solid var(--accent2);
}
.agf-admin-attention-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
}
.agf-admin-attention-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-family: var(--font-primary);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
}
.agf-admin-attention-list a i:last-child {
	margin-left: auto;
}
.agf-admin-category-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}
.agf-admin-category-row {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
}
.agf-admin-category-row span:first-child {
	color: var(--ink);
	font-weight: 600;
}
.agf-admin-category-row span:last-child {
	color: var(--ink);
	font-weight: 800;
}
.agf-admin-commission-card {
	background: var(--dark, #101516);
	border-color: var(--dark, #101516);
}
.agf-admin-commission-card .agf-eyebrow {
	color: rgba(255,255,255,.4);
}
.agf-admin-commission-card__value {
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 30px;
	color: #FFFFFF;
	margin-top: 8px;
}
.agf-admin-commission-card p {
	color: rgba(255,255,255,.65);
	font-size: 12.5px;
	margin-top: 4px;
	line-height: 1.5;
}
.agf-admin-commission-card .agf-btn--sm {
	margin-top: 14px;
	width: auto;
}
.agf-admin-filter-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 18px 0 20px;
}
.agf-filter-chip {
	padding: 7px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-hairline);
	background: #FFFFFF;
	font-family: var(--font-primary);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-muted, #6B7476);
	text-decoration: none;
	white-space: nowrap;
}
.agf-filter-chip--selected {
	background: var(--ink);
	border-color: var(--ink);
	color: #FFFFFF;
}
.agf-admin-detail-line {
	font-size: 14px;
	color: var(--ink);
	margin-top: 8px;
}
.agf-admin-detail-line--muted {
	color: var(--text-muted, #6B7476);
	font-size: 12.5px;
	margin-top: 2px;
}
.agf-admin-verify-row {
	display: flex;
	gap: 14px;
	align-items: center;
}
.agf-admin-verify-row__body {
	flex: 1;
	min-width: 0;
}
.agf-admin-verify-row__top {
	display: flex;
	align-items: center;
	gap: 9px;
}
.agf-admin-verify-row__name {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 15.5px;
	color: var(--ink);
}
.agf-admin-verify-row__meta {
	display: flex;
	gap: 14px;
	margin-top: 6px;
	flex-wrap: wrap;
}
.agf-admin-verify-row__meta span {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--text-muted, #6B7476);
	font-weight: 600;
}
.agf-admin-verify-row__actions {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}
.agf-admin-dispute-list,
.agf-admin-review-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 14px;
}
.agf-admin-dispute-row,
.agf-admin-review-row {
	display: flex;
	gap: 14px;
	align-items: center;
}
.agf-admin-dispute-row__body,
.agf-admin-review-row__body {
	flex: 1;
	min-width: 0;
}
.agf-admin-dispute-row__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}
.agf-admin-dispute-note {
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input, var(--radius-sm));
	padding: 8px 10px;
	font-family: var(--font-primary);
	font-size: 12.5px;
	width: 180px;
}
.agf-admin-review-row__top {
	display: flex;
	align-items: center;
	gap: 10px;
}
.agf-admin-review-row__farm {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 14.5px;
	color: var(--ink);
}
.agf-admin-review-row__text {
	font-size: 13px;
	color: var(--ink);
	margin-top: 6px;
	line-height: 1.5;
}
.agf-stat-tile--sm .agf-stat-tile__value {
	font-size: 18px;
}

/* Site-wide header/footer (header.php/footer.php) -- Phase 6 follow-up: no
   Elementor Theme Builder header/footer template was ever published, so the
   buyer-facing marketplace (Home, shop, product, cart, checkout, storefronts)
   had no real navigation at all. Cart icon reuses .agf-topnav__right (already
   shipped for the transporter app); footer is new. */
.agf-topnav__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-control);
	color: var(--accent2);
	text-decoration: none;
}
.agf-topnav__cart:hover {
	background: var(--surface-inset);
}
.agf-topnav__cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--accent2);
	color: var(--ink);
	font-size: 10px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.agf-site-footer {
	background: var(--ink);
	color: #FFFFFF;
	padding: 48px var(--gutter-desktop) 32px;
	margin-top: 64px;
}
.agf-site-footer__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.agf-site-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 18px;
}
.agf-site-footer__tagline {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .65);
	margin: 0;
}
.agf-site-footer__links {
	display: flex;
	gap: 20px;
	margin-top: 8px;
}
.agf-site-footer__links a {
	color: rgba(255, 255, 255, .85);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
.agf-site-footer__links a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
.agf-site-footer__copyright {
	margin-top: 16px;
	font-size: 12px;
	color: rgba(255, 255, 255, .5);
}
@media (max-width: 600px) {
	.agf-site-footer__links {
		flex-direction: column;
		gap: 10px;
	}
}

/* Found from a real screenshot of the live site (2026-09-01): the front page
   was rendering a redundant literal "Home" heading (Hello Elementor's default
   page-title wrapper) above the actual Elementor-built hero. `.home` is a
   WordPress core body class on the front page, no theme code needed to add it. */
body.home .page-header {
	display: none;
}

/* Sign-up wizard (page-signup.php) */
.agf-signup {
	max-width: 640px;
	margin: 0 auto;
	padding: 56px var(--gutter-desktop) 80px;
}
.agf-signup__intro {
	text-align: center;
	margin-bottom: 32px;
}
.agf-signup__intro h1 {
	font-family: var(--font-primary);
	font-weight: 900;
	font-size: 34px;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 8px 0 12px;
}
.agf-signup__intro p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-muted, #6B7476);
	max-width: 52ch;
	margin: 0 auto;
}
.agf-signup__errors {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #FBEAE9;
	border: 1px solid var(--danger);
	border-radius: var(--radius-card);
	padding: 14px 16px;
	margin-bottom: 20px;
}
.agf-signup__errors ul {
	margin: 0;
	padding-left: 18px;
	font-size: 13.5px;
	color: var(--ink);
	line-height: 1.6;
}
.agf-signup__form {
	background: #FFFFFF;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: 28px;
}
.agf-form-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border-radius: var(--radius-card);
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: 13.5px;
	line-height: 1.5;
}
.agf-form-notice--error {
	background: #FBEAE9;
	border: 1px solid var(--danger);
	color: var(--ink);
}
.agf-form-notice--success {
	background: #EAF4EB;
	border: 1px solid var(--success);
	color: var(--ink);
}
.agf-signup__grid {
	display: grid;
	/* minmax(0, 1fr), not bare 1fr -- a bare 1fr track implicitly means
	   minmax(auto, 1fr), which won't shrink below its content's natural
	   min-content width. The file inputs in this grid (Farm logo, Farm
	   background image) have a notoriously wide, hard-to-shrink native
	   rendering, which was inflating both tracks past the card's actual
	   width and forcing grid-column:1/-1 fields (Farm name, description)
	   to overflow the card by the same amount. Found 2026-09-04. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px;
	margin-top: 4px;
}
.agf-signup__actions {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}
.agf-signup__actions .agf-btn--primary {
	flex: 1;
	width: auto;
}
.agf-signup__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	color: var(--text-muted, #6B7476);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
}
.agf-signup__divider::before,
.agf-signup__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border-hairline);
}
.agf-signup__google {
	width: 100%;
	gap: 10px;
}
.agf-signup__google-note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-muted, #6B7476);
	margin: 0;
}
.agf-signup__signin {
	text-align: center;
	font-size: 13.5px;
	color: var(--text-muted, #6B7476);
	margin-top: 20px;
}
.agf-signup__signin a {
	color: var(--accent);
	font-weight: 700;
	text-decoration: none;
}
.agf-signup__signin a:hover {
	text-decoration: underline;
}
.agf-role-radio {
	display: block;
	position: relative;
	margin-bottom: 10px;
	cursor: pointer;
}
.agf-role-radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.agf-role-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
}
.agf-role-radio input:checked ~ .agf-role-card {
	border: 2px solid var(--accent);
	background: var(--accent-soft);
	padding: 15px;
}
.agf-role-radio input:focus-visible ~ .agf-role-card {
	outline: 2px solid var(--border-brand);
	outline-offset: 2px;
}
.agf-role-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.agf-role-card__body strong {
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 800;
	color: var(--ink);
}
.agf-role-card__body span {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-muted, #6B7476);
}
@media (max-width: 600px) {
	.agf-signup {
		padding: 32px 16px 56px;
	}
	.agf-signup__form {
		padding: 20px;
	}
	.agf-signup__grid {
		grid-template-columns: 1fr;
	}
	.agf-signup__actions {
		flex-direction: column-reverse;
	}
}

/* My Account "Back to AgriFeeds" link (inc/de-branding.php) */
.agf-account-back-link {
	gap: 6px;
	margin-bottom: 16px;
}

/* Farmer app "Return to AgriFeeds" link (inc/farmer-app.php) */
.agf-return-to-site {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	padding: 12px;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 13px;
	color: var(--text-muted, #6B7476);
	text-decoration: none;
}
.agf-return-to-site:hover {
	color: var(--accent);
}

/* Translate to Afrikaans (inc/translate.php) -- fixed, floats above whatever
   header/appbar/sidenav a given page happens to have, since this one button
   has to work identically across the marketing site, the farmer/transporter/
   admin apps, and every wizard. Bottom-right rather than top-right so it
   never sits over the topnav's My account/Sign in buttons; cleared above
   .agf-tabbar's sticky bottom nav (72px + its own safe-area padding) so it
   doesn't cover that either on the farmer/transporter apps. */
.agf-translate-toggle {
	position: fixed;
	top: auto;
	bottom: calc(76px + env(safe-area-inset-bottom, 0));
	right: 10px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ink);
	color: #FFFFFF;
	border: none;
	border-radius: 999px;
	padding: 7px 14px 7px 12px;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	box-shadow: var(--shadow-menu, 0 4px 16px rgba(16,21,22,.18));
}
.agf-translate-toggle:hover {
	background: var(--accent);
}
@media (max-width: 480px) {
	.agf-translate-toggle span {
		display: none;
	}
	.agf-translate-toggle {
		padding: 9px;
	}
}
/* Suppress Google's own default UI -- the top banner it injects (which
   otherwise pushes the whole page down), its highlight boxes and tooltips.
   Only the widget's translation itself is wanted, not its branding. */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon {
	display: none !important;
}
body {
	top: 0 !important;
}
.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}

/* Mobile layout fixes, 2026-09-02 (real phone screenshot) --
   the Elementor Theme Builder header (inc/widgets/class-account-actions-widget.php
   + posts 120/121) rendered logo/nav/account actions crushed into one row with
   no responsive handling, and the category/product/farm grids' auto-fill
   minmax() columns left mobile with 1-2 cramped columns instead of a clean
   browsable row. `.s-agf-header-row`/`.s-agf-header-nav`/`.s-agf-header-logo`
   are Elementor's own synthesized per-element style classes (named from this
   theme's own semantic element_id at build time -- see BUILD-PLAN.md §7.7);
   !important guards against load-order races with Elementor's generated
   stylesheet, matching the [hidden] cascade fix elsewhere in this file. */
@media (max-width: 640px) {
	.s-agf-header-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
		padding: 12px var(--gutter-mobile, 16px) !important;
	}
	.s-agf-header-logo {
		width: 100% !important;
		height: auto !important;
	}
	.s-agf-header-nav {
		justify-content: center !important;
	}
	.agf-topnav__right {
		justify-content: center !important;
		margin-left: 0 !important;
	}
}

/* Header nav (Elementor's atomic "N-Menu" widget, element id agf-header-nav)
   -- marks whichever item matches the current page with `.e-current` on its
   title wrapper (and `aria-current="page"` on the link itself) but doesn't
   style it distinctly on its own, so "Marketplace" read as plain nav-item
   color while actually on the marketplace page -- on the dark-green mobile
   header that's the same near-invisible footgun as the topnav cart icon
   (see the mobile nav-menu color fix elsewhere in this file). Active item
   now takes the theme's accent yellow instead. !important guards against
   load-order races with Elementor's own generated stylesheet, matching the
   rest of this header's overrides. */
.s-agf-header-nav .e-n-menu-title.e-current .e-n-menu-title-container {
	color: var(--accent2) !important;
}

/* Header nav menu (Elementor "WordPress Menu" widget, agf-nav-menu, 2026-10-09) --
   the widget's color_menu_item control has no responsive variant, so it can't
   express "white on the dark-green mobile header, dark on the white desktop
   header" on its own; Elementor's own mobile breakpoint (767px, confirmed via
   breakpoints->get_breakpoints()) is used here to match the header's existing
   .s-agf-header-nav mobile background.

   .agf-topnav__cart joins this block 2026-10-09: its icon is gold
   (var(--accent2), #D5A21A) for contrast against the white desktop header,
   but that's only ~2.9:1 against the same dark-green (#415f28) mobile
   background -- low enough to read as "invisible" at a glance, which is
   exactly what a real phone screenshot showed (only the count badge was
   visible). It only became visible on tap because :hover's light
   background briefly gave the gold icon real contrast. White matches the
   nav links' own mobile treatment above and gives ~8:1 contrast. */
@media (max-width: 767px) {
	.agf-header-nav-menu a.elementor-item {
		color: #ffffff !important;
	}
	.agf-topnav__cart {
		color: #ffffff !important;
	}
}

/* Category tiles -- flex-wrap centers the row on any screen (a wide desktop
   no longer left-anchors a short row of cards) and settles to ~2 per row on
   phones via the same 150px flex-basis, matching the plain-grid, non-scrolling
   mobile layout kept per earlier direct user feedback -- no separate mobile
   override needed. */

/* Product/farm card carousels (assets/js/agrifeeds-carousel.js) -- arrows,
   auto-advance, pause on hover/touch. The track is a single horizontally-
   scrollable row at every breakpoint (not just mobile), so a homepage
   section with far more items than fit on screen (e.g. 30 featured
   products) scrolls instead of wrapping into a wall of rows; the JS's own
   overflow check keeps arrows hidden when everything already fits. Scoped
   to `.agf-carousel__track` specifically so the shop archive's own
   `.agf-product-grid` (a real wrapping grid, not a carousel) is untouched. */
.agf-carousel {
	position: relative;
	/* Dedicated space for the arrows so they never sit on top of card content
	   -- they previously overlapped the first/last card by ~18px of their
	   26px width (left/right: -8px), a narrow, easy-to-miss target that put
	   most of a mouse click on the card underneath instead. Reset to 0 on
	   mobile below; touch carousels scroll by swipe, not these arrows. */
	padding: 0 36px;
}
.agf-carousel__arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 44px;
	background: transparent;
	border: none;
	color: var(--ink);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	padding: 0;
	opacity: 0.7;
	filter: drop-shadow(0 1px 3px rgba(16,21,22,.25));
}
.agf-carousel--scrollable .agf-carousel__arrow {
	display: flex;
}
.agf-carousel__arrow--prev {
	left: 0;
}
.agf-carousel__arrow--next {
	right: 0;
}
.agf-carousel__arrow:disabled {
	opacity: 0.2;
	cursor: default;
	pointer-events: none;
}
.agf-carousel__arrow:hover {
	opacity: 1;
	color: var(--accent);
}
.agf-carousel__track.agf-product-grid,
.agf-carousel__track.agf-farm-grid {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.agf-carousel__track.agf-product-grid::-webkit-scrollbar,
.agf-carousel__track.agf-farm-grid::-webkit-scrollbar {
	display: none;
}
.agf-carousel__track.agf-product-grid .agf-product-card {
	flex: 0 0 260px;
	scroll-snap-align: start;
}
.agf-carousel__track.agf-farm-grid .agf-farm-card {
	flex: 0 0 320px;
	scroll-snap-align: start;
}
@media (max-width: 640px) {
	.agf-carousel {
		padding: 0;
		/* The track's negative margin below bleeds it edge-to-edge for a
		   full-bleed swipe feel; without clipping it here, that bleed pokes
		   16px past the viewport on each side as real page-level horizontal
		   overflow, not just the track's own (correctly contained)
		   overflow-x: auto scrolling. */
		overflow-x: hidden;
	}
	.agf-carousel__track.agf-product-grid,
	.agf-carousel__track.agf-farm-grid {
		margin: 0 calc(var(--gutter-mobile, 16px) * -1);
		padding: 0 var(--gutter-mobile, 16px) 6px;
	}
	/* One full-width card per view, centered -- was 78vw/82vw with a lower
	   max-width, deliberately peeking the next card, but that read as cards
	   being cut off rather than a clean one-at-a-time view. */
	.agf-carousel__track.agf-product-grid .agf-product-card {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}
	.agf-carousel__track.agf-farm-grid .agf-farm-card {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}
}
.goog-tooltip,
.goog-tooltip:hover {
	display: none !important;
}

/* WooCommerce My Account -- was completely unstyled default markup (bullet
   list nav, default browser link colors, no cards, no table styling).
   woocommerce/myaccount/my-account.php + navigation.php now wrap it in
   .agf-account/.agf-account__nav/.agf-account__content; everything else
   here targets WooCommerce's own semantic classes directly so every account
   sub-page (orders, addresses, edit-account) is covered without a template
   override per page. Found 2026-09-02. */
.agf-account {
	display: flex;
	align-items: flex-start;
	gap: var(--space-6);
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-6) var(--gutter-desktop) var(--space-9);
}
.agf-account__nav {
	flex: 0 0 240px;
	padding: var(--space-3);
	position: sticky;
	top: var(--space-6);
}
.agf-account__content {
	flex: 1;
	min-width: 0;
	padding: var(--card-pad-lg);
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 11px 14px;
	border-radius: var(--radius-control);
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
}
.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--surface-inset);
}
.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--accent-soft);
	color: var(--accent);
}
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--border-hairline);
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--danger);
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: #FBE6E4;
}
.agf-account__content h1,
.agf-account__content h2,
.agf-account__content h3 {
	font-family: var(--font-primary);
	color: var(--ink);
}
.agf-account__content p {
	color: var(--text-muted, #6B7476);
	line-height: 1.6;
}
.agf-account__content mark {
	background: none;
	color: var(--ink);
	font-weight: 700;
}
.agf-account__content table.shop_table,
.agf-account__content table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-primary);
	font-size: 13.5px;
}
.agf-account__content table.shop_table th,
.agf-account__content table.woocommerce-orders-table th {
	text-align: left;
	background: var(--surface-inset);
	color: var(--text-muted, #6B7476);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 10px 12px;
}
.agf-account__content table.shop_table td,
.agf-account__content table.woocommerce-orders-table td {
	padding: 12px;
	border-bottom: 1px solid var(--border-hairline);
	color: var(--ink);
}
.agf-account__content .woocommerce-Address {
	background: var(--surface-inset);
	border-radius: var(--radius-card);
	padding: var(--card-pad);
}
.agf-account__content .woocommerce-Address-title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}
.agf-account__content .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 15px;
}
.agf-account__content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}
.agf-account__content form label {
	display: block;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 13px;
	color: var(--ink);
	margin-bottom: 6px;
}
.agf-account__content form .woocommerce-input-wrapper {
	display: block;
}
.agf-account__content form input[type="text"],
.agf-account__content form input[type="email"],
.agf-account__content form input[type="password"],
.agf-account__content form input[type="tel"],
.agf-account__content form select,
.agf-account__content form textarea {
	width: 100%;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-strong);
	padding: 10px 12px;
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--ink);
	background: #FFFFFF;
}
.agf-account__content form input:focus,
.agf-account__content form select:focus,
.agf-account__content form textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}
.agf-account__content form p.form-row {
	margin-bottom: var(--space-4);
}
.agf-account__content .woocommerce-Button,
.agf-account__content button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: #FFFFFF;
	border: none;
	border-radius: var(--radius-control);
	padding: 11px 22px;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
}
.agf-account__content .woocommerce-Button:hover,
.agf-account__content button.button:hover {
	background: var(--accent-hover);
}
@media (max-width: 780px) {
	.agf-account {
		flex-direction: column;
	}
	.agf-account__nav {
		flex: 1 1 auto;
		width: 100%;
		position: static;
	}
	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}
	.agf-account__content .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}

/* Terms & Conditions (page-terms.php) -- plain long-form reading page. */
.agf-legal {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: var(--space-8) var(--gutter-desktop) var(--space-9);
}
.agf-legal h1 {
	margin-bottom: var(--space-6);
}
.agf-legal__body h2 {
	font-size: 18px;
	margin-top: var(--space-7);
	margin-bottom: var(--space-3);
	color: var(--ink);
}
.agf-legal__body p {
	color: var(--text-muted, #6B7476);
	line-height: 1.7;
	margin-bottom: var(--space-4);
}
.agf-legal__body em {
	display: block;
	background: var(--surface-inset);
	border-radius: var(--radius-control);
	padding: var(--space-3) var(--space-4);
	font-style: normal;
	font-size: 13.5px;
	margin-bottom: var(--space-6);
}
.agf-legal__body strong {
	color: var(--ink);
}

/* Admin commission tiers (page-admin-financials.php) */
.agf-tier-row {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 10px;
}
.agf-tier-row label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-muted, #6B7476);
}
.agf-tier-row input[type="number"] {
	border-radius: var(--radius-control);
	border: 1px solid var(--border-strong);
	padding: 8px 10px;
	font-family: var(--font-primary);
	font-size: 14px;
	width: 150px;
}

/* Farmer dashboard commission card (page-farmer.php) */
.agf-commission-card {
	margin-top: var(--space-4, 16px);
}
.agf-commission-card__rate {
	font-family: var(--font-primary);
	font-size: 32px;
	font-weight: 900;
	color: var(--ink);
	margin-top: 4px;
}
.agf-commission-card__note {
	font-size: 13px;
	color: var(--text-muted, #6B7476);
	margin-top: 6px;
	line-height: 1.5;
}