@media (max-width: 991px) {
  h1, .welcome { font-size: var(--font-size-xl); }
  h2 { font-size: var(--font-size-lg); }
}

@media (max-width: 599px) {
  h1, .welcome { font-size: var(--font-size-lg); }

  body, td, th, input, textarea, select, button, a {
    font-size: var(--font-size-base);
  }

  /* Generic list/data tables: stack rows as cards on very small screens.
     Applied selectively via this class on pages with wide multi-column
     tables (cart, wishlist, orders) rather than globally on every
     table.* in the theme, to avoid breaking layout tables we haven't
     audited yet. */
  .richter-table-stack thead {
    display: none;
  }

  .richter-table-stack tr {
    display: block;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
  }

  .richter-table-stack td {
    display: flex;
    justify-content: space-between;
    border: none !important;
    padding: var(--space-1) 0;
  }

  .richter-table-stack td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin-right: var(--space-3);
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Mobile tap target hardening (≤991px touch devices) ---------------- */

@media (max-width: 991px) {
  /* Ensure all interactive form controls meet 44px minimum touch target */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  select {
    min-height: 44px;
  }

  textarea {
    min-height: 88px;
  }

  /* Sidebar category child links — expand tap area */
  .box-category > ul > li ul > li > a {
    display: flex;
    align-items: center;
    min-height: 36px;
  }

  /* Profifilter attribute checkboxes — larger tap area */
  .profifilter table td {
    padding: var(--space-2) var(--space-2) var(--space-2) 0;
  }

  /* Pagination links — ensure full 44px tap target */
  .pagination .links a,
  .pagination .links b {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---- iOS Safari auto-zoom prevention ------------------------------------
   iOS zooms the viewport when an input is focused if its font-size is
   below 16px. Our base is 15px which triggers this. Force 16px for all
   text inputs on mobile only — desktop keeps 15px for tighter UI. */

@media (max-width: 991px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px;
  }
}