/* MP Site Code — snippet #7503709. Edited in wp-admin; do not edit this file. */
/* =====================================================================
   MENSTRUAL PORTAL — Product Review Standards
   ===================================================================== */

.mp-prs{
  --berry:#8E2C4E; --berry-hover:#7A2542;
  --black:#000; --ink:#1A1A1A; --muted:#645A60;
  --line:#F1E0E6; --base-wash:#FBF1F3; --light-pink:#F8D5DF;
  --shadow-md:0 14px 40px rgba(0,0,0,.09);
  --r-lg:24px; --maxw:1120px;

  line-height:1.68;
  color:var(--ink);
  margin-block-start:0 !important;   /* kill the theme's flow spacing on the wrapper */
}
.mp-prs *{ box-sizing:border-box; }
.mp-prs > *:first-child{ margin-block-start:0; }
main:has(.mp-prs) .wp-block-html:first-child{ margin-block-start:0; }

/* Typography — scoped, so it never touches other templates.
   Font family intentionally left to the theme. */
.mp-prs h1,.mp-prs h2,.mp-prs h3,.mp-prs h4{
  color:var(--black); line-height:1.2; letter-spacing:-.02em; font-weight:800; margin-top:0;
}
.mp-prs a{ color:var(--berry); }

/* Layout helpers */
.mp-prs .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.mp-prs .section{ padding:80px 0; }
.mp-prs .section.tint{ background:var(--base-wash); }

.mp-prs .sec-head{ max-width:700px; margin:0 auto 40px; text-align:center; }
.mp-prs .sec-head h2{ font-size:clamp(1.8rem,3.6vw,2.4rem); margin-bottom:12px; }
.mp-prs .sec-head p{ color:var(--black); }   /* intro copy in black, theme size */

.mp-prs .eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--berry); display:inline-flex; align-items:center; gap:8px; margin-bottom:10px;
}
.mp-prs .eyebrow::before{
  content:""; width:20px; height:2px; background:var(--berry); border-radius:2px;
}

/* ===================== HERO ===================== */
.mp-prs .hero{ padding:60px 0 10px; position:relative; overflow:hidden; }
.mp-prs .hero::before{
  content:""; position:absolute; width:520px; height:520px;
  background:radial-gradient(circle,var(--light-pink) 0%,transparent 70%);
  top:-220px; right:-160px; opacity:.7; z-index:0;
}
.mp-prs .hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center;
}
.mp-prs .hero h1{ font-size:clamp(2.2rem,4.4vw,3.2rem); margin-bottom:18px; }
.mp-prs .hero p.lead{ color:var(--black); max-width:560px; }   /* black, theme size */
.mp-prs .hero .meta-line{ font-size:.82rem; color:var(--muted); margin-top:16px; }
.mp-prs .hero-art{ display:flex; justify-content:center; margin:0; padding:0; }
.mp-prs .hero-art img{ width:100%; max-width:420px; height:auto; display:block; margin:0; padding:0; }

/* ===================== VETTING STEPPER (scroll carousel) ===================== */
.mp-prs .stepper-nav{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:36px;
}
.mp-prs .step-tab{
  display:flex; align-items:center; gap:10px;
  padding:11px 18px 11px 12px; border-radius:100px;
  border:1.5px solid var(--line); background:#fff; cursor:pointer;
  transition:.22s; font-family:inherit; user-select:none;
  -webkit-appearance:none; appearance:none;
}
.mp-prs .step-tab .num{
  width:26px; height:26px; border-radius:50%;
  background:var(--base-wash); color:var(--berry); font-weight:800; font-size:.78rem;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:.22s;
}
.mp-prs .step-tab .lbl{ font-size:.86rem; font-weight:700; color:var(--ink); }
.mp-prs .step-tab:hover{ border-color:var(--berry); }
.mp-prs .step-tab:focus-visible{ outline:3px solid var(--berry); outline-offset:2px; }

/* Active tab (class toggled by JS as the track scrolls) */
.mp-prs .step-tab.active{ background:var(--berry); border-color:var(--berry); }
.mp-prs .step-tab.active .num{ background:#fff; color:var(--berry); }
.mp-prs .step-tab.active .lbl{ color:#fff; }

/* Panels: a horizontal scroll-snap track. One panel fills the view;
   swipe / trackpad-scroll moves between them. All panels are rendered. */
.mp-prs .panels{
  position:relative;
  display:flex; gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.mp-prs .panels::-webkit-scrollbar{ display:none; }

.mp-prs .step-panel{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 44px;
}
.mp-prs .step-panel .art{ display:flex; justify-content:center; margin:0; padding:0; }
.mp-prs .step-panel .art img{ width:100%; max-width:260px; height:auto; display:block; margin:0; padding:0; }
.mp-prs .step-panel h3{ font-size:1.4rem; margin-bottom:12px; }
.mp-prs .step-panel p{ color:var(--muted); font-size:1rem; }

.mp-prs .step-progress{ display:flex; gap:6px; margin-top:28px; justify-content:center; }
.mp-prs .step-progress span{ width:34px; height:5px; border-radius:4px; background:var(--line); transition:.25s; }
.mp-prs .step-progress span.active{ background:var(--berry); width:50px; }

/* ===================== EMPOWERING CHOICES ===================== */
.mp-prs .choices-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.mp-prs .choices-copy h2{ font-size:clamp(1.8rem,3.6vw,2.4rem); margin-bottom:12px; }
.mp-prs .choices-copy p{ color:var(--black); margin-bottom:16px; }
.mp-prs .choices-art{ display:flex; justify-content:center; margin:0; padding:0; }
.mp-prs .choices-art img{ width:100%; max-width:420px; height:auto; display:block; margin:0; padding:0; }

/* ===================== AFFILIATE PARTNERSHIPS ===================== */
.mp-prs .aff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.mp-prs .aff-copy h2{ font-size:clamp(1.8rem,3.6vw,2.4rem); margin-bottom:12px; }
.mp-prs .aff-copy p{ color:var(--black); margin-bottom:16px; }
.mp-prs .aff-art{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.mp-prs .scale-img-frame{ width:100%; max-width:400px; margin:0; padding:0; }
.mp-prs .scale-img-frame img{ width:100%; height:auto; display:block; margin:0; padding:0; }
.mp-prs .scale-caption{ text-align:center; font-size:.82rem; color:var(--muted); margin:0; }

/* ===================== RESPONSIVE ===================== */
@media(max-width:900px){
  .mp-prs .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .mp-prs .hero .lead{ margin:0 auto; }
  .mp-prs .step-panel{ grid-template-columns:1fr; text-align:center; }
  .mp-prs .step-panel .art{ order:-1; }
  .mp-prs .choices-grid,.mp-prs .aff-grid{ grid-template-columns:1fr; }
  .mp-prs .choices-art{ order:-1; }        /* Choices: image above text */
  /* Affiliate: image stays after the text (source order), caption below it */
}

@media(max-width:640px){
  .mp-prs .wrap{ padding:0 18px; }
  .mp-prs .section{ padding:56px 0; }
  .mp-prs .step-panel{ padding:12px 26px; row-gap:0; }
  .mp-prs .step-tab .lbl{ display:none; }
  .mp-prs .step-tab{ padding:10px; }

  /* phone only: heading, then image, then text */
  .mp-prs .step-text{ display:contents; }
  .mp-prs .step-panel .art{ order:1; margin:0 0 8px; }
  .mp-prs .step-text h3{ order:2; margin-bottom:4px; }
  .mp-prs .step-text p{ order:3; margin-top:0; }

  /* row-gap:0 here prevents the display:contents children from inheriting
     the grid gap — the same fix we applied on the About page. */
  .mp-prs .choices-grid,.mp-prs .aff-grid{ row-gap:0; }
  .mp-prs .choices-copy,.mp-prs .aff-copy{ display:contents; }
  .mp-prs .choices-copy .eyebrow,.mp-prs .aff-copy .eyebrow{ order:1; }
  .mp-prs .choices-copy h2,.mp-prs .aff-copy h2{ order:1; }
  .mp-prs .choices-art,.mp-prs .aff-art{ margin:16px 0; }
  .mp-prs .choices-art{ order:2; }         /* Choices: image between heading and text */
  .mp-prs .choices-copy p,.mp-prs .aff-copy p{ order:3; text-align:left; }
  .mp-prs .aff-art{ order:4; }             /* Affiliate: image after the text */
}

@media(prefers-reduced-motion:reduce){
  .mp-prs *,.mp-prs *::before{ transition:none !important; animation:none !important; }
  .mp-prs .panels{ scroll-behavior:auto; }
}