@media (max-width: 1024px) {
  :root { --zu-page-gutter: 20px; }

  body .zu-site-header {
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  body .zu-site-header .site-header-actions {
    width: auto;
    max-width: 100%;
    margin: 0;
    flex-wrap: wrap;
  }

  body .zu-site-header .header-language { flex-basis: auto; }

  body main :is(.property-heading, .detail-layout, .property-enquiry),
  body main :is(.search, .property-search-panel, .contact-form) > *,
  body main :is(.form-grid, .listing-filters, .project-search-form) > * {
    min-width: 0;
  }

  body main .property-heading .detail-price { overflow-wrap: anywhere; }

  body:has(> .zu-admin-sidebar) {
    padding-inline-start: 0;
  }

  body > .zu-admin-sidebar {
    position: static;
    width: auto;
    padding: 4px var(--zu-page-gutter);
  }

  body > .zu-admin-sidebar summary {
    display: list-item;
    min-height: 44px;
    box-sizing: border-box;
    padding-block: 11px;
    color: #fff;
    cursor: pointer;
  }

  body > .zu-admin-sidebar .zu-admin-brand { display: none; }

  body > .zu-admin-sidebar nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    padding-block-end: 12px;
  }

  body > .zu-admin-sidebar .zu-admin-nav-group a {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  body:has(> .zu-admin-sidebar) main,
  body:has(> .zu-admin-sidebar) :is(.admin-workspace, .editor-content, .workspace-layout > *, .panel) {
    min-width: 0;
  }

  body:has(> .zu-admin-sidebar) main :is(.table-wrap, .admin-table-scroll) {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
  }

  body:has(> .zu-admin-sidebar) main :is(.table-wrap, .admin-table-scroll):focus-visible {
    outline: 2px solid var(--brand-blue, #2856a1);
    outline-offset: 2px;
  }

  body:has(> .zu-admin-sidebar) main :is(.table-wrap, .admin-table-scroll) table:has(tr > :nth-child(5)) {
    min-width: 36rem;
  }

  body #property-editor .editor-shell { grid-template-columns: minmax(0, 1fr); }

  body #property-editor .editor-steps {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  body #property-editor .editor-steps button {
    width: auto;
    max-width: 100%;
    min-height: 44px;
    white-space: normal;
    text-align: start;
  }

  body #property-editor .wizard-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 700px) {
  :root { --zu-page-gutter: 14px; }

  body main :is(.listing-filters, .project-search-form, .search > form) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body main .contact-form { grid-template-columns: minmax(0, 1fr); }

  body main :is(.contact-page, .about-agent, .content-page, .admin-workspace) {
    overflow-wrap: anywhere;
  }

  body :is(main, .zu-site-header) :is(input, select, textarea) {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  body main .form-grid :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    width: 100%;
  }

  body:has(> .zu-admin-sidebar) main :is(.form-grid, .workspace-cards, .workspace-metrics, .editor-layout),
  body > .zu-admin-sidebar nav {
    grid-template-columns: minmax(0, 1fr);
  }

  body #property-editor .wizard-controls :is(button, .btn) { min-height: 44px; }
}

@media (max-width: 420px) {
  body main :is(.listing-filters, .project-search-form, .search > form) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1024px) and (pointer: coarse) {
  body :is(main, .zu-site-header) :is(input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea) {
    font-size: max(16px, 1em);
  }

  body :is(.zu-site-header, .map-toolbar, .contact-buttons) :is(button, .btn, select),
  body main :is(.listing-filters, .contact-form, .project-search-form) button {
    min-height: 44px;
  }
}

.traffic-dashboard :is(.traffic-period, .traffic-metrics, .traffic-breakdowns) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.traffic-dashboard .traffic-period a { min-height: 44px; }
.traffic-dashboard .traffic-period [aria-current="page"] { outline: 2px solid #c99740; }

.traffic-metrics > div {
  flex: 1 1 12rem;
  padding: 12px;
  border: 1px solid #d9e2f0;
  border-radius: 8px;
  background: #f3f7fc;
}

.traffic-metrics dd {
  margin: .35rem 0 0;
  font-size: 1.45rem;
  font-weight: 700;
}

.traffic-breakdowns > section {
  flex: 1 1 18rem;
  min-width: 0;
}