/* Buy From Farmers / produce marketplace */

.bf-page { min-height: 100vh; background: #fff; font-family: 'Inter', sans-serif; }
.bf-hero { position: relative; color: #fff; min-height: 340px; background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0.5), rgba(6,78,59,0.6)), url('https://images.unsplash.com/photo-1542838132-92c53300491e?w=1600&h=600&fit=crop') center/cover; }
.bf-hero-inner { max-width: 72rem; margin: 0 auto; padding: 3rem 1rem; position: relative; z-index: 1; min-height: 340px; display: flex; flex-direction: column; justify-content: center; }
.bf-back-link { display: inline-flex; align-items: center; gap: 0.375rem; color: rgba(255,255,255,0.6); font-size: 0.75rem; text-decoration: none; margin-bottom: 1.5rem; width: fit-content; }
.bf-back-link:hover { color: #fff; }
.bf-badge { display: inline-block; border: 2px solid #8bc34a; color: #8bc34a; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; padding: 0.35rem 1rem; margin-bottom: 1rem; width: fit-content; }
.bf-hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 900; margin: 0 0 0.75rem; line-height: 1.15; }
.bf-hero h1 span { color: #34d399; }
.bf-hero p { color: rgba(255,255,255,0.85); max-width: 40rem; margin: 0 0 1.25rem; }
.bf-hero p strong { color: #fff; }
.bf-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bf-btn { padding: 0.625rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 700; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem; }
.bf-btn-primary { background: #10b981; color: #fff; }
.bf-btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.bf-btn-white { background: #fff; color: #047857; }
.bf-stats { background: #0f172a; padding: 1.5rem 1rem; }
.bf-stats-inner { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .bf-stats-inner { grid-template-columns: repeat(4, 1fr); } }
.bf-stat { text-align: center; }
.bf-stat strong { display: block; font-size: 1.5rem; font-weight: 900; }
.bf-stat--emerald { color: #34d399; }
.bf-stat--sky { color: #38bdf8; }
.bf-stat--amber { color: #fbbf24; }
.bf-stat--purple { color: #c084fc; }
.bf-stat span { font-size: 0.7rem; color: #94a3b8; }
.bf-container { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.bf-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1.5rem; background: #f1f5f9; padding: 0.375rem; border-radius: 0.75rem; }
.bf-tab { padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.8rem; font-weight: 600; border: none; background: transparent; color: #64748b; cursor: pointer; }
.bf-tab.active { background: #059669; color: #fff; }
.bf-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; align-items: center; }
.bf-filters input, .bf-filters select { padding: 0.5rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; font-size: 0.875rem; }
.bf-filters input { flex: 1; min-width: 12rem; }
.bf-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .bf-grid-main { grid-template-columns: 1fr 280px; } }
.bf-listings { display: grid; gap: 0.75rem; }
.bf-listing { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.bf-listing:hover { border-color: #86efac; box-shadow: 0 4px 16px rgba(16,185,129,0.1); }
.bf-listing h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.bf-listing-meta { font-size: 0.8rem; color: #64748b; margin-top: 0.25rem; }
.bf-match-score { font-size: 0.75rem; font-weight: 700; color: #1d4ed8; background: #dbeafe; padding: 0.2rem 0.6rem; border-radius: 9999px; }
.bf-price { font-weight: 800; color: #059669; font-size: 1.1rem; }
.bf-sidebar { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem; height: fit-content; }
.bf-sidebar h4 { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 700; }
.bf-price-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.375rem 0; border-bottom: 1px solid #e2e8f0; }
.bf-overview { display: flex; flex-direction: column; gap: 3rem; }
.bf-overview-head { text-align: center; }
.bf-eyebrow { margin: 0 0 0.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: #059669; }
.bf-overview-head h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #1e293b; }
.bf-steps { display: grid; gap: 1rem; }
.bf-steps--five { grid-template-columns: 1fr; }
@media (min-width: 640px) { .bf-steps--five { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bf-steps--five { grid-template-columns: repeat(5, 1fr); } }
.bf-step { position: relative; background: #fff; border-radius: 1rem; padding: 1.25rem; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); text-align: center; overflow: hidden; }
.bf-step-icon { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; color: #fff; }
.bf-step-icon--emerald { background: #10b981; }
.bf-step-icon--sky { background: #0ea5e9; }
.bf-step-icon--amber { background: #f59e0b; }
.bf-step-icon--purple { background: #a855f7; }
.bf-step-icon--rose { background: #f43f5e; }
.bf-step-watermark { position: absolute; top: 0.75rem; right: 1rem; font-size: 1.75rem; font-weight: 900; color: #f1f5f9; line-height: 1; }
.bf-step h3 { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 700; color: #1e293b; }
.bf-step p { margin: 0; font-size: 0.75rem; color: #64748b; line-height: 1.5; }
.bf-problem-solution { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .bf-problem-solution { grid-template-columns: 1fr 1fr; } }
.bf-panel { border-radius: 1rem; padding: 1.5rem; }
.bf-panel h3 { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 700; }
.bf-panel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.bf-panel li { font-size: 0.875rem; line-height: 1.5; padding-left: 1rem; position: relative; }
.bf-panel li::before { content: "•"; position: absolute; left: 0; font-weight: 700; }
.bf-panel--problem { background: #fff1f2; border: 1px solid #fecdd3; }
.bf-panel--problem h3, .bf-panel--problem li { color: #9f1239; }
.bf-panel--solution { background: #ecfdf5; border: 1px solid #a7f3d0; }
.bf-panel--solution h3, .bf-panel--solution li { color: #065f46; }
.bf-tier-title { margin: 0; text-align: center; font-size: 1.25rem; font-weight: 700; color: #1e293b; }
.bf-tier-table-wrap { overflow-x: auto; border-radius: 1rem; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
.bf-tier-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.bf-tier-table th { background: #1e293b; color: #fff; text-align: left; padding: 0.75rem 1rem; font-weight: 600; }
.bf-tier-table td { padding: 0.75rem 1rem; color: #475569; border-top: 1px solid #e2e8f0; }
.bf-tier-row--amber { background: #fffbeb; }
.bf-tier-row--sky { background: #f0f9ff; }
.bf-tier-row--emerald { background: #ecfdf5; }
.bf-tier-badge { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; }
.bf-tier-badge--amber { background: #fef3c7; color: #92400e; }
.bf-tier-badge--sky { background: #e0f2fe; color: #075985; }
.bf-tier-badge--emerald { background: #d1fae5; color: #065f46; }
.bf-cta-banner { background: linear-gradient(90deg, #047857, #0f766e); border-radius: 1rem; padding: 2rem; text-align: center; color: #fff; }
.bf-cta-banner h3 { margin: 0.75rem 0 0.5rem; font-size: 1.5rem; font-weight: 900; }
.bf-cta-banner p { margin: 0 auto 1.25rem; max-width: 36rem; font-size: 0.875rem; color: #a7f3d0; }
.bf-empty { text-align: center; padding: 3rem 1rem; color: #64748b; }
.bf-loading { min-height: 40vh; display: flex; align-items: center; justify-content: center; color: #64748b; }
.bf-register-cta { background: linear-gradient(135deg, #ecfdf5, #f0fdf4); border: 1px solid #86efac; border-radius: 1rem; padding: 2rem; text-align: center; }
.bf-register-cta .bf-btn-outline { color: #047857; border-color: #059669; }
.bf-link-shop { display: inline-block; margin-top: 1rem; font-size: 0.875rem; color: #059669; font-weight: 600; }