/* =====================================================================
   INDcool mobile fixes (loaded after style.css and mobilecss.css)
   Added 2026-10-31. Everything below is scoped to phones/tablets unless noted.
   ===================================================================== */

/* All screen sizes: pages that wrap their banner in the mistyped
   "container-fluid-fluid" had a Bootstrap .row with negative margins and no
   padding to cancel them, which made the banner 24px wider than the screen. */
/* Only rows holding a single full-width column are touched, so card grids keep their gutters. */
.container-fluid-fluid > .row:has(> .col-md-12:only-child),
.container-fluid.p-0 > .row:has(> .col-md-12:only-child) { margin-left: 0; margin-right: 0; }
.container-fluid-fluid > .row > .col-md-12:only-child,
.container-fluid.p-0 > .row > .col-md-12:only-child { padding-left: 0; padding-right: 0; }

html { -webkit-text-size-adjust: 100%; }

@media (max-width: 768px) {

  /* ---- safety net: media never wider than the screen ---- */
  img, video, iframe, canvas, svg { max-width: 100%; }
  img { height: auto; }

  /* ---- forms: 16px stops iOS from zooming in when a field is tapped ---- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px; }

  /* ---- Contact page / "Get in touch" block: stack instead of 70% / 30% ---- */
  .footer_get_touch_outer { margin-top: 28px; }
  .grid-70-30 { grid-template-columns: 1fr; }
  .grid-50-50 { grid-template-columns: 1fr; grid-gap: 14px; }
  .get_form_inner { padding: 26px 16px; border-radius: 12px 12px 0 0; }
  .get_form_inner_text h3 { font-size: 22px; margin-bottom: 20px; }
  input[type="text"], input[type="email"], input[type="tel"] { padding-left: 14px; }
  textarea { padding: 12px 14px; height: 150px; }
  .get_say_form { display: block; padding: 26px 16px 22px; border-radius: 0 0 12px 12px; }
  .get_say_form h5 { font-size: 22px; margin-bottom: 20px; }
  .get_say_info_sec > li { grid-template-columns: 34px 1fr; gap: 10px; margin-bottom: 14px; }
  .get_say_info_sec i { font-size: 24px; }
  .get_say_info_sec > li a { padding: 12px 14px; border-radius: 8px; overflow-wrap: anywhere; }
  .get_say_social-icn { position: static; flex-wrap: wrap; margin-top: 6px; }
  .get_say_social-icn a { padding: 10px 20px 10px 0; }

  /* ---- bigger touch targets without changing the layout ---- */
  .mobile-header .icons a { display: inline-block; padding: 11px 8px; margin: -11px -8px; }
  .mobile-header .mobile-logo a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .breadcrumb a { display: inline-block; padding: 9px 4px; margin: -9px -4px; }
  .footer-class li a { display: inline-block; padding: 7px 0; }
  .unit-type-link { display: inline-block; padding: 8px 6px; }
  .product-code-wrap button { padding: 6px 10px; margin: -6px -10px; }
  .form-check .form-check-input { width: 20px; height: 20px; }
  .form-check { min-height: 34px; display: flex; align-items: center; gap: 10px; padding-left: 0; }
  .form-check .form-check-input { margin: 0; float: none; flex: none; }

  /* ---- shop pages: the scrolling category strip squeezed its later items to ~25px ---- */
  .icon-container .icon-link { flex-shrink: 0; }

  /* ---- slider dots, arrows and text links: larger tap area, same look ---- */
  .hero-slider .hs-dot { position: relative; }
  .hero-slider .hs-dot::before { content: ""; position: absolute; inset: -14px -8px; }
  .owl-nav button.owl-prev, .owl-nav button.owl-next { padding: 9px 12px !important; margin: -9px -12px; }
  .vvaan-learn-more { display: inline-block; padding: 10px 4px; margin: -10px -4px; }
  .press-btn { padding-top: 8px; padding-bottom: 8px; margin-top: -8px; margin-bottom: -8px; }

  /* ---- page numbers: wrap onto a second line instead of running off the screen ---- */
  .pagination { flex-wrap: wrap; justify-content: center; gap: 6px 0; }
  .pagination .page-link { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }

  /* ---- text that was too small to read ---- */
  .strip-buy-btn { font-size: 12px; }
  small, .small { font-size: 12px; }

  /* ---- floating badge: smaller so it covers less of the page ---- */
  .csd-float { transform: scale(.82); transform-origin: left bottom; }
}

@media (max-width: 576px) {
  .csd-float { bottom: 18px !important; }
}