:root {
  --brand-primary: #b91c1c;
  --brand-primary-dark: #991b1b;
  --brand-primary-light: #f87171;
  --brand-surface: #fdf2f2;
  --brand-contrast: #111827;
  --card-shadow: 0 10px 30px rgba(185, 28, 28, 0.18);
}

body {
  background: var(--brand-surface);
}

.navbar {
  background: var(--brand-primary);
  box-shadow: 0 0.6rem 1.4rem rgba(153, 27, 27, 0.28);
}

.navbar .navbar-toggler {
  border-color: rgba(255,255,255,0.7);
}

.navbar .navbar-toggler-icon {
  filter: invert(1);
}

.navbar .nav-link,
.navbar-brand {
  color: rgba(255,255,255,0.95) !important;
  font-weight: 600;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  padding-inline: 1rem;
}

.btn-gradient {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: #fff;
  border: none;
  font-weight: 600;
}

.btn-gradient.btn-sm {
  font-weight: 500;
}

.btn-gradient:hover {
  color: #fff;
  filter: brightness(1.05);
}

.btn-outline-light.border-secondary.text-secondary {
  border-color: rgba(185,28,28,0.25) !important;
  background: rgba(255,255,255,0.85);
  color: var(--brand-primary-dark) !important;
}

.btn-outline-light.border-secondary.text-secondary:hover {
  background: rgba(255,255,255,0.95);
  color: var(--brand-primary) !important;
}

.bg-gradient,
.gradient-hero {
  background: linear-gradient(150deg, var(--brand-primary) 0%, var(--brand-primary-dark) 40%, #7f1d1d 100%);
  color: #ffe4e6;
  box-shadow: 0 1.2rem 2.5rem rgba(153, 27, 27, 0.25);
}

.category-carousel {
  scrollbar-width: thin;
}

.category-carousel::-webkit-scrollbar {
  height: 6px;
}

.category-carousel::-webkit-scrollbar-thumb {
  background: rgba(185, 28, 28, 0.35);
  border-radius: 999px;
}

.card {
  border: none;
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  background: #fff;
}

.card-img-top {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  max-height: 220px;
  object-fit: cover;
}

.badge.bg-gradient {
  background: rgba(185, 28, 28, 0.18);
  color: var(--brand-primary-dark);
}

footer {
  color: rgba(17,24,39,0.6);
}

main.container {
  min-height: calc(100vh - 160px);
}

.pagination {
  gap: 0.25rem;
}

.pagination .page-link {
  border-radius: 0.5rem;
  color: var(--brand-primary-dark);
}

.pagination .page-item.active .page-link {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  box-shadow: 0 6px 12px rgba(185, 28, 28, 0.25);
}