/* /drops (js/pages/drops.js): a big title with the filter and the sort beside it, the grid, then Upcoming. */
.drops-page { padding-top: var(--page-top); }
.drops-page .drops-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; margin-bottom: 36px; }
.drops-page .drops-head h1 { margin: 0; }
.drops-page .drops-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 6px; }
.drops-page h2 { margin: 96px 0 24px; }
.drops-page .drops-empty { grid-column: 1 / -1; margin: 0; padding: 56px 24px; background: var(--tint); border-radius: var(--radius); text-align: center; color: var(--muted); }
.drops-page.drops-wait p { margin: 0 auto 24px; }
@media (max-width: 640px) {
  .drops-page .drops-head { margin-bottom: 24px; }
  /* The sort sits beside the title, the filter takes the full width under them. */
  .drops-page .drops-head { align-items: center; gap: 16px 12px; }
  .drops-page .drops-tools { display: contents; }
  .drops-page .drops-tools .sort { order: 1; margin-left: auto; }
  .drops-page .drops-tools .seg { order: 2; width: 100%; flex-wrap: nowrap; }
  .drops-page .drops-tools .seg button { flex: 1 1 0; padding-inline: 8px; }
  .drops-page h2 { margin-top: 64px; }
  .drops-page .drops-empty { padding: 40px 20px; border-radius: 18px; }
}