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

:root{
--bg:#F7F5F0;
--white:#FFFFFF;
--green:#477023;
--dark:#2E3A2E;
--beige:#E7DDCC;
--text:#2E3A2E;
--muted:#6B726B;
--radius:22px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
background:var(--bg);
font-family:'Poppins',sans-serif;
color:var(--text);

}

img{ display:block; width:100%; }
a{ text-decoration:none; color:inherit; }
button{ font-family:'Poppins',sans-serif; border:none; cursor:pointer; }

/* ---------------- SCROLL REVEAL EFFECT ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- POP HOVER ANIMATIONS ---------------- */
@keyframes hvr-pop {
  50% { transform: scale(1.15); }
}
.hero-btn:hover, .add-btn:hover, .icon-btn:hover, .whatsapp:hover {
  animation: hvr-pop 0.3s linear 1;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* ---------------- NAVBAR ---------------- */
.navbar {
  position: sticky;
  top: 0;
  height: 72px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 9999; /* High z-index keeps it above everything */
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}


.logo {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 12px; /* Space between the lines and text */
}

/* This creates the lines on the left and right */
.logo::before, 
.logo::after {
  content: '';
  display: block;
  width: 30px; /* Length of the line */
  height: 1px; /* Thickness of the line */
  background: var(--white); 
  border-radius: 2px;
  opacity: 0.8;
}



.nav-icons{
  display:flex;
  gap:16px;
}

.icon-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:white;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  transition: 0.3s ease;
}

/* ---------------- PROFESSIONAL SEARCH BAR ---------------- */
.search-section {
  padding: 25px 20px 10px;
}

.search-box {
  background: white;
  height: 55px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  border: 2px solid transparent;
  transition: 0.3s ease;
}

.search-box:focus-within {
  border-color: var(--green);
  box-shadow: 0 8px 25px rgba(94, 122, 94, 0.15);
}

.search-box i {
  color: var(--muted);
  font-size: 16px;
  margin-right: 12px;
  transition: 0.3s ease;
}

.search-box:focus-within i {
  color: var(--green);
}

.search-box input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 15px;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  color: var(--dark);
}

.search-box input::placeholder {
  color: #999;
}

/* ---------------- HERO ---------------- */
.hero{ padding:20px 20px 40px; }
.hero-card{
  border-radius:30px;
  overflow:hidden;
  background:white;
  box-shadow: 0 8px 20px rgba(0,0,0,.05), 0 20px 40px rgba(0,0,0,.04);
}
.hero-image{ height:420px; object-fit:cover; }
.hero-content{ padding:25px; text-align: center; }
.hero-title{ font-size:2rem; font-weight:700; line-height:1.2; margin-bottom:10px; color: var(--dark); }
.hero-sub{ font-size:1rem; line-height:1.7; color:var(--muted); margin-bottom:20px; }
.hero-btn{ background:var(--green); color:white; padding:14px 30px; border-radius:999px; font-weight:600; font-size: 16px; transition: 0.3s ease;}

/* ---------------- SECTION ---------------- */
.section{ padding:25px 20px; }
.section-title{ font-size:1.9rem; font-weight:600; margin-bottom:20px; text-align:center; color: var(--dark); }

/* ---------------- CATEGORY ---------------- */
.category-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.category-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,0.06);
    transition:0.3s ease;

    height:220px;
    display:flex;
    flex-direction:column;
}

.category-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 28px rgba(0,0,0,0.10);
}

.category-img{
    width:100%;
    height:150px;
    object-fit:cover;
    display:block;
}

.category-name{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:8px;
    font-weight:600;
    color:var(--dark);
}
.category-grid a{
    text-decoration:none;
    color:inherit;
}
/* ---------------- PRODUCTS ---------------- */
.product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.product-card{
  background:white;
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  transition:.3s ease;
}
.product-card:hover{ transform:translateY(-6px); box-shadow: 0 12px 25px rgba(0,0,0,0.1); }
.product-image{ height:220px; object-fit:cover; }
.product-content{ padding:14px; }
.product-name{ font-size:.95rem; font-weight:600; margin-bottom:8px; line-height:1.4; color: var(--dark); }
.price-row{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.old-price{ color:#999; text-decoration:line-through; font-size:.85rem; }
.sale-price{ color:var(--dark); font-weight:700; }
.add-btn{ width:100%; padding:12px; border-radius:14px; background:var(--green); color:white; font-weight:600; transition: 0.3s ease; }

.view-all{ margin-top:18px; display:block; font-weight:600; color:var(--green); text-align: center; transition: 0.3s ease;}
.view-all:hover { letter-spacing: 1px; }

/* ---------------- WHY US ---------------- */
.features{ display:grid; grid-template-columns:repeat(2,1fr); gap:25px; margin-top:25px; max-width:500px; margin-left:auto; margin-right:auto; text-align: center; }
.feature-circle{
  width:80px; height:80px; border-radius:50%; background:white;
  display:flex; align-items:center; justify-content:center;
  margin:auto; margin-bottom:12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  font-size:30px; transition: 0.3s ease;
}
.feature-item:hover .feature-circle { transform: scale(1.1) rotate(5deg); }
.feature-item h4{ font-size:16px; margin-bottom:5px; color: var(--dark); }
.feature-item p{ font-size:13px; color:#666; }

/* ---------------- FOOTER ---------------- */
.footer{ margin-top:50px; background:var(--dark); color:white; padding:40px 25px; border-radius:30px 30px 0 0; text-align: center; }
.footer-title{ font-size:1.4rem; font-weight:700; margin-bottom:20px; }
.footer-links{ display:flex; flex-direction:column; gap:12px; }
.footer-links a:hover { color: var(--beige); }

/* ---------------- WHATSAPP ---------------- */
.whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;
  width:65px;
  height:65px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:2.2rem;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  z-index:1000;
  transition: 0.3s ease;
}

/* ---------------- BUBBLE MENU OVERLAY ---------------- */
.bubble-menu-items {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 998;
  background: rgba(247, 245, 240, 0.5); 
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
}
.bubble-menu-items .pill-list {
  list-style: none; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 0; row-gap: 8px; width: 100%; max-width: 1200px; justify-content: stretch;
}
.bubble-menu-items .pill-col { display: flex; justify-content: center; flex: 0 0 calc(100% / 3); box-sizing: border-box; }
.bubble-menu-items .pill-link {
  --pill-bg: #ffffff; --pill-color: var(--text); --item-rot: 0deg;
  width: 100%; min-height: 140px; padding: clamp(1.5rem, 3vw, 8rem) 0; font-family: 'Poppins', sans-serif; font-size: clamp(1.5rem, 4vw, 3.5rem); font-weight: 600;
  border-radius: 999px; background: var(--pill-bg); color: var(--pill-color); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, color 0.3s ease; z-index: 10;
}
@media (max-width: 899px) {
  .bubble-menu-items { align-items: flex-start; padding-top: 100px; }
  .bubble-menu-items .pill-col { flex: 0 0 100%; margin-left: 0 !important; }
  .bubble-menu-items .pill-link { font-size: 1.5rem; min-height: 70px; }
  .bubble-menu-items .pill-link:hover { background: var(--hover-bg); color: var(--hover-color); }
}

/* ---------------- BUBBLE TOGGLE BUTTON (The X Animation) ---------------- */
.bubble-toggle {
  width: 42px; height: 42px; border-radius: 50%; background: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1001; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,.05); transition: 0.3s ease;
}
.bubble-toggle .menu-line {
  position: absolute; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: all 0.3s ease;
}
.bubble-toggle .menu-line:first-child { transform: translateY(-4px); }
.bubble-toggle .menu-line:last-child { transform: translateY(4px); }
.bubble-toggle.open .menu-line:first-child { transform: translateY(0) rotate(45deg); }
.bubble-toggle.open .menu-line:last-child { transform: translateY(0) rotate(-45deg); }
/* ---------------- BOTTOM SHEET (HALF PAGE OVERLAY) ---------------- */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); 
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); 
  display: none; z-index: 1000;
}
.bottom-sheet {
  position: fixed; bottom: -100%; left: 0; width: 100%; 
  background: var(--white); border-radius: 30px 30px 0 0; 
  padding: 30px 20px; transition: 0.3s ease-in-out; 
  z-index: 1001; box-shadow: 0 -5px 25px rgba(0,0,0,0.1); text-align: center;
}
.bottom-sheet.open { bottom: 0; }