/* ═════════════════════════════════════════════════════════════════
   BHARAT FASTENERS — Mobile-First Design System
   Modeled on: https://bharat-fasteners.netlify.app/
   Brand: Bharat Fasteners · Fasteners & Industrial Hardware
   Palette: Sky Blue (#0ea5e9), Industrial Orange (#f26522), Slate
   ═════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/* ── CSS CUSTOM PROPERTIES & TOKENS ── */
:root {
  /* Brand Colors */
  --primary:        #0ea5e9;
  --primary-hover:  #0284c7;
  --primary-light:  #e0f2fe;
  --primary-dark:   #0369a1;
  --accent:         #f26522;
  --accent-hover:   #d9531e;
  --accent-light:   #fff7ed;

  /* Neutrals & Surfaces (Light) */
  --bg-page:        #f8fafc;
  --bg-card:        #ffffff;
  --bg-surface:     #ffffff;
  --bg-subtle:      #f1f5f9;
  --bg-dark:        #0f172a;
  --bg-darker:      #020617;
  --bg-alt:         #f1f5f9;

  /* Typography Colors */
  --text-1:         #0f172a;
  --text-2:         #334155;
  --text-3:         #64748b;
  --text-muted:     #64748b;
  --text-inv:       #ffffff;

  /* Borders & Dividers */
  --border:         #e2e8f0;
  --border-md:      #cbd5e1;
  --border-focus:   #38bdf8;

  /* Semantic Feedback */
  --success:        #16a34a;
  --success-light:  #dcfce7;
  --warning:        #f59e0b;
  --warning-light:  #fef3c7;
  --danger:         #dc2626;
  --danger-light:   #fee2e2;
  --info:           #0ea5e9;
  --info-light:     #e0f2fe;

  /* Radii */
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      14px;
  --radius-xl:      18px;
  --radius-2xl:     24px;
  --radius-full:    9999px;

  /* Elevation & Shadows */
  --shadow-sm:      0 1px 2px rgba(15,23,42,.05);
  --shadow:         0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:      0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05);
  --shadow-lg:      0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.05);
  --shadow-xl:      0 20px 25px -5px rgba(15,23,42,.1), 0 8px 10px -6px rgba(15,23,42,.05);

  /* Layout, Touch & Transitions */
  --transition:     180ms cubic-bezier(0.16, 1, 0.3, 1);
  --touch-min:      44px;
  --font-display:   'Poppins', Arial, sans-serif;
  --font-body:      Arial, Helvetica, sans-serif;

  /* ── 8-POINT SPACING SYSTEM ── */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;
  --space-7:        48px;

  /* Layout Container */
  --container-max:  1360px;
}

/* Dark Mode Tokens */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:        #0b1120;
    --bg-card:        #1e293b;
    --bg-surface:     #1e293b;
    --bg-subtle:      #172554;
    --bg-alt:         #1e293b;
    --text-1:         #f8fafc;
    --text-2:         #cbd5e1;
    --text-3:         #94a3b8;
    --text-muted:     #94a3b8;
    --border:         #334155;
    --border-md:      #475569;
  }
}
[data-theme="dark"] {
  --bg-page:        #0b1120;
  --bg-card:        #1e293b;
  --bg-surface:     #1e293b;
  --bg-subtle:      #172554;
  --bg-alt:         #1e293b;
  --text-1:         #f8fafc;
  --text-2:         #cbd5e1;
  --text-3:         #94a3b8;
  --text-muted:     #94a3b8;
  --border:         #334155;
  --border-md:      #475569;
}

/* ── RESET & BASE (MOBILE FIRST) ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  font-size: 16px;
}
body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--bg-page);
  min-height: 100vh;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}
h1, h2, h3, h4, h5, h6, button, .btn {
  font-family: var(--font-display);
}
/* Prevent iOS Safari 16px auto-zoom glitch */
input, select, textarea {
  font-family: inherit;
  font-size: 1rem !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.section-title {
  font-size: clamp(1.35rem, 3.8vw, 2rem);
  font-weight: 800;
  color: var(--text-1);
}
.section-subtitle {
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  color: var(--text-3);
  margin-top: 0.35rem;
}
.text-inv     { color: var(--text-inv); }
.text-muted   { color: var(--text-muted); }
.text-primary { color: var(--primary); }
.text-accent  { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* ── LAYOUT & CONTAINERS ── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .container { padding: 0 1.5rem; }
}

.section {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.section--alt {
  background: var(--bg-page);
}
.section--dark {
  background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
  color: #f8fafc;
}

/* Fluid Grids */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }

@media (min-width: 480px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.hidden       { display: none !important; }

/* ── BUTTONS (44px TOUCH TARGET COMPLIANT) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all var(--transition);
  border: 1.5px solid transparent;
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(14,165,233,.25);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 4px 14px rgba(14,165,233,.38);
  transform: translateY(-1px);
}
.btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-accent:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 14px rgba(242,101,34,.35);
}
.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--bg-subtle);
  color: var(--text-1);
}
.btn-danger  { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-sm      { min-height: 38px; padding: 0.35rem 0.85rem; font-size: 0.8125rem; border-radius: var(--radius); }
.btn-lg      { min-height: 48px; padding: 0.85rem 1.75rem; font-size: 1rem; border-radius: var(--radius-xl); }
.btn-block   { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-add-cart {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 700;
  width: 100%;
}
.btn-add-cart:hover { background: var(--primary-hover); }

/* ── BADGES & STATUS ── */
.badge, .chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}
.badge-primary, .chip-blue  { background: var(--primary-light); color: var(--primary-dark); }
.badge-success, .chip-green { background: var(--success-light); color: var(--success); }
.badge-warning, .chip-amber { background: var(--warning-light); color: var(--warning); }
.badge-danger,  .chip-red   { background: var(--danger-light); color: var(--danger); }
.badge-muted,   .chip-slate { background: var(--bg-subtle); color: var(--text-3); }

/* ── FORMS & INPUT CONTROLS ── */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 0.35rem;
}
.form-control {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--border-md);
  border-radius: var(--radius);
  font-size: 1rem !important; /* iOS zoom prevention */
  color: var(--text-1);
  background: var(--bg-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}
.form-control::placeholder { color: var(--text-3); opacity: 0.9; }
.form-control.error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 480px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
.form-error { color: var(--danger); font-size: 0.8125rem; margin-top: 0.35rem; }

/* ══════════════════════════════════════
   ANNOUNCEMENT BAR
   ══════════════════════════════════════ */
#announcement-bar {
  background: var(--bg-darker);
  color: #e2e8f0;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: clamp(0.72rem, 2vw, 0.82rem);
  font-weight: 500;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#announcement-bar strong { color: #38bdf8; }

/* ══════════════════════════════════════
   NAVBAR & HEADER
   ══════════════════════════════════════ */
#navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.nav-inner {
  display: flex;
  align-items: center;
  height: 60px;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .nav-inner { height: 68px; gap: 1.5rem; }
}

/* Mobile Hamburger Toggle */
.mobile-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.mobile-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #f8fafc;
  border-radius: 2px;
  transition: all var(--transition);
}
@media (min-width: 768px) {
  .mobile-nav-toggle { display: none; }
}

/* Nav Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.nav-logo-icon {
  width: 36px;
  height: 36px;
  background: var(--primary);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.nav-logo-text .brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  color: #fff;
  line-height: 1;
  letter-spacing: -0.01em;
}
.nav-logo-text .brand span { color: #38bdf8; }
.nav-logo-text .tagline {
  font-size: 0.62rem;
  color: #94a3b8;
  margin-top: 2px;
  display: none;
}
@media (min-width: 480px) {
  .nav-logo-text .tagline { display: block; }
}

/* Desktop Nav Links */
.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}
@media (min-width: 768px) {
  .nav-links { display: flex; }
}
.nav-link {
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: #cbd5e1;
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.1);
}

/* Nav Action Icons (Min 44x44px Tap Target) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.nav-icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: rgba(255,255,255,.08);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #f8fafc;
  transition: all var(--transition);
  position: relative;
  cursor: pointer;
}
.nav-icon-btn:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.nav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-dark);
}

/* Search Dropdown / Bar */
.search-bar-wrapper {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-dark);
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  z-index: 99;
}
.search-bar-wrapper.open { display: block; }
.search-bar {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--radius-full);
  overflow: hidden;
  max-width: 640px;
  margin: 0 auto;
}
.search-bar:focus-within { border-color: var(--primary); }
.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.65rem 1.15rem;
  font-size: 1rem !important;
  background: transparent;
  color: #fff;
  caret-color: #fff;
}
.search-bar input::placeholder { color: #94a3b8; }
.search-bar button {
  background: var(--primary);
  color: #fff;
  border: none;
  min-height: 44px;
  padding: 0 1.25rem;
  font-weight: 600;
}

/* ══════════════════════════════════════
   MOBILE NAVIGATION DRAWER
   ══════════════════════════════════════ */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 199;
}
.mobile-nav-backdrop.open { display: block; }

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--bg-card);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  overflow-y: auto;
}
.mobile-nav-drawer.open {
  transform: translateX(0);
}
.mobile-nav-header {
  padding: 1.25rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--bg-dark);
  color: #fff;
}
.mobile-nav-header .brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.mobile-nav-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  border-radius: var(--radius);
  background: rgba(255,255,255,.1);
}
.mobile-nav-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.mobile-nav-links a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 46px;
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-1);
  transition: background var(--transition);
}
.mobile-nav-links a:hover, .mobile-nav-links a:active {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.mobile-nav-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-3);
}
.mobile-nav-footer .contact-pill {
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

/* ══════════════════════════════════════
   HERO BANNER
   ══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: clamp(340px, 50vw, 540px);
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
  display: flex;
  align-items: center;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  padding: 2rem 0;
}
.hero-slide.active { opacity: 1; }
.hero-bg-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: repeating-linear-gradient(45deg, #38bdf8 0, #38bdf8 1px, transparent 0, transparent 40px);
}
.hero-bolt {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(80px, 16vw, 160px);
  opacity: 0.06;
  user-select: none;
  filter: grayscale(1);
}
.hero-content {
  max-width: 600px;
  color: #fff;
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(14,165,233,.18);
  border: 1px solid rgba(14,165,233,.35);
  color: #38bdf8;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.85rem;
}
.hero-title {
  font-size: clamp(1.75rem, 5.5vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 0.85rem;
}
.hero-title span { color: #38bdf8; }
.hero-desc {
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  color: #cbd5e1;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.hero-nav {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 3;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  border: none;
  cursor: pointer;
  transition: all 0.25s;
}
.hero-dot.active {
  background: var(--primary);
  width: 24px;
  border-radius: 4px;
}

/* ══════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════ */
.section-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 600px) {
  .section-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.section-title-wrap { margin-bottom: 2rem; }
.section-title-wrap .section-title::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  margin-top: 0.5rem;
}
.section-title-wrap.center .section-title::after { margin: 0.5rem auto 0; }

/* ══════════════════════════════════════
   SHOP LAYOUT & BOTTOM-SHEET FILTERS
   ══════════════════════════════════════ */
.shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .shop-layout {
    grid-template-columns: 240px 1fr;
  }
}

/* Category Sidebar: Bottom Sheet on Mobile (<1024px), Sticky Sidebar on Desktop */
.cat-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(4px);
  z-index: 150;
}
.cat-backdrop.open { display: block; }

@media (max-width: 1023px) {
  .cat-sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.3);
    z-index: 160;
    transform: translateY(105%);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    border: none;
  }
  .cat-sidebar.open {
    transform: translateY(0);
  }
  .cat-sidebar::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-md);
    border-radius: 4px;
    margin: 12px auto 6px;
  }
}

#mobile-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

@media (min-width: 1024px) {
  #mobile-filter-btn {
    display: none !important;
  }
  .cat-sidebar-close {
    display: none !important;
  }
  .cat-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: sticky;
    top: 86px;
    box-shadow: var(--shadow-sm);
  }
}

.cat-sidebar-title {
  background: var(--bg-dark);
  color: #fff;
  padding: 0.85rem 1.15rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cat-list { list-style: none; }
.cat-list-item { border-bottom: 1px solid var(--border); }
.cat-list-item:last-child { border: none; }
.cat-list-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  transition: all var(--transition);
  text-align: left;
  border-left: 3px solid transparent;
}
.cat-list-btn:hover, .cat-list-btn.active {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 700;
  border-left-color: var(--primary);
}
.cat-list-btn .emoji { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; }
.cat-list-btn .cnt {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg-subtle);
  color: var(--text-3);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
}
.cat-list-btn.active .cnt {
  background: var(--primary);
  color: #fff;
}

/* ══════════════════════════════════════
   PRODUCTS GRID & RESPONSIVE CARDS
   Phone: 2 columns | Tablet: 3 | Desktop: 4+
   ══════════════════════════════════════ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 1.25rem;
  }
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.product-card:hover {
  border-color: #38bdf8;
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* Fixed 1:1 Aspect Ratio Image */
.prod-img-wrap {
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.prod-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0.5rem;
  transition: transform 0.25s ease;
}
.product-card:hover .prod-img-wrap img {
  transform: scale(1.05);
}

.product-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  z-index: 2;
}

.product-wishlist {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 3;
  transition: all var(--transition);
}
.product-wishlist:hover, .product-wishlist.active {
  transform: scale(1.1);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.product-body {
  padding: clamp(0.65rem, 2vw, 1rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-meta {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.product-name {
  font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.35;
  margin-bottom: 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.product-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.65rem;
}
.product-price .price {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 800;
  color: var(--primary);
}
.product-price .compare {
  font-size: 0.78rem;
  color: var(--text-3);
  text-decoration: line-through;
}
.product-price .discount {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--success);
}
.stock-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-bottom: 0.35rem;
  width: fit-content;
}
.stock-low { background: var(--warning-light); color: var(--warning); }
.stock-out { background: var(--danger-light); color: var(--danger); }

.product-footer {
  margin-top: auto;
  display: flex;
  gap: 0.4rem;
}
.product-footer .btn {
  font-size: 0.8125rem;
  padding: 0.5rem 0.65rem;
}

/* ══════════════════════════════════════
   MODALS & STICKY BOTTOM BARS
   ══════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
}
.modal-header {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-1);
}
.modal-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border-radius: 50%;
  color: var(--text-3);
  transition: all var(--transition);
}
.modal-close:hover {
  background: var(--bg-subtle);
  color: var(--text-1);
}
.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  background: var(--bg-page);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* Product Detail Grid */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 680px) {
  .product-detail-grid { grid-template-columns: 1fr 1fr; }
}
.product-detail-img {
  aspect-ratio: 1;
  background: #f8fafc;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-detail-price .price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
}
.product-specs {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 1rem 0;
  overflow: hidden;
}
.product-spec-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.85rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--border);
}
.product-spec-row:last-child { border: none; }
.product-spec-row .key { color: var(--text-3); font-weight: 500; }
.product-spec-row .val { color: var(--text-1); font-weight: 700; }

/* Sticky Bottom Action Bar for Mobile Product View */
.product-mobile-bottom-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  z-index: 20;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}

/* Quantity Row */
.qty-row {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
}
.qty-row .qbtn {
  width: 44px;
  height: 44px;
  background: var(--bg-subtle);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-1);
  transition: background var(--transition);
}
.qty-row .qbtn:hover { background: var(--primary); color: #fff; }
.qty-row .qinput {
  width: 48px;
  height: 44px;
  border: none;
  border-left: 1px solid var(--border-md);
  border-right: 1px solid var(--border-md);
  text-align: center;
  font-weight: 700;
  font-size: 1rem !important;
  color: var(--text-1);
  background: var(--bg-card);
}

/* ══════════════════════════════════════
   CART DRAWER & CHECKOUT
   ══════════════════════════════════════ */
.cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1050;
}
.cart-overlay.open { display: block; }

.cart-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  z-index: 1060;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -4px 0 30px rgba(0,0,0,0.25);
}
.cart-sidebar.open { transform: translateX(0); }

.cart-header {
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--bg-page);
}
.cart-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-1);
}
.cart-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border-radius: 50%;
  color: var(--text-3);
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
.cart-item {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}
.cart-item-img {
  width: 64px;
  height: 64px;
  aspect-ratio: 1;
  background: #f8fafc;
  border-radius: var(--radius);
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.cart-item-info { flex: 1; }
.cart-item-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}
.cart-item-sku { font-size: 0.75rem; color: var(--text-3); margin: 2px 0 6px; }
.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.cart-item-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
  margin-left: auto;
}
.cart-item-remove {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--danger);
  border-radius: var(--radius-sm);
}

.cart-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--bg-page);
  position: sticky;
  bottom: 0;
}
.cart-totals {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--text-2);
}
.cart-row.total {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-1);
  padding-top: 0.5rem;
  border-top: 1.5px solid var(--border-md);
  margin-top: 0.25rem;
}
.coupon-box {
  margin-bottom: 1rem;
}
.coupon-input-wrap {
  display: flex;
  gap: 0.5rem;
}
.coupon-input-wrap input { flex: 1; }
.coupon-success { color: var(--success); font-size: 0.8125rem; font-weight: 600; margin-top: 0.35rem; }
.coupon-error   { color: var(--danger); font-size: 0.8125rem; font-weight: 600; margin-top: 0.35rem; }

/* Checkout Steps */
.checkout-steps {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.step {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
}
.step.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.step.done {
  color: var(--success);
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.payment-method {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition);
}
.payment-method.selected {
  border-color: var(--primary);
  background: var(--primary-light);
}
.payment-method.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ══════════════════════════════════════
   VALUE PROPS, OPS & FAQ ACCORDIONS
   ══════════════════════════════════════ */
.value-prop-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.15rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  box-shadow: var(--shadow-sm);
}
.value-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.value-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-1);
}
.value-desc {
  font-size: 0.8125rem;
  color: var(--text-3);
  margin-top: 0.2rem;
  line-height: 1.45;
}

.ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (min-width: 768px) {
  .ops-grid { grid-template-columns: repeat(4, 1fr); }
}
.ops-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1rem;
  text-align: center;
}
.ops-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.ops-title { font-weight: 700; font-size: 0.9rem; color: var(--text-1); }
.ops-desc { font-size: 0.78rem; color: var(--text-3); margin-top: 0.25rem; }

/* FAQ Details */
details {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 0.75rem;
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color var(--transition);
}
details[open] { border-color: #38bdf8; }
summary {
  font-weight: 700;
  font-size: 0.95rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-1);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '▼';
  font-size: 0.75rem;
  color: var(--primary);
  transition: transform 0.2s ease;
}
details[open] summary::after {
  transform: rotate(180deg);
}
details p {
  padding: 0 1.25rem 1.15rem;
  color: var(--text-3);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
footer {
  background: var(--bg-dark);
  color: #cbd5e1;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
@media (min-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
}
.footer-brand .brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 0.5rem;
}
.footer-brand p { font-size: 0.85rem; line-height: 1.6; color: #94a3b8; max-width: 340px; }
.footer-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
  font-size: 0.85rem;
  color: #94a3b8;
  transition: color var(--transition);
}
.footer-links a:hover { color: #38bdf8; }
.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 0.8125rem;
  color: #64748b;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
}
@media (min-width: 600px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ══════════════════════════════════════
   CUSTOMER ACCOUNT & INVOICE
   ══════════════════════════════════════ */
.auth-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-xl);
}
.auth-logo { text-align: center; margin-bottom: 1.75rem; }
.auth-logo .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--text-1); }
.auth-logo .tagline { font-size: 0.78rem; color: var(--text-3); margin-top: 0.25rem; }
.auth-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.auth-tab {
  flex: 1;
  padding: 0.75rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  color: var(--text-3);
  font-size: 0.9375rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.auth-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.auth-form { display: none; }
.auth-form.active { display: block; }

.invoice-wrap {
  padding: clamp(1rem, 4vw, 2rem);
  background: #fff;
  color: #0f172a;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.5;
}
.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid #e2e8f0;
  flex-wrap: wrap;
}
.invoice-brand .name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: #0284c7;
  margin-bottom: 0.4rem;
}
.invoice-brand address, .invoice-party address {
  font-style: normal;
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.6;
}
.invoice-meta h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #0f172a;
  margin-bottom: 0.4rem;
}
.invoice-meta p {
  font-size: 0.82rem;
  color: #475569;
  margin: 0.2rem 0;
}
.invoice-parties {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 600px) {
  .invoice-parties { grid-template-columns: 1fr 1fr; }
}
.invoice-party {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 1rem;
}
.invoice-party h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0284c7;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.invoice-table table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.invoice-table th {
  background: #f1f5f9;
  color: #334155;
  padding: 0.6rem 0.5rem;
  font-weight: 600;
  border-bottom: 2px solid #cbd5e1;
  text-align: left;
}
.invoice-table td {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
}
.invoice-totals {
  width: 100%;
  max-width: 320px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}
.invoice-total-row {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  font-size: 0.85rem;
  color: #475569;
}
.invoice-total-row.grand {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  border-top: 2px solid #cbd5e1;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.invoice-footer {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px dashed #cbd5e1;
  text-align: center;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.6;
}

/* Customer Account Area Tabs & Cards */
.account-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.account-tabs::-webkit-scrollbar { display: none; }
.account-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.account-tab:hover { color: var(--text-1); }
.account-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.account-tab-content { display: none; }
.account-tab-content.active { display: block; }

.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.order-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.order-card:hover { box-shadow: var(--shadow-md); }
.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.order-number {
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--primary);
  font-size: 1.05rem;
}
.order-date {
  font-size: 0.8rem;
  color: var(--text-3);
  margin-top: 0.15rem;
}
.order-items-list {
  font-size: 0.88rem;
  color: var(--text-2);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.order-total {
  font-size: 1.25rem;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--text-1);
}

@media print {
  #navbar, .cart-overlay, .cart-sidebar, #toast-container, .no-print { display: none !important; }
  body { background: #fff; }
  .invoice-wrap { padding: 0; }
}

/* ══════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════ */
#toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  background: var(--bg-dark);
  color: #fff;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.1);
}
.toast.success { border-left: 4px solid var(--success); }
.toast.error   { border-left: 4px solid var(--danger); }
.toast.warning { border-left: 4px solid var(--warning); }

/* ══════════════════════════════════════
   ADMIN PANEL — FULL LAYOUT SYSTEM
   ══════════════════════════════════════ */

/* ── Outer Shell: fixed sidebar + scrollable main ── */
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg-alt);
}

/* ── Sidebar ── */
.admin-sidebar {
  width: 220px;
  min-width: 220px;
  background: linear-gradient(170deg, #0D2137 0%, #163352 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  box-shadow: 4px 0 24px rgba(0,0,0,.25);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.admin-logo {
  padding: 1.4rem 1.5rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.admin-logo .brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.admin-logo .sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-nav {
  padding: 0.75rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-left: 3px solid transparent;
  transition: all 160ms ease;
  border-radius: 0;
  min-height: auto;
}
.admin-nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}
.admin-nav-item.active {
  color: #fff;
  background: rgba(14,165,233,.18);
  border-left-color: var(--primary);
  font-weight: 700;
}
.admin-nav-item .icon {
  font-size: 1.1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Main Area ── */
.admin-main {
  margin-left: 220px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

/* ── Topbar ── */
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248,250,252,.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.admin-page-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.admin-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.35rem 1rem;
}

/* ── Content Area ── */
.admin-content {
  flex: 1;
  padding: 1.75rem;
  max-width: 1400px;
  width: 100%;
}

/* ── Tabs ── */
.admin-tab {
  display: none;
}
.admin-tab.active {
  display: block;
}

/* ── Table Wrapper ── */
.admin-table-wrap {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.admin-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
  flex-wrap: wrap;
}
.admin-table-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-1);
}

/* ── Responsive Table Scroll ── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.table-responsive thead {
  background: var(--bg-alt);
  border-bottom: 2px solid var(--border);
}
.table-responsive th {
  padding: 0.7rem 1rem;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  white-space: nowrap;
  text-align: left;
}
.table-responsive td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: middle;
}
.table-responsive tr:last-child td {
  border-bottom: none;
}
.table-responsive tbody tr {
  transition: background var(--transition);
}
.table-responsive tbody tr:hover {
  background: var(--bg-alt);
}

/* ── Filter Buttons Row ── */
.admin-filters {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 160ms ease;
  min-height: 36px;
}
.filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── Status Select ── */
.status-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  border: 1.5px solid var(--border);
  cursor: pointer;
  background: var(--bg-alt);
  color: var(--text-1);
  transition: all 160ms ease;
  min-height: auto;
}
.status-select.pending     { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.status-select.confirmed   { background:#e0f2fe; color:#0369a1; border-color:#7dd3fc; }
.status-select.processing  { background:#ede9fe; color:#5b21b6; border-color:#c4b5fd; }
.status-select.shipped     { background:#f0fdf4; color:#166534; border-color:#86efac; }
.status-select.delivered   { background:#dcfce7; color:#15803d; border-color:#4ade80; }
.status-select.cancelled   { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
.status-select.refunded    { background:#fce7f3; color:#9d174d; border-color:#f9a8d4; }

/* ── Card ── */
.card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-body {
  padding: 1.5rem;
}

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
.spinner-dark {
  border-color: rgba(14,165,233,.2);
  border-top-color: var(--primary);
  width: 32px;
  height: 32px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive: collapse sidebar on small screens ── */
@media (max-width: 768px) {
  .admin-sidebar {
    transform: translateX(-100%);
  }
  .admin-sidebar.open {
    transform: translateX(0);
  }
  .admin-main {
    margin-left: 0;
  }
  .admin-content {
    padding: 1rem;
  }
  .admin-topbar {
    padding: 0.75rem 1rem;
  }
}
@media (max-width: 640px) {
  .admin-filters {
    gap: 0.3rem;
  }

  /* Account, authentication and customer dashboard */
  .bf-account-page {
    background: #f7f8ff;
    color: var(--text-2);
    font-family: Arial, Helvetica, sans-serif;
  }
  .bf-account-page h1,
  .bf-account-page h2,
  .bf-account-page h3,
  .bf-account-page button,
  .bf-account-page .btn,
  .bf-account-page .auth-tab {
    font-family: 'Poppins', Arial, sans-serif;
  }
  .bf-account-page #navbar {
    background: #fff;
    border-bottom: 1px solid #dce4ef;
  }
  .bf-account-page .nav-logo-text .brand {
    color: var(--bf-ink, #17243d);
  }
  .bf-account-page .auth-page {
    min-height: calc(100vh - 70px);
    padding: 56px 16px;
    background: linear-gradient(135deg, #f4f7ff 0%, #fff 60%, #eaf5fb 100%);
  }
  .bf-account-page .auth-card {
    border: 1px solid #dce4ef;
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(23, 36, 61, .12);
  }
  .bf-account-page .auth-logo {
    display: grid;
    justify-items: center;
    gap: 5px;
  }
  .bf-account-page .bf-auth-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: #087db5;
    color: #fff;
    font: 700 28px 'Poppins', Arial, sans-serif;
  }
  .bf-account-page .auth-logo .brand {
    color: #07527a;
    font: 700 18px 'Poppins', Arial, sans-serif;
  }
  .bf-account-page .auth-logo .tagline {
    color: #617087;
  }
  .bf-account-page .auth-tab.active,
  .bf-account-page .btn-primary {
    background: #087db5;
    border-color: #087db5;
  }
  .bf-account-page .auth-tab.active {
    color: #fff;
  }
  .bf-account-page .btn-primary:hover {
    background: #07527a;
    border-color: #07527a;
  }
  .bf-account-page .auth-form .form-control:focus {
    border-color: #087db5;
    box-shadow: 0 0 0 3px rgba(8, 125, 181, .14);
  }
  .bf-account-page #account-page {
    min-height: calc(100vh - 70px);
    padding: 30px 0 56px;
    background: #f7f8ff;
  }
  .bf-account-page .bf-dashboard-container {
    max-width: 1500px;
  }
  .bf-account-page .bf-dashboard-hero {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    margin-bottom: 18px;
    border-radius: 7px;
    overflow: hidden;
    background: linear-gradient(115deg, #087db5, #07527a);
    color: #fff;
  }
  .bf-account-page .bf-dashboard-hero::after {
    content: 'ϟ';
    position: absolute;
    right: 30px;
    bottom: -38px;
    color: rgba(255,255,255,.08);
    font: 180px 'Poppins', Arial, sans-serif;
  }
  .bf-account-page .bf-dashboard-hero > div,
  .bf-account-page .bf-dashboard-hero button {
    position: relative;
    z-index: 1;
  }
  .bf-account-page .bf-dashboard-hero small {
    font-size: 10px;
    letter-spacing: .8px;
  }
  .bf-account-page .bf-dashboard-hero h1 {
    margin: 7px 0 4px;
    color: #fff;
    font-size: 28px;
  }
  .bf-account-page .bf-dashboard-hero div div {
    color: #d9effa;
    font-size: 13px;
  }
  .bf-account-page .bf-dashboard-hero .btn-outline {
    color: #17243d;
    background: #fff;
    border-color: #fff;
  }
  .bf-account-page .bf-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 18px;
  }
  .bf-account-page .bf-dashboard-stats article {
    display: grid;
    gap: 8px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e1e6f0;
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(23, 36, 61, .04);
  }
  .bf-account-page .bf-dashboard-stats span,
  .bf-account-page .bf-dashboard-stats small {
    color: #617087;
    font-size: 12px;
  }
  .bf-account-page .bf-dashboard-stats strong {
    color: #17243d;
    font: 700 25px 'Poppins', Arial, sans-serif;
  }
  .bf-account-page .account-tabs {
    margin-bottom: 18px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid #e1e6f0;
  }
  .bf-account-page .account-tab.active {
    color: #087db5;
    border-bottom-color: #087db5;
  }
  .bf-account-page .account-tab-content {
    background: transparent;
  }
  .bf-account-page .order-card,
  .bf-account-page .profile-grid .card {
    border: 1px solid #e1e6f0;
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(23, 36, 61, .04);
  }
  .bf-account-page .bf-dashboard-signout {
    display: block;
    margin: 18px 0 0 auto;
  }
  @media (max-width: 700px) {
    .bf-account-page .bf-dashboard-hero {
      align-items: flex-start;
      flex-direction: column;
      padding: 22px;
    }
    .bf-account-page .bf-dashboard-stats {
      grid-template-columns: 1fr;
    }
  }

  /* Final storefront auth surface */
  .bf-account-page {
    background: #f7f9ff;
    color: #334155;
    font-family: 'Poppins', Arial, sans-serif;
  }
  .bf-account-page #navbar {
    background: #fff;
    border-bottom: 1px solid #dce4ef;
    box-shadow: 0 2px 10px rgba(23, 36, 61, .06);
  }
  .bf-account-page .nav-logo-icon {
    display: grid;
    place-items: center;
    background: #087db5;
    border-radius: 4px;
    color: #fff;
    font: 700 22px 'Poppins', Arial, sans-serif;
  }
  .bf-account-page .nav-logo-text .brand {
    color: #17243d;
    font: 700 16px 'Poppins', Arial, sans-serif;
  }
  .bf-account-page .nav-logo-text .tagline {
    display: block;
    color: #617087;
  }
  .bf-account-page .auth-page {
    min-height: calc(100vh - 68px);
    padding: 56px 16px;
    background: linear-gradient(145deg, #f7f9ff 0%, #fff 58%, #eaf5fb 100%);
  }
  .bf-account-page .auth-card {
    max-width: 470px;
    padding: 36px 38px;
    border: 1px solid #dce4ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(23, 36, 61, .12);
  }
  .bf-account-page .auth-logo {
    margin-bottom: 26px;
  }
  .bf-account-page .bf-auth-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    border-radius: 4px;
    background: #087db5;
    color: #fff;
    font: 700 25px 'Poppins', Arial, sans-serif;
  }
  .bf-account-page .auth-logo .brand {
    color: #17243d;
    font: 700 21px 'Poppins', Arial, sans-serif;
  }
  .bf-account-page .auth-logo .tagline {
    color: #617087;
    font-size: 12px;
  }
  .bf-account-page .auth-tabs {
    border-bottom-color: #dce4ef;
    margin-bottom: 22px;
  }
  .bf-account-page .auth-tab {
    color: #617087;
    font: 600 15px 'Poppins', Arial, sans-serif;
  }
  .bf-account-page .auth-tab.active {
    color: #087db5;
    border-bottom-color: #087db5;
  }
  .bf-account-page .form-label {
    color: #17243d;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 13px;
  }
  .bf-account-page .form-control {
    min-height: 46px;
    border: 1px solid #cbd7e5;
    border-radius: 5px;
    background: #fff;
    color: #17243d;
  }
  .bf-account-page .form-control:focus {
    border-color: #087db5;
    box-shadow: 0 0 0 3px rgba(8, 125, 181, .14);
  }
  .bf-account-page .auth-form a {
    color: #f05a16 !important;
  }
  .bf-account-page .auth-footer {
    color: #617087;
  }
  .bf-account-page .auth-footer a {
    color: #087db5 !important;
  }
  .bf-account-page .btn-primary {
    min-height: 46px;
    border-radius: 5px;
    background: #087db5;
    border-color: #087db5;
    font-family: 'Poppins', Arial, sans-serif;
  }
  .bf-account-page .btn-primary:hover {
    background: #07527a;
    border-color: #07527a;
  }
  .bf-account-page .form-error {
    color: #c0392b;
  }
  @media (max-width: 520px) {
    .bf-account-page .auth-card {
      padding: 28px 20px;
    }

    .bf-store .bf-container,
    .bf-store .bf-section,
    .bf-store .bf-content { width: 100%; max-width: 100%; }
    .bf-store .bf-section { padding-left: 12px; padding-right: 12px; }
    .bf-store .bf-header-inner { padding-left: 12px; padding-right: 12px; }
    .bf-store .bf-brand { flex: 1 1 auto; min-width: 0; }
    .bf-store .bf-brand b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bf-store .bf-actions { gap: 4px; }
    .bf-store .bf-actions button,
    .bf-store .bf-account { min-width: 40px; min-height: 40px; padding: 7px; }
    .bf-store .bf-search input { min-width: 0; width: 100%; }
    .bf-store .bf-hero { padding-left: 12px; padding-right: 12px; }
    .bf-store .bf-hero h1 { font-size: clamp(24px, 8vw, 34px); line-height: 1.12; }
    .bf-store .bf-hero p { max-width: none; }
    .bf-store .bf-button,
    .bf-store .bf-quote button { min-height: 44px; }
    .bf-store .bf-product-card { min-width: 0; }
    .bf-store .bf-card-body { min-width: 0; padding: 8px; }
    .bf-store .bf-card-body h3,
    .bf-store .bf-card-body p { overflow-wrap: anywhere; }
    .bf-store .bf-card-body h3 { min-height: 2.5em; }
    .bf-store .bf-price-row { flex-wrap: wrap; gap: 4px; }
    .bf-store .bf-category-card { min-width: 0; }
    .bf-store .bf-footer { padding-left: 12px; padding-right: 12px; }
    .bf-store .bf-footer > div { min-width: 0; }
    .bf-store .bf-cart-drawer { width: min(100vw, 390px); max-width: 100%; }
    .bf-store .bf-cart-foot > div { gap: 8px; }
    .bf-store .bf-cart-foot > div > * { min-width: 0; }
    .bf-store .bf-toast { left: 12px; right: 12px; bottom: 12px; text-align: center; }
  }

  @media (max-width: 380px) {
    .bf-store .bf-category-grid,
    .bf-store .bf-product-grid { gap: 5px; }
    .bf-store .bf-card-image { height: 96px; padding: 5px; }
    .bf-store .bf-card-body h3 { font-size: 12px; }
    .bf-store .bf-card-body p { display: none; }
    .bf-store .bf-price-row strong { font-size: 13px; }
    .bf-store .bf-brand b { font-size: 12px; }
    .bf-store .bf-actions button,
    .bf-store .bf-account { min-width: 36px; padding-left: 5px; padding-right: 5px; }
  }

}

/* ── PROCUREMENT STOREFRONT ── */
  .bf-store {
    --bf-blue: #087db5;
    --bf-blue-dark: #07527a;
    --bf-blue-pale: #eaf5fb;
    --bf-orange: #f05a16;
    --bf-ink: #17243d;
    --bf-muted: #617087;
    --bf-line: #dce4ef;
    background: #f8f9ff;
    color: var(--bf-ink);
    font-family: Arial, Helvetica, sans-serif;
  }
  .bf-store * { box-sizing: border-box; }
  .bf-store a { color: inherit; }
  .bf-topbar { background: var(--bf-blue); color: #fff; text-align: center; padding: 6px 12px; font-size: 11px; letter-spacing: .2px; }
  .bf-header { background: #fff; border-bottom: 1px solid var(--bf-line); position: sticky; top: 0; z-index: 90; }
  .bf-header-inner { max-width: 1240px; margin: auto; min-height: 82px; padding: 12px 14px; display: flex; align-items: center; gap: 24px; }
  .bf-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--bf-blue-dark); min-width: 185px; }
  .bf-brand > strong { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; padding: 3px; background: #fff; border: 1px solid #dbe2ee; border-radius: 5px; color: #fff; font-size: 18px; overflow: hidden; }
  .bf-brand > strong img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .bf-brand span { display: grid; gap: 1px; }
  .bf-brand b { font-size: 18px; letter-spacing: .3px; }
  .bf-brand small { color: #65758a; font-size: 12px; }
  .bf-search { display: flex; align-items: center; border: 1px solid #dbe2ee; background: #f5f7fc; border-radius: 5px; height: 42px; flex: 1; max-width: 650px; color: #75839a; }
  .bf-search span { padding: 0 9px; font-size: 22px; line-height: 1; }
  .bf-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px !important; color: var(--bf-ink); }
  .bf-search button { display: none; }
  .bf-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .bf-actions button, .bf-account { position: relative; border: 0; background: transparent; color: var(--bf-ink); min-height: 34px; padding: 4px; text-decoration: none; font-size: 19px; }
  .bf-account { display: flex; gap: 5px; align-items: center; }
  .bf-account i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bf-blue); font-style: normal; font-size: 14px; }
  .bf-actions em { position: absolute; top: -2px; right: -2px; background: var(--bf-orange); color: #fff; border-radius: 50%; min-width: 16px; height: 16px; font-size: 10px; font-style: normal; display: grid; place-items: center; }
  .bf-actions em[hidden] { display: none; }
  .bf-nav { max-width: 760px; margin: auto; display: flex; gap: 24px; justify-content: center; align-items: center; padding: 9px 14px; font-size: 13px; overflow-x: auto; white-space: nowrap; }
  .bf-nav a { text-decoration: none; }
  .bf-nav a:hover, .bf-nav a.active { color: var(--bf-blue); }
  .bf-nav .orange { color: #111827; }
  .bf-nav .orange.active { color: var(--bf-blue); }
  .bf-mobile-menu { display: none; }
  .bf-breadcrumb { max-width: 1240px; margin: auto; padding: 16px 14px 8px; color: #69768a; font-size: 11px; }
  .bf-breadcrumb span { padding: 0 7px; }
  .bf-panel, .bf-section, .bf-catalog-title, .bf-catalog-layout, .bf-quote { max-width: 1240px; margin-left: auto; margin-right: auto; }
  .bf-hero { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; padding: 22px 14px 28px; }
  .bf-hero-copy { max-width: 610px; }
  .bf-kicker { display: inline-block; color: var(--bf-blue-dark); background: var(--bf-blue-pale); border: 1px solid #cae5f2; padding: 5px 8px; font-size: 10px; }
  .bf-hero h1 { font-size: clamp(26px, 4vw, 40px); line-height: 1.05; margin: 14px 0 10px; color: #101c32; }
  .bf-hero h1 strong { color: var(--bf-blue); }
  .bf-hero p { color: var(--bf-muted); font-size: 11px; line-height: 1.6; max-width: 480px; }
  .bf-hero-image { height: 245px; border-radius: 5px; overflow: hidden; border: 1px solid #bfcbdc; box-shadow: 0 8px 20px rgba(17, 51, 81, .15); }
  .bf-hero-image img { width: 100%; height: 100%; object-fit: cover; }
  .bf-hero-buttons { display: flex; gap: 10px; margin-top: 15px; }
  .bf-button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid transparent; min-height: 30px; padding: 7px 13px; font-size: 10px; font-weight: 700; cursor: pointer; text-decoration: none; transition: .2s; border-radius: 2px; }
  .bf-button:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(8, 125, 181, .2); }
  .bf-button.primary, .bf-button.blue { background: var(--bf-blue); color: #fff; }
  .bf-button.outline { color: var(--bf-ink); border-color: #aebbd0; background: #fff; }
  .bf-button.orange { background: var(--bf-orange); color: #fff; }
  .bf-button.full { width: 100%; min-height: 31px; }
  .bf-whatsapp-link { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 24px; background: #25d366; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); font-size: 13px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
  .bf-whatsapp-link:hover, .bf-whatsapp-link:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0,0,0,.25); }
  .bf-whatsapp-link i { font-size: 22px; }
  @media (max-width: 600px) { .bf-whatsapp-link { right: 14px; bottom: 14px; width: 46px; min-height: 46px; padding: 0; justify-content: center; border-radius: 50%; } .bf-whatsapp-link span { display: none; } }
  .bf-stock-chat { position: fixed; right: 20px; bottom: 78px; z-index: 119; font-family: Arial, Helvetica, sans-serif; }
  .bf-stock-chat-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 0; border-radius: 20px; background: #087db5; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); cursor: pointer; font-size: 12px; font-weight: 700; }
  .bf-stock-chat-toggle:hover { background: #075f89; }
  .bf-stock-chat-panel { position: absolute; right: 0; bottom: 48px; width: min(350px, calc(100vw - 28px)); overflow: hidden; border: 1px solid #dce4ef; border-radius: 8px; background: #fff; box-shadow: 0 8px 28px rgba(17,36,61,.2); }
  .bf-stock-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; background: #087db5; color: #fff; }
  .bf-stock-chat-head strong, .bf-stock-chat-head small { display: block; }
  .bf-stock-chat-head strong { font-size: 13px; }
  .bf-stock-chat-head small { margin-top: 2px; opacity: .85; font-size: 10px; }
  .bf-stock-chat-close { border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 22px; line-height: 1; }
  .bf-stock-chat-messages { display: grid; gap: 7px; max-height: 300px; overflow-y: auto; padding: 11px; background: #f8fafc; }
  .bf-stock-chat-message { max-width: 92%; padding: 8px 9px; border-radius: 6px; color: #1e293b; font-size: 11px; line-height: 1.45; }
  .bf-stock-chat-message.assistant { justify-self: start; background: #fff; border: 1px solid #e2e8f0; }
  .bf-stock-chat-message.user { justify-self: end; background: #e7f3fb; color: #07527a; }
  .bf-stock-chat-message strong { color: #07527a; }
  .bf-stock-chat-message a { color: #087db5; font-weight: 700; }
  .bf-stock-chat-form { display: flex; gap: 6px; padding: 9px; border-top: 1px solid #e2e8f0; background: #fff; }
  .bf-stock-chat-form input { min-width: 0; flex: 1; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 11px; }
  .bf-stock-chat-form button { width: 34px; border: 0; border-radius: 4px; background: #f26522; color: #fff; cursor: pointer; }
  @media (max-width: 600px) { .bf-stock-chat { right: 14px; bottom: 72px; } .bf-stock-chat-toggle { width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; border-radius: 50%; } .bf-stock-chat-toggle span { display: none; } }
  .bf-quick-order { border-top: 1px solid var(--bf-line); border-bottom: 1px solid var(--bf-line); padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(255,255,255,.7); }
  .bf-section-label { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--bf-blue); }
  .bf-section-label small { color: var(--bf-muted); font-size: 9px; margin-left: 4px; }
  .bf-sku-form { display: flex; flex: 1; gap: 5px; min-width: 280px; }
  .bf-sku-form input, .bf-sku-form select { border: 1px solid var(--bf-line); background: #fff; border-radius: 2px; padding: 7px; min-height: 30px; font-size: 10px !important; }
  .bf-sku-form input { flex: 1; }
  .bf-link { color: var(--bf-blue); border: 0; background: transparent; font-size: 9px; cursor: pointer; }
  .bf-order-total { margin-left: auto; font-size: 9px; color: var(--bf-muted); }
  .bf-section { padding: 28px 14px; }
  .bf-section-tint { max-width: none; background: #f0f3ff; padding-left: max(14px, calc((100% - 1212px)/2)); padding-right: max(14px, calc((100% - 1212px)/2)); }
  .bf-section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 14px; }
  .bf-section-heading small, .bf-why > small, .bf-quote small { color: var(--bf-blue); font-size: 9px; letter-spacing: .7px; }
  .bf-section-heading h2, .bf-why h2, .bf-quote h2 { font-size: 17px; margin-top: 3px; }
  .bf-section-heading > a { font-size: 9px; color: var(--bf-blue); text-decoration: none; }
  .bf-section-heading label { color: var(--bf-muted); font-size: 9px; }
  .bf-section-heading select, .bf-active-filters select { border: 1px solid var(--bf-line); padding: 7px; background: #fff; font-size: 10px; color: var(--bf-ink); }
  .bf-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .bf-category-card { background: #fff; border: 1px solid var(--bf-line); padding: 8px; min-height: 165px; text-decoration: none; transition: .2s; position: relative; overflow: hidden; }
  .bf-category-card:hover, .bf-product-card:hover, .bf-why-grid article:hover, .bf-panel:hover { border-color: var(--bf-blue); box-shadow: 0 0 0 2px rgba(8,125,181,.12), 0 8px 18px rgba(11,55,94,.1); }
  .bf-category-card span { display: block; background: #fff; height: 75px; font-size: 46px; text-align: center; padding-top: 11px; }
  .bf-category-card b, .bf-category-card small, .bf-category-card p, .bf-category-card em { display: block; }
  .bf-category-card b { font-size: 10px; margin-top: 8px; }
  .bf-category-card small { font-size: 8px; color: var(--bf-muted); margin-top: 2px; }
  .bf-category-card p { color: var(--bf-muted); font-size: 8px; line-height: 1.35; margin: 5px 0; }
  .bf-category-card em { color: var(--bf-blue); font-size: 8px; font-style: normal; }
  .bf-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .bf-product-card { position: relative; background: #fff; border: 1px solid var(--bf-line); cursor: pointer; transition: .2s; overflow: hidden; }
  .bf-stock { position: absolute; top: 8px; left: 7px; z-index: 1; background: var(--bf-blue); color: #fff; padding: 4px 6px; font-size: 8px; font-weight: 700; }
  .bf-card-image { height: 138px; padding: 8px; background: #fff; position: relative; }
  .bf-card-image img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
  .bf-card-image span { position: absolute; right: 5px; bottom: 4px; background: #fff; padding: 3px 5px; font-size: 8px; }
  .bf-card-body { padding: 8px; }
  .bf-card-body > small { color: var(--bf-blue); font-size: 8px; }
  .bf-card-body h3 { font-size: 11px; line-height: 1.25; margin: 5px 0; color: #182641; }
  .bf-card-body p { font-size: 8px; color: var(--bf-muted); margin-bottom: 8px; }
  .bf-spec-row { display: flex; justify-content: space-between; gap: 3px; border-top: 1px solid #edf0f5; padding: 6px 0; font-size: 8px; color: var(--bf-muted); }
  .bf-spec-row b { color: var(--bf-ink); }
  .bf-price-row { display: flex; align-items: end; justify-content: space-between; }
  .bf-price-row small, .bf-price-row strong { display: block; }
  .bf-price-row small { color: var(--bf-muted); font-size: 8px; }
  .bf-price-row strong { color: var(--bf-blue-dark); font-size: 12px; margin-top: 2px; }
  .bf-price-row .bf-button { font-size: 9px; min-height: 25px; padding: 5px 8px; }
  .bf-bulk-banner { max-width: 1180px; margin: 32px auto; padding: 24px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 25px; background: #18243c; color: #fff; box-shadow: 0 8px 20px #ccd1dd; }
  .bf-bulk-banner h2 { font-size: 22px; margin: 10px 0; color: #fff; }
  .bf-bulk-banner p { color: #c9d2e2; font-size: 10px; margin-bottom: 14px; }
  .orange-kicker { background: rgba(240,90,22,.2); color: #ff986b; }
  .bf-upload-box { display: grid; gap: 4px; border: 1px solid #49627e; padding: 13px; font-size: 10px; color: #e8f2ff; }
  .bf-upload-box b { color: #4ebce8; font-size: 20px; }
  .bf-upload-box small { color: #b5c1d1; font-size: 8px; }
  .bf-upload-box label { border: 1px dashed #6685a5; padding: 14px; text-align: center; margin-top: 7px; color: #d9e6f5; font-size: 9px; }
  .bf-cert-strip { background: #f2f3ff; text-align: center; padding: 23px 14px; display: grid; gap: 5px; }
  .bf-cert-strip > small { color: var(--bf-blue); font-size: 8px; }
  .bf-cert-strip > b { font-size: 12px; }
  .bf-cert-strip > div { display: grid; grid-template-columns: repeat(6,1fr); max-width: 1000px; width: 100%; margin: 12px auto 0; }
  .bf-cert-strip span { padding: 7px; border-left: 1px solid var(--bf-line); font-size: 9px; }
  .bf-cert-strip span small { color: var(--bf-muted); font-size: 7px; }
  .bf-why { text-align: center; }
  .bf-why > p { color: var(--bf-muted); font-size: 9px; }
  .bf-why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 16px; text-align: left; }
  .bf-why-grid article { display: grid; gap: 5px; border: 1px solid var(--bf-line); padding: 13px; color: var(--bf-blue); font-size: 17px; transition: .2s; }
  .bf-why-grid article b { color: var(--bf-ink); font-size: 10px; }
  .bf-why-grid article span { color: var(--bf-muted); font-size: 8px; line-height: 1.5; }
  .bf-footer { border-top: 1px solid var(--bf-line); padding: 28px max(14px, calc((100% - 1212px)/2)); display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 30px; font-size: 9px; }
  .bf-footer .bf-brand { margin-bottom: 10px; }
  .bf-footer p { color: var(--bf-muted); line-height: 1.5; max-width: 250px; }
  .bf-footer > div > b { display: block; margin-bottom: 9px; }
  .bf-footer > div > a:not(.bf-brand) { display: block; color: var(--bf-muted); text-decoration: none; margin: 6px 0; }
  .bf-page-view[hidden], #home-view[hidden] { display: none; }
  .bf-catalog-title { padding: 5px 14px 18px; display: flex; justify-content: space-between; align-items: end; }
  .bf-catalog-title h1 { font-size: 20px; margin-bottom: 5px; }
  .bf-catalog-title p { color: var(--bf-muted); font-size: 10px; }
  .bf-catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 15px; padding: 0 14px 40px; }
  .bf-filters, .bf-active-filters { background: #fff; border: 1px solid var(--bf-line); }
  .bf-filters { padding: 13px; }
  .bf-filter-top { display: flex; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid var(--bf-line); font-size: 10px; }
  .bf-filter-top button, .bf-active-filters button { color: var(--bf-orange); border: 0; background: transparent; font-size: 9px; cursor: pointer; }
  .bf-filter-group { border-bottom: 1px solid var(--bf-line); padding: 13px 0; display: grid; gap: 7px; font-size: 9px; }
  .bf-filter-group:last-child { border: 0; }
  .bf-filter-group > b { font-size: 10px; margin-bottom: 2px; }
  .bf-filter-group label { color: var(--bf-muted); }
  .bf-filter-group input { accent-color: var(--bf-blue); }
  .bf-filter-group label small { float: right; }
  .bf-size-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
  .bf-size-buttons button { border: 1px solid var(--bf-line); padding: 6px 2px; background: #fff; color: var(--bf-muted); font-size: 9px; }
  .bf-size-buttons button.active { border-color: var(--bf-blue); color: var(--bf-blue); background: var(--bf-blue-pale); }
  .bf-active-filters { min-height: 45px; padding: 8px 10px; display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 9px; flex-wrap: wrap; }
  .bf-active-filters b { background: #eef0ff; padding: 5px 7px; font-weight: 400; }
  .bf-active-filters label { margin-left: auto; color: var(--bf-muted); }
  .bf-pagination { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
  .bf-pagination button, .bf-pagination b { border: 1px solid var(--bf-line); background: #fff; padding: 7px 10px; font-size: 9px; }
  .bf-pagination b { background: var(--bf-blue); color: #fff; }
  .bf-product-detail { max-width: 1000px; margin: 25px auto 60px; padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 35px; background: #fff; border: 1px solid var(--bf-line); }
  .bf-detail-media {
    height: 380px;
    min-width: 0;
    background: transparent;
    padding: 18px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .bf-detail-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
  }
  .bf-detail-copy > small { color: var(--bf-blue); font-size: 10px; }
  .bf-detail-copy h1 { font-size: 28px; line-height: 1.15; margin: 10px 0; }
  .bf-detail-lead { color: var(--bf-muted); font-size: 12px; line-height: 1.6; }
  .bf-detail-price { color: var(--bf-blue-dark); font-size: 27px; font-weight: 700; margin: 20px 0 8px; }
  .bf-detail-price small { color: var(--bf-muted); font-size: 11px; font-weight: 400; }
  .bf-detail-tags { display: flex; gap: 7px; flex-wrap: wrap; }
  .bf-detail-tags span { background: var(--bf-blue-pale); color: var(--bf-blue-dark); font-size: 9px; padding: 6px; }
  .bf-detail-actions { display: flex; align-items: center; gap: 10px; margin: 20px 0; }
  .bf-qty, .bf-mini-qty { display: flex; align-items: center; border: 1px solid var(--bf-line); background: #fff; }
  .bf-qty button, .bf-mini-qty button { border: 0; background: #f1f5f9; padding: 8px 11px; cursor: pointer; }
  .bf-qty b { padding: 0 14px; font-size: 11px; }
  .bf-detail-specs {
    border-top: 1px solid var(--bf-line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 0;
    margin-top: 20px;
  }
  .bf-detail-specs div {
    padding: 10px 0;
    border-bottom: 1px solid var(--bf-line);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
  }
  .bf-detail-specs span {
    color: var(--bf-muted);
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
  }
  .bf-detail-specs b {
    color: var(--bf-blue-dark);
    font-size: 12.5px;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    line-height: 1.35;
  }
  .bf-quote { margin-top: 30px; margin-bottom: 50px; padding: 25px; background: #17243d; color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
  .bf-quote h2 { color: #fff; margin: 8px 0; }
  .bf-quote p { color: #c8d3e2; font-size: 10px; line-height: 1.6; }
  .bf-quote form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: center; }
  .bf-quote input { padding: 9px; border: 1px solid #536b88; background: #223452; color: #fff; font-size: 10px !important; }
  .bf-quote .bf-button { grid-column: 1/-1; }
  .bf-cart-backdrop { display: none; position: fixed; inset: 0; background: rgba(10, 22, 45, .55); backdrop-filter: blur(3px); z-index: 2500; }
  .bf-cart-backdrop.open { display: block; }
  .bf-cart-drawer { position: fixed; z-index: 2501; right: 0; top: 0; bottom: 0; width: min(100%, 385px); background: #f8f9ff; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; box-shadow: -8px 0 25px rgba(20,40,70,.2); }
  .bf-cart-drawer.open { transform: translateX(0); }
  .bf-cart-head { padding: 13px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--bf-line); background: #fff; }
  .bf-cart-head > div { display: grid; gap: 4px; font-size: 12px; }
  .bf-cart-head small { color: var(--bf-muted); font-size: 9px; }
  .bf-cart-head button { border: 0; background: transparent; font-size: 22px; cursor: pointer; }
  .bf-cart-threshold { padding: 11px; font-size: 9px; color: var(--bf-muted); }
  .bf-cart-threshold b { float: right; color: var(--bf-orange); font-weight: 400; }
  .bf-cart-threshold b.met { color: #18864b; }
  .bf-cart-threshold i { display: block; height: 5px; margin-top: 8px; border-radius: 10px; background: #dce4eb; overflow: hidden; }
  .bf-cart-threshold em { display: block; height: 100%; width: 0; background: var(--bf-orange); transition: width .25s; }
  .bf-cart-items { padding: 5px 11px; overflow: auto; flex: 1; }
  .bf-cart-item { display: flex; gap: 8px; background: #fff; border: 1px solid var(--bf-line); padding: 8px; margin: 5px 0; font-size: 9px; }
  .bf-cart-item img { width: 54px; height: 54px; object-fit: contain; background: #eef1f4; }
  .bf-cart-item > div { flex: 1; display: grid; gap: 3px; }
  .bf-cart-item small { color: var(--bf-blue); font-size: 8px; }
  .bf-cart-item b { font-size: 10px; }
  .bf-cart-item span { color: var(--bf-muted); }
  .bf-cart-item span strong { float: right; color: var(--bf-ink); font-size: 11px; }
  .bf-cart-item em { color: var(--bf-blue-dark); background: var(--bf-blue-pale); padding: 3px; width: fit-content; font-size: 8px; font-style: normal; }
  .bf-mini-qty { width: fit-content; font-size: 9px; }
  .bf-mini-qty button { padding: 3px 7px; }
  .bf-mini-qty .remove { margin-left: 5px; color: var(--bf-orange); background: #fff; }
  .bf-empty-cart { text-align: center; color: var(--bf-muted); padding: 80px 20px; font-size: 11px; }
  .bf-empty-cart b { font-size: 35px; display: block; margin-bottom: 10px; }
  .bf-empty-cart a { color: var(--bf-blue); }
  .bf-cart-foot { padding: 12px; background: #fff; border-top: 1px solid var(--bf-line); font-size: 9px; }
  .bf-cart-foot > div { display: flex; justify-content: space-between; margin: 7px 0; }
  .bf-cart-foot .green { color: #18864b; }
  .bf-cart-foot hr { border: 0; border-top: 1px solid var(--bf-line); }
  .bf-cart-foot .grand { font-size: 13px; font-weight: 700; }
  .bf-cart-foot > a { display: block; text-align: center; padding: 8px; margin-top: 5px; color: var(--bf-ink); text-decoration: none; }
  .bf-toast { position: fixed; z-index: 200; right: 20px; bottom: 20px; background: #17243d; color: #fff; padding: 11px 15px; transform: translateY(20px); opacity: 0; pointer-events: none; font-size: 11px; transition: .2s; }
  .bf-toast.show { opacity: 1; transform: translateY(0); }
  .bf-toast.error { background: #b52828; }
  .bf-muted { color: var(--bf-muted); font-size: 11px; padding: 15px; }
  @media (max-width: 800px) {
    .bf-header-inner { gap: 9px; }.bf-brand { min-width: auto; }.bf-brand span small, .bf-account span { display: none; }.bf-brand b { font-size: 10px; }.bf-nav { gap: 15px; }
    .bf-hero, .bf-product-detail, .bf-quote { grid-template-columns: 1fr; }.bf-hero-image { height: 210px; }.bf-category-grid, .bf-product-grid { grid-template-columns: repeat(2,1fr); }.bf-catalog-layout { grid-template-columns: 1fr; }.bf-filters { display: none; }.bf-why-grid { grid-template-columns: repeat(2,1fr); }.bf-footer { grid-template-columns: repeat(2,1fr); }.bf-cert-strip > div { grid-template-columns: repeat(3,1fr); gap: 6px; }.bf-bulk-banner { margin: 20px 14px; grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) {
    .bf-topbar span { display: none; }.bf-mobile-menu { display: block; border: 0; background: transparent; font-size: 20px; }.bf-search { order: 4; flex-basis: 100%; max-width: none; }.bf-header-inner { flex-wrap: wrap; }.bf-nav { display: none; }.bf-menu-open .bf-nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-wrap: wrap; box-shadow: 0 8px 16px #dce2eb; }.bf-hero { padding-top: 14px; }.bf-category-grid, .bf-product-grid { grid-template-columns: 1fr 1fr; gap: 7px; }.bf-card-image { height: 105px; }.bf-card-body h3 { font-size: 10px; }.bf-section-heading { align-items: start; gap: 5px; }.bf-section-heading label { display: none; }.bf-quote form { grid-template-columns: 1fr; }.bf-quote .bf-button { grid-column: auto; }.bf-footer { grid-template-columns: 1fr 1fr; gap: 18px; }.bf-footer > div:first-child { grid-column: 1/-1; }.bf-detail-media { height: 260px; }.bf-detail-copy h1 { font-size: 22px; }
  }

/* Accessible type scale for the new storefront */
.bf-store { font-size: 17px; }
.bf-store .bf-topbar { font-size: 13px; }
.bf-store .bf-brand b { font-size: 14px; }
.bf-store .bf-brand small { font-size: 11px; }
.bf-store .bf-nav { font-size: 13px; }
.bf-store .bf-search input { font-size: 13px !important; }
.bf-store .bf-actions button, .bf-store .bf-account { font-size: 14px; }
.bf-store .bf-breadcrumb { font-size: 13px; }
.bf-store .bf-kicker { font-size: 12px; }
.bf-store .bf-hero p { font-size: 13px; }
.bf-store .bf-button { font-size: 12px; }
.bf-store .bf-section-label { font-size: 13px; }
.bf-store .bf-section-label small, .bf-store .bf-link, .bf-store .bf-order-total { font-size: 11px; }
.bf-store .bf-sku-form input, .bf-store .bf-sku-form select { font-size: 12px !important; }
.bf-store .bf-section-heading small, .bf-store .bf-why > small, .bf-store .bf-quote small { font-size: 11px; }
.bf-store .bf-section-heading h2, .bf-store .bf-why h2, .bf-store .bf-quote h2 { font-size: 21px; }
.bf-store .bf-section-heading > a, .bf-store .bf-section-heading label { font-size: 11px; }
.bf-store .bf-category-card b { font-size: 13px; }
.bf-store .bf-category-card small, .bf-store .bf-category-card p, .bf-store .bf-category-card em { font-size: 10px; }
.bf-store .bf-stock { font-size: 10px; }
.bf-store .bf-card-body > small, .bf-store .bf-card-image span { font-size: 10px; }
.bf-store .bf-card-body h3 { font-size: 13px; }
.bf-store .bf-card-body p, .bf-store .bf-spec-row, .bf-store .bf-price-row small { font-size: 10px; }
.bf-store .bf-price-row strong { font-size: 14px; }
.bf-store .bf-cert-strip > small { font-size: 10px; }
.bf-store .bf-cert-strip > b { font-size: 14px; }
.bf-store .bf-cert-strip span { font-size: 11px; }
.bf-store .bf-cert-strip span small { font-size: 9px; }
.bf-store .bf-why-grid article b { font-size: 12px; }
.bf-store .bf-why-grid article span, .bf-store .bf-footer, .bf-store .bf-footer > div > a:not(.bf-brand) { font-size: 10px; }
.bf-store .bf-catalog-title h1 { font-size: 24px; }
.bf-store .bf-catalog-title p { font-size: 12px; }
.bf-store .bf-filter-top, .bf-store .bf-filter-group, .bf-store .bf-active-filters { font-size: 11px; }
.bf-store .bf-filter-group > b { font-size: 12px; }
.bf-store .bf-size-buttons button, .bf-store .bf-pagination button, .bf-store .bf-pagination b { font-size: 11px; }
.bf-store .bf-detail-copy > small { font-size: 12px; }
.bf-store .bf-detail-lead { font-size: 14px; }
.bf-store .bf-detail-price { font-size: 31px; }
.bf-store .bf-detail-price small, .bf-store .bf-detail-tags span { font-size: 12px; }
.bf-store .bf-cart-head small, .bf-store .bf-cart-threshold, .bf-store .bf-cart-foot, .bf-store .bf-cart-item, .bf-store .bf-toast { font-size: 11px; }
.bf-store .bf-cart-item b { font-size: 12px; }
.bf-store .bf-cart-item span strong, .bf-store .bf-cart-foot .grand { font-size: 14px; }
.bf-store .bf-quote p { font-size: 12px; }
.bf-store .bf-quote input { font-size: 12px !important; }
  .filter-btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
  }

/* Full-width desktop layout and larger storefront type */
.bf-store .bf-header-inner,
.bf-store .bf-nav,
.bf-store .bf-breadcrumb,
.bf-store .bf-panel,
.bf-store .bf-section,
.bf-store .bf-catalog-title,
.bf-store .bf-catalog-layout,
.bf-store .bf-quote {
  max-width: 1500px;
}
.bf-store h1,
.bf-store h2,
.bf-store h3,
.bf-store p,
.bf-store .bf-section-heading h2,
.bf-store .bf-catalog-title h1 {
  color: var(--bf-ink);
}
.bf-store .bf-bulk-banner h2,
.bf-store .bf-quote h2,
.bf-store .bf-bulk-banner p,
.bf-store .bf-quote p {
  color: #fff;
}
.bf-store .bf-header-inner,
.bf-store .bf-nav,
.bf-store .bf-breadcrumb,
.bf-store .bf-section,
.bf-store .bf-catalog-title,
.bf-store .bf-catalog-layout {
  padding-left: 24px;
  padding-right: 24px;
}
.bf-store .bf-header-inner { min-height: 70px; }
.bf-store .bf-nav { padding-top: 11px; padding-bottom: 11px; gap: 32px; }
.bf-store .bf-breadcrumb { padding-top: 22px; padding-bottom: 14px; }
.bf-store .bf-hero { min-height: 355px; padding-top: 30px; padding-bottom: 38px; gap: 50px; }
.bf-store .bf-hero h1 { font-size: clamp(32px, 3.2vw, 48px); }
.bf-store .bf-hero p { font-size: 15px; max-width: 600px; }
.bf-store .bf-hero-image { height: 285px; }
.bf-store .bf-quick-order { max-width: 1500px; padding: 17px 24px; }
.bf-store .bf-sku-form input,
.bf-store .bf-sku-form select { min-height: 38px; font-size: 14px !important; }
.bf-store .bf-section { padding-top: 40px; padding-bottom: 40px; }
.bf-store .bf-section-heading { margin-bottom: 20px; }
.bf-store .bf-category-grid,
.bf-store .bf-product-grid { gap: 16px; }
.bf-store .bf-category-card { min-height: 210px; padding: 12px; }
.bf-store .bf-category-card span { height: 100px; font-size: 58px; padding-top: 18px; }
.bf-store .bf-category-card b { font-size: 15px; margin-top: 12px; }
.bf-store .bf-category-card small,
.bf-store .bf-category-card p,
.bf-store .bf-category-card em { font-size: 12px; }
.bf-store .bf-card-image { height: 190px; }
.bf-store .bf-card-body { padding: 12px; }
.bf-store .bf-card-body h3 { font-size: 15px; }
.bf-store .bf-card-body p,
.bf-store .bf-spec-row,
.bf-store .bf-price-row small { font-size: 12px; }
.bf-store .bf-price-row strong { font-size: 17px; }
.bf-store .bf-price-row .bf-button { min-height: 34px; font-size: 12px; }
.bf-store .bf-bulk-banner { max-width: 1450px; padding: 32px; }
.bf-store .bf-bulk-banner h2 { font-size: 28px; }
.bf-store .bf-bulk-banner p { font-size: 13px; }
.bf-store .bf-cert-strip { padding: 32px 24px; }
.bf-store .bf-why-grid { gap: 16px; }
.bf-store .bf-why-grid article { padding: 18px; }
.bf-store .bf-why-grid article b { font-size: 14px; }
.bf-store .bf-why-grid article span { font-size: 11px; }
.bf-store .bf-footer { padding-left: max(24px, calc((100% - 1450px)/2)); padding-right: max(24px, calc((100% - 1450px)/2)); }
.bf-store .bf-quote { max-width: 1450px; padding: 32px; }
.bf-store .bf-quote p { font-size: 14px; }

/* Consistent storefront header proportions */
.bf-store .bf-header-inner {
  display: grid;
  grid-template-columns: minmax(290px, 1fr) minmax(360px, 650px) minmax(290px, 1fr);
  align-items: center;
  gap: 28px;
}
.bf-store .bf-brand {
  min-width: 0;
  justify-self: start;
}
.bf-store .bf-brand > strong {
  width: 70px;
  height: 70px;
  flex-basis: 70px;
}
.bf-store .bf-brand b {
  font-size: 21px;
}
.bf-store .bf-brand small {
  font-size: 13px;
}
.bf-store .bf-search {
  width: 100%;
  max-width: none;
  justify-self: center;
}
.bf-store .bf-actions {
  margin-left: 0;
  justify-self: end;
  gap: 10px;
}
.bf-store .bf-actions > a,
.bf-store .bf-actions > button {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bf-blue);
  color: #fff;
  font-size: 20px;
}
.bf-store .bf-account {
  display: grid;
}
.bf-store .bf-account i {
  width: auto;
  height: auto;
  background: transparent;
  font-size: 20px;
}
.bf-store .bf-actions > a > i,
.bf-store .bf-actions > button > i {
  line-height: 1;
}

@media (max-width: 900px) {
  .bf-store .bf-header-inner {
    grid-template-columns: minmax(190px, 1fr) minmax(240px, 1.5fr) auto;
    gap: 14px;
  }
  .bf-store .bf-brand > strong {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }
  .bf-store .bf-brand b {
    font-size: 16px;
  }
  .bf-store .bf-brand small {
    font-size: 11px;
  }
}

@media (min-width: 1100px) {
  .bf-store .bf-product-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 800px) {
  .bf-store .bf-header-inner,
  .bf-store .bf-nav,
  .bf-store .bf-breadcrumb,
  .bf-store .bf-section,
  .bf-store .bf-catalog-title,
  .bf-store .bf-catalog-layout { padding-left: 16px; padding-right: 16px; }
  .bf-store .bf-hero { gap: 24px; }
  .bf-store .bf-card-image { height: 145px; }
  .bf-store .bf-category-grid .bf-category-card { flex-basis: calc((100% - 22px) / 2); }
  .bf-store .bf-category-arrow-left { left: -8px; }
  .bf-store .bf-category-arrow-right { right: -8px; }
  .bf-store .bf-cat-img-carousel .bf-category-arrow-left { left: -8px; }
  .bf-store .bf-cat-img-carousel .bf-category-arrow-right { right: -8px; }
}

/* ═════════════════════════════════════════════════════════════════
   BHARAT FASTENERS — REFINED DESIGN SYSTEM & COMPACT DENSITY
   Consistent 8-pt spacing, adaptive typography & balanced layouts
   ═════════════════════════════════════════════════════════════════ */

.bf-store {
  font-size: var(--font-body);
  line-height: 1.5;
  color: var(--bf-ink);
}

/* Headings text wrapping & hierarchy */
.bf-store h1,
.bf-store h2,
.bf-store h3 {
  color: var(--bf-ink);
  text-wrap: balance;
  line-height: 1.25;
}

.bf-store p {
  line-height: 1.55;
  text-wrap: pretty;
}

/* Top Announcement Bar */
.bf-store .bf-topbar {
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-4);
  letter-spacing: 0.2px;
}
.bf-store .bf-topbar .bf-announcement-text {
  display: inline;
  transition: opacity 0.3s ease;
}

/* Header & Navigation Bar */
.bf-store .bf-header-inner {
  min-height: 64px;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  max-width: var(--container-max);
}

.bf-store .bf-brand {
  min-width: 0;
  gap: var(--space-2);
}

.bf-store .bf-brand > strong {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 1.25rem;
  border-radius: var(--radius-sm);
}

.bf-store .bf-brand b {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  letter-spacing: 0.2px;
  line-height: 1.1;
}

.bf-store .bf-brand small {
  font-size: 0.72rem;
}

.bf-store .bf-search {
  height: 40px;
  max-width: 580px;
  border-radius: var(--radius-sm);
}

.bf-store .bf-search span {
  font-size: 1.2rem;
  padding: 0 var(--space-2);
}

.bf-store .bf-search input {
  font-size: 0.875rem !important;
}

.bf-store .bf-actions {
  gap: var(--space-2);
}

.bf-store .bf-actions > a,
.bf-store .bf-actions > button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  font-size: 1rem;
}

.bf-store .bf-actions em {
  min-width: 17px;
  height: 17px;
  font-size: 0.65rem;
}

.bf-store .bf-nav {
  font-size: 0.84rem;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  max-width: 860px;
}

/* Breadcrumbs */
.bf-store .bf-breadcrumb {
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-4);
  max-width: var(--container-max);
}

.bf-store .bf-kicker {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600;
}

/* Hero Section */
.bf-store .bf-hero {
  min-height: auto;
  padding: var(--space-5) var(--space-4);
  gap: var(--space-5);
  max-width: var(--container-max);
  margin: var(--space-2) auto 0;
}

.bf-store .bf-hero h1 {
  font-size: clamp(1.65rem, 2.6vw, 2.35rem);
  line-height: 1.2;
  margin: var(--space-3) 0 var(--space-2);
}

.bf-store .bf-hero p {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.55;
  max-width: 520px;
  color: var(--bf-muted);
}

.bf-store .bf-hero-image {
  height: clamp(200px, 20vw, 255px);
  border-radius: var(--radius-sm);
}

.bf-store .bf-button {
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* Express SKU Quick Order */
.bf-store .bf-quick-order {
  max-width: var(--container-max);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) auto var(--space-3);
  gap: var(--space-3);
}

.bf-store .bf-section-label {
  font-size: 0.875rem;
  gap: var(--space-2);
}

.bf-store .bf-section-label small,
.bf-store .bf-link,
.bf-store .bf-order-total {
  font-size: 0.8125rem;
}

.bf-store .bf-sku-form input,
.bf-store .bf-sku-form select {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  font-size: 0.84rem !important;
}

/* Sections & Headings */
.bf-store .bf-section {
  padding: var(--space-5) var(--space-4);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

.bf-store .bf-section-tint {
  max-width: none;
  background: #f0f3ff;
  padding-left: max(var(--space-4), calc((100% - var(--container-max))/2));
  padding-right: max(var(--space-4), calc((100% - var(--container-max))/2));
}

.bf-store .bf-section-heading {
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}

.bf-store .bf-section-heading small,
.bf-store .bf-why > small,
.bf-store .bf-quote small {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bf-store .bf-section-heading h2,
.bf-store .bf-why h2,
.bf-store .bf-quote h2 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 700;
  margin-top: 2px;
}

.bf-store .bf-section-heading > a,
.bf-store .bf-section-heading label {
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Category Grid & Cards */
.bf-store .bf-category-grid {
  gap: var(--space-3);
  padding: var(--space-1) var(--space-1) var(--space-2);
}

.bf-store .bf-category-card {
  min-height: 165px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}

.bf-store .bf-category-card span {
  height: 80px;
  font-size: 38px;
  padding-top: var(--space-2);
}

.bf-store .bf-category-card b {
  font-size: 0.8125rem;
  margin-top: var(--space-2);
}

.bf-store .bf-category-card small,
.bf-store .bf-category-card p,
.bf-store .bf-category-card em {
  font-size: 0.72rem;
  line-height: 1.35;
}

/* Product Card Grid */
.bf-store .bf-product-grid {
  gap: var(--space-4);
}

.bf-store .bf-stock {
  font-size: 0.65rem;
  padding: 3px 6px;
  border-radius: 3px;
}

.bf-store .bf-card-image {
  height: 165px;
  padding: var(--space-2);
}

.bf-store .bf-card-image span,
.bf-store .bf-card-body > small {
  font-size: 0.72rem;
}

.bf-store .bf-card-body {
  padding: var(--space-3);
}

.bf-store .bf-card-body h3 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  min-height: 2.3em;
  margin: var(--space-1) 0 var(--space-2);
}

.bf-store .bf-card-body p,
.bf-store .bf-spec-row,
.bf-store .bf-price-row small {
  font-size: 0.75rem;
}

.bf-store .bf-price-row strong {
  font-size: 1.05rem;
  font-weight: 700;
}

.bf-store .bf-price-row .bf-button {
  min-height: 32px;
  font-size: 0.75rem;
  padding: 4px 10px;
}

/* Bulk RFQ Banner */
.bf-store .bf-bulk-banner {
  max-width: var(--container-max);
  margin: var(--space-4) auto;
  padding: var(--space-5);
  border-radius: var(--radius);
  gap: var(--space-4);
}

.bf-store .bf-bulk-banner h2 {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  margin: var(--space-2) 0;
}

.bf-store .bf-bulk-banner p {
  font-size: 0.875rem;
  line-height: 1.5;
}

.bf-store .bf-upload-box {
  padding: var(--space-4);
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.bf-store .bf-upload-box small,
.bf-store .bf-upload-box label {
  font-size: 0.75rem;
}

/* Engineering Certification Strip */
.bf-store .bf-cert-strip {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4);
}

.bf-store .bf-cert-strip > small {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

.bf-store .bf-cert-strip > b {
  font-size: 1.15rem;
}

.bf-store .bf-cert-strip span {
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.bf-store .bf-cert-strip span small {
  font-size: 0.6875rem;
}

/* Why Choose Us Grid */
.bf-store .bf-why-grid {
  gap: var(--space-4);
}

.bf-store .bf-why-grid article {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  gap: var(--space-2);
}

.bf-store .bf-why-grid article b {
  font-size: 0.9375rem;
}

.bf-store .bf-why-grid article span {
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Storefront Footer */
.bf-store .bf-footer {
  font-size: 0.8125rem;
  padding: var(--space-6) max(var(--space-4), calc((100% - var(--container-max))/2)) var(--space-4);
}

.bf-store .bf-footer:not(:has(.bf-footer-grid)) {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.bf-store .bf-footer > div > a:not(.bf-brand) {
  font-size: 0.8125rem;
  margin: var(--space-1) 0;
}

/* Catalog Title & Filters */
.bf-store .bf-catalog-title {
  max-width: var(--container-max);
  padding: var(--space-3) var(--space-4) var(--space-2);
}

.bf-store .bf-catalog-title h1 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
}

.bf-store .bf-catalog-title p {
  font-size: 0.84rem;
}

.bf-store .bf-filter-top,
.bf-store .bf-filter-group,
.bf-store .bf-active-filters {
  font-size: 0.8125rem;
}

.bf-store .bf-filter-group > b {
  font-size: 0.875rem;
}

.bf-store .bf-size-buttons button,
.bf-store .bf-pagination button,
.bf-store .bf-pagination b {
  font-size: 0.8125rem;
  padding: 6px 10px;
}

/* Product Details Page */
.bf-store .bf-detail-copy > small {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.bf-store .bf-detail-copy h1 {
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  line-height: 1.25;
}

.bf-store .bf-detail-lead {
  font-size: 0.9rem;
  line-height: 1.5;
}

.bf-store .bf-detail-price {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  margin: var(--space-2) 0;
}

.bf-store .bf-detail-price small,
.bf-store .bf-detail-tags span {
  font-size: 0.8125rem;
}

.bf-store .bf-detail-specs {
  border-top: 1px solid var(--border-subtle, #e2e8f0);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 0;
  margin-top: 20px;
}

.bf-store .bf-detail-specs div {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  font-size: 0.8125rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.bf-store .bf-detail-specs span {
  color: var(--text-muted, #64748b);
  font-size: 0.8125rem;
  font-weight: 500;
  flex-shrink: 0;
}

.bf-store .bf-detail-specs b {
  color: var(--text-dark, #0f172a);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
  line-height: 1.35;
}

.bf-store .bf-detail-media {
  height: clamp(280px, 30vw, 370px);
  padding: var(--space-3);
  border-radius: var(--radius);
}

.bf-store .bf-qty button {
  padding: 8px 14px;
  font-size: 1rem;
}

.bf-store .bf-qty b {
  padding: 0 var(--space-3);
  font-size: 0.9375rem;
}

/* Slide-over Cart / Quick Drawer */
.bf-store .bf-cart-head {
  padding: var(--space-3);
}

.bf-store .bf-cart-head > div {
  font-size: 0.9375rem;
}

.bf-store .bf-cart-head small,
.bf-store .bf-cart-threshold,
.bf-store .bf-cart-foot,
.bf-store .bf-cart-item,
.bf-store .bf-toast {
  font-size: 0.8125rem;
}

.bf-store .bf-cart-item {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-3);
}

.bf-store .bf-cart-item img {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
}

.bf-store .bf-cart-item b {
  font-size: 0.84rem;
}

.bf-store .bf-cart-item span strong,
.bf-store .bf-cart-foot .grand {
  font-size: 1.05rem;
}

.bf-store .bf-mini-qty button {
  padding: 4px 8px;
  font-size: 0.75rem;
}

.bf-store .bf-quote p {
  font-size: 0.875rem;
}

.bf-store .bf-quote input {
  min-height: 38px;
  font-size: 0.84rem !important;
}

/* Storefront finishing pass */
.bf-store {
  font-family: Arial, Helvetica, sans-serif;
}
.bf-store h1,
.bf-store h2,
.bf-store h3,
.bf-store h4,
.bf-store h5,
.bf-store h6,
.bf-store button,
.bf-store .bf-button,
.bf-store .bf-nav a {
  font-family: 'Poppins', Arial, sans-serif;
}
.bf-store .quote-link {
  color: #111827;
  background: #fff;
  border-color: #111827;
}
.bf-store .quote-link:hover,
.bf-store .quote-link:active,
.bf-store .quote-link.active {
  color: #fff;
  background: var(--bf-blue);
  border-color: var(--bf-blue);
}
.bf-store .bf-nav .quote-link {
  border: 0;
  background: transparent;
  padding: 4px 0;
}
.bf-store .bf-nav .quote-link:hover,
.bf-store .bf-nav .quote-link:active,
.bf-store .bf-nav .quote-link.active {
  color: var(--bf-blue);
  background: transparent;
}
.bf-store .bf-category-card,
.bf-store .bf-product-card,
.bf-store .bf-why-grid article,
.bf-store .bf-panel {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.bf-store .bf-category-card:hover,
.bf-store .bf-product-card:hover,
.bf-store .bf-why-grid article:hover,
.bf-store .bf-panel:hover {
  transform: translateY(-4px);
}
.bf-store .bf-category-card span {
  display: block;
  padding: 0;
  background: #f0f3f7;
}
.bf-store .bf-category-card span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.bf-store .bf-category-card:hover span img {
  transform: scale(1.06);
}
.bf-store .bf-category-card:focus-visible,
.bf-store .bf-button:focus-visible,
.bf-store .bf-nav a:focus-visible {
  outline: 3px solid rgba(8, 125, 181, .35);
  outline-offset: 3px;
}
.bf-store .bf-category-carousel {
  position: relative;
}
.bf-store .bf-category-grid {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px 2px 8px;
}
.bf-store .bf-category-grid::-webkit-scrollbar {
  display: none;
}
.bf-store .bf-category-grid .bf-category-card {
  flex: 0 0 calc((100% - 154px) / 8);
}
.bf-store .bf-category-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #087db5, #075985);
  box-shadow: 0 5px 14px rgba(7, 89, 133, .28);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .2s ease, transform .2s ease;
}
.bf-store .bf-category-arrow:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.08);
}
.bf-store .bf-category-arrow:disabled,
.bf-store .bf-category-arrow.is-disabled {
  color: #e2e8f0;
  background: #cbd5e1;
  box-shadow: none;
  opacity: .65;
  cursor: not-allowed;
}
.bf-store .bf-category-arrow-left {
  left: -16px;
}
.bf-store .bf-category-arrow-right {
  right: -16px;
}
.bf-store .bf-cat-img-carousel {
  position: relative;
}
.bf-store .bf-cat-img-carousel .bf-cat-img-scroll {
  padding-left: 2px;
  padding-right: 2px;
}
.bf-store .bf-cat-img-carousel .bf-category-arrow-left {
  left: -16px;
}
.bf-store .bf-cat-img-carousel .bf-category-arrow-right {
  right: -16px;
}
.bf-store .bf-pagination button {
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #087db5, #075985);
  box-shadow: 0 4px 10px rgba(7, 89, 133, .2);
  cursor: pointer;
}
.bf-store .bf-pagination button:hover:not(:disabled) {
  background: linear-gradient(135deg, #0b8dcc, #08709f);
}
.bf-store .bf-pagination button:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.bf-store .bf-search-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 2px;
  background: #fff;
  border: 1px solid var(--bf-line);
  border-left: 4px solid var(--bf-blue);
}
.bf-store .bf-search-summary span,
.bf-store .bf-exact-label {
  color: #fff;
  background: var(--bf-blue);
  font: 700 11px 'Poppins', Arial, sans-serif;
  padding: 6px 9px;
}
.bf-store .bf-search-summary b {
  font: 600 15px 'Poppins', Arial, sans-serif;
  color: var(--bf-ink);
}
.bf-store .bf-search-summary small {
  margin-left: auto;
  color: var(--bf-muted);
}
.bf-store .bf-exact-result {
  grid-column: 1 / -1;
  position: relative;
  padding: 22px 16px 16px;
  margin-bottom: 4px;
  background: #fff;
  border: 1px solid #c7ddec;
  box-shadow: 0 4px 14px rgba(8, 125, 181, .08);
}
.bf-store .bf-exact-result .bf-exact-label {
  position: absolute;
  top: 0;
  right: 0;
}
.bf-store .bf-exact-result .bf-product-card {
  border: 0;
  box-shadow: none;
  transform: none;
}
.bf-store .bf-related-title {
  grid-column: 1 / -1;
  margin: 12px 0 -2px;
  font-size: 18px;
}
.bf-store .bf-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border: 1px solid var(--bf-line);
}
.bf-store .bf-no-results-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--bf-blue-pale);
  color: var(--bf-blue);
  font-size: 28px;
}
.bf-store .bf-no-results h2 {
  margin-bottom: 6px;
  font-size: 24px;
}
.bf-store .bf-no-results p {
  max-width: 480px;
  margin: 0 auto 20px;
  color: var(--bf-muted);
}
.bf-store .bf-content-page {
  background: #f8f9ff;
}
.bf-store .bf-content-hero,
.bf-store .bf-contact-intro {
  max-width: 1500px;
  margin: 0 auto;
  padding: 72px 24px 76px;
}
.bf-store .bf-content-hero {
  background: radial-gradient(circle at 75% 30%, rgba(8,125,181,.08), transparent 34%), #f8f9ff;
}
.bf-store .bf-content-hero h1,
.bf-store .bf-contact-intro h1 {
  max-width: 720px;
  margin: 18px 0 14px;
  font-size: clamp(34px, 4.5vw, 58px);
}
.bf-store .bf-content-hero h1 strong {
  color: var(--bf-blue);
}

/* Reference-style authentication screens */
.bf-account-page { --auth-blue:#087db5; --auth-blue-dark:#07527a; --auth-ink:#142235; background:#f8f8ff; color:var(--auth-ink); }
.bf-account-page #navbar { background:#fff; border-bottom:1px solid #e4e9f4; box-shadow:0 1px 8px rgba(13,45,77,.05); }
.bf-account-page .nav-logo-text { display:block; min-width:0; }
.bf-account-page .nav-logo-text .brand { display:block; color:#142235 !important; opacity:1 !important; visibility:visible !important; }
.bf-account-page .nav-logo-text .tagline { display:block; color:#617087 !important; opacity:1 !important; visibility:visible !important; }
.bf-account-page .nav-actions .btn.btn-ghost { color:#07527a !important; border-color:#9db8ce; background:#fff; opacity:1; }
.bf-account-page .auth-page { min-height:calc(100vh - 4.3rem); display:block; padding:1.1rem 1rem 2.5rem; background:linear-gradient(110deg,#f8f9ff 0%,#fbf9ff 54%,#fff8f3 100%); }
.auth-breadcrumb,.auth-shell,.auth-trust-row { width:min(100%,1080px); margin-inline:auto; }
.auth-breadcrumb { display:flex; align-items:center; gap:.5rem; min-height:2.2rem; color:#526176; font-size:.72rem; }
.auth-breadcrumb a,.auth-options a,.auth-switch a,.auth-back a { color:var(--auth-blue-dark); font-weight:700; }
.auth-security { margin-left:auto; padding:.35rem .7rem; border-radius:5px; background:#eef2ff; color:#254e7b; font-size:.63rem; font-weight:700; letter-spacing:.08em; }
.auth-shell { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr); gap:1.25rem; margin-top:1.25rem; }
.auth-intro { padding:clamp(1.5rem,4vw,2.5rem); border-radius:10px; background:linear-gradient(150deg,#07527a,#087db5); color:#fff; box-shadow:0 12px 30px rgba(7,82,122,.14); }
.auth-intro-mark,.auth-card-mark { display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:4px; background:#0b6b9c; color:#fff; font-family:var(--font-display); font-weight:800; font-size:.85rem; }
.auth-intro-mark { background:#fff; color:var(--auth-blue-dark); margin-bottom:1.3rem; }
.auth-eyebrow { margin:0; color:#8fc9e6; font-family:var(--font-display); font-size:.67rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.auth-intro h1 { max-width:390px; margin:.55rem 0 1rem; color:#fff; font-size:clamp(1.7rem,3vw,2.45rem); line-height:1.12; }
.auth-intro-copy { max-width:390px; color:#d8edf7; font-size:.9rem; }
.auth-benefits { display:grid; gap:1rem; margin-top:2rem; }
.auth-benefits>div { display:flex; gap:.7rem; align-items:flex-start; }
.auth-benefits>div>span { display:grid; place-items:center; flex:0 0 1.2rem; height:1.2rem; border-radius:50%; background:#e9f7ff; color:var(--auth-blue-dark); font-weight:800; }
.auth-benefits b,.auth-benefits small { display:block; }.auth-benefits b { font-family:var(--font-display); font-size:.82rem; }.auth-benefits small { margin-top:.15rem; color:#c9e5f2; font-size:.75rem; }
.auth-intro-contact { margin-top:2.5rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.25); font-size:.78rem; color:#d8edf7; }.auth-intro-contact a { color:#fff; font-weight:700; text-decoration:underline; }
.bf-account-page .auth-card { max-width:none; padding:clamp(1.35rem,3vw,2.1rem); border:1px solid #e4e8f2; border-radius:10px; background:#fff; box-shadow:0 10px 26px rgba(25,45,80,.07); }
.auth-card-header { display:flex; align-items:center; gap:.7rem; padding-bottom:1.15rem; border-bottom:1px solid #edf0f6; }.auth-card-header>div:last-child span { display:block; margin-top:.15rem; color:#718096; font-size:.73rem; }
.auth-screen-title { margin:1.3rem 0 1.15rem; }.auth-screen-title h2 { margin-bottom:.35rem; color:var(--auth-ink); font-size:1.35rem; }.auth-screen-title p { max-width:620px; color:#5e6b7d; font-size:.8rem; line-height:1.55; }
.auth-form { display:none; }.auth-form.active { display:block; }.auth-field { margin-bottom:.9rem; }.auth-field label { display:flex; justify-content:space-between; gap:.5rem; margin-bottom:.35rem; color:#1d2a3b; font-family:var(--font-display); font-size:.72rem; font-weight:600; }.auth-field label em { color:#d34c2f; font-style:normal; }.auth-field label small { color:#718096; font-family:var(--font-body); font-size:.65rem; font-weight:400; }
.bf-account-page .auth-field .form-control { width:100%; min-height:2.55rem; padding:.65rem .75rem; border:1px solid #cbd5e1; border-radius:4px; background:#f8faff; color:var(--auth-ink); font-size:.8rem!important; }.bf-account-page .auth-field .form-control:focus { border-color:var(--auth-blue); background:#fff; box-shadow:0 0 0 3px rgba(8,125,181,.12); outline:none; }
.auth-options { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin:.15rem 0 1rem; color:#4e5c70; font-size:.72rem; }.auth-options label { display:flex; gap:.35rem; align-items:center; }
.auth-primary { min-height:2.65rem; border-radius:4px; background:var(--auth-blue); font-size:.78rem; }.auth-primary:hover { background:var(--auth-blue-dark); }
.auth-divider { display:flex; align-items:center; gap:.7rem; margin:1rem 0 .8rem; color:#8390a3; font-size:.68rem; }.auth-divider:before,.auth-divider:after { content:""; flex:1; height:1px; background:#e7ebf2; }
.auth-switch,.auth-catalog-link { text-align:center; color:#5e6b7d; font-size:.74rem; }.auth-catalog-link { display:block; margin-top:.8rem; color:#536b82; }
.auth-section-label { margin:1.15rem 0 .8rem; padding:.55rem .7rem; background:#f4f7fa; color:#1d2a3b; font-family:var(--font-display); font-size:.78rem; font-weight:700; }.auth-two-col { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }.auth-terms { margin:.9rem 0; color:#667488; font-size:.7rem; }.auth-terms a { color:var(--auth-blue-dark); font-weight:700; }
.auth-centered { text-align:center; }.auth-centered p { margin-inline:auto; }.auth-recovery-icon { display:grid; place-items:center; width:3rem; height:3rem; margin:.25rem auto .8rem; border-radius:8px; background:#eff3ff; color:var(--auth-blue-dark); font-size:1.55rem; font-weight:700; }.auth-help-note { margin:.65rem 0 .9rem; padding:.65rem .75rem; background:#f1f4ff; color:#53627a; font-size:.7rem; }.auth-back { display:flex; justify-content:space-between; gap:.75rem; margin-top:1rem; font-size:.72rem; }
.auth-trust-row { display:flex; justify-content:center; gap:clamp(1rem,7vw,5rem); padding-top:1.5rem; color:var(--auth-blue-dark); }.auth-trust-row span { display:grid; grid-template-columns:auto 1fr; column-gap:.35rem; align-items:center; font-size:.85rem; }.auth-trust-row b { font-family:var(--font-display); font-size:.7rem; }.auth-trust-row small { grid-column:2; color:#758195; font-size:.62rem; }
@media (max-width:760px) { .auth-shell { grid-template-columns:1fr; }.auth-intro { padding:1.35rem; }.auth-intro h1 { font-size:1.65rem; }.auth-benefits { grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:1.35rem; }.auth-benefits>div { display:block; }.auth-benefits>div>span { margin-bottom:.35rem; }.auth-intro-contact { margin-top:1.25rem; } }
@media (max-width:520px) { .bf-account-page .auth-page { padding:.65rem .7rem 1.5rem; }.auth-security { display:none; }.auth-two-col,.auth-benefits { grid-template-columns:1fr; }.auth-benefits>div { display:flex; }.auth-trust-row { flex-wrap:wrap; justify-content:flex-start; gap:.8rem 1.2rem; } }

/* Focused sign-in screen */
.bf-account-page .login-site-header,
.bf-account-page .auth-breadcrumb,
.bf-account-page .auth-intro {
  display: block;
}
.bf-account-page .auth-breadcrumb,
.bf-account-page .auth-intro {
  display: none;
}
.bf-account-page .login-site-header .bf-header-inner,
.bf-account-page .login-site-header .bf-nav {
  display: grid;
}
.bf-account-page .login-site-header .bf-nav {
  display: flex;
}
.bf-account-page .auth-page {
  min-height: calc(100vh - 180px);
  padding: 52px 20px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: #fff;
}
.bf-account-page .auth-shell {
  width: min(100%, 570px);
  max-width: 570px;
  margin: 0 auto;
  display: block;
}
.bf-account-page .auth-card {
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.bf-account-page .login-brand {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 34px;
  text-align: center;
}
.bf-account-page .login-brand img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}
.bf-account-page .login-brand strong {
  color: #17243d;
  font: 700 23px/1.1 'Poppins', Arial, sans-serif;
  letter-spacing: .02em;
}
.bf-account-page .auth-card-header {
  display: none;
}
.bf-account-page .auth-screen-title {
  margin: 0 0 26px;
}
.bf-account-page .auth-screen-title h2 {
  margin: 0 0 8px;
  color: #111;
  font: 500 34px/1.15 Arial, Helvetica, sans-serif;
}
.bf-account-page .auth-screen-title p {
  color: #64748b;
  font-size: 20px;
  line-height: 1.4;
}
.bf-account-page .login-social-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 0;
}
.bf-account-page .login-social-btn {
  min-height: 58px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  color: #1f2937;
  font-size: 23px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .18s ease;
}
.bf-account-page .login-social-btn:first-child {
  color: #4285f4;
}
.bf-account-page .login-social-btn:last-child {
  color: #087db5;
}
.bf-account-page .login-social-btn:hover {
  border-color: #087db5;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(8,125,181,.12);
}

/* Detail Page Heart Wishlist Button */
.bf-detail-heart-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1px solid var(--bf-line, #cbd5e1);
  background: #ffffff;
  color: var(--bf-blue-dark, #0f172a);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  flex-shrink: 0;
}
.bf-detail-heart-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fff5f5;
  transform: scale(1.06);
}
.bf-detail-heart-btn.active,
.bf-detail-heart-btn.saved {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #ef4444;
}

/* Auth Modals for Google Account Chooser & Phone Login */
.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 3000;
  display: none;
  place-items: center;
  padding: 16px;
}
.auth-modal-backdrop.active,
.auth-modal-backdrop.open {
  display: grid;
}

/* Dark Google Account Prompt (matching authentic Google OAuth picker) */
.google-prompt-card {
  background: #201f24;
  color: #e8eaed;
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  width: min(100%, 460px);
  padding: 32px 28px 24px;
  position: relative;
  box-sizing: border-box;
  animation: authModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.google-prompt-close {
  position: absolute;
  top: 20px;
  right: 22px;
  background: transparent;
  border: none;
  font-size: 22px;
  color: #9aa0a6;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}
.google-prompt-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.google-prompt-top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
}

.google-prompt-badge {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #2d2b33;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  position: relative;
}

.google-prompt-dots {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(#4d4b53 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.25;
}

.google-prompt-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 6px;
  line-height: 1.35;
  text-align: left;
}

.google-prompt-subtitle {
  font-size: 0.95rem;
  color: #bdc1c6;
  margin: 0 0 18px;
  text-align: left;
}

.google-prompt-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.google-prompt-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  cursor: pointer;
  background: transparent;
  transition: background 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}
.google-prompt-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.google-prompt-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  flex-shrink: 0;
}

.google-prompt-meta {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.google-prompt-name {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-prompt-email {
  font-size: 13.5px;
  color: #9aa0a6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.google-prompt-arrow {
  color: #80868b;
  font-size: 14px;
  margin-left: 8px;
}

/* Light modal for phone sign-in */
.auth-modal-box {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  width: min(100%, 420px);
  padding: 26px 24px;
  position: relative;
  box-sizing: border-box;
  animation: authModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.phone-modal-header {
  text-align: center;
  margin-bottom: 20px;
}
.phone-modal-header h3 {
  margin: 8px 0 4px;
  font-size: 19px;
  color: #1f2937;
  font-weight: 700;
}
.phone-modal-header p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.phone-input-group:focus-within {
  border-color: #6538f5 !important;
  box-shadow: 0 0 0 3px rgba(101, 56, 245, 0.18) !important;
}

#phone-login-password:focus {
  border-color: #6538f5 !important;
  box-shadow: 0 0 0 3px rgba(101, 56, 245, 0.18) !important;
}
.bf-account-page .login-social-divider {
  margin: 24px 0;
}
.bf-account-page .auth-field {
  margin-bottom: 18px;
}
.bf-account-page .auth-field label {
  margin-bottom: 8px;
  color: #1f2937;
  font-size: 14px;
}
.bf-account-page .auth-field .form-control {
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  font-size: 17px !important;
}
.bf-account-page .auth-field .form-control:focus {
  border-color: #6538f5;
  box-shadow: 0 0 0 4px rgba(101,56,245,.22);
}
.bf-account-page .auth-options {
  margin: 4px 0 22px;
}
.bf-account-page .auth-primary {
  width: 100%;
  min-height: 58px;
  border-radius: 12px;
  background: #5732eb;
  border-color: #5732eb;
  font-size: 18px;
}
.bf-account-page .auth-primary:hover {
  background: #4525c9;
  border-color: #4525c9;
}
.bf-account-page .auth-divider {
  margin: 26px 0 20px;
  font-size: 16px;
}
.bf-account-page .auth-switch,
.bf-account-page .auth-catalog-link {
  font-size: 15px;
}
@media (max-width: 520px) {
  .bf-account-page .auth-page {
    min-height: auto;
    padding: 36px 18px 50px;
    align-items: flex-start;
  }
  .bf-account-page .login-brand {
    margin-bottom: 28px;
  }
  .bf-account-page .login-brand strong {
    font-size: 20px;
  }
  .bf-account-page .auth-screen-title h2 {
    font-size: 30px;
  }
  .bf-account-page .auth-screen-title p {
    font-size: 17px;
  }
}

/* Dashboard, procurement cart, and B2B checkout */
.bf-account-nav-link { margin-right:1rem; color:#07527a; font-family:var(--font-display); font-size:.75rem; font-weight:600; }
.bf-dashboard-columns { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(260px,.85fr); gap:1.2rem; align-items:start; margin:1.2rem 0; }
.bf-dashboard-main,.bf-dashboard-side { min-width:0; }
.bf-dashboard-section-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.75rem; }
.bf-dashboard-section-heading h2 { margin:0; color:#142235; font-size:1rem; }
.bf-dashboard-section-heading a { color:#087db5; font-size:.72rem; font-weight:700; }
.bf-dashboard-info,.bf-dashboard-support { display:grid; gap:.6rem; padding:1rem; margin-bottom:1rem; border:1px solid #dfe6f0; border-radius:7px; background:#fff; color:#445268; font-size:.72rem; box-shadow:0 4px 12px rgba(23,36,61,.04); }
.bf-dashboard-info>b { color:#142235; font-family:var(--font-display); }.bf-dashboard-info span { display:flex; justify-content:space-between; border-bottom:1px solid #edf0f5; padding-bottom:.35rem; }.bf-dashboard-info small { color:#718096; line-height:1.5; }
.bf-dashboard-support { background:#17243d; color:#dbe7f3; }.bf-dashboard-support>b { color:#fff; font-family:var(--font-display); }.bf-dashboard-support p { margin:0; font-size:.7rem; line-height:1.5; }.bf-dashboard-support a { padding:.6rem; text-align:center; background:#f05a16; color:#fff; border-radius:4px; font-size:.7rem; font-weight:700; }
.bf-procurement-shortcuts { margin:1.2rem 0; }.bf-procurement-shortcuts>div:last-child { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.bf-procurement-shortcuts a { display:grid; gap:.3rem; padding:1rem; border:1px solid #dfe6f0; border-radius:7px; background:#fff; box-shadow:0 4px 12px rgba(23,36,61,.04); }.bf-procurement-shortcuts a>b { display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:4px; background:#e7f3fb; color:#087db5; }.bf-procurement-shortcuts strong { color:#142235; font-family:var(--font-display); font-size:.75rem; }.bf-procurement-shortcuts span { color:#718096; font-size:.66rem; }
.bf-commerce-page { max-width:1500px; margin:0 auto; padding:1.5rem clamp(1rem,2vw,1.5rem) 4rem; background:#f8f9ff; color:#17243d; }
.bf-commerce-page[hidden] { display:none; }.bf-commerce-page .bf-breadcrumb { margin:0 0 1rem; }.bf-commerce-heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1.2rem; }.bf-commerce-heading small { color:#087db5; font-family:var(--font-display); font-size:.7rem; font-weight:700; }.bf-commerce-heading h1 { margin:.35rem 0 .25rem; font-size:1.45rem; }.bf-commerce-heading p { margin:0; color:#617087; font-size:.75rem; }.bf-mov-badge { padding:.7rem .9rem; border:1px solid #dce4ef; border-radius:7px; background:#eef3ff; color:#617087; font-size:.63rem; }.bf-mov-badge b { display:block; color:#087db5; font-size:.7rem; margin-top:.25rem; }
.bf-commerce-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(270px,.8fr); gap:1.2rem; align-items:start; }.bf-commerce-panel,.bf-order-summary { margin-bottom:1rem; padding:1rem; border:1px solid #dfe6f0; border-radius:7px; background:#fff; box-shadow:0 4px 12px rgba(23,36,61,.04); }.bf-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding-bottom:.7rem; margin-bottom:.7rem; border-bottom:1px solid #e5eaf2; color:#17243d; font-family:var(--font-display); font-size:.8rem; font-weight:700; }.bf-panel-heading span,.bf-panel-heading small { color:#617087; font-family:var(--font-body); font-size:.68rem; font-weight:400; }.bf-panel-heading button,.bf-panel-heading a { margin-left:auto; color:#d34c2f; font-size:.65rem; font-weight:700; }.bf-order-summary>div:not(.bf-panel-heading):not(.bf-summary-total) { display:flex; justify-content:space-between; gap:.75rem; padding:.35rem 0; color:#617087; font-size:.72rem; }.bf-order-summary>div b { color:#17243d; }.bf-order-summary hr { border:0; border-top:1px solid #e5eaf2; margin:.6rem 0; }.bf-summary-total { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }.bf-summary-total span { color:#17243d; font-family:var(--font-display); font-size:.78rem; font-weight:700; }.bf-summary-total strong { color:#087db5; font:700 1.45rem var(--font-display); }.bf-summary-note { display:block; margin:.8rem 0; padding:.6rem; background:#edf3ff; color:#617087; font-size:.64rem; line-height:1.45; }.bf-secure-note { display:block; margin-top:.7rem; color:#617087; text-align:center; font-size:.65rem; }.bf-button.full { width:100%; text-align:center; }
.bf-full-cart-item { display:grid; grid-template-columns:52px minmax(0,1fr) 170px; gap:.8rem; align-items:center; padding:1rem 0; border-bottom:1px solid #e5eaf2; }.bf-full-cart-item:last-child { border-bottom:0; }.bf-full-cart-item img { width:52px; height:52px; object-fit:cover; border:1px solid #e1e6f0; border-radius:4px; }.bf-full-cart-item>div:nth-child(2) { display:grid; gap:.25rem; }.bf-full-cart-item small { color:#087db5; font-size:.62rem; font-weight:700; }.bf-full-cart-item small b { padding:.15rem .3rem; background:#e7f3fb; }.bf-full-cart-item strong { color:#17243d; font-size:.78rem; }.bf-full-cart-item span { color:#617087; font-size:.67rem; }.bf-full-cart-item label { color:#617087; font-size:.63rem; }.bf-cart-item-price { display:grid; justify-items:end; gap:.3rem; }.bf-cart-item-price small { color:#f05a16; }.bf-cart-item-price>b { color:#17243d; font-size:.8rem; }.bf-cart-item-price em { color:#617087; font-size:.6rem; font-style:normal; }.bf-cart-item-price div { display:flex; align-items:center; gap:.4rem; }.bf-cart-item-price div button { min-width:1.6rem; height:1.5rem; border:1px solid #dce4ef; background:#f8f9ff; color:#17243d; }.bf-cart-item-price>button { color:#617087; font-size:1.1rem; }.bf-custom-request { display:flex; align-items:center; gap:.8rem; padding:1rem; border:1px solid #dfe6f0; border-radius:7px; background:#eef3ff; }.bf-custom-request>b { display:grid; place-items:center; width:2rem; height:2rem; background:#d7e8fb; color:#087db5; }.bf-custom-request div { display:grid; gap:.2rem; flex:1; }.bf-custom-request strong { font-size:.74rem; }.bf-custom-request span { color:#617087; font-size:.64rem; }.bf-custom-request .bf-button { white-space:nowrap; }
.bf-full-cart-item img { background: #fff; }
.bf-card-img-wrap,
.bf-related-img-wrap { background: #fff; }
.bf-card-img-wrap img,
.bf-related-img-wrap img { background: #fff; }
.bf-checkout-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; padding:.8rem; margin-bottom:1.2rem; border-radius:7px; background:#eef1ff; }.bf-checkout-steps>span,.bf-checkout-steps>b { display:flex; align-items:center; gap:.55rem; padding:.4rem; color:#617087; font-size:.67rem; font-weight:400; }.bf-checkout-steps>span:before,.bf-checkout-steps>b:before { display:grid; place-items:center; width:1.55rem; height:1.55rem; border-radius:7px; background:#e1e7ff; content:counter(step); }.bf-checkout-steps { counter-reset:step; }.bf-checkout-steps>* { counter-increment:step; }.bf-checkout-steps>b { color:#17243d; }.bf-checkout-steps>b:before { background:#087db5; color:#fff; }.bf-checkout-steps span span { font-family:var(--font-body); }.bf-address-options,.bf-payment-options { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }.bf-address-options label,.bf-payment-options label { position:relative; display:grid; gap:.3rem; padding:.8rem; border:1px solid #dfe6f0; border-radius:5px; color:#617087; font-size:.65rem; }.bf-address-options label:has(input:checked),.bf-payment-options label:has(input:checked) { border-color:#087db5; box-shadow:0 0 0 1px #087db5; }.bf-address-options input,.bf-payment-options input { position:absolute; right:.7rem; top:.7rem; }.bf-address-options b,.bf-payment-options b { color:#17243d; font-size:.74rem; }.bf-address-options small { color:#087db5; font-weight:700; }.bf-address-options em { float:right; padding:.15rem .3rem; background:#087db5; color:#fff; font-style:normal; }.bf-commerce-page .bf-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }.bf-commerce-page .bf-form-grid label { display:grid; gap:.3rem; color:#17243d; font-size:.68rem; font-weight:700; }.bf-commerce-page .bf-form-grid input { width:100%; padding:.65rem; border:1px solid #dce4ef; border-radius:5px; background:#fafbff; font-size:.72rem!important; }.bf-checkout-lower { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }.bf-verified { display:flex; justify-content:space-between; padding:.65rem; background:#f1f4ff; color:#617087; font-size:.68rem; }.bf-verified b { color:#087db5; }.bf-commerce-panel>small { color:#617087; font-size:.64rem; }.bf-commerce-panel>footer { display:block; margin-top:1.5rem; color:#617087; font-size:.64rem; }.bf-radio-card { position:relative; display:grid; gap:.2rem; padding:.65rem; margin-bottom:.45rem; border:1px solid #e0e6f0; border-radius:4px; font-size:.65rem; }.bf-radio-card input { position:absolute; left:.5rem; top:.7rem; }.bf-radio-card b,.bf-radio-card span { padding-left:1.1rem; }.bf-radio-card strong { position:absolute; right:.6rem; top:.7rem; color:#087db5; }.bf-place-order { margin-bottom:1rem; min-height:2.8rem; }
.checkout-summary-item { display:flex; justify-content:space-between; gap:.6rem; padding:.35rem 0; color:#617087; font-size:.65rem; }.checkout-summary-item b { color:#17243d; white-space:nowrap; }
@media (max-width:760px) { .bf-account-nav-link { display:none; }.bf-dashboard-columns,.bf-commerce-layout { grid-template-columns:1fr; }.bf-procurement-shortcuts>div:last-child,.bf-address-options,.bf-payment-options,.bf-checkout-lower { grid-template-columns:1fr; }.bf-commerce-heading { flex-direction:column; }.bf-checkout-steps { grid-template-columns:1fr 1fr; }.bf-full-cart-item { grid-template-columns:45px minmax(0,1fr); }.bf-cart-item-price { grid-column:2; justify-items:start; }.bf-custom-request { align-items:flex-start; flex-wrap:wrap; }.bf-custom-request .bf-button { width:100%; }.bf-commerce-page .bf-form-grid { grid-template-columns:1fr; } }

/* Final logged-in dashboard surface */
.bf-dashboard-wrap { max-width:1500px; margin:0 auto; padding:1.8rem clamp(1rem,2vw,1.5rem) 3.5rem; background:#f8f9ff; color:#17243d; }
.bf-dashboard-wrap .bf-dashboard-hero { position:relative; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; overflow:hidden; min-height:88px; margin-bottom:1.2rem; padding:1.15rem 1.4rem; border-radius:6px; background:linear-gradient(110deg,#087db5,#0788c8); color:#fff; }
.bf-dashboard-wrap .bf-dashboard-hero:after { content:"ϟ"; position:absolute; right:1rem; bottom:-3rem; color:rgba(255,255,255,.1); font:170px var(--font-display); }
.bf-dashboard-wrap .bf-dashboard-hero>div { position:relative; z-index:1; }.bf-dashboard-wrap .bf-dashboard-hero small { font-size:.58rem; letter-spacing:.1em; }.bf-dashboard-wrap .bf-dashboard-hero h1 { margin:.25rem 0 .15rem; color:#fff; font-size:1.5rem; }.bf-dashboard-wrap .bf-dashboard-hero p { margin:0; color:#d9effa; font-size:.65rem; }.bf-account-status { display:grid; grid-template-columns:1fr auto; gap:.15rem .7rem; align-items:center; padding:.65rem .75rem; border-radius:5px; background:rgba(0,70,120,.25); font-size:.62rem; }.bf-account-status span { grid-column:1; color:#d9effa; }.bf-account-status strong { grid-column:1; color:#fff; }.bf-account-status button { grid-column:2; grid-row:1 / span 2; padding:.55rem .8rem; border-radius:3px; background:#fff; color:#07527a; font:600 .65rem var(--font-display); }
.bf-dashboard-wrap .bf-dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.25rem; }.bf-dashboard-wrap .bf-dashboard-stats article { min-height:98px; padding:1rem; border:1px solid #e4e8f1; border-radius:6px; background:#fff; box-shadow:0 3px 10px rgba(23,36,61,.03); }.bf-dashboard-wrap .bf-dashboard-stats article>div:first-child { display:flex; justify-content:space-between; align-items:center; color:#17243d; font-size:.65rem; }.bf-dashboard-wrap .bf-dashboard-stats article>div:first-child b { display:grid; place-items:center; width:1.55rem; height:1.55rem; border-radius:4px; background:#e5f3ff; color:#087db5; }.bf-dashboard-wrap .bf-dashboard-stats article:nth-child(2)>div:first-child b { background:#fff0e2; color:#f05a16; }.bf-dashboard-wrap .bf-dashboard-stats article:nth-child(3)>div:first-child b { background:#e9edff; color:#536dcc; }.bf-dashboard-wrap .bf-dashboard-stats article>strong { display:block; margin:.55rem 0 .1rem; color:#17243d; font:700 1.3rem var(--font-display); }.bf-dashboard-wrap .bf-dashboard-stats article>strong small { color:#617087; font:400 .6rem var(--font-body); }.bf-dashboard-wrap .bf-dashboard-stats article>small { color:#617087; font-size:.6rem; }.bf-dashboard-wrap .bf-dashboard-stats article>a { display:block; margin-top:.35rem; color:#087db5; font-size:.58rem; }.bf-credit-meter { height:4px; margin-top:.65rem; border-radius:4px; background:#dfe5fb; }.bf-credit-meter i { display:block; width:72%; height:100%; border-radius:inherit; background:#087db5; }
.bf-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(255px,.85fr); gap:1.2rem; align-items:start; }.bf-dashboard-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:.65rem; }.bf-dashboard-title h2 { margin:0; font-size:1rem; }.bf-dashboard-title a { color:#087db5; font-size:.62rem; }.bf-dashboard-wrap #acc-orders { display:block; }.bf-dashboard-wrap #orders-list { min-height:150px; padding:0; border:1px solid #e4e8f1; border-radius:6px; overflow:hidden; background:#fff; }.bf-dashboard-wrap .order-card { display:grid; grid-template-columns:1.1fr 1.5fr .8fr auto; align-items:center; gap:.7rem; margin:0; padding:.75rem .8rem; border:0; border-bottom:1px solid #e8edf4; border-radius:0; box-shadow:none; }.bf-dashboard-wrap .order-card:last-child { border-bottom:0; }.bf-dashboard-wrap .order-card-header { display:block; padding:0; border:0; }.bf-dashboard-wrap .order-card-header>div:last-child { margin-top:.15rem; }.bf-dashboard-wrap .order-card .order-number { color:#17243d; font-size:.68rem; font-weight:700; }.bf-dashboard-wrap .order-date,.bf-dashboard-wrap .order-items-list { color:#617087; font-size:.6rem; }.bf-dashboard-wrap .order-items-list { grid-column:2; }.bf-dashboard-wrap .order-footer { display:flex; align-items:center; gap:.4rem; padding:0; border:0; }.bf-dashboard-wrap .order-total { display:none; }.bf-dashboard-wrap .order-footer .btn { padding:.4rem .55rem; font-size:.58rem; }.bf-dashboard-wrap .badge { padding:.25rem .45rem; font-size:.58rem; white-space:nowrap; }.bf-orders-loading { padding:2rem; color:#617087; text-align:center; font-size:.72rem; }
.bf-dashboard-rail { display:grid; gap:1rem; }.bf-compliance-card { display:grid; gap:.55rem; padding:1rem; border:1px solid #e4e8f1; border-radius:6px; background:#fff; color:#617087; font-size:.62rem; }.bf-compliance-card>div { display:flex; justify-content:space-between; color:#17243d; font-size:.75rem; }.bf-compliance-card>div strong { color:#0b9a68; font-size:.58rem; }.bf-compliance-card>span { display:flex; justify-content:space-between; padding-bottom:.3rem; border-bottom:1px solid #edf0f5; }.bf-compliance-card small { color:#617087; }.bf-compliance-card p { margin:0; padding:.5rem; background:#f8f9ff; line-height:1.4; }.bf-compliance-card a { color:#087db5; }.bf-dashboard-wrap .bf-dashboard-support { margin:0; padding:1rem; border-radius:6px; }.bf-dashboard-wrap .bf-dashboard-support a { background:#f05a16; }
.bf-dashboard-wrap .bf-procurement-shortcuts { margin-top:1.3rem; }.bf-dashboard-wrap .bf-procurement-shortcuts>div:last-child { gap:.8rem; }.bf-dashboard-wrap .bf-procurement-shortcuts a { min-height:100px; }.bf-dashboard-wrap .bf-procurement-shortcuts a:nth-child(2)>b { background:#fff0e2; color:#f05a16; }.bf-dashboard-wrap .bf-procurement-shortcuts a:nth-child(3)>b { background:#fff4d8; color:#b56a00; }.bf-dashboard-signout { display:block; margin:1rem 0 0 auto; padding:.45rem .75rem; border:1px solid #cbd7e5; border-radius:4px; background:#fff; color:#07527a; font:600 .65rem var(--font-display); }
@media (max-width:760px) { .bf-dashboard-wrap .bf-dashboard-hero { align-items:flex-start; flex-direction:column; }.bf-account-status { width:100%; }.bf-dashboard-wrap .bf-dashboard-stats,.bf-dashboard-grid { grid-template-columns:1fr; }.bf-dashboard-wrap .bf-dashboard-stats article { min-height:85px; }.bf-dashboard-wrap .bf-procurement-shortcuts>div:last-child { grid-template-columns:1fr; }.bf-dashboard-wrap .order-card { grid-template-columns:1fr auto; }.bf-dashboard-wrap .order-card .order-items-list { grid-column:1; }.bf-dashboard-wrap .order-card .order-footer { grid-column:2; grid-row:1 / span 2; flex-direction:column; } }
.bf-store .bf-content-hero p,
.bf-store .bf-contact-intro p {
  max-width: 650px;
  color: var(--bf-muted);
  line-height: 1.7;
}
.bf-store .bf-content-hero .bf-button,
.bf-store .bf-about-cta .bf-button {
  margin: 22px 8px 0 0;
}
.bf-store .bf-content-section {
  max-width: 1500px;
  margin: 0 auto;
  padding: 58px 24px;
  text-align: center;
}
.bf-store .bf-content-section > small,
.bf-store .bf-contact-intro .bf-kicker,
.bf-store .bf-about-cta small {
  color: var(--bf-blue);
  letter-spacing: .8px;
  font-size: 11px;
}
.bf-store .bf-content-section h2 {
  margin: 8px 0;
  font-size: 27px;
}
.bf-store .bf-content-section > p {
  max-width: 620px;
  margin: 0 auto 24px;
  color: var(--bf-muted);
}
.bf-store .bf-content-tint {
  max-width: none;
  background: #f0f3ff;
}
.bf-store .bf-capability-grid,
.bf-store .bf-range-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1450px;
  margin: 28px auto 0;
  text-align: left;
}
.bf-store .bf-capability-grid article,
.bf-store .bf-range-grid article {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--bf-line);
  border-radius: 6px;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bf-store .bf-capability-grid article:hover,
.bf-store .bf-range-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(23,36,61,.1);
}
.bf-store .bf-capability-grid span,
.bf-store .bf-range-grid span {
  color: var(--bf-muted);
  font-size: 13px;
  line-height: 1.5;
}
.bf-store .bf-range-grid {
  grid-template-columns: repeat(4, 1fr);
}
.bf-store .bf-range-grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}
.bf-store .bf-sector-list {
  display: grid;
  gap: 8px;
  max-width: 560px;
  margin: 24px auto 0;
  text-align: left;
}
.bf-store .bf-sector-list span {
  padding: 12px 15px;
  border: 1px solid #dce4ef;
  background: #f0f3ff;
  color: var(--bf-ink);
  font-size: 13px;
}
.bf-store .bf-about-cta {
  margin: 28px auto 60px;
  max-width: 1450px;
  padding: 50px 24px;
  border-radius: 7px;
  background: linear-gradient(120deg, #07527a, #087db5);
  color: #fff;
  text-align: center;
}
.bf-store .bf-about-cta h2 {
  color: #fff;
  font-size: 30px;
  margin: 10px 0;
}
.bf-store .bf-about-cta p {
  color: #d9effa;
}
.bf-store .bf-about-cta small {
  color: #d9effa;
}
.bf-store .bf-contact-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  background: #f0f3ff;
}
.bf-store .bf-contact-intro h1 {
  width: 100%;
  margin-bottom: 0;
  font-size: 32px;
}
.bf-store .bf-contact-intro p {
  margin: 0;
}
.bf-store .bf-contact-intro > div {
  white-space: nowrap;
}
.bf-store .bf-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr);
  gap: 28px;
  max-width: 1450px;
  margin: 32px auto;
  padding: 0 24px;
}
.bf-store .bf-contact-form,
.bf-store .bf-contact-card,
.bf-store .bf-manager-card,
.bf-store .bf-contact-cta {
  padding: 24px;
  border: 1px solid var(--bf-line);
  border-radius: 6px;
  background: #fff;
}
.bf-store .bf-contact-form-head {
  display: grid;
  gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bf-line);
}
.bf-store .bf-contact-form-head small,
.bf-store .bf-manager-card span,
.bf-store .bf-contact-card p {
  color: var(--bf-muted);
  font-size: 12px;
}
.bf-store .bf-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 0;
}
.bf-store .bf-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--bf-ink);
  font-size: 12px;
}
.bf-store .bf-form-grid .full {
  grid-column: 1 / -1;
}
.bf-store .bf-form-grid input,
.bf-store .bf-form-grid select,
.bf-store .bf-form-grid textarea {
  width: 100%;
  border: 1px solid #d5deea;
  border-radius: 4px;
  padding: 11px;
  color: var(--bf-ink);
  background: #f7f8ff;
}
.bf-store .bf-form-grid textarea {
  min-height: 110px;
  resize: vertical;
}
.bf-store .bf-consent {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--bf-muted);
  font-size: 11px;
}
.bf-store .bf-contact-form .bf-button {
  display: block;
  margin: 0 0 0 auto;
}
.bf-store .bf-manager-card {
  display: grid;
  gap: 7px;
  margin-top: 18px;
  background: #f0f3ff;
}
.bf-store .bf-manager-card strong {
  color: var(--bf-blue-dark);
}
.bf-store .bf-contact-card {
  display: grid;
  gap: 12px;
}
.bf-store .bf-contact-card span {
  flex: 1;
  color: var(--bf-muted);
  font-size: 11px;
}
.bf-store .bf-contact-card span b {
  color: var(--bf-blue);
}
.bf-store .bf-contact-cta {
  margin-top: 18px;
  color: #fff;
  background: linear-gradient(135deg, #07527a, #087db5);
}
.bf-store .bf-contact-cta p {
  color: #d9effa;
  font-size: 12px;
  line-height: 1.5;
}
.bf-store .bf-contact-cta .bf-button {
  background: #fff;
  border-color: #fff;
  color: var(--bf-ink);
}
.bf-store .bf-map-placeholder {
  min-height: 250px;
  padding: 28px 24px;
  background: linear-gradient(135deg, #bdebf1, #d8eef0 45%, #b1d8f0);
  color: var(--bf-ink);
}
.bf-store .bf-map-placeholder > small {
  display: block;
  margin: 0 auto 130px;
  max-width: 1450px;
  color: var(--bf-blue-dark);
  letter-spacing: .8px;
}
.bf-store .bf-map-placeholder div {
  display: grid;
  gap: 5px;
  max-width: 300px;
  padding: 16px;
  border-radius: 4px;
  background: rgba(255,255,255,.9);
  font-size: 12px;
}
.bf-store .bf-map-placeholder span {
  color: var(--bf-muted);
  font-size: 11px;
}
@media (max-width: 700px) {
  .bf-store .bf-content-hero,
  .bf-store .bf-contact-intro { padding: 42px 16px; }
  .bf-store .bf-capability-grid,
  .bf-store .bf-range-grid,
  .bf-store .bf-contact-layout { grid-template-columns: 1fr; }
  .bf-store .bf-form-grid { grid-template-columns: 1fr; }
  .bf-store .bf-form-grid .full { grid-column: auto; }
  .bf-store .bf-contact-intro > div { white-space: normal; }
  .bf-store .bf-contact-form .bf-button {
    width: 100%;
  }
}

/* Align the contact hero into two consistent content columns. */
.bf-store .bf-contact-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(32px, 7vw, 120px);
  row-gap: 28px;
}
.bf-store .bf-contact-intro .bf-kicker {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.bf-store .bf-contact-intro h1 {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  margin: 0;
  max-width: 680px;
  font-size: clamp(30px, 3.3vw, 52px);
  line-height: 1.12;
}
.bf-store .bf-contact-intro p {
  grid-column: 1;
  grid-row: 2;
  max-width: 650px;
  line-height: 1.65;
}
.bf-store .bf-contact-intro > div {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  white-space: normal;
}
@media (max-width: 700px) {
  .bf-store .bf-contact-intro {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 18px;
  }
  .bf-store .bf-contact-intro .bf-kicker,
  .bf-store .bf-contact-intro h1,
  .bf-store .bf-contact-intro p,
  .bf-store .bf-contact-intro > div {
    grid-column: 1;
    grid-row: auto;
  }
  .bf-store .bf-contact-intro h1 {
    font-size: clamp(28px, 8vw, 38px);
  }
  .bf-store .bf-contact-intro > div {
    justify-content: flex-start;
  }
}
/* Brand logo alignment */
.bf-store .bf-brand { align-items:center; gap:12px; min-width:270px; }
.bf-store .bf-brand > strong { display:grid; place-items:center; flex:0 0 58px; width:58px; height:58px; overflow:hidden; border:1px solid #dce4ef; border-radius:5px; background:#fff; }
.bf-store .bf-brand > strong img { display:block; width:100%; height:100%; object-fit:cover; object-position:left center; }
.bf-store .bf-brand span { min-width:0; }
.bf-store .bf-brand b { display:block; line-height:1.2; font-size:18px; }
.bf-store .bf-brand small { display:block; line-height:1.2; font-size:12px; }
.bf-account-page .nav-logo { align-items:center; gap:.55rem; }
.bf-account-page .nav-logo-icon { display:grid; place-items:center; width:42px; height:42px; overflow:hidden; border:1px solid #dce4ef; border-radius:5px; background:#fff; }
.bf-account-page .nav-logo-icon img { display:block; width:100%; height:100%; object-fit:cover; object-position:left center; }
.bf-account-page .nav-logo-text { line-height:1.2; }
.bf-account-page .nav-logo-text .brand, .bf-account-page .nav-logo-text .tagline { white-space:nowrap; }
@media (max-width:560px) {
  .bf-store .bf-brand { min-width:0; }
  .bf-store .bf-brand > strong { flex-basis:42px; width:42px; height:42px; }
  .bf-store .bf-brand b { font-size:11px; }
  .bf-account-page .nav-logo-icon { width:34px; height:34px; }
  .bf-account-page .nav-logo-text .tagline { display:none !important; }
}

.bf-store .bf-catalog-title {
  padding-top: 28px;
  padding-bottom: 20px;
}
.bf-store #category-directory[hidden],
.bf-store #catalog-results-layout[hidden] {
  display: none;
}
.bf-store .bf-card-heart {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--bf-line);
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--bf-blue-dark);
  font-size: 18px;
}
.bf-store .bf-card-heart:hover {
  color: var(--bf-orange);
  transform: scale(1.08);
}
.bf-store .bf-wishlist-page {
  min-height: 620px;
  background: #f8f9ff;
}
.bf-store .bf-wishlist-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  max-width: 1500px;
  margin: auto;
  padding: 12px 24px 24px;
}
.bf-store .bf-wishlist-heading h1 {
  margin: 10px 0 4px;
  font-size: 30px;
}
.bf-store .bf-wishlist-heading p {
  max-width: 650px;
  margin: 0;
  color: var(--bf-muted);
  font-size: 13px;
}
.bf-store .bf-wishlist-toolbar,
.bf-store .bf-wishlist-grid,
.bf-store .bf-wishlist-note {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
.bf-store .bf-wishlist-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: #f0f3ff;
  border: 1px solid #e0e6f2;
}
.bf-store .bf-wishlist-toolbar input {
  width: min(100%, 440px);
  padding: 12px;
  border: 1px solid #d5deea;
  background: #fff;
  color: var(--bf-ink);
}
.bf-store .bf-wishlist-toolbar span {
  margin-left: auto;
  color: var(--bf-muted);
  font-size: 12px;
}
.bf-store .bf-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 18px 24px 28px;
}
.bf-store .bf-wishlist-item {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--bf-line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(23,36,61,.04);
}
.bf-store .bf-wishlist-item > img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  background: #eef1f5;
}
.bf-store .bf-wishlist-item-main {
  min-width: 0;
}
.bf-store .bf-wishlist-item-main small {
  color: var(--bf-blue);
  font-size: 10px;
}
.bf-store .bf-wishlist-item h3 {
  margin: 4px 0;
  font-size: 14px;
}
.bf-store .bf-wishlist-item p {
  margin: 0;
  color: var(--bf-muted);
  font-size: 11px;
}
.bf-store .bf-wishlist-price {
  display: flex;
  gap: 24px;
  margin: 12px 0;
  padding: 9px;
  background: #f7f8fc;
  color: var(--bf-muted);
  font-size: 10px;
}
.bf-store .bf-wishlist-price b {
  color: var(--bf-ink);
  font-size: 12px;
}
.bf-store .bf-stock-line {
  color: #16864b;
  font-size: 10px;
}
.bf-store .bf-wishlist-actions {
  display: grid;
  justify-items: end;
  gap: 14px;
}
.bf-store .bf-wishlist-actions > button:first-child {
  color: var(--bf-muted);
  font-size: 17px;
}
.bf-store .bf-wishlist-actions .bf-button {
  min-width: 120px;
  font-size: 11px;
}
.bf-store .bf-wishlist-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 50px;
  padding: 18px 20px;
  background: #f0f3ff;
  border: 1px solid #e0e6f2;
  color: var(--bf-ink);
}
.bf-store .bf-wishlist-note span {
  flex: 1;
  color: var(--bf-muted);
  font-size: 11px;
}
.bf-store .bf-wishlist-empty,
.bf-store .bf-wishlist-loading {
  max-width: 1500px;
  margin: 18px auto 60px;
  padding: 70px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--bf-line);
}
.bf-store .bf-wishlist-empty > div {
  margin-bottom: 10px;
  color: var(--bf-blue);
  font-size: 42px;
}
.bf-store .bf-wishlist-empty h2 {
  margin-bottom: 8px;
}
.bf-store .bf-wishlist-empty p {
  margin-bottom: 20px;
  color: var(--bf-muted);
}
.bf-store .bf-wishlist-empty .bf-button {
  margin: 4px;
}
@media (max-width: 760px) {
  .bf-store .bf-wishlist-heading {
    align-items: start;
    flex-direction: column;
  }
  .bf-store .bf-wishlist-grid {
    grid-template-columns: 1fr;
    padding-left: 16px;
    padding-right: 16px;
  }
  .bf-store .bf-wishlist-toolbar {
    margin: 0 16px;
  }
  .bf-store .bf-wishlist-note {
    margin-left: 16px;
    margin-right: 16px;
    align-items: start;
    flex-direction: column;
  }
}
.bf-store .bf-catalog-title h1 {
  font-size: 30px;
}
.bf-store .bf-category-directory {
  max-width: 1500px;
  margin: 0 auto;
  padding: 10px 24px 70px;
}
.bf-store .bf-category-directory h2 {
  margin-bottom: 24px;
  font-size: 24px;
}
.bf-store .bf-all-category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px 22px;
}
.bf-store .bf-all-category-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 145px;
  color: var(--bf-ink);
  text-align: center;
  transition: transform .2s ease, color .2s ease;
}
.bf-store .bf-all-category-card span {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #f4f5f8;
}
.bf-store .bf-all-category-card img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.bf-store .bf-all-category-card b {
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
}
.bf-store .bf-all-category-card small {
  color: var(--bf-muted);
  font-size: 10px;
}
.bf-store .bf-all-category-card:hover {
  color: var(--bf-blue);
  transform: translateY(-4px);
}
.bf-store .bf-catalog-layout {
  max-width: 1500px;
  grid-template-columns: 280px 1fr;
  gap: 18px;
}
.bf-store .bf-filters {
  border-radius: 5px;
  padding: 18px;
}
.bf-store .bf-filter-group {
  font-size: 12px;
  padding: 18px 0;
}
.bf-store .bf-filter-group > b {
  font-size: 13px;
}
.bf-store .bf-filter-group label {
  line-height: 1.4;
}
.bf-store .bf-active-filters {
  min-height: 56px;
  padding: 12px;
}
.bf-store .bf-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.bf-store .bf-product-card {
  border-radius: 6px;
}
.bf-store .bf-card-image {
  height: 190px;
  padding: 10px;
}
.bf-store .bf-card-body {
  padding: 14px;
}
.bf-store .bf-card-body h3 {
  min-height: 44px;
  font-size: 15px;
  line-height: 1.35;
}
.bf-store .bf-card-body p {
  min-height: 30px;
  font-size: 12px;
}
.bf-store .bf-card-tags {
  display: flex;
  gap: 5px;
  margin: 8px 0;
}
.bf-store .bf-card-tags span {
  padding: 4px 6px;
  color: var(--bf-muted);
  background: #f0f2f6;
  font-size: 9px;
}
.bf-store .bf-card-links {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--bf-muted);
  font-size: 10px;
}
.bf-store .bf-card-links a {
  color: var(--bf-blue);
}
.bf-store .bf-price-row .bf-button {
  min-width: 125px;
  font-size: 11px;
}
@media (max-width: 900px) {
  .bf-store .bf-all-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bf-store .bf-catalog-layout { grid-template-columns: 220px 1fr; }
}
@media (max-width: 640px) {
  .bf-store .bf-all-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
  .bf-store .bf-category-directory { padding-left: 16px; padding-right: 16px; }
  .bf-store .bf-catalog-title h1 { font-size: 23px; }
  .bf-store .bf-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bf-store .bf-card-image { height: 135px; }
  .bf-store .bf-card-body { padding: 10px; }
  .bf-store .bf-card-body h3 { font-size: 12px; }
  .bf-store .bf-price-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .bf-store .bf-price-row .bf-button { width: 100%; }
}

/* ═══════════════════════════════════════════
   BHARAT FASTENERS — CATALOG REDESIGN (ALL PRODUCTS)
   ═══════════════════════════════════════════ */

/* Page Header & Intro */
.bf-store .bf-catalog-intro {
  max-width: 1500px;
  margin: 0 auto;
  padding: 6px 24px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.bf-store .bf-catalog-intro h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--bf-ink, #0b2545);
  margin: 0 0 4px;
}
.bf-store .bf-catalog-intro p {
  color: var(--bf-muted, #64748b);
  font-size: 13px;
  margin: 0;
  max-width: 680px;
  line-height: 1.45;
}

/* Compact Category Navigation (Shop by Category) */
.bf-store .bf-category-nav-bar {
  max-width: 1500px;
  margin: 0 auto 16px;
  padding: 0 24px;
}
.bf-store .bf-cat-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bf-store .bf-cat-heading-row h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--bf-ink, #0b2545);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bf-store .bf-cat-heading-row small {
  color: var(--bf-muted, #64748b);
  font-size: 12px;
}
.bf-store .bf-chip-scroll-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bf-store .bf-category-chips-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.bf-store .bf-category-chips-scroll::-webkit-scrollbar {
  height: 4px;
}
.bf-store .bf-category-chips-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.bf-store .bf-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #1e293b;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  flex-shrink: 0;
  user-select: none;
}
.bf-store .bf-cat-chip:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: var(--bf-blue, #087db5);
}
.bf-store .bf-cat-chip.active {
  background: var(--bf-blue, #087db5);
  border-color: var(--bf-blue, #087db5);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(8, 125, 181, 0.25);
}
.bf-store .bf-cat-chip .chip-emoji {
  font-size: 13px;
  line-height: 1;
}
.bf-store .bf-cat-chip .chip-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 500;
}
.bf-store .bf-cat-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.bf-store .bf-chip-arrow {
  display: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  flex-shrink: 0;
  z-index: 2;
  transition: all 0.15s;
}
.bf-store .bf-chip-arrow:hover {
  background: #f1f5f9;
  color: #0f172a;
}
@media (min-width: 900px) {
  .bf-store .bf-chip-arrow {
    display: inline-flex;
  }
}

/* Catalog Layout & Responsive Grid */
.bf-store .bf-catalog-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  padding: 0 24px 40px;
  max-width: 1500px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .bf-store .bf-catalog-layout {
    grid-template-columns: 1fr;
    padding: 0 16px 30px;
  }
  .bf-store .bf-filters.desktop-sidebar {
    display: none;
  }
}

/* Filter Sidebar (Desktop) */
.bf-store .bf-filters.desktop-sidebar {
  background: #ffffff;
  border: 1px solid var(--bf-line, #e2e8f0);
  border-radius: 8px;
  padding: 18px;
  height: fit-content;
  position: sticky;
  top: 90px;
}
.bf-store .bf-filter-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bf-line, #e2e8f0);
}
.bf-store .bf-filter-top b {
  font-size: 14px;
  color: var(--bf-ink, #0b2545);
}
.bf-store .bf-filter-top button,
.bf-store .bf-clear-link {
  color: var(--bf-orange, #e65100);
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.bf-store .bf-filter-group {
  border-bottom: 1px solid var(--bf-line, #e2e8f0);
  padding: 14px 0;
  display: grid;
  gap: 8px;
}
.bf-store .bf-filter-group:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.bf-store .bf-filter-group > b {
  font-size: 13px;
  font-weight: 700;
  color: var(--bf-ink, #0b2545);
  margin-bottom: 2px;
}
.bf-store .bf-filter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.bf-store .bf-filter-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  user-select: none;
}
.bf-store .bf-filter-list label:hover {
  color: var(--bf-blue, #087db5);
}
.bf-store .bf-filter-list input[type="radio"] {
  accent-color: var(--bf-blue, #087db5);
  cursor: pointer;
  margin: 0;
  width: 15px;
  height: 15px;
}
.bf-store .bf-filter-list label small {
  margin-left: auto;
  color: #94a3b8;
  font-size: 11px;
}

/* Metric Size Button Group */
.bf-store .bf-size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.bf-store .bf-size-btn {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 6px 2px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}
.bf-store .bf-size-btn:hover {
  border-color: var(--bf-blue, #087db5);
  color: var(--bf-blue, #087db5);
}
.bf-store .bf-size-btn.active {
  background: var(--bf-blue, #087db5);
  border-color: var(--bf-blue, #087db5);
  color: #ffffff;
  font-weight: 600;
}

/* Active Filters & Controls Bar */
.bf-store .bf-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid var(--bf-line, #e2e8f0);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
}
.bf-store .bf-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bf-store .bf-result-count {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}
.bf-store .bf-active-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bf-store .bf-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
}
.bf-store .bf-filter-pill button {
  border: 0;
  background: transparent;
  color: #1e40af;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.bf-store .bf-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.bf-store .bf-sort-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
}
.bf-store .bf-sort-select {
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
.bf-store .bf-sort-select:focus {
  border-color: var(--bf-blue, #087db5);
}

/* Mobile Filter Trigger Button */
.bf-store .bf-mobile-filter-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: var(--bf-ink, #0b2545);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.bf-store .bf-mobile-filter-btn:hover {
  border-color: var(--bf-blue, #087db5);
  color: var(--bf-blue, #087db5);
}
.bf-store .bf-mobile-filter-badge {
  display: inline-block;
  background: var(--bf-orange, #e65100);
  color: #fff;
  border-radius: 9999px;
  font-size: 10px;
  padding: 1px 6px;
  font-weight: 700;
}
@media (max-width: 900px) {
  .bf-store .bf-mobile-filter-btn {
    display: inline-flex;
  }
}

/* Mobile Filter Drawer */
.bf-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  z-index: 300;
}
.bf-filter-backdrop.open {
  display: block;
}
.bf-filter-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(88vw, 360px);
  background: #ffffff;
  z-index: 310;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 8px 0 24px rgba(15, 23, 42, 0.2);
}

/* Refined storefront header scale */
.bf-store .bf-brand > strong {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bf-store .bf-brand > strong img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bf-store .bf-brand b {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.15;
}
.bf-store .bf-brand small {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.9;
}
.bf-store .bf-actions > a,
.bf-store .bf-actions > button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 6px);
}
.bf-store .bf-account i,
.bf-store .bf-actions > a > i,
.bf-store .bf-actions > button > i {
  font-size: 15px;
}
.bf-store .bf-actions em {
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 16px;
}

@media (max-width: 900px) {
  .bf-store .bf-brand > strong {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  .bf-store .bf-brand b {
    font-size: 1.05rem;
  }
  .bf-store .bf-brand small {
    font-size: 0.68rem;
  }
}

@media (max-width: 700px) {
  .bf-store .bf-brand > strong {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .bf-store .bf-brand b {
    font-size: 0.95rem;
  }
  .bf-store .bf-brand small {
    font-size: 0.65rem;
  }
}


/* Shared footer layout for both legacy and grid-based storefront pages */
.bf-store .bf-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 36px max(24px, calc((100% - 1450px) / 2)) 22px;
  display: block;
  background: #0f172a;
  border-top: 1px solid #1e293b;
  color: #f8fafc;
  font-size: 14px;
}
.bf-store .bf-footer-grid {
  max-width: 1450px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}
.bf-store .bf-footer-grid > div,
.bf-store .bf-footer > div:not(.bf-footer-grid):not(.bf-footer-bottom) {
  min-width: 0;
}
.bf-store .bf-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.bf-store .bf-footer-brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
}
.bf-store .bf-footer-brand strong {
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
}
.bf-store .bf-footer h4,
.bf-store .bf-footer > div > b {
  display: block;
  margin: 0 0 12px;
  color: #fff;
  font-size: 15px;
}
.bf-store .bf-footer p,
.bf-store .bf-footer small {
  color: #cbd5e1;
  line-height: 1.6;
}
.bf-store .bf-footer-grid p {
  margin: 0 0 10px;
  max-width: 360px;
}
.bf-store .bf-footer a:not(.bf-brand) {
  display: block;
  margin: 8px 0;
  color: #cbd5e1;
  text-decoration: none;
}
.bf-store .bf-footer a:not(.bf-brand):hover {
  color: #38bdf8;
}
.bf-store .bf-footer-bottom {
  max-width: 1450px;
  margin: 28px auto 0;
  padding-top: 16px;
  border-top: 1px solid #334155;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #94a3b8;
  font-size: 12px;
}
.bf-store .bf-footer > div:not(.bf-footer-grid):not(.bf-footer-bottom) > .bf-brand {
  margin-bottom: 14px;
}
.bf-store .bf-footer > div:not(.bf-footer-grid):not(.bf-footer-bottom) > .bf-brand > strong {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
}
.bf-store .bf-footer > div:not(.bf-footer-grid):not(.bf-footer-bottom) > .bf-brand b {
  font-size: 18px;
}
.bf-store .bf-footer > div:not(.bf-footer-grid):not(.bf-footer-bottom) > .bf-brand small {
  font-size: 12px;
}

@media (max-width: 760px) {
  .bf-store .bf-footer {
    padding-left: 18px;
    padding-right: 18px;
  }
  .bf-store .bf-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }
  .bf-store .bf-footer:not(:has(.bf-footer-grid)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }
  .bf-store .bf-footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
  .bf-store .bf-footer-bottom {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 460px) {
  .bf-store .bf-footer-grid {
    grid-template-columns: 1fr;
  }
  .bf-store .bf-footer-grid > div:first-child {
    grid-column: auto;
  }
}

/* Final product-card precedence rules */
.bf-store .bf-product-grid,
.bf-store .bf-catalog-grid {
  align-items: stretch;
}

.bf-store .bf-product-card,
.bf-store .bf-catalog-grid .bf-product-card {
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
}

.bf-store .bf-card-image,
.bf-store .bf-card-img-wrap {
  flex: 0 0 auto;
  overflow: hidden;
}

.bf-store .bf-card-body,
.bf-store .bf-card-content {
  min-width: 0;
  overflow: hidden;
}

.bf-store .bf-card-body h3,
.bf-store .bf-card-content h3,
.bf-store .bf-card-body p,
.bf-store .bf-card-content p,
.bf-store .bf-card-links a {
  overflow-wrap: anywhere;
}

.bf-store .bf-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.bf-store .bf-card-tags span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-store .bf-price-row {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 8px;
}

.bf-store .bf-price-row > div {
  min-width: 0;
}

.bf-store .bf-price-row .bf-button {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: nowrap;
}

.bf-store .bf-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bf-store .bf-card-image span {
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 850px) {
  .bf-store .bf-catalog-grid .bf-product-card {
    min-height: 455px;
  }
}

@media (max-width: 849px) {
  .bf-store .bf-product-grid,
  .bf-store .bf-catalog-grid {
    column-gap: 10px;
    row-gap: 14px;
  }
}

@media (max-width: 520px) {
  .bf-store .bf-price-row {
    align-items: stretch;
    flex-direction: column;
  }

  .bf-store .bf-price-row .bf-button {
    width: 100%;
  }
  .bf-store .bf-footer:not(:has(.bf-footer-grid)) {
    grid-template-columns: 1fr;
  }
}

/* Compact, aligned storefront header */
/* Compact, aligned storefront header */
.bf-store .bf-header-inner {
  min-height: 0;                       /* CHANGED: was 88px */
  padding-top: 8px;
  padding-bottom: 8px;
  grid-template-columns: minmax(270px, 1fr) minmax(320px, 620px) minmax(170px, 1fr);
  gap: 16px;
}
.bf-store .bf-brand {
  align-self: center;
  flex-direction: column;              /* CHANGED: logo on top, text below */
  align-items: center;
  text-align: center;
  gap: 2px;
  min-width: 0;
}
.bf-store .bf-brand > strong {
  width: auto;                         /* CHANGED: was 76px */
  height: auto;                        /* CHANGED: was 76px */
  flex: 0 0 auto;                      /* CHANGED: was flex-basis: 76px */
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
.bf-store .bf-brand > strong img {     /* NEW */
  width: auto;
  height: 80px;                        /* LOGO SIZE: change this number */
  object-fit: contain;
  object-position: center;
}
.bf-store .bf-brand span {             /* NEW */
  justify-items: center;
}
.bf-store .bf-brand b {
  font-size: 22px;
  line-height: 1.05;
}
.bf-store .bf-brand small {
  font-size: 13px;
}
.bf-store .bf-search {
  height: 44px;
}
.bf-store .bf-actions {
  gap: 8px;
}
.bf-store .bf-tax-selector {
  order: -1;
  width: 102px;
  height: 34px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid #94a3b8;
  border-radius: 18px;
  background: #fff;
  color: var(--bf-ink);
  font: 500 13px Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.bf-store .bf-actions .bf-account {
  order: 0;
}
.bf-store .bf-actions .bf-wishlist {
  order: 1;
}
.bf-store .bf-actions > button {
  order: 2;
}
.bf-store .bf-tax-selector:focus-visible {
  outline: 2px solid var(--bf-blue);
  outline-offset: 2px;
}
.bf-store .bf-nav {
  max-width: 820px;
  gap: 18px;
  padding-top: 5px;
  padding-bottom: 7px;
}

@media (max-width: 900px) {
  .bf-store .bf-header-inner {
    min-height: 0;                     /* CHANGED: was 78px */
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) auto;
    gap: 10px;
  }
  .bf-store .bf-brand > strong {       /* CHANGED: removed fixed 62px box */
    width: auto;
    height: auto;
    flex: 0 0 auto;
  }
  .bf-store .bf-brand > strong img {   /* NEW */
    height: 64px;                      /* tablet/mobile logo size */
  }
  .bf-store .bf-brand b {
    font-size: 17px;
  }
  .bf-store .bf-brand small {
    font-size: 11px;
  }
  .bf-store .bf-tax-selector {
    width: 92px;
    font-size: 12px;
  }
}
.bf-filter-drawer.open {
  transform: translateX(0);
}
.bf-filter-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.bf-filter-drawer-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--bf-ink, #0b2545);
}
.bf-filter-drawer-head button {
  border: 0;
  background: transparent;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
  line-height: 1;
}
.bf-filter-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.bf-filter-drawer-foot {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
.bf-filter-drawer-foot .bf-button {
  flex: 1;
}

/* Responsive Product Catalogue Grid (4 cols desktop, 3 cols med, 2 cols mobile) */
.bf-store .bf-catalog-grid {
  display: grid !important;
  gap: 16px;
}
@media (min-width: 1200px) {
  .bf-store .bf-catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 850px) and (max-width: 1199px) {
  .bf-store .bf-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 849px) {
  .bf-store .bf-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
}

/* Product Card Enhanced B2B Design */
.bf-store .bf-catalog-grid .bf-product-card {
  border-radius: 8px;
  border: 1px solid var(--bf-line, #e2e8f0);
  background: transparent;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.bf-store .bf-catalog-grid .bf-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(11, 37, 69, 0.08);
  border-color: #cbd5e1;
}
.bf-store .bf-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.bf-store .bf-card-badge.in-stock {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.bf-store .bf-card-badge.low-stock {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.bf-store .bf-card-badge.out-of-stock {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.bf-store .bf-card-wish-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.bf-store .bf-card-wish-btn:hover {
  background: #fff;
  color: var(--bf-orange, #e65100);
  transform: scale(1.1);
}
.bf-store .bf-card-img-wrap {
  height: 170px;
  background: transparent;
  display: grid;
  place-items: center;
  padding: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
  position: relative;
}
@media (max-width: 640px) {
  .bf-store .bf-card-img-wrap {
    height: 130px;
    padding: 8px;
  }
}

/* ── Product card alignment and overflow normalization ── */
.bf-store .bf-product-grid,
.bf-store .bf-catalog-grid {
  align-items: stretch;
  min-width: 0;
}

.bf-store .bf-product-card,
.bf-store .bf-catalog-grid .bf-product-card {
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
}

.bf-store .bf-card-image,
.bf-store .bf-card-img-wrap {
  flex: 0 0 auto;
  overflow: hidden;
}

.bf-store .bf-card-image img,
.bf-store .bf-card-img-wrap img {
  display: block;
  max-width: 100%;
}

.bf-store .bf-card-body,
.bf-store .bf-card-content {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.bf-store .bf-card-body h3,
.bf-store .bf-card-content h3 {
  overflow-wrap: anywhere;
  word-break: normal;
}

.bf-store .bf-card-body p,
.bf-store .bf-card-content p {
  overflow-wrap: anywhere;
}

.bf-store .bf-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.bf-store .bf-card-tags span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-store .bf-price-row {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 8px;
}

.bf-store .bf-price-row > div {
  min-width: 0;
}

.bf-store .bf-price-row strong {
  overflow-wrap: anywhere;
}

.bf-store .bf-price-row .bf-button {
  flex: 0 1 auto;
  white-space: nowrap;
}

.bf-store .bf-card-links {
  flex-wrap: wrap;
  gap: 6px;
}

.bf-store .bf-card-links a {
  overflow-wrap: anywhere;
}

.bf-store .bf-card-image span {
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 850px) {
  .bf-store .bf-catalog-grid .bf-product-card {
    min-height: 455px;
  }

  .bf-store .bf-catalog-grid .bf-card-content {
    min-height: 285px;
  }
}

@media (max-width: 849px) {
  .bf-store .bf-product-grid,
  .bf-store .bf-catalog-grid {
    column-gap: 10px;
    row-gap: 14px;
  }

  .bf-store .bf-price-row .bf-button {
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .bf-store .bf-card-tags span {
    font-size: 9px;
  }

  .bf-store .bf-price-row {
    align-items: stretch;
    flex-direction: column;
  }

  .bf-store .bf-price-row .bf-button {
    width: 100%;
  }
}
.bf-store .bf-card-img-wrap img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.25s ease;
}
.bf-store .bf-catalog-grid .bf-product-card:hover .bf-card-img-wrap img {
  transform: scale(1.04);
}
.bf-store .bf-card-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: transparent;
}
@media (max-width: 640px) {
  .bf-store .bf-card-content {
    padding: 10px;
  }
}
.bf-store .bf-card-sku {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.bf-store .bf-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--bf-ink, #0b2545);
  margin: 4px 0 6px;
  line-height: 1.35;
  min-height: 38px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .bf-store .bf-card-title {
    font-size: 12px;
    min-height: 32px;
  }
}
.bf-store .bf-card-spec-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.bf-store .bf-card-spec-tag {
  font-size: 10px;
  color: #475569;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.bf-store .bf-card-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
@media (max-width: 640px) {
  .bf-store .bf-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
}
.bf-store .bf-card-price-block {
  display: flex;
  flex-direction: column;
}
.bf-store .bf-card-price-block small {
  font-size: 9px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 600;
}
.bf-store .bf-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.bf-store .bf-card-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--bf-ink, #0b2545);
}
.bf-store .bf-card-mrp {
  font-size: 11px;
  color: #94a3b8;
  text-decoration: line-through;
}
.bf-store .bf-card-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bf-blue, #087db5);
  color: #ffffff;
  border: 0;
  padding: 7px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.bf-store .bf-card-add-btn:hover {
  background: #066795;
}
.bf-store .bf-card-add-btn:active {
  transform: scale(0.96);
}

/* Loading & Empty States */
.bf-catalog-skeleton {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 20px 0;
}
.bf-skeleton-card {
  height: 290px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: bfShimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes bfShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.bf-no-results-box {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  margin: 10px 0;
}
.bf-no-results-box .box-icon {
  font-size: 44px;
  margin-bottom: 12px;
  display: block;
}
.bf-no-results-box h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}
.bf-no-results-box p {
  font-size: 13px;
  color: #64748b;
  max-width: 440px;
  margin: 0 auto 16px;
  line-height: 1.5;
}


/* -- IMAGE-BASED CATEGORY CARDS (Shop by Category on All Products page) -- */
.bf-cat-img-section {
  padding: 28px 20px 24px;
  background: #fff;
  border-bottom: 1px solid #e8edf2;
}

.bf-cat-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.bf-cat-heading-row h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1a2332;
  margin: 0;
}

.bf-cat-heading-row small {
  color: #6b7a99;
  font-size: 13px;
}

/* Horizontal scrollable row of category cards */
.bf-cat-img-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bf-cat-img-scroll::-webkit-scrollbar {
  display: none;
}

/* Individual category card � button reset + card style */
button.bf-cat-img-card {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 0 0 130px;
  scroll-snap-align: start;
  text-align: center;
  transition: transform 0.18s ease;
  padding: 4px 0;
}

button.bf-cat-img-card:hover {
  transform: translateY(-3px);
}

button.bf-cat-img-card:hover .bf-cat-img-circle {
  border-color: #087db5;
  box-shadow: 0 4px 16px rgba(8,125,181,0.18);
}

button.bf-cat-img-card.active .bf-cat-img-circle {
  border-color: #087db5;
  box-shadow: 0 0 0 3px rgba(8,125,181,0.18);
}

button.bf-cat-img-card.active .bf-cat-img-name {
  color: #087db5;
  font-weight: 700;
}

button.bf-cat-img-card.active .bf-cat-img-link {
  color: #087db5;
}

/* Circular image container */
.bf-cat-img-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  flex-shrink: 0;
}

.bf-cat-img-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  mix-blend-mode: multiply;
}

/* Category label */
.bf-cat-img-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a2332;
  line-height: 1.3;
  max-width: 110px;
  word-break: break-word;
  transition: color 0.15s;
}

/* "Click here ?" link text */
.bf-cat-img-link {
  font-size: 11px;
  color: #6b7a99;
  text-decoration: underline;
  transition: color 0.15s;
}

/* Skeleton placeholders while loading */
button.bf-cat-img-card.skeleton {
  pointer-events: none;
}

button.bf-cat-img-card.skeleton .bf-cat-img-circle,
button.bf-cat-img-card.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: bf-shimmer 1.4s infinite;
  width: 90px;
  height: 90px;
  border-radius: 50%;
}

@keyframes bf-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile: shrink circles a bit */
@media (max-width: 600px) {
  .bf-cat-img-section {
    padding: 20px 14px 18px;
  }
  .bf-cat-img-scroll {
    gap: 14px;
  }
  button.bf-cat-img-card {
    flex: 0 0 100px;
  }
  .bf-cat-img-circle {
    width: 72px;
    height: 72px;
  }
  .bf-cat-heading-row h2 {
    font-size: 17px;
  }
}
/* Desktop header: logo spans two rows, search + nav stacked beside it */
@media (min-width: 901px) {
  .bf-store .bf-header {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 620px) minmax(170px, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 0;
    padding: 10px max(24px, calc((100% - 1500px) / 2)) 8px;
  }
  .bf-store .bf-header-inner {
    display: contents;              /* brand, search, actions become grid items of .bf-header */
  }
  .bf-store .bf-brand {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: start;
    align-self: center;
  }
  .bf-store .bf-search {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .bf-store .bf-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: end;
  }
  .bf-store .bf-nav {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px 0 0;
    gap: 18px;
  }
  .bf-store .bf-brand > strong img {
    height: 68px;                   /* slightly smaller so the header isn't too tall */
  }
  .bf-store .bf-brand b {
    font-size: 20px;
  }
  .bf-store .bf-brand small {
    font-size: 12px;
  }
}
/* Pill-shaped search box */
.bf-store .bf-search {
  border-radius: 999px;
  padding: 0 6px 0 10px;
  background: #fff;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 4px rgba(32, 33, 36, 0.12);
}
.bf-store .bf-search:focus-within {
  border-color: #087db5;
  box-shadow: 0 1px 8px rgba(8, 125, 181, 0.25);
}
.bf-store .bf-search input {
  padding-left: 4px;
}
/* Bigger nav link font */
.bf-store .bf-nav,
.bf-store .bf-nav a {
  font-size: 16px;      /* CHANGE THIS: 17px smaller, 20px bigger */
}

/* Circular pagination: arrows + numbered dots */
.bf-store .bf-pagination {
  margin-top: 26px;
}
.bf-store .bf-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.bf-store .bf-pager-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.bf-store .bf-pager-pages {
  display: flex;
  gap: 18px;
}

/* Previous / Next circles */
.bf-store .bf-pagination .bf-pager-arrow {
  width: 54px;
  height: 54px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #087db5;
  color: #fff;
  font-size: 22px;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.bf-store .bf-pagination .bf-pager-arrow:hover:not(:disabled) {
  background: #066795;
  transform: scale(1.06);
}
.bf-store .bf-pagination .bf-pager-arrow:disabled {
  background: #cbd5e1;
  color: #64748b;
  opacity: 1;
  cursor: not-allowed;
}

/* Circular pagination: arrows + numbered dots */
.bf-store .bf-pagination {
  margin-top: 26px;
}
.bf-store .bf-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.bf-store .bf-pager-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.bf-store .bf-pager-pages {
  display: flex;
  gap: 18px;
}

/* Previous / Next circles */
.bf-store .bf-pagination .bf-pager-arrow {
  width: 54px;
  height: 54px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #087db5;
  color: #fff;
  font-size: 22px;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.bf-store .bf-pagination .bf-pager-arrow:hover:not(:disabled) {
  background: #066795;
  transform: scale(1.06);
}
.bf-store .bf-pagination .bf-pager-arrow:disabled {
  background: #cbd5e1;
  color: #64748b;
  opacity: 1;
  cursor: not-allowed;
}

/* Numbered dots */
.bf-store .bf-pagination .bf-pager-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
}
.bf-store .bf-pagination .bf-pager-page:hover:not(:disabled) {
  background: none;
  box-shadow: none;
}
.bf-store .bf-pager-dot {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d1d9e6;
  transition: background .15s ease;
}
.bf-store .bf-pager-page:hover .bf-pager-dot {
  background: #b6c2d6;
}
.bf-store .bf-pager-page.active .bf-pager-dot {
  background: #087db5;
}
.bf-store .bf-pager-page.active .bf-pager-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.bf-store .bf-pager-num {
  font-size: 17px;
  color: #64748b;
}
.bf-store .bf-pager-page.active .bf-pager-num {
  color: #087db5;
  font-weight: 700;
}
.bf-store .bf-pager-text {
  font-size: 16px;
  color: var(--bf-ink);
}

@media (max-width: 520px) {
  .bf-store .bf-pagination .bf-pager-arrow { width: 44px; height: 44px; font-size: 18px; }
  .bf-store .bf-pager-row,
  .bf-store .bf-pager-pages { gap: 12px; }
}

/* Smaller pagination */
.bf-store .bf-pagination {
  margin-top: 18px;
}
.bf-store .bf-pager {
  gap: 8px;
}
.bf-store .bf-pager-row,
.bf-store .bf-pager-pages {
  gap: 12px;
}
.bf-store .bf-pagination .bf-pager-arrow {
  width: 36px;
  height: 36px;
  font-size: 15px;
}
.bf-store .bf-pagination .bf-pager-page {
  gap: 4px;
}
.bf-store .bf-pager-dot {
  width: 20px;
  height: 20px;
}
.bf-store .bf-pager-page.active .bf-pager-dot::after {
  width: 7px;
  height: 7px;
}
.bf-store .bf-pager-num {
  font-size: 13px;
}
.bf-store .bf-pager-text {
  font-size: 13px;
}

@media (max-width: 520px) {
  .bf-store .bf-pagination .bf-pager-arrow { width: 32px; height: 32px; font-size: 13px; }
  .bf-store .bf-pager-row,
  .bf-store .bf-pager-pages { gap: 9px; }
}


/* Quantity box: grey − and + buttons, white number box in the middle */
.bf-store .bf-mini-qty,
.bf-store .bf-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #dce4ef;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  gap: 0;
}

/* the − and + buttons */
.bf-store .bf-mini-qty button:not(.remove),
.bf-store .bf-qty button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: #eef2f8;        /* light grey-blue */
  color: #17243d;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.bf-store .bf-mini-qty button:not(.remove):hover,
.bf-store .bf-qty button:hover {
  background: #dfe7f2;
}

/* the number in the middle */
.bf-store .bf-mini-qty b,
.bf-store .bf-mini-qty > span,
.bf-store .bf-qty b {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;           /* white middle box */
  color: #17243d;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

/* cart drawer: keep the Remove (×) button outside the box */
.bf-store .bf-mini-qty .remove {
  width: auto;
  min-width: 36px;
  height: 44px;
  padding: 0 10px;
  margin-left: 8px;
  background: transparent;
  color: var(--bf-orange);
}

/* Cart quantity: − [1] + as equal boxes, Remove outside */
.bf-store .bf-cart-item .bf-mini-qty {
  display: flex;
  align-items: center;
  gap: 0;
  width: fit-content;
  border: 0;
  background: none;
  overflow: visible;
}

/* − and + buttons */
.bf-store .bf-cart-item .bf-mini-qty button:not(.remove) {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce4ef;
  background: #eef2f8;
  color: #17243d;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.bf-store .bf-cart-item .bf-mini-qty button:not(.remove):first-child {
  border-radius: 4px 0 0 4px;
}
.bf-store .bf-cart-item .bf-mini-qty button:not(.remove):last-of-type {
  border-radius: 0 4px 4px 0;
}

/* the number (whatever tag it uses) */
.bf-store .bf-cart-item .bf-mini-qty > :not(button) {
  float: none;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #dce4ef;
  border-bottom: 1px solid #dce4ef;
  background: #fff;
  color: #17243d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* Remove link, outside the box */
.bf-store .bf-cart-item .bf-mini-qty .remove {
  width: auto;
  min-width: 0;
  height: 44px;
  margin-left: 14px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--bf-orange);
  font-size: 14px;
  font-weight: 600;
}
/* Cart quantity: grey − and +, white middle with the number, Remove outside */
.bf-store .bf-cart-item .bf-mini-qty {
  position: relative;            /* lets Remove sit outside the box */
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 0;
  border: 1px solid #dce4ef;
  border-radius: 4px;
  background: #fff;              /* white middle behind the number */
  overflow: visible;
  font-size: 16px;               /* fixes the tiny number */
  font-weight: 700;
  line-height: 1;
  color: #17243d;
}

/* − and + buttons */
.bf-store .bf-cart-item .bf-mini-qty button:not(.remove) {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #eef2f8;
  color: #17243d;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.bf-store .bf-cart-item .bf-mini-qty button:not(.remove):first-of-type {
  margin-right: 17px;            /* space on the left of the number */
  border-radius: 3px 0 0 3px;
}
.bf-store .bf-cart-item .bf-mini-qty button:not(.remove):nth-last-of-type(2) {
  margin-left: 17px;             /* space on the right of the number */
  border-radius: 0 3px 3px 0;
}

/* Remove link in normal flow */
.bf-store .bf-cart-item .bf-mini-qty {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 4px;
}

.bf-store .bf-cart-item .bf-mini-qty button:not(.remove) {
  width: 32px;
  min-width: 32px;
  height: 32px;
  font-size: 15px;
}

.bf-store .bf-cart-item .bf-mini-qty .remove {
  position: static;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0 0 0 12px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--bf-orange, #f26522);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* ═════════════════════════════════════════════════════════════════
   BHARAT FASTENERS — COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   Supports 320px, 375px, 390px, 430px, 768px, 1024px & Desktop
   ═════════════════════════════════════════════════════════════════ */

/* Global container and touch defaults */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--primary, #087db5);
  outline-offset: 2px;
}

/* ── TABLET & MOBILE BREAKPOINT (<= 992px) ── */
@media (max-width: 992px) {
  /* Announcement topbar */
  .bf-store .bf-topbar {
    font-size: 11px;
    padding: 6px 12px;
    line-height: 1.35;
    text-align: center;
  }
  .bf-store .bf-topbar span {
    display: none;
  }

  /* Header sticky & layout */
  .bf-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  }

  body.bf-menu-open .bf-header {
    z-index: 1002 !important;
  }

  .bf-store .bf-header-inner {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    grid-template-areas:
      "menu brand spacer"
      "actions actions actions"
      "search search search" !important;
    align-items: center !important;
    gap: 8px 0 !important;
    min-height: auto !important;
    padding: 8px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .bf-store .bf-header-inner::after {
    content: "" !important;
    grid-area: spacer !important;
    width: 44px !important;
    height: 1px !important;
    pointer-events: none !important;
  }

  /* Mobile hamburger menu button */
  .bf-mobile-menu,
  .bf-store .bf-mobile-menu {
    grid-area: menu !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border: 1px solid var(--border-subtle, #cbd5e1) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: var(--text-dark, #0f172a) !important;
    font-size: 22px !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Brand Logo & Title: perfectly centered */
  .bf-store .bf-brand {
    grid-area: brand !important;
    justify-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    min-width: 0 !important;
    text-decoration: none !important;
  }

  .bf-store .bf-brand > strong {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .bf-store .bf-brand strong img {
    height: 44px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .bf-store .bf-brand b {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 0.3px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    margin-top: 2px !important;
  }

  .bf-store .bf-brand small {
    display: none !important;
  }

  /* Action Buttons (Excl Tax, Profile, Wishlist, Cart) - Neatly Aligned to the Right */
  .bf-store .bf-actions {
    grid-area: actions !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    gap: 6px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .bf-store .bf-tax-selector {
    order: -1 !important;
    height: 35px !important;
    width: auto !important;
    max-width: 90px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 0 6px !important;
    border: 1px solid var(--border-grey, #cbd5e1) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: var(--text-dark, #0f172a) !important;
    cursor: pointer !important;
  }

  .bf-store .bf-actions .bf-account {
    order: 0 !important;
  }

  .bf-store .bf-actions .bf-wishlist {
    order: 1 !important;
  }

  .bf-store .bf-actions > button {
    order: 2 !important;
  }

  .bf-store .bf-actions > a,
  .bf-store .bf-actions > button {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 14px !important;
    position: relative !important;
    background: #087db5 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(8, 125, 181, 0.3) !important;
    cursor: pointer !important;
  }

  .bf-store .bf-actions em {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 17px !important;
    height: 17px !important;
    border-radius: 9px !important;
    background: #f26522 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 3px !important;
    line-height: 1 !important;
    font-style: normal !important;
    border: 1.5px solid #ffffff !important;
  }

  /* Full-width Search Bar */
  .bf-store .bf-search {
    grid-area: search !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    margin: 2px 0 0 0 !important;
    display: flex !important;
  }

  .bf-store .bf-search input {
    font-size: 13px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .bf-store .bf-search button {
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  /* Hide search bar on Cart & Checkout pages on mobile to prevent obscuring products */
  body.cart-page .bf-search,
  body.checkout-page .bf-search,
  body.bf-cart-page .bf-search,
  .bf-commerce-page-active .bf-search {
    display: none !important;
  }

  /* Off-canvas Navigation Drawer */
  .bf-store .bf-nav {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(84vw, 320px) !important;
    background: #ffffff !important;
    z-index: 1003 !important;
    box-shadow: 6px 0 25px rgba(15, 23, 42, 0.25) !important;
    padding: 24px 18px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: auto !important;
  }

  body.bf-menu-open .bf-store .bf-nav,
  body.bf-menu-open .bf-nav {
    display: flex !important;
    transform: translateX(0) !important;
    z-index: 1003 !important;
    pointer-events: auto !important;
  }

  body.bf-menu-open::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 1000 !important;
    cursor: pointer !important;
  }

  .bf-store .bf-nav a {
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 14px !important;
    border-radius: 6px !important;
    color: var(--bf-ink, #0f172a) !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1004 !important;
  }

  .bf-store .bf-nav a:hover,
  .bf-store .bf-nav a.active {
    background: var(--primary-light, #e0f2fe) !important;
    color: var(--primary, #087db5) !important;
  }

  /* SKU Quick Order Strip */
  .bf-store .bf-quick-order {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .bf-store .bf-sku-form {
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .bf-store .bf-sku-form input {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }

  .bf-store .bf-sku-form select {
    flex: 0 1 auto !important;
    font-size: 13px !important;
  }

  .bf-store .bf-sku-form .bf-button {
    flex: 1 1 100% !important;
    min-height: 38px !important;
  }

  /* Category carousel touch swipe */
  .bf-store .bf-category-grid,
  .bf-store .bf-cat-img-carousel {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 2px 14px !important;
    scrollbar-width: none !important;
  }

  .bf-store .bf-category-grid::-webkit-scrollbar,
  .bf-store .bf-cat-img-carousel::-webkit-scrollbar {
    display: none !important;
  }

  .bf-store .bf-category-grid .bf-category-card,
  .bf-store .bf-cat-img-card {
    flex: 0 0 clamp(130px, 38vw, 175px) !important;
    scroll-snap-align: start !important;
    min-height: 160px !important;
  }

  .bf-store .bf-category-arrow {
    display: none !important;
  }

  /* Hero Section */
  .bf-store .bf-hero {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 20px 14px 28px !important;
    text-align: left !important;
  }

  .bf-store .bf-hero h1 {
    font-size: clamp(24px, 5.5vw, 36px) !important;
    line-height: 1.18 !important;
  }

  .bf-store .bf-hero p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .bf-store .bf-hero-image {
    height: clamp(190px, 45vw, 260px) !important;
    width: 100% !important;
  }

  .bf-store .bf-hero-buttons {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .bf-store .bf-hero-buttons .bf-button {
    flex: 1 1 auto !important;
    min-height: 42px !important;
    font-size: 13px !important;
  }

  /* Catalog Page Layout & Filters */
  .bf-store .bf-catalog-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 14px 30px !important;
  }

  .bf-store .bf-filters {
    margin-bottom: 10px !important;
  }

  /* Product Grid */
  .bf-store .bf-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }

  .bf-store .bf-card-image {
    height: clamp(120px, 30vw, 155px) !important;
  }

  .bf-store .bf-card-body {
    padding: 10px !important;
  }

  .bf-store .bf-card-body h3 {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .bf-store .bf-spec-row {
    font-size: 11px !important;
    padding: 4px 0 !important;
  }

  .bf-store .bf-price-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .bf-store .bf-price-row .bf-button {
    width: 100% !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    justify-content: center !important;
  }

  /* Product Details Page */
  .bf-store .bf-product-detail {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 16px !important;
    margin: 15px auto 40px !important;
  }

  .bf-store .bf-detail-media {
    height: clamp(220px, 55vw, 320px) !important;
    padding: 10px !important;
  }

  .bf-store .bf-detail-copy h1 {
    font-size: clamp(20px, 5vw, 26px) !important;
  }

  .bf-store .bf-detail-specs {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  .bf-store .bf-detail-specs div {
    padding: 9px 0 !important;
  }

  .bf-store .bf-detail-actions {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .bf-store .bf-detail-actions .bf-button {
    flex: 1 1 100% !important;
    min-height: 44px !important;
  }

  /* Quotation, Bulk Orders, & Banners */
  .bf-store .bf-bulk-banner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 20px 16px !important;
    margin: 16px 14px !important;
  }

  .bf-store .bf-quote {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 20px 16px !important;
    margin: 16px 14px !important;
  }

  .bf-store .bf-quote form {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .bf-store .bf-quote .bf-button {
    grid-column: auto !important;
    min-height: 42px !important;
  }

  .bf-store .bf-why-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 10px !important;
  }

  .bf-store .bf-cert-strip > div {
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)) !important;
    gap: 6px !important;
  }

  /* Footer */
  .bf-store .bf-footer {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
    padding: 28px 16px !important;
    font-size: 12px !important;
  }
}

/* ── MOBILE-ONLY BACK BUTTONS (Strictly hidden on desktop > 768px) ── */
.bf-mobile-back-bar {
  display: none !important;
}
.bf-mobile-back-btn {
  display: none !important;
}
.bf-drawer-back-btn {
  display: none !important;
}

@media (max-width: 768px) {
  .bf-mobile-back-bar {
    display: flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .bf-mobile-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: #ffffff !important;
    color: #0369a1 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    min-height: 34px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .bf-mobile-back-btn:active {
    background: #e0f2fe !important;
    border-color: #0284c7 !important;
  }

  /* Cart Drawer Mobile Back Button & Header Overlay Fix */
  .bf-cart-backdrop {
    z-index: 2500 !important;
  }
  .bf-cart-drawer {
    z-index: 2501 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .bf-cart-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    gap: 8px !important;
  }
  .bf-drawer-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 10px !important;
    background: #f1f5f9 !important;
    color: #0369a1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    line-height: 1 !important;
  }
  .bf-drawer-back-btn:active {
    background: #e2e8f0 !important;
  }
}

/* ── NARROW MOBILE (<= 480px) ── */
@media (max-width: 480px) {
  .bf-store .bf-header-inner {
    padding: 6px 10px !important;
  }

  .bf-store .bf-brand b {
    font-size: 14px !important;
  }

  .bf-store .bf-actions {
    gap: 4px !important;
  }

  .bf-store .bf-actions > a,
  .bf-store .bf-actions > button {
    width: 35px !important;
    height: 35px !important;
    min-height: 35px !important;
    min-width: 35px !important;
  }

  .bf-store .bf-tax-selector {
    height: 34px !important;
    font-size: 10px !important;
  }

  .bf-store .bf-product-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .bf-store .bf-footer {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Cart Drawer takes full width on small screens */
  .bf-cart-drawer {
    width: 100% !important;
  }
}

/* ── MODALS & DIALOGS (Storefront & Admin) ── */
.modal-box,
.modal-dialog,
.bf-modal,
#product-modal,
#order-view-modal .modal-content,
#product-modal-content {
  max-width: min(94vw, 680px) !important;
  width: 100% !important;
  margin: 12px auto !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

/* Keep product photos in consistent frames without cropping them. */
.bf-store .bf-card-image,
.bf-store .bf-card-img-wrap {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: #f4f7fa;
  isolation: isolate;
}

.bf-store .bf-card-image {
  height: clamp(135px, 14vw, 190px);
}

.bf-store .bf-card-img-wrap {
  height: clamp(145px, 15vw, 190px);
}

.bf-store .bf-card-image img,
.bf-store .bf-card-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
  transform: none;
  justify-self: center;
  align-self: center;
  box-sizing: border-box;
}

.bf-store .bf-card-image img {
  padding: 10px;
}

.bf-store .bf-card-img-wrap img {
  padding: 12px;
}

.bf-store .bf-catalog-grid .bf-product-card:hover .bf-card-img-wrap img {
  transform: none;
}

@media (max-width: 640px) {
  .bf-store .bf-card-image {
    height: 135px;
  }

  .bf-store .bf-card-img-wrap {
    height: 140px;
  }

  .bf-store .bf-card-image img,
  .bf-store .bf-card-img-wrap img {
    padding: 8px;
  }
}

@media (max-width: 380px) {
  .bf-store .bf-card-image {
    height: 120px;
  }

  .bf-store .bf-card-img-wrap {
    height: 125px;
  }
}

/* Keep catalog cards compact; content should not be stretched to a fixed height. */
.bf-store .bf-catalog-grid .bf-product-card {
  min-height: 0;
  height: auto;
  align-self: start;
}

.bf-store .bf-catalog-grid .bf-card-content {
  min-height: 0;
  flex: 0 0 auto;
}

.bf-store .bf-catalog-grid .bf-card-footer {
  margin-top: 12px;
}