@media (max-width: 720px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .modal.plan-screen,
  .modal.plan-screen .modal-panel,
  .modal.plan-screen form,
  .modal.plan-screen form > *,
  .meal-plan-layout,
  .meal-plan-column,
  .meal-plan,
  .specialty-template-plan,
  #thirty-day-result,
  #thirty-day-result > section,
  [id*="grocery"],
  [class*="grocery"] {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .modal.plan-screen {
    left: 0;
    right: 0;
    overflow-x: hidden;
  }

  .modal.plan-screen .modal-panel {
    padding: 22px 14px 40px;
    overflow-x: hidden;
  }

  .plan-screen-top {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .plan-screen-top p {
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  .plan-screen-top > div,
  .modal.plan-screen [style*="display:flex"],
  .modal.plan-screen [style*="display: flex"] {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  .meal-plan-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .meal-plan-column {
    padding: 14px 10px;
    max-height: none;
    overflow: visible;
  }

  .meal-plan-column + .meal-plan-column {
    border-left: 0;
    border-top: 1px solid #e4ded4;
  }

  #thirty-day-grocery-checklist,
  [class*="-grocery-checklist"] {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    list-style: none;
  }

  #thirty-day-grocery-checklist li,
  [class*="-grocery-checklist"] li {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #thirty-day-grocery-checklist label,
  [class*="-grocery-checklist"] label {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #thirty-day-grocery-checklist input[type="checkbox"],
  [class*="-grocery-checklist"] input[type="checkbox"] {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
  }

  .modal.plan-screen input,
  .modal.plan-screen select,
  .modal.plan-screen textarea,
  .modal.plan-screen table,
  .modal.plan-screen img:not(.plate-template):not(.area1):not(.area2):not(.area3) {
    max-width: 100%;
  }

  .modal.plan-screen table {
    display: block;
    overflow-x: auto;
  }

  .modal.plan-screen .button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Members now check items directly in the grocery list. */
.body-pantry,
.diabetes-pantry,
.weight-pantry,
.energy-pantry,
.gluten-pantry,
.vegan-pantry,
.kidney12-pantry,
p:has(+ #month-pantry-selected),
#month-pantry-selected,
#month-pantry-selected + div,
#month-pantry-selected + div + label {
  display: none !important;
}