/* Hyde Park Pharmacy — mobile-first revamp layer (weight-loss section).
   Loaded AFTER each page's inline styles so it applies mobile-native patterns
   (sticky CTA, scroll-chips, tap-targets, mobile rhythm) WITHOUT rewriting pages.
   Brand preserved: teal #0f5257 / dark-teal #0A2E36 / cream #FAF7F2 / terracotta #a8542f,
   Proxima Nova. Desktop/tablet untouched except where noted. */

/* ============ STICKY BOTTOM CTA (mobile only) — the #1 mobile action ============ */
.m-sticky-cta { display: none; }
@media (max-width: 760px) {
  .m-sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 247, 242, 0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid #e7e2d8; box-shadow: 0 -6px 22px rgba(10, 46, 54, 0.12);
    /* Hidden until the user scrolls down (JS adds .m-visible) — not pinned from the top. */
    transform: translateY(120%); transition: transform .3s cubic-bezier(.22, 1, .36, 1); will-change: transform;
  }
  .m-sticky-cta.m-visible { transform: translateY(0); }
  .m-sticky-cta .m-cta-main {
    flex: 1; display: flex; align-items: center; justify-content: center;
    min-height: 52px; border-radius: 13px; text-decoration: none;
    font-weight: 700; font-size: 16px; background: #0f5257; color: #FAF7F2;
    box-shadow: 0 4px 14px rgba(15, 82, 87, 0.32);
  }
  .m-sticky-cta .m-cta-main:active { transform: scale(0.98); }
  .m-sticky-cta .m-cta-call {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    min-width: 52px; min-height: 52px; border-radius: 13px; text-decoration: none;
    background: #fff; color: #0f5257; border: 1.5px solid #0f5257;
  }
  /* reserve space so the bar never hides content */
  body { padding-bottom: 78px; }
}

/* ============ MOBILE TYPOGRAPHY + RHYTHM (<= 760px) ============ */
@media (max-width: 760px) {
  .wrap { padding: 22px 18px 40px; }
  h1 { font-size: 30px; line-height: 1.16; letter-spacing: -0.01em; }
  .lead { font-size: 16.5px; line-height: 1.62; }
  h2 { font-size: 22px; line-height: 1.2; margin-top: 36px; }

  /* Trust badges: 4 stacked full-width boxes -> compact 2x2 grid (all visible) */
  .trust-bar {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px;
    margin: 16px 0 8px; padding: 0; flex-wrap: nowrap;
  }
  .trust-item {
    padding: 11px 12px; font-size: 12px; line-height: 1.3; align-items: flex-start;
    border-radius: 12px; box-shadow: 0 1px 3px rgba(10, 46, 54, 0.05);
  }

  /* Treatment cards: single clean column with comfortable gap */
  .treatment-grid { grid-template-columns: 1fr; gap: 16px; }
  .t-card { border-radius: 16px; }

  /* How-it-works + eligibility: breathing room */
  .steps { gap: 12px; }
  .panel { padding: 18px 18px; }

  /* Bottom CTA strip — full-width comfortable button */
  .cta-strip { padding: 30px 22px; border-radius: 16px; }
}

/* ============ TAP TARGETS (all breakpoints) ============ */
.cta, .t-card-cta, .btn, .hero-cta {
  min-height: 48px; touch-action: manipulation;
}
@media (max-width: 760px) {
  .cta, .t-card-cta, .btn {
    display: flex; align-items: center; justify-content: center; width: 100%;
    box-sizing: border-box;
  }
  .cta-sub { text-align: center; }
}

/* ============ TABLET (761–1024px): 2-up treatment grid ============ */
@media (min-width: 761px) and (max-width: 1024px) {
  .treatment-grid { grid-template-columns: 1fr 1fr; }
}

/* ============ Motion respect ============ */
@media (prefers-reduced-motion: reduce) {
  .m-sticky-cta .m-cta-main:active { transform: none; }
}

/* ============ HOMEPAGE HERO — visible upgrade (overlay headline + CTA) ============ */
.wl-hero { position: relative; min-height: 470px; display: flex; align-items: center; overflow: hidden; }
.wl-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.wl-hero-scrim { position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,46,54,0.88) 0%, rgba(10,46,54,0.62) 42%, rgba(10,46,54,0.14) 78%, rgba(10,46,54,0) 100%); }
.wl-hero-inner { position: relative; z-index: 2; max-width: 1180px; width: 100%; margin: 0 auto; padding: 56px 24px; }
.wl-hero .pill { display: inline-block; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.36); color: #fff; }
.wl-hero h1 { color: #fff; font-size: clamp(31px, 4.4vw, 50px); line-height: 1.08; letter-spacing: -0.02em; max-width: 660px; margin: 14px 0 16px; }
.wl-hero .lead { color: rgba(255,255,255,0.93); max-width: 545px; font-size: 17px; line-height: 1.6; }
.wl-hero-cta { margin-top: 24px; background: #a8542f; color: #fff; border: none;
  box-shadow: 0 10px 26px rgba(168,84,47,0.42); transition: background .15s, transform .15s; }
.wl-hero-cta:hover { background: #b3603f; transform: translateY(-2px); }
.wl-hero .cta-sub.light { color: rgba(255,255,255,0.82); margin-top: 12px; }
@media (max-width: 760px) {
  .wl-hero { min-height: 430px; }
  .wl-hero-inner { padding: 40px 18px; }
  .wl-hero-scrim { background: linear-gradient(180deg, rgba(10,46,54,0.32) 0%, rgba(10,46,54,0.52) 50%, rgba(10,46,54,0.9) 100%); }
  .wl-hero .lead { font-size: 16px; }
  .wl-hero-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wl-hero-cta:hover { transform: none; } }

/* ============ SECTION GLOW-UP — cards, steps, panel, CTA strip ============ */
.wrap > h2 { letter-spacing: -0.01em; }
/* treatment cards: depth + hover lift + warm image area + terracotta badge */
.t-card { border-radius: 18px; border-color: #ece7dd; box-shadow: 0 6px 22px rgba(10,46,54,0.06); transition: transform .18s ease, box-shadow .18s ease; }
.t-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(10,46,54,0.13); }
.t-card-img { background: linear-gradient(160deg,#f6f4ef 0%,#eef2f1 100%); }
.t-card-badge { background: #a8542f; box-shadow: 0 4px 12px rgba(168,84,47,0.35); }
.t-card-cta { border-radius: 11px; box-shadow: 0 4px 14px rgba(15,82,87,0.22); transition: background .15s, transform .15s; }
.t-card-cta:hover { transform: translateY(-1px); }
/* how-it-works steps */
.step { border-radius: 16px; border-color: #ece7dd; box-shadow: 0 4px 16px rgba(10,46,54,0.05); transition: transform .15s, box-shadow .15s; }
.step:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(10,46,54,0.1); }
.step .n { box-shadow: 0 4px 10px rgba(15,82,87,0.3); }
/* eligibility panel + FAQ */
.panel, .faq { border-radius: 16px; border-color: #ece7dd; box-shadow: 0 4px 18px rgba(10,46,54,0.05); }
/* bottom CTA strip: richer gradient + terracotta button */
.cta-strip { background: linear-gradient(135deg,#0A2E36 0%,#0f5257 100%); border-radius: 20px; box-shadow: 0 18px 44px rgba(10,46,54,0.22); }
.cta-strip .cta { background: #a8542f; color: #fff; box-shadow: 0 8px 22px rgba(168,84,47,0.4); transition: background .15s, transform .15s; }
.cta-strip .cta:hover { background: #b3603f; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .t-card:hover, .step:hover, .t-card-cta:hover, .cta-strip .cta:hover { transform: none; }
}

/* ============ SELECTOR + MOUNJARO PAGE GLOW-UP (INNOVATIVE-but-credible) ============ */
/* selector treatment cards */
.cards .card { border-radius: 18px; border-color: #ece7dd; box-shadow: 0 6px 22px rgba(10,46,54,0.06); }
.cards .card:hover { box-shadow: 0 16px 42px rgba(10,46,54,0.14); transform: translateY(-4px); }
.cards .btn { border-radius: 11px; }
.cards .btn:not(.grey) { box-shadow: 0 4px 14px rgba(15,82,87,0.22); }
.price-table { border-radius: 12px; border-color: #ece7dd; }
.card-consult { background: linear-gradient(135deg, #0A2E36 0%, #0f5257 100%) !important; box-shadow: 0 14px 36px rgba(10,46,54,0.22); }
.card-consult .btn { background: #a8542f !important; color: #fff !important; box-shadow: 0 8px 22px rgba(168,84,47,0.4); }
.card-consult .btn:hover { background: #b3603f !important; }
/* mounjaro page */
.pricing { border-radius: 16px; border-color: #ece7dd; box-shadow: 0 6px 22px rgba(10,46,54,0.06); }
.process .step { border-radius: 14px; border-color: #ece7dd; box-shadow: 0 4px 16px rgba(10,46,54,0.05); transition: transform .15s, box-shadow .15s; }
.process .step:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(10,46,54,0.1); }
.cta-block { background: linear-gradient(135deg, #0A2E36 0%, #0f5257 100%); border-radius: 18px; box-shadow: 0 18px 44px rgba(10,46,54,0.22); }
.cta-block .btn-primary { background: #a8542f; color: #fff; box-shadow: 0 8px 22px rgba(168,84,47,0.4); }
.cta-block .btn-primary:hover { background: #b3603f; }
@media (prefers-reduced-motion: reduce) { .cards .card:hover, .process .step:hover { transform: none; } }

/* ============ PHASE-1 MOBILE-UX FIXES (2026-06-25 audit) ============ */
/* Dose-selector rows are keyboard controls (selector + Mounjaro): visible focus ring. */
.mj-pt-row:focus-visible { outline: 2px solid #0f5257; outline-offset: -2px; border-radius: 6px; }
@media (max-width: 760px) {
  /* Comfortable 44px tap height for the dose rows. */
  .mj-pt-row { min-height: 44px; }
  /* Bottom-stack coordination: lift the WhatsApp/callback FABs clear of the sticky CTA
     and the iOS home indicator (the FAB container is the fixed bottom-right z-index:50 div). */
  div[style*="position: fixed"][style*="z-index: 50"][style*="bottom: 20px"] {
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }
  /* Cookie banner: sit above the sticky CTA so its buttons stay tappable on first visit,
     and clear the home indicator. */
  #hppCookieBanner {
    z-index: 95 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
}

/* ============ PHASE-2/3 MOBILE POLISH (2026-06-26 audit) ============ */
@media (max-width: 760px) {
  /* The 2x2 grid is for the hub's .trust-item badges only; the selector's <ul> trust bar
     was being clobbered into a ragged single-column grid — restore it to a clean flex bar. */
  .trust-bar:has(ul) { display: block !important; padding: 12px 18px !important; margin: 0 !important; }
  .trust-bar ul { gap: 10px 18px; }
  /* Selector price-table: darker + larger secondary text (prices are decision-critical). */
  .price-table { font-size: 13px; }
  .pt-row .qty { color: #5b6470; font-size: 12.5px; }
  .pt-row .price.tbc { color: #6b7280; font-size: 12px; }
  .card .sub { color: #5b6470; }
  /* Hamburger: 44px tap target (overrides inline header padding/negative margins). */
  .hpp-burger { min-width: 44px; min-height: 44px; margin: 0; padding: 10px; display: inline-flex; align-items: center; justify-content: center; }
}
/* Non-colour active cue on dose-selector rows (a11y: not colour-alone). */
.mj-pt-row.mj-active { box-shadow: inset 3px 0 0 #0f5257; }

/* Current-section nav indicator (a11y wayfinding). */
.hpp-links a[aria-current="page"] { color: #0f5257; font-weight: 700; }

/* Sticky CTA: reduced-motion users get instant show/hide (still scroll-gated, no slide). */
@media (prefers-reduced-motion: reduce) { .m-sticky-cta { transition: none; } }