/* =========================================================
   EAT FIT GET FIT - shared stylesheet for redesign mockups
   Palette pulled from the brand logo:
   green-deep #14652b, green #2f9e4f, green-light #8fd15c,
   amber #fbb314, orange #fa5b04, cream #fbf7ef, ink #1d2b20
   ========================================================= */

:root {
  --green-deep: #14652b;
  --green: #2f9e4f;
  --green-light: #8fd15c;
  --amber: #fbb314;
  --orange: #fa5b04;
  --cream: #fbf7ef;
  --cream-2: #f3ecdd;
  --ink: #1d2b20;
  --ink-soft: #46564a;
  --white: #ffffff;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-eyebrow: "Inter", sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 45px -25px rgba(20, 101, 43, 0.35);
  --max-width: 1180px;
}

* { box-sizing: border-box !important; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body) !important;
  color: var(--ink);
  background: var(--cream) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

img { max-width: 100% !important; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  width: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-display) !important;
  color: var(--green-deep);
  line-height: 1.12 !important;
  margin: 0 0 0.5em;
  font-weight: 600 !important;
}

h1 { font-size: clamp(2.4rem, 4.4vw, 3.8rem) !important; }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem) !important; }
h3 { font-size: 1.3rem !important; }

p { margin: 0 0 1em; color: var(--ink-soft); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-eyebrow);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--orange) !important;
  border-radius: 2px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--font-body);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
  background: var(--orange) !important;
  color: var(--white);
  box-shadow: 0 14px 28px -14px rgba(250, 91, 4, 0.65);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(250, 91, 4, 0.75); }

.btn-outline {
  background: transparent !important;
  border-color: var(--green-deep);
  color: var(--green-deep);
}
.btn-outline:hover { background: var(--green-deep) !important; color: var(--white); }

.btn-link {
  color: var(--green-deep);
  font-weight: 700;
  border-bottom: 2px solid var(--green-light);
  padding: 2px 0;
  border-radius: 0;
}
.btn-link:hover { border-color: var(--orange); color: var(--orange); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 239, 0.92) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(20, 101, 43, 0.1);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.site-logo img { height: 58px !important; width: auto !important; max-width: none !important; }

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.site-nav a:hover { color: var(--green-deep); }

/* Dropdown nav (WordPress menu: parent item with children, e.g. Discover: Recipes, Blog, Glossary) */
.site-nav li.menu-item-has-children {
  position: relative;
  padding-bottom: 22px;
  margin-bottom: -22px;
}
.site-nav li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-nav li.menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
}
.site-nav ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 170px;
  background: var(--white) !important;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 10px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.site-nav li.menu-item-has-children:hover ul.sub-menu {
  opacity: 1;
  visibility: visible;
}
.site-nav ul.sub-menu li { width: 100%; }
.site-nav ul.sub-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 600;
}
.site-nav ul.sub-menu a:hover { background: var(--cream) !important; }
.site-nav ul.sub-menu a::after { display: none; }

.header-cta { display: flex; align-items: center; gap: 22px; }

.search-icon-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease;
}
.search-icon-link:hover { background: var(--cream-2) !important; color: var(--green-deep); }
.search-icon-link svg { width: 18px; height: 18px; }

.header-search-panel {
  max-height: 0;
  overflow: hidden;
  background: var(--white) !important;
  border-top: 1px solid transparent;
  transition: max-height 0.2s ease;
}
.header-search-panel.is-open {
  max-height: 90px;
  border-top-color: rgba(20, 101, 43, 0.1);
}
.header-search-form {
  display: flex;
  gap: 10px;
  padding: 16px 28px;
}
.header-search-form input {
  flex: 1;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--cream-2);
  background: var(--cream) !important;
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--ink);
}
.header-search-form input:focus { outline: 2px solid var(--green-light); }
.header-search-form button { border: none; cursor: pointer; }

.nav-toggle { display: none; }

/* Soledad's parent theme injects its own off-canvas "Header Style 1"
   sidebar nav markup directly, via a hook (wp_body_open or wp_footer)
   that fires regardless of which header.php/footer.php the active
   theme uses. Since we've fully replaced the header with our own
   design, we don't want Soledad's version rendering at all, normally
   it would stay hidden as an off-canvas panel via Soledad's own
   header.php initializing it, but since we don't use that file, the
   hiding never happens. Force it off here instead. */
   
#sidebar-nav,
a.header-1.mstyle-default,
a#close-sidebar-nav {
  display: none !important;
}

/* Section dividers echoing the logo's arc */
.arc-divider {
  width: 100%;
  height: 60px;
  display: block;
}

section { position: relative; }

.section-pad { padding: 90px 0; }

/* Footer */
.site-footer {
  background: var(--green-deep) !important;
  color: #d9ead9;
  padding: 70px 0 26px;
}

.site-footer h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.site-footer a { color: #d9ead9; }
.site-footer a:hover { color: var(--amber); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }

.social-row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.social-row a:hover {
  background: var(--amber) !important;
  border-color: var(--amber);
}
.social-row svg { width: 16px; height: 16px; fill: var(--white); }

.footer-cta-box {
  background: var(--cream) !important;
  border-radius: var(--radius-md);
  padding: 22px;
}
.footer-cta-box p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 16px; }
.footer-cta-box .btn-primary {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  padding: 13px 18px;
  font-size: 0.88rem;
}

.footer-bottom {
  padding-top: 22px;
  font-size: 0.85rem;
  color: #b7d4b8;
  text-align: center;
}

/* Utility */
.pill-tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--cream-2) !important;
  color: var(--green-deep);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Post grid (Recipes, Blog, Blog Category) */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
}
.grid-card {
  background: var(--white) !important;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}
.grid-card .thumb { height: 190px; overflow: hidden; }
.grid-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.grid-card:hover .thumb img { transform: scale(1.05); }
.grid-card .body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.grid-card h3 { font-family: var(--font-display); font-size: 1.08rem; color: var(--green-deep); margin: 0 0 10px; }
.grid-card p { font-size: 0.9rem; margin-bottom: 16px; flex: 1; }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 56px;
}
.pagination a, .pagination span {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--green-deep);
  background: var(--white) !important;
  box-shadow: var(--shadow-soft);
}
.pagination a:hover { background: var(--green-deep) !important; color: var(--white); }
.pagination .current { background: var(--orange) !important; color: var(--white); box-shadow: none; }

@media (max-width: 980px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* Mobile nav toggle (hamburger) and panel.
   Hidden on desktop; on mobile, replaces .site-nav (which stays display:none
   below 900px) as the way to reach the menu. */
.mobile-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.mobile-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-panel {
  display: none;
  max-height: 0;
  overflow: hidden;
  background: var(--white) !important;
  border-top: 1px solid transparent;
  transition: max-height 0.25s ease;
}
.mobile-nav-panel.is-open {
display: block;
  max-height: 80vh;
  overflow-y: auto;
  border-top-color: rgba(20, 101, 43, 0.1);
}
.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 10px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-nav-list a {
  display: block;
  padding: 12px 0;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  border-bottom: 1px solid var(--cream-2);
}
.mobile-nav-list .sub-menu {
  list-style: none;
  margin: 0 0 4px;
  padding-left: 16px;
}
.mobile-nav-list .sub-menu a {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding: 10px 0;
  border-bottom: none;
}
.mobile-nav-cta {
  display: block;
  width: 100%;
  text-align: center;
  margin: 18px 28px 0;
  width: calc(100% - 56px);
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
  .header-cta .btn.desktop-only { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 901px) {
  .mobile-nav-toggle, .mobile-nav-panel { display: none !important; }
}

@media (max-width: 600px) {
  .section-pad { padding: 56px 0; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   HOMEPAGE
   ========================================================= */
/* Homepage-only styles */
  .hero {
    padding: 64px 0 0;
    overflow: hidden;
  }
  .hero .wrap {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 40px;
  }
  .hero-copy p.lede { font-size: 1.15rem; max-width: 46ch; }
  .hero-actions { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
  .hero-art { position: relative; text-align: center; }
  .hero-art::before {
    content: "";
    position: absolute;
    inset: 6% 10%;
    background: var(--green-light) !important;
    border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    opacity: 0.35;
    z-index: 0;
  }
  .hero-art img { position: relative; z-index: 1; max-height: 460px; margin: 0 auto; }

  .challenges { background: var(--white) !important; }
  .challenges .wrap { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
  .challenges-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
  .challenge-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
  .challenge-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-weight: 600;
    color: var(--ink);
    background: var(--cream) !important;
    border-radius: var(--radius-sm);
    padding: 14px 18px;
  }
  .challenge-list li::before {
    content: "";
    flex: none;
    width: 10px; height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--orange) !important;
  }

  .media-strip { text-align: center; }
  .media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
  }
  .media-grid img { border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }

  .media-video {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
  }
  .media-video img {
    box-shadow: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.25s ease;
  }
  .media-video:hover img { transform: scale(1.05); }
  .media-video .play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(29, 43, 32, 0.55) !important;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .media-video .play-btn svg { width: 22px; height: 22px; fill: var(--white); margin-left: 3px; }
  .media-video:hover .play-btn { background: var(--orange) !important; transform: translate(-50%, -50%) scale(1.08); }

  .testimonials { background: var(--green-deep) !important; color: var(--white); }
  .testimonials h2, .testimonials .eyebrow { color: var(--white); }
  .testimonials .eyebrow::before { background: var(--amber) !important; }
  .t-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 40px;
  }
  .t-card {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-md);
    padding: 26px;
  }
  .t-card p { color: #e7f2e6; font-size: 0.96rem; }
  .t-person { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
  .t-person img { width: 40px; height: 40px; border-radius: 50%; background: var(--amber) !important; padding: 3px; }
  .t-person .name { font-weight: 700; color: var(--white); }
  .t-person .role { font-size: 0.8rem; color: #b7d4b8; }

  .help-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
  .help-card {
    background: var(--white) !important;
    border-radius: var(--radius-md);
    padding: 30px 24px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
  }
  .help-card .num { font-family: var(--font-display); color: var(--green-light); font-size: 1.6rem; margin-bottom: 10px; }
  .help-card p { flex: 1; font-size: 0.94rem; }

  .next-section { background: var(--cream-2) !important; }
  .next-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 50px;
    position: relative;
  }
  .next-steps::before {
    content: "";
    position: absolute;
    top: 34px; left: 8%; right: 8%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--green-light) 0 10px, transparent 10px 18px) !important;
  }
  .next-step { text-align: center; padding: 0 14px; position: relative; }
  .next-step .icon {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: var(--white) !important;
    border: 2px solid var(--green-light);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    position: relative; z-index: 1;
  }
  .next-step .icon img { width: 32px; height: 32px; }
  .next-step h4 { font-family: var(--font-body); font-size: 0.98rem; color: var(--ink); margin: 0; }
  .next-cta { text-align: center; margin-top: 48px; }

  .unique-section .wrap { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .unique-intro { max-width: 70ch; }
  .unique-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 20px;
  }
  .unique-card {
    background: var(--white) !important;
    border-radius: var(--radius-md);
    padding: 28px;
    text-align: center;
    box-shadow: var(--shadow-soft);
  }
  .unique-card img { width: 64px; height: 64px; margin: 0 auto 16px; }

  .card-row-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
  }
  .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
  .cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
  .post-card {
    background: var(--white) !important;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
  }
  .post-card img { height: 190px; width: 100%; object-fit: cover; }
  .post-card-body { padding: 22px; }
  .post-card h4 { font-family: var(--font-display); font-size: 1.08rem; color: var(--green-deep); margin: 0 0 10px; }
  .post-card p { font-size: 0.9rem; margin-bottom: 14px; }


  @media (max-width: 980px) {
    .hero .wrap { grid-template-columns: 1fr; }
    .challenges .wrap { grid-template-columns: 1fr; }
    .media-grid, .t-grid, .help-grid, .next-steps, .unique-grid, .cards-3, .cards-2 { grid-template-columns: 1fr 1fr; }
    .next-steps::before { display: none; }
  }
  @media (max-width: 620px) {
    .media-grid, .t-grid, .help-grid, .next-steps, .unique-grid, .cards-3, .cards-2 { grid-template-columns: 1fr; }
  }


/* =========================================================
   MY STORY
   ========================================================= */
.page-hero { padding: 56px 0 0; }

/* =========================================================
   SHARED: simple centered page hero + breadcrumb
   Used by Why Eat Fit Get Fit, Testimonials, Recipes, Blog,
   Blog Category, and other pages with a plain centered header
   instead of the two-column hero layout above. Consolidated
   here as a single definition (previously duplicated once per
   page during the original build, which caused later duplicates
   to silently override earlier ones since they share a selector).
   ========================================================= */
.breadcrumb { font-size: 0.82rem; color: var(--ink-soft); padding: 22px 0 0; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--green-deep); }
.breadcrumb .sep { margin: 0 6px; opacity: 0.6; }

.page-hero.simple { padding: 70px 0 20px; text-align: center; }
.page-hero.simple .wrap { max-width: 820px; margin-left: auto; margin-right: auto; }
.page-hero.simple .eyebrow { justify-content: center; display: flex; }
.page-hero.simple .lede { font-size: 1.08rem; }
  .page-hero:not(.simple) .wrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
  }
  .page-hero:not(.simple) .lede { font-size: 1.1rem; max-width: 52ch; }
  .page-hero .portrait {
    position: relative;
    text-align: center;
  }
  .page-hero .portrait::before {
    content: "";
    position: absolute;
    inset: 4% 8%;
    background: var(--green-light) !important;
    border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    opacity: 0.35;
    z-index: 0;
  }
  .page-hero .portrait img {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-soft) !important;
    filter: none !important;
    transform: none !important;
    border: none !important;
    width: 82% !important;
    height: 440px !important;
    max-height: none !important;
    margin: 0 auto;
    object-fit: cover !important;
    display: block !important;
  }

  .story-section { background: var(--white) !important; }
  .story-copy { max-width: 74ch; margin: 30px auto 0; }
  .story-copy p { font-size: 1.02rem; }

  .benefits-section .wrap { max-width: 900px; }
  .benefits-grid {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .benefits-grid li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--cream-2) !important;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-weight: 600;
  }
  .benefits-grid li::before {
    content: "";
    flex: none;
    width: 22px; height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--green) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M5 13l4 4L19 7'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
  }

  .gallery-section { background: var(--cream-2) !important; }
  .gallery-grid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .gallery-grid figure {
    margin: 0;
    background: var(--white) !important;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
  }
  .gallery-grid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
  }
  @media (max-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  }

  .achievements-section .wrap { display: grid; grid-template-columns: 1fr; }
  .achievement-card {
    margin-top: 30px;
    max-width: 460px;
    background: var(--white) !important;
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-soft);
  }
  .achievement-card img { border-radius: var(--radius-sm); }
  .achievement-card p { margin: 14px 0 0; font-weight: 600; color: var(--green-deep); }

  @media (max-width: 900px) {
    .page-hero:not(.simple) .wrap { grid-template-columns: 1fr; }
    .page-hero .portrait { order: -1; }
    .benefits-grid { grid-template-columns: 1fr; }
  }


/* =========================================================
   PROGRAMS
   ========================================================= */
  .page-hero:not(.simple) .wrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
  }
  .page-hero .hero-actions { display: flex; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
  .page-hero .art { position: relative; text-align: center; }
  .page-hero .art::before {
    content: "";
    position: absolute;
    inset: 4% 8%;
    background: var(--amber) !important;
    border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    opacity: 0.3;
    z-index: 0;
  }
  .page-hero .art img { position: relative; z-index: 1; max-height: 420px; margin: 0 auto; }

  .intro-section { background: var(--white) !important; }
  .intro-copy { max-width: 76ch; margin: 26px auto 0; }
  .intro-copy p { font-size: 1.02rem; }

  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 44px;
    align-items: start;
  }
  .price-card {
    background: var(--white) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    border: 2px solid transparent;
  }
  .price-card.featured { border-color: var(--orange); }
  .price-card-media { height: 190px; overflow: hidden; position: relative; }
  .price-card-media img { width: 100%; height: 100%; object-fit: cover; }
  .badge-best {
    position: absolute;
    top: 16px; right: 16px;
    background: var(--orange) !important;
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border-radius: 999px;
  }
  .price-card-body { padding: 30px; }
  .price-card-body .plan-tag { color: var(--orange); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
  .price-card-body h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--green-deep); margin-bottom: 18px; }
  .price-features { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
  .price-features li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.92rem;
    color: var(--ink-soft);
  }
  .price-features li::before {
    content: "";
    flex: none;
    width: 8px; height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--green) !important;
  }
  .price-features li.muted::before { background: #cbd6cc !important; }
  .price-features li.muted { color: #8a978c; }
  .price-meta { font-size: 0.85rem; color: var(--green-deep); font-weight: 700; margin-bottom: 20px; }

  .achieve-section { background: var(--cream-2) !important; }
  .achieve-grid {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .achieve-grid li {
    background: var(--white) !important;
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    box-shadow: var(--shadow-soft);
    font-weight: 600;
    color: var(--ink);
  }

  .pillars-section { background: var(--white) !important; }
  .pillars-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 44px;
  }
  .pillar-card { text-align: center; }
  .pillar-card img { width: 62px; height: 62px; margin: 0 auto 14px; }
  .pillar-card h4 { font-family: var(--font-display); font-size: 1.02rem; color: var(--green-deep); margin-bottom: 8px; }
  .pillar-card p { font-size: 0.88rem; }

  @media (max-width: 980px) {
    .page-hero:not(.simple) .wrap { grid-template-columns: 1fr; }
    .page-hero .art { order: -1; }
    .pricing-grid { grid-template-columns: 1fr; }
    .achieve-grid { grid-template-columns: 1fr; }
    .pillars-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 620px) {
    .pillars-grid { grid-template-columns: 1fr; }
  }


/* =========================================================
   WHY EAT FIT GET FIT
   ========================================================= */
    
  .split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .split-row.reverse .split-img { order: 2; }
  .split-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
  .split-img img { width: 100%; height: 100%; object-fit: cover; }
  .split-copy p { font-size: 1.02rem; }

  .stats-section { background: var(--green-deep) !important; color: var(--white); }
  .stats-section .eyebrow, .stats-section h2 { color: var(--white); }
  .stats-section .eyebrow::before { background: var(--amber) !important; }
  .stats-grid {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .stats-grid li {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    font-weight: 600;
    font-size: 0.94rem;
    color: #e7f2e6;
  }

  .cta-section { background: var(--cream-2) !important; text-align: center; }
  .cta-section .wrap { max-width: 640px; }
  .cta-section .eyebrow { justify-content: center; display: flex; }

  @media (max-width: 900px) {
    .split-row { grid-template-columns: 1fr; }
    .split-row.reverse .split-img { order: -1; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px) {
    .stats-grid { grid-template-columns: 1fr; }
  }


/* =========================================================
   TESTIMONIALS
   ========================================================= */
.reviews-columns {
  column-count: 2;
  column-gap: 24px;
  margin-top: 20px;
}
.review-card {
  break-inside: avoid;
  background: var(--white) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 26px;
  margin-bottom: 24px;
}
.stars { display: flex; gap: 3px; margin-bottom: 14px; }
.stars svg { width: 16px; height: 16px; fill: var(--amber); }
.review-card p { font-size: 0.94rem; color: var(--ink-soft); white-space: pre-line; }
.review-person { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cream-2); }
.review-person .name { font-weight: 700; color: var(--green-deep); font-family: var(--font-display); font-size: 1.02rem; }
.review-person .role { font-size: 0.82rem; color: var(--ink-soft); }

@media (max-width: 800px) {
  .reviews-columns { column-count: 1; }
}


/* =========================================================
   LOW CARB GLOSSARY
   ========================================================= */
.glossary-hero { padding: 60px 0 0; }
  .glossary-hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
  .glossary-hero .lede { font-size: 1.05rem; max-width: 56ch; }
  .glossary-hero .art img { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); width: 100%; }

  .jump-nav {
    position: sticky;
    top: 78px;
    z-index: 30;
    background: var(--white) !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 14px 18px;
    margin: 40px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }
  .jump-nav a, .jump-nav span.disabled {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
  }
  .jump-nav a { color: var(--green-deep); }
  .jump-nav a:hover { background: var(--orange) !important; color: var(--white); }
  .jump-nav span.disabled { color: #c7d1c8; }

  .letter-group { display: grid; grid-template-columns: 90px 1fr; gap: 30px; padding: 34px 0; border-bottom: 1px solid var(--cream-2); scroll-margin-top: 130px; }
  .letter-marker { font-family: var(--font-display); font-size: 3rem; color: var(--green-light); line-height: 1 !important; }
  /* Term entries come straight from the editor as <p><strong>Term</strong>: definition</p>,
     styled here rather than requiring a special block structure in the editor. */
  .term-list { display: grid; gap: 18px; }
  .term-list p { font-size: 0.94rem; margin: 0; color: var(--ink-soft); }
  .term-list p strong { display: block; font-family: var(--font-display); font-size: 1.06rem; color: var(--green-deep); margin-bottom: 4px; }

  @media (max-width: 900px) {
    .glossary-hero .wrap { grid-template-columns: 1fr; }
    .letter-group { grid-template-columns: 1fr; gap: 10px; }
    .letter-marker { font-size: 2rem; }
  }


/* =========================================================
   SINGLE (shared by blog posts and recipes, single.php)
   ========================================================= */

.post-header { padding: 20px 0 30px; max-width: 820px; }
.post-header h1 { margin-bottom: 8px; }
.post-subtitle { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); font-size: 1.1rem; margin-bottom: 14px; }
.post-meta-row { display: flex; align-items: center; gap: 14px; font-size: 0.84rem; color: var(--ink-soft); }
.post-meta-row .views { display: inline-flex; align-items: center; gap: 5px; }

.post-featured-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); max-width: 820px; margin: 0 auto; }
.post-featured-img img { width: 100%; display: block; }

.post-body-wrap { max-width: 820px; margin: 0 auto; padding: 40px 0 0; }
.toc-box {
  background: var(--cream-2) !important;
  border-radius: var(--radius-md);
  padding: 22px 26px;
  margin-bottom: 36px;
}
.toc-box .toc-title { font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 12px; }
.toc-box ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.toc-box a { color: var(--ink-soft); font-size: 0.92rem; }
.toc-box a:hover { color: var(--orange); }

.post-content h2 { margin-top: 40px; font-size: 1.5rem; }
.post-content h3 { margin-top: 24px; color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; }
.post-content p { font-size: 1rem; }
.post-content .citation { font-size: 0.8rem; color: #9aa89b; }

.related-section { background: var(--cream-2) !important; }

@media (max-width: 700px) {
  .post-subtitle { font-size: 1rem; }
}

/* WP Recipe Maker overrides, restyled to match our card design.
   These target the plugin's real output classes (confirmed against the
   live site's rendered recipe post HTML) since the recipe card is
   inserted automatically into the_content() via the plugin's own
   shortcode already saved in each recipe post, we don't render it
   ourselves. If WPRM's markup changes after a plugin update, re-check
   these selectors against a live recipe post's page source. */
.post-content .wprm-recipe-container {
  margin: 40px 0;
  background: var(--white) !important;
  border: 1px solid var(--cream-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  padding: 30px;
}
.post-content .wprm-recipe-name { font-family: var(--font-display); color: var(--green-deep); font-size: 1.5rem; margin: 10px 0 6px; }
.post-content .wprm-recipe-summary { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 16px; }
.post-content .wprm-rating-star { color: var(--amber); }
.post-content .wprm-recipe-times-container,
.post-content .wprm-recipe-details-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 16px 0;
  margin: 16px 0;
  border-top: 1px solid var(--cream-2);
  border-bottom: 1px solid var(--cream-2);
}
.post-content .wprm-recipe-details-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 4px; }
.post-content .wprm-recipe-time, .post-content .wprm-recipe-details { font-weight: 700; color: var(--green-deep); font-family: var(--font-display); }
.post-content .wprm-recipe-course-container,
.post-content .wprm-recipe-cuisine-container,
.post-content .wprm-recipe-servings-container,
.post-content .wprm-recipe-author-container {
  display: inline-flex;
  gap: 6px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0 20px 10px 0;
}
.post-content .wprm-recipe-ingredients-header,
.post-content .wprm-recipe-instructions-header,
.post-content .wprm-recipe-equipment-header,
.post-content .wprm-recipe-notes-header {
  font-family: var(--font-display);
  color: var(--green-deep);
  font-size: 1.1rem;
  margin: 24px 0 14px;
}
.post-content ul.wprm-recipe-ingredients { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.post-content li.wprm-recipe-ingredient { font-size: 0.92rem; }
.post-content .wprm-recipe-ingredient-amount,
.post-content .wprm-recipe-ingredient-unit { font-weight: 700; color: var(--green-deep); }
.post-content ul.wprm-recipe-instructions { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: wprm-step; }
.post-content li.wprm-recipe-instruction { display: flex; gap: 12px; font-size: 0.94rem; color: var(--ink-soft); }
.post-content li.wprm-recipe-instruction::before {
  counter-increment: wprm-step;
  content: counter(wprm-step);
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cream-2) !important;
  color: var(--green-deep);
  font-weight: 700;
  font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
}
.post-content .wprm-recipe-notes-container { background: var(--cream-2) !important; border-radius: var(--radius-sm); padding: 18px 20px; margin-top: 20px; }
.post-content .wprm-nutrition-label-container { font-size: 0.85rem; color: var(--ink-soft); margin-top: 16px; }

/* WordPress content-embedded images (inserted into the post body via the
   editor, as opposed to the featured image at the top of the post).
   Covers both the classic editor's [caption] shortcode output
   (.wp-caption) and the block editor's <figure class="wp-block-image">.
   Without this, a captioned image set to "Wide" or "Full width"
   alignment in the editor uses WordPress/Soledad's default alignfull
   CSS to break out of the content column and span the entire browser
   viewport, ignoring our narrower reading-width column entirely. */
.post-content .alignfull,
.post-content .alignwide {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
.post-content .wp-caption,
.post-content figure.wp-block-image,
.post-content figure {
  max-width: 100% !important;
  width: auto !important;
  margin: 1.6em auto !important;
}
.post-content .wp-caption img,
.post-content figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}
.post-content .wp-caption-text,
.post-content figcaption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  font-style: italic;
  margin-top: 10px;
  padding: 0 10px;
}


/* =========================================================
   BOOK AN APPOINTMENT
   ========================================================= */
      
  .appt-hero { padding: 30px 0 0; text-align: center; }
  .appt-hero .wrap { max-width: 700px; }
  .appt-hero .eyebrow { justify-content: center; display: flex; }
  .appt-hero .lede { font-size: 1.05rem; }

  .appt-widget-shell {
    max-width: 760px;
    margin: 40px auto 0;
    background: var(--white) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 40px;
    text-align: left;
  }
  /* The Appointments plugin renders its own form markup inside this shell
     via [ssa_booking]. These are light-touch overrides so its default
     inputs/buttons don't clash with our design, adjust selectors here
     once you can see the plugin's actual rendered class names on staging. */
  .appt-widget-shell input,
  .appt-widget-shell select,
  .appt-widget-shell textarea {
    font-family: var(--font-body);
    border-radius: var(--radius-sm);
    border: 1px solid var(--cream-2);
  }
  .appt-widget-shell button,
  .appt-widget-shell input[type="submit"] {
    font-family: var(--font-body);
    font-weight: 700;
    border-radius: 999px;
    background: var(--orange) !important;
    color: var(--white);
    border: none;
  }


/* =========================================================
   SEARCH RESULTS
   ========================================================= */
      
  .search-hero { padding: 24px 0 0; }
  .search-hero h1 { margin-bottom: 4px; }
  .search-hero .result-count { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 30px; }

  .search-form-box {
    display: flex;
    gap: 10px;
    max-width: 520px;
    margin-bottom: 40px;
  }
  .search-form-box input {
    flex: 1;
    padding: 14px 18px;
    border-radius: 999px;
    border: 1px solid var(--cream-2);
    background: var(--white) !important;
    font-family: var(--font-body);
    font-size: 0.94rem;
    color: var(--ink);
  }
  .search-form-box input:focus { outline: 2px solid var(--green-light); }
  .search-form-box button {
    border: none;
    cursor: pointer;
  }

  .empty-state {
    text-align: center;
    padding: 70px 30px;
    background: var(--cream-2) !important;
    border-radius: var(--radius-lg);
  }
  .empty-state h3 { margin-bottom: 10px; }


/* =========================================================
   404 NOT FOUND
   ========================================================= */
.error-section {
    padding: 90px 0;
    text-align: center;
  }
  .error-section .wrap { max-width: 620px; }
  .error-glyph {
    font-family: var(--font-display);
    font-size: 7rem;
    font-weight: 700;
    color: var(--green-light);
    line-height: 1 !important;
    margin-bottom: 10px;
    position: relative;
  }
  .error-section h1 { margin-bottom: 12px; }
  .error-section .lede { font-size: 1.05rem; margin-bottom: 34px; }

  .error-search {
    display: flex;
    gap: 10px;
    max-width: 440px;
    margin: 0 auto 40px;
  }
  .error-search input {
    flex: 1;
    padding: 14px 18px;
    border-radius: 999px;
    border: 1px solid var(--cream-2);
    background: var(--white) !important;
    font-family: var(--font-body);
    font-size: 0.94rem;
  }
  .error-search button { border: none; cursor: pointer; }

  .error-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }


/* =========================================================
   MEDIA
   ========================================================= */
.media-list {
  max-width: 780px;
  margin: 0 auto;
}
.media-entry {
  padding: 26px 0;
  border-bottom: 1px solid var(--cream-2);
}
.media-entry:first-child { padding-top: 0; }
.media-entry h2 { font-size: 1.15rem; margin-bottom: 8px; }
.media-entry h2 a { color: var(--green-deep); }
.media-entry h2 a:hover { color: var(--orange); }
.media-meta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px !important;
}
.media-entry p:last-child { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 0; }


/* =========================================================
   LIGHTBOX (gallery images, e.g. My Story press clippings)
   ========================================================= */
.gallery-grid a { display: block; cursor: zoom-in; }

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 30, 22, 0.92) !important;
  align-items: center;
  justify-content: center;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-image {
  max-width: 88vw;
  max-height: 86vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--white);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--orange) !important; }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--white);
  font-size: 1.3rem;
  cursor: pointer;
}
.lightbox-nav:hover { background: var(--orange) !important; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@media (max-width: 600px) {
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
}