@charset "UTF-8";
/* == ggf-pro-css == */
/* public profile page */
.ggf-prof-hero{display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:linear-gradient(120deg,#14361c,#2E7D32 72%,#3f9245);border-radius:18px;padding:24px 28px;color:#fff;box-shadow:0 12px 34px rgba(20,54,28,.26);margin:6px 0 18px}
.ggf-prof-av .ggf-av{width:88px!important;height:88px!important;font-size:34px;border:3px solid rgba(255,255,255,.7)}
.ggf-prof-name{color:#fff;font-size:1.6rem;margin:0 0 4px}
.ggf-prof-meta{color:#d7ecd7;font-size:.9rem;margin:0}
.ggf-prof-bio{color:#eaf4ea;font-size:.92rem;margin:8px 0 0;max-width:60ch}
.ggf-prof-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px}
@media(max-width:560px){.ggf-prof-stats{grid-template-columns:repeat(2,1fr)}}
.ggf-prof-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;box-shadow:0 4px 14px rgba(20,45,25,.06)}
.ggf-prof-stat b{display:block;font-size:1.5rem;color:var(--f);font-weight:800;line-height:1}
.ggf-prof-stat span{font-size:.72rem;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.ggf-prof-plants{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.ggf-prof-plant{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.88rem;color:var(--f);font-weight:600}
.ggf-react{display:flex;gap:8px;margin-top:12px}
.ggf-rx{background:#F6F7F6;border:1px solid #DCE3DC;border-radius:999px;padding:4px 12px;cursor:pointer;font-size:15px;line-height:1.4}
.ggf-rx.on{background:#EAF4EA;border-color:#2E7D32}
.ggf-rx .c{font-weight:700;color:#256C29;font-size:13px}
.ggf-sol{margin-top:10px;font-weight:700;color:#256C29}.ggf-sol-btn{display:inline-block;margin-top:10px;font-weight:700;color:#2E7D32;cursor:pointer}
.ggf-solved{font-size:.62rem;background:#EAF4EA;color:#256C29;padding:2px 8px;border-radius:999px;font-weight:700;vertical-align:middle}
.ggf-searchbar{display:flex;gap:8px;margin:0 0 16px}.ggf-searchbar input{flex:1;padding:10px 14px;border:2px solid #DCE3DC;border-radius:999px;font-size:1rem}
.ggf-pagehead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 16px}
.ggf-head-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
/* search = identical to the site header search (pill + green magnifier) */
.ggf-hsearch{display:flex !important;align-items:center !important;height:40px !important;background:#f1f6ef !important;border:1.5px solid #dbe8d7 !important;border-radius:10px !important;padding:0 5px 0 14px !important;gap:9px !important;box-sizing:border-box !important;flex:0 1 320px;max-width:320px;box-shadow:none !important}
.ggf-hsearch:focus-within{border-color:#2e7d32 !important;box-shadow:0 0 0 3px rgba(46,125,50,.12) !important;background:#fff !important}
.ggf-hsearch input,.ggf-hsearch input[type=search]{flex:1 !important;min-width:0 !important;border:0 !important;background:transparent !important;outline:none !important;font-size:14px !important;color:#1d3a28 !important;height:100% !important;margin:0 !important;padding:0 !important;box-shadow:none !important}
.ggf-hsearch input::placeholder{color:#8a9b88 !important}
.ggf-hsearch button{width:32px !important;height:30px !important;min-width:32px !important;flex:0 0 auto !important;border:0 !important;border-radius:8px !important;background:#2e7d32 !important;color:#fff !important;cursor:pointer;display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;margin:0 !important;box-shadow:none !important}
.ggf-hsearch button:hover{background:#1b5e20 !important}
.ggf-hsearch button svg{display:block}
.ggf-sh svg{display:block}
/* notification bell (where the search button used to be) */
.ggf-bell{position:relative}
.ggf-bell>summary{list-style:none;width:40px;height:40px;border:1.5px solid #dbe8d7;border-radius:10px;background:#f1f6ef;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;position:relative}
.ggf-bell>summary::-webkit-details-marker{display:none}
.ggf-bell>summary:hover{border-color:#2e7d32}
.ggf-bellN{position:absolute;top:-7px;right:-7px;background:#E2683B;color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}
.ggf-bell-pop{position:absolute;right:0;top:48px;width:300px;max-width:84vw;background:#fff;border:1px solid #DCE3DC;border-radius:12px;box-shadow:0 18px 50px rgba(27,94,32,.18);z-index:200;padding:6px 0;max-height:60vh;overflow-y:auto}
.ggf-bell-pop ul{list-style:none;margin:0;padding:0}
.ggf-bell-pop li{padding:9px 14px;border-bottom:1px solid #ECEFEC;font-size:14px}.ggf-bell-pop li:last-child{border-bottom:0}
.ggf-bell-pop small{color:#5C6B5C}.ggf-bell-empty{padding:14px;color:#5C6B5C;margin:0}
/* social share row (forum topic — like blog posts) */
.ggf-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.ggf-share-lbl{font-weight:700;color:#1B5E20;font-size:14px;line-height:36px}
/* the round icons sit together as one tidy group.
   2026-08-23 (UI) — flex-wrap added. .ggf-share above already wraps, but this INNER group did not,
   so the whole strip of icons was one unbreakable flex item. Measured at 360px on a topic page:
   .ggf-sh-row ran x24..456 inside a 360px viewport, and the page does not scroll sideways — so the
   last three share buttons were simply off-screen and untappable on a phone. Wrapping costs nothing
   on desktop (the row is far narrower than the column there) and gives the phone a second line. */
.ggf-sh-row{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:8px}
.ggf-sh{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;border:0;cursor:pointer;font-size:15px;text-decoration:none}
/* icons that come from the shared gg_share_networks() list carry no width/height of their own,
   and the outline ones (Email) paint with currentColor — the theme's link colour must not win */
.ggf-sh{color:#fff !important}
.ggf-sh svg{width:18px;height:18px;display:block}
.ggf-sh i{font-size:16px;line-height:1}
.ggf-sh i{color:#fff}
/* brand colours: printed once from gg_share_networks() as .gg-sh-<key> (gg-share-pop.php) */
.ggf-sh:hover{opacity:.85}
/* copy-link = colorful pill CTA, same 36px height as the icons so the row stays level */
.ggf-copy{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;
  border-radius:999px;background:#0aa37f;color:#fff;border:0;font-weight:700;font-size:13px;cursor:pointer;line-height:1}
.ggf-copy:hover{background:#08866a}
.ggf-copy svg{display:block;color:#fff}
@media(max-width:560px){.ggf-pagehead{flex-direction:column;align-items:stretch}.ggf-head-tools{justify-content:space-between}.ggf-hsearch{flex:1;max-width:none}}
.ggf-notes{background:#fff;border:1px solid #DCE3DC;border-radius:12px;padding:10px 16px;margin:0 0 16px}
.ggf-notes summary{font-weight:700;color:#1B5E20;cursor:pointer}.ggf-badgeN{background:#E2683B;color:#fff;border-radius:999px;padding:1px 8px;font-size:.75rem}
.ggf-notes ul{list-style:none;margin:10px 0 0;padding:0}.ggf-notes li{padding:6px 0;border-bottom:1px solid #ECEFEC}
.ggf-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.ggf-mini{list-style:none;margin:0;padding:0}.ggf-mini li{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #ECEFEC}.ggf-mini small{margin-left:auto;color:#5C6B5C}
.ggf-profhead{display:flex;align-items:center;gap:18px;margin:0 0 16px}
@media(max-width:640px){.ggf-cols{grid-template-columns:1fr}}
/* == ggbuyrow-css == */
.gg-buyseeds-row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:10px 0;}
.gg-buyseeds-row br{display:none;}            /* the flex row does the wrapping now */
.gardeningguider-entrycontent .gg-buyseeds-row a.gg-buy,
.gg-buyseeds-row a.gg-buy{
  display:inline-flex !important;align-items:center;
  min-height:24px;padding:3px 2px;             /* 19px text + padding = 25px target */
  line-height:1.3;text-decoration:underline;text-underline-offset:2px;}
.gg-buyseeds-row a.gg-buy:focus-visible{outline:3px solid #2E7D32;outline-offset:2px;border-radius:6px;}
@media(max-width:600px){
  /* on a phone the row goes one-per-line, and 10px of separation keeps two 24px targets apart */
  .gg-buyseeds-row{gap:10px 12px;}
}
/* == ggf-askg-css == */
.ggf-askg{border:1px dashed var(--line);border-radius:10px;padding:10px 14px;margin:0 0 14px;background:#fbfdf9}
.ggf-askg summary{font-weight:700;color:var(--f);cursor:pointer}
.ggf-gctx{background:linear-gradient(135deg,#f1f8e9,#eaf4ea);border:1px solid #d4e6cf;border-left:4px solid var(--g);border-radius:0 12px 12px 0;padding:12px 16px;margin:0 0 14px}
.ggf-gctx-h{font-weight:800;color:var(--f);font-size:.9rem;margin-bottom:8px}
.ggf-gctx-row{display:flex;flex-wrap:wrap;gap:8px}
.ggf-gctx-chip{background:#fff;border:1px solid #d4e6cf;border-radius:999px;padding:4px 12px;font-size:.82rem;font-weight:600;color:var(--f)}
.ggf-gctx-notes{margin-top:8px;font-size:.85rem;color:var(--mut);line-height:1.5}
/* == ggstickylast-css == */
@media (min-width:1025px){
  /* the pin. 96px clears the fixed header; the widget keeps its normal card look. */
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets{
    position:sticky;top:96px;z-index:2;}
  /* the theme hides the inner box on some templates — it is a real card here */
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets .gardeningguider-sidebar-sticky{
    display:block;position:static;top:auto;}
  /* MEASURED BLOCKER: position:sticky is dead inside any ancestor whose overflow is not visible, and
     all three of these carried overflow:hidden (the theme uses it to contain the two floated
     columns). display:flow-root contains floats exactly the same way but leaves overflow visible,
     so the pin works and the column layout is untouched.
     `.gardeningguider-content-main-section` is the homepage's own row and carries it too — that is
     why the card still ran away on the homepage after the other two were fixed. */
  .gardeningguider-content-main-section,
  .gardeningguider-sitemaincontent,
  .gardeningguider-siteinner{overflow:visible;display:flow-root;}
  .gardeningguider-primarysidebar,
  .gardeningguider-primarycontentarea{overflow:visible;}
  /* the theme also puts position:sticky on the whole widget column. With both pinning, the card
     landed at viewport top (under the fixed header) instead of the 96px we ask for — so the column
     goes back to normal flow and only the one widget pins. */
  .gardeningguider-primarysidebar{position:static;}
  /* A pinned box with a live `backdrop-filter` (gg-glass puts blur(11px) on every .widget) has to
     re-blur the whole page behind it on every scroll frame — that is the second half of the
     flicker Gaurav saw, and on an ad card the frosted look buys nothing. Blur off, and the box gets
     its own compositor layer so scrolling never repaints it. */
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    will-change:transform;transform:translateZ(0);}
}
/* == ggsidebaradsticky-css == */
.gg-sas-rec{margin:0 0 22px;}
.gg-sas-rec-t{font-size:16px;line-height:1.3;margin:0 0 10px;color:var(--gg-forest,#1b5e20);font-weight:700;}
/* the pinned card is an ad now — no card chrome around it, the ad brings its own frame */
@media (min-width:1025px){
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets{background:none;border:0;padding:0;box-shadow:none;}
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets .gardeningguider-widgettit{display:none;}
  /* Card chrome off — the ad brings its own frame and label.
     NOTE (measured, do not "fix" by fiddling with padding): the unit renders 262px wide, and removing
     this padding did NOT change that — the sidebar COLUMN itself is ~262px. So the slot registered in
     gg-ad-manager as "300x600" has never actually had 300px, here or at its old spot on top. That is a
     revenue/layout call for Gaurav (widen the column, or register the slot as 160x600/responsive), not
     something to paper over in CSS. */
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets .gardeningguider-sidebar-sticky{
    padding:0;border:0;background:none;box-shadow:none;}
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets .gg-ad-slot{margin:0;}
}
/* SHORT SCREENS: a 600px ad + the 96px header offset needs ~720px of viewport. On a laptop shorter
   than that a pinned ad would eat most of the screen for the whole article, so below 760px tall it
   simply scrolls with the page instead of pinning. */
@media (min-width:1025px) and (max-height:759px){
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets{position:static;}
}
/* 🔴 MOBILE: no 300x600, ever (2026-08-28 — only visible once every slot was switched on).
   gg-ad-manager hides the sidebar ad under 992px through `.gg-sidebar-ad`, but this file MOVED half2
   into the pinned widget, which never carries that class — so the hide stopped matching and a
   600px-tall unit was rendering on 390px phones (home / post / tool / topic page, all measured).
   Google's density rule (an ad over ~30% of the viewport gets limited or blank serving) makes that a
   revenue bug, not a cosmetic one. Match the SLOT itself so the next move cannot break it again. */
@media (max-width:992px){
  .widget_gardeningguider_sticky_widgets .gg-ad-slot-half2,
  .gardeningguider-primarysidebar .gg-ad-slot-half2{display:none !important;}
}
/* == ggresponsive-css == */
/* ===== 1) KILL horizontal overflow (root cause: header right group wider than viewport) =====
   overflow-x:clip (not hidden) so position:sticky (forum sidebar) keeps working; the header fix
   below removes the real overflow source, clip is just a safety net. */
html{ overflow-x:clip; }
body{ max-width:100%; overflow-x:clip; }
/* header: keep logo + menu on ONE row (never wrap the logo onto its own line); just let it shrink.
   min-width:0 scoped to header wrappers only (a global *{min-width:0} can collapse other flex items). */
.gardeningguider-header2-top,.gardeningguider-headerinner,.gardeningguider-header2-right,
.gardeningguider-header2-social-media,.gardeningguider-headertopinner,.gardeningguider-headerbtminner{
  max-width:100% !important; min-width:0 !important; flex-wrap:nowrap !important;
}
.gardeningguider-header2-right,.gardeningguider-header2-social-media{ justify-content:flex-end; }

/* medium screens (desktop menu still shown): shrink the menu font/icons/gaps so the whole row
   fits without overflow instead of wrapping. Below the theme's own mobile breakpoint the hamburger
   takes over, so we don't touch that. */
.gardeningguider_menu .menu{ flex-wrap:nowrap !important; }   /* menu items never wrap to a new row */
@media (min-width:993px) and (max-width:1500px){
  .gardeningguider_menu .menu > li > a{ font-size:14px !important; padding:9px 8px !important; }
  .gardeningguider_menu .menu > li > a::before{ font-size:13px !important; }
  .gardeningguider-header2-right{ gap:8px !important; }
  .gg-lang-switch select.gg-lang-select{ max-width:110px; font-size:12px; }
}
/* tight laptop zone: shrink menu + make the language pill COMPACT (never hidden) so search + account
   still fit on one row (Gaurav: do not hide the language picker on laptops) */
@media (min-width:993px) and (max-width:1300px){
  .gardeningguider_menu .menu > li > a{ font-size:12.5px !important; padding:8px 5px !important; }
  .gardeningguider_menu .menu > li > a::before{ font-size:12px !important; }
  .gardeningguider-header2-right{ gap:6px !important; }
  .gg-lang-switch .gg-lang-globe{ display:none; }
  .gg-lang-switch select.gg-lang-select{ max-width:66px; font-size:11px; padding:4px 20px 4px 7px; }
}

/* ===== 2) media & wide blocks never exceed their box (all browsers) ===== */
img,svg,video,canvas,iframe,embed,object{ max-width:100%; height:auto; }
img[width],img[height]{ height:auto; }
table{ max-width:100%; }
pre,code{ white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
.gardeningguider-entrycontent table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }  /* wide tables scroll INSIDE, not the page */

/* ===== 3) box-sizing baseline so padding never causes overflow ===== */
*,*::before,*::after{ box-sizing:border-box; }

/* ===== 4) small screens: tidy header + tool spacing ===== */
@media (max-width:600px){
  .gardeningguider-entrycontent{ padding-left:12px !important; padding-right:12px !important; }
  .gardeningguider-header2-right .gg-lang-switch select.gg-lang-select{ max-width:110px; }
}
/* == ggf-engage-css == */
/* ===== HERO (compact) ===== */
.gg-forum-wrap .ggf-hero{background:linear-gradient(135deg,var(--g),var(--f));color:#fff;border-radius:14px;padding:14px 18px;margin:0 0 12px;box-shadow:0 8px 22px rgba(27,94,32,.18)}
.ggf-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ggf-hero-intro{min-width:0;flex:1 1 300px}
.ggf-hero-h1{color:#fff;font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem);margin:0 0 6px;line-height:1.15;font-weight:800}
.ggf-hero-sub{color:#EAF4EA;margin:0;font-size:.98rem;line-height:1.5;max-width:62ch}
.ggf-hero .ggf-head-tools{flex:0 0 auto;justify-content:flex-end;flex-wrap:nowrap}
.ggf-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:nowrap}
.ggf-hero .ggf-hsearch{flex:0 1 240px;background:rgba(255,255,255,.94) !important;border-color:transparent !important}
.ggf-hero .ggf-newbtn{background:var(--tr);box-shadow:0 4px 12px rgba(0,0,0,.20);white-space:nowrap}
.ggf-hero .ggf-newbtn:hover{background:var(--trd)}
/* stats strip (compact) */
.ggf-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ggf-stat{flex:1 1 0;min-width:78px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.20);border-radius:10px;padding:7px 10px;text-align:center}
.ggf-stat b{display:block;font-size:1.15rem;font-weight:800;color:#fff;line-height:1}
.ggf-stat span{display:block;font-size:.66rem;color:#DEEFDC;text-transform:uppercase;letter-spacing:.05em;margin-top:3px;font-weight:700}
/* young-community invitation (replaces zero stats) */
.ggf-founder{margin-top:10px;background:rgba(255,255,255,.14);border:1px dashed rgba(255,255,255,.45);border-radius:10px;padding:8px 14px;font-size:.88rem;color:#EAF4EA}
.ggf-founder b{color:#fff}
/* ===== CATEGORY CARDS (compact) ===== */
.ggf-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:8px;margin:0 0 12px}
.ggf-catcard{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:8px 10px;transition:transform .12s,box-shadow .12s,border-color .12s}
.ggf-catcard:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(27,94,32,.12);border-color:var(--g)}
.ggf-catcard.on{border-color:var(--g);box-shadow:0 0 0 2px rgba(46,125,50,.18)}
.ggf-catcard .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:17px;flex:none;color:#fff;line-height:1}
.ggf-catcard .tx{min-width:0;display:block}
.ggf-catcard .nm{display:block;font-weight:800;color:var(--f);font-size:.92rem;line-height:1.2}
.ggf-catcard .ct{display:block;font-size:.72rem;color:var(--mut);font-weight:600;margin-top:2px}
/* ===== LIVENESS STRIP (compact) ===== */
.ggf-live{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 12px;margin:0 0 10px;font-size:.82rem}
.ggf-live-on{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--g700)}
.ggf-dotpulse{width:9px;height:9px;border-radius:50%;background:#22c55e;animation:ggfpulse 1.8s infinite}
@keyframes ggfpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.ggf-live-active{display:inline-flex;align-items:center;gap:8px;color:var(--mut);font-weight:600}
.ggf-ava-stack{display:inline-flex}
.ggf-ava-stack .ggf-av{margin-left:-8px;border:2px solid #fff;box-sizing:content-box}
.ggf-ava-stack .ggf-av:first-child{margin-left:0}
.ggf-ava-more{margin-left:6px;font-weight:700;color:var(--g700)}
.ggf-live-new{margin-left:auto;color:var(--mut)}
.ggf-live-new b{color:var(--f)}
@media(max-width:760px){.ggf-hero .ggf-head-tools{width:100%;justify-content:flex-start;margin-top:6px;flex-wrap:wrap}.ggf-hero .ggf-hsearch{flex:1 1 200px;max-width:none}.ggf-actions{flex:1 1 auto;justify-content:flex-end}.ggf-live-new{margin-left:0;width:100%}}
@media(max-width:560px){.ggf-stat{min-width:0;flex:1 1 40%}.ggf-row{grid-template-columns:auto 1fr auto !important}.ggf-row-last{display:none !important}}
@media(max-width:440px){.ggf-row{grid-template-columns:auto 1fr !important}.ggf-row-num{display:none !important}}
/* phones a bit wider than 440 still need the tighter row (headless/mobile ~469-560) */
@media(max-width:600px){.ggf-row{padding:10px 12px !important;gap:10px !important}.ggf-title{font-size:.95rem}}
/* ===== STARTER PROMPTS — clickable question ideas that prefill the composer ===== */
.ggf-prompts{background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin:0 0 12px}
.ggf-prompts-h{font-size:.82rem;font-weight:800;color:var(--f);margin:0 0 7px}
.ggf-prompts-row{display:flex;flex-wrap:wrap;gap:7px}
.ggf-prompt{display:inline-block;background:var(--g50);border:1px solid #cfe3cf;border-radius:30px;padding:6px 13px;font-size:.8rem;font-weight:600;color:var(--f);text-decoration:none;transition:.14s}
.ggf-prompt:hover{background:var(--g);border-color:var(--g);color:#fff}
/* == ggfc-css == */
body.ggfc-body{margin:0;background:#EAF4EA;color:#2D2D2D;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif}
.ggfc-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* top bar — ONE slim edge-to-edge line (sample-style): burger far-left, actions far-right */
.ggfc-head{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid #DCE3DC;box-shadow:0 1px 6px rgba(20,45,25,.06)}/* z-200: keeps the account popup above the side-rail ad (z-120) instead of hidden behind it */
.ggfc-head-in{max-width:none;display:flex;align-items:center;gap:6px;padding:0;height:54px;box-sizing:border-box}
.ggfc-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;background:none;border:0;padding:10px 12px;margin:0;cursor:pointer;border-radius:8px;flex:none;align-self:center}
.ggfc-burger:hover{background:#EAF4EA}
.ggfc-burger span{width:19px;height:2.5px;background:#1B5E20;border-radius:2px}
/* brand = the MAIN SITE logo + a stylish "Community" wordmark beside it (all on one line) */
/* brand — same box model as the nav (burger): same padding, same self-centering */
.ggfc-brand{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:10px 12px;margin:0;
  font-weight:800;font-size:16px;color:#1B5E20;text-decoration:none;white-space:nowrap;flex:none;line-height:1;box-sizing:border-box;align-self:center;border-radius:8px}
.ggfc-brand img{display:block;width:auto!important;height:40px!important;max-width:145px;object-fit:contain}
/* "Community" wordmark — script style, each letter in a rainbow-flower colour (like the logo ring) */
.ggfc-brand em{font-family:'Segoe Script','Brush Script MT',Georgia,'Times New Roman',serif;
  font-style:italic;font-weight:700;font-size:17px!important;line-height:1.15;
  margin:0!important;padding:2px!important;border-radius:0!important;display:inline-block!important;opacity:1!important;
  background:none!important}
.ggfc-brand em i{font-style:inherit;text-shadow:0 1px 1px rgba(45,45,45,.12)}
/* no square border/outline around the logo + "Community" on mobile/tap (kills the theme's dotted a:focus and any border/tap-box) */
.ggfc-brand,.ggfc-brand:link,.ggfc-brand:visited,.ggfc-brand:hover,.ggfc-brand:active,.ggfc-brand:focus,
.ggfc-brand img,.ggfc-brand em,.ggfc-brand em i{
  border:0!important;outline:0!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent!important}
.ggfc-brand:focus-visible{outline:2px solid #2E7D32!important;outline-offset:2px} /* clean focus ring for keyboard users (a11y) */
/* search — same as the main website: square corners + green search button on the RIGHT
   (!important is required: the forum's autocomplete module forces a pill radius on .ggf-ac) */
.ggfc-search{flex:1;max-width:520px;margin-inline:auto;display:flex;align-items:stretch;height:38px}
.ggfc-body .ggfc-head .ggfc-search input.ggf-ac{flex:1!important;min-width:0;width:auto!important;height:38px!important;margin:0!important;padding:0 14px!important;
  border-radius:8px 0 0 8px!important;border:1.5px solid #DCE3DC!important;border-right:0!important;
  background:#fff!important;font-size:13.5px!important;line-height:38px!important;box-sizing:border-box!important;outline:none;box-shadow:none!important;appearance:none;-webkit-appearance:none}
.ggfc-body .ggfc-head .ggfc-search input.ggf-ac:focus{border-color:#2E7D32!important}
.ggfc-body .ggfc-head .ggfc-search .go{width:46px!important;height:38px!important;flex:none;margin:0!important;padding:0!important;
  display:flex!important;align-items:center;justify-content:center;background:#2E7D32!important;
  border:1.5px solid #2E7D32!important;border-radius:0 8px 8px 0!important;cursor:pointer;transition:background .2s;box-shadow:none!important;line-height:1}
.ggfc-body .ggfc-head .ggfc-search .go svg{display:block;width:16px;height:16px}
.ggfc-body .ggfc-head .ggfc-search .go:hover{background:#1B5E20!important;border-color:#1B5E20!important}
.ggfc-actions{display:flex;align-items:center;gap:14px;white-space:nowrap;margin-left:auto}
.ggfc-actions .back{font-size:13.5px;font-weight:700;color:#256C29;text-decoration:none;padding:8px 4px}
.ggfc-actions .back:hover{color:#1B5E20;text-decoration:underline}
.ggfc-login{display:inline-flex;align-items:center;height:38px;box-sizing:border-box;font-size:13.5px;font-weight:800;color:#fff;background:#2E7D32;border-radius:8px;padding:0 18px;margin-right:8px;text-decoration:none;transition:background .2s;line-height:1}
.ggfc-login:hover{background:#1B5E20;color:#fff}
/* profile icon (logged-out) — same as the main site: gradient square + user icon + join dot, popup on hover */
.ggfc-acct{position:relative;display:inline-flex;align-items:center;align-self:center;height:40px;margin-right:6px}
.ggfc-acct-btn{position:relative;width:40px;height:40px;border:0;border-radius:11px;cursor:pointer;padding:0;align-self:center;margin:0;
  display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.82);/* icon = soft off-white (slightly dimmed white) */
  background:linear-gradient(135deg,#2E7D32,#1B5E20);box-shadow:0 3px 10px rgba(27,94,32,.28),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .16s,filter .16s,box-shadow .16s}
.ggfc-acct-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.ggfc-acct-btn svg{display:block}
.ggfc-acct-dot{position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%;background:#E2683B;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ggfc-acct-btn:hover .ggfc-acct-dot{animation:ggfcAcctPulse 1.2s ease-out infinite}
@keyframes ggfcAcctPulse{0%{box-shadow:0 0 0 0 rgba(226,104,59,.5)}100%{box-shadow:0 0 0 7px rgba(226,104,59,0)}}
.ggfc-acct-pop{position:absolute;top:calc(100% + 10px);right:0;min-width:250px;background:#fff;border:1px solid #DCE3DC;
  border-radius:14px;box-shadow:0 18px 50px rgba(20,45,25,.20);padding:8px;z-index:10001;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}
.ggfc-acct-pop::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.ggfc-acct:hover .ggfc-acct-pop,.ggfc-acct:focus-within .ggfc-acct-pop{opacity:1;visibility:visible;transform:none}
.ggfc-acct-join{padding:14px 14px 12px;text-align:center;border-bottom:1px solid #eef0ec;margin:2px 4px 6px;display:flex;flex-direction:column;gap:3px}
.ggfc-acct-join span[aria-hidden]{font-size:26px;line-height:1;margin-bottom:2px}
.ggfc-acct-join strong{color:#1B5E20;font-size:15.5px;font-weight:800}
.ggfc-acct-join span:last-child{color:#7a8a7a;font-size:12.5px;line-height:1.5}
.ggfc-acct-pop a{display:flex!important;align-items:center;justify-content:center;height:44px;margin:0 4px 7px;border-radius:10px;font-weight:800;font-size:14px;text-decoration:none;transition:.15s}
/* login + signup share one colour (both solid green) */
.ggfc-acct-b1,.ggfc-acct-b2{background:#2E7D32;color:#fff!important;box-shadow:0 4px 12px rgba(46,125,50,.26)}
.ggfc-acct-b1:hover,.ggfc-acct-b2:hover{background:#1B5E20;color:#fff!important}
.ggfc-acct-b2{margin-bottom:4px!important}
@media (max-width:640px){.ggfc-acct-pop{position:fixed;top:90px;right:10px;left:auto;max-width:calc(100vw - 20px)}}

/* shell — max 1170px = the site container. Side-rail ads are designed to sit OUTSIDE 1170,
   so the shell never overlaps them (that overlap was the root of the crowding) */
.ggfc-shell{width:100%;box-sizing:border-box;max-width:1170px;margin-left:auto;margin-right:auto;display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start;padding:24px 16px 40px}
.ggfc-main{min-width:0}
.ggfc-side{position:sticky;top:72px}
/* New Topic — in the header, after search and before the Main-site link */
.ggfc-new{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 18px;box-sizing:border-box;
  background:#E2683B;color:#fff;font-weight:800;font-size:13.5px;border:0;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .2s}
.ggfc-new:hover{background:#C7552C;color:#fff}
.ggfc-nav{list-style:none;margin:0 0 8px;padding:0}
.ggfc-nav a{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:8px;color:#2D2D2D;font-weight:600;font-size:13.5px;line-height:1.35;text-decoration:none}
.ggfc-nav a:hover{background:#DDEEDd;color:#1B5E20}
.ggfc-nav a[aria-current="page"]{background:#CDE3CD;color:#1B5E20;font-weight:800}
/* 🔴 2026-09-04 (master) — THE FORUM'S OWN SIDEBAR NAV WAS INVISIBLE ON MOBILE.
   The parent theme sets a blanket `nav{display:none}` at mobile widths to hide its desktop menu.
   Our sidebar list sits in an unclassed <nav aria-label="Forum">, so it was collateral damage:
   MEASURED at 390px with the menu OPEN — that <nav> computed to display:none, height 0, and it
   took "🏠 Home", "💬 Latest topics", "🔥 Most answered", "🔖 Saved" AND "← Main site" with it.
   THAT is why a phone reader had no way back to the main site: the link was in the DOM the whole
   time, inside a hidden parent. The `.ggfc-nav-main{display:block}` rule further down could never
   have worked, because the hidden element was one level above it.
   gg-mobile-menu.php hit this exact gotcha and documented it; the forum never got the same fix. */
.ggfc-side nav{display:block!important}

/* "← Main site" — on desktop it lives in the header, so show it in the sidebar on MOBILE only (where the header copy is hidden) */
.ggfc-nav-main{display:none}
.ggfc-nav-main a{color:#1B5E20;font-weight:800;border:1px solid #CFE3CF;background:linear-gradient(180deg,#F6FAF6,#EDF6ED);
  margin-bottom:10px;padding:9px 12px;border-radius:10px;box-shadow:0 1px 2px rgba(27,94,32,.06)}
.ggfc-nav-main a:hover{background:#E4F1E4;color:#1B5E20;border-color:#2E7D32}
.ggfc-nav-main svg{flex:0 0 auto}
.ggfc-nav-main .ar{margin-left:auto;opacity:.55;font-size:15px;line-height:1}
/* sidebar search — MOBILE menu only (desktop uses the header search). Community style: white input + joined green button */
.ggfc-side-search{display:none;margin:0 0 12px;height:42px}
.ggfc-side-search input{flex:1;min-width:0;height:42px;border:1.5px solid #DCE3DC;border-right:0;border-radius:8px 0 0 8px;padding:0 14px;font-size:14px;background:#fff;outline:none;box-sizing:border-box}
.ggfc-side-search input:focus{border-color:#2E7D32}
.ggfc-side-search .go{width:46px;flex:none;height:42px;border:1.5px solid #2E7D32;border-radius:0 8px 8px 0;background:#2E7D32;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.ggfc-side-search .go:hover{background:#1B5E20;border-color:#1B5E20}
.ggfc-sh{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#5C6B5C;margin:12px 0 4px;padding-left:10px}
.ggfc-cats{list-style:none;margin:0;padding:0}
.ggfc-cats a{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:8px;color:#2D2D2D;font-size:13.5px;line-height:1.35;text-decoration:none}
.ggfc-cats a:hover{background:#DDEEDD}
.ggfc-cats a[aria-current="page"]{background:#CDE3CD;font-weight:800;color:#1B5E20}
/* 2026-08-12 (UI): the category count — a light, right-aligned pill. When the name is long the NAME
   truncates, not the count (otherwise "12" broke onto a second line). */
.ggfc-cats .cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ggfc-cats .cc{flex:none;font-style:normal;font-size:11.5px;font-weight:700;color:#5C6B5C;
  background:#E6F0E6;border-radius:999px;padding:1px 8px;min-width:20px;text-align:center}
.ggfc-cats a:hover .cc,.ggfc-cats a[aria-current="page"] .cc{background:#fff;color:#1B5E20}
/* Top helpers */
.ggfc-tops{list-style:none;margin:0;padding:0}
.ggfc-tops li{display:flex;align-items:center;gap:8px;padding:5px 10px;font-size:13px;color:#2D2D2D}
.ggfc-tops .av{flex:none;width:24px;height:24px;border-radius:50%;background:#2E7D32;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.ggfc-tops .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ggfc-tops em{flex:none;font-style:normal;font-size:11.5px;color:#6B7A6B}
/* Ask-the-AI card — at the end of the sidebar: something useful in place of empty space */
.ggfc-askcard{margin:16px 0 4px;padding:13px 14px;border-radius:12px;
  background:linear-gradient(165deg,#2E7D32,#1B5E20);color:#fff}
.ggfc-askcard b{display:block;font-size:13.5px;margin-bottom:4px}
.ggfc-askcard span{display:block;font-size:12px;line-height:1.5;color:#D8EBD6;margin-bottom:10px}
.ggfc-askcard a{display:block;text-align:center;background:#BC5028;color:#fff;text-decoration:none;
  font-weight:700;font-size:12.5px;border-radius:9px;padding:9px 8px}
.ggfc-askcard a:hover{background:#A64420;color:#fff}
.ggfc-trend{list-style:none;margin:0;padding:0}
.ggfc-trend a{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:8px;font-size:13px;color:#2D2D2D;text-decoration:none;line-height:1.35;white-space:nowrap}
.ggfc-trend a:hover{background:#DDEEDD}
.ggfc-trend .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ggfc-trend em{font-style:normal;flex:none;margin:0 0 0 auto!important;font-size:10.5px;font-weight:800;color:#256C29;background:#fff;border:1px solid #DCE3DC;border-radius:999px;padding:1px 7px!important;white-space:nowrap}
.ggfc-trend-empty{font-size:12.5px;color:#5C6B5C;padding:4px 10px}

/* single pe funnel + related */
.ggfc-after{margin-top:26px}
.ggfc-funnel{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#1B5E20,#2E7D32);color:#fff;border-radius:16px;padding:16px 20px;text-decoration:none;box-shadow:0 8px 22px rgba(20,45,25,.25)}
.ggfc-funnel .sheet{width:46px;height:56px;flex:none;background:#fff;border-radius:8px;border-top:10px solid #E2683B;display:flex;align-items:center;justify-content:center;font-size:22px}
.ggfc-funnel .txt b{display:block;font-size:15.5px}
.ggfc-funnel .txt span{font-size:12px;opacity:.9}
.ggfc-funnel .btn{margin-left:auto;white-space:nowrap;background:#E2683B;color:#fff;font-weight:800;border-radius:999px;padding:10px 20px}
.ggfc-funnel:hover .btn{background:#C7552C}
.ggfc-relh{font-size:17px;color:#1B5E20;margin:22px 0 10px}
.ggfc-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ggfc-rel a{background:#fff;border:1px solid #DCE3DC;border-radius:12px;padding:14px;font-size:13.5px;font-weight:700;color:#1B5E20;text-decoration:none;line-height:1.45}
.ggfc-rel a:hover{box-shadow:0 6px 16px rgba(20,45,25,.12);border-color:#2E7D32}
/* "More discussions like this" — two columns, so it reads as distinct from the three-column guides
   block and the reply count can sit on the right (that is the part that earns the click). */
.ggfc-more{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ggfc-more a{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #DCE3DC;border-radius:12px;
  padding:12px 14px;font-size:13.5px;font-weight:700;color:#1B5E20;text-decoration:none;line-height:1.4}
.ggfc-more a:hover{box-shadow:0 6px 16px rgba(20,45,25,.12);border-color:#2E7D32}
.ggfc-more .t{flex:1;min-width:0}
.ggfc-more em{flex:none;font-style:normal;font-size:11.5px;font-weight:700;color:#5C6B5C;background:#E6F0E6;
  border-radius:999px;padding:2px 9px;white-space:nowrap}

/* hide the old ggf-hero's duplicate search/new-topic controls (they now live in the header + sidebar) */
.ggf-head-tools .ggf-hsearch,.ggf-head-tools .ggf-newbtn{display:none!important}

/* remove the DUPLICATE: category cards + their heading — categories now live in the LEFT SIDEBAR */
.ggfc-body .ggf-cats{display:none!important}
.ggfc-body h2.ggf-list-h:has(+ .ggf-cats){display:none!important}

/* DE-CLUTTER (as clean as the sample): turn off the empty-forum noise strips —
   the live/member strip + the duplicate Trending/Top-Contributors twin cards (trending is in the sidebar) */
.ggfc-body .ggf-live{display:none!important}
.ggfc-body .ggf-cols{display:none!important}
/* render the rules as a slim text row — not a big card */
.ggfc-body .ggfc-main .ggf-rules{background:transparent;border:0;border-radius:0;padding:2px 4px;margin:0 0 6px}
.ggfc-body .ggfc-main .ggf-rules summary{font-size:13.5px;color:#5C6B5C;font-weight:600;cursor:pointer}
/* strip the card chrome off the prompts — heading + chips only, no box */
.ggfc-body .ggfc-main .ggf-prompts{background:transparent;border:0;box-shadow:none;padding:0;margin:0 0 26px}
/* hero: SLIM ONE-LINE strip (title + pitch on a single line) — founder/extra strip turned off */
.ggfc-body .ggfc-main .ggf-founder{display:none!important}
.ggfc-body .ggfc-main .ggf-hero{padding:11px 20px!important;margin:0 0 18px!important;border-radius:12px}
.ggfc-body .ggfc-main .ggf-hero-top{display:flex;align-items:center;min-width:0}
.ggfc-body .ggfc-main .ggf-hero-intro{display:flex;align-items:center;gap:16px;min-width:0;flex:1}
.ggfc-body .ggfc-main .ggf-hero-h1{font-size:18px!important;margin:0!important;white-space:nowrap;flex:none}
.ggfc-body .ggfc-main .ggf-hero-sub{margin:0!important;font-size:13px!important;line-height:1.4;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){
  .ggfc-body .ggfc-main .ggf-hero-intro{flex-wrap:wrap;gap:4px}
  .ggfc-body .ggfc-main .ggf-hero-sub{white-space:normal}
}

/* ===== SPACING PASS — ghich-pich fix (3-class selectors taaki ggf-css pe jeet ho) =====
   ⚠️ 2026-08-23 (UI, Gaurav: "forum UI clean, compact, engaging hona chahiye") — RE-TUNED.
   This block was written to fix the OPPOSITE problem (everything cramped) and it overshot.
   Measured at 1280x900 before this change: the first discussion row sat at **y=508** — more than
   half the fold spent on chrome (hero 61px, rules 49, prompts 202, heading 33, plus ~90px of pure
   margin). At 360px it was **y=785**, i.e. a phone reader saw ZERO discussions without scrolling.
   Nothing is removed — hero, rules row and the starter-question chips all stay, because the chips
   are this page's engagement device. Only the air between them is tightened, and the chips are made
   small enough to fit two lines instead of three. Every value is still looser than the cramped
   originals, and a chip stays >=24px tall (6+6 padding + ~17px line ≈ 30px), which the tap-target
   standard requires. */
.ggfc-body .ggfc-main .ggf-container{padding:4px 10px 34px}
.ggfc-body .ggfc-main .ggf-hero{margin:0 0 12px!important;padding:26px 28px;border-radius:16px}
.ggfc-body .ggfc-main .ggf-hero-sub{margin-top:8px;line-height:1.6}
.ggfc-body .ggfc-main .ggf-notice{margin:0 0 12px;padding:10px 14px}
.ggfc-body .ggfc-main .ggf-live{margin:0 0 16px;padding:10px 16px}
.ggfc-body .ggfc-main .ggf-rules{margin:0 0 10px;padding:6px 10px}
.ggfc-body .ggfc-main .ggf-rules ol{padding-left:22px;line-height:1.7}
.ggfc-body .ggfc-main .ggf-prompts{margin:0 0 14px;padding:10px 14px;border-radius:14px}
.ggfc-body .ggfc-main .ggf-prompts-h{margin:0 0 7px}
.ggfc-body .ggfc-main .ggf-prompts-row{display:flex;flex-wrap:wrap;gap:7px}
.ggfc-body .ggfc-main .ggf-prompt{padding:6px 12px;font-size:12.5px}
.ggfc-body .ggfc-main h2.ggf-list-h{margin:14px 0 10px;padding-bottom:8px;font-size:19px}
.ggfc-body .ggfc-main .ggf-list{display:flex;flex-direction:column;gap:9px}
/* 2026-08-12: inside the community shell the row padding/gap are smaller too — this override sits on
   top of the base rule, which is why changing the base alone had no effect here. */
.ggfc-body .ggfc-main .ggf-row{padding:10px 14px;gap:11px;border-radius:14px}
/* 2026-08-23 — the phone was the worse of the two. On top of the desktop tightening above, the hero
   loses its big padding and the rules row folds to a single line, so the first real discussion lands
   in the first screen instead of a screen and a bit down. */
@media (max-width:700px){
  .ggfc-body .ggfc-main .ggf-hero{padding:12px 14px!important;margin:0 0 10px!important;border-radius:12px}
  .ggfc-body .ggfc-main .ggf-prompts{margin:0 0 10px;padding:9px 12px}
  .ggfc-body .ggfc-main h2.ggf-list-h{margin:10px 0 8px;padding-bottom:6px;font-size:19px}
  .ggfc-body .ggfc-main .ggf-rules{margin:0 0 8px}
  /* the hero's pitch wrapped to five lines at 360px and alone cost 123px. Same words, smaller type. */
  .ggfc-body .ggfc-main .ggf-hero-h1{font-size:17px!important}
  .ggfc-body .ggfc-main .ggf-hero-sub{font-size:13px!important;line-height:1.45}
  /* Starter chips: on a phone each one is a full sentence, so five of them stacked five lines high
     (195px) and pushed every real discussion off the screen. They become ONE sideways-scrolling
     strip instead — the same five questions, none removed, and the chip clipped at the right edge is
     what tells the reader there are more. This scroller is inside its own box, so the PAGE still
     does not scroll sideways (verified: document scrollWidth stays 360). */
  .ggfc-body .ggfc-main .ggf-prompts-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
    scroll-snap-type:x proximity}
  .ggfc-body .ggfc-main .ggf-prompts-row::-webkit-scrollbar{display:none}
  .ggfc-body .ggfc-main .ggf-prompt{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
  .ggfc-body .ggfc-main .ggf-prompts-h{margin:0 0 6px;font-size:12.5px;line-height:1.35}
}
.ggfc-body .ggfc-main .ggf-title{margin-bottom:6px;line-height:1.4}
.ggfc-body .ggfc-main .ggf-tags{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px}
.ggfc-body .ggfc-main .ggf-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ggfc-body .ggfc-main .ggf-bc{margin:2px 0 14px}
.ggfc-body .ggfc-main .ggf-h1{margin:0 0 18px;line-height:1.25}
.ggfc-body .ggfc-main .ggf-post{padding:20px 24px;margin:0 0 18px;border-radius:14px}
.ggfc-body .ggfc-main .ggf-post-head{margin-bottom:12px;gap:12px}
.ggfc-body .ggfc-main .ggf-body{line-height:1.65}
.ggfc-body .ggfc-main .ggf-body p{margin:0 0 12px}
.ggfc-body .ggfc-main h2.ggf-rh{margin:26px 0 14px}
.ggfc-body .ggfc-main .ggf-replies{display:flex;flex-direction:column;gap:14px}
.ggfc-body .ggfc-main .ggf-form,.ggfc-body .ggfc-main .ggf-card{padding:20px 24px;margin-top:20px;border-radius:14px}
.ggfc-body .ggfc-main .ggf-empty-state{padding:36px 20px}
.ggfc-body .ggfc-after{margin-top:32px}

/* make the NAV (burger) work on desktop too: click = collapse the sidebar → full-width reading */
@media (min-width:901px){
  body.ggfc-side-open .ggfc-side{display:none}
  body.ggfc-side-open .ggfc-shell{grid-template-columns:1fr}
}

/* LARGE SCREENS: the rails cap out at 195px — give the leftover space to the content (no empty gutter) */
@media (min-width:1570px){
  .ggfc-shell{max-width:calc(100vw - 440px)}
}

/* responsive */
@media (max-width:900px){
  .ggfc-shell{grid-template-columns:1fr;padding:14px}
  .ggfc-side{display:none;position:static}
  body.ggfc-side-open .ggfc-side{display:block;order:-1}
  .ggfc-search{display:none}
  .ggfc-side-search{display:flex} /* the header search is hidden ≤900 → show the search in the sidebar menu */
  .ggfc-brand .nm{font-size:15px}
  .ggfc-rel{grid-template-columns:1fr}
  .ggfc-more{grid-template-columns:1fr}
  .ggfc-funnel{flex-wrap:wrap}
  .ggfc-funnel .btn{margin-left:0}
}
/* MOBILE header fit (≤640px): New Topic + Main-site leave the header (they are in the sidebar menu),
   leaving only hamburger + logo + Community + Login — otherwise the right side overflowed */
@media (max-width:640px){
  .ggfc-head-in{gap:8px;padding:0 12px}
  .ggfc-actions .ggfc-new,.ggfc-actions .back{display:none}
  .ggfc-nav-main{display:block} /* the header's "← Main site" is hidden on mobile → show it in the sidebar menu */
  /* account button = perfectly centred with the burger/logo + symmetric from the edge */
  .ggfc-actions{gap:8px;height:40px;align-self:center;align-items:center}
  .ggfc-acct{margin-right:0;height:40px;align-self:center;align-items:center}
  .ggfc-acct-btn{align-self:center;margin:0}
  .ggfc-prof{align-self:center}
  .ggfc-brand{gap:6px}
  .ggfc-brand img{height:34px!important}
  .ggfc-brand em{font-size:14px!important}
  .ggfc-login{padding:8px 14px;font-size:13px}
}
/* == ggf-css == */
.gg-forum-wrap{--g:#2E7D32;--f:#1B5E20;--tr:#E2683B;--trd:#C7552C;--ink:#2D2D2D;--mut:#5C6B5C;--line:#DCE3DC;--cream:#F7F6F1;--g50:#EAF4EA;--g700:#256C29;--tr50:#FCEDE6;background:var(--cream);color:var(--ink)}
.gg-forum-wrap .ggf-container{max-width:1180px;margin-inline:auto;padding:18px 28px 28px;font-size:16px;line-height:1.55}
.gg-forum-wrap a{color:var(--g);text-decoration:none}.gg-forum-wrap a:hover{color:var(--f)}
.ggf-h1{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.1rem);color:var(--f);margin:0 0 12px;line-height:1.2}
.ggf-notice{padding:10px 14px;border-radius:10px;margin:0 0 12px;font-weight:600}
.ggf-ok{background:var(--g50);color:var(--g700);border-left:4px solid var(--g)}
.ggf-err{background:var(--tr50);color:var(--trd);border-left:4px solid var(--tr)}
.ggf-rules{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 16px;margin:0 0 12px}
.ggf-rules summary{font-weight:700;color:var(--f);cursor:pointer}
.ggf-rules ol{margin:10px 0 4px;padding-left:20px}.ggf-rules li{margin:4px 0;color:var(--mut)}
.ggf-rules-enf{margin:10px 0 0;padding:10px 12px;background:var(--tr50);border-left:3px solid var(--tr);border-radius:8px;color:var(--ink);font-size:var(--gg-text-sm)}
.ggf-tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.ggf-tab{padding:7px 15px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--f);background:#fff;border:1px solid var(--line)}
.ggf-tab.on,.ggf-tab:hover{background:var(--g);color:#fff;border-color:var(--g)}
.ggf-head-tools .ggf-newbtn{height:40px;padding:0 18px;font-size:.95rem;white-space:nowrap}
.gg-btn-ggf{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font-weight:700;cursor:pointer;border:2px solid transparent;font-size:1rem}
.gg-btn-ggf.primary{background:var(--tr);color:#fff}.gg-btn-ggf.primary:hover{background:var(--trd);color:#fff}
.ggf-list-h{font-size:1.05rem;color:var(--f);margin:18px 0 10px;font-weight:800}
.ggf-list{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
/* 2026-08-12 (Gaurav: "it should stay on one line, completely compact"). The last column was a FIXED
   168px while the content inside it (name + "1 month ago") only needs about 76px — 92px sat wasted in
   every row, and that is why the title got 424px when the longest title needed 496px. Result: three
   rows broke onto two lines while the space to avoid it existed.
   The last column is now `auto` — it takes only what it needs. This is not "nudge it and hope": the
   widths were measured in the browser (need 496 vs have 424, last column need 76 vs 168). */
.ggf-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);transition:background .12s}
.ggf-row:last-child{border-bottom:0}
.ggf-row:hover{background:var(--g50)}
.ggf-row.pinned{background:#FBFDF7}
.ggf-row-av{display:flex}
/* 2026-08-12 (Gaurav: "there is more content beside the title, fit that in too").
   Three things inside the row were each taking a SEPARATE line: the title, then the "✓ Solved" tag,
   then "Beginners · by James · 1 month ago". Measured: the tag needs 64px and the meta 223px — 287px
   together, against 496px of available space. So the second line was pure waste.
   row-main is now flex-wrap itself: the title gets its own line (it is the long one), and the tag +
   meta sit together on one line. Two lines instead of three — the row went from ~102px to ~75px. */
.ggf-row-main{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px}
.ggf-row-main > .ggf-title{flex:1 1 100%}
.ggf-row-main > .ggf-tags,.ggf-row-main > .ggf-meta{margin-top:0}
.ggf-title{font-weight:700;color:var(--f);line-height:1.3;font-size:1.02rem}
/* 2026-08-14 (UI seat): topic titles were 22px — two short, and they are the whole point of the
   list. inline-flex + min-height; the row height is set by the meta line below, so nothing moves. */
.ggf-title a{display:inline-flex;align-items:center;min-height:24px;color:var(--f)}.ggf-title a:hover{color:var(--g)}
.ggf-pin{color:var(--tr);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.ggf-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ggf-tag{font-size:.67rem;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.ggf-tag.solved{background:var(--g50);color:var(--g700)}
.ggf-tag.unans{background:#FFF3E6;color:#B5651D}
.ggf-tag.hot{background:#FDEBE7;color:var(--trd)}
.ggf-tag.new{background:#EAF2FB;color:#2C6FC7}
.ggf-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:7px;font-size:.78rem;color:var(--mut)}
/* 2026-08-14 (UI seat): category chips were 19px tall — five pixels under a comfortable tap.
   min-height only grows the box downward inside a flex row, so the meta line does not move. */
.ggf-cat{display:inline-flex;align-items:center;min-height:24px;gap:6px;font-weight:700;color:var(--mut)}.ggf-cat:hover{color:var(--g)}
.ggf-dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.ggf-by{font-weight:600}
.c-flowers{background:var(--tr)}.c-vegetables{background:var(--g)}.c-houseplants{background:var(--g700)}.c-herbs{background:var(--f)}.c-plant-problems{background:var(--trd)}.c-beginners{background:var(--mut)}
.ggf-row-num{text-align:center;color:var(--f);min-width:46px}
.ggf-row-num b{display:block;font-size:1.15rem;font-weight:800;line-height:1}
.ggf-row-num small{display:block;font-weight:600;color:var(--mut);font-size:.64rem;text-transform:uppercase;margin-top:3px}
.ggf-row-last{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--mut)}
.ggf-last-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ggf-last-by{font-weight:700;color:var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:108px}
.ggf-noreply{font-style:italic;opacity:.8}
.ggf-empty-state{text-align:center;padding:40px 20px}
.ggf-empty-emoji{font-size:2.4rem;line-height:1}
.ggf-empty-state p{color:var(--mut);margin:10px 0 16px;font-size:1rem}
.ggf-av{border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;color:#fff;background:var(--f);flex:none}
.ggf-av.t{background:var(--tr)}.ggf-av.g{background:var(--g700)}.ggf-av.d{background:var(--mut)}
.ggf-pag{display:flex;gap:8px;justify-content:center;margin:14px 0}.ggf-pag .page-numbers{padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:#fff}.ggf-pag .current{background:var(--g);color:#fff;border-color:var(--g)}
.ggf-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 14px}
.ggf-form h2{color:var(--f);margin:0 0 14px}
.ggf-lbl{display:block;font-weight:700;color:var(--f);margin:0 0 14px}
.ggf-in{display:block;width:100%;margin-top:6px;padding:11px 14px;border:2px solid var(--line);border-radius:10px;font-size:1rem;font-family:inherit;background:#fff;color:var(--ink)}
.ggf-in:focus{outline:3px solid var(--tr);outline-offset:1px;border-color:var(--g)}
.ggf-agree{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--mut);margin:0 0 16px}
.ggf-bc{font-size:.85rem;color:var(--mut);margin:0 0 8px}
.ggf-post{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:0 0 12px;text-align:left}
.ggf-post.reply,.ggf-post .ggf-body{text-align:left}/* theme .reply{text-align:right} collision fix */
.ggf-post.op{border-left:4px solid var(--g)}
.ggf-post-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ggf-au{font-weight:700;color:var(--f)}.ggf-when{font-size:.8rem;color:var(--mut)}
.ggf-expert{font-size:.68rem;background:var(--tr50);color:var(--trd);padding:2px 7px;border-radius:999px;font-weight:700}
.ggf-lvl{font-size:.62rem;padding:2px 7px;border-radius:999px;font-weight:700;letter-spacing:.03em;vertical-align:middle}
.ggf-lvl.expert{background:var(--tr50);color:var(--trd)}
.ggf-lvl.trusted{background:var(--g50);color:var(--g700)}
.ggf-lvl.member{background:#ECEFEC;color:var(--mut)}
.ggf-lvl.new{background:#F6F7F6;color:#9AA69A}
/* 2026-08-23 (UI) — tap targets. GG_STANDARDS_2026 asks for >=24px; measured on a topic page,
   "⚑ Report" was 51x20 and each breadcrumb link 39x18. Both are STANDALONE controls (a moderation
   action and a nav trail), so WCAG 2.5.8's "inline in a sentence" exception does not cover them —
   unlike the "log in / sign up free" links inside the reply prompt, which are genuinely inline prose
   and were deliberately left alone. Height only; nothing moves on the page. */
.ggf-report{margin-left:auto;font-size:.8rem;color:var(--mut);display:inline-flex;align-items:center;min-height:24px}.ggf-report:hover{color:var(--tr)}
.ggf-bc a{display:inline-block;min-height:24px;line-height:24px}
.ggf-body{color:var(--ink)}.ggf-body p{margin:0 0 10px}
.ggf-rh{color:var(--f);font-size:1.2rem;margin:16px 0 10px}
.ggf-empty{color:var(--mut)}
@media(max-width:640px){.ggf-newbtn{justify-content:center}}
/* == ggmm-css == */
/* desktop: drawer, overlay and burger hidden (the full nav is present). The search ICON and search bar STAY (same popup as mobile) */
@media (min-width:1024px){ #ggmm-drawer,#ggmm-overlay,.ggmm-burger{display:none!important} }
@media (max-width:1023px){
  .gardeningguider-mb-pm-menu-style{display:none!important} /* hide the theme's non-working hamburger */
  /* 2026-08-17 (UI seat, Gaurav's menu review). The theme brings its DESKTOP nav row back at ~1001px,
     but there is only room for three or four items there — MEASURED at 1001–1015: most of the labels
     were gone and a bare caret was left floating beside "Community". In that band the drawer below is
     the usable navigation, so the desktop row (and the sticky bar's copy) stay hidden until 1024,
     where the full row genuinely fits. Above 1024 nothing here applies. */
  .gardeningguider-header2-top nav.gardeningguider-primary-menu,
  .gardeningguider-header-sticky nav.gardeningguider-sticky-menu{display:none!important}
  /* mobile: hide the desktop inline search (we have our own search icon). The language changer and
     the account button STAY (Gaurav). Header stays compact. */
  .gg-hdr-search{display:none!important}
  /* ===== HEADER SEQUENCE (Gaurav): logo → language(desktop-style) → search → user → menu.
     Everything vertically centred on one line (nothing sitting high or low). Popups must not be CLIPPED. ===== */
  /* Gaurav 2026-07-05: main header STICKY on MOBILE (like the community header) — stays pinned to the top on scroll */
  .gardeningguider-header2-top{position:sticky!important;top:0!important;z-index:500!important;box-shadow:0 2px 10px rgba(20,45,25,.10)}
  .gardeningguider-header2-top .gardeningguider-headerinner{padding-left:12px!important;padding-right:10px!important;gap:8px!important;overflow:visible!important}
  .gardeningguider-header2-left img.custom-logo,.gardeningguider-header2-left .gardeningguider-sitetitle img{height:34px!important}
  .gardeningguider-header2-right,.gardeningguider-header2-social-media{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:nowrap!important;margin:0!important;overflow:visible!important}
  /* icon buttons (search / user / menu) = 40x40 uniform, vertically centered */
  .ggmm-searchbtn,.ggmm-burger,.gg-acct-guest .gg-acct-toggle,.gg-acct-member .gg-acct-toggle{
    width:40px!important;height:40px!important;min-width:40px!important;box-sizing:border-box!important;margin:0!important;padding:0!important;border-radius:11px!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;align-self:center!important}
  .ggmm-burger{border:1px solid #dbe8d7!important;background:#eef6ec!important;color:#1b5e20!important}
  /* Gaurav 2026-07-14: the search button matches the user-profile button (green gradient + white icon) */
  .ggmm-searchbtn{border:0!important;background:linear-gradient(135deg,#2e7d32,#1b5e20)!important;color:#fff!important;
    box-shadow:0 3px 10px rgba(27,94,32,.28), inset 0 1px 0 rgba(255,255,255,.22)!important}
  .ggmm-burger:active{background:#e2efe0!important}
  .ggmm-searchbtn:active{filter:brightness(1.06)}
  .ggmm-burger{padding:11px 9px!important}
  /* language wrapper — 2026-09-04: pill chrome GONE (Amazon-style .gg-lang-btn is the pill now;
     the old select-era bg/border here made a second empty box behind the button). Layout only. */
  .gardeningguider-header2-social-media .gg-lang-div{height:40px!important;align-self:center!important;margin:0!important;
    display:inline-flex!important;align-items:center!important;padding:0!important;background:none!important;border:0!important;overflow:visible!important;flex:0 0 auto!important}
  .gardeningguider-header2-social-media .gg-lang-switch{gap:5px!important;margin:0!important;align-items:center!important}
  .gardeningguider-header2-social-media .gg-lang-switch .gg-lang-globe{font-size:15px!important;color:#1d3a28!important;opacity:1!important}
  /* SEQUENCE: all the items are now siblings inside social-media (the JS injected search+burger here) */
  .gardeningguider-header2-social-media > .gg-lang-div{order:1}
  .gardeningguider-header2-social-media > .ggmm-searchbtn{order:2}
  .gardeningguider-header2-social-media > .gg-acct-div{order:3}
  .gardeningguider-header2-social-media > .ggmm-burger{order:4}
  /* the account popup must not get CLIPPED — pull it in from the right edge, inside the screen */
  .gg-acct-div .gg-acct-menu{position:fixed!important;top:58px!important;right:10px!important;left:auto!important;min-width:230px!important;max-width:calc(100vw - 20px)!important}
  .ggmm-searchbtn,.ggmm-burger{display:inline-flex!important;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;margin:0;background:none;border:0;cursor:pointer;border-radius:9px;box-sizing:border-box;color:#1b5e20}
  .ggmm-searchbtn:active,.ggmm-burger:active{background:#eef6ec}
  .ggmm-burger{flex-direction:column;justify-content:center;gap:5px;padding:9px 8px}
  .ggmm-burger span{display:block;height:2.5px;width:100%;background:#1b5e20;border-radius:2px}
  .ggmm-searchbtn svg{display:block}
}
/* a search ICON on DESKTOP too (same as the mobile header) — clicking it slides down the same community-style search bar */
@media (min-width:1024px){
  /* Gaurav 2026-07-14: the search button matches the user-profile button (green gradient + white icon + lift hover) */
  .ggmm-searchbtn{display:inline-flex!important;align-items:center;justify-content:center;
    width:40px;height:40px;min-width:40px;padding:0;margin:0 0 0 8px;border:0;
    background:linear-gradient(135deg,#2e7d32,#1b5e20);color:#fff;border-radius:11px;cursor:pointer;box-sizing:border-box;align-self:center;flex:0 0 auto;
    box-shadow:0 3px 10px rgba(27,94,32,.28), inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform .16s,box-shadow .16s,filter .16s}
  .ggmm-searchbtn:hover{transform:translateY(-1px);filter:brightness(1.06);
    box-shadow:0 6px 16px rgba(27,94,32,.4), inset 0 1px 0 rgba(255,255,255,.22)}
  .ggmm-searchbtn svg{display:block}
}
/* a POPUP modal like login/signup (dark blurred backdrop + glass card) — but the card sits just BELOW the MENU, not centred. JS sets the card's top */
#ggmm-searchbar{position:fixed;inset:0;z-index:100050;display:flex;align-items:flex-start;justify-content:center;padding:0 16px 16px;
  background:rgba(15,40,20,.5);backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
#ggmm-searchbar.on{opacity:1;visibility:visible}
.ggmm-sb-card{position:relative;width:min(560px,100%);box-sizing:border-box;padding:24px 26px 20px;border-radius:18px;
  background:linear-gradient(160deg,#ffffff,#eef6ee);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 26px 70px rgba(15,40,20,.46),inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(16px) scale(.955);transition:transform .32s cubic-bezier(.22,1,.36,1)}
#ggmm-searchbar.on .ggmm-sb-card{transform:none}
.ggmm-sb-title{text-align:center;font-size:1.12rem;font-weight:800;color:#153f1a;margin:2px 0 14px}
.ggmm-sb-hint{text-align:center;font-size:.8rem;color:#5c7361;margin-top:12px}
/* search box inside card: input + green button + orange X (JOINED row) */
#ggmm-searchbar form{display:flex;align-items:stretch;gap:0;width:100%;margin:0;border-radius:8px}
/* make the typing area clearly visible: a distinct GREEN border (2px #2e7d32) + a light tinted bg */
#ggmm-searchbar input{flex:1;min-width:0;height:46px;border:2px solid #2e7d32;border-right:0;border-radius:8px 0 0 8px;padding:0 15px;font-size:15px;color:#173d1c;background:#f4faf3;outline:none;box-sizing:border-box;box-shadow:none}
#ggmm-searchbar input::placeholder{color:#7d9a80}
#ggmm-searchbar input:focus{background:#fff;box-shadow:inset 0 0 0 1px rgba(46,125,50,.4)}
#ggmm-searchbar button[type=submit]{flex:none;width:48px;height:46px;border:1.5px solid #2e7d32;border-radius:0 8px 8px 0;background:#2e7d32;display:flex!important;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s}
#ggmm-searchbar button[type=submit]:hover{background:#1b5e20;border-color:#1b5e20}
#ggmm-searchbar button[type=submit] svg{display:block!important;width:18px!important;height:18px!important;stroke:#fff!important;fill:none!important}
/* the cross (X) — a SQUARE designer button, sitting right up against the search. ORANGE by default, RED on hover. */
#ggmm-searchbar .ggmm-sb-close{flex:none;display:flex!important;align-items:center;justify-content:center;
  width:46px;height:46px;margin-left:6px;border:0;border-radius:8px;padding:0;cursor:pointer;line-height:1;
  font-size:22px;color:#fff;background:#BC5028;box-shadow:0 2px 6px rgba(199,85,44,.28),inset 0 1px 0 rgba(255,255,255,.25);
  transition:background .15s,transform .15s,box-shadow .15s}
#ggmm-searchbar .ggmm-sb-close:hover{background:#C62828;transform:translateY(-1px);box-shadow:0 5px 14px rgba(198,40,40,.4)}
/* hide the native search input's webkit clear (X) — keeps our UI clean */
#ggmm-searchbar input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
#ggmm-overlay{position:fixed;inset:0;background:rgba(12,28,16,.55);backdrop-filter:blur(2px);z-index:100000;opacity:0;transition:opacity .28s}
#ggmm-overlay.on{opacity:1}
.ggmm{position:fixed;top:0;right:0;height:100%;width:min(320px,86vw);z-index:100001;box-sizing:border-box;
  background:linear-gradient(180deg,#ffffff,#f5faf4);box-shadow:-14px 0 40px rgba(0,0,0,.3);
  transform:translateX(102%);transition:transform .3s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.ggmm.on{transform:none}
.ggmm-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid #e7efe4}
.ggmm-title{font-weight:800;font-size:17px;color:#1b5e20}
.ggmm-close{background:none;border:0;font-size:30px;line-height:1;color:#5c6b5c;cursor:pointer;padding:0 4px}
.ggmm-close:hover{color:#c7552c}
/* drawer search — like the community one: white input + joined green button (8px square corners) */
.ggmm-search{display:flex;height:44px;margin:14px 16px 8px}
.ggmm-search input{flex:1;min-width:0;border:1.5px solid #DCE3DC;border-right:0;border-radius:8px 0 0 8px;padding:0 14px;font-size:14px;background:#fff;outline:none;box-sizing:border-box}
.ggmm-search input:focus{border-color:#2e7d32}
.ggmm-search button{width:46px;flex:none;border:1.5px solid #2e7d32;border-radius:0 8px 8px 0;background:#2e7d32;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.ggmm-search button:hover{background:#1b5e20;border-color:#1b5e20}
.ggmm-search button svg{stroke:#fff;fill:none}
/* nav (server-rendered wp_nav_menu) — on mobile the theme sets `nav{display:none}`
   (a known gotcha!) which hid our <nav>. display:block!important is the real fix. */
nav.ggmm-nav{display:block!important;flex:1 1 auto!important;padding:6px 10px;visibility:visible!important;opacity:1!important;height:auto!important;max-height:none!important;overflow:visible!important}
.ggmm-nav ul.ggmm-menu{list-style:none!important;margin:0!important;padding:0!important;
  display:block!important;visibility:visible!important;opacity:1!important;
  position:static!important;inset:auto!important;transform:none!important;
  width:auto!important;height:auto!important;max-height:none!important;min-height:0!important;
  background:transparent!important;box-shadow:none!important;border:0!important;float:none!important;overflow:visible!important}
.ggmm-nav ul.ggmm-menu > li,.ggmm-nav .sub-menu > li{list-style:none!important;margin:0!important;
  display:block!important;float:none!important;width:auto!important;position:relative;border-bottom:1px solid #eef3ec;background:transparent!important;
  height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;opacity:1!important;visibility:visible!important}
.ggmm-nav a{display:block!important;padding:12px 34px 12px 10px!important;color:#1d3a28!important;font-size:15px!important;
  font-weight:600!important;text-decoration:none!important;border-radius:8px!important;background:transparent!important;
  border:0!important;box-shadow:none!important;line-height:1.3!important;white-space:normal!important;width:auto!important;text-align:left!important;
  height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;opacity:1!important;visibility:visible!important}
.ggmm-nav a:hover{background:#eef6ec!important;color:#2e7d32!important}
.ggmm-nav .sub-menu{display:none!important;padding:0 0 4px 8px!important;border:0!important;
  position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;box-shadow:none!important;min-width:0!important}
.ggmm-nav li.ggmm-open > .sub-menu{display:block!important}
.ggmm-nav .sub-menu > li{border-bottom:0}
.ggmm-nav .sub-menu a{font-weight:500!important;font-size:14px!important;color:#3c5a44!important;padding:9px 10px!important}
/* 2026-08-23 (G1): the caret button sits at right:2px, width 34 — so a parent label longer than
   the row runs UNDERNEATH it with no ellipsis (white-space is normal, overflow visible). Measured on
   "Americas, Africa & Middle East (4)": 12px of the label hidden behind the caret. Reserve the caret
   lane on ANY item that has children, at every level, so no future long label repeats it. */
.ggmm-nav li.menu-item-has-children > a{padding-right:44px!important}
/* the theme's JS injects an orange "+" toggle (.gardeningguider_submenutoggle) — hide it.
   Only our own clean chevron (.ggmm-caret) remains. */
.ggmm-nav .gardeningguider_submenutoggle,
.ggmm-nav [class*="submenutoggle"],.ggmm-nav [class*="submenu-toggle"],.ggmm-nav [class*="menu-toggle"],
.ggmm-nav .menu-item-has-children > a:after,.ggmm-nav .menu-item-has-children > a:before{
  display:none!important;content:none!important;background:none!important;border:0!important}
.ggmm-nav .ggmm-caret{position:absolute;right:2px;top:5px;width:34px;height:34px;border:0;background:none;cursor:pointer;color:#5c6b5c;font-size:16px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:transform .2s}
.ggmm-nav .ggmm-caret:hover{background:#eef6ec;color:#2e7d32}
.ggmm-nav li.ggmm-open > .ggmm-caret{transform:rotate(180deg)}
.ggmm-cta{padding:12px 16px 22px;border-top:1px solid #e7efe4;display:flex;flex-direction:column;gap:9px}
.ggmm-auth{display:flex;gap:9px}
.ggmm-btn{display:flex;align-items:center;justify-content:center;height:44px;border-radius:10px;font-weight:800;font-size:14px;text-decoration:none;flex:1}
.ggmm-btn-primary{background:#2e7d32;color:#fff!important}.ggmm-btn-primary:hover{background:#1b5e20}
/* login and signup share one colour (both solid green) */
.ggmm-btn-solid,.ggmm-btn-ghost{background:#2e7d32;color:#fff!important}
.ggmm-btn-solid:hover,.ggmm-btn-ghost:hover{background:#1b5e20;color:#fff!important}
body.ggmm-lock{overflow:hidden}
/* very narrow phones (<=380px): tighten the gaps/pill so logo+language+search+user+menu all still fit and nothing gets cut off */
@media (max-width:380px){
  .gardeningguider-header2-top .gardeningguider-headerinner{padding-left:8px!important;padding-right:6px!important;gap:5px!important}
  .gardeningguider-header2-right,.gardeningguider-header2-social-media{gap:5px!important}
  .gardeningguider-header2-social-media .gg-lang-div{padding:0 4px 0 7px!important}
  .gardeningguider-header2-social-media .gg-lang-switch{gap:3px!important}
  .gardeningguider-header2-social-media .gg-lang-switch select.gg-lang-select{font-size:12px!important;padding:0 15px 0 1px!important}
  .ggmm-searchbtn,.ggmm-burger,.gg-acct-guest .gg-acct-toggle,.gg-acct-member .gg-acct-toggle{width:38px!important;height:38px!important;min-width:38px!important}
}
/* == ggf-ac-css == */
.ggf-ac-pop{position:absolute;z-index:100060;background:#fff;border:1px solid #DCE3DC;border-radius:12px;
  box-shadow:0 18px 50px rgba(27,94,32,.18);overflow:hidden;max-height:64vh;overflow-y:auto;min-width:240px}
.ggf-ac-it{display:flex;flex-direction:column;gap:4px;padding:10px 14px;color:#1B5E20;text-decoration:none;
  font-size:14px;line-height:1.35;border-bottom:1px solid #ECEFEC}
.ggf-ac-it:last-child{border-bottom:0}
.ggf-ac-it.on,.ggf-ac-it:hover{background:#EAF4EA}
.ggf-ac-top{display:flex;gap:8px;align-items:center}
.ggf-ac-t{font-weight:700}
.ggf-ac-k{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;background:#EAF4EA;
  color:#256C29;padding:2px 7px;border-radius:999px;flex:none}
.ggf-ac-d{font-size:12px;color:#5C6B5C;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ggf-ac-it.gg-empty{color:#5C6B5C;justify-content:center;font-style:italic}
/* == ggf2-css == */
.ggf-mini{font-size:.78rem;font-weight:700;color:var(--mut);margin-right:12px;cursor:pointer}
.ggf-mini:hover{color:var(--g)}.ggf-mini.on{color:var(--g)}
.ggf-edited{font-size:.72rem;color:#9aa69a;font-style:italic}
.ggf-quote{border-left:4px solid var(--g);background:var(--g50);margin:0 0 10px;padding:8px 12px;border-radius:0 8px 8px 0;color:var(--mut)}
.ggf-pollbox{border:1px dashed var(--line);border-radius:10px;padding:10px 14px;margin:0 0 14px}
.ggf-pollbox summary{font-weight:700;color:var(--f);cursor:pointer}
.ggf-poll-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr 44px;gap:10px;align-items:center;margin:8px 0}
.ggf-poll-row.mine .ggf-poll-lbl{color:var(--g);font-weight:800}
.ggf-poll-vote{background:#fff;border:2px solid var(--g);color:var(--g);border-radius:8px;padding:6px 10px;font-weight:700;cursor:pointer;text-align:left}
.ggf-poll-vote:hover{background:var(--g);color:#fff}
.ggf-poll-lbl{font-weight:600;color:var(--ink)}
.ggf-poll-bar{height:12px;background:#eef2ed;border-radius:99px;overflow:hidden}
.ggf-poll-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--g),var(--f));border-radius:99px}
.ggf-poll-row b{font-size:.8rem;color:var(--f);text-align:right}
.ggf2-editbox{width:100%;min-height:120px;border:2px solid var(--g);border-radius:10px;padding:10px;font:inherit;margin:0 0 8px}
/* == ggf-sticky-css == */
.ggf-bm{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #DCE3DC;border-radius:999px;
  padding:6px 14px;font-size:.82rem;font-weight:700;color:#1B5E20;cursor:pointer;font-family:inherit;line-height:1.2}
.ggf-bm:hover{border-color:#2E7D32;background:#F2F8F1}
.ggf-bm.on{background:#E6F0E6;border-color:#2E7D32}
.ggf-bm[disabled]{opacity:.6;cursor:default}
.ggf-saved-box{background:#fff;border:1px solid #DCE3DC;border-radius:12px;padding:14px 16px;margin:14px 0}
.ggf-saved-box h3{margin:0 0 8px;font-size:1rem;color:#1B5E20}
.ggf-saved-none{margin:0;font-size:.88rem;color:#5C6B5C}
.ggf-saved-list{list-style:none;margin:0;padding:0}
.ggf-saved-list li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #EEF2ED;font-size:.9rem}
.ggf-saved-list li:last-child{border-bottom:0}
.ggf-saved-list a{flex:1;min-width:0;color:#1B5E20;font-weight:700;text-decoration:none}
.ggf-saved-list a:hover{color:#2E7D32}
.ggf-saved-list em{flex:none;font-style:normal;font-size:11.5px;color:#5C6B5C;background:#E6F0E6;border-radius:999px;padding:2px 9px}
.ggf-draft-note{display:block;margin-top:6px;font-size:.78rem;color:#5C6B5C}
/* == ggaip-css == */
/* 2026-08-12 (Gaurav): this button was sitting OVER the ad rails on both sides — the rail's CTA
   ("Get it FREE") was hidden behind it. It is now positioned from the CONTENT COLUMN edge
   rather than the viewport edge: (100vw - content) / 2 is one gutter, then 18px inside it. So it never sits
   over the rail. Where there are no rails at all (small screens), the media query below
   brings it back to the edge.
   The name is shorter too — an icon plus "AI Help" instead of "Ask the Plant Doctor". */
/* Nudged 5px right and 5px up on Gaurav's call (2026-08-20): bottom 18 -> 23, inset 18 -> 13.
   .ggaip-wrap below carries the same numbers so the open panel stays flush with the button. */
/* --gg-fab-b is the shared "how high do the floating buttons sit" number. The JS at the bottom of
   this file raises it while the footer band is on screen, and the push bell reads the SAME variable
   so the two always stay on one line (2026-08-20). */
/* ── LAUNCHER: messenger-style FAB (2026-09-04, Gaurav: "ise messaging type ka movement wala
   button jo jagah kam le … but engaging and designer")
   Before this it was a permanent 250px-wide pill sitting over the content on every page — on a
   390px phone that is two-thirds of the screen width, and the screenshot of the forum shows it
   covering the category list.
   Now it behaves the way a chat launcher is expected to: a 56px circle at rest, and the label
   slides out on hover/focus (and once, briefly, on the first page of a visit) so it is still
   discoverable rather than a mystery button. The DOM is unchanged — only widths animate — so the
   panel, the shared --gg-fab-b line-up with the push bell, and the unread dot all keep working. */
.ggaip-btn{position:fixed;bottom:var(--gg-fab-b,23px);z-index:99998;display:flex;align-items:center;gap:0;
  /* max() is required: on a screen narrower than the content, (100vw - 1170px)/2 is NEGATIVE and
     the button would go OFF screen. A 9px floor is always kept. */
  right:max(9px, calc((100vw - var(--gg-maxw,1170px))/2 + 13px));
  background:linear-gradient(140deg,#33883a,#1B5E20);color:#fff;border:0;border-radius:999px;
  /* overflow is deliberately NOT hidden here: the unread dot sits at top:-3px/right:-3px and was
     being sliced in half by it (seen in the 390px shot). The label does its own clipping. */
  padding:0;height:56px;min-width:56px;width:56px;cursor:pointer;
  font:700 14px/1.2 inherit;box-shadow:0 8px 26px rgba(27,94,32,.34);
  transition:box-shadow .25s ease, transform .25s ease, background .25s ease}
.ggaip-btn:hover{background:linear-gradient(140deg,#2E7D32,#14501a);color:#fff;
  transform:translateY(-2px);box-shadow:0 12px 30px rgba(27,94,32,.42)}
.ggaip-btn:active{transform:translateY(0)}
.ggaip-btn:focus-visible{outline:3px solid rgba(46,125,50,.5);outline-offset:3px}
/* the icon disc is the whole button when collapsed */
.ggaip-btn .l{display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex:none;
  border-radius:50%;background:transparent;font-size:24px;line-height:1}
.ggaip-btn .l svg,.ggaip-btn .gg-mark{width:32px!important;height:32px!important;display:block}
/* a soft breathing ring — movement is what makes a chat button get noticed, so it is here rather
   than in extra width. Stops entirely for anyone who asked for less motion. */
.ggaip-btn::before{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(46,125,50,.55);animation:ggaipPulse 2.8s ease-out infinite}
@keyframes ggaipPulse{0%{box-shadow:0 0 0 0 rgba(46,125,50,.5)}70%{box-shadow:0 0 0 16px rgba(46,125,50,0)}100%{box-shadow:0 0 0 0 rgba(46,125,50,0)}}
@media (prefers-reduced-motion:reduce){
  .ggaip-btn,.ggaip-btn .ggaip-btxt{transition:none}
  .ggaip-btn::before{animation:none}
  .ggaip-btn:hover{transform:none}
}
.ggaip-dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;
  background:#BC5028;border:2px solid #fff}
/* the panel uses the same content edge, otherwise it would open over the rail */
.ggaip-wrap{position:fixed;right:max(9px, calc((100vw - var(--gg-maxw,1170px))/2 + 13px));bottom:23px;z-index:99999;width:min(400px,calc(100vw - 28px));
  /* FIXED height, not just a cap (2026-09-03, approved spec: "the panel is fixed-size; a new
     message scrolls inside the log, it never pushes the page") — before, an empty chat was a
     stubby 357px box that looked nothing like the mockup. */
  height:min(640px,calc(100vh - 36px));max-height:min(660px,calc(100vh - 36px));display:none;flex-direction:column;background:#fff;
  border:1px solid #e3e1d9;border-radius:16px;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.26)}
/* launcher label — title + "Free · N answers a day". Collapsed to zero width at rest; max-width is
   what animates, because `width:auto` cannot be transitioned. */
.ggaip-btxt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left;
  max-width:0;opacity:0;white-space:nowrap;overflow:hidden;
  transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .22s ease,padding .3s cubic-bezier(.4,0,.2,1)}
/* the button itself has to grow with the label, otherwise the text spills outside the green pill */
.ggaip-btn:hover,.ggaip-btn:focus-visible,.ggaip-btn.is-peek{width:auto}
.ggaip-btn:hover .ggaip-btxt,
.ggaip-btn:focus-visible .ggaip-btxt,
.ggaip-btn.is-peek .ggaip-btxt{max-width:210px;opacity:1;padding-right:20px}
.ggaip-btxt b{font-size:13.5px;font-weight:800}
.ggaip-btxt i{font-style:normal;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.85)}
.ggaip-on{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7ef29a;margin-right:5px;
  box-shadow:0 0 0 3px rgba(126,242,154,.25);vertical-align:middle}
/* On a phone the launcher stays a pure circle — that is the whole point of the change, and a
   sliding label on a touch screen would only be triggered by the tap that opens the chat anyway. */
@media(max-width:520px){
  .ggaip-btxt{display:none}
  .ggaip-btn{width:54px;height:54px;min-width:54px}
  .ggaip-btn .l{width:54px;height:54px}
}
.ggaip-wrap.on{display:flex}
.ggaip-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(135deg,#2E7D32,#1B5E20);color:#fff;padding:13px 14px 13px 16px;flex:0 0 auto}
.ggaip-head b{font-size:15px;display:block;line-height:1.3}
.ggaip-head span{font-size:12px;opacity:.9}
.ggaip-x{background:transparent;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;
  padding:4px 6px;border-radius:8px;min-width:34px;min-height:34px}
.ggaip-x:hover{background:rgba(255,255,255,.18)}
.ggaip-body{overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.ggaip-body .ggai{margin:0;border:0;border-radius:0;max-width:none;padding:14px}
.ggaip-body .ggai-top{display:none}
.ggaip-body .ggai-log{max-height:none}
@media (max-width:520px){
  .ggaip-wrap{right:0;bottom:0;width:100vw;max-height:88vh;border-radius:16px 16px 0 0}
  .ggaip-btn{right:9px;bottom:var(--gg-fab-b,19px)}   /* padding removed: the circle sizes itself now */
}
@media print{.ggaip-btn,.ggaip-wrap{display:none !important}}
/* ── robot-gardener icon (2026-09-04): friendly blink + hello-tilt on hover, engaging not noisy ── */
.ggaip-bot{display:block}
.ggaip-btn .ggaip-bot{width:34px!important;height:34px!important}
.ggaip-eye{transform-origin:center;animation:ggaipBlink 4.6s infinite}
@keyframes ggaipBlink{0%,92%,100%{transform:scaleY(1)}95%,97%{transform:scaleY(.12)}}
.ggaip-btn:hover .ggaip-bot{animation:ggaipHello .7s ease}
@keyframes ggaipHello{0%{transform:rotate(0)}30%{transform:rotate(-10deg)}60%{transform:rotate(8deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.ggaip-eye,.ggaip-btn:hover .ggaip-bot{animation:none}}
/* ── chat composer roomier (2026-09-04, Gaurav: "type karne ki jagah kam, box bhara-bhara") ── */
.ggaip-body .ggai{padding:14px 14px 16px}
.ggaip-body .ggai-form{padding:10px 12px;border-radius:14px;align-items:flex-end}
.ggaip-body .ggai-in{min-height:44px;font-size:14px;line-height:1.45;padding:10px 0}
.ggaip-body .ggai-chips{margin:12px 0 12px}
.ggaip-body .ggai-chip{margin:3px 4px 3px 0}
.ggaip-body .ggai-log{gap:12px;margin-bottom:16px}
.ggaip-body .ggai-meter{margin-top:10px}
.ggaip-body .ggai-meta{margin-top:8px}
/* == ggai-css == */
/* ---------------------------------------------------------------------------
   2026-08-13 REDESIGN (Gaurav: "compact + professional ka bhi baap" (even better than compact + professional)).
   The !important on every font-size and margin is deliberate: this panel prints inside
   the_content, where the prose CSS from gg-article-style.php
   `.gardeningguider-entrycontent p{font-size:17px!important;line-height:1.85!important}`
   and `h2{font-size:26px!important;border-bottom:2px}` apply. Without !important
   the panel's UI text turns into article prose (which is exactly what happened on the tools page).
   --------------------------------------------------------------------------- */
.ggai{--g:#2E7D32;--f:#1B5E20;--t:#BC5028;--th:#A64420;--cr:#F7F6F1;--ink:#2D2D2D;--ln:#e3e1d9;
  max-width:760px;margin:24px auto;background:#fff;border:1px solid var(--ln);border-radius:16px;
  /* /ask/ is this panel's own page, where the 760px cap left an empty gutter on both sides
     while every other block took the full width. On its own page the panel takes the full width. */
  padding:0;overflow:hidden;font-size:17px;line-height:1.6;color:var(--ink);
  box-shadow:0 1px 3px rgba(27,94,32,.07)}
.ggai *{box-sizing:border-box}
/* header bar — makes the panel feel like a product rather than a plain box */
.ggai-top{display:flex;align-items:center;gap:11px;padding:13px 16px;
  background:linear-gradient(135deg,var(--g),var(--f));color:#fff}
.ggai-ava{flex:0 0 auto;width:36px;height:36px;border-radius:10px;font-size:18px;line-height:1;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  display:flex;align-items:center;justify-content:center}
.ggai-ttlwrap{flex:1 1 auto;min-width:0;display:block}
.gardeningguider-entrycontent .ggai-h,
.ggai-h{margin:0 !important;padding:0 !important;border:0 !important;font-size:17px !important;
  font-weight:800 !important;line-height:1.25 !important;color:#fff !important}
.ggai-sub{display:block;margin:2px 0 0 !important;font-size:12.5px !important;
  line-height:1.4 !important;color:rgba(255,255,255,.86) !important}
.ggai-live{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:4px 10px;white-space:nowrap}
.ggai-dot{width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.ggai-body{padding:14px 16px 15px}
.ggai-log{display:none;flex-direction:column;gap:10px;margin-bottom:14px;max-height:58vh;overflow-y:auto}
.ggai-log.on{display:flex}
.ggai-msg{padding:11px 14px;border-radius:12px;font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.ggai-msg.u{background:var(--g);color:#fff;align-self:flex-end;max-width:88%;border-bottom-right-radius:4px}
.ggai-msg.a{background:#EAF4EA;border:1px solid #D4E8D5;color:var(--ink);align-self:flex-start;max-width:96%;border-bottom-left-radius:4px}
.ggai-msg.e{background:#FDECEA;color:#a4261a;align-self:flex-start;max-width:96%}
.ggai-msg.e a{color:#a4261a;font-weight:700}
/* ===== 2026-08-16 — parts added after benchmarking against Claude/ChatGPT/Gemini ===== */
.ggai-txt{white-space:pre-wrap;overflow-wrap:anywhere}
.ggai-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:9px 0 0;
  padding-top:8px;border-top:1px solid rgba(27,94,32,.12)}
.ggai-actbtn{background:transparent;border:1px solid #CFE3D0;color:#3f513f;border-radius:8px;
  font:inherit;font-size:12.5px;line-height:1;padding:0 10px;min-height:32px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:.15s}
.ggai-actbtn:hover:not(:disabled){background:#fff;border-color:var(--g);color:var(--f)}
.ggai-actbtn:disabled{opacity:.5;cursor:default}
.ggai-actbtn.on{background:var(--g);border-color:var(--g);color:#fff}
.ggai-actnote{font-size:12px;color:#5c6b5c}
.ggai-msg.e .ggai-act{border-top-color:rgba(164,38,26,.18)}
.ggai-msg.e .ggai-actbtn{border-color:#f0c4bd;color:#a4261a}
.ggai-msg.ggai-stopped{background:#F4F4F1;color:#5c6b5c;border:1px solid #e2e2dc}
/* Stop — shown only while an answer is still coming in */
.ggai-stop{background:#fff;border:1.5px solid var(--g);color:var(--f);border-radius:10px;
  font:inherit;font-weight:700;font-size:13.5px;min-height:40px;padding:0 16px;cursor:pointer;
  margin-left:8px;flex:0 0 auto}
.ggai-stop:hover{background:var(--g);color:#fff}
.ggai-send.ggai-busy{opacity:.55}
@media(max-width:520px){
  .ggai-act{gap:5px}
  .ggai-actbtn{font-size:12px;padding:0 8px}
  .ggai-stop{margin:8px 0 0;width:100%}
}
.ggai-dots span{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;
  background:#9bb098;animation:ggaib 1.2s infinite}
.ggai-dots span:nth-child(2){animation-delay:.2s}.ggai-dots span:nth-child(3){animation-delay:.4s}
@keyframes ggaib{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ggai-dots span{animation:none;opacity:.6}}
.ggai-chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:13px}
.ggai-chiplab{flex:0 0 100%;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:#5b6358;margin-bottom:1px}
/* margin:0 !important — the theme's button rule puts a 25px margin-bottom on every chip,
   which scattered three chips across three separate rows on mobile (measured 2026-08-13). */
.ggai-chip{margin:0 !important;background:#F6F7F6;border:1px solid var(--ln);border-radius:999px;padding:7px 13px;
  font-size:12.8px;font-weight:600;color:var(--f);cursor:pointer;font-family:inherit;
  line-height:1.35;text-align:left;min-height:34px;transition:background .16s,color .16s,border-color .16s}
.ggai-chip:hover,.ggai-chip:focus-visible{background:var(--g);color:#fff;border-color:var(--g)}
/* composer — input and button share one shell (two separate controls did not look professional) */
.ggai-form{display:flex;align-items:flex-end;gap:8px;background:#fff;
  border:1.5px solid var(--ln);border-radius:14px;padding:7px 7px 7px 13px;
  transition:border-color .16s,box-shadow .16s}
.ggai-form:focus-within{border-color:var(--g);box-shadow:0 0 0 3px rgba(46,125,50,.16)}
.ggai-in{flex:1 1 auto;min-width:0;padding:8px 0;border:0;outline:0;background:transparent;
  font-size:16px;font-family:inherit;line-height:1.5;resize:none;min-height:40px;max-height:150px;
  color:var(--ink)}
/* 2026-08-16: in the floating panel (~300px wide) the placeholder wrapped onto a second line and
   was CUT OFF — the screenshot showed half a letter after "Ask anything about your". The textarea
   is one line tall, so keep the placeholder on one line too and clip it with "…" when it does not fit.
   (Shortening the placeholder was not the right fix — on a large screen the full text reads well.) */
.ggai-in::placeholder{color:#9aa69a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ggai-send{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;background:var(--t);
  color:#fff;border:0;border-radius:12px;padding:0 18px;font-size:14.5px;font-weight:800;
  cursor:pointer;font-family:inherit;min-height:44px;transition:background .16s}
.ggai-send:hover{background:var(--g)}
.ggai-send:disabled{opacity:.55;cursor:not-allowed}
.ggai-send:focus-visible{outline:3px solid rgba(46,125,50,.5);outline-offset:2px}
.gardeningguider-entrycontent .ggai-meta,
.ggai-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin:10px 0 0 !important;font-size:12.5px !important;line-height:1.45 !important;color:#5b6358}
.ggai-up{color:var(--t);font-weight:800;text-decoration:none}
.ggai-up:hover{color:var(--th);text-decoration:underline}
.gardeningguider-entrycontent .ggai-fine,
.ggai-fine{margin:9px 0 0 !important;padding-top:9px;border-top:1px solid #ECEFEC;
  font-size:11.8px !important;color:#9aa69a;line-height:1.5 !important}
/* LIMIT CARD — in place of a red "error". A limit is not a fault; it is the one moment when the user
   genuinely wanted an answer. So this card stays calm, says what comes next, and offers one
   and gives them a single clear button. */
/* 2026-09-04 — "On Gardening Guider" block under an answer. Deliberately quiet: it is a helpful
   next step, not an ad. The plan pitch stays in .ggai-limit (the moment the reader actually wants
   more), because a sales line inside a gardening answer reads as spam and is what the
   helpful-content rules penalise. */
.ggai-links{margin:8px 0 4px;padding:11px 13px;background:#F4F7F3;border:1px solid #dfe8dc;border-radius:12px}
.ggai-links > b{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#5c6b5c;margin-bottom:7px;font-weight:700}
.ggai-link,.ggai-link:link,.ggai-link:visited{display:block;padding:6px 8px;margin:2px -4px;font-size:13.5px;line-height:1.45;
  color:#1B5E20 !important;text-decoration:none;border-radius:8px;min-height:24px}
.ggai-link:hover,.ggai-link:focus{background:#E7F0E5;color:#14471a !important;text-decoration:underline}
@media (max-width:480px){ .ggai-link{font-size:14px;padding:8px} }

.ggai-limit{margin:10px 0 2px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(165deg,#F3F7F2,#E9F2E8);border:1px solid #d8ebd6}
/* DIRECT children only — otherwise a <b> inside the paragraph ("2 questions every day") also became a block,
   took its own line, and split the sentence into three pieces. */
.ggai-limit > b{display:block;font-size:15.5px;color:#1B5E20;margin-bottom:5px}
.ggai-limit p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:#4a5148}
/* !important is required: the theme's prose-link rule (a{color:var(--gg-green)}) was winning here,
   and the button had GREEN text on an ORANGE background — terrible contrast.
   Measured: color rgb(46,125,50) on rgb(188,80,40). Dark background means white text (brand rule). */
.ggai-limit-cta,.ggai-limit-cta:link,.ggai-limit-cta:visited{display:inline-block;background:#BC5028;
  color:#fff !important;text-decoration:none;font-weight:700;font-size:14px;border-radius:10px;padding:10px 18px}
.ggai-limit-cta:hover,.ggai-limit-cta:focus{background:#A64420;color:#fff !important}
.ggai-limit-or{display:block;margin-top:9px;font-size:12px;color:#7a8177}
.page-ask .ggai,.ggai.is-page{max-width:none;margin:0 0 6px}
.ggai-note{color:#7a8177}
.ggai-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ===== 2026-09-03 — approved MOCKUPS/ai-chat.html spec parts ===== */
.ggai-cam{flex:0 0 auto;width:44px;min-height:44px;border:1.5px solid var(--ln);border-radius:12px;
  background:#fff;font-size:18px;cursor:pointer;transition:border-color .15s,background .15s;align-self:flex-end}
.ggai-cam:hover{border-color:var(--g);background:#F3F7F2}
.ggai-msg.u .ggai-photo{display:block;max-width:180px;max-height:180px;border-radius:10px;margin:0 0 6px}
.gardeningguider-entrycontent .ggai-meter,
.ggai-meter{margin:9px 0 0 !important;display:flex;flex-direction:column;gap:5px}
.ggai-meter-t{font-size:12px !important;color:#5b6358}
.ggai-meter-t b{color:var(--f)}
.ggai-meter-bar{display:block;height:6px;border-radius:99px;background:#ECEFEC;overflow:hidden}
.ggai-meter-bar i{display:block;height:100%;border-radius:99px;background:var(--g);transition:width .3s ease}
.ggai-meter-bar.full i{background:var(--t)}
.ggai-greet{align-self:flex-start}
@media (max-width:520px){.ggai{margin:20px auto;border-radius:12px}
  .ggai-top{padding:11px 13px}.ggai-body{padding:12px 13px 13px}
  .ggai-sub{display:none}
  .ggai-form{flex-direction:column;align-items:stretch;padding:9px}
  .ggai-send{width:100%;justify-content:center}}
/* == ggf-askbar-css == */
/* CENTRE glass modal — engaging order: icon → heading → text → button (at the bottom). Centred on both mobile and desktop. */
#ggf-askwrap{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(15,40,20,.48);backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
  opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s}
#ggf-askwrap.on{opacity:1;visibility:visible}
#ggf-askcard{position:relative;width:min(400px,100%);text-align:center;padding:32px 26px 24px;border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(238,246,238,.82));
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.72);box-shadow:0 26px 70px rgba(15,40,20,.44),inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(18px) scale(.955);transition:transform .36s cubic-bezier(.22,1,.36,1)}
#ggf-askwrap.on #ggf-askcard{transform:none}
/* close — square glass button */
#ggf-askcard .ggf-ask-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:11px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;font-size:20px;color:#3a5a3f;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:.15s}
#ggf-askcard .ggf-ask-x:hover{background:#2E7D32;color:#fff}
/* icon — square glass tile */
#ggf-askcard .ggf-ask-ic{width:68px;height:68px;margin:0 auto 15px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:35px;
  background:linear-gradient(135deg,rgba(46,125,50,.18),rgba(27,94,32,.10));border:1px solid rgba(46,125,50,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
/* !important (2026-09-02, Gaurav popup sweep): the site's global `body h3{font-size:22px !important}`
   was overriding every h3 size in this card — the short-phone trim below never actually shrank it. */
#ggf-askcard h3{margin:0 0 9px;font-size:1.44rem !important;font-weight:800;color:#153f1a;line-height:1.16;font-family:inherit}
#ggf-askcard p{margin:0 0 16px;font-size:.98rem;line-height:1.55;color:#3c5140}
#ggf-askcard p b{color:#1B5E20}
#ggf-askcard .ggf-ask-proof{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:6px 14px;border-radius:11px;font-size:.8rem;color:#2f5636;font-weight:700;
  background:rgba(46,125,50,.10);border:1px solid rgba(46,125,50,.18)}
#ggf-askcard .ggf-ask-proof .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.22)}
/* primary CTA — square, terracotta with glass sheen */
.ggf-ask-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;border-radius:14px;
  font-size:1.04rem;font-weight:800;color:#fff;text-decoration:none;cursor:pointer;letter-spacing:.01em;
  background:linear-gradient(135deg,#E2683B,#C7552C);border:1px solid rgba(255,255,255,.30);
  box-shadow:0 12px 28px rgba(199,85,44,.44),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .16s,box-shadow .16s,filter .16s}
.ggf-ask-cta:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 16px 34px rgba(199,85,44,.52),inset 0 1px 0 rgba(255,255,255,.55)}
/* secondary — square frosted-glass button */
.ggf-ask-later{display:block;width:100%;margin-top:10px;height:44px;border-radius:14px;cursor:pointer;
  font-size:.92rem;font-weight:700;color:#3c5140;
  background:rgba(255,255,255,.44);border:1px solid rgba(255,255,255,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.15s}
.ggf-ask-later:hover{background:#2E7D32;color:#fff}
@media(max-width:480px){#ggf-askcard{padding:28px 20px 20px;border-radius:18px}#ggf-askcard h3{font-size:1.3rem !important}}
/* 2026-08-21 — phone shape, to match the other popups. Docked to the bottom, and on a SHORT phone
   trimmed hard: measured 472px tall on a 360x640 screen = 66% of it, and gg-popup-rules.php refuses
   anything over 55%, so on those phones this card was simply never shown. The 68px icon and the
   social-proof pill are what go; the question, the button and the "later" link stay. */
@media(max-width:1023px){
  #ggf-askwrap{align-items:flex-end;padding:0}
  #ggf-askcard{width:100%;border-radius:18px 18px 0 0;padding:20px 18px 16px}
}
/* threshold 740→849 (2026-09-02): a full card is ~460px — on the very common 360x800 / 375x812
   phones that is 57%, past the warden's 55% cap, so the popup silently never showed there. */
@media(max-width:1023px) and (max-height:849px){
  #ggf-askcard{padding:14px 16px 12px}
  #ggf-askcard .ggf-ask-ic{width:0;height:0;margin:0;overflow:hidden;font-size:0}
  #ggf-askcard .ggf-ask-proof{display:none}
  #ggf-askcard h3{font-size:1.12rem !important;margin-bottom:6px}
  #ggf-askcard p{font-size:.88rem;line-height:1.45;margin-bottom:11px}
  #ggf-askcard .ggf-ask-x{top:6px;right:8px;width:28px;height:28px}
}
/* landscape phone (2026-09-02): even trimmed, the card was 72% of a 375px-tall screen. The ✕ does
   "Maybe later"'s job, the copy tightens, and the card fits the 55% cap. */
@media(max-width:1023px) and (max-height:459px){
  #ggf-askcard .ggf-ask-later{display:none}
  #ggf-askcard h3{font-size:1rem !important;margin-bottom:4px}
  #ggf-askcard p{font-size:.8rem;line-height:1.35;margin-bottom:8px}
  .ggf-ask-cta{height:44px;font-size:.95rem}
  #ggf-askcard{padding:10px 14px 10px}
}
@media(prefers-reduced-motion:reduce){#ggf-askwrap,#ggf-askcard{transition:opacity .2s}#ggf-askcard{transform:none}}
/* == ggauth-css == */
#ggauth-wrap{position:fixed;inset:0;z-index:100050;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(15,40,20,.5);backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
#ggauth-wrap.on{opacity:1;visibility:visible}
#ggauth-card{position:relative;width:min(410px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:15px 24px 13px;border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(238,246,238,.85));
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.72);box-shadow:0 26px 70px rgba(15,40,20,.46),inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(18px) scale(.955);transition:transform .34s cubic-bezier(.22,1,.36,1)}
#ggauth-wrap.on #ggauth-card{transform:none}
/* reset the theme's global input, label and form margins, otherwise the fields get a double gap */
#ggauth-card form,#ggauth-card .ggauth-field,#ggauth-card .ggauth-field input,#ggauth-card .ggauth-field label{margin:0!important}
/* parent theme ka global `button{margin:0 0 25px;padding:11px 25px}` modal ke tabs/CTA/close pe se hatao —
   otherwise a 25px bottom margin and 25px side padding on every button makes the card tall and scrollable.
   Scoped to the modal only; buttons elsewhere are untouched. The component classes supply their own height and centring. */
#ggauth-card button{margin:0!important;padding:0!important;background-color:transparent}
#ggauth-card .ggauth-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:11px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;
  background:linear-gradient(135deg,#BC5028,#A64420);border:1px solid rgba(255,255,255,.3);
  box-shadow:0 4px 12px rgba(199,85,44,.3);transition:.15s}
#ggauth-card .ggauth-x:hover{filter:brightness(1.07);transform:translateY(-1px)}
.ggauth-head{text-align:center;margin-bottom:9px}
.ggauth-logo{display:block;height:34px;width:auto;max-width:172px;margin:0 auto 5px;object-fit:contain}
.ggauth-ic{width:52px;height:52px;margin:0 auto 8px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:27px;
  background:linear-gradient(135deg,rgba(46,125,50,.18),rgba(27,94,32,.10));border:1px solid rgba(46,125,50,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.ggauth-head h3{margin:0 0 2px;font-size:1.1rem;font-weight:800;color:#153f1a;line-height:1.18}
.ggauth-head p{margin:0;font-size:.8rem;color:#4a6350;line-height:1.35}
/* segmented tabs — square glass */
.ggauth-tabs{display:flex;gap:4px;padding:4px;margin:0 0 9px;border-radius:12px;background:rgba(46,125,50,.09);border:1px solid rgba(46,125,50,.15)}
.ggauth-tab{flex:1;height:34px;border:0;border-radius:9px;cursor:pointer;font-size:.9rem;font-weight:800;color:#5c7361;background:transparent;transition:background .16s,color .16s,box-shadow .16s}
/* Gaurav 2026-07-14: white hover → theme green + white text */
.ggauth-tab:hover:not(.on){color:#fff;background:#2E7D32}
.ggauth-tab.on{background:#fff;color:#1B5E20;box-shadow:0 3px 10px rgba(27,94,32,.14)}
.ggauth-form{display:none;flex-direction:column;gap:6px}
.ggauth-form.on{display:flex}
/* software-style ROW: label left, input right (ek line me) — desktop/laptop */
.ggauth-field{position:relative;display:flex;align-items:center;gap:10px}
.ggauth-field label{flex:0 0 84px;font-size:.82rem;font-weight:700;color:#3c5140;text-align:left;line-height:1.2}
.ggauth-field input{flex:1;min-width:0;height:30px;border-radius:4px;padding:0 12px;font-size:.9rem;color:#173d1c;
  background:rgba(255,255,255,.62);border:1.5px solid rgba(46,125,50,.22);backdrop-filter:blur(6px);outline:none;transition:.15s;box-sizing:border-box;width:100%}
.ggauth-field input::placeholder{color:#8aa08f}
.ggauth-field input:focus{border-color:#2E7D32;background:rgba(255,255,255,.9)}
.ggauth-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
/* primary CTA — square, terracotta with glass sheen */
.ggauth-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:1px;border-radius:12px;
  font-size:1.02rem;font-weight:800;color:#fff;cursor:pointer;letter-spacing:.01em;
  background:linear-gradient(135deg,#BC5028,#A64420);border:1px solid rgba(255,255,255,.3);
  box-shadow:0 12px 28px rgba(199,85,44,.42),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .16s,box-shadow .16s,filter .16s}
/* Gaurav 2026-07-14: HOVER only = theme green with white text (the default stays terracotta)
   the #ggauth-card prefix is required to beat the ID rule #ggauth-card button{background:transparent} */
#ggauth-card .ggauth-cta:hover{background:#2E7D32!important;color:#fff!important;transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(27,94,32,.42),inset 0 1px 0 rgba(255,255,255,.45);filter:none}
.ggauth-cta[disabled]{opacity:.7;cursor:default;transform:none;filter:none}
.ggauth-msg{display:none;margin:2px 0 4px;padding:10px 13px;border-radius:11px;font-size:.86rem;font-weight:600;line-height:1.4}
.ggauth-msg.err{display:block;background:rgba(214,60,40,.10);border:1px solid rgba(214,60,40,.3);color:#a5321f}
.ggauth-msg.ok{display:block;background:rgba(46,125,50,.12);border:1px solid rgba(46,125,50,.3);color:#1B5E20}
.ggauth-alt{margin-top:8px;text-align:center;font-size:.83rem;color:#2c4432;font-weight:600}
/* the switch is a <button> now (it opens the other mode, it does not navigate) — styled to look
   exactly like the link it replaced, and #A64420 instead of #C7552C so the text clears WCAG AA
   on this panel (TESTING/Lighthouse, 18 Aug 2026). */
.ggauth-alt a,.ggauth-alt .ggauth-switch{color:#A64420;font-weight:700;text-decoration:none;cursor:pointer;
  background:none;border:0;padding:0;font:inherit;min-height:24px}
.ggauth-alt a:hover,.ggauth-alt .ggauth-switch:hover{text-decoration:underline}
.ggauth-alt .ggauth-switch:focus-visible{outline:3px solid #2E7D32;outline-offset:2px;border-radius:6px}
.ggauth-forgot{text-align:right;font-size:.8rem;margin-top:-4px}
.ggauth-forgot a{color:#4a6350;text-decoration:none}
.ggauth-forgot a:hover{color:#1B5E20;text-decoration:underline}
.ggauth-note{font-size:.7rem;color:#6b7d70;text-align:center;line-height:1.4;margin-top:1px}
.ggauth-note a{color:#C7552C;font-weight:700;text-decoration:underline}
.ggauth-note a:hover{color:#a5321f}
/* social — OR divider + Google/Facebook/Apple (glass rows, square) */
.ggauth-social{margin-top:9px;display:flex;flex-direction:column;gap:6px}
.ggauth-or{display:flex;align-items:center;gap:10px;color:#3c5140;font-size:.68rem;font-weight:800;letter-spacing:.07em;margin-bottom:1px}
.ggauth-or:before,.ggauth-or:after{content:"";flex:1;height:1px;background:rgba(46,125,50,.18)}
/* 3 social buttons in ONE compact row (icon + short name) */
.ggauth-sbtns{display:flex;gap:7px}
.ggauth-sbtn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;height:42px;border-radius:11px;cursor:pointer;
  font-size:.83rem;font-weight:700;color:#2D2D2D;text-decoration:none;
  background:rgba(255,255,255,.6);border:1.5px solid rgba(255,255,255,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.16s}
/* Gaurav 2026-07-15: NO green hover on the social buttons — the original glass hover is back */
.ggauth-sbtn:hover{background:rgba(255,255,255,.92);border-color:#2E7D32;transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,45,25,.12)}
.ggauth-sbtn svg{flex:none}
.ggauth-sbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:360px){.ggauth-sbtn span{display:none}} /* very narrow: icon-only */
/* Nextend (real) buttons, if active — normalize to our square glass look */
.ggauth-social .nsl-container-buttons{display:flex;flex-direction:column;gap:9px}
.ggauth-social .nsl-button{border-radius:12px!important;box-shadow:none!important;width:100%}
/* CAPTCHA row — compact single line: "a + b =" + refresh + answer box (square, brand colors) */
.ggauth-cap{display:flex;align-items:center;gap:7px}
.ggauth-cap-q{flex:none;font-weight:800;font-size:1rem;color:#1B5E20;white-space:nowrap;letter-spacing:.5px;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}
.ggauth-cap-q b{color:#C7552C}
.ggauth-cap-new{flex:none;width:30px;height:30px;border-radius:4px!important;border:1.5px solid rgba(46,125,50,.28)!important;
  background:rgba(255,255,255,.65)!important;color:#2E7D32;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .25s,background .15s,border-color .15s}
/* Gaurav 2026-07-14: white hover → theme green + white icon */
.ggauth-cap-new:hover{background:#2E7D32!important;border-color:#2E7D32!important;color:#fff!important;transform:rotate(180deg)}
.ggauth-cap input[name="captcha"]{flex:1;min-width:0;height:30px;margin:0!important;border-radius:4px;padding:0 10px;font-size:.9rem;color:#173d1c;text-align:center;
  background:rgba(255,255,255,.62);border:1.5px solid rgba(46,125,50,.22);outline:none;transition:.15s;box-sizing:border-box}
.ggauth-cap input[name="captcha"]:focus{border-color:#2E7D32;background:rgba(255,255,255,.92)}
@media(max-width:480px){#ggauth-card{padding:18px 20px 14px;border-radius:18px}.ggauth-head h3{font-size:1.16rem}
  /* mobile: keep label and input side by side (a row), with 25% more input height for touch */
  .ggauth-field label{flex:0 0 74px}
  .ggauth-field input{height:38px}
  .ggauth-cap input[name="captcha"]{height:38px}.ggauth-cap-new{width:38px;height:38px}}
/* SHORT screens (laptops) — extra compact so the social row fits without scrolling */
@media(max-height:780px){
  #ggauth-card{padding:12px 24px 11px}
  .ggauth-head{margin-bottom:7px}
  .ggauth-logo{height:30px;margin-bottom:4px}
  .ggauth-head p{display:none}
  .ggauth-tabs{margin-bottom:8px}
  .ggauth-form{gap:5px}
  .ggauth-social{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){#ggauth-card{transform:none;transition:opacity .2s}}