/* Project requirement: 48 CSS pixels. Shared by public pages and the offline shell.
   Size real controls, never invisible overlapping pseudo-element hit areas. */
.touch-check { display: inline-flex; margin: 0; }
@media (max-width: 1024px), (pointer: coarse) {
  html body :is(button, summary, [role="button"], [role="switch"], a[href], input:not([type="hidden"]), select, textarea) {
    box-sizing: border-box;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 100%;
    touch-action: manipulation;
  }
  html body :is(a[href], summary):not(:has(img)) {
    display: inline-flex;
    align-items: center;
    padding-block: 10px;
    vertical-align: middle;
  }
  html body a[href]:has(img) {
    overflow-wrap: normal;
    flex-shrink: 1;
    min-width: 0;
  }
  html body :is(button, summary, a[href]) {
    white-space: normal;
    overflow-wrap: anywhere;
    height: auto;
    flex-shrink: 0;
  }
  html body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
  html body label:has(> input:is([type="checkbox"], [type="radio"])) {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 48px;
    min-height: 48px;
    padding-block: 8px;
    cursor: pointer;
  }
  html body label > input:is([type="checkbox"], [type="radio"]) {
    min-width: 20px !important;
    min-height: 20px !important;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
  }
  html body :is(button, a[href], input, select, textarea, summary):focus-visible {
    outline: 3px solid #075aca;
    outline-offset: 3px;
  }
  html body :is(button, a[href], summary):active { filter: brightness(.92); }
  html body :is(nav, .vh-tools, .vh-search, .vh-search .search, .tools, .bar) { flex-wrap: wrap; gap: 8px; }
  html body .vh-header { grid-template-columns: minmax(0, 1fr) auto; }
  html body .vh-header .vh-logo { display: flex; align-items: center; min-height: 48px !important; }
  html body .vh-header .vh-tools { justify-content: flex-start; }
  html body .vh-header .vh-nav a { display: flex; }
  html body .vh-header .vh-catalogue-panel summary { display: flex; }
  html body :is(.columns, .layout) > * { min-width: 0; }
  html body dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  html body .vh-footer { flex-wrap: wrap; }
  html body #projectList { flex-wrap: wrap; overflow: visible; }
  html body #projectList button { min-width: 48px; white-space: normal; }
  html body #catalogueSearch > div { flex-wrap: wrap; }
  html body #catalogueSearch input { flex-basis: 100%; width: 100%; }
  html body label.touch-check { justify-content: center; margin: 0; }
  html body label:has(> input):focus-within { outline: 2px solid #075aca; outline-offset: 3px; }
  /* In mobile layouts, contact shortcuts stay in document flow instead of
     covering basket/form actions while the page scrolls. Desktop stays fixed. */
  html body #callbackFab { position: static; margin: 12px 16px; max-width: calc(100% - 32px); }
  html body #vrWhatsApp { position: static; margin: 12px 16px; }
  html body #vrWhatsApp .vr-wa__toggle { margin-left: 0; }
  html body #vrWhatsApp .vr-wa__panel { position: static; width: 100%; max-height: none; display: none; margin-bottom: 12px; transform: none; }
  html body #vrWhatsApp[data-open=true] .vr-wa__panel { display: block; }
  html body #callbackModal .cb-close { top: 8px; right: 8px; }
  html body .vr-carousel-controls { flex-direction: column; gap: 8px; width: calc(100% - 32px); border-radius: 12px; }
  html body .vr-carousel-dots { width: 100%; gap: 8px; scroll-snap-type: x mandatory; }
  html body .vr-carousel .vr-dot { flex-basis: 48px; scroll-snap-align: start; }
  html body .vr-carousel .vr-pause { width: 100%; }
  html body .vr-carousel .vr-arrow { top: 38%; }
  html body .public-pagination { flex-wrap: wrap; gap: 8px; }
}