/* ---------- GLOBAL ---------- */
body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:#faf7f3;
}

/* ---------- NAVBAR & LOGO ---------- */
.navbar{
  background:#050b1a !important;              /* deep navy */
}

.navbar .navbar-brand,
.navbar .nav-link{
  color:#f6e7c4 !important;                  /* warm light */
}

.navbar .nav-link:hover,
.navbar .navbar-brand:hover{
  color:#ffffff !important;
}

.logo-img{
  height:40px;
  width:auto;
}

.brand-title{
  font-size:1.1rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
}

.brand-tagline{
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#d5b26d;
}

/* ---------- HERO SECTION ---------- */
.hero{
  min-height:60vh;
  background:linear-gradient(135deg, #fdf1e5, #f7e3cf);
}

.hero-img{
  max-width:80%;
  border-radius:2rem;
  box-shadow:0 20px 60px rgba(0,0,0,0.15);
}

/* ---------- PRODUCT CARDS ---------- */
.product-card{
  border:none;
  border-radius:1.2rem;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.07);
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(0,0,0,0.12);
}
.product-card img{
  object-fit:cover;
  height:220px;
}

.badge-soldout{
  position:absolute;
  top:12px;
  left:12px;
  background:#222;
  color:#fff;
  padding:4px 10px;
  border-radius:999px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.price{
  font-weight:600;
}

.price-old{
  text-decoration:line-through;
  opacity:.5;
}

.btn-pill{
  border-radius:999px;
}

/* ---------- CART TABLE ---------- */
.table-cart img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:.75rem;
}

/* ---------- FOOTER ---------- */
footer{
  background:#fff;
}

/* ---------- CATEGORY SIDEBAR ---------- */
.category-card .card-title{
  font-weight:600;
  color:#2b2117;
}

.category-pill{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  font-size:0.85rem;
  text-decoration:none;
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
  color:#444;
  transition:all .15s ease-in-out;
}

.category-pill:hover{
  text-decoration:none;
  background:#f4e4cf;
  border-color:rgba(0,0,0,0.15);
  color:#2b2117;
}

.category-pill.active{
  background:#050b1a;
  color:#f6e7c4;
  border-color:#050b1a;
}