/* SV Botanica — shared site chrome (topbar, nav, footer).
   Extracted verbatim 2026-08-17 from the canonical inline CSS on index.html so
   that product and insight pages can use the same markup as the main pages.
   Main pages still carry their own inline copy; keep the two in step. */
/* Defaults so the chrome renders on pages that do not define these
   themselves; a page's own :root comes later in source order and wins. */
:root{--bark:#3D4A1E;--border:rgba(61,74,30,.15);--cream:#F0EDD5;--earth:#6B7A3A;--gold:#C9A84C;--muted:#6B6B3A;--peach:#D4974E;--terra:#C17B3A;--text:#1E2610}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
main,header,nav,footer,.topbar,.ticker{position:relative;z-index:2}
/* topbar */
    .topbar{background:var(--bark);color:rgba(240,237,213,.75);font-size:12px;letter-spacing:.5px;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar a{color:var(--gold)}
/* nav */
    nav{position:sticky;top:0;z-index:60;background:rgba(248,246,236,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:box-shadow .3s,padding .3s}
nav.scrolled{box-shadow:0 10px 30px -18px rgba(61,74,30,.35)}
.nav-inner{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:28px;transition:padding .3s}
nav.scrolled .nav-inner{padding-top:9px;padding-bottom:9px}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo-name{font-family:'Playfair Display',serif;font-size:20px;color:var(--bark);display:block;line-height:1.1}
.nav-logo-tag{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links>a{font-size:14px;color:var(--text);letter-spacing:.3px;position:relative}
.nav-links>a:not(.nav-cta){padding-bottom:2px}
.nav-links>a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--terra);transition:width .25s}
.nav-links>a:not(.nav-cta):hover::after{width:100%}
.nav-cta{background:var(--terra);color:var(--cream)!important;padding:10px 22px;border-radius:4px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;transition:.2s}
.nav-cta:hover{background:var(--peach)}
.nav-search input{border:none;outline:none;background:transparent;padding:0 6px 0 12px;width:130px;font-family:'Jost',sans-serif;font-size:12px;color:var(--bark)}
.nav-search input::placeholder{color:var(--muted);opacity:.85}
.nav-search button{border:none;background:transparent;cursor:pointer;color:var(--earth);padding:0 10px;display:flex;align-items:center;height:100%;transition:color .2s}
.nav-search button:hover{color:var(--terra)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:auto}
.nav-hamburger span{width:22px;height:2px;background:var(--bark);border-radius:2px;transition:.3s}
/* footer */
    footer{background:var(--bark);color:rgba(240,237,213,.75);padding:76px 0 30px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:3rem}
.foot-grid h4{color:var(--cream);font-size:16px;margin-bottom:1rem}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:.55rem}
.foot-grid a{transition:color .2s}
.foot-grid a:hover{color:var(--gold)}
.foot-brand p{font-weight:300;font-size:13.5px;max-width:300px;margin-top:.8rem}
.foot-legal{border-top:1px solid rgba(240,237,213,.15);padding-top:1.6rem;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px}
.foot-legal a{margin-left:18px}
.foot-legal a:hover{color:var(--gold)}
@media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}.nav-links{display:none}.nav-hamburger{display:flex}}

/* language switcher (add_lang_switch.py) */
.lang-switch{white-space:nowrap}

/* Keyboard focus. The nav/mobile search inputs set outline:none for the pill
   styling, which left keyboard users with no visible focus indicator at all
   (WCAG 2.4.7). :focus-visible restores it without showing a ring on mouse
   click. Applied to every interactive element, not just the search box. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold,#C9A84C);outline-offset:2px;border-radius:3px}
.nav-search input:focus-visible,.mob-search input:focus-visible{outline:2px solid var(--gold,#C9A84C);outline-offset:1px}