/* === DESIGN UNIFORMITY OVERRIDES (match concurrent rejuvacare: Poppins body + Bitter heads + black readable text) === */
/* The rejuvacare vendor CSS forces #ialx1 { color: rgb(69,117,132) !important; font-weight: 600 } which makes body text appear dark blue/teal-navy. We override here. */
html body #ialx1,
html body #ialx1 * {
  color: #1a1a1a !important;
}
/* MATCH EXACT competitor rejuvacare typography:
   H1 = Bitter 38px bold line 50px
   Body = Bitter 20px regular line 28px color #303030
   CTA = Poppins (only)
*/
#ialx1 {
  background-color: #ffffff !important;
  font-weight: 400 !important;
  font-family: 'Bitter', Georgia, serif !important;
  line-height: 28px !important;
  font-size: 20px !important;
  padding-top: 0 !important;
  padding-bottom: 24px !important;
  align-items: stretch !important;
}
#ialx1 [data-text],
#ialx1 div,
#ialx1 p,
#ialx1 li,
#ialx1 span {
  font-weight: 400 !important;
  line-height: 28px !important;
  font-size: 20px !important;
  font-family: 'Bitter', Georgia, serif !important;
  color: #303030 !important;
}
#ialx1 h1 {
  font-family: 'Bitter', Georgia, serif !important;
  font-size: 32px !important;
  line-height: 1.32 !important;
  font-weight: 700 !important;
  color: #0d0d0d !important;
}
@media (max-width: 600px) {
  #ialx1 h1 { font-size: 28px !important; line-height: 1.25 !important; }
  #ialx1 [data-text], #ialx1 div, #ialx1 p, #ialx1 li { font-size: 18px !important; line-height: 26px !important; }
}
#ialx1 h2 {
  font-family: 'Bitter', Georgia, serif !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin-top: 32px !important;
  margin-bottom: 14px !important;
  color: #0d0d0d !important;
}
/* Reassurance section — match same Alegreya for the "Stop right there" header */
.tfw-reassurance p:first-child {
  font-family: 'Alegreya', Georgia, serif !important;
}
/* Pricing rows + FAQ override blue-teal */
#ialx1 strong, #ialx1 b { color: #0d0d0d !important; }
/* Meta date/byline lighter shade for hierarchy (override blue) */
#ialx1 .tfw-byline div[style*="color: #888"],
#ialx1 .tfw-byline div[style*="color: #555"] { color: #555 !important; }
#ialx1 div[style*="color: #777"] { color: #666 !important; }
#ialx1 strong, #ialx1 b {
  font-weight: 700 !important;
}
#ialx1 em, #ialx1 i {
  font-style: italic !important;
  font-weight: 400 !important;
}
#ialx1 a.btn,
#ialx1 a[class*="btn-primary"] {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

/* FB Comments wrap reset (no inherited gray) */
.fbc-wrap { background: #fff !important; }

/* Footer dark teal section — keep dark bg, force white text */
#iylx5 { background: #f5f3ee !important; color: #555 !important; }
#iylx5 p, #iylx5 a { color: #555 !important; }

/* Mobile-first image constraints for advertorial pages.
   Caps tall portrait images at 60vh and crops via object-fit cover.
   Keeps landscape images natural. */

/* === SUBTLE KEN BURNS ANIMATION (vidéo feel without MP4) === */
@keyframes tfwKenBurns {
  0%   { transform: scale(1.00) translate(0, 0); }
  50%  { transform: scale(1.06) translate(-1%, -0.5%); }
  100% { transform: scale(1.00) translate(0, 0); }
}
@keyframes tfwSubtleFloat {
  0%   { transform: scale(1.00); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1.00); }
}
/* Hero gets richer Ken Burns */
#ialx1 .fk-image-defaults {
  animation: tfwKenBurns 14s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}
/* Section images get subtle float */
#ialx1 section img:not(.fk-image-defaults),
#ialx1 > div img:not(.fk-image-defaults) {
  animation: tfwSubtleFloat 12s ease-in-out infinite;
  transform-origin: center center;
}
/* Reduce-motion respect for accessibility */
@media (prefers-reduced-motion: reduce) {
  #ialx1 img { animation: none !important; }
}

/* Show full images naturally — no forced aspect-ratio crop.
   Just cap max-height so vertical TVs don't eat the fold. */
section img,
section video,
.rj-media img,
.rj-media video {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 4px;
  background: #f7f6f1;
}

/* Mobile: keep cap but ensure full visibility */
@media (max-width: 600px) {
  section img,
  section video,
  .rj-media img,
  .rj-media video {
    max-height: 55vh;
    border-radius: 0;
  }
}

/* === VIDEOS — full-width, large mobile presence === */
#ialx1 video {
  width: 100% !important;
  height: auto !important;
  max-height: 85vh !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: #000 !important;
  border-radius: 4px !important;
  margin: 16px 0 !important;
}

/* Override Bootstrap embed-responsive wrappers — force consistent 16:9 landscape on all wrappers */
.embed-responsive,
.embed-responsive.embed-responsive-1by1,
.embed-responsive.embed-responsive-16by9,
.embed-responsive.embed-responsive-21by9,
.embed-responsive.embed-responsive-4by3 {
  aspect-ratio: 16 / 9 !important;
  max-height: 32vh !important;
  padding-top: 0 !important;
  height: auto !important;
  position: relative;
}
.embed-responsive .embed-responsive-item,
.embed-responsive video,
.embed-responsive img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 600px) {
  .embed-responsive,
  .embed-responsive.embed-responsive-1by1,
  .embed-responsive.embed-responsive-16by9,
  .embed-responsive.embed-responsive-21by9,
  .embed-responsive.embed-responsive-4by3 {
    aspect-ratio: 16 / 10 !important;
    max-height: 28vh !important;
  }
}

/* FB Comments avatars are NOT subject to the rule above (already sized) */
.fbc-avatar-img,
.fbc-compose-avatar-img {
  max-height: 40px !important;
  height: 40px !important;
  width: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.fbc-replies .fbc-avatar-img {
  max-height: 32px !important;
  height: 32px !important;
  width: 32px !important;
}

/* Hero image (immediately after H1) gets a slightly different cap */
main > section:first-of-type + section img,
main > section:first-of-type + section video {
  max-height: 70vh;
}

/* Don't crop testimonial card images which need to show full face */
.fk-i4vh35o, .fk-is2i96r {
  max-height: none !important;
}

/* === STICKY CTA BAR — always visible at bottom on scroll (per client feedback) === */
.tfw-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
  padding: 14px 16px 16px;
  z-index: 9999;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  border-top: 1px solid #d8d4ca;
}
.tfw-sticky-cta a {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 24px;
  background: #19af42;
  color: #fff !important;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px;
  border: 0;
  box-shadow: 0 4px 0 #14a03c, 0 6px 12px rgba(0,0,0,0.18);
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}
.tfw-sticky-cta a:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #14a03c, 0 3px 6px rgba(0,0,0,0.18);
}
.tfw-sticky-cta a::after {
  content: ' →';
}
/* Add bottom padding to body so sticky CTA doesn't cover content */
body.rejuvacare {
  padding-bottom: 90px !important;
}
@media (max-width: 600px) {
  body.rejuvacare {
    padding-bottom: 80px !important;
  }
  .tfw-sticky-cta {
    padding: 10px 12px 12px;
  }
  .tfw-sticky-cta a {
    font-size: 16px;
    padding: 14px 18px;
  }
}

/* Badge / discount graphics — never crop, always show full image */
img[src*="badge"], img[src*="tv-badge"], img[src*="badge-discount"] {
  aspect-ratio: auto !important;
  object-fit: contain !important;
  max-height: 45vh !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 16px auto !important;
  display: block !important;
  background: transparent !important;
}
@media (max-width: 600px) {
  img[src*="badge"], img[src*="tv-badge"], img[src*="badge-discount"] {
    max-height: 38vh !important;
  }
}

/* Ditto for badge inside Bootstrap embed-responsive wrapper */
.embed-responsive:has(img[src*="badge"]) {
  aspect-ratio: auto !important;
  max-height: 45vh !important;
  height: auto !important;
  padding-top: 0 !important;
  background: transparent !important;
}
.embed-responsive:has(img[src*="badge"]) img {
  position: relative !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 45vh !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}