/* Reset + base */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main {
  flex: 1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, "Segoe UI", Roboto, Arial;color:#163522;background:#f1f8f3}

/* Page bg class */
.page-bg{background-attachment:fixed;background-size:cover;background-position:center}

/* Header */
.site-header{
  display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:rgba(27,94,32,0.92);color:#fff;backdrop-filter:blur(4px);
}
.brand h1{margin:0;font-size:28px;font-weight:800}
.brand .tagline{font-size:13px;margin-top:4px;opacity:0.95}

/* Nav (right side) */
.nav-wrap{display:flex;align-items:center;gap:12px}
.top-nav{
  background:#a5d6a7;border-radius:8px;padding:6px 10px;display:flex;gap:8px;box-shadow:0 6px 16px rgba(10,30,10,0.08)
}
.top-nav .nav-link{
  color:#154b2c;padding:8px 12px;border-radius:6px;text-decoration:none;font-weight:700;transition:transform .15s,background .15s,color .15s;
}
.top-nav .nav-link:hover{
  background:#ffffff;color:#1b5e20;transform:translateY(-3px) scale(1.02);text-decoration:none;
}

/* header cart */
.header-cart .cart-btn{background:transparent;border:1px solid rgba(255,255,255,0.15);color:white;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:700}
.header-cart .cart-btn span{background:#fff;color:#1b5e20;padding:2px 7px;border-radius:12px;margin-left:8px;font-weight:800}

/* Top search */
.top-search{display:flex;justify-content:center;padding:18px 0}
.search-wrap{display:flex;align-items:center;gap:8px;background:rgba(232,245,233,0.92);padding:10px 14px;border-radius:12px;width:80%;max-width:1100px;backdrop-filter:blur(4px)}
.search-wrap input{flex:1;padding:10px;border-radius:8px;border:1px solid #d6e9d8;font-size:15px}

/* Layout */
.container{max-width:1200px;margin:18px auto;display:flex;gap:22px;padding:0 16px;align-items:flex-start}
.left-col{width:240px;background:rgba(255,255,255,0.9);padding:16px;border-radius:10px;backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(10,30,10,0.06)}
.right-col{flex:1}

/* Filters */
.filter-row{display:flex;flex-direction:column;margin-bottom:12px}
.filter-row span{font-weight:600;margin-bottom:6px}
.left-col select{width:100%;padding:8px;border-radius:8px;border:1px solid #dbeedd}

/* Grid: 3 items per row */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* Card: transparent glass effect */
.card{
  background:linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.72));
  border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(10,30,10,0.08);
  display:flex;flex-direction:column;transition:transform .18s;
  backdrop-filter: blur(6px);
}
.card:hover{transform:translateY(-6px)}
.card img{width:100%;height:190px;object-fit:cover}
.card-body{padding:14px;display:flex;flex-direction:column;min-height:160px}
.card-body h4{margin:0;color:#0f5132;font-size:1.02rem}
.card-body p{margin:10px 0;color:#2b3d33;line-height:1.36}

/* Price + badge */
.price-row{display:flex;align-items:center;gap:10px;margin-top:auto}
.price-main{font-weight:800;font-size:1.15rem;color:#0b5726}
.old-price{text-decoration:line-through;color:#6d6d6d;margin-left:8px}
.badge{background:#ffeb3b;color:#2d2d2d;padding:6px 8px;border-radius:6px;font-weight:800;margin-left:auto}

/* Buttons */
.btn{background:#2e8b3a;color:white;border:none;padding:9px 12px;border-radius:8px;cursor:pointer;font-weight:700}
.btn.ghost{background:transparent;border:1px solid #2e8b3a;color:#2e8b3a}
.full{width:100%}

/* Cart drawer */
.cart-drawer{position:fixed;top:0;right:-420px;width:380px;height:100%;background:rgba(255,255,255,0.98);box-shadow:-8px 0 30px rgba(0,0,0,0.18);transition:right .26s;z-index:1200;display:flex;flex-direction:column}
.cart-drawer.open{right:0}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #eee}
.drawer-items{flex:1;overflow:auto;padding:12px}
.drawer-item{display:flex;gap:10px;padding:10px 6px;border-bottom:1px dashed #eee}
.drawer-item img{width:64px;height:48px;object-fit:cover;border-radius:6px}
.qty-controls{display:flex;gap:8px;align-items:center;margin-top:8px}
.qty-controls input{width:56px;padding:6px;border-radius:6px;border:1px solid #ddd;text-align:center}
.drawer-footer{padding:14px;border-top:1px solid #eee}

/* Footer sticky bottom */
.site-footer{background:linear-gradient(90deg,#1b5e20,#2e7d32);color:white;padding:12px 20px;text-align:center;position:sticky;bottom:0;margin-top:18px;backdrop-filter:blur(4px)}

/* Responsive */
@media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr)} .container{padding:0 10px} }
@media (max-width:640px){ .grid{grid-template-columns:1fr} .left-col{display:none} .search-wrap{width:92%} .top-nav{display:none} }