/* BIOZYME MB - HOME (v8: professional agriculture style)
   Palette: forest #14301f, leaf #2f6b3a, sage #e8efe1, harvest #e8b931, soil #5b4a36, paper #f6f8f1
   All classes start with hm- so they never clash with base.css */

:root{
  --hm-forest:#14301f;
  --hm-leaf:#2f6b3a;
  --hm-leaf-deep:#245530;
  --hm-sage:#e8efe1;
  --hm-harvest:#e8b931;
  --hm-soil:#5b4a36;
  --hm-ink:#16241b;
  --hm-muted:#56645a;
  --hm-line:#d9e2d0;
  --hm-head:"Merriweather", Georgia, serif;
}

.hm-wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }
.hm-intro, .hm-trust, .hm-help{ padding:0; }
.hm-block{ padding:56px 0; }

.hm-h2{
  font-family:var(--hm-head);
  font-weight:700;
  font-size:clamp(1.45rem,2.8vw,2rem);
  line-height:1.25;
  color:var(--hm-forest);
  margin:0;
}
.hm-row-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; }
.hm-row-head p, .hm-sub2{ margin:8px 0 0; color:var(--hm-muted); font-size:1rem; }

/* ---------- BUTTONS ---------- */
.hm-btn{
  display:inline-block; padding:12px 26px; border-radius:8px;
  font-weight:700; font-size:.95rem; text-decoration:none;
  border:2px solid transparent; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.hm-btn:focus-visible{ outline:3px solid var(--hm-harvest); outline-offset:3px; }
.hm-btn-yellow{ background:var(--hm-harvest); color:var(--hm-forest); }
.hm-btn-yellow:hover{ background:#f2c94c; }
.hm-btn-line{ border-color:rgba(255,255,255,.65); color:#fff; }
.hm-btn-line:hover{ background:rgba(255,255,255,.12); }
.hm-btn-dark{ background:var(--hm-harvest); color:var(--hm-forest); }
.hm-btn-dark:hover{ background:#f2c94c; }
.hm-btn-outline{ border-color:rgba(255,255,255,.65); color:#fff; }
.hm-btn-outline:hover{ background:rgba(255,255,255,.12); }

/* ---------- HERO: deep green with crop-row lines (the one bold element) ---------- */
.hm-intro{
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.045) 0 2px, transparent 2px 38px),
    linear-gradient(120deg,#14301f 0%,#1d4a2c 60%,#2f6b3a 100%);
  color:#fff;
  border-bottom:6px solid var(--hm-harvest);
}
.hm-intro .hm-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap; padding-top:68px; padding-bottom:68px;
}
.hm-intro h1{
  font-family:var(--hm-head); font-weight:700;
  font-size:clamp(1.8rem,4.4vw,3rem); line-height:1.15;
  margin:0 0 12px; color:#fff; max-width:18ch;
}
.hm-intro p{ margin:0; color:#d6e6d3; font-size:1.1rem; max-width:42ch; line-height:1.6; }
.hm-intro-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- CATEGORIES: cube tiles, no scrolling ---------- */
.hm-chips{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:32px; padding:6px 8px 12px;
}
.hm-chip{
  position:relative; display:block; aspect-ratio:1/1; overflow:hidden;
  border-radius:18px; text-decoration:none; background:var(--hm-sage);
  border:2px solid var(--hm-leaf);
  box-shadow:8px 8px 0 var(--hm-leaf);
  transition:transform .2s ease, box-shadow .2s ease;
}
.hm-chip img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; /* fill = stretch to the full cube; use cover to crop instead */
  transition:transform .35s ease;
}
.hm-chip span{
  position:absolute; left:0; right:0; bottom:0; padding:44px 18px 18px;
  background:linear-gradient(to top, rgba(20,48,31,.92), rgba(20,48,31,0));
  color:#fff; font-size:1.25rem; font-weight:700; line-height:1.25; text-align:left;
}
.hm-chip:hover, .hm-chip:focus-visible{ transform:translate(-3px,-3px); box-shadow:12px 12px 0 var(--hm-harvest); }
.hm-chip:hover img{ transform:scale(1.06); }
.hm-chip:focus-visible{ outline:3px solid var(--hm-harvest); outline-offset:4px; }

/* ---------- SEASON PRODUCTS ---------- */
.hm-products{ background:var(--hm-sage); border-top:1px solid var(--hm-line); border-bottom:1px solid var(--hm-line); }
.hm-arrows{ display:flex; gap:8px; }
.hm-arrow{
  width:42px; height:42px; border-radius:50%;
  border:2px solid var(--hm-leaf); background:#fff; color:var(--hm-leaf);
  font-size:15px; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.hm-arrow:hover:not(:disabled){ background:var(--hm-leaf); color:#fff; }
.hm-arrow:disabled{ opacity:.35; cursor:default; }
.hm-arrow:focus-visible{ outline:3px solid var(--hm-forest); outline-offset:2px; }

.hm-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 2px 14px; scrollbar-width:none;
}
.hm-track::-webkit-scrollbar{ display:none; }
.hm-card{
  flex:0 0 330px; scroll-snap-align:start; background:#fff;
  border:1px solid var(--hm-line); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .2s ease;
}
.hm-card:hover{ box-shadow:0 14px 28px -16px rgba(20,48,31,.45); }
.hm-card img{ width:100%; height:250px; object-fit:cover; display:block; background:var(--hm-sage); }
.hm-card-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; border-top:3px solid var(--hm-leaf); }
.hm-card h3{ margin:0 0 6px; font-size:1.2rem; color:var(--hm-forest); }
.hm-card p{ margin:0 0 14px; color:var(--hm-muted); font-size:.95rem; line-height:1.55; flex:1; }
.hm-card a{
  text-align:center; background:var(--hm-leaf); color:#fff; padding:12px;
  border-radius:8px; text-decoration:none; font-weight:600; font-size:1rem;
  transition:background .2s ease;
}
.hm-card a:hover{ background:var(--hm-leaf-deep); }
.hm-card a:focus-visible{ outline:3px solid var(--hm-harvest); outline-offset:2px; }
.hm-empty{ color:var(--hm-muted); }

/* ---------- WHY ---------- */
.hm-why .hm-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:26px;
}
.hm-why-card{
  background:#fff; border:1px solid var(--hm-line); border-top:4px solid var(--hm-leaf);
  border-radius:10px; padding:24px 20px;
}
.hm-why-card i{
  width:48px; height:48px; border-radius:10px; background:var(--hm-sage); color:var(--hm-leaf);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px;
}
.hm-why-card h3{ margin:0 0 8px; font-size:1.05rem; color:var(--hm-forest); }
.hm-why-card p{ margin:0; color:var(--hm-muted); font-size:.93rem; line-height:1.6; }

/* ---------- HOW IT WORKS (real sequence, numbered) ---------- */
.hm-how{ background:#fff; border-top:1px solid var(--hm-line); border-bottom:1px solid var(--hm-line); }
.hm-steps{
  list-style:none; margin:28px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:hmstep;
}
.hm-steps li{ position:relative; padding:0 0 0 64px; counter-increment:hmstep; }
.hm-steps li::before{
  content:counter(hmstep); position:absolute; left:0; top:0;
  width:46px; height:46px; border-radius:50%;
  background:var(--hm-leaf); color:#fff;
  font-family:var(--hm-head); font-weight:700; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
}
.hm-steps h3{ margin:2px 0 6px; font-size:1.05rem; color:var(--hm-forest); }
.hm-steps p{ margin:0; color:var(--hm-muted); font-size:.93rem; line-height:1.6; }

/* ---------- TRUST STRIP ---------- */
.hm-trust{ background:var(--hm-forest); }
.hm-trust .hm-wrap{ display:grid; grid-template-columns:repeat(3,1fr); padding-top:44px; padding-bottom:44px; }
.hm-fact{ text-align:center; padding:6px 12px; }
.hm-fact + .hm-fact{ border-left:1px solid rgba(255,255,255,.16); }
.hm-fact i{ color:var(--hm-harvest); font-size:24px; margin-bottom:10px; display:block; }
.hm-num{ font-family:var(--hm-head); font-weight:700; font-size:clamp(1.7rem,3.6vw,2.5rem); color:#fff; line-height:1.1; }
.hm-fact-label{ color:#c4d8c1; margin-top:6px; font-size:.95rem; }

/* ---------- FAQ ---------- */
.hm-faq-list{ max-width:820px; margin-top:24px; }
.hm-faq-list details{ background:#fff; border:1px solid var(--hm-line); border-radius:10px; margin-bottom:10px; }
.hm-faq-list details[open]{ border-color:var(--hm-leaf); }
.hm-faq-list summary{
  list-style:none; cursor:pointer; padding:16px 52px 16px 18px;
  font-weight:600; color:var(--hm-forest); position:relative;
}
.hm-faq-list summary::-webkit-details-marker{ display:none; }
.hm-faq-list summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:1.5rem; color:var(--hm-leaf); line-height:1;
}
.hm-faq-list details[open] summary::after{ content:"\2212"; }
.hm-faq-list summary:focus-visible{ outline:3px solid var(--hm-leaf); outline-offset:2px; border-radius:10px; }
.hm-faq-list details p{ margin:0; padding:0 18px 18px; color:var(--hm-muted); line-height:1.65; }

/* ---------- HELP BOX ---------- */
.hm-help .hm-wrap{ padding-bottom:64px; }
.hm-help-box{
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.045) 0 2px, transparent 2px 38px),
    linear-gradient(120deg,#14301f,#245530);
  color:#fff; border-radius:14px; border-left:8px solid var(--hm-harvest);
  padding:34px 36px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.hm-help-box h2{ font-family:var(--hm-head); margin:0 0 8px; font-size:clamp(1.25rem,2.6vw,1.65rem); }
.hm-help-box p{ margin:0; color:#d6e6d3; max-width:46ch; line-height:1.55; }
.hm-help-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- FLOATING BUTTONS ---------- */
.hm-float{
  position:fixed; right:16px; bottom:16px; z-index:900; display:flex;
  flex-direction:column; align-items:flex-end; gap:10px;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.hm-float a, .hm-float button{
  width:50px; height:50px; border-radius:50%; border:none; display:flex;
  align-items:center; justify-content:center; font-size:22px; color:#fff;
  cursor:pointer; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.hm-float .wa{ background:#25d366; }
.hm-float .top{
  background:var(--hm-forest); font-size:16px; width:42px; height:42px;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.hm-float .top.show{ opacity:1; visibility:visible; }
.hm-float a:focus-visible, .hm-float button:focus-visible{ outline:3px solid var(--hm-harvest); outline-offset:3px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .hm-why .hm-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px){
  .hm-block{ padding:40px 0; }
  .hm-intro .hm-wrap{ padding-top:44px; padding-bottom:44px; }
  .hm-chips{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .hm-chip{ box-shadow:5px 5px 0 var(--hm-leaf); border-radius:14px; }
  .hm-chip span{ font-size:1rem; padding:32px 12px 12px; }
  .hm-arrows{ display:none; }
  .hm-card{ flex-basis:270px; }
  .hm-card img{ height:200px; }
  .hm-why .hm-grid{ grid-template-columns:1fr; }
  .hm-steps{ grid-template-columns:1fr; }
  .hm-fact{ padding:6px 4px; }
  .hm-fact i{ font-size:18px; }
  .hm-fact-label{ font-size:.8rem; }
  .hm-help-box{ padding:26px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .hm-track{ scroll-behavior:auto; }
  .hm-card, .hm-chip, .hm-chip img, .hm-btn, .hm-arrow, .hm-float .top{ transition:none; }
}

/* ---------- COVER IMAGE (set in Admin > Site settings > Cover image) ---------- */
.hm-intro.has-cover{
  position:relative;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:var(--hm-leaf);
  aspect-ratio:2170/520;            /* cover height: raise 520 for taller, lower for shorter */
  display:flex; align-items:flex-end;
}
.hm-intro.has-cover .hm-wrap{
  width:100%; justify-content:flex-start;
  padding-top:0; padding-bottom:max(20px,3.5vw);
}
/* the logos are already in the cover picture, so the text stays for screen readers only */
.hm-intro.has-cover .hm-intro-text{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* View products: deep green with white text */
.hm-intro.has-cover .hm-btn-dark{ background:var(--hm-forest); border-color:var(--hm-forest); color:#fff; }
.hm-intro.has-cover .hm-btn-dark:hover{ background:var(--hm-leaf); border-color:var(--hm-leaf); }
/* Contact us: harvest gold with dark text */
.hm-intro.has-cover .hm-btn-outline{ background:var(--hm-harvest); border-color:var(--hm-harvest); color:var(--hm-forest); }
.hm-intro.has-cover .hm-btn-outline:hover{ background:#f2c94c; border-color:#f2c94c; }

@media (max-width:700px){
  /* show the whole picture, buttons sit underneath on green */
  .hm-intro.has-cover{
    aspect-ratio:auto; display:block;
    background-size:100% auto; background-position:top center;
    padding-top:calc(100vw * 725 / 2170);
  }
  .hm-intro.has-cover .hm-wrap{ justify-content:center; padding-top:18px; padding-bottom:20px; }
  .hm-intro.has-cover .hm-btn-dark{ background:var(--hm-harvest); border-color:var(--hm-harvest); color:var(--hm-forest); }
  .hm-intro.has-cover .hm-btn-dark:hover{ background:#f2c94c; border-color:#f2c94c; }
  .hm-intro.has-cover .hm-btn-outline{ background:transparent; border-color:#fff; color:#fff; }
  .hm-intro.has-cover .hm-btn-outline:hover{ background:rgba(255,255,255,.12); }
}