/* /pages/hormone-health (Testosterone Rx): small additions on top of /css/weight-loss.css (Nov 13 2026).
   Only `.tr` scoped rules; the weight-loss page itself never loads this file. */

/* H1 separator kept in the DOM for the SEO text ("… Low Testosterone — Raise Your Own T"), hidden visually */
.tr .tr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hero tiles: RGBA bottle cutouts on the tile tone, like the weight-loss "Prefer pills?" tile; slight tilt */
.tr .tr-tile .wl-tile__img { left: auto; right: 17%; top: auto; bottom: -14%; height: 118%; transform: rotate(-7deg); transform-origin: 50% 100%; }
@media (hover: hover) { .tr .tr-tile:hover .wl-tile__img { transform: rotate(-5deg) translateY(-3px); } }

/* "What is enclomiphene?" dark band: 4 mechanism beats */
.tr .tr-how__grid { list-style: none; margin-left: 0; padding-left: 0; }
.tr .tr-how__beat { text-align: left; }
.tr .tr-how__ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px;
  background: rgba(255, 255, 255, .08); color: #ff7a3d; margin-bottom: 14px; }
.tr .tr-how__ico .wl-ico { width: 24px; height: 24px; }
.tr .tr-how .wl-stat__num { font-size: clamp(34px, 3vw, 46px); }
.tr .tr-how .wl-stat__cap { font-size: clamp(17px, 1.3vw, 21px); font-weight: 700; margin: 8px 0 8px !important; line-height: 1.2; }

/* "on your terms" photo (provider + patient): faces sit in the upper half, so on desktop the 3 chips go in a row along
   the bottom edge instead of the weight-loss left column (which would cover the provider) */
@media (min-width: 1024px) {
  .tr .wl-terms__img { object-position: 50% 22%; }
  .tr .wl-chip { top: auto; bottom: 4%; width: 30.5%; padding: 10px 14px 10px 10px; gap: 10px; font-size: 13px; }
  .tr .wl-chip__ico { width: 36px; height: 36px; flex: none; }
  .tr .wl-chip--left { left: 2.5%; }
  .tr .wl-chip--top { left: 34.75%; }
  .tr .wl-chip--right { left: 67%; }
}

/* treatment cards: studio scenes (4:5, same look as the weight-loss cards). 6 products → 3 + 3 on desktop (weight-loss shows
   5 per row); the image band keeps the weight-loss 4:5 so the whole bottle and its contact shadow stay in view.
   Facts may wrap (combo ingredient names are longer than the weight-loss ones). */
.tr .wl-fcard__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tr .wl-fcard__facts dd { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 1280px) {
  .tr .wl-format__track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; }
}

/* ---- enclomiphene product pages (Views/Shared/TrProduct, on top of /css/wl-product.css) ---- */
/* H1: product name big, the benefit line as a smaller second line (the full H1 text stays one heading for SEO) */
.tr-os .wl-hero__title .tr-h1-sub { display: block; margin-top: .25em; font-size: .5em; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: #4a4744; }

/* "All doses" pop-up (<dialog>, no prices; multi-strength products only) — replaces the weight-loss dose ladder */
.tr-dose-dialog { width: min(92vw, 460px); max-height: 88vh; padding: 0; border: 0; border-radius: 22px; background: #fff; color: #0b0b0c;
  box-shadow: 0 30px 80px -20px rgba(20, 18, 16, .45); }
.tr-dose-dialog::backdrop { background: rgba(11, 11, 12, .55); backdrop-filter: blur(2px); }
.tr-dose-dialog[open] { animation: tr-dose-in .2s ease-out; }
@keyframes tr-dose-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.tr-dose-dialog__box { position: relative; padding: 26px 24px 22px; font-family: inherit; }
.tr-dose-dialog__x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #f3efeb; color: #0b0b0c; cursor: pointer; }
.tr-dose-dialog__x .wl-ico { width: 18px; height: 18px; }
.tr-dose-dialog__eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ff6a2b; }
.tr-dose-dialog__title { margin: 4px 0 14px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.tr-dose-dialog__group { padding: 14px 0; border-top: 1px solid #f0ebe6; }
.tr-dose-dialog__strength { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.tr-dose-dialog__packs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tr-dose-dialog__packs li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #fff3ec; font-size: 14px; font-weight: 600; }
.tr-dose-dialog__packs .wl-ico { width: 16px; height: 16px; color: #ff6a2b; }
.tr-dose-dialog__note { margin: 6px 0 16px; font-size: 13px; line-height: 1.45; color: #797878; }

/* "What to expect": the pages have four steps (weight-loss has three) → four columns on desktop; the infographics keep their full 16:9 */
@media (min-width: 1024px) {
  .tr-os .wl-os-expect .wl-works__track { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: 16px; }
}
.tr-os .wl-os-expect .wl-step__img { aspect-ratio: 16 / 9; }

/* Product details "dossier" image: weight-loss puts its 4:5 studio tile here (cover fits exactly); the enclomiphene pages pass the tall
   bottle cutout, so it is contained (whole bottle visible) on the dossier's own studio gradient instead of cropped */
.tr-os .wl-os-dossier__img { object-fit: contain; padding: 8% 10%; box-sizing: border-box; filter: drop-shadow(0 10px 14px rgba(120, 60, 20, .18)); }
@media (max-width: 1023px) { .tr-os .wl-os-dossier__img { padding: 6px 8px; } }

/* "What to expect": no 1–4 step numbers on the enclomiphene pages (user, Nov 13 2026) — these are benefits, not a sequence */
.tr-os .wl-os-expect .wl-step__num { display: none; }

/* =====================================================================================================
   Infection Care (Nov 13 2026): /pages/infection-care (.wl.tr.ic) and its product pages (.tr-os.rx-infection-care)
   ===================================================================================================== */
/* landing treatment cards: 10 treatments → 5 per row like weight loss (the .tr rule above makes 3 for enclomiphene) */
@media (min-width: 1280px) { .ic .wl-format__track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 14px; } }
/* hero: a plain photo card (the weight-loss stage is for cut-outs); the face sits high in the portrait photo */
.ic .ic-hero__photo { background: #f3ede6; }
.ic .ic-hero__photo .ic-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 22%; }
.ic .ic-hero__photo .wl-hero__tp { background: rgba(255, 255, 255, .86); color: #0b0b0c; border-color: rgba(0, 0, 0, .06); }
.ic .ic-hero__photo .wl-hero__tp-score, .ic .ic-hero__photo .wl-hero__tp-label { color: #0b0b0c; }
/* benefit + condition cards: portrait photos → keep faces in the landscape crop */
.ic .wl-benefit__img { object-position: 50% 28%; }
@media (min-width: 1024px) { .ic .ic-cond__track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ic .ic-cond .wl-benefit { background: #1b1b1f; }
.ic .ic-cond .wl-benefit h3 { color: #fff; }
.ic .ic-cond .wl-benefit p { color: rgba(255, 255, 255, .72); }
.ic .ic-cond__go { display: inline-flex; align-items: center; gap: 6px; margin: 10px 20px 0; font-size: 15px; font-weight: 600; color: #ff7a3d !important; text-decoration: none; }
.ic .ic-cond__go .wl-ico { width: 16px; height: 16px; }
.ic .ic-cond .wl-glp__foot { color: rgba(255, 255, 255, .7); text-align: center; }
/* product pages: these are generic medications, not compounded → hide the dossier's "Compounded" chip */
.rx-infection-care .wl-os-dossier .wl-fcard__type { display: none; }
.ic .ic-cond .wl-glp__lead { color: rgba(255, 255, 255, .72); }
.ic .ic-cond .wl-glp__title span { color: #ff7a3d; }

/* hero photo card: Trustpilot strip and CTA stack bottom-left where the picture is narrow (same rule weight loss uses on its stage) */
.ic .ic-hero__photo .wl-hero__tp { bottom: calc(3.5% + 62px); left: 3.5%; right: auto; }
.ic .ic-hero__photo .wl-hero__start { left: 3.5%; right: auto; }
@media (max-width: 749px) { .ic .ic-hero__photo .wl-hero__tp { bottom: calc(3.5% + 56px); } }
.ic .ic-hero__photo .wl-hero__tp-brand { color: #0b0b0c; }

/* ---- "The Emergency Medication Kit" showcase (Views/Pages/InfectionCare/_Kit.cshtml) — light warm card (user: the dark version was too heavy) ---- */
.ic-kit2 { padding: 8px 0 40px; }
.ic-kit2__card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1fr; gap: 8px 40px;
  padding: 26px 20px 22px; border-radius: 28px; color: #0b0b0c; border: 1px solid #f1e3d8;
  background: linear-gradient(135deg, #fff8f3 0%, #fff1e8 55%, #f7eef6 100%); }
.ic-kit2__glow { position: absolute; inset: auto -20% -40% auto; width: 90%; aspect-ratio: 1; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 100, .22) 0%, rgba(255, 150, 100, .06) 45%, transparent 68%); }
.ic-kit2__copy { order: 2; }
.ic-kit2__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: #ffe9dc; color: #c2491a; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.ic-kit2__eyebrow .wl-ico { width: 16px; height: 16px; color: #ff7a3d; }
.wl .ic-kit2__title { margin: 14px 0 0 !important; color: #0b0b0c; font-size: clamp(32px, 4.2vw, 56px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
.ic-kit2__title span { display: block; color: #ff7a3d; }
.ic-kit2__lead { margin: 14px 0 0 !important; max-width: 560px; color: #5f5a55; font-size: 16px; line-height: 1.55; }
.ic-kit2__label { margin: 22px 0 10px !important; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a8f86; }
.ic-kit2__inside { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 9px 22px; }
.ic-kit2__inside li { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: #1c1710; }
.ic-kit2__inside .wl-ico { width: 18px; height: 18px; flex: none; color: #ff7a3d; }
.ic-kit2__inside .ic-kit2__extra { color: #6b6762; font-weight: 400; }
.ic-kit2__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #efe2d8; }
.ic-kit2__price { display: flex; align-items: center; gap: 12px; margin: 0 !important; }
.ic-kit2__price strong { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #0b0b0c; }
.ic-kit2__price span { font-size: 13px; line-height: 1.35; color: #7a736c; }
.ic-kit2__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.ic-kit2__ghost { border: 1.5px solid #1c1710; color: #1c1710 !important; background: transparent; }
@media (hover: hover) { .ic-kit2__ghost:hover { background: #1c1710; color: #fff !important; } }
.ic-kit2__visual { order: 1; position: relative; }
.ic-kit2__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px -26px rgba(150, 80, 40, .35); }
.ic-kit2__badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px;
  background: #fff; color: #121214; font-size: 13px; font-weight: 600; box-shadow: 0 12px 26px -14px rgba(60, 30, 10, .35); }
.ic-kit2__badge .wl-ico { width: 18px; height: 18px; color: #ff6a2b; }
.ic-kit2__badge--a { left: 14px; top: 14px; }
.ic-kit2__badge--b { right: 14px; bottom: 14px; }
.ic-kit2__points { order: 3; list-style: none; margin: 18px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: 1fr; gap: 14px;
  border-top: 1px solid #efe2d8; }
.ic-kit2__points li { display: flex; gap: 12px; align-items: flex-start; }
.ic-kit2__ico { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; margin-top: 1px; color: #ff6a2b; }
.ic-kit2__ico .wl-ico { width: 24px; height: 24px; }
.ic-kit2__points strong { display: block; font-size: 15px; color: #1c1710; }
.ic-kit2__points span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: #6b6762; }
.ic-kit2__note { order: 4; margin: 10px 0 0 !important; font-size: 12.5px; color: #8f877f; }
@media (min-width: 750px) {
  .ic-kit2__card { padding: 40px 40px 30px; }
  .ic-kit2__inside { grid-template-columns: 1fr 1fr; }
  .ic-kit2__points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}
@media (min-width: 1024px) {
  .ic-kit2__card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 56px 56px 34px; align-items: center; }
  .ic-kit2__copy { order: 1; }
  .ic-kit2__visual { order: 2; }
  .ic-kit2__points, .ic-kit2__note { grid-column: 1 / -1; }
  .ic-kit2__glow { inset: -30% -18% auto auto; width: 70%; }
}

/* kit product page: the kit picture is the ORIGINAL product photo on its own extended backdrop (opaque, not a cut-out — white caps on a
   white backdrop can't be cut cleanly) → it fills the hero stage and the dossier thumbnail edge to edge */
.rx-h-emergency-medication-kit .wl-os-stage .wl-os-slide--kit img.wl-os-slide__img { inset: 0; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: none; animation: none; }
.rx-h-emergency-medication-kit .wl-os-stage__shadow { display: none; }
.rx-h-emergency-medication-kit .wl-os-dossier__img { object-fit: cover; padding: 0; filter: none; }

/* hero product picture motion, like the weight-loss product pages (wl-product.css: bottles/vials float with wl-os-float).
   Infection Care slides are "product" (bottles, cream tube) and "kit" (full-bleed photo → a slow zoom instead of a float, so no edge shows).
   prefers-reduced-motion: wl-product.css already stops every .wl-os-slide img animation. */
.tr-os .wl-os-slide--product img.wl-os-slide__img { animation: wl-os-float 6s ease-in-out infinite; transform-origin: 50% 90%; }
.rx-h-emergency-medication-kit .wl-os-stage .wl-os-slide--kit img.wl-os-slide__img { animation: tr-kit-breathe 9s ease-in-out infinite; transform-origin: 50% 55%; }
@keyframes tr-kit-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) { .tr-os .wl-os-slide img { animation: none !important; } }