/* ==========================================================================
   LifeTein product description styles  (v2 - matched to live lifetein.com)
   --------------------------------------------------------------------------
   Paste ONCE into:
     /peptide-product/includes/templates/bootstrap/css/stylesheet_custom.css
   Zen Cart auto-loads any css/stylesheet*.css, so no template edit is needed.

   Values below were read from the live product page, not guessed:
     brand red        #b62326   (also in new.css .fantom-table1-header)
     body font        "Source Sans Pro", sans-serif @ 20px
     table rules      #ddd      (matches .fantom-table-2 in new.css)

   Everything is scoped under .lt-product so it cannot affect your header,
   sidebar, cart or checkout. Font sizes use em, so the description keeps
   matching your 20px body text if you ever change it.
   ========================================================================== */

.lt-product {
  --lt-red:       #b62326;   /* brand red: links, accents                  */
  --lt-red-dark:  #8e1a1d;   /* link hover                                 */
  --lt-rule:      #dddddd;   /* table borders, matches .fantom-table-2     */
  --lt-label-bg:  #f7f7f7;   /* spec-table label column                    */
  --lt-muted:     #555555;   /* secondary text                             */
  --lt-radius:    4px;

  /* Inherit the template's Source Sans Pro / 20px rather than resetting it. */
  font-size: 1em;
  line-height: 1.6;
}

/* ================================================================ headings
   Your pages use plain bold black <strong> for section titles, and your
   template styles h2 at 36px/#444 - far too large inside a description.
   These rules give real heading elements (which Google uses for structure)
   the bold-black look your pages already have.
   ========================================================================= */

.lt-product h3.lt-h {
  margin: 1.6em 0 .55em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--lt-rule);
  color: #000;
  font-size: 1.1em;       /* 22px against your 20px body */
  font-weight: 700;
  line-height: 1.3;
}

.lt-product h3.lt-h:first-child { margin-top: 0; }

/* Prefer the brand red under section titles instead of grey?
   Swap the border-bottom line above for:
       border-bottom: 2px solid var(--lt-red);
   Leave the text black either way. */

.lt-product h4.lt-h-sub {
  margin: 1.2em 0 .4em;
  color: #000;
  font-size: 1em;
  font-weight: 700;
}

.lt-product p { margin: 0 0 .9em; }

/* Sequences and catalog numbers in a mono face so I/l and O/0 stay distinct. */
.lt-product .lt-seq {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  letter-spacing: .02em;
  word-break: break-all;
}

/* =================================================================== links
   Site content links are already brand red; set it explicitly so the
   description looks the same regardless of stylesheet load order.
   Matches site behaviour: no underline at rest, underline on hover.
   ========================================================================= */

.lt-product a { color: var(--lt-red); text-decoration: none; }

.lt-product a:hover,
.lt-product a:focus {
  color: var(--lt-red-dark);
  text-decoration: underline;
}

.lt-helper { display: block; margin-top: .3em; font-size: .85em; }

/* ------------------------------------------------- wide-table scroll box */

.lt-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.3em;
}

/* ---------------------------------------------------- specification table */

.lt-product table.lt-specs {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--lt-rule);
  background: #fff;
  font-size: .95em;
}

.lt-product table.lt-specs caption {
  padding: .55em .9em;
  border: 1px solid var(--lt-rule);
  border-bottom: 0;
  border-left: 3px solid var(--lt-red);
  background: var(--lt-label-bg);
  color: #000;
  font-size: .9em;
  font-weight: 700;
  text-align: left;
}

.lt-product table.lt-specs th,
.lt-product table.lt-specs td {
  padding: .6em .9em;
  border-bottom: 1px solid var(--lt-rule);
  text-align: left;
  vertical-align: top;
}

/* <th scope="row"> replaces the nested bold DIVs: bold + left aligned with
   no extra markup, and announced as a row label to screen readers/crawlers. */
.lt-product table.lt-specs th[scope="row"] {
  width: 13rem;
  background: var(--lt-label-bg);
  color: #000;
  font-weight: 700;
}

.lt-product table.lt-specs tr:last-child th,
.lt-product table.lt-specs tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- highlights */

.lt-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.1em;
  padding: 0;
  list-style: none;
}

.lt-highlights li {
  padding: .25em .75em;
  border: 1px solid var(--lt-red);
  border-radius: 999px;
  color: var(--lt-red);
  font-size: .8em;
  font-weight: 700;
  white-space: nowrap;
}

/* ----------------------------------------------------------- applications */

.lt-product ul.lt-applications { margin: 0 0 1em; padding-left: 1.3em; }
.lt-product ul.lt-applications li { margin-bottom: .4em; font-size: .95em; }
.lt-product ul.lt-applications li::marker { color: var(--lt-red); }

/* ------------------------------------------------------------- references
   Smaller than body text: at 20px a long reference list dominates the page.
   ========================================================================= */

.lt-product ol.lt-references {
  margin: 0 0 1em;
  padding-left: 1.6em;
  font-size: .85em;
  line-height: 1.5;
}

.lt-product ol.lt-references li { margin-bottom: .6em; }
.lt-product ol.lt-references cite { font-style: normal; font-weight: 700; }
.lt-product ol.lt-references a { word-break: break-word; }

/* ----------------------------------------------------------------- figures */

.lt-product figure { margin: 0 0 1.2em; text-align: center; }

.lt-product figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--lt-rule);
  border-radius: var(--lt-radius);
  background: #fff;
}

.lt-product figcaption {
  margin-top: .45em;
  color: var(--lt-muted);
  font-size: .82em;
  line-height: 1.45;
  text-align: left;
}

/* ------------------------------------------- related products
   .fantom-table-2 in new.css already supplies border-collapse, 100% width,
   #ddd rules and 15px/23px padding. These rules only add what's missing.
   ========================================================================= */

.lt-product table.lt-related { background: #fff; font-size: .9em; }

.lt-product table.lt-related caption {
  padding: 0 0 .55em;
  color: var(--lt-muted);
  font-size: .95em;
  text-align: left;
}

.lt-product table.lt-related th[scope="col"] {
  padding: .6em .8em;
  border-bottom: 3px solid var(--lt-red);
  color: #000;
  font-size: 1em;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.lt-product table.lt-related td {
  padding: .6em .8em;
  border-top: 1px solid var(--lt-rule);
  border-bottom: 1px solid var(--lt-rule);
  vertical-align: top;
}

.lt-product table.lt-related tbody tr:hover { background: #fdf6f6; }

.lt-product table.lt-related .lt-price { white-space: nowrap; font-weight: 700; }
.lt-product table.lt-related .lt-order { white-space: nowrap; text-align: center; }
.lt-product table.lt-related .lt-order img { vertical-align: middle; border: 0; }

/* Text order button for rows without an add_to_cart image. */
.lt-btn {
  display: inline-block;
  padding: .3em .85em;
  border-radius: var(--lt-radius);
  background: var(--lt-red);
  color: #fff !important;
  font-size: .85em;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}
.lt-btn:hover, .lt-btn:focus { background: var(--lt-red-dark); color: #fff !important; }

/* -------------------------------------------------------------- RUO notice */

.lt-ruo {
  margin: 1.4em 0 0;
  padding: .65em .9em;
  border-left: 3px solid var(--lt-red);
  background: var(--lt-label-bg);
  color: var(--lt-muted);
  font-size: .85em;
}

/* ==========================================================================
   TEMPLATE OVERRIDE COMPENSATION          <-- verified against the live page
   --------------------------------------------------------------------------
   The product page template carries an inline <style> block:

       body, p, li, td, div, span { font-size: 20px !important; line-height: 1.6; }

   Because it uses !important it beats this stylesheet however specific the
   selector is, forcing every td / span / li / div / p to 20px. That flattened
   the size hierarchy and made monospace sequences render at full body size,
   which reads as oversized beside Source Sans.

   Sizes here are absolute px, not em, on purpose: the container rules earlier
   in this file are em-based, and em on top of em compounds (sequences came out
   at 15.3px in testing, and differed between the two tables). Absolute values
   against the template's fixed 20px give one predictable hierarchy:

       body text ............. 20px     applications .......... 19px
       spec table ............ 19px     related table ......... 18px
       sequences ............. 17px     references / RUO ...... 17px
       highlight chips ....... 16px     figure captions ....... 16px

   !important appears here only to answer the template's own !important.

   CLEANER LONG-TERM FIX: in the template, stop that rule reaching this
   content - either drop the !important, or scope it so .lt-product is
   excluded. Then this entire section can be deleted and the em-based rules
   above take over again.
   ========================================================================== */

/* Peptide sequences. Monospace is deliberate: in LLLFSIIPV or ILGFVFTLTV a
   capital I and a lowercase-looking L are only reliably told apart in a mono
   face, and a misread sequence is a wasted experiment. To use the body font
   instead, delete the font-family line but keep the letter-spacing so the
   characters stay countable. */
.lt-product .lt-seq {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 17px !important;
  letter-spacing: .02em;
}

.lt-product table.lt-specs .lt-seq,
.lt-product table.lt-related td.lt-seq { font-size: 17px !important; }

/* Never break a sequence across lines in the related table - a split sequence
   is misread, not merely ugly. These are 9-13mers and always fit. */
.lt-product table.lt-related td.lt-seq { white-space: nowrap; word-break: normal; }

/* In the spec table a long modified sequence (H-DCAWHLGELVWCT-NH2) may need to
   wrap on a phone: break at hyphens first, mid-sequence only as a last resort. */
.lt-product table.lt-specs .lt-seq { word-break: normal; overflow-wrap: anywhere; }

/* Restore the rest of the hierarchy. */
.lt-product ol.lt-references li   { font-size: 17px !important; line-height: 1.5; }
.lt-product ul.lt-applications li { font-size: 19px !important; }
.lt-product ul.lt-highlights li   { font-size: 16px !important; }
.lt-product table.lt-specs td,
.lt-product table.lt-specs th     { font-size: 19px !important; }
.lt-product table.lt-related td   { font-size: 18px !important; }
.lt-product table.lt-related th[scope="col"] { font-size: 18px !important; }
.lt-product figcaption            { font-size: 16px !important; }
.lt-product p.lt-ruo              { font-size: 17px !important; }

/* ============================== responsive ============================= */

@media (max-width: 40rem) {

  .lt-product table.lt-specs,
  .lt-product table.lt-specs tbody,
  .lt-product table.lt-specs tr,
  .lt-product table.lt-specs th,
  .lt-product table.lt-specs td { display: block; width: auto; }

  .lt-product table.lt-specs tr {
    padding: .6em .9em;
    border-bottom: 1px solid var(--lt-rule);
  }
  .lt-product table.lt-specs tr:last-child { border-bottom: 0; }

  .lt-product table.lt-specs th[scope="row"] {
    width: auto;
    padding: 0 0 .1em;
    border: 0;
    background: none;
    color: var(--lt-muted);
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .lt-product table.lt-specs td { padding: 0; border: 0; }

  .lt-product h3.lt-h { font-size: 1.05em; }
}

@media (max-width: 48rem) {

  /* Header row hidden visually, still read by screen readers. */
  .lt-product table.lt-related thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
  }

  .lt-product table.lt-related,
  .lt-product table.lt-related tbody,
  .lt-product table.lt-related tr,
  .lt-product table.lt-related td { display: block; width: auto; }

  .lt-product table.lt-related tr {
    margin-bottom: .7em;
    border: 1px solid var(--lt-rule);
    border-left: 3px solid var(--lt-red);
    border-radius: var(--lt-radius);
    background: #fff !important;
  }

  /* Override new.css's 15px/23px padding in the stacked layout. */
  .lt-product table.lt-related td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45em .8em !important;
    border-top: 0;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
  }

  .lt-product table.lt-related td:last-child { border-bottom: 0; }

  .lt-product table.lt-related td::before {
    content: attr(data-label);
    flex: 0 0 8rem;
    color: var(--lt-muted);
    font-size: .8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
  }

  .lt-product table.lt-related td:not([data-label])::before { content: none; }
}

/* ------------------------------------------------------------------- print */

@media print {
  .lt-product h3.lt-h { color: #000; border-bottom-color: #000; }
  .lt-product a { color: #000; }
  .lt-product a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .lt-scroll { overflow: visible; }
  .lt-order, .lt-btn, .lt-highlights { display: none; }
}