:root {
  --eco-green-900: #0d3d1c;
  --eco-green-700: #1a6b32;
  --eco-green-600: #1f8a3d;
  --eco-green-500: #2fa84e;
  --eco-green-100: #e5f5ea;
  --eco-green-50:  #f3fbf5;

  --eco-gold-700: #a8760a;
  --eco-gold-600: #c8940f;
  --eco-gold-500: #e0ac1c;
  --eco-gold-300: #f0cc63;
  --eco-gold-100: #fdf3d9;

  --eco-white: #ffffff;
  --eco-ink-900: #16241a;
  --eco-ink-600: #4b5c50;
  --eco-ink-400: #8a9a8f;
  --eco-border: #e2ece4;
  --eco-danger: #c0392b;
  --eco-danger-bg: #fdecea;
  --eco-success-bg: #e8f7ec;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 4px 24px rgba(13, 61, 28, 0.08);
  --shadow-pop: 0 10px 40px rgba(13, 61, 28, 0.16);

  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--eco-green-50); color: var(--eco-ink-900); font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--eco-green-900); margin: 0 0 .5rem; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* Top nav */
.shop-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.5rem; background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--eco-border);
}
.shop-nav-inner { max-width: 1180px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.shop-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--eco-green-900); text-decoration: none; }
.shop-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--eco-gold-500); }
.shop-nav-links { display: flex; align-items: center; gap: 1.5rem; }
.shop-nav-links a { text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--eco-ink-600); }
.shop-nav-links a:hover { color: var(--eco-green-700); }
.cart-pill { position: relative; display: inline-flex; align-items: center; gap: .4rem; background: var(--eco-green-600); color: #fff; padding: .5rem 1rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.cart-badge { background: var(--eco-gold-500); color: var(--eco-green-900); border-radius: 999px; font-size: .72rem; padding: .05rem .45rem; }

/* Referral banner */
.ref-banner { background: var(--eco-green-100); color: var(--eco-green-700); padding: .6rem 1.5rem; text-align: center; font-size: .88rem; font-weight: 600; }
.ref-banner img { width: 22px; height: 22px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: .4rem; object-fit: cover; }

/* Hero */
.shop-hero { padding: 3rem 0 2rem; text-align: center; }
.shop-hero p { color: var(--eco-ink-600); max-width: 560px; margin: 0 auto; }

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.5rem; padding: 1rem 0 3rem; }
.product-card {
  background: var(--eco-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.product-thumb { width: 100%; aspect-ratio: 1/1; background: var(--eco-green-50); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.product-category { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--eco-gold-600); font-weight: 700; }
.product-name { font-weight: 700; font-size: 1rem; color: var(--eco-ink-900); }
.product-price { margin-top: auto; font-family: var(--font-display); font-weight: 700; color: var(--eco-green-700); font-size: 1.05rem; }
.stock-low { color: var(--eco-danger); font-size: .78rem; font-weight: 600; }

/* Category filter chips */
.category-chips { display: flex; gap: .6rem; flex-wrap: wrap; padding: 0 0 1.5rem; }
.category-chip { padding: .4rem 1rem; border-radius: 999px; background: var(--eco-white); border: 1px solid var(--eco-border); font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--eco-ink-600); }
.category-chip.active, .category-chip:hover { background: var(--eco-green-600); color: #fff; border-color: var(--eco-green-600); }

/* Cards / forms */
.card { background: var(--eco-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 1.5rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: .65rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--eco-border);
  font-family: var(--font-body); font-size: .92rem; background: #fff;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.btn { display: inline-block; padding: .75rem 1.5rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; font-size: .92rem; font-family: var(--font-body); }
.btn-primary { background: var(--eco-green-600); color: #fff; }
.btn-primary:hover { background: var(--eco-green-700); }
.btn-outline { background: transparent; border: 1.5px solid var(--eco-green-600); color: var(--eco-green-700); }
.btn-block { width: 100%; text-align: center; }

.alert { padding: .85rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: .9rem; }
.alert-success { background: var(--eco-success-bg); color: var(--eco-green-700); }
.alert-error { background: var(--eco-danger-bg); color: var(--eco-danger); }
.alert-info { background: var(--eco-green-50); color: var(--eco-ink-600); }

/* Cart table */
.cart-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.cart-table th, .cart-table td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--eco-border); font-size: .9rem; }
.cart-table th { background: var(--eco-green-50); color: var(--eco-green-700); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.qty-input { width: 60px; padding: .4rem; border-radius: 6px; border: 1px solid var(--eco-border); text-align: center; }
.cart-summary { max-width: 340px; margin-left: auto; margin-top: 1.5rem; }
.cart-summary-row { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .95rem; }
.cart-summary-row.total { font-weight: 700; font-size: 1.15rem; border-top: 1px solid var(--eco-border); margin-top: .5rem; padding-top: .75rem; color: var(--eco-green-700); }
.checkout-grid { display:grid; grid-template-columns:1.4fr 1fr; column-gap:2rem; row-gap:2rem; align-items:start; }
.checkout-page select:disabled { background:#f3f6f4; color:#829087; cursor:not-allowed; }
@media(max-width:800px) {
  .checkout-grid { grid-template-columns:1fr; row-gap:2rem; }
  .checkout-page .form-row { grid-template-columns:1fr; }
}

footer { text-align: center; padding: 2.5rem 1.5rem; color: var(--eco-ink-400); font-size: .82rem; }