/* =========================================================
   ShopWave — Design tokens
   Palette:  #0F2C3F (deep teal-navy, primary)
             #E8A33D (warm amber, accent)
             #F6F5F1 (warm paper background)
             #163B52 (navy hover)
             #2E5266 (muted slate for secondary text)
   Type:     "Fraunces" (display/headings) + "Inter" (body/UI)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --navy: #0F2C3F;
  --navy-hover: #163B52;
  --amber: #E8A33D;
  --paper: #F6F5F1;
  --slate: #2E5266;
  --border-soft: #E4E1D8;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--paper);
  color: var(--navy);
}

h1, h2, h3, h4, h5, h6, .brand-panel h2 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
}

/* ---------------- Buttons ---------------- */
.btn-primary {
  background-color: var(--navy);
  border-color: var(--navy);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--navy-hover);
  border-color: var(--navy-hover);
}
.btn-outline-light:hover {
  color: var(--navy);
}
.btn-success {
  background-color: #2E7D5B;
  border-color: #2E7D5B;
}
.btn-success:hover {
  background-color: #245F46;
  border-color: #245F46;
}

/* ---------------- Auth page ---------------- */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--navy) 0%, #1D4A63 55%, var(--amber) 180%);
  padding: 1.5rem;
}
.auth-wrapper { width: 100%; max-width: 920px; }
.auth-card { border-radius: 18px; overflow: hidden; }
.brand-panel {
  background: radial-gradient(circle at 30% 20%, #1D4A63, var(--navy) 70%);
}
.nav-pills .nav-link {
  color: var(--slate);
  font-weight: 600;
  border-radius: 8px;
}
.nav-pills .nav-link.active {
  background-color: var(--navy);
}
.toggle-password { border-color: #ced4da; }

/* ---------------- Navbar ---------------- */
.shop-navbar {
  background-color: var(--navy);
}
.shop-navbar .navbar-brand {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
}

/* ---------------- Hero ---------------- */
.hero-banner {
  background: linear-gradient(120deg, var(--navy), #1D4A63);
}

/* ---------------- Category pills ---------------- */
.btn-category {
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--slate);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.15s ease;
}
.btn-category:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.btn-category.active {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ---------------- Product cards ---------------- */
.product-card {
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 44, 63, 0.15) !important;
}
.product-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #eee;
}
.product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stock-badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* ---------------- Cart ---------------- */
.cart-item-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
}
.qty-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 1;
}

/* ---------------- Misc ---------------- */
.offcanvas, .modal-content {
  border-radius: 0;
}
.modal-content { border-radius: 14px; }