/* ═══ HARIYALIBASKET v2 — BASE ═══ */
:root {
  --green-deep:   #0d3320;
  --green-dark:   #1a5c38;
  --green-mid:    #25834f;
  --green-light:  #38b26a;
  --green-glow:   #4dda85;
  --amber:        #f59e0b;
  --amber-deep:   #d97706;
  --red:          #ef4444;
  --white:        #ffffff;
  --off-white:    #f8fdf9;
  --gray-50:      #f9fafb;
  --gray-100:     #f3f4f6;
  --gray-200:     #e5e7eb;
  --gray-400:     #9ca3af;
  --gray-600:     #4b5563;
  --gray-800:     #1f2937;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.14);
  --shadow-xl:    0 20px 60px rgba(0,0,0,0.18);
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-full:  9999px;
  --transition:   all 0.22s cubic-bezier(.4,0,.2,1);
  --spring:       all 0.38s cubic-bezier(.34,1.56,.64,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', sans-serif;
  background: #f0f7f2;
  color: var(--gray-800);
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 80px; /* bottom nav */
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--green-light); border-radius: 4px; }

button { font-family: inherit; cursor: pointer; }
button:active { transform: scale(0.96); }
input, textarea { font-family: inherit; }

/* BUG FIX #4: All major UI sections must render above floating leaves (z-index 1).
   This creates a clean stacking context so leaves only show in true gaps/transparent areas. */
.hb-marquee,
.hb-hero,
.hb-info-cards,
.hb-countdown,
.hb-how-section,
.hb-products-section,
.hb-features-section,
.hb-reviews-section,
.hb-pincode-section,
.hb-faq-list,
.hb-footer,
#hb-trust-bar,
#hb-repeat-bar {
  position: relative;
  z-index: 2;
}

/* Section headers */
.hb-section-hdr {
  padding: 24px 16px 8px;
  text-align: left;
}
.hb-section-hdr h2 {
  font-family: 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--green-deep);
}
.hb-section-hdr h2.hb-h2-light { color: var(--amber); }
.hb-section-hdr h2.hb-h2-light span { color: var(--white); }
.hb-section-hdr h2 span { color: var(--green-mid); }
.hb-section-hdr small {
  display: block;
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 700;
  margin-top: 4px;
}

/* Toast */
#hb-toast {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--green-deep);
  color: #fff;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 800;
  z-index: 99999;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  white-space: nowrap;
  max-width: 88vw;
  text-align: center;
  opacity: 0;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
}
#hb-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Empty state */
.hb-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--gray-400);
  grid-column: 1 / -1;
}
.hb-empty .hb-empty-icon { font-size: 48px; margin-bottom: 12px; }
.hb-empty p { font-size: 14px; font-weight: 700; }