:root {
  --green-900: #0b6e4f;
  --green-700: #1a9e6f;
  --green-500: #2fe08a;
  --dark: #10241c;
}

* { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #233027;
}

/* Bootstrap green override */
.btn-success,
.bg-success { background-color: var(--green-700) !important; border-color: var(--green-700) !important; }
.btn-success:hover { background-color: var(--green-900) !important; border-color: var(--green-900) !important; }
.text-success { color: var(--green-700) !important; }
.btn-outline-success { color: var(--green-700); border-color: var(--green-700); }
.btn-outline-success:hover { background-color: var(--green-700); border-color: var(--green-700); }

/* ===== Top bar ===== */
.topbar { background: var(--green-900); }

/* ===== Navbar ===== */
.navbar-brand { font-size: 1.4rem; }
.navbar .nav-link { font-weight: 500; color: #233027; }
.navbar .nav-link.active,
.navbar .nav-link:hover { color: var(--green-700); }

/* ===== Hero ===== */
.hero {
  position: relative;
  background: url('../images/hero-banner.svg') center/cover no-repeat;
  background-color: var(--green-700);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,45,33,0.85) 0%, rgba(7,45,33,0.45) 60%, rgba(7,45,33,0.15) 100%);
}
.min-vh-hero { min-height: 540px; }

/* ===== Feature strip ===== */
.feature-strip i { transition: transform .3s ease; }
.feature-strip .col-6:hover i { transform: translateY(-4px); }

/* ===== Product cards ===== */
.product-card {
  border: 1px solid #e8eee9;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* card body fills remaining height so price + buttons sit at the bottom */
.product-card > .p-4 {
  flex: 1 1 auto;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(11,110,79,.15);
}
.thumb-wrap {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  border-bottom: 1px solid #eef3ef;
}
.product-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.product-badge {
  position: absolute; top: 12px; left: 12px;
  font-size: .72rem; z-index: 2;
}
.discount-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: .72rem; z-index: 2;
}
.product-title {
  font-size: 1.02rem; line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rating i { font-size: .8rem; }
.price { color: var(--green-900); font-weight: 700; font-size: 1.25rem; }
.price-old { text-decoration: line-through; color: #9aa0a6; font-size: .9rem; }

/* Amazon button */
.btn-amazon {
  background: #ffd814;
  border: 1px solid #fcd200;
  color: #0f1111;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.btn-amazon:hover { background: #f7ca00; border-color: #f2c200; color: #0f1111; }
.btn-amazon:active,
.btn-amazon:focus { box-shadow: 0 0 0 .2rem rgba(228,170,0,.4); color: #0f1111; }
.buy-on-label { font-size: .95rem; line-height: 1; }
.amazon-logo {
  height: 20px;
  width: auto;
  display: inline-block;
  margin-left: 8px;
  margin-top: 7px;   /* nudge down so the smile aligns with the text baseline */
  vertical-align: middle;
}

/* Call modal icon */
.call-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--green-500); color: var(--green-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
  animation: pulse 2s infinite;
}

/* ===== Promo banner ===== */
.promo-banner {
  background: url('../images/promo-banner.svg') center/cover no-repeat;
  background-color: var(--green-900);
  position: relative;
}
.promo-banner::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(8,45,33,.6);
}
.promo-banner .container { position: relative; z-index: 1; }

/* ===== Why list ===== */
.why-list li { padding: .5rem 0; border-bottom: 1px dashed #d5e3da; }
.why-list li:last-child { border-bottom: 0; }

/* ===== Contact ===== */
.icon-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--green-500); color: var(--green-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.contact-card { transition: transform .25s ease; }
.contact-card:hover { transform: translateY(-5px); }

/* ===== Footer ===== */
.footer { background: var(--dark); }
.footer-links a { color: #c7d4cd; text-decoration: none; }
.footer-links a:hover { color: var(--green-500); }
.footer-links li { padding: .2rem 0; }

/* ===== Floating call ===== */
.float-call {
  position: fixed; right: 20px; bottom: 20px; z-index: 1030;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--green-700); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; box-shadow: 0 8px 24px rgba(11,110,79,.45);
  animation: pulse 2s infinite;
}
.float-call:hover { background: var(--green-900); color: #fff; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47,224,138,.55); }
  70% { box-shadow: 0 0 0 16px rgba(47,224,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,224,138,0); }
}

/* ===== Scroll animation ===== */
[data-animate] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-animate].in-view { opacity: 1; transform: none; }

@media (max-width: 575.98px) {
  .hero h1 { font-size: 2rem; }
  .min-vh-hero { min-height: 460px; }
}