/* NeoLoss customizations on top of the unpacked Hims markup. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* High-specificity override: some Hims component styles set their own
   font-family with !important, which beats a plain `* { !important }` rule
   at equal specificity tiers. The :not(#…) trick gives this selector
   ID-level specificity while still matching everything. */
html, body, *:not(#neoloss-specificity-anchor) { font-family: 'Manrope', sans-serif !important; }

/* Widen the "Сбросьте до 25%... / Чек-лист «Готов ли я к курсу GLP-1»"
   paragraph so "GLP-1" stops wrapping onto its own line. */
.nl-193.nl-194.nl-195 { max-width: 640px !important; }

/* "Энкломифен" / "Проверить, можно ли мне тирзепатид" cards block: match
   top padding to the existing 36px bottom padding. (Turned out the block
   was already symmetric once the FDA-disclaimer line at the very bottom is
   counted -- that tiny grey print is easy to mistake for empty space. This
   rule is now a no-op confirmed safe to keep.) */
.nl-424.nl-425 { padding-top: 60px !important; height: auto !important; }

/* "Найдите свою точку отсчёта" / "Спланируйте прорыв" descriptions: 256px
   was tuned for the shorter English copy and forced our Russian text into
   an awkward 3rd orphan-word line. Widen it so each line reads as one
   full sentence, and add a shadow so the white text stays legible over
   the lighter part of the background photo. */
.nl-493.nl-494 { max-width: 340px !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }

/* "Изучить план" button was pinned flush to the right edge (left:844px in a
   1000px-wide row) instead of centered under the "Спланируйте прорыв"
   column it belongs to (that column's center sits at ~79.8% of the row). */
.nl-505.nl-506 { left: 79.8% !important; right: auto !important; top: 251px !important; transform: translateX(-50%); }

/* Shrink the NeoLoss pill photo by half, anchored to the bottom of its box. */
img[src*="tabletneoloss.png"] { object-fit: contain !important; transform: scale(0.625); transform-origin: center bottom; }

/* Mobile fixes: the page never hydrates, so Hims' JS-driven responsive
   type-scale and marquee/ticker components are frozen in their desktop
   measurements. That breaks two things on narrow screens:
   1) headings/paragraphs using `white-space: pre` (meant to control exact
      line breaks at a known viewport width) instead clip or force the page
      wider than the screen once our (often longer) Russian text doesn't
      fit that fixed width.
   2) any horizontally-duplicated marquee content sits fully laid out with
      no scroll container, pushing the whole page wider than the viewport.
   `overflow-x: hidden` on html/body is the safety net that guarantees the
   page itself never scrolls sideways no matter what still overflows
   inside it (carousels keep their own intentional horizontal scroll). */
html, body { max-width: 100%; overflow-x: hidden; }

/* The two hero tiles ("Начните снижение веса сегодня" / "Узнайте сколько
   веса можно сбросить") are a fixed flex row squeezed to ~175px each on
   phones. Stack them full-width instead -- also gives their background
   photos (and the Tirzetta box) much more room. */
@media (max-width: 767px) {
  .nl-102.nl-103 { flex-direction: column !important; }
  /* Their height was content-driven for the old cramped ~175px-wide tile;
     now that they're full-width, give the (multi-line, now-wrapping) text
     room instead of overlapping itself. */
  .nl-102.nl-103 > .nl-104.nl-105 { min-height: 180px !important; }
  [data-neoloss-tirzetta-card] .nl-125.nl-126 { display: flex !important; flex-direction: column !important; gap: 14px !important; }
  /* "Худеть легко и безопасно — / с личным врачом на каждом шаге": each
     line's wrapper has a fixed height clamp sized for one line at desktop
     font-size; on mobile our Manrope rendering wraps taller and the second
     line overlaps the first. This pair of classes is only used by this one
     heading, so it's safe to just let both lines size naturally here. */
  .nl-187.nl-188 { height: auto !important; overflow: visible !important; }
  /* Main hero H1 wraps into 5 lines at the frozen desktop font-size (40px)
     once our longer Russian copy is involved -- shrink it on phones so the
     block reads more like the compact cards below it. */
  h1.nl-95.nl-96.nl-97 { font-size: 28px !important; line-height: 1.25 !important; }
  /* Tirzetta product shot in the gradient hero: bigger on phones only. */
  .neoloss-float-img { width: 75% !important; }
}

/* "Найти врача по GLP-1..." lead-capture form: text/form column was
   capped at 460px (tuned for the shorter English copy), cramming our
   longer Russian heading into 5 wrapped lines. Give it more room. */
.nl-546.nl-547 { max-width: 620px !important; }

/* Slight left-side darkening so the white heading/form stay readable over
   the light doctor photo, same treatment as the Tirzetta hero card. */
.nl-544.nl-545::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.32), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* "Скрининг 50+ видов болезней" caption underneath the heading. */
.neoloss-screening-caption {
  display: block; font-size: 13px; color: rgba(255, 255, 255, 0.55);
  margin-top: 4px; text-align: center;
}

/* "Найдите свою точку отсчёта / Персональный отчёт" row: replaced the
   phone-in-hand + cross-faded app-screenshot composite (never animates
   without React hydration) with a single static photo of the guide.
   The original relied on a padding-bottom aspect-ratio placeholder div
   (removed along with the composite) to reserve its ~308x330 footprint
   in the row without affecting layout -- do the same here with a plain
   aspect-ratio box, otherwise this column's height collapses and pushes
   the absolutely-positioned "Изучить план" button (tuned to the old
   fixed row height) into the wrong place. */
.neoloss-report-mockup-wrap {
  position: relative; width: 100%; max-width: 320px;
  aspect-ratio: 308 / 330;
  margin: 0 auto;
}
.neoloss-report-mockup {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.25));
}

/* Footer "Получить понятный план действий" photo (unique to this block --
   .nl-604 is only used here). Source photo is landscape (1536x1024) inside
   a square crop; anchor it bottom-center instead of the default top-left
   so the subject isn't cut off. */
.nl-604 {
  background-image: url(/site/assets/images/neoloss-phone-doctor-consult.png) !important;
  background-position: center bottom !important;
}

/* "Широкая линейка GLP-1 препаратов" carousel: the Мунджаро/Саксенда pen
   cutouts have far more transparent canvas padding baked in than their
   neighbours, so they render much smaller and float higher in the card.
   Scale up (a lot, to actually match) and nudge down to the same visual
   baseline as the other pens; Тирзетта/Оземпик just get the +10% asked
   for. Scoped to `.nl-214` (the carousel card) so this doesn't also hit
   the Тирзетта hero float-image, which reuses the same source photo. */
.nl-214 img[src*="tirzetta-product.png"] { transform: scale(1.1) translateY(12%); transform-origin: center bottom; }
.nl-214 img[src*="product_ozempic.png-3b63ef63.webp"] { transform: scale(1.1); transform-origin: center bottom; }
.nl-214 img[src*="neoloss-mounjaro-pen.webp"] { transform: scale(1.9) translateY(70px); transform-origin: center bottom; }
.nl-214 img[src*="neoloss-saksenda-pen.png"] { transform: scale(1.33) translateY(70px); transform-origin: center bottom; }

/* Category strip icons ("Выглядеть моложе" / "Восстановить волосы" / ...):
   15% smaller per request. */
img[src*="neoloss-tabl-1.png"], img[src*="neoloss-tabl-2.png"],
img[src*="neoloss-tabl-3.png"], img[src*="neoloss-tabl-4.png"] {
  transform: scale(0.85);
}

.neoloss-logo-img { height: 24px; width: auto; display: block; }

/* Shrink the lab-app iPhone photo ~30%. */
img[src*="lab-app-iphone.png"] { transform: scale(0.7); transform-origin: center bottom; }

/* Show the whole pen instead of cropping it (box is proportionally
   narrower than the photo, so object-fit:cover was cutting both ends). */
img[src*="markerblock-01.png"] { object-fit: contain !important; }

/* Blog article cards ("Экспертный блог о GLP-1 терапии"): more breathing
   room + a bigger, more readable description, and a "Читать подробнее"
   link pinned to the bottom of the (now much emptier, image-free) card. */
.nl-349.nl-350 { margin-top: 10px !important; font-size: 15px !important; line-height: 1.4 !important; }
.nl-334.nl-335 { justify-content: space-between !important; }
.neoloss-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 20px;
}

/* Shrink the huge gap between "Играй в хардкорном режиме" and "Здесь
   каждый найдёт своё" -- was reserved for the hero background image to
   extend past the CTA buttons, but now just reads as dead space. */
.nl-303.nl-304 { padding-bottom: 60px !important; }

/* Shrink the "weight loss" card photo so the whole person is visible
   instead of being cropped by the shared .nl-112 object-fit:cover rule. */
img[src*="weight-loss-woman.png"] {
  object-fit: contain !important;
  width: 78% !important;
  height: 92% !important;
  top: auto !important;
  bottom: 0 !important;
  left: auto !important;
  right: 0 !important;
}

/* Tirzetta hero card background photo: fill the card edge-to-edge. */
img[src*="tirzettablock-2.png"] {
  object-fit: cover !important;
  object-position: center center !important;
}

/* Slight darkening on the left/bottom of the Tirzetta hero card so the
   overlaid text stays readable against the bright background photo. */
[data-neoloss-tirzetta-card] { position: relative; }
[data-neoloss-tirzetta-card]::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.32), transparent 45%),
    linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 55%);
  pointer-events: none;
  z-index: 1;
}
[data-neoloss-tirzetta-card] .nl-125 { position: relative; z-index: 2; }

.neoloss-menu-backdrop {
  position: fixed; inset: 0; background: rgba(20,15,10,0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
  z-index: 2147483000;
}
.neoloss-menu-backdrop.open { opacity: 1; pointer-events: auto; }
.neoloss-menu-panel {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(420px, 90vw); background: #fff;
  box-shadow: -20px 0 60px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
  z-index: 2147483001;
  display: flex; flex-direction: column;
  padding: 28px 28px 40px;
  overflow-y: auto;
  box-sizing: border-box;
}
.neoloss-menu-panel.open { transform: translateX(0); }
.neoloss-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.neoloss-menu-header h2 { font-size: 28px; margin: 0; font-weight: 600; }
.neoloss-menu-header-actions { display: flex; align-items: center; gap: 18px; }
.neoloss-menu-account { color: #111; display: flex; text-decoration: none; }
.neoloss-menu-close { background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: #111; padding: 0 2px; }
.neoloss-menu-eyebrow { font-size: 12px; letter-spacing: .08em; color: #8a8a8a; margin-bottom: 8px; font-weight: 600; }
.neoloss-menu-list { display: flex; flex-direction: column; margin-bottom: 8px; }
.neoloss-menu-list a { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; text-decoration: none; color: #111; font-size: 19px; border-bottom: 1px solid #eee; transition: opacity .15s ease; }
.neoloss-menu-list a:hover { opacity: .6; }
.neoloss-menu-list a span { color: #bbb; font-size: 18px; }
body.neoloss-menu-locked { overflow: hidden; }

/* "Your weight loss breakthrough" hero: replaced the autoplay video with a
   static warm-light gradient (matching the video's own look) + a floating
   product shot. */
.neoloss-gradient-bg {
  background:
    radial-gradient(ellipse 900px 600px at 72% 22%, rgba(255, 226, 181, 0.55), transparent 60%),
    linear-gradient(135deg, #211407 0%, #3d2712 20%, #6b4726 38%, #b98a52 54%, #ecd2a6 66%, #b98a52 78%, #4a3018 92%, #211407 100%);
}
.neoloss-float-img {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 58%;
  max-width: 1220px;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.35));
  animation: neoloss-float 4.5s ease-in-out infinite alternate;
}
@keyframes neoloss-float {
  from { transform: translate(-50%, -50%) translateY(-16px); }
  to   { transform: translate(-50%, -50%) translateY(16px); }
}

/* "Read more" legal-disclaimer expanders. Each disclaimer renders two
   copies of its text: the full untruncated block (.nl-245) and a clamped
   preview (.nl-253) -- only one should ever be visible at a time. */
.nl-245 { display: none; }
.nl-243.neoloss-expanded .nl-245 { display: block; }
.nl-243.neoloss-expanded .nl-253 { display: none; }

/* Product carousels: draggable, no visible scrollbar */
.neoloss-no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.neoloss-no-scrollbar::-webkit-scrollbar {
  display: none;
  height: 0;
}

/* "Войти" (Log in) placeholder panel */
.neoloss-login-backdrop {
  position: fixed; inset: 0; background: rgba(20,15,10,0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
  z-index: 2147483002;
}
.neoloss-login-backdrop.open { opacity: 1; pointer-events: auto; }
.neoloss-login-panel {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(.96);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
  background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.25);
  width: min(380px, 90vw); padding: 32px 28px; box-sizing: border-box;
  z-index: 2147483003;
}
.neoloss-login-panel.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.neoloss-login-panel h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; }
.neoloss-login-panel p { margin: 0 0 20px; color: #666; font-size: 14px; }
.neoloss-login-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #111; }
.neoloss-login-form { display: flex; flex-direction: column; gap: 14px; }
.neoloss-login-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #444; font-weight: 600; }
.neoloss-login-form input { padding: 12px 14px; border: 1px solid #ddd; border-radius: 10px; font-size: 15px; font-family: inherit; }
.neoloss-login-form input:focus { outline: none; border-color: #111; }
.neoloss-login-submit { margin-top: 6px; padding: 13px; border: none; border-radius: 999px; background: #111; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.neoloss-login-submit:hover { opacity: .85; }