:root {
  --topfoods-ink: var(--ink);
  --topfoods-muted: var(--muted);
  --topfoods-accent: var(--accent);
}

.page-topfoods {
  position: relative;
}

.page-topfoods::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 14% 8%, rgba(31, 122, 122, 0.14), transparent 58%),
    radial-gradient(920px 520px at 92% 12%, rgba(255, 195, 140, 0.22), transparent 62%),
    radial-gradient(820px 620px at 80% 92%, rgba(255, 180, 200, 0.14), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  opacity: 0.95;
  mix-blend-mode: multiply;
}

.page-topfoods.topfoods-ready .content-card {
  animation: weekly-rise 0.7s ease both;
}

.page-topfoods.topfoods-ready .food-box {
  animation: weekly-rise 0.75s ease both;
  animation-delay: 0.06s;
}

.page-topfoods .content-card:hover {
  transform: translateY(-1px);
}

.food-group-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.food-group-card {
  border-radius: var(--radius);
  border: 1px solid rgba(225, 214, 203, 0.92);
  background:
    radial-gradient(520px 180px at 12% 10%, rgba(31, 122, 122, 0.08), transparent 62%),
    radial-gradient(520px 220px at 92% 0%, rgba(255, 195, 140, 0.18), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(253, 249, 244, 0.88));
  box-shadow: 0 22px 78px rgba(23, 19, 16, 0.12);
}

.food-group-head {
  padding: 18px 18px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(225, 214, 203, 0.75);
}

.food-group-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 950;
  color: rgba(31, 26, 23, 0.94);
}

.food-group-meta {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 900;
  color: rgba(20, 90, 90, 0.76);
}

.food-group-card .food-box {
  border: none;
  box-shadow: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: transparent;
}

.food-group-card .food-row {
  padding: 12px 16px;
}

.topfoods-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: 16px;
  align-items: end;
}

.topfoods-filter-card {
  margin-top: 0;
}

.topfoods-filter-select,
.topfoods-filter-toggle {
  display: grid;
  gap: 10px;
}

@media (max-width: 720px) {
  .topfoods-filter-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .food-group-grid {
    grid-template-columns: 1fr;
  }

  .food-group-head {
    padding: 16px 16px 12px;
  }
}