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

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

  /* Smooth Blend gradients (hero, nav, footer, etc.) */
  --sb-1: linear-gradient(135deg,#15deff 0%, #42dce7 30%, #0384da 75%); /* hero */
  --sb-2: linear-gradient(90deg,#15deff 0%, #42dce7 22%, #0384da 58%, #42dce7 100%); /* nav */
  --sb-3: linear-gradient(160deg,#0384da 0%, #42dce7 45%, #15deff 70%); /* sweep */
  --sb-4: radial-gradient(circle at 20% 20%, #42dce7 0%, #15deff 30%, #0384da 70%); /* logo */
  --sb-5: linear-gradient(135deg,#15deff 0%, #42dce7 40%, #0384da 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: #1bd2ed;
  --bs-secondary: #00c0ff;

  /* Status colors */
  --bs-success: #00b9d3;
  --bs-info: #00c0ff;
  --bs-warning: var(--accent-gold);
  --bs-danger: #cd3d9c;

  /* Subtle color variants for light backgrounds (8-12% opacity tint) */
  --bs-primary-subtle: #e9fdfc;
  --bs-secondary-subtle: #e2f9ff;
  --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: #00b9d3;
  --bs-secondary-subtle-text: #00c0ff;
  --bs-success-subtle-text: #00b9d3;
  --bs-info-subtle-text: #00c0ff;
  --bs-warning-subtle-text: #ffa856 ;
  --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: #eb8f38;
  --bs-yellow: #fdc358;
  --bs-green: #33cc99;
  --bs-teal: #33cc99;
  --bs-cyan: #6c81ff;

  /* Grays (purple-tinted scale) */
  --bs-black: #221b2b;
  --bs-white: #fff;
  --bs-gray: #769ac4;
  --bs-gray-dark: #0068ad;
  --bs-gray-100: #f8f6ff;
  --bs-gray-200: #e9fdfc;
  --bs-gray-300: #dffbff;
  --bs-gray-400: #b8f4ff;
  --bs-gray-500: #94eaff;
  --bs-gray-600: #769ac4;
  --bs-gray-700: #5a7e8c;
  --bs-gray-800: #0068ad;
  --bs-gray-900: #265880;

  --bs-light: #ffffff;
  --bs-dark: #0068ad;

  /* RGB values */
  --bs-primary-rgb: 27,210,237;
  --bs-secondary-rgb: 0,192,255;
  --bs-success-rgb: 51, 204, 153;
  --bs-info-rgb: 108, 129, 255;
  --bs-warning-rgb: 255, 217, 49;
  --bs-danger-rgb: 205, 61, 156;
  --bs-light-rgb: 255, 255, 255;
  --bs-dark-rgb: 0, 104, 173;

  /* Text emphasis (your subtle-text + calculated) */
  --bs-primary-text-emphasis: rgb(77, 46, 153);
  --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: rgb(243, 237, 255);
  --bs-secondary-bg-subtle: rgb(240, 235, 249);
  --bs-success-bg-subtle: rgb(235, 248, 244);
  --bs-info-bg-subtle: rgb(238, 245, 255);
  --bs-warning-bg-subtle: rgb(255, 248, 230);
  --bs-danger-bg-subtle: rgb(253, 238, 246);

  /* Subtle borders */
  --bs-primary-border-subtle: rgb(219, 194, 255);
  --bs-secondary-border-subtle: rgb(216, 210, 248);
  --bs-success-border-subtle: rgb(219, 244, 234);
  --bs-info-border-subtle: rgb(230, 240, 255);
  --bs-warning-border-subtle: rgb(255, 246, 230);
  --bs-danger-border-subtle: rgb(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: #0384da;
  --bs-muted: #7870a3;

  /* Links */
  --bs-link-color: #00c0ff;
  --bs-link-color-rgb: 0, 192, 255;
  --bs-link-decoration: rgba(0, 192, 255, 0.75);
  --bs-link-hover-color: #00a0cc;
  --bs-link-hover-color-rgb: 0, 160, 204;

  /* Code & highlights */
  --bs-code-color: #cd3d9c;
  --bs-highlight-color: #221b2b;
  --bs-highlight-bg: rgba(228, 221, 243, 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;

/* Improve alert contrast over pale page backgrounds (e.g. #f3f3ff) */
/* Use rgba(...) on the semantic rgb variables so the color is stronger than the subtle token */
.alert.alert-success {
  background-color: rgba(var(--bs-success-rgb), 0.16);
  border-color: rgba(var(--bs-success-rgb), 0.32);
  color: var(--bs-success-text-emphasis);
}
.alert.alert-info {
  background-color: rgba(var(--bs-info-rgb), 0.14);
  border-color: rgba(var(--bs-info-rgb), 0.28);
  color: var(--bs-info-text-emphasis);
}
.alert.alert-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.14);
  border-color: rgba(var(--bs-warning-rgb), 0.28);
  color: var(--bs-warning-text-emphasis);
}
.alert.alert-danger {
  background-color: rgba(var(--bs-danger-rgb), 0.14);
  border-color: rgba(var(--bs-danger-rgb), 0.30);
  color: var(--bs-danger-text-emphasis);
}
.alert.alert-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.12);
  border-color: rgba(var(--bs-primary-rgb), 0.26);
  color: var(--bs-primary-text-emphasis);
}
.alert.alert-secondary {
  background-color: rgba(var(--bs-secondary-rgb), 0.10);
  border-color: rgba(var(--bs-secondary-rgb), 0.20);
  color: var(--bs-secondary-text-emphasis);
}
.alert.alert-light {
  background-color: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.06);
  color: var(--bs-body-color);
}
.alert.alert-dark {
  background-color: rgba(var(--bs-dark-rgb), 0.10);
  border-color: rgba(var(--bs-dark-rgb), 0.18);
  color: var(--bs-dark);
}


  /* 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.5rem;
  --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:#f3feff;
}

.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,#00b1c7 0%, #00c0ff 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(0, 183, 255, 0.3);
  background-color: transparent;
}
.btn-outline-primary:hover{
  background-color: rgba(201, 235, 255, 0.2);
  border-color: rgba(201, 229, 255, 0.2);
  color: var(--bs-primary);
}

/* 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: #046eb5; /* 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: #03558f;
    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;
}



/* ========== 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,
.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;
  }
}
.btn-light{
	background:#e2f9ff;
	color:#046eb5 ;
	border:#e2f9ff 1px solid;
}
.btn-light:hover, .btn-light:focus{
	background:#046eb5;
	color:#e2f9ff;
	border:#046eb5  1px solid;
}

/* ========== Vendor UI: moved from vendor.html ========== */
.vendor-header {
    margin-bottom: 1.5rem;
}

.vendor-cover {
  height: 180px;
  background-size: cover;
  background-position: center;
  border-radius: .375rem;
  background-color: #7474d5; /* fallback background color */
  min-height: 180px;
}

.vendor-logo-wrap {
  position: relative;
  margin-top: -56px;
}

.vendor-logo {
  width: 112px;
  height: 112px;
  object-fit: contain;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  background-color: #ffffff; /* fallback for when image fails to load */
  display: block;
}

/* Fallback icon shown when vendor logo image fails to load */
.vendor-logo-fallback{
  display: none; /* shown only when image onerror triggers */
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  background-color: #6464c4;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
}

@media (min-width: 992px) {
  .vendor-logo-wrap {
    margin-left: 40px;
  }
  .vendor-logo {
    width: 140px;
    height: 140px;
  }
  .vendor-logo-fallback{ font-size: 48px; width: 140px; height: 140px; }
  .vendor-cover {
    height: 220px;
  }
  .vendor-logo-wrap {
    margin-top: -70px;
  }
}

/* Optional gentle gradient fallback state */
.vendor-cover.fallback-gradient {
  background-image: linear-gradient(90deg, rgba(110,0,255,0.06), rgba(235,193,56,0.04));
}

/* Small icons used in vendor header */
.vendor-whatsapp-icon{width:18px;height:18px;object-fit:contain;display:inline-block}
.vendor-contact-icon{width:18px;height:18px;object-fit:contain;display:inline-block}

/* Social icon circles for vendor header */
.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  color:#fff;
  background:var(--bs-primary);
  text-decoration:none;
}
.social-icon i{font-size:16px}
.social-icon--default{
  /* Make default match filled primary background like other social icons */
  background:var(--bs-primary);
  color:#fff;
  border: none;
}

/* Hover / focus states for social icons */
.social-icon,
.social-icon--default{
  transition:transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}
.social-icon:hover,
.social-icon--default:hover{
  transform:translateY(-3px) scale(1.04);
  filter:brightness(0.95);
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
.social-icon:focus-visible,
.social-icon--default:focus-visible{
  outline:0;
  box-shadow:0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 30%, transparent);
}

/* Category card hover and icon styles */
.category-card{ transition: transform 180ms ease, box-shadow 180ms ease; }
.hover-lift:hover, .hover-lift:focus-within{ transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.12); }
.category-icon-link{ display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; transition: transform 180ms ease; }
.category-card:hover .category-icon-link, .category-card:focus-within .category-icon-link{ transform: translateY(-4px) scale(1.06); }
.category-icon-link i{ font-size:2.2rem; }


.thumb-responsive {
    width: 80px;
    height: 80px;
}
@media (min-width: 992px) {
    .thumb-responsive {
        width: 100%;
        height: auto;
    }
}