:root,
[data-bs-theme=light] {
  /* ============================================================
     THEME COLOR TOKENS (BrandFi Design System) - MERGED
     ============================================================ */

  /* Core brand colors */
  --accent-gold: #ebc138;
  --gold-grad: linear-gradient(90deg,#ffd27a 0%, #ebc138 100%);

  /* Smooth Blend gradients (hero, nav, footer, etc.) */
  --sb-1: linear-gradient(135deg,#6e00ff 0%, #9b6dff 30%, #4a00c2 75%); /* hero */
  --sb-2: linear-gradient(90deg,#6e00ff 0%, #b79bff 22%, #4a00c2 58%, #d6c8ff 100%); /* nav */
  --sb-3: linear-gradient(160deg,#4a00c2 0%, #ad8cff 45%, #6e00ff 70%); /* sweep */
  --sb-4: radial-gradient(circle at 20% 20%, #a58bff 0%, #6e00ff 30%, #4a00c2 70%); /* logo */
  --sb-5: linear-gradient(135deg,#6e00ff 0%, #8b63ff 40%, #4a00c2 100%); /* footer */

  /* Glow effects */
  --glow-1: rgba(110,0,255,0.22);
  --glow-2: rgba(74,0,194,0.18);

  /* ============================================================
     BOOTSTRAP SEMANTIC COLOR TOKENS (COMPLETE OVERRIDE)
     ============================================================ */

  /* Primary colors */
  --bs-primary: #6e00ff;
  --bs-secondary: #4a00c2;

  /* Status colors */
  --bs-success: #33cc99;
  --bs-info: #4f6ad5;
  --bs-warning: var(--accent-gold);
  --bs-danger: #cd3d9c;

  /* Subtle color variants for light backgrounds (8-12% opacity tint) */
  --bs-primary-subtle: #f3edff;
  --bs-secondary-subtle: #f0ebf9;
  --bs-success-subtle: #ebf8f4;
  --bs-info-subtle: #eef5ff;
  --bs-warning-subtle: #fff8e6;
  --bs-danger-subtle: #fdeef6;

  /* Subtle text colors (darker shade for contrast on subtle backgrounds) */
  --bs-primary-subtle-text: #4d2e99;
  --bs-secondary-subtle-text: #3a2680;
  --bs-success-subtle-text: #1a8566;
  --bs-info-subtle-text: #3d4d99;
  --bs-warning-subtle-text: #2b2140;
  --bs-danger-subtle-text: #7a1d52;

  /* Base colors mapped to your theme */
  --bs-blue: #4f6ad5;
  --bs-indigo: #6e00ff;
  --bs-purple: #4a00c2;
  --bs-pink: #cd3d9c;
  --bs-red: #cd3d9c;
  --bs-orange: #ebc138;
  --bs-yellow: #ebc138;
  --bs-green: #33cc99;
  --bs-teal: #33cc99;
  --bs-cyan: #6c81ff;

  /* Grays (purple-tinted scale) */
  --bs-black: #221b2b;
  --bs-white: #fff;
  --bs-gray: #7870a3;
  --bs-gray-dark: #4a00c2;
  --bs-gray-100: #f8f6ff;
  --bs-gray-200: #f3edff;
  --bs-gray-300: #e8dfff;
  --bs-gray-400: #d4b8ff;
  --bs-gray-500: #b894ff;
  --bs-gray-600: #7870a3;
  --bs-gray-700: #6e5a8c;
  --bs-gray-800: #4a00c2;
  --bs-gray-900: #3a2680;

  --bs-light: #ffffff;
  --bs-dark: #330099;

  /* RGB values */
  --bs-primary-rgb: 110, 0, 255;
  --bs-secondary-rgb: 74, 0, 194;
  --bs-success-rgb: 51, 204, 153;
  --bs-info-rgb: 108, 129, 255;
  --bs-warning-rgb: 235, 193, 56;
  --bs-danger-rgb: 205, 61, 156;
  --bs-light-rgb: 255, 255, 255;
  --bs-dark-rgb: 51, 0, 153;

  /* Text emphasis (your subtle-text + calculated) */
  --bs-primary-text-emphasis: #4d2e99;
  --bs-secondary-text-emphasis: #3a2680;
  --bs-success-text-emphasis: #1a8566;
  --bs-info-text-emphasis: #3d4d99;
  --bs-warning-text-emphasis: #8b6a1e;
  --bs-danger-text-emphasis: #7a1d52;

  /* Subtle backgrounds (RGB format for Bootstrap) */
  --bs-primary-bg-subtle: 243, 237, 255;
  --bs-secondary-bg-subtle: 240, 235, 249;
  --bs-success-bg-subtle: 235, 248, 244;
  --bs-info-bg-subtle: 238, 245, 255;
  --bs-warning-bg-subtle: 255, 248, 230;
  --bs-danger-bg-subtle: 253, 238, 246;

  /* Subtle borders */
  --bs-primary-border-subtle: 219, 194, 255;
  --bs-secondary-border-subtle: 216, 210, 248;
  --bs-success-border-subtle: 219, 244, 234;
  --bs-info-border-subtle: 230, 240, 255;
  --bs-warning-border-subtle: 255, 246, 230;
  --bs-danger-border-subtle: 252, 235, 245;

  /* Body / surfaces (your values preserved) */
  --bs-body-bg: #ffffff;
  --bs-body-color: #221b2b;
  --bs-body-color-rgb: 34, 27, 43;
  --bs-body-bg-rgb: 255, 255, 255;

  /* Emphasis & hierarchy */
  --bs-emphasis-color: #221b2b;
  --bs-emphasis-color-rgb: 34, 27, 43;
  --bs-secondary-color: rgba(120, 112, 163, 0.75);
  --bs-secondary-color-rgb: 120, 112, 163;
  --bs-secondary-bg: #f6f3ff;
  --bs-secondary-bg-rgb: 246, 243, 255;
  --bs-tertiary-color: rgba(120, 112, 163, 0.5);
  --bs-tertiary-color-rgb: 120, 112, 163;
  --bs-tertiary-bg: #f8f6ff;
  --bs-tertiary-bg-rgb: 248, 246, 255;
  --bs-heading-color: #4d2e99;
  --bs-muted: #7870a3;

  /* Links */
  --bs-link-color: #6e00ff;
  --bs-link-color-rgb: 110, 0, 255;
  --bs-link-decoration: rgba(110, 0, 255, 0.75);
  --bs-link-hover-color: #4a00c2;
  --bs-link-hover-color-rgb: 74, 0, 194;

  /* Code & highlights */
  --bs-code-color: #cd3d9c;
  --bs-highlight-color: #221b2b;
  --bs-highlight-bg: rgba(243, 237, 255, 0.5);

  /* Typography */
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;

  /* Gradients & effects (your values + Bootstrap) */
  --bs-gradient: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.02));
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 34, 27, 43;

  /* Borders & shadows */
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: rgba(74,0,194,0.10);
  --bs-border-color-translucent: rgba(74,0,194,0.10);
  --bs-border-radius: 0.575rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;

  --bs-box-shadow: 0 0.5rem 1rem var(--glow-1);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem #ede6f8;
  --bs-box-shadow-lg: 0 1rem 3rem var(--glow-1);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(110, 0, 255, 0.1);
  --bs-bg-subtle: #f6f3ff;

  /* Focus & form states */
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(var(--bs-focus-shadow-rgb), 0.25);
  --bs-focus-shadow-rgb: 110,0,255;
  --bs-btn-focus-shadow-rgb: 110,0,255;
  --bs-form-valid-color: #33cc99;
  --bs-form-valid-border-color: #33cc99;
  --bs-form-invalid-color: #cd3d9c;
  --bs-form-invalid-border-color: #cd3d9c;
}


body {
	background:#f3f3ff;
}

.logo-mark{
  width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background: transparent;padding:4px;
  box-shadow: 0 12px 34px var(--glow-1), 0 6px 18px rgba(0,0,0,0.18);
}
.logo-img{width:100%;height:100%;object-fit:contain;border-radius:8px;display:block}
.site-title{font-size:1.1rem}

.nav-fullwidth{background: linear-gradient(135deg,#4a00c2 0%, #6e00ff 60%);}
.nav-fullwidth .nav-link{color: rgba(255,255,255,0.9);}
.nav-fullwidth .nav-link:hover, .nav-fullwidth .nav-link.active{color: var(--accent-gold);}
.nav-cats .special{background: var(--gold-grad); color:#2b2140; border-radius:6px; padding:6px 12px}
.nav-cats .special:hover{background: var(--gold-grad); color:#ffffff; border-radius:6px; padding:6px 12px}
.hero{background: var(--sb-1);}
.hero .hero-card{max-width:360px}
.bg-gold{
  background: var(--gold-grad);
}
.btn.btn-gold{
  background: var(--gold-grad);
  color:#2b2140;
  border: none;
  font-weight:600;
  box-shadow: 0 4px 10px rgba(212,175,55,0.12);
  transition: transform .12s ease, filter .12s ease;
}
.btn.btn-gold:hover{
  transform:translateY(-2px);
  filter:brightness(.98);
}
.btn.btn-gold:focus{
  box-shadow: 0 0 0 .25rem rgba(235,193,56,0.30);
}

/* Override Bootstrap primary/outline defaults to match theme */
.btn-primary, .btn-dark{
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(110,0,255,0.08);
}
.btn-primary:hover, .btn.btn-dark:hover{
  filter:brightness(.95);
    background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(110,0,255,0.08);
}
.btn-primary:focus, .btn-dark:focus{
  box-shadow: 0 0 0 .25rem rgba(var(--bs-focus-shadow-rgb), 0.14);
}

.btn-secondary{
  background: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(110,0,255,0.08);
}
.btn-secondary:hover{
  filter:brightness(.95);
  background: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(110,0,255,0.08);
}
.btn-secondary:focus{
  box-shadow: 0 0 0 .25rem rgba(var(--bs-focus-shadow-rgb), 0.14);
}
.btn-outline-primary{
  color: var(--bs-primary);
  border-color: rgba(110,0,255,0.30);
  background-color: transparent;
}
.btn-outline-primary:hover{
  background-color: rgba(110,0,255,0.06);
}

/* Ensure other Bootstrap variants follow design tokens and have subtle shadows */
.btn-success{
  background: var(--bs-success);
  border-color: var(--bs-success);
  color: #fff;
  box-shadow: 0 3px 8px rgba(51,204,153,0.08);
}
.btn-success:hover{
  filter:brightness(.96);
}
.btn-outline-success{
  color: var(--bs-success);
  border-color: rgba(51,204,153,0.24);
}
.btn-outline-success:hover{
  background-color: rgba(51,204,153,0.06);
}

.btn-info{
  background: var(--bs-info);
  border-color: var(--bs-info);
  color:#fff;
  box-shadow: 0 3px 8px rgba(108,129,255,0.08);
}
.btn-info:hover{
  filter:brightness(.96);
}
.btn-outline-info{
  color:var(--bs-info);
  border-color:rgba(108,129,255,0.24);
}
.btn-outline-info:hover{
  background-color:rgba(108,129,255,0.06);
}

.btn-warning{
  background:var(--bs-warning);
  border-color:var(--bs-warning);
  color:#2b2140;
  box-shadow:0 3px 8px rgba(235,193,56,0.08);
}
.btn-warning:hover{
  filter:brightness(.98);
}
.btn-outline-warning{
  color:var(--bs-warning);
  border-color:rgba(235,193,56,0.24);
}
.btn-outline-warning:hover{
  background-color:rgba(235,193,56,0.06);
}

.btn-danger{
  background:var(--bs-danger);
  border-color:var(--bs-danger);
  color:#fff;
  box-shadow:0 3px 8px rgba(205,61,156,0.08);
}
.btn-danger:hover{
  filter:brightness(.96);
}
.btn-outline-danger{
  color:var(--bs-danger);
  border-color:rgba(205,61,156,0.24);
}
.btn-outline-danger:hover{
  background-color:rgba(205,61,156,0.06);
}

/* soften global button/card shadows for subtle look */
.btn{box-shadow:0 3px 8px rgba(0,0,0,0.06)}
.card{box-shadow:0 6px 18px rgba(0,0,0,0.06) !important}

/* Hero-specific outline button: keep light/transparent look over purple hero */
.hero .btn-outline-light{
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.28);
  background-color: transparent;
}
.hero .btn-outline-light:hover{
  background-color: rgba(255,255,255,0.06);
  color: #fff;
}

/* text and link helpers */
.text-primary{
  color:var(--bs-primary);
}
a.text-primary{
  color:var(--bs-primary);
}

.search-form .form-control{min-width:380px}

.offer-card{border: none; border-radius:10px}
.offer-card .card-body{padding:1.25rem}

.footer{background: var(--sb-5);}
.footer a, .link-gold{color:var(--accent-gold);font-weight:600; text-shadow:0 1px 6px var(--glow-2)}

/* responsive tweaks */
@media (max-width: 991px){
  .search-form .form-control{min-width:200px}
}
@media (max-width: 767px){
  .search-form{display:none!important}
  .brand .site-title{font-size:1rem}
  .logo-mark{width:48px;height:48px}
  .logo-img{border-radius:6px}
}

/* header icons: cart + signin */
.header-controls .cart-link{color:var(--bs-primary);font-size:1.05rem;display:inline-flex;align-items:center}
.header-controls .cart-link .bi{font-size:1.35rem}
.cart-badge{
  position:absolute;top:2px;right:6px;min-width:20px;height:20px;border-radius:12px;background:var(--accent-gold);color:#2b2140;font-weight:700;font-size:0.75rem;display:inline-flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,0.9)
}
.signin-link .bi{font-size:1.05rem}
.signin-link{color:var(--bs-primary)}

/* dropdown tweaks */
.dropdown-menu{
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,247,255,0.95));
}
.dropdown-item:hover{
  background:linear-gradient(90deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02));
  color:#2c0052;
}


/* Full-width footer section */
.footer-background {
    background-color: #402370; /* Dark background for footer */

    margin-top: 4rem; /* Space above the footer */
    padding: 40px 0; /* Padding inside the footer */
}

.footer-menu {

    font-size: 14px;
}

.footer-menu h6 {
    font-weight: bold;
}
.footer-copyright {
    height: 50px;
    background-color: #331c59;
    color: #fff;
    font-size: 12px;
}

.category-box{
	--bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
	border-radius:5px;
}


  /* Optional pagination-specific tokens */
  --app-pagination-radius: 12px;
  --app-pagination-gap: 0.5rem;
  --app-pagination-border: color-mix(in srgb, var(--bs-primary) 18%, transparent);
}

/* ========== 1) Reset Bootstrap pagination to a clean baseline ========== */
.pagination {
  /* Keep Bootstrap structure, remove the “connected pills” look */
  gap: var(--app-pagination-gap);
}

.pagination .page-item {
  /* Reset any inherited rounding/spacing quirks */
  margin: 0;
}

.pagination .page-link {
  /* Neutral baseline (so your theme styles apply consistently) */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--app-pagination-radius);
  box-shadow: none;
  text-decoration: none;

  /* Make sizing predictable */
  min-width: 2.5rem;
  text-align: center;

  /* Transition for hover/focus polish */
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
    box-shadow 150ms ease, transform 80ms ease;
}

.pagination .page-link:focus {
  outline: 0;
}

/* Disabled and active states are Bootstrap conventions [web:2] */
.pagination .page-item.disabled .page-link {
  pointer-events: none;
  opacity: 0.55;
}

/* ========== 2) Restyle using your theme colors ========== */

/* Default (idle) */
.pagination .page-link {
  color: var(--bs-primary);
  background-color: #fff;
  border-color: color-mix(in srgb, var(--bs-primary) 15%, transparent);
}

/* Hover */
.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  color: var(--bs-secondary);
  background-color: var(--bs-primary-subtle);
  border-color: color-mix(in srgb, var(--bs-primary) 35%, transparent);
  transform: translateY(-1px);
}

/* Focus (keyboard) */
.pagination .page-item:not(.active):not(.disabled) .page-link:focus-visible {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
  border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
}

/* Active page */
.pagination .page-item.active .page-link {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--bs-primary) 25%, transparent);
}

/* Active + focus */
.pagination .page-item.active .page-link:focus-visible {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-secondary) 30%, transparent),
    0 10px 25px color-mix(in srgb, var(--bs-primary) 25%, transparent);
}

/* Disabled */
.pagination .page-item.disabled .page-link {
  color: color-mix(in srgb, var(--bs-primary) 35%, #6c757d);
  background-color: color-mix(in srgb, var(--bs-primary-subtle) 55%, #fff);
  border-color: color-mix(in srgb, var(--bs-primary) 10%, transparent);
}

/* Optional: “Previous/Next” emphasis (if you add .pagination-prev/.pagination-next) */
.pagination .page-item.pagination-prev .page-link,
.pagination .page-item.pagination-next .page-link {
  font-weight: 600;
}

.pagination.pagination--info {
  --bs-primary: var(--bs-info);
  --bs-primary-subtle: var(--bs-info-subtle);
}
.pagination.pagination--danger {
  --bs-primary: var(--bs-danger);
  --bs-primary-subtle: var(--bs-danger-subtle);
}

h5.card-title a:link{
	text-decoration:none;
}

/* Fixed height + width for ALL product card images */
.card-img-top,
.card img,
.product-card img {
  width: 100% !important;
  height: 300px !important; /* Fixed height - adjust as needed */
  object-fit: cover !important; /* Crops to fill, maintains aspect ratio */
  object-position: center !important; /* Centers the crop */
}

/* Ensure card image containers don't interfere */
.card-img-top {
  border-radius: 12px 12px 0 0 !important; /* Top corners only */
}

/* Mobile-first button fixes */
@media (max-width: 768px) {
  .btn {
    /* Minimum touch target: 44px height */
    min-height: 48px !important;
    padding: 12px 24px !important; /* More horizontal padding */
    
    /* Better text sizing */
    font-size: 16px !important; /* Prevents zoom on iOS */
    line-height: 1.4 !important;
    
    /* Stack buttons vertically with spacing */
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  
  /* Hero buttons specifically */
  .hero-section .btn {
    width: auto !important; /* Keep inline on hero */
    display: inline-block !important;
    min-width: 140px; /* Prevent shrinking */
    margin-right: 12px !important;
    margin-bottom: 12px !important;
  }
  
  /* Gold button specific */
  .btn-gold {
    background: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
    color: #000 !important; /* Black text on gold */
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  .btn {
    padding: 14px 20px !important;
    font-size: 17px !important; /* Apple Human Interface Guidelines */
  }
}
/* Fix sign-in button: smaller size + proper spacing from logo */
@media (max-width: 768px) {
  /* Guest sign-in button: smaller, not full-width */
  .signin-link.btn {
    min-height: 40px !important; /* Smaller than main CTAs */
    padding: 8px 16px !important; /* Compact */
    font-size: 14px !important;  /* Smaller text */
    width: auto !important;      /* Inline, not block */
    display: inline-block !important;
    margin-left: 12px !important; /* Space from logo/cart */
    min-width: 100px;            /* Prevent collapse */
  }
  
  /* Authenticated user: text links stay small */
  .signin-link:not(.btn) {
    font-size: 14px !important;
    padding: 4px 8px !important;
    margin-left: 8px !important;
  }
  
  /* Header right section spacing */
  .header-right,
  .navbar-nav .signin-link,
  [class*="header"] > div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important; /* Consistent spacing */
  }
}

/* Desktop: Ensure proper spacing too */
@media (min-width: 769px) {
  .signin-link.btn {
    padding: 8px 20px !important;
    margin-left: 16px !important;
  }
}