/* ==================================================================
   SAI Industry — Mobile Responsiveness Pass
   Loaded AFTER style.css, so these rules only need to *add* fixes,
   never fight the base stylesheet. Organised by component so it's
   easy to extend later.
   ================================================================== */

/* ---- Global: never allow horizontal scroll on phones ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

/* ---- Fluid typography for headings — MOBILE ONLY.
   (Elementor already sets per-widget sizes for desktop; we must never
   touch those outside small screens, or every custom heading size on
   the site gets overridden.) ---- */
@media (max-width: 768px) {
  h1, .elementor-heading-title { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.3 !important; }
  h2 { font-size: clamp(18px, 5vw, 24px) !important; }
  h3 { font-size: clamp(16px, 4.2vw, 20px) !important; }
}

@media (max-width: 480px) {
  .sai-container, .sai-page-content { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- Header / nav: ensure logo + toggle never overflow the bar ---- */
@media (max-width: 991px) {
  .sai-header-inner { flex-wrap: nowrap; gap: 10px; }
  .sai-logo img { max-height: 56px; width: auto; }
  .sai-nav { max-height: 80vh; overflow-y: auto; z-index: 999; }
  .sai-nav .sai-cta { display: block; text-align: center; margin-top: 10px; }
}

/* ---- Product single-page fallback layout (non-Elementor gallery/thumbs) ---- */
@media (max-width: 600px) {
  .sai-thumbs { flex-direction: row; overflow-x: auto; gap: 8px; }
  .sai-slide img { max-height: 50vh; object-fit: cover; width: 100%; }
}

/* ---- Product quick-view Modal (the popup shown in the screenshot) ---- */
@media (max-width: 768px) {
  .sai-modal-inner {
    width: 94vw !important;
    max-width: 94vw !important;
    padding: 50px 14px 24px !important;
  }
  .sai-modal-inner img { max-height: 42vh; object-fit: contain; }
}

/* ---- Elementor image-carousel widget on the single product page ---- */
@media (max-width: 768px) {
  .elementor-widget-image-carousel .swiper-slide img,
  .elementor-image-carousel-wrapper img {
    max-height: 55vh;
    object-fit: cover;
    width: 100%;
  }
  .elementor-widget-image-carousel .elementor-swiper-button {
    width: 34px; height: 34px;
  }
}

/* ---- Buttons: keep full-width and readable on narrow screens ---- */
@media (max-width: 480px) {
  .elementor-button, .sai-cta, .sai-form button[type="submit"] {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* ---- Forms: stack fields, avoid iOS auto-zoom on inputs ---- */
@media (max-width: 600px) {
  .sai-form { padding: 20px 16px !important; }
  .sai-form input, .sai-form select, .sai-form textarea {
    width: 100% !important;
    font-size: 16px !important; /* prevents iOS Safari zoom-on-focus */
  }
}

/* ---- Any Elementor section that was given a fixed pixel content_width
   should still respect the viewport on small screens. ---- */
@media (max-width: 480px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---- WhatsApp floating button: keep it clear of thumbs / notches ---- */
@media (max-width: 480px) {
  .sai-wa-float { bottom: 16px !important; left: 14px !important; }
}

/* ==================================================================
   Hardening pass — v1.11.1
   Extra defensive rules for edge cases the component-by-component
   fixes above don't cover: text/word overflow, tablet-width nav
   crowding, generic Elementor column stacking on every page (not
   just the single-product template), tables dropped in by the
   content editor, and very small phones (<=360px).
   ================================================================== */

/* ---- Never let a long word/URL/product code force horizontal scroll ---- */
h1, h2, h3, h4, h5, h6, p, a, span, li,
.elementor-heading-title, .elementor-widget-text-editor {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---- Belt-and-braces: guarantee every classic Elementor section
   stacks its columns to 100% width under the same 768px breakpoint
   used everywhere else on the site, not only on single-product
   pages. Elementor's own engine already does this by default, this
   is just a safety net in case a saved page has an explicit custom
   mobile width on a column. ---- */
@media (max-width: 768px) {
  .elementor-section > .elementor-container {
    flex-wrap: wrap !important;
  }
  .elementor-section > .elementor-container > .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---- Tablet-width nav crowding: between the desktop nav and the
   991px hamburger breakpoint, a menu with several items + the CTA
   button can get tight. Tighten spacing before it has to wrap/scroll. ---- */
@media (max-width: 1180px) and (min-width: 992px) {
  .sai-nav ul { gap: 0; }
  .sai-nav a { padding: 10px 12px; font-size: 14px; }
  .sai-cta { padding: 12px 18px !important; }
}

/* ---- Any table dropped into content (e.g. spec sheets) scrolls
   instead of blowing out the page width ---- */
table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }

/* ---- Very small phones (<=360px): tighten header so logo + toggle
   never crowd each other ---- */
@media (max-width: 360px) {
  .sai-container { padding-left: 12px !important; padding-right: 12px !important; }
  .sai-logo img { height: 44px !important; }
  .sai-menu-toggle { padding: 8px 12px !important; font-size: 18px !important; }
}