:root{
--forest:#22331B;
--pine:#33491F;
--sage:#ADC28C;
--sage-soft:#DCE5CB;
--marigold:#E9A413;
--marigold-ink:#8C630B; /* same hue, darkened for text on light backgrounds */
--glass:#F5F4EC;
--soil:#3A3226;
--white:#FFFFFF;
--display:'Fraunces',Georgia,serif;
--body:'Karla',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:165px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--body);color:var(--soil);background:var(--glass);line-height:1.6;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--pine)}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
h1,h2,h3{font-family:var(--display);color:var(--forest);font-weight:500;line-height:1.12}
.eyebrow{font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pine)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;font-family:var(--body);font-weight:700;font-size:.95rem;text-decoration:none;padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--marigold);color:var(--forest)}
.btn-gold:hover{background:#f2b02a}
.btn-outline{border-color:var(--forest);color:var(--forest);background:transparent}
.btn-outline:hover{background:var(--forest);color:var(--glass)}
/* .btn-light was built for dark forest sections, where near-white text reads at
12:1. On a light background it scored 1.00:1 -- invisible until hover. It now
defaults to dark ink and only goes light inside a dark section. */
.btn-light{border-color:var(--pine);color:var(--forest);background:transparent}
.btn-light:hover{background:var(--forest);color:var(--glass);border-color:var(--forest)}
.hero .btn-light,.signup .btn-light,footer .btn-light,.practice .btn-light,
.tier-gate .btn-light,.order-bar .btn-light,.season-banner .btn-light,.giftcards .btn-light,
[style*="--forest"] .btn-light{border-color:var(--sage);color:var(--glass)}
.hero .btn-light:hover,.signup .btn-light:hover,footer .btn-light:hover,.practice .btn-light:hover,
.tier-gate .btn-light:hover,.order-bar .btn-light:hover,.season-banner .btn-light:hover,.giftcards .btn-light:hover,
[style*="--forest"] .btn-light:hover{background:var(--sage);color:var(--forest);border-color:var(--sage)}
/* ---------- Nav ---------- */
/* Solid, not translucent: Safari drops the backdrop-filter repaint on
in-page anchor jumps and lets content underneath show through the nav.
isolation + transform keep the header on its own compositing layer. */
/* the sticky header is ~100px, so in-page anchors must not land under it.
scoped to real jump targets, not every element carrying an id. */
section[id],main[id],.cat-head[id],.faq[id],[id].wrap{scroll-margin-top:104px}
@media(max-width:760px){section[id],main[id],.cat-head[id],.faq[id],[id].wrap{scroll-margin-top:88px}}
header{position:sticky;top:0;z-index:50;background:var(--glass);border-bottom:1px solid var(--sage-soft);isolation:isolate;transform:translateZ(0)}
/* keyboard users can jump the 10-item nav on every page */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--forest);color:var(--glass);padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}
#main:focus{outline:none}
.nav{display:flex;align-items:center;gap:22px;padding:12px 24px;max-width:1200px;margin:0 auto}
.nav-logo{flex:0 0 auto}
.nav-logo img{height:74px;width:auto;max-width:none;object-fit:contain}
.nav-links{display:flex;gap:18px;margin-left:14px;align-items:center;flex-wrap:wrap}
.nav-links a{text-decoration:none;font-weight:700;font-size:.92rem;color:var(--forest)}
.nav-links a:hover{color:var(--marigold-ink)}
.nav-links a.wholesale-link{background:var(--forest);color:var(--glass);padding:9px 18px;border-radius:999px}
.nav-links a.wholesale-link:hover{background:var(--pine);color:var(--glass)}
.hours-pill{font-size:.8rem;font-weight:700;color:var(--pine);background:var(--sage-soft);padding:6px 14px;border-radius:999px;white-space:nowrap;margin-left:auto}
.banner{background:var(--marigold);text-align:center;padding:9px 18px;font-size:.92rem;font-weight:700;color:var(--forest)}
.banner a{color:var(--forest)}
/* ---------- FAQ ---------- */
.faq{background:#EDEEDF;padding:88px 0}
.faq h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:12px 0 36px}
.faq .wrap{max-width:820px}
.faq details{background:var(--white);border-radius:12px;margin-bottom:10px;box-shadow:0 1px 6px rgba(34,51,27,.08)}
.faq summary{cursor:pointer;padding:18px 24px;font-family:var(--display);font-size:1.08rem;font-weight:600;color:var(--forest);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--marigold-ink);font-size:1.3rem;font-family:var(--body);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--sage-soft)}
.faq .a{padding:16px 24px 20px;font-size:.97rem}
.faq .a a{font-weight:700}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.nav-toggle svg{width:28px;height:28px;display:block}
/* Below 1000px the nine links + Wholesale pill cannot hold one row, and a
wrapped nav orphans the pill onto its own line — hand over to the hamburger. */
@media(max-width:999px){
.hours-pill{display:none}
.nav{gap:14px;position:relative}
.nav-toggle{display:block}
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--glass);border-bottom:2px solid var(--sage);flex-direction:column;align-items:flex-start;padding:14px 24px 20px;gap:16px;box-shadow:0 10px 20px rgba(34,51,27,.12)}
.nav-links.open{display:flex}
.nav-links a{font-size:1.05rem;padding:4px 0}
.nav-links a.wholesale-link{padding:10px 20px}
}
/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:88px 0 170px;background:linear-gradient(180deg,var(--glass) 0%,#EDEEDF 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(51,73,31,.045) 0 1px,transparent 1px 96px),repeating-linear-gradient(0deg,rgba(51,73,31,.045) 0 1px,transparent 1px 96px)}
.hero-leaf{position:absolute;right:clamp(-150px,-7vw,-30px);top:clamp(-60px,-3vw,10px);width:clamp(320px,46vw,640px);opacity:.5;pointer-events:none}
.hero-bench{position:absolute;bottom:-4px;left:0;right:0;height:118px;pointer-events:none}
.hero-bench svg{width:100%;height:100%;display:block}
@media(max-width:680px){
.hero{padding:64px 0 160px}
.hero-leaf{width:60vw;right:-16vw;top:-24px;bottom:auto;opacity:.32}
}
.wave{background:var(--glass);line-height:0;margin-top:-1px}
.wave svg{display:block;width:100%;height:56px}
.hero-inner{position:relative;max-width:640px}
.hero h1{font-size:clamp(2.4rem,5.6vw,4rem);margin:18px 0 20px}
.hero h1 em{font-style:italic;color:var(--pine)}
.hero p.lede{font-size:1.15rem;max-width:34em;margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-facts{margin-top:44px;font-size:.9rem;font-weight:700;color:var(--pine);letter-spacing:.02em}
.hero-facts span{white-space:nowrap}
.hero-facts .dot{color:var(--marigold-ink);margin:0 10px}
/* ---------- Practices band ---------- */
.practices{background:var(--forest);color:var(--sage-soft);padding:78px 0}
.practices .eyebrow{color:var(--sage)}
.practices h2{color:var(--glass);font-size:clamp(1.7rem,3.4vw,2.4rem);margin:14px 0 42px;max-width:18em}
.practice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px}
.practice h3{color:var(--marigold);font-size:1.25rem;margin-bottom:10px}
.practice .p-icon{width:54px;height:54px;margin-bottom:14px}
.practice .p-icon svg{width:100%;height:100%;display:block}
.practice p{font-size:.98rem;color:#D8E0C6}
/* ---------- Plant tags (signature) ---------- */
.growing{padding:88px 0}
.growing-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.growing h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin-top:12px}
.growing-note{max-width:24em;font-size:.95rem;color:var(--pine)}
.tag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.tag-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tag-grid{grid-template-columns:1fr}}
.tag{background:var(--white);padding:26px 20px 40px;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),50% 100%,0 calc(100% - 22px));box-shadow:0 2px 10px rgba(34,51,27,.10);border-top:5px solid var(--sage)}
/* the cards lift on hover, so they have to actually go somewhere.
clip-path would crop a normal focus outline, hence the inset ring */
.tag{display:block;color:inherit;text-decoration:none}
.tag:focus-visible{box-shadow:inset 0 0 0 3px var(--marigold),0 12px 26px rgba(34,51,27,.16);outline:none}
.tag h3{font-size:1.15rem;margin-bottom:8px}
.tag .t-icon{width:44px;height:44px;margin-bottom:10px}
.tag .t-icon svg{width:100%;height:100%;display:block}
.story-gh{width:min(240px,70%);margin:0 0 26px}
.story-gh svg{width:100%;height:auto;display:block}
.tag p{font-size:.9rem;color:#5C5546}
.tag .season{display:inline-block;margin-top:12px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--marigold-ink)}
.extras{margin-top:48px;background:var(--sage-soft);border-radius:14px;padding:26px 30px;font-size:.98rem}
.extras strong{color:var(--forest)}
/* ---------- Story ---------- */
.story{background:#EDEEDF;padding:88px 0}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.story h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:12px 0 20px}
.story p{margin-bottom:16px}
.milestones{border-left:3px solid var(--sage);padding-left:26px;display:grid;gap:26px}
.milestone .year{font-family:var(--display);font-size:1.4rem;color:var(--marigold-ink);font-weight:600}
.milestone p{font-size:.95rem;margin:4px 0 0}
@media(max-width:820px){.story-grid{grid-template-columns:1fr}}
/* ---------- Visit ---------- */
.visit{padding:88px 0}
.visit h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:12px 0 40px}
.visit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:36px}
.visit-card h3{font-size:1.1rem;margin-bottom:12px;color:var(--pine)}
.visit-card p{font-size:.98rem}
.visit-card a{font-weight:700}
.hours-table{width:100%;font-size:.98rem;border-collapse:collapse}
.hours-table td{padding:5px 0}
.hours-table td:last-child{text-align:right;font-weight:700;color:var(--forest)}
/* ---------- Wholesale view ---------- */
.ws-hero{background:var(--forest);padding:92px 0;color:var(--sage-soft)}
.ws-hero .eyebrow{color:var(--sage)}
.ws-hero h1{color:var(--glass);font-size:clamp(2.2rem,5vw,3.4rem);margin:16px 0 20px;max-width:15em}
.ws-hero p{max-width:36em;font-size:1.1rem;color:#D8E0C6}
.ws-body{padding:80px 0}
.ws-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:860px){.ws-grid{grid-template-columns:1fr}}
.ws-info h2{font-size:1.6rem;margin-bottom:16px}
.ws-info p{margin-bottom:16px}
.ws-list{list-style:none;display:grid;gap:12px;margin:20px 0 32px}
.ws-list li{padding-left:28px;position:relative;font-size:.98rem}
.ws-list li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;background:var(--marigold);border-radius:50% 0 50% 50%;transform:rotate(45deg)}
.quote-form{background:var(--white);border-radius:16px;padding:34px;box-shadow:0 4px 18px rgba(34,51,27,.10)}
.quote-form h2{font-size:1.4rem;margin-bottom:6px}
.quote-form .sub{font-size:.9rem;color:#6B6455;margin-bottom:24px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px;color:var(--forest)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--sage-soft);border-radius:8px;font-family:var(--body);font-size:.95rem;background:var(--glass);color:var(--soil)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--marigold);border-color:var(--marigold)}
.field textarea{min-height:110px;resize:vertical}
.form-note{font-size:.82rem;color:#6B6455;margin-top:14px}
.confirm{display:none;background:var(--sage-soft);border-radius:10px;padding:16px 18px;margin-top:16px;font-size:.92rem;color:var(--forest);font-weight:700}
/* ---------- Footer ---------- */
footer{background:var(--forest);color:var(--sage-soft);padding:52px 0 40px}
.footer-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:center}
.footer-logo{background:var(--glass);padding:12px 20px;border-radius:14px;display:inline-block}
.footer-logo img{height:56px;width:auto;display:block}
footer p{font-size:.88rem}
footer a{color:var(--sage);font-weight:700;text-decoration:none}
footer a:hover{color:var(--marigold)}
/* ---------- Growing Guides ---------- */
.learn-hero{background:#EDEEDF;padding:80px 0 64px}
.learn-hero h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin:14px 0 16px}
.learn-hero p{max-width:38em;font-size:1.08rem}
.guide-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:44px}
.guide-card{display:block;text-decoration:none;background:var(--white);border-radius:14px;padding:26px 24px;border-top:5px solid var(--marigold);box-shadow:0 2px 10px rgba(34,51,27,.10);transition:transform .25s ease,box-shadow .25s ease}
.guide-card:hover{transform:translateY(-5px);box-shadow:0 12px 26px rgba(34,51,27,.16)}
.guide-card h3{font-size:1.15rem;margin-bottom:8px}
.guide-card p{font-size:.9rem;color:#5C5546}
.guide-card .read{display:inline-block;margin-top:12px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pine)}
.articles{padding:72px 0 90px}
.nat-list{list-style:none;padding:0;margin:18px 0 28px}
.nat-list li{padding:11px 0;border-bottom:1px solid var(--sage-soft)}
.nat-list li a{text-decoration:none;color:var(--forest)}
.nat-list li a:hover{color:var(--marigold-ink)}
.nat-n{font-size:.82rem;color:#6B6455;margin-left:6px}
.nat-d{display:block;font-size:.88rem;color:#5C5546;margin-top:3px}
.article{max-width:720px;margin:0 auto 84px;scroll-margin-top:100px}
.article:last-child{margin-bottom:0}
.article .eyebrow{color:var(--marigold-ink)}
.article h1{font-size:clamp(1.7rem,3.4vw,2.3rem);margin:10px 0 22px;font-family:var(--display);color:var(--forest);line-height:1.15}
.article h2{font-size:1.25rem;margin:32px 0 12px}
.article h3{font-size:1.25rem;margin:32px 0 12px}
.article p{margin-bottom:16px}
.article ul{margin:0 0 16px 22px}
.article li{margin-bottom:8px}
.tip{background:var(--sage-soft);border-left:4px solid var(--pine);border-radius:0 12px 12px 0;padding:18px 22px;margin:24px 0;font-size:.95rem}
.tip strong{color:var(--forest);display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.article-divider{border:none;border-top:2px dashed var(--sage);max-width:720px;margin:0 auto 84px}
.back-to-guides{display:inline-block;margin-top:24px;font-weight:700;font-size:.9rem}
.guide-fig{background:var(--white);border-radius:14px;padding:26px 24px 18px;margin:30px 0;box-shadow:0 2px 10px rgba(34,51,27,.08)}
.guide-fig svg{width:100%;height:auto;display:block}
.guide-fig figcaption{font-size:.83rem;color:#6B6455;margin-top:12px;text-align:center}
.htypes{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;text-align:center}
.htypes h4{font-family:var(--display);color:var(--forest);margin:10px 0 4px;font-size:1.02rem}
.htypes p{font-size:.78rem;color:#6B6455;margin:0;line-height:1.45}
/* ---------- Plant List ---------- */
.plants-hero{background:#EDEEDF;padding:80px 0 56px}
.plants-hero h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin:14px 0 16px}
.plants-hero p{max-width:38em;font-size:1.05rem}
.plant-tools{margin-top:34px}
.plant-search{width:100%;max-width:480px;padding:14px 22px;border:2px solid var(--sage);border-radius:999px;font-family:var(--body);font-size:1rem;background:var(--white);color:var(--soil)}
.plant-search:focus{outline:none;border-color:var(--marigold)}
.cat-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.cat-tab{border:2px solid var(--forest);background:transparent;color:var(--forest);font-family:var(--body);font-weight:700;padding:9px 20px;border-radius:999px;cursor:pointer;font-size:.9rem;transition:background .15s ease,color .15s ease}
.cat-tab:hover{background:var(--sage-soft)}
.cat-tab.active{background:var(--forest);color:var(--glass)}
.cat-tab .n{font-weight:400;opacity:.75;margin-left:4px}
.plant-list{padding:52px 0 90px}
.plant-list .wrap{max-width:860px}
.list-meta{font-size:.9rem;color:#6B6455;margin-bottom:22px}
.genus{background:var(--white);border-radius:12px;margin-bottom:10px;box-shadow:0 1px 6px rgba(34,51,27,.08)}
.genus summary{cursor:pointer;padding:16px 22px;font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--forest);display:flex;align-items:center;gap:10px;list-style:none}
.genus summary .count{margin-left:auto}
.genus summary::-webkit-details-marker{display:none}
.genus summary .count{font-family:var(--body);font-size:.75rem;font-weight:700;background:var(--sage-soft);color:var(--pine);padding:4px 12px;border-radius:999px;white-space:nowrap}
.genus[open] summary{border-bottom:1px solid var(--sage-soft)}
.genus ul{list-style:none;padding:14px 22px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:4px 24px}
.genus li{font-size:.92rem;padding:5px 0;border-bottom:1px dashed var(--sage-soft)}
.coming-soon{background:var(--white);border-radius:14px;padding:38px 32px;text-align:center;box-shadow:0 2px 10px rgba(34,51,27,.08)}
.coming-soon h3{margin-bottom:10px}
.no-results{text-align:center;padding:40px 0;color:#6B6455;display:none}
.plant-disclaimer{font-size:.85rem;color:#6B6455;margin-top:34px}
/* ---------- Events ---------- */
.events-hero{background:#EDEEDF;padding:80px 0 56px}
.events-hero h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin:14px 0 16px}
.events-hero p{max-width:38em;font-size:1.05rem}
.events-list{padding:56px 0 90px}
.events-list .wrap{max-width:820px}
.event-card{display:flex;gap:24px;background:var(--white);border-radius:14px;padding:26px 28px;margin-bottom:18px;box-shadow:0 2px 10px rgba(34,51,27,.10);align-items:flex-start}
.date-badge{flex:0 0 auto;width:76px;text-align:center;background:var(--marigold);border-radius:12px;padding:12px 6px 14px;color:var(--forest)}
.date-badge .mo{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.date-badge .day{display:block;font-family:var(--display);font-size:1.9rem;font-weight:600;line-height:1.1}
.date-badge .dow{display:block;font-size:.72rem;font-weight:700}
.event-body{min-width:0}
.event-body h2{font-size:1.25rem;margin-bottom:6px}
.event-meta{font-size:.85rem;font-weight:700;color:var(--pine);margin-bottom:10px}
.event-meta span{margin-right:16px}
.event-body p{font-size:.96rem;margin-bottom:10px}
.event-cost{display:inline-block;font-size:.8rem;font-weight:700;background:var(--sage-soft);color:var(--forest);padding:4px 12px;border-radius:999px}
.events-empty{background:var(--white);border-radius:14px;padding:44px 32px;text-align:center;box-shadow:0 2px 10px rgba(34,51,27,.08)}
.events-empty h2{margin-bottom:10px}
.event-register{padding:10px 22px;font-size:.88rem;margin-top:6px}
.events-note{font-size:.9rem;color:#6B6455;margin-top:30px}
@media(max-width:560px){.event-card{flex-direction:row;padding:20px}.date-badge{width:64px}.date-badge .day{font-size:1.6rem}.event-meta span{display:block;margin:0 0 3px}.events-hero .btn{font-size:.85rem;padding:11px 20px}}
/* Tighter links only where the row genuinely cannot hold full size:
1000–1070 always; 1071–1279 only in the open season, when the pill returns.
Below 1120 the pill sits out until there is room for it. */
@media(min-width:1000px) and (max-width:1070px){.nav-links{gap:14px}.nav-links a{font-size:.85rem}}
@media(min-width:1071px) and (max-width:1279px){.gg-open .nav-links{gap:14px}.gg-open .nav-links a{font-size:.85rem}}
@media(max-width:1119px){.hours-pill{display:none}}
/* ---------- Email signup ---------- */
.signup{background:var(--forest);padding:64px 0}
.signup .wrap{display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap}
.signup h2{color:var(--glass);font-size:clamp(1.5rem,3vw,2rem);margin:8px 0 10px}
.signup .eyebrow{color:var(--sage)}
.signup p{color:#D8E0C6;font-size:.95rem;max-width:32em}
.signup-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.signup-form input{padding:14px 20px;border-radius:999px;border:2px solid var(--sage);background:var(--glass);font-family:var(--body);font-size:.95rem;min-width:min(280px,70vw);color:var(--soil)}
.signup-form input:focus{outline:none;border-color:var(--marigold)}
.signup-confirm{display:none;color:var(--marigold);font-weight:700;font-size:.9rem;margin-top:12px}
/* ---------- Family ---------- */
.family{margin-top:70px}
.family h3{font-family:var(--display);font-size:1.6rem;font-weight:500;color:var(--forest);margin-bottom:26px}
.family-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:20px}
.family-card{background:var(--white);border-radius:14px;padding:26px 18px;text-align:center;box-shadow:0 2px 10px rgba(34,51,27,.10)}
.avatar{width:76px;height:76px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.35rem;font-weight:600;color:var(--forest)}
.av-1{background:var(--sage-soft)}.av-2{background:#F6E3B4}.av-3{background:#E8D5DE}.av-4{background:#D9E3EC}
.family-card h4{font-family:var(--display);color:var(--forest);font-size:1.08rem;font-weight:600}
.family-card p{font-size:.82rem;color:#6B6455;margin-top:5px}
/* ---------- Gallery ---------- */
.gallery{padding:88px 0}
.gallery h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:12px 0 36px}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.g-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g-grid{grid-template-columns:1fr}}
.g-tile{background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(34,51,27,.10);margin:0}
/* height scales with the column so 3-up tiles keep photo proportions
instead of letterboxing to ~2:1 */
.g-tile svg,.g-tile img{width:100%;aspect-ratio:3/2;height:auto;display:block;object-fit:cover}
.g-tile figcaption{padding:13px 18px;font-size:.86rem;font-weight:700;color:var(--forest)}
/* ---------- Back to top ---------- */
#toTop{position:fixed;bottom:22px;right:22px;width:48px;height:48px;border-radius:50%;background:var(--forest);color:var(--glass);border:2px solid var(--sage);font-size:1.15rem;cursor:pointer;box-shadow:0 6px 16px rgba(34,51,27,.3);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:60}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:hover{background:var(--pine)}
/* ---------- Print ---------- */
@media print{
header,.banner,footer,.hero-bench,.wave,#toTop,.signup,.back-to-guides,.hero-ctas,.article-divider{display:none!important}
body{background:#fff;font-size:12pt}
.hero,.practices,.story,.faq,.learn-hero,.plants-hero,.events-hero,.ws-hero{background:#fff!important;padding:20px 0!important}
.practices,.practices h2,.practices p,.ws-hero h1,.ws-hero p{color:#000!important}
.guide-fig,.tip,.tag,.genus,.event-card,.quote-form{box-shadow:none!important;border:1px solid #ccc}
.article{max-width:100%}
a{text-decoration:none;color:#000}
}
.view{display:none}
.view.active{display:block}
/* ---------- Motion (only for visitors who allow it) ---------- */
.tag{transition:transform .25s ease,box-shadow .25s ease}
.tag:hover{transform:translateY(-6px);box-shadow:0 12px 26px rgba(34,51,27,.16)}
@media (prefers-reduced-motion: no-preference){
/* Hero entrance: staggered rise on load */
.hero-inner > *{opacity:0;transform:translateY(26px);animation:rise .8s cubic-bezier(.22,.7,.35,1) forwards}
.hero-inner > *:nth-child(1){animation-delay:.1s}
.hero-inner > *:nth-child(2){animation-delay:.22s}
.hero-inner > *:nth-child(3){animation-delay:.36s}
.hero-inner > *:nth-child(4){animation-delay:.5s}
.hero-inner > *:nth-child(5){animation-delay:.66s}
@keyframes rise{to{opacity:1;transform:none}}
/* The sage leaf: grows in, its vein draws across, then it sways like air through an open vent */
.hero-leaf{transform-origin:15% 85%;animation:leafIn 1.3s cubic-bezier(.22,.7,.35,1) both,sway 10s ease-in-out 1.3s infinite alternate}
@keyframes leafIn{from{opacity:0;transform:scale(.9) rotate(-5deg) translateY(24px)}to{opacity:.5;transform:scale(1) rotate(-1.6deg) translateY(0)}}
.hero-leaf .vein{stroke-dasharray:620;stroke-dashoffset:620;animation:drawVein 1.5s ease-out .7s forwards}
@keyframes drawVein{to{stroke-dashoffset:0}}
@keyframes sway{from{transform:rotate(-1.6deg) translateY(0)}to{transform:rotate(2.2deg) translateY(10px)}}
@media(max-width:680px){
@keyframes leafIn{from{opacity:0;transform:scale(.9) rotate(-5deg) translateY(24px)}to{opacity:.4;transform:scale(1) rotate(-1.6deg) translateY(0)}}
}
/* Scroll-triggered reveals */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.7,.35,1)}
.reveal.in{opacity:1;transform:none}
/* Milestone years pop slightly after their card reveals */
.milestone .year{display:inline-block;transition:transform .5s cubic-bezier(.34,1.56,.64,1) .25s;transform:scale(.85)}
.milestone.in .year{transform:scale(1)}
}
/* multi-page additions */
.crumbs{font-size:.82rem;font-weight:700;color:#6B6455;margin-bottom:14px}
.crumbs a{color:var(--pine);text-decoration:none}
.filter-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.chip{border:2px solid var(--pine);background:transparent;color:var(--pine);font-family:var(--body);font-weight:700;font-size:.83rem;padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.chip:hover{background:var(--sage-soft)}
.chip.on{background:var(--pine);color:var(--glass)}
.cat-head{display:flex;align-items:center;gap:14px;margin:54px 0 18px}
.cat-head:first-of-type{margin-top:0}
.cat-head svg{width:40px;height:40px;flex:0 0 auto}
.cat-head h2{font-size:clamp(1.5rem,3vw,2rem)}
.cat-count{font-size:.8rem;font-weight:700;color:var(--pine);background:var(--sage-soft);padding:4px 12px;border-radius:999px}
.article-page .article{margin:56px auto 70px}
.genus-desc{padding:12px 22px 0;font-size:.9rem;color:#5C5546;max-width:60em}
.genus[open] .genus-desc{border-top:none}
.native-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--body);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#F6E3B4;color:#7A4C2A;padding:4px 10px;border-radius:999px;white-space:nowrap}
.native-badge svg{width:11px;height:11px}
/* ---------- Gift cards ---------- */
.giftcards{background:linear-gradient(135deg,#22331B 0%,#33491F 100%);padding:72px 0}
.giftcards .wrap{display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:space-between}
.gift-copy{max-width:34em}
.gift-copy .eyebrow{color:var(--sage)}
.gift-copy h2{color:var(--glass);font-size:clamp(1.6rem,3.2vw,2.2rem);margin:10px 0 14px}
.gift-copy p{color:#D8E0C6;font-size:1rem;margin-bottom:22px}
.gift-btns{display:flex;gap:12px 14px;flex-wrap:wrap;align-items:center}
.gift-fine{font-size:.82rem;color:#9FB183;margin-top:14px}
.gift-art{flex:0 0 auto;width:min(300px,80vw)}
.gift-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 28px rgba(0,0,0,.28))}
/* photos */
.story-photo{width:100%;border-radius:14px;box-shadow:0 4px 18px rgba(34,51,27,.16);margin-top:8px;height:auto}
.family-photos{display:grid;grid-template-columns:3fr 2fr;gap:18px;margin-bottom:26px}
.family-photos img{width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:0 4px 18px rgba(34,51,27,.14)}
@media(max-width:700px){.family-photos{grid-template-columns:1fr}}
.avatar{object-fit:cover}
.learn-flex{display:flex;gap:36px;align-items:flex-start}
.learn-photo{width:min(240px,36vw);border-radius:14px;box-shadow:0 4px 18px rgba(34,51,27,.16);height:auto}
@media(max-width:640px){.learn-flex{flex-direction:column}.learn-photo{width:70%}}
.cat-tabs{margin-top:18px}
.cat-tabs .chip{font-size:.9rem}
.tab-count{font-weight:400;opacity:.8;margin-left:5px;font-size:.82em}
#filterChips{margin-top:10px}
#filterChips .chip{font-size:.78rem;padding:7px 14px}
.session-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.session-btns .event-register{margin-top:0}
.guide-fig img{width:100%;height:auto;display:block;border-radius:12px}
.guide-fig a{display:block}
.signup-confirm-static{font-size:.82rem;color:#9FB183;margin-top:12px}
/* ---------- Plant picker ---------- */
.picker-hero{background:#EDEEDF;padding:80px 0 40px}
.picker-wrap{padding:0 0 90px}
.picker-wrap .wrap{max-width:880px}
.q-card{background:var(--white);border-radius:16px;padding:28px 30px;margin-bottom:16px;box-shadow:0 2px 12px rgba(34,51,27,.10)}
.q-card h3{font-size:1.15rem;margin-bottom:4px}
.q-card .q-sub{font-size:.86rem;color:#6B6455;margin-bottom:16px}
.opt-row{display:flex;gap:10px;flex-wrap:wrap}
.opt{border:2px solid var(--sage);background:transparent;color:var(--forest);font-family:var(--body);font-weight:700;font-size:.9rem;padding:11px 20px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s}
.opt:hover{background:var(--sage-soft)}
.opt.on{background:var(--pine);border-color:var(--pine);color:var(--glass)}
.picker-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0 30px}
.match-count{font-size:.9rem;font-weight:700;color:var(--pine)}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.result{background:var(--white);border-radius:14px;padding:20px 22px;box-shadow:0 2px 10px rgba(34,51,27,.10);border-left:5px solid var(--marigold)}
.result h3{font-family:var(--display);font-size:1.05rem;color:var(--forest);margin-bottom:4px}
.result .rc{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6B6455}
.result p{font-size:.86rem;margin-top:8px;color:#5C5546}
.result .pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.rp{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:999px;background:var(--sage-soft);color:var(--forest)}
.rp.nat{background:#F6E3B4;color:#7A4C2A}
.picker-empty{background:var(--white);border-radius:14px;padding:40px 30px;text-align:center;box-shadow:0 2px 10px rgba(34,51,27,.08)}
/* The wholesale list defaults to what we can actually supply. This line says
how much is being held back and gives one click to see the rest, so hiding
the sold-out rows never reads as "we don't grow that". */
.avail-hint{margin:9px 0 0;font-size:.83rem;color:#6B6455;line-height:1.5}
/* Signing out — small and out of the way, but findable on a shared computer.
Used by both wholesale portals, so it lives here rather than in one page. */
.signout-link{background:none;border:0;padding:0;margin-left:0;font:inherit;
font-size:.95em;color:var(--pine);text-decoration:underline;cursor:pointer}
.signout-link:hover{color:var(--forest)}
/* Hopping between live availability and preorders. One sign-in covers both,
so this is a plain link — nobody has to type a password again. */
.portal-link{font:inherit;font-size:.95em;color:var(--pine);font-weight:700;
text-decoration:underline;text-underline-offset:2px}
.portal-link:hover{color:var(--forest)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--pine);
font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linkish:hover{color:var(--forest)}
.linkish:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:3px}
/* A category with nothing available still gets a tab, so people can see it
exists — just not shouted about. */
#ordCats .chip.is-empty{opacity:.45}
#ordCats .chip.is-empty.on{opacity:1}
/* ---------- Container recipes ---------- */
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;margin:28px 0}
.recipe{background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(34,51,27,.12);display:flex;flex-direction:column}
.recipe-top{padding:18px 22px;color:#fff}
.recipe-top h3{font-family:var(--display);font-size:1.2rem;font-weight:600;color:#fff;margin:0}
.recipe-top span{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;opacity:.9}
.recipe-body{padding:18px 22px 20px;flex:1;display:flex;flex-direction:column}
.recipe-list{list-style:none;margin:0 0 14px;padding:0}
.recipe-list li{padding:9px 0;border-bottom:1px dashed #E4E7DA;font-size:.9rem;line-height:1.5}
.recipe-list li:last-child{border-bottom:none}
.role{display:inline-block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;border-radius:999px;margin-right:8px;vertical-align:1px}
.role-thriller{background:#22331B;color:#F5F4EC}
.role-filler{background:#DCE5CB;color:#22331B}
.role-spiller{background:#E9A413;color:#22331B}
.recipe-list .why{display:block;font-size:.8rem;color:#6B6455;margin-left:2px}
.recipe-note{font-size:.85rem;color:#5C5546;margin-top:auto;font-style:italic}
.slider-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.slider-row input[type=range]{flex:1;min-width:200px;accent-color:#33491F;height:6px}
.slider-val{font-weight:700;font-size:.9rem;color:var(--pine);white-space:nowrap;min-width:110px}
.rp.ht{background:#E4E7DA;color:#4A4438}
.role-block{margin-bottom:34px}
.role-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--sage-soft)}
.role-head .role{font-size:.72rem;padding:5px 14px}
.role-sub{font-size:.84rem;color:#6B6455;flex:1;min-width:180px}
.role-n{font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--pine)}
.result.r-thriller{border-left-color:#22331B}
.result.r-filler{border-left-color:#ADC28C}
.result.r-spiller{border-left-color:#E9A413}
@media(max-width:560px){.role-sub{display:none}}
/* ---------- Wholesale live order page ---------- */
.sheet-status{display:inline-block;font-size:.85rem;font-weight:700;padding:8px 16px;border-radius:999px;background:var(--sage-soft);color:var(--forest);margin-top:18px}
.sheet-status.ok{background:#DCE5CB;color:#33491F}
.sheet-status.warn{background:#F6E3B4;color:#7A4C2A}
.order-tools{margin-bottom:26px}
.order-tools .plant-search{width:100%;max-width:520px}
.ord-type{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--forest);margin:26px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--sage-soft)}
.ord-group{border-bottom:1px solid var(--sage-soft)}
.ord-group>summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer;padding:13px 4px;font-weight:700;color:var(--forest);list-style:none}
.ord-group>summary::-webkit-details-marker{display:none}
.ord-group>summary::before{content:"\25B8";display:inline-block;transition:transform .15s ease;color:var(--sage);font-size:.9rem}
.ord-group[open]>summary::before{transform:rotate(90deg)}
.ord-group>summary:hover{color:var(--pine)}
.og-name{font-size:1rem}
.og-meta{font-weight:400;font-size:.83rem;color:#6B6455;margin-right:auto}
.og-mine{background:var(--marigold);color:var(--forest);border-radius:99px;padding:2px 10px;font-size:.75rem;font-weight:700}
.ord-row{display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:8px}
.ord-row:nth-child(even){background:var(--glass)}
.ord-name{flex:1;min-width:0;font-size:.94rem}
.ord-size{font-size:.78rem;color:#6B6455;margin-left:8px}
.ord-note{display:block;font-size:.78rem;color:#6B6455}
.av{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:999px;white-space:nowrap}
.av-in{background:#DCE5CB;color:#33491F}
.av-low{background:#F6E3B4;color:#7A4C2A}
.av-out{background:#EFE2DF;color:#8A3B2E}
.av-ask{background:#E4E7DA;color:#6B6455}
/* preorder: readable as "orderable but not on the bench yet" — deliberately
distinct from both in-stock green and sold-out red */
.av-soon{background:#DCE6EF;color:#2E4A66}
.rev-pre{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:#DCE6EF;color:#2E4A66;padding:2px 7px;border-radius:99px;margin-left:6px}
.ord-qty{width:64px;padding:8px 10px;border:2px solid var(--sage);border-radius:8px;font-family:var(--body);font-size:.9rem;text-align:center;background:#fff}
.ord-qty:focus{outline:none;border-color:var(--marigold)}
.ord-qty:disabled{background:#F0F0EA;border-color:#DDD;cursor:not-allowed}
.order-bar{position:fixed;left:0;right:0;bottom:0;background:var(--forest);padding:14px 0;transform:translateY(110%);transition:transform .25s ease;z-index:70;box-shadow:0 -6px 20px rgba(34,51,27,.25)}
.order-bar.show{transform:translateY(0)}
.order-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:flex-end}
.ob-count{color:var(--glass);font-weight:700;font-size:.95rem;margin-right:auto}
/* Nothing stopped these two from being squeezed. On a phone the label broke
across four lines and the send button shrank into a gold circle hanging off
the right edge — a 125px-tall bar of crushed text. */
.order-bar .btn{white-space:nowrap;flex-shrink:0;display:inline-flex;
align-items:center;justify-content:center;min-height:44px}
/* Clear is the quieter of the two. This used to be an inline style attribute,
which beat every media query and left it a head shorter than Send. */
.order-bar #obClear{font-size:.82rem;padding:9px 18px}
@media(max-width:560px){
.ord-row{flex-wrap:wrap}
.ord-name{flex:1 0 100%}
/* Count on its own line, then Clear and a full-width send button. Trying to
fit all three across 393px was what broke it. */
.order-bar{padding:11px 0 calc(11px + env(safe-area-inset-bottom, 0px))}
.order-bar .wrap{gap:8px 10px;padding:0 16px}
.ob-count{flex:1 1 100%;margin-right:0;font-size:.85rem;font-weight:600;
letter-spacing:.01em;line-height:1.3}
.order-bar #obClear{flex:0 0 auto;padding:13px 18px;font-size:.86rem}
#obSend{flex:1 1 auto;text-align:center}
}
/* ---------- Button polish ---------- */
.btn{-webkit-tap-highlight-color:transparent;line-height:1.2}
.btn:active{transform:translateY(1px)}
.btn-gold{box-shadow:0 2px 8px rgba(233,164,19,.28)}
.btn-gold:hover{box-shadow:0 4px 14px rgba(233,164,19,.36)}
.btn-gold:active{background:#d9970f}
.btn-outline:active{background:var(--pine);border-color:var(--pine)}
/* outline buttons sitting on a dark background (order bar, forest bands) */
.order-bar .btn-outline,.on-dark .btn-outline{border-color:var(--sage);color:var(--glass);background:transparent}
.order-bar .btn-outline:hover,.on-dark .btn-outline:hover{background:var(--sage);color:var(--forest)}
/* keyboard focus, visible but not ugly */
.btn:focus-visible,.chip:focus-visible,.opt:focus-visible,.ord-qty:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.chip:active,.opt:active{transform:translateY(1px)}
.chip,.opt{-webkit-tap-highlight-color:transparent}
.chip.on:hover{background:var(--forest)}
.opt.on:hover{background:var(--forest);border-color:var(--forest)}
/* order bar buttons: comfortable thumb targets */
.order-bar .btn{padding:11px 22px;font-size:.9rem}
@media(max-width:560px){
.order-bar .btn{padding:13px 16px;font-size:.88rem}
.btn{padding:13px 22px}
.chip,.opt{min-height:40px}
}
/* availability filter chips */
#ordCats{margin-top:14px}
.chip[data-avail]{border-color:var(--sage)}
.chip[data-avail].on{background:var(--pine);border-color:var(--pine);color:var(--glass)}
.chip[data-avail="ready"].on{background:#4A6B2A;border-color:#4A6B2A}
/* ---------- Wholesale tier gate ---------- */
.tier-gate{position:fixed;inset:0;z-index:200;background:linear-gradient(160deg,#22331B,#33491F);display:flex;align-items:center;justify-content:center;padding:24px}
.tier-gate-card{background:var(--glass);border-radius:18px;padding:44px 40px;max-width:420px;width:100%;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.tier-gate-logo{height:64px;width:auto;margin-bottom:20px}
.tier-gate h1{font-family:var(--display);font-size:1.6rem;color:var(--forest);margin-bottom:10px}
.gate-title{font-family:var(--display);font-size:1.6rem;color:var(--forest);margin-bottom:10px}
.tier-gate p{font-size:.9rem;color:#5C5546;margin-bottom:22px;line-height:1.55}
.tier-gate form{display:flex;flex-direction:column;gap:12px}
.tier-gate input{padding:13px 16px;border:2px solid var(--sage);border-radius:10px;font-family:var(--body);font-size:1rem;text-align:center;background:#fff}
.tier-gate input:focus{outline:none;border-color:var(--marigold)}
.tier-gate .btn{width:100%}
.tier-error{color:#8A3B2E !important;font-weight:700;font-size:.85rem !important;margin:14px 0 0 !important}
.tier-badge{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 12px;border-radius:999px;background:#DCE5CB;color:#33491F;margin-left:10px;vertical-align:2px}
.ord-price{font-weight:700;color:var(--forest);white-space:nowrap;font-size:.9rem;min-width:76px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.ord-unit{font-weight:400;font-size:.68rem;color:#6B6455;letter-spacing:.01em;display:block;white-space:nowrap}
.ord-row .ord-price{margin-left:4px}
@media(max-width:560px){.tier-gate-card{padding:34px 24px}}
/* ---------- Order form submit ---------- */
.ob-date{color:var(--glass);font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:8px}
/* the date picker lives in the review card now -- a native calendar anchored to
a field flush with the viewport bottom had nowhere to open */
.rev-method{display:flex;flex-direction:column;gap:7px;margin:18px 0 2px}
.rev-method-label{font-weight:700;font-size:.88rem;color:var(--forest)}
.rev-method-opts{display:flex;gap:10px;flex-wrap:wrap}
.rev-method-opts label{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--soil);border:2px solid var(--sage-soft);border-radius:10px;padding:10px 14px;cursor:pointer;flex:1 1 auto;min-height:44px}
.rev-method-opts label:has(input:checked){border-color:var(--pine);background:var(--glass);font-weight:700;color:var(--forest)}
.rev-method-opts input{width:auto;margin:0;accent-color:var(--pine)}
.rev-date{display:flex;flex-direction:column;gap:5px;margin:16px 0 4px}
.rev-date label{font-weight:700;font-size:.88rem;color:var(--forest)}
.rev-date input{padding:11px 13px;border-radius:9px;border:2px solid var(--sage);font-family:var(--body);font-size:1rem;max-width:230px;color:var(--soil)}
.rev-date input:focus{outline:none;border-color:var(--pine)}
.rev-date-hint{font-size:.79rem;color:#6B6455}
.order-done[hidden]{display:none !important}
.order-done{position:fixed;inset:0;z-index:210;background:rgba(34,51,27,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.order-done-card{position:relative;z-index:1;background:var(--white);border-radius:18px;padding:44px 40px;max-width:440px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.order-done-card .btn{position:relative;z-index:2;cursor:pointer}
.od-check{width:64px;height:64px;border-radius:50%;background:#DCE5CB;color:#33491F;font-size:2rem;line-height:64px;margin:0 auto 18px}
.order-done-card h2{font-family:var(--display);font-size:1.6rem;color:var(--forest);margin-bottom:10px}
.order-done-card p{font-size:.92rem;color:#5C5546;margin-bottom:22px;line-height:1.55}
/* order:-1 puts the date above the count; both sit on their own row now that
the bar's wrap actually wraps. */
@media(max-width:560px){.ob-date{flex:1 0 100%;order:-1;margin-bottom:0;font-size:.8rem}}
/* ---------- Order review ---------- */
.order-review[hidden]{display:none !important}
.order-review{position:fixed;inset:0;z-index:205;background:rgba(34,51,27,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.order-review-card{position:relative;z-index:1;background:var(--white);border-radius:18px;padding:34px 34px 28px;max-width:560px;width:100%;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.order-review-card h2{font-family:var(--display);font-size:1.5rem;color:var(--forest);margin-bottom:6px}
.rev-meta{font-size:.88rem;color:#5C5546;margin-bottom:14px}
.rev-list{overflow-y:auto;border-top:2px solid var(--sage-soft);border-bottom:2px solid var(--sage-soft);padding:6px 0;margin-bottom:14px;flex:1}
.rev-row{display:flex;gap:10px;align-items:baseline;padding:8px 2px;border-bottom:1px dashed #E4E7DA;font-size:.9rem}
.rev-row:last-child{border-bottom:none}
.rev-qty{font-weight:700;color:var(--pine);white-space:nowrap;min-width:40px}
.rev-name{flex:1;min-width:0}
.rev-name em{color:#6B6455;font-size:.82em}
.rev-price{white-space:nowrap;color:#4A4438;font-size:.85rem}
.rev-total-row{display:flex;justify-content:space-between;font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--forest);margin-bottom:10px}
.rev-fine{font-size:.8rem;color:#6B6455;line-height:1.5;margin-bottom:18px}
.rev-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.rev-actions .btn{position:relative;z-index:2}
@media(max-width:560px){.order-review-card{padding:26px 20px}.rev-actions{justify-content:stretch}.rev-actions .btn{flex:1}}
.cat-note{background:#FDF6E6;border-left:4px solid #E9A413;padding:12px 16px;border-radius:8px;font-size:.9rem;color:#7A4C2A;margin:0 0 16px}
/* ---------- My List / garden planner ---------- */
.mylist-link{position:relative}
.mylist-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:99px;background:var(--marigold);color:var(--forest);font-size:.72rem;font-weight:700;line-height:1;vertical-align:middle}
.mylist-count[hidden]{display:none}
/* save buttons */
.v-save,.r-save{flex:0 0 auto;width:26px;height:26px;border-radius:99px;border:2px solid var(--pine);background:transparent;color:var(--pine);font-size:.95rem;font-weight:700;line-height:1;cursor:pointer;padding:0;transition:background .15s,border-color .15s,color .15s}
.v-save:hover,.r-save:hover{background:var(--sage-soft)}
.v-save.on,.r-save.on{background:var(--pine);border-color:var(--pine);color:var(--glass)}
.v-save:focus-visible,.r-save:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.genus ul li{display:flex;align-items:center;gap:10px}
/* variety thumbnails: only the ~26% with a photo carry one, so rows without
keep a matching indent and the column does not go ragged */
.li-thumb{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:0 0 34px;background:var(--sage-soft)}
.genus ul li{min-height:34px}
.genus ul li:not(:has(.li-thumb))::before{content:"";flex:0 0 34px;height:34px;border-radius:6px;background:var(--glass);border:1px dashed var(--sage-soft)}
.genus ul li .v-save{margin-left:auto}
.result{position:relative}
.result .r-save{position:absolute;top:14px;right:14px}
/* toast */
.gg-toast{position:fixed;left:50%;bottom:78px;transform:translate(-50%,14px);z-index:400;background:var(--forest);color:var(--glass);padding:11px 18px;border-radius:99px;font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:90vw;text-align:center}
.gg-toast.show{opacity:1;transform:translate(-50%,0)}
/* the list page */
.listpage{padding:44px 0 70px}
.listpage h1{font-family:var(--display);font-size:2rem;color:var(--forest);margin-bottom:8px}
.listlede{max-width:60ch;color:#5C5546;margin-bottom:22px}
.listbar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.list-empty{background:var(--glass);border-radius:16px;padding:34px 28px;text-align:center;max-width:560px}
.list-empty h3{font-family:var(--display);color:var(--forest);margin-bottom:8px}
.list-empty .v-save.demo{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;vertical-align:middle}
.list-cat{margin-bottom:30px}
.list-cat h2{font-family:var(--display);font-size:1.35rem;color:var(--forest);border-bottom:2px solid var(--sage-soft);padding-bottom:7px;margin-bottom:14px}
.list-n{font-family:var(--body);font-size:.8rem;color:#6B6455;font-weight:400}
.list-genus{margin:0 0 16px}
.list-genus h3{font-size:.95rem;font-weight:700;color:var(--pine);margin-bottom:5px}
.list-genus ul{list-style:none;margin:0;padding:0}
.list-genus li{display:flex;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px dashed #E4E7DA;font-size:.94rem}
.list-genus li:last-child{border-bottom:none}
.chk{flex:0 0 auto;width:15px;height:15px;border:2px solid var(--sage);border-radius:4px}
.ml-name{flex:1;min-width:0}
.ml-x{flex:0 0 auto;border:none;background:none;color:#6B6455;font-size:1.3rem;line-height:1;cursor:pointer;padding:0 6px;border-radius:6px}
.ml-x:hover{color:#8A3B2E;background:#EDEEDF}
.list-note{max-width:62ch;margin-top:26px;font-size:.88rem;color:#6B6455;line-height:1.6}
@media print{
header,footer,.no-print,.hours-pill,.listlede,.list-note{display:none !important}
.listpage{padding:0}
.list-genus li{border-bottom:1px solid #ddd}
a[href]:after{content:""}
}
.list-flash{background:#FDF6E6;border-left:4px solid #E9A413;padding:10px 14px;border-radius:8px;font-size:.88rem;color:#7A4C2A;margin-bottom:18px;max-width:60ch}
.list-flash[hidden]{display:none}
/* ---------- Guides library: search, filters, sections ---------- */
.guide-tools{position:sticky;top:0;z-index:40;background:var(--glass);padding:16px 0 12px;margin:22px 0 6px;border-bottom:1px solid #E4E7DA}
.gsearch{position:relative;max-width:520px;margin-bottom:12px}
.gsearch-i{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;pointer-events:none}
.gsearch input{width:100%;padding:13px 42px 13px 44px;border:2px solid var(--sage);border-radius:99px;background:#fff;font:400 1rem/1.2 var(--body);color:#3A3226;-webkit-appearance:none}
.gsearch input::placeholder{color:#6B6455}
.gsearch input:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 4px rgba(173,194,140,.35)}
.gsearch input::-webkit-search-cancel-button{display:none}
.gsearch-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:none;border-radius:99px;background:none;color:#6B6455;font-size:1.35rem;line-height:1;cursor:pointer}
.gsearch-x:hover{background:var(--sage-soft)}
.gsearch-x[hidden]{display:none}
.gfilters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.gfil{border:2px solid var(--pine);background:transparent;color:var(--pine);border-radius:99px;padding:7px 14px;font:500 .85rem/1 var(--body);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.gfil:hover{background:var(--sage-soft)}
.gfil.on{background:var(--pine);border-color:var(--pine);color:var(--glass)}
.gfil-n{opacity:.6;font-size:.78em;margin-left:3px}
.gfil.on .gfil-n{opacity:.75}
.gcount{font-size:.83rem;color:#6B6455;margin:0}
.guide-sec{margin:30px 0 6px}
.guide-sec[hidden]{display:none}
.guide-sec-h{font-family:var(--display);font-size:1.15rem;color:var(--forest);margin:0 0 14px;display:flex;align-items:baseline;gap:8px}
.guide-sec-h:after{content:"";flex:1;height:2px;background:var(--sage-soft);border-radius:2px}
.sec-n{font-family:var(--body);font-size:.78rem;font-weight:400;color:#6B6455}
.guide-card[hidden]{display:none}
.guide-none{background:var(--glass);border-radius:16px;padding:34px 28px;text-align:center;max-width:600px;margin:26px auto}
.guide-none[hidden]{display:none}
.guide-none h3{font-family:var(--display);color:var(--forest);margin-bottom:8px}
.guide-none p{color:#5C5546;line-height:1.6}
@media(max-width:640px){
.guide-tools{padding:12px 0 10px}
.gfilters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gfilters::-webkit-scrollbar{display:none}
}
/* ---------- My List discoverability ---------- */
.list-hint{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:#FDF6E6;border-left:4px solid var(--marigold);padding:11px 15px;border-radius:10px;font-size:.89rem;color:#7A4C2A;max-width:62ch;margin:0 0 18px}
.hint-plus{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:99px;border:2px solid var(--pine);background:transparent;color:var(--pine);font-weight:700;font-size:.9rem;line-height:1;flex:0 0 auto}
.list-hint a{color:#7A4C2A;font-weight:700}
.gg-fab{position:fixed;right:16px;bottom:16px;z-index:300;display:inline-flex;align-items:center;gap:8px;background:var(--forest);color:var(--glass);text-decoration:none;border-radius:99px;padding:12px 18px;font:600 .9rem/1 var(--body);box-shadow:0 10px 28px rgba(0,0,0,.3);transition:transform .15s,background .15s}
.gg-fab svg{width:17px;height:17px}
.gg-fab:hover{transform:translateY(-2px);background:var(--pine)}
.gg-fab:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}
.gg-fab.has{background:var(--pine)}
.gg-fab-n{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 6px;border-radius:99px;background:var(--marigold);color:var(--forest);font-size:.75rem;font-weight:800}
.gg-fab-n[hidden]{display:none}
@media(max-width:640px){.gg-fab{right:12px;bottom:12px;padding:11px 15px}}
@media print{.gg-fab,.list-hint{display:none !important}}
/* keep the back-to-top button clear of the floating My List pill */
body.has-fab #toTop{bottom:76px}
body.has-fab .gg-toast{bottom:134px}
@media(max-width:640px){
body.has-fab #toTop{bottom:70px;right:14px}
body.has-fab .gg-toast{bottom:126px}
}
/* Readable disabled state - opacity alone washes the label out to ~1.8:1 */
.btn[disabled],.btn:disabled{background:#EDEEDF;color:#5C5546;border-color:#E4E7DA;box-shadow:none;cursor:default;pointer-events:none;transform:none}
.guide-caveat{background:#EDEEDF;border-left:4px solid var(--sage);padding:12px 16px;border-radius:8px;font-size:.92rem;color:#5C5546;margin:0 0 20px}
.more-wrap{text-align:center;margin:26px 0 6px}
.more-note{font-size:.85rem;color:#6B6455;margin-top:10px}
.foot-legal{margin-top:14px;font-size:.82rem}
.foot-legal a{color:var(--sage);text-decoration:underline}
.foot-legal a:hover{color:var(--glass)}
.fig-label{font-family:var(--display);color:var(--forest);margin:10px 0 4px;font-size:1.02rem;font-weight:600}
.q-card h2{font-size:1.05rem;font-family:var(--display);color:var(--forest);margin-bottom:12px}
/* ---------- Illustrated guide cards ---------- */
.gi-sprite{position:absolute;width:0;height:0;overflow:hidden}
.guide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px}
.guide-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:2px solid var(--sage-soft);border-radius:16px;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.guide-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(34,51,27,.16);border-color:var(--sage)}
.guide-card:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}
.gc-art{display:block;padding:14px 14px 6px;background:var(--sage-soft);border-bottom:2px solid var(--sage-soft)}
.gc-art svg{display:block;width:100%;height:104px}
.guide-card.c-cont .gc-art{background:#E3EBD4}
.guide-card.c-per .gc-art{background:#DCE5CB}
.guide-card.c-mn .gc-art{background:#E6EDDB}
.guide-card.c-prob .gc-art{background:#F6E9CE}
.guide-card.c-pest .gc-art{background:#EFE3D2}
.guide-card.c-house .gc-art{background:#E4E9DA}
.gc-body{display:flex;flex-direction:column;flex:1;padding:14px 17px 17px}
.gc-cat{display:inline-block;align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pine);background:var(--sage-soft);padding:3px 9px;border-radius:99px;margin-bottom:9px}
.guide-card h3{font-family:var(--display);font-size:1.08rem;color:var(--forest);margin:0 0 7px;line-height:1.25}
.guide-card p{font-size:.9rem;color:#5C5546;line-height:1.55;margin:0 0 12px}
.guide-card .read{margin-top:auto;font-size:.85rem;font-weight:700;color:var(--pine)}
.guide-card:hover .read{color:var(--forest);text-decoration:underline}
@media(max-width:520px){
.guide-cards{grid-template-columns:1fr;gap:14px}
.gc-art svg{height:92px}
}
@media(prefers-reduced-motion:reduce){
.guide-card,.guide-card:hover{transition:none;transform:none}
}
/* ---------- Plant type pages ---------- */
.genus-link{float:right;font-size:.78rem;font-weight:700;color:var(--pine);text-decoration:none;border-bottom:1px solid var(--sage);margin-left:12px}
.genus-link:hover{color:var(--forest);border-color:var(--forest)}
.result h3 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--sage-soft)}
.result h3 a:hover{border-color:var(--marigold)}
.plantpage .plant-lede{font-size:1.06rem;color:#5C5546;line-height:1.65;margin-bottom:22px}
.hours-season{display:inline-block;margin-top:6px;font-size:.82rem;font-weight:600;color:var(--marigold-ink)}
.hours-season-row{padding-top:2px!important}
.plant-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:0 0 18px;padding:0}
.pf{background:var(--glass);border:2px solid var(--sage-soft);border-radius:12px;padding:11px 14px}
.pf dt{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pine);margin-bottom:3px}
.pf dd{margin:0;font-size:.92rem;color:#3A3226}
.plant-role{background:var(--sage-soft);border-radius:10px;padding:11px 15px;font-size:.93rem;color:var(--forest);margin-bottom:26px}
.plant-hint{font-size:.9rem;color:#5C5546;margin-bottom:14px}
.plant-sub{font-size:.93rem;color:#5C5546;margin-bottom:12px}
.ptags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.ptag{display:inline-block;border:2px solid var(--sage);color:var(--pine);background:transparent;border-radius:99px;padding:6px 13px;font-size:.85rem;font-weight:600;text-decoration:none}
.ptag:hover{background:var(--sage-soft);border-color:var(--pine)}
.plant-guides{list-style:none;padding:0;margin:0 0 26px}
.plant-guides li{padding:9px 0;border-bottom:1px dashed #E4E7DA}
.plant-guides a{color:var(--pine);font-weight:700}
.plant-cta{background:#FDF6E6;border-left:4px solid var(--marigold);padding:14px 18px;border-radius:10px;font-size:.93rem;color:#7A4C2A}
@media(max-width:560px){.genus-link{float:none;display:block;margin:6px 0 0}}
/* ---------- Plant photo slot ---------- */
.p-photo{margin:0 0 22px;border-radius:14px;overflow:hidden;background:var(--sage-soft);border:2px solid var(--sage-soft)}
.p-photo .p-art{display:block;background:linear-gradient(160deg,#E6EDDB,#DCE5CB)}
.p-photo .p-art svg{display:block;width:100%;height:auto;max-height:230px}
.p-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.p-cap{font-size:.82rem;color:#5C5546;padding:9px 14px;background:var(--glass)}
.p-photo.has-photo{border-color:var(--sage)}
/* a blurred 20px stand-in holds the frame while the real photo decodes,
so a page that has a photo never flashes the "Photo coming" card */
.p-photo.has-photo{background:var(--sage-soft) var(--lqip,none) center/cover no-repeat}
.p-photo.has-photo>img{animation:pPhotoIn .3s ease both}
@keyframes pPhotoIn{from{opacity:0}to{opacity:1}}
.pf-note{display:block;font-size:.72rem;color:#6B6455;font-weight:400}
.height-note{background:#FDF6E6;border-left:4px solid var(--marigold);padding:11px 15px;border-radius:10px;font-size:.9rem;color:#7A4C2A;margin:0 0 14px}
/* ---------- Variety lists: color swatches + series ---------- */
.vlist{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 16px}
.vlist li{display:flex;align-items:center;gap:9px;padding:5px 2px;font-size:.93rem;border-bottom:1px dashed #E4E7DA}
.sw{flex:0 0 auto;width:14px;height:14px;border-radius:50%;border:1px solid rgba(34,51,27,.28);box-shadow:inset 0 -2px 3px rgba(0,0,0,.12)}
.sw-mix{background:conic-gradient(#C0342B,#E9A413,#EFC63C,#5E8C43,#4A6FB5,#6B3A9E,#C0342B)}
.sw-none{background:repeating-linear-gradient(45deg,#EDEEDF,#EDEEDF 3px,#DCE5CB 3px,#DCE5CB 6px)}
.sw-demo{display:inline-block;vertical-align:middle}
.vseries{margin:0 0 16px}
.vseries h3{font-size:.95rem;font-family:var(--display);color:var(--pine);margin:0 0 5px;display:flex;align-items:baseline;gap:7px}
.vs-n{font-family:var(--body);font-size:.74rem;font-weight:400;color:#8A8474}
.vseries-note{background:var(--glass);border-left:4px solid var(--sage);padding:10px 14px;border-radius:8px;font-size:.86rem;color:#5C5546;margin:0 0 16px}
.species-note{background:#FDF6E6;border-left:4px solid var(--marigold);padding:11px 15px;border-radius:10px;font-size:.9rem;color:#7A4C2A;margin:0 0 16px}
.cfilter{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.cfil{border:2px solid var(--sage);background:transparent;color:var(--pine);border-radius:99px;padding:5px 12px;font-size:.8rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.cfil:hover{background:var(--sage-soft)}
.cfil.on{background:var(--pine);border-color:var(--pine);color:var(--glass)}
.vlist li[hidden]{display:none}
@media(max-width:560px){.vlist{grid-template-columns:1fr}}
.btypes{background:#FDF6E6;border-left:4px solid var(--marigold);padding:10px 14px;border-radius:8px;font-size:.86rem;color:#7A4C2A;margin:8px 0 10px}
.btype{display:inline-block;background:#fff;border:1px solid var(--sage);border-radius:99px;padding:3px 10px;margin:3px 3px 0 0;font-weight:700;color:var(--pine);text-decoration:none;font-size:.82rem}
.btype:hover{background:var(--sage-soft)}
.tblwrap{overflow-x:auto;margin:0 0 22px}
.cmp{width:100%;border-collapse:collapse;font-size:.9rem;min-width:460px}
.cmp caption{text-align:left;font-size:.82rem;color:#6B6455;padding-bottom:8px}
.cmp th,.cmp td{padding:9px 12px;border-bottom:1px solid #E4E7DA;text-align:left}
.cmp thead th{background:var(--sage-soft);color:var(--forest);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.cmp td a{color:var(--pine);font-weight:700}
.cmp tbody tr:hover{background:var(--glass)}
/* ---------- Seasonal status bar ---------- */
.season-bar{font-family:var(--body);font-size:.87rem;padding:9px 0;border-bottom:2px solid rgba(0,0,0,.06)}
.season-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.season-open{background:var(--sage-soft);color:var(--forest)}
.season-closed{background:var(--forest);color:var(--glass)}
.season-msg{flex:1;min-width:200px}
.season-open .season-msg b{color:var(--pine)}
.season-cta{background:var(--marigold);color:var(--forest);padding:5px 13px;border-radius:99px;font-weight:700;text-decoration:none;white-space:nowrap;font-size:.82rem}
.season-cta:hover{background:#F6E3B4}
.season-tel{color:inherit;font-weight:700;text-decoration:none;white-space:nowrap;border-bottom:1px solid currentColor}
@media(max-width:620px){
.season-bar{font-size:.82rem;padding:8px 0}
.season-in{gap:9px}
.season-msg{min-width:100%}
}
@media print{.season-bar{display:none !important}}
@media(max-width:720px){.nav-logo img{height:58px}}
@media(max-width:400px){.nav-logo img{height:50px}}
.visit-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 26px}
/* ---------- New variety flag ---------- */
.newtag{display:inline-block;background:var(--marigold);color:var(--forest);font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;margin-left:6px;vertical-align:middle}
.genus ul li.is-new,.vlist li.is-new{font-weight:600}
/* ---------- Variety photo tiles ---------- */
.vshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin:0 0 22px}
.vshot{margin:0;border-radius:12px;overflow:hidden;border:2px solid var(--sage-soft);background:#fff}
.vshot img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.vshot figcaption{font-size:.78rem;color:#3A3226;padding:7px 9px;line-height:1.3}
.vshot .newtag{margin-left:0;margin-top:3px}
/* ---------- Clickable variety gallery ---------- */
.vshot-btn{display:block;width:100%;padding:0;border:none;background:none;cursor:pointer;line-height:0}
.vshot{transition:border-color .15s,transform .15s}
.vshot.is-selected,.vshot:has(.vshot-btn[aria-pressed="true"]){border-color:var(--pine);transform:translateY(-2px);box-shadow:0 6px 16px rgba(34,51,27,.18)}
.vshot:hover{border-color:var(--sage)}
.vshot-btn:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:10px}
.vshot-btn img{transition:opacity .15s}
.vshot-btn:hover img{opacity:.88}
.p-photo img{transition:opacity .18s ease}
.p-photo img.swapping{opacity:.35}
.p-photo .p-cap b{color:var(--forest)}
.tap-hint{color:var(--pine);font-weight:600}
@media(prefers-reduced-motion:reduce){
.vshot,.p-photo img,.vshot-btn img{transition:none}
.vshot.is-selected,.vshot:has(.vshot-btn[aria-pressed="true"]){transform:none}
}
/* save button sitting on the photo itself */
.vshot{position:relative}
.v-save-tile{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;font-size:1.25rem;
background:rgba(255,255,255,.97);border-color:var(--pine);color:var(--pine);
box-shadow:0 2px 8px rgba(34,51,27,.28)}
.v-save-tile:hover{background:#fff;transform:scale(1.06)}
.v-save-tile.on{background:var(--pine);border-color:var(--pine);color:var(--glass)}
/* the caption wraps: name (and any New tag) on the first line, the mature
size on its own line beneath. Without flex-wrap the size became a third
column inside a 132px tile and broke mid-number — "12-" / "14in wide". */
.vshot figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.vshot-h{flex:0 0 100%;margin-top:1px;font-size:.72rem;color:#6B6455;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.v-save-tile:hover{transform:none}}
/* ---------- Color chip tiles (varieties awaiting a photo) ---------- */
.vchip{display:block;width:100%;aspect-ratio:1/1;border-bottom:1px solid rgba(34,51,27,.10)}
.vchip-mix{background:conic-gradient(#C0342B,#E9A413,#EFC63C,#5E8C43,#4A6FB5,#6B3A9E,#C0342B)}
.vchip-none{background:
linear-gradient(135deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) 75%,transparent 75%),
var(--sage-soft);background-size:10px 10px}
.vshot-chip{background:#fff}
.vshot-chip .vchip{transition:filter .15s}
.vshot-chip:hover .vchip{filter:brightness(1.04)}
.vshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px;margin:0 0 20px}
.vseries .vshots{margin-bottom:14px}
@media(max-width:420px){.vshots{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}}
/* group heading on the begonia hub: type, count, and how it grows */
.vseries h3{flex-wrap:wrap;gap:6px 9px}
.vs-meta{font-family:var(--body);font-size:.76rem;font-weight:400;color:#6B6455;background:var(--glass);
border:1px solid var(--sage-soft);border-radius:99px;padding:2px 9px;white-space:nowrap}
.vs-more{font-family:var(--body);font-size:.76rem;font-weight:700;color:var(--pine);text-decoration:none;
border-bottom:1px solid var(--sage);white-space:nowrap}
.vs-more:hover{color:var(--forest);border-color:var(--forest)}
/* iOS: inputs under 16px trigger auto-zoom on focus — hold all text controls at 16px on phones */
@media(max-width:720px){
.field input,.field select,.field textarea,.signup-form input,.plant-search,.gsearch input,#gq,input[type="search"],input[type="email"],input[type="text"],input[type="tel"],textarea,select{font-size:1rem}
}
/* Closed season: the dark season bar already announces the reopening date with
a countdown, so the header pill would just repeat it -- and its width was
pushing the nav links onto a second row. Set on by season.js before
the nav parses, so nothing shifts. */
.gg-closed .hours-pill{display:none}
/* ================= Bloom Madness ==========================================
A sixteen-plant knockout the public votes in. Two rules drove the layout:
the two contenders stay side by side at every width, because the whole
gesture is "this one, not that one" and stacking them turns a choice into a
list; and the vote split animates in under the tiles the instant you pick,
because that reveal is the reason anyone votes twice. */
.bm-wrap{padding:26px 0 60px}
.bm-preview{background:#FCEFCB;border:1.5px solid var(--marigold);color:#6A4A08;
border-radius:11px;padding:11px 14px;font-size:.88rem;margin-bottom:18px}
.bm-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-start;
justify-content:space-between;margin-bottom:20px}
.bm-head-main{flex:1 1 320px;min-width:0}
.bm-head-main h2{font-size:1.9rem;margin:3px 0 4px}
.bm-blurb{color:#5C5546;font-size:.95rem;max-width:46em}
.bm-head-side{flex:0 0 auto;text-align:right}
.bm-badge{display:inline-flex;flex-direction:column;gap:1px;background:var(--forest);
color:var(--glass);border-radius:12px;padding:8px 15px;text-align:left}
.bm-badge-k{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.bm-badge-v{font-family:var(--display);font-size:1.05rem;font-weight:600}
.bm-tally{font-size:.82rem;color:#6B6455;margin-top:7px}
.bm-card{background:var(--white);border-radius:18px;padding:26px 26px 28px;
box-shadow:0 2px 14px rgba(34,51,27,.09);position:relative;overflow:hidden}
.bm-card h2{font-size:1.55rem;margin-bottom:8px}
.bm-loading{display:flex;align-items:center;gap:14px}
.bm-spin{width:22px;height:22px;border:3px solid var(--sage-soft);
border-top-color:var(--pine);border-radius:50%;animation:bmspin .8s linear infinite;flex:0 0 auto}
@keyframes bmspin{to{transform:rotate(360deg)}}
.bm-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;
font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:#8A8272;margin-bottom:16px}
.bm-dots{display:flex;gap:5px;flex-wrap:wrap}
.bm-dots span{width:9px;height:9px;border-radius:50%;background:var(--sage-soft)}
.bm-dots span.done{background:var(--pine)}
.bm-dots span.now{background:var(--marigold);box-shadow:0 0 0 3px rgba(233,164,19,.25)}
/* the choice itself */
/* Two rows, not two columns of stacked boxes: row 1 is the pair of plant
cards with the "vs" centred between them, row 2 is each card's details
panel. Keeping them in one grid means the two cards stay exactly the same
height however long the names run, and "vs" sits level with the photos
instead of drifting when a panel opens. */
.bm-versus{display:grid;grid-template-columns:1fr auto 1fr;
column-gap:10px;row-gap:0;align-items:stretch}
.bm-versus > .bm-a{grid-column:1}
.bm-versus > .bm-b{grid-column:3}
.bm-versus > .bm-pick{grid-row:1}
.bm-vs{grid-column:2;grid-row:1;align-self:center;
font-family:var(--display);font-size:1.05rem;color:var(--pine);
background:var(--glass);border-radius:50%;width:42px;height:42px;display:flex;
align-items:center;justify-content:center;flex:0 0 auto}
/* The photo runs to the card edge -- it is the thing people are choosing
between, so it gets the room rather than a frame of white. */
.bm-pick{background:var(--white);border:2px solid var(--sage-soft);
border-radius:15px 15px 0 0;border-bottom:0;padding:0;overflow:hidden;
cursor:pointer;font:inherit;text-align:center;width:100%;display:flex;
flex-direction:column;transition:border-color .15s,box-shadow .15s}
.bm-pick:hover:not(:disabled){border-color:var(--sage);
box-shadow:0 6px 18px rgba(34,51,27,.1)}
/* Safari lays a button's children out in its own centred box and does not
stretch them, so a tile that was never told its width shrank to the name
under it and the photo shrank with it (a 210px square in the corner of a
360px card). Every child of the card states its width outright. */
.bm-pick > .bm-tile{display:block;width:100%;align-self:stretch}
.bm-pick:disabled{cursor:default}
.bm-pick.chosen{border-color:var(--pine);background:#FAFBF6}
.bm-versus.waiting{opacity:.6}
/* stacked view: "vs" reads as a divider across the card, not a floating chip */
@media(max-width:640px){
.bm-vs{position:relative;width:auto;height:auto;background:none;border-radius:0;
padding:0 14px;font-size:.9rem;color:#8A8272;letter-spacing:.14em;text-transform:uppercase}
.bm-vs::before,.bm-vs::after{content:"";position:absolute;top:50%;width:38vw;max-width:150px;
height:1px;background:var(--sage-soft)}
.bm-vs::before{right:100%}
.bm-vs::after{left:100%}
}
.bm-txt{padding:10px 10px 12px}
/* The trigger continues its own plant card downward -- same border, bottom
corners rounded -- so a matchup reads as two objects rather than six. */
.bm-versus > .bm-toggle{grid-row:2}
.bm-toggle{background:var(--white);border:2px solid var(--sage-soft);border-top:0;
border-radius:0 0 15px 15px;padding:9px 8px 11px;width:100%;cursor:pointer;
font-family:var(--body);font-size:.74rem;font-weight:700;color:var(--pine);
display:flex;align-items:center;justify-content:center;
transition:color .15s,background .15s}
.bm-toggle::before{content:"";position:absolute}
.bm-toggle:hover{color:var(--forest);background:#FAFBF3}
.bm-pick.bm-a.chosen ~ .bm-toggle.bm-a,
.bm-pick.bm-b.chosen ~ .bm-toggle.bm-b{border-color:var(--pine);background:#FAFBF6}
.bm-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
border-top:5px solid currentColor;transition:transform .18s;margin-left:6px;display:inline-block;vertical-align:middle}
.bm-toggle.open .bm-caret{transform:rotate(180deg)}
/* The panel spans the whole matchup, not one column: two sentences in a
150px phone column is four words a line and nobody reads it. */
.bm-versus > .bm-panel{grid-column:1 / -1}
.bm-versus > .bm-panel.bm-a{grid-row:3}
.bm-versus > .bm-panel.bm-b{grid-row:4}
.bm-panel{background:#FAFBF3;border:2px solid var(--sage-soft);border-radius:14px;
padding:13px 15px 15px;margin-top:10px;text-align:left}
.bm-panel-h{font-family:var(--display);font-size:.95rem;color:var(--forest);
font-weight:600;margin:0 0 6px;line-height:1.25}
.bm-size{font-size:.82rem;font-weight:700;color:var(--pine);margin:0 0 7px;
line-height:1.4;letter-spacing:.005em}
.bm-about{font-size:.88rem;color:#4A4436;margin:0;line-height:1.55;
hyphens:none;text-wrap:pretty;max-width:44em}
/* A square once a real photo exists. Until then it is a short banded strip:
a 300px empty green square per plant made the whole page look unfinished,
and the name is the thing people are actually choosing between. */
.bm-shot{position:relative;width:100%;padding-top:34%;overflow:hidden;
background:linear-gradient(135deg,#DCE5CB 0%,#C7D6AE 55%,#B9CB9C 100%)}
.bm-shot.has-photo{padding-top:100%;background:var(--sage-soft)}
/* A plant with no photo yet: let the banded strip grow into the space the
photographed card fills, so the pair still reads as two finished cards
rather than one card and one white gap. */
.bm-shot:not(.has-photo){flex:1;min-height:76px}
.bm-shot::after{content:attr(data-initial);position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;font-family:var(--display);
font-size:1.9rem;color:var(--forest);opacity:.34}
.bm-shot.has-photo::after{font-size:2.6rem;opacity:.5}
.bm-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* On a wide screen a true square photo becomes 400px+ tall and the pair no
longer fits on one view. Cap it there and let object-fit crop; on phones
the square stays. */
@media(min-width:641px){
.bm-pick .bm-shot.has-photo{padding-top:70%}
}
/* On a phone, two cards across leaves each photo about 150px wide -- too
small to judge a flower by, which is the entire job of this page. So below
640px the pair stacks and each photo gets the full width, better than twice
the size. The trade is a little scrolling to see both; seeing them properly
is worth more than seeing them together. */
@media(max-width:640px){
.bm-versus{grid-template-columns:1fr}
.bm-versus > .bm-a,
.bm-versus > .bm-b{grid-column:1}
.bm-versus > .bm-pick.bm-a{grid-row:1}
.bm-versus > .bm-toggle.bm-a{grid-row:2}
.bm-versus > .bm-panel.bm-a{grid-row:3}
.bm-vs{grid-column:1;grid-row:4;justify-self:center;margin:12px 0}
.bm-versus > .bm-pick.bm-b{grid-row:5}
.bm-versus > .bm-toggle.bm-b{grid-row:6}
.bm-versus > .bm-panel.bm-b{grid-row:7}
/* a wide crop keeps two stacked cards close to one screenful */
.bm-pick .bm-shot.has-photo{padding-top:64%}
.bm-panel{margin-top:8px}
}
.bm-name{font-family:var(--display);font-size:1rem;color:var(--forest);
font-weight:600;line-height:1.2;letter-spacing:-.005em}
.bm-sub{font-size:.75rem;color:#6E7A5E;margin-top:4px;line-height:1.35}
.bm-seed{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
color:#8A8272;font-weight:700;margin-top:6px}
.bm-tile-empty{display:flex;align-items:center;justify-content:center;min-height:150px;
border:2px dashed var(--sage-soft);border-radius:11px;color:#8A8272;font-size:.85rem}
.bm-bar{display:block;height:8px;border-radius:99px;background:var(--sage-soft);
margin:auto 10px 0;overflow:hidden;width:calc(100% - 20px);box-sizing:border-box;align-self:stretch}
.bm-bar b{display:block;height:100%;background:var(--pine);border-radius:99px;
width:0;transition:width .55s cubic-bezier(.22,1,.36,1)}
.bm-pick.chosen .bm-bar b{background:var(--marigold)}
.bm-pctline{display:block;font-weight:700;font-size:.85rem;color:var(--pine);
margin:5px 0 11px}
.bm-prompt{text-align:center;margin:0 0 14px;color:#5C5546;font-size:.95rem}
.bm-verdict{text-align:center;margin-top:16px;color:#5C5546;font-size:.95rem}
.bm-verdict{font-weight:700;color:var(--forest);font-size:1.02rem}
.bm-next{display:block;margin:16px auto 0}
/* end of round */
.bm-score{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.bm-score div{flex:1 1 120px;background:var(--glass);border-radius:12px;padding:14px 16px}
.bm-score b{display:block;font-family:var(--display);font-size:1.9rem;color:var(--forest);line-height:1}
.bm-score span{font-size:.79rem;color:#6B6455;display:block;margin-top:3px}
.bm-rankline{font-size:.95rem;color:var(--soil);margin-bottom:10px}
.bm-share{margin-top:18px}
.bm-share-note{font-size:.82rem;color:var(--pine);margin-top:8px}
.bm-champ{text-align:center}
.bm-champ h2{font-size:2.1rem}
.bm-champ-tile{max-width:260px;margin:18px auto 6px}
/* petals, for finishing a round. Pure CSS: no library for ten falling dots. */
.bm-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bm-petals i{position:absolute;top:-14px;width:10px;height:14px;border-radius:60% 0;
background:var(--marigold);opacity:.85;animation:bmfall 4.2s linear infinite}
.bm-petals i:nth-child(2n){background:var(--sage)}
.bm-petals i:nth-child(3n){background:#E9A4B4}
.bm-petals i:nth-child(1){left:6%;animation-delay:0s}
.bm-petals i:nth-child(2){left:17%;animation-delay:.6s}
.bm-petals i:nth-child(3){left:28%;animation-delay:1.5s}
.bm-petals i:nth-child(4){left:39%;animation-delay:.25s}
.bm-petals i:nth-child(5){left:50%;animation-delay:2.1s}
.bm-petals i:nth-child(6){left:61%;animation-delay:1s}
.bm-petals i:nth-child(7){left:72%;animation-delay:2.7s}
.bm-petals i:nth-child(8){left:83%;animation-delay:.45s}
.bm-petals i:nth-child(9){left:91%;animation-delay:1.8s}
.bm-petals i:nth-child(10){left:46%;animation-delay:3.3s}
@keyframes bmfall{
0%{transform:translateY(0) rotate(0);opacity:0}
10%{opacity:.85}
100%{transform:translateY(340px) rotate(420deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){.bm-petals{display:none}}
/* the contenders grid, before voting opens */
.bm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:14px;margin-top:18px}
.bm-grid .bm-tile{background:var(--white);border-radius:14px;padding:11px 11px 13px;
box-shadow:0 2px 10px rgba(34,51,27,.08)}
/* ---- the bracket -------------------------------------------------------
Five columns wired together: sixteen slots, then eight, four, two, and the
trophy. Each match box is a flex child with flex:1, so every column ends up
the same height and the midpoint between a pair in one column lands exactly
on the centre of its parent in the next. That is what lets the connector
lines be plain pseudo-elements instead of drawn SVG. */
.bm-bracket{margin-top:34px}
.bm-bracket-top{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
justify-content:space-between;margin-bottom:12px}
.bm-bracket-top h2{font-size:1.35rem}
.bm-scrollhint{font-size:.8rem;color:#8A8272}
@media(min-width:1000px){.bm-scrollhint{display:none}}
.bkt-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
padding:4px 2px 12px;scrollbar-width:thin}
.bkt{--stub:13px;--line:#CBD8B4;display:flex;gap:calc(var(--stub) * 2);
min-width:920px;align-items:stretch}
.bkt-col{flex:1 1 0;min-width:168px;display:flex;flex-direction:column}
.bkt-col.bkt-final{flex:0 0 150px}
/* Every column header is exactly the same height, whether or not it carries
the "voting now" pill. A taller header on one column pushes its matches down
and the connector lines arrive with a visible jog. */
.bkt-h{font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
color:#8A8272;margin-bottom:9px;display:flex;flex-direction:column;align-items:flex-start;
justify-content:flex-start;gap:4px;flex-wrap:nowrap;height:40px;overflow:hidden}
.bkt-col.is-live .bkt-h{color:var(--forest)}
.bkt-now{background:var(--marigold);color:#4A3405;border-radius:99px;padding:2px 7px;
font-size:.6rem;letter-spacing:.06em}
.bkt-body{flex:1;display:flex;flex-direction:column}
.bkt-slot{flex:1;display:flex;align-items:center;position:relative;min-height:56px}
.bkt-m{width:100%;position:relative;border-radius:9px;overflow:hidden;
border:1.5px solid var(--sage-soft);background:var(--white)}
.bkt-col.is-live .bkt-m{border-color:var(--marigold);box-shadow:0 0 0 3px rgba(233,164,19,.15)}
/* connectors: out of each box, down to meet its partner, into the next round */
.bkt-col:not(.bkt-final) .bkt-slot::after{content:'';position:absolute;left:100%;top:50%;
width:var(--stub);height:2px;background:var(--line)}
.bkt-col:not(.bkt-final) .bkt-slot:nth-child(odd):not(:last-child)::before{content:'';
position:absolute;left:calc(100% + var(--stub));top:50%;width:2px;height:100%;
background:var(--line)}
.bkt-col:not(:first-child) .bkt-m::before{content:'';position:absolute;right:100%;top:50%;
width:var(--stub);height:2px;background:var(--line)}
.bkt-s{display:flex;align-items:center;gap:7px;padding:6px 8px;font-size:.76rem;
color:#6B6455;line-height:1.25;border-bottom:1px solid #EFEDE3}
.bkt-s:last-child{border-bottom:none}
.bkt-s .sd{flex:0 0 auto;font-size:.62rem;font-weight:700;color:#8A8272;
background:var(--glass);border-radius:4px;padding:1px 4px;min-width:19px;text-align:center}
/* Two lines, not one: the columns are 150-200px and every name here is a
genus plus a quoted variety, so a single nowrap line was cutting off at
"Begonia "Whopp..." for most of the sixteen. */
.bkt-s .nm{flex:1 1 auto;min-width:0;overflow:hidden;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}
.bkt-s.lead .nm{font-weight:700;color:var(--forest)}
.bkt-s .vt{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:.72rem;color:#8A8272}
.bkt-s.won{background:#F3F7EA;color:var(--forest);font-weight:700}
.bkt-s.won .sd{background:var(--sage);color:var(--forest)}
.bkt-s.won .vt{color:var(--pine)}
.bkt-s.out{opacity:.5}
/* your pick: a marigold spine down the left edge, readable next to the
green "went through" state rather than competing with it */
.bkt-s.mine{box-shadow:inset 3px 0 0 var(--marigold)}
.bkt-tbd{color:#A9A296;font-style:italic}
.bkt-tbd .nm{white-space:nowrap;display:block}
.bkt-cup{border:1.5px dashed var(--sage);border-radius:11px;padding:14px 10px;text-align:center;
background:var(--white);width:100%}
.bkt-cup .cup{display:block;font-size:1.5rem;filter:grayscale(1);opacity:.45}
.bkt-cup .nm{display:block;font-size:.76rem;color:#8A8272;margin-top:5px;line-height:1.3}
.bkt-cup.has{border-style:solid;border-color:var(--marigold);background:#FFFBF0;
box-shadow:0 3px 14px rgba(233,164,19,.22)}
.bkt-cup.has .cup{filter:none;opacity:1}
.bkt-cup.has .nm{color:var(--forest);font-weight:700;font-family:var(--display);font-size:.86rem}
.bkt-key{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:.76rem;
color:#8A8272;margin-top:4px}
.bkt-key span{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:-11px}
.k-you{background:var(--marigold)}
.k-won{background:#CFE0AF}
.k-live{background:#fff;border:2px solid var(--marigold)}
@media(max-width:640px){
.bm-head-side{text-align:left}
.bm-head-main h2{font-size:1.55rem}
/* On a phone the dark rank block was the loudest thing above the matchup,
and it is not why anyone opened the page. Shrink it to a quiet chip and
sit it inline with the vote count so the plants lead. */
/* flex:0 0 auto sized this block to its longest line -- the closing date
text -- and let it run 150px past the edge of the phone, which showed up
as the whole page swiping sideways. It takes the full row instead. */
.bm-head-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1 1 100%;min-width:0}
.bm-badge{flex-direction:row;align-items:baseline;gap:6px;padding:5px 11px;border-radius:99px}
.bm-badge-k{font-size:.6rem}
.bm-badge-v{font-size:.85rem}
/* the closing date runs past the screen edge if it shares the badge's line,
so give it its own */
.bm-tally{flex:1 1 100%;min-width:0;margin-top:3px}
/* more of the phone's width goes to the photographs */
.bm-card{padding:16px 12px 20px;border-radius:15px}
/* the stacked single-column layout is set above; only the gaps here */
.bm-versus{column-gap:7px;row-gap:0}
.bm-txt{padding:11px 10px 12px}
.bm-toggle{padding:9px 6px 11px;font-size:.74rem}
.bm-panel{padding:12px 13px 14px;margin-top:9px}
.bm-pick{border-radius:12px 12px 0 0}
.bm-toggle{border-radius:0 0 12px 12px}
/* full-width cards can carry a bigger name than the old half-width pair */
.bm-name{font-size:1.08rem}
.bm-sub{font-size:.8rem}
.bm-seed{font-size:.62rem}
/* three small numbers read as one line of score, not three stacked cards */
.bm-score{gap:8px}
.bm-score div{flex:1 1 0;min-width:0;padding:12px 8px}
.bm-score b{font-size:1.6rem}
.bm-score span{font-size:.72rem}
.bm-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
}
.bm-champ-tally{font-size:.83rem;color:#8A8272;margin-top:6px}
/* Multi-select answer row in the plant picker: several can be on at once, so
the "on" state has to read as a checkbox rather than a radio. */
.opt-row.multi .opt.on{position:relative;padding-left:30px}
.opt-row.multi .opt.on::before{content:'\2713';position:absolute;left:12px;top:50%;
transform:translateY(-50%);font-weight:700;font-size:.9em}
.opt-row.multi .opt[data-v="any"].on::before{content:none}
.opt-row.multi .opt[data-v="any"].on{padding-left:16px}
/* Season badge on an order row. One plant, one row — this says WHEN you can
have it, which used to be said by listing the plant twice. */
.szn{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
padding:2px 7px;border-radius:99px;white-space:nowrap;align-self:center}
.szn.both{background:#E4EBD6;color:#3F5A28}
.szn.fall{background:#F6E3B4;color:#7A4C2A}
/* Season badge on a plant-list variety. Rendered from a data attribute rather
than as text inside the , because js/list.js reads the to work out
what to save — a stray "Spring & fall" would end up in someone's saved list
as part of the plant name. */
.plant-list li[data-season]{position:relative}
.plant-list li[data-season] .li-szn,
.plant-list li[data-season]::after{
font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
padding:2px 7px;border-radius:99px;margin-left:8px;white-space:nowrap;
display:inline-block;vertical-align:middle}
.plant-list li[data-season="both"]::after{content:'Spring & fall';background:#E4EBD6;color:#3F5A28}
.plant-list li[data-season="fall"]::after{content:'Fall';background:#F6E3B4;color:#7A4C2A}
/* ---------- "How ordering works" on the public wholesale page ----------
The portals are the pitch now: real screenshots beside short steps. The
screenshots are wide UI captures, so they get the larger column and a
card shadow to read as "this is the actual product". */
.ws-how{background:var(--white);padding:54px 0 62px}
.ws-how > .wrap > h2{font-size:1.75rem;margin:4px 0 10px}
.wsh-lead{color:#5C5546;max-width:44em}
.wsh-row{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center;margin-top:44px}
.wsh-row.flip .wsh-copy{order:2}
.wsh-copy h3{font-size:1.22rem;margin-bottom:12px}
.wsh-copy p{font-size:.95rem;color:var(--soil)}
.wsh-steps{list-style:none;margin:0;padding:0;counter-reset:step;display:flex;
flex-direction:column;gap:13px}
.wsh-steps li{counter-increment:step;position:relative;padding-left:46px;
font-size:.95rem;color:var(--soil)}
.wsh-steps li::before{content:counter(step);position:absolute;left:0;top:1px;
width:31px;height:31px;border-radius:50%;background:var(--forest);color:var(--glass);
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.92rem}
.wsh-steps b{color:var(--forest)}
.wsh-link{margin-top:14px;font-weight:700}
.wsh-shot{margin:0}
/* The screenshots sit in a small browser window — bar, dots, address — so they
read as "this is the actual site you'll use," not as pasted images. The
captures are taken at roughly the width they display at, so the UI text
inside stays close to real size instead of shrinking. */
.shot-frame{background:var(--white);border-radius:14px;border:1px solid var(--sage-soft);
box-shadow:0 16px 40px rgba(34,51,27,.16);overflow:hidden}
.shot-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;
background:linear-gradient(#FBFAF4,#F0EEE2);border-bottom:1px solid var(--sage-soft)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#DDD8C6;display:block}
.shot-bar i:nth-child(1){background:#D8B98A}
.shot-bar i:nth-child(2){background:#CDD8B4}
.shot-bar i:nth-child(3){background:#B9CB9C}
.shot-url{flex:1;text-align:center;font-size:.7rem;color:#8A8272;background:var(--white);
border-radius:99px;padding:3px 12px;margin:0 8px;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;border:1px solid #EAE7D9}
.wsh-shot img{display:block;width:100%;height:auto}
.wsh-shot figcaption{font-size:.8rem;color:#8A8272;margin-top:10px;text-align:center}
@media(max-width:860px){
.wsh-row{grid-template-columns:1fr;gap:18px;margin-top:30px}
/* copy first, picture after, on both rows — the flip is a desktop rhythm */
.wsh-row.flip .wsh-copy{order:0}
}
.po-del{font-size:.82rem;font-weight:600;color:var(--pine);margin:5px 0 0;text-align:right}
.wsh-delivery{margin-top:34px;background:var(--glass);border-left:3px solid var(--sage);
border-radius:0 12px 12px 0;padding:14px 18px;font-size:.93rem;color:var(--soil);max-width:52em}
.wsh-map{margin:22px auto 0;max-width:660px}
.wsh-map img{width:100%;height:auto;border-radius:14px;border:1px solid var(--sage-soft)}
.wsh-map figcaption{font-size:.8rem;color:#8A8272;margin-top:9px;text-align:center}
/* ---- Group bookings on the events page ---- */
.groups{padding:0 0 90px}
.grp-intro{max-width:44em}
.grp-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.grp-card{background:var(--white);border-radius:14px;padding:30px 32px 28px;
box-shadow:0 2px 10px rgba(34,51,27,.10);display:flex;flex-direction:column}
.grp-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.grp-emoji{width:52px;height:52px;border-radius:50%;background:var(--sage-soft);flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:1.45rem}
.grp-who{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
color:#7A8A5E;margin:0 0 3px}
.grp-card h3{font-size:1.3rem;line-height:1.25;margin:0}
.grp-card>p:last-of-type{flex:1}
@media(max-width:400px){.grp-head{gap:12px}.grp-emoji{width:44px;height:44px;font-size:1.25rem}}
.grp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.grp-cta .btn{padding:12px 22px;font-size:.9rem}
@media(max-width:760px){.grp-grid{grid-template-columns:1fr}}
/* ---- Private events landing page ---- */
.grp-card .grp-h{font-size:1.3rem;line-height:1.25;margin:0}
.grp-how{background:var(--white);padding:72px 0}
.grp-how .wrap{max-width:820px}
.grp-how .wsh-steps li{font-size:1rem}
.inq{padding:0 0 84px}
.inq .wrap{max-width:640px}
.inq-hp{position:absolute;left:-9999px;top:auto;height:1px;overflow:hidden}
.inq-bad{background:#F6E3B4}
.inq-bad a{font-weight:700}
/* ---- Bloom Madness gift-card drawing ---- */
.bm-draw{max-width:560px;margin:26px auto 0}
.bm-draw-form{margin-top:18px;text-align:left}
.bm-hp{position:absolute;left:-9999px;top:auto;height:1px;overflow:hidden}
.bm-draw-err{margin-top:12px;background:#F6E3B4;border-radius:8px;padding:10px 14px;
font-size:.9rem;font-weight:700;color:var(--forest)}
.bm-draw-fine{margin-top:12px;font-size:.8rem;color:#8A8272}
.bm-weeks{display:flex;gap:10px;justify-content:center;margin:16px 0 4px}
.bm-week{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:.95rem;background:var(--glass);border:2px solid var(--sage-soft);color:#8A8272}
.bm-week.in{background:var(--sage);border-color:var(--sage);color:var(--forest)}
/* ---- mature size per variety, on the plant list ----
The variety name is a bare text node, so the size cannot be nested under it
without breaking how My List reads the name. Instead the row wraps and the
size drops to its own line, indented past the thumbnail. `order` keeps the
save button up on the first line where it belongs. */
.genus ul li{flex-wrap:wrap}
.genus ul li .v-save{order:1;margin-left:auto}
.li-size{order:2;flex:0 0 100%;margin-left:44px;font-size:.75rem;color:#8A8272;
line-height:1.35;margin-top:-1px}
@media(max-width:560px){.li-size{font-size:.71rem;margin-left:44px}}
.vshot-size{flex:0 0 100%;font-size:.72rem;color:#8A8272;line-height:1.3;margin-top:1px;
font-variant-numeric:tabular-nums}
/* a measurement never breaks in half: "12-" on one line and "14in" on the
next is unreadable. The caption may wrap at the multiplication sign. */
.vshot-size .dim{white-space:nowrap}
.rp.ht.measured{background:var(--sage-soft);color:var(--forest);font-weight:700}
.ord-mature{display:block;font-size:.72rem;color:#8A8272;line-height:1.3;margin-top:2px}
/* ---- the varieties behind a plant picker card ---- */
.var-panel{margin-top:14px;padding-top:12px;border-top:1px dashed var(--sage-soft)}
.vp-head{font-size:.8rem;color:#6B6455;margin-bottom:8px}
.vp-head b{color:var(--forest)}
.vp-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.vp-list li{display:grid;grid-template-columns:22px 1fr;gap:4px 8px;align-items:center;
padding:4px 0;border-bottom:1px dotted var(--sage-soft)}
.vp-name{font-size:.88rem;color:var(--soil);font-weight:500}
.vp-size{grid-column:2;font-size:.72rem;color:#8A8272;line-height:1.3}
.vp-list li.approx .vp-size{color:#A39B89;font-style:italic}
.vp-size i{font-style:normal;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;
background:var(--glass);border:1px solid var(--sage-soft);border-radius:99px;padding:1px 5px;margin-left:3px}
/* .v-pick also carries .r-save so My List wires it up, but .result .r-save is
absolutely pinned to the card corner — without this every variety button
stacks in that one spot on top of the plant-type button. */
.result .v-pick{position:static}
.v-pick{width:22px;height:22px;min-width:22px;font-size:.9rem;line-height:1;padding:0;
border-radius:50%;border:1.5px solid var(--pine);background:transparent;color:var(--pine);
cursor:pointer;display:flex;align-items:center;justify-content:center}
.v-pick[aria-pressed="true"]{background:var(--pine);color:var(--glass)}
.vp-more{font-size:.78rem;color:#6B6455;margin-top:8px}
/* ---- touch targets ----------------------------------------------------
The save circles read as 26px, which is right visually in a dense list but
well under the ~44px a thumb actually needs. Grow the HIT area with padding
and pull it back with a negative margin, so the button looks identical and
the tappable box is 44px. The row keeps its height because the padding is
absorbed by the negative margin. */
.v-save,.r-save{position:relative}
.v-save::after,.r-save::after{content:"";position:absolute;top:50%;left:50%;
width:44px;height:44px;transform:translate(-50%,-50%)}
/* ...except the one that pins itself to the corner of a variety photo. The
rule above was added later in this file, so plain `.v-save` was beating
`.v-save-tile` on source order and dropping the button out of the corner
and into the flow, where it hung off the bottom of the card. */
.v-save.v-save-tile{position:absolute}
/* "Care & details" sits at 21px tall; give it a full-height target too. */
.genus-link{display:inline-block;padding:6px 0}
@media (pointer:fine){
/* a mouse does not need the extra reach, and the bigger box would swallow
hovers meant for the row underneath */
.v-save::after,.r-save::after{width:100%;height:100%}
}