/* Monivea Road — responsive chrome.
 *
 * The page bodies were authored with inline styles and mostly reflow on their
 * own. What could not adapt that way lives here: the header, the mobile menu,
 * the footer, and a handful of layouts that need a real media query. Inline
 * styles beat a stylesheet, so anything governed from this file has had its
 * inline equivalent removed from the markup rather than being fought with
 * !important.
 */

/* ───────────────────── page gutter ───────────────────── */

/* The design system sets a 48px page gutter, which is right on a desktop and
   costs 96px of a phone's width — on a 375px screen that leaves 279px for the
   content, and several grid tracks are wider than that on their own. */
@media (max-width: 720px) {
  :root { --gutter-page-lg: 20px; }
}
@media (max-width: 380px) {
  :root { --gutter-page-lg: 16px; }
}

/* ──────────────────────── promotional strip ──────────────────────── */

/* Sits above the header, in normal flow, so it scrolls away and gives its
 * height back. The nav bar below it is sticky and stays; a strip that stayed
 * too would cost a phone a line of screen on every page for an offer the
 * patient has already read. */

.mvr-promo {
  position: relative;
  background: var(--navy-900);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: 9px var(--gutter-page-lg);
  /* Room for the close button, which is absolutely positioned so that the
   * message stays centred on the strip rather than centred on what is left
   * of it. */
  padding-right: 44px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.mvr-promo-in {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  max-width: var(--container-max);
}

.mvr-promo-msg { margin: 0; font-weight: 500; }

/* The code is a button because it does something when pressed. It is styled
 * as a chip rather than a link so that nobody expects it to navigate. */
.mvr-promo-code {
  font: inherit;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--white);
  background: rgba(255, 255, 255, .14);
  border: 1px dashed rgba(255, 255, 255, .45);
  border-radius: var(--radius-sm);
  padding: 2px 9px;
  cursor: pointer;
  /* The label swaps to "Copied" and back. Without a floor the whole strip
   * twitches sideways twice per copy. */
  min-width: 9ch;
}

.mvr-promo-code:hover { background: rgba(255, 255, 255, .24); }

.mvr-promo-link {
  color: var(--white);
  text-decoration: underline;
  font-weight: 600;
}

.mvr-promo-link:hover { color: var(--white); }

.mvr-promo-x {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--white);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: .75;
}

.mvr-promo-x:hover { opacity: 1; background: rgba(255, 255, 255, .14); }

@media (max-width: 560px) {
  .mvr-promo { font-size: 13px; padding-top: 8px; padding-bottom: 8px; }
}

/* ─────────────────────────── header ─────────────────────────── */

/* Two decks. The top one carries the logo, the support links and the trust
 * row; the lower one is the navigation. Only the navigation stays on screen
 * when the page scrolls.
 *
 * That is done with one line rather than a scroll listener: the whole header
 * is sticky, pinned at a negative offset exactly as tall as the top deck. As
 * the page moves, the top deck slides out of view above the viewport and the
 * nav bar comes to rest at y=0. No JavaScript, no jump when the class flips,
 * and nothing to keep in sync with a scroll position.
 *
 * The offset therefore has to match the top deck's height, so that height is
 * set rather than left to the content. */
:root { --mvr-top-h: 88px; }

.mvr-hdr {
  position: sticky;
  top: calc(-1 * var(--mvr-top-h));
  z-index: 40;
  background: var(--white);
}

/* ── top deck ── */

.mvr-hdr-top { height: var(--mvr-top-h); display: flex; align-items: center; }

.mvr-hdr-top-in {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--gutter-page-lg);
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.mvr-logo { display: flex; align-items: center; flex: 0 0 auto; }
.mvr-logo img { width: 210px; height: auto; display: block; }

.mvr-hdr-top-right {
  margin-left: auto;
  display: grid;
  justify-items: end;
  gap: 10px;
  min-width: 0;
}

.mvr-util { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mvr-util a { font-size: 13px; font-weight: 500; color: var(--navy-800); white-space: nowrap; }

.mvr-trustbar { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.mvr-tb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-900);
  white-space: nowrap;
}

.mvr-tb-ico { display: inline-block; width: 15px; height: 15px; flex: 0 0 auto; background: var(--green-600); }
.mvr-tb-1 .mvr-tb-ico { background: #E8A32C; }

/* ── nav bar (the part that stays) ── */

.mvr-hdr-bar {
  background: var(--navy-900);
  /* A hairline so the bar still reads as chrome where it meets a navy
     section of the page. */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14);
}

.mvr-hdr-bar-in {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-page-lg);
  display: flex;
  align-items: center;
  gap: var(--space-7);
  min-height: 54px;
}

.mvr-logo-sm { display: none; align-items: center; flex: 0 0 auto; }
.mvr-logo-sm img { width: 148px; height: auto; display: block; }

.mvr-nav { display: flex; gap: var(--space-7); align-items: center; }
.mvr-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  padding: 16px 0;
}
.mvr-nav a:hover { color: var(--white); text-decoration: underline; }

.mvr-hdr-actions { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; flex: 0 0 auto; }

.mvr-hdr-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 38px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: var(--white);
}

.mvr-hdr-ico { display: inline-block; width: 17px; height: 17px; flex: 0 0 auto; background: currentColor; }

/* The basket is the one thing on this bar that should catch the eye. */
.mvr-basket { background: var(--white); border-color: var(--white); color: var(--navy-900); }

.mvr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--navy-700);
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
}

/* ── hamburger ── */

.mvr-burger { display: none; }

.mvr-burger-bars,
.mvr-burger-bars::before,
.mvr-burger-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  content: '';
}
.mvr-burger-bars { position: relative; }
.mvr-burger-bars::before { position: absolute; top: -6px; }
.mvr-burger-bars::after  { position: absolute; top: 6px; }

.mvr-burger[aria-expanded='true'] .mvr-burger-bars { background: transparent; }
.mvr-burger[aria-expanded='true'] .mvr-burger-bars::before { top: 0; transform: rotate(45deg); }
.mvr-burger[aria-expanded='true'] .mvr-burger-bars::after  { top: 0; transform: rotate(-45deg); }

/* ───────────────────────── mobile menu ───────────────────────── */

.mvr-menu {
  display: grid;
  border-top: 1px solid var(--border-subtle);
  background: var(--white);
  padding: var(--space-4) var(--gutter-page-lg) var(--space-6);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
}

.mvr-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 52px clears the 44px minimum for a comfortable thumb. */
  min-height: 52px;
  font-size: 17px;
  font-weight: 500;
  color: var(--navy-900);
  border-bottom: 1px solid var(--border-subtle);
}

.mvr-menu a:last-child { border-bottom: none; }
.mvr-menu .mvr-menu-sep { border-top: 1px solid var(--border-subtle); margin-top: var(--space-4); padding-top: var(--space-2); }
.mvr-menu .mvr-menu-note { font-size: 13px; color: var(--text-muted); padding-top: var(--space-4); line-height: 1.6; }

.mvr-scrim {
  position: fixed;
  inset: 0;
  background: rgba(16, 26, 44, 0.38);
  z-index: 30;
  border: 0;
  padding: 0;
}

/* ────────────────────────── breakpoints ────────────────────────── */

@media (max-width: 1100px) {
  /* The support links are the first thing to go; they are all in the footer
     and in the menu. */
  .mvr-util { display: none; }
  :root { --mvr-top-h: 76px; }
}

@media (max-width: 1000px) {
  .mvr-nav { display: none; }
  .mvr-burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    /* Bare icon rather than a boxed button: on a coloured bar the outline
       reads as clutter, and 44px keeps the target size regardless. */
    border: none;
    background: transparent;
    cursor: pointer;
  }
  .mvr-burger-bars,
  .mvr-burger-bars::before,
  .mvr-burger-bars::after { width: 22px; height: 2.5px; }
  .mvr-burger-bars::before { top: -7px; }
  .mvr-burger-bars::after { top: 7px; }
  /* Menu on the left, wordmark centred, account and basket on the right —
     the arrangement a phone user's thumbs expect. The logo is positioned
     rather than flexed, because the two sides are not the same width and
     "roughly centred" looks like a mistake. */
  .mvr-hdr-bar-in { justify-content: space-between; gap: var(--space-4); }
  .mvr-logo { display: none; }
  .mvr-logo-sm {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
  }

  /* Both actions become icons. Labels and outlines are noise at this size. */
  .mvr-acct { display: flex; }
  .mvr-hdr-btn {
    border: none;
    background: transparent;
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
  }
  .mvr-basket { background: transparent; color: var(--white); }
  .mvr-btn-label { display: none; }
  .mvr-hdr-ico { width: 23px; height: 23px; }

  /* The count rides on the corner of the bag, as it does on every other shop. */
  .mvr-basket .mvr-badge {
    position: absolute;
    top: 1px;
    right: -1px;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    background: var(--green-600);
    border: 2px solid var(--navy-900);
  }
  .mvr-hdr-top-right { margin-left: 0; width: 100%; justify-items: center; }
  .mvr-trustbar { justify-content: center; }
  :root { --mvr-top-h: 42px; }
  .mvr-hdr-top { background: var(--navy-50); }
}

@media (max-width: 720px) {
  /* Only the two claims that matter most survive on a phone. */
  .mvr-tb-3, .mvr-tb-4 { display: none; }
}

@media (max-width: 640px) {
  .mvr-hdr-bar-in { min-height: 56px; }
  .mvr-logo-sm img { width: 138px; }
  .mvr-hdr-actions { gap: 2px; }
  .mvr-tb { font-size: 12px; }
  .mvr-trustbar { gap: var(--space-5); }
}

@media (max-width: 400px) {
  /* One claim is all that fits honestly at this width. */
  .mvr-tb-2 { display: none; }
  .mvr-logo-sm img { width: 118px; }
}

/* ─────────────────────────── footer ─────────────────────────── */

.mvr-foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-9) var(--space-8);
}

.mvr-foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
}

/* An email address is one unbreakable word wider than a narrow column, so it
   pushed the footer past the screen edge. */
.mvr-foot-cols { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  /* Two columns of links rather than one long ladder, with the brand block
     spanning both. */
  .mvr-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
  .mvr-foot-cols > :first-child { grid-column: 1 / -1; }
  .mvr-foot-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

@media (max-width: 360px) {
  /* Two columns stop being readable on the narrowest phones. */
  .mvr-foot-cols { grid-template-columns: 1fr; }

  /* At this width a menu button, a wordmark, an account icon and a basket do
     not fit with any room to breathe. The account icon goes — it is already
     in the menu — leaving the two controls people reach for. */
  .mvr-acct { display: none; }
}

/* ───────────────────────── page bodies ───────────────────────── */

/* Long prose and tall stacks read better with a little less air on a phone,
   and oversized display type wraps badly at 390px. */
@media (max-width: 640px) {
  .mvr-tight { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
}

/* ──────────────────────── hero band ──────────────────────── */

/* One gradient across the whole band. Before this the copy sat on white and
   the cards on a navy block, which read as two panels pushed together. The
   text in the copy column is set with inline styles, which a stylesheet cannot
   override without !important — that is the only reason it appears below. */
.mvr-hero {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--navy-600) 100%);
}

.mvr-hero-copy h1 { color: var(--white) !important; }

/* Supporting copy sits a step back from the headline without losing contrast
   against the darkest end of the gradient. */
.mvr-hero-copy span { color: rgba(255, 255, 255, .86) !important; }
.mvr-hero-copy span[style*="font-weight:600"] { color: var(--white) !important; }

/* The rule under the headline was drawn for a white background. */
.mvr-hero-copy [style*="border-top"] { border-top-color: rgba(255, 255, 255, .28) !important; }

/* Gold reads as a rating on dark; the green used on white disappears. */
.mvr-hero-copy span[aria-hidden="true"] { background: #E8A32C !important; }

/* Inverted so the primary action still carries the most weight on the page. */
.mvr-hero-copy button {
  background: var(--white) !important;
  color: var(--navy-900) !important;
  border-color: var(--white) !important;
}


/* The two service cards were capped at 560px inside a column half the width of
   the screen, which left a large empty navy area to their right and a band of
   it above and below. They now fill the column, and the pair stretches to the
   height of the headline beside them. */
.mvr-hero-cards {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-5);
  align-content: stretch;
  padding: var(--space-9) var(--gutter-page-lg) var(--space-9) var(--space-9);
}

@media (max-width: 1000px) {
  /* Stacked under the headline, height comes from the content again — a card
     stretched to a phone's idea of "the rest of the band" looks broken. */
  .mvr-hero-cards {
    grid-template-rows: auto auto;
    padding: var(--space-8) var(--gutter-page-lg);
    border-left: none !important;
  }
}

/* ────────────────────── product page ────────────────────── */

/* Both layouts live here rather than inline, because the mobile rules below
   have to override them and an inline style always wins. */
.mvr-pdp {
  display: grid;
  /* min() so the track can collapse below 320px rather than forcing the page
     wider than the screen. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-10);
  margin-top: var(--space-7);
  align-items: start;
}

.mvr-pdp-media {
  min-width: 0;
  align-self: start;
  display: grid;
  gap: var(--space-5);
}

/* The image column follows the page on desktop. The offset clears the sticky
   header rather than the old, much taller one. */
@media (min-width: 641px) {
  .mvr-pdp-media { position: sticky; top: 96px; }
}

@media (max-width: 640px) {
  /* Stacked, the trust panel landed between the product image and its name,
     pushing the price and Add to basket off the bottom of the screen.
     display:contents lifts the two cards out of their column so all three
     blocks can be ordered against each other. */
  .mvr-pdp { display: flex; flex-direction: column; gap: var(--space-8); }
  .mvr-pdp-media { display: contents; }
  .mvr-pdp-img { order: 1; }
  .mvr-pdp-buy { order: 2; }
  .mvr-pdp-trust { order: 3; }
}

/* On the narrowest phones "Dysfunction" is a single unbreakable word wider
   than the text column of a picture-and-text tile. Shrinking the display type
   a little is kinder than hyphenating a condition name mid-word. */
@media (max-width: 400px) {
  .mvr-tile-h { font-size: 20px !important; }
}

/* Two columns of patient quotes leave about 110px of text each on a small
   phone, which is neither readable nor narrow enough to fit. */
@media (max-width: 560px) {
  .mvr-quotes { grid-template-columns: 1fr !important; }
}

/* ─────────────────────── trust panels ─────────────────────── */

/* Used at each point in the purchase journey where someone is deciding
   whether to go on: basket, checkout, confirmation, consultation. Every line
   in these panels states something the system actually does or a registration
   the pharmacy actually holds — nothing aspirational. */

.mvr-trust {
  display: grid;
  gap: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--white);
}

.mvr-trust-row { display: flex; gap: var(--space-4); align-items: flex-start; }

.mvr-trust-ico {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  background: var(--green-600);
}

.mvr-trust-t { display: block; font-size: 14px; font-weight: 600; color: var(--navy-900); }
.mvr-trust-d { display: block; font-size: 13px; line-height: 1.55; color: var(--text-muted); margin-top: 2px; }

/* A slimmer horizontal version for places that only need a reminder. */
.mvr-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-6);
}

.mvr-trust-strip .mvr-trust-row { align-items: center; font-size: 13px; color: var(--text-muted); }
.mvr-trust-strip .mvr-trust-ico { margin-top: 0; width: 16px; height: 16px; }

@media (max-width: 640px) {
  .mvr-trust-strip { flex-direction: column; gap: var(--space-4); }
}

/* ──────────────────── overflow backstop ──────────────────── */

/* The causes above are fixed at source; this is the guard that keeps one
   stray element from ever making the whole page scroll sideways again.
   `clip` rather than `hidden` on purpose: hidden turns the element into a
   scroll container, which would break the sticky header. */
html { overflow-x: clip; }
body {
  overflow-x: clip;
  /* A long URL, email address or medicine name should wrap rather than push
     the layout wider than the screen. */
  overflow-wrap: break-word;
}

/* About-us copy in the regulated strip under the hero.
   Typography lives here rather than inline, because an inline
   font-size would beat the mobile rule below and never shrink. */
.mvr-about-strip p { font-size: 17px; line-height: 1.7; text-align: center; }

/* Smaller and left-aligned on phones so three sentences don't read
   as a centred wall of text above the certification logos. */
@media (max-width: 720px) {
  .mvr-about-strip p { font-size: 15px; line-height: 1.65; text-align: left; }
}

/* Product cards become a swipeable row on a phone.
   A column of full-width cards meant scrolling past each one to reach the
   next; six treatments made the treatments page a long scroll with nothing
   to compare. Horizontal snapping puts the next card half in view, which is
   the affordance — no arrows needed, and no JavaScript.

   :has() means a single card stays a normal full-width card rather than
   sitting at 86% of the screen looking like a mistake. Browsers without
   :has() simply keep the existing stacked layout. */
@media (max-width: 720px) {
  .mvr-cards:has(> * + *) {
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the screen edges so a card can sit flush while the row still
       starts at the page gutter. */
    margin-inline: calc(-1 * var(--gutter-page-lg));
    padding-inline: var(--gutter-page-lg);
    scroll-padding-inline: var(--gutter-page-lg);
    padding-bottom: 4px;
  }
  .mvr-cards:has(> * + *)::-webkit-scrollbar { display: none; }
  .mvr-cards:has(> * + *) > * { scroll-snap-align: start; }
}

/* Item 34: the email at the foot of the burger menu. Its own rule because it
   is a mailto rather than an in-app link, so it does not inherit the nav
   item's navigation styling, and it wants the muted treatment the old utility
   row gave it. */
.mvr-menu-mail {
  font-size: 15px;
  color: var(--text-muted);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
  word-break: break-all;
}
.mvr-menu-mail:hover { color: var(--navy-700); }

/* ── landing pages: the "why" list ──
 * The rule between rows is an inline style, which a stylesheet cannot
 * override without !important — the design tool writes everything inline.
 * Dropping it on the last row stops the list ending on a hanging line
 * just above the card's own bottom edge. */
.mvr-lp-whyrow:last-child { border-bottom: 0 !important; }

/* Below the two-column breakpoint the heading, the lead and the button stop
 * being a column of their own, so the gap above the list can come down. */
@media (max-width: 720px) {
  .mvr-lp-why { gap: var(--space-8) !important; }
  .mvr-lp-whyrow { padding: var(--space-6) 0 !important; }
}