*{box-sizing:border-box}
/* Controls */
.controls{display:flex;flex-wrap:wrap;gap:8px;float:right;}
.control{background:var(--card);border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:12px}
.control input{background:transparent;border:none;outline:none;border-bottom: 1px solid #000;}
.control select{background:transparent;border:none;outline:none;color:var(--text)}

/* Grid */
.grid{background: linear-gradient(180deg, #f5f7f2 0%, #eaf0e2 100%);
color: #2e3a23;display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:18px}
@media (max-width: 1024px){.grid{grid-template-columns:repeat(8,1fr)}}
@media (max-width: 640px){.grid{grid-template-columns:repeat(4,1fr)}}

/* Card */
.card{grid-column:span 4; border:1px solid #88b44e !important;border-radius:20px;overflow:hidden;position:relative;margin-bottom:20px;}
.card:hover{box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateY(-2px);transition:.25s ease}
.card__banner{height:110px;background:
radial-gradient(120px 70px at 20% 0%, rgba(34,197,94,.25), transparent 70%),
radial-gradient(160px 90px at 100% 60%, rgba(147,197,253,.2), transparent 70%),
linear-gradient(90deg,#0b1220,#0e1726)}
.card__body{padding:16px 16px 18px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--chip);border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:#c7d2fe}
.title{font-size:20px;margin:12px 0 4px; padding-bottom: 6px;
  border-bottom: 3px solid transparent; border-image: linear-gradient(to right, #000000, #d4c8bc, #4CAF50);border-image-slice: 1;width:fit-content;}
.title::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    bottom: 0;
    top: 0;
	left: 0;
    background: var(--primary);
}
.title::after {
  content: " : ";
  color: #000; /* soft separator color */
  font-weight: normal;
  padding-top: 10px;
}
.tagline{font-size:13px;margin:0 0 10px;padding-top: 10px;min-height: 125px;}
.crops-list{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}
.pill{background:#006000 !important;border:1px solid #006000;padding:6px 10px;border-radius:999px;font-size:12px;color:#fff}
.section{border-top:1px dashed var(--border);margin-top:12px;padding-top:12px}
.label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.value{font-size:14px;line-height:1.55;margin-top:6px}
/* Empty state */
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:28px;border:1px dashed var(--border);border-radius:20px}