/* ==========================================================================
   base.css  —  device-agnostic responsive safety net (loaded on every page)
   Part of the frontend responsive system:
     base.css      → always on
     tablet.css    → media="(min-width: 768px) and (max-width: 1024px)"
     mobile.css    → media="(max-width: 767.98px)"
   Keep rules here conservative: they apply to ALL breakpoints.
   Page-specific tweaks go in the page's own @section('css'), which loads
   AFTER these files and therefore wins.
   ========================================================================== */

/* Consistent box model everywhere (Bootstrap sets this too — harmless dupe). */
*, *::before, *::after { box-sizing: border-box; }

/* Media never overflows its container. */
img, svg, video, canvas, audio, iframe, embed, object {
  max-width: 100%;
}
img, video, canvas { height: auto; }

/* Long unbroken strings (URLs, hashes, SKUs) shouldn't force horizontal scroll. */
p, li, td, th, dd, dt, figcaption, .card-text, .product-title, .vendor-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Code / preformatted blocks scroll inside themselves, not the page. */
pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Any element explicitly marked as a scroll container behaves on touch. */
.table-responsive,
.js-h-scroll,
[data-h-scroll] {
  -webkit-overflow-scrolling: touch;
}

/* Bare tables inside rich content get a horizontal scroll instead of blowing
   out the layout. Scoped to content wrappers so admin/data tables are untouched. */
.rich-text table,
.product-description table,
.cms-content table,
.page-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

/* Homepage testimonials/reviews slider — no prev/next arrows (they overlapped
   the review text). The slider still autoplays / swipes. */
.uc_testimonials_slider .slick-prev,
.uc_testimonials_slider .slick-next {
  display: none !important;
}

/* Embedded video/maps keep a 16:9 box and scale down. Opt-in wrapper. */
.responsive-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.responsive-embed > iframe,
.responsive-embed > video,
.responsive-embed > object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}