/* Shared last-mile responsive rules. Page-specific CSS remains the source of truth. */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; }
img { height: auto; }

/* Skip below-the-fold layout/paint work until the visitor scrolls near it. */
.rg-page > section:not(:first-child),
.dp-page > section:not(:first-child),
.product-page > section:not(:first-child) {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

@media (max-width: 1024px) {
  .container, .container-fluid { max-width: 100%; }
  .product-details-page__layout,
  .product-detail-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.15; }
  h2 { font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1.2; }
  input, select, textarea, button { max-width: 100%; }
  .enquiry-form-row, .form-row { grid-template-columns: minmax(0, 1fr); }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}