:root {
  --jeq-primary: #ff6a00;
  --jeq-primary-dark: #e05e00;
  --jeq-dark: #1a1d29;
  --jeq-gray-bg: #f5f6f8;
  --jeq-border: #e7e8ec;
  --jeq-radius: 14px;
}

body {
  background: var(--jeq-gray-bg);
  font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
  color: #23252b;
  padding-bottom: 64px;
}

a { text-decoration: none; }

/* ---------- Navbar ---------- */
.jeq-navbar {
  background: #fff;
  border-bottom: 1px solid var(--jeq-border);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.jeq-brand {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--jeq-dark) !important;
  letter-spacing: -0.5px;
}
.jeq-brand span { color: var(--jeq-primary); }
.jeq-navbar .nav-link { color: #45485a; font-weight: 500; }
.jeq-navbar .nav-link:hover, .jeq-navbar .nav-link.active { color: var(--jeq-primary); }

.btn-jeq {
  background: var(--jeq-primary);
  border-color: var(--jeq-primary);
  color: #fff;
  font-weight: 600;
}
.btn-jeq:hover { background: var(--jeq-primary-dark); border-color: var(--jeq-primary-dark); color: #fff; }
.btn-outline-jeq {
  border: 1.5px solid var(--jeq-primary);
  color: var(--jeq-primary);
  font-weight: 600;
  background: #fff;
}
.btn-outline-jeq:hover { background: var(--jeq-primary); color: #fff; }

/* ---------- Hero ---------- */
.jeq-hero {
  background: linear-gradient(120deg, #1a1d29 0%, #33263c 60%, #ff6a00 130%);
  color: #fff;
  border-radius: 0 0 28px 28px;
  padding: 3.2rem 1rem 3.6rem;
}
.jeq-hero h1 { font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.jeq-hero p { color: #e4e2f0; }
.jeq-search-box {
  background: #fff;
  border-radius: 50px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.jeq-search-box input { border: none; border-radius: 50px; }
.jeq-search-box input:focus { box-shadow: none; }
.jeq-search-box button { border-radius: 50px; }

/* ---------- Category chips ---------- */
.jeq-cat-chip {
  background: #fff;
  border: 1px solid var(--jeq-border);
  border-radius: var(--jeq-radius);
  padding: 1rem .5rem;
  text-align: center;
  color: #33354a;
  font-weight: 600;
  font-size: .85rem;
  display: block;
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}
.jeq-cat-chip:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); color: var(--jeq-primary); }
.jeq-cat-chip .icon { font-size: 1.6rem; display: block; margin-bottom: .4rem; }

/* ---------- Product cards ---------- */
.jeq-product-card {
  background: #fff;
  border-radius: var(--jeq-radius);
  overflow: hidden;
  border: 1px solid var(--jeq-border);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}
.jeq-product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.09); }
.jeq-product-card .thumb { aspect-ratio: 1/1; object-fit: cover; width: 100%; background: #eee; }
.jeq-product-card .body { padding: .85rem; }
.jeq-product-card .name { font-weight: 600; font-size: .92rem; color: #23252b; line-height: 1.3; height: 2.4em; overflow: hidden; }
.jeq-product-card .price { color: var(--jeq-primary); font-weight: 800; font-size: 1.05rem; }
.jeq-product-card .loc { color: #7a7d8c; font-size: .78rem; }
.jeq-badge-expiring { background: #fff3cd; color: #7a5b00; font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 20px; }
.jeq-badge-expired { background: #f8d7da; color: #7a1420; font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 20px; }
.jeq-badge-active { background: #d4f4e2; color: #0d6b3b; font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 20px; }

/* ---------- Cards / dashboard ---------- */
.jeq-card {
  background: #fff;
  border-radius: var(--jeq-radius);
  border: 1px solid var(--jeq-border);
  padding: 1.25rem;
}
.jeq-stat {
  background: #fff;
  border-radius: var(--jeq-radius);
  border: 1px solid var(--jeq-border);
  padding: 1.1rem 1.25rem;
}
.jeq-stat .num { font-size: 1.8rem; font-weight: 800; color: var(--jeq-dark); }
.jeq-stat .label { color: #7a7d8c; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Dashboard sidebar ---------- */
.jeq-sidebar { background: #fff; border-radius: var(--jeq-radius); border: 1px solid var(--jeq-border); padding: .75rem; }
.jeq-sidebar a { display: block; padding: .6rem .9rem; border-radius: 10px; color: #45485a; font-weight: 600; font-size: .92rem; margin-bottom: 2px; }
.jeq-sidebar a:hover { background: var(--jeq-gray-bg); }
.jeq-sidebar a.active { background: var(--jeq-primary); color: #fff; }

/* ---------- Mobile bottom nav ---------- */
.jeq-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  background: #fff; border-top: 1px solid var(--jeq-border);
  display: flex; justify-content: space-around; padding: .4rem 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,.05);
}
.jeq-bottom-nav a { color: #7a7d8c; font-size: .68rem; text-align: center; font-weight: 600; }
.jeq-bottom-nav a.active, .jeq-bottom-nav a:hover { color: var(--jeq-primary); }
.jeq-bottom-nav i { display: block; font-size: 1.2rem; margin-bottom: 2px; }
@media (min-width: 992px) { .jeq-bottom-nav { display: none; } }

/* ---------- Misc ---------- */
.jeq-gallery-main { border-radius: var(--jeq-radius); overflow: hidden; background: #eee; aspect-ratio: 4/3; }
.jeq-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.jeq-gallery-thumb { border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; aspect-ratio: 1/1; }
.jeq-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jeq-gallery-thumb.active { border-color: var(--jeq-primary); }
.jeq-seller-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #eee; }
.section-title { font-weight: 800; letter-spacing: -0.3px; }
footer.jeq-footer { background: var(--jeq-dark); color: #c9cad6; margin-top: 3rem; padding: 2.5rem 0 1.2rem; }
footer.jeq-footer a { color: #c9cad6; }
footer.jeq-footer a:hover { color: var(--jeq-primary); }