/* ==========================================================================
   Product Content — responsive-only styling for TinyMCE-authored HTML
   (overview_content / features_content / support_content).

   Scope: everything lives under .product-content-body so it never leaks into
   the rest of a page. Same file is loaded two places —
     1. The live frontend (Next.js) wraps the API's raw `content` HTML in
        <div class="product-content-body"> and links this file.
     2. This admin panel's TinyMCE editor (`content_css` in
        initProductContentEditor(), custom.js) loads it into the edit iframe
        with body_class: 'product-content-body', so what admins see while
        editing matches what visitors see — same file, not a copy.

   Scope of THIS file, deliberately: only sizing/layout that adapts across
   mobile/tablet/desktop — fluid font-size (clamp()), container width,
   image/table scaling, and the mobile breakpoint. No color, background,
   font-family, font-weight, or other visual/branding styling belongs here —
   that's a template's own concern (see template-1.css for an example of a
   template that DOES own its visual styling).
   ========================================================================== */

.product-content-body {
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}

.product-content-body * {
  box-sizing: border-box;
}

.product-content-body h1 {
  font-size: clamp(20px, 5vw, 32px);
}

.product-content-body h2 {
  font-size: clamp(19px, 4vw, 24px);
  margin-top: clamp(20px, 5vw, 32px);
}

.product-content-body h3 {
  font-size: clamp(16px, 3.5vw, 20px);
  margin-top: clamp(16px, 4vw, 24px);
}

.product-content-body p,
.product-content-body li {
  font-size: clamp(14px, 2.5vw, 16px);
}

/* Images: never overflow their container, keep intrinsic aspect ratio. */
.product-content-body img {
  max-width: 100%;
  height: auto;
}

.product-content-body table {
  width: 100%;
  font-size: clamp(13px, 2.5vw, 15px);
}

/* .product-content-body table's own `width: 100%` above squeezes columns
   down to fit the narrow viewport instead of letting the table scroll — on
   mobile it needs `width: auto` (grow to content) so it can overflow past
   100% and give overflow-x something to actually scroll. 767px matches the
   mobile breakpoint used elsewhere in this codebase (theme-modern.css). */
@media (max-width: 767px) {
  .product-content-body table {
    display: block;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}