/* ==============================================================
   RTPR PDP CSS — v1.1
   Real Time Pain Relief · BigCommerce Product Description Area

   Loaded via BC Script Manager on Product pages only.
   Requires rtpr-common.css to be loaded first (CSS tokens).

   CDN URL:
   https://store-oprnxuib2u.mybigcommerce.com/content/rtpr-css/rtpr-pdp.css

   Local file:
   /Users/ronaldsnodgrass/Desktop/RTPR-BC-v2/rtpr-pdp.css

   Scope:   .ela-pdp-wrap  (wraps the BC description paste)
   Prefix:  ela-pdp-

   Per-product accent color: set --ela-red / --ela-red-dark /
   --ela-red-rgb on .ela-pdp-wrap via inline <style> in the paste.

   Note: pill styles (ela-pp-pill / fsa / fda) are self-contained
   here so the paste previews correctly without rtpr-common.css.

   SECTIONS:
     1. Wrapper & Base
     2. Trust Pills Row
     3. Intro Hook
     4. Benefit List
     5. Sizes Line
     6. Philosophy Callout
     7. Testimonial
     8. Learn More Link
   ============================================================== */


/* ==============================================================
   1. WRAPPER & BASE
   ============================================================== */

.ela-pdp-wrap {
  font-family: var(--ela-font, 'Roboto', Arial, sans-serif);
  color: var(--ela-dark, #173034);
}

.ela-pdp-wrap * { box-sizing: border-box; }

/* Font override — beats BC theme in description area */
.ela-pdp-wrap p,
.ela-pdp-wrap li,
.ela-pdp-wrap a,
.ela-pdp-wrap div,
.ela-pdp-wrap span,
.ela-pdp-wrap strong,
.ela-pdp-wrap cite  { font-family: var(--ela-font, 'Roboto', Arial, sans-serif); }


/* ==============================================================
   2. TRUST PILLS ROW
   Self-contained pill styles so the paste works locally and in BC
   without depending on rtpr-common.css being loaded.
   ============================================================== */

.ela-pdp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ela-border, #d9e4e6);
}

.ela-pdp-wrap .ela-pp-pill {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(0,89,97,.08);
  border: 1px solid rgba(0,89,97,.18);
  color: var(--ela-teal, #005961);
  font-weight: 800;
  font-size: .84rem;
  padding: 6px 12px;
}

.ela-pdp-wrap .ela-pp-pill-fsa {
  background: rgba(254,205,8,.25);
  border-color: rgba(254,205,8,.8);
  color: var(--ela-dark, #173034);
}

.ela-pdp-wrap .ela-pp-pill-fda {
  background: rgba(0,89,97,.14);
  border-color: var(--ela-teal, #005961);
}


/* ==============================================================
   3. INTRO HOOK
   ============================================================== */

.ela-pdp-intro {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ela-teal, #005961);
  line-height: 1.5;
  margin: 0 0 14px;
}


/* ==============================================================
   3. BENEFIT LIST
   ============================================================== */

.ela-pdp-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.ela-pdp-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ela-dark, #173034);
  line-height: 1.55;
  font-size: 1rem;
}

.ela-pdp-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ela-red, #DD1F26);
  font-weight: 900;
  font-size: .95rem;
}

.ela-pdp-list li strong {
  color: var(--ela-teal, #005961);
  font-weight: 800;
}


/* ==============================================================
   4. SIZES LINE
   Compact centered line — "Available in: 3oz · 7oz · 12oz"
   ============================================================== */

.ela-pdp-sizes {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ela-muted, #4e666a);
  text-align: center;
  margin: 0 0 16px;
  padding: 10px 0;
  border-top: 1px solid var(--ela-border, #d9e4e6);
  border-bottom: 1px solid var(--ela-border, #d9e4e6);
}

.ela-pdp-sizes span {
  color: var(--ela-teal, #005961);
  font-weight: 800;
}


/* ==============================================================
   5. PHILOSOPHY CALLOUT
   Echoes the brand-tag panel from the product pages — teal
   tinted, centered, italic with accent-colored punchline.
   ============================================================== */

.ela-pdp-philosophy {
  background: linear-gradient(135deg, rgba(0,89,97,.08), rgba(0,89,97,.03));
  border: 1px solid rgba(0,89,97,.18);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  text-align: center;
  color: var(--ela-teal, #005961);
  font-weight: 800;
  font-size: .98rem;
  line-height: 1.5;
  font-style: italic;
}

.ela-pdp-philosophy span {
  color: var(--ela-red, #DD1F26);
  font-style: normal;
}


/* ==============================================================
   6. TESTIMONIAL PULL-QUOTE
   ============================================================== */

.ela-pdp-testimonial {
  background: linear-gradient(135deg, rgba(254,205,8,.2), rgba(254,205,8,.06));
  border: 1px solid rgba(254,205,8,.65);
  border-radius: 12px;
  padding: 13px 16px;
  margin-bottom: 16px;
}

.ela-pdp-stars {
  color: #FECD08;
  font-size: .9rem;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

.ela-pdp-testimonial p {
  margin: 0 0 6px;
  color: var(--ela-dark, #173034);
  font-style: italic;
  font-size: .96rem;
  line-height: 1.6;
}

.ela-pdp-testimonial cite {
  display: block;
  font-size: .84rem;
  color: var(--ela-teal, #005961);
  font-weight: 700;
  font-style: normal;
}


/* ==============================================================
   7. LEARN MORE LINK
   ============================================================== */

.ela-pdp-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ela-teal, #005961);
  font-weight: 800;
  font-size: .96rem;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(0,89,97,.35);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}

.ela-pdp-link:hover {
  color: var(--ela-red, #DD1F26);
  border-color: rgba(var(--ela-red-rgb, 221,31,38), .4);
}