/* =======================================================================
   HOMEPAGE STYLES
   ======================================================================= */

:root {
  --sticky-header-height: 107px;
  --top-bar-height: 25px;
  --eg-anchor-offset: calc(var(--sticky-header-height, 107px) + var(--top-bar-height, 25px) + 10px);
  --eg-accent: #2c5e54;
  --eg-accent-rgb: 44,94,84;
  --eg-accent-light: #bfe2dc;
  --eg-brand-blue-strong: #1f6d86;
  --eg-brand-blue-soft: #d7edf7;
  --eg-brand-teal-strong: #1f7a73;
  --eg-brand-teal-soft: #d3eeea;
  --eg-brand-green-soft: #cce9dc;
  --eg-brand-green-strong: #2c5e54;
}

/* Header is ~107px on desktop, ~62px on mobile — JS measures the real value
   on load/resize and overrides --eg-anchor-offset. These are first-paint
   fallbacks used before JS runs (critical on mobile, where the desktop
   fallback would reserve ~80px of empty space under the header). */

html {
  scroll-padding-top: var(--eg-anchor-offset);
}

:target {
  scroll-margin-top: var(--eg-anchor-offset);
}

/* Admin bar already pushes .site-inner down via body margin — do NOT add
   its height here or the padding will double-count it. */
body.admin-bar {
  --eg-anchor-offset: calc(var(--sticky-header-height, 107px) + var(--top-bar-height, 25px) + 10px);
}

/* Mobile first-paint fallback — mobile header is much shorter than desktop.
   Using the desktop 107px fallback here caused a visible white gap before JS
   measured the real header. Overridden by JS within a frame, but gives an
   accurate starting point for SSR/first-paint. */
@media only screen and (max-width: 600px) {
  :root {
    --sticky-header-height: 62px;
  }
}

/* Homepage Wrapper & Top Caption */
.homepage-wrapper {
  padding-top: 0 !important;
}

.home-top-caption {
    font-family: 'blanket', sans-serif;
    font-size: 18px;
    padding-top: 0px;
    padding-left: 10%;
    font-weight: 300; /* Light */
    font-style: normal;
}

/* Homepage Responsive for Top Caption */
@media only screen and (max-width: 600px) {
  .home-top-caption {
    font-size: 12px;
  }
}

/* Hide Entry Header on Homepage */
.home .entry-header { display:none; }

/* =======================================================================
   HERO, CATEGORY GRID & INFO SPLIT
   ======================================================================= */
.eg-hero, .eg-cats--grid { box-sizing:border-box; }
.eg-hero *, .eg-cats--grid * { box-sizing:inherit; }

/* buttons and links */
.eg-btn {
  display:inline-block;
  padding:.6rem 1rem;
  border:1px solid var(--eg-accent);
  border-radius:6px;
  text-decoration:none;
  color:var(--eg-accent);
  background:#fff;
  font-weight:600;
}
.eg-btn--primary {
  background:var(--eg-accent-light);
  border-color:var(--eg-accent-light);
  color:#123;
}
.eg-btn--ghost {
  background:rgba(255,255,255,.95);
  color:#123;
  border-color:transparent;
}
.eg-btn:focus {
  outline:2px solid var(--eg-accent);
  outline-offset:2px;
}
.eg-link {
  color:var(--eg-accent);
  text-decoration:none;
  border-bottom:1px solid rgba(var(--eg-accent-rgb),.35);
}
.eg-link:hover { border-bottom-color:var(--eg-accent); }
.eg-small { font-size:.95rem;color:#444; }

/* Ensure button-style links are never underlined */
a.button,
a.button:visited,
.button a,
.button a:visited,
.wp-block-button__link,
.wp-block-button__link:visited,
a.eg-btn,
a.eg-btn:visited,
.mission-highlight,
.mission-highlight:visited {
  text-decoration: none !important;
}

a.button:hover,
.button a:hover,
.wp-block-button__link:hover,
a.eg-btn:hover,
.mission-highlight:hover {
  text-decoration: none !important;
}

/* HERO — 3-image collage */
.eg-hero{position:relative}

/* Collage grid: large left panel + two stacked right panels */
.eg-hero__collage {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: clamp(420px, 65vh, 720px);
}
.eg-hero__collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eg-hero__img-main {
  grid-row: 1 / 3; /* spans both rows */
  position: relative;
}
.eg-hero__img-side-top {
  grid-row: 1;
  grid-column: 2;
}
.eg-hero__img-side-btm {
  grid-row: 2;
  grid-column: 2;
}

/* Tablet: keep collage but reduce height */
@media (max-width: 1199.98px) {
  .eg-hero__collage {
    height: clamp(320px, 50vh, 520px);
  }
}

/* Mobile: stack vertically, equal height panels */
@media (max-width: 640px) {
  .eg-hero__collage {
    grid-template-columns: 1fr;
    grid-template-rows: 200px 160px 160px;
    height: auto;
  }
  .eg-hero__img-main {
    grid-row: auto;
  }
  .eg-hero__img-side-top {
    grid-column: 1;
  }
  .eg-hero__img-side-btm {
    grid-column: 1;
  }
}

/* Single-image hero fallback (legacy support) */
.eg-hero>img:only-of-type{
  display:block;width:100%;
  height:clamp(420px,65vh,820px);
  object-fit:cover;object-position:center;
  border-radius:0 !important
}

/* desktop overlay: compact card on top of collage */
@media (min-width:1200px){
  .eg-hero__content{
    position:absolute;left:4%;bottom:6%;
    max-width:520px;background:rgba(255,255,255,.92);color:#222;
    padding:1.25rem 1.5rem;box-shadow:0 2px 18px rgba(0,0,0,.08);
    border-radius:8px;z-index:1
  }
}
/* tablet: overlay still floats on collage but smaller */
@media (min-width:641px) and (max-width:1199.98px){
  .eg-hero__content{
    position:absolute;left:3%;bottom:4%;
    max-width:420px;background:rgba(255,255,255,.94);color:#222;
    padding:1rem 1.25rem;box-shadow:0 2px 18px rgba(0,0,0,.08);
    border-radius:8px;z-index:1
  }
  .eg-hero__content h1{font-size:1.1rem}
}
/* mobile: text flows under collage */
@media (max-width:640px){
  .eg-hero__content{
    position:static;max-width:none;background:transparent;box-shadow:none;
    padding:1rem;color:#222
  }
}
.eg-hero__content h1{margin:.1rem 0 .4rem}
.eg-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin:.65rem 0 0}
.eg-cta .eg-btn {
  background:#d2ece8;
  border-color:#aacfc8;
  color:#32463e;
}
.eg-cta .eg-btn:visited {
  color:#32463e;
}
.eg-cta .eg-btn:hover,
.eg-cta .eg-btn:focus-visible {
  background:#cae6df;
  border-color:#9ac4bb;
  color:#2c423a;
}
.eg-cta .eg-btn--primary {
  background:#d7eef0;
  border-color:#adcfd1;
  color:#32463e;
}
.eg-cta .eg-btn--primary:visited {
  color:#32463e;
}
.eg-cta .eg-btn--primary:hover,
.eg-cta .eg-btn--primary:focus-visible {
  background:#cde5e7;
  border-color:#9ec3c5;
  color:#2c423a;
}
.eg-cred{margin:.5rem 0 0;color:#3b5e58;font-size:.95rem}

/* CATEGORY GRID */
/* Category grid: adaptive layout */
.eg-cats--grid {
  display: grid;
  gap: 2rem;
  max-width: 1160px;
  margin: 3rem auto;
  padding: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Special case: exactly 4 cards = force 2x2 */
.eg-cats--grid:has(.eg-cat:nth-child(4):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

/* Tablet: 2 across always */
@media (max-width: 900px) {
  .eg-cats--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: stack single */
@media (max-width: 640px) {
  .eg-cats--grid,
  .eg-cats--grid:has(.eg-cat:nth-child(4):last-child) {
    grid-template-columns: 1fr;
  }
}

.eg-cat {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.eg-cat:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.eg-cat > img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.eg-cat__content {
  padding: 1.25rem;
  color: #222;
}
.eg-cat__content h2 {
  margin: 0 0 .5rem;
  font-size: 1.2rem;
}

/* Hide WooCommerce variation selectors on product pages */
.woocommerce div.product form.cart .variations {
  display: none !important;
}

/* Adjust archive and blog page padding */
.archive .site-inner,
.page-template-page_blog .site-inner {
  padding-left: 2%;
  padding-right: 2%;
}
.eg-cat__content p {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.5;
}

/* INFO SPLIT block removed: the bare .eg-info class collided with the
   eg-info class added to ul.products on eco-essentials archives. The
   homepage v3 rebuild stopped using .eg-info / .eg-pane / .eg-pane--img
   in markup, so these rules are removed entirely. If a homepage info
   block is reintroduced, namespace it (e.g. .eg-home-info-split) to
   avoid colliding with the loop UL class. */

/* VALUES LINE: styles moved to redesign section below */
.eg-visit{max-width:1160px;margin:24px auto;padding:0 12px;text-align:center}
.eg-visit>img{display:block;width:100%;height:auto;margin-bottom:10px;border-radius:8px}
.eg-visit__content h2{margin:.25rem 0 .5rem}

/* =======================================================================
   HOMEPAGE REDESIGN v2 — CONVERSION-FOCUSED SECTIONS
   ======================================================================= */

/* --- How It Works (3-step explainer) --- */
.eg-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1160px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  background: #f0f5f3;
  text-align: center;
}
.eg-step {
  padding: 0 0.5rem;
}
.eg-step__num {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--eg-accent);
  margin-bottom: 0.5rem;
  line-height: 1;
}
.eg-step h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #222;
  margin: 0 0 0.5rem;
}
.eg-step p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #444;
  margin: 0;
}
@media (max-width: 768px) {
  .eg-steps {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 1rem;
  }
  .eg-step {
    max-width: 400px;
    margin: 0 auto;
  }
}

/* --- Product rows (bestsellers, new arrivals) --- */
.eg-products-row {
  max-width: 1160px;
  margin: 3rem auto;
  padding: 0 1rem;
}
.eg-products-row__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
  padding: 0 0.25rem;
}
.eg-products-row__header h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  text-transform: lowercase;
  color: #222;
}
.eg-products-row__header a {
  font-size: 0.9rem;
  color: var(--eg-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--eg-accent-rgb), 0.35);
  transition: border-color 0.2s ease;
}
.eg-products-row__header a:hover {
  border-bottom-color: var(--eg-accent);
}

/* --- Category quick-links (image tiles with label overlay) --- */
.eg-quicklinks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1160px;
  margin: 3rem auto;
  padding: 0 1rem;
}
.eg-quicklink {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  text-decoration: none;
}
.eg-quicklink img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.eg-quicklink:hover img {
  transform: scale(1.05);
}
.eg-quicklink span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Text-only quicklink tile (no image — curiosity-driven) */
.eg-quicklink--text {
  background: #f0f5f3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  text-decoration: none;
  transition: background 0.2s ease;
}
.eg-quicklink--text:hover {
  background: #e4edea;
}
.eg-quicklink__prompt {
  position: static;
  background: none;
  color: var(--eg-accent, #2c5e54);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  margin-bottom: 0.5rem;
}
.eg-quicklink__hint {
  position: static;
  background: none;
  color: #666;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  padding: 0;
}

@media (max-width: 768px) {
  .eg-quicklinks {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .eg-quicklinks {
    grid-template-columns: 1fr;
  }
}

/* --- Earthies loyalty banner --- */
.eg-earthies {
  background: linear-gradient(135deg, #e8f5f3 0%, #dce8e4 50%, #e0eef0 100%);
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 1160px;
  margin: 0 auto 3rem;
  border-radius: 12px;
}
.eg-earthies h2 {
  font-size: 1.4rem;
  margin: 0 0 0.6rem;
  color: #222;
}
.eg-earthies p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  margin: 0 auto 1.25rem;
  max-width: 600px;
}

/* --- Seasonal spotlight (split: image + text) --- */
.eg-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
}
.eg-spotlight img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.eg-spotlight__content h2 {
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
  color: #222;
}
.eg-spotlight__content p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #444;
  margin: 0 0 1rem;
}
@media (max-width: 768px) {
  .eg-spotlight {
    grid-template-columns: 1fr;
  }
}

/* --- Refreshed values line --- */
.eg-values {
  background: #f0f5f3;
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--eg-accent, #2c5e54);
  letter-spacing: 0.75px;
  margin: 0;
}

/* =======================================================================
   3-COLUMN LAYOUT
   ======================================================================= */
.columns.three-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2em; /* spacing between columns */
  justify-content: center;
  margin-bottom: 2em;
}

.columns.three-columns .column {
  flex: 1 1 300px;
  max-width: 33.33%;
  box-sizing: border-box;
  padding: 0 1em;
  text-align: center; /* Center all text in each column */
}

/* Responsive adjustments for columns */
@media (max-width: 768px) {
  .columns.three-columns .column {
    max-width: 100%;
    flex: 1 1 100%;
    margin-bottom: 2em; /* space between stacked columns */
  }
}


/* =======================================================================
   HEADINGS & TEXT / TYPOGRAPHY
   ======================================================================= */
/* Column Headings & Text */
.column-title {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  color: #1f1f1f;
}

.column-text {
  font-size: 1em;
  margin-bottom: 1em;
  color: #1f1f1f;
  font-style: normal; /* ensure no italics */
}

/* Force normal style if anything tries to italicize text */
.column .handwriting-notes,
.column .column-text,
.column h3,
.column p {
  font-style: normal !important;
}


/* =======================================================================
   BUTTONS & CALL TO ACTIONS
   ======================================================================= */
.button-group {
  margin: 0 0 1em 0; /* remove top gap, keep small bottom margin */
  padding: 0;        /* ensure no padding is causing gaps */
  text-align: center;
}

/* CTA buttons created in classic builders often end up as simple links. Match
   any homepage anchor with "button" or "btn" in its class list so it inherits
   the same styling as our .cta-button/.button elements. */
:is(
  .cta-button:not(.eg-mega-cta),
  .button,
  .wp-block-button__link,
  .wp-element-button,
  .home .homepage-wrapper a[class*="button" i],
  .home .homepage-wrapper a[class*="btn" i]
):is(:link, :visited, :hover, :active) {
  color: #222 !important;       /* dark gray text, override link blue */
  text-decoration: none !important;
  font-style: normal !important;
}

:is(
  .cta-button:not(.eg-mega-cta),
  .button,
  .wp-block-button__link,
  .wp-element-button,
  .home .homepage-wrapper a[class*="button" i],
  .home .homepage-wrapper a[class*="btn" i]
) {
  white-space: normal; /* was nowrap — caused tablet button overflow */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  vertical-align: middle;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
  padding: 0.75rem 1.4rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--eg-accent-rgb, 44, 94, 84), 0.3);
  /* Primary: gradient to match your header colors */
  background: linear-gradient(135deg, #e0f7f9 0%, #ddedeb 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* slight pop */
  transition: background 0.3s ease, box-shadow 0.3s ease;
  color: #0f2e32;
  line-height: 1.2;
}

/* The mega menu plugin now ships the mission-style buttons. Re-apply those
   values so the global button reset above doesn’t override their palette. */
.eg-dropdown .cta-button.eg-mega-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  white-space: nowrap;
  margin: 0;
  padding: 0.2rem 0.78rem;
  border-radius: 12px;
  border: none;
  background: var(--mission-bg, #d7eef0);
  box-shadow: var(--mission-shadow, 0 10px 22px -18px rgba(19, 61, 54, 0.35));
  color: var(--mission-text, #32463e);
  --mission-focus-ring: rgba(44, 94, 84, 0.22);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.15;
  font-family: brandon-grotesque, sans-serif;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

.eg-dropdown .cta-button.eg-mega-cta:visited {
  color: var(--mission-text, #32463e);
}

.eg-dropdown .cta-button.eg-mega-cta:hover,
.eg-dropdown .cta-button.eg-mega-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    var(
      --mission-shadow-hover,
      var(--mission-shadow, 0 18px 32px -22px rgba(19, 61, 54, 0.42))
    ),
    0 0 0 2px var(--mission-focus-ring, rgba(44, 94, 84, 0.22));
  filter: brightness(1.03);
  outline: none;
}

.eg-dropdown .cta-button.eg-mega-cta:focus-visible {
  text-decoration: none;
}

.eg-dropdown .cta-button.eg-mega-cta.parent-cat-btn {
  margin-bottom: 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  padding: 0.26rem 0.82rem;
  --mission-bg: #e3f1ee;
  --mission-shadow: 0 14px 26px -24px rgba(19, 61, 54, 0.4);
}

.eg-dropdown .cta-button.eg-mega-cta.parent-cat-btn:hover,
.eg-dropdown .cta-button.eg-mega-cta.parent-cat-btn:focus-visible {
  filter: brightness(1.05);
}

.eg-dropdown .cta-button.eg-mega-cta.parent-cat-btn:active {
  transform: translateY(0);
  box-shadow: 0 12px 24px -22px rgba(19, 61, 54, 0.38);
}

/* Secondary Button Styling */
:is(
  .cta-button:not(.eg-mega-cta),
  .button,
  .wp-block-button__link,
  .wp-element-button,
  .home .homepage-wrapper a[class*="button" i],
  .home .homepage-wrapper a[class*="btn" i]
).secondary,
.button.alt,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-element-button.is-style-outline,
.home .homepage-wrapper a[class*="button" i][class*="outline" i],
.home .homepage-wrapper a[class*="btn" i][class*="outline" i] {
  background: hsla(137, 13%, 92%, 1) !important;
  background-image: none !important; /* remove gradient if overriding */
}

:is(
  .cta-button:not(.eg-mega-cta),
  .button,
  .wp-block-button__link,
  .wp-element-button,
  .home .homepage-wrapper a[class*="button" i],
  .home .homepage-wrapper a[class*="btn" i]
):hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
  cursor: pointer;
}

:is(
  .cta-button:not(.eg-mega-cta),
  .button,
  .wp-block-button__link,
  .wp-element-button,
  .home .homepage-wrapper a[class*="button" i],
  .home .homepage-wrapper a[class*="btn" i]
):focus-visible {
  outline: 3px solid rgba(var(--eg-accent-rgb, 44, 94, 84), 0.5);
  outline-offset: 3px;
  text-decoration: none;
}

:is(
  .cta-button:not(.eg-mega-cta),
  .button,
  .wp-block-button__link,
  .wp-element-button,
  .home .homepage-wrapper a[class*="button" i],
  .home .homepage-wrapper a[class*="btn" i]
):visited {
  color: #0f2e32 !important;
}


/* =======================================================================
   BLOG POST & GENERAL LINK STYLES
   ======================================================================= */
/* Blog Post Links */
.entry-content a {
  color: #007acc; /* Change this to your preferred color for blog links */
  text-decoration: underline; /* Optional: add underline for emphasis */
}

.entry-content a:hover {
  color: #005a99; /* Slightly darker color on hover */
  text-decoration: none; /* Optional: remove underline on hover */
}

/* Exclude WooCommerce Listings from Custom Link Styles */
.woocommerce a,
.woocommerce div.product a,
.woocommerce ul.products li.product a {
  color: inherit; /* Inherit the default text color for WooCommerce links */
  text-decoration: none;
}

/* Global Link Reset */
a {
  text-decoration: none;
}


/* =======================================================================
   TOP BAR STYLES
   ======================================================================= */
/* Top Bar Above Header */
.top-bar {
  position: fixed;      /* keep the bar visible at the very top */
  left: 0;
  width: 100%;
  z-index: 10001;  /* ensures it stays in front */
  height: var(--top-bar-height, 25px);
  padding: 0 20px;
  background: linear-gradient(135deg, #e0f7f9 0%, #ddedeb 100%);
  transition: all 0.3s ease-in-out;
  display: flex;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

/* Top Bar Inner Wrapper */
.top-bar .wrap {
  display: inline;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  width: 100%;
}

/* Top Bar Content */

.top-bar-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.top-bar-content .announcement {
  font-size: 12px;
  color: #101326;
  flex: 1;
  min-width: 0;
}

.top-bar-content .account {
  font-size: 14px;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* Top Bar Account Hover & Clickable Links */
.top-bar-content .account a {
  text-decoration: none;
  color: black;
}

.top-bar-content .account a:hover {
  text-decoration: underline;
}

.account a,
.my-account-link {
  color: #000;
  text-decoration: none;
  transition: color 0.2s ease;
}

.my-account-link {
  display: inline-flex;
  align-items: center;
  padding: 2px 0;
  font-family: brandon-grotesque, sans-serif;
  text-transform: none;
  color: black !important;
  font-weight: 300; /* Or 400 if Regular is your default. Adjust if needed. */
}

.account a:hover,
.my-account-link:hover {
  color: #007a00; /* Slightly greenish on hover */
  text-decoration: underline;
}

/* Top Bar Quick Access Icons */
.top-bar-quick-icons {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.top-bar-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  position: relative;
}

.my-account-link .wlp-icon,
.login-account-link .wlp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 22px;
}

.my-account-link .dashicons,
.my-account-link .fa,
.my-account-link .ion-person,
.login-account-link .dashicons,
.login-account-link .fa,
.login-account-link .ion-person {
  line-height: 1;
}

/* Custom SVG account icon styling */
.login-account-link .wlp-account-icon-svg,
.my-account-link .wlp-account-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.login-account-link .wlp-account-icon-svg svg,
.my-account-link .wlp-account-icon-svg svg {
  width: 22px;
  height: 22px;
  display: block;
  vertical-align: middle;
}

/* Login label styling */
.login-account-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #000;
  transition: color 0.2s ease;
}

.login-account-link:hover {
  color: #007a00;
  text-decoration: none;
}

.login-label {
  font-family: brandon-grotesque, sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Hide label on mobile to save space */
@media only screen and (max-width: 600px) {
  .login-label {
    display: none;
  }
}

.top-bar-icon:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.top-bar-icon .icon-emoji {
  font-size: 16px;
  line-height: 1;
}

.top-bar-icon .icon-heart-split {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 1;
}

.top-bar-icon .icon-heart-split .heart-half {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.top-bar-icon .icon-heart-split .heart-half--left {
  clip-path: inset(0 50% 0 0);
}

.top-bar-icon .icon-heart-split .heart-half--right {
  clip-path: inset(0 0 0 50%);
  transform: translateX(0.5px);
}

.earthie-balance-badge {
  background: var(--eg-accent, #2c5e54);
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  min-width: 16px;
  text-align: center;
}


/* =======================================================================
   HEADER & MAIN NAVIGATION
   ======================================================================= */
/* Main Header */
.site-header {
  width: 100%;
  margin: 0; /* Remove margin since fixed positioning */
  position: fixed;
  top: 25px; /* seamlessly attached to top bar (1px offset + 24px height, no gap) */
  left: 0;
  right: 0;
  z-index: 1000;  /* lower than the top bar's z-index */
  box-shadow: 0 3px 10px -3px rgb(0 0 0 / 0.2);
  transition: box-shadow 0.3s ease;
  padding: 10px 20px;
  background-color: hsla(137, 13%, 92%, 1);
  border-bottom: 1px solid #999;
}

/* Admin bar adjustments for desktop */
.admin-bar .site-header {
  top: 57px; /* WordPress admin bar (32px) + top bar (25px total) */
}

/* Responsive adjustments for admin bar + site header */
@media only screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 71px; /* mobile admin bar (46px) + top bar (25px) */
  }
}

/* Mobile responsive behavior (600px and below) */
@media only screen and (max-width: 600px) {
  /* Remove mobile-specific positioning overrides - let desktop behavior apply to all screen sizes */
  
  .admin-bar .site-header {
    position: fixed;
    top: 71px; /* mobile admin bar (46px) + top bar (25px) */
  }
  
  /* Make sure the header elements scale properly */
  .site-header {
    padding: 8px 15px; /* Reduce padding on mobile */
  }
  
  .custom-header-logo {
    height: 40px; /* Smaller logo on mobile */
    width: 40px;
  }
  
  .title-area {
    height: 40px; /* Adjust title area height */
    padding-left: 40px; /* Match smaller logo width */
    padding-top: 20px;
  }
  
  /* Adjust basket menu position for mobile */
  .menu-item.basket-menu {
    transform: translateY(-12px); /* Adjust for smaller mobile header */
  }
  
  /* Adjust basket icon size for mobile */
  .custom-basket-icon {
    width: 50px; /* Smaller icon on mobile */
    padding-top: 6px;
  }
  
  /* Adjust basket count positioning for smaller icon */
  .basket-count {
    width: 18px;
    height: 18px;
    font-size: 12px;
    right: 2%;
  }
  
  /* Fix ADD button text alignment on mobile */
  .woocommerce .add_to_cart_button,
  .woocommerce .single_add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    height: 36px; /* Slightly smaller on mobile */
    padding: 8px 10px;
    font-size: 14px;
    text-align: center;
  }
  
  /* Also fix any other button alignment issues */
  .woocommerce ul.products li.product .button {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    height: 36px;
    padding: 8px 10px;
    font-size: 14px;
    text-align: center;
  }
}

/* Removed desktop-specific overrides - consistent behavior across all screen sizes */

/* Site Inner Container — use padding (not margin) so the background
   fills the space under the fixed header (no white strip visible). */
.site-inner {
  overflow: visible;
  max-width: 100%;
  margin-top: 0;
  padding-top: var(--eg-anchor-offset, 100px); /* Clearance for fixed headers */
  background-color: hsla(76, 16%, 87%, 0.25);
}

/* Admin bar adjustments — --eg-anchor-offset already includes admin bar height */
/* Admin bar pushes .site-inner down via body margin — anchor offset
   only needs to cover top-bar + header, same as non-admin-bar. */
.admin-bar .site-inner {
  padding-top: var(--eg-anchor-offset, 132px);
  margin-top: 0;
}

/* Header Logo & Title Area */
.custom-header-logo {
  position: absolute;
  height: 52px;
  width: 52px;
  z-index: 1000;
}

.custom-header-logo img {
  height: 100%;
  width: auto;
  display: block;
}

.site-title {
  display: none;
}

.title-area {
  display: flex;
  height: 52px;
  width: 100%;
  align-items: center;
  padding-left: 52px;
  padding-top: 30px;
}

/* Primary Navigation */
.nav-primary {
  width: 100%;
  height: 32px;
  padding-top: 10px;
  text-align: left;
  display: inline-block;
  position: static;
  top: auto;
  vertical-align: middle;
}

.genesis-nav-menu {
  height: 28px;
}

.genesis-nav-menu li {
  width: 19%;
}

.genesis-nav-menu a,
.genesis-nav-menu .toggle-header-search {
  color: #000;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0;
}

.genesis-nav-menu .menu-item, .genesis-nav-menu .toggle-header-search {
text-align:center;
}
/* =======================================================================
   BASKET / CART MENU
   ======================================================================= */
.menu-item.basket-menu {
  display: flex;
  align-items: center;
  margin-left: auto; /* Pushes basket to right */
  transform: translateY(-12px); /* Moves it UP */
  position: relative; /* Anchor mini cart dropdown */
}

.basket-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  padding: 5px;
}

.basket-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.custom-basket-icon {
  width: 64px; /* Adjust as needed */
  height: auto;
  vertical-align: middle;
padding-top:8px;
}

.basket-count {
  position: absolute;
  right: 1%;
  font-size: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding: 3px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  background: hsla(166, 40%, 82%, 0.8); /* Transparent soft teal */
  color: #000;
  text-align: center;
}

.basket-label {
  display: none;
}

.cart-icon-animated {
  animation: cartBounce 0.4s ease;
}
@keyframes cartBounce {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.mini-cart-panel {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  width: 340px;
  max-height: 65vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d4ddd8;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(44, 94, 84, 0.12), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 10002;
  font-family: brandon-grotesque, sans-serif;
  color: #1f1f1f;
}

/* Mini cart header — only show when cart has 3+ items (worth scrolling) */
.mini-cart-header {
  padding: 0 0 6px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid #eceae6;
  text-align: right;
}
.mini-cart-header[data-item-count="1"],
.mini-cart-header[data-item-count="2"],
.mini-cart-header[data-item-count="3"],
.mini-cart-header[data-item-count="4"],
.mini-cart-header[data-item-count="5"] {
  display: none;
}

.mini-cart-view-edit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 10px !important;
  color: #8aa79d !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
}

.mini-cart-view-edit:hover {
  background: transparent;
  color: #2c5e54 !important;
  text-decoration: underline !important;
}

/* Scroll indicator for mini cart */
.mini-cart-panel::after {
  content: "Scroll for more items ↓";
  position: sticky;
  bottom: 0;
  display: block;
  text-align: center;
  font-size: 10px;
  color: #888;
  background: linear-gradient(transparent, #fff 30%);
  padding: 8px 0 4px;
  margin: 0 -12px -12px;
  pointer-events: none;
}

/* Hide scroll indicator when not needed */
.mini-cart-panel:not(.scrollable)::after {
  display: none;
}
@media (max-width: 480px) {
  .mini-cart-panel .mini-cart-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: block;
  }
  .mini-cart-panel .woocommerce-mini-cart-item img {
    grid-area: image !important;
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
  }
  .mini-cart-panel {
    width: 92vw;
    right: 4vw;
  }
}
.mini-cart-panel ul.woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}
.basket-menu.open .mini-cart-panel {
  display: block;
}
.mini-cart-panel .mini-cart-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: block;
}
.mini-cart-panel .woocommerce-mini-cart-item {
  display: grid !important;
  grid-template-columns: 20px auto 1fr auto !important;
  grid-template-areas:
    "remove image details subtotal" !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #eee !important;
  position: relative !important;
}
.mini-cart-panel .woocommerce-mini-cart-item:last-child {
  border-bottom: none;
}
.mini-cart-panel .woocommerce-mini-cart-item img {
  grid-area: image !important;
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  margin-right: 12px !important;
}

/* Remove button styling - positioned in grid */
/* Remove button — plain X, no circle */
.mini-cart-panel .woocommerce-mini-cart-item .remove {
  grid-area: remove !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: 16px !important;
  background: transparent !important;
  color: #999 !important;
  border-radius: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  transition: color 0.15s ease !important;
  margin: 0 !important;
  cursor: pointer !important;
  padding: 2px !important;
}
.mini-cart-panel .woocommerce-mini-cart-item .remove:hover {
  background: transparent !important;
  color: #dc2626 !important;
  border: none !important;
}

/* Product image link */
.mini-cart-panel .woocommerce-mini-cart-item a:nth-of-type(2) {
  grid-area: image !important;
}

/* Product info container */
.mini-cart-panel .woocommerce-mini-cart-item a:nth-of-type(3) {
  grid-area: details !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  color: inherit !important;
  text-decoration: none !important;
  font-family: brandon-grotesque, sans-serif !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* Handle case where product name includes brand structure */
.mini-cart-panel .woocommerce-mini-cart-item a:nth-of-type(3) .product-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

/* Product details container */
.mini-cart-panel .woocommerce-mini-cart-item .product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Ensure product details are positioned correctly in grid */
.mini-cart-panel .woocommerce-mini-cart-item .product-details {
  grid-area: details !important;
}

/* Brand name above product name */
.mini-cart-panel .product-brand {
  display: block !important;
  font-size: 12px !important;
  font-style: italic !important;
  color: #5b6a64 !important;
  order: 1 !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

/* Product name */
.mini-cart-panel .woocommerce-mini-cart-item .product-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1f1f1f !important;
  line-height: 1.3 !important;
  order: 2 !important;
  display: block !important;
}

/* Make sure product details container properly displays brand and name */
.mini-cart-panel .woocommerce-mini-cart-item .product-details .product-brand,
.mini-cart-panel .woocommerce-mini-cart-item .product-details .product-name {
  display: block !important;
  width: 100% !important;
}

/* Quantity and price - right aligned in grid */
.mini-cart-panel .woocommerce-mini-cart-item .quantity {
  grid-area: subtotal !important;
  font-size: 12px !important;
  color: #666 !important;
  text-align: right !important;
  font-weight: 500 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

.mini-cart-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1.5px solid #d4ddd8;
}

/* Subtotal — the key number, prominent */
.mini-cart-footer .mini-cart-subtotal {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 16px;
  text-align: right;
  margin-right: 0;
  color: #1f1f1f;
  letter-spacing: -0.01em;
}

/* Button container */
.mini-cart-footer .button-container {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

/* Base button reset */
.mini-cart-footer .button {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 0;
  font-family: brandon-grotesque, sans-serif;
  letter-spacing: 0.4px;
  line-height: 1;
  cursor: pointer;
}

/* View Cart — quiet secondary, clearly below Checkout */
.mini-cart-footer .button.view-cart-btn {
  background: #fff !important;
  color: #777 !important;
  border: 1px solid #eceae6 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.mini-cart-footer .button.view-cart-btn:hover {
  background: #fafbfb !important;
  border-color: #d3d6da !important;
  color: #555 !important;
}

/* View Cart link after add-to-cart (single product + loop) */
form.cart .added_to_cart.view-cart-btn,
.woocommerce ul.products li.product .added_to_cart.view-cart-btn {
  background: #e8f4ee !important;
  color: #1e4a35 !important;
  border: 1.5px solid #a5ccbc !important;
  text-decoration: none;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  margin-left: 10px;
}
form.cart .added_to_cart.view-cart-btn:hover,
.woocommerce ul.products li.product .added_to_cart.view-cart-btn:hover {
  background: #d5e8de !important;
  border-color: #2b5d4b !important;
  color: #0f4c3a !important;
}

/* Checkout button — PRIMARY CTA, survey gradient with accent border */
.mini-cart-footer .button.checkout-btn {
  background: linear-gradient(135deg, #bfe2dc 0%, #d0ddd8 100%);
  border: 1.5px solid #2c5e54;
  color: #1f1f1f;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex: 1.4;
}
.mini-cart-footer .button.checkout-btn:hover {
  background: linear-gradient(135deg, #a5ccbc 0%, #bfe2dc 100%);
  border-color: #2d4f3f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Old mini-cart note - replaced with .mini-cart-note-box */
.mini-cart-note {
  display: none;
}

/* Mini-cart note — footnote under buttons */
.mini-cart-note-box {
  margin: 8px 0 0 !important;
  padding: 0 12px 8px !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  text-align: center !important;
  font-size: 11.5px !important;
  color: #7a8a82 !important;
  font-weight: 400 !important;
  font-family: brandon-grotesque, sans-serif !important;
  font-style: italic !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
}

/* Login button hover effect for cart/checkout pages */
.eg-login-btn:hover {
  background: #1a6b52 !important;
}

/* Hide default WooCommerce mini cart buttons */
.mini-cart-panel .woocommerce-mini-cart__buttons {
  display: none;
}

/* Hide default mini cart total since we have custom subtotal */
.mini-cart-panel .woocommerce-mini-cart__total {
  display: none;
}

/* Animation for cart items */
@keyframes fadeInItem {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.mini-cart-panel .woocommerce-mini-cart-item {
  animation: fadeInItem 0.3s ease-out;
}

/* Fix for long product names */
.mini-cart-panel .product-name {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Hide all variation information in mini cart */
.mini-cart-panel .woocommerce-mini-cart-item dl.variation,
.mini-cart-panel .woocommerce-mini-cart-item .wc-item-meta,
.mini-cart-panel .woocommerce-mini-cart-item .product-variation,
.mini-cart-panel .woocommerce-mini-cart-item .variation,
.mini-cart-panel dl.variation,
.mini-cart-panel .wc-item-meta {
  display: none !important;
}

/* Fix raw HTML display issues */
.mini-cart-panel .product-brand-raw {
  display: none !important;
}

/* Ensure clean text rendering */
.mini-cart-panel .woocommerce-mini-cart-item * {
  text-rendering: optimizeLegibility !important;
}

/* Responsive adjustments - tablet */
@media (max-width: 768px) {
  .mini-cart-panel {
    width: 320px;
    max-height: 55vh;
  }
  .mini-cart-footer .button {
    font-size: 10px;
    padding: 9px 10px;
  }
  .mini-cart-view-edit {
    font-size: 9px !important;
  }
}

/* Responsive adjustments - mobile */
@media (max-width: 480px) {
  .mini-cart-panel .woocommerce-mini-cart-item {
    grid-template-columns: 18px auto 1fr auto !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    align-items: center !important;
  }
  
  .mini-cart-panel .woocommerce-mini-cart-item img {
    width: 48px !important;
    height: 48px !important;
  }
  
  .mini-cart-panel .woocommerce-mini-cart-item .product-name {
    font-size: 12px !important;
  }
  
  .mini-cart-panel .product-brand {
    font-size: 10px !important;
  }
  
  .mini-cart-panel .woocommerce-mini-cart-item .quantity {
    font-size: 11px !important;
  }
  
  .mini-cart-footer .button {
    font-size: 10px;
    padding: 8px 8px;
  }
  
  .mini-cart-footer .mini-cart-subtotal {
    font-size: 14px;
  }
  
  .mini-cart-panel {
    width: 95vw;
    right: 2.5vw;
  }
  
  .mini-cart-view-edit {
    font-size: 9px !important;
  }

  .mini-cart-note-box span {
    font-size: 8px !important;
  }

  /* CRITICAL: Fix ADD button text alignment for very small screens */
  .woocommerce .add_to_cart_button,
  .woocommerce .single_add_to_cart_button,
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    height: 32px !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    text-align: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
  }
}


/* =======================================================================
   GENERAL FONT & TYPOGRAPHY CUSTOMIZATION
   ======================================================================= */

/* Body text using brandon-grotesque, likely regular (400) */
body {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Headings: if you have Medium or Bold, pick whichever numeric weight you want */
h1, h2, h3, h4, h5, h6 {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 500; /* or 700 if you prefer a bolder look */
  font-style: normal;
}

/* Bold text & emphasis */
.bold-heading-text,
.bold-text,
strong,
b {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700; 
  font-style: normal;
}

/* Button text: typically bold for emphasis */
button,
.button,
input[type="submit"] {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700;
  font-style: normal;
}


/* =======================================================================
   PRODUCT PAGE & RELATED CONTENT
   ======================================================================= */
section.up-sells.upsells.products h2 {
  font-size: 20px;
}

section.related.products h2 {
  font-size: 20px;
}

section.related.products {
  padding-top: 3%;
}

section.up-sells.upsells.products {
  border-top: solid 2px hsl(137,8%,84%,0.4);
  padding-top: 3%;
  border-bottom: solid 2px hsl(137,8%,84%,0.4);
}

/* h3 margin now handled by prose typography system below */


/* =======================================================================
   LAYOUT, SIDEBARS & GENERAL PAGE STRUCTURE
   ======================================================================= */
.entry-background {
  margin-top: 98px;
}

.big-leader .featured-image-overlay {
  color: black;
  text-align: center;
  font-size: xxx-large;
  padding-bottom: 6500px;
}

.sidebar-content .sidebar {
  float: left;
  display: inline;
  width: 100%;
}

.content-sidebar .content {
  margin-top: 8px;
}

.sidebar {
  float: left;
  position: absolute;
  display: flex;
}

.content {
  width: 100%;
}

.content-sidebar-wrap {
  padding-left: 3%;
  padding-right: 3%;
}

body.single-product .content-sidebar-wrap {
  padding-left: clamp(12px, 2.75vw, 32px);
  padding-right: clamp(12px, 2.75vw, 32px);
}

.full-width-content .content {
  float: none;
  width: 100%;
}

div.site-container {
  margin-bottom: 0px !important;
}

figcaption {
  font-size: 12px;
  text-align: left;
}

.single-post .content .entry-content::after {
  content: "";
  display: table;
  clear: both;
}

.single-post .content .entry-content figure.wp-block-image:not(.alignfull):not(.alignwide) {
  max-width: min(100%, 420px);
}

.single-post .content .entry-content figure.wp-block-image:not(.alignfull):not(.alignwide):not(.alignright) {
  float: left;
  margin: 0 2rem 1.5rem 0;
}

.single-post .content .entry-content figure.wp-block-image.alignright {
  float: right;
  margin: 0 0 1.5rem 2rem;
}

@media (max-width: 400px) {
  .single-post .content .entry-content figure.wp-block-image:not(.alignfull):not(.alignwide) {
    float: none;
    margin: 0 auto 1.5rem;
    max-width: 100%;
  }
}

.single-post .content .entry-content > p > img:not(.alignfull):not(.alignwide):not(.alignright),
.single-post .content .entry-content > figure > img:not(.alignfull):not(.alignwide):not(.alignright) {
  float: left;
  margin: 0 2rem 1.5rem 0;
  max-width: min(100%, 420px);
  height: auto;
}

.single-post .content .entry-content > p > img.alignright,
.single-post .content .entry-content > figure > img.alignright {
  float: right;
  margin: 0 0 1.5rem 2rem;
  max-width: min(100%, 420px);
  height: auto;
}

@media (max-width: 400px) {
  .single-post .content .entry-content > p > img,
  .single-post .content .entry-content > figure > img {
    float: none;
    margin: 0 auto 1.5rem;
    display: block;
    max-width: 100%;
  }
}

.page .entry-title {
  font-size: 30px;
  padding: 0px;
}

/* Blog Post Layout — match user's inline 800px centered content */
.single-post .content-sidebar-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 3%;
  padding-right: 3%;
}

/* Entry header matches content width */
.single-post .entry-header {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Blog Post Titles */
.single-post .entry-title,
.single-post h1.entry-title,
.single-post .entry-header .entry-title,
.blog .entry-title,
.archive.category .entry-title,
.home.blog .entry-title {
  text-align: left;
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Blog Post Meta (author, date) */
.single-post .entry-meta,
.single-post .entry-header .entry-meta,
.blog .entry-meta {
  text-align: left;
  margin-bottom: 1.5rem;
}

/* --- Hide Featured Image on Blog Posts --- */
/* Genesis displays featured image as background-image on .entry-background */
.single-post .entry-background {
  display: none !important;
}

/* =======================================================================
   SINGLE BLOG POST LAYOUT
   -----------------------------------------------------------------------
   Comprehensive styling for blog posts:
   - Proper clearance for sticky header (all screen sizes)
   - Visible breadcrumbs
   - Clean title/author/date layout
   ======================================================================= */

/* Base clearance for sticky header — use padding so background fills the gap.
   --eg-anchor-offset already includes admin bar when present. */
.single-post .site-inner {
  padding-top: var(--eg-anchor-offset, 100px);
  margin-top: 0;
  padding-left: 3%;
  padding-right: 3%;
}

.admin-bar.single-post .site-inner {
  padding-top: var(--eg-anchor-offset, 132px);
  margin-top: 0;
}

/* Breadcrumbs on single posts - ensure visibility */
.single-post .breadcrumb {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  margin-top: 0 !important; /* Remove extra margin since site-inner handles clearance */
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  color: #333 !important;
}

/* --- Entry Header Layout --- */
.single-post .entry-header {
  margin-bottom: 1.5rem;
}

/* Title styling */
.single-post .entry-title {
  margin-bottom: 0.5rem;
}

/* Author byline - avatar inline with name */
.single-post .entry-avatar {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4rem;
}

.single-post .entry-avatar img,
.single-post .entry-avatar .avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

.single-post .entry-meta {
  display: inline;
  font-size: 0.9rem;
  color: #555;
}

/* =======================================================================
   PROSE TYPOGRAPHY SYSTEM
   -----------------------------------------------------------------------
   Educational content optimized for:
   - Long-form articles with embedded media (PDFs, videos, presentations)
   - Academic citations and blockquotes
   - News-style readability with blog accessibility
   
   Scoped to content containers only — does NOT affect global tags.
   
   Targets:
   - Blog posts: .single-post .entry-content
   - Pages: .eg-prose (opt-in — add class to page content wrapper)
   - WooCommerce full description tab: .woocommerce-Tabs-panel--description
   
   NOTE: Short description (.woocommerce-product-details__short-description)
   is NOT included — it has custom "product tip" styling elsewhere.
   ======================================================================= */

/* --- Prose Container --- */
/* NOTE: We do NOT set max-width on the container itself, so embedded 
   media (PDFs, videos) can expand. Text elements get max-width individually. */
.single-post .entry-content,
.eg-prose,
.woocommerce-Tabs-panel--description {
  font-size: 1.0625rem; /* 17px - slightly larger for long-form reading */
}

/* --- Paragraphs --- */
.single-post .entry-content p,
.eg-prose p,
.woocommerce-Tabs-panel--description p {
  text-align: left;
  line-height: 1.58;
  margin-top: 0;
  margin-bottom: 0.95em;
  letter-spacing: -0.003em;
}

/* Empty paragraphs from Square (used as visual breaks) need minimum height */
.woocommerce-Tabs-panel--description p:empty,
.woocommerce-Tabs-panel--description p > br:only-child {
  min-height: 0.5em;
  display: block;
}

/* Ensure br tags inside paragraphs create visual breaks with proper spacing */
.woocommerce-Tabs-panel--description br {
  display: block;
  content: "";
  margin-top: 0.85em; /* Increased from 0.5em for better readability */
}

/* Double br tags (from Square) should act like paragraph breaks */
.woocommerce-Tabs-panel--description br + br {
  margin-top: 1.2em;
}

/* --- Lead paragraph: Slightly larger intro text (news/magazine style) --- */
.single-post .entry-content > p:first-of-type {
  font-size: 1.125em;
  line-height: 1.55;
  color: #2a2a2a;
}

/* --- Lists --- */
.single-post .entry-content ul,
.single-post .entry-content ol,
.eg-prose ul,
.eg-prose ol,
.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol {
  text-align: left;
  line-height: 1.55;
  margin-top: 0;
  margin-bottom: 1em;
  padding-left: 1.4em;
}

.single-post .entry-content li,
.eg-prose li,
.woocommerce-Tabs-panel--description li {
  margin-bottom: 0.35em;
  line-height: 1.55;
}

/* Nested lists: tighter */
.single-post .entry-content li ul,
.single-post .entry-content li ol,
.eg-prose li ul,
.eg-prose li ol {
  margin-top: 0.35em;
  margin-bottom: 0.35em;
}

/* --- Headings: Clear hierarchy --- */
.single-post .entry-content h2,
.eg-prose h2 {
  font-size: 1.5rem;
  margin-top: 2em;
  margin-bottom: 0.6em;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.single-post .entry-content h3,
.eg-prose h3 {
  font-size: 1.25rem;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.single-post .entry-content h4,
.eg-prose h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
  line-height: 1.35;
}

.single-post .entry-content h5,
.single-post .entry-content h6,
.eg-prose h5,
.eg-prose h6 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}

/* First heading after title */
.single-post .entry-content > h2:first-child,
.single-post .entry-content > h3:first-child,
.eg-prose > h2:first-child,
.eg-prose > h3:first-child {
  margin-top: 0;
}

/* --- Blockquotes: Academic/citation style --- */
.single-post .entry-content blockquote,
.eg-prose blockquote {
  margin: 1.5em 0;
  padding: 1em 1.25em 1em 1.5em;
  border-left: 4px solid #4a7c59; /* Brand green accent */
  background: #f8faf8;
  font-size: 1em;
  font-style: normal;
  color: #3a3a3a;
}

.single-post .entry-content blockquote p,
.eg-prose blockquote p {
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.single-post .entry-content blockquote p:last-child,
.eg-prose blockquote p:last-child {
  margin-bottom: 0;
}

/* Blockquote citations */
.single-post .entry-content blockquote cite,
.eg-prose blockquote cite {
  display: block;
  margin-top: 0.75em;
  font-size: 0.9em;
  font-style: normal;
  color: #666;
}

.single-post .entry-content blockquote cite::before,
.eg-prose blockquote cite::before {
  content: "— ";
}

/* --- Embedded Media: Break out of 68ch container --- */
.single-post .entry-content iframe,
.single-post .entry-content .wp-block-embed,
.single-post .entry-content .wp-block-video,
.eg-prose iframe,
.eg-prose .wp-block-embed,
.eg-prose .wp-block-video {
  max-width: none;
  margin: 2em 0;
}


/* Video embeds: responsive 16:9 */
.single-post .entry-content .wp-block-embed-youtube,
.single-post .entry-content .wp-block-embed-vimeo,
.eg-prose .wp-block-embed-youtube,
.eg-prose .wp-block-embed-vimeo {
  position: relative;
  width: 100%;
  max-width: 800px;
}

.single-post .entry-content .wp-block-embed-youtube .wp-block-embed__wrapper,
.single-post .entry-content .wp-block-embed-vimeo .wp-block-embed__wrapper,
.eg-prose .wp-block-embed-youtube .wp-block-embed__wrapper,
.eg-prose .wp-block-embed-vimeo .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.single-post .entry-content .wp-block-embed-youtube iframe,
.single-post .entry-content .wp-block-embed-vimeo iframe,
.eg-prose .wp-block-embed-youtube iframe,
.eg-prose .wp-block-embed-vimeo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* --- Figures & Captions --- */
.single-post .entry-content figure,
.eg-prose figure {
  margin: 1.75em 0;
}

.single-post .entry-content figcaption,
.eg-prose figcaption {
  margin-top: 0.6em;
  font-size: 0.875em;
  color: #666;
  line-height: 1.45;
  text-align: center;
  font-style: italic;
}

/* --- Horizontal Rules: Section breaks --- */
.single-post .entry-content hr,
.eg-prose hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 2.5em auto;
  max-width: 120px;
}

/* --- Tables: Clean data presentation --- */
.single-post .entry-content table,
.eg-prose table {
  width: 100%;
  max-width: none;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: 0.95em;
}

.single-post .entry-content th,
.eg-prose th {
  background: #f5f5f5;
  font-weight: 600;
  text-align: left;
  padding: 0.6em 0.8em;
  border-bottom: 2px solid #ddd;
}

.single-post .entry-content td,
.eg-prose td {
  padding: 0.5em 0.8em;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}

/* --- Code blocks: Technical content --- */
.single-post .entry-content pre,
.single-post .entry-content code,
.eg-prose pre,
.eg-prose code {
  font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875em;
}

.single-post .entry-content code,
.eg-prose code {
  background: #f4f4f4;
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

.single-post .entry-content pre,
.eg-prose pre {
  background: #f8f8f8;
  padding: 1em 1.25em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1.5em 0;
  max-width: none;
  line-height: 1.5;
}

.single-post .entry-content pre code,
.eg-prose pre code {
  background: none;
  padding: 0;
}

/* --- Strong/Bold emphasis: Slightly heavier --- */
.single-post .entry-content strong,
.eg-prose strong {
  font-weight: 600;
  color: #1a1a1a;
}

/* --- Links: Clear but not distracting --- */
.single-post .entry-content a,
.eg-prose a {
  color: #2a6a4a;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.single-post .entry-content a:hover,
.eg-prose a:hover {
  color: #1e4d36;
}

/* --- WooCommerce Full Description Tab --- */
/* Short description has custom "product tip" styling - not modified here */

/* Force normal text styling for description tab content (fix bold/italic issue) */
.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description span,
.woocommerce-Tabs-panel--description div {
  font-style: normal !important;
  font-weight: 400 !important;
  font-family: brandon-grotesque, sans-serif !important;
}

/* Allow bold and italic ONLY where explicitly marked with <strong>/<em> */
.woocommerce-Tabs-panel--description strong,
.woocommerce-Tabs-panel--description b {
  font-weight: 700 !important;
  font-style: normal !important;
}

.woocommerce-Tabs-panel--description em,
.woocommerce-Tabs-panel--description i {
  font-style: italic !important;
  font-weight: 400 !important;
}

/* --- Product Description Links: Subtle but identifiable --- */
/* Strategy: Keep text color close to body text so reading flow isn't disrupted.
   The underline is the primary indicator - subtle at rest, stronger on hover. */
.woocommerce-Tabs-panel--description a,
.woocommerce-product-details__short-description a {
  color: #2a2a2a; /* Nearly matches body text - just slightly different */
  text-decoration: underline;
  text-decoration-color: rgba(61, 111, 106, 0.45); /* Subtle teal-tinted underline */
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: all 0.15s ease;
}

.woocommerce-Tabs-panel--description a:hover,
.woocommerce-product-details__short-description a:hover {
  color: #1a1a1a; /* Slightly darker text */
  text-decoration-color: #3d6f6a; /* Underline becomes more visible */
  text-decoration-thickness: 2px; /* Thicker underline draws attention */
}

.woocommerce-Tabs-panel--description a:visited,
.woocommerce-product-details__short-description a:visited {
  color: #2a2a2a; /* Same as unvisited - no jarring color shift */
  text-decoration-color: rgba(61, 111, 106, 0.35); /* Slightly lighter underline for visited */
}

.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description h3 {
  font-size: 1.2rem;
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  font-weight: 500 !important;
}

/* --- Mobile adjustments --- */
@media (max-width: 600px) {
  .single-post .entry-content,
  .eg-prose {
    font-size: 1rem;
  }
  
  .single-post .entry-content > p:first-of-type {
    font-size: 1.05em;
  }
  
  .single-post .entry-content h2,
  .eg-prose h2 {
    font-size: 1.35rem;
  }
  
  .single-post .entry-content h3,
  .eg-prose h3 {
    font-size: 1.15rem;
  }
  
  .single-post .entry-content blockquote,
  .eg-prose blockquote {
    padding: 0.75em 1em;
    margin: 1.25em 0;
  }
}

/* Archive, Author & Misc Titles */
.archive-description .entry-title,
.archive-title,
.author-box-title {
  display: none;
  font-size: small;
  margin-bottom: 0px;
  text-transform: none !important;
}

.archive .site-inner,
.page-template-page_blog .site-inner {
  padding-bottom: 5%;
  margin-bottom: 0px;
}

.after-entry,
.archive-description,
.author-box {
  margin-bottom: 10px;
}

/* Text Background Shadow */
.text-background {
  box-shadow: 10px 0 0px 0px #ECEAE6, -10px 0 0px 0px #ECEAE6;
}

.entry-header::after {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

/* Hide entry-header separator on pages with hidden titles and staff tools */
.eg-staff-tool-page .entry-header::after,
body:has(.pickup-interface-container) .entry-header::after {
  display: none;
}

/* Hide entry-header separator whenever the header is empty (no rendered title) */
.entry-header:empty {
  display: none;
}
.entry-header:empty::after {
  display: none;
}

.grid {
  width: 100%;
}

.widget {
  margin-bottom: 0px;
}

.sidebar .widget {
  margin-bottom: 0px;
}

.after-content {
  display: none !important;
}

/* Hide breadcrumbs on all pages — only show on shop/product/archive */
.page .breadcrumb,
.home .breadcrumb,
.single-post .breadcrumb {
  display: none !important;
}

/* Breadcrumbs (visible on shop, product, archive pages) */
.breadcrumb {
  text-align: left !important;
  margin-left: 0;
  padding-left: 0;
  font-size: 12px;
  color: #333;
  margin-top: 0;
  margin-bottom: 12px;
  padding-top: 4px;
  padding-bottom: 0;
  border-bottom: none !important;
}

.genesis-title-hidden .breadcrumb {
  margin-top: 0;
}

/* Hide "You are here:" prefix from Genesis breadcrumbs */
.breadcrumb-prefix {
  display: none !important;
}

/* Keep breadcrumb consistent on mobile — site-inner already handles
   sticky-header clearance via padding-top, so no extra margin needed. */
@media only screen and (max-width: 600px) {
  .breadcrumb {
    margin-top: 0;
    padding-top: 4px;
    margin-bottom: 4px;
  }
}

.breadcrumb a {
  color: #000;
  text-decoration: none;
  pointer-events: auto !important;
  position: relative;
  z-index: 100000;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.clear-background {
  background-color: hsla(70,1%,87%,0) !important;
}


/* =======================================================================
   FOOTER & PRE-FOOTER SECTIONS
   ======================================================================= */
.before-footer-cta {
  background-color: hsl(137,8%,84%,0.4);
}

.before-footer-cta .wrap {
  max-width: 100%;
  padding-left: 0% !important;
  padding-right: 0% !important;
}

/* Blog post layout - same top spacing as shop pages */
.single-post .site-inner {
  max-width: 100%;
  padding-left: 3%;
  padding-right: 3%;
}

@media only screen and (max-width: 782px) {
  /* Keep the pre-footer section flush on mobile */
  .before-footer-cta .wrap {
    margin-top: 0% !important;
  }
  /* site-inner padding-top already handles sticky header clearance —
     no extra margin-top needed (was doubling the gap). */
}

.site-footer {
  background-color: transparent;
  color: #3b4a3e;
  padding: 1.5rem 1rem 1rem;
  text-align: center;
  font-family: "Brandon Grotesque", sans-serif;
  border-top: 1px solid rgba(59, 74, 62, 0.12);
}

.site-footer p {
  color: inherit;
}

.simple-social-icons ul li {
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
}

/* Custom Footer Styling */
.footer-logo-wrapper {
  text-align: center;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: min(50vw, 480px);
}

.footer-logo {
  display: block;
  width: 100%;
  max-width: min(50vw, 480px);
  height: auto;
  margin: 0 auto;
}

.footer-extended {
  margin-top: 0;
  background: linear-gradient(180deg, hsla(137, 13%, 92%, 1) 0%, hsla(137, 13%, 88%, 1) 100%);
  padding: 3rem 1.75rem 2.75rem;
  box-shadow: inset 0 1px 0 rgba(var(--eg-accent-rgb, 44, 94, 84), 0.2), 0 -10px 25px -18px rgba(31, 48, 43, 0.5);
}

.footer-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  width: 100%;
}

.footer-mission-heading {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(44, 94, 84, 0.75);
  margin: 0;
  text-decoration: none;
  display: inline-block;
}


.footer-mission,
.core-values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .footer-mission,
  .core-values-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mission-highlight {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.15rem;
  border-radius: 16px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  color: var(--mission-text, #32463e);
  text-decoration: none;
  letter-spacing: 0.01em;
  background-color: var(--mission-bg, #d7eef0);
  border: 1px solid var(--mission-border, rgba(19, 61, 54, 0.18));
  box-shadow: 0 16px 26px -20px rgba(19, 61, 54, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.mission-highlight:hover,
.mission-highlight:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -16px rgba(30, 79, 69, 0.45);
  outline: 3px solid rgba(44, 94, 84, 0.35);
  outline-offset: 3px;
  filter: brightness(1.05);
}

.mission-highlight:visited {
  color: var(--mission-text, #32463e);
}

.core-values-intro .mission-highlight,
.core-values-intro .mission-highlight:visited {
  color: var(--mission-text, #32463e) !important;
}

.mission-avoid {
  --mission-text: #32463e;
  --mission-bg: #d7eef0;
  --mission-border: #adcfd1;
}

.mission-reuse {
  --mission-text: #32463e;
  --mission-bg: #d2ece8;
  --mission-border: #aacfc8;
}

.mission-need {
  --mission-text: #32463e;
  --mission-bg: #cbe3d6;
  --mission-border: #a7c9ba;
}

.mission-learn {
  --mission-text: #32463e;
  --mission-bg: #c6dbce;
  --mission-border: #a1c1ae;
}

.core-values-intro {
  padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 2rem;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.core-values-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: rgba(44, 94, 84, 0.7);
  margin: 0 0 0.75rem;
}

.core-values-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 0 0 0.75rem;
  color: #26483f;
}

.core-values-subtitle {
  font-size: 1.05rem;
  color: rgba(46, 71, 63, 0.8);
  margin: 0 auto 2rem;
  max-width: 640px;
}

.core-value-section {
  --core-section-bg: linear-gradient(180deg, rgba(236, 246, 242, 0.45), rgba(255, 255, 255, 0));
  --core-card-border: rgba(44, 94, 84, 0.18);
  --core-card-heading: #26483f;
  --core-card-summary: rgba(36, 54, 49, 0.8);
  --core-card-body: rgba(35, 49, 45, 0.78);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  scroll-margin-top: 140px;
  background: var(--core-section-bg);
}

.core-value-card {
  width: min(1120px, calc(100% - 3rem));
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  padding: clamp(2.25rem, 5vw, 3.25rem);
  box-shadow: 0 36px 65px -42px rgba(17, 47, 55, 0.55);
  border-top: 5px solid var(--core-card-border);
}

.core-value-card h2 {
  margin: 0 0 1.65rem;
  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
  color: var(--core-card-heading);
  padding-bottom: 0.85rem;
  position: relative;
}

.core-value-card h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(120px, 35%);
  height: 3px;
  border-radius: 999px;
  background: var(--core-card-border);
  opacity: 0.95;
}

.core-value-summary {
  font-size: 1.08rem;
  color: var(--core-card-summary);
  margin: 0 0 1.6rem;
}

.core-value-body {
  color: var(--core-card-body);
  font-size: 1.02rem;
  line-height: 1.75;
  display: grid;
  gap: 1.5rem;
}

.core-value-body > * {
  margin: 0;
}

.core-value-body p {
  margin: 0;
}

.core-value-section--avoid {
  --core-section-bg: linear-gradient(180deg, rgba(199, 221, 222, 0.78) 0%, rgba(199, 221, 222, 0.35) 100%);
  --core-card-border: #9fb7bb;
  --core-card-heading: #173c45;
  --core-card-summary: rgba(23, 60, 69, 0.82);
  --core-card-body: rgba(21, 55, 63, 0.78);
}

.core-value-section--reuse {
  --core-section-bg: linear-gradient(180deg, rgba(194, 217, 214, 0.78) 0%, rgba(194, 217, 214, 0.35) 100%);
  --core-card-border: #9eb7b2;
  --core-card-heading: #173b36;
  --core-card-summary: rgba(23, 59, 52, 0.82);
  --core-card-body: rgba(21, 54, 48, 0.78);
}

.core-value-section--need {
  --core-section-bg: linear-gradient(180deg, rgba(187, 210, 201, 0.78) 0%, rgba(187, 210, 201, 0.35) 100%);
  --core-card-border: #97b4aa;
  --core-card-heading: #163a34;
  --core-card-summary: rgba(22, 58, 52, 0.82);
  --core-card-body: rgba(20, 53, 47, 0.78);
}

.core-value-section--learn {
  --core-section-bg: linear-gradient(180deg, rgba(180, 199, 188, 0.78) 0%, rgba(180, 199, 188, 0.35) 100%);
  --core-card-border: #90afa2;
  --core-card-heading: #163930;
  --core-card-summary: rgba(22, 57, 48, 0.82);
  --core-card-body: rgba(20, 52, 44, 0.78);
}

.footer-links {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15rem 0;
  line-height: 1.8;
}

.footer-links a {
  color: var(--eg-accent, #3b4a3e);
  text-decoration: none;
  padding: 0.4rem 0.65rem;
  transition: all 0.2s ease;
  border-radius: 4px;
  font-weight: 500;
}

.footer-links a:hover {
  color: var(--eg-accent-light, #bfe2dc);
  background: rgba(191, 226, 220, 0.12);
}

.footer-links .divider {
  color: rgba(59, 74, 62, 0.25);
  padding: 0 0.15rem;
  font-weight: 300;
  font-size: 0.7rem;
}

.footer-contact {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: rgba(59, 74, 62, 0.82);
  font-weight: 500;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.footer-contact p {
  margin: 0;
  line-height: 1.6;
  text-align: center;
}

.footer-contact strong {
  font-weight: 600;
  color: #3b4a3e;
}

.footer-contact a {
  color: var(--eg-accent, #3b4a3e);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact a:hover {
  color: var(--eg-accent-light, #bfe2dc);
  text-decoration: underline;
}

.footer-legal-links {
  font-size: 10px;
  color: rgba(59, 74, 62, 0.6);
  margin-top: 0.25rem;
  margin-bottom: 0;
  font-weight: 400;
}

.footer-legal-links p {
  margin: 0;
  line-height: 1.4;
}

.footer-legal-links a {
  color: rgba(59, 74, 62, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-links a:hover {
  color: rgba(59, 74, 62, 0.9);
  text-decoration: underline;
}

.footer-legal-links .divider {
  color: rgba(59, 74, 62, 0.3);
  padding: 0 0.3rem;
  font-weight: 300;
}

.footer-bottom {
  font-size: 0.8rem;
  color: rgba(59, 74, 62, 0.6);
  margin-top: 0.25rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.footer-bottom p {
  margin: 0;
}

@media (max-width: 600px) {
  .site-footer {
    padding: 1.25rem 1rem 1rem;
  }
  .footer-extended {
    padding: 2.25rem 1.25rem 2rem;
  }
  .footer-inner {
    gap: 1.25rem;
  }
  .footer-mission,
  .core-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mission-highlight {
    font-size: 0.9rem;
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
  }
  .footer-mission-heading {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
  }
  .footer-links {
    gap: 0.25rem;
    margin-bottom: 0.85rem;
    font-size: 0.85rem;
  }
  .footer-links a {
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer-links .divider {
    display: none;
  }
  .footer-contact {
    font-size: 0.8rem;
  }
  .footer-bottom {
    font-size: 0.75rem;
  }
}


/* =======================================================================
   WOOCOMMERCE SPECIFIC CUSTOMIZATIONS (EXCLUDING GLOBAL CLEANUP)
   ======================================================================= */
/* Organic / wildcrafted handwriting note alignment */
.woocommerce div.product .handwriting-notes-organic,
.woocommerce div.product .handwriting-notes-wildcrafted {
  margin: -12px 0 0;
}

/* Social Links for WooCommerce Blocks */
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-facebook {
  background-color: grey;
}

.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-twitter {
  background-color: grey;
}

.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-instagram {
  background-color: grey;
}

/* Hide Top Bar Shop in Various Contexts */
.home .top-bar-shop {
  display: none;
}

.single-product .top-bar-shop {
  display: none;
}

.page .top-bar-shop {
  display: none;
}

/* Kill the 30px bottom margin on empty <p> tags that wpautop injects inside
   the top-bar-shop Text widget. Parent theme (Monochrome Pro) sets a global
   `p { margin: 0 0 30px }` which otherwise pushes the breadcrumb nav down. */
.top-bar-shop p {
  margin: 0;
}

/* =======================================================================
   BLOCKQUOTE CALLOUTS
   ======================================================================= */
  .wp-block-quote,
  blockquote {
    position: relative;
    margin: 0.75rem auto 0.5rem;
    padding: 1rem 1.5rem 1.1rem;
    max-width: min(740px, 92vw);
    background-color: hsla(152, 32%, 90%, .85);
    border-radius: 1rem;
    border: 1px solid hsla(152, 25%, 55%, .2);
    box-shadow: none;
    color: #2f3a33;
    font-family: "Brandon Grotesque", sans-serif;
    font-style: italic;
    font-size: 1.32rem;
    line-height: 1.65;
    letter-spacing: .01em;
  }

  .wp-block-quote p,
  blockquote p {
    margin: 0;
    font: inherit;
  }

  .wp-block-quote::before,
  blockquote::before {
    content: "“";
    position: absolute;
    top: .55rem;
    left: 1.2rem;
    font-size: 2.75rem;
    color: #bfe2dc;
    line-height: 1;
  }

  .wp-block-quote::after,
  blockquote::after {
    content: "”";
    position: absolute;
    right: 1.2rem;
    bottom: .45rem;
    font-size: 2.75rem;
    color: #bfe2dc;
    line-height: 1;
  }

  .wp-block-quote cite,
  .wp-block-quote footer,
  blockquote cite,
  blockquote footer {
    display: block;
    margin-top: 0.4rem;
    text-align: right;
    font-family: "Brandon Grotesque", sans-serif;
    font-size: .92rem;
    font-style: normal;
    color: #5a665f;
  }

  .wp-block-quote a,
  blockquote a {
    color: #3a4a3f;
    text-decoration: underline;
    text-decoration-color: rgba(58, 74, 63, .65);
    font-style: normal;
  }

  .wp-block-quote a:hover,
  blockquote a:hover {
    text-decoration-color: rgba(58, 74, 63, .95);
  }

  .wp-block-quote.is-style-large,
  blockquote.is-style-large {
    font-size: 1.5rem;
    padding: 2.2rem 2.4rem 2.4rem;
  }

  @media (max-width: 720px) {
    .wp-block-quote,
    blockquote {
      margin: 0.6rem auto 0.4rem;
      padding: 0.9rem 1.3rem 1rem;
      font-size: 1.16rem;
    }

    .wp-block-quote::before,
    blockquote::before {
      top: .35rem;
      left: .95rem;
      font-size: 2.4rem;
    }

    .wp-block-quote::after,
    blockquote::after {
      right: .95rem;
      bottom: .35rem;
      font-size: 2.4rem;
    }
  }

/* =======================================================================
   HANDWRITING NOTES & RELATED TEXT STYLES
   ======================================================================= */
/* Handwriting Notes */
.handwriting-notes {
    font-family: 'blanket', sans-serif;
    font-size: 18px;
    padding-left: 1%;
    font-weight: 300; /* Light */
    font-style: normal;
}

.handwriting {
    font-family: 'blanket', sans-serif;
    font-size: 18px;
    padding-left: 1%;
    font-weight: 300; /* Light */
    font-style: normal;
}

.handwriting-notes-top {
    font-family: 'blanket', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400; /* Regular for clarity at top */
    margin-bottom: 0px;
    margin-top: 0%;
    text-align: left;
    margin-left: 0%;
}

.product-tip {
    font-family: 'blanket', sans-serif;
    font-size: 18px;
    font-weight: 400; /* Regular for smaller size */
    font-style: normal;
}

/* =======================================================================
   TOP BAR LOGIN & ACCOUNT LINKS
   ======================================================================= */
.login-popup-trigger {
  float: right;
  margin-right: 3%;
}



/* =======================================================================
   CUSTOM PADDING & UTILITY CLASSES
   ======================================================================= */
@media only screen and (max-width: 600px) {
  .padding-left-20 {
    padding-left: 15%;
  }
  .padding-sides-10 {
    padding-left: 10%;
    padding-right: 10%;
  }
}

.align-bottom {
  margin-top: 12%;
  margin-bottom: 0px;
}

.padding-right-10 {
  transform: translate(-10%);
}

@media only screen and (max-width: 600px) {
  .padding-right-10 {
    transform: translate(0, 0);
  }
  
  .padding-sides-20 {
    padding-left: 20%;
    padding-right: 20%;
  }
}


/* =======================================================================
   GLOBAL WOOCOMMERCE STYLE CLEANUP
   ======================================================================= */
/* 🔹 PRODUCT META */
.product-meta {
  font-size: 14px;
  color: #555; /* Slightly lighter text to de-emphasize */
  margin-top: 15px; /* Add some space above it */
  padding-top: 15px; /* Add space and a line */
  border-top: 1px solid #eee; /* A subtle separator line */
}

/* 🔹 GENERAL ALIGNMENT */
.woocommerce .content .entry {
  border-bottom: 0;
  margin-top: 0;
  padding-top: 0;
  padding-left: 3%;
  padding-right: 3%;
}

/* 🔹 GLOBAL NOTICE (STOREFRONT BANNER) */
body.eg-store-notice-active {
  overflow: hidden;
}

body.eg-store-notice-active::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(28, 43, 39, 0.34);
  backdrop-filter: blur(2px);
  pointer-events: auto;
  z-index: 99990;
}

.woocommerce-store-notice,
p.demo_store {
  background: linear-gradient(135deg, #f2ede0 0%, #ebe5d7 100%);
  color: #22372f;
  border: 1px solid rgba(44, 94, 84, 0.34);
  border-right: 5px solid #2c5e54;
  border-radius: 12px;
  box-shadow: 0 20px 40px -28px rgba(20, 37, 33, 0.6);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  margin: 0;
  width: calc(100vw - 40px);
  max-width: 700px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 14px 18px;
  z-index: 99999 !important;
}

.woocommerce-store-notice a,
p.demo_store a {
  color: #2c5e54;
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.woocommerce-store-notice .eg-store-notice-hint,
p.demo_store .eg-store-notice-hint {
  font-weight: 600;
}

.woocommerce-store-notice .woocommerce-store-notice__dismiss-link,
p.demo_store .woocommerce-store-notice__dismiss-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #2c5e54;
  border-radius: 999px;
  background: #2c5e54;
  color: #f7f9f8 !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.woocommerce-store-notice .woocommerce-store-notice__dismiss-link:hover,
.woocommerce-store-notice .woocommerce-store-notice__dismiss-link:focus-visible,
p.demo_store .woocommerce-store-notice__dismiss-link:hover,
p.demo_store .woocommerce-store-notice__dismiss-link:focus-visible {
  background: #234b43;
  border-color: #234b43;
  color: #f7f9f8 !important;
  text-decoration: none;
}

@media only screen and (max-width: 640px) {
  .woocommerce-store-notice,
  p.demo_store {
    padding: 12px 14px;
    font-size: 14px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .woocommerce-store-notice .woocommerce-store-notice__dismiss-link,
  p.demo_store .woocommerce-store-notice__dismiss-link {
    width: 100%;
  }
}

/* 🔹 PRODUCT GRID (COLUMNS & LAYOUT) */
/* Respect WooCommerce columns-5, columns-4, etc. (set in WooCommerce > Settings > Products). */
/* minmax(0, 1fr) keeps columns equal when content varies; min-width: 0 on items allows shrinking. */
.woocommerce ul.products {
  display: grid;
  gap: 0.75rem 1rem;
  float: none;
}
.woocommerce ul.products li.product {
  position: relative;
  text-align: center;
  justify-content: flex-start;
  width: 100% !important;
  min-width: 0;
  float: none !important;
  clear: none !important;
  padding: 0;
  margin: 0 !important;
}
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-1 { grid-template-columns: 1fr; }

/* Step down: 5 → 4 columns at medium-wide */
@media only screen and (max-width: 1400px) {
  .woocommerce ul.products.columns-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Middle breakpoint: 4 columns for both 5 and 4 column layout */
@media only screen and (max-width: 1200px) {
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Then 3 columns at smaller desktop */
@media only screen and (max-width: 992px) {
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 768px) {
  .woocommerce ul.products[class*=columns-] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media only screen and (max-width: 480px) {
  .woocommerce ul.products[class*=columns-] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .woocommerce ul.products[class*=columns-] li.product {
    max-width: none;
  }
}

/* Tighter gaps for very small screens (iPhone SE, 320px) */
@media only screen and (max-width: 360px) {
  .woocommerce ul.products[class*=columns-] {
    gap: 0.375rem;
  }
}

/* 🔹 Content-heavy categories (e.g. TEA + HERBALS): fewer columns (cards that need horizontal layout get it per-card via .mlvf-card-expanded).
   Target by body class OR by ul.products.eg-content-heavy so it works on category archive and when loop is filtered by category (e.g. shop + filter). */
body.eg-content-heavy-archive .woocommerce ul.products,
.woocommerce ul.products.eg-content-heavy {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
  float: none;
}
body.eg-content-heavy-archive .woocommerce ul.products li.product,
.woocommerce ul.products.eg-content-heavy li.product {
  width: 100% !important;
  float: none;
  padding: 0;
  margin: 0;
}
/* 3 columns from 992px so it’s not stuck at 2 on medium-large screens */
@media only screen and (min-width: 992px) {
  body.eg-content-heavy-archive .woocommerce ul.products,
  body.eg-content-heavy-archive .woocommerce ul.products[class*=columns-],
  .woocommerce ul.products.eg-content-heavy {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 1200px) {
  body.eg-content-heavy-archive .woocommerce ul.products,
  body.eg-content-heavy-archive .woocommerce ul.products[class*=columns-],
  .woocommerce ul.products.eg-content-heavy {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 4 columns on very large screens */
@media only screen and (min-width: 1400px) {
  body.eg-content-heavy-archive .woocommerce ul.products,
  body.eg-content-heavy-archive .woocommerce ul.products[class*=columns-],
  .woocommerce ul.products.eg-content-heavy {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* 2 columns on tablet – content-heavy cards still have room for horizontal layout */
@media only screen and (max-width: 768px) {
  body.eg-content-heavy-archive .woocommerce ul.products,
  body.eg-content-heavy-archive .woocommerce ul.products[class*=columns-],
  .woocommerce ul.products.eg-content-heavy {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* 1 column on mobile – horizontal magazine cards need full width.
   600px (not 480px) because floated 160px images leave too little text room in 2-col below 600px. */
@media only screen and (max-width: 600px) {
  body.eg-content-heavy-archive .woocommerce ul.products,
  body.eg-content-heavy-archive .woocommerce ul.products[class*=columns-],
  .woocommerce ul.products.eg-content-heavy {
    grid-template-columns: 1fr !important;
  }
  body.eg-content-heavy-archive .woocommerce ul.products li.product,
  .woocommerce ul.products.eg-content-heavy li.product {
    max-width: none;
  }
}

/* 🔹 Content-heavy horizontal layout: ALL cards in content-heavy archives use
   magazine-style layout (image floated left, text wraps around it).
   Applied uniformly so every card in the loop is consistent — no mixing
   of skinny vertical and wide horizontal cards.
   Uses display: flow-root to contain floats WITHOUT clipping overflow
   (so the heart button can straddle the card corner). */
body.eg-content-heavy-archive .woocommerce ul.products li.product .mlvf-product-wrapper,
.woocommerce ul.products.eg-content-heavy li.product .mlvf-product-wrapper {
  display: flow-root !important;
  text-align: left;
  max-height: none;
}
body.eg-content-heavy-archive .woocommerce ul.products li.product .mlvf-image-wrapper,
.woocommerce ul.products.eg-content-heavy li.product .mlvf-image-wrapper {
  float: left !important;
  margin: 0 1rem 0.5rem 0 !important;
  width: 160px !important;
  min-width: 160px !important;
  height: 160px !important;
  border-radius: 10px;
  overflow: hidden !important;
}
body.eg-content-heavy-archive .woocommerce ul.products li.product .mlvf-image-wrapper img,
.woocommerce ul.products.eg-content-heavy li.product .mlvf-image-wrapper img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center;
  border-radius: 10px;
}
/* Text wraps around the floated image — details wrapper must NOT create a BFC */
body.eg-content-heavy-archive .woocommerce ul.products li.product .mlvf-details-and-form-wrapper,
.woocommerce ul.products.eg-content-heavy li.product .mlvf-details-and-form-wrapper {
  display: block !important;
  overflow: visible !important;
  text-align: left;
  min-width: 0;
}
body.eg-content-heavy-archive .woocommerce ul.products li.product .mlvf-product-details,
.woocommerce ul.products.eg-content-heavy li.product .mlvf-product-details {
  display: block !important;
  text-align: left;
  min-width: 0;
}
body.eg-content-heavy-archive .woocommerce ul.products li.product .mlvf-loop-short-description,
.woocommerce ul.products.eg-content-heavy li.product .mlvf-loop-short-description {
  max-width: none;
}
/* Quantity / add-to-cart controls clear below the float so they span full width */
body.eg-content-heavy-archive .woocommerce ul.products li.product .mlvf-quantity-box,
.woocommerce ul.products.eg-content-heavy li.product .mlvf-quantity-box,
body.eg-content-heavy-archive .woocommerce ul.products li.product .mlvf-special-button,
.woocommerce ul.products.eg-content-heavy li.product .mlvf-special-button {
  clear: both;
}
/* On mobile single-column, shrink the floated image a bit so more text
   fits beside it, but keep the magazine layout — there's still enough
   room at full-width (~375px+) for image + text side by side. */
@media only screen and (max-width: 480px) {
  body.eg-content-heavy-archive .woocommerce ul.products li.product .mlvf-image-wrapper,
  .woocommerce ul.products.eg-content-heavy li.product .mlvf-image-wrapper {
    width: 120px !important;
    min-width: 120px !important;
    height: 120px !important;
  }
}

/* ── Horizontal magazine cards: action-first, info-first + picture-first archives ──
   Action-first (market goods, produce): compact 140px image, controls-focused.
   Info-first (refill categories): same as action for now, can diverge later.
   Picture-first (unclassified): prominent 200px image.
   All use the same float pattern as content-heavy (tea). */

/* Grid: shared between action, info, and picture */
body.eg-action-archive .woocommerce ul.products,
body.eg-info-archive .woocommerce ul.products,
body.eg-picture-archive .woocommerce ul.products,
.woocommerce ul.products.eg-action,
.woocommerce ul.products.eg-info,
.woocommerce ul.products.eg-picture {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
  float: none;
}
body.eg-action-archive .woocommerce ul.products li.product,
body.eg-info-archive .woocommerce ul.products li.product,
body.eg-picture-archive .woocommerce ul.products li.product,
.woocommerce ul.products.eg-action li.product,
.woocommerce ul.products.eg-info li.product,
.woocommerce ul.products.eg-picture li.product {
  width: 100% !important;
  float: none;
  padding: 0;
  margin: 0;
}
/* 3 columns from 992px */
@media only screen and (min-width: 992px) {
  body.eg-action-archive .woocommerce ul.products,
  body.eg-action-archive .woocommerce ul.products[class*=columns-],
  body.eg-info-archive .woocommerce ul.products,
  body.eg-info-archive .woocommerce ul.products[class*=columns-],
  body.eg-picture-archive .woocommerce ul.products,
  body.eg-picture-archive .woocommerce ul.products[class*=columns-],
  .woocommerce ul.products.eg-action,
  .woocommerce ul.products.eg-info,
  .woocommerce ul.products.eg-picture {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Action + info: 4 columns on large screens (compact 140px image fits) */
@media only screen and (min-width: 1400px) {
  body.eg-action-archive .woocommerce ul.products,
  body.eg-action-archive .woocommerce ul.products[class*=columns-],
  body.eg-info-archive .woocommerce ul.products,
  body.eg-info-archive .woocommerce ul.products[class*=columns-],
  .woocommerce ul.products.eg-action,
  .woocommerce ul.products.eg-info {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* 2 columns on tablet */
@media only screen and (max-width: 768px) {
  body.eg-action-archive .woocommerce ul.products,
  body.eg-action-archive .woocommerce ul.products[class*=columns-],
  body.eg-info-archive .woocommerce ul.products,
  body.eg-info-archive .woocommerce ul.products[class*=columns-],
  body.eg-picture-archive .woocommerce ul.products,
  body.eg-picture-archive .woocommerce ul.products[class*=columns-],
  .woocommerce ul.products.eg-action,
  .woocommerce ul.products.eg-info,
  .woocommerce ul.products.eg-picture {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* 1 column on mobile - magazine cards need full width for image+text side by side */
@media only screen and (max-width: 600px) {
  body.eg-action-archive .woocommerce ul.products,
  body.eg-action-archive .woocommerce ul.products[class*=columns-],
  body.eg-info-archive .woocommerce ul.products,
  body.eg-info-archive .woocommerce ul.products[class*=columns-],
  body.eg-picture-archive .woocommerce ul.products,
  body.eg-picture-archive .woocommerce ul.products[class*=columns-],
  .woocommerce ul.products.eg-action,
  .woocommerce ul.products.eg-info,
  .woocommerce ul.products.eg-picture {
    grid-template-columns: 1fr !important;
  }
  body.eg-action-archive .woocommerce ul.products li.product,
  body.eg-info-archive .woocommerce ul.products li.product,
  body.eg-picture-archive .woocommerce ul.products li.product,
  .woocommerce ul.products.eg-action li.product,
  .woocommerce ul.products.eg-info li.product,
  .woocommerce ul.products.eg-picture li.product {
    max-width: none;
  }
}

/* Magazine layout: shared float pattern for all archive types */
body.eg-action-archive .woocommerce ul.products li.product .mlvf-product-wrapper,
body.eg-info-archive .woocommerce ul.products li.product .mlvf-product-wrapper,
body.eg-picture-archive .woocommerce ul.products li.product .mlvf-product-wrapper,
.woocommerce ul.products.eg-action li.product .mlvf-product-wrapper,
.woocommerce ul.products.eg-info li.product .mlvf-product-wrapper,
.woocommerce ul.products.eg-picture li.product .mlvf-product-wrapper {
  display: flow-root !important;
  text-align: left;
  max-height: none;
}
/* Shared image float base */
body.eg-action-archive .woocommerce ul.products li.product .mlvf-image-wrapper,
body.eg-info-archive .woocommerce ul.products li.product .mlvf-image-wrapper,
body.eg-picture-archive .woocommerce ul.products li.product .mlvf-image-wrapper,
.woocommerce ul.products.eg-action li.product .mlvf-image-wrapper,
.woocommerce ul.products.eg-info li.product .mlvf-image-wrapper,
.woocommerce ul.products.eg-picture li.product .mlvf-image-wrapper {
  float: left !important;
  margin: 0 1rem 0.5rem 0 !important;
  border-radius: 10px;
  overflow: hidden !important;
}
/* Action + info: 140px compact image (info matches action for now) */
body.eg-action-archive .woocommerce ul.products li.product .mlvf-image-wrapper,
body.eg-info-archive .woocommerce ul.products li.product .mlvf-image-wrapper,
.woocommerce ul.products.eg-action li.product .mlvf-image-wrapper,
.woocommerce ul.products.eg-info li.product .mlvf-image-wrapper {
  width: 140px !important;
  min-width: 140px !important;
  height: 140px !important;
}
/* Picture-first: 180px prominent image (fits 2-col tablet without cramping text) */
body.eg-picture-archive .woocommerce ul.products li.product .mlvf-image-wrapper,
.woocommerce ul.products.eg-picture li.product .mlvf-image-wrapper {
  width: 180px !important;
  min-width: 180px !important;
  height: 180px !important;
}
/* Image sizing: fill the wrapper */
body.eg-action-archive .woocommerce ul.products li.product .mlvf-image-wrapper img,
body.eg-info-archive .woocommerce ul.products li.product .mlvf-image-wrapper img,
body.eg-picture-archive .woocommerce ul.products li.product .mlvf-image-wrapper img,
.woocommerce ul.products.eg-action li.product .mlvf-image-wrapper img,
.woocommerce ul.products.eg-info li.product .mlvf-image-wrapper img,
.woocommerce ul.products.eg-picture li.product .mlvf-image-wrapper img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center;
  border-radius: 10px;
}
/* Text wraps around the floated image */
body.eg-action-archive .woocommerce ul.products li.product .mlvf-details-and-form-wrapper,
body.eg-info-archive .woocommerce ul.products li.product .mlvf-details-and-form-wrapper,
body.eg-picture-archive .woocommerce ul.products li.product .mlvf-details-and-form-wrapper,
.woocommerce ul.products.eg-action li.product .mlvf-details-and-form-wrapper,
.woocommerce ul.products.eg-info li.product .mlvf-details-and-form-wrapper,
.woocommerce ul.products.eg-picture li.product .mlvf-details-and-form-wrapper {
  display: block !important;
  overflow: visible !important;
  text-align: left;
  min-width: 0;
}
body.eg-action-archive .woocommerce ul.products li.product .mlvf-product-details,
body.eg-info-archive .woocommerce ul.products li.product .mlvf-product-details,
body.eg-picture-archive .woocommerce ul.products li.product .mlvf-product-details,
.woocommerce ul.products.eg-action li.product .mlvf-product-details,
.woocommerce ul.products.eg-info li.product .mlvf-product-details,
.woocommerce ul.products.eg-picture li.product .mlvf-product-details {
  display: block !important;
  text-align: left;
  min-width: 0;
}
body.eg-action-archive .woocommerce ul.products li.product .mlvf-loop-short-description,
body.eg-info-archive .woocommerce ul.products li.product .mlvf-loop-short-description,
body.eg-picture-archive .woocommerce ul.products li.product .mlvf-loop-short-description,
.woocommerce ul.products.eg-action li.product .mlvf-loop-short-description,
.woocommerce ul.products.eg-info li.product .mlvf-loop-short-description,
.woocommerce ul.products.eg-picture li.product .mlvf-loop-short-description {
  max-width: none;
}
/* Controls clear below the float so they span full card width */
body.eg-action-archive .woocommerce ul.products li.product .mlvf-quantity-box,
body.eg-info-archive .woocommerce ul.products li.product .mlvf-quantity-box,
body.eg-picture-archive .woocommerce ul.products li.product .mlvf-quantity-box,
.woocommerce ul.products.eg-action li.product .mlvf-quantity-box,
.woocommerce ul.products.eg-info li.product .mlvf-quantity-box,
.woocommerce ul.products.eg-picture li.product .mlvf-quantity-box,
body.eg-action-archive .woocommerce ul.products li.product .mlvf-special-button,
body.eg-info-archive .woocommerce ul.products li.product .mlvf-special-button,
body.eg-picture-archive .woocommerce ul.products li.product .mlvf-special-button,
.woocommerce ul.products.eg-action li.product .mlvf-special-button,
.woocommerce ul.products.eg-info li.product .mlvf-special-button,
.woocommerce ul.products.eg-picture li.product .mlvf-special-button {
  clear: both;
}
/* Mobile: shrink images proportionally */
@media only screen and (max-width: 480px) {
  body.eg-action-archive .woocommerce ul.products li.product .mlvf-image-wrapper,
  body.eg-info-archive .woocommerce ul.products li.product .mlvf-image-wrapper,
  .woocommerce ul.products.eg-action li.product .mlvf-image-wrapper,
  .woocommerce ul.products.eg-info li.product .mlvf-image-wrapper {
    width: 100px !important;
    min-width: 100px !important;
    height: 100px !important;
  }
  body.eg-picture-archive .woocommerce ul.products li.product .mlvf-image-wrapper,
  .woocommerce ul.products.eg-picture li.product .mlvf-image-wrapper {
    width: 120px !important;
    min-width: 120px !important;
    height: 120px !important;
  }
}

/* 🔹 PRODUCT IMAGE STYLING */
.woocommerce ul.products li.product a img {
  height: inherit;
  border-radius: 6%;
}

/* 🔹 PRICE COLOR - Higher specificity */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount {
  color: black !important;
  text-align: left !important;
}

/* 🔹 SALE BADGE */
.woocommerce ul.products li.product .onsale {
  left: -5%;
  right: auto;
  top: auto;
padding: 0%;
background:#d0ddd8;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1200px) {
  .woocommerce ul.products li.product .onsale {
    /* Your mobile-specific styles here */
    left: 5% !important;
    right: auto;
    top: auto;
    /* Maybe change font size, padding, etc. */
  }
}

/* 🔹 PRODUCT PAGE TITLE */
.woocommerce div.product .product_title {
  margin-top: 0;
  margin-bottom: var(--eg-field-gap);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--eg-text-primary);
}

/* 🔹 PRODUCT IMAGE STYLING (SINGLE PRODUCT) */
.woocommerce div.product div.images img {
  border-radius: 3%;
}

/* 🔹 BRAND NAME BELOW PRODUCT TITLE */
.product-brand {
  margin-top: 0;
  font-weight: 400;
  font-style: italic;
  font-size: .95rem !important;
  color: var(--eg-text-secondary) !important;
  margin-bottom: var(--eg-field-gap) !important;
}

/* 🔹 PRODUCT TABS BORDER FIX */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom: 2px solid #ddd;
}

@media (min-width: 641px) {
  .single-product div.product .woocommerce-tabs ul.tabs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
    width: auto;
  }

  .single-product div.product .woocommerce-tabs ul.tabs li {
    float: none;
    flex: 0 0 auto;
    width: auto;
    display: inline-flex;
    align-items: center;
  }
}

/* -------------------------------------------------------------------------- */
/* Single-product tab headers: minimalist + / - with underline only            */
/* No pill tabs, no panel borders, no contrasting backgrounds                   */
/* -------------------------------------------------------------------------- */
.single-product div.product .woocommerce-tabs {
  margin-top: 1rem;
  background: transparent;
}

/* --- New accordion tab structure --- */
.single-product div.product .eg-accordion-item {
  margin: 0;
  padding: 0;
}

.single-product div.product .eg-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.65rem 0;
  font-size: inherit;
  font-weight: 500;
  color: inherit;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  cursor: pointer;
}

.single-product div.product .eg-accordion-header a {
  color: inherit;
  text-decoration: none;
  flex: 1;
}

.single-product div.product .eg-accordion-header:hover,
.single-product div.product .eg-accordion-item.active .eg-accordion-header {
  border-color: rgba(0, 0, 0, 0.35);
}

.single-product div.product .eg-accordion-icon {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
}

/* --- Legacy ul.tabs (fallback) --- */
.single-product div.product .woocommerce-tabs ul.tabs,
.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs::after {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.single-product div.product .woocommerce-tabs ul.tabs {
  display: block !important;
  padding: 0;
  margin: 0 0 0.7rem;
}

.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li {
  display: block !important;
  float: none !important;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0;
  color: inherit;
  font-weight: 500;
  letter-spacing: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: transparent !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li a:hover,
.single-product div.product .woocommerce-tabs ul.tabs li.active a,
.single-product div.product .woocommerce-tabs ul.tabs li.active a:hover {
  color: inherit;
  border-color: rgba(0, 0, 0, 0.35);
  background: transparent !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li a::after {
  content: '+';
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: currentColor;
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a::after {
  content: '−';
}

/* --- Panel content (shared by both structures) --- */
.single-product div.product .woocommerce-tabs .panel {
  margin-top: 0;
  padding: 0.7rem 0 1rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
}

.single-product div.product .woocommerce-tabs .panel > :last-child {
  margin-bottom: 0;
}

/* Nutrition label: same site background, no outside box, minimal row rules */
.single-product .eg-nutrition-label {
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.single-product .eg-nutrition-title {
  margin-bottom: 0.35rem;
}

.single-product .eg-nutrition-divider {
  margin: 3px 0;
}

.single-product .eg-nutrition-divider-thick {
  border-top-width: 2px;
}

.single-product .eg-nutrition-row {
  padding: 2px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}

/* Wide desktop grid (card + tabs side by side) lives in eg-layout-modes.css */
/* 🔹 TWO-COLUMN LAYOUT */
/* 🌟 Two-Column Cart Layout - Fixed breakpoint overlap */
@media (min-width: 800px) {
  /* Cart now uses .cce-cart-columns wrapper (same as checkout) */
  /* Old flexbox layout CSS removed - no longer needed */

  body.woocommerce-cart .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals {
    width: 100%;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }
}

/* 📱 Mobile Stacking - Fixed to cover problematic range */
@media (max-width: 799px) {
  .woocommerce-cart-form,
  .woocommerce .cart-collaterals {
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
    margin-top: 20px;
  }
  
  /* Ensure product thumbnails remain visible */
  .woocommerce-cart-form .product-thumbnail img {
    width: 60px !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
  }
  
  /* Fix any layout issues in the problematic range */
  .woocommerce-cart-form .cart_item {
    display: table-row !important;
  }
  
  .woocommerce-cart-form .cart_item td {
    display: table-cell !important;
    vertical-align: middle !important;
  }
}

/* 🔹 GENERAL BUTTON STYLING (Default) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  white-space: nowrap;
  color: #000;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;                 /* remove extra margin */
  padding: 20px 20px;
  border-radius: 6px;        /* less round corners */
  border: none;
  /* Primary: gradient to match your header colors */
  background: linear-gradient(135deg, #e0f7f9 0%, #ddedeb 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* slight pop */
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce a.button,
.woocommerce a.button.alt {
  color: #000;
}

.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce input.button[type="submit"],
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt {
  color: #000 !Important;
  font-weight: 600;
  border: 2px solid #101326 !important;
}

/* 🔥 Hover Effect for WooCommerce Buttons */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  color: #000;
  cursor: pointer;
}

/* 🛍 "Proceed to Checkout" Button (Initial) */
.woocommerce .checkout-button {
  width: 100%;
  max-width: 400px;
  display: block;
  margin: auto;
  color: #000;
}

/* 🔹 SWATCH BUTTONS */
a.button.wp-element-button.product_type_variable.add_to_cart_button.wvs-add-to-cart-button {
  top: 40%;
  background: linear-gradient(135deg, #bfe2dc 0%, #d0ddd8 100%);
  border: 1px solid #a5ccbc;
  border-radius: 6px;
  color: #1f1f1f;
  font-weight: 600;
  box-shadow: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Ensure all Add to Cart buttons use the brand gradient */
.woocommerce .add_to_cart_button,
.woocommerce .single_add_to_cart_button,
.mlvf-custom-add-button {
  background: linear-gradient(135deg, #bfe2dc 0%, #d0ddd8 100%) !important;
  background-image: linear-gradient(135deg, #bfe2dc 0%, #d0ddd8 100%) !important;
  color: #1f1f1f !important;
  border: 1px solid #a5ccbc !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  padding: 0 12px;
  height: 40px;
  line-height: 38px;
}
.woocommerce .add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover,
.mlvf-custom-add-button:hover {
  background: linear-gradient(135deg, #a5ccbc 0%, #bfe2dc 100%) !important;
  background-image: linear-gradient(135deg, #a5ccbc 0%, #bfe2dc 100%) !important;
  border-color: #2c5e54 !important;
}

/* 🔹 BRAND NAMES - Higher specificity for product loops */
.brand-name,
.woocommerce ul.products li.product .brand-name,
.woocommerce ul.products li.product .product-brand {
  font-size: 10px !important;
  font-style: italic !important;
  text-align: left !important;
  display: block !important;
  margin: 0.2em 0 !important;
}

/* 🔹 WOOCOMMERCE LOOP PRODUCT TITLE (Reset Padding) - REMOVED DUPLICATE */

/* 🛒 FREE SHIPPING PROGRESS BAR */
/* Cart Free Shipping Progress */
.cart-free-shipping {
    font-family: 'blanket', sans-serif;
    font-size: 18px;
    font-weight: 300; /* Light */
    font-style: normal;
    color: #1f1f1f;
    margin-bottom: 10px;
    text-align: center;
}

/* 🎯 Progress Bar Styling */
.progress-bar-container {
  width: 100%;
  background: #f3f3f3;
  border-radius: 20px;
  overflow: hidden;
  height: 10px;
  box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.progress-bar {
  height: 100%;
  width: 20%; /* Adjust dynamically with JavaScript */
  background: linear-gradient(135deg, #e0f7f9, #ddedeb); /* Your button gradient */
  border-radius: 20px;
  transition: width 0.5s ease-in-out;
}

/* -------------------------------------------------------------------
   PDF.js Embed — Controls Bar
   ------------------------------------------------------------------- */
#pdf-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 950px;
  margin: 1rem auto 0.5rem;
  padding: 10px 16px;
  background: linear-gradient(to bottom, #f8faf9, #eef5f2);
  border: 1px solid #d4e5dd;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  font-family: 'Brandon Grotesque', -apple-system, sans-serif;
  gap: 12px;
  flex-wrap: wrap;
}

.pdf-controls-left,
.pdf-controls-center,
.pdf-controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdf-controls-center {
  flex: 1;
  justify-content: center;
}

/* Download link */
.pdf-download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0f4c3a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.pdf-download-link:hover {
  background: rgba(215, 237, 230, 0.6);
  text-decoration: none;
  color: #0a3628;
}

.pdf-icon {
  font-size: 16px;
}

/* Page info */
#pdf-page-info {
  font-size: 13px;
  color: #555;
  min-width: 90px;
  text-align: center;
  white-space: nowrap;
}

/* Navigation buttons */
.pdf-nav-btn {
  background: #d7ede6;
  border: 1px solid #b8ddd2;
  color: #0f4c3a;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  line-height: 1;
}

.pdf-nav-btn:hover:not(:disabled) {
  background: #c4e6dc;
  border-color: #9fd4c4;
}

.pdf-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Zoom buttons */
.pdf-zoom-btn {
  background: transparent;
  border: 1px solid #d4e5dd;
  color: #555;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.pdf-zoom-btn:hover {
  background: #e8f4ef;
  border-color: #b8ddd2;
  color: #0f4c3a;
}

.pdf-zoom-btn.pdf-zoom-active {
  background: #d7ede6;
  border-color: #0f4c3a;
  color: #0f4c3a;
}

/* Mobile responsive */
@media (max-width: 768px) {
  #pdf-controls-bar {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    margin: 0.5rem 0.5rem;
  }
  
  .pdf-controls-left,
  .pdf-controls-right {
    width: 100%;
    justify-content: center;
  }
  
  .pdf-controls-center {
    order: -1;
    width: 100%;
  }
  
  .pdf-download-link {
    font-size: 13px;
  }
  
  #pdf-page-info {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .pdf-controls-right {
    gap: 4px;
  }
  
  .pdf-zoom-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .pdf-nav-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}

/* -------------------------------------------------------------------
   PDF.js Embed — Center & Responsive
   ------------------------------------------------------------------- */

/* Hide the decorative separator and tighten entry-header on PDF pages */
body:has(#pdf-wrapper) .entry-header {
  margin-bottom: 0;
  padding-bottom: 0;
}
body:has(#pdf-wrapper) .entry-header::after {
  display: none;
}

#pdf-wrapper {
  position: relative;
  width: 100%;
  max-width: 950px;
  margin: 0.5rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
}

#pdf-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: auto;
  border: none !important;
  background: #fafafa;
}

#pdf-viewer {
  width: 100%;
  max-width: 100%;
}

/* Force PDF pages to fit container */
.pdfViewer .page {
  margin: 0 auto 10px;
  max-width: 100% !important;
}

.pdfViewer .page canvas {
  max-width: 100% !important;
  height: auto !important;
}


/* Tablets and smaller: ensure PDF fits viewport */
@media (max-width: 1023px) {
  #pdf-wrapper {
    width: calc(100% - 1rem);
    max-width: 100%;
    height: 80vh;
    height: 80svh; /* accounts for mobile browser chrome (address bar/toolbar) */
    min-height: 400px;
  }
}
/* ─── PDF.js Link Annotations — Sage + Light-Blue Hover ─── */
.pdfViewer .annotationLayer a {
  /* very light sage background, no border */
  background-color: rgba(165, 204, 188, 0.1);
  cursor: pointer; /* show pointer over links */
  transition: background-color 0.2s ease;
}

.pdfViewer .annotationLayer a:hover {
  /* fade into light blue on hover */
  background-color: rgba(0, 123, 255, 0.2);
}



/* =======================================================================
   MISCELLANEOUS & OTHER ELEMENTS
   ======================================================================= */
.wheat-symbol {
  width: 64px;
}

#subtotal {
  display: inline-block;
  width: 100%;
  font-size: 1.2em;
}


/* =======================================================================
   QR CODES SECTION
   ======================================================================= */
.qr-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.qr-code-item {
  text-align: center;
  width: 200px;
}

.qr-code-item img {
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.qr-code-item p {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}


/* =======================================================================
   CART & CHECKOUT ENHANCEMENTS (NEW)
   ======================================================================= */
/* 1. PROCEED TO CHECKOUT BUTTON - matches ADD button style */
.woocommerce a.checkout-button,
.woocommerce button.checkout-button,
.woocommerce input.checkout-button,
.woocommerce .checkout-button {
  background: linear-gradient(135deg, #e0f7f9 0%, #ddedeb 100%) !important;
  color: #222 !important;
  border: 2px solid #101326 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  font-weight: 600;
  text-transform: uppercase;
  padding: 14px 28px !important; /* bigger for emphasis */
  font-size: 1rem;
  display: block;
  margin: 1em auto; /* center it, add top/bottom space */
  max-width: 400px; /* same as your existing style */
}

.woocommerce a.checkout-button:hover,
.woocommerce button.checkout-button:hover,
.woocommerce input.checkout-button:hover,
.woocommerce .checkout-button:hover {
  background: #d4e8e2 !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
  transform: scale(1.02);
}

/* 2. CONTINUE SHOPPING BUTTON - Smaller & Below Progress Bar */
.cart-free-shipping {
  display: block;
  margin-bottom: 1em; /* space for the progress bar if needed */
}

.woocommerce .continue-shopping {
  display: inline-block;
  margin-bottom: 1em;
  font-size: 0.875rem;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #a5ccbc;
  background: transparent;
  color: #a5ccbc;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.woocommerce .continue-shopping:hover {
  background: #d5e8de;
  color: #0f4c3a;
}

/* Cart page buttons - Update Cart only (other buttons styled individually in CCE) */
.woocommerce-cart .woocommerce-cart-form button[name="update_cart"],
.woocommerce-cart .woocommerce-cart-form input[name="update_cart"] {
  background: #e8f4ee !important;
  border-color: #a5ccbc !important;
  color: #1e4a35 !important;
}

.woocommerce-cart .woocommerce-cart-form button[name="update_cart"]:hover,
.woocommerce-cart .woocommerce-cart-form input[name="update_cart"]:hover {
  background: #d5e8de !important;
  border-color: #2b5d4b !important;
  color: #0f4c3a !important;
}

/* 3. CART ITEM STYLING - Modern Look */
.woocommerce-cart-form .cart_item {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 6px;
  border: none;
}

.woocommerce-cart-form .cart_item:not(:last-child) {
  margin-bottom: 15px; /* extra spacing between rows */
}

/* Increase product thumbnail size in cart */
.woocommerce-cart-form .product-thumbnail img {
  width: 80px; /* adjust to your preference */
  height: auto;
  border-radius: 4px; /* slight rounding for a modern look */
}

/* Optional: refine name/price columns for spacing */
.woocommerce-cart-form .product-name,
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
  padding: 0 10px;
}


/* ========================================
   FAQ PAGE ACCORDION - EXCLUDING CART ITEM NOTES
   ======================================== */

/* FAQ accordions only - NOT cart item notes */
details:not(.cce-item-note) {
  margin-bottom: 0.75em;
  border: none;
  border-radius: 0.7em;
  background: none;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

/* Exclude .pbv-volume-toggle: single-product "Purchase by volume" uses its own caret (▼/▲) */
/* Exclude .eg-how-to-shop__trigger: archive "How to shop" has its own styling */
/* Exclude .eg-loop-notes-collapsible__trigger: loop notes have their own chevron */
summary:not(.cce-item-note-toggle):not(.pbv-volume-toggle):not(.eg-how-to-shop__trigger):not(.eg-loop-notes-collapsible__trigger) {
  font-family: brandon-grotesque, sans-serif;
  font-size: 1.1em;
  font-weight: 600;
  padding: 0.7em 2em 0.7em 1.2em;
  cursor: pointer;
  outline: none;
  background: hsla(137, 13%, 92%, 1); /* Muted green background */
  border-radius: 0.7em;
  border: none;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
  transition: background 0.2s, color 0.2s;
  position: relative;
  user-select: none;
  list-style: none;
  min-height: 0;
  color: #1f1f1f;
}

summary:not(.cce-item-note-toggle):not(.pbv-volume-toggle):not(.eg-how-to-shop__trigger):not(.eg-loop-notes-collapsible__trigger):hover,
details:not(.cce-item-note)[open] summary:not(.cce-item-note-toggle):not(.pbv-volume-toggle):not(.eg-how-to-shop__trigger):not(.eg-loop-notes-collapsible__trigger) {
  background: #e0f7f9; /* Light blue on hover/open */
  color: #1f1f1f;
}

summary:not(.cce-item-note-toggle):not(.pbv-volume-toggle):not(.eg-how-to-shop__trigger):not(.eg-loop-notes-collapsible__trigger)::marker {
  display: none;
}

summary:not(.cce-item-note-toggle):not(.pbv-volume-toggle):not(.eg-how-to-shop__trigger):not(.eg-loop-notes-collapsible__trigger)::after {
  content: "\25B8";
  position: absolute;
  right: 1.2em;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1.1em;
  color: #1f1f1f;
  transition: transform 0.3s cubic-bezier(.4,2,.6,1);
}

details:not(.cce-item-note)[open] summary:not(.cce-item-note-toggle):not(.pbv-volume-toggle):not(.eg-how-to-shop__trigger):not(.eg-loop-notes-collapsible__trigger)::after {
  transform: translateY(-50%) rotate(90deg);
}

details:not(.cce-item-note) > div {
  font-family: brandon-grotesque, sans-serif;
  font-size: 1em;
  color: #1f1f1f;
  padding: 0.7em 1.2em 0.7em 1.2em;
  background: none;
  border-top: none;
  animation: fadeIn 0.4s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px);} 
  to { opacity: 1; transform: translateY(0);} 
}

@media (max-width: 600px) {
  details:not(.cce-item-note) {
    margin-bottom: 0.5em;
  }
  summary:not(.cce-item-note-toggle):not(.pbv-volume-toggle) {
    font-size: 1em;
    padding: 0.6em 1.2em 0.6em 0.8em;
  }
  details:not(.cce-item-note) > div {
    font-size: 0.97em;
    padding: 0.6em 0.8em 0.6em 0.8em;
  }
}

/* Closed-loop icon styles */
.closed-loop-icon {
  vertical-align: middle;
  margin-left: 4px;
}
.closed-loop-icon.closed-loop-loop {
  width: 18px;
  height: 18px;
}
.closed-loop-icon.closed-loop-single {
  width: 32px;
  height: 32px;
}
/* Colored SVG version - slightly larger and better quality */
.closed-loop-icon.closed-loop-colored-inline {
  width: 20px;
  height: 20px;
  margin-left: 6px;
}

/* Tooltip container for closed-loop icon */
.closed-loop-tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.closed-loop-tooltip {
  visibility: hidden;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.closed-loop-tooltip-wrapper:hover .closed-loop-tooltip,
.closed-loop-tooltip-wrapper:focus-within .closed-loop-tooltip,
.closed-loop-tooltip-wrapper.active .closed-loop-tooltip {
  visibility: visible;
}

/* -------------------------------------------------------------
   Additional overrides for brand, variations and add to cart
   ------------------------------------------------------------- */

/* Consistent brand styling on single product pages */
.single-product .product .product-brand {
  font-size: .95rem !important;
  font-style: italic;
  font-weight: 400 !important;
  color: var(--eg-text-secondary) !important;
  margin-top: 0 !important;
  margin-bottom: var(--eg-field-gap) !important;
}
.woocommerce ul.products li.product .mlvf-brand {
  font-size: 16px !important;
  font-style: italic;
}
.woocommerce ul.products li.product .mlvf-brand a {
  color: inherit;
  text-decoration: none;
}
.woocommerce ul.products li.product .mlvf-brand a:hover {
  text-decoration: underline;
}

/* Hide duplicate attribute labels */
.single-product .mlvf-attr-label,
.woocommerce ul.products li.product .mlvf-attr-label {
  display: none !important;
}

/* Ensure variations table is visible in loops */
.woocommerce ul.products li.product table.variations {
  display: table !important;
}

/* ── SINGLE PRODUCT: Price — clear but calm ── */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--eg-text-primary) !important;
  margin-top: var(--eg-gap) !important; /* Zone separator: Identity → Context */
  margin-bottom: var(--eg-field-gap) !important;
  line-height: 1.35;
}
/* Sale price: original gets muted */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  font-size: 0.85em !important;
  font-weight: 400 !important;
  color: var(--eg-text-tertiary) !important;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* ── SINGLE PRODUCT: Add to cart button — primary CTA ── */
.single-product .button.alt,
body.single-product .mlvf-custom-add-button {
  background: linear-gradient(135deg, #bfe2dc 0%, #d0ddd8 100%) !important;
  color: var(--eg-text-primary) !important;
  border: 1px solid #a5ccbc !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border-radius: var(--eg-br) !important;
  transition: background 0.2s, box-shadow 0.2s !important;
}
.single-product .button.alt:hover,
body.single-product .mlvf-custom-add-button:hover {
  background: linear-gradient(135deg, #a5ccbc 0%, #bfe2dc 100%) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Custom Product Loop */
.woocommerce ul.products li.product .mlvf-var-overlay .variations .label {
    width: 100% !important;
    display: inline-block;
    padding: 0%;
    margin-bottom: 0px;
}

/* Single product: two-column layout using flex, stacks at 480px */
.woocommerce div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    align-items: flex-start !important;
}

.woocommerce div.product div.images {
    flex: 1 1 45% !important;
    max-width: 50% !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce div.product div.summary {
    flex: 1 1 45% !important;
    max-width: 50% !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
}

/* Sections below product (tabs, related, upsells, meta) span full width */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.upsells,
.woocommerce div.product .product_meta {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* Stack on small phones only */
@media (max-width: 480px) {
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .woocommerce div.product div.images {
        margin-bottom: 1rem !important;
    }
}

/* Picture-first: div.product wraps eg-product-wrapper, not the layout container.
   Block flow with tight spacing, not flex with 24px gap. */
body.single-product.eg-layout-picture.woocommerce div.product {
    display: block !important;
    gap: 0 !important;
}

/* Disable Quantity + Add to Cart until variation selected */
.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled {
    opacity: 0.5; /* soft fade matches your style */
    pointer-events: none; /* prevents clicks */
    transition: opacity 0.3s ease;
    filter: grayscale(50%); /* subtle visual cue */
}

/* Enable once variation selected */
.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-enabled {
    opacity: 1;
    pointer-events: auto;
    filter: grayscale(0%);
}

/* Style variable product controls to match simple products */
.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
}

.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity {
    margin: 0;
}

.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .mlvf-subtotal-container {
    font-weight: bold;
    color: #333;
    flex-basis: 100%;
    margin-left: 0;
    order: 3;
    text-align: left;
}

/* Ensure variation controls have consistent styling with simple products */
.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    margin: 0;
}

/* Instructional note above variations */
.single-product .variation-instruction {
    font-family: 'blanket', sans-serif;
    font-size: 18px;
    color: #1f1f1f;
    font-style: normal;
    font-weight: 300; /* Light */
    margin-bottom: 10px;
    padding-left: 1%;
}

/* In-stock message */
.stock.in-stock {
  color: var(--eg-text-secondary) !important;
  background-color: transparent;
  padding: 0;
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  font-size: .875rem;
}

.eg-local-only-notice::before {
  content: "\1F4CD ";
  font-weight: normal;
  font-style: normal;
}

.eg-bulk-organic-notice {
  background-color: #e8f3ee;
  color: #2c4d3d !important;
  font-weight: 500;
  font-size: 0.95em;
  padding: 0.85em 1em;
  border: 1px solid rgba(90, 139, 112, 0.35);
  border-radius: 6px;
  margin-top: 1em;
}

.eg-bulk-organic-notice::before {
  content: "\1F33F ";
  font-weight: normal;
}

.woocommerce .quantity .qty {
    margin-right: 0px; 
    width: 80px !important;
}

.woocommerce ul.products li.product .button {
    margin-top: 0px;
}

/* brand size controlled by .product-brand rule above */

/* Summary width handled by flex layout above */
@media only screen and (max-width: 600px) {
    .woocommerce ul.products li.product, .woocommerce ul.products li.product .button, .woocommerce .woocommerce-ordering, .woocommerce-page ul.products li.product, .woocommerce-page ul.products li.product .button, .woocommerce-page .woocommerce-ordering {
        margin-right: 0;
        width: auto;
    }
}
.gluten-free-icon {
    width: 36px;
    color: #000;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  margin: 0 !important;
}

body.single-product .mlvf-custom-add-button {
  background: linear-gradient(135deg, #bfe2dc 0%, #d0ddd8 100%) !important;
  border: 1px solid #a5ccbc !important;
  color: var(--eg-text-primary) !important;
  border-radius: var(--eg-br) !important;
  height: 42px !important;
  padding: 0 14px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 40px !important;
}

body.single-product .mlvf-custom-add-button.loading {
  opacity: 0.7 !important;
  cursor: wait !important;
}

/* ============================================================================
   MINIMALIST VARIATION BUTTONS - GLOBAL STYLING
   =========================================================================== */

/* Container for variation buttons */
.woocommerce .mlvf-attribute-buttons {
  margin-bottom: 1rem;
}

.woocommerce .mlvf-attribute-group {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.woocommerce .mlvf-attribute-group .mlvf-attr-label {
  display: inline-block !important;
  margin: 0 0.5rem 0 0;
  position: relative;
}

.woocommerce .mlvf-attribute-group .mlvf-attr-label::after {
  content: ':';
  margin-left: 0.25rem;
}

/* Variation buttons — survey choice card style */
.woocommerce .mlvf-option-btn {
  display: inline-block;
  padding: .5rem .75rem;
  margin: 0 var(--eg-field-gap, .375rem) var(--eg-field-gap, .375rem) 0;
  background: var(--eg-card-bg, #fafbfb);
  border: 1.5px solid #d3d6da;
  border-radius: var(--eg-br, 6px);
  color: var(--eg-text-secondary, #555);
  font-size: .95rem;
  font-weight: 400;
  font-family: brandon-grotesque, sans-serif;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  text-transform: capitalize;
  line-height: 1.35;
}

/* Fix classic-editor line breaks so galleries don't stack one-per-row */
.eg-gallery br { display: none !important; }

/* Belt + suspenders for any stray wrappers */
.eg-gallery > p { margin: 0 !important; }
.eg-gallery > p:empty { display: none !important; }


/* Hover state */
.woocommerce .mlvf-option-btn:not(.sold-out):not([disabled]):hover {
  border-color: #a5ccbc;
  background: #f0f7f5;
  color: var(--eg-text-primary, #1f1f1f);
}

/* Active/Selected state — matches survey choice card selected */
.woocommerce .mlvf-option-btn.active:not(.mlvf-color-dot) {
  background: linear-gradient(135deg, #e8f5f3 0%, #dce8e4 50%, #e0eef0 100%) !important;
  border-color: #2c5e54 !important;
  color: var(--eg-text-primary, #1f1f1f) !important;
  box-shadow: 0 0 0 2px #bfe2dc;
}

/* Disabled/Sold out state - MUST override active state (exclude color dots which keep inline bg) */
.woocommerce .mlvf-option-btn.sold-out:not(.mlvf-color-dot),
.woocommerce .mlvf-option-btn[disabled]:not(.mlvf-color-dot),
.woocommerce .mlvf-option-btn[aria-disabled="true"]:not(.mlvf-color-dot) {
  background: #e8e8e8 !important;
  border-color: #d0d0d0 !important;
  color: #999 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Faire-style color dot overrides ── */
.woocommerce .mlvf-option-btn.mlvf-color-dot {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0;
  line-height: 0;
  overflow: visible;
  position: relative;
  margin: 0 4px 4px 0;
}
.woocommerce .mlvf-option-btn.mlvf-color-dot:not(.sold-out):not([disabled]):hover {
  transform: none;
  border-color: #999;
}
.woocommerce .mlvf-option-btn.mlvf-color-dot.active {
  border-color: transparent !important;
  color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  outline: 2px solid #333 !important;
  outline-offset: 2px !important;
}
.woocommerce .mlvf-option-btn.mlvf-color-dot.sold-out,
.woocommerce .mlvf-option-btn.mlvf-color-dot[disabled] {
  color: transparent !important;
  text-decoration: none !important;
  opacity: 0.35 !important;
  border-color: #e0e0e0 !important;
}
.woocommerce .mlvf-option-btn.mlvf-color-dot.mlvf-light-color {
  border-color: #ccc !important;
}
.single-product .woocommerce .mlvf-option-btn.mlvf-color-dot {
  width: 28px;
  height: 28px;
  min-width: 28px;
}

/* Single product page specific styling */
.single-product .woocommerce .mlvf-option-btn {
  margin-bottom: 0.5rem;
}

/* Make sure variation buttons appear on single product pages */
.single-product .mlvf-attribute-buttons {
  margin-bottom: 1.5rem;
}

/* Hide default dropdowns when buttons are present on single product pages */
.single-product .mlvf-attribute-buttons + .variations {
  display: none !important;
}

/* Also hide the dropdowns in the variations table when buttons exist */
.single-product .variations select {
  display: none !important;
}

/* But show the variations table structure for labels */
.single-product .variations {
  display: table !important;
}


/* Hide the default attribute labels on single product pages to avoid
   duplicates. The custom variation buttons already include their own
   headings via .mlvf-attr-label. */

.single-product .variations td.label,
.single-product .variations th.label {
  display: none !important;
}

.single-product .variations a.reset_variations {
  display: none !important;
}

.mlvf-reset-btn {
  display: inline-flex;
  margin: 0 0 1rem 0;
}

.single-product .variations td.value {
  display: table-cell !important;
}

/* Ensure all product loop content is left-aligned and uses flexbox for proper ordering */
body.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product {
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: visible !important;
}

/* Ensure product images stay at the top */
body.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.woocommerce ul.products li.product a img {
  order: 0 !important;
}

/* HEART ICON - Stuck to upper right of the card (same for cards with or without product image) */
.woocommerce ul.products li.product .mlvf-product-wrapper {
  position: relative !important;
  overflow: visible !important;
}

.woocommerce ul.products li.product .mlvf-image-wrapper {
  overflow: visible !important;
}

/* Heart trigger is always first child of .mlvf-product-wrapper so it anchors to the card */
.woocommerce ul.products li.product .mlvf-favorite-trigger {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
}

/* Straddle the corner (50% right, -50% up so center sits on corner) */
.woocommerce ul.products li.product .mlvf-favorite-trigger .eg-heart {
  position: static !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate3d(50%, -50%, 0) !important;
}

.woocommerce ul.products li.product .mlvf-favorite-trigger .eg-heart:hover {
  transform: translate3d(50%, -50%, 0) scale(1.18) !important;
}

/* Mini cart specific fixes */
.mini-cart-panel .woocommerce-mini-cart-item .product-details {
  text-align: left !important;
}

.mini-cart-panel .product-brand {
  font-size: 11px !important;
  font-style: italic !important;
  color: #888 !important;
  order: 1 !important;
  margin-bottom: 1px !important;
}

.mini-cart-panel .woocommerce-mini-cart-item .product-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1f1f1f !important;
  line-height: 1.2 !important;
  order: 2 !important;
}

/* Force button styling in mini cart */
.mini-cart-footer .button {
  padding: 4px 6px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
  font-family: brandon-grotesque, sans-serif !important;
}

/* Subtotal container — sits right of ADD button in action row */
.single-product .mlvf-subtotal-container {
    margin-top: 0;
    margin-left: auto;
    font-weight: 600;
    color: var(--eg-text-primary, #1f1f1f);
    width: auto;
    text-align: right;
}

/* Hide subtotal container when variation add to cart is disabled */
.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .mlvf-subtotal-container {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(50%);
}

/* Show subtotal container when variation add to cart is enabled */
.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-enabled .mlvf-subtotal-container {
    opacity: 1;
    pointer-events: auto;
    filter: grayscale(0%);
}

/* Error styling for add to cart buttons */
.single_add_to_cart_button.error {
    background-color: #dc3545 !important;
    color: white !important;
    border-color: #dc3545 !important;
}

.single_add_to_cart_button.error:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Success styling for add to cart buttons */
.single_add_to_cart_button.added {
    background-color: #d5e8de !important;
    color: #1e4a35 !important;
    border-color: #2b5d4b !important;
}

/* Add checkmark after "ADDED" text on single product pages */
.single-product .single_add_to_cart_button.added::after {
    content: ' ✓' !important;
    display: inline !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
}

/* ========================================
   CART ITEM NOTES - ULTRA MINIMAL STYLING
   ======================================== */

/* Override any global styles that might affect cart item notes */
.woocommerce-cart .cce-item-note details,
.woocommerce-checkout .cce-item-note details,
.cce-item-note details {
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.woocommerce-cart .cce-item-note summary,
.woocommerce-checkout .cce-item-note summary,
.cce-item-note summary.cce-item-note-toggle {
  list-style: none !important;
  cursor: pointer !important;
  display: inline-block !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  font-family: brandon-grotesque, sans-serif !important;
  position: static !important;
  min-height: auto !important;
  user-select: auto !important;
}

.woocommerce-cart .cce-item-note summary:hover,
.woocommerce-checkout .cce-item-note summary:hover,
.cce-item-note summary.cce-item-note-toggle:hover {
  background: #e5e7eb !important;
  color: #374151 !important;
  border-color: #9ca3af !important;
}

/* Remove all arrows and indicators from cart item notes */
.woocommerce-cart .cce-item-note summary::-webkit-details-marker,
.woocommerce-checkout .cce-item-note summary::-webkit-details-marker,
.cce-item-note summary.cce-item-note-toggle::-webkit-details-marker {
  display: none !important;
}

.woocommerce-cart .cce-item-note summary::marker,
.woocommerce-checkout .cce-item-note summary::marker,
.cce-item-note summary.cce-item-note-toggle::marker {
  display: none !important;
}

.woocommerce-cart .cce-item-note summary::after,
.woocommerce-checkout .cce-item-note summary::after,
.cce-item-note summary.cce-item-note-toggle::after {
  display: none !important;
}

/* Simple content area for cart item notes */
.woocommerce-cart .cce-item-note details > div,
.woocommerce-checkout .cce-item-note details > div,
.cce-item-note details > div {
  margin-top: 6px !important;
  padding: 8px !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  font-family: brandon-grotesque, sans-serif !important;
  font-size: 0.9em !important;
  animation: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px);} 
  to { opacity: 1; transform: translateY(0);} 
}

@media (max-width: 600px) {
  details:not(.cce-item-note) {
    margin-bottom: 0.5em;
  }
  summary:not(.cce-item-note-toggle):not(.pbv-volume-toggle) {
    font-size: 1em;
    padding: 0.6em 1.2em 0.6em 0.8em;
  }
  details:not(.cce-item-note) > div {
    font-size: 0.97em;
    padding: 0.6em 0.8em 0.6em 0.8em;
  }
}

/* =========================================================
   EXIST GREEN — GALLERY UTILITIES (GLOBAL CORE)
   Use on any page with .eg-gallery
   ========================================================= */

/* Base grid */
.eg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 1em 0;
  box-sizing: border-box;
}
.eg-gallery > * { min-width: 0; }

/* Images: natural aspect by default */
.eg-gallery img {
  display: block;
  width: 100%;
  height: auto;          /* natural aspect ratio */
  object-fit: contain;   /* don't crop unless .square */
  border-radius: 6px;
}

/* Neutralize WP/Gutenberg align classes INSIDE galleries */
.eg-gallery .alignleft,
.eg-gallery .alignright,
.eg-gallery figure {
  float: none !important;
  margin: 0 !important;
}

/* Float the WHOLE gallery block next to text on desktop */
.eg-gallery.float-left {
  float: left;
  margin: 0 1rem 1rem 0;
  width: clamp(320px, 45%, 520px);
  grid-template-columns: 1fr 1fr !important; /* ensure two-up fits in narrow floats */
}
.eg-gallery.float-right {
  float: right;
  margin: 0 0 1rem 1rem;
  width: clamp(320px, 45%, 520px);
  grid-template-columns: 1fr 1fr !important;
}
.eg-gallery.fullwidth { float: none; width: 100%; max-width: none; }

/* Exact patterns */
.eg-gallery.row-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.eg-gallery.grid-2x2 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* 4 columns on desktop */
  gap: 0.75rem !important;
  margin: 0.75rem 0 !important;
  max-width: 100% !important;
  clear: both;
}

.eg-gallery.grid-2x2 .wp-caption {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.eg-gallery.grid-2x2 img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}

.eg-gallery.grid-2x2 .wp-caption-text {
  font-size: 0.85rem;
  color: #4b564e;
  margin-top: 0.25rem;
  line-height: 1.35;
  padding: 0 0.25rem;
}

/* Switch to 2x2 layout on narrow viewports to keep images legible */
@media (max-width: 550px) {
  .eg-gallery.grid-2x2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
}

/* Square variant: only crops when you opt in */
.eg-gallery.square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Mobile: stop text wrap + stack if needed */
@media (max-width: 900px) {
  .eg-gallery.float-left,
  .eg-gallery.float-right {
    float: none !important;
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
  }
}
@media (max-width: 520px) {
  .eg-gallery.row-2 { grid-template-columns: 1fr !important; }
}

/* 9) Safer nav widths (optional) */
.genesis-nav-menu { display:flex; gap: 0.75rem; align-items:center; }
.genesis-nav-menu li { width:auto; }

/* -------------------------------------------
   ABOUT page glue: floats, clearing, title
   ------------------------------------------- */

/* Clear any floats between about sections */
.about-section {
  margin-bottom: 1.5rem;
}

.about-section::after { content: ""; display: block; clear: both; }

.about-section h2 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.about-section h3 {
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}

.about-section p {
  margin: 0.5rem 0;
  line-height: 1.7;
}

/* Hide the default WP entry header only on pages using this wrapper */
body:has(.about-exist-green) .entry-header { display: none; }

/* Responsive floats for standalone images (images NOT inside .eg-gallery) */
.about-exist-green img.alignleft  {
  float: left;
  margin: 0 1rem 1rem 0;
  max-width: 45%;
  max-width: clamp(200px, 45%, 360px);
  height: auto;
}
.about-exist-green img.alignright {
  float: right;
  margin: 0 0 1rem 1rem;
  max-width: 45%;
  max-width: clamp(200px, 45%, 360px);
  height: auto;
}
@media (max-width: 900px) {
  .about-exist-green img.alignleft,
  .about-exist-green img.alignright {
    max-width: 52%;
    max-width: clamp(200px, 52%, 360px);
  }
}
@media (max-width: 680px) {
  .about-exist-green img.alignleft,
  .about-exist-green img.alignright {
    float: none;
    display: block;
    margin: 0 0 1rem 0;
    width: 100%;
    max-width: 420px;
  }
}

/* VALUE PAGE SWAP COMPARISONS */

/* --- Modern, space-efficient swaps layout --- */
.eg-swap {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
  margin: 0.75rem 0 0.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid #d0ddd8;
  border-bottom: 1px solid #d0ddd8;
}

.eg-swap .swap-card {
  flex: 1 1 280px;
  background-color: #f9faf8;
  border-radius: 10px;
  padding: 0.75rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eg-swap .swap-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.eg-swap .swap-figure img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 0.4rem;
}

.eg-swap .swap-label {
  font-size: 0.9rem;
  color: #3a4a3f;
  line-height: 1.4;
}

.eg-swap .badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.eg-swap .badge.bad {
  background-color: #ffebe8;
  color: #8b0000;
}

.eg-swap .badge.good {
  background-color: #e4f4ea;
  color: #2b5735;
}

.eg-swap .arrow {
  align-self: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #5c6b5e;
}

@media (max-width: 700px) {
  .eg-swap {
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.5rem 0;
    padding: 0.5rem 0;
  }
  .eg-swap .arrow {
    display: none;
  }
}

/* --- Modern flex layout, scoped only to About + Values --- */
.about-exist-green .eg-image-flex,
.eg-value-content .eg-image-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.5rem 0 0.75rem;
  clear: both;
}

.about-exist-green .eg-image-flex .eg-image,
.eg-value-content .eg-image-flex .eg-image {
  flex: 1 1 300px;
  max-width: 380px; /* Keep images small - they're complements, not heroes */
}

/* Featured/hero images can be moderately larger but still complementary */
.eg-value-content .eg-image-flex .eg-image.eg-hero,
.eg-value-content .eg-image-flex .eg-image:has(img[width="2048"]) {
  flex: 1 1 45%;
  max-width: 520px; /* Larger but not dominating */
}

.about-exist-green .eg-image-flex .eg-text,
.eg-value-content .eg-image-flex .eg-text {
  flex: 1 1 400px;
  min-width: 280px;
}

.about-exist-green .eg-image-flex.reverse,
.eg-value-content .eg-image-flex.reverse {
  flex-direction: row-reverse;
}

.about-exist-green .eg-image-flex img,
.eg-value-content .eg-image-flex img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}

.about-exist-green .eg-image-flex .eg-caption,
.eg-value-content .eg-image-flex .eg-caption {
  font-size: 0.85rem;
  color: #4b564e;
  margin-top: 0.25rem;
  line-height: 1.35;
}

.about-exist-green .eg-image-flex .wp-caption,
.eg-value-content .eg-image-flex .wp-caption {
  width: 100% !important;
  max-width: 100%;
}

/* Stack and stretch media/text on compact screens */
@media (max-width: 480px) {
  .about-exist-green .eg-image-flex,
  .eg-value-content .eg-image-flex {
    flex-direction: column;
    align-items: stretch;
  }

  .about-exist-green .eg-image-flex .eg-image,
  .eg-value-content .eg-image-flex .eg-image,
  .about-exist-green .eg-image-flex .eg-text,
  .eg-value-content .eg-image-flex .eg-text {
    max-width: 100%;
    min-width: 0;
  }

  .about-exist-green .eg-image-flex .eg-image,
  .eg-value-content .eg-image-flex .eg-image {
    flex-basis: 100%;
  }

}

/* --- Responsive text-wrapped image grids (About + Values only) --- */
.about-exist-green .eg-gallery.wrap,
.eg-value-content .eg-gallery.wrap {
  float: right;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
  max-width: 45%;
  margin: 0.25rem 0 0.75rem 1.25rem;
}

/* Make specific wrapped images larger with .eg-large */
.about-exist-green .eg-gallery.wrap.eg-large,
.eg-value-content .eg-gallery.wrap.eg-large {
  max-width: 60%;
}

/* Or even bigger with .eg-xlarge */
.about-exist-green .eg-gallery.wrap.eg-xlarge,
.eg-value-content .eg-gallery.wrap.eg-xlarge {
  max-width: 75%;
}

.about-exist-green .eg-gallery.wrap.left,
.eg-value-content .eg-gallery.wrap.left {
  float: left;
  margin: 0.25rem 1.25rem 0.75rem 0;
}

.about-exist-green .eg-gallery.wrap img,
.eg-value-content .eg-gallery.wrap img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

/* Make text flow cleanly around grid */
.about-exist-green .eg-gallery.wrap::after,
.eg-value-content .eg-gallery.wrap::after {
  content: "";
  display: block;
  clear: both;
}

/* Give wrapped galleries more room on medium screens */
@media (max-width: 1000px) and (min-width: 401px) {
  .about-exist-green .eg-gallery.wrap,
  .eg-value-content .eg-gallery.wrap {
    max-width: 50%;
  }
  
  .about-exist-green .eg-gallery.wrap.eg-large,
  .eg-value-content .eg-gallery.wrap.eg-large {
    max-width: 65%;
  }
}

/* Stack wrapped galleries only on tiny screens */
@media (max-width: 400px) {
  .about-exist-green .eg-gallery.wrap,
  .eg-value-content .eg-gallery.wrap {
    float: none;
    max-width: 100%;
    margin: 0.5rem 0;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/* Safety net: only affects .eg-gallery wrappers */
.eg-gallery br,
.eg-gallery > p:empty { display: none !important; }
.eg-gallery p { margin: 0; }
/* Exist Green Pros/Cons List */
.eg-list {
  padding: 1em 1.2em;
  border-radius: 10px;
  margin: 1em 0;
}

.eg-list.pros {
  background-color: hsla(150, 25%, 85%, 0.4); /* soft green tint */
}

.eg-list.cons {
  background-color: hsla(0, 70%, 90%, 0.4); /* soft blush tint */
}

.eg-list h3 {
  margin-top: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2e423f; /* deep muted green */
}

/* Reset bullets inside eg-list only */
.eg-list ul {
  list-style: none;
  padding-left: 0;
  margin: 0.5em 0;
}

.eg-list li {
  margin: 0.5em 0;
  font-size: 1rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
}

/* Green check */
.eg-list li.eg-check::before {
  content: "✓";
  font-size: 1.1em;
  color: #5fa693; /* muted teal-green */
  font-weight: bold;
  margin-right: 0.6em;
  flex-shrink: 0;
}

/* Red X */
.eg-list li.eg-x::before {
  content: "✕";
  font-size: 1.1em;
  color: #c94f4f; /* soft muted red */
  font-weight: bold;
  margin-right: 0.6em;
  flex-shrink: 0;
}

/* ========================================
   CART/CHECKOUT STYLING OVERRIDES
   ======================================== */

/* Fulfillment Method Boxes - Better Typography */
.cce-fulfillment-option label {
  gap: 4px !important;
  padding: 14px !important;
}

.cce-fulfillment-option__title {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #111827 !important;
  line-height: 1.4 !important;
}

.cce-fulfillment-option__description {
  font-size: 12px !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
}

/* Quantity Selector - Keep buttons inline (cart page only) */
.woocommerce-cart .quantity {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px !important;
}

.woocommerce-cart .quantity .qty-btn,
.woocommerce-cart .quantity input.qty,
.woocommerce-cart .quantity .unit-suffix {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

.woocommerce-cart .quantity .eg-lbs-conversion {
  flex-basis: 100% !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
  width: 100% !important;
  order: 10 !important;
}

/* Local-only messaging */
.eg-local-only-notice {
  background: transparent !important;
  color: #6b7280 !important;
  border: none !important;
  border-left: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  font-style: italic !important;
  font-family: brandon-grotesque, sans-serif !important;
  margin: 0.5rem 0 !important;
  line-height: 1.4 !important;
}

.eg-local-only-notice a {
  color: #2c5e54;
  text-decoration: underline;
}

.eg-local-only-notice--variation {
  display: none;
}

.eg-local-only-notice--archive {
  margin-top: 0;
  margin-bottom: 0.75rem;
  padding: 0.45rem 1rem !important;
  font-size: 0.88em;
  border-radius: 5px;
}

.woocommerce ul.products li.product {
  position: relative;
}

/* Position local-only indicator inline with add-to-cart button */
.eg-local-only-loop-indicator {
  --eg-local-only-icon-size: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--eg-local-only-icon-size);
  height: var(--eg-local-only-icon-size);
  margin: 0;
  margin-left: 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 114, 93, 0.3);
  padding: 0;
  background: rgba(22, 112, 95, 0.12);
  color: #0f4c3a;
  position: relative;
  cursor: help;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  z-index: 1;
  vertical-align: middle;
}

button.eg-local-only-loop-indicator {
  font: inherit;
}

.eg-local-only-loop-indicator::before {
  content: "";
  width: 1.8rem;
  height: 1.8rem;
  background-image: var(--eg-local-only-icon, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M4%209.5%2016%204l12%205.5v13L16%2028l-12-5.5z%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M4%209.5%2016%2015l12-5.5%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M16%2015v13%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2722%27%20cy%3D%2722%27%20r%3D%277%27%20fill%3D%27%23ffffff%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27m18%2026%208-8%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E"));
  background-size: contain;
  background-repeat: no-repeat;
}

.eg-local-only-loop-indicator:hover,
.eg-local-only-loop-indicator:focus-visible {
  background: rgba(22, 112, 95, 0.2);
  border-color: rgba(16, 114, 93, 0.5);
  transform: translateY(-1px);
}

.eg-local-only-loop-indicator:focus-visible {
  outline: 2px solid rgba(16, 114, 93, 0.5);
  outline-offset: 2px;
}

.eg-local-only-loop-indicator[aria-hidden="true"] {
  cursor: default;
  background: rgba(22, 112, 95, 0.12);
  border-color: rgba(16, 114, 93, 0.3);
}

.eg-local-only-loop-indicator[aria-hidden="true"]:hover,
.eg-local-only-loop-indicator[aria-hidden="true"]:focus-visible {
  background: rgba(22, 112, 95, 0.12);
  transform: none;
}

.eg-local-only-loop-indicator[data-eg-local-tooltip]::after {
  content: attr(data-eg-local-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.6rem);
  transform: translate(-50%, 4px);
  background: #fff;
  color: #303030;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  min-width: 13rem;
  text-align: center;
  z-index: 20;
  white-space: normal;
}

.eg-local-only-loop-indicator[data-eg-local-tooltip]:hover::after,
.eg-local-only-loop-indicator[data-eg-local-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.eg-local-only-loop-legend {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.85rem;
  color: #4a4a4a;
  font-weight: 600;
}

.eg-local-only-loop-legend .eg-local-only-loop-indicator {
  position: static;
  margin-top: 0;
  transform: none;
}

.eg-local-only-loop-legend__text {
  line-height: 1.4;
}

/* Collapsible loop notes: "First time shopping with us online? Please read…" */
.eg-loop-notes-collapsible {
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-radius: 2px;
  border: none;
  background: transparent;
}

summary.eg-loop-notes-collapsible__trigger::-webkit-details-marker {
  display: none !important;
}
summary.eg-loop-notes-collapsible__trigger::marker {
  display: none !important;
  content: "" !important;
  font-size: 0 !important;
}

summary.eg-loop-notes-collapsible__trigger,
.eg-loop-notes-collapsible__trigger {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #333 !important;
  background: #f5f5f5 !important;
  border: 1px solid #ddd !important;
  border-radius: 5px !important;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 !important;
}

summary.eg-loop-notes-collapsible__trigger::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
details.eg-loop-notes-collapsible[open] > summary.eg-loop-notes-collapsible__trigger::before {
  transform: rotate(45deg);
}

summary.eg-loop-notes-collapsible__trigger:hover,
.eg-loop-notes-collapsible__trigger:hover {
  background: #eee !important;
  border-color: #ccc !important;
}

/* Combined loop notes: full width, small font, natural padding. Breadcrumb stays under header. */
.eg-loop-notes-collapsible .eg-loop-notes {
  border-left: none;
  border-radius: 0;
  margin: 0;
  border-top: 1px solid rgba(165, 204, 188, 0.4);
}

.eg-loop-notes {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0.5rem 0 1rem;
  padding: 0.5rem 1rem 0.6rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #555;
  background: rgba(224, 242, 241, 0.35);
  border-radius: 4px;
  border-left: 3px solid #a5ccbc;
}

.eg-loop-notes__line {
  display: block;
  margin-bottom: 0.35em;
}
.eg-loop-notes__line:last-child {
  margin-bottom: 0;
}
.eg-loop-notes__sep {
  margin: 0 0.35em;
  color: #94a3b8;
}

.eg-loop-notes__footnote {
  font-style: italic;
  color: #64748b;
}

.eg-loop-notes__jar-link {
  color: #2c5e54;
  text-decoration: underline;
  font-weight: normal;
}
.eg-loop-notes__jar-link:hover {
  color: #357ABD;
}

.eg-favorites-loop-tip__emoji {
  display: inline;
  font-size: 1.1em;
  margin: 0 0.15em;
}

.eg-favorites-loop-tip__link {
  display: inline;
  font-size: inherit;
  color: #2c5e54;
  text-decoration: underline;
  font-weight: normal;
}

.eg-favorites-loop-tip__link:hover,
.eg-favorites-loop-tip__link:focus {
  color: #357ABD;
}

/* Onboarding tip: dismissible one-time banner (e.g. favorites tip) */
.eg-onboarding-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0.5rem 0 1rem;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #555;
  background: rgba(224, 242, 241, 0.35);
  border-radius: 4px;
  border-left: 3px solid #a5ccbc;
}

.eg-onboarding-tip__body {
  flex: 1;
}

.eg-onboarding-tip__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}

.eg-onboarding-tip__dismiss:hover {
  color: #555;
}

/* "How to shop" unified disclosure — tiny text link, NOT a button */
.eg-how-to-shop,
details.eg-how-to-shop {
    margin: 0.1rem 0 0.15rem !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: inline !important;
}

.eg-how-to-shop__trigger,
details.eg-how-to-shop > summary,
summary.eg-how-to-shop__trigger {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    padding: 0.1rem 0.3rem !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-family: brandon-grotesque, sans-serif !important;
    color: #94a3b8 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: color 0.15s !important;
    user-select: none !important;
    text-transform: lowercase !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    width: auto !important;
    max-width: fit-content !important;
}

.eg-how-to-shop__trigger svg,
summary.eg-how-to-shop__trigger svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
}

.eg-how-to-shop__trigger::-webkit-details-marker { display: none !important; }
.eg-how-to-shop__trigger::marker { display: none !important; content: "" !important; font-size: 0 !important; }
details.eg-how-to-shop > summary::-webkit-details-marker { display: none !important; }
details.eg-how-to-shop > summary::marker { display: none !important; content: "" !important; font-size: 0 !important; }

.eg-how-to-shop__trigger:hover,
summary.eg-how-to-shop__trigger:hover {
    color: #2c5e54 !important;
    text-decoration: underline !important;
}

.eg-how-to-shop[open] > .eg-how-to-shop__trigger {
    color: #2c5e54 !important;
}

.eg-how-to-shop__content {
    margin-top: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: rgba(165, 204, 188, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(165, 204, 188, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.eg-loop-notes__heading {
    font-size: 12px;
    font-weight: 600;
    color: #2c5e54;
    margin: 0 0 0.15rem;
}

@media (max-width: 600px) {
    .eg-how-to-shop,
    details.eg-how-to-shop {
        margin-bottom: 0.1rem !important;
    }
    .eg-how-to-shop__trigger,
    summary.eg-how-to-shop__trigger {
        font-size: 11px !important;
        padding: 0.05rem 0.2rem !important;
    }
}

/* Loop breadcrumb/header clearance: use padding so background fills the gap */
body.woocommerce-shop .site-inner,
body.post-type-archive-product .site-inner,
body.tax-product_cat .site-inner,
body.tax-product_tag .site-inner {
  padding-top: var(--eg-anchor-offset, 100px) !important;
  margin-top: 0 !important;
}

body.woocommerce-shop .ssf-breadcrumb,
body.woocommerce-shop .woocommerce-breadcrumb,
body.woocommerce-shop .breadcrumb,
body.post-type-archive-product .ssf-breadcrumb,
body.post-type-archive-product .woocommerce-breadcrumb,
body.post-type-archive-product .breadcrumb,
body.tax-product_cat .ssf-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb,
body.tax-product_cat .breadcrumb,
body.tax-product_tag .ssf-breadcrumb,
body.tax-product_tag .woocommerce-breadcrumb,
body.tax-product_tag .breadcrumb {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0;
}

/* Match body background to .site-inner so the gap between fixed header and content isn't white */
body.single-product,
body.woocommerce-shop,
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag {
  background-color: hsla(76, 16%, 87%, 0.25);
}

/* Single product breadcrumb/header clearance: same pattern as shop pages */
body.single-product .site-inner {
  padding-top: var(--eg-anchor-offset, 100px) !important;
  margin-top: 0 !important;
}

body.single-product .breadcrumb,
body.single-product .woocommerce-breadcrumb {
  margin-top: 0 !important;
  margin-bottom: 0.25rem !important;
  padding-top: 0;
  padding-bottom: 0;
}

/* Filter row hugs directly under breadcrumbs */
body.woocommerce-shop .ssf-container--v2,
body.post-type-archive-product .ssf-container--v2,
body.tax-product_cat .ssf-container--v2,
body.tax-product_tag .ssf-container--v2 {
  margin-top: 0 !important;
  margin-bottom: 0.25rem !important;
}

/* --- Balanced text-wrapping layout for Values page --- */
.eg-value-content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Floated image blocks */
.eg-image-block {
  max-width: 320px;
}

.eg-image-block.right {
  float: right;
  margin: 0.25rem 0 0.75rem 1.25rem;
}

.eg-image-block.left {
  float: left;
  margin: 0.25rem 1.25rem 0.75rem 0;
}

.eg-image-block img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.eg-caption {
  font-size: 0.85rem;
  color: #5a665c;
  margin-top: 0.2rem;
  line-height: 1.3;
}

/* prevent two tall floats from colliding vertically */
.eg-value-content::after {
  content: "";
  display: block;
  clear: both;
}

/* tighter breakpoint so wrapping holds longer */
@media (max-width: 680px) {
  .eg-image-block.left,
  .eg-image-block.right {
    float: none;
    display: block;
    margin: 0.5rem auto;
    max-width: 100%;
  }
}

/* --- Two-column image grid for Values page --- */
.eg-image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 0.75rem 0;
  clear: both; /* separate from floated content above */
}

.eg-image-row .eg-image {
  flex: 1 1 300px;
  max-width: 360px;
  text-align: center;
}

.eg-image-row img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.eg-image-row .eg-caption {
  font-size: 0.9rem;
  color: #5a665c;
  margin-top: 0.25rem;
  line-height: 1.35;
}

/* Stack vertically on small screens */
@media (max-width: 600px) {
  .eg-image-row {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
}

/* Better paragraph spacing and visual rhythm */
.eg-value-content p {
  margin: 0.35rem 0;
  padding-left: 0.5rem;
  text-indent: 0;
  line-height: 1.65;
  color: #2a2a2a;
  max-width: 760px;
}

/* Soft separation before and after lists */
.eg-value-content ul {
  margin: 0.4rem 0 0.5rem 2.2rem;
  padding-left: 0.8rem;
  line-height: 1.6;
  color: #334;
}

.eg-value-content li {
  margin: 0.2rem 0;
  line-height: 1.55;
}

/* Optional visual divider between key thematic sections */
.eg-value-divider {
  border-top: 1px solid rgba(44, 94, 84, 0.2);
  margin: 0.75rem 0 0.5rem;
  width: 100%;
  max-width: 760px;
}

/* For optional note or transparency statements */
.eg-transparency-note {
  background-color: rgba(191, 226, 220, 0.15);
  border-left: 4px solid var(--eg-green, #2C5E54);
  padding: 0.75rem 1.25rem;
  margin: 0.5rem 0;
  font-style: italic;
  color: #304841;
  line-height: 1.55;
  border-radius: 4px;
}

.eg-transparency-note p {
  margin: 0.25rem 0;
}

.eg-transparency-note p:first-child {
  margin-top: 0;
}

.eg-transparency-note p:last-child {
  margin-bottom: 0;
}

.eg-value-content .wp-caption {
  width: min(100%, 340px) !important;
  max-width: min(100%, 340px);
  height: auto;
}

.eg-value-content img {
  max-width: 100%;
  height: auto;
}

.eg-value-content img.alignleft,
.eg-value-content .wp-caption.alignleft {
  float: left;
  margin: 0 1rem 1rem 0;
  clear: left;
  max-width: clamp(180px, 42%, 320px);
}

.eg-value-content img.alignright,
.eg-value-content .wp-caption.alignright {
  float: right;
  margin: 0 0 1rem 1rem;
  clear: right;
  max-width: clamp(180px, 42%, 320px);
}

/* Easy size control for individual images with WordPress classes */
.eg-value-content img.alignleft.size-large,
.eg-value-content .wp-caption.alignleft.eg-large,
.eg-value-content img.alignright.size-large,
.eg-value-content .wp-caption.alignright.eg-large {
  max-width: clamp(280px, 55%, 480px);
}

.eg-value-content img.alignleft.size-full,
.eg-value-content .wp-caption.alignleft.eg-xlarge,
.eg-value-content img.alignright.size-full,
.eg-value-content .wp-caption.alignright.eg-xlarge {
  max-width: clamp(360px, 65%, 600px);
}

@media (min-width: 901px) {
  .eg-value-content img.alignleft,
  .eg-value-content img.alignright,
  .eg-value-content .wp-caption.alignleft,
  .eg-value-content .wp-caption.alignright {
    max-width: 260px;
  }
}

@media (max-width: 900px) {
  .eg-value-content {
    max-width: 95vw;
  }

  .eg-value-content :is(img.alignleft, img.alignright) {
    max-width: clamp(160px, 48vw, 260px);
  }

  .eg-value-content :is(.wp-caption.alignleft, .wp-caption.alignright) {
    max-width: clamp(190px, 54vw, 300px);
  }
}

@media (max-width: 910px) {
  /*
   * Large illustration floats automatically stack unless they carry the
   * `.eg-keep-wrap` opt-out class. You can also force any floated image or
   * caption into the full-width stack by adding `.eg-stack-wide`.
   */
  .eg-value-content :is(img.alignleft, img.alignright):not(.eg-keep-wrap):is([width^="4"], [width^="5"], [width^="6"], [width^="7"]),
  .eg-value-content :is(.wp-caption.alignleft, .wp-caption.alignright):not(.eg-keep-wrap):not(:has(.eg-keep-wrap)):has(img:is([width^="4"], [width^="5"], [width^="6"], [width^="7"])),
  .eg-value-content :is(img.alignleft, img.alignright).eg-stack-wide,
  .eg-value-content :is(.wp-caption.alignleft, .wp-caption.alignright).eg-stack-wide,
  .eg-value-content :is(.wp-caption.alignleft, .wp-caption.alignright):has(img.eg-stack-wide) {
    float: none;
    display: block;
    margin: 0 auto 1.25rem;
    width: 100%;
    max-width: 100%;
  }
}

/*
 * Medium editorial floats (≈300px) keep wrapping on tablets. Add `.eg-keep-wrap`
 * to keep them floated on narrow screens too.
 */
@media (max-width: 550px) {
  .eg-value-content :is(img.alignleft, img.alignright):not(.eg-keep-wrap)[width^="3"],
  .eg-value-content :is(.wp-caption.alignleft, .wp-caption.alignright):not(.eg-keep-wrap):not(:has(.eg-keep-wrap)):has(img[width^="3"]) {
    float: none;
    display: block;
    margin: 0 auto 1.2rem;
    width: min(100%, 440px);
    max-width: min(100%, 440px);
  }
}

/*
 * `.eg-keep-wrap` floats stay wrapped until very small screens, then stack so
 * text has room to breathe.
 */
@media (max-width: 480px) {
  .eg-value-content :is(img.alignleft, img.alignright).eg-keep-wrap,
  .eg-value-content :is(.wp-caption.alignleft, .wp-caption.alignright).eg-keep-wrap,
  .eg-value-content :is(.wp-caption.alignleft, .wp-caption.alignright):has(.eg-keep-wrap) {
    float: none;
    display: block;
    margin: 0 auto 1.2rem;
    width: min(100%, 360px);
    max-width: min(100%, 360px);
  }
}

.eg-value-content img[src*="Multipurpose-Cleaner-Concentrate-Refill"],
.eg-value-content img.eg-tall-narrow {
  max-height: 340px;
  width: auto;
}

/* ===== Core Values readability ===== */
.eg-value-section,
.eg-values-intro {
  width: 100%;
}
.eg-value-content {
  max-width: min(72ch, 100%);
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.65;
  display: flow-root;
}

/* Remove top margin from first element */
.eg-value-content > *:first-child {
  margin-top: 0;
}

/* Tighter spacing between adjacent paragraphs */
.eg-value-content p + p {
  margin-top: 0.25rem;
}
.eg-value-content::after {
  content: "";
  display: table;
  clear: both;
}
.eg-value-content p {
  margin: 0.35rem 0;
  padding-left: 0.5rem;
  text-indent: 0;
  line-height: 1.65;
  color: #2a2a2a;
  max-width: 760px;
}
.eg-value-divider {
  border-top: 1px solid #d0ddd8;
  margin: 0.75rem 0 0.5rem;
  max-width: 760px;
}

/* ===== Swaps layout ===== */

/* Wide-screen comfort reading */
@media (min-width: 1400px){
  .eg-value-content { max-width: 78ch; }
}

/* ============================================================
   Core value layout refinements
   ============================================================ */
.eg-value-content h3 {
  clear: both;
  margin: 0.75rem 0 0.4rem;
  padding-top: 0.25rem;
}

/* Tighter spacing for elements immediately after headings */
.eg-value-content h3 + p,
.eg-value-content h3 + blockquote,
.eg-value-content h3 + .eg-image-flex {
  margin-top: 0.25rem;
}

/* Remove extra spacing from emphasis elements */
.eg-value-content strong,
.eg-value-content em {
  margin: 0;
  padding: 0;
}

/* Allow select images/captions to break out of the default 260px width */
.eg-value-content img.eg-featured,
.eg-value-content .wp-caption.eg-featured img {
  width: min(460px, 100%);
  height: auto;
}

.eg-value-content .wp-caption.eg-featured {
  width: min(480px, 100%) !important;
  max-width: none;
}

@media (min-width: 901px) {
  .eg-value-content img.alignleft.eg-featured,
  .eg-value-content img.alignright.eg-featured,
  .eg-value-content .wp-caption.alignleft.eg-featured,
  .eg-value-content .wp-caption.alignright.eg-featured {
    width: min(460px, 50vw);
    max-width: min(460px, 50vw);
  }
  .eg-value-content .wp-caption.alignleft.eg-featured,
  .eg-value-content .wp-caption.alignright.eg-featured {
    width: min(480px, 50vw) !important;
  }
}

/* ============================================================
   Swap card adjustments (compact pairs inside framed panels)
   ============================================================ */

/* =======================================================================
   CONTACT US PAGE STYLES
   Matches ExistGreen brand aesthetic: clean, sustainable, approachable
   ======================================================================= */

/* ─── Contact Hero ─── */
.eg-contact-hero {
  text-align: center;
  padding: 3rem 5% 2.5rem;
  background: linear-gradient(to bottom, #f8faf8 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(44, 94, 84, 0.1);
}

.eg-contact-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--eg-accent, #2c5e54);
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.eg-contact-hero .eg-subhead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: #555;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ─── Contact Methods Section ─── */
.eg-contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 5% 2rem;
}

.eg-contact-block {
  background: #fff;
  padding: 2rem 1.75rem;
  border-radius: 8px;
  border: 1px solid rgba(44, 94, 84, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.eg-contact-block:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.eg-contact-block h2 {
  font-size: 1.5rem;
  color: var(--eg-accent, #2c5e54);
  margin: 0 0 1.25rem;
  font-weight: 600;
}

.eg-contact-block p {
  margin: 0 0 1rem;
  line-height: 1.6;
  color: #444;
}

.eg-contact-block p:last-child {
  margin-bottom: 0;
}

.eg-contact-block strong {
  color: #222;
  font-weight: 600;
}

.eg-contact-block a {
  color: var(--eg-accent, #2c5e54);
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 94, 84, 0.35);
  transition: border-bottom-color 0.2s ease;
}

.eg-contact-block a:hover {
  border-bottom-color: var(--eg-accent, #2c5e54);
}

/* ─── Google Maps Embed ─── */
.eg-map-embed {
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.eg-map-embed iframe {
  display: block;
  width: 100%;
}

/* ─── Handwriting Notes (matches existing site style) ─── */
.handwriting-notes-top {
  font-family: 'blanket', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  margin: 1rem 0 0.5rem;
  color: #555;
  text-align: left;
}

/* ─── Contact Form ─── */
.eg-contact-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 5% 2rem;
}

.eg-contact-form h2 {
  font-size: 1.75rem;
  color: var(--eg-accent, #2c5e54);
  margin: 0 0 1.5rem;
  text-align: center;
  font-weight: 600;
}

.eg-contact-form form {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid rgba(44, 94, 84, 0.12);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.eg-contact-form label {
  display: block;
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
}

.eg-contact-form input[type="text"],
.eg-contact-form input[type="email"],
.eg-contact-form select,
.eg-contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid #d0d5d8;
  border-radius: 6px;
  font-family: brandon-grotesque, sans-serif;
  font-size: 1rem;
  color: #333;
  background: #fafafa;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.eg-contact-form input[type="text"]:focus,
.eg-contact-form input[type="email"]:focus,
.eg-contact-form select:focus,
.eg-contact-form textarea:focus {
  outline: none;
  border-color: var(--eg-accent, #2c5e54);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44, 94, 84, 0.08);
}

.eg-contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.eg-contact-form select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232c5e54' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}

/* ─── Form Button (matches site button style) ─── */
.eg-contact-form .eg-button,
.eg-contact-form button[type="submit"] {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: var(--eg-accent-light, #bfe2dc);
  border: 1px solid #aacfc8;
  border-radius: 8px;
  color: #123;
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  width: 100%;
  text-align: center;
}

.eg-contact-form .eg-button:hover,
.eg-contact-form button[type="submit"]:hover {
  background: #cae6df;
  border-color: #9ac4bb;
  transform: translateY(-1px);
}

.eg-contact-form .eg-button:active,
.eg-contact-form button[type="submit"]:active {
  transform: translateY(0);
}

.eg-response-time {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #666;
  font-style: italic;
}

/* ─── Form Messages (Success/Error) ─── */
#form-message {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.5;
  display: none;
}

#form-message.success {
  background: #d3f8e8;
  border: 1px solid #27ae60;
  color: #1a7042;
}

#form-message.error {
  background: #fdecea;
  border: 1px solid #c0392b;
  color: #7f1d1d;
}

/* ─── Honeypot Field (spam protection - hidden from users) ─── */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ─── FAQ Quick Answers ─── */
.eg-contact-faq {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 5% 2rem;
  text-align: center;
}

.eg-contact-faq h2 {
  font-size: 1.5rem;
  color: var(--eg-accent, #2c5e54);
  margin: 0 0 1rem;
  font-weight: 600;
}

.eg-contact-faq p {
  margin: 0 0 1.25rem;
  color: #555;
  line-height: 1.6;
}

.eg-contact-faq ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.eg-contact-faq li {
  margin: 0;
}

.eg-contact-faq a {
  display: block;
  padding: 0.85rem 1rem;
  background: #f8faf8;
  border: 1px solid rgba(44, 94, 84, 0.15);
  border-radius: 6px;
  color: var(--eg-accent, #2c5e54);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.eg-contact-faq a:hover {
  background: var(--eg-accent-light, #bfe2dc);
  border-color: #aacfc8;
  transform: translateY(-2px);
}

/* ─── Social Media Section ─── */
.eg-contact-social {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 5% 3rem;
  text-align: center;
  background: linear-gradient(to bottom, #ffffff 0%, #f8faf8 100%);
}

.eg-contact-social h2 {
  font-size: 1.5rem;
  color: var(--eg-accent, #2c5e54);
  margin: 0 0 1rem;
  font-weight: 600;
}

.eg-contact-social p {
  margin: 0 0 1.5rem;
  color: #555;
  line-height: 1.6;
}

/* ─── Social Icons ─── */
.eg-social-icons {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.eg-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #fff;
  border: 2px solid rgba(44, 94, 84, 0.2);
  border-radius: 50%;
  color: var(--eg-accent, #2c5e54);
  text-decoration: none;
  font-size: 1.5rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.eg-social-icons a:hover {
  background: var(--eg-accent-light, #bfe2dc);
  border-color: var(--eg-accent, #2c5e54);
  transform: scale(1.1);
}

.eg-social-note {
  font-family: 'blanket', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #555;
  margin-top: 1.5rem;
}

/* ─── Mobile Responsiveness ─── */
@media only screen and (max-width: 768px) {
  .eg-contact-hero {
    padding: 2rem 5% 1.5rem;
  }

  .eg-contact-methods {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 2rem 5%;
  }

  .eg-contact-block {
    padding: 1.5rem 1.25rem;
  }

  .eg-contact-form {
    padding: 2rem 5%;
  }

  .eg-contact-form form {
    padding: 1.5rem 1.25rem;
  }

  .eg-contact-faq ul {
    grid-template-columns: 1fr;
  }

  .eg-social-icons {
    gap: 1rem;
  }

  .eg-social-icons a {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }
}

@media only screen and (max-width: 480px) {
  .eg-contact-hero .eg-subhead {
    font-size: 1rem;
  }

  .handwriting-notes-top {
    font-size: 16px;
  }

  .eg-social-note {
    font-size: 16px;
  }
}

/* =======================================================================
   HIDE PAGE TITLES SITE-WIDE
   Breadcrumbs and other navigation elements provide sufficient context
   ======================================================================= */

/* Hide main page titles on WooCommerce pages and other pages where redundant */
.woocommerce .entry-title.page-title,
.woocommerce-page .entry-title.page-title,
.woocommerce .entry-title,
.woocommerce-page .entry-title,
.page .entry-title,
.single-product .product_title.entry-title,
.wp-block-post-title,
h1.page-title,
h1.entry-title.page-title {
  display: none !important;
}

/* Keep product titles on single product pages (these are different) */
.single-product .product_title.entry-title {
  display: block !important; /* Override the above rule for product pages */
}

/* Specifically target cart/checkout/shop/account pages */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.woocommerce-shop .entry-title,
.post-type-archive-product .entry-title,
.tax-product_cat .entry-title,
.tax-product_tag .entry-title {
  display: none !important;
}

/********************************************************
  MY-ACCOUNT LOGIN / REGISTER — Design System
********************************************************/

/* Gate intro — above social; compact so more fits above the fold */
.woocommerce-account .eg-account-gate {
  max-width: 420px;
  margin: 0 auto 10px;
  text-align: center;
}

.woocommerce-account .eg-account-gate__title {
  font-family: brandon-grotesque, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #2c5e54;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
  line-height: 1.2;
}

.woocommerce-account .eg-account-gate__lead {
  font-family: brandon-grotesque, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #5c6b62;
  margin: 0 0 6px;
  line-height: 1.35;
}

.woocommerce-account .eg-account-gate__rewards {
  font-family: brandon-grotesque, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #8b9a8f;
  margin: 0;
  line-height: 1.4;
}

.woocommerce-account .eg-account-gate__rewards a {
  color: #2c5e54;
  text-decoration: underline;
}

.woocommerce-account .eg-account-gate__rewards a:hover {
  color: #1f7a73;
}

/* Google button section above both columns */
.woocommerce-account .wlp-social-login--wc-form {
  max-width: 420px;
  margin: 0 auto 8px;
}

.woocommerce-account .wlp-login-divider {
  max-width: 420px;
  margin: 12px auto 24px;
}

/* Headings */
.woocommerce-account .woocommerce-form-login h2,
.woocommerce-account .woocommerce-form-register h2 {
  font-family: brandon-grotesque, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #2c5e54;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

/* Labels */
.woocommerce-account .woocommerce-form label {
  font-family: brandon-grotesque, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #8b9a8f;
}

/* Form row spacing */
.woocommerce-account .woocommerce-form .form-row {
  margin-bottom: 10px;
}

/* Input fields */
.woocommerce-account .woocommerce-form .input-text {
  font-family: brandon-grotesque, sans-serif;
  font-size: 14px;
  color: #1f1f1f;
  border: 1px solid #d3d6da !important;
  border-radius: 6px !important;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.woocommerce-account .woocommerce-form .input-text:focus {
  border-color: #a5ccbc !important;
  box-shadow: 0 0 0 3px rgba(165, 204, 188, 0.2);
  outline: none;
}

/* Primary CTA buttons (Log In / Register) — high specificity to beat general .woocommerce button.button rule */
.woocommerce-account .woocommerce form.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account .woocommerce form.woocommerce-form-register .woocommerce-form-register__submit {
  background: linear-gradient(135deg, #2c5e54 0%, #3a7a6d 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: brandon-grotesque, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 24px !important;
  cursor: pointer;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.woocommerce-account .woocommerce form.woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce form.woocommerce-form-register .woocommerce-form-register__submit:hover {
  box-shadow: 0 4px 12px rgba(44, 94, 84, 0.25) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

/* Two-column cards */
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
  background: #fff;
  border: 1px solid #e2ece7;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
}

/* Password strength meter — brand colors */
.woocommerce-account .woocommerce-password-strength {
  font-family: brandon-grotesque, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 6px;
  text-align: center;
}

.woocommerce-account .woocommerce-password-strength.short {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
}

.woocommerce-account .woocommerce-password-strength.bad {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
}

.woocommerce-account .woocommerce-password-strength.good {
  background: rgba(165, 204, 188, 0.2);
  color: #2c5e54;
}

.woocommerce-account .woocommerce-password-strength.strong {
  background: rgba(44, 94, 84, 0.12);
  color: #2c5e54;
}

/* Lost password link — tertiary style */
.woocommerce-account .lost_password {
  margin-top: 8px;
}

.woocommerce-account .lost_password a {
  color: #2c5e54;
  text-decoration: underline;
  font-size: 14px;
}

.woocommerce-account .lost_password a:hover {
  color: #1f7a73;
}

/* Remember me checkbox — stack above button with breathing room */
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 12px;
}

/* Privacy policy fine print */
.woocommerce-account .woocommerce-privacy-policy-text {
  font-family: brandon-grotesque, sans-serif;
  font-size: 12px;
  font-style: italic;
  color: #8b9a8f;
  line-height: 1.4;
  margin-top: 8px;
  margin-bottom: 4px;
}

.woocommerce-account .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: inherit;
  color: inherit;
  font-style: inherit;
}

.woocommerce-account .woocommerce-privacy-policy-text a {
  color: #2c5e54;
  text-decoration: underline;
}

/********************************************************
  HEADER SEARCH BAR - Branded styling
********************************************************/

/* Placeholder: gray italic — broad selectors to catch all search blocks */
.wc-block-product-search__field::placeholder,
.wp-block-search__input::placeholder,
.site-header input[type="search"]::placeholder,
header input[type="search"]::placeholder {
  color: #8b9a8f !important;
  font-style: italic !important;
  opacity: 1 !important;
}

/* Search button: remove chrome, enlarge branded icon */
.wc-block-product-search__button,
.wp-block-search__button {
  background: transparent !important;
  border: none !important;
  padding: 0.35rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.wc-block-product-search__button:hover,
.wp-block-search__button:hover {
  transform: scale(1.1);
}

.wc-block-product-search__button svg,
.wp-block-search__button svg,
.site-header .wp-block-search__button svg {
  width: 32px !important;
  height: 32px !important;
  color: #2c5e54;
}

/* ============================================================
   PRESS MENTIONS — /press page card grid
   Rendered by [eg_press_mentions tier="national|local"]
   ============================================================ */

.eg-press-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 1160px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.eg-press-grid--national {
  grid-template-columns: repeat(2, 1fr);
}

.eg-press-grid--local {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .eg-press-grid--national,
  .eg-press-grid--local {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .eg-press-grid--national,
  .eg-press-grid--local {
    grid-template-columns: 1fr;
  }
}

.eg-press-card {
  background: #fff;
  border: 1px solid #e2ece7;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eg-press-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
}

.eg-press-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f0f5f3;
}

.eg-press-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eg-press-card__thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

.eg-press-card__body {
  padding: 1.25rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.eg-press-card__pub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.eg-press-card__publication {
  font-weight: 700;
  color: #2c5e54;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
}

.eg-press-card__date {
  font-size: 0.78rem;
  color: #8aa79d;
  white-space: nowrap;
}

.eg-press-card__quote {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #333;
  font-style: italic;
}

/* National tier gets bigger, more dramatic quote */
.eg-press-grid--national .eg-press-card__quote {
  font-size: 1.15rem;
  color: #2c5e54;
}

.eg-press-card__title {
  font-size: 0.88rem;
  color: #555;
  line-height: 1.4;
}

.eg-press-card__byline {
  font-size: 0.78rem;
  color: #8aa79d;
  font-style: italic;
}

.eg-press-card__links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #f0f5f3;
}

.eg-press-card__link {
  font-size: 0.85rem;
  color: #2c5e54;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(44, 94, 84, 0.3);
  padding-bottom: 1px;
}

.eg-press-card__link:hover {
  border-bottom-color: #2c5e54;
}

.eg-press-card__link--archive {
  color: #8aa79d;
  font-weight: 500;
  border-bottom-color: rgba(138, 167, 157, 0.3);
}

.eg-press-card__link--archive:hover {
  border-bottom-color: #8aa79d;
}

/* ============================================================
   /PRESS PAGE — sections, hero, kit, contact
   ============================================================ */

.eg-press-hero {
  max-width: 900px;
  margin: 2.5rem auto 1.5rem;
  padding: 0 1rem;
  text-align: center;
}

.eg-press-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #2c5e54;
  text-transform: lowercase;
  margin: 0 0 1rem;
}

.eg-press-hero__lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #555;
  max-width: 720px;
  margin: 0 auto;
}

.eg-press-hero__lede a {
  color: #2c5e54;
  border-bottom: 1px solid rgba(44, 94, 84, 0.35);
  text-decoration: none;
}

.eg-press-section {
  max-width: 1160px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.eg-press-section h2 {
  font-size: 1.4rem;
  color: #2c5e54;
  text-transform: lowercase;
  margin: 0 0 1.25rem;
  padding-left: 0.75rem;
  border-left: 3px solid #8aa79d;
}

.eg-press-section__lede {
  font-size: 0.95rem;
  color: #666;
  margin: 0 0 1.25rem;
  max-width: 720px;
}

.eg-press-section__lede a {
  color: #2c5e54;
}

/* Press kit block (shortcode output) */
.eg-press-kit {
  background: #f0f5f3;
  border-radius: 12px;
  padding: 1.75rem 2rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .eg-press-kit {
    grid-template-columns: 1fr;
    padding: 1.25rem 1.25rem;
  }
}

.eg-press-kit__texts {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.eg-press-kit__text-block h4,
.eg-press-kit__downloads h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8aa79d;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.eg-press-kit__text-value {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #333;
  background: #fff;
  border: 1px solid #e2ece7;
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

.eg-press-kit__downloads {
  border-left: 1px solid #e2ece7;
  padding-left: 2rem;
}

@media (max-width: 768px) {
  .eg-press-kit__downloads {
    border-left: none;
    border-top: 1px solid #e2ece7;
    padding-left: 0;
    padding-top: 1.25rem;
  }
}

.eg-press-kit__file-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.eg-press-kit__file-list li a {
  display: block;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border: 1px solid #e2ece7;
  border-radius: 6px;
  color: #2c5e54;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.eg-press-kit__file-list li a:hover {
  border-color: #a5ccbc;
  background: #e8f5f3;
}

.eg-press-kit-empty {
  background: #f0f5f3;
  border-left: 3px solid #8aa79d;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  font-size: 0.95rem;
  color: #2c5e54;
}

.eg-press-kit-empty a {
  color: #2c5e54;
  font-weight: 600;
}

/* Press & media contact block */
.eg-press-contact {
  max-width: 1160px;
  margin: 3rem auto;
  padding: 2rem;
  background: #fff;
  border: 1px solid #e2ece7;
  border-radius: 12px;
}

.eg-press-contact h2 {
  font-size: 1.4rem;
  color: #2c5e54;
  text-transform: lowercase;
  margin: 0 0 0.75rem;
}

.eg-press-contact p {
  color: #555;
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 720px;
}

.eg-press-contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0f5f3;
}

@media (max-width: 768px) {
  .eg-press-contact__grid {
    grid-template-columns: 1fr;
  }
}

.eg-press-contact__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.eg-press-contact__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8aa79d;
  font-weight: 600;
}

.eg-press-contact__item a {
  color: #2c5e54;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 94, 84, 0.3);
  font-size: 1.02rem;
}

/* ============================================================
   HOMEPAGE TRUST STRIP
   Quiet one-line recognition bar. Place above Visit Us.
   ============================================================ */

.eg-trust-strip {
  max-width: 1160px;
  margin: 2.5rem auto 1rem;
  padding: 0.9rem 1.25rem;
  text-align: center;
  font-size: 0.82rem;
  color: #6b7280;
  letter-spacing: 0.02em;
}

.eg-trust-strip__item {
  display: inline-block;
  margin: 0 0.4rem;
}

.eg-trust-strip__sep {
  color: #c5d4cf;
  margin: 0 0.4rem;
}

.eg-trust-strip a {
  color: #2c5e54;
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 94, 84, 0.25);
}

.eg-trust-strip a:hover {
  border-bottom-color: #2c5e54;
}


/* ============================================================
   HOMEPAGE v3 + ABOUT PAGE — overrides and new components
   These rules are loaded last, so they win against older
   .eg-hero, .eg-steps, .eg-visit, etc. declarations above.
   Brand colors: #2c5e54 primary, #a5ccbc sage, #bfe2dc mint,
                 #f0f5f3 soft bg
   ============================================================ */


/* ---- 1. Shared section shell ---- */
.eg-section {
  max-width: 1160px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  box-sizing: border-box;
}

.eg-section--sage {
  background: #e8f0ed;
  max-width: none;
  padding-left: max(1.25rem, calc((100vw - 1160px) / 2));
  padding-right: max(1.25rem, calc((100vw - 1160px) / 2));
  border-top: 1px solid #d1dfd9;
  border-bottom: 1px solid #d1dfd9;
}

.eg-section__header {
  margin: 0 0 1.4rem;
}

.eg-section__header h1,
.eg-section__header h2 {
  margin: 0 0 0.3rem;
  font-size: 1.25rem;
  color: #2c5e54;
  line-height: 1.25;
  letter-spacing: 0.01em;
  font-weight: 700;
}

/* Left-border accent — use on product rows and content-heavy sections */
.eg-section__header--accent {
  padding-left: 1rem;
  border-left: 4px solid #a5ccbc;
}

/* Centered header — use on standalone sections like categories, testimonials */
.eg-section__header--center {
  text-align: center;
}

.eg-section__header--center h2 {
  display: inline-block;
  border-bottom: 3px solid #a5ccbc;
  padding-bottom: 0.35rem;
}

/* Inline header — lives beside content in the same row (founder, visit) */
.eg-section__header--inline {
  margin: 0 0 0.6rem;
}

.eg-section__header--inline {
  padding-left: 0;
  border-left: none;
}

.eg-section__header--inline h2 {
  border-left: 4px solid #a5ccbc;
  padding-left: 1rem;
}

.eg-section__sub {
  margin: 0;
  color: #5a6b65;
  font-size: 0.98rem;
  font-style: italic;
}

.eg-section__footer-link {
  text-align: right;
  margin: 1rem 0 0;
}

.eg-section__footer-link a {
  color: #2c5e54;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 94, 84, 0.3);
}

.eg-section__footer-link a:hover {
  border-bottom-color: #2c5e54;
}


/* ---- 2. Hero v3 — full-bleed + glass overlay ---- */
.eg-hero {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
}

.eg-hero__collage {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  width: 100%;
  height: min(62vh, 600px);
  background: #f5f9f6;
}

.eg-hero__collage .eg-hero__img {
  position: relative;
  overflow: hidden;
}

.eg-hero__img--main {
  grid-row: 1 / span 2;
  grid-column: 1;
}

.eg-hero__img--side-top {
  grid-row: 1;
  grid-column: 2;
}

.eg-hero__img--side-btm {
  grid-row: 2;
  grid-column: 2;
}

.eg-hero__collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eg-hero__overlay {
  position: absolute;
  top: 50%;
  left: 4%;
  transform: translateY(-50%);
  max-width: 480px;
  padding: 1.6rem 1.8rem 1.4rem;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  color: #1f3a33;
  z-index: 2;
}

.eg-hero__wordmark {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #2c5e54;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.eg-hero__logo {
  display: block;
  height: 40px;
  width: auto;
  margin: 0 0 0.85rem;
}

/* Hero headline — exception to the guide's 1.5rem page-title cap.
   The guide's type scale was written for interior/flow pages; full-
   bleed hero headlines on a landing page are a distinct category. */
.eg-hero__headline {
  margin: 0 0 0.7rem;
  color: #1f3a33;
  line-height: 1.08;
  font-weight: 700;
  font-size: clamp(1.65rem, 3.6vw, 2.35rem);
  letter-spacing: -0.005em;
}

.eg-hero__line-1,
.eg-hero__line-2 {
  display: block;
}

.eg-hero__sub {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #3a4a43;
}

.eg-hero__cta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.eg-hero__cred {
  margin: 0;
  font-size: 0.75rem;
  color: #5a6b65;
  letter-spacing: 0.04em;
  text-transform: none;
}

.eg-hero__visit-link {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: #5a6b65;
}

.eg-hero__visit-link a {
  color: #2c5e54 !important;
  text-decoration: none !important;
  border-bottom: 1px dotted rgba(44, 94, 84, 0.4);
}

.eg-hero__visit-link a:hover {
  border-bottom-color: #2c5e54;
}


/* ---- 2b. Credibility pill strip (below hero) ----
   Uses the same pill styling as the Reuse Library Survey intro
   page highlights (.rls-highlight) so the brand reads consistently.
   Background is plain white — no washed-out sage band that fights
   the pill borders. */
.eg-trust-pills {
  background: #ffffff;
  padding: 1.75rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid #e3ece8;
}

.eg-trust-pills__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem 0.85rem;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.eg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: #e8f5f3;
  border: 1px solid #bfe2dc;
  border-radius: 2rem;
  font-size: 0.85rem;
  color: #2c5e54;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Ombre cycle: blue-soft -> mint -> sage, repeat. Applied via explicit
   modifier classes in the template so the order is intentional and
   stable across WP page-builder edits (nth-child would break if the
   list was reordered). */
.eg-pill--blue {
  background: #d7edf7;
  border-color: #a8c9d8;
  color: #1f6d86;
}
.eg-pill--mint {
  background: #e8f5f3;
  border-color: #bfe2dc;
  color: #2c5e54;
}
.eg-pill--sage {
  background: #dce8e4;
  border-color: #a5ccbc;
  color: #2c5e54;
}

.eg-pill__icon {
  font-size: 0.95rem;
  line-height: 1;
}

@media (max-width: 600px) {
  .eg-trust-pills {
    padding: 1.1rem 1rem;
  }
  .eg-trust-pills__list {
    gap: 0.5rem 0.6rem;
  }
  .eg-pill {
    font-size: 0.78rem;
    padding: 0.4rem 0.85rem;
  }
}

/* Tablet / narrow desktop: overlay stays on main photo, narrower */
@media (max-width: 860px) {
  .eg-hero__collage {
    height: auto;
    min-height: 520px;
  }
  .eg-hero__overlay {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 480px;
    padding: 1.5rem 1.4rem 1.3rem;
    border-radius: 12px;
  }
  .eg-hero__sub {
    font-size: 0.92rem;
    margin-bottom: 1rem;
  }
  .eg-hero__cta .eg-btn {
    flex: 1 1 45%;
    text-align: center;
    padding: 0.6rem 0.8rem;
    font-size: 0.88rem;
  }
}

/* Phones: photo collage fills the hero full-width, overlay box
   sits centered inside at ~88vw — a touch smaller than the hero
   so the photo reads as a frame around the glass card. No
   duplicate logo (header logo is enough). */
@media (max-width: 600px) {
  .eg-hero__collage {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    min-height: 520px;
    height: auto;
  }
  .eg-hero__img--main {
    grid-column: 1;
    grid-row: 1;
  }
  .eg-hero__img--side-top,
  .eg-hero__img--side-btm {
    display: none;
  }
  /* Overlay restored to absolutely positioned glass card, centered
     on the photo. Slightly smaller than the hero (88vw) so the
     collage frames it on all sides. Keeps the desktop glass blur
     + border + shadow so it reads as the same design, scaled. */
  .eg-hero__overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88vw;
    max-width: 88vw;
    margin: 0;
    padding: 1.4rem 1.3rem 1.3rem;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  /* Hero logo: already shown in sticky header. Hide to avoid
     duplication on mobile. */
  .eg-hero__logo {
    display: none;
  }
  .eg-hero__wordmark {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    margin-bottom: 0.5rem;
  }
  .eg-hero__headline {
    font-size: 1.65rem;
    line-height: 1.15;
    margin-bottom: 0.5rem;
  }
  .eg-hero__sub {
    font-size: 0.98rem;
    line-height: 1.5;
    margin-bottom: 1rem;
  }
  .eg-hero__cta {
    gap: 0.5rem;
  }
  .eg-hero__cta .eg-btn {
    flex: 1 1 45%;
    text-align: center;
    padding: 0.6rem 0.7rem;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
  }
  .eg-hero__cred {
    font-size: 0.72rem;
  }
  .eg-hero__visit-link {
    font-size: 0.84rem;
    margin-top: 0.6rem;
  }
}

/* Very small phones (iPhone SE / 375px-ish) */
@media (max-width: 400px) {
  .eg-hero__collage {
    min-height: 500px;
  }
  .eg-hero__overlay {
    padding: 1.1rem 1rem 1rem;
  }
  .eg-hero__sub {
    font-size: 0.86rem;
    margin-bottom: 0.8rem;
  }
  .eg-hero__cta {
    gap: 0.45rem;
  }
  .eg-hero__cta .eg-btn {
    padding: 0.55rem 0.6rem;
    font-size: 0.82rem;
  }
}


/* ---- 3. Buttons (v3 — mint gradient, no dark fills) ---- */
/* !important needed because Kadence default anchor color (blue) loads later
   in the cascade and leaks through on page templates. */
.eg-btn,
.eg-btn:link,
.eg-btn:visited,
a.eg-btn {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2c5e54 !important;
  background: linear-gradient(135deg, #e8f5f3 0%, #dce8e4 50%, #bfe2dc 100%);
  border: 1px solid #a5ccbc;
  border-radius: 6px;
  text-decoration: none !important;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.eg-btn:hover,
a.eg-btn:hover {
  color: #1f3a33 !important;
  text-decoration: none !important;
}

.eg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(44, 94, 84, 0.15);
  color: #2c5e54;
}

.eg-btn--primary {
  background: linear-gradient(135deg, #d8ede7 0%, #bfe2dc 60%, #a5ccbc 100%);
}


/* ---- 4. How It Works (steps) — editorial, no card chrome ----
   Cards-with-shadows-and-centered-giant-numerals read like a
   templated 3-up homepage grid. Replaced with a quieter editorial
   treatment: thin sage top rule, small uppercase "Step 01" label,
   left-aligned heading + body + link. Calmer, more brand-voice. */
.eg-steps-section .eg-section__header {
  text-align: left;
}

.eg-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 2.25rem;
}

.eg-step {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 0 0;
  border-top: 2px solid #a5ccbc;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* Small "STEP 01" label instead of a giant centered numeral.
   The number in the HTML is just "1" / "2" / etc.; we prepend
   "Step " via ::before so the markup stays simple. Zero-pad the
   number with a 0 pseudo for "01" look. */
.eg-step__num {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5a7a6f;
  margin: 0 0 0.65rem;
  font-family: inherit;
}

.eg-step__num::before {
  content: "Step 0";
}

.eg-step h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  color: #2c5e54;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-align: left;
}

.eg-step p {
  margin: 0 0 0.9rem;
  font-size: 0.93rem;
  line-height: 1.6;
  color: #495951;
  text-align: left;
}

/* Link sits flush-left, pushed to the bottom so 4 unequal-copy
   cards still align their CTAs along a shared baseline. */
.eg-step .eg-step__link {
  margin-top: auto;
  text-align: left;
}

@media (max-width: 1000px) {
  .eg-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1.75rem;
  }
}

@media (max-width: 480px) {
  .eg-steps {
    gap: 1.25rem;
  }
  .eg-step {
    padding: 0.85rem 0 0;
  }
  .eg-step__num {
    font-size: 0.68rem;
    margin-bottom: 0.45rem;
  }
  .eg-step h3 {
    font-size: 0.98rem;
  }
  .eg-step p {
    font-size: 0.88rem;
    line-height: 1.55;
  }
}


/* ---- 5. Founder teaser (homepage) ----
   2/3 copy (left) + 1/3 photo (right). Text is where the user reads,
   photo is visually secondary. Content column capped at 560px so
   prose doesn't stretch awkwardly on wide screens. */
.eg-founder-section {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.eg-founder {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 1020px;
  margin: 0 auto;
}

.eg-founder__copy {
  max-width: 560px;
}

.eg-founder__photo {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(44, 94, 84, 0.14);
}

.eg-founder__photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 30%;
}

.eg-founder__copy p {
  font-size: 1rem;
  line-height: 1.65;
  color: #3a4a43;
  margin: 0 0 0.9rem;
}

.eg-founder__cta {
  margin-top: 1.2rem !important;
}

/* !important needed because Kadence/Genesis .entry-content a
   selector loads later with a brighter anchor color that leaks
   into the homepage founder link if we don't lock this. */
a.eg-link--arrow,
a.eg-link--arrow:link,
a.eg-link--arrow:visited,
.eg-link--arrow {
  color: #2c5e54 !important;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(44, 94, 84, 0.35);
}

a.eg-link--arrow:hover,
.eg-link--arrow:hover {
  color: #1f3a33 !important;
  border-bottom-color: #2c5e54;
}

@media (max-width: 860px) {
  /* Mobile: stacks naturally — copy first (HTML order), photo below.
     Photo stays clearly supporting/secondary — capped at 300px wide
     so the rounded-corner card doesn't feel like a full-screen hero. */
  .eg-founder {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .eg-founder__photo {
    max-width: 300px;
    margin: 0 auto;
  }
}


/* ---- 6. Product rows — one-row teaser only ----
   Homepage product rows render 100% like the shop/archive loop,
   but visibly cap to what fits in a single row at each viewport.
   The shortcode still fetches 6 items; CSS hides the overflow.
   Users see a tight "here's a taste" row with a "see all →"
   link below to continue browsing. */

/* <600px: show 1 product */
@media (max-width: 599px) {
  .eg-products-row ul.products li.product:nth-child(n+2) {
    display: none !important;
  }
}

/* 600–899px: show 2 products */
@media (min-width: 600px) and (max-width: 899px) {
  .eg-products-row ul.products li.product:nth-child(n+3) {
    display: none !important;
  }
}

/* 900–1199px: show 3 products */
@media (min-width: 900px) and (max-width: 1199px) {
  .eg-products-row ul.products li.product:nth-child(n+4) {
    display: none !important;
  }
}

/* ≥1200px: show 4 products */
@media (min-width: 1200px) {
  .eg-products-row ul.products li.product:nth-child(n+5) {
    display: none !important;
  }
}


/* ---- 7. Quicklinks ---- */
.eg-quicklinks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.eg-quicklink {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(44, 94, 84, 0.08);
  text-decoration: none;
  color: #2c5e54;
  aspect-ratio: 4 / 3;
}

.eg-quicklink img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.eg-quicklink:hover img {
  transform: scale(1.05);
}

.eg-quicklink__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(44, 94, 84, 0.92) 0%, rgba(44, 94, 84, 0.75) 55%, rgba(44, 94, 84, 0) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.eg-quicklink__title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  line-height: 1.2;
}

.eg-quicklink__title::after {
  content: " →";
  opacity: 0.85;
}

.eg-quicklink__desc {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0.95;
  line-height: 1.35;
}

.eg-quicklink__arrow {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2c5e54;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  border-top: 1px solid rgba(44, 94, 84, 0.2);
  padding-top: 0.5rem;
}

.eg-quicklink--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.2rem 1.3rem;
  background: linear-gradient(135deg, #e8f5f3 0%, #bfe2dc 100%);
  border: 1px solid #a5ccbc;
  aspect-ratio: 4 / 3;
}

.eg-quicklink--text .eg-quicklink__prompt {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2c5e54;
  margin-bottom: 0.5rem;
  text-transform: lowercase;
}

.eg-quicklink--text .eg-quicklink__hint {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #3a4a43;
  display: block;
}

@media (max-width: 860px) {
  .eg-quicklinks { grid-template-columns: repeat(2, 1fr); }
  .eg-quicklink--text .eg-quicklink__hint {
    font-size: 0.78rem;
  }
}


/* ---- 8. Earthies banner ---- */
.eg-earthies-section {
  padding: 3rem 1.25rem;
}

.eg-earthies {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, #f0f8f5 0%, #dceee7 100%);
  border: 1px solid #a5ccbc;
  border-radius: 14px;
}

.eg-earthies h2 {
  margin: 0 0 0.6rem;
  color: #2c5e54;
  text-transform: none;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
}

.eg-earthies p {
  margin: 0 0 0.9rem;
  color: #3a4a43;
  line-height: 1.55;
}

.eg-earthies__lead {
  font-style: italic;
  color: #2c5e54 !important;
}

.eg-earthies__rules {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  text-align: left;
}

.eg-earthies__rules li {
  font-size: 0.95rem;
  color: #3a4a43;
  padding-left: 1.5rem;
  position: relative;
}

.eg-earthies__rules li::before {
  content: "🌍";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.95rem;
}

.eg-earthies__rules li strong {
  color: #2c5e54;
  display: inline-block;
  min-width: 3.2rem;
}

.eg-earthies__redeem {
  margin: 0.6rem 0 0.8rem !important;
  font-size: 1rem !important;
  color: #2c5e54 !important;
}

.eg-earthies__soon {
  font-size: 0.86rem !important;
  color: #5a6b65 !important;
  font-style: italic;
  margin: 0 0 1.2rem !important;
}

@media (max-width: 600px) {
  .eg-earthies__rules li {
    font-size: 0.9rem;
  }
  .eg-earthies__rules li strong {
    min-width: 2.8rem;
  }
}


/* ---- 9. Values line ---- */
.eg-values-section {
  padding: 2.5rem 1.25rem;
}

.eg-values {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.05rem;
  color: #2c5e54;
  font-style: italic;
  line-height: 1.5;
}


/* ---- 10. Visit Us v3 ----
   Tight editorial layout — photo stretches to match the text
   column height, all text margins trimmed so the whole section
   (heading + address + hours + contact + CTA + photo) fits in
   one viewport at normal zoom. */
.eg-visit-section {
  padding-top: 1.5rem;
  padding-bottom: 1.75rem;
}

.eg-visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.25rem;
  align-items: stretch;
  max-width: 1060px;
  margin: 0 auto;
  text-align: left;
}

.eg-visit__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 460px;
  width: 100%;
}

.eg-visit__photo {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(44, 94, 84, 0.14);
  height: 100%;
}

.eg-visit__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.eg-visit__content h2 {
  margin: 0 0 0.15rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.eg-visit__content .eg-section__header {
  margin: 0 0 0.6rem;
}

.eg-visit__content .eg-section__sub {
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0.25rem 0 0;
}

.eg-visit__address {
  font-size: 1rem;
  color: #2c5e54;
  margin: 0.85rem 0 0.2rem;
  line-height: 1.35;
}

.eg-visit__label {
  margin: 0.55rem 0 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a6b65;
  font-weight: 600;
}

.eg-visit__hours {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  font-size: 0.92rem;
  color: #3a4a43;
  width: 100%;
  max-width: 320px;
}

.eg-visit__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.18rem 0;
  border-bottom: 1px dotted rgba(44, 94, 84, 0.18);
}

.eg-visit__hours li:last-child {
  border-bottom: none;
}

.eg-visit__day {
  font-weight: 600;
  color: #2c5e54;
}

.eg-visit__time {
  color: #3a4a43;
}

.eg-visit__contact {
  list-style: none;
  margin: 0.25rem 0 0.85rem;
  padding: 0;
  font-size: 0.92rem;
}

.eg-visit__contact li {
  padding: 0.1rem 0;
}

.eg-visit__contact a {
  color: #2c5e54 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(44, 94, 84, 0.3);
}

.eg-visit__contact a:hover {
  border-bottom-color: #2c5e54;
}

.eg-visit__cta {
  margin: 0.25rem 0 0;
}

@media (max-width: 860px) {
  /* Mobile: heading + address/hours/contact/CTA come FIRST, photo
     below at the SAME width as the content column — feels like one
     intentional block instead of a narrower lone card underneath. */
  .eg-visit {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 560px;
    text-align: left;
  }
  .eg-visit__content {
    order: 1;
    max-width: 100%;
  }
  .eg-visit__photo {
    order: 2;
    max-width: 100%;
    margin: 0;
  }
  .eg-visit__photo img {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 240px;
    object-fit: cover;
  }
}


/* ---- 11. ABOUT PAGE ---- */
.eg-about-hero {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.eg-about-hero__image {
  margin: 2rem 0 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(44, 94, 84, 0.12);
}

.eg-about-hero__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Text-only hero variant \u2014 sage gradient band with generous type,
   used when we don't want to compete with the Visit Us storefront photo.
*/
.eg-about-hero--text {
  background: linear-gradient(135deg, #f0f5f3 0%, #e6efea 55%, #dbeae3 100%);
  padding: 3rem 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0;
  text-align: center;
}

.eg-about-hero--text .eg-section__header {
  max-width: 760px;
  margin: 0 auto;
}

/* About hero H1 — text-only banner, NOT a full-bleed image hero.
   Follows the guide's 1.5rem page-title cap. The "hero exception"
   only applies to image-backed / full-bleed heroes (homepage). */
.eg-about-hero--text h1 {
  font-size: 1.5rem;
  color: #2c5e54;
  margin: 0 0 0.4rem;
  letter-spacing: 0;
  line-height: 1.2;
  font-weight: 700;
}

.eg-about-hero--text .eg-section__sub {
  font-size: 1.15rem;
  color: #4a6a60;
  margin: 0;
  font-style: italic;
}

@media (max-width: 720px) {
  .eg-about-hero--text {
    padding: 2.25rem 1.25rem;
  }
}

.eg-about-prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #3a4a43;
}

.entry-content .eg-about-prose p,
.eg-about-prose p {
  margin: 0 0 1rem !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: #3a4a43 !important;
}

.entry-content .eg-about-prose__heading,
.eg-about-prose__heading {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem) !important;
  color: #2c5e54 !important;
  margin: 0 0 1rem !important;
  border-left: 4px solid #a5ccbc;
  padding-left: 0.8rem;
}

.eg-about-prose--narrow {
  max-width: 760px;
  margin: 1.5rem auto 0;
}

.eg-about-offer .eg-section__header {
  margin-bottom: 2.5rem;
}

.entry-content .eg-about-block,
.eg-about-block {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 2.5rem !important;
  align-items: center;
  margin: 0 auto 3rem !important;
  max-width: 1100px;
  padding: 0 !important;
}

.entry-content .eg-about-block:last-child,
.eg-about-block:last-child {
  margin-bottom: 0 !important;
}

.eg-about-block--reverse .eg-about-block__copy { order: 2; }
.eg-about-block--reverse .eg-about-block__gallery { order: 1; }

.entry-content .eg-about-block__copy h3,
.eg-about-block__copy h3 {
  margin: 0 0 0.8rem !important;
  color: #2c5e54 !important;
  font-size: 1.35rem !important;
  border-left: 3px solid #a5ccbc;
  padding-left: 0.8rem;
  line-height: 1.25;
}

.entry-content .eg-about-block__copy p,
.eg-about-block__copy p {
  margin: 0 0 0.85rem !important;
  line-height: 1.65 !important;
  color: #3a4a43 !important;
  font-size: 1rem !important;
}

.eg-about-gallery {
  display: grid;
  gap: 0.6rem;
}

.eg-about-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.eg-about-gallery--4 { grid-template-columns: repeat(2, 1fr); }

/* Single-image figure variant for blocks that use one photo instead of a gallery */
.entry-content figure.eg-about-block__figure,
figure.eg-about-block__figure {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(44, 94, 84, 0.12);
  max-width: 100% !important;
}
.entry-content .eg-about-block__figure img,
.eg-about-block__figure img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 !important;
}

.entry-content .eg-about-gallery,
.eg-about-gallery {
  display: grid !important;
  gap: 0.6rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.entry-content .eg-about-gallery img,
.eg-about-gallery img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block !important;
  margin: 0 !important;
}

@media (max-width: 860px) {
  .entry-content .eg-about-block,
  .entry-content .eg-about-block--reverse,
  .eg-about-block,
  .eg-about-block--reverse {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
  .eg-about-block--reverse .eg-about-block__copy { order: 0 !important; }
  .eg-about-block--reverse .eg-about-block__gallery { order: 0 !important; }
}


/* ---- Dominant hero block on about page ----
   Used for the "buy just what you need" block that carries the full promise.
   Wider, bigger type, more room to breathe, sage-tinted background card.
*/
.eg-about-block--hero {
  max-width: 1200px;
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, #f0f5f3 0%, #e6efea 100%);
  border-radius: 16px;
  box-shadow: 0 6px 28px rgba(44, 94, 84, 0.08);
  margin-bottom: 3.5rem;
}

.eg-about-block--hero .eg-about-block__copy h3 {
  font-size: 1.75rem;
  border-left-width: 4px;
  padding-left: 1rem;
  margin-bottom: 1.1rem;
}

.eg-about-block--hero .eg-about-block__lede {
  font-size: 1.15rem;
  line-height: 1.5;
  color: #2c5e54;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.eg-about-block--hero .eg-about-block__copy p strong {
  color: #2c5e54;
}

@media (max-width: 860px) {
  .eg-about-block--hero {
    padding: 1.5rem;
    gap: 1.4rem;
  }
  .eg-about-block--hero .eg-about-block__copy h3 {
    font-size: 1.5rem;
  }
  .eg-about-block--hero .eg-about-block__lede {
    font-size: 1.05rem;
  }
}


/* ---- "more than a refill shop" 3-up card grid ----
   Merges produce, compost, and community into one visual section.
*/
.eg-about-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.eg-about-more__card {
  margin: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(44, 94, 84, 0.08);
  display: flex;
  flex-direction: column;
}

.eg-about-more__card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.eg-about-more__card figcaption {
  padding: 1.25rem 1.4rem 1.6rem;
}

.eg-about-more__card h3 {
  margin: 0 0 0.6rem;
  color: #2c5e54;
  font-size: 1.2rem;
  border-left: 3px solid #a5ccbc;
  padding-left: 0.7rem;
}

.eg-about-more__card p {
  margin: 0;
  line-height: 1.6;
  color: #3a4a43;
  font-size: 0.95rem;
}

@media (max-width: 960px) {
  .eg-about-more__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .eg-about-more__card {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: stretch;
  }
  .eg-about-more__card img {
    height: 100%;
    aspect-ratio: auto;
  }
  .eg-about-more__card figcaption {
    padding: 1.1rem 1.2rem;
  }
}

@media (max-width: 600px) {
  .eg-about-more__card {
    grid-template-columns: 1fr;
  }
  .eg-about-more__card img {
    aspect-ratio: 16 / 10;
  }
}


/* Founder block on about page — redesigned with static photos woven
   into two 2-column rows instead of a rotating gallery.
   All rules use .entry-content prefix + !important to beat theme. */
/* (legacy v1 layout kept for any older page copies) */
.entry-content .eg-about-founder--redesign,
.eg-about-founder--redesign {
  display: grid !important;
  grid-template-columns: 1fr 1.3fr !important;
  gap: 2.5rem !important;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto 3rem !important;
  padding: 0 !important;
}

.entry-content .eg-about-founder--redesign.eg-about-founder--reverse,
.eg-about-founder--redesign.eg-about-founder--reverse {
  grid-template-columns: 1.3fr 1fr !important;
  margin-bottom: 0 !important;
}

.entry-content .eg-about-founder--reverse .eg-about-founder__photos,
.eg-about-founder--reverse .eg-about-founder__photos { order: 2; }
.entry-content .eg-about-founder--reverse .eg-about-founder__bio,
.eg-about-founder--reverse .eg-about-founder__bio { order: 1; }

.entry-content .eg-about-founder__photos,
.eg-about-founder__photos {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.entry-content figure.eg-about-founder__photo-item,
figure.eg-about-founder__photo-item {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(44, 94, 84, 0.12);
  max-width: 100% !important;
}

.entry-content .eg-about-founder__photo-item img,
.eg-about-founder__photo-item img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.entry-content .eg-about-founder__photo-item figcaption,
.eg-about-founder__photo-item figcaption {
  padding: 0.45rem 0.75rem !important;
  font-size: 0.8rem !important;
  color: #5a6b65 !important;
  font-style: italic;
  background: #f8faf9;
  margin: 0 !important;
  text-align: left !important;
}

.entry-content .eg-about-founder__bio h2,
.eg-about-founder__bio h2 {
  margin: 0 0 1rem !important;
  font-size: 1.25rem !important;
  color: #2c5e54 !important;
  border-left: 4px solid #a5ccbc;
  padding-left: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.entry-content .eg-about-founder__bio p,
.eg-about-founder__bio p {
  margin: 0 0 1rem !important;
  line-height: 1.7 !important;
  color: #3a4a43 !important;
  font-size: 1rem !important;
}

.entry-content .eg-about-founder__creds,
.eg-about-founder__creds {
  list-style: none !important;
  padding: 0 !important;
  margin: 1.25rem 0 0 !important;
  border-top: 1px solid #cfdeda;
  padding-top: 1rem !important;
}

.entry-content .eg-about-founder__creds li,
.eg-about-founder__creds li {
  font-size: 0.92rem !important;
  color: #2c5e54 !important;
  margin: 0.3rem 0 !important;
  padding-left: 1.2rem !important;
  position: relative;
  list-style: none !important;
}

.eg-about-founder__creds li::before {
  content: "·";
  position: absolute;
  left: 0.4rem;
  color: #a5ccbc;
  font-weight: 700;
}

@media (max-width: 860px) {
  .entry-content .eg-about-founder--redesign,
  .entry-content .eg-about-founder--redesign.eg-about-founder--reverse,
  .eg-about-founder--redesign,
  .eg-about-founder--redesign.eg-about-founder--reverse {
    grid-template-columns: 1fr !important;
    gap: 1.4rem !important;
  }
  .eg-about-founder--redesign.eg-about-founder--reverse .eg-about-founder__photos { order: 0 !important; }
  .eg-about-founder--redesign.eg-about-founder--reverse .eg-about-founder__bio { order: 0 !important; }
  .entry-content .eg-about-founder__photos,
  .eg-about-founder__photos {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* About CTA row */
.eg-about-cta {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.eg-about-cta__inner {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.eg-about-cta__prompt {
  text-align: center;
  font-size: 0.95rem;
  color: #5a7a6f;
  margin: 0 0 1.25rem;
}

.eg-about-cta__prompt a {
  color: #3a4a3f;
  font-weight: 600;
  text-decoration: underline;
}

/* About lede - orienting sentence at the very top of the opening */
.entry-content p.eg-about-lede,
p.eg-about-lede {
  font-size: 1.1rem !important;
  line-height: 1.55 !important;
  color: #3a4a3f !important;
  padding: 1rem 1.25rem !important;
  background: #f5f9f6;
  border-left: 3px solid #a5ccbc;
  border-radius: 0 6px 6px 0;
  margin: 0 0 1.25rem !important;
}

.entry-content .eg-about-lede strong,
.eg-about-lede strong {
  color: #2c5e54 !important;
}


/* ---- 12. Scroll reveal (progressive enhancement) ----
   Content is VISIBLE by default. Only when JS has run and the
   IntersectionObserver is attached does the `html.js-reveals-ready`
   class get added, which then "resets" un-intersected .eg-reveal
   elements to opacity:0 + translateY(20px) so they can fade in.

   This means if JS fails / hangs / is blocked, users see content
   normally without a blank page. Previously the default was
   opacity:0 which left users with invisible sections when the
   transition stalled. */
.eg-reveal {
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

html.js-reveals-ready .eg-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(20px);
}

html.js-reveals-ready .eg-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveals-ready .eg-reveal,
  html.js-reveals-ready .eg-reveal:not(.is-visible),
  html.js-reveals-ready .eg-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ---- 13. Kill legacy BYOC callout if any linger ---- */
/* Removed: see "INFO SPLIT block removed" note near top of file. */


/* ---- 14. Social-proof stat band (between How It Works + Founder) ---- */
.eg-stat-band {
  max-width: 880px;
  margin: 2.5rem auto;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, #f5faf8 0%, #e8f3ef 100%);
  border-left: 4px solid #a5ccbc;
  border-radius: 10px;
  text-align: center;
}

.eg-stat-band__lead {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #2c5e54;
  letter-spacing: 0;
  line-height: 1.3;
}

.eg-stat-band__stat {
  margin: 0;
  font-size: 1rem;
  color: #3a4a43;
  line-height: 1.5;
}

.eg-stat-band__stat strong {
  font-size: 1.25rem;
  color: #2c5e54;
  display: inline-block;
  margin-right: 0.25rem;
  vertical-align: baseline;
  font-weight: 700;
}

.eg-stat-band__source {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: #6a7a74;
  font-style: italic;
}

.eg-stat-band__source a {
  color: #2c5e54;
  font-weight: 600;
  font-style: normal;
  text-decoration: underline;
}


/* ---- 15. Trust strip — mobile cleanup ---- */
@media (max-width: 600px) {
  .eg-trust-strip {
    padding: 0.9rem 1rem;
    line-height: 1.7;
  }
  .eg-trust-strip__sep {
    display: none;
  }
  .eg-trust-strip__item {
    display: block;
    margin: 0.15rem 0;
  }
}


/* ---- 16. Quicklink — text tile mobile fix (free the aspect ratio) ---- */
@media (max-width: 600px) {
  .eg-quicklink--text {
    aspect-ratio: auto;
    min-height: 150px;
    padding: 1rem 1.1rem;
  }
  .eg-quicklink--text .eg-quicklink__prompt {
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
  }
  .eg-quicklink--text .eg-quicklink__hint {
    font-size: 0.72rem;
    line-height: 1.35;
  }
}


/* ---- 17. Section padding — reduce on mobile (scroll fatigue) ---- */
@media (max-width: 768px) {
  .eg-section {
    padding: 1.75rem 1.1rem;
  }
  .eg-founder-section {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
  .eg-section__header {
    margin-bottom: 1.1rem;
  }
}


/* ---- 17b. Rich category cards (homepage "shop by category" heart) ---- */
.eg-cats-section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.eg-cats-section .eg-section__header {
  margin-bottom: 0.75rem;
}
.eg-cats-section .eg-cats--grid,
.eg-cats-section .eg-cats--duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 0.5rem auto 0;
  padding: 0 1.5rem;
  max-width: 1100px;
  list-style: none;
}

.eg-cats-section .eg-cat__pills-lead {
  margin: 0 0 0.5rem !important;
  font-size: 0.85rem !important;
  font-weight: 600;
  color: #2c5e54;
  font-style: italic;
}
.eg-cats-section .eg-cat__pills,
.eg-cat-section .eg-cat__pills,
.eg-cat__pills {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.45rem;
}

/* Value-concept pills: non-linked, subtle tag style. Tells the user
   what the department is about (organic, plant-based, refillable,
   etc.) without duplicating the nav. */
.eg-cat-section .eg-cat__pills li,
.eg-cats-section .eg-cat__pills li,
.eg-cat__pills li {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2c5e54;
  background: #f0f5f3;
  border: 1px solid #cfe1d9;
  border-radius: 999px;
  line-height: 1.25;
  list-style: none;
  margin: 0;
}

/* Legacy: if any old paste-ins still have <a> inside the pill,
   keep the link style matching. */
.eg-cats-section .eg-cat__pills a,
.eg-cat-section .eg-cat__pills a {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #2c5e54;
  background: #f0f5f3;
  border: 1px solid #cfe1d9;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.eg-cats-section .eg-cat__pills a:hover,
.eg-cat-section .eg-cat__pills a:hover {
  background: #dcefea;
  border-color: #a5ccbc;
}

/* ---- 17c. Editorial story block (produce row intro) ----
   Merged: story lead + pills + calendar teaser aside + paired
   arrow links, all in one calm editorial intro. No separate
   boxed calendar teaser; everything lives in one centered column. */
.eg-story {
  max-width: 760px;
  margin: 0 auto 1.25rem;
  text-align: center;
  padding: 0 0.5rem;
}
.eg-story__lead {
  font-size: 1rem;
  line-height: 1.65;
  color: #3a4a43;
  margin: 0 0 0.75rem;
}
.eg-story__pills {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.45rem;
}
.eg-story__pills li {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2c5e54;
  background: #f0f5f3;
  border: 1px solid #cfe1d9;
  border-radius: 999px;
  line-height: 1.25;
}
.eg-story__aside {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #5a6b65;
  font-style: italic;
  margin: 0 0 0.65rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.eg-story__links {
  margin: 0;
  font-size: 0.92rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.65rem;
}
.eg-story__links a {
  color: #2c5e54;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 94, 84, 0.35);
  white-space: nowrap;
}
.eg-story__links a:hover { border-bottom-color: #2c5e54; }
.eg-story__sep {
  color: #a5ccbc;
  font-weight: 700;
  user-select: none;
}
@media (max-width: 600px) {
  .eg-story__links {
    flex-direction: column;
    gap: 0.35rem;
  }
  .eg-story__sep { display: none; }
}

/* Legacy: keep .eg-story__link selector working in case any old
   paste-ins still use it. Safe no-op. */
.eg-story__link {
  margin: 0;
  font-size: 0.92rem;
}
.eg-story__link a {
  color: #2c5e54;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 94, 84, 0.35);
}
.eg-story__link a:hover { border-bottom-color: #2c5e54; }

/* ---- 17d. Step link inside 1-2-3 how-it-works ---- */
.eg-step__link {
  margin: 0.75rem 0 0 !important;
  font-size: 0.85rem;
}
.eg-step__link a {
  color: #2c5e54;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 94, 84, 0.35);
}
.eg-step__link a:hover { border-bottom-color: #2c5e54; }

/* ---- Category sections (Groceries / Apothecary / Essentials) ----
   Each department is its own section (no outer umbrella). Image is
   1/3 of row width, copy is 2/3. Image + copy columns swap for
   visual rhythm between sections (left / right / left). */
.eg-cat-section {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

/* Breathing room between consecutive category sections so the sage
   bands don't visually merge when they sit next to each other. */
.eg-cat-section + .eg-cat-section {
  border-top: 1px solid rgba(44, 94, 84, 0.08);
}

/* Also apply between a category section and the produce section
   that follows Groceries (Fresh + Local sits between Groceries
   and Apothecary). */
.eg-cat-section + .eg-produce-section,
.eg-produce-section + .eg-cat-section {
  margin-top: 0.5rem;
}

.eg-cat-section .eg-cat,
.eg-cats-section .eg-cat {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0 1.5rem;
  transition: none;
}

/* Cap the copy column so text doesn't stretch loose on wide screens. */
.eg-cat-section .eg-cat__content,
.eg-cats-section .eg-cat__content {
  max-width: 580px;
}

.eg-cat-section .eg-cat:hover,
.eg-cats-section .eg-cat:hover {
  transform: none;
  box-shadow: none;
}

/* Image on the left — 1/3 media + 2/3 copy */
.eg-cat-section .eg-cat--media-left,
.eg-cats-section .eg-cat--media-left {
  grid-template-columns: 1fr 2fr;
}

/* Image on the right — 2/3 copy + 1/3 media (flip columns) */
.eg-cat-section .eg-cat--media-right,
.eg-cats-section .eg-cat--media-right {
  grid-template-columns: 2fr 1fr;
}

/* For --media-right the HTML still has figure first, so swap
   the order so figure goes to column 2 and content to column 1. */
.eg-cat-section .eg-cat--media-right .eg-cat__media,
.eg-cats-section .eg-cat--media-right .eg-cat__media {
  order: 2;
}

.eg-cat-section .eg-cat--media-right .eg-cat__content,
.eg-cats-section .eg-cat--media-right .eg-cat__content {
  order: 1;
}

/* Media — landscape aspect so the block stays short enough to
   be viewed without scrolling within itself. Capped max-height
   belt-and-suspenders. */
.eg-cat-section .eg-cat__media,
.eg-cats-section .eg-cat__media {
  margin: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(44, 94, 84, 0.1);
  max-height: 320px;
}

.eg-cat-section .eg-cat__media img,
.eg-cats-section .eg-cat__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  max-height: 320px;
}

/* Reset for the old .eg-cat > img selector in case any renders it */
.eg-cats-section .eg-cat > img {
  display: none;
}

.eg-cats-section .eg-cat__content {
  padding: 0;
  display: flex;
  flex-direction: column;
  color: #3a4a43;
}

/* Section text scale per guide: 1.125rem. */
.eg-cats-section .eg-cat__content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  color: #2c5e54;
  letter-spacing: 0;
  line-height: 1.25;
  font-weight: 700;
}

.eg-cats-section .eg-cat__content p {
  margin: 0 0 0.85rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #3a4a43;
}

.eg-cats-section .eg-cat__content p:last-of-type {
  margin-bottom: 0;
}

.eg-cats-section .eg-cat__cta {
  margin-top: auto;
  padding-top: 0.5rem;
}

.eg-cats-section .eg-cat__cta .eg-btn {
  background: linear-gradient(135deg, #d5ede8 0%, #b5ddd5 100%);
  border: 1px solid #8cc4b8;
  color: #1f3a33;
  padding: 0.6rem 1.2rem;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.01em;
}

.eg-cats-section .eg-cat__cta .eg-btn:hover {
  background: linear-gradient(135deg, #c5e5de 0%, #a5ccbc 100%);
  border-color: #6db3a5;
}

@media (max-width: 768px) {
  .eg-cats-section .eg-cats--grid,
  .eg-cats-section .eg-cats--duo {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .eg-cats-section .eg-cat > img {
    height: 120px;
  }
}

/* Tablet/mobile: category sections stack vertically. Heading + copy
   appear first (order: 1), photo as supporting visual below
   (order: 2), capped at 75% width, never full-bleed. Content column
   max-width is released so copy fills the viewport width naturally.
   Targets BOTH the new .eg-cat-section wrapper and the legacy
   .eg-cats-section umbrella. */
@media (max-width: 860px) {
  .eg-cats-section .eg-cats--zigzag {
    gap: 2.25rem;
  }
  .eg-cat-section .eg-cat,
  .eg-cat-section .eg-cat--media-left,
  .eg-cat-section .eg-cat--media-right,
  .eg-cats-section .eg-cat,
  .eg-cats-section .eg-cat--media-left,
  .eg-cats-section .eg-cat--media-right {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 0 1rem !important;
  }
  .eg-cat-section .eg-cat__media,
  .eg-cat-section .eg-cat--media-right .eg-cat__media,
  .eg-cat-section .eg-cat--media-left .eg-cat__media,
  .eg-cats-section .eg-cat__media,
  .eg-cats-section .eg-cat--media-right .eg-cat__media,
  .eg-cats-section .eg-cat--media-left .eg-cat__media {
    order: 2 !important;
    max-width: 75% !important;
    margin: 0 auto !important;
  }
  .eg-cat-section .eg-cat__content,
  .eg-cat-section .eg-cat--media-right .eg-cat__content,
  .eg-cat-section .eg-cat--media-left .eg-cat__content,
  .eg-cats-section .eg-cat__content,
  .eg-cats-section .eg-cat--media-right .eg-cat__content,
  .eg-cats-section .eg-cat--media-left .eg-cat__content {
    order: 1 !important;
    max-width: 100% !important;
  }
  .eg-cat-section .eg-cat__media img,
  .eg-cats-section .eg-cat__media img {
    aspect-ratio: 16 / 10;
    max-height: 240px;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}


/* ---- Bullet marker kill — no native bullets on list wrappers.
   NOTE: the <li> inside pill lists (.eg-cat__pills li,
   .eg-trust-pills__list li, .eg-story__pills li) deliberately
   OMITTED here — those carry their own padding as pill badges.
   Killing padding-left on those would flush the text to the
   left edge of the pill. */
.eg-cat__pills,
.eg-trust-pills__list,
.eg-story__pills,
.eg-steps,
.eg-steps .eg-step,
.eg-visit__hours,
.eg-visit__hours li,
.eg-visit__contact,
.eg-visit__contact li {
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Pill <li> elements: just remove the list marker, let the pill
   padding rules handle spacing. */
.eg-cat__pills li,
.eg-trust-pills__list li,
.eg-story__pills li {
  list-style: none !important;
  margin-left: 0 !important;
}

/* ---- 17e. Rotating top bar ---- */
.eg-top-bar-rotator {
  display: inline-block;
  position: relative;
  min-height: 1.2em;
  line-height: 1.2;
}
.eg-top-bar-rotator__item {
  display: none;
  opacity: 0;
  transition: opacity 300ms ease;
}
.eg-top-bar-rotator__item.is-active {
  display: inline;
  opacity: 1;
}
.eg-top-bar-rotator__item a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- 17f. Homepage testimonials rotator ----
   Tight editorial section. The rotator's min-height was previously
   padded to fit the longest review (260px), which left dead
   whitespace when a short review was active. Dropped to a modest
   floor; active review height drives the rotator so short reviews
   don't leave empty space below. */
.eg-testimonials-section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.eg-testimonials-section .eg-section__header {
  margin-bottom: 0.75rem;
}
.eg-testimonials {
  max-width: 760px;
  margin: 0 auto;
  padding: 0.5rem 1.25rem 0.75rem;
  text-align: center;
}
.eg-testimonials__rotator {
  position: relative;
  min-height: 160px;
}
.eg-testimonials__item {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.eg-testimonials__item.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
}
.eg-testimonials__stars {
  color: #e5a823;
  letter-spacing: 3px;
  font-size: 1.05rem;
}
.eg-testimonials__quote {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.55;
  color: #2c5e54;
  font-style: italic;
  max-width: 680px;
  padding: 0 0.5rem;
}

/* Suppress the generic blockquote::before/::after decorative mint
   quote marks on testimonials — the template already renders
   &ldquo;/&rdquo; inline in the quote text, so the decorative
   pair was doubling up. */
.eg-testimonials__quote::before,
.eg-testimonials__quote::after {
  content: none !important;
  display: none !important;
}
.eg-testimonials__cite {
  font-size: 0.85rem;
  color: #5a6b63;
  font-style: normal;
}
.eg-testimonials__author { font-weight: 600; color: #2c5e54; }
.eg-testimonials__sep { margin: 0 0.35rem; color: #9cb0a8; }
.eg-testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.eg-testimonials__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfe1d9;
  transition: background 250ms ease, transform 250ms ease;
}
.eg-testimonials__dot.is-active {
  background: #2c5e54;
  transform: scale(1.15);
}
@media (max-width: 600px) {
  .eg-testimonials__quote { font-size: 1rem; }
  .eg-testimonials__rotator { min-height: 220px; }
}

/* ---- 17g. Cycling founder gallery (about page) ---- */
/* Shadow + border-radius already come from .eg-about-founder__photo
   which shares the same element. Only position: relative is needed. */
.eg-founder-gallery {
  position: relative;
}
.eg-founder-gallery__item {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease;
}
.eg-founder-gallery__item.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
}
/* Override .eg-about-founder__photo img { height: auto } so all 5
   photos hold the same portrait frame regardless of native ratio. */
.eg-founder-gallery__item img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
}
/* Override .eg-about-founder__photo figcaption (white bg, italic) with
   the overlay treatment for the cycling gallery. */
.eg-founder-gallery .eg-founder-gallery__item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 0.9rem;
  background: linear-gradient(to top, rgba(44, 94, 84, 0.75), rgba(44, 94, 84, 0));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
}
.eg-founder-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0;
  background: #f0f5f3;
}
.eg-founder-gallery__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cfe1d9;
  transition: background 250ms ease, transform 250ms ease;
}
.eg-founder-gallery__dot.is-active {
  background: #2c5e54;
  transform: scale(1.15);
}

/* ---- 17h. Team callout (about page) ---- */
.entry-content .eg-about-team-callout,
.eg-about-team-callout {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.75rem 2rem;
  background: #f0f5f3;
  border-left: 3px solid #bfe2dc;
  border-radius: 8px;
}
.entry-content .eg-about-team-callout h2,
.eg-about-team-callout h2 {
  margin: 0 0 0.75rem !important;
  font-size: 1.1rem !important;
  color: #2c5e54 !important;
  font-weight: 700;
}
.entry-content .eg-about-team-callout p,
.eg-about-team-callout p {
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  color: #3a4a43 !important;
}

/* ---- 17i. Leopold blockquote (about page founder bio) ---- */
.entry-content .eg-about-leopold,
.eg-about-leopold {
  margin: 1.5rem 0 !important;
  padding: 1.4rem 1.6rem !important;
  background: #f8faf9;
  border-left: 3px solid #a5ccbc;
  border-radius: 6px;
  border-right: none;
  border-top: none;
  border-bottom: none;
}
.entry-content .eg-about-leopold p,
.eg-about-leopold p {
  margin: 0 0 0.6rem !important;
  font-size: 0.95rem !important;
  font-style: italic;
  line-height: 1.6 !important;
  color: #3a4a43 !important;
}
.entry-content .eg-about-leopold cite,
.eg-about-leopold cite {
  display: block;
  font-size: 0.82rem !important;
  font-style: normal;
  color: #6a7a72 !important;
  font-weight: 600;
}

/* ---- 17j. Pull quote visual break (about page) ---- */
aside.eg-pull-quote {
  max-width: 700px;
  margin: 3rem auto !important;
  padding: 2.5rem 2rem !important;
  text-align: center;
  background: linear-gradient(135deg, #f0f5f3 0%, #e6efea 100%);
  border-top: 3px solid #a5ccbc;
  border-bottom: 3px solid #a5ccbc;
  border-radius: 0;
}
aside.eg-pull-quote p,
.entry-content aside.eg-pull-quote p {
  margin: 0 !important;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem) !important;
  line-height: 1.45 !important;
  color: #2c5e54 !important;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
@media (max-width: 600px) {
  .eg-about-team-callout { padding: 1.25rem 1.4rem; }
  .eg-about-leopold { padding: 1.1rem 1.25rem; }
  aside.eg-pull-quote { padding: 2rem 1rem !important; margin: 2rem auto !important; }
}

/* ---- 18. About page — mobile polish ---- */
@media (max-width: 600px) {
  .eg-about-hero__image {
    margin-top: 1.2rem;
    border-radius: 10px;
  }
  .eg-about-block {
    margin-bottom: 2rem;
  }
  .eg-about-gallery {
    gap: 0.5rem;
  }
  .eg-about-founder__creds li {
    font-size: 0.88rem;
  }
}


/* ============================================================
   MY LISTS INSIDE MY ACCOUNT
   When the unified lists shortcode renders inside the WC My
   Account endpoint (not the standalone /my-lists/ page), the
   content column is narrower. Tighten the sub-nav so Shopping
   List / Wishlist / Buy Again fit cleanly without wrapping.
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content .eg-my-lists-container {
  max-width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content .eg-lists-tabs {
  gap: 4px;
}
.woocommerce-account .woocommerce-MyAccount-content .eg-list-tab {
  padding: 10px 12px;
  font-size: 14px;
}
.woocommerce-account .woocommerce-MyAccount-content .eg-list-tab .tab-emoji {
  font-size: 16px;
  margin-right: 4px;
}
@media (max-width: 860px) {
  .woocommerce-account .woocommerce-MyAccount-content .eg-lists-tabs {
    flex-direction: column;
    gap: 0;
    border-bottom: none;
  }
  .woocommerce-account .woocommerce-MyAccount-content .eg-list-tab {
    text-align: left;
    border-bottom: 1px solid #eee;
    border-left: 3px solid transparent;
    margin-bottom: 0;
    padding: 12px 15px;
  }
  .woocommerce-account .woocommerce-MyAccount-content .eg-list-tab.active {
    border-bottom-color: #eee;
    border-left-color: #2c5e54;
  }
}


/* ============================================================
   HOMEPAGE — three-department refinements (Grocery/Herbals/Essentials)
   Additive patch. Keeps the existing hero/section/card/product-row
   system; only adjusts the category grid to 3-up, adds the
   differentiator band, the produce calendar teaser, and the
   small Herbals secondary note.
   ============================================================ */

/* ---- Differentiator band (sits after stat band, before How It Works) ---- */
.eg-diff-band {
  max-width: 820px;
  margin: 0 auto 2.5rem;
  padding: 0 1.5rem;
  text-align: center;
}

.eg-diff-band__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #3a4a43;
  font-style: italic;
  border-top: 1px solid #d6e3dd;
  border-bottom: 1px solid #d6e3dd;
  padding: 1rem 0.5rem;
}

@media (max-width: 600px) {
  .eg-diff-band {
    padding: 0 1rem;
    margin-bottom: 1.75rem;
  }
  .eg-diff-band__text {
    font-size: 0.96rem;
    padding: 1rem 0.25rem;
  }
}


/* ---- Shop by Category: 3-card trio (Grocery | Herbals | Essentials) ---- */
.eg-cats-section .eg-cats--trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 0.5rem auto 0;
  padding: 0 1.5rem;
  max-width: 1240px;
  list-style: none;
}

/* Intro line above the 3 cards — overrides the default center-header
   subtitle width so the intro has room to breathe. */
.eg-cats-section .eg-cats__intro {
  max-width: 720px;
  margin: 0.6rem auto 0;
}

/* Small secondary note inside the Herbals card, below the main copy */
.eg-cats-section .eg-cat__note {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5a6b65;
  font-style: italic;
  padding-left: 0.7rem;
  border-left: 2px solid #cfe1d9;
}

/* Tablet: stack all 3 — avoids the orphan problem at 2-col */
@media (max-width: 1000px) {
  .eg-cats-section .eg-cats--trio {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    max-width: 560px;
  }
}


/* ---- Produce calendar teaser (inside Fresh + Local Right Now) ----
   Intentionally simple so activation is a one-line swap later:
     1. change #produce-calendar-link href to the live URL
     2. change the visible text from "Produce calendar coming soon →"
        to "Explore the produce calendar →"
*/
.eg-produce-cal {
  max-width: 760px;
  margin: 0 auto 1.75rem;
  padding: 1.1rem 1.4rem;
  background: #f5f9f6;
  border-left: 3px solid #a5ccbc;
  border-radius: 0 8px 8px 0;
  text-align: center;
}

.eg-produce-cal__text {
  margin: 0 0 0.5rem;
  font-size: 0.96rem;
  line-height: 1.55;
  color: #3a4a43;
}

.eg-produce-cal__cta {
  margin: 0;
  font-size: 0.92rem;
}

.eg-produce-cal__cta a {
  color: #2c5e54;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(44, 94, 84, 0.4);
}

.eg-produce-cal__cta a:hover {
  border-bottom-style: solid;
  border-bottom-color: #2c5e54;
}

@media (max-width: 600px) {
  .eg-produce-cal {
    padding: 1rem 1.1rem;
  }
  .eg-produce-cal__text {
    font-size: 0.92rem;
  }
}


/* ============================================================
   ABOUT PAGE v2 — editorial prose + restrained founder feature
   Additive patch. Intentionally uses a new class tree
   (.eg-about-prose-v2, .eg-about-founder-v2) so the old v1 rules
   keep working for any legacy paste-ins, but the new template
   gets a calmer, more editorial treatment:
     - fewer left-border motifs (one hero underline + one founder
       border; body headings are typographic only)
     - shop photo feature with two clearly-secondary supporting images
     - no per-photo captions
     - restrained shadows
   ============================================================ */


/* ---- Prose-v2 container + inner ---- */
.eg-about-prose-v2 {
  padding-top: 2.25rem;
  padding-bottom: 2.5rem;
}

.eg-about-prose-v2__inner {
  max-width: 760px;
  margin: 0 auto;
}

.eg-about-prose-v2__inner--narrow {
  max-width: 680px;
}

/* Body paragraph treatment — slightly more generous than default,
   no left-border. Uses .entry-content prefix so theme doesn't stomp. */
.entry-content .eg-about-prose-v2 p,
.eg-about-prose-v2 p,
.entry-content .eg-about-prose-v2__inner p,
.eg-about-prose-v2__inner p {
  margin: 0 0 1.1rem !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  color: #3a4a43 !important;
}

/* Opening lede — strong first paragraph. Hierarchy via color +
   weight, not size (per guide). Same 1.125rem as section text. */
.entry-content p.eg-about-prose-v2__lede,
p.eg-about-prose-v2__lede {
  font-size: 1.125rem !important;
  line-height: 1.55 !important;
  color: #2a3c35 !important;
  margin: 0 0 1rem !important;
  font-weight: 500;
}

/* Section headings inside prose-v2 — survey-style section header
   per design system: soft gradient band, 3px muted-sage left border,
   #2c5e54 text, 6px radius. Visible design element that tells the
   user "new beat starting" instead of a tiny floating label. */
.entry-content .eg-about-prose-v2__heading,
.eg-about-prose-v2__heading {
  display: block;
  font-size: 1rem !important;
  color: #2c5e54 !important;
  margin: 1.25rem 0 1rem !important;
  padding: 0.65rem 1rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  background: linear-gradient(135deg, #e8f5f3 0%, #dce8e4 50%, #e0eef0 100%);
  border-left: 3px solid #8aa79d;
  border-radius: 6px;
  line-height: 1.3;
}

/* Quieter variant — used for Partnerships so it sits calm, not
   shouty, but still uses the survey gradient pattern for family. */
.entry-content .eg-about-prose-v2__heading--quiet,
.eg-about-prose-v2__heading--quiet {
  font-size: 0.82rem !important;
  letter-spacing: 0.16em;
  color: #5a6b65 !important;
  padding: 0.5rem 0.85rem !important;
  margin: 0 0 0.75rem !important;
  background: #f5f9f6;
  border-left: 2px solid #a5ccbc;
  border-radius: 4px;
}

/* Transition paragraph — italic, slightly separated from the body flow */
.entry-content .eg-about-prose-v2__transition,
.eg-about-prose-v2__transition {
  font-style: italic;
  color: #4a5a53 !important;
  margin: 1.75rem 0 0 !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid #d6e3dd;
}


/* ---- Standards section — sage band wrapping the precautionary principle ---- */
.eg-about-standards {
  padding-top: 3rem;
  padding-bottom: 3.25rem;
}

.eg-about-standards .eg-section__header {
  margin-bottom: 1.75rem;
}

.eg-about-standards .eg-section__header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}


/* ---- Founder v2 — dominant shop photo + copy + small supporting photos ---- */
.eg-about-founder-v2-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Founder layout: primary photo on the left across both rows,
   bio in top-right, small supporting 2-up grid in bottom-right.
   Mobile stacks: bio → primary → secondary. */
.eg-about-founder-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-areas:
    "primary bio"
    "primary secondary";
  gap: 1.25rem 2rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.eg-about-founder-v2__primary { grid-area: primary; }
.eg-about-founder-v2__bio { grid-area: bio; }
.eg-about-founder-v2__secondary { grid-area: secondary; }

/* Supporting shop photo — capped at a reasonable size so it never
   dominates the page. */
.entry-content figure.eg-about-founder-v2__primary,
figure.eg-about-founder-v2__primary {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(44, 94, 84, 0.12);
  max-width: 100% !important;
  max-height: 420px;
  align-self: start;
}

.entry-content .eg-about-founder-v2__primary img,
.eg-about-founder-v2__primary img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 5;
  max-height: 420px;
  object-fit: cover;
  /* Anchor crop to the upper portion so her face stays visible
     when the portrait's 4:5 aspect gets cropped to a shorter
     landscape-ish ratio at mid-size viewports. */
  object-position: center 20%;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Bio column */
.eg-about-founder-v2__bio {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* H2 in the bio — one of the few places we keep a left-border in v2,
   because the founder is the visual anchor of the page. */
.entry-content .eg-about-founder-v2__bio h2,
.eg-about-founder-v2__bio h2 {
  margin: 0 0 0.75rem !important;
  font-size: 1.25rem !important;
  color: #2c5e54 !important;
  border-left: 4px solid #a5ccbc;
  padding-left: 0.9rem;
  line-height: 1.25;
  font-weight: 700;
}

.entry-content .eg-about-founder-v2__bio p,
.eg-about-founder-v2__bio p {
  margin: 0 0 1rem !important;
  line-height: 1.7 !important;
  color: #3a4a43 !important;
  font-size: 1rem !important;
}

/* One shared tagline — italic, sits between the heading and the body.
   This is the only shared caption-like treatment in the founder section. */
.entry-content p.eg-about-founder-v2__tagline,
p.eg-about-founder-v2__tagline {
  font-style: italic;
  color: #4a5a53 !important;
  font-size: 1.02rem !important;
  margin: 0 0 1.25rem !important;
  line-height: 1.55 !important;
}

/* Supporting photos — lab + nature, clearly smaller + more muted than
   the dominant shop photo. Desktop: 2-up strip beneath the copy, capped
   narrow so they read as secondary. Mobile: stacked, still narrow. */
.entry-content .eg-about-founder-v2__secondary,
.eg-about-founder-v2__secondary {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.75rem !important;
  margin: 1.25rem 0 0 !important;
  padding: 0 !important;
  max-width: 460px;
}

.entry-content .eg-about-founder-v2__secondary img,
.eg-about-founder-v2__secondary img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 !important;
  box-shadow: 0 3px 12px rgba(44, 94, 84, 0.08);
  /* Subtle tonal shift so they visually step back from the shop photo */
  filter: saturate(0.92);
}

@media (max-width: 900px) {
  /* Mobile/tablet: stack bio → primary → secondary so the user
     sees the heading + copy first, then the featured photo, then
     the small supporting photos. */
  .eg-about-founder-v2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "bio"
      "primary"
      "secondary";
    gap: 1rem;
    max-width: 620px;
  }
  .eg-about-founder-v2__primary {
    max-width: 72% !important;
    margin: 0 auto !important;
  }
  .entry-content figure.eg-about-founder-v2__primary,
  figure.eg-about-founder-v2__primary {
    max-height: 320px !important;
  }
  .entry-content .eg-about-founder-v2__primary img,
  .eg-about-founder-v2__primary img {
    aspect-ratio: 4 / 3;
    max-height: 320px !important;
    object-position: center 20%;
  }
  /* Secondary: smaller on mobile, 2-up strip centered under copy */
  .entry-content .eg-about-founder-v2__secondary,
  .eg-about-founder-v2__secondary {
    max-width: 360px !important;
    margin: 0.5rem auto 0 !important;
  }
}

/* Mobile: stack supporting photos vertically (no 2-up grid), keep
   them narrower than the dominant shop photo so they clearly read
   as secondary. */
@media (max-width: 560px) {
  .entry-content .eg-about-founder-v2__secondary,
  .eg-about-founder-v2__secondary {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    max-width: 320px;
    margin: 1rem auto 0 !important;
  }
  .entry-content .eg-about-founder-v2__secondary img,
  .eg-about-founder-v2__secondary img {
    aspect-ratio: 5 / 3;
  }
}


/* ---- Rooted-v2 — quiet, folded Omaha/compost beat ---- */
.eg-about-rooted-v2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.entry-content .eg-about-rooted-v2 p,
.eg-about-rooted-v2 p {
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  color: #4a5a53 !important;
  text-align: center;
  margin: 0 !important;
  padding: 1rem 0 !important;
  border-top: 1px solid #d6e3dd;
  border-bottom: 1px solid #d6e3dd;
}


/* ---- Affiliations v2 — calmer than v1, no left border ---- */
.eg-about-affiliations-v2 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.eg-about-affiliations-v2 .eg-about-prose-v2__inner {
  text-align: center;
}


/* ============================================================
   ABOUT PAGE — universal compaction + 2-col split blocks
   Grounded in design-system-prompt.md:
     - Reuse Library Survey is the template (compact, calm)
     - Section gap 1.5rem
     - Border-radius 6-12px
     - One decoration per element (not border + shadow + bg)
   ============================================================ */

/* Section-level: tighten padding on every about-page section */
.eg-about-hero,
.eg-about-intro-v2,
.eg-about-prose-v2,
.eg-about-refill-v2,
.eg-about-standards,
.eg-about-founder-v2-section,
.eg-about-affiliations-v2,
.eg-about-cta {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* Line-rhythm: every about-page paragraph. Size bumped from 1rem
   to 1.0625rem (17px) so prose reads comfortably without zoom. */
.entry-content .eg-about-prose-v2 p,
.entry-content .eg-about-refill-v2 p,
.entry-content .eg-about-standards p,
.entry-content .eg-about-split__copy p,
.entry-content .eg-about-wrap p,
.entry-content .eg-about-founder-v2__bio p,
.entry-content .eg-about-team-callout p,
.entry-content .eg-about-affiliations-v2 p {
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  margin: 0 0 0.75rem !important;
  color: #2a3c35 !important;
}

.entry-content .eg-about-prose-v2 p:last-child,
.entry-content .eg-about-refill-v2 p:last-child,
.entry-content .eg-about-standards p:last-child,
.entry-content .eg-about-split__copy p:last-child,
.entry-content .eg-about-founder-v2__bio p:last-child,
.entry-content .eg-about-team-callout p:last-child,
.entry-content .eg-about-affiliations-v2 p:last-child {
  margin-bottom: 0 !important;
}


/* ---- 2-col split blocks (Opening + Refill + Standards) ----
   Reusable pattern for sections that pair a photo with copy.
   Image one side, copy the other; --reverse flips the order.
   One decoration at a time (radius + subtle shadow, no border). */
.eg-about-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 2rem;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}

.eg-about-split--reverse .eg-about-split__figure {
  order: 1;
}

.eg-about-split--reverse .eg-about-split__copy {
  order: 2;
}

.entry-content figure.eg-about-split__figure,
figure.eg-about-split__figure {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(44, 94, 84, 0.08);
  max-height: 360px;
  max-width: 100% !important;
}

.entry-content .eg-about-split__figure img,
.eg-about-split__figure img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 3;
  max-height: 360px;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 !important;
}

.eg-about-split__copy {
  min-width: 0;
}

/* Lede paragraph inside an opening split block — stronger than
   body but not a decorative callout box. */
.entry-content .eg-about-split__copy p.eg-about-prose-v2__lede,
.eg-about-split__copy p.eg-about-prose-v2__lede {
  font-size: 1.1rem !important;
  line-height: 1.55 !important;
  color: #2a3c35 !important;
  margin: 0 !important;
}

/* Transition paragraph inside the refill split block — italic,
   no top border (the border looked odd when it only spanned the
   copy column). */
.entry-content .eg-about-split__copy .eg-about-prose-v2__transition,
.eg-about-split__copy .eg-about-prose-v2__transition {
  border-top: none !important;
  padding-top: 0.5rem !important;
  margin-top: 0.75rem !important;
}

@media (max-width: 760px) {
  .eg-about-split,
  .eg-about-split--reverse {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .eg-about-split--reverse .eg-about-split__figure { order: 0; }
  .eg-about-split--reverse .eg-about-split__copy { order: 0; }
  .entry-content figure.eg-about-split__figure,
  figure.eg-about-split__figure {
    max-height: 280px;
  }
  .entry-content .eg-about-split__figure img,
  .eg-about-split__figure img {
    aspect-ratio: 16 / 10;
    max-height: 280px;
  }
}


/* ---- Founder section compaction (reduce gap above/below so it
   doesn't balloon the section height) ---- */
.eg-about-founder-v2 {
  gap: 2rem !important;
}

.entry-content .eg-about-founder-v2__bio h2,
.eg-about-founder-v2__bio h2 {
  margin-bottom: 0.5rem !important;
}

.entry-content p.eg-about-founder-v2__tagline,
p.eg-about-founder-v2__tagline {
  margin-bottom: 0.85rem !important;
}


/* ---- Team callout compaction ---- */
.entry-content .eg-about-team-callout,
.eg-about-team-callout {
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.entry-content .eg-about-team-callout h2,
.eg-about-team-callout h2 {
  margin-bottom: 0.4rem !important;
}


/* ---- Hero padding (tighter — centered H1 doesn't need much air) ---- */
.eg-about-hero--text {
  padding: 2rem 1.5rem !important;
  margin-bottom: 0 !important;
}


/* ---- .eg-about-wrap — float-based text wrap pattern ----
   Used on sections where the body has multiple paragraphs and a
   single supporting photo. The photo floats right (or left) and
   text flows naturally around and below it. On mobile, float is
   removed and the image flows inline with the copy (never at
   full width before the heading). */
.eg-about-wrap {
  max-width: 1040px;
  margin: 0 auto;
}

.eg-about-wrap::after {
  content: "";
  display: table;
  clear: both;
}

.entry-content figure.eg-about-wrap__figure,
figure.eg-about-wrap__figure {
  margin: 0.35rem 0 1rem 1.5rem !important;
  padding: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(44, 94, 84, 0.1);
  width: 40%;
  max-width: 420px;
  max-height: 340px;
  font-size: 0;
  line-height: 0;
}

/* Kill WP-inserted <br> tags inside about-page figures — they
   add phantom line-height below images and create a bubble /
   line-underneath effect that looks broken. */
.eg-about-wrap__figure br,
.eg-about-founder-v2__primary br,
.eg-about-founder-v2__secondary br {
  display: none !important;
}

.eg-about-wrap__figure--left {
  float: left;
  margin: 0.35rem 1.5rem 1rem 0 !important;
}

.eg-about-wrap__figure--right {
  float: right;
}

.entry-content .eg-about-wrap__figure img,
.eg-about-wrap__figure img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0 !important;
  max-height: 340px;
}

@media (max-width: 720px) {
  .entry-content figure.eg-about-wrap__figure,
  .entry-content figure.eg-about-wrap__figure--left,
  .entry-content figure.eg-about-wrap__figure--right,
  figure.eg-about-wrap__figure,
  figure.eg-about-wrap__figure--left,
  figure.eg-about-wrap__figure--right {
    float: none !important;
    width: 75% !important;
    max-width: 75% !important;
    margin: 0.5rem auto 1rem !important;
    max-height: 240px;
  }
  .entry-content .eg-about-wrap__figure img,
  .eg-about-wrap__figure img {
    aspect-ratio: 16 / 10;
    max-height: 240px;
  }
}


/* ---- Defensive founder-secondary grid ----
   WordPress block editor often converts raw <img> tags nested in
   a <div> into separate .wp-block-image figures, breaking my
   inner-div grid. This rule targets the founder section directly
   and uses :has() to find the photo-pair wrapper regardless of
   whether WP kept the original class. */
.eg-about-founder-v2-section div:has(> img + img),
.eg-about-founder-v2-section div:has(> figure.wp-block-image + figure.wp-block-image),
.eg-about-founder-v2__bio > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.75rem !important;
  max-width: 460px !important;
  margin: 1.25rem 0 0 !important;
  padding: 0 !important;
}

/* Also target when WP wraps each img in its own wp-block-image
   figure — normalize both figures to grid cells with single shadow,
   no extra margin. */
.eg-about-founder-v2-section figure.wp-block-image {
  margin: 0 !important;
  padding: 0 !important;
}

.eg-about-founder-v2-section figure.wp-block-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 12px rgba(44, 94, 84, 0.08) !important;
  filter: saturate(0.92) !important;
}


/* ---- Sage sections as rounded cards (match image corner radius) ----
   Previously the sage sections bled to the viewport edge with sharp
   corners. That felt disconnected from the 12px rounded photos they
   contain. Now they're rounded cards, max-width'd, visually matched
   to the photos they sit next to. */
.eg-about-standards,
.eg-about-affiliations-v2 {
  max-width: 1060px !important;
  margin: 1rem auto !important;
  padding: 1.75rem !important;
  border-radius: 12px !important;
  background: #e8f0ed !important;
  border: none !important;
}


/* ---- CTA compaction ---- */
.eg-about-cta {
  padding-bottom: 2.5rem !important;
}

.eg-about-cta__prompt {
  margin: 0 0 0.85rem !important;
}


/* ============================================================
   HOMEPAGE — hero sits below the sticky header stack
   Genesis + compact-header add ~164px of fixed header chrome
   (announcement 32 + top bar 25 + site-header 107). Previously
   we killed all wrapper padding to close a gap — but that pushed
   the hero UP behind the fixed headers. Let Genesis handle the
   natural header-reserve, we only tighten the gap between the
   wrapper and the hero section itself.
   ============================================================ */
body.home .entry-content,
body.home article.entry,
body.home .entry {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.home .eg-hero {
  margin-top: 0 !important;
}

/* Full-bleed sections: the site-inner wrapper has ~12px of
   horizontal padding on mobile/tablet that insets every direct
   child. Break out the hero AND every sage-banded section with
   negative margin + 100vw width so they reach viewport edges
   at every screen size. Scoped to body.home so only the homepage
   gets the edge-to-edge treatment. */
body.home .eg-hero,
body.home .eg-trust-badges,
body.home .eg-section--sage {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Defensive: WordPress wpautop wraps HTML comments and stray
   whitespace into empty <p> tags that each take up ~30px of
   vertical space. Kill any empty paragraphs and paragraphs that
   contain ONLY whitespace in the homepage content flow. */
body.home .entry-content > p:empty,
body.home .entry-content > p:blank {
  display: none !important;
}


/* ============================================================
   HOMEPAGE — universal viewport-fit compaction
   Core principle: every section should be scannable in one
   viewport at normal zoom, AND the rhythm between lines/paragraphs
   should feel tight-editorial, not airy. This is a global bound.
   Specific sections can override upward if they genuinely need it.
   ============================================================ */

/* Section-level padding + header margins + footer links */
body.home .eg-section {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

body.home .eg-section__header {
  margin-bottom: 0.75rem;
}

body.home .eg-section__footer-link {
  margin-top: 0.5rem;
}

/* Paragraph + line rhythm: tighten line-height and between-line
   spacing across ALL homepage prose. Individual sections can
   re-loosen if they need editorial breathing room. */
body.home .eg-section p,
body.home .eg-section li,
body.home .eg-section h1,
body.home .eg-section h2,
body.home .eg-section h3 {
  line-height: 1.45;
}

body.home .eg-section p {
  margin-bottom: 0.6rem;
}

body.home .eg-section p:last-child {
  margin-bottom: 0;
}

/* Stat + differentiator bands — pack into the vertical rhythm
   without adding extra margin on top of their parent section. */
body.home .eg-stat-band {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.85rem 1.5rem;
}

body.home .eg-stat-band__lead {
  margin-bottom: 0.35rem;
}

body.home .eg-stat-band__source {
  margin-top: 0.4rem;
}

body.home .eg-diff-band {
  margin-bottom: 0.75rem;
}

body.home .eg-diff-band__text {
  padding: 0.9rem 0.5rem;
  line-height: 1.55;
}

/* Founder + Visit — sections where photo + copy share a row.
   Already tightened in their own blocks; pin the upper bound
   here so nothing balloons them. */
body.home .eg-founder-section,
body.home .eg-visit-section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Story block (Fresh + Local intro): restore slightly more
   line-height so the editorial prose is still readable, since
   the global rule above snapped it to 1.45. */
body.home .eg-story__lead,
body.home .eg-story__aside {
  line-height: 1.55;
}

/* Testimonial quote wants a touch more breathing room than the
   rest of the homepage to read as a real pullquote. */
body.home .eg-testimonials__quote {
  line-height: 1.5;
}


/* ============================================================
   HOMEPAGE — diff-band link (see our core values →)
   Small arrow link sits under the italic differentiator prose,
   centered, muted green, matching the .eg-link--arrow pattern.
   ============================================================ */
.eg-diff-band__link {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.92rem;
}

.eg-diff-band__link a {
  color: #2c5e54;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(44, 94, 84, 0.3);
}

.eg-diff-band__link a:hover {
  border-bottom-color: #2c5e54;
}


/* ============================================================
   HOMEPAGE — "How the Store is Organized" (3-col variant)
   Replaces the previous 4-step "How It Works" that duplicated
   the /how-to-refill/ page. This is orientation only (3
   departments) with a single footer link pointing to the
   refill page for procedure.

   .eg-steps--three overrides the default 4-col step grid and
   the .eg-step__num "Step 0" ::before label (which would break
   the single-emoji department icons used here).
   ============================================================ */
.eg-steps--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2.25rem;
}

.eg-steps--three .eg-step__num {
  display: block;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: #2c5e54;
  margin: 0 0 0.55rem;
}

/* Kill the "Step 0" label on this variant — we use a real emoji. */
.eg-steps--three .eg-step__num::before {
  content: none;
}

.eg-steps__footer-link {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.95rem;
}

.eg-steps__footer-link a {
  color: #2c5e54;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(44, 94, 84, 0.3);
}

.eg-steps__footer-link a:hover {
  border-bottom-color: #2c5e54;
}

@media (max-width: 800px) {
  .eg-steps--three {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}


/* ---- Stat band CTA button (how refilling works) ----
   Sits right below the stat/source lines inside the stat band.
   Uses the mint-gradient button style; centered. */
.eg-stat-band__cta {
  margin: 0.75rem 0 0 !important;
  text-align: center;
}

.eg-stat-band__cta .eg-btn {
  font-size: 0.88rem;
  padding: 0.55rem 1rem;
}


/* ---- Trust badges (below hero) ----
   Subtle pill badges that wrap naturally across any viewport.
   Centered with even gaps on every row so wrapping looks
   intentional — not scrolled, not cut off, not button-like.
   Very light chrome (muted sage tint, hairline border) so they
   read as trust markers alongside the hero content. */
.eg-trust-badges {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e3ece8;
  background: transparent;
}

.eg-trust-badges__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem 0.6rem;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
}

.eg-trust-badges__item {
  display: inline-block;
  padding: 0.35rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #3a4a43;
  background: #f5f9f6;
  border: 1px solid #dee8e3;
  border-radius: 999px;
  line-height: 1.35;
  letter-spacing: 0.005em;
  white-space: nowrap;
  list-style: none;
}

@media (max-width: 600px) {
  .eg-trust-badges {
    padding: 0.85rem 1rem;
  }
  .eg-trust-badges__list {
    gap: 0.4rem 0.5rem;
  }
  .eg-trust-badges__item {
    font-size: 0.76rem;
    padding: 0.3rem 0.75rem;
  }
}


/* ============================================================
   EARTHIES PAGE — protect from site-wide class collisions

   The Earthies template reuses class names (.eg-hero, .eg-section,
   .eg-section__header, .eg-btn, etc.) that have different meanings
   on the homepage + other pages. The template's inline <style>
   block scopes its own rules, but site-wide rules loaded from
   customizer-styles.css (especially .eg-hero { background: #000 }
   from the full-bleed collage hero) leak in and break the layout.

   This block scopes AWAY the homepage rules when those class names
   appear inside .earthies-program. All rules use the .earthies-
   program prefix so specificity beats the un-prefixed homepage
   rules. No template markup changes required.
   ============================================================ */

/* Hero: not a photo collage, shouldn't have black bg, no overflow */
.earthies-program .eg-hero {
  position: static !important;
  background: transparent !important;
  overflow: visible !important;
  padding: 0.5rem 0 1.5rem !important;
  min-height: 0 !important;
  color: #222 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  text-align: center !important;
}

.earthies-program .eg-hero h1 {
  color: #2c5e54 !important;
  font-size: 2.1rem !important;
  margin: 0 0 0.5rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.earthies-program .eg-hero__tag {
  font-style: italic !important;
  color: #555 !important;
  font-size: 1.02rem !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Sections on this page: card treatment, not full-bleed or
   product-row treatment. Neutralize any inherited section rules. */
.earthies-program .eg-section {
  max-width: none !important;
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
  background: #f8fafb !important;
  border: 1px solid #d3d6da !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  width: auto !important;
}

/* Section header band stays inside the card, gradient backdrop */
.earthies-program .eg-section__header {
  margin: 0 !important;
  padding: 0.9rem 1.5rem !important;
  background: linear-gradient(135deg, #e8f5f3 0%, #dce8e4 50%, #e0eef0 100%) !important;
  border-left: 3px solid #8aa79d !important;
  color: #2c5e54 !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
  text-align: left !important;
  display: block !important;
  border-bottom: none !important;
}

.earthies-program .eg-section__header::after {
  display: none !important;
}

.earthies-program .eg-section__body {
  padding: 1.1rem 1.5rem 1.25rem !important;
}

/* Buttons: let the inline style block own them, but cancel the
   width: 100% from the homepage button hover rule and any weird
   float/flex from the product-card rules. */
.earthies-program .eg-btn {
  width: auto !important;
  float: none !important;
  clear: none !important;
}

/* Lists in Earthies cards should NOT inherit product-row / site
   list-style resets that strip padding and cause text-flush-left
   bugs. They manage their own padding via the template <style>. */
.earthies-program ul,
.earthies-program ul li {
  padding-left: revert;
  margin-left: revert;
  list-style: none;
}

.earthies-program .eg-earn-list,
.earthies-program .eg-earn-list li,
.earthies-program .eg-reward-tiers,
.earthies-program .eg-reward-tiers li,
.earthies-program .earthies-checklist,
.earthies-program .earthies-checklist li,
.earthies-program .earthies-social-links,
.earthies-program .earthies-social-links li {
  list-style: none !important;
}

/* The default blockquote::before/::after decorative mint quotes
   don't apply here (no blockquotes), but if any generic paragraph
   pseudo-element from elsewhere leaks in, kill it. */
.earthies-program .eg-section__body p::before,
.earthies-program .eg-section__body p::after {
  content: none !important;
}