/* ==========================================================================
   Mobile responsiveness for the existing pages.
   Scoped strictly to small screens so the desktop design is unchanged.
   Complements mobile-nav.css (which handles the header/drawer).
   ========================================================================== */

/* ---------- Global guards ---------- */

/* Prevent any wide element from panning the whole page sideways. */
@media (max-width: 991px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  img, video, iframe, table {
    max-width: 100%;
  }

  /* Bootstrap grid columns stack correctly only if they are not forced wide. */
  .container {
    width: auto;
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 50px;
  }

  .row { margin-left: 0; margin-right: 0; }
}

/* ---------- Homepage: "I NEED A LASER FOR" toggles ---------- */
@media (max-width: 991px) {
  .index-product-series {
    padding: .5em 10px;
  }

  /* Two icons per row instead of six squeezed across */
  .index-product-series .toggle-icon {
    display: flex;
    flex-wrap: wrap;
  }

  .index-product-series .toggle-icon > li,
  .index-product-series .toggle-icon li {
    width: 50% !important;
    float: none !important;
    margin-left: 0 !important;
    padding: 14px 8px !important;
    box-sizing: border-box;
    border-left-style: none !important;
    border-right-style: none !important;
    border-bottom: 1px dashed #2c2c2c;
  }

  .index-product-series .toggle-icon li a span {
    font-size: 13.5px;
    line-height: 1.35;
  }

  .index-product-series .toggle-icon li img {
    max-height: 42px;
    width: auto;
  }

  /* The hover dropdown becomes an in-flow block, not an absolute panel */
  .index-product-series .toggle-icon li ul {
    position: static !important;
    top: auto !important;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }
}

/* ---------- Homepage: equipment tiles ---------- */
@media (max-width: 991px) {
  .image-galleries { width: 100%; padding: 0 10px; }
  .image-galleries .item-row > div { padding: 0 4px; }

  .square .square-tile,
  .square .square-tile-left,
  .square .square-tile-right,
  .square .square-tile-center {
    left: 18px !important;
    right: 18px !important;
    bottom: 16px !important;
  }

  .square .square-title,
  .square .square-title.square-title { font-size: 17px; }
  .square .square-desc { font-size: 13.5px; margin-bottom: 8px; }
}

/* ---------- Homepage: carousel ---------- */
@media (max-width: 991px) {
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
    width: 100%;
    height: auto;
  }

  /* Keep the arrows usable but smaller */
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right {
    font-size: 16px;
    margin-top: -8px;
  }
}

/* ---------- Homepage: "I NEED A LASER FOR" heading row ---------- */
@media (max-width: 767px) {
  .sticky-wrapper h2 {
    font-size: 19px !important;
    margin: 18px 0 6px !important;
  }
  .sticky-wrapper hr { margin-top: 26px !important; }
}

/* ---------- Footer ---------- */
@media (max-width: 991px) {
  footer {
    padding: 30px 16px !important;
  }

  footer .footer-nav .col-md-1,
  footer .footer-nav .col-md-11,
  footer .footer-nav .col-md-12 {
    width: 100%;
    float: none;
    padding-left: 0;
  }

  footer .footer-nav ul.col-md-2 {
    width: 100%;
    float: none;
    padding-left: 0;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: 10px;
  }

  footer .footer-nav ul.col-md-2 h5 {
    margin-left: 0 !important;
    font-size: 15px;
  }

  footer .footer-nav ul.col-md-2 li a { font-size: 14px; }
  footer .footer-nav li { font-size: 14px; }
  footer .footer-nav .row hr { margin: 8px 0; }
}

/* ---------- Contact / About: wide fixed-width blocks ---------- */
@media (max-width: 991px) {
  .Box .content,
  .module-wrap .inner-wrap,
  .module-wrap .inner-wrap h1,
  .module-wrap .inner-wrap p,
  .locations-description h4 {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---------- Tables ---------- */
@media (max-width: 991px) {
  .centertxt,
  .mynewtable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Typography scale-down ---------- */
@media (max-width: 767px) {
  body, html { font-size: 13px; }

  h1, .h1 { font-size: 24px; }
  h2, .h2 { font-size: 20px; }
  h3, .h3 { font-size: 17px; }

  .product-num-title {
    padding-left: 0 !important;
    padding-top: 8% !important;
    font-size: 30px !important;
    line-height: 34px !important;
    text-align: center;
    margin-bottom: 20px;
  }
  .product-num-text,
  .product-num-text2,
  .product-num-text3 {
    padding-left: 0 !important;
    text-align: center;
    font-size: 15px !important;
    line-height: 24px !important;
    padding-top: 12px !important;
  }
  .product-num-box { height: auto !important; padding-bottom: 30px; }
  .product-num-content { height: auto !important; }
  .product-num-item { width: 46% !important; font-size: 44px !important; line-height: 40px !important; }
}

/* ---------- Touch devices ---------- */
@media (hover: none) {
  /* The hamburger drawer is the touch navigation path, so the desktop
     hover-dropdowns stay closed rather than being forced open. Nothing to
     override here; this block documents that intent. */
}