/* Compact icon navigation; labels stay available to assistive technology. */
.site-header nav.main-menu{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:6px;margin-inline:auto;min-width:0;font-size:.88rem}
.site-header .main-menu a.main-menu-link{display:flex;align-items:center;flex:0 0 auto;min-width:44px;min-height:44px;padding:10px;gap:0;border:1px solid transparent;border-radius:999px;line-height:1.3;white-space:nowrap;transition:background .22s ease,border-color .22s ease,color .22s ease}
.main-menu-link>svg{display:block;flex:none;width:22px;height:22px}
.main-menu-label{display:grid;grid-template-columns:0fr;opacity:0;transition:grid-template-columns .25s ease,opacity .2s ease}
.main-menu-label>span{overflow:hidden;min-width:0}
.main-menu-label>span::before{content:"";display:inline-block;width:9px}
.site-header .main-menu-link:is(:hover,:focus-visible,[aria-current="page"]){background:#edf1e6;border-color:#dce4d4;color:#183c2c}
.main-menu-link:is(:hover,:focus-visible,[aria-current="page"]) .main-menu-label{grid-template-columns:1fr;opacity:1}
.site-header .main-menu-link[aria-current="page"]{background:#1c422f;color:#fcfcf7;border-color:#1c422f}
@media(max-width:1100px){.site-header{height:auto;min-height:112px;flex-wrap:wrap;padding-top:18px;padding-bottom:16px;gap:14px}.site-header nav.main-menu{order:3;width:100%;flex-wrap:wrap;gap:6px;margin:0}.header-actions{margin-left:auto}}
@media(max-width:700px){.site-header nav.main-menu{justify-content:center;gap:5px}.site-header .main-menu a.main-menu-link{grid-column:auto;font-size:.82rem}.site-header .main-menu a.main-menu-link:nth-child(n){grid-column:auto}}
/* Touch links navigate immediately; the destination keeps its active title expanded. */
@media(hover:none),(pointer:coarse){
 .site-header nav.main-menu{flex-wrap:wrap}
 .main-menu-link:not([aria-current]):not(:focus-visible):hover .main-menu-label{grid-template-columns:0fr;opacity:0}
 .site-header .main-menu-link:not([aria-current]):not(:focus-visible):hover{background:transparent;border-color:transparent}
}
@media(prefers-reduced-motion:reduce){.main-menu-label,.site-header .main-menu a.main-menu-link{transition:none}}

/* Desktop stays at the top; mobile uses a compact, single-tap bottom dock. */
:root{--botani-header-height:80px;--botani-dock-height:61px}
html{scroll-padding-top:calc(var(--botani-header-height) + 16px)}
.site-header{position:sticky;top:0;z-index:80;height:var(--botani-header-height);min-height:var(--botani-header-height);flex-wrap:nowrap;padding:0 5.2%;gap:16px;box-shadow:0 3px 18px #183c2c08}
.site-header .brand{width:clamp(140px,19vw,240px);flex-shrink:0}
.site-header nav.main-menu{order:0;width:auto;flex-wrap:nowrap;gap:3px;margin-inline:auto}
.site-header .header-actions{margin-left:0;gap:12px;flex-shrink:0}
.site-header nav.mobile-dock{display:none}
@media(min-width:901px){
 .plant-finder .plant-filter-sidebar{top:calc(var(--botani-header-height) + 16px)}
 .plant-finder .plant-filter-body{max-height:calc(100dvh - var(--botani-header-height) - 32px)}
}
@media(max-width:900px){
 html{scroll-padding-top:16px;scroll-padding-bottom:calc(var(--botani-dock-height) + env(safe-area-inset-bottom) + 16px)}
 html:not([data-plant-panel]) body:has(>.site-header){padding-bottom:calc(var(--botani-dock-height) + env(safe-area-inset-bottom))}
 .site-header{position:fixed;inset:auto 0 0;z-index:80;height:auto;min-height:0;padding:5px max(6px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));gap:0;border-top:1px solid #dce4d4;border-bottom:0;background:#fcfcf7;box-shadow:0 -3px 22px #183c2c10}
 .site-header>.brand,.site-header>.header-actions,.site-header nav.main-menu{display:none}
 .site-header nav.mobile-dock{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;width:100%;min-width:0;margin:0;order:0;font-size:10px}
 .mobile-dock-track{display:flex;flex:1;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overflow-anchor:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;gap:2px}
 .mobile-dock-track::-webkit-scrollbar{display:none}
 .site-header .mobile-dock-track>a,.site-header .mobile-dock-track>button{position:relative;display:flex;flex:0 0 68px;min-width:68px;min-height:50px;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 1px;border:0;border-radius:10px;background:transparent;color:#36533c;font:10px/1.2 Arial,sans-serif;text-align:center;cursor:pointer;white-space:nowrap}
 .mobile-dock svg{width:21px;height:21px;flex:none}
 .site-header .mobile-dock-track>a[aria-current]{background:#e8eedf;color:#173e2c;font-weight:600}
 .mobile-dock-track>button .basket-count{position:absolute;top:1px;left:calc(50% + 6px);min-width:15px;padding:1px 3px;border-radius:10px;background:#204532;color:white;font-size:9px;line-height:13px}
 .mobile-dock :is(a,button):focus-visible{outline:2px solid #799565;outline-offset:-3px}
 html[data-botani-theme=dark] .site-header .mobile-dock-track>:is(a,button){color:#e2eddd}
 html[data-botani-theme=dark] .site-header .mobile-dock-track>a[aria-current]{background:#294c37;color:#edf4e8}
 body .plant-compare-tray{bottom:calc(var(--botani-dock-height) + env(safe-area-inset-bottom) + 10px)}
 html:not([data-plant-panel]) body.has-plant-compare:has(>.site-header){padding-bottom:calc(var(--botani-dock-height) + 230px + env(safe-area-inset-bottom))}
 body>.toast{bottom:calc(var(--botani-dock-height) + env(safe-area-inset-bottom) + 14px)}
 html:not([data-plant-panel]) body:has(.vi-garden-app.is-full-page){padding-bottom:0}
}

/* Plants-only section shortcuts sit above the mobile navigation controls. */
.plant-section-menu{display:none}
@media(max-width:900px){
 html:has(.plant-section-menu){--botani-dock-height:108px}
 .site-header .plant-section-menu{display:flex;flex:none;align-items:center;gap:3px;width:100%;min-width:0;height:45px;padding:0 3px 3px;border-bottom:1px solid #dce4d4}
 .site-header .plant-section-menu>a{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;min-height:40px;padding:0 5px;border:1px solid transparent;border-radius:9px;color:#61705e;font:11px/1.2 Arial,sans-serif;text-decoration:none;white-space:nowrap;touch-action:manipulation;transition:background .18s,color .18s}
 .site-header .plant-section-menu>a[aria-current=location]{background:#e8eedf;border-color:#dce4d4;color:#173e2c;font-weight:600}
 .site-header .plant-section-menu>a:active{background:#dfe9d7}
 .site-header .plant-section-menu>a:focus-visible{outline:2px solid #799565;outline-offset:-3px}
 :is(#plant-genera,#plant-filters,#plant-saved,#plant-recent,#plant-results,#product-control,#plant-details,#plant-care,#plant-related,#wall-social_wall){scroll-margin-top:12px}
 html[data-botani-theme=dark] .site-header .plant-section-menu{border-color:#3b5641}
 html[data-botani-theme=dark] .site-header .plant-section-menu>a{color:#b7c9b2}
 html[data-botani-theme=dark] .site-header .plant-section-menu>a:is([aria-current=location],:active){background:#294c37;border-color:#3b5641;color:#edf4e8}
}
@media(prefers-reduced-motion:reduce){.site-header .plant-section-menu>a{transition:none}}

@media(min-width:901px) and (max-width:1050px){.site-header{padding-inline:4%}.site-header .brand{width:150px}.site-header nav.main-menu{gap:1px}.site-header .header-actions{gap:6px}}
/* Compensate for the original SVG's left canvas margin so the visible wordmark
   shares the filter panel's left edge, while retaining the original logo asset. */
@media(min-width:901px){.site-header .brand-logo{transform:translateX(-5.6%)}}