/* MV2 PAGE CHROME */
/* Breadcrumb and header for ordinary pages. Deliberately quieter than the
   /what-is-monavie-active/ hero it is modeled on: that page is a destination
   someone chose, these are pages people pass through on the way to something
   else, so the band is shorter and the type smaller. */

body.mv2 .mv-pc__crumb{
  /* Geometry MIRRORS the document pages' .mv-XX__inner exactly so the pill
     lines up with the card edge at EVERY width. The old capped width plus
     fluid side padding did not match __inner's flat values: it put the pill
     24px RIGHT of the card at desktop and 8px LEFT of it on a phone.
     The 18px bottom is the gap /shop/ already has, where the nav is a
     direct body child and there is no wrapper at all. */
  max-width:1440px;
  margin:0 auto;
  padding:14px 24px 18px;}

/* The nav carries its own 24px because on /shop/ it stands alone. Inside
   .mv-pc__crumb the wrapper already supplies that inset, so leaving the
   nav's padding in place doubles it. This is the actual alignment bug. */
body.mv2 .mv-pc__crumb .mv-crumb{padding-left:0;padding-right:0;}

body.mv2 .mv-pc__hero{
  background:linear-gradient(150deg,#2A0A4E,#3D1173 55%,#1B0733);
  color:#fff;
  padding:clamp(34px,5vw,62px) 0;
  margin-bottom:clamp(28px,4vw,48px); width:calc(100% - 48px); max-width:1392px; margin-left:auto; margin-right:auto; border-radius:0 0 18px 18px; overflow:hidden;}

body.mv2 .mv-pc__col{
  max-width:1440px;
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,24px);}

body.mv2 .mv-pc__title{
  font-family:var(--mv-font-display,'Barlow Condensed',Arial,sans-serif);
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.06;
  font-weight:700;
  color:#fff;
  margin:0 0 10px;}

body.mv2 .mv-pc__sub{
  font-size:clamp(15px,1.6vw,18px);
  color:rgba(255,255,255,.78);
  margin:0;
  max-width:62ch;}

/* The crumb sits on the page background above the band, so it needs the
   ordinary ink color rather than the white used inside the hero. */
body.mv2 .mv-pc__crumb .mv-crumb{color:var(--mv-ink-2,#4A4A50);}
body.mv2 .mv-pc__crumb .mv-crumb a{color:var(--mv-ink-2,#4A4A50);}
body.mv2 .mv-pc__crumb .mv-crumb a:hover{color:var(--mv-purple,#8300E9);}

@media (max-width:600px){
  body.mv2 .mv-pc__hero{padding:26px 0;margin-bottom:24px;}
  body.mv2 .mv-pc__sub{font-size:15px;}
}

/* ---- document pages ---- */
/* terms-of-service, terms-of-sale, privacy-policy and subscribe-and-save build
   their own head, with the page title and a meta row carrying Effective Date,
   Website and Entity. Rather than adding a second header above it, that block
   IS the band on these pages.

   Styled by their own class names rather than a shared one, because these are
   four independent plugins and giving them a common class would mean editing
   four compliance documents to gain nothing. */
body.mv2 .mv-tos__head,
body.mv2 .mv-pp__head,
body.mv2 .mv-sale__head,
body.mv2 .mv-sas__head{
  background:linear-gradient(150deg,#2A0A4E,#3D1173 55%,#1B0733);
  color:#fff;
  padding:clamp(30px,4.5vw,56px) clamp(20px,4vw,44px);
  border-radius:0;
  margin:0 0 clamp(24px,3.5vw,40px);}

body.mv2 .mv-tos__title,
body.mv2 .mv-pp__title,
body.mv2 .mv-sale__title,
body.mv2 .mv-sas__title{
  font-family:var(--mv-font-display,'Barlow Condensed',Arial,sans-serif);
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.06;font-weight:700;color:#fff;margin:0 0 14px;}

/* the meta row reads as supporting detail, not as body copy */
body.mv2 .mv-tos__meta,
body.mv2 .mv-pp__meta,
body.mv2 .mv-sale__meta,
body.mv2 .mv-sas__meta{
  display:flex;flex-wrap:wrap;gap:8px clamp(20px,3vw,40px);margin:0;}

body.mv2 .mv-tos__metarow,
body.mv2 .mv-pp__metarow,
body.mv2 .mv-sale__metarow,
body.mv2 .mv-sas__metarow{margin:0;}

body.mv2 .mv-tos__metarow dt,
body.mv2 .mv-pp__metarow dt,
body.mv2 .mv-sale__metarow dt,
body.mv2 .mv-sas__metarow dt{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.62);margin:0 0 2px;font-weight:600;}

body.mv2 .mv-tos__metarow dd,
body.mv2 .mv-pp__metarow dd,
body.mv2 .mv-sale__metarow dd,
body.mv2 .mv-sas__metarow dd{
  font-size:.9375rem;color:#fff;margin:0;}

@media (max-width:600px){
  body.mv2 .mv-tos__head,
  body.mv2 .mv-pp__head,
  body.mv2 .mv-sale__head,
  body.mv2 .mv-sas__head{padding:24px 18px;}
  body.mv2 .mv-tos__meta,
  body.mv2 .mv-pp__meta,
  body.mv2 .mv-sale__meta,
  body.mv2 .mv-sas__meta{gap:10px 22px;}
}


/* The nav is hidden at 600 and below, and on the account pages from 981 up.
   The wrapper is a SEPARATE element and survived both, leaving an empty band:
   14px before this session and 32px after the 18px bottom gap was added.
   Hide the wrapper wherever the nav itself is hidden so nothing reserves
   space for something that is never drawn. */
@media (max-width:600px){
  body.mv2 .mv-pc__crumb{display:none;}
}
@media (min-width:981px){
  body.mv2.woocommerce-account .mv-pc__crumb{display:none;}
}