/* CafeFix responsive layout polish — all routes */
:root {
  --cafefix-content-width: 76rem;
}
html {
  width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
body {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}
img, svg, video, canvas, iframe {
  max-width: 100%;
}
main {
  width: min(100% - 2rem, var(--cafefix-content-width));
  min-width: 0;
  margin-inline: auto;
  padding-block: clamp(1.25rem, 3vw, 3rem);
}
main > * {
  min-width: 0;
  max-width: 100%;
}
main h1 {
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}
main h2 {
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  line-height: 1.15;
}
main p, main label, main a, main button {
  overflow-wrap: anywhere;
}
main form {
  width: 100%;
  min-width: 0;
}
main input,
main select,
main textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
main textarea {
  resize: vertical;
}
main table {
  width: 100%;
  border-collapse: collapse;
}
main .table-wrap,
main [class*="overflow-x-auto"] {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
main pre,
main code {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
main button,
main .btn,
main input[type="submit"],
main input[type="button"] {
  max-width: 100%;
  min-height: 2.75rem;
  touch-action: manipulation;
}
main button:focus-visible,
main a:focus-visible,
main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
main [class*="grid"] > *,
main [class*="flex"] > * {
  min-width: 0;
}
main [class*="grid-cols-"] {
  grid-template-columns: minmax(0, 1fr);
}
main [class*="flex-wrap"] {
  flex-wrap: nowrap;
}
main .responsive-actions,
main .form-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
}
main .responsive-actions > *,
main .form-actions > * {
  width: 100%;
  min-width: 0;
}
main .responsive-card-grid,
main .stats-grid,
main .service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
main .field-row,
main .form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
main .page-heading,
main .section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  min-width: 0;
}
main .hero-illustration {
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
}
main .hero-illustration svg {
  display: block;
  width: 100%;
  height: auto;
}
main .equipment-art {
  width: min(100%, 22rem);
  margin-inline: auto;
}
main .equipment-art svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 40rem) {
  main {
    width: min(100% - 3rem, var(--cafefix-content-width));
  }
  main .responsive-card-grid,
  main .stats-grid,
  main .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  main .field-row,
  main .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  main .responsive-actions,
  main .form-actions {
    flex-direction: row;
    align-items: center;
  }
  main .responsive-actions > *,
  main .form-actions > * {
    width: auto;
  }
  main .page-heading,
  main .section-heading {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
@media (min-width: 64rem) {
  main .responsive-card-grid,
  main .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 39.999rem) {
  main {
    width: calc(100% - 1.25rem);
    padding-block: 1rem 2rem;
  }
  main section,
  main article,
  main .card {
    min-width: 0;
    max-width: 100%;
  }
  main form {
    padding-inline: 0;
  }
  main button,
  main .btn,
  main input[type="submit"],
  main input[type="button"] {
    white-space: normal;
  }
  main table {
    font-size: .875rem;
  }
  main th,
  main td {
    padding: .625rem .5rem;
  }
  main .hero-illustration,
  main .equipment-art {
    max-width: 18rem;
  }
  main .responsive-actions > *,
  main .form-actions > * {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}