/* ============================================================
   BrainHeartHealth — Guide Page Styles  v2.27 (Mayo-inspired)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --bhh-blue:       #1D49A7;
  --bhh-blue-dark:  #142f6e;
  --bhh-blue-light: #e8f0fb;
  --bhh-red:        #A72630;
  --bhh-text:       #1a1a1a;
  --bhh-muted:      #666666;
  --bhh-light:      #f5f5f5;
  --bhh-border:     #e8e8e8;
  --bhh-white:      #ffffff;
  --content-max:    760px;
  --page-max:       980px;
  --wide-max:       1100px;
  --nav-h:          48px;
  --toc-h:          52px;
  /* Warm CTA color — used for primary action buttons and highlights */
  --cta:            #e07b00;
  --cta-dark:       #b56200;
  --cta-tint:       #fff4e6;
  /* Per-section accent — overridden per page-id below */
  --accent:         #1D49A7;
  --accent-tint:    #e8f0fb;
}

/* ── Fix Divi's overflow-y:hidden on #page-container which breaks position:sticky ── */
body.page-template-page-guide-divi5 #page-container,
body.page-template-page-guide-divi5-fr #page-container,
body.page-template-page-guide #page-container,
body.page-template-page-connect-services #page-container {
  overflow-y: visible !important;
}

/* ── Per-section accent colors ── */
body.page-id-596 { --accent: #1D49A7; --accent-tint: #e8f0fb; } /* Introduction */
body.page-id-491 { --accent: #2e7d32; --accent-tint: #e8f5e9; } /* Daily Wellness */
body.page-id-4506 { --accent: #2e7d32; --accent-tint: #e8f5e9; } /* Daily Wellness Divi 5 test */
body.page-id-4507 { --accent: #0277bd; --accent-tint: #e3f2fd; } /* Exercise Divi 5 test */
body.page-id-472 { --accent: #e65100; --accent-tint: #fff3e0; } /* Nutrition */
body.page-id-3984 { --accent: #e65100; --accent-tint: #fff3e0; } /* Nutrition Divi Draft */
body.page-id-4499 { --accent: #e65100; --accent-tint: #fff3e0; } /* Nutrition Divi 5 test */
body.page-id-679 { --accent: #0277bd; --accent-tint: #e1f5fe; } /* Exercise */
body.page-id-482  { --accent: #6a1b9a; --accent-tint: #f3e5f5; } /* Mental Health */
body.page-id-4523 { --accent: #6a1b9a; --accent-tint: #f3e5f5; } /* Mental Health Divi 5 test */
body.page-id-4524 { --accent: #6a1b9a; --accent-tint: #f3e5f5; } /* Santé mentale Divi 5 test */
body.page-id-486 { --accent: #c62828; --accent-tint: #fce4ec; } /* Social Support */
body.page-id-701 { --accent: #1D49A7; --accent-tint: #e8f0fb; } /* FR Introduction */
body.page-id-694 { --accent: #2e7d32; --accent-tint: #e8f5e9; } /* FR Bien-être quotidien */
body.page-id-690 { --accent: #e65100; --accent-tint: #fff3e0; } /* FR Alimentation */
body.page-id-691 { --accent: #0277bd; --accent-tint: #e1f5fe; } /* FR Exercice */
body.page-id-692 { --accent: #6a1b9a; --accent-tint: #f3e5f5; } /* FR Santé mentale */
body.page-id-693 { --accent: #c62828; --accent-tint: #fce4ec; } /* FR Soutien social */
body.page-id-4530 { --accent: #c62828; --accent-tint: #fce4ec; } /* Social Support Divi 5 test */
body.page-id-4531 { --accent: #c62828; --accent-tint: #fce4ec; } /* Soutien social Divi 5 test */
body.page-id-4532 { --accent: #1D49A7; --accent-tint: #e8f0fb; } /* Introduction EN */
body.page-id-4533 { --accent: #1D49A7; --accent-tint: #e8f0fb; } /* Introduction FR */
body.page-id-4524 { --accent: #6a1b9a; --accent-tint: #f3e5f5; } /* Mental Health FR */
body.page-id-4510 { --accent: #0277bd; --accent-tint: #e1f5fe; } /* Exercise FR */
body.page-id-4511 { --accent: #e65100; --accent-tint: #fff3e0; } /* Nutrition FR */
body.page-id-4605 { --accent: #e65100; --accent-tint: #fff3e0; } /* Nutrition FR rebuild draft */
body.page-id-4512 { --accent: #2e7d32; --accent-tint: #e8f5e9; } /* Daily Wellness FR */

/* ── Divi 5 guide pages — grid with sticky sidebar matching original layout ── */
/* Hero inner: override max-width so it fills the hero like on Divi 4 pages */
.page-template-page-guide-divi5 .smg-hero-inner,
.page-template-page-guide-divi5-fr .smg-hero-inner {
  max-width: 100%;
  margin: 0;
}
.page-template-page-guide-divi5 #smg-main,
.page-template-page-guide-divi5-fr #smg-main {
  display: grid;
  grid-template-columns: 1fr 256px;
  column-gap: 40px;
  align-items: start;
  padding-left: 0;
  padding-right: 0;
  max-width: none !important;
  margin-left: 40px !important;
  margin-right: 40px !important;
}
.page-template-page-guide-divi5 #smg-main-body,
.page-template-page-guide-divi5-fr #smg-main-body {
  min-width: 0;
  padding-top: 40px;
}

.page-template-page-guide #smg-main-body {
  padding-top: 40px;
}
/* No sidebar (e.g. Introduction, Divi 5 content): span full grid width */
.page-template-page-guide-divi5 #smg-main-body:only-child,
.page-template-page-guide-divi5-fr #smg-main-body:only-child {
  grid-column: 1 / -1;
}
/* Divi 4 section default white bg bleeds through page gradient — make transparent */
.page-template-page-guide-divi5 #smg-main-body .et_pb_section,
.page-template-page-guide-divi5-fr #smg-main-body .et_pb_section {
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Divi 4 content centering: reset to fill the guide column */
.page-template-page-guide-divi5 #smg-main-body .et_builder_inner_content,
.page-template-page-guide-divi5-fr #smg-main-body .et_builder_inner_content {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.page-template-page-guide-divi5 #smg-main-body .et_pb_row,
.page-template-page-guide-divi5-fr #smg-main-body .et_pb_row {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Remove Divi's default top padding on the first section — closes gap below hero */
.page-template-page-guide-divi5 #smg-main-body .et_pb_section:first-of-type,
.page-template-page-guide-divi5-fr #smg-main-body .et_pb_section:first-of-type {
  padding-top: 0 !important;
}
.page-template-page-guide-divi5 #smg-main-body .et_pb_section:first-of-type .et_pb_row:first-of-type,
.page-template-page-guide-divi5-fr #smg-main-body .et_pb_section:first-of-type .et_pb_row:first-of-type {
  padding-top: 0 !important;
}
/* Remove top margin from first heading in Divi 5 native content (bare H2/H3 directly in main body) */
#smg-main-body > h2:first-of-type,
#smg-main-body > h3:first-of-type {
  margin-top: 0 !important;
}
/* Suppress old inline vtoc from Divi content — replaced by client-side #smg-sidebar on all guide templates */
.page-template-page-guide-divi5 #smg-vtoc,
.page-template-page-guide-divi5-fr #smg-vtoc,
.page-template-page-guide #smg-vtoc,
.page-template-page-connect-services #smg-vtoc { display: none !important; }


/* Shared sidebar styles — client-side TOC sidebar appended to #smg-main by JS */
.page-template-page-guide-divi5 #smg-sidebar,
.page-template-page-guide-divi5-fr #smg-sidebar,
.page-template-page-guide #smg-sidebar,
.page-template-page-connect-services #smg-sidebar {
  position: sticky;
  top: 120px;
  border-left: 3px solid rgba(0, 0, 0, 0.06);
  padding: 4px 0 4px 40px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
#smg-sidebar a {
  display: block;
  color: #2ea3f2;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  padding: 10px 0;
  text-decoration: none;
}
#smg-sidebar a:hover, #smg-sidebar a.smg-sidebar-active { color: var(--accent, #e65100); }
#smg-sidebar a.smg-sidebar-first { font-weight: 500; }

/* Show sidebar on divi5 templates */
.page-template-page-guide-divi5 #smg-sidebar,
.page-template-page-guide-divi5-fr #smg-sidebar {
  display: block;
  grid-column: 2;
  grid-row: 1;
}
.page-template-page-guide #smg-sidebar,
.page-template-page-connect-services #smg-sidebar {
  grid-row: 1;
}

/* ── page-guide template (for-patients, for-caregivers) — grid with sidebar ── */
.page-template-page-guide #smg-main,
.page-template-page-connect-services #smg-main {
  display: grid;
  grid-template-columns: 1fr 256px;
  column-gap: 40px;
  align-items: start;
  max-width: none !important;
  margin-left: 40px !important;
  margin-right: 40px !important;
}
.page-template-page-guide #smg-main-body,
.page-template-page-connect-services #smg-main-body {
  min-width: 0;
}
.page-template-page-guide #smg-main-body:only-child,
.page-template-page-connect-services #smg-main-body:only-child {
  grid-column: 1 / -1;
}
.page-template-page-guide #smg-sidebar,
.page-template-page-connect-services #smg-sidebar {
  display: block;
  grid-column: 2;
}
/* Hide old horizontal TOC bar — replaced by sidebar */
.page-template-page-guide #smg-toc,
.page-template-page-connect-services #smg-toc { display: none !important; }
@media (max-width: 980px) {
  .page-template-page-guide-divi5 #smg-main,
  .page-template-page-guide-divi5-fr #smg-main,
  .page-template-page-guide #smg-main,
  .page-template-page-connect-services #smg-main {
    display: block;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .page-template-page-guide #smg-sidebar,
  .page-template-page-connect-services #smg-sidebar { display: none !important; }
  /* Kill Divi 4 row auto-centering margins inside the guide body */
  .page-template-page-guide-divi5 #smg-main-body .et_pb_row,
  .page-template-page-guide-divi5-fr #smg-main-body .et_pb_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .page-template-page-guide-divi5 #smg-sidebar,
  .page-template-page-guide-divi5-fr #smg-sidebar { display: none !important; }
  /* Kill Divi 4 row auto-centering margins on page-guide */
  .page-template-page-guide #smg-main-body .et_pb_row {
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    max-width: 100% !important; width: 100% !important;
  }
}
/* ── Pointer icon replacements — CSS content swap, no Divi edits ── */
/* MH gratitude stars → right-pointing arrow (purple accent) */
body.page-id-4523 #smg-main-body img[src*="gratitude-star"],
body.page-id-4524 #smg-main-body img[src*="gratitude-star"],
body.page-id-482 #smg-main-body img[src*="gratitude-star"],
body.page-id-692 #smg-main-body img[src*="gratitude-star"] {
  content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><polygon points='4,3 17,10 4,17' fill='%236a1b9a'/></svg>");
  width: 22px !important;
  height: 22px !important;
}

/* ── Divi 5 mobile: full stacking layout — floats, flex rows, image sizing ── */
@media (max-width: 600px) {
  /* Limit image/icon sizes on mobile — all guide and content pages */
  .page-template-page-guide #smg-main-body img,
  .page-template-page-guide-divi5 #smg-main-body img,
  .page-template-page-guide-divi5-fr #smg-main-body img,
  .page-template-page-connect-services #smg-main-body img,
  .page-template-page-caregivers #smg-main-body img,
  .page-template-default #smg-main-body img {
    max-width: 120px !important;
    height: auto !important;
  }

  /* 0. Absolute-positioned image sidebars (position:relative + padding-right:Npx trick).
     On desktop the padding reserves space for an abs-pos image; on mobile it crushes text.
     Reset to normal flow and let the image stack below. */
  #smg-main-body [style*="padding-right:150px"],
  #smg-main-body [style*="padding-right: 150px"] {
    padding-right: 0 !important;
    position: static !important;
  }
  #smg-main-body [style*="padding-right:150px"] > img[style*="position:absolute"],
  #smg-main-body [style*="padding-right: 150px"] > img[style*="position:absolute"] {
    position: static !important;
    display: block !important;
    width: 120px !important;
    margin: 12px auto 0 !important;
    transform: none !important;
  }

  /* 1. Remove float — stack floated containers below text */
  #smg-main-body [style*="float: right"],
  #smg-main-body [style*="float:right"],
  #smg-main-body [style*="float: left"],
  #smg-main-body [style*="float:left"] {
    float: none !important;
    display: block !important;
    margin: 0 auto 12px !important;
    width: auto !important;
  }

  /* 2. Wrap ALL inline flex containers */
  #smg-main-body [style*="display:flex"],
  #smg-main-body [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  /* 3. Fixed-width flex image containers → own line, centered.
     width:100% (not max-width:240px) ensures flex-basis:100% isn't capped,
     so heading+image can't share a row even when heading is narrow.
     The image inside is still limited to 240px by rule #6.
     :not(img)            — skip img elements directly
     :not(a)              — skip circle nav links (width+height+border-radius:50% → would go oval)
     :not([style*="border:none"]) — skip small heading icon wrappers (60–120px, have border:none)
                           Large image wrappers (240px+) do not have border:none, so still caught. */
  #smg-main-body [style*="flex:0 0"]:not(img):not(a),
  #smg-main-body [style*="flex: 0 0"]:not(img):not(a),
  #smg-main-body [style*="flex-shrink:0"][style*="width:"]:not(img):not(a):not([style*="border:none"]) {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
  }

  /* 3b. Allow flex containers to wrap — REQUIRED so that when rule #3 sets
     flex-basis:100% on an image wrapper, the sibling flex:1 text div wraps to
     the next row instead of being compressed to 0px and going invisible. */
  #smg-main-body [style*="display:flex"] {
    flex-wrap: wrap !important;
  }

  /* 3c. Center section-nav circles when they wrap to their own row */
  #smg-main-body a[style*="border-radius:50%"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 4. Flex card siblings with a background colour → full-width so they stack
     (targets WHITS cards, Vitamins callouts, etc. — not plain text flex:1 items) */
  #smg-main-body [style*="flex:1"][style*="background"],
  #smg-main-body [style*="flex: 1"][style*="background"] {
    min-width: 100% !important;
  }

  /* 5. CSS grid layouts (e.g. 3-col SUN/BRIGHT/PEACEFUL) → single column */
  #smg-main-body [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* 6. Cap all images to a readable mobile size and center them */
  #smg-main-body img {
    max-width: 240px !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 7. Center image module containers */
  #smg-main-body .et_pb_image_container {
    text-align: center !important;
  }

  /* 8. Restore h3 icon heights — small inline icons, not decorative images.
     Covers both Divi 4 (.et_pb_text_inner) and Divi 5 (direct h3) markup.
     display:inline-block + margin:0 reverses the block-centering from rule 6. */
  #smg-main-body .et_pb_text_inner h3 img,
  #smg-main-body h3 img {
    height: 55px !important;
    width: auto !important;
    max-width: none !important;
    display: inline-block !important;
    margin: 0 !important;
  }

  /* 9. Bullet-icon flex rows (img directly inside flex container with flex:0 0).
     These are icon+text rows (e.g. gratitude stars). Two issues from rules #2 and #6:
     a) flex-wrap:wrap + span's max-content width > container → span wraps to next row
     b) margin:auto on the img absorbs free space, centering the icon and ejecting the text.
     Fix: cancel wrapping for these rows and reset flex-basis/width on the icon to undo
     rule #3. Both space variants (flex:0 0 and flex: 0 0) must be covered. */
  #smg-main-body [style*="display:flex"]:has(> img[style*="flex:0 0"]),
  #smg-main-body [style*="display: flex"]:has(> img[style*="flex:0 0"]),
  #smg-main-body [style*="display:flex"]:has(> img[style*="flex: 0 0"]),
  #smg-main-body [style*="display: flex"]:has(> img[style*="flex: 0 0"]) {
    flex-wrap: nowrap !important;
  }
  #smg-main-body [style*="display:flex"] > img[style*="flex:0 0"],
  #smg-main-body [style*="display: flex"] > img[style*="flex:0 0"],
  #smg-main-body [style*="display:flex"] > img[style*="flex: 0 0"],
  #smg-main-body [style*="display: flex"] > img[style*="flex: 0 0"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    width: auto !important;
    max-width: 30px !important;
  }
  /* 9b. DW smoking-outcome bullet rows — img uses flex-shrink:0 (not flex:0 0).
     Two fixes needed: (a) cancel flex-wrap:wrap from rule #2 on the container,
     (b) reset margin:auto from rule #6 on the img so it stays flush left.
     Scoped to page IDs 4506 (DW EN) and 4512 (DW FR) only. */
  body.page-id-4506 #smg-main-body [style*="display:flex"]:has(> img[style*="flex-shrink:0"]),
  body.page-id-4506 #smg-main-body [style*="display: flex"]:has(> img[style*="flex-shrink:0"]),
  body.page-id-4512 #smg-main-body [style*="display:flex"]:has(> img[style*="flex-shrink:0"]),
  body.page-id-4512 #smg-main-body [style*="display: flex"]:has(> img[style*="flex-shrink:0"]) {
    flex-wrap: nowrap !important;
  }
  body.page-id-4506 #smg-main-body [style*="display:flex"] > img[style*="flex-shrink:0"],
  body.page-id-4506 #smg-main-body [style*="display: flex"] > img[style*="flex-shrink:0"],
  body.page-id-4512 #smg-main-body [style*="display:flex"] > img[style*="flex-shrink:0"],
  body.page-id-4512 #smg-main-body [style*="display: flex"] > img[style*="flex-shrink:0"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Hide <br> tags that are direct flex children — these appear as invisible flex items
     in bullet-icon rows (e.g. gratitude stars), misaligning the icon/text pair. */
  #smg-main-body [style*="display: flex"][style*="align-items: flex-start"] > br,
  #smg-main-body [style*="display:flex"][style*="align-items:flex-start"] > br {
    display: none !important;
  }

  /* 10. Colored callout boxes (background + border-radius + align-items:center no-space
     variant — Divi-generated) — keep icon+text in a horizontal flex row on mobile.
     Rule #3 forces flex-shrink:0 icon containers to full-width, stacking icon above text.
     Covers all pages/radius values. Tip boxes use align-items: center (with space) and
     are intentionally excluded — they stack fine once images load via lazy-load fix. */
  #smg-main-body div[style*="background:"][style*="border-radius:"][style*="align-items:center"] {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  #smg-main-body div[style*="background:"][style*="border-radius:"][style*="align-items:center"] > div[style*="flex-shrink:0"] {
    flex-basis: auto !important;
    width: auto !important;
    max-width: 80px !important;
  }
  #smg-main-body div[style*="background:"][style*="border-radius:"][style*="align-items:center"] > div[style*="flex-shrink:0"] img {
    max-width: 60px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
  /* Fix column-count: 2 bullet lists inside Tip boxes — too cramped on mobile */
  #smg-main-body ul[style*="column-count: 2"],
  #smg-main-body ul[style*="column-count:2"] {
    column-count: 1 !important;
  }
}

/* ── Divi 5 — remove default 760px content max-width on block elements ── */
.page-template-page-guide-divi5 #smg-main-body h1,
.page-template-page-guide-divi5 #smg-main-body h2,
.page-template-page-guide-divi5 #smg-main-body h3,
.page-template-page-guide-divi5 #smg-main-body h4,
.page-template-page-guide-divi5 #smg-main-body p,
.page-template-page-guide-divi5 #smg-main-body ul,
.page-template-page-guide-divi5 #smg-main-body ol,
.page-template-page-guide-divi5-fr #smg-main-body h1,
.page-template-page-guide-divi5-fr #smg-main-body h2,
.page-template-page-guide-divi5-fr #smg-main-body h3,
.page-template-page-guide-divi5-fr #smg-main-body h4,
.page-template-page-guide-divi5-fr #smg-main-body p,
.page-template-page-guide-divi5-fr #smg-main-body ul,
.page-template-page-guide-divi5-fr #smg-main-body ol {
  max-width: none !important;
}

/* ── Divi 5 — restore inline image sizes (Divi overrides height with auto !important) ── */
/* Covers Divi 4 (.et_pb_text_inner) and Divi 5 (direct h3 in #smg-main-body) icon images */
#smg-main .et_pb_text_inner h3 img,
#smg-main-body h3 img { height: 55px !important; width: auto !important; flex-shrink: 0; }

/* ── Divi 5 flex layout — normalize to match Divi 4 block layout inside guide pages ── */
#smg-main .et_flex_section {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#smg-main .et_flex_row {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
#smg-main .et_flex_column {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#smg-main .et_flex_module {
  max-width: 100% !important;
  width: 100% !important;
}

/* ── For Patients (ID 437): grey background matching caregivers / CTS ── */
body.page-id-437 {
  background-color: var(--bhh-light) !important;
}
body.page-id-437 .et_pb_section,
body.page-id-437 .et_pb_section_inner,
body.page-id-437 .et_pb_row,
body.page-id-437 .et_pb_column,
body.page-id-437 .et_pb_column_inner,
body.page-id-437 .et_pb_with_border {
  background-color: transparent !important;
}
body.page-id-437 #smg-nav,
body.page-id-437 .smg-nav-spacer {
  display: none !important;
}

/* ── For Caregivers (ID 706): hide SMG chrome (nav, bottom nav, footer) ── */
body.page-id-706 #smg-nav,
body.page-id-706 .smg-nav-spacer,
body.page-id-706 #smg-bottom-nav,
body.page-id-706 .smg-footer {
  display: none !important;
}

/* ── For Caregivers: cap QR code to scannable but not oversized ── */
body.page-id-706 img[src*="qrcode"] {
  max-width: 200px !important;
  display: block;
  margin: 0 auto;
}

/* ── Force full-width ── */
body.page-template-page-guide #page-container,
body.page-template-page-guide #et-boc,
body.page-template-page-guide #et-main-area,
body.page-template-page-guide .smg-page {
  width: 100% !important; max-width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
  box-sizing: border-box;
}

/* ── Guide nav bar ── */
.smg-nav-spacer { height: var(--nav-h); }
#smg-nav {
  position: fixed !important; top: 0; left: 0; right: 0;
  z-index: 999; background: var(--bhh-white);
  border-bottom: 1px solid var(--bhh-border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow-x: auto; scrollbar-width: none;
}
#smg-nav::-webkit-scrollbar { display: none; }
#smg-nav-inner {
  display: flex; align-items: stretch;
  max-width: var(--page-max); margin: 0 auto; padding: 0 24px;
}
#smg-nav a {
  display: inline-flex; align-items: center;
  height: var(--nav-h); padding: 0 16px;
  font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--bhh-muted); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
#smg-nav a:hover { color: var(--bhh-blue); }
#smg-nav a.active { color: var(--bhh-blue); border-bottom-color: var(--bhh-blue); }
.smg-nav-lang {
  flex: 1; display: flex; align-items: center; justify-content: flex-end;
}
#smg-nav a.smg-lang-switch {
  flex-shrink: 0;
  height: 28px; padding: 0 13px; align-self: center;
  border: 1.5px solid var(--bhh-blue); border-bottom: 1.5px solid var(--bhh-blue) !important;
  border-radius: 50px; font-size: 14px; font-weight: 700;
  color: var(--bhh-blue) !important; letter-spacing: .5px;
  transition: background .15s, color .15s;
}
#smg-nav a.smg-lang-switch:hover { background: var(--bhh-blue); color: #fff !important; }

/* ── Nav logo — show only "Self-Management Guide", not the brand name ── */
.smg-nav-logo {
  display: inline-flex; align-items: center;
  height: var(--nav-h); padding: 0 16px 0 4px;
  text-decoration: none; white-space: nowrap;
  letter-spacing: -.01em;
}
/* Hide "Brain♥Heart·Health" — main header already shows it */
.smg-logo-line1 { display: none !important; }
.smg-logo-subtitle {
  font-family: 'Work Sans', system-ui, sans-serif; font-size: 13px; font-weight: 700;
  color: var(--bhh-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0;
}
.smg-logo-wordmark {
  display: inline-flex; flex-direction: column; justify-content: center; line-height: 1;
}
.smg-logo-line1 {
  display: inline-flex; align-items: center;
}
.smg-logo-brain {
  font-family: 'Lora', Georgia, serif; font-size: 17px; font-weight: 700;
  color: var(--bhh-blue);
}
.smg-logo-heart {
  font-size: 15px; color: #c62828; margin: 0 1px;
  line-height: 1;
}
.smg-logo-health {
  font-family: 'Lora', Georgia, serif; font-size: 17px; font-weight: 700;
  color: var(--bhh-blue);
}
.smg-logo-dot {
  color: var(--bhh-muted); font-weight: 400; margin: 0 1px;
}
.smg-logo-subtitle {
  font-family: 'Work Sans', system-ui, sans-serif; font-size: 11px; font-weight: 600;
  color: var(--bhh-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px;
}
.smg-nav-divider {
  width: 1px; height: 20px; background: var(--bhh-border);
  flex-shrink: 0; margin-right: 4px;
}

/* ── TOC bar ── */
#smg-toc {
  /* In-flow by default; JS adds .is-fixed when scrolled past */
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 8px 0 0;
  z-index: 998;
}
#smg-toc.is-fixed {
  position: fixed;
  left: 0; right: 0;
  width: 100%; max-width: 100%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bhh-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 8px 0;
}
#smg-toc.is-fixed #smg-toc-inner {
  max-width: var(--page-max);
  margin: 0 auto;
}
#smg-toc-inner {
  width: 100%; padding: 0 16px;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
}
#smg-toc-inner::-webkit-scrollbar { display: none; }
#smg-toc .toc-label {
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bhh-muted); margin-right: 4px; white-space: nowrap;
}
#smg-toc a {
  display: inline-block; padding: 5px 14px; border-radius: 20px;
  font-family: 'Work Sans', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--bhh-blue); background: var(--bhh-white);
  border: 1px solid var(--bhh-border); text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
#smg-toc a:hover { background: var(--cta-tint); color: var(--cta); border-color: var(--cta); }

/* ── Vertical TOC — hide colored dot circles, keep text links ── */
.smg-vtoc-num { display: none !important; }

/* ── Section summary pill links — force square so border-radius:50% = circle ── */
a[href^="#"][style*="border-radius:50%"],
a[href^="#"][style*="border-radius: 50%"] {
  height: 190px !important;
  min-height: 190px !important;
}
@media (max-width: 768px) {
  a[href^="#"][style*="border-radius:50%"],
  a[href^="#"][style*="border-radius: 50%"] {
    width: 80px !important; height: 80px !important;
    min-height: 80px !important; flex: 0 0 80px !important;
    font-size: 0.72em !important;
  }
  /* Fix <p> wrappers around pills — make them transparent to flex layout */
  p:has(> a[href^="#"][style*="border-radius:50%"]),
  p:has(> a[href^="#"][style*="border-radius: 50%"]) {
    display: contents !important;
    margin: 0 !important; padding: 0 !important;
  }
}

/* ── Hero ── */
.smg-hero {
  background: var(--accent);
  padding: 56px 24px 52px;
  min-height: 296px;
  width: 100vw; position: relative; left: 50%; margin-left: -50vw; box-sizing: border-box;
}
.smg-hero-inner { max-width: var(--page-max); margin: 0 auto; }
.smg-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Work Sans', sans-serif; font-size: 15px;
  color: rgba(255,255,255,.7); text-decoration: none; margin-bottom: 20px;
}
.smg-back-link:hover { color: #fff; text-decoration: underline; }
.smg-section-label {
  font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.75); margin-bottom: 12px; display: block;
}
.smg-hero h1 {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: clamp(26px, 4vw, 44px); font-weight: 700;
  color: #fff; line-height: 1.15; margin: 0 0 18px;
  max-width: var(--content-max);
}
.smg-hero .smg-subtitle {
  font-family: 'Work Sans', sans-serif; font-size: clamp(17px, calc(15px + 0.7vw), 21px); font-weight: 400;
  color: rgba(255,255,255,.82); line-height: 1.7; margin: 0;
  max-width: var(--content-max);
}

/* ── Content area ── */
.smg-content { max-width: 100%; margin: 0; padding: 0; }

/* ── Typography ── */
.smg-content h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(20px, calc(16px + 0.85vw), 26px); font-weight: 700;
  line-height: 1.3; color: var(--accent);
  margin: 60px 0 16px; scroll-margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent-tint);
  max-width: var(--content-max);
}
.smg-content h3.blue { color: var(--accent); border-bottom-color: var(--accent-tint); }
.smg-content h3.red  { color: var(--bhh-red); border-bottom-color: rgba(167,38,48,.15); }
.smg-content p {
  font-family: 'Work Sans', sans-serif; font-size: clamp(17px, calc(14px + 0.75vw), 20px);
  line-height: 1.85; color: var(--bhh-text); margin: 0 0 22px;
  max-width: var(--content-max);
}
.smg-content ul, .smg-content ol {
  font-family: 'Work Sans', sans-serif; font-size: clamp(17px, calc(14px + 0.75vw), 20px);
  line-height: 1.85; color: var(--bhh-text); margin: 0 0 22px; padding-left: 28px;
  max-width: var(--content-max);
}
.smg-content li { margin-bottom: 8px; }
.smg-content ul li::marker { color: var(--accent); }

/* ── Callout / blockquote ── */
.smg-content blockquote {
  position: relative;
  margin: 36px 0; padding: 22px 24px 22px 28px;
  background: var(--accent-tint);
  border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0;
  font-family: 'Work Sans', system-ui, sans-serif; font-size: clamp(16px, calc(13px + 0.7vw), 19px);
  font-style: italic; line-height: 1.75; color: var(--bhh-text);
}
.smg-content blockquote p { margin: 0; font-size: clamp(16px, calc(13px + 0.7vw), 19px); font-style: italic; }
.smg-content blockquote.red { border-left-color: var(--bhh-red); background: rgba(198,40,40,.06); }
.smg-content blockquote cite {
  display: block; font-size: 15px; font-style: normal;
  font-family: 'Work Sans', sans-serif; font-weight: 600;
  color: var(--accent); margin-top: 12px; opacity: .8;
}

/* ── Stat callout ── */
.smg-stat {
  margin: 36px 0; padding: 24px 28px;
  background: var(--bhh-white);
  border: 1px solid var(--accent-tint);
  border-left: 5px solid var(--accent);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  font-family: 'Work Sans', sans-serif; font-size: clamp(16px, calc(13px + 0.7vw), 19px); line-height: 1.7; color: var(--bhh-text);
}
.smg-stat p { margin: 0; }
.smg-stat strong { color: var(--accent); }

/* ── Icon card grid ── */
.smg-icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0; }
.smg-icon-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px 22px;
  background: var(--accent-tint); border: 1.5px solid transparent; border-radius: 10px;
  text-align: center;
  transition: box-shadow .2s, border-color .2s, transform .15s;
}
.smg-icon-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.smg-icon-card img { width: 52px; height: 52px; object-fit: contain; margin-bottom: 12px; }
.smg-icon-card span {
  font-family: 'Work Sans', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--accent); letter-spacing: .01em;
}

/* ── Featured image ── */
.smg-feature-img {
  margin: 32px 0 40px; border-radius: 4px; overflow: hidden;
  max-width: var(--content-max);
}
.smg-feature-img img {
  width: 100%; height: 320px; object-fit: cover; display: block; border-radius: 4px;
}
.smg-feature-img figcaption {
  font-family: 'Work Sans', sans-serif; font-size: 14px; color: var(--bhh-muted);
  margin-top: 6px; text-align: right;
}
@media (max-width: 768px) {
  .smg-feature-img img { height: 200px; }
}

/* ── Divider ── */
.smg-divider { border: none; border-top: 1px solid var(--bhh-border); margin: 48px 0 0; }

/* ── Footer ── */
.smg-footer {
  background: var(--bhh-light); border-top: 1px solid var(--bhh-border);
  padding: 48px 24px; margin-top: 64px;
  width: 100vw; position: relative; left: 50%; margin-left: -50vw; box-sizing: border-box;
}
.smg-footer-inner { max-width: var(--page-max); margin: 0 auto; }
.smg-footer-label {
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bhh-muted); margin-bottom: 20px;
}
.smg-guide-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.smg-guide-card {
  display: block; padding: 20px;
  background: var(--bhh-white); border: 1px solid var(--bhh-border); border-radius: 4px;
  text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow .2s, border-color .2s;
}
.smg-guide-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); border-color: var(--cta); }
.smg-guide-card .card-num {
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bhh-muted); margin-bottom: 6px;
}
.smg-guide-card .card-title { font-family: 'Work Sans', sans-serif; font-size: 17px; font-weight: 700; color: var(--bhh-blue); margin-bottom: 4px; }
.smg-guide-card .card-desc { font-family: 'Work Sans', sans-serif; font-size: 15px; color: var(--bhh-muted); line-height: 1.5; }

/* ── Prev/Next ── */
.smg-pagination {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--bhh-border);
}
.smg-pagination .smg-pg-label { font-family: 'Work Sans', sans-serif; font-size: 15px; color: var(--bhh-muted); font-style: italic; }
.smg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: 4px;
  font-family: 'Work Sans', sans-serif; font-size: 16px; font-weight: 700;
  text-decoration: none; transition: background .15s;
}
.smg-btn-primary { background: var(--cta); color: var(--bhh-white); }
.smg-btn-primary:hover { background: var(--cta-dark); }
.smg-btn-ghost { background: transparent; color: var(--bhh-muted); border: 2px solid var(--bhh-border); }
.smg-btn-ghost:hover { border-color: var(--cta); color: var(--cta); }

/* ── Compare panel (side-by-side) ── */
.smg-compare {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 28px 0; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.smg-compare-card { padding: 28px 24px; }
.smg-compare-card.blue { background: var(--accent); }
.smg-compare-card.blue h4 { color: rgba(255,255,255,.75); }
.smg-compare-card.blue p { color: #fff; }
.smg-compare-card.light { background: var(--accent-tint); }
.smg-compare-card h4 {
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px;
}
.smg-compare-card p {
  font-family: 'Work Sans', sans-serif; font-size: clamp(16px, calc(13px + 0.6vw), 18px); line-height: 1.7;
  color: var(--bhh-text); margin: 0;
}

/* ── Numbered steps ── */
.smg-steps { margin: 28px 0; display: flex; flex-direction: column; gap: 12px; }
.smg-step {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 22px;
  background: var(--bhh-white);
  border: 1px solid var(--bhh-border);
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  transition: box-shadow .2s;
}
.smg-step:hover { box-shadow: 0 4px 16px rgba(0,0,0,.09); }
.smg-step-num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: 'Work Sans', sans-serif; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.smg-step-num.red { background: var(--bhh-red); }
.smg-step-body { flex: 1; min-width: 0; padding-top: 2px; }
.smg-step-body strong {
  display: block; font-family: 'Work Sans', sans-serif; font-size: clamp(15px, calc(13px + 0.5vw), 17px);
  font-weight: 700; color: var(--bhh-text); margin-bottom: 6px;
}
.smg-step-body p {
  font-family: 'Work Sans', sans-serif; font-size: clamp(15px, calc(13px + 0.5vw), 17px);
  color: var(--bhh-muted); line-height: 1.65; margin: 0;
}

/* ── Tip box ── */
.smg-tip {
  margin: 28px 0; padding: 18px 22px;
  background: #fffbeb; border-left: 4px solid #d97706; border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 6px rgba(217,119,6,.1);
}
.smg-tip-label {
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #b45309; margin-bottom: 8px;
}
.smg-tip p { font-family: 'Work Sans', sans-serif; font-size: clamp(15px, calc(13px + 0.5vw), 17px); line-height: 1.7; color: var(--bhh-text); margin: 0; }

/* ── Benefit / check list ── */
.smg-benefits { list-style: none; padding: 0; margin: 16px 0 24px; }
.smg-benefits li {
  font-family: 'Work Sans', sans-serif; font-size: clamp(16px, calc(13px + 0.6vw), 18px); line-height: 1.7;
  color: var(--bhh-text); padding: 11px 0 11px 36px; position: relative;
  border-bottom: 1px solid var(--bhh-border);
}
.smg-benefits li:last-child { border-bottom: none; }
.smg-benefits li::before {
  content: '✓'; position: absolute; left: 0;
  width: 24px; height: 24px; top: 12px;
  background: var(--accent-tint); color: var(--accent);
  font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.smg-benefits.red li::before { background: rgba(167,38,48,.1); color: var(--bhh-red); content: '→'; }

/* ── Image placeholder (dev) ── */
.smg-img-placeholder {
  background: var(--bhh-light); border: 2px dashed var(--bhh-border);
  border-radius: 6px; padding: 40px 24px; text-align: center; margin: 24px 0;
  font-family: 'Work Sans', sans-serif; font-size: 16px; color: var(--bhh-muted);
  line-height: 1.6;
}
.smg-img-placeholder strong {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bhh-blue); margin-bottom: 6px;
}

/* ── Icon card emoji/text placeholder ── */
.smg-icon-ph {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-tint); display: flex; align-items: center;
  justify-content: center; margin-bottom: 10px; font-size: 26px;
}

/* ── Two-col content grid ── */
.smg-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0;
}
.smg-two-col-card {
  padding: 24px; background: var(--bhh-white);
  border: 1px solid var(--bhh-border);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: box-shadow .2s, transform .15s;
}
.smg-two-col-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.smg-two-col-card h4 {
  font-family: 'Work Sans', sans-serif; font-size: clamp(15px, calc(13px + 0.5vw), 17px); font-weight: 700;
  color: var(--accent); margin: 0 0 10px;
}
.smg-two-col-card p {
  font-family: 'Work Sans', sans-serif; font-size: clamp(15px, calc(13px + 0.5vw), 17px); line-height: 1.65;
  color: var(--bhh-text); margin: 0;
}

/* ── Prev/Next bottom nav bar ── */
#smg-bottom-nav {
  background: var(--bhh-white);
  border-top: 1px solid var(--bhh-border);
  box-shadow: 0 -2px 16px rgba(0,0,0,.08);
}
#smg-bottom-nav.is-fixed {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 997;
}
#smg-bottom-nav-inner {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 24px; gap: 20px;
}
.smg-bnav-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 22px; border-radius: 50px;
  font-family: 'Work Sans', sans-serif; font-size: 16px; font-weight: 700;
  text-decoration: none; transition: background .15s, color .15s, transform .1s;
  white-space: nowrap;
}
.smg-bnav-prev {
  background: var(--bhh-light); color: var(--bhh-text);
  border: 1.5px solid var(--bhh-border);
}
.smg-bnav-prev:hover { background: var(--bhh-border); transform: translateX(-2px); }
.smg-bnav-next {
  background: var(--cta); color: #fff;
  border: 1.5px solid var(--cta);
}
.smg-bnav-next:hover { background: var(--cta-dark); transform: translateX(2px); }
.smg-bnav-arrow { font-size: 18px; line-height: 1; }
.smg-bnav-progress {
  font-family: 'Work Sans', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--bhh-muted); letter-spacing: .05em;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .smg-hero, .smg-content, .smg-footer { padding-left: 16px; padding-right: 16px; }
  .smg-hero { min-height: auto !important; padding-top: 28px !important; padding-bottom: 28px !important; }
  .smg-icon-grid { grid-template-columns: repeat(2, 1fr); }
  .smg-guide-cards { grid-template-columns: 1fr; }
  .smg-compare { grid-template-columns: 1fr; }
  .smg-two-col { grid-template-columns: 1fr; }

  /* TOC: hide on mobile */
  #smg-toc { display: none; }
  #smg-toc a { font-size: 14px; padding: 4px 10px; }

  /* Bottom nav: tighter on mobile */
  #smg-bottom-nav-inner { padding: 8px 12px; }
  .smg-bnav-btn { padding: 8px 16px; font-size: 15px; }
  .smg-bnav-progress { display: none; }

/* Override inline gap:60px baked into page content — group buttons around counter */
.page-template-page-guide-divi5 #smg-bottom-nav-inner,
.page-template-page-guide-divi5-fr #smg-bottom-nav-inner {
  max-width: var(--page-max) !important;
  justify-content: center !important;
  gap: 20px !important;
}


  /* Guide nav: keep fixed, convert to dropdown on mobile */
  #smg-nav {
    top: 64px; left: 0; right: 0; transform: none;
    width: 100%; border-radius: 0;
    overflow-x: hidden !important;
  }
  /* spacer stays visible — nav is fixed so needs in-flow placeholder */
  #smg-nav-inner { flex-wrap: wrap; padding: 0 14px; }

  /* Logo stays visible as the dropdown header */
  .smg-nav-logo { pointer-events: none; flex: 1; }

  /* Section links + lang hidden by default */
  #smg-nav a:not(.smg-nav-logo) { display: none !important; }
  .smg-nav-lang { display: none !important; }

  /* Toggle button (injected by JS) */
  #smg-nav-mobile-btn {
    display: flex !important; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px; font-weight: 700; color: var(--bhh-blue);
    padding: 0 4px; margin-left: auto; white-space: nowrap;
  }

  /* Open state: show links stacked */
  #smg-nav.mobile-open a:not(.smg-nav-logo) {
    display: flex !important;
    width: 100%; height: auto !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--bhh-border) !important;
    font-size: 15px; border-bottom-width: 1px !important;
  }
  #smg-nav.mobile-open a.active {
    color: var(--bhh-blue) !important;
    background: rgba(29,73,167,.04);
  }
  #smg-nav.mobile-open .smg-nav-lang {
    display: flex !important;
    width: 100% !important; justify-content: center; padding: 8px 20px;
  }
  #smg-nav.mobile-open .smg-lang-switch {
    width: 100% !important; margin: 0 !important;
    height: 44px !important; display: flex !important;
    justify-content: center; align-items: center;
    background: var(--bhh-blue) !important; color: #fff !important;
    border-color: var(--bhh-blue) !important;
    font-size: 15px !important;
  }

  #smg-toc a { font-size: 14px; padding: 4px 10px; }
}

/* Daily Wellness — hide text references on all screen sizes */
body.page-id-491 h3#references,
  body.page-id-4506 #smg-main-body h3#references,
body.page-id-491 h3#references + ol,
  body.page-id-4506 #smg-main-body h3#references + ol,
body.page-id-694 h3#references + ol {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   Daily Wellness — EN page 491  (mobile + tablet ≤ 1024px)
════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* 1. Scale icon beside "Daily Wellness" h3 — keep in row, enlarge */
  body.page-id-491 div:has(> h3#introduction),
  body.page-id-4506 #smg-main-body div:has(> h3#introduction),
  body.page-id-694 div:has(> h3#introduction) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  body.page-id-491 div:has(> img[src*="dw-nobg-scale"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-nobg-scale"]),
  body.page-id-694 div:has(> img[src*="dw-nobg-scale"]) {
    width: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
  }

  /* 2. Circles row — stack: text above, circles below */
  body.page-id-491 div:has(> div > img[src*="dw-nobg-circles"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-nobg-circles"]),
  body.page-id-694 div:has(> div > img[src*="dw-nobg-circles"]) {
    flex-direction: column !important;
    align-items: center !important;
  }
  body.page-id-491 div:has(> img[src*="dw-nobg-circles"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-nobg-circles"]),
  body.page-id-694 div:has(> img[src*="dw-nobg-circles"]) {
    width: 200px !important;
    min-width: 200px !important;
    flex-shrink: 0 !important;
    margin: 8px auto !important;
  }

  /* 2b. Heartbrain — show AFTER "heart health affects" text */
  body.page-id-491 div:has(> div > img[src*="dw-nobg-heartbrain"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-nobg-heartbrain"]),
  body.page-id-694 div:has(> div > img[src*="dw-nobg-heartbrain"]) {
    flex-direction: column-reverse !important;
    align-items: center !important;
  }
  body.page-id-491 div:has(> img[src*="dw-nobg-heartbrain"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-nobg-heartbrain"]),
  body.page-id-694 div:has(> img[src*="dw-nobg-heartbrain"]) {
    width: 180px !important;
    min-width: 180px !important;
    flex-shrink: 0 !important;
    margin: 8px auto !important;
  }

  /* 3. Lady-in-office — center, constrain 480px overflow */
  body.page-id-491 div:has(> div > img[src*="dw-nobg-girl"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-nobg-girl"]),
  body.page-id-694 div:has(> div > img[src*="dw-nobg-girl"]) {
    flex-direction: column !important;
    align-items: center !important;
  }
  body.page-id-491 div:has(> img[src*="dw-nobg-girl"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-nobg-girl"]),
  body.page-id-694 div:has(> img[src*="dw-nobg-girl"]) {
    width: 100% !important;
    max-width: 280px !important;
    flex-shrink: 1 !important;
    margin: 8px auto !important;
  }

  /* 4. Sleep brain — show AFTER "signs of poor quality sleep" text */
  body.page-id-491 div:has(> div > img[src*="dw-sleep-brain4"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-sleep-brain4"]),
  body.page-id-694 div:has(> div > img[src*="dw-sleep-brain4"]) {
    flex-direction: column-reverse !important;
    align-items: center !important;
  }
  body.page-id-491 div:has(> img[src*="dw-sleep-brain4"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-sleep-brain4"]),
  body.page-id-694 div:has(> img[src*="dw-sleep-brain4"]) {
    width: 180px !important;
    min-width: 180px !important;
    flex-shrink: 0 !important;
    margin: 8px auto !important;
  }

  /* 5. Lady-on-bed sleep images — stack + enlarge */
  body.page-id-491 div:has(> div > img[src*="dw-sleep-awake-lady3"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-sleep-awake-lady3"]),
  body.page-id-491 div:has(> div > img[src*="dw-phone-bed-lady"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-phone-bed-lady"]),
  body.page-id-491 div:has(> div > img[src*="dw-bedroom-bed"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-bedroom-bed"]),
  body.page-id-694 div:has(> div > img[src*="dw-bedroom-bed"]) {
    flex-direction: column !important;
    align-items: center !important;
  }
  body.page-id-491 div:has(> img[src*="dw-sleep-awake-lady3"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-sleep-awake-lady3"]),
  body.page-id-491 div:has(> img[src*="dw-phone-bed-lady"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-phone-bed-lady"]),
  body.page-id-491 div:has(> img[src*="dw-bedroom-bed"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-bedroom-bed"]),
  body.page-id-694 div:has(> img[src*="dw-bedroom-bed"]) {
    width: 100% !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    margin: 12px auto !important;
  }

  /* 5b. Sleep lady6 — image is on LEFT, reverse so text comes first */
  body.page-id-491 div:has(> div > img[src*="dw-sleep-lady6"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-sleep-lady6"]),
  body.page-id-694 div:has(> div > img[src*="dw-sleep-lady6"]) {
    flex-direction: column-reverse !important;
    align-items: center !important;
  }
  body.page-id-491 div:has(> img[src*="dw-sleep-lady6"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-sleep-lady6"]),
  body.page-id-694 div:has(> img[src*="dw-sleep-lady6"]) {
    width: 100% !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    margin: 12px auto !important;
  }

  /* 6. Optimism face icon — enlarge */
  body.page-id-491 div:has(> h3#optimism),
  body.page-id-4506 #smg-main-body div:has(> h3#optimism),
  body.page-id-694 div:has(> h3#optimism) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  body.page-id-491 div:has(> img[src*="dw-optimism-face2"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-optimism-face2"]),
  body.page-id-694 div:has(> img[src*="dw-optimism-face2"]) {
    width: 100px !important;
    min-width: 100px !important;
    flex-shrink: 0 !important;
  }

  /* 7. Puzzle — show AFTER "adopting optimistic mindset" text */
  body.page-id-491 div:has(> div > img[src*="dw-puzzle-pieces2"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-puzzle-pieces2"]),
  body.page-id-694 div:has(> div > img[src*="dw-puzzle-pieces2"]) {
    flex-direction: column-reverse !important;
    align-items: center !important;
  }
  body.page-id-491 div:has(> img[src*="dw-puzzle-pieces2"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-puzzle-pieces2"]),
  body.page-id-694 div:has(> img[src*="dw-puzzle-pieces2"]) {
    width: 180px !important;
    min-width: 180px !important;
    flex-shrink: 0 !important;
    margin: 8px auto !important;
  }

  /* 8. Cigarette no-sign bullet icons — small, inline left of text */
  body.page-id-491 div:has(> div > img[src*="dw-smoking-nosign"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-smoking-nosign"]),
  body.page-id-694 div:has(> div > img[src*="dw-smoking-nosign"]) {
    align-items: flex-start !important;
  }
  body.page-id-491 div:has(> img[src*="dw-smoking-nosign"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-smoking-nosign"]),
  body.page-id-694 div:has(> img[src*="dw-smoking-nosign"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
    width: 100% !important;
  }
  body.page-id-491 img[src*="dw-smoking-nosign"][style*="width:36px"],
  body.page-id-4506 #smg-main-body img[src*="dw-smoking-nosign"][style*="width:36px"],
  body.page-id-694 img[src*="dw-smoking-nosign"][style*="width:36px"] {
    width: 28px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }

  /* 9. Nature section icons + images — enlarge */
  body.page-id-491 div:has(> h3#time-in-nature),
  body.page-id-4506 #smg-main-body div:has(> h3#time-in-nature),
  body.page-id-694 div:has(> h3#time-in-nature) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  body.page-id-491 div:has(> img[src*="dw-nature-earth"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-nature-earth"]),
  body.page-id-694 div:has(> img[src*="dw-nature-earth"]) {
    width: 100px !important;
    min-width: 100px !important;
    flex-shrink: 0 !important;
  }
  body.page-id-491 div:has(> div > img[src*="dw-nature-planters"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-nature-planters"]),
  body.page-id-491 div:has(> div > img[src*="dw-nature-lady-v3"]),
  body.page-id-4506 #smg-main-body div:has(> div > img[src*="dw-nature-lady-v3"]),
  body.page-id-694 div:has(> div > img[src*="dw-nature-lady-v3"]) {
    flex-direction: column !important;
    align-items: center !important;
  }
  body.page-id-491 div:has(> img[src*="dw-nature-planters"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-nature-planters"]),
  body.page-id-491 div:has(> img[src*="dw-nature-lady-v3"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-nature-lady-v3"]),
  body.page-id-694 div:has(> img[src*="dw-nature-lady-v3"]) {
    width: 100% !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    margin: 8px auto !important;
  }

  /* 10. Meaningful activities — enlarge heart+brain icon */
  body.page-id-491 div:has(> h3#meaningful-activities),
  body.page-id-4506 #smg-main-body div:has(> h3#meaningful-activities),
  body.page-id-694 div:has(> h3#meaningful-activities) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  body.page-id-491 div:has(> img[src*="dw-meaningful-heartbrain-v4"]),
  body.page-id-4506 #smg-main-body div:has(> img[src*="dw-meaningful-heartbrain-v4"]),
  body.page-id-694 div:has(> img[src*="dw-meaningful-heartbrain-v4"]) {
    width: 100px !important;
    min-width: 100px !important;
    flex-shrink: 0 !important;
  }

  /* 11. Remove decorative strap image */
  body.page-id-491 img[src*="dw-meaningful-strap-v3"],
  body.page-id-4506 #smg-main-body img[src*="dw-meaningful-strap-v3"],
  body.page-id-491 p:has(> img[src*="dw-meaningful-strap-v3"]),
  body.page-id-4506 #smg-main-body p:has(> img[src*="dw-meaningful-strap-v3"]),
  body.page-id-694 p:has(> img[src*="dw-meaningful-strap-v3"]) {
    display: none !important;
  }

  /* 12. Hide plain-text references at bottom */
  body.page-id-491 h3#references,
  body.page-id-4506 #smg-main-body h3#references,
  body.page-id-491 h3#references + ol,
  body.page-id-4506 #smg-main-body h3#references + ol,
  body.page-id-694 h3#references + ol {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   Exercise — EN page 478  (mobile + tablet ≤ 1024px)
════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* 1. Heart icon — inline after heading word (EN + FR h3 have different IDs) */
  body.page-id-679 h3#supporting-your-heart-and-mind,
  body.page-id-691 h3#soutenir-coeur-esprit {
    display: block !important;
  }
  body.page-id-679 h3#supporting-your-heart-and-mind span:has(img[src*="bhh-ex2-heart-icon"]),
  body.page-id-691 h3#soutenir-coeur-esprit span:has(img[src*="bhh-ex2-heart-icon"]) {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
  }
  body.page-id-679 h3#supporting-your-heart-and-mind img[src*="bhh-ex2-heart-icon"],
  body.page-id-691 h3#soutenir-coeur-esprit img[src*="bhh-ex2-heart-icon"] {
    height: 36px !important;
    width: auto !important;
    display: inline !important;
  }

  /* 2. Brain lifting weights — reduce size, keep left float */
  body.page-id-679 figure:has(img[src*="bhh-ex2-brain-v2"]),
  body.page-id-691 figure:has(img[src*="bhh-ex2-brain-v2"]) {
    float: left !important;
    width: 130px !important;
    max-width: 130px !important;
    margin: 0 1.5em 1em 0 !important;
    clear: left !important;
  }
  body.page-id-679 img[src*="bhh-ex2-brain-v2"],
  body.page-id-691 img[src*="bhh-ex2-brain-v2"] {
    width: 100% !important;
    height: auto !important;
  }

  /* 3. Heart-in-flames icon — tighten gap above */
  body.page-id-679 h3#what-do-heart-experts-recommend,
  body.page-id-691 h3#what-do-heart-experts-recommend {
    margin-top: 0.25em !important;
  }

  /* 4 & 5. All figures on exercise page — reduce top/bottom gap */
  body.page-id-679 figure,
  body.page-id-691 figure {
    margin-top: 0.25em !important;
    margin-bottom: 0.25em !important;
  }

  /* 6. Stair-climber icon — 36px inline, RIGHT of section text */
  body.page-id-679 div:has(> img[src*="bhh-ex3-stair-climber"]),
  body.page-id-691 div:has(> img[src*="bhh-ex3-stair-climber"]) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  body.page-id-679 img[src*="bhh-ex3-stair-climber"],
  body.page-id-691 img[src*="bhh-ex3-stair-climber"] {
    height: 36px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    order: 2 !important;
  }
  body.page-id-679 div:has(> img[src*="bhh-ex3-stair-climber"]) > :not(img),
  body.page-id-691 div:has(> img[src*="bhh-ex3-stair-climber"]) > :not(img) {
    order: 1 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* 7. Guy on chair — reduce size, keep left float (direct parent is DIV) */
  body.page-id-679 div:has(> img[src*="bhh-ex3-chair-person2"]),
  body.page-id-691 div:has(> img[src*="bhh-ex3-chair-person2"]) {
    float: left !important;
    width: 110px !important;
    max-width: 110px !important;
    margin: 0 1.5em 1em 0 !important;
    clear: left !important;
  }
  body.page-id-679 img[src*="bhh-ex3-chair-person2"],
  body.page-id-691 img[src*="bhh-ex3-chair-person2"] {
    width: 100% !important;
    height: auto !important;
  }

  /* 8. 3-person group silhouettes — 36px inline RIGHT of "Group Exercises" text */
  body.page-id-679 div:has(> img[src*="bhh-ex3-group-silhouettes"]),
  body.page-id-691 div:has(> img[src*="bhh-ex3-group-silhouettes"]) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  body.page-id-679 img[src*="bhh-ex3-group-silhouettes"],
  body.page-id-691 img[src*="bhh-ex3-group-silhouettes"] {
    height: 36px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    order: 2 !important;
  }
  body.page-id-679 div:has(> img[src*="bhh-ex3-group-silhouettes"]) > :not(img),
  body.page-id-691 div:has(> img[src*="bhh-ex3-group-silhouettes"]) > :not(img) {
    order: 1 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* 9. Quote — reduce oversized font (EN: 1.4em, FR: 1.15em) */
  body.page-id-679 p[style*="font-size:1.4em"],
  body.page-id-679 p[style*="font-size: 1.4em"],
  body.page-id-691 p[style*="font-size: 1.4em"],
  body.page-id-691 p[style*="font-size:1.15em"],
  body.page-id-691 p[style*="font-size: 1.15em"] {
    font-size: 1.0em !important;
  }

  /* 10. Yoga bullet icons — 28px inline LEFT within same paragraph */
  body.page-id-679 img[src*="bhh-ex3-yoga-bullet-icon"],
  body.page-id-691 img[src*="bhh-ex3-yoga-bullet-icon"] {
    display: inline !important;
    width: 28px !important;
    height: auto !important;
    vertical-align: middle !important;
    margin: 0 8px 0 0 !important;
  }

  /* 11. Yoga people images — separate them, clear floats */
  body.page-id-679 figure:has(img[src*="bhh-ex3-yoga-two-people"]),
  body.page-id-691 figure:has(img[src*="bhh-ex3-yoga-two-people"]) {
    float: none !important;
    clear: both !important;
    display: block !important;
    max-width: 240px !important;
    margin: 0 auto 1em !important;
  }
  body.page-id-679 figure:has(img[src*="bhh-ex3-yoga-four-people"]),
  body.page-id-691 figure:has(img[src*="bhh-ex3-yoga-four-people"]) {
    float: none !important;
    clear: both !important;
    display: block !important;
    max-width: 240px !important;
    margin: 2.5em auto 1em !important;
  }

  /* Aerobic section — dancer appears too close after walkers; push it down */
  body.page-id-679 div:has(> img[src*="bhh-ex3-aerobic-dancer."]),
  body.page-id-691 div:has(> img[src*="bhh-ex3-aerobic-dancer."]) {
    margin-top: 3em !important;
  }

  /* 12. Strength training arm/shoulder images — reduce */
  body.page-id-679 img[src*="bhh-ex3-st-left-arm"],
  body.page-id-679 img[src*="bhh-ex3-st-right-arm"],
  body.page-id-691 img[src*="bhh-ex3-st-right-arm"] {
    max-width: 160px !important;
    width: 160px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* 13. Dumbbell icon — 28px inline LEFT of benefit text */
  body.page-id-679 div:has(> img[src*="bhh-ex3-st-dumbbell-icon"]),
  body.page-id-691 div:has(> img[src*="bhh-ex3-st-dumbbell-icon"]),
  body.page-id-4507 div:has(> img[src*="bhh-ex3-st-dumbbell-icon"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  body.page-id-679 img[src*="bhh-ex3-st-dumbbell-icon"],
  body.page-id-691 img[src*="bhh-ex3-st-dumbbell-icon"] {
    height: 28px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  /* Divi 5: needs #smg-main-body in selector to beat rule #6's ID-selector specificity (1,0,1) */
  body.page-id-4507 #smg-main-body img[src*="bhh-ex3-st-dumbbell-icon"] {
    height: 28px !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   Exercise Divi 5 test page (4507) — mobile-only fixes
   (Separate from page-id-679 rules above which target Divi 4 layout)
════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Strength training benefit list: text column (flex:1) + st-guy image in one flex row.
     At 390px the text gets squished to 138px. Stack vertically: text first, image below. */
  body.page-id-4507 #smg-main-body div:has(> img[src*="bhh-ex3-st-guy"]) {
    flex-direction: column !important;
    align-items: center !important;
  }
  body.page-id-4507 #smg-main-body img[src*="bhh-ex3-st-guy"] {
    width: 160px !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
    margin: 8px auto 0 !important;
    order: 2 !important;
  }
  body.page-id-4507 #smg-main-body div:has(> img[src*="bhh-ex3-st-guy"]) > div[style*="flex:1"] {
    width: 100% !important;
    order: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   Nutrition — EN page 472  (mobile + tablet ≤ 1024px)
════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* 1. Apple/banana icon beside "Eating and Feeling Well" h3 — 36px, right of title */
  body.page-id-472 h3#eating-and-feeling-well,
  body.page-id-690 h3#eating-and-feeling-well {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  body.page-id-472 h3#eating-and-feeling-well img[src*="n5_apple_banana_v2"],
  body.page-id-690 h3#eating-and-feeling-well img[src*="n5_apple_banana_v2"] {
    height: 36px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  /* 2. Justify all paragraph text */
  body.page-id-472 p,
  body.page-id-690 p {
    text-align: justify !important;
  }

  /* 2b. Testimonial quote — reduce oversized inline font */
  body.page-id-472 p[style*="font-size:1.65em"],
  body.page-id-690 p[style*="font-size:1.65em"] {
    font-size: 1.1em !important;
  }

  /* 3. Center standalone images (general) */
  body.page-id-472 p img,
  body.page-id-472 div > img,
  body.page-id-690 div > img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 4. Heart laughing — stack + enlarge + center */
  body.page-id-472 div:has(> div > img[src*="svg9_heart_clean"]),
  body.page-id-690 div:has(> div > img[src*="svg9_heart_clean"]) {
    flex-direction: column !important;
    align-items: center !important;
  }
  body.page-id-472 div:has(> img[src*="svg9_heart_clean"]),
  body.page-id-690 div:has(> img[src*="svg9_heart_clean"]) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    margin: 12px 0 !important;
  }
  body.page-id-472 img[src*="svg9_heart_clean"],
  body.page-id-690 img[src*="svg9_heart_clean"] {
    display: block !important;
    margin: 0 auto !important;
    max-width: 240px !important;
    width: 100% !important;
    height: auto !important;
  }

  /* 5. Snowflakes + frozen bag — side by side, suppress stacking <br> */
  body.page-id-472 div:has(> img[src*="n5_snowflakes_top_v3"]),
  body.page-id-690 div:has(> img[src*="n5_snowflakes_top_v3"]) {
    float: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 8px auto !important;
  }
  body.page-id-472 div:has(> img[src*="n5_snowflakes_top_v3"]) br,
  body.page-id-690 div:has(> img[src*="n5_snowflakes_top_v3"]) br {
    display: none !important;
  }

  /* 6. Reduce berry bag */
  body.page-id-472 div:has(> img[src*="n5_berry_container"]),
  body.page-id-690 div:has(> img[src*="n5_berry_container"]) {
    width: 140px !important;
    max-width: 140px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  body.page-id-472 img[src*="n5_berry_container"],
  body.page-id-690 img[src*="n5_berry_container"] {
    width: 100% !important;
    height: auto !important;
  }

  /* 7. Reduce staircase person */
  body.page-id-472 div:has(> img[src*="n15_staircase_v2"]),
  body.page-id-690 div:has(> img[src*="n15_staircase_v2"]) {
    width: 160px !important;
    max-width: 160px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  body.page-id-472 img[src*="n15_staircase_v2"],
  body.page-id-690 img[src*="n15_staircase_v2"] {
    width: 100% !important;
    height: auto !important;
  }

  /* 8. Healthy Eating Plate button — even vertical spacing */
  body.page-id-472 a[href*="healthy-eating-plate"],
  body.page-id-472 a[href*="myplate"],
  body.page-id-472 .smg-hep-btn,
  body.page-id-690 .smg-hep-btn {
    display: block !important;
    margin: 24px auto !important;
    text-align: center !important;
  }

  /* 9. Reduce clipboard with veggies notepad */
  body.page-id-472 img[src*="hep_clipboard_veggies"],
  body.page-id-690 img[src*="hep_clipboard_veggies"] {
    float: none !important;
    display: block !important;
    max-width: 140px !important;
    width: 140px !important;
    height: auto !important;
    margin: 8px auto !important;
  }
  body.page-id-472 div:has(> img[src*="hep_clipboard_veggies"]),
  body.page-id-472 p:has(> img[src*="hep_clipboard_veggies"]),
  body.page-id-690 p:has(> img[src*="hep_clipboard_veggies"]) {
    float: none !important;
    max-width: 140px !important;
    margin: 8px auto !important;
  }

  /* 10. Basket + brain-with-legs — constrain widths, center */
  body.page-id-472 div:has(> img[src*="a3_basket_veggies"]),
  body.page-id-472 div:has(> img[src*="a3_brain_hands"]),
  body.page-id-690 div:has(> img[src*="a3_brain_hands"]) {
    max-width: 180px !important;
    flex-shrink: 1 !important;
    margin: 8px auto !important;
  }
  body.page-id-472 img[src*="a3_basket_veggies"],
  body.page-id-472 img[src*="a3_brain_hands"],
  body.page-id-690 img[src*="a3_brain_hands"] {
    width: 100% !important;
    height: auto !important;
  }

  /* 11. Reduce brain + intestine (pre/probiotics) */
  body.page-id-472 div:has(> img[src*="s19_brain_intestine"]),
  body.page-id-690 div:has(> img[src*="s19_brain_intestine"]) {
    width: 200px !important;
    max-width: 200px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    margin: 8px auto !important;
  }
  body.page-id-472 img[src*="s19_brain_intestine"],
  body.page-id-690 img[src*="s19_brain_intestine"] {
    width: 100% !important;
    height: auto !important;
  }

  /* 12. Tip bulbs — small icon inline LEFT of text */
  body.page-id-472 div:has(> img[src*="s19_tip_bulb"]),
  body.page-id-690 div:has(> img[src*="s19_tip_bulb"]),
  body.page-id-4499 div:has(> img[src*="s19_tip_bulb"]),
  body.page-id-4511 div:has(> img[src*="s19_tip_bulb"]) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    width: 100% !important;
  }
  /* Hide stray empty <p> inside bulb rows (malformed HTML artefact) */
  body.page-id-472 div:has(> img[src*="s19_tip_bulb"]) > p:empty,
  body.page-id-690 div:has(> img[src*="s19_tip_bulb"]) > p:empty,
  body.page-id-4499 div:has(> img[src*="s19_tip_bulb"]) > p:empty,
  body.page-id-4511 div:has(> img[src*="s19_tip_bulb"]) > p:empty {
    display: none !important;
  }
  /* Text paragraph fills remaining width and wraps properly */
  body.page-id-472 div:has(> img[src*="s19_tip_bulb"]) > p,
  body.page-id-690 div:has(> img[src*="s19_tip_bulb"]) > p,
  body.page-id-4499 div:has(> img[src*="s19_tip_bulb"]) > p,
  body.page-id-4511 div:has(> img[src*="s19_tip_bulb"]) > p {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  body.page-id-472 img[src*="s19_tip_bulb"],
  body.page-id-690 img[src*="s19_tip_bulb"],
  body.page-id-4499 img[src*="s19_tip_bulb"],
  body.page-id-4511 img[src*="s19_tip_bulb"] {
    width: 28px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    margin: 2px 0 0 !important;
    display: block !important;
  }
}

/* ── Mental Health page mobile (EN 482 / FR 692) ─────────────── */
@media (max-width: 1024px) {

  /* 1. Intro H3 icon — floats right beside "Failure" (span is after text in DOM) */
  body.page-id-482 h3#introduction,
  body.page-id-692 h3#introduction {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  body.page-id-482 h3#introduction .smg-icon,
  body.page-id-692 h3#introduction .smg-icon {
    float: none !important;
    flex-shrink: 0 !important;
    margin: 3px 0 0 0 !important;
  }
  body.page-id-482 h3#introduction .smg-icon img,
  body.page-id-692 h3#introduction .smg-icon img {
    width: 42px !important;
    height: auto !important;
    display: block !important;
  }

  /* 2. Relaxation h3 icon — float right; meditation icon — small inline */
  body.page-id-482 h3#relaxation,
  body.page-id-692 h3#relaxation {
    display: block !important;
    overflow: hidden !important;
  }
  body.page-id-482 h3#relaxation .smg-icon,
  body.page-id-692 h3#relaxation .smg-icon {
    float: right !important;
    margin: 0 0 6px 10px !important;
  }
  body.page-id-482 h3#relaxation .smg-icon img,
  body.page-id-692 h3#relaxation .smg-icon img {
    width: 60px !important;
    height: auto !important;
    display: block !important;
  }
  body.page-id-482 h3#meditation,
  body.page-id-692 h3#meditation {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  body.page-id-482 h3#meditation .smg-icon,
  body.page-id-692 h3#meditation .smg-icon {
    float: none !important;
    flex-shrink: 0 !important;
    margin: 3px 0 0 0 !important;
  }
  body.page-id-482 h3#meditation .smg-icon img,
  body.page-id-692 h3#meditation .smg-icon img {
    height: 32px !important;
    width: auto !important;
    display: block !important;
  }

  /* 3. Image size reductions */
  body.page-id-482 img[src*="bhh-mh-heartstroke"],
  body.page-id-692 img[src*="bhh-mh-heartstroke"] {
    max-width: 180px !important; width: 180px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }
  body.page-id-482 img[src*="bhh-mh-lady-v3"],
  body.page-id-692 img[src*="bhh-mh-lady-v3"] {
    max-width: 200px !important; width: 200px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }
  body.page-id-482 img[src*="bhh-mh-face-heart"],
  body.page-id-692 img[src*="bhh-mh-face-heart"] {
    max-width: 120px !important; width: 120px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }
  body.page-id-482 img[src*="bhh-mh-face-breath-v5"],
  body.page-id-692 img[src*="bhh-mh-face-breath-v5"] {
    max-width: 200px !important; width: 200px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }
  body.page-id-482 img[src*="bhh-mh-box-square"],
  body.page-id-692 img[src*="bhh-mh-box-square"] {
    max-width: 240px !important; width: 240px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }
  /* Gratitude heart — remove float, center, bullets flow below */
  body.page-id-482 img[src*="bhh-mh-gratitude-heart"],
  body.page-id-692 img[src*="bhh-mh-gratitude-heart"],
  body.page-id-4523 img[src*="bhh-mh-gratitude-heart"],
  body.page-id-4524 img[src*="bhh-mh-gratitude-heart"] {
    float: none !important; display: block !important;
    width: 200px !important; max-width: 200px !important;
    height: auto !important; margin: 0 auto 1.5em !important;
  }

  /* 4. Meditation intro two-column table → stack single column */
  body.page-id-482 .et_pb_text_inner table,
  body.page-id-692 .et_pb_text_inner table {
    display: block !important; width: 100% !important;
  }
  body.page-id-482 .et_pb_text_inner table tbody,
  body.page-id-692 .et_pb_text_inner table tbody { display: block !important; }
  body.page-id-482 .et_pb_text_inner table tr,
  body.page-id-692 .et_pb_text_inner table tr { display: block !important; }
  body.page-id-482 .et_pb_text_inner table td,
  body.page-id-692 .et_pb_text_inner table td {
    display: block !important; width: 100% !important; box-sizing: border-box !important;
  }

  /* 5. Hide sky-blue med-heart image */
  body.page-id-482 div:has(> div > img[src*="bhh-mh-med-heart"]),
  body.page-id-692 div:has(> div > img[src*="bhh-mh-med-heart"]) {
    display: none !important;
  }

  /* 6. Brain image — center, limit width */
  body.page-id-482 img[src*="bhh-mh-med-brain"],
  body.page-id-692 img[src*="bhh-mh-med-brain"] {
    max-width: 240px !important; width: 240px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }

  /* 7. Stack all image+text flex-row containers */
  body.page-id-482 div:has(> div > img[src*="bhh-mh-med-woman"]),
  body.page-id-482 div:has(> div > img[src*="bhh-mh-faces-v3"]),
  body.page-id-482 div:has(> div > img[src*="bhh-mh-med-guy-hq"]),
  body.page-id-482 div:has(> div > img[src*="bhh-mh-group-meditating"]),
  body.page-id-482 div:has(> div > img[src*="bhh-mh-kid-meditating"]),
  body.page-id-692 div:has(> div > img[src*="bhh-mh-med-woman"]),
  body.page-id-692 div:has(> div > img[src*="bhh-mh-faces-v3"]),
  body.page-id-692 div:has(> div > img[src*="bhh-mh-med-guy-hq"]),
  body.page-id-692 div:has(> div > img[src*="bhh-mh-group-meditating"]),
  body.page-id-692 div:has(> div > img[src*="bhh-mh-kid-meditating"]) {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* 8. Stack text-only flex-row boxes (Zen Meditation types, tips, etc.)
     These use inline display:flex on divs directly in et_pb_text_0, not et_pb_text_inner */
  body.page-id-482 div[style*="display:flex"],
  body.page-id-692 div[style*="display:flex"] {
    flex-direction: column !important;
  }
  /* Also catch et_pb_text_inner depth-1 and depth-2 flex containers */
  body.page-id-482 .et_pb_text_inner > div,
  body.page-id-482 .et_pb_text_inner > div > div,
  body.page-id-692 .et_pb_text_inner > div,
  body.page-id-692 .et_pb_text_inner > div > div {
    flex-direction: column !important;
  }

  /* 9a. Section summary pill rows — restore row layout (only rows containing a pill link) */
  body.page-id-482 div:has(> a[href^="#"][style*="border-radius:50%"]),
  body.page-id-482 div:has(> p > a[href^="#"][style*="border-radius:50%"]),
  body.page-id-692 div:has(> a[href^="#"][style*="border-radius:50%"]),
  body.page-id-692 div:has(> p > a[href^="#"][style*="border-radius:50%"]) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* 9. Gratitude bullet rows — restore row, hide rogue BR */
  body.page-id-482 div[style*="gap:0.7em"],
  body.page-id-692 div[style*="gap:0.7em"] {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  body.page-id-482 div[style*="gap:0.7em"] br,
  body.page-id-692 div[style*="gap:0.7em"] br {
    display: none !important;
  }
}

/* ── MH image size reductions (all mobile) ────────────────── */
@media (max-width: 1024px) {
  /* Shoulder/muscle-arm */
  body.page-id-482 img[src*="bhh-mh-muscle-arm"],
  body.page-id-692 img[src*="bhh-mh-muscle-arm"] {
    max-width: 180px !important; width: 180px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }
  /* Hand-heart */
  body.page-id-482 img[src*="mh-hand-heart"],
  body.page-id-692 img[src*="mh-hand-heart"] {
    max-width: 160px !important; width: 160px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }
  /* Goal-setting clipboard heading icon — small inline */
  body.page-id-482 h3#goal-setting img[src*="bhh-gs-clipboard"],
  body.page-id-692 h3#goal-setting img[src*="bhh-gs-clipboard"] {
    height: 44px !important; width: auto !important;
    display: inline-block !important; margin: 0 !important;
  }
  /* Goal-setting clipboard body image (notepad) */
  body.page-id-482 img[src*="bhh-gs-clipboard"]:not(h3 img),
  body.page-id-692 img[src*="bhh-gs-clipboard"]:not(h3 img) {
    max-width: 120px !important; width: 120px !important;
    height: auto !important; display: block !important; margin: 0 auto 1em !important;
  }
  /* CCS logo — hide from paragraph, show beside Box Breathing h4 */
  body.page-id-482 img[src*="bhh-mh-ccs-logo"],
  body.page-id-692 img[src*="bhh-mh-ccs-logo"] {
    display: none !important;
  }
  body.page-id-482 h4[style*="color:#1D49A7"],
  body.page-id-692 h4[style*="color:#1D49A7"] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  body.page-id-482 h4[style*="color:#1D49A7"]::after,
  body.page-id-692 h4[style*="color:#1D49A7"]::after {
    content: '';
    display: inline-block;
    width: 44px; height: 44px; flex-shrink: 0;
    background: url('https://brainhearthealth.ca/wp-content/uploads/2026/05/bhh-mh-ccs-logo-v2.png') no-repeat center/contain;
  }
  /* Smart goal — target (red rounds+arrow) and person-steps: block on top, text below */
  body.page-id-482 img[src*="bhh-gs-target"],
  body.page-id-692 img[src*="bhh-gs-target"],
  body.page-id-482 img[src*="bhh-gs-person-steps"],
  body.page-id-692 img[src*="bhh-gs-person-steps"] {
    float: none !important; display: block !important;
    max-width: 150px !important; width: 150px !important;
    height: auto !important; margin: 0 auto 1em !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SOCIAL SUPPORT page (486 EN / 693 FR) — mobile layout fixes
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Image wrapper divs have flex:0 0 Xpx which forces height in column flex — collapse to content height */
  body.page-id-486 div[style*="flex:0 0"][style*="text-align:center"],
  body.page-id-693 div[style*="flex:0 0"][style*="text-align:center"],
  body.page-id-4530 div[style*="flex:0 0"][style*="text-align:center"],
  body.page-id-4531 div[style*="flex:0 0"][style*="text-align:center"] {
    flex-basis: auto !important; height: auto !important;
    min-height: 0 !important; min-width: 0 !important; width: auto !important;
  }

  /* All SS images — cap size on mobile */
  body.page-id-486 img[src*="ss-"],
  body.page-id-693 img[src*="ss-"],
  body.page-id-4530 img[src*="ss-"],
  body.page-id-4531 img[src*="ss-"] {
    max-width: 220px !important; width: 220px !important;
    height: auto !important; display: block !important; margin: 4px auto !important;
  }

  /* Collapse empty paragraphs and compact HRs that create blank zones */
  body.page-id-486 .et_pb_text_inner p:empty,
  body.page-id-693 .et_pb_text_inner p:empty { display: none !important; }
  body.page-id-4530 .et_pb_text_inner p:empty { display: none !important; }
  body.page-id-4531 .et_pb_text_inner p:empty { display: none !important; }
  body.page-id-486 .et_pb_text_inner hr,
  body.page-id-693 .et_pb_text_inner hr { margin: 6px 0 !important; }
  body.page-id-4530 .et_pb_text_inner hr { margin: 6px 0 !important; }
  body.page-id-4531 .et_pb_text_inner hr { margin: 6px 0 !important; }
  body.page-id-486 h2[style*="color:#2d6fa3"],
  body.page-id-693 h2[style*="color:#2d6fa3"] { margin-top: 6px !important; }
  body.page-id-4530 h2[style*="color:#2d6fa3"] { margin-top: 6px !important; }
  body.page-id-4531 h2[style*="color:#2d6fa3"] { margin-top: 6px !important; }

  /* Reduce gaps / margins on all flex wrappers — main source of empty space */
  body.page-id-486 div[style*="flex-wrap"][style*="gap:32px"],
  body.page-id-693 div[style*="flex-wrap"][style*="gap:32px"],
  body.page-id-4530 div[style*="flex-wrap"][style*="gap:32px"],
  body.page-id-4531 div[style*="flex-wrap"][style*="gap:32px"] {
    gap: 10px !important; margin-top: 10px !important; margin-bottom: 10px !important;
  }
  body.page-id-486 div[style*="flex-wrap"][style*="gap:28px"],
  body.page-id-693 div[style*="flex-wrap"][style*="gap:28px"],
  body.page-id-4530 div[style*="flex-wrap"][style*="gap:28px"],
  body.page-id-4531 div[style*="flex-wrap"][style*="gap:28px"] {
    gap: 10px !important; margin-top: 10px !important; margin-bottom: 10px !important;
  }
  body.page-id-486 div[style*="flex-wrap"][style*="gap:24px"],
  body.page-id-693 div[style*="flex-wrap"][style*="gap:24px"],
  body.page-id-4530 div[style*="flex-wrap"][style*="gap:24px"],
  body.page-id-4531 div[style*="flex-wrap"][style*="gap:24px"] {
    gap: 10px !important; margin-top: 10px !important; margin-bottom: 10px !important;
  }
  /* Compact card boxes */
  body.page-id-486 div[style*="padding:28px 32px"],
  body.page-id-693 div[style*="padding:28px 32px"],
  body.page-id-4530 div[style*="padding:28px 32px"],
  body.page-id-4531 div[style*="padding:28px 32px"] {
    padding: 16px !important; margin-top: 16px !important; margin-bottom: 16px !important;
  }
  body.page-id-486 div[style*="padding:18px 24px"],
  body.page-id-693 div[style*="padding:18px 24px"],
  body.page-id-4530 div[style*="padding:18px 24px"],
  body.page-id-4531 div[style*="padding:18px 24px"] {
    padding: 14px 16px !important; margin-top: 12px !important; margin-bottom: 12px !important;
  }
  /* Compact section headings with large top margin */
  body.page-id-486 div[style*="margin:36px 0"],
  body.page-id-693 div[style*="margin:36px 0"],
  body.page-id-4530 div[style*="margin:36px 0"],
  body.page-id-4531 div[style*="margin:36px 0"] {
    margin-top: 16px !important; margin-bottom: 16px !important;
  }
  body.page-id-486 div[style*="margin:32px 0"],
  body.page-id-693 div[style*="margin:32px 0"],
  body.page-id-4530 div[style*="margin:32px 0"],
  body.page-id-4531 div[style*="margin:32px 0"] {
    margin-top: 14px !important; margin-bottom: 14px !important;
  }

  /* 1. People-globe-heart icon — inline right of "Social Well-Being" h2 */
  body.page-id-486 h2#introduction,
  body.page-id-693 h2#introduction,
  body.page-id-4530 h2#introduction,
  body.page-id-4531 h2#introduction {
    display: flex !important; align-items: center !important;
    gap: 10px !important; flex-wrap: nowrap !important; overflow: visible !important;
  }
  body.page-id-486 h2#introduction img[src*="ss-people-globe-heart"],
  body.page-id-693 h2#introduction img[src*="ss-people-globe-heart"],
  body.page-id-4530 h2#introduction img[src*="ss-people-globe-heart"],
  body.page-id-4531 h2#introduction img[src*="ss-people-globe-heart"] {
    float: none !important; height: 52px !important; width: auto !important;
    flex-shrink: 0 !important; order: 2 !important;
  }

  /* 2. 3 people hugging — reduce size */
  body.page-id-486 img[src*="ss-family-embrace"],
  body.page-id-693 img[src*="ss-family-embrace"],
  body.page-id-4530 img[src*="ss-family-embrace"],
  body.page-id-4531 img[src*="ss-family-embrace"] {
    max-width: 200px !important; width: 200px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }

  /* 3. Community group (people sitting) — after "Being a member" text */
  body.page-id-486 div:has(> img[src*="ss-community-group"]),
  body.page-id-693 div:has(> img[src*="ss-community-group"]) { order: 2 !important; }
  body.page-id-4530 div:has(> img[src*="ss-community-group"]) { order: 2 !important; }
  body.page-id-4531 div:has(> img[src*="ss-community-group"]) { order: 2 !important; }
  body.page-id-486 div[style*="flex-wrap"] > div:has(img[src*="ss-community-group"]),
  body.page-id-693 div[style*="flex-wrap"] > div:has(img[src*="ss-community-group"]) { order: 2 !important; }
  body.page-id-4530 div[style*="flex-wrap"] > div:has(img[src*="ss-community-group"]) { order: 2 !important; }
  body.page-id-4531 div[style*="flex-wrap"] > div:has(img[src*="ss-community-group"]) { order: 2 !important; }

  /* 4. Yellow brain flowers — reduce size */
  body.page-id-486 img[src*="ss-brain-flowers"],
  body.page-id-693 img[src*="ss-brain-flowers"],
  body.page-id-4530 img[src*="ss-brain-flowers"],
  body.page-id-4531 img[src*="ss-brain-flowers"] {
    max-width: 180px !important; width: 180px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }

  /* 5. Resilience steps (2 people on stairs) — after resilience text */
  body.page-id-486 div:has(> img[src*="ss-resilience-steps"]),
  body.page-id-693 div:has(> img[src*="ss-resilience-steps"]) { order: 2 !important; }
  body.page-id-4530 div:has(> img[src*="ss-resilience-steps"]) { order: 2 !important; }
  body.page-id-4531 div:has(> img[src*="ss-resilience-steps"]) { order: 2 !important; }

  /* 6. Pink brain connections — after "Maintaining Connections" heading, reduce top space */
  body.page-id-486 div:has(> img[src*="ss-brain-connections"]),
  body.page-id-693 div:has(> img[src*="ss-brain-connections"]),
  body.page-id-4530 div:has(> img[src*="ss-brain-connections"]),
  body.page-id-4531 div:has(> img[src*="ss-brain-connections"]) {
    order: 2 !important; margin-top: 2px !important;
  }

  /* 7. Family with heart (group-connected) — after caregivers text */
  body.page-id-486 div:has(> img[src*="ss-group-connected"]),
  body.page-id-693 div:has(> img[src*="ss-group-connected"]) { order: 2 !important; }
  body.page-id-4530 div:has(> img[src*="ss-group-connected"]) { order: 2 !important; }
  body.page-id-4531 div:has(> img[src*="ss-group-connected"]) { order: 2 !important; }

  /* Also family caregivers — after caregivers text */
  body.page-id-486 div:has(> img[src*="ss-family-caregivers"]),
  body.page-id-693 div:has(> img[src*="ss-family-caregivers"]) { order: 2 !important; }
  body.page-id-4530 div:has(> img[src*="ss-family-caregivers"]) { order: 2 !important; }
  body.page-id-4531 div:has(> img[src*="ss-family-caregivers"]) { order: 2 !important; }

  /* 8. 2-color speech bubbles (2 faces) — reduce size */
  body.page-id-486 img[src*="ss-speech-bubbles"],
  body.page-id-693 img[src*="ss-speech-bubbles"],
  body.page-id-4530 img[src*="ss-speech-bubbles"],
  body.page-id-4531 img[src*="ss-speech-bubbles"] {
    max-width: 180px !important; width: 180px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }

  /* 9. Heart chat (3 dots) — reduce size */
  body.page-id-486 img[src*="ss-heart-chat"],
  body.page-id-693 img[src*="ss-heart-chat"],
  body.page-id-4530 img[src*="ss-heart-chat"],
  body.page-id-4531 img[src*="ss-heart-chat"] {
    max-width: 150px !important; width: 150px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }

  /* 10. Family baking (family of 4) — after Tip #2 title */
  body.page-id-486 div:has(> img[src*="ss-family-baking"]),
  body.page-id-693 div:has(> img[src*="ss-family-baking"]) { order: 2 !important; }
  body.page-id-4530 div:has(> img[src*="ss-family-baking"]) { order: 2 !important; }
  body.page-id-4531 div:has(> img[src*="ss-family-baking"]) { order: 2 !important; }

  /* Also puzzle activity — after Tip #2 title */
  body.page-id-486 div:has(> img[src*="ss-puzzle-activity"]),
  body.page-id-693 div:has(> img[src*="ss-puzzle-activity"]) { order: 2 !important; }
  body.page-id-4530 div:has(> img[src*="ss-puzzle-activity"]) { order: 2 !important; }
  body.page-id-4531 div:has(> img[src*="ss-puzzle-activity"]) { order: 2 !important; }

  /* 11. Mixing bowl — reduce top/bottom space a lot */
  body.page-id-486 div:has(> img[src*="ss-mixing-bowl"]),
  body.page-id-693 div:has(> img[src*="ss-mixing-bowl"]),
  body.page-id-4530 div:has(> img[src*="ss-mixing-bowl"]),
  body.page-id-4531 div:has(> img[src*="ss-mixing-bowl"]) {
    margin-top: 2px !important; margin-bottom: 2px !important;
  }
  body.page-id-486 img[src*="ss-mixing-bowl"],
  body.page-id-693 img[src*="ss-mixing-bowl"],
  body.page-id-4530 img[src*="ss-mixing-bowl"],
  body.page-id-4531 img[src*="ss-mixing-bowl"] {
    margin-top: 2px !important; margin-bottom: 2px !important;
  }

  /* 12. Lady on phone — after Tip #3 title, reduce size */
  body.page-id-486 img[src*="ss-woman-phone"],
  body.page-id-693 img[src*="ss-woman-phone"],
  body.page-id-4530 img[src*="ss-woman-phone"],
  body.page-id-4531 img[src*="ss-woman-phone"] {
    max-width: 180px !important; width: 180px !important;
    height: auto !important; display: block !important; margin: 0 auto !important;
  }
  body.page-id-486 div:has(> img[src*="ss-woman-phone"]),
  body.page-id-693 div:has(> img[src*="ss-woman-phone"]) { order: 2 !important; }
  body.page-id-4530 div:has(> img[src*="ss-woman-phone"]) { order: 2 !important; }
  body.page-id-4531 div:has(> img[src*="ss-woman-phone"]) { order: 2 !important; }

  /* 13. Peer stairs — apple/banana size beside "Leveraging…" heading */
  body.page-id-486 img[src*="ss-peer-stairs"],
  body.page-id-693 img[src*="ss-peer-stairs"] { display: none !important; }
  body.page-id-4530 img[src*="ss-peer-stairs"] { display: none !important; }
  body.page-id-4531 img[src*="ss-peer-stairs"] { display: none !important; }
  body.page-id-486 div:has(> img[src*="ss-peer-stairs"]),
  body.page-id-693 div:has(> img[src*="ss-peer-stairs"]) { display: none !important; }
  body.page-id-4530 div:has(> img[src*="ss-peer-stairs"]) { display: none !important; }
  body.page-id-4531 div:has(> img[src*="ss-peer-stairs"]) { display: none !important; }
  body.page-id-486 h2#peer-support,
  body.page-id-693 h2#peer-support,
  body.page-id-4530 h2#peer-support,
  body.page-id-4531 h2#peer-support {
    display: flex !important; align-items: center !important; gap: 10px !important;
  }
  body.page-id-486 h2#peer-support::after,
  body.page-id-693 h2#peer-support::after,
  body.page-id-4530 h2#peer-support::after,
  body.page-id-4531 h2#peer-support::after {
    content: '';
    display: inline-block; flex-shrink: 0; width: 44px; height: 44px;
    background: url('https://brainhearthealth.ca/wp-content/uploads/2026/05/ss-peer-stairs.png') no-repeat center/contain;
  }

  /* 14. Group clap (highfive) — below "humans are social beings" text */
  body.page-id-486 div:has(> img[src*="ss-highfive-group"]),
  body.page-id-693 div:has(> img[src*="ss-highfive-group"]) { order: 2 !important; }
  body.page-id-4530 div:has(> img[src*="ss-highfive-group"]) { order: 2 !important; }
  body.page-id-4531 div:has(> img[src*="ss-highfive-group"]) { order: 2 !important; }

  /* Group phones — after phone research text */
  body.page-id-486 div[style*="flex-wrap"] > div:has(img[src*="ss-group-phones"]),
  body.page-id-693 div[style*="flex-wrap"] > div:has(img[src*="ss-group-phones"]) { order: 2 !important; }
  body.page-id-4530 div[style*="flex-wrap"] > div:has(img[src*="ss-group-phones"]) { order: 2 !important; }
  body.page-id-4531 div[style*="flex-wrap"] > div:has(img[src*="ss-group-phones"]) { order: 2 !important; }

  /* 15. Group on chairs (peer-support-group-3) — clear float, after hint text */
  body.page-id-486 img[src*="ss-peer-support-group-3"],
  body.page-id-693 img[src*="ss-peer-support-group-3"],
  body.page-id-4530 img[src*="ss-peer-support-group-3"],
  body.page-id-4531 img[src*="ss-peer-support-group-3"] {
    float: none !important; max-width: 260px !important; width: 260px !important;
    height: auto !important; display: block !important; margin: 8px auto !important;
  }
  body.page-id-486 div:has(> img[src*="ss-peer-support-group-3"]),
  body.page-id-693 div:has(> img[src*="ss-peer-support-group-3"]),
  body.page-id-4530 div:has(> img[src*="ss-peer-support-group-3"]),
  body.page-id-4531 div:has(> img[src*="ss-peer-support-group-3"]) {
    overflow: visible !important; margin: 4px 0 !important;
  }

  /* Peer support group 4 — after hint text */
  body.page-id-486 div[style*="flex-wrap"] > div:has(img[src*="ss-peer-support-group-4"]),
  body.page-id-693 div[style*="flex-wrap"] > div:has(img[src*="ss-peer-support-group-4"]) { order: 2 !important; }
  body.page-id-4530 div[style*="flex-wrap"] > div:has(img[src*="ss-peer-support-group-4"]) { order: 2 !important; }
  body.page-id-4531 div[style*="flex-wrap"] > div:has(img[src*="ss-peer-support-group-4"]) { order: 2 !important; }

  /* 16. Women group — after community activities text */
  body.page-id-486 div:has(> img[src*="ss-women-group"]),
  body.page-id-693 div:has(> img[src*="ss-women-group"]) { order: 2 !important; }
  body.page-id-4530 div:has(> img[src*="ss-women-group"]) { order: 2 !important; }
  body.page-id-4531 div:has(> img[src*="ss-women-group"]) { order: 2 !important; }

  /* 17. Community embrace (group hug) — after "community activities" text */
  body.page-id-486 div:has(> img[src*="ss-community-embrace"]),
  body.page-id-693 div:has(> img[src*="ss-community-embrace"]) { order: 2 !important; }
  body.page-id-4530 div:has(> img[src*="ss-community-embrace"]) { order: 2 !important; }
  body.page-id-4531 div:has(> img[src*="ss-community-embrace"]) { order: 2 !important; }

  /* 18. Heart stethoscope — below "Singing in a choir…" text */
  body.page-id-486 div:has(> img[src*="ss-heart-stethoscope"]),
  body.page-id-693 div:has(> img[src*="ss-heart-stethoscope"]) { order: 2 !important; }
  body.page-id-4530 div:has(> img[src*="ss-heart-stethoscope"]) { order: 2 !important; }
  body.page-id-4531 div:has(> img[src*="ss-heart-stethoscope"]) { order: 2 !important; }

  /* 19. Hide references section on mobile */
  body.page-id-486 h2#references,
  body.page-id-693 h2#references { display: none !important; }
  body.page-id-4530 h2#references { display: none !important; }
  body.page-id-4531 h2#references { display: none !important; }
  body.page-id-486 h2#references ~ div,
  body.page-id-486 h2#references ~ p,
  body.page-id-486 h2#references ~ ol,
  body.page-id-693 h2#references ~ div,
  body.page-id-4530 h2#references ~ div,
  body.page-id-4531 h2#references ~ div,
  body.page-id-693 h2#references ~ p,
  body.page-id-4530 h2#references ~ p,
  body.page-id-4531 h2#references ~ p,
  body.page-id-693 h2#references ~ ol { display: none !important; }
  body.page-id-4530 h2#references ~ ol { display: none !important; }
  body.page-id-4531 h2#references ~ ol { display: none !important; }
}

/* ── Reference superscripts — consistent small size across all guide pages ── */
#smg-main-body .smg-ref sup,
#smg-main .smg-ref sup { font-size: 10px !important; font-weight: normal !important; }

/* ── Hide references section (all screen sizes) ───────────── */
body.page-id-482 h3#references,
body.page-id-692 h3#references,
body.page-id-482 h3#references + ol,
body.page-id-692 h3#references + ol { display: none !important; }


/* ── Footer mobile fix ─────────────────────────────────────── */
@media (max-width: 1024px) {
  footer.et-l--footer .et_pb_row,
  footer.et-l--footer .et_pb_column,
  footer.et-l--footer .et_pb_text_inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  footer.et-l--footer p {
    text-align: left !important;
    overflow: visible !important;
  }
}