/* ==========================================================================
   Bonaviox — product detail page

   Section stack (desktop, 1425px of usable width). Vertical margins between
   the bands collapse exactly as they did in Elementor, so the gaps below are
   max(previous margin-bottom, next margin-top):

     hero      y=   0  h=869   padding 320 / 320, cover background
     claim     y= 969  h=150   margin 100/100, boxed 900
     evidence  y=1219  h=158   margin  50/ 50, boxed 1250, two bordered cards
     media     y=1477  h=417   margin 100/100, boxed 1250, image + copy
     media--r  y=1994  h=625   margin   0/150, boxed 1250, reversed
     tested    y=2769  h=150   margin  50/150, boxed 1250, one wide card
                       page bottom 2919
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------
   Full-bleed: the measured heading boxes span the whole 1425px viewport, so
   the inner keeps its default 100% measure — no --content-width here.
   ------------------------------------------------------------------------ */
.page-bonaviox .hero {
  padding: 320px 0;
  background-image: url('/assets/images/Bonaviox-product-background-image.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-bonaviox .hero__eyebrow {
  color: var(--color-invert);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  text-align: left;
}

.page-bonaviox .hero__title {
  /* Elementor pulled the display type 7px left to optically align the "B". */
  margin: 0 0 0 -7px;
  color: var(--color-invert);
  font-size: 165px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
}

/* --- Pull quote ---------------------------------------------------------- */
.page-bonaviox .claim {
  --content-width: 900px;
  margin: 100px 0;
}

.page-bonaviox .claim__text {
  color: #525A88;          /* one-off in the original design */
  font-size: 50px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

/* --- Two evidence cards --------------------------------------------------
   Both cards are width:50% with an 80px inner margin; the default flex-shrink
   takes 80px off each, landing them at 545px inside the 1250px measure.
   ------------------------------------------------------------------------ */
.page-bonaviox .evidence {
  --content-width: 1250px;
  margin: 50px 0;
}

.page-bonaviox .evidence__row {
  flex-direction: row;
  gap: 0;
}

.page-bonaviox .evidence__card {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 30px;
  border: 1px solid var(--color-secondary);
  border-radius: 40px;
  box-shadow: -6px 6px 28px 1px rgba(0, 0, 0, .25);
}

.page-bonaviox .evidence__card--a { margin-right: 80px; }
.page-bonaviox .evidence__card--b { margin-left: 80px; }

/* --- Image + copy rows --------------------------------------------------- */
.page-bonaviox .media {
  --content-width: 1250px;
  margin: 100px 0;
}

.page-bonaviox .media__row {
  flex-direction: row;
  gap: 0;
}

.page-bonaviox .media__figure {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.page-bonaviox .media__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 40px;
}

.page-bonaviox .media__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  padding-left: 40px;
}

/* Reversed row: image on the right, copy on the left. */
.page-bonaviox .media--reverse { margin: 0 0 150px; }

.page-bonaviox .media--reverse .media__row { flex-direction: row-reverse; }

.page-bonaviox .media--reverse .media__figure { justify-content: center; }

.page-bonaviox .media--reverse .media__body {
  padding-left: 0;
  padding-right: 40px;
}

/* --- Scientifically tested card ------------------------------------------ */
.page-bonaviox .tested {
  --content-width: 1250px;
  margin: 50px 0 150px;
}

.page-bonaviox .tested__row {
  flex-direction: row;
  gap: 0;
}

.page-bonaviox .tested__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 30px;
  border: 1px solid var(--color-secondary);
  border-radius: 40px;
  box-shadow: -6px 6px 28px 1px rgba(0, 0, 0, .25);
  text-align: center;
}

/* --- Copy inside the cards and columns -----------------------------------
   The columns are flex containers, so these margins never collapse into one
   another — a list's 24px bottom margin and the next widget's 10px top margin
   stack to the 34px gap the original measured.
   ------------------------------------------------------------------------ */
.page-bonaviox .subtitle { color: #3FAEC7; }   /* one-off in the original design */

.page-bonaviox .subtitle--spaced { margin-top: 40px; }

.page-bonaviox .body-text { margin-top: 10px; }

.page-bonaviox .list {
  /* GeneratePress list metrics: 1.5em below, 3em of indent. */
  margin: 10px 0 24px 48px;
  padding: 0;
  list-style: disc;
}

/* ==========================================================================
   Laptop — max-width: 1366px
   ========================================================================== */
@media (max-width: 1366px) {
  .page-bonaviox .hero { padding: 280px 0 280px 50px; }
  .page-bonaviox .hero__eyebrow { font-size: 40px; }
  .page-bonaviox .hero__title { font-size: 118px; }

  .page-bonaviox .evidence { --content-width: 1000px; }
  .page-bonaviox .evidence__card--a { margin-right: 40px; }
  .page-bonaviox .evidence__card--b { margin-left: 40px; }

  .page-bonaviox .media { --content-width: 1100px; }

  .page-bonaviox .tested { --content-width: 1000px; }
  .page-bonaviox .tested__card { margin-right: 40px; }
}

/* ==========================================================================
   Tablet extra — max-width: 1200px
   ========================================================================== */
@media (max-width: 1200px) {
  .page-bonaviox .hero__eyebrow { font-size: 36px; }
  .page-bonaviox .hero__title { font-size: 98px; }

  .page-bonaviox .evidence { --content-width: 900px; }
  .page-bonaviox .evidence__card--a { margin-right: 20px; }
  .page-bonaviox .evidence__card--b { margin-left: 20px; }

  .page-bonaviox .media { --content-width: 900px; }

  .page-bonaviox .tested { --content-width: 900px; }
  .page-bonaviox .tested__card { margin-right: 20px; }
}

/* ==========================================================================
   Tablet — max-width: 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  .page-bonaviox .hero { padding: 200px 0 200px 40px; }
  .page-bonaviox .hero__eyebrow { font-size: 32px; }
  .page-bonaviox .hero__title { font-size: 84px; }

  .page-bonaviox .claim { --content-width: 700px; }
  .page-bonaviox .claim__text { font-size: 40px; }

  /* The evidence cards stack from here down. */
  .page-bonaviox .evidence { --content-width: 700px; }
  .page-bonaviox .evidence__row { flex-wrap: wrap; }
  .page-bonaviox .evidence__card { width: 100%; }
  .page-bonaviox .evidence__card--a { margin-right: 0; }
  .page-bonaviox .evidence__card--b { margin: 50px 0 0; }

  .page-bonaviox .media { --content-width: 700px; }
  .page-bonaviox .media--reverse .media__figure { justify-content: flex-start; }

  .page-bonaviox .tested { --content-width: 700px; }
  .page-bonaviox .tested__row { flex-wrap: wrap; }
  .page-bonaviox .tested__card { margin-right: 0; }
}

/* ==========================================================================
   Mobile extra — max-width: 880px
   ========================================================================== */
@media (max-width: 880px) {
  .page-bonaviox .hero__eyebrow { font-size: 28px; }
  .page-bonaviox .hero__title { font-size: 72px; margin-left: -3px; }
}

/* ==========================================================================
   Mobile — max-width: 767px
   ========================================================================== */
@media (max-width: 767px) {
  .page-bonaviox .hero { padding: 150px 0 150px 30px; }
  .page-bonaviox .hero__eyebrow { font-size: 20px; }
  .page-bonaviox .hero__title { font-size: 35px; margin-left: 0; }

  .page-bonaviox .claim { --content-width: 320px; margin: 50px 0; }
  .page-bonaviox .claim__text { font-size: 26px; }

  .page-bonaviox .evidence { --content-width: 300px; margin: 50px 0; }

  /* Columns go full width and wrap: image above, copy below. */
  .page-bonaviox .media { --content-width: 320px; }
  .page-bonaviox .media__row { flex-wrap: wrap; }
  .page-bonaviox .media__figure { width: 100%; }
  .page-bonaviox .media__body { width: 100%; padding: 20px 0 0; }

  /* row-reverse pairs with wrap-reverse, so this row keeps its reading order. */
  .page-bonaviox .media--reverse { margin: 0 0 100px; }
  .page-bonaviox .media--reverse .media__row { flex-wrap: wrap-reverse; }
  .page-bonaviox .media--reverse .media__body { padding: 20px 0 0; }

  .page-bonaviox .tested { --content-width: 300px; margin: 0 0 100px; }
}


/* --- Wide-screen gutter -------------------------------------------------
   Above 1366px these bands have no content-width narrow enough to keep them
   off the screen edge, so they get the same 40px gutter as the header.
   ------------------------------------------------------------------------ */
@media (min-width: 1367px) {
  .page-bonaviox .hero { padding-inline: var(--gutter); }
}

/* The hero had left padding but none on the right, so its text block ran to the
   screen edge below 1367px. */
.page-bonaviox .hero { padding-right: var(--gutter); }

@media (max-width: 767px) {
  .page-bonaviox .hero { padding-right: var(--gutter-mobile); }
}