/** Shopify CDN: Minification failed

Line 609:75 Expected ":"
Line 613:7 Unexpected "\"dim the static fallback on item 1\""

**/
/* =====================================================================
   gm-contentpages2.css — combined stylesheet for GreenMethods Shopify
   =====================================================================
   FILE LAYOUT
     PART 1 — Product pages   (.gm-page-root .gm-*)
              Andersoni, AMBLYforce, CHRYSOforce, CRYPTOforce, Feltiella, …
     PART 2 — Learn pages     (.gm-edt-*)
              Intro, History, Starting Out, Scouting, Selling, …
     PART 3 — Per-page :target TOC highlight rules
              One block per Learn page — append a new block per page.

   DEPLOYMENT
     Every selector that affects layout is scoped to .gm-page-root or
     .gm-edt-root (or body:has() of those), so this file is safe to
     load on pages that don't use either wrapper.

   COLOR / SPACING SYSTEM
     All colors come from the CSS variables defined inside .gm-page-root
     (see PART 1 head). To change the entire brand color set in one place
     edit those vars. PART 2 currently uses raw hex values matching the
     same palette — if you want PART 2 to also follow the vars, move the
     :root color block out of .gm-page-root into :root scope.
   ===================================================================== */


/* =====================================================================
   PART 1 — Product-page rules (.gm-page-root .gm-*)
   ===================================================================== */

/* ---------- Color & spacing tokens for product pages -----------------
   Brand palette. Change a value here → the whole product page updates.
   --gm-bg            page background
   --gm-card-bg       card surfaces
   --gm-ink           main text
   --gm-green-*       greens (deepest=darkest, light=lightest)
   --gm-amber, clay   accent colors used for callouts and badges
   --gm-cannabis-*    Cannabis Alert callout colors (override per state)
   --------------------------------------------------------------------- */
.gm-page-root{
  --gm-green-deepest:#2e3d2f;
  --gm-green-dark:#3f5240;
  --gm-green:#5a6c57;
  --gm-green-mid:#689374;
  --gm-green-light:#85a98f;
  --gm-sage-bg:#eaf0e2;
  --gm-sage-soft:#f5f7f2;
  --gm-cream:#fbf8ef;
  --gm-olive:#8a8b1f;
  --gm-olive-deep:#667011;
  --gm-amber:#c9a227;
  --gm-amber-light:#fcecb6;
  --gm-clay:#b35932;
  --gm-clay-light:#f6e2d6;
  --gm-ink:#15181a;
  --gm-ink-2:#384038;
  --gm-muted:#6e7669;
  --gm-rule:#dee3d6;
  --gm-bg:#faf9f1;
  --gm-card-bg:#ffffff;
  --gm-cannabis-bg:#fdf6d6;
  --gm-cannabis-border:#c9a227;
  --gm-cannabis-ink:#5a4500;
}
.gm-page-root *{box-sizing:border-box}

/* ---------- Shopify page-title (H1) — viewport-wide breakout ---------
   The Shopify theme renders the page Title above the body content. We
   override its styling so the title visually aligns with the content
   cards underneath instead of using the theme's default treatment.

   HOW THE SCOPING WORKS
     body:has(.gm-page-root, .gm-edt-root)
       Only fires on a page whose body contains one of our wrappers.
       Means this rule never affects unrelated pages (home, catalog, …).
     :not(:is(.gm-page-root, .gm-edt-root, .gm-gt-root) *)
       Excludes H1s that sit INSIDE our wrappers (e.g. a "Our Top X"
       featured-products widget inside the page body). Only the Shopify-
       rendered page title H1 above the body is affected.

   HORIZONTAL ALIGNMENT — controlled by --gm-title-w
     Product pages → 1124px (matches .gm-page inner content after its
                              28px internal padding)
     Learn pages   → theme's --max-width--body-normal (auto-matches
                              whatever container width the theme uses)
     To NUDGE alignment: change 1124px on the product-pages line below.
     Bigger value = title moves further LEFT.
     Smaller value = title moves further RIGHT.
   --------------------------------------------------------------------- */
body:has(.gm-page-root){ --gm-title-w: 1144px; }
body:has(.gm-edt-root) { --gm-title-w: 1144px; }
body:has(.gm-gt-root)  { --gm-title-w: 1144px; }

body:has(.gm-page-root) main h1:not(:is(.gm-page-root, .gm-edt-root, .gm-gt-root) *),
body:has(.gm-edt-root)  main h1:not(:is(.gm-page-root, .gm-edt-root, .gm-gt-root) *),
body:has(.gm-gt-root)   main h1:not(:is(.gm-page-root, .gm-edt-root, .gm-gt-root) *){
  display:block !important;
  /* ----- font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important; ---- */
  font-weight:800 !important;       /* title weight — 700/800/900 */
  font-size:40px !important;        /* desktop title size */
  line-height:1.15 !important;
  letter-spacing:-.025em !important;
  color:#2e3d2f !important;         /* title color */
  font-style:normal !important;
  width:100vw !important;           /* breakout to viewport (do not change) */
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;   /* negative margin escapes parent container */
  margin-right:calc(50% - 50vw) !important;
  margin-top:-17px !important;      /* space above title */
  margin-bottom:-4px !important;     /* gap to subtitle/lede below */
  padding-left:max(28px, calc((100vw - var(--gm-title-w, 1124px)) / 2)) !important;
  padding-right:max(28px, calc((100vw - var(--gm-title-w, 1124px)) / 2)) !important;
  text-align:left !important;
  white-space:nowrap !important;    /* keep on one line; ellipsis if too long */
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  box-sizing:border-box !important;
}
/* Accent <em> inside the title — italic green pop. */
body:has(.gm-page-root) main h1:not(:is(.gm-page-root, .gm-edt-root, .gm-gt-root) *) em,
body:has(.gm-edt-root)  main h1:not(:is(.gm-page-root, .gm-edt-root, .gm-gt-root) *) em,
body:has(.gm-gt-root)   main h1:not(:is(.gm-page-root, .gm-edt-root, .gm-gt-root) *) em{
  font-style:italic !important;
  color:#689374 !important;         /* accent color */
  font-weight:500 !important;
  font-size:.62em !important;       /* relative to title size */
  letter-spacing:0 !important;
}
/* Mobile — title shrinks, allows multi-line wrap. */
@media (max-width:680px){
  body:has(.gm-page-root) main h1:not(:is(.gm-page-root, .gm-edt-root, .gm-gt-root) *),
  body:has(.gm-edt-root)  main h1:not(:is(.gm-page-root, .gm-edt-root, .gm-gt-root) *){
    font-size:26px !important;      /* mobile title size */
    padding-left:16px !important;
    padding-right:16px !important;
    margin-top:20px !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  body:has(.gm-page-root) main h1:not(:is(.gm-page-root, .gm-edt-root, .gm-gt-root) *) em,
  body:has(.gm-edt-root)  main h1:not(:is(.gm-page-root, .gm-edt-root, .gm-gt-root) *) em{
    font-size:.6em !important;
    display:inline-block !important;
  }
}

/* ---------- .gm-page-root wrapper — viewport breakout for content ----
   Same trick as the title: width:100vw + negative margins to escape
   Shopify's narrow page-body container. The inner .gm-page (below) re-
   centers content at a sensible reading width.
   Sets the base typography for product pages (Inter, 16.5px, 1.7).   */
.gm-page-root{
  width:100vw !important;
  max-width:100vw !important;
  position:relative !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  text-align:left !important;
  background:var(--gm-bg);
  color:var(--gm-ink);
  /* ----- font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important; ---- */
  line-height:1.7;
  font-size:16.5px;                 /* base body font size */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.gm-page-root *{text-align:inherit}

/* ---------- Inner page container (1180px centered) -------------------
   max-width controls the content column width on product pages.
   If you change 1180px here, also bump --gm-title-w above to match
   (--gm-title-w = max-width - 2 * padding-left  e.g. 1180-56 = 1124). */
.gm-page-root .gm-page{
  max-width:1200px !important;      /* content column width */
  margin:0 auto !important;
  padding:24px 28px 80px !important;/* top, sides, bottom — sides = 28 */
  width:auto !important;
}
@media (max-width:680px){
  .gm-page-root .gm-page{padding:22px 16px 60px !important}
}

/* ---------- Section card (.gm-sec) -----------------------------------
   The white rounded card that wraps each numbered section.
   - .gm-sec-num     numbered badge (top-left of card head)
   - .gm-sec-title   section title text
   - color variants: .gm-sec-green / -amber / -clay / -deep change the
     numbered-badge gradient. Add a new variant by copying one and
     swapping the two gradient stops. */
.gm-page-root .gm-sec{margin:0 0 22px;background:var(--gm-card-bg);border:1px solid var(--gm-rule);border-radius:12px;padding:24px 26px;box-shadow:0 1px 3px rgba(20,30,15,.04);display:flow-root}
.gm-page-root .gm-sec-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--gm-rule)}
.gm-page-root .gm-sec-num{flex-shrink:0;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:17px;color:#fff;line-height:1;letter-spacing:.02em}
.gm-page-root .gm-sec-green .gm-sec-num{background:linear-gradient(135deg,var(--gm-green-mid),var(--gm-green-dark))}
.gm-page-root .gm-sec-amber .gm-sec-num{background:linear-gradient(135deg,var(--gm-amber),var(--gm-olive-deep))}
.gm-page-root .gm-sec-clay  .gm-sec-num{background:linear-gradient(135deg,var(--gm-clay),#7a3a1f)}
.gm-page-root .gm-sec-deep  .gm-sec-num{background:linear-gradient(135deg,var(--gm-green-dark),var(--gm-green-deepest))}
.gm-page-root .gm-sec-title{font-weight:800;font-size:22px;color:var(--gm-ink);margin:0;line-height:1.2;letter-spacing:-.015em}
.gm-page-root .gm-sec p{margin:0 0 12px;color:var(--gm-ink-2);text-align:left;hyphens:auto;-webkit-hyphens:auto}
.gm-page-root .gm-sec a{color:var(--gm-green-dark);text-decoration:underline;text-decoration-color:var(--gm-amber);text-underline-offset:2px;text-decoration-thickness:1.5px}
.gm-page-root .gm-sec a:hover{color:var(--gm-clay);text-decoration-color:var(--gm-clay)}
.gm-page-root .gm-sec-sub{font-size:13px;font-weight:700;color:var(--gm-green-dark);margin:18px 0 6px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:680px){
  .gm-page-root .gm-sec{padding:18px 18px}
  .gm-page-root .gm-sec-title{font-size:20px}
  .gm-page-root .gm-sec-num{width:36px;height:36px;font-size:15px}
}

/* ---------- Grid-based image layout ----------------------------------
   Two-column grid inside a section card: text on the left (flexible),
   image on the right (fixed 380px). Change 380px to resize the image
   column; switch the two values to swap sides.
   Stacks to single column under 680px. */
.gm-page-root .gm-sec-body{
  display:grid !important;
  grid-template-columns:1fr 380px !important;  /* text | image */
  gap:28px !important;
  align-items:start !important;
}
.gm-page-root .gm-sec-body > .gm-sec-text{min-width:0}
.gm-page-root .gm-sec-body > figure,
.gm-page-root .gm-sec-body > .gm-fig{
  margin:0 !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  position:static !important;
}
@media (max-width:680px){
  .gm-page-root .gm-sec-body{grid-template-columns:1fr !important;gap:14px !important}
}

/* ---------- Image frame + caption ------------------------------------
   .gm-ph-wrap is the rounded image container.
   figcaption is the yellow-bar caption below it. */
.gm-page-root .gm-ph-wrap{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--gm-rule);box-shadow:0 4px 10px rgba(20,30,15,.06);width:100% !important;max-width:100% !important}
.gm-page-root .gm-ph-wrap img{display:block !important;width:100% !important;max-width:100% !important;height:auto !important;margin:0 !important;border-radius:0 !important}
.gm-page-root .gm-sec figcaption{font-size:13px;color:var(--gm-ink-2);line-height:1.5;margin-top:8px;padding:5px 10px;border-left:3px solid var(--gm-amber);background:linear-gradient(90deg,rgba(252,236,182,.25),transparent);text-align:left}
.gm-page-root .gm-sec figcaption em{font-style:normal;color:var(--gm-ink);font-weight:500}

/* ---------- Chip lists ---------------------------------------------
   Rounded pill labels — used for "targets" lists and environment tags.
   .gm-chip-env uses the amber palette instead of sage. */
.gm-page-root .gm-chip-list{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.gm-page-root .gm-chip{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--gm-sage-bg);color:var(--gm-green-dark);border:1px solid var(--gm-green-light)}
.gm-page-root .gm-chip-env{background:var(--gm-amber-light);color:var(--gm-olive-deep);border-color:var(--gm-amber)}

/* ---------- Instructions stages -------------------------------------
   Three coloured info blocks for a Prevent → Active → After workflow.
   Auto-styled by position: 1st = sage, 2nd = cream/amber, 3rd = sage-deep.
   If you reorder them, the colors will swap — that's intentional. */
.gm-page-root .gm-ins-block{margin:6px 0 0}
.gm-page-root .gm-ins-stage{margin:0 0 10px;padding:12px 16px;background:var(--gm-sage-soft);border-left:4px solid var(--gm-green-mid);border-radius:0 8px 8px 0}
.gm-page-root .gm-ins-stage h3{font-size:13px;font-weight:700;color:var(--gm-green-dark);margin:0 0 6px;text-transform:uppercase;letter-spacing:.08em}
.gm-page-root .gm-ins-stage p{font-size:14px;margin:0 0 6px;color:var(--gm-ink-2);text-align:left;hyphens:auto;-webkit-hyphens:auto;line-height:1.6}
.gm-page-root .gm-ins-stage p:last-child{margin-bottom:0}
.gm-page-root .gm-ins-stage:nth-child(2){background:var(--gm-cream);border-left-color:var(--gm-amber)}
.gm-page-root .gm-ins-stage:nth-child(2) h3{color:var(--gm-olive-deep)}
.gm-page-root .gm-ins-stage:nth-child(3){background:var(--gm-sage-bg);border-left-color:var(--gm-green-dark)}
.gm-page-root .gm-ins-stage:nth-child(3) h3{color:var(--gm-green-deepest)}

/* ---------- Two-column Monitoring / Advisories cards -----------------
   .gm-tc-mon = monitoring (sage/green pill)
   .gm-tc-adv = advisories (clay/red pill)
   Stacks to one column under 680px. */
.gm-page-root .gm-twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 0}
.gm-page-root .gm-tc{background:#fff;border:1px solid var(--gm-rule);border-radius:10px;padding:16px}
.gm-page-root .gm-tc-lbl{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:6px}
.gm-page-root .gm-tc-mon .gm-tc-lbl{color:var(--gm-green-dark);background:var(--gm-sage-bg)}
.gm-page-root .gm-tc-adv .gm-tc-lbl{color:var(--gm-clay);background:var(--gm-clay-light)}
.gm-page-root .gm-tc-lbl::before{content:"";width:9px;height:9px;border-radius:50%;flex-shrink:0}
.gm-page-root .gm-tc-mon .gm-tc-lbl::before{background:var(--gm-green-mid)}
.gm-page-root .gm-tc-adv .gm-tc-lbl::before{background:var(--gm-clay)}
.gm-page-root .gm-tc ul{margin:0;padding:0;list-style:none}
.gm-page-root .gm-tc li{font-size:13.5px;color:var(--gm-ink-2);padding:5px 0 5px 18px;position:relative;line-height:1.55;text-align:left;hyphens:auto;-webkit-hyphens:auto}
.gm-page-root .gm-tc li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--gm-amber)}
.gm-page-root .gm-tc-adv li::before{background:var(--gm-clay)}
@media (max-width:680px){.gm-page-root .gm-twocol{grid-template-columns:1fr}}

/* ---------- Release-rate table --------------------------------------
   Dark-green header, zebra rows. .gm-pill spans show preventative /
   active / curative dosage labels:
     .gm-pill-prev (sage/green), -act (amber), -cut (clay).
   Mobile transform to cards lives at the bottom of PART 1. */
.gm-page-root .gm-table-wrap{margin:12px 0 0;clear:both}
.gm-page-root .gm-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;border:1px solid var(--gm-rule);border-radius:10px;overflow:hidden}
.gm-page-root .gm-table thead th{background:linear-gradient(180deg,var(--gm-green-dark),var(--gm-green));color:#fff;text-align:left;padding:10px 12px;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.gm-page-root .gm-table tbody td{padding:10px 12px;border-top:1px solid var(--gm-rule)}
.gm-page-root .gm-table tbody tr:nth-child(even) td{background:var(--gm-sage-soft)}
.gm-page-root .gm-table tbody tr td:first-child{font-weight:700;color:var(--gm-green-dark)}
.gm-page-root .gm-pill{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;margin-left:6px;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px}
.gm-page-root .gm-pill-prev{background:var(--gm-sage-bg);color:var(--gm-green-dark)}
.gm-page-root .gm-pill-act{background:var(--gm-amber-light);color:var(--gm-olive-deep)}
.gm-page-root .gm-pill-cut{background:var(--gm-clay-light);color:var(--gm-clay)}
.gm-page-root .gm-table tfoot th{background:#fff;color:var(--gm-muted);text-align:left;padding:12px 14px;font-weight:500;font-size:12.5px;line-height:1.55;border-top:2px solid var(--gm-green-dark);font-style:italic}

/* ---------- Cannabis Alert callout ----------------------------------
   Amber-bordered warning block used on cannabis-relevant products. */
.gm-page-root .gm-cannabis{margin:16px 0 0;background:linear-gradient(135deg,#fcecb6,#fdf6d6 65%,#fff8df);border:2px solid var(--gm-cannabis-border);border-radius:12px;padding:14px 16px;box-shadow:0 4px 14px rgba(201,162,39,.18);clear:both;position:relative}
.gm-page-root .gm-cannabis-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.gm-page-root .gm-cannabis-flag{width:26px;height:26px;border-radius:6px;background:var(--gm-clay);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;box-shadow:0 3px 8px rgba(179,89,50,.35);flex-shrink:0}
.gm-page-root .gm-cannabis h3{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gm-cannabis-ink);margin:0}
.gm-page-root .gm-cannabis p{font-size:14px;line-height:1.55;color:var(--gm-ink-2);margin:0;padding-left:36px;text-align:left}
.gm-page-root .gm-cannabis p a{color:var(--gm-clay);font-weight:700}

/* ---------- Life-cycle timeline -------------------------------------
   Four-step horizontal timeline with a colored connector line under-
   neath. The 4 dot colors are auto-set by :nth-child position. To add
   more steps, change `repeat(4,1fr)` and add nth-child rules below. */
.gm-page-root .gm-timeline{position:relative;margin:14px 0 4px;padding:18px 8px 4px;clear:both}
.gm-page-root .gm-timeline::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:3px;background:linear-gradient(90deg,var(--gm-green-mid),var(--gm-amber),var(--gm-clay))}
.gm-page-root .gm-tl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative;z-index:1}
.gm-page-root .gm-tl-step{text-align:center}
.gm-page-root .gm-tl-dot{width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid var(--gm-green-mid);margin:0 auto 8px;display:grid;place-items:center;font-weight:800;color:var(--gm-green-dark);font-size:14px;line-height:1;box-shadow:0 3px 8px rgba(20,30,15,.08)}
.gm-page-root .gm-tl-step:nth-child(2) .gm-tl-dot{border-color:var(--gm-olive)}
.gm-page-root .gm-tl-step:nth-child(3) .gm-tl-dot{border-color:var(--gm-amber)}
.gm-page-root .gm-tl-step:nth-child(4) .gm-tl-dot{border-color:var(--gm-clay)}
.gm-page-root .gm-tl-name{font-weight:700;font-size:13px;color:var(--gm-ink);margin-bottom:1px}
.gm-page-root .gm-tl-meta{font-size:11.5px;color:var(--gm-muted)}
@media (max-width:680px){
  .gm-page-root .gm-timeline{padding:14px 0 4px}
  .gm-page-root .gm-timeline::before{display:none}
  .gm-page-root .gm-tl-row{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* ---------- Responsive YouTube video embed --------------------------
   Wraps an <iframe> in a 16/9 box capped at 900px. Falls back to
   padding-top hack on browsers without aspect-ratio support. */
.gm-page-root .gm-video-wrapper{clear:both;position:relative;display:block;width:100% !important;max-width:900px !important;margin:14px auto 0;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;border:1px solid var(--gm-rule);box-shadow:0 4px 14px rgba(20,30,15,.15)}
.gm-page-root .gm-video-wrapper iframe{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:100% !important;max-width:none !important;min-width:0 !important;border:0 !important;display:block !important}
@supports not (aspect-ratio: 16 / 9){.gm-page-root .gm-video-wrapper{padding-top:56.25%;height:0}}

/* ---------- Disclosures footer --------------------------------------
   Dashed sage-soft block at the bottom of the product page for legal /
   shipping / disclaimer copy. */
.gm-page-root .gm-disclosures{margin:18px 0 22px;padding:14px 18px;background:var(--gm-sage-soft);border:1px dashed var(--gm-rule);border-radius:8px;color:var(--gm-muted);font-size:12.5px;line-height:1.6;text-align:left;hyphens:auto;-webkit-hyphens:auto}
.gm-page-root .gm-disclosures-lbl{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gm-olive-deep);margin:0 0 6px;text-align:left}
.gm-page-root .gm-disclosures p{margin:0 0 8px}
.gm-page-root .gm-disclosures p:last-child{margin-bottom:0}

/* ---------- Mobile: release-rate table → cards ----------------------
   Under 680px, table rows become stacked cards. Each <td> needs a
   data-label="…" attribute in HTML so the label can be shown via
   ::before. Already wired in the existing markup. */
@media (max-width:680px){
  .gm-page-root .gm-table,
  .gm-page-root .gm-table thead,
  .gm-page-root .gm-table tbody,
  .gm-page-root .gm-table tfoot,
  .gm-page-root .gm-table tr,
  .gm-page-root .gm-table td,
  .gm-page-root .gm-table th{display:block}
  .gm-page-root .gm-table thead{display:none}
  .gm-page-root .gm-table{border:none;border-radius:0;background:transparent;overflow:visible}
  .gm-page-root .gm-table tbody tr{border:1px solid var(--gm-rule);border-radius:10px;background:#fff;margin:0 0 10px;padding:12px 14px;box-shadow:0 1px 3px rgba(20,30,15,.04);overflow:hidden}
  .gm-page-root .gm-table tbody tr:nth-child(even){background:#fff}
  .gm-page-root .gm-table tbody tr:nth-child(even) td{background:transparent}
  .gm-page-root .gm-table tbody td{border:none;padding:6px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:14px}
  .gm-page-root .gm-table tbody td:first-child{font-weight:700;color:var(--gm-green-dark);font-size:15px;padding-bottom:8px;margin-bottom:6px;border-bottom:1px dashed var(--gm-rule);display:block}
  .gm-page-root .gm-table tbody td:not(:first-child)::before{content:attr(data-label);font-size:11px;font-weight:700;color:var(--gm-muted);text-transform:uppercase;letter-spacing:.08em;flex-shrink:0}
  .gm-page-root .gm-table tbody td:not(:first-child){padding:6px 0;color:var(--gm-ink-2)}
  .gm-page-root .gm-table tbody td .gm-pill{margin-left:6px}
  .gm-page-root .gm-table tfoot tr{border:1px solid var(--gm-green-light);background:#fff;border-radius:10px;padding:12px 14px;margin:6px 0 0;box-shadow:none}
  .gm-page-root .gm-table tfoot th{background:transparent;color:var(--gm-muted);padding:0;border:none;font-weight:500;font-size:13px;line-height:1.55;font-style:italic}
}


/* =====================================================================
   PART 2 — Learn page rules (.gm-edt-*)
   ============================================================
   Editorial long-read layout for the "Learn BioControl & IPM" series.
   Class prefix .gm-edt-* never collides with .gm-page-root .gm-* in
   PART 1, so both layouts can coexist on the same Shopify install.

   Anatomy of a Learn page:
     .gm-edt-root            wrapper, breaks out to viewport
       └ .gm-edt-grid        2-col layout (sidebar | article)
           ├ .gm-edt-side    left rail (text-size + TOC, sticky)
           └ .gm-edt-prose   article column (max 1000px)
   ===================================================================== */

/* Smooth scrolling for in-page TOC jumps. Respects reduced motion. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Floating "back to top" button ---------------------------
   Fixed bottom-right pill. On browsers with `animation-timeline:scroll()`
   support (Chromium 115+), it fades in after the user has scrolled past
   200px and fully appears by 400px. Older browsers see it always. */
.gm-edt-totop{position:fixed;right:max(20px,env(safe-area-inset-right,20px));bottom:calc(env(safe-area-inset-bottom,0px) + 96px);z-index:50;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#3f5240,#2e3d2f);color:#fcecb6;display:grid;place-items:center;font-size:22px;font-weight:800;text-decoration:none;line-height:1;box-shadow:0 6px 18px rgba(20,30,15,.25);transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease}
.gm-edt-totop:hover{background:linear-gradient(135deg,#2e3d2f,#1c2719);transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,30,15,.32);color:#fff}
.gm-edt-totop:focus-visible{outline:3px solid #c9a227;outline-offset:3px}
@media (max-width:680px){
  .gm-edt-totop{width:44px;height:44px;font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .gm-edt-totop{transition:none}
}
@supports (animation-timeline:scroll()){
  .gm-edt-totop{opacity:0;transform:translateY(12px);pointer-events:none;animation:gm-edt-totop-reveal linear both;animation-timeline:scroll(root);animation-range:200px 400px}
  @keyframes gm-edt-totop-reveal{to{opacity:1;transform:translateY(0);pointer-events:auto}}
}

/* ---------- Editorial layout: wrapper + grid ------------------------
   .gm-edt-root         breaks out to full viewport (same trick as
                        .gm-page-root). Don't change the viewport math.
   .gm-edt-grid         the actual content container:
     max-width:1400     widen/narrow the whole Learn-page width
     grid-template-columns: 240px 1fr  → left rail | article
                        (change 240px to resize the TOC sidebar)
     gap:48px           space between rail and article
   Below 900px it collapses to a single column. */
.gm-edt-root{
  width:100vw !important;
  max-width:100vw !important;
  position:relative !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  background:#faf9f1;               /* page background */
  /* ----- font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important; ---- */
  color:#15181a;
  text-align:left !important;
}
.gm-edt-root *{text-align:inherit}
.gm-edt-grid{
  max-width:1200px !important;      /* outer page width */
  margin:0 auto !important;
  padding:24px 28px 80px !important;
  display:grid !important;
  grid-template-columns:240px 1fr !important;  /* sidebar | article */
  gap:48px !important;
  align-items:start !important;
}
@media (max-width:900px){.gm-edt-grid{grid-template-columns:1fr !important;gap:20px !important}}
@media (max-width:680px){.gm-edt-grid{padding:18px 16px 60px !important}}

/* ---------- Text-size control (no JS) -------------------------------
   Pure HTML radio + label group. The state is read by .gm-edt-prose
   below via .gm-edt-root:has(#fs-*:checked) — so changing the radio
   id changes the prose scale. Default is `md` (1×).
   Visual button sizes are stepped at 13/16/19/22 px. */
.gm-edt-fs-bar{background:#fff;border:1px solid #dee3d6;border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(20,30,15,.04);margin:0 0 14px;min-width:0}
.gm-edt-fs-lbl{font-size:13px;font-weight:700;letter-spacing:.01em;color:#667011;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.gm-edt-fs-lbl::before{content:"";width:18px;height:2px;background:#c9a227}
.gm-edt-fs-btns{display:flex;gap:6px}
.gm-edt-fs-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gm-edt-fs-btn{flex:1;background:#f5f7f2;border:1px solid #dee3d6;color:#3f5240;border-radius:8px;padding:8px 6px;cursor:pointer;font-weight:800;line-height:1;letter-spacing:-.01em;transition:background .15s,border-color .15s,color .15s,transform .1s;display:grid;place-items:center;user-select:none}
.gm-edt-fs-btn:hover{background:#eaf0e2;border-color:#85a98f}
.gm-edt-fs-btn:active{transform:scale(.96)}
.gm-edt-fs-radio:checked + .gm-edt-fs-btn{background:linear-gradient(135deg,#3f5240,#2e3d2f);color:#fcecb6;border-color:transparent;box-shadow:0 2px 6px rgba(20,30,15,.18)}
.gm-edt-fs-radio:focus-visible + .gm-edt-fs-btn{outline:2px solid #c9a227;outline-offset:2px}
.gm-edt-fs-btn[data-size="sm"]{font-size:13px}
.gm-edt-fs-btn[data-size="md"]{font-size:16px}
.gm-edt-fs-btn[data-size="lg"]{font-size:19px}
.gm-edt-fs-btn[data-size="xl"]{font-size:22px}

/* ---------- Sticky side-rail TOC -----------------------------------
   The sidebar sticks 24px below the viewport top while scrolling.
   On <=900px the position becomes static (sidebar falls inline).
   Active highlighting per-page lives in PART 3. */
.gm-edt-side{position:sticky;top:24px}                /* offset from top when sticky */
@media (max-width:900px){.gm-edt-side{position:static}}
.gm-edt-toc{background:#fff;border:1px solid #dee3d6;border-radius:12px;padding:18px 20px;box-shadow:0 1px 3px rgba(20,30,15,.04)}
.gm-edt-toc-lbl{font-size:13px;font-weight:700;letter-spacing:.01em;color:#667011;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.gm-edt-toc-lbl::before{content:"";width:18px;height:2px;background:#c9a227}
.gm-edt-toc ol{list-style:none;margin:0;padding:0;counter-reset:tocnum}
.gm-edt-toc li{counter-increment:tocnum;margin:0 0 10px;padding-left:28px;position:relative;font-size:13.5px;line-height:1.4}
.gm-edt-toc li::before{content:counter(tocnum,decimal-leading-zero);position:absolute;left:0;top:0;font-weight:700;color:#85a98f;font-size:11px;letter-spacing:.04em}
.gm-edt-toc a{color:#3f5240;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.gm-edt-toc a:hover{border-bottom-color:#c9a227;color:#2e3d2f}
.gm-edt-toc li.is-active a{color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227}
/* NOTE: Shopify strips <style> blocks from page body HTML, so the
   per-page :target rules CANNOT live in the page itself. They live
   in PART 3 of this file. Every time a new Learn page is built,
   append a new block to PART 3 listing that page's anchors. */

/* ---------- Key takeaways box (top of article) ---------------------
   Green-tinted summary at the start of every Learn page. Each <li>
   gets a small rotated-square bullet. */
.gm-edt-keytakes{background:linear-gradient(135deg,#eaf0e2,#f5f7f2);border:1px solid #85a98f;border-left:5px solid #5a6c57;border-radius:12px;padding:22px 26px;margin:0 0 36px}
.gm-edt-keytakes-lbl{font-size:14px;font-weight:700;letter-spacing:.01em;color:#3f5240;margin:0 0 12px;}
.gm-edt-keytakes ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;}
.gm-edt-keytakes li{padding-left:24px;position:relative;font-size:calc(14.5px * var(--gm-scale,1));color:#15181a;line-height:1.55;text-align:left;hyphens:auto;-webkit-hyphens:auto}
.gm-edt-keytakes li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:2px;background:#c9a227;transform:rotate(45deg)}

/* ---------- Article body (.gm-edt-prose) ---------------------------
   --gm-scale is set by the four text-size selectors below. Every text
   size in this block multiplies by it.
     sm = .9   md = 1   lg = 1.13   xl = 1.28
   To add a 5th step add a matching <input id="fs-XX"> + selector.

   h2: scroll-margin-top:110px reserves space under the sticky black
   site header when a TOC link jumps to a section. If the header is
   resized in the theme, change BOTH this value AND the matching one
   on .gm-edt-section directly below. */
.gm-edt-prose{--gm-scale:1;font-size:calc(16.5px * var(--gm-scale));line-height:1.7;color:#15181a;max-width:1000px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
  /* ----- font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important; ---- */
.gm-edt-root:has(#fs-sm:checked) .gm-edt-prose{--gm-scale:.9}
.gm-edt-root:has(#fs-md:checked) .gm-edt-prose{--gm-scale:1}
.gm-edt-root:has(#fs-lg:checked) .gm-edt-prose{--gm-scale:1.13}
.gm-edt-root:has(#fs-xl:checked) .gm-edt-prose{--gm-scale:1.28}
.gm-edt-prose h2{font-size:calc(28px * var(--gm-scale));font-weight:800;color:#2e3d2f;margin:44px 0 14px;line-height:1.2;letter-spacing:-.02em;scroll-margin-top:110px;text-align:left}
.gm-edt-section{scroll-margin-top:110px}    /* keep in sync with h2 value above */
.gm-edt-prose h2:first-child{margin-top:0}
.gm-edt-prose h2::before{content:"";display:block;width:40px;height:3px;background:#c9a227;margin:0 0 14px}   /* amber bar above each h2 */
.gm-edt-prose h3{font-size:calc(17px * var(--gm-scale));font-weight:700;color:#3f5240;margin:28px 0 10px;letter-spacing:.01em;text-align:left}
.gm-edt-prose p{margin:0 0 16px;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.gm-edt-prose p.lede{font-size:calc(19px * var(--gm-scale));line-height:1.55;color:#384038;font-weight:400;margin-bottom:22px;text-align:left;hyphens:auto;-webkit-hyphens:auto;border-left:3px solid #c9a227;padding-left:16px}  /* yellow-bar opening paragraph */
.gm-edt-prose a{color:#3f5240;text-decoration:underline;text-decoration-color:#c9a227;text-underline-offset:2px;text-decoration-thickness:1.5px}
.gm-edt-prose a:hover{color:#b35932;text-decoration-color:#b35932}

/* ---------- Pull-quote -----------------------------------------------
   Amber callout for a striking sentence. Big serif quotation mark
   sits in the top-left. <cite> renders as the attribution line. */
.gm-edt-pull{margin:28px 0;padding:18px 22px 18px 54px;background:#fcecb6;border-radius:8px;position:relative;font-style:italic;font-size:calc(18px * var(--gm-scale));line-height:1.5;color:#5a4500;border-left:5px solid #c9a227;text-align:left;hyphens:auto;-webkit-hyphens:auto}
.gm-edt-pull::before{content:"\201C";position:absolute;left:14px;top:4px;font-size:54px;font-style:normal;color:#c9a227;line-height:1;}
.gm-edt-pull cite{display:block;margin-top:10px;font-style:normal;font-size:13px;font-weight:600;color:#667011;letter-spacing:.01em;text-align:left}

/* ---------- Inline figure --------------------------------------------
   Trick: figure auto-shrinks to the image's natural width, no per-image
   inline styles needed.
     - width:fit-content on figure shrinks to widest contributing child
     - width:0; min-width:100% on figcaption makes it contribute 0 to
       that sizing calculation but render at the figure's full width
     - max-width:100% on figure + img caps oversized images to the column
   To change the caption visual treatment, edit `.gm-edt-figure figcaption`
   (amber left bar + tinted yellow gradient by default). */
.gm-edt-figure{margin:28px auto;width:fit-content;max-width:100%;border-radius:10px;overflow:hidden;border:1px solid #dee3d6;background:#fff;box-shadow:0 4px 10px rgba(20,30,15,.06)}
.gm-edt-figure img{display:block;width:auto;max-width:100%;height:auto;margin:0}
.gm-edt-figure figcaption{display:block;width:0;min-width:100%;box-sizing:border-box;padding:10px 14px;font-size:calc(13px * var(--gm-scale,1));color:#384038;border-left:3px solid #c9a227;background:linear-gradient(90deg,rgba(252,236,182,.25),transparent);margin:0}

/* ---------- Numbered callout ----------------------------------------
   Vertical list of dark-green circle-numbered items. Used for enumerated
   facts like "Dietrick's Five Features of IPM". CSS counters generate
   the numbers automatically — no need to write them in HTML. */
.gm-edt-numlist{margin:28px 0;padding:22px 24px;background:#fff;border:1px solid #dee3d6;border-radius:12px;counter-reset:nlist}
.gm-edt-numlist-lbl{font-size:14px;font-weight:700;letter-spacing:.01em;color:#3f5240;margin:0 0 14px}
.gm-edt-numlist ol{margin:0;padding:0;list-style:none}
.gm-edt-numlist li{counter-increment:nlist;padding:8px 0;font-size:calc(15px * var(--gm-scale,1));line-height:1.55;color:#15181a;text-align:left;display:flex;align-items:flex-start;gap:18px;min-height:36px}
.gm-edt-numlist li::before{content:counter(nlist);flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#3f5240;color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;border:none;box-shadow:none;outline:none}
/* When a numlist item starts with a <strong> title followed by description
   text, give the title a fixed-width column so descriptions line up across
   rows. Tweak 220px to taste — wider = more whitespace for short titles,
   better alignment when titles vary in length. */
.gm-edt-numlist li > strong:first-child{flex:0 0 220px}
@media (max-width:680px){
  .gm-edt-numlist li{flex-wrap:wrap}
  .gm-edt-numlist li > strong:first-child{flex:0 0 calc(100% - 54px);margin-bottom:2px}
}

/* ---------- Book card (for reading-list pages) ----------------------
   Each book wraps in <div class="gm-edt-book"> with:
     h3   — title
     p    — author / ISBN / commentary
     p.gm-edt-book-find — "Find: WorldCat · Google Books" links
   Plain bordered card by default. To add an amber left-bar accent,
   uncomment the border-left line below. */
.gm-edt-book{margin:18px 0;padding:18px 22px;background:#fff;border:1px solid #dee3d6;border-radius:10px;box-shadow:0 1px 3px rgba(20,30,15,.04)
  /* border-left:4px solid #c9a227 */}
.gm-edt-book h3{margin-top:0 !important;margin-bottom:8px}
.gm-edt-book p{margin:0 0 8px}
.gm-edt-book p:last-child{margin-bottom:0}
.gm-edt-book-find{font-size:calc(13px * var(--gm-scale,1));color:#6e7669}
.gm-edt-book-find a{color:#3f5240}

/* ---------- "Continue reading" disclosure ---------------------------
   For paginated sources (e.g. /the-history-of-biocontrol-and-ipm/2/).
   Wraps Part 2 content inside <details>. Default closed for fast first
   paint. The arrow rotates 90° when open. Caption label "Part 2 of 2 ·
   click to continue" lives in the page HTML (.gm-edt-more-tag). */
.gm-edt-more{margin:56px 0 0;padding:0;border:none;background:none}
.gm-edt-more > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:20px 24px;background:linear-gradient(135deg,#eaf0e2,#fbf8ef);border:1px solid #85a98f;border-left:5px solid #c9a227;border-radius:12px;transition:background .18s,box-shadow .18s;outline:none}
.gm-edt-more > summary::-webkit-details-marker{display:none}
.gm-edt-more > summary::marker{content:""}
.gm-edt-more > summary:hover{background:linear-gradient(135deg,#dde7d2,#f5f0e3);box-shadow:0 4px 14px rgba(20,30,15,.08)}
.gm-edt-more > summary:focus-visible{box-shadow:0 0 0 3px rgba(201,162,39,.35)}
.gm-edt-more-arrow{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#3f5240,#2e3d2f);color:#fcecb6;display:grid;place-items:center;font-size:18px;font-weight:800;line-height:1;transition:transform .25s ease}
.gm-edt-more[open] > summary > .gm-edt-more-arrow{transform:rotate(90deg)}
.gm-edt-more-text{flex:1;min-width:0}
.gm-edt-more-tag{font-size:13px;font-weight:600;letter-spacing:.01em;color:#667011;margin:0 0 3px;display:block}
.gm-edt-more[open] .gm-edt-more-tag::after{content:" \00b7  now reading";color:#3f5240}
.gm-edt-more-ttl{font-size:18px;font-weight:700;color:#2e3d2f;margin:0;line-height:1.25;letter-spacing:-.005em}
.gm-edt-more-ttl em{font-style:italic;color:#689374;font-weight:600}


/* =====================================================================
   PART 3 — Per-page :target TOC highlight rules
   =====================================================================
   How it works:
     When the URL is /pages/foo#china, the browser marks #china as the
     :target element. The selector below uses :has() to detect that on
     the grid, then highlights the matching <a href="#china"> in the
     sidebar TOC.
   Why it's here instead of in each page's HTML:
     Shopify's page editor strips <style> blocks from body HTML, so we
     can't inline per-page rules. Append one block per Learn page below.

   TEMPLATE (copy + adapt for a new page):
   ┌──────────────────────────────────────────────────────────────────┐
   │ /* ---- /pages/<slug> — <Page Title> ---- */                    │
   │ .gm-edt-grid:has(#anchor1:target) .gm-edt-toc a[href="#anchor1"],│
   │ .gm-edt-grid:has(#anchor2:target) .gm-edt-toc a[href="#anchor2"]{│
   │   color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227      │
   │ }                                                                │
   └──────────────────────────────────────────────────────────────────┘
   The "dim the static fallback on item 1" rule directly below the hub
   block applies globally — only define it once.
   ===================================================================== */

/* ---- /pages/learn-biocontrol-ipm — Learn Biocontrol & IPM (hub) ---- */
.gm-edt-grid:has(#intro:target)      .gm-edt-toc a[href="#intro"],
.gm-edt-grid:has(#history:target)    .gm-edt-toc a[href="#history"],
.gm-edt-grid:has(#starting:target)   .gm-edt-toc a[href="#starting"],
.gm-edt-grid:has(#transition:target) .gm-edt-toc a[href="#transition"],
.gm-edt-grid:has(#i-in-ipm:target)   .gm-edt-toc a[href="#i-in-ipm"],
.gm-edt-grid:has(#scouting:target)   .gm-edt-toc a[href="#scouting"],
.gm-edt-grid:has(#selling:target)    .gm-edt-toc a[href="#selling"],
.gm-edt-grid:has(#industry:target)   .gm-edt-toc a[href="#industry"],
.gm-edt-grid:has(#updated:target)    .gm-edt-toc a[href="#updated"],
.gm-edt-grid:has(#helpful:target)    .gm-edt-toc a[href="#helpful"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* Global: once any section is :target, dim the static fallback (the
   `li.is-active` that highlights item 1 by default). Define ONCE. */
.gm-edt-grid:has(:target) .gm-edt-toc li.is-active a{
  color:#3f5240;font-weight:400;border-bottom-color:transparent
}

/* ---- /pages/necessary-intro — Intro: Green Methods ---- */
.gm-edt-grid:has(#chemicals:target)   .gm-edt-toc a[href="#chemicals"],
.gm-edt-grid:has(#resistance:target)  .gm-edt-toc a[href="#resistance"],
.gm-edt-grid:has(#environment:target) .gm-edt-toc a[href="#environment"],
.gm-edt-grid:has(#solution:target)    .gm-edt-toc a[href="#solution"],
.gm-edt-grid:has(#scope:target)       .gm-edt-toc a[href="#scope"],
.gm-edt-grid:has(#about:target)       .gm-edt-toc a[href="#about"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}

/* ---- /pages/necessary-history — The History of Biocontrol and IPM ---- */
.gm-edt-grid:has(#nature:target)   .gm-edt-toc a[href="#nature"],
.gm-edt-grid:has(#china:target)    .gm-edt-toc a[href="#china"],
.gm-edt-grid:has(#early-us:target) .gm-edt-toc a[href="#early-us"],
.gm-edt-grid:has(#later-us:target) .gm-edt-toc a[href="#later-us"],
.gm-edt-grid:has(#carson:target)   .gm-edt-toc a[href="#carson"],
.gm-edt-grid:has(#africa:target)   .gm-edt-toc a[href="#africa"],
.gm-edt-grid:has(#then:target)     .gm-edt-toc a[href="#then"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}

/* ---- /pages/necessary-required-reading — Required Reading ---- */
.gm-edt-grid:has(#general:target)   .gm-edt-toc a[href="#general"],
.gm-edt-grid:has(#disease:target)   .gm-edt-toc a[href="#disease"],
.gm-edt-grid:has(#id:target)        .gm-edt-toc a[href="#id"],
.gm-edt-grid:has(#specialty:target) .gm-edt-toc a[href="#specialty"],
.gm-edt-grid:has(#uc:target)        .gm-edt-toc a[href="#uc"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/learn-starting-out-ipm — Starting Out in IPM ---- */
.gm-edt-grid:has(#why:target)     .gm-edt-toc a[href="#why"],
.gm-edt-grid:has(#commit:target)  .gm-edt-toc a[href="#commit"],
.gm-edt-grid:has(#mindset:target) .gm-edt-toc a[href="#mindset"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/learn-transition-ipm-part-1 — Transition to IPM, Part 1 ---- */
.gm-edt-grid:has(#license:target) .gm-edt-toc a[href="#license"],
.gm-edt-grid:has(#organic:target) .gm-edt-toc a[href="#organic"],
.gm-edt-grid:has(#cleanup:target) .gm-edt-toc a[href="#cleanup"],
.gm-edt-grid:has(#support:target) .gm-edt-toc a[href="#support"],
.gm-edt-grid:has(#moving:target)  .gm-edt-toc a[href="#moving"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/learn-transition-ipm-part-2 — Transition to IPM, Part 2 ---- */
.gm-edt-grid:has(#start:target)          .gm-edt-toc a[href="#start"],
.gm-edt-grid:has(#indoor-empty:target)   .gm-edt-toc a[href="#indoor-empty"],
.gm-edt-grid:has(#indoor-running:target) .gm-edt-toc a[href="#indoor-running"],
.gm-edt-grid:has(#interior:target)       .gm-edt-toc a[href="#interior"],
.gm-edt-grid:has(#outdoor:target)        .gm-edt-toc a[href="#outdoor"],
.gm-edt-grid:has(#next:target)           .gm-edt-toc a[href="#next"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/learn-transition-ipm-part-3 — Transition to IPM, Part 3 ---- */
.gm-edt-grid:has(#four-ps:target)      .gm-edt-toc a[href="#four-ps"],
.gm-edt-grid:has(#planning:target)     .gm-edt-toc a[href="#planning"],
.gm-edt-grid:has(#prevention:target)   .gm-edt-toc a[href="#prevention"],
.gm-edt-grid:has(#patience:target)     .gm-edt-toc a[href="#patience"],
.gm-edt-grid:has(#perseverance:target) .gm-edt-toc a[href="#perseverance"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/learn-i-in-ipm — The "I" in IPM ---- */
.gm-edt-grid:has(#biocontrols:target)  .gm-edt-toc a[href="#biocontrols"],
.gm-edt-grid:has(#pesticides:target)   .gm-edt-toc a[href="#pesticides"],
.gm-edt-grid:has(#physical:target)     .gm-edt-toc a[href="#physical"],
.gm-edt-grid:has(#plant-health:target) .gm-edt-toc a[href="#plant-health"],
.gm-edt-grid:has(#trap-banker:target)  .gm-edt-toc a[href="#trap-banker"],
.gm-edt-grid:has(#education:target)    .gm-edt-toc a[href="#education"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/learn-pest-scouting — Scouting Information ---- */
.gm-edt-grid:has(#what:target)           .gm-edt-toc a[href="#what"],
.gm-edt-grid:has(#requires:target)       .gm-edt-toc a[href="#requires"],
.gm-edt-grid:has(#setup:target)          .gm-edt-toc a[href="#setup"],
.gm-edt-grid:has(#howto:target)          .gm-edt-toc a[href="#howto"],
.gm-edt-grid:has(#interiorscapes:target) .gm-edt-toc a[href="#interiorscapes"],
.gm-edt-grid:has(#outdoors:target)       .gm-edt-toc a[href="#outdoors"],
.gm-edt-grid:has(#summary:target)        .gm-edt-toc a[href="#summary"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/learn-scouting-plan — Successful Scouting Plan ---- */
.gm-edt-grid:has(#importance:target) .gm-edt-toc a[href="#importance"],
.gm-edt-grid:has(#program:target)    .gm-edt-toc a[href="#program"],
.gm-edt-grid:has(#reminders:target)  .gm-edt-toc a[href="#reminders"],
.gm-edt-grid:has(#identify:target)   .gm-edt-toc a[href="#identify"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/learn-selling-biocontrol — Selling the Practice ---- */
.gm-edt-grid:has(#living:target)    .gm-edt-toc a[href="#living"],
.gm-edt-grid:has(#marketing:target) .gm-edt-toc a[href="#marketing"],
.gm-edt-grid:has(#boast:target)     .gm-edt-toc a[href="#boast"],
.gm-edt-grid:has(#teach:target)     .gm-edt-toc a[href="#teach"],
.gm-edt-grid:has(#succeed:target)   .gm-edt-toc a[href="#succeed"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/learn-ipm-industry — The IPM Industry ---- */
.gm-edt-grid:has(#unusual:target)    .gm-edt-toc a[href="#unusual"],
.gm-edt-grid:has(#perishable:target) .gm-edt-toc a[href="#perishable"],
.gm-edt-grid:has(#weekly:target)     .gm-edt-toc a[href="#weekly"],
.gm-edt-grid:has(#dist-prod:target)  .gm-edt-toc a[href="#dist-prod"],
.gm-edt-grid:has(#freight:target)    .gm-edt-toc a[href="#freight"],
.gm-edt-grid:has(#wary:target)       .gm-edt-toc a[href="#wary"],
.gm-edt-grid:has(#regulation:target) .gm-edt-toc a[href="#regulation"],
.gm-edt-grid:has(#consumer:target)   .gm-edt-toc a[href="#consumer"],
.gm-edt-grid:has(#questions:target)  .gm-edt-toc a[href="#questions"],
.gm-edt-grid:has(#benefit:target)    .gm-edt-toc a[href="#benefit"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/learn-updated-perspective — An Updated Perspective ---- */
.gm-edt-grid:has(#proactive:target) .gm-edt-toc a[href="#proactive"],
.gm-edt-grid:has(#the-ps:target)    .gm-edt-toc a[href="#the-ps"],
.gm-edt-grid:has(#tools:target)     .gm-edt-toc a[href="#tools"],
.gm-edt-grid:has(#bios:target)      .gm-edt-toc a[href="#bios"],
.gm-edt-grid:has(#chemicals:target) .gm-edt-toc a[href="#chemicals"],
.gm-edt-grid:has(#phys:target)      .gm-edt-toc a[href="#phys"],
.gm-edt-grid:has(#health:target)    .gm-edt-toc a[href="#health"],
.gm-edt-grid:has(#traps:target)     .gm-edt-toc a[href="#traps"],
.gm-edt-grid:has(#edu:target)       .gm-edt-toc a[href="#edu"],
.gm-edt-grid:has(#scout:target)     .gm-edt-toc a[href="#scout"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/learn-ipm-tips — Helpful Tips and Hints ---- */
.gm-edt-grid:has(#fall:target)        .gm-edt-toc a[href="#fall"],
.gm-edt-grid:has(#testing:target)     .gm-edt-toc a[href="#testing"],
.gm-edt-grid:has(#pinch:target)       .gm-edt-toc a[href="#pinch"],
.gm-edt-grid:has(#webbing:target)     .gm-edt-toc a[href="#webbing"],
.gm-edt-grid:has(#wiping:target)      .gm-edt-toc a[href="#wiping"],
.gm-edt-grid:has(#whitefly:target)    .gm-edt-toc a[href="#whitefly"],
.gm-edt-grid:has(#thrips-bait:target) .gm-edt-toc a[href="#thrips-bait"],
.gm-edt-grid:has(#gnats-bait:target)  .gm-edt-toc a[href="#gnats-bait"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
/* ---- /pages/aphids — Aphid Pests ---- */
.gm-edt-grid:has(#background:target) .gm-edt-toc a[href="#background"],
.gm-edt-grid:has(#problem:target)    .gm-edt-toc a[href="#problem"],
.gm-edt-grid:has(#growth:target)     .gm-edt-toc a[href="#growth"],
.gm-edt-grid:has(#serious:target)    .gm-edt-toc a[href="#serious"],
.gm-edt-grid:has(#advice:target)     .gm-edt-toc a[href="#advice"],
.gm-edt-grid:has(#scout-tips:target) .gm-edt-toc a[href="#scout-tips"],
.gm-edt-grid:has(#solutions:target)  .gm-edt-toc a[href="#solutions"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}

/* ===============================================================
   Plant Pests menu — per-page :target highlight rules
   =============================================================== */

/* ---- /pages/caterpillars — Caterpillar Pests ---- */
.gm-edt-grid:has(#background:target) .gm-edt-toc a[href="#background"],
.gm-edt-grid:has(#how-problem:target) .gm-edt-toc a[href="#how-problem"],
.gm-edt-grid:has(#serious:target) .gm-edt-toc a[href="#serious"],
.gm-edt-grid:has(#advice:target) .gm-edt-toc a[href="#advice"],
.gm-edt-grid:has(#scout-tips:target) .gm-edt-toc a[href="#scout-tips"],
.gm-edt-grid:has(#solutions:target) .gm-edt-toc a[href="#solutions"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}

/* ---- /pages/leafminers, /pages/scale-mealybugs, /pages/spider-mites, /pages/whiteflies share the same anchor set as above ---- */

/* ---- /pages/soil-pests — Soil Pests ---- */
.gm-edt-grid:has(#variety:target) .gm-edt-toc a[href="#variety"],
.gm-edt-grid:has(#leafminers-sec:target) .gm-edt-toc a[href="#leafminers-sec"],
.gm-edt-grid:has(#cutworms-sec:target) .gm-edt-toc a[href="#cutworms-sec"],
.gm-edt-grid:has(#grubs:target) .gm-edt-toc a[href="#grubs"],
.gm-edt-grid:has(#gnats:target) .gm-edt-toc a[href="#gnats"],
.gm-edt-grid:has(#and-more:target) .gm-edt-toc a[href="#and-more"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}

/* ---- /pages/thrips — Thrips Pests ---- */
.gm-edt-grid:has(#intro:target) .gm-edt-toc a[href="#intro"],
.gm-edt-grid:has(#why-problem:target) .gm-edt-toc a[href="#why-problem"],
.gm-edt-grid:has(#damage:target) .gm-edt-toc a[href="#damage"],
.gm-edt-grid:has(#lifecycle:target) .gm-edt-toc a[href="#lifecycle"],
.gm-edt-grid:has(#scouting:target) .gm-edt-toc a[href="#scouting"],
.gm-edt-grid:has(#ipm:target) .gm-edt-toc a[href="#ipm"],
.gm-edt-grid:has(#signs:target) .gm-edt-toc a[href="#signs"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}

/* ---- /pages/plant-diseases — Plant Diseases ---- */
.gm-edt-grid:has(#overview:target) .gm-edt-toc a[href="#overview"],
.gm-edt-grid:has(#prevention:target) .gm-edt-toc a[href="#prevention"],
.gm-edt-grid:has(#sanitation:target) .gm-edt-toc a[href="#sanitation"],
.gm-edt-grid:has(#scouting:target) .gm-edt-toc a[href="#scouting"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}

/* ---- /pages/biocontrol-in-greenhouse-tomato — Greenhouse Tomato ---- */
.gm-edt-grid:has(#tomato-overview:target) .gm-edt-toc a[href="#tomato-overview"],
.gm-edt-grid:has(#strategy:target) .gm-edt-toc a[href="#strategy"],
.gm-edt-grid:has(#pests:target) .gm-edt-toc a[href="#pests"],
.gm-edt-grid:has(#preventive:target) .gm-edt-toc a[href="#preventive"],
.gm-edt-grid:has(#curative:target) .gm-edt-toc a[href="#curative"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
 
/* ---- /pages/cannabis — Cannabis ---- */
.gm-edt-grid:has(#clones:target) .gm-edt-toc a[href="#clones"],
.gm-edt-grid:has(#vegetative:target) .gm-edt-toc a[href="#vegetative"],
.gm-edt-grid:has(#flowering:target) .gm-edt-toc a[href="#flowering"],
.gm-edt-grid:has(#pest-control:target) .gm-edt-toc a[href="#pest-control"],
.gm-edt-grid:has(#solutions:target) .gm-edt-toc a[href="#solutions"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}
 
/* ---- /pages/plant-propagation — Plant Propagation ---- */
.gm-edt-grid:has(#overview:target) .gm-edt-toc a[href="#overview"],
.gm-edt-grid:has(#strategy:target) .gm-edt-toc a[href="#strategy"],
.gm-edt-grid:has(#pests:target) .gm-edt-toc a[href="#pests"],
.gm-edt-grid:has(#clean-plants:target) .gm-edt-toc a[href="#clean-plants"],
.gm-edt-grid:has(#solutions:target) .gm-edt-toc a[href="#solutions"]{
  color:#2e3d2f;font-weight:600;border-bottom-color:#c9a227
}

/* =====================================================================
   PART 4 — Glossary page tabs (.gm-gt-*)
   ============================================================
   Used by /pages/learn-biocontrol-glossary only.
   Pure HTML/CSS tab switcher built on radio inputs + :checked siblings.
   Five tabs cover A-D / E-H / I-M / N-Q / R-Z letter groups.
   No collisions with .gm-page-root or .gm-edt-* prefixes above.
   ===================================================================== */

/* ----- .gm-gt-root wrapper — viewport breakout for the glossary -----
   Same trick as .gm-page-root and .gm-edt-root: width:100vw + negative
   margins to escape Shopify's narrow page-body wrapper. Inside, the
   intro paragraph and the .gm-gt tab container re-center at 1400px. */
.gm-gt-root{
  width:100vw !important;
  max-width:100vw !important;
  position:relative !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  background:#faf9f1;
/* ----- font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important; ---- */
  color:#15181a;
  text-align:left !important;
}
.gm-gt-root *{text-align:inherit}

/* ----- Intro paragraph above the tab container ----- */
.gm-gt-intro{max-width:1200px;margin:0 auto;padding:24px 28px;font-size:calc(16px * var(--gm-scale,1));line-height:1.6;color:#384038;text-align:left}
.gm-gt-intro strong{color:#3f5240}
@media (max-width:680px){.gm-gt-intro{padding:18px 16px;font-size:15px}}

/* ----- Container: tabs + panels ----- */
.gm-gt{max-width:1200px;margin:0 auto;padding:0 28px 90px}
@media (max-width:680px){.gm-gt{padding:0 16px 70px}}

/* Hidden radio inputs drive the tab state */
.gm-gt-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ----- Tab bar (sticky) -----
   Sticks below the site's black header while scrolling.
   top:135px clears the header height + a small gap.
   z-index:5 keeps the tabs UNDER the site header (which uses a higher
   z-index) so the header always wins on stack order.
   To tune: increase `top` if the header gets taller; never raise `z-index`
   above the header's own. */
.gm-gt-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;background:#fff;border:1px solid #dee3d6;border-radius:12px;padding:6px;box-shadow:0 1px 3px rgba(20,30,15,.04);margin:0 0 22px;position:sticky;top:135px;z-index:5;backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px)}
@media (max-width:680px){.gm-gt-tabs{position:static;grid-template-columns:repeat(5,1fr);gap:3px;padding:4px}}
.gm-gt-tab{cursor:pointer;display:grid;place-items:center;padding:12px 8px;background:transparent;color:#3f5240;border-radius:8px;font-weight:700;font-size:15px;letter-spacing:.01em;line-height:1;transition:background .15s,color .15s,transform .08s;user-select:none;text-align:center}
.gm-gt-tab small{display:block;font-size:10.5px;font-weight:600;color:#85a98f;margin-top:4px;letter-spacing:.04em}
.gm-gt-tab:hover{background:#eaf0e2;color:#2e3d2f}
.gm-gt-tab:active{transform:scale(.97)}
@media (max-width:680px){
  .gm-gt-tab{font-size:13px;padding:10px 4px}
  .gm-gt-tab small{font-size:9.5px;margin-top:2px}
}

/* Active tab visual when its radio is :checked */
#gt-ad:checked ~ .gm-gt-tabs label[for="gt-ad"],
#gt-eh:checked ~ .gm-gt-tabs label[for="gt-eh"],
#gt-im:checked ~ .gm-gt-tabs label[for="gt-im"],
#gt-nq:checked ~ .gm-gt-tabs label[for="gt-nq"],
#gt-rz:checked ~ .gm-gt-tabs label[for="gt-rz"]{background:linear-gradient(135deg,#3f5240,#2e3d2f);color:#fcecb6;box-shadow:0 2px 6px rgba(20,30,15,.18)}
#gt-ad:checked ~ .gm-gt-tabs label[for="gt-ad"] small,
#gt-eh:checked ~ .gm-gt-tabs label[for="gt-eh"] small,
#gt-im:checked ~ .gm-gt-tabs label[for="gt-im"] small,
#gt-nq:checked ~ .gm-gt-tabs label[for="gt-nq"] small,
#gt-rz:checked ~ .gm-gt-tabs label[for="gt-rz"] small{color:#c9a227}
.gm-gt-radio:focus-visible ~ .gm-gt-tabs label{outline:2px solid #c9a227;outline-offset:2px}

/* ----- Panels (only the selected one is shown) ----- */
.gm-gt-panel{display:none}
#gt-ad:checked ~ .gm-gt-panels #gt-panel-ad,
#gt-eh:checked ~ .gm-gt-panels #gt-panel-eh,
#gt-im:checked ~ .gm-gt-panels #gt-panel-im,
#gt-nq:checked ~ .gm-gt-panels #gt-panel-nq,
#gt-rz:checked ~ .gm-gt-panels #gt-panel-rz{display:block}

/* ----- Letter section inside a panel ----- */
.gm-gt-letter{margin:0 0 32px;scroll-margin-top:90px}
.gm-gt-letter-head{display:flex;align-items:baseline;gap:14px;padding-bottom:10px;margin-bottom:14px;border-bottom:2px solid #dee3d6}
.gm-gt-letter-head h2{font-size:48px;font-weight:800;color:#2e3d2f;letter-spacing:-.04em;margin:0;line-height:.9;font-feature-settings:"tnum" 1}
.gm-gt-letter-head .count{font-size:calc(12px * var(--gm-scale,1));font-weight:700;color:#85a98f;letter-spacing:.01em}
.gm-gt-letter-head .count strong{color:#3f5240}

/* ----- Definition list (two columns on desktop) ----- */
.gm-gt-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;margin:0}
@media (max-width:760px){.gm-gt-dl{grid-template-columns:1fr;gap:12px}}
.gm-gt-term{background:#fff;border:1px solid #dee3d6;border-left:3px solid #c9a227;border-radius:8px;padding:14px 16px}
.gm-gt-term dt{font-size:calc(15.5px * var(--gm-scale,1));font-weight:700;color:#2e3d2f;margin:0 0 4px;letter-spacing:-.005em}
.gm-gt-term dt .pron{display:inline-block;font-weight:500;font-style:italic;color:#85a98f;font-size:calc(12.5px * var(--gm-scale,1));margin-left:6px;letter-spacing:0}
.gm-gt-term dd{margin:0;font-size:calc(14px * var(--gm-scale,1));line-height:1.55;color:#15181a;text-align:left}
.gm-gt-term dd em{color:#3f5240;font-weight:500}

/* ----- Empty letter notice (for letters with no terms, like Z) ----- */
.gm-gt-empty{padding:16px 18px;background:#f5f7f2;border:1px dashed #dee3d6;border-radius:8px;font-size:calc(14px * var(--gm-scale,1));color:#6e7669;font-style:italic;text-align:center}

/* ----- Floating back-to-top arrow ----- */
.gm-gt-totop{position:fixed;right:max(20px,env(safe-area-inset-right,20px));bottom:calc(env(safe-area-inset-bottom,0px) + 96px);z-index:50;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#3f5240,#2e3d2f);color:#fcecb6;display:grid;place-items:center;font-size:22px;font-weight:800;text-decoration:none;line-height:1;box-shadow:0 6px 18px rgba(20,30,15,.25);transition:transform .18s ease,background .18s ease}
.gm-gt-totop:hover{background:linear-gradient(135deg,#2e3d2f,#1c2719);transform:translateY(-2px);color:#fff}
.gm-gt-totop:focus-visible{outline:3px solid #c9a227;outline-offset:3px}
@media (max-width:680px){.gm-gt-totop{width:44px;height:44px;font-size:20px}}
@supports (animation-timeline:scroll()){
  .gm-gt-totop{opacity:0;transform:translateY(12px);pointer-events:none;animation:gm-gt-totop-reveal linear both;animation-timeline:scroll(root);animation-range:200px 400px}
  @keyframes gm-gt-totop-reveal{to{opacity:1;transform:translateY(0);pointer-events:auto}}
}

/* ----- Text-size control (mirrors .gm-edt-fs-bar, scoped to .gm-gt-root) -----
   4 hidden radios + styled labels. :checked drives both the active button
   visual AND the --gm-scale variable on .gm-gt-root which all scalable
   text inside the glossary uses via calc(Npx * var(--gm-scale)). */
.gm-gt-root{--gm-scale:1}
.gm-gt-root:has(#gt-fs-sm:checked){--gm-scale:.9}
.gm-gt-root:has(#gt-fs-md:checked){--gm-scale:1}
.gm-gt-root:has(#gt-fs-lg:checked){--gm-scale:1.13}
.gm-gt-root:has(#gt-fs-xl:checked){--gm-scale:1.28}

.gm-gt-utility{max-width:1200px;margin:0 auto;padding:0 28px 14px;display:flex;justify-content:flex-start}
@media (max-width:680px){.gm-gt-utility{padding:0 16px 12px;justify-content:stretch}}

.gm-gt-fs-bar{background:#fff;border:1px solid #dee3d6;border-radius:12px;padding:10px 14px;box-shadow:0 1px 3px rgba(20,30,15,.04);display:flex;align-items:center;gap:14px;min-width:0;margin:0}
@media (max-width:680px){.gm-gt-fs-bar{width:100%}}
.gm-gt-fs-lbl{font-size:12.5px;font-weight:700;letter-spacing:.01em;color:#667011;display:flex;align-items:center;gap:8px;padding:0;margin:0;white-space:nowrap}
.gm-gt-fs-lbl::before{content:"";width:16px;height:2px;background:#c9a227;display:inline-block}
.gm-gt-fs-btns{display:flex;gap:5px;flex:0 0 auto}
@media (max-width:680px){.gm-gt-fs-btns{flex:1 1 auto}}
.gm-gt-fs-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gm-gt-fs-btn{flex:0 0 38px;background:#f5f7f2;border:1px solid #dee3d6;color:#3f5240;border-radius:7px;padding:6px 4px;cursor:pointer;font-weight:800;line-height:1;letter-spacing:-.01em;transition:background .15s,border-color .15s,color .15s,transform .1s;display:grid;place-items:center;user-select:none}
@media (max-width:680px){.gm-gt-fs-btn{flex:1 1 auto}}
.gm-gt-fs-btn:hover{background:#eaf0e2;border-color:#85a98f}
.gm-gt-fs-btn:active{transform:scale(.96)}
.gm-gt-fs-radio:checked + .gm-gt-fs-btn{background:linear-gradient(135deg,#3f5240,#2e3d2f);color:#fcecb6;border-color:transparent;box-shadow:0 2px 6px rgba(20,30,15,.18)}
.gm-gt-fs-radio:focus-visible + .gm-gt-fs-btn{outline:2px solid #c9a227;outline-offset:2px}
.gm-gt-fs-btn[data-size="sm"]{font-size:12px}
.gm-gt-fs-btn[data-size="md"]{font-size:14.5px}
.gm-gt-fs-btn[data-size="lg"]{font-size:17px}
.gm-gt-fs-btn[data-size="xl"]{font-size:25px}
/* =====================================================================
   PART 5 — News / Blog post pages
   =====================================================================
   APPEND THIS BLOCK to the end of gm-contentpages2.css.

   Used by GreenMethods blog/news articles migrated from the old
   WordPress site. Works together with existing PART 2 classes:
     .gm-edt-root        viewport-wide wrapper + base typography
     .gm-edt-fs-bar      text-size control
     .gm-edt-prose       article body typography
     .gm-edt-figure      inline figures
     .gm-edt-pull        pull-quote
     .gm-edt-totop       floating back-to-top

   Anatomy:
     .gm-edt-root
       └ .gm-news-container        single-column reading column
           ├ .gm-edt-fs-bar        text-size (small card top-left)
           ├ .gm-news-meta         date · author
           ├ .gm-news-lede         beefed-up opening paragraph
           ├ .gm-news-hero         hero figure (capped width, centered)
           └ .gm-edt-prose         article body
     .gm-edt-totop                 floating back-to-top
   ===================================================================== */


/* ---------- Reading container -----------------------------------------
   Single-column 1024px max, fluid clamp() padding so no media queries
   are needed for mobile/narrow-desktop. */
.gm-news-container{
  max-width:1024px;
  margin:0 auto;
  padding:clamp(18px,4vw,24px) clamp(16px,4vw,28px) clamp(60px,8vw,80px);
}

/* Make .gm-edt-prose fill the container (its built-in max-width:1000px
   would otherwise leave whitespace on the right). */
.gm-news-container .gm-edt-prose{max-width:none}

/* News pages use a compact text-size bar in the top-left. */
.gm-news-container .gm-edt-fs-bar{max-width:260px;margin:0 0 22px}


/* ---------- Meta row: date · author -----------------------------------
   Markup:
     <p class="gm-news-meta">
       <time datetime="…">Month DD, YYYY</time>
       <span class="sep" aria-hidden="true">·</span>
       <span class="author">By Author Name</span>
     </p> */
.gm-news-meta{
  margin:0 0 24px;
  font-size:13px;
  color:#6e7669;
  letter-spacing:.04em;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  line-height:1.4;
}
.gm-news-meta time{
  color:#3f5240;
  font-weight:600;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.gm-news-meta time::before{
  content:"";
  width:16px;
  height:2px;
  background:#c9a227;
  display:inline-block;
  flex-shrink:0;
}
.gm-news-meta .sep{
  color:#85a98f;
  font-weight:700;
  font-size:14px;
}
.gm-news-meta .author{
  color:#3f5240;
  font-weight:600;
}


/* ---------- Lede paragraph ---------------------------------------------
   Beefier than .gm-edt-prose p.lede: thicker amber bar, soft yellow
   tint, slightly larger + darker type. --gm-scale still applies so the
   text-size buttons keep scaling it. Sits between meta row and hero
   image so the reader eye lands on the summary first. */
.gm-news-lede{
  margin:0 0 28px;
  padding:18px 22px;
  font-size:calc(20px * var(--gm-scale,1));
  line-height:1.5;
  color:#2e3d2f;
  font-weight:500;
  background:linear-gradient(90deg,rgba(252,236,182,.4),rgba(252,236,182,.08) 75%,transparent);
  border-left:5px solid #c9a227;
  border-radius:0 8px 8px 0;
  text-align:left;
  hyphens:auto;
  -webkit-hyphens:auto;
  --gm-scale:1;
}
.gm-edt-root:has(#fs-sm:checked) .gm-news-lede{--gm-scale:.9}
.gm-edt-root:has(#fs-md:checked) .gm-news-lede{--gm-scale:1}
.gm-edt-root:has(#fs-lg:checked) .gm-news-lede{--gm-scale:1.13}
.gm-edt-root:has(#fs-xl:checked) .gm-news-lede{--gm-scale:1.28}

/* ---------- Hero image figure -----------------------------------------
   Capped at 520px wide and centered so it doesn't dominate the layout.
   Caption uses the same amber-bar treatment as inline figures. */
.gm-news-hero{
  margin:0 auto 30px;
  max-width:520px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #dee3d6;
  background:#fff;
  box-shadow:0 6px 20px rgba(20,30,15,.10);
  padding:0;
}
.gm-news-hero img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
  border-radius:0;
}
.gm-news-hero figcaption{
  display:block;
  padding:10px 16px;
  font-size:13px;
  color:#384038;
  border-top:1px solid #dee3d6;
  border-left:3px solid #c9a227;
  background:linear-gradient(90deg,rgba(252,236,182,.25),transparent);
  line-height:1.5;
  margin:0;
}
@media (max-width:680px){
  .gm-news-hero{margin:0 auto 22px;border-radius:10px}
  .gm-news-hero figcaption{padding:9px 12px;font-size:12px}
}


/* =====================================================================
   PART 6 — Homepage  (.gm-home)
   =====================================================================
   Styles for the GreenMethods Shopify homepage. Everything is scoped to
   the .gm-home wrapper, so it never touches product pages (.gm-page-root),
   Learn pages (.gm-edt-*) or the Glossary (.gm-gt-*). Its CSS variables
   (--green-*, --amber, etc.) are local to .gm-home and do NOT collide
   with the --gm-* tokens used elsewhere in this file.

   Pair this with the Custom Liquid HTML block on the Home template.
   ===================================================================== */

/* Full-window breakout — escapes the theme's narrow section container so
   the homepage spans edge to edge (same trick as .gm-page-root). The inner
   .gm-home .wrap re-centers content at a readable max-width (1600px). */
.gm-home{
  width:100vw !important; 
  max-width:100vw !important;;
  position:relative !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
/* (the header/hero hairline fix is the solid background-color added to
   .gm-home .hero — see the .hero rule in PART 6) */
.gm-home{
  --green-deepest:#2e3d2f; --green-dark:#3f5240; --green:#5a6c57; --green-mid:#689374; --green-light:#85a98f;
  --sage-bg:#eaf0e2; --sage-soft:#f5f7f2; --cream:#fbf8ef; --bg:#faf9f1;
  --amber:#c9a227; --amber-light:#fcecb6; --clay:#b35932; --clay-light:#f6e2d6;
  --ink:#15181a; --ink-2:#384038; --muted:#6e7669; --rule:#dee3d6; --card:#fff;
  --gh-green:#7db343;
}
/* ----- font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important; ---- */
.gm-home *{margin:0;padding:0;box-sizing:border-box}.gm-home{
background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}.gm-home a{text-decoration:none;color:inherit}.gm-home img{max-width:100%;display:block}.gm-home .wrap{max-width:1200px;margin:0 auto;padding:0 28px}@media(max-width:680px){.gm-home .wrap{padding:0 18px}}.gm-home /* ===== Existing Shopify Horizon theme chrome — black header ===== */
.sh-header{background:#000;color:#fff;position:sticky;top:0;z-index:60}.gm-home .sh-wrap{max-width:1500px;margin:0 auto;padding:0 36px;height:80px;display:flex;align-items:center;gap:30px}.gm-home .sh-logo{display:flex;align-items:center;gap:11px;color:#fff;margin-left:auto}.gm-home .sh-logo .lm{width:34px;height:34px;flex-shrink:0}.gm-home .sh-logo .lt{display:flex;flex-direction:column;line-height:1}.gm-home .sh-logo .l1{font-size:23px;font-weight:800;letter-spacing:-.02em;color:#fff}.gm-home .sh-logo .l1 .com{font-weight:500}.gm-home .sh-logo .l2{font-size:9px;letter-spacing:.02em;color:#cfcfcf;margin-top:4px;align-self:flex-end;text-align:right}.gm-home .sh-logo .l2 b{font-weight:700;color:#fff}.gm-home .sh-logo .l2 .ag{display:block;color:var(--gh-green);font-weight:700;letter-spacing:.06em;margin-top:1px}.gm-home .sh-nav{display:flex;gap:21px;font-size:14px;font-weight:500;color:#fff}.gm-home .sh-nav a{white-space:nowrap;transition:.15s}.gm-home .sh-nav a:hover{text-decoration:underline;text-underline-offset:3px}.gm-home .sh-ic{display:flex;align-items:center;gap:22px;color:#fff;margin-left:auto}.gm-home .sh-ic svg{width:20px;height:20px;cursor:pointer}@media(max-width:1100px){.gm-home .sh-nav{display:none}.gm-home .sh-logo{margin-left:0}}.gm-home /* ===== black footer ===== */
.sh-foot{background:#000;color:#fff}.gm-home .sh-foot-news{max-width:1180px;margin:0 auto;padding:44px 36px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}.gm-home .sh-foot-news h3{font-size:23px;font-weight:700;letter-spacing:-.01em;color:#fff}.gm-home .sh-foot-form{display:flex;align-items:center;gap:8px;background:#c9c9c9;border:none;border-radius:999px;padding:7px 10px 7px 26px;min-width:340px;flex:1;max-width:520px}.gm-home .sh-foot-form input{flex:1;background:none;border:none;color:#1a1a1a;font-family:inherit;font-size:15px;outline:none}.gm-home .sh-foot-form input::placeholder{color:#6f6f6f}.gm-home .sh-foot-form button{width:38px;height:38px;border-radius:50%;background:transparent;color:#1a1a1a;border:none;cursor:pointer;display:grid;place-items:center;flex-shrink:0}@media(max-width:680px){.gm-home .sh-foot-news{justify-content:center;text-align:center}.gm-home .sh-foot-news h3{font-size:20px}.gm-home .sh-foot-form{min-width:0;width:100%}}.gm-home /* ===== HERO ===== */
/* NOTE: the header white-hairline fix lives in the Custom Liquid section as an
   unscoped <style> (.header__underlay), because rules in this file get scoped
   under .gm-home and the theme header sits outside .gm-home. */
.hero{position:relative;margin-top:-10px;background:#2e3d2f radial-gradient(120% 120% at 20% 0%,#3f5240,#2e3d2f 55%,#222d23);color:#fff;overflow:hidden;padding:54px 0 32px}.gm-home .hero .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5}.gm-home .hero .b1{width:520px;height:520px;right:-120px;top:-80px;background:radial-gradient(circle,rgba(133,169,143,.5),transparent 65%)}.gm-home .hero .b2{width:360px;height:360px;left:-80px;bottom:-120px;background:radial-gradient(circle,rgba(201,162,39,.28),transparent 65%)}.gm-home .hero .wrap{position:relative}.gm-home .hero .tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-light);border:1px solid rgba(252,236,182,.3);padding:6px 13px;border-radius:999px;margin-bottom:14px}.gm-home .hero .tag-bottom{margin-bottom:0;margin-top:22px}.gm-home .hero .tag .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(201,162,39,.25)}.gm-home .hero h1{font-size:52px;line-height:1;letter-spacing:-.04em;font-weight:900;text-transform:uppercase;white-space:nowrap}.gm-home .hero h1 .out{color:var(--green-light);display:inline}.gm-home .hero h1 .fill{color:#fff;display:inline}.gm-home .hero h1 .fill em{font-style:normal;color:var(--green-light)}.gm-home .wayword{position:relative;display:inline-block}.gm-home .wasp{position:absolute;top:-.72em;right:-.52em;width:1.72em;height:auto;display:block;pointer-events:none;transform-origin:center bottom;filter:drop-shadow(0 6px 9px rgba(0,0,0,.35))}.gm-home .hero p{font-size:16px;color:#cdd8c4;max-width:800px;margin:13px 0 18px;line-height:1.5;text-align:justify}.gm-home .hero .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.gm-home .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;padding:13px 24px;border-radius:999px;transition:.18s}.gm-home .btn-amber{background:var(--amber);color:var(--green-deepest)}.gm-home .btn-amber:hover{background:var(--amber-light);transform:translateY(-2px)}.gm-home .btn-out{color:#fff;border:1.5px solid rgba(255,255,255,.35);padding:12px 22px}.gm-home .btn-out:hover{border-color:#fff;background:rgba(255,255,255,.06)}.gm-home .hero .scrollnote{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}.gm-home .hero .scrollnote .s{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#bcc8b1}.gm-home .hero .scrollnote .s b{color:#fff;font-weight:700}.gm-home .hero .scrollnote .s>div{line-height:1.2}.gm-home .hero .scrollnote .s .ic{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--amber-light)}@media(max-width:900px){.gm-home .hero h1{font-size:40px;white-space:normal}.gm-home .hero{padding:40px 0 34px}}@media(max-width:540px){.gm-home .hero h1{font-size:30px}.gm-home .wasp{top:-.6em;right:-.44em;width:1.5em}}.gm-home /* ===== Section heads ===== */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:20px}.gm-home .section-head h2{font-size:30px;font-weight:800;letter-spacing:-.025em;color:var(--green-deepest)}.gm-home .section-head a.more{font-size:14px;font-weight:600;color:var(--green-dark);white-space:nowrap}.gm-home .section-head a.more:hover{color:var(--clay)}.gm-home /* ===== Shop by solution ===== */
.cats{padding:60px 0 8px}.gm-home .cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.gm-home .cat{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:20px 16px;text-align:center;transition:.18s}.gm-home .cat:hover{transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(46,61,47,.45);border-color:var(--green-light)}.gm-home .cat .ic{width:46px;height:46px;margin:0 auto 12px;border-radius:12px;display:grid;place-items:center;background:var(--sage-bg);color:var(--green-dark)}.gm-home .cat span{font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.3}@media(max-width:900px){.gm-home .cat-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:540px){.gm-home .cat-grid{grid-template-columns:repeat(2,1fr)}}.gm-home /* ===== Grower favourites ===== */
.products{padding:48px 0}.gm-home .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.gm-home .card{background:var(--card);border:1px solid var(--rule);border-radius:18px;overflow:hidden;transition:.2s;display:flex;flex-direction:column}.gm-home .card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(46,61,47,.5);border-color:var(--green-light)}.gm-home .card .thumb{aspect-ratio:1/1;position:relative;display:grid;place-items:center}.gm-home .card .thumb svg{width:58%;height:58%;opacity:.92}.gm-home .badge{position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px}.gm-home .badge-best{background:var(--amber-light);color:#5a4500}.gm-home .badge-new{background:var(--green-mid);color:#fff}.gm-home .badge-eco{background:var(--clay-light);color:var(--clay)}.gm-home .card .body{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1}.gm-home .card .kicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-mid)}.gm-home .card h3{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25}.gm-home .card .target{font-size:13px;color:var(--muted);flex:1}.gm-home .card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.gm-home .card .price{font-size:18px;font-weight:800;color:var(--green-deepest);letter-spacing:-.02em}.gm-home .card .add{width:40px;height:40px;border-radius:11px;background:var(--green-dark);color:#fff;display:grid;place-items:center;transition:.18s}.gm-home .card .add:hover{background:var(--green-deepest)}@media(max-width:900px){.gm-home .prod-grid{grid-template-columns:repeat(2,1fr)}}.gm-home /* ===== Consult recommender ===== */
.btn-primary{background:var(--green-dark);color:var(--cream)}.gm-home .btn-primary:hover{background:var(--green-deepest);transform:translateY(-1px)}.gm-home .consult{padding:40px 0 70px}.gm-home .consult .box{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--rule);border-radius:24px;overflow:hidden;background:#fff}.gm-home .consult .left{padding:46px}.gm-home .consult .left .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);margin-bottom:14px}.gm-home .consult .left h2{font-size:32px;font-weight:800;letter-spacing:-.025em;color:var(--green-deepest);line-height:1.08}.gm-home .consult .left p{color:var(--ink-2);font-size:16px;margin:16px 0 26px;max-width:34em}.gm-home .consult .right{background:radial-gradient(90% 80% at 30% 20%,rgba(133,169,143,.45),transparent),linear-gradient(160deg,var(--sage-bg),var(--sage-soft));position:relative;display:grid;place-items:center}.gm-home .consult .right svg{width:55%;opacity:.9}@media(max-width:900px){.gm-home .consult .box{grid-template-columns:1fr}.gm-home .consult .right{min-height:220px}}.gm-home /* ===== Learn BioControl & IPM — auto-scrolling carousel ===== */
.learn-carousel{padding:50px 0 72px;overflow:hidden}.gm-home .learn-carousel .wrap{margin-bottom:22px}.gm-home .section-head p.sub{color:var(--muted);font-size:15px;margin-top:6px}.gm-home .lc-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.gm-home .lc-track{display:flex;width:max-content;animation:lc-scroll 80s linear infinite}.gm-home .lc-viewport:hover .lc-track{animation-play-state:paused}@keyframes lc-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}.gm-home .lc-card{flex:0 0 268px;margin-right:18px;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:11px;min-height:176px;transition:transform .18s,box-shadow .18s,border-color .18s}.gm-home .lc-card:hover{border-color:var(--green-light);box-shadow:0 16px 30px -20px rgba(46,61,47,.45);transform:translateY(-3px)}.gm-home .lc-ic{width:40px;height:40px;border-radius:11px;background:var(--sage-bg);color:var(--green-dark);display:grid;place-items:center}.gm-home .lc-kicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-mid)}.gm-home .lc-card h3{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3;flex:1;letter-spacing:-.01em}.gm-home .lc-read{font-size:13px;font-weight:700;color:var(--green-dark);display:inline-flex;align-items:center;gap:6px}.gm-home .lc-card:hover .lc-read{color:var(--clay)}@media(prefers-reduced-motion:reduce){.gm-home .lc-track{animation:none}}.gm-home /* ===== Products carousel (contained,.gm-home slow,.gm-home arrows) ===== */
.pc-head-arrows{display:flex;gap:8px}.gm-home .pc-arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--rule);background:#fff;color:var(--green-dark);cursor:pointer;display:grid;place-items:center;transition:.15s}.gm-home .pc-arrow:hover{background:var(--sage-bg);border-color:var(--green-light)}.gm-home .pc-arrow:active{transform:scale(.94)}.gm-home .pc-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 98.5%,transparent);mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 98.5%,transparent)}.gm-home .pc-track{display:flex;will-change:transform}.gm-home .pc-track .card{flex:0 0 280px;margin-right:22px}@media(max-width:680px){.gm-home .pc-track .card{flex:0 0 232px;margin-right:16px}}.gm-home /* ===== Learn BioControl & IPM — static card ===== */
.learn-card-sec{padding:8px 0 72px}.gm-home .learn-card{display:grid;grid-template-columns:1fr 1.15fr;border:1px solid var(--rule);border-radius:24px;overflow:hidden;background:#fff}.gm-home .lcd-left{padding:44px}.gm-home .lcd-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-mid);margin-bottom:14px}.gm-home .learn-card h2{font-size:30px;font-weight:800;letter-spacing:-.025em;color:var(--green-deepest);line-height:1.1}.gm-home .lcd-left p{color:var(--ink-2);font-size:16px;margin:14px 0 24px;max-width:36ch}.gm-home .lcd-right{padding:30px 38px;display:grid;grid-template-columns:1fr 1fr;gap:2px 30px;align-content:center;background:var(--sage-soft)}.gm-home .lcd-right a{font-size:13.7px;color:var(--ink-2);padding:8px 0;border-bottom:1px solid var(--rule);transition:.15s;display:flex;align-items:center;gap:9px}.gm-home .lcd-right a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0}.gm-home .lcd-right a:hover{color:var(--green-dark)}@media(max-width:760px){.gm-home .learn-card{grid-template-columns:1fr}.gm-home .lcd-right{grid-template-columns:1fr}}.gm-home /* ===== Bottom menu cards (Learn + Plant Pests) ===== */
.menu-cards-sec{padding:8px 0 72px}.gm-home .menu-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}.gm-home .menu-card{border:1px solid var(--rule);border-radius:24px;background:#fff;display:flex;flex-direction:column;overflow:hidden}.gm-home .mc-head{padding:32px 34px 14px}.gm-home .mc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-mid);margin-bottom:10px}.gm-home .menu-card h2{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--green-deepest);line-height:1.12}.gm-home .mc-head p{color:var(--ink-2);font-size:14.5px;margin-top:8px;max-width:42ch}.gm-home .mc-list{padding:4px 34px 8px;display:grid;grid-template-columns:1fr 1fr;gap:0 26px}.gm-home .mc-list a{font-size:13.6px;color:var(--ink-2);padding:8px 0;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:9px;text-decoration:none;transition:.15s}.gm-home .mc-list a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0}.gm-home .mc-list a:hover{color:var(--green-dark)}.gm-home .mc-foot{margin-top:auto;padding:16px 34px 28px}.gm-home .mc-foot a{font-size:13.5px;font-weight:700;color:var(--green-dark);display:inline-flex;align-items:center;gap:7px;text-decoration:none}.gm-home .mc-foot a:hover{color:var(--clay)}@media(max-width:860px){.gm-home .menu-cards{grid-template-columns:1fr}}@media(max-width:480px){.gm-home .mc-list{grid-template-columns:1fr}}


/* ---- Real Shopify product cards (Liquid loop in the Products carousel) ---- */
.gm-home .card{position:relative}
.gm-home .card-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.gm-home .card .thumb{background:#fff}
.gm-home .card .thumb img{width:100%;height:100%;object-fit:contain;padding:14px}
.gm-home .pc-add-form{position:absolute;right:18px;bottom:16px;margin:0}


/* =====================================================================
   PART 7 — Collection pages
   Header band (collection image + title + metafield snippet) and the
   "More Information" disclosure. Reuses existing components:
     .gm-edt-more   -> the collapsible (rotating amber arrow)
     .gm-edt-prose  -> the description body typography
   Only the header-band classes below are new; everything else is reused.
   ===================================================================== */
.gm-col-headsec .gm-page{max-width:90rem!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;padding-bottom:8px}
.gm-col-head{display:flex;gap:30px;align-items:center;padding-top:6px}
.gm-col-head-img{flex:0 0 230px;max-width:230px}
.gm-col-head-img img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:1px solid var(--gm-rule);box-shadow:0 8px 24px rgba(20,30,15,.12)}
.gm-col-head-text{flex:1;min-width:0}
.gm-col-title{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--gm-green-deepest);line-height:1.1;margin:0 0 12px}
.gm-col-title::before{content:"";display:block;width:46px;height:3px;background:var(--gm-amber);margin:0 0 14px}
.gm-col-snippet{font-size:17px;line-height:1.55;color:var(--gm-ink-2);max-width:none}
.gm-col-snippet p{margin:0 0 10px}
.gm-col-snippet p:last-child{margin-bottom:0}
.gm-col-more-body{padding:6px 2px 2px}
.gm-col-more-body .gm-edt-prose{max-width:none}
@media(max-width:760px){
  .gm-col-head{flex-direction:column;align-items:flex-start;gap:18px}
  .gm-col-head-img{flex-basis:auto;max-width:180px}
  .gm-col-title{font-size:27px}
  .gm-col-snippet{font-size:15.5px}
}

/* Collection header width matches the native product grid; product grid gets the
   same cream background as the header band (#faf9f1). */
@media(max-width:1460px){.gm-col-headsec .gm-page{padding-left:20px!important;padding-right:20px!important}}
.product-grid-container{background-color:#faf9f1!important}

/* "Products in this Collection" heading — its own Custom Liquid block placed
   directly above the product grid; aligns to the grid width via .gm-col-headsec. */
.gm-col-prodhead .gm-page{padding-top:6px;padding-bottom:0}
.gm-col-products-h{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--gm-green-deepest);line-height:1.2;margin:0}
.gm-col-products-h::before{content:"";display:block;width:40px;height:3px;background:var(--gm-amber);margin:0 0 12px}

/* ---- Uniform homepage product cards (equal height, aligned title/price/add) ---- */
.gm-home .pc-track{align-items:stretch}
.gm-home .pc-track .card{display:flex;flex-direction:column}
.gm-home .card .body{flex:1 1 auto;display:flex;flex-direction:column}
.gm-home .card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;margin:0}
.gm-home .card .target{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.gm-home .card .foot{margin-top:auto}
.gm-home .card .thumb img{object-fit:contain;padding:12px}

/* ---- Shop by Category: dynamic collection carousel ---- */
.gm-home .cc-viewport{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px 8px}
.gm-home .cc-viewport::-webkit-scrollbar{display:none}
.gm-home .cat-card{scroll-snap-align:start;flex:0 0 200px;background:var(--card);border:1px solid var(--rule);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-align:center;transition:transform .18s,box-shadow .18s,border-color .18s}
.gm-home .cat-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(46,61,47,.45);border-color:var(--green-light)}
.gm-home .cat-thumb{aspect-ratio:1/1;background:var(--sage-soft);display:grid;place-items:center;overflow:hidden}
.gm-home .cat-thumb img{width:100%;height:100%;object-fit:contain;padding:16px}
.gm-home .cat-name{padding:12px 10px 16px;font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.3}
.gm-home .cc-foot{text-align:right;margin-top:14px}
@media(max-width:680px){.gm-home .cat-card{flex-basis:150px}}

/* ------ For the products page description ----*/

.gm-content-products{--gm-green:#6DC189;--gm-green-dark:#5A6C57;--gm-text:#333333;--gm-muted:#6b6b6b;--gm-border:#e5e5e5;--gm-bg-head:#f5f5f5;--gm-row-alt:#F9F9F9;
 color:var(--gm-text);width:100%!important;max-width:100%!important;min-width:0!important;display:block!important;box-sizing:border-box!important;margin:24px 0!important;float:none!important;flex:1 1 100%!important}
/* ------  font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; ----*/
.gm-content-products *{box-sizing:border-box}
.gm-content-products h2{font-size:22px;font-weight:700;color:var(--gm-green-dark);margin:28px 0 14px;padding:10px 14px 10px 16px;background:var(--gm-bg-head);border-left:4px solid var(--gm-green);border-radius:3px;letter-spacing:.2px;line-height:1.3}
.gm-content-products h2:first-child{margin-top:0}
.gm-content-products h3{font-size:18px;margin:22px 0 10px;color:var(--gm-green-dark);font-weight:700;line-height:1.35}
.gm-content-products p{font-size:15px;line-height:1.65;margin:0 0 14px;color:var(--gm-text);text-align:left}
.gm-content-products a{color:var(--gm-green-dark);text-decoration:underline;font-weight:500}
.gm-content-products a:hover{color:var(--gm-green)}
.gm-content-products ul{margin:0 0 16px;padding-left:22px}
.gm-content-products ul li{font-size:15px;line-height:1.7;margin-bottom:8px;color:var(--gm-text)}
.gm-content-products ul li p{margin:0;text-align:left}
.gm-content-products 
.gm-important{font-weight:700;color:var(--gm-green-dark);margin-top:18px}
.gm-content-products 
.gm-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 18px}
.gm-content-products 
.gm-release-table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0;border:1px solid #cfd8d2}
.gm-content-products .gm-release-table th,.gm-content-products .gm-release-table td{border:1px solid #cfd8d2;padding:10px 14px;text-align:left;vertical-align:middle}
.gm-content-products .gm-release-table thead th{background:var(--gm-green);color:#fff;font-weight:700;letter-spacing:.3px;text-transform:uppercase;font-size:13px}
.gm-content-products .gm-release-table tbody tr:nth-child(2n) td{background:var(--gm-row-alt)}
@media(max-width:900px){.gm-content-products{margin:18px 0!important}.gm-content-products h2{font-size:20px;padding:9px 12px 9px 14px;margin:22px 0 12px}
.gm-content-products h3{font-size:17px;margin:20px 0 10px}
.gm-content-products p,.gm-content-products ul li{font-size:14.5px;line-height:1.6}}
@media(max-width:600px){.gm-content-products h2{font-size:18px;padding:9px 10px 9px 12px;border-left-width:3px}
.gm-content-products h3{font-size:16px;margin:18px 0 8px}.gm-content-products p,.gm-content-products ul li{font-size:14px;line-height:1.6;text-align:left}
.gm-content-products ul{padding-left:18px}.gm-content-products .gm-release-table{font-size:13.5px}.gm-content-products .gm-release-table th,.gm-content-products .gm-release-table td{padding:8px 10px}}
@media(max-width:380px){.gm-content-products h2{font-size:17px}.gm-content-products h3{font-size:15.5px}
.gm-content-products .gm-release-table th,.gm-content-products .gm-release-table td{padding:7px 8px;font-size:13px}}
.gm-content-products .gm-video-wrap{max-width:720px;margin:20px auto}
.gm-content-products .gm-video-container{position:relative!important;width:100%!important;padding-bottom:56.25%!important;height:0!important;overflow:hidden!important;margin:20px 0!important}
.gm-content-products .gm-video-container iframe{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;border:0!important}
/* ============================================================
   Fly Parasite Calculator . The !important on the button color
   and text-decoration is required to beat the theme's global
   link styles (.gm-page-root .gm-sec a), which otherwise turn
   the button text dark green + underlined and unreadable.
   ============================================================ */
.gm-calc-cta{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin:20px 0 0;
  clear:both;
  background:linear-gradient(135deg,#eef3e8,#f5f7f2 70%);
  border:1px solid var(--gm-rule,#dee3d6);
  border-left:5px solid var(--gm-green-deepest,#2e3d2f);
  border-radius:14px;
  padding:20px 24px;
  box-shadow:0 6px 20px rgba(46,61,47,.08);
}
.gm-calc-cta-text{flex:1 1 320px; min-width:0}
.gm-calc-cta-kicker{
  margin:0 0 5px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gm-clay,#b35932);
}
.gm-calc-cta-title{
  margin:0 0 6px;
  font-size:21px;
  font-weight:800;
  line-height:1.2;
  color:var(--gm-green-deepest,#2e3d2f);
}
.gm-calc-cta-sub{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:var(--gm-muted,#6b6b6b);
}
.gm-calc-cta-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--gm-green-deepest,#2e3d2f);
  color:#fff !important;
  font-size:15px;
  font-weight:700;
  text-decoration:none !important;
  line-height:1;
  padding:15px 24px;
  border-radius:11px;
  box-shadow:0 4px 14px rgba(46,61,47,.25);
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.gm-calc-cta-btn svg{transition:transform .2s ease}
.gm-calc-cta-btn:hover{
  background:var(--gm-clay,#b35932);
  color:#fff !important;
  box-shadow:0 6px 18px rgba(179,89,50,.32);
  transform:translateY(-1px);
}
.gm-calc-cta-btn:hover svg{transform:translateX(4px)}
.gm-calc-cta-btn:focus-visible{outline:3px solid var(--gm-amber,#c9a227); outline-offset:3px}
@media (max-width:680px){
  .gm-calc-cta{padding:18px; gap:16px}
  .gm-calc-cta-title{font-size:19px}
  .gm-calc-cta-btn{width:100%; justify-content:center; padding:14px 20px}
}
/* ---------- Floating "Fly Parasite Calculator" button ----------------
   Reuses .gm-calc-cta-btn for the look. Fixed in the bottom-right,
   shown on page load, and lifted ABOVE the site's chat launcher so the
   two don't overlap. Page-scoped: only renders where this markup is.
   TUNE: the 96px below = how high the button sits above the corner.
   If your chat bubble is taller and still overlaps, raise 96px. */
.gm-calc-float{
  position:fixed;
  right:max(20px,env(safe-area-inset-right,20px));
  bottom:calc(env(safe-area-inset-bottom,0px) + 96px);   /* clears the chat bubble */
  z-index:50;
}
.gm-calc-float .gm-calc-cta-btn{ box-shadow:0 8px 22px rgba(20,30,15,.32) }
@media (max-width:680px){
  .gm-calc-float{
    right:max(14px,env(safe-area-inset-right,14px));
    bottom:calc(env(safe-area-inset-bottom,0px) + 84px);
  }
  .gm-calc-float .gm-calc-cta-btn{ padding:13px 18px; font-size:14px }
}