/* =====================================================
   FOREST BEES — COMPLETE THEME CSS (Header + Hero + Pages)
   (Cleaned & Consolidated)
   ===================================================== */

/* ---------- Palette & base ---------- */
:root{
  --bg:#ffffff;
  --ink:#0b2a20;       /* dark forest green for text */
  --muted:#5b6b62;
  --brand:#14532d;     /* primary forest green */
  --bee:#f6ad1b;       /* honey gold accent */
  --card:#f7faf7;
  --ring:rgba(20,83,45,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);background:var(--bg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---------- Header / Navigation ---------- */
.header{
  position:sticky; top:0;
  background:#fff;
  box-shadow:0 1px 0 #e5e7eb;
  z-index:10;
}
.header-inner{
  display:flex;
  align-items:center;           /* vertically center content */
  justify-content:flex-start;   /* logo then nav on same line */
  gap:28px;                     /* = 2× nav gap as requested */
  padding:18px 0;               /* header vertical room */
  min-height:88px;
}

/* Left-aligned logo inside header bar */
.site-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.site-logo img{
  max-width:105px;              /* logo size */
  height:auto;
  display:block;
}

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap:14px;                     /* base nav spacing */
  flex-wrap:wrap;
}
.nav-link{
  color:var(--ink);
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
}
.nav-link.is-active{background:#e6f4ec}

/* Buttons */
.button{
  display:inline-block;
  padding:10px 16px;
  border-radius:12px;
  background:var(--brand);
  color:#fff; text-decoration:none;
  border:2px solid var(--brand);
  font-weight:600;
}
.button:hover{filter:brightness(.95)}
.button.small{padding:6px 10px;border-radius:10px;font-size:14px}
.button.outline{background:transparent;color:var(--brand);border-color:var(--brand)}

/* Hide any theme shop-name/emoji if present */
.brand-mark, .brand, .header .brand{display:none !important}

/* ---------- Hero (full-bleed, show more of bee, text right/lower) ---------- */
.hero{background:linear-gradient(180deg,#ffffff,#f1f7f3)}
.hero-cover{
  position:relative;
  min-height:90vh;                 /* a bit taller for breathing room */
  background-image:var(--hero-url);
  background-size:cover;           /* keep full-bleed (no side gaps) */
  background-position:center 25%;  /* shift crop downward to show more bee */
  display:flex;
  align-items:center;
}
.hero-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.15));
}
.hero-cover-inner{
  position:relative;
  top:80px;        /* push text down over image */
  left:8%;         /* move text to the right */
  max-width:620px; /* keep text block tidy */
  z-index:1;
}
.hero-copy h1{
  margin:0 0 6px;
  font-size:42px;  /* main headline */
  line-height:1.1;
}
.hero-copy p{
  font-size:22px;  /* larger second line */
  font-weight:500;
}
.hero-cta{display:flex; gap:12px; margin-top:20px; justify-content:flex-start}

/* ---------- Sections / tiles ---------- */
.section{padding:42px 0}
.section.alt{background:#f8fafc}
.grid{display:grid; gap:18px}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.what-we-do{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border:1px solid #e5e7eb; border-radius:16px; background:var(--card); padding:0}
.do-card .do-body{padding:14px}
.do-thumb{
  display:block; aspect-ratio:16/9;
  border-bottom:1px solid #e5e7eb;
  background-image:var(--img);
  background-size:cover; background-position:center;
  border-top-left-radius:16px; border-top-right-radius:16px;
}

/* ---------- Product grids & pages ---------- */
.products-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.product-card{border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; background:#fff; transition:transform .1s}
.product-card:hover{transform:translateY(-2px)}
.product-thumb{display:block; aspect-ratio:4/3; background:#fff}
.product-info{padding:12px}
.product-title{margin:0 0 6px; font-size:18px}
.price{font-weight:700}
.pill{display:inline-block; margin-top:6px; padding:2px 8px; border-radius:999px; background:#f3f4f6; font-size:12px}
.pill.sale{background:#dcfce7; color:#166534}

.product-page{display:grid; grid-template-columns:1.2fr .8fr; gap:28px}
.hero-img{border-radius:16px}
.thumbs{display:flex; gap:8px; margin-top:10px}

/* ---------- Prose / forms ---------- */
.prose h1,.prose h2,.prose h3{line-height:1.2}
.prose h1{font-size:34px}
.prose h2{font-size:24px; margin-top:0}
.prose .content p{margin:0 0 12px}
.checklist{padding-left:18px}
.checklist li{margin:6px 0}
.form label{display:block; margin:10px 0}
.form input,.form textarea{width:100%; padding:10px; border:1px solid #e5e7eb; border-radius:12px}
.form textarea{min-height:120px}
.form input:focus,.form textarea:focus{outline:2px solid var(--ring)}
.muted{color:var(--muted)}
.small{font-size:13px}
.xl{font-size:22px}
.tight{margin:0 0 8px}
.stack>*+*{margin-top:10px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid #e5e7eb; background:#fff}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; padding:28px 0}
.footer h4{margin:0 0 8px}
.footer-meta{padding:12px 0 24px; color:var(--muted); font-size:14px; text-align:center}

/* ---------- Cart ---------- */
.cart-table{border-top:1px solid #e5e7eb}
.cart-row{display:grid; grid-template-columns:1fr auto; gap:10px; padding:12px 0; border-bottom:1px solid #e5e7eb}
.cart-summary{margin-top:16px; display:flex; gap:16px; align-items:center}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .header-inner{gap:24px; min-height:78px; padding:14px 0}
  .site-logo img{max-width:92px}
  .hero-copy h1{font-size:36px}
  .hero-cover-inner{left:6%; top:70px}
}
@media (max-width: 700px){
  .site-logo img{max-width:84px}
  .two-col{grid-template-columns:1fr}
  .product-page{grid-template-columns:1fr}
  .hero-copy h1{font-size:32px}
  .hero-copy p{font-size:20px}
  .hero-cover-inner{left:5%; top:60px; max-width:90%}
}