/* ==========================================================================
   Thirst IV Telehealth — data-driven Product Page
   Matches the live "Vital Core" IV product page:
     - full-bleed sections (cream #FBF2E9 / white alternating)
     - Poppins, light (300) capitalized headings, ink #1B262A
     - dark pill CTA (radius 200px)
     - two-column image+copy feature sections
   Scoped under .tiv-pp so it doesn't leak into the theme.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

.tiv-pp {
    --pp-cream: #FBF2E9;
    --pp-white: #FFFFFF;
    --pp-ink: #1B262A;
    --pp-ink-soft: #4A555A;
    --pp-muted: #7C868B;
    --pp-line: #E7DECF;
    --pp-accent: #1B262A;
    --pp-teal: #3ED9C9;
    --pp-radius: 22px;
    --pp-radius-sm: 16px;
    --pp-max: 1180px;

    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--pp-ink);
    line-height: 1.65;
    box-sizing: border-box;
}
.tiv-pp *,
.tiv-pp *::before,
.tiv-pp *::after { box-sizing: border-box; }

.tiv-pp img { max-width: 100%; height: auto; display: block; }

/* Full-bleed: break each section out of the theme's content container so it
   spans the entire viewport width, like the Elementor sections on Vital Core. */
.tiv-pp-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Hide the theme's page title (the duplicate product name the default template
   prints above our hero) — only on telehealth product pages. Also collapses the
   empty title-band space so the hero sits up under the header. */
.entry-title,
.page-title,
.elementor-page-title { display: none !important; }

/* Hide the Mini Ajax Woo Cart (majc) drawer + floating button on telehealth
   product pages. Its CSS/JS are dequeued here to free the Buy-Now click, which
   would otherwise leave its markup rendering unstyled below the footer. This
   stylesheet only loads on product pages, so the cart is unaffected elsewhere. */
.majc-main-wrapper,
[id^="majc-main-wrapper"],
.majc-cart-popup,
.majc-floating-cart { display: none !important; }

.tiv-pp-error {
    font-family: 'Poppins', sans-serif;
    padding: 24px;
    background: #fdecea;
    color: #8a1c1c;
    border-radius: 12px;
    text-align: center;
}

/* Shared heading look (Poppins light, capitalized — matches Vital Core h1/h2) */
.tiv-pp-title,
.tiv-pp-feature-title,
.tiv-pp-benefits-title {
    font-weight: 300;
    text-transform: capitalize;
    letter-spacing: 0;
    color: var(--pp-ink);
}

/* ============================ HERO ============================ */

.tiv-pp-hero {
    background: var(--pp-cream);
    padding: 72px 24px 80px;
}
.tiv-pp-hero-inner {
    max-width: var(--pp-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}
.tiv-pp-hero-left { min-width: 0; }

.tiv-pp-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pp-muted);
    margin-bottom: 14px;
}
.tiv-pp-title {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1.12;
    margin: 0 0 20px;
}
.tiv-pp-title strong { font-weight: 700; }
.tiv-pp-title-suffix { font-weight: 300; }

.tiv-pp-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 22px;
}
.tiv-pp-price {
    font-size: 2rem;
    font-weight: 500;
    color: var(--pp-ink);
}
.tiv-pp-price-suffix {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--pp-muted);
}

.tiv-pp-desc {
    font-size: 1.04rem;
    color: var(--pp-ink-soft);
    margin: 0 0 16px;
    max-width: 38em;
}
.tiv-pp-subhead {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pp-ink);
    margin: 0 0 40px;
}
.tiv-pp-ingredients {
    font-size: 0.92rem;
    color: var(--pp-muted);
    margin: 0 0 26px;
}
.tiv-pp-ingredients span { font-weight: 600; color: var(--pp-ink-soft); margin-right: 6px; }

/* Supply toggle (1 Month / 3 Month) */
.tiv-pp-supply {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.tiv-pp-supply-pill {
    appearance: none;
    cursor: pointer;
    border: 1.5px solid var(--pp-line);
    background: #fff;
    border-radius: 16px;
    padding: 12px 20px;
    min-width: 132px;
    text-align: left;
    font-family: inherit;
    color: var(--pp-ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tiv-pp-supply-pill:hover { border-color: #cdbf9f; transform: translateY(-1px); }
.tiv-pp-supply-pill.is-active {
    border-color: var(--pp-ink);
    box-shadow: 0 0 0 1.5px var(--pp-ink) inset;
    background: #fff;
}
.tiv-pp-supply-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--pp-muted);
}
.tiv-pp-supply-pill.is-active .tiv-pp-supply-label { color: var(--pp-ink); }
.tiv-pp-supply-price { font-size: 1.1rem; font-weight: 600; }

/* Buy button row */
.tiv-pp-buy-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
/* !important overrides the theme's global pink outline-button styling so our
   Buy Now renders as the dark IV-style pill. */
.tiv-pp-buy {
    appearance: none;
    cursor: pointer;
    border: none !important;
    background: var(--pp-ink) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 15px 34px !important;
    border-radius: 200px !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.tiv-pp-buy:hover { background: #000 !important; transform: translateY(-2px); }
.tiv-pp-buy:disabled, .tiv-pp-buy.is-loading { opacity: .75; cursor: default; transform: none; }
.tiv-pp-buy i { font-size: 0.9em; }

.tiv-pp-hsa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2f7d6b;
    background: #e7f6f2;
    border: 1px solid #cdeae3;
    padding: 8px 14px;
    border-radius: 50px;
}
.tiv-pp-hsa i { color: var(--pp-teal); }

.tiv-pp-buy-error {
    display: none;
    margin-top: 12px;
    color: #8a1c1c;
    background: #fdecea;
    border: 1px solid #f5c6c0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    max-width: 36em;
}
.tiv-pp-buy-note {
    margin: 26px 0 0;
    font-size: 0.84rem;
    color: var(--pp-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tiv-pp-buy-note i { color: var(--pp-muted); }
.tiv-pp-buy-note-2 { margin-top: 4px; padding-left: 21px; }

/* Hero image */
.tiv-pp-hero-right { display: flex; justify-content: center; }
.tiv-pp-image-frame {
    width: 100%;
    max-width: 340px;
    border-radius: var(--pp-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tiv-pp-image { width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(40,40,30,0.16)); }
.tiv-pp-image-placeholder {
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, #ECE3D1 0%, #DCCFB4 100%);
    border: 1px solid var(--pp-line);
}
.tiv-pp-placeholder-inner {
    text-align: center;
    color: #8a7c5c;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px;
}
.tiv-pp-placeholder-inner i { font-size: 3.4rem; opacity: .55; }
.tiv-pp-placeholder-inner span { font-weight: 600; font-size: 1.05rem; }

/* ============ FEATURE SECTIONS (image + copy, two columns) ============ */

.tiv-pp-feature { padding: 84px 24px; }
.tiv-pp-feature--light { background: var(--pp-white); }
.tiv-pp-feature--cream { background: var(--pp-cream); }
.tiv-pp-feature-inner {
    max-width: var(--pp-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px; /* matches the airy image-to-text gap on the IV product pages */
    align-items: center;
}
/* Reverse = copy on the left, image on the right */
.tiv-pp-feature--reverse .tiv-pp-feature-media { order: 2; }
.tiv-pp-feature--reverse .tiv-pp-feature-copy { order: 1; }

.tiv-pp-feature-frame {
    border-radius: var(--pp-radius);
    overflow: hidden;
    box-shadow: 0 26px 50px rgba(40,40,30,0.12);
}
.tiv-pp-feature-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.tiv-pp-feature-title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    margin: 0 0 22px;
}
.tiv-pp-feature-title strong { font-weight: 700; }
.tiv-pp-feature-body {
    font-size: 1.05rem;
    color: var(--pp-ink-soft);
    margin: 0 0 16px;
}
.tiv-pp-feature-body:last-child { margin-bottom: 0; }

/* Ingredient breakdown list */
.tiv-pp-ingredient-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tiv-pp-ingredient-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--pp-line);
    font-size: 1.02rem;
    color: var(--pp-ink-soft);
}
.tiv-pp-ingredient-list li:last-child { border-bottom: none; }
.tiv-pp-ingredient-dot {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pp-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.tiv-pp-ingredient-text strong { color: var(--pp-ink); font-weight: 600; }

/* ============================ SECTION J: benefits ============================ */

.tiv-pp-benefits {
    background: var(--pp-white);
    padding: 84px 24px 92px;
}
.tiv-pp-benefits-inner {
    max-width: var(--pp-max);
    margin: 0 auto;
}
.tiv-pp-benefits-title {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 52px;
    text-transform: none; /* keep "Benefits of" lowercase; name is bolded below */
}
.tiv-pp-benefits-title strong {
    font-weight: 700;
    text-transform: uppercase;
}
.tiv-pp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
/* Cards match the IV pages: transparent fill, soft 2px teal-tint border,
   large radius, centered teal line-icon + label only (no description). */
.tiv-pp-benefit {
    background: transparent;
    border: 2px solid #E0F2F1;
    border-radius: 20px;
    padding: 40px 22px;
    min-height: 248px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tiv-pp-benefit:hover { border-color: #BBE6E3; transform: translateY(-4px); box-shadow: 0 16px 32px rgba(40,40,30,0.06); }
.tiv-pp-benefit-icon {
    width: auto;
    height: auto;
    border: none;
    background: none;
    color: var(--pp-teal);
    font-size: 2.7rem;
    line-height: 1;
}
.tiv-pp-benefit-label {
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--pp-ink);
}
.tiv-pp-benefit-text { display: none; }
.tiv-pp-benefits-cta {
    text-align: center;
    margin-top: 52px;
}

/* ============================ HOW IT WORKS ============================ */

.tiv-pp-hiw {
    background: rgba(62, 217, 201, 0.08);
    padding: 84px 24px;
}
.tiv-pp-hiw-inner {
    max-width: var(--pp-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
}
.tiv-pp-hiw-title {
    font-weight: 300;
    text-transform: capitalize;
    font-size: clamp(2rem, 4vw, 2.7rem);
    color: var(--pp-ink);
    margin: 0;
    line-height: 1.15;
}
.tiv-pp-hiw-title strong { font-weight: 600; }
.tiv-pp-hiw-sub {
    color: #425962;
    font-size: 1.05rem;
    margin: 16px 0 0;
    max-width: 32em;
}
.tiv-pp-hiw-divider {
    height: 1px;
    background: rgba(27, 38, 42, 0.12);
    margin: 28px 0 10px;
}
.tiv-pp-hiw-step { padding: 4px 0; }
.tiv-pp-hiw-head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.tiv-pp-hiw-num {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--pp-teal);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tiv-pp-hiw-step-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #9AA4A6;
    transition: color .15s ease;
}
.tiv-pp-hiw-step.is-open .tiv-pp-hiw-step-title { color: var(--pp-ink); font-weight: 700; }
.tiv-pp-hiw-body {
    display: none;
    padding: 2px 0 6px 44px;
}
.tiv-pp-hiw-step.is-open .tiv-pp-hiw-body { display: block; }
.tiv-pp-hiw-body p { margin: 0; color: var(--pp-ink-soft); font-size: 1rem; line-height: 1.6; }
.tiv-pp-hiw-frame {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 26px 50px rgba(40,40,30,0.12);
}
.tiv-pp-hiw-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }

/* ============================ Responsive ============================ */

/* Tablet / small laptop: stack hero + feature sections, 2-up benefits. */
@media (max-width: 920px) {
    .tiv-pp-hiw-inner { grid-template-columns: 1fr; gap: 36px; }
    .tiv-pp-hiw-media { order: -1; }
    .tiv-pp-hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .tiv-pp-hero-right { order: -1; }
    /* Mobile hero image: 35% smaller than the 340px desktop size. */
    .tiv-pp-image-frame { max-width: 221px; }

    .tiv-pp-feature-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    /* On mobile, always show the image above the copy */
    .tiv-pp-feature-media { order: -1 !important; }
    .tiv-pp-feature-copy { order: 0 !important; }

    .tiv-pp-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phone: tighter padding, scaled headings, full-width controls, compact cards. */
@media (max-width: 600px) {
    .tiv-pp-hero { padding: 40px 18px 48px; }
    .tiv-pp-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
    .tiv-pp-desc, .tiv-pp-subhead { max-width: none; }

    .tiv-pp-feature { padding: 48px 18px; }
    .tiv-pp-feature-title { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }
    .tiv-pp-hiw { padding: 48px 18px; }

    .tiv-pp-benefits { padding: 52px 18px 60px; }
    .tiv-pp-benefits-title { font-size: clamp(1.7rem, 6.5vw, 2.2rem); margin-bottom: 36px; }
    .tiv-pp-benefits-grid { gap: 14px; }
    .tiv-pp-benefit { min-height: 188px; padding: 28px 14px; gap: 18px; }
    .tiv-pp-benefit-icon { font-size: 2.2rem; }
    .tiv-pp-benefit-label { font-size: 1.02rem; }

    .tiv-pp-buy { width: 100%; justify-content: center; }
    .tiv-pp-buy-row { gap: 12px; }
    .tiv-pp-hsa { width: 100%; justify-content: center; }
    .tiv-pp-supply { width: 100%; }
    .tiv-pp-supply-pill { flex: 1 1 0; min-width: 0; }
}

/* Very narrow phones: single-column benefits. */
@media (max-width: 400px) {
    .tiv-pp-benefits-grid { grid-template-columns: 1fr; }
}

/* Methylene Blue is a squat capsule bottle, not a tall vial — render it smaller
   than the vial products on desktop, and smaller still on mobile. Scoped to the
   product via the wrapper's data-slug so no other product is affected. */
.tiv-pp[data-slug="methylene-blue-capsules"] .tiv-pp-image-frame { max-width: 230px; }
@media (max-width: 920px) {
    .tiv-pp[data-slug="methylene-blue-capsules"] .tiv-pp-image-frame { max-width: 150px; }
}

/* Urgent Care On-Demand is a square card graphic, not a tall vial — size it down
   (smaller on desktop, smaller still on mobile), same approach as Methylene Blue. */
.tiv-pp[data-slug="urgent-care-consult"] .tiv-pp-image-frame { max-width: 300px; }
@media (max-width: 920px) {
    .tiv-pp[data-slug="urgent-care-consult"] .tiv-pp-image-frame { max-width: 200px; }
}

/* Scroll reveal — sections below the hero fade in as they scroll into view,
   matching the Elementor "fadeIn" entrance used on the IV product pages. The
   hidden state only applies once JS tags the root (.tiv-pp-js); the JS also
   skips tagging under prefers-reduced-motion, so no-JS and reduced-motion
   visitors keep everything visible. */
.tiv-pp.tiv-pp-js > section:not(.tiv-pp-hero) {
    opacity: 0;
    transition: opacity .8s ease;
    will-change: opacity;
}
.tiv-pp.tiv-pp-js > section.tiv-pp-in {
    opacity: 1;
}