@media (max-width: 900px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
    background: #f6f6f4;
    color: #111827;
  }

  header,
  .site-header,
  .page-header {
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .header-inner,
  .nav,
  .page-header > div {
    max-width: 680px !important;
    gap: 12px !important;
  }

  .brand-title,
  .brand {
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }

  .brand-sub,
  .tagline {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  main,
  .site-shell,
  .main-container,
  .details-container,
  .page-body,
  .container {
    width: 100% !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  h1 {
    font-size: 31px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  h2,
  .section-title {
    font-size: 24px !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  h3 {
    line-height: 1.22 !important;
  }

  p,
  li {
    line-height: 1.65 !important;
  }

  input,
  textarea,
  select,
  button {
    min-height: 44px;
    font-size: 16px !important;
  }

  input,
  textarea,
  select {
    border-color: #d9cfc5 !important;
    border-radius: 8px !important;
  }

  .hero,
  .workspace,
  .main-grid,
  .import-layout,
  .content-grid,
  .editorial-grid,
  .mini-grid,
  .meal-grid,
  .recipe-grid,
  .cards-grid,
  .grid,
  .saved-card .meal-grid {
    grid-template-columns: 1fr !important;
  }

  .panel,
  .form-panel,
  .results-panel,
  .content-card,
  .results-card,
  .saved-card,
  .import-panel,
  .helper-panel,
  .source-card,
  .editorial-card,
  .mini-card,
  .container,
  .review-card,
  .recipe-card,
  .detail-card,
  .empty,
  .results-state {
    border: 1px solid #f4d7bd !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .panel,
  .form-panel,
  .results-panel,
  .content-card,
  .results-card,
  .saved-card,
  .import-panel,
  .helper-panel,
  .source-card,
  .editorial-card,
  .mini-card,
  .container {
    padding: 16px !important;
  }

  .desktop-nav,
  .header-nav,
  .links {
    gap: 10px !important;
  }

  .mobile-menu a {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .primary-btn,
  .secondary-link,
  .secondary-action,
  .store-btn,
  .day-action,
  .meal-action,
  .login-link,
  .register-link,
  .prompt-chip,
  .segment {
    border-radius: 8px !important;
  }

  .primary-btn,
  button[type="submit"] {
    width: 100%;
  }

  .row,
  .segmented {
    grid-template-columns: 1fr !important;
  }

  .list-card ul {
    columns: 1 !important;
  }

  .day-title,
  .results-header,
  .home-trending-head {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  img,
  video,
  iframe,
  table {
    max-width: 100%;
  }

  #chatbox {
    height: min(54vh, 430px) !important;
    border: 1px solid #f4d7bd !important;
    border-radius: 10px !important;
    padding: 12px !important;
    background: #fff !important;
  }

  #inputBox {
    width: 100% !important;
    margin: 10px 0 8px !important;
    border: 1px solid #d9cfc5 !important;
    border-radius: 8px !important;
  }

  #sendBtn {
    width: 100% !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 520px) {
  main,
  .site-shell,
  .main-container,
  .details-container,
  .page-body,
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h1 {
    font-size: 29px !important;
  }

  h2,
  .section-title {
    font-size: 22px !important;
  }
}