/* ==========================================================
   AgriMarket — design tokens & overrides on Bootstrap 5
   ========================================================== */
:root{
  --forest:#1F3D2B;
  --forest-2:#274A34;
  --cream:#FBF8F2;
  --cream-2:#F3EEE2;
  --green:#3E8E5B;
  --green-bright:#4CAF6D;
  --amber:#E0A63A;
  --amber-dark:#B9822A;
  --ink:#16211A;
  --mist:#A9B8AD;
  --mist-dim:#5E6B60;
  --line: rgba(255,255,255,0.14);
  --line-dark: rgba(22,33,26,0.10);

  --bs-body-font-family: 'Inter', sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--cream);
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; }

h1,h2,h3,h4,.font-display{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.12;
}
.mono{ font-family:'IBM Plex Mono', monospace; }

a{ text-decoration:none; }
.text-green{ color:var(--green) !important; }
.text-green-bright{ color:var(--green-bright) !important; }
.text-amber{ color:var(--amber) !important; }
.text-mist{ color:var(--mist) !important; }
.text-mist-dim{ color:var(--mist-dim) !important; }
.bg-forest{ background:var(--forest) !important; }
.bg-forest-2{ background:var(--forest-2) !important; }
.bg-cream-2{ background:var(--cream-2) !important; }

/* ---------- Buttons ---------- */
.btn-green{
  background:var(--green); color:#fff;
  font-family:'Plus Jakarta Sans'; font-weight:600;
  border-radius:8px; border:1px solid transparent;
  padding:.7rem 1.5rem;
}
.btn-green:hover{ background:var(--green-bright); color:#fff; }
.btn-outline-cream{
  border:1px solid var(--line); color:#fff;
  border-radius:8px; font-family:'Plus Jakarta Sans'; font-weight:600;
  padding:.7rem 1.5rem;
}
.btn-outline-cream:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.06); }
.btn-amber-cta{
  background:var(--amber); color:#332400;
  font-family:'Plus Jakarta Sans'; font-weight:700; border-radius:8px;
  padding:.8rem 1.7rem;
}
.btn-amber-cta:hover{ background:#eab758; color:#332400; }
.btn-outline-forest{
  border:1px solid var(--line-dark); color:var(--ink);
  border-radius:8px; font-family:'Plus Jakarta Sans'; font-weight:600;
  padding:.7rem 1.5rem; background:#fff;
}
.btn-outline-forest:hover{ border-color:var(--green); color:var(--green); }

/* ---------- Eyebrow label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.76rem; letter-spacing:.07em; text-transform:uppercase;
}
.eyebrow::before{ content:''; width:22px; height:2px; background:currentColor; border-radius:2px; }

/* ---------- Navbar ---------- */
#mainNav{
  background:rgba(31,61,43,0.95);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
#mainNav .navbar-brand{
  font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.25rem; color:#fff;
  display:flex; align-items:center; gap:.55rem;
}
#mainNav .nav-link{
  color:var(--mist) !important; font-weight:600; font-size:.92rem;
  padding:.5rem 1rem !important;
}
#mainNav .nav-link:hover, #mainNav .nav-link.active{ color:#fff !important; }
#mainNav .dropdown-menu{
  background:var(--forest-2); border:1px solid var(--line); border-radius:10px;
}
#mainNav .dropdown-item{ color:var(--mist); font-size:.9rem; }
#mainNav .dropdown-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.navbar-toggler{ border-color:var(--line); }

/* ---------- Hero ---------- */
.hero{
  background:radial-gradient(ellipse 90% 60% at 75% 0%, #2b5238 0%, var(--forest) 55%), var(--forest);
  color:#fff;
  padding:6rem 0 4.5rem;
  overflow:hidden;
  position:relative;
}
.hero h1{ font-size:clamp(32px,4.6vw,58px); color:#fff; }
.hero h1 span.hl{ color:var(--amber); }
.hero .lead-p{ color:var(--mist); font-size:1.1rem; max-width:520px; }

.hero-stats{ border-top:1px solid var(--line); padding-top:1.5rem; margin-top:2.5rem; }
.hero-stats .num{ font-family:'Plus Jakarta Sans'; font-size:1.7rem; font-weight:800; color:#fff; }
.hero-stats .lbl{ font-size:.78rem; color:var(--mist); }

.hero-badge{
  position:absolute; background:#fff; color:var(--ink); border-radius:12px;
  padding:.7rem 1rem; box-shadow:0 14px 30px rgba(0,0,0,.18);
  font-size:.82rem; font-weight:600;
}

/* ---------- Department tabs (produce / animal / feed) ---------- */
.dept-tab{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1.1rem; border-radius:30px; border:1px solid var(--line-dark);
  font-size:.88rem; font-weight:600; color:var(--mist-dim); background:#fff;
}
.dept-tab.active, .dept-tab:hover{ background:var(--forest); color:#fff; border-color:var(--forest); }
.cat-pill{
  display:inline-block; padding:.4rem .9rem; border:1px solid var(--line-dark);
  border-radius:20px; font-size:.84rem; color:var(--mist-dim); margin:0 .4rem .5rem 0; background:#fff;
}
.cat-pill.active, .cat-pill:hover{ background:var(--green); color:#fff; border-color:var(--green); }

/* ---------- Section head ---------- */
.section-head{ max-width:640px; }
.section-head h2{ font-size:clamp(26px,3.2vw,38px); color:var(--ink); }
.section-head p{ color:var(--mist-dim); font-size:1rem; }

/* ---------- Department feature cards (home) ---------- */
.dept-card{
  border-radius:16px; padding:2rem; height:100%; color:#fff; position:relative; overflow:hidden;
}
.dept-card.produce{ background:linear-gradient(135deg, #3E8E5B 0%, #276641 100%); }
.dept-card.animal{ background:linear-gradient(135deg, #B9822A 0%, #8C611D 100%); }
.dept-card.feed{ background:linear-gradient(135deg, #274A34 0%, #16281C 100%); }
.dept-card h3{ color:#fff; font-size:1.4rem; margin-bottom:.6rem; }
.dept-card p{ color:rgba(255,255,255,.85); font-size:.92rem; margin-bottom:1.4rem; }

/* ---------- Product cards ---------- */
.product-card{
  background:#fff; border:1px solid var(--line-dark); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; height:100%; transition:box-shadow .2s, transform .2s;
}
.product-card:hover{ box-shadow:0 16px 34px rgba(22,33,26,.09); transform:translateY(-3px); }
.product-card .thumb{ aspect-ratio:1/1; background:var(--cream-2); overflow:hidden; position:relative; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-card .dept-flag{
  position:absolute; top:.7rem; left:.7rem; background:rgba(31,61,43,.9); color:#fff;
  font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  padding:.25rem .6rem; border-radius:20px;
}
.product-card .body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex-grow:1; }
.product-card .cat{ font-family:'IBM Plex Mono'; font-size:.7rem; color:var(--green); text-transform:uppercase; letter-spacing:.04em; }
.product-card h3{ font-size:1rem; color:var(--ink); margin:.4rem 0 .3rem; line-height:1.3; }
.product-card .unit{ font-size:.78rem; color:var(--mist-dim); margin-bottom:.5rem; }
.product-card .price{ font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.15rem; color:var(--ink); }
.product-card .price.was{ font-size:.82rem; color:var(--mist-dim); text-decoration:line-through; font-weight:500; margin-left:.4rem; }
.product-card .stock-badge{ font-size:.72rem; }
.product-card .mt-auto-actions{ margin-top:auto; padding-top:.9rem; }

/* ---------- Product detail ---------- */
.product-gallery-main{
  background:var(--cream-2); border-radius:16px; overflow:hidden; aspect-ratio:1/1;
}
.product-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumb{
  width:70px; height:70px; border-radius:10px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:var(--cream-2); flex-shrink:0;
}
.gallery-thumb.active{ border-color:var(--green); }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; }

.info-card{
  border:1px solid var(--line-dark); background:#fff; padding:1.6rem; border-radius:14px;
}
.info-row{ display:flex; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid var(--line-dark); font-size:.88rem; }
.info-row:last-child{ border-bottom:none; }
.info-row .v{ font-weight:600; color:var(--green); }

.qty-input{ width:74px; text-align:center; }

/* ---------- Cart ---------- */
.cart-row img{ width:64px; height:64px; object-fit:cover; border-radius:8px; background:var(--cream-2); }

/* ---------- Checkout delivery option ---------- */
.delivery-option{
  border:1px solid var(--line-dark); border-radius:12px; padding:1rem 1.2rem; cursor:pointer;
  transition:border-color .15s, background .15s; background:#fff;
}
.delivery-option:hover{ border-color:var(--green); }
.delivery-option.selected{ border-color:var(--green); background:rgba(62,142,91,.06); }
.delivery-option input{ margin-right:.6rem; }

/* ---------- Page header (inner pages) ---------- */
.page-header{ background:var(--forest); color:#fff; padding:4.5rem 0 3rem; }
.page-header h1{ color:#fff; font-size:clamp(28px,4vw,42px); }
.breadcrumb-mono{ font-family:'IBM Plex Mono'; font-size:.8rem; color:var(--mist); }
.breadcrumb-mono a{ color:var(--mist); }
.breadcrumb-mono a:hover{ color:#fff; }

/* ---------- Testimonials ---------- */
.testi-card{ background:#fff; border:1px solid var(--line-dark); padding:1.8rem; border-radius:14px; height:100%; }
.testi-card .quote{ font-size:.96rem; color:var(--ink); line-height:1.65; }
.avatar{
  width:38px; height:38px; border-radius:50%; background:var(--green); color:#fff;
  font-family:'Plus Jakarta Sans'; font-weight:700; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--green) 0%, #276641 100%);
  color:#fff; text-align:center; padding:5rem 0; border-radius:0;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.88); max-width:520px; margin:0 auto; }

/* ---------- Forms ---------- */
.form-control, .form-select{
  background:#fff; border:1px solid var(--line-dark); border-radius:8px; padding:.75rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--green); box-shadow:0 0 0 .2rem rgba(62,142,91,.15);
}
label.form-label{ font-size:.85rem; font-weight:600; color:var(--ink); }

/* ---------- Footer ---------- */
footer{ background:var(--forest); color:var(--mist); padding:4rem 0 1.6rem; }
footer h4{ color:#fff; font-size:.78rem; font-family:'IBM Plex Mono'; letter-spacing:.05em; text-transform:uppercase; margin-bottom:1.1rem; }
footer ul{ list-style:none; padding:0; }
footer ul li{ margin-bottom:.65rem; }
footer ul a{ color:var(--mist); font-size:.9rem; }
footer ul a:hover{ color:#fff; }
footer p{ color:var(--mist-dim); font-size:.9rem; }
.foot-social a{
  width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:var(--mist);
  margin-right:.5rem; font-size:.75rem;
}
.foot-social a:hover{ border-color:var(--amber); color:var(--amber); }
.foot-bottom{ border-top:1px solid var(--line); padding-top:1.4rem; font-size:.82rem; color:var(--mist-dim); }
.foot-bottom a{ color:var(--mist-dim); margin-left:1.3rem; }
.foot-bottom a:hover{ color:#fff; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}