:root{
  --clr-light:#ffffff;
  --clr-primary:#054568;
  --clr-secondary:#2baa9d;
  --clr-accent:#a34686;
  --clr-info:#8ad7f7;
}

/* Background helpers */
.bg-light{background:var(--clr-light)!important;}
.bg-primary{background:var(--clr-primary)!important;}
.bg-secondary{background:var(--clr-secondary)!important;}
.bg-accent{background:var(--clr-accent)!important;}
.bg-info{background:var(--clr-info)!important;}

/* Text helpers */
.text-light{color:var(--clr-light)!important;}
.text-primary{color:var(--clr-primary)!important;}
.text-secondary{color:var(--clr-secondary)!important;}
.text-accent{color:var(--clr-accent)!important;}
.text-info{color:var(--clr-info)!important;}

/* --- Custom components --- */
/* Ensure cart count badge number is perfectly centered */
.cart-badge {
  position: absolute;
  background: #dc3545; /* Bootstrap danger */
  color: #fff;
  font-size: 0.75rem; /* text-xs */
  font-weight: 700;
  border-radius: 9999px; /* fully rounded */
  width: 1.5rem; /* h-6 w-6 */
  height: 1.5rem;
  padding: 0; /* remove default .badge padding for centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1;
}

/* Legacy IDs keep badge styles via shared class in markup */