/* Alfalfa Depot — site styles
   Tokens and measurements taken from the Claude Design handoff. */

/* ---------- Theme tokens ---------- */
:root{
  --bg:#faf9f4; --bg2:#ffffff; --ink:#22301f; --muted:#5c6653; --line:#e6e2d3;
  --green:#1e5631; --greenH:#2a6e42; --hay:#e8d9a8; --hayInk:#8a6d2f;
  --soft:#f1efe6; --soft2:#eae7d9; --footer:#182615;
  --hdr:#e8d9a8; --hdrLine:rgba(34,48,31,0.22); --link:#1e5631; --linkH:#8a6d2f;
}
:root[data-theme="dark"]{
  --bg:#161d13; --bg2:#1e2819; --ink:#edf0e4; --muted:#aab5a1; --line:#303b2a;
  --greenH:#378352; --hayInk:#cdb56e; --soft:#232e1e; --soft2:#2a361f;
  --footer:#0e140c; --hdr:rgba(22,29,19,0.95); --hdrLine:#303b2a; --link:#a3cdac; --linkH:#e8d9a8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#161d13; --bg2:#1e2819; --ink:#edf0e4; --muted:#aab5a1; --line:#303b2a;
    --greenH:#378352; --hayInk:#cdb56e; --soft:#232e1e; --soft2:#2a361f;
    --footer:#0e140c; --hdr:rgba(22,29,19,0.95); --hdrLine:#303b2a; --link:#a3cdac; --linkH:#e8d9a8;
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Public Sans',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--link); text-decoration:none}
a:hover{color:var(--linkH)}
img{max-width:100%}
h1,h2,h3{font-family:Lora,Georgia,serif; text-wrap:pretty}
.wrap{max-width:1160px; margin:0 auto; padding-left:20px; padding-right:20px; width:100%}
.ico{width:19px; height:19px; flex-shrink:0}
.ico-solid{fill:currentColor}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; font-weight:700; font-size:15px; padding:13px 26px;
  border:none; cursor:pointer; font-family:inherit; text-align:center}
.btn-primary{background:var(--green); color:#f3f0e4}
.btn-primary:hover{background:var(--greenH); color:#f3f0e4}
.btn-hay{background:var(--hay); color:#22301f}
.btn-hay:hover{background:#f0e4bd; color:#22301f}
.btn-ghost{border:1.5px solid var(--line); color:var(--link); font-weight:600; background:none}
.btn-ghost:hover{background:var(--soft)}
.btn-outline-light{border:1.5px solid rgba(255,255,255,0.7); color:#fff; font-weight:600}
.btn-outline-light:hover{background:rgba(255,255,255,0.12); color:#fff}
.btn-sm{padding:9px 18px; font-size:13.5px; font-weight:600}

/* ---------- Announcement ---------- */
.announce{background:var(--green); color:#f3f0e4; text-align:center;
  padding:9px 16px; font-size:13.5px; letter-spacing:0.02em}
.announce a{color:var(--hay); text-decoration:underline}
.announce a:hover{color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:var(--hdr);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.header-inner{max-width:1160px; margin:0 auto; padding:10px 16px;
  position:relative; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0}
.brand-chip{background:#fff; border-radius:8px; padding:2px; display:grid; place-items:center}
.brand-chip img{height:42px; width:auto; display:block}
.wordmark{font-family:Lora,Georgia,serif; font-weight:600; font-size:18px;
  color:var(--link); white-space:nowrap}
.wordmark span{color:var(--ink); font-weight:400; letter-spacing:0.14em}
.nav-center{flex:1; display:flex; justify-content:center; min-width:0}
.nav{display:flex; gap:24px; font-size:14.5px; font-weight:500;
  flex-wrap:wrap; justify-content:center; align-items:center}
.nav a[aria-current="page"]{color:var(--linkH)}
.nav .home-link{display:flex; align-items:center}
.header-actions{display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto}
.icon-btn{background:none; border:1px solid var(--line); border-radius:999px;
  width:40px; height:40px; cursor:pointer; color:var(--link);
  display:grid; place-items:center; padding:0}

.cart-btn{position:relative; background:var(--green); border:none; border-radius:999px;
  height:40px; padding:0 14px; cursor:pointer; font-size:14px; color:#f3f0e4;
  font-weight:600; display:flex; align-items:center; gap:8px; font-family:inherit}
.cart-btn:hover{background:var(--greenH)}
.cart-count{background:var(--hay); color:#22301f; border-radius:999px; min-width:20px;
  height:20px; display:grid; place-items:center; font-size:12px; padding:0 5px}
.cart-center{position:absolute; left:50%; transform:translateX(-50%)}
.theme-btn{background:none; border:1px solid var(--line); border-radius:999px;
  width:40px; height:40px; cursor:pointer; color:var(--link);
  display:grid; place-items:center; padding:0}

.theme-btn .i-sun{display:block}
.theme-btn .i-moon{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:block}
}
.menu-btn{background:none; border:1px solid var(--line); border-radius:10px;
  width:40px; height:40px; cursor:pointer; font-size:17px; color:var(--ink); font-family:inherit}


/* Mobile drawer */
.drawer{display:none; grid-template-columns:1fr; gap:2px;
  padding:8px 16px 16px; border-top:1px solid var(--line); background:var(--bg)}
.drawer.open{display:grid}
.drawer a,.drawer button{padding:11px 8px; font-weight:600; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:8px; background:none; border-left:0; border-right:0;
  border-top:0; text-align:left; font-size:inherit; font-family:inherit;
  color:var(--link); cursor:pointer}
.drawer > :last-child{border-bottom:none}
.drawer .ico{width:17px; height:17px}

/* Cart popover */
.cart-pop{position:fixed; top:70px; right:12px; z-index:60; background:var(--bg2);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 32px rgba(20,28,16,0.25); padding:20px;
  width:min(320px, calc(100vw - 24px)); display:none}
.cart-pop.open{display:block}
.cart-pop h2{font-family:Lora,Georgia,serif; font-weight:600; font-size:17px; margin:0 0 6px}
.cart-pop p{font-size:14px; color:var(--muted); line-height:1.5; margin:0}
.cart-pop button{margin-top:14px; background:var(--green); color:#f3f0e4; border:none;
  border-radius:8px; padding:9px 16px; font-weight:600; font-size:13.5px;
  cursor:pointer; font-family:inherit}
.cart-pop button:hover{background:var(--greenH)}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:#22301f}
.hero > img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%; opacity:0.92}
.hero-scrim{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,32,18,0.35) 0%, rgba(20,32,18,0.72) 100%)}
.hero-inner{position:relative; max-width:1160px; margin:0 auto; padding:92px 20px 84px;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px}
.kicker{font-size:13px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase}
.hero .kicker{color:var(--hay)}
.hero h1{font-size:clamp(34px,6vw,58px); line-height:1.08; color:#fff; margin:0; max-width:16ch}
.hero p{color:#e9e6d8; font-size:clamp(15.5px,2vw,18px); line-height:1.6; max-width:52ch; margin:0}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}

/* ---------- Sections ---------- */
.section{max-width:1160px; margin:0 auto; padding:64px 20px 8px; width:100%}
.section-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap}
.section-head h2{font-size:clamp(26px,4vw,36px); margin:0; color:var(--link)}
.more-link{font-weight:700; font-size:14.5px}
.grid{display:grid; gap:18px; margin-top:24px}
.grid-products{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-ways{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid-news{grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:20px}

/* ---------- Cards ---------- */
.card{background:var(--bg2); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column}
a.card:hover,a.way:hover,a.news-card:hover{border-color:var(--green); color:inherit}
.card-media{background:var(--soft); display:grid; place-items:center; padding:18px 0}
.card-media img{height:190px; width:auto; object-fit:contain}
.stripe{background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 12px,
  var(--soft2) 12px,var(--soft2) 24px); display:grid; place-items:center}
.stripe-lg{background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 14px,
  var(--soft2) 14px,var(--soft2) 28px); display:grid; place-items:center}
.stripe-label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  color:var(--muted); background:var(--bg); padding:5px 10px; border-radius:6px}
.card-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-title{font-family:Lora,Georgia,serif; font-size:19px; font-weight:600}
.card-desc{font-size:14px; color:var(--muted); line-height:1.55; flex:1}
.card-foot{display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:6px}
.price{font-weight:700; font-size:15px; color:var(--link)}

/* Ways cards */
.way{border-radius:16px; padding:24px 22px; display:flex; flex-direction:column; gap:10px;
  background:var(--bg2); border:1px solid var(--line); color:inherit}
.way .tag{font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--hayInk)}
.way .name{font-family:Lora,Georgia,serif; font-size:21px; font-weight:600}
.way .desc{font-size:14px; line-height:1.55; color:var(--muted); flex:1}
.way .cta{font-weight:700; font-size:14px; color:var(--link)}
.way-green{background:var(--green); border-color:var(--green)}
.way-green .tag{color:var(--hay)}
.way-green .name{color:#fff}
.way-green .desc{color:#d7e2d2}
.way-green .cta{color:var(--hay)}
.way-green:hover{border-color:var(--hay)}

/* ---------- Nutrition band ---------- */
.band{background:var(--green); margin-top:64px}
.band-inner{max-width:1160px; margin:0 auto; padding:64px 20px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:40px; align-items:center}
.band-copy{display:flex; flex-direction:column; gap:14px}
.band-copy .kicker{color:var(--hay); font-size:12.5px}
.band-copy h2{font-size:clamp(26px,4vw,36px); margin:0; color:#fff}
.band-copy p{color:#d7e2d2; font-size:15.5px; line-height:1.65; margin:0}
.band-copy a{color:var(--hay); font-weight:700; font-size:14.5px}
.band-copy a:hover{color:#fff}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:14px}
.stat{background:rgba(255,255,255,0.07); border:1px solid rgba(232,217,168,0.28);
  border-radius:14px; padding:18px 16px; display:flex; flex-direction:column; gap:4px}
.stat-value{font-family:Lora,Georgia,serif; font-size:26px; font-weight:600; color:var(--hay)}
.stat-label{font-size:13px; font-weight:600; color:#fff}
.stat-note{font-size:12px; color:#b9cdb4; line-height:1.4}

/* ---------- Split (about) ---------- */
.split{max-width:1160px; margin:0 auto; padding:72px 20px 8px; width:100%;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:40px; align-items:center}
.framed{border-radius:18px; overflow:hidden; border:1px solid var(--line)}
.framed img{width:100%; height:100%; object-fit:cover; display:block}
.split-copy{display:flex; flex-direction:column; gap:14px}
.split-copy .kicker{color:var(--hayInk); font-size:12.5px}
.split-copy h2{font-size:clamp(26px,4vw,36px); margin:0; color:var(--link)}
.split-copy p{font-size:15.5px; line-height:1.7; color:var(--muted); margin:0}
.inline-links{display:flex; gap:18px; flex-wrap:wrap; margin-top:4px}
.inline-links a{font-weight:700; font-size:14.5px}

/* ---------- News cards ---------- */
.news-card{background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; display:flex; flex-direction:column; gap:6px; color:inherit}
.news-tag{font-size:11.5px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--hayInk)}
.news-title{font-family:Lora,Georgia,serif; font-size:17px; font-weight:600;
  line-height:1.3; color:var(--ink)}
.news-blurb{font-size:13.5px; color:var(--muted); line-height:1.5}

/* ---------- Location ---------- */
.location{max-width:1160px; margin:0 auto; padding:72px 20px 72px; width:100%}
.location-card{background:var(--bg2); border:1px solid var(--line); border-radius:20px;
  overflow:hidden; display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.location-copy{padding:36px 30px; display:flex; flex-direction:column; gap:16px}
.location-copy .kicker{color:var(--hayInk); font-size:12.5px}
.location-copy h2{font-size:clamp(24px,3.5vw,32px); margin:0; color:var(--link)}
.details{display:grid; gap:12px; font-size:15px; line-height:1.5; color:var(--muted)}
.details strong{color:var(--ink)}
.location-map{min-height:280px}
.btn-row{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- Footer ---------- */
.site-footer{background:var(--footer); color:#c9d4c2; margin-top:auto}
.footer-grid{max-width:1160px; margin:0 auto; padding:48px 20px 32px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px}
.footer-brand{display:flex; flex-direction:column; gap:12px}
.footer-mark{font-family:Lora,Georgia,serif; font-size:20px; color:#fff}
.footer-mark span{letter-spacing:0.14em; font-weight:400}
.footer-brand div:last-child{font-size:13.5px; line-height:1.6}
.footer-col{display:grid; gap:8px; font-size:14px; align-content:start}
.footer-col strong{font-weight:700; color:#fff; margin-bottom:4px}
.footer-col a{color:#c9d4c2}
.footer-col a:hover{color:var(--hay)}
.footer-col .addr{line-height:1.55}
.footer-col .tel{color:var(--hay)}
.footer-bar{border-top:1px solid rgba(255,255,255,0.12)}
.footer-bar-inner{max-width:1160px; margin:0 auto; padding:16px 20px; font-size:12.5px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:#8fa088}

/* ---------- Responsive: 900px breakpoint ---------- */
.only-wide{display:flex; align-items:center; justify-content:center}
.only-narrow{display:none}
@media (max-width:899px){
  .only-wide{display:none !important}
  .only-narrow{display:flex; align-items:center; justify-content:center}
  .wordmark{display:none}
  .nav-center{display:none}
  .hero-inner{padding:64px 20px 60px}
  .band-inner{padding:48px 20px}
  .location-copy{padding:28px 22px}
  .section{padding-top:48px}
  .split{padding-top:56px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* Theme toggle inside the mobile drawer */
.theme-btn-row .i-sun{display:block}
.theme-btn-row .i-moon{display:none}
:root[data-theme="dark"] .theme-btn-row .i-sun{display:none}
:root[data-theme="dark"] .theme-btn-row .i-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn-row .i-sun{display:none}
  :root:not([data-theme="light"]) .theme-btn-row .i-moon{display:block}
}

/* ---------- Subpage hero band ---------- */
.page-band{background:var(--green)}
.page-band-inner{max-width:1160px; margin:0 auto; padding:56px 20px;
  display:flex; flex-direction:column; gap:12px}
.page-band .kicker{color:var(--hay); font-size:12.5px}
.page-band h1{font-size:clamp(30px,5vw,46px); margin:0; color:#fff}
.page-band p{color:#d7e2d2; font-size:16px; line-height:1.65; max-width:62ch; margin:0}

/* ---------- Grid variants ---------- */
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px}
.grid-team{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.grid-mini{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:6px}

.card-tag{font-size:11.5px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--hayInk)}

/* ---------- Nutrition stat cards ---------- */
.statcard{background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  padding:20px 18px; display:flex; flex-direction:column; gap:4px}
.statcard .v{font-family:Lora,Georgia,serif; font-size:28px; font-weight:600; color:var(--link)}
.statcard .l{font-size:13.5px; font-weight:600}
.statcard .n{font-size:12.5px; color:var(--muted); line-height:1.45}
.note{font-size:13px; color:var(--muted); font-style:italic; margin:14px 2px 0}

/* ---------- Two-column prose ---------- */
.two-col{max-width:1160px; margin:0 auto; padding:56px 20px 8px; width:100%;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:36px}
.col{display:flex; flex-direction:column; gap:12px}
.col h2{font-size:clamp(22px,3.5vw,30px); margin:0; color:var(--link)}
.col p{font-size:14.5px; line-height:1.7; color:var(--muted); margin:0}
.col.wide p{font-size:15px}
.stack{display:grid; gap:10px}
.listcard{background:var(--bg2); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; font-size:14.5px; line-height:1.6; color:var(--muted)}
.listcard strong{color:var(--ink)}

/* ---------- Closing CTA ---------- */
.cta{max-width:1160px; margin:0 auto; padding:48px 20px 72px; width:100%}
.cta-inner{background:var(--bg2); border:1px solid var(--line); border-radius:18px;
  padding:28px 26px; display:flex; gap:20px; flex-wrap:wrap;
  align-items:center; justify-content:space-between}
.cta-copy{display:flex; flex-direction:column; gap:6px; max-width:56ch}
.cta-copy .t{font-family:Lora,Georgia,serif; font-size:21px; font-weight:600; color:var(--link)}
.cta-copy .d{font-size:14.5px; color:var(--muted); line-height:1.6}
.cta .btn{flex-shrink:0}

/* ---------- Ways: numbered steps ---------- */
.way-steps{display:grid; gap:6px; font-size:13.5px; color:var(--muted); margin-top:4px}
.way-steps strong{color:var(--ink)}
.way-green .way-steps{color:#d7e2d2}
.way-green .way-steps strong{color:var(--hay)}
.way-tall{padding:26px 24px}

/* ---------- Soft band (sustainability) ---------- */
.soft-band{background:var(--soft); margin-top:56px}
.soft-band-inner{max-width:1160px; margin:0 auto; padding:48px 20px;
  display:flex; flex-direction:column; gap:14px}
.soft-band .kicker{color:var(--hayInk); font-size:12.5px}
.soft-band h2{font-size:clamp(22px,3.5vw,30px); margin:0; color:var(--link)}
.minicard{background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.minicard .t{font-weight:700; margin-bottom:6px}
.minicard .d{font-size:14px; color:var(--muted); line-height:1.6}

/* ---------- Team ---------- */
.teamcard{background:var(--bg2); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.teamcard .ph{height:180px}
.teamcard .b{padding:14px 18px}
.teamcard .n{font-weight:700}
.teamcard .r{font-size:13.5px; color:var(--muted)}
.stripe-label-sm{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  color:var(--muted); background:var(--bg); padding:4px 9px; border-radius:6px}

/* ---------- News index cards ---------- */
.newscard-lg{background:var(--bg2); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column; color:inherit}
.newscard-lg:hover{border-color:var(--green); color:inherit}
.newscard-lg .ph{height:160px}
.newscard-lg .b{padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px}
.newscard-lg .t{font-family:Lora,Georgia,serif; font-size:18px; font-weight:600; line-height:1.3}
.newscard-lg .d{font-size:13.5px; color:var(--muted); line-height:1.55}

/* ---------- Location ---------- */
.detail-card{background:var(--bg2); border:1px solid var(--line); border-radius:16px;
  padding:24px; display:grid; gap:14px; font-size:15px; line-height:1.55; color:var(--muted)}
.detail-card strong{color:var(--ink)}
.map-lg{border-radius:16px; overflow:hidden; border:1px solid var(--line); min-height:340px}
.wide-photo{max-width:1160px; margin:0 auto; padding:48px 20px 72px; width:100%}

/* ---------- Compact footer (subpages) ---------- */
.footer-compact{max-width:1160px; margin:0 auto; padding:32px 20px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
.footer-compact .m{font-family:Lora,Georgia,serif; font-size:18px; color:#fff}
.footer-compact .m span{letter-spacing:0.14em; font-weight:400}
.footer-compact nav{display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px}
.footer-compact nav a{color:#c9d4c2}
.footer-compact nav a:hover{color:var(--hay)}
.footer-compact .tel{color:var(--hay); font-size:13.5px}

/* Inline link inside a "ways" card */
.way .way-link{font-weight:700; font-size:14px; color:var(--link)}
.way-green .way-link{color:var(--hay)}
.way-green .way-link:hover{color:#fff}

/* Four-across on desktop: 4x250 + 3x18 gap = 1054px, inside the 1120px content width */
@media (min-width:1000px){
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* Horse-head home icon: 25% larger, and stroked as well as filled so the
   thin line-art reads solidly at small sizes. */
.ico-solid{
  width:24px; height:24px;
  fill:currentColor; stroke:currentColor;
  stroke-width:5; stroke-linejoin:round; stroke-linecap:round;
}
.drawer .ico-solid{width:21px; height:21px}

/* Laptop and up: drop the logo mark, let the wordmark carry the brand.
   Below 900px the mark stays and the wordmark is hidden, as before. */
@media (min-width:900px){
  .brand-chip{display:none}
  .wordmark{font-size:26px}
}

/* Wordmark: heavier DEPOT, tighter tracking */
.wordmark span{font-weight:600; letter-spacing:0.06em}
.footer-mark span,.footer-compact .m span{font-weight:600; letter-spacing:0.06em}

/* Landing: "Get your Alfalfa" sits on the deep-green band.
   The highlight card flips to hay so it still separates from the band. */
.band-ways{background:var(--green); margin-top:0}
.band-wide{max-width:1160px; margin:0 auto; padding:64px 20px; width:100%}
.band-ways .section-head h2{color:#ffffff}
.band-ways .more-link{color:var(--hay)}
.band-ways .more-link:hover{color:#ffffff}
.band-ways .way-green{background:var(--hay); border-color:var(--hay)}
.band-ways .way-green .tag{color:#7a5f22}
.band-ways .way-green .name{color:#22301f}
.band-ways .way-green .desc{color:#3d4a35}
.band-ways .way-green .way-link{color:#1e5631}
.band-ways .way-green:hover{border-color:#ffffff}

/* Ways card link: shares .way .cta styling but without the .cta section collision */
.way .way-link{font-weight:700; font-size:14px; color:var(--link); margin-top:auto}

/* Landing page alternates bands: green ways, light nutrients, green location. */
.band-ways{margin-top:56px}

.band-light{background:var(--bg); margin-top:0}
.band-light .band-copy .kicker{color:var(--hayInk)}
.band-light .band-copy h2{color:var(--link)}
.band-light .band-copy p{color:var(--muted)}
.band-light .band-copy a{color:var(--link)}
.band-light .band-copy a:hover{color:var(--linkH)}
.band-light .stat{background:var(--bg2); border-color:var(--line)}
.band-light .stat-value{color:var(--link)}
.band-light .stat-label{color:var(--ink)}
.band-light .stat-note{color:var(--muted)}

.band-location{background:var(--green); margin-top:0}
.band-location .location-card{border-color:rgba(232,217,168,0.28)}

/* Google Maps embed */
.map-frame{overflow:hidden}
.map-embed{width:100%; height:100%; min-height:280px; border:0; display:block}
.map-lg .map-embed{min-height:340px}

/* Hover states only where a real pointer exists, so they do not stick after a tap */
@media (hover:hover){
  .icon-btn:hover,.menu-btn:hover,.theme-btn:hover{background:var(--soft)}
}

/* Mobile menu: a rounded panel anchored under the hamburger, only as wide
   as its longest label. The header is position:sticky, so it anchors here. */
.drawer{
  position:absolute; top:100%; right:12px; z-index:60;
  width:max-content; min-width:190px; max-width:calc(100vw - 24px);
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(20,28,16,0.28);
  padding:6px 18px 8px;
  gap:0;
}
.drawer a,.drawer button{padding:12px 2px}
.drawer > :last-child{border-bottom:none}

/* Mobile menu: icons trail their labels rather than leading them.
   The svgs are aria-hidden, so visual reordering costs nothing semantically. */
.drawer .ico{order:2}

/* Header sits on hay in light mode, so its border and control outlines
   need their own token rather than the page --line, which vanishes on hay. */
.site-header{border-bottom:1px solid var(--hdrLine)}
.site-header .icon-btn,
.site-header .menu-btn,
.site-header .theme-btn{border-color:var(--hdrLine)}
@media (hover:hover){
  .site-header .icon-btn:hover,
  .site-header .menu-btn:hover,
  .site-header .theme-btn:hover{background:rgba(34,48,31,0.08)}
}
:root[data-theme="dark"] .site-header .icon-btn:hover,
:root[data-theme="dark"] .site-header .menu-btn:hover,
:root[data-theme="dark"] .site-header .theme-btn:hover{background:var(--soft)}
.site-header .nav a:hover{color:#22301f}
:root[data-theme="dark"] .site-header .nav a:hover{color:var(--linkH)}

/* Location: the shopfront photo sits inside the green band, between the
   heading and the standfirst. */
.page-band .framed{border-color:rgba(232,217,168,0.35); margin:4px 0 2px}
.page-band .framed img{width:100%; display:block}

/* ---------- Header: deep green in both themes ----------
   Stated outright rather than via theme tokens, so the bar is identical
   light and dark and always separates from the page while scrolling. */
.site-header{
  background:#1e5631;
  border-bottom:1px solid rgba(232,217,168,0.25);
}
.site-header .wordmark{color:#f3f0e4}
.site-header .wordmark span{color:#e8d9a8}
.site-header .nav a{color:#e0e8dc}
.site-header .nav a:hover{color:#e8d9a8}
.site-header .nav a[aria-current="page"]{color:#e8d9a8}
.site-header .icon-btn,
.site-header .theme-btn,
.site-header .menu-btn{color:#e8d9a8; border-color:rgba(232,217,168,0.40)}
@media (hover:hover){
  .site-header .icon-btn:hover,
  .site-header .theme-btn:hover,
  .site-header .menu-btn:hover{background:rgba(232,217,168,0.14)}
}
/* Cart pill flips to hay so it reads against the green bar */
.site-header .cart-btn{background:#e8d9a8; color:#22301f}
.site-header .cart-btn .cart-count{background:#1e5631; color:#f3f0e4}
@media (hover:hover){
  .site-header .cart-btn:hover{background:#f0e4bd; color:#22301f}
}

/* Focus rings: drop the browser's blue default, keep a branded ring for
   keyboard users only so clicking a control leaves no lingering outline. */
:focus{outline:none}
:focus-visible{outline:2px solid #22301f; outline-offset:2px}
.site-header :focus-visible{outline-color:#e8d9a8}
:root[data-theme="dark"] :focus-visible{outline-color:#e8d9a8}
:root[data-theme="dark"] .site-header :focus-visible{outline-color:#e8d9a8}

/* Breakpoint-scoped block visibility (distinct from the flex .only-* pair) */
.mobile-only{display:none}
.desktop-only{display:block}
@media (max-width:899px){
  .mobile-only{display:block}
  .desktop-only{display:none}
}

/* Laptop hero: taller frame plus a higher crop window, so the figures on the
   sign are not decapitated. The source is 1024x878, so a wide viewport crops
   a lot of vertical; more height means a larger slice of the photo survives. */
@media (min-width:900px){
  .hero{min-height:700px; display:flex; align-items:center}
  .hero-inner{padding:0 20px; width:100%}
  .hero > img{object-position:center 30%}
}

/* Footer bottom bar: legal stacked left, designer credit right */
.footer-bar-inner{align-items:flex-start}
.footer-legal{display:grid; gap:3px}
.footer-credit{color:#8fa088; text-align:right; line-height:1.5; display:block}
.footer-credit:hover{color:var(--hay)}
@media (max-width:520px){
  .footer-bar-inner{flex-direction:column; gap:14px}
  .footer-credit{text-align:left}
}

/* Hero headline breaks after "Premium alfalfa," on laptop only.
   The space sits before the <br> so it survives when the break is hidden. */
.br-laptop{display:none}
@media (min-width:900px){
  .br-laptop{display:inline}
  .hero h1{max-width:none}
}

/* Product shots sit on white in both themes; the bag photography has a
   white ground, so a cream tile showed a visible edge around it. */
.card-media{background:#ffffff}

/* Product card body sits on cream, separating it from the white image tile */
.card-body{background:var(--soft)}

/* Section "more" links sit bottom-right of their band, under the content */
.more-row{display:flex; justify-content:flex-end; margin-top:20px}
.band-ways .more-row .more-link{color:var(--hay)}
.band-ways .more-row .more-link:hover{color:#ffffff}

/* A more-row inside a two-column band spans both columns */
.band-inner .more-row{grid-column:1 / -1; margin-top:4px}

/* Hero kicker: two lines on mobile, one with a middot on laptop */
.sep-laptop{display:none}
.br-mobile{display:inline}
@media (min-width:900px){
  .sep-laptop{display:inline}
  .br-mobile{display:none}
}

/* Hero buttons centre on mobile, staying on one row */
@media (max-width:899px){
  .hero-cta{width:100%; justify-content:center; flex-wrap:nowrap}
}
/* Keep them on one row on the narrowest handsets */
@media (max-width:380px){
  .hero-cta .btn{padding:12px 16px; font-size:14px}
}

/* Card action links right-align. They are flex items in a column card, so
   they stretch full width and text-align does the work. */
.way .way-link{text-align:right}

/* Laptop: pin the band to two columns and the stat tiles to three.
   auto-fit was resolving a third track once the more-row was added,
   narrowing the stats column until only two tiles fitted per row. */
@media (min-width:900px){
  .band-inner{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(3,1fr)}
}

/* Landing location card: single centred call-to-action */
.location-card .btn-row{justify-content:center}

/* ---------- Mobile footer ----------
   Everything centres and stacks; the four-column grid collapses to one. */
@media (max-width:899px){
  .footer-grid{
    grid-template-columns:1fr 1fr; gap:28px 16px;
    padding:36px 20px 28px; text-align:center;
  }
  /* brand and Visit span the row; Shop and Company sit side by side */
  .footer-grid > .footer-brand{grid-column:1 / -1}
  .footer-brand{align-items:center; gap:10px}
  .footer-col{justify-items:center; gap:10px}
  .footer-col strong{margin-bottom:0}

  .footer-compact{
    flex-direction:column; align-items:center; gap:14px;
    text-align:center; padding:28px 20px;
  }
  .footer-compact nav{justify-content:center; gap:16px; row-gap:8px}

  .footer-bar-inner{
    flex-direction:column; align-items:center; gap:12px; text-align:center;
  }
  .footer-legal{justify-items:center}
  .footer-credit{text-align:center}
}

/* Mobile bottom bar: each of the two lines runs on a single line */
.sep-mobile{display:none}
@media (max-width:899px){
  .sep-mobile{display:inline}
  .footer-legal{display:block}
}

/* Card buttons: left-aligned on laptop, centred on mobile */
.way .btn{align-self:flex-start}
.col .btn{align-self:flex-start}
@media (max-width:899px){
  .way .btn,
  .col .btn{align-self:center}
  .cta-inner{flex-direction:column; align-items:center}
  .cta-copy{max-width:none}
}