*{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:#1a6b3c;--green-light:#e8f5ee;--green-mid:#2d9158;
  --amber:#d97706;--amber-light:#fef3c7;
  --red:#dc2626;--red-light:#fee2e2;
  --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
  --gray-400:#9ca3af;--gray-600:#4b5563;--gray-800:#1f2937;
  --white:#ffffff;
  --font-display:'Playfair Display',serif;
  --font-body:'DM Sans',sans-serif;
  --shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
  --radius:8px;--radius-lg:14px;--radius-xl:20px;
}
body{font-family:var(--font-body);background:var(--gray-50);color:var(--gray-800);min-height:100vh}
button{cursor:pointer;border:none;font-family:var(--font-body)}
input,select,textarea{font-family:var(--font-body)}
.page{display:none}.page.active{display:block}

/* NAV */
nav{background:var(--white);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;height:64px}

/* Mobile nav adjustments */
@media (max-width: 480px) {
  .nav-inner {
    padding: 0 0.75rem;
    height: 56px;
  }
  .logo {
    font-size: 1.2rem !important;
  }
  .cart-btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.8rem !important;
  }
  .cart-btn span:not(.cart-count) {
    display: none;
  }
}

.logo{font-family:var(--font-display);font-size:1.5rem;color:var(--green);font-weight:700;letter-spacing:-0.5px}
.logo span{color:var(--amber)}
.cart-btn{background:var(--green);color:#fff;padding:.5rem 1.2rem;border-radius:50px;font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:.5rem;transition:all .2s}
.cart-btn:hover{background:var(--green-mid)}
.cart-count{background:var(--amber);color:#fff;border-radius:50%;width:20px;height:20px;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}

/* HERO */
.hero{background:linear-gradient(135deg,#0f4c25 0%,#1a6b3c 50%,#2d9158 100%);color:#fff;padding:4rem 1.5rem}
.hero-inner{max-width:1200px;margin:0 auto}
.hero h1{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,3.5rem);font-weight:700;line-height:1.15;margin-bottom:1rem}
.hero h1 span{color:#86efac}
.hero p{font-size:clamp(0.95rem,2vw,1.1rem);opacity:.85;max-width:480px;line-height:1.6}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:50px;padding:.4rem 1rem;font-size:.85rem;margin-bottom:1.5rem}

/* Hero responsive */
@media (max-width: 480px) {
  .hero {
    padding: 2.5rem 1rem;
    text-align: center;
  }
  .hero p {
    max-width: 100%;
    margin: 0 auto;
  }
  .hero-badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
  }
}

/* MAIN */
.main-content{max-width:1200px;margin:0 auto;padding:2.5rem 1.5rem}
.search-bar{position:relative;margin-bottom:1.5rem}
.search-bar input{width:100%;padding:.75rem 1rem .75rem 2.8rem;border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);font-size:.95rem;background:var(--white);transition:border-color .2s;outline:none}
.search-bar input:focus{border-color:var(--green)}
.search-icon{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--gray-400)}
.filter-bar{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem}

/* Filter responsive */
@media (max-width: 600px) {
  .main-content {
    padding: 1.5rem 0.75rem;
  }
  .filter-bar {
    flex-direction: column;
    gap: 0.5rem;
  }
  .filter-select {
    min-width: 100%;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
  .search-bar input {
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem 0.6rem 2.5rem;
  }
  .search-icon {
    left: 0.7rem;
    font-size: 0.9rem;
  }
}

.filter-select{flex:1;min-width:180px;padding:.75rem 1rem;border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);font-size:.95rem;background:var(--white);color:inherit;transition:border-color .2s;outline:none;cursor:pointer}
.filter-select:focus{border-color:var(--green)}
.category-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.cat-tab{padding:.45rem 1.1rem;border-radius:50px;border:1.5px solid var(--gray-200);background:var(--white);font-size:.85rem;font-weight:500;color:var(--gray-600);transition:all .2s;white-space:nowrap}
.cat-tab:hover{border-color:var(--green);color:var(--green)}
.cat-tab.active{background:var(--green);color:#fff;border-color:var(--green)}

/* PRODUCT GRID */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem}

/* Product grid responsive */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  /* Hide description on very small screens to save space */
  .product-desc {
    display: none;
  }

  .product-body {
    padding: 0.6rem;
  }

  .product-img {
    height: 120px;
  }

  .product-name {
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
  }

  .product-price {
    font-size: 1rem;
  }

  .product-unit {
    font-size: 0.65rem;
  }

  .add-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
  }

  .qty-btn {
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
  }

  .qty-num {
    font-size: 0.8rem;
    min-width: 16px;
  }

  .product-card {
    border-radius: var(--radius);
  }
}

.product-card{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow);overflow:hidden;transition:all .25s;border:1.5px solid transparent}
.product-card:hover{box-shadow:var(--shadow-lg);border-color:var(--green-light);transform:translateY(-2px)}
.product-img{width:100%;height:170px;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:4rem;overflow:hidden}
.product-img img{width:100%;height:100%;object-fit:cover;display:block}
.product-img-emoji{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:4rem}
.product-body{padding:1rem}
.product-category{font-size:.7rem;font-weight:600;color:var(--green-mid);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.3rem}
.product-name{font-weight:600;font-size:1rem;margin-bottom:.3rem;line-height:1.3}
.product-desc{font-size:.8rem;color:var(--gray-400);margin-bottom:.75rem;line-height:1.4}
.product-footer{display:flex;align-items:center;justify-content:space-between}
.product-price{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--green)}
.product-unit{font-size:.75rem;color:var(--gray-400)}
.add-btn{background:var(--green);color:#fff;border-radius:50px;padding:.45rem 1rem;font-size:.82rem;font-weight:500;transition:all .2s}
.add-btn:hover{background:var(--green-mid);transform:scale(1.04)}
.qty-control{display:flex;align-items:center;gap:.4rem}
.qty-btn{width:28px;height:28px;border-radius:50%;background:var(--green-light);color:var(--green);font-size:1.1rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s}
.qty-btn:hover{background:var(--green);color:#fff}
.qty-num{font-weight:600;font-size:.9rem;min-width:20px;text-align:center}
.out-of-stock{opacity:.5;pointer-events:none}
.stock-badge{font-size:.7rem;background:var(--red-light);color:var(--red);padding:.2rem .5rem;border-radius:4px;font-weight:600}
.empty-state{text-align:center;padding:4rem 1rem;color:var(--gray-400);grid-column:1/-1}
.empty-state-icon{font-size:3rem;margin-bottom:1rem}

/* CART SIDEBAR */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:none}
.cart-overlay.open{display:block}
.cart-sidebar{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--white);z-index:201;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-4px 0 30px rgba(0,0,0,.15)}
.cart-sidebar.open{transform:translateX(0)}

/* Cart responsive */
/* Cart responsive - FIXED */
@media (max-width: 480px) {
  .cart-sidebar {
    width: 100vw;
    max-width: 100%;
  }
  .cart-header {
    padding: 0.75rem 1rem;
    flex-shrink: 0;
  }
  .cart-header h2 {
    font-size: 1.1rem;
  }
  .cart-body {
    padding: 0.75rem 1rem;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cart-item {
    padding: 0.6rem 0;
    gap: 0.6rem;
  }
  .cart-item-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    flex-shrink: 0;
  }
  .cart-item-info {
    min-width: 0;
  }
  .cart-item-name {
    font-size: 0.82rem;
    word-break: break-word;
  }
  .cart-item-price {
    font-size: 0.75rem;
  }
  .cart-item-qty {
    flex-shrink: 0;
  }
  .qty-btn {
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
  }
  .qty-num {
    font-size: 0.8rem;
    min-width: 16px;
  }
  .cart-footer {
    padding: 1rem 1rem;
    flex-shrink: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
  }
  .cart-total-row {
    font-size: 0.85rem;
  }
  .cart-total-row.big {
    font-size: 1rem;
  }
  .checkout-btn {
    padding: 0.75rem;
    font-size: 0.9rem;
    width: 100%;
    min-height: 44px; /* Better touch target */
    border-radius: var(--radius);
    background: var(--green);
    color: #fff;
    font-weight: 600;
    transition: all .2s;
    cursor: pointer;
    border: none;
    -webkit-tap-highlight-color: transparent;
  }
  .checkout-btn:active {
    transform: scale(0.98);
    background: var(--green-mid);
  }
  .cart-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: .95rem;
  }
  .clear-cart-btn {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }
  .close-btn {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

/* For medium screens */
@media (min-width: 481px) and (max-width: 768px) {
  .cart-sidebar {
    width: 380px;
  }
  .checkout-btn {
    padding: 0.85rem;
    font-size: 0.95rem;
  }
}

.cart-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between}
.cart-header h2{font-family:var(--font-display);font-size:1.3rem}
.close-btn{width:36px;height:36px;border-radius:50%;background:var(--gray-100);font-size:1.2rem;display:flex;align-items:center;justify-content:center;color:var(--gray-600);transition:all .2s}
.close-btn:hover{background:var(--gray-200)}
.cart-body{flex:1;overflow-y:auto;padding:1rem 1.5rem}
.cart-empty{text-align:center;padding:3rem 1rem;color:var(--gray-400)}
.cart-empty-icon{font-size:3.5rem;margin-bottom:1rem}
.cart-item{display:flex;align-items:center;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--gray-100)}
.cart-item-icon{width:48px;height:48px;border-radius:var(--radius);background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.cart-item-info{flex:1}
.cart-item-name{font-weight:500;font-size:.9rem;margin-bottom:.2rem}
.cart-item-price{font-size:.82rem;color:var(--gray-400)}
.cart-item-qty{display:flex;align-items:center;gap:.4rem}
.cart-footer{padding:1.25rem 1.5rem;border-top:1px solid var(--gray-200)}
.cart-total-row{display:flex;justify-content:space-between;margin-bottom:1rem;font-size:.95rem}
.cart-total-row.big{font-weight:700;font-size:1.2rem;font-family:var(--font-display)}
.checkout-btn{width:100%;background:var(--green);color:#fff;padding:1rem;border-radius:var(--radius-lg);font-size:1rem;font-weight:600;transition:all .2s}
.checkout-btn:hover{background:var(--green-mid)}

/* CHECKOUT */
.checkout-wrap{max-width:700px;margin:0 auto;padding:2.5rem 1.5rem}
.back-btn{display:inline-flex;align-items:center;gap:.5rem;color:var(--green);font-weight:500;font-size:.9rem;background:none;border:none;margin-bottom:1.5rem;padding:0;transition:opacity .2s}
.back-btn:hover{opacity:.7}
.checkout-card{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:2rem}
.checkout-card h2{font-family:var(--font-display);font-size:1.6rem;margin-bottom:1.5rem;color:var(--green)}

/* Checkout responsive */
@media (max-width: 600px) {
  .checkout-wrap {
    padding: 1.5rem 0.75rem;
  }
  .checkout-card {
    padding: 1.25rem;
    border-radius: var(--radius);
  }
  .checkout-card h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form-group {
    margin-bottom: 0.8rem;
  }
  .form-group input,
  .form-group textarea {
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
  }
  .order-summary {
    padding: 0.75rem 1rem;
  }
  .summary-item {
    font-size: 0.82rem;
  }
  .place-order-btn {
    padding: 0.8rem;
    font-size: 0.95rem;
  }
}

.form-group{margin-bottom:1.2rem}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--gray-600);margin-bottom:.4rem}
.form-group input,.form-group textarea{width:100%;padding:.75rem 1rem;border:1.5px solid var(--gray-200);border-radius:var(--radius);font-size:.95rem;transition:border-color .2s;outline:none;background:var(--white)}
.form-group input:focus,.form-group textarea:focus{border-color:var(--green)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.order-summary{background:var(--gray-50);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1.5rem}
.order-summary h3{font-size:.9rem;font-weight:600;color:var(--gray-600);margin-bottom:.8rem;text-transform:uppercase;letter-spacing:.5px}
.summary-item{display:flex;justify-content:space-between;font-size:.88rem;padding:.3rem 0;color:var(--gray-600)}
.summary-total{display:flex;justify-content:space-between;font-weight:700;padding-top:.75rem;margin-top:.75rem;border-top:1.5px solid var(--gray-200);font-size:1rem}
.place-order-btn{width:100%;background:var(--green);color:#fff;padding:1.1rem;border-radius:var(--radius-lg);font-size:1.05rem;font-weight:600;transition:all .2s}
.place-order-btn:hover{background:var(--green-mid)}

/* SUCCESS */
.success-wrap{max-width:500px;margin:5rem auto;padding:2rem;text-align:center}

/* Success responsive */
@media (max-width: 480px) {
  .success-wrap {
    margin: 3rem auto;
    padding: 1.5rem 1rem;
  }
  .success-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }
  .success-wrap h2 {
    font-size: 1.5rem;
  }
  .success-wrap p {
    font-size: 0.9rem;
  }
  .success-order-id {
    font-size: 0.95rem;
    padding: 0.4rem 1.2rem;
  }
  .continue-btn {
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
  }
}

.success-icon{width:80px;height:80px;background:var(--green-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin:0 auto 1.5rem}
.success-wrap h2{font-family:var(--font-display);font-size:2rem;color:var(--green);margin-bottom:.75rem}
.success-wrap p{color:var(--gray-600);line-height:1.6;margin-bottom:.5rem}
.success-order-id{background:var(--green-light);color:var(--green);font-weight:700;font-size:1.1rem;padding:.6rem 1.5rem;border-radius:50px;display:inline-block;margin:1rem 0}
.continue-btn{background:var(--green);color:#fff;padding:.85rem 2rem;border-radius:50px;font-size:.95rem;font-weight:600;margin-top:1.5rem;transition:all .2s}
.continue-btn:hover{background:var(--green-mid)}

/* TOAST */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--gray-800);color:#fff;padding:.8rem 1.5rem;border-radius:50px;font-size:.88rem;font-weight:500;opacity:0;transition:all .3s;z-index:500;white-space:nowrap;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Toast responsive */
@media (max-width: 480px) {
  .toast {
    font-size: 0.8rem;
    padding: 0.6rem 1.2rem;
    bottom: 1.5rem;
    white-space: normal;
    max-width: 90%;
  }
}

/* OTP page specific */
#otpPage .checkout-card h2 {
  font-size: clamp(1.3rem, 4vw, 1.6rem);
}

#otp-input {
  font-size: clamp(1.5rem, 5vw, 2rem) !important;
  letter-spacing: clamp(0.3rem, 2vw, 0.5rem) !important;
  padding: 0.6rem 0.5rem !important;
}

.clear-cart-btn{
  background:none;
  border:1px solid var(--red, #e53e3e);
  color:var(--red, #e53e3e);
  font-size:.8rem;
  padding:.3rem .6rem;
  border-radius:6px;
  cursor:pointer;
}
.clear-cart-btn:hover{
  background:var(--red, #e53e3e);
  color:#fff;
}

/* Loading state */
.loading-spinner {
  text-align: center;
  padding: 2rem;
  color: var(--gray-400);
  grid-column: 1/-1;
}