/* Fueltek v6.9.168 — targeted responsive stress-test corrections. */

/* The compliance section retained a 380px first grid column because its
   selector was more specific than the existing <=1200px one-column rule.
   Restore the intended stacked layout before the narrow column becomes unusable. */
@media (max-width: 1200px) {
  #compliance.compliance.section-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #compliance > .section-title,
  #compliance > .compliance-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* At very narrow widths the product rail's max-width became its actual grid-item
   width. Let the rail shrink to the section content width instead of widening the page. */
@media (max-width: 760px) {
  #products .product-rail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 360px !important;
    justify-self: center !important;
  }
}

/* On the handset showcase the caption layer sat above the navigation arrows.
   Text should not intercept pointer input; actual caption controls remain interactive. */
@media (max-width: 820px) {
  #mobile .mobile-caption-wrap {
    pointer-events: none !important;
  }
  #mobile .mobile-caption-wrap :is(button, a, input, select, textarea, [role="button"]) {
    pointer-events: auto !important;
  }
  #mobile .mobile-nav-arrows {
    z-index: 20 !important;
    left: 4% !important;
    right: 72px !important;
    pointer-events: none !important;
  }
  #mobile .mobile-nav-arrows .mobile-arrow {
    pointer-events: auto !important;
  }
}

/* The compact WhatsApp shell was already icon-sized on some tablet layouts while
   its text remained visually present outside the 50px parent. Switch cleanly to
   the icon-only treatment at tablet width as well. */
@media (max-width: 900px) {
  .fueltek-whatsapp {
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 7px !important;
    justify-content: center !important;
  }
  .fueltek-whatsapp__icon {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }
  .fueltek-whatsapp__text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}

/* Shared-content footers remain five columns until 720px, which is too wide for
   a 768px CSS viewport (and common 125–200% zoom reflow widths). Use a two-column
   tablet footer without changing the existing <=720px mobile design. */
@media (min-width: 721px) and (max-width: 900px) {
  .footer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    max-width: 100% !important;
  }
  .footer > * {
    min-width: 0 !important;
  }
  .footer-terms {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Dynamic Finder branches can have a larger intrinsic min-content width than
   the 320px grid track. Allow the grid items to shrink instead of clipping the
   right-hand edge on the narrowest supported viewport. */
@media (max-width: 820px) {
  body.system-finder-page .finder-shell,
  body.system-finder-page .finder-progress-panel,
  body.system-finder-page .finder-card,
  body.system-finder-page .finder-step,
  body.system-finder-page .finder-single-actions {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  .fueltek-whatsapp {
    overflow: hidden !important;
  }
}