/* ============================================================
   ChemSmog — mobile responsive pass (body-prefixed to beat base rules)
   ============================================================ */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  body .cs-page__container, body .cs-footer__container, body .cs-footer__bottom-container { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; }

  body .cs-hero { min-height: 480px !important; }
  body .cs-hero__content { padding: 0 20px !important; max-width: 100% !important; }
  body .cs-hero__title { font-size: 30px !important; line-height: 1.08 !important; word-break: break-word !important; }
  body .cs-hero__subtitle { font-size: 15px !important; max-width: 100% !important; }

  body .cs-page-title, body .cs-section__title, body .cs-values2__title, body .cs-section2-title { font-size: 26px !important; }

  body .cs-categories__grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  body .cs-cat-card, body .cs-products .cs-cat-card { height: 200px !important; }
  body .cs-cat-card__title { font-size: 14px !important; }

  body .cs-product-grid, body .cs-featured__grid, body .cs-auction-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-flow: row !important; grid-auto-columns: auto !important;
    gap: 14px !important; overflow: visible !important;
  }

  body .cs-videos__grid, body .cs-news-list, body .cs-before-buy__grid, body .cs-values2__grid, body .cs-team2-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  body .cs-testimonials__row { flex-direction: column !important; }

  body .cs-product-detail__grid, body .cs-cart__grid, body .cs-quote__grid, body .cs-auction-detail__grid, body .cs-auction-tabs, body .cs-founder2, body .cs-founder2--reverse { grid-template-columns: 1fr !important; gap: 24px !important; }

  body .cs-product-detail__gallery, body .cs-auction-detail .cs-product-detail__gallery { grid-template-columns: 1fr !important; }
  body .cs-product-detail__thumbs { flex-direction: row !important; overflow-x: auto !important; }
  body .cs-product-detail__actions { flex-wrap: wrap !important; }
  body .cs-product-detail__actions .cs-btn-primary--mini { flex: 1 1 100% !important; width: 100% !important; }
  body .cs-auction-detail__actions { flex-wrap: wrap !important; }
  body .cs-auction-detail__actions > * { flex: 1 1 45% !important; }
  body .cs-auction-tabs__nav { width: 100% !important; }

  body .cs-cart__quote, body .cs-quote__summary { position: static !important; }
  body .cs-quote-fields { grid-template-columns: 1fr !important; }
  body .cs-quote-steps { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  body .cs-quote-step { white-space: nowrap !important; }
  body .cs-quote-recap__row { flex-direction: column !important; gap: 2px !important; align-items: flex-start !important; }

  body .cs-products-view.is-map { grid-template-columns: 1fr !important; }
  body .cs-products-view.is-map .cs-products-map { position: relative !important; height: 320px !important; min-height: 0 !important; }
  body .cs-products-view.is-map .cs-product-grid { max-height: none !important; overflow: visible !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  body .cs-list-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  body .cs-list-toolbar__left, body .cs-list-toolbar__right { flex-wrap: wrap !important; }

  body .cs-footer__main { display: block !important; }
  body .cs-footer__col { width: 100% !important; display: block !important; margin-bottom: 26px !important; }
  body .cs-footer__bottom-container { flex-direction: column !important; gap: 10px !important; text-align: center !important; }

  body .cs-form__row { grid-template-columns: 1fr !important; gap: 0 !important; }
  body .cs-page--narrow .cs-page__container, body .cs-form, body .cs-form--wide { max-width: 100% !important; }
  body .cs-modal__row { flex-direction: column !important; gap: 0 !important; }
  body .cs-modal__dialog { padding: 22px !important; }

  body .cs-about2-hero__title { font-size: 30px !important; }
  body .cs-about2-hero__inner { padding: 0 20px !important; }
}
@media (max-width: 480px) {
  body .cs-product-grid, body .cs-featured__grid, body .cs-auction-grid, body .cs-products-view.is-map .cs-product-grid { grid-template-columns: 1fr !important; }
  body .cs-hero__title { font-size: 27px !important; }
}

/* ============================================================
   Touch devices (no hover): reveal product card share/cart icons
   so they're reachable without a mouse hover. Auction bid flyout
   stays hover-only — on touch, tapping the card opens the detail
   page where bidding works.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  body .cs-products .cs-product-card__actions {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  body .cs-products .cs-product-card__act {
    box-shadow: 0 4px 14px rgba(11, 64, 84, 0.22) !important;
  }
}

/* ============================================================
   iOS Safari fix: off-canvas panels caused a slight horizontal scroll
   The fixed off-canvas panels (search/nav/menu/cart) sit off-screen via
   transform:translateX(+/-101%). On iOS Safari these stay "pannable" and add a
   small horizontal scroll even with overflow-x:hidden on the root. Hiding them
   when closed removes the scrollable area; visibility is delayed on close so the
   slide-out animation still plays.
   ============================================================ */
@media (max-width: 991.98px) {
  html, body { overflow-x: hidden !important; }
  .panel--sidebar {
    visibility: hidden;
    transition: transform .5s cubic-bezier(.7,0,.3,1) 0s, visibility 0s linear .5s;
  }
  .panel--sidebar.active {
    visibility: visible;
    transition: transform .5s cubic-bezier(.7,0,.3,1) 0s, visibility 0s linear 0s;
  }
}