/* Site-wide responsive helpers — load after style.css */

/* --- No horizontal page scroll ---
   When supported, use `clip` instead of `hidden`: overflow-x:hidden on ancestors
   breaks position:sticky (e.g. category product sidebar) in Chromium/WebKit. */
html,
body,
main {
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  html,
  body,
  main {
    overflow-x: clip;
  }
}
main {
  max-width: 100%;
}

/* --- Media & embeds --- */
main img,
.tp-footer-4-top__area img {
  max-width: 100%;
  height: auto;
}
/* Footer widgets: fluid images except review badges (see .trust-pilot below) */
.tp-footer-4__area .tp-footer-4__logo img,
.tp-footer-4__area .tp-footer-4__text img,
.tp-footer-4__area .tp-footer-4__list img {
  max-width: 100%;
  height: auto;
}
.tp-footer-4__area .tp-footer-4__thumb img {
  width: 100%;
  max-width: 530px;
  height: auto;
}
main video,
main iframe {
  max-width: 100%;
}

/* Review platform badges — keep small (was stretched by footer img fluid rules) */
.tp-footer-4__area .trust-pilot .trust-links {
  gap: 8px;
}
.tp-footer-4__area .trust-pilot img {
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .tp-footer-4__area .trust-pilot img {
    max-width: 76px;
  }
}

/* --- Header top bar --- */
.tp-header-top-2__contact .tp-header-top-2__email-link {
  word-break: break-word;
}
@media (max-width: 575.98px) {
  .tp-header-top-2__left-box a {
    font-size: 13px;
  }
  .tp-header-top-2__space {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
}
.tp-header-marquee {
  max-width: 100%;
}

/* --- Product search dropdown (desktop + mobile) --- */
.tp-search-results-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  width: 100%;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  background: #fff;
  z-index: 10050;
  box-shadow: 0 12px 40px rgba(9, 5, 47, 0.12);
  border-radius: 12px;
  border: 1px solid #eef0f5;
}
.header-sticky .tp-search-results-dropdown,
#header-sticky.header-sticky .tp-search-results-dropdown {
  z-index: 10060;
}
.tp-header-mobile-search-box.tp-header-middle-4__input-box {
  margin-left: 0;
}
.tp-header-mobile-search-row {
  margin-top: 0.25rem;
  padding-bottom: 0.35rem;
}
@media (max-width: 575.98px) {
  .tp-header-4__logo img,
  .tp-header-middle-4__logo img {
    max-height: 48px;
    width: auto;
  }
}

/* --- Typography scale (small screens) --- */
@media (max-width: 767.98px) {
  body {
    font-size: 15px;
  }
  h1 {
    font-size: clamp(28px, 8vw, 36px);
  }
  h2 {
    font-size: clamp(24px, 6.5vw, 30px);
  }
  h3 {
    font-size: clamp(20px, 5.5vw, 24px);
  }
  h4 {
    font-size: clamp(18px, 5vw, 22px);
  }
  p {
    font-size: 15px;
    line-height: 1.55;
  }
}

/* --- Modals on narrow viewports --- */
.modal-dialog {
  margin: 0.6rem auto;
  max-width: calc(100vw - 1.2rem);
}
@media (max-width: 575.98px) {
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100vw - 1rem);
    margin: 0.5rem auto;
  }
  .modal-body {
    padding: 1rem;
  }
}

/* --- Wide tables in CMS/blog content (small screens) --- */
@media (max-width: 767.98px) {
  main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Fixed chat / WhatsApp: safe area (notched phones) --- */
/*#whatsapp-icon {*/
/*  bottom: max(70px, env(safe-area-inset-bottom, 0px)) !important;*/
/*  left: max(12px, env(safe-area-inset-left, 0px)) !important;*/
/*}*/

/* --- Sticky header stacking --- */
#header-sticky.header-sticky {
  z-index: 10040;
}

/* --- Offcanvas full width on phones --- */
@media (max-width: 575.98px) {
  .tpoffcanvas {
    width: min(100vw - 48px, 360px);
    max-width: 100%;
  }
}

/* --- Featured Categories (mobile): bullets below card, not over image --- */
@media (max-width: 767.98px) {
  .tp-product-5__area .tp-product-slider {
    padding-bottom: 0.25rem;
  }
  .tp-product-5__area .tp-product-slider .swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    left: 0 !important;
    transform: none !important;
    width: 100%;
    margin-top: 0.5rem;
    text-align: center;
  }
}

/* --- Touch targets --- */
@media (pointer: coarse) {
  .tp-menu-bar {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }
}