@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.5rem;
  background-color: #1b5e20; color: #fff;
  font-weight: 600; font-size: .9375rem;
  border-radius: .375rem; border: none; cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  transition: background-color .2s, box-shadow .2s, transform .1s;
}
.btn-primary:hover { background-color: #145218; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.btn-primary:active { transform: scale(.97); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.5rem;
  border: 2px solid #1b5e20; color: #1b5e20;
  background: transparent; font-weight: 600; font-size: .9375rem;
  border-radius: .375rem; cursor: pointer; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.btn-secondary:hover { background-color: #1b5e20; color: #fff; }

.btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.5rem;
  background-color: #c8a84b; color: #0f3d12;
  font-weight: 600; font-size: .9375rem;
  border-radius: .375rem; border: none; cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  transition: background-color .2s;
}
.btn-gold:hover { background-color: #b8922f; }

.btn-outline-white {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.5rem;
  border: 2px solid #fff; color: #fff;
  background: transparent; font-weight: 600; font-size: .9375rem;
  border-radius: .375rem; cursor: pointer; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.btn-outline-white:hover { background-color: #fff; color: #145218; }

/* ── Layout ────────────────────────────────────────────────────────────────── */
.section       { padding: 4rem 0; }
.section-sm    { padding: 2.5rem 0; }
@media (min-width: 768px) {
  .section    { padding: 6rem 0; }
  .section-sm { padding: 4rem 0; }
}

.container-main {
  max-width: 80rem; margin: 0 auto; padding: 0 1rem;
}
@media (min-width: 640px)  { .container-main { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container-main { padding: 0 2rem; } }

/* ── Section typography ────────────────────────────────────────────────────── */
.section-label {
  color: #c8a84b; font-weight: 600; font-size: .875rem;
  text-transform: uppercase; letter-spacing: .1em; display: block;
}
.section-title {
  font-size: 1.875rem; font-family: Georgia,'Times New Roman',serif;
  font-weight: 700; color: #0f3d12; margin-top: .5rem; margin-bottom: 1rem; line-height: 1.2;
}
@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }
.section-subtitle { color: #6b7280; font-size: 1.125rem; max-width: 42rem; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: #fff; border-radius: .75rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  transition: box-shadow .3s; overflow: hidden;
}
.card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-input {
  width: 100%; padding: .75rem 1rem;
  border: 1px solid #d1d5db; border-radius: .5rem;
  transition: border-color .2s, box-shadow .2s; outline: none;
  font-size: 1rem; font-family: inherit;
}
.form-input:focus { border-color: transparent; box-shadow: 0 0 0 3px rgba(27,94,32,.3); }
.form-label { display: block; font-size: .875rem; font-weight: 500; color: #374151; margin-bottom: .25rem; }

/* ── Page hero ─────────────────────────────────────────────────────────────── */
.page-hero {
  position: relative; background-color: #0f3d12; color: #fff;
  padding: 5rem 0 7rem; overflow: hidden;
}
@media (min-width: 768px) { .page-hero { padding: 7rem 0 9rem; } }
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,61,18,.9) 0%, rgba(27,94,32,.7) 100%);
}
.page-hero-content { position: relative; z-index: 1; }
.page-hero-overlay { position: absolute; inset: 0; z-index: 0; }
.page-hero-overlay img { width:100%; height:100%; object-fit:cover; opacity:.25; }

/* ── Admin sidebar links ────────────────────────────────────────────────────── */
.admin-nav-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem 1rem; border-radius: .5rem;
  color: #d1d5db; text-decoration: none; font-weight: 500;
  transition: background-color .15s, color .15s;
}
.admin-nav-link:hover, .admin-nav-link.active { background: #145218; color: #fff; }

/* ── WhatsApp pulse ────────────────────────────────────────────────────────── */
@keyframes whatsapp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.whatsapp-pulse { animation: whatsapp-pulse 2s infinite; }

/* ── Fade in ────────────────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.animate-fade-in { animation: fadeIn .4s ease-out both; }

/* ── Navbar dropdown ────────────────────────────────────────────────────────── */
.nav-dropdown {
  display: none; position: absolute; top: calc(100% + .25rem); left: 0;
  min-width: 14rem; background: #fff; border: 1px solid #f3f4f6;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); border-radius: .75rem;
  padding: .5rem 0; z-index: 100;
}
.nav-item:hover .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block; padding: .625rem 1rem;
  font-size: .875rem; color: #374151; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.nav-dropdown a:hover { background: #f0f7f1; color: #1b5e20; }

/* ── Hero slides ────────────────────────────────────────────────────────────── */
.hero-slide { display: none; }
.hero-slide.active { display: block; }

/* ── Gallery grid ────────────────────────────────────────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Auto-sliding carousels (gallery + news) ──────────────────────────────────── */
.carousel-container { position: relative; }
.carousel-viewport { overflow: hidden; width: 100%; }
.carousel-track { display: flex; }

.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.95); color: #1b5e20;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: transform .2s, background .2s;
}
.carousel-btn:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.carousel-btn-prev { left: -.75rem; }
.carousel-btn-next { right: -.75rem; }
@media (min-width: 768px) { .carousel-btn-prev { left: -1.25rem; } .carousel-btn-next { right: -1.25rem; } }

.gallery-slide { flex: 0 0 calc(50% - .375rem); margin-right: .75rem; }
@media (min-width: 640px)  { .gallery-slide { flex-basis: calc(33.3333% - .5rem); } }
@media (min-width: 1024px) { .gallery-slide { flex-basis: calc(25% - .5625rem); } }

.news-slide { flex: 0 0 100%; margin-right: 1.5rem; }
@media (min-width: 768px)  { .news-slide { flex-basis: calc(50% - .75rem); } }
@media (min-width: 1024px) { .news-slide { flex-basis: calc(33.3333% - 1rem); } }

/* ── Lightbox ────────────────────────────────────────────────────────────────── */
.lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.92); z-index: 200;
  align-items: center; justify-content: center; padding: 1rem;
}
.lightbox.open { display: flex; }

/* ── Stats strip ────────────────────────────────────────────────────────────── */
.stat-item { text-align: center; padding: 1.5rem 1rem; }
.stat-item .stat-number { font-size: 2.25rem; font-family:Georgia,'Times New Roman',serif; font-weight:700; color:#c8a84b; }
.stat-item .stat-label { font-size:.875rem; color:#d1d5db; margin-top:.25rem; }

/* ── Embla carousel ────────────────────────────────────────────────────────── */
.embla { overflow: hidden; }
.embla__container { display: flex; }
.embla__slide { flex: 0 0 100%; min-width: 0; }
@media (min-width:640px) { .embla__slide--third { flex: 0 0 50%; } }
@media (min-width:1024px) { .embla__slide--third { flex: 0 0 33.333%; } }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.text-gold { color: #c8a84b; }
.bg-green-900 { background-color: #0a290c; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.no-underline { text-decoration: none; }
.card-link { text-decoration: none; display: flex; flex-direction: column; }
.list-reset { list-style: none; }
.icon-fixed { flex-shrink: 0; }
.hidden { display: none; }
.m-0 { margin: 0; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.bg-subtle { background: #f9fafb; }

/* ── Page hero title/subtitle (inner pages) ──────────────────────────────────── */
.page-hero-title { font-family: Georgia, serif; font-size: 2.5rem; font-weight: 700; color: #fff; margin: .5rem 0 1rem; }
.page-hero-subtitle { color: #b4dab6; max-width: 40rem; }
.text-hero-body { color: #b4dab6; margin-bottom: 1.5rem; }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.breadcrumb { margin-top: 1rem; font-size: .875rem; }
.breadcrumb-link { color: #4da052; text-decoration: none; }
.breadcrumb-sep { color: #145218; }

/* ── Media ────────────────────────────────────────────────────────────────── */
.media-cover { width: 100%; height: 100%; object-fit: cover; }
.media-cover-zoom { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.media-cover-dim { width: 100%; height: 100%; object-fit: cover; opacity: .35; }

/* ── Text styles ──────────────────────────────────────────────────────────── */
.text-muted-sm { color: #6b7280; font-size: .875rem; line-height: 1.6; }
.text-muted { color: #6b7280; font-size: .875rem; }
.text-muted-mt { color: #6b7280; font-size: .875rem; margin-top: .25rem; }
.text-muted-sm-mb { color: #6b7280; font-size: .875rem; line-height: 1.6; margin-bottom: 1rem; }
.text-body { color: #6b7280; line-height: 1.7; font-size: .9375rem; }
.text-body-mb { color: #6b7280; line-height: 1.8; margin-bottom: 1rem; }
.text-body-mb-lg { color: #6b7280; line-height: 1.8; margin-bottom: 2rem; }
.text-body-mb-md { color: #6b7280; line-height: 1.7; margin-bottom: 1.5rem; }

.subheading { font-family: Georgia, serif; font-weight: 700; color: #0f3d12; margin-bottom: .5rem; }
.subheading-tight { font-family: Georgia, serif; font-weight: 700; color: #0f3d12; }
.subheading-mb { font-family: Georgia, serif; font-weight: 700; color: #0f3d12; margin-bottom: 1rem; }
.subheading-mb-sm { font-family: Georgia, serif; font-weight: 700; color: #0f3d12; margin-bottom: .25rem; }
.subheading-mb-lg { font-family: Georgia, serif; font-weight: 700; color: #0f3d12; margin-bottom: 1.25rem; }
.subheading-strong { font-weight: 600; color: #0f3d12; margin-bottom: .25rem; }
.label-strong { font-weight: 600; color: #0f3d12; font-size: .9375rem; }
.label-dark { font-weight: 600; color: #1f2937; font-size: .9375rem; }
.label-medium { font-weight: 500; color: #374151; font-size: .875rem; }
.stat-heading { font-size: 2rem; font-weight: 700; color: #0f3d12; font-family: Georgia, serif; }
.eyebrow-muted { font-size: .75rem; color: #6b7280; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.eyebrow-on-dark { font-size: .6875rem; font-weight: 600; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .05em; }
.link-tag-sm { color: #1b5e20; font-size: .875rem; font-weight: 600; display: flex; align-items: center; gap: .25rem; }
.link-tag { color: #1b5e20; font-weight: 600; display: flex; align-items: center; gap: .5rem; }

/* ── Product spec list / table (products/*.html) ─────────────────────────────── */
.spec-list-item { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; color: #374151; font-size: .875rem; }
.spec-icon { width: 1.5rem; height: 1.5rem; background: #f0f7f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature-icon { width: 3rem; height: 3rem; background: #f0f7f1; border-radius: .75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid #f3f4f6; }
.spec-table td.spec-label { padding: .75rem 0; font-size: .875rem; color: #6b7280; width: 50%; }
.spec-table td.spec-value { padding: .75rem 0; font-size: .875rem; font-weight: 500; color: #374151; }