:root{
  --green:#8BC34A; --green-dark:#689F38; --text:#2b3a2b; --muted:#577257;
  --card:#fff; --line:rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:500 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; color:var(--text); background:#fff}

/* Layout core */
.site-wrapper{display:flex; min-height:100vh; flex-direction:column}
main{flex:1 0 auto}
.container{max-width:1150px; margin:0 auto; padding:0 20px}
.section{padding:56px 0}
.section-heading{margin:0 0 6px; font-size:28px; line-height:1.2}
.section-subtitle{margin:0 0 18px; color:var(--muted)}

/* Header — cream white, flat */
.site-header{background:#fffdf7; position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line)}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:74px}
.brand{display:flex; align-items:center; gap:12px}
.brand-logo-img{width:46px; height:46px; object-fit:contain}
.brand-name{font-weight:800; letter-spacing:.2px}
.brand-tagline{font-size:12px; color:var(--muted)}

/* Nav icons — v6.1 behavior: always visible, wraps on mobile, NO toggle */
.nav-links{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nav-icon{position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid var(--line); transition:transform .15s ease, border-color .2s}
.nav-icon:hover{border-color:#cddfc6; transform:translateY(-1px)}
.nav-icon svg{width:22px; height:22px; stroke:#2b3a2b; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.nav-icon.active{outline:2px solid rgba(139,195,74,.25)}
.cart-badge{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; background:#2b3a2b; color:#fff; font-size:11px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px}

/* Hero */
.hero{position:relative; padding:92px 0; background:#f6faf4 center/cover no-repeat}
.hero .container{position:relative}
.hero-title{font-size:36px; line-height:1.15; margin:0 0 10px}
.hero-subtitle{margin:0 0 16px; color:#2b3a2b; max-width:760px}

/* Grid & Cards */
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--line); border-radius:14px}
.card-tag{display:inline-block; background:#eaf6e7; color:#274227; padding:6px 10px; border-radius:999px; font-size:12px; margin:14px 14px 0}
.card-title{margin:10px 14px; font-size:18px}
.card-body{margin:0 14px 14px; color:#2b3a2b}
.card-image-placeholder{display:block; width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#e8f5e9,#f1f8e9); border-top:1px solid var(--line)}

/* Two column */
.two-column{display:grid; grid-template-columns:1fr 340px; gap:20px}
@media (max-width:900px){ .two-column{grid-template-columns:1fr} }
.aside-sticky{position:sticky; top:90px}

/* Buttons — glossy (as requested) */
.btn{position:relative; display:inline-block; border-radius:12px; padding:12px 18px; font-weight:800; text-decoration:none; border:1px solid #b9d9a0; cursor:pointer; background:#fff; color:#1b3a18; transition:transform .15s ease, filter .2s}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:0; box-shadow:0 0 0 3px rgba(139,195,74,.22)}
.btn-primary{
  color:#103610;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0)),
    linear-gradient(180deg, #ACE57F, #7FBE45);
  border:1px solid #78b63f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 18px rgba(139,195,74,.25);
}
.btn-primary:hover{ filter:brightness(1.04) }
.btn-outline{
  color:#214021;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)),
    linear-gradient(180deg, #ffffff, #f7fff0);
  border:1px solid #c8ddbb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.btn-outline:hover{ filter:brightness(1.02) }

/* Forms */
.fieldset{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px}
.legend{font-weight:800; margin:2px 0 12px}
.form{display:block}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:900px){ .form-grid-2{grid-template-columns:1fr} }
.label{display:block; font-size:13px; color:#2b3a2b; margin-bottom:6px}
.input,.textarea{width:100%; background:#fbfff7; border:1px solid #cddfc6; border-radius:12px; padding:12px 12px; font-size:16px; outline:0; transition:box-shadow .15s,border-color .15s}
.input:focus,.textarea:focus{border-color:#7fbf45; box-shadow:0 0 0 3px rgba(139,195,74,.22)}
.textarea{resize:vertical}
.help{font-size:12px; color:#577257; margin-top:5px}
.radio-row{display:flex; gap:8px; flex-wrap:wrap}
.radio-pill{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; background:#fff; border:1px solid #cddfc6; border-radius:999px; cursor:pointer}
.radio-pill input{accent-color:#7fbf45}

/* Footer — black color, compact; content already in HTML */
.site-footer{margin-top:20px; background:#0e0f0e; color:#e9eee9; border-top:1px solid #1c1f1c}
.site-footer a{color:#b6e5a2; text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .footer-top{padding:16px 0}
.site-footer .footer-bottom{padding:8px 0; border-top:1px solid #1c1f1c; font-size:13px; line-height:1.35; color:#cfd8cf}
.site-footer .footer-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:12px; align-items:center}
@media (max-width:900px){ .site-footer .footer-grid{grid-template-columns:1fr} }
.site-footer .footer-brand{display:flex; gap:12px; align-items:flex-start}
.site-footer .footer-brand img{width:40px; height:40px; object-fit:contain}
.site-footer .footer-brand h4{margin:0; font-size:16px; line-height:1.25; color:#fff}
.site-footer .footer-brand p{margin:2px 0 0; font-size:14px; line-height:1.35; color:#dce5dc}
.site-footer .footer-contact strong{display:block; margin-bottom:4px; font-size:14px; color:#fff}
.site-footer .footer-contact div{margin:2px 0; font-size:14px; line-height:1.35; color:#dce5dc}

/* A11y */
.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}


/* === v6.4.4: Hero text to white for stronger contrast on imagery === */
.hero-title{ color:#ffffff !important; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.hero-subtitle{ color:#f3f8f3 !important; text-shadow:0 1px 2px rgba(0,0,0,.25); }
/* Keep buttons readable on photo backgrounds */
.hero .btn-primary{ box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 18px rgba(0,0,0,.25); }
.hero .btn-outline{ background-image:
  linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.08)),
  linear-gradient(180deg, #ffffff, #f7fff0);
}



/* v6.4.5: Two-shade green typography */
body, .card-body, .section-heading{ color: var(--text); }
.section-subtitle, .help, .brand-tagline{ color: var(--muted); }



/* v6.4.6 — Info card layout for short notices */
.info-card .info-row{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-top:1px solid var(--line);
}
.info-card .info-row:first-child{ border-top:none; }
.info-card .info-row svg{
  width:18px; height:18px; flex:0 0 18px;
  stroke: var(--muted); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
  margin-top:2px;
}
.info-card .info-text{
  margin:0; color: var(--muted);
  line-height:1.45;
}


/* v6.4.7 — Mobile hamburger nav (desktop unchanged) */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background:#fff; border:1px solid var(--line); color:#2b3a2b;
  cursor:pointer; transition:transform .15s ease, border-color .2s;
}
.nav-toggle:hover{ border-color:#cddfc6; transform:translateY(-1px); }
.nav-toggle svg{ width:22px; height:22px; }

@media (max-width:900px){
  .navbar{ flex-wrap:wrap; }
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    display:none; width:100%; margin-top:8px;
    background:#fffdf7; border:1px solid var(--line); border-radius:12px; padding:8px;
  }
  body.nav-open .nav-links{ display:flex; flex-wrap:wrap; }
}