/* =====================================================================
   product-typography.css
   Single source of truth for text sizing inside product-page tabs.

   Loaded LAST on every product page. One fluid clamp() scale per text
   role -> continuous scaling across desktop / tablet / mobile (no jumps
   at 767/991px), one definition instead of GemPages' 3 per element.

   SPECIFICITY NOTE: GemPages writes per-element rules like
       #e-1616543466038 .text-edit   { font-size:18px!important }
       #e-1616543466038 .text-edit>p { font-size:inherit!important }
   in the gem-page-*.min.css files, with DIFFERENT values per block
   (18 / 14 / 12px ...), which is the root cause of the mismatched
   sizes between tabs. Those carry an ID (specificity 1,1,1), so plain
   class selectors lose to them. We anchor every rule to #gem-container
   (the wrapper present on all product pages) -> (1,2,1), which outranks
   the per-element (1,1,1) rules and wins cleanly without having to
   enumerate hundreds of element IDs. Scope stays gated by .gf_tab-panel
   so the site header / nav / product-title headings are untouched.

   To retune: change the variables below. Body size is the only knob
   most edits need.
   ===================================================================== */

:root {
  /* role            min   fluid(base+vw)   max    -> mobile ~15px / tablet ~16px / desktop 18px
     The +9px base makes the scale predictable: it caps at the 18px max
     for any desktop viewport (>=1000px) instead of only on ultra-wide
     screens, while easing down to 15px on phones.                       */
  --pt-body:   clamp(15px, 0.9vw + 9px, 18px);  /* paragraphs, list items, spans, strong */
  --pt-label:  clamp(15px, 0.8vw + 9px, 18px);  /* tab labels: Demo / Description / Instructions */
  --pt-line:   1.6;                             /* one line-height for all tab body copy */
  --pt-li-gap: 0.4em;                           /* spacing between list items */
}

/* ---- Tab body: paragraphs, lists, and inline "special" text ----------
   span/strong/em/i/a are targeted too, because the markup hard-codes
   inline sizes (font-size:.85em / .9em) on those tags. #gem-container +
   two classes + !important beats both the inline styles AND the per-ID
   GemPages rules described above.                                       */
#gem-container .gf_tab-panel .text-edit p,
#gem-container .gf_tab-panel .text-edit li,
#gem-container .gf_tab-panel .text-edit span,
#gem-container .gf_tab-panel .text-edit strong,
#gem-container .gf_tab-panel .text-edit em,
#gem-container .gf_tab-panel .text-edit i,
#gem-container .gf_tab-panel .text-edit a,
#gem-container .gf_tab-panel .text-edit {
  font-size: var(--pt-body) !important;
  line-height: var(--pt-line) !important;
}

/* Lists: same scale + even spacing + consistent indent */
#gem-container .gf_tab-panel .text-edit ul,
#gem-container .gf_tab-panel .text-edit ol {
  font-size: var(--pt-body) !important;
  line-height: var(--pt-line) !important;
  padding-left: 1.4em;
}
#gem-container .gf_tab-panel .text-edit li + li {
  margin-top: var(--pt-li-gap);
}

/* Keep emphasis as weight/style only, not a size change, so bold
   sub-labels ("Features & Benefits", "Coverage:") sit at body size. */
#gem-container .gf_tab-panel .text-edit strong { font-weight: 700; }
#gem-container .gf_tab-panel .text-edit em,
#gem-container .gf_tab-panel .text-edit i { font-style: italic; }

/* ---- Tab labels ------------------------------------------------------
   Overrides gfv3restabs.min.css (19px desktop / 14px mobile) + the
   per-label .demovanish inline size so all tabs match.                  */
#gem-container .gf_restabs > ul > li.gf_tab .text-edit,
#gem-container .gf_restabs > ul > li.gf_tab .demovanish {
  font-size: var(--pt-label) !important;
  line-height: 1.3 !important;
}

/* ---- Layout fix: sensitive-surface "Slide for the Removal..." title ---
   GemPages exported this title block (#e-1617837978583) with
   margin-bottom:-16px!important and the before/after slider row directly
   below has no compensating top margin, so the slider was pulled up and
   overlapped the title. We anchor with #gem-container -> (2,0,0) so this
   wins over the per-ID (1,0,0)!important rule regardless of CSS load
   order (on this page the gem-page sheet loads later, inside <body>).
   Unique to this page; the other slider pages don't share the ID.       */
#gem-container #e-1617837978583 {
  margin-bottom: 12px !important;
}