/*
 * Empire Auto Parts Design System
 * ----------------------------------
 * A premium automotive aesthetic inspired by the heraldic shield logo.
 * Design philosophy: Automotive Luxury - clean, confident, professional.
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
  /* Brand Colors - Official Empire Auto Parts Style Guide */
  /* Blue: Pantone 289 | Gold: Pantone 124 | Gray: Pantone Cool Gray 10 */
  --empire-navy: #0C2340;
  --empire-navy-deep: #081829;
  --empire-navy-light: #1a3d5c;
  --empire-gold: #E4AE24;
  --empire-gold-light: #f0c85a;
  --empire-gold-dark: #c9961c;
  --empire-gold-muted: rgba(228, 174, 36, 0.15);
  --empire-gray: #636569;

  /* Functional Colors */
  --empire-success: #2d8659;
  --empire-success-light: #d4edda;
  --empire-warning: #c4820d;
  --empire-warning-light: #fff3cd;
  --empire-danger: #a63d3d;
  --empire-danger-light: #f8d7da;
  --empire-info: #2a6496;
  --empire-info-light: #cce5ff;

  /* Neutrals */
  --empire-white: #ffffff;
  --empire-gray-50: #fafbfc;
  --empire-gray-100: #f4f6f8;
  --empire-gray-200: #e9ecef;
  --empire-gray-300: #dee2e6;
  --empire-gray-400: #ced4da;
  --empire-gray-500: #8c939a;
  --empire-gray-600: #6c757d;
  --empire-gray-700: #495057;
  --empire-gray-800: #343a40;
  --empire-gray-900: #212529;
  --empire-black: #0a0a0a;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Font Sizes (fluid typography) */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-xl: clamp(1.15rem, 1.05rem + 0.5vw, 1.25rem);
  --text-2xl: clamp(1.4rem, 1.2rem + 1vw, 1.5rem);
  --text-3xl: clamp(1.7rem, 1.4rem + 1.5vw, 1.875rem);
  --text-4xl: clamp(2rem, 1.6rem + 2vw, 2.25rem);
  --text-5xl: clamp(2.5rem, 2rem + 2.5vw, 3rem);

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows - subtle and sophisticated (based on brand navy #0C2340 = rgb(12, 35, 64)) */
  --shadow-xs: 0 1px 2px rgba(12, 35, 64, 0.05);
  --shadow-sm: 0 2px 4px rgba(12, 35, 64, 0.08), 0 1px 2px rgba(12, 35, 64, 0.05);
  --shadow-md: 0 4px 12px rgba(12, 35, 64, 0.10), 0 2px 4px rgba(12, 35, 64, 0.05);
  --shadow-lg: 0 8px 24px rgba(12, 35, 64, 0.14), 0 4px 8px rgba(12, 35, 64, 0.08);
  --shadow-xl: 0 16px 48px rgba(12, 35, 64, 0.18), 0 8px 16px rgba(12, 35, 64, 0.10);
  --shadow-gold: 0 4px 16px rgba(228, 174, 36, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(12, 35, 64, 0.08);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============================================
   BASE STYLES & TYPOGRAPHY
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--empire-gray-800);
  background-color: var(--empire-gray-50);
  padding-bottom: 80px;
  min-height: 100vh;
}

/* Sophisticated background texture */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(228, 174, 36, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(12, 35, 64, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Selection styling */
::selection {
  background-color: var(--empire-gold);
  color: var(--empire-navy-deep);
}

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--empire-gold);
  outline-offset: 2px;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--empire-navy);
  margin-bottom: var(--space-4);
}

h1, .h1 { font-size: var(--text-4xl); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--text-3xl); letter-spacing: -0.015em; }
h3, .h3 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
h4, .h4 { font-size: var(--text-xl); }
h5, .h5 { font-size: var(--text-lg); }
h6, .h6 { font-size: var(--text-base); }

/* The global h1-h6 rule above forces color: var(--empire-navy), which
   wins over an inherited .text-white on a dark-background ancestor
   (e.g. .card-header.bg-primary). Without this override, headings
   inside navy/success/dark panels render navy-on-navy — invisible. */
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary .h1, .bg-primary .h2, .bg-primary .h3,
.bg-primary .h4, .bg-primary .h5, .bg-primary .h6,
.bg-navy h1, .bg-navy h2, .bg-navy h3,
.bg-navy h4, .bg-navy h5, .bg-navy h6,
.bg-success h1, .bg-success h2, .bg-success h3,
.bg-success h4, .bg-success h5, .bg-success h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6,
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6 {
  color: var(--empire-white);
}

/* Display headings with serif font */
.display-heading {
  font-family: var(--font-display);
  font-weight: 500;
}

/* Links */
a {
  color: var(--empire-info);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--empire-navy);
}

/* Small/Label text */
.text-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--empire-gray-500);
}

/* ============================================
   NAVIGATION - Premium Header
   ============================================ */
#navbar {
  background: linear-gradient(180deg, var(--empire-navy) 0%, var(--empire-navy-deep) 100%);
  border-bottom: none;
  padding: var(--space-4) 0;
  position: relative;
  box-shadow: var(--shadow-lg);
}

/* Gold accent line at bottom - disabled to match production */
/*
#navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--empire-gold-dark) 20%,
    var(--empire-gold) 50%,
    var(--empire-gold-dark) 80%,
    transparent 100%
  );
}
*/

#navbar .container {
  position: relative;
}

#navbar .navbar-brand {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

#navbar .navbar-brand h1 {
  width: 200px;
  height: 0;
  padding-top: 55px;
  overflow: hidden;
  background-image: url("/assets/Empire-Auto-Parts-Logo-Portal-058f7903.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
  transition: transform var(--transition-base);
}

#navbar .navbar-brand:hover h1 {
  transform: scale(1.02);
}

#navbar .navbar-brand .h2 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--empire-gold-light);
  margin: 0;
  padding-left: 55px;
  opacity: 0.9;
}

/* Navigation Links */
#navbar .navbar-nav {
  gap: var(--space-1);
}

#navbar .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  position: relative;
}

#navbar .navbar-nav .nav-link:hover,
#navbar .navbar-nav .nav-link:focus {
  color: var(--empire-white);
  background-color: rgba(255, 255, 255, 0.08);
}

#navbar .navbar-nav .nav-link:hover .fas,
#navbar .navbar-nav .nav-link:hover .fa-solid {
  color: var(--empire-gold);
}

#navbar .navbar-nav .nav-link .fas,
#navbar .navbar-nav .nav-link .fa-solid {
  transition: color var(--transition-base), transform var(--transition-base);
}

/* Cart count badge */
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--empire-navy-deep);
  background: linear-gradient(135deg, var(--empire-gold-light) 0%, var(--empire-gold) 100%);
  border-radius: var(--radius-full);
  margin-left: 4px;
  box-shadow: var(--shadow-sm);
}

.news-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--empire-navy-deep);
  background: linear-gradient(135deg, var(--empire-gold-light) 0%, var(--empire-gold) 100%);
  border-radius: var(--radius-full);
  margin-left: 4px;
  box-shadow: var(--shadow-sm);
}

/* Phone number - hidden by default, shown only at xxl (1400px+) to avoid overlapping nav items */
#navbar .small-phone-number {
  display: none;
  position: absolute;
  top: var(--space-1);
  right: var(--space-6);
  color: var(--empire-gold-light);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

@media (min-width: 1400px) {
  #navbar .small-phone-number {
    display: inline;
  }
}

/* Dropdown menus */
#navbar .dropdown-menu {
  background: var(--empire-white);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  margin-top: var(--space-2);
  animation: dropdownFadeIn var(--transition-base) ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#navbar .dropdown-item {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--empire-gray-700);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

#navbar .dropdown-item:hover,
#navbar .dropdown-item:focus {
  background-color: var(--empire-gold-muted);
  color: var(--empire-navy);
}

#navbar .dropdown-item .fas {
  width: 20px;
  color: var(--empire-gray-400);
  transition: color var(--transition-fast);
}

#navbar .dropdown-item:hover .fas {
  color: var(--empire-gold);
}

/* Mobile toggle */
#navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

#navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================
   PAGE CONTAINER
   ============================================ */
#page {
  min-height: calc(100vh - 160px);
}

/* ============================================
   CARDS - Premium styling
   ============================================ */
.card {
  background: var(--empire-white);
  border: 1px solid var(--empire-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  background: linear-gradient(180deg, var(--empire-gray-50) 0%, var(--empire-white) 100%);
  border-bottom: 1px solid var(--empire-gray-200);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
}

.card-header.bg-primary {
  background: linear-gradient(135deg, var(--empire-navy) 0%, var(--empire-navy-light) 100%) !important;
  border-bottom: none;
}

.card-header.bg-success {
  background: linear-gradient(135deg, var(--empire-success) 0%, #3a9d6d 100%) !important;
  border-bottom: none;
}

.card-body {
  padding: var(--space-5);
}

/* Stat cards */
.card.border-primary {
  border-color: var(--empire-navy) !important;
  border-left: 4px solid var(--empire-navy);
}

.card.border-success {
  border-color: var(--empire-success) !important;
  border-left: 4px solid var(--empire-success);
}

.card.border-info {
  border-color: var(--empire-info) !important;
  border-left: 4px solid var(--empire-info);
}

/* ============================================
   BUTTONS - Refined and premium
   ============================================ */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.btn:focus-visible {
  outline: 2px solid var(--empire-gold);
  outline-offset: 2px;
}

/* Primary Button - Navy with gold hover */
.btn-primary {
  background: linear-gradient(135deg, var(--empire-navy) 0%, var(--empire-navy-light) 100%);
  color: var(--empire-white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--empire-navy-light) 0%, var(--empire-navy) 100%);
  color: var(--empire-gold-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Gold/Warning Button - Premium gold */
.btn-warning {
  background: linear-gradient(135deg, var(--empire-gold) 0%, var(--empire-gold-dark) 100%);
  color: var(--empire-navy-deep);
  box-shadow: var(--shadow-gold);
}

.btn-warning:hover,
.btn-warning:focus {
  background: linear-gradient(135deg, var(--empire-gold-light) 0%, var(--empire-gold) 100%);
  color: var(--empire-navy-deep);
  box-shadow: 0 6px 20px rgba(212, 168, 75, 0.35);
  transform: translateY(-1px);
}

/* Success Button */
.btn-success {
  background: linear-gradient(135deg, var(--empire-success) 0%, #3a9d6d 100%);
  color: var(--empire-white);
}

.btn-success:hover,
.btn-success:focus {
  background: linear-gradient(135deg, #3a9d6d 0%, var(--empire-success) 100%);
  transform: translateY(-1px);
}

/* Info Button */
.btn-info {
  background: linear-gradient(135deg, var(--empire-info) 0%, #3878b8 100%);
  color: var(--empire-white);
}

.btn-info:hover,
.btn-info:focus {
  background: linear-gradient(135deg, #3878b8 0%, var(--empire-info) 100%);
  transform: translateY(-1px);
}

/* Secondary Button */
.btn-secondary {
  background: var(--empire-gray-600);
  color: var(--empire-white);
  border: 2px solid var(--empire-gray-600);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--empire-gray-800);
  color: var(--empire-white);
  border-color: var(--empire-gray-800);
  transform: translateY(-1px);
}

/* Danger Button */
.btn-danger {
  background: linear-gradient(135deg, var(--empire-danger) 0%, #c0392b 100%);
  color: var(--empire-white);
  border: 2px solid transparent;
}

.btn-danger:hover,
.btn-danger:focus {
  background: linear-gradient(135deg, #c0392b 0%, var(--empire-danger) 100%);
  color: var(--empire-white);
  transform: translateY(-1px);
}

/* Outline Buttons */
.btn-outline-primary {
  background: transparent;
  color: var(--empire-navy);
  border: 2px solid var(--empire-navy);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--empire-navy);
  color: var(--empire-white);
  border-color: var(--empire-navy);
}

.btn-outline-secondary {
  background: transparent;
  color: var(--empire-gray-600);
  border: 2px solid var(--empire-gray-300);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: var(--empire-gray-100);
  color: var(--empire-gray-800);
  border-color: var(--empire-gray-400);
}

.btn-outline-success {
  background: transparent;
  color: var(--empire-success);
  border: 2px solid var(--empire-success);
}

.btn-outline-success:hover {
  background: var(--empire-success);
  color: var(--empire-white);
}

.btn-outline-warning {
  background: transparent;
  color: var(--empire-gold-dark);
  border: 2px solid var(--empire-gold);
}

.btn-outline-warning:hover {
  background: var(--empire-gold);
  color: var(--empire-navy-deep);
}

.btn-outline-info {
  background: transparent;
  color: var(--empire-info);
  border: 2px solid var(--empire-info);
}

.btn-outline-info:hover {
  background: var(--empire-info);
  color: var(--empire-white);
}

.btn-outline-danger {
  background: transparent;
  color: var(--empire-danger);
  border: 2px solid var(--empire-danger);
}

.btn-outline-danger:hover {
  background: var(--empire-danger);
  color: var(--empire-white);
}

.btn-outline-light {
  background: transparent;
  color: var(--empire-white);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--empire-white);
  border-color: var(--empire-white);
}

/* Link Button */
.btn-link {
  background: none;
  color: var(--empire-info);
  padding: var(--space-1) var(--space-2);
  font-weight: 500;
}

.btn-link:hover {
  color: var(--empire-navy);
  text-decoration: underline;
}

/* Button Sizes */
.btn-sm {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
}

.btn-lg {
  font-size: var(--text-lg);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
}

/* ============================================
   FORM CONTROLS - Elegant inputs
   ============================================ */
.form-control {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--empire-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--empire-white);
  transition: all var(--transition-base);
}

.form-control:hover {
  border-color: var(--empire-gray-400);
}

.form-control:focus {
  border-color: var(--empire-gold);
  box-shadow: 0 0 0 3px var(--empire-gold-muted);
  outline: none;
}

.form-control::placeholder {
  color: var(--empire-gray-400);
}

.form-control-sm {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
}

/* Select styling */
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--space-3) center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: var(--space-10);
}

/* Form labels */
label {
  font-weight: 500;
  color: var(--empire-gray-700);
  margin-bottom: var(--space-2);
}

.form-group {
  margin-bottom: var(--space-4);
}

/* Checkbox & Radio */
.form-check-input {
  width: 18px;
  height: 18px;
  border: 2px solid var(--empire-gray-400);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.form-check-input:checked {
  background-color: var(--empire-gold);
  border-color: var(--empire-gold);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--empire-gold-muted);
}

/* ============================================
   TABLES - Clean and scannable
   ============================================ */
.table {
  font-size: var(--text-sm);
  border-collapse: separate;
  border-spacing: 0;
}

.table th {
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--empire-white);
  background: var(--empire-navy);
  padding: var(--space-3) var(--space-4);
  border: none;
  white-space: nowrap;
}

.table th:first-child {
  border-top-left-radius: var(--radius-md);
}

.table th:last-child {
  border-top-right-radius: var(--radius-md);
}

.table thead {
  box-shadow: 0 2px 4px rgba(12, 35, 64, 0.15);
}

.table thead tr {
  border-bottom: 2px solid var(--empire-gold);
}

.table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--empire-gray-200);
  background: var(--empire-white);
  transition: background-color var(--transition-fast);
}

.table tbody tr:hover td {
  background-color: var(--empire-gold-muted);
}

.table-striped tbody tr:nth-of-type(odd) td {
  background-color: var(--empire-gray-50);
}

.table-striped tbody tr:nth-of-type(odd):hover td {
  background-color: var(--empire-gold-muted);
}

/* Table row states */
.table tr.table-success td {
  background-color: var(--empire-success-light) !important;
}

.table tr.table-warning td {
  background-color: var(--empire-warning-light) !important;
}

.table tr.table-danger td {
  background-color: var(--empire-danger-light) !important;
}

/* Search Results - In Cart Row Highlighting */
.table tr.row-in-cart td {
  background-color: rgba(228, 174, 36, 0.08) !important;
  border-bottom: 1px solid rgba(228, 174, 36, 0.2);
}

.table tr.row-in-cart:hover td {
  background-color: rgba(228, 174, 36, 0.12) !important;
}

.table tr.row-in-cart td[data-label="Description"] {
  font-weight: 600;
}

/* In Cart Button Style */
.btn-in-cart {
  background: linear-gradient(135deg, var(--empire-gold) 0%, var(--empire-gold-dark) 100%);
  color: var(--empire-navy-deep);
  font-weight: 700;
  border: none;
  box-shadow: var(--shadow-gold);
  padding: var(--space-1) var(--space-3);
  /* Keep the "In Cart" badge on a single line in the narrow
     search-results action cell instead of wrapping onto two lines. */
  white-space: nowrap;
}

.btn-in-cart:hover {
  background: linear-gradient(135deg, var(--empire-gold-light) 0%, var(--empire-gold) 100%);
  color: var(--empire-navy-deep);
  transform: translateY(-1px);
}

.btn-in-cart i {
  color: var(--empire-navy-deep);
}

/* Promo Row Highlighting */
.table tr.row-has-promo td {
  background-color: var(--empire-success-light) !important;
}

.table tr.row-has-promo:hover td {
  background-color: #c3e6cb !important;
}

/* Old thead-blue class compatibility */
.thead-blue th,
.thead-dark th {
  background: var(--empire-navy);
}

/* ============================================
   RESULTS SUMMARY BAR
   ============================================ */
.results-summary-bar {
  background: linear-gradient(135deg, var(--empire-navy) 0%, var(--empire-navy-light) 100%);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-2);
  border-bottom: 2px solid var(--empire-gold);
}

.results-summary-info {
  color: var(--empire-white);
  font-size: var(--text-sm);
}

.results-count {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--empire-gold);
}

.results-vehicle {
  font-weight: 600;
  color: var(--empire-white);
}

/* ============================================
   STICKY TABLE HEADER
   ============================================ */
.table-sticky-header thead {
  position: sticky;
  top: 0;
  z-index: 100;
}

.table-sticky-header thead th {
  box-shadow: 0 2px 4px rgba(12, 35, 64, 0.15);
}

/* The results table scrolls with the page rather than inside a pane.
   This previously set max-height: calc(100vh - 300px) with overflow-y: auto,
   plus a radius and shadow. That put a second scrollbar beside the page's own
   and showed roughly 12 rows of a 75-row price list on a 1080p screen. It also
   broke the sticky header in practice: thead pinned to the top of a pane that
   had itself scrolled out of view. With no scroll container, thead pins to the
   viewport instead.

   No radius or shadow here on purpose. Elevation should mean "floats above the
   page" -- modals, popovers, the add-to-cart dropdown. The results table is the
   page's primary content, so chrome that implies otherwise is decoration. */
.table-responsive-wrapper {
  overflow: visible;
}

/* The one place a scroll container still earns its keep: between the mobile
   card layout and a comfortable desktop width, seven fixed-width columns can
   outrun the viewport. With no max-height this never grows a vertical
   scrollbar -- only the sideways one it needs. */
@media (min-width: 769px) and (max-width: 991px) {
  .table-responsive-wrapper {
    overflow-x: auto;
  }
}

@media (max-width: 768px) {
  .table-responsive-wrapper {
    max-height: none;
    overflow: visible;
  }
}

/* ============================================
   PARTS RESULT FILTER BAR
   ============================================ */
.parts-filter {
  background: var(--empire-white);
  border-bottom: 1px solid #dfe5ed;
  padding: var(--space-3) 0;
}

.parts-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.parts-filter-search {
  position: relative;
  flex: 1 1 18rem;
  max-width: 26rem;
}

.parts-filter-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8c98a8;
  font-size: 0.8rem;
  pointer-events: none;
}

.parts-filter-input {
  padding-left: 32px;
}

.parts-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* The filter hides rows with the hidden attribute, which has to survive the
   mobile card layout further down setting "display: block" on those same rows.
   Browsers apply [hidden] with !important so it already would, but that is a
   UA stylesheet detail to be leaning on for something this load-bearing. */
tr.parts-row[hidden] {
  display: none !important;
}

/* Pills read as current and these are discrete controls, unlike the container
   chrome removed from the results table. */
.parts-chip {
  border: 1px solid #c3cedd;
  border-radius: var(--radius-full);
  background: var(--empire-white);
  color: #33404f;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 13px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.parts-chip:hover:not(:disabled) {
  border-color: var(--empire-navy);
}

/* Selected uses gold, not navy. Navy is this page's default furniture -- the
   Add buttons, the table header, the summary bar -- so a navy chip reads as
   "a button" rather than "an active filter". Gold is the accent and appears
   nowhere else in this region.

   The tick matters as much as the colour: state must not depend on hue alone,
   for colour-blind users and for anyone glancing at the bar. */
.parts-chip[aria-pressed="true"] {
  background: var(--empire-gold);
  border-color: var(--empire-gold-dark);
  color: var(--empire-navy);
  box-shadow: inset 0 0 0 1px var(--empire-gold-dark);
}

.parts-chip[aria-pressed="true"]::before {
  content: "\2713";
  font-weight: 700;
  margin-right: 6px;
}

.parts-chip[aria-pressed="true"] .parts-chip-count {
  opacity: 0.75;
  color: var(--empire-navy);
}

.parts-chip[aria-pressed="true"]:hover {
  background: var(--empire-gold-light);
}

.parts-chip:disabled {
  opacity: 0.45;
  cursor: default;
}

.parts-chip:focus-visible {
  outline: 3px solid var(--empire-gold);
  outline-offset: 2px;
}

.parts-chip-count {
  margin-left: 6px;
  opacity: 0.6;
  font-weight: 500;
}

/* This line is the only thing telling someone rows are being withheld, so it
   carries the gold rule and the count in navy rather than sitting in grey. */
/* Marks the type-ahead's match inside the description, item # and OE # cells.
   Gold tint rather than the browser default yellow, which fights the palette
   and the blue .row-search-match rows the OEM search paints. */
mark.parts-mark {
  background: rgba(228, 174, 36, 0.42);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.parts-filter-readout {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-top: var(--space-2);
  padding: 4px 12px 4px 10px;
  border-left: 3px solid var(--empire-gold);
  background: var(--empire-gold-muted);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  font-size: 0.875rem;
  color: var(--empire-navy);
  font-weight: 600;
}

.parts-filter-clear {
  border: 0;
  background: none;
  padding: 0 0 0 8px;
  color: var(--empire-navy);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 576px) {
  .parts-filter-search {
    flex-basis: 100%;
    max-width: none;
  }

  /* 32px is fine for a mouse and too small for a thumb; this brings the chips
     up to a ~44px target without changing how they read. */
  .parts-chip {
    padding: 11px 16px;
    font-size: 0.85rem;
  }

  .parts-filter-readout {
    width: 100%;
  }
}

/* ============================================
   QUALITY BADGES
   ============================================ */
.quality-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-full);
  background: var(--empire-gold);
  color: var(--empire-navy);
  transition: all var(--transition-fast);
  border: 1px solid var(--empire-gold-dark);
}

.quality-badge:hover {
  background: var(--empire-gold-light);
  color: var(--empire-navy);
  text-decoration: none;
}

/* ============================================
   SEARCH MATCH ROW HIGHLIGHT
   ============================================ */
/* Persistent blue highlight for EVERY row that matches the searched
   item/OE number (certified AND non-certified), matching the legacy
   portal's "table-info" treatment. Applied to all matching rows, not
   just the first, so certified matches stand out equally. */
.table tr.row-search-match td {
  background-color: rgba(13, 110, 253, 0.14) !important;
  border-bottom: 1px solid rgba(13, 110, 253, 0.3);
}

.table tr.row-search-match:hover td {
  background-color: rgba(13, 110, 253, 0.2) !important;
}

.table tr.row-search-match td[data-label="Description"] {
  font-weight: 600;
}

/* ============================================
   OEM SEARCH HIGHLIGHT
   ============================================ */
.oem-search-highlight td {
  background: rgba(228, 174, 36, 0.25) !important;
  animation: oem-cell-pulse 0.6s ease-in-out;
}

.oem-search-highlight {
  outline: 3px solid var(--empire-gold) !important;
  outline-offset: -1px;
}

@keyframes oem-cell-pulse {
  0% {
    background: rgba(228, 174, 36, 0) !important;
  }
  50% {
    background: rgba(228, 174, 36, 0.4) !important;
  }
  100% {
    background: rgba(228, 174, 36, 0.25) !important;
  }
}

/* ============================================
   IMAGE PREVIEW ICON
   ============================================ */
.btn-preview-images {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0.8;
  transition: all var(--transition-fast);
}

.btn-preview-images:hover {
  opacity: 1;
  transform: scale(1.15);
}

.btn-preview-images i {
  font-size: 0.9rem;
}

/* ============================================
   ALERTS - Refined notifications
   ============================================ */
.alert {
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.alert::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.alert-success {
  background-color: var(--empire-success-light);
  color: #0f5132;
}
.alert-success::before { background-color: var(--empire-success); }

.alert-danger {
  background-color: var(--empire-danger-light);
  color: #842029;
}
.alert-danger::before { background-color: var(--empire-danger); }

.alert-warning {
  background-color: var(--empire-warning-light);
  color: #664d03;
}
.alert-warning::before { background-color: var(--empire-warning); }

.alert-info {
  background-color: var(--empire-info-light);
  color: #055160;
}
.alert-info::before { background-color: var(--empire-info); }

/* Internal / Empire-staff notices. Gold reads as "elevated, not customer-facing"
   and matches the staff badges. Bootstrap's .alert-secondary has no variant here,
   so it renders the 4px ::before bar uncolored — use this instead. */
.alert-staff {
  background-color: var(--empire-gold-muted);
  color: var(--empire-navy);
}
.alert-staff::before { background-color: var(--empire-gold); }

/* ============================================
   BADGES
   ============================================ */
.badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

.bg-success { background-color: var(--empire-success) !important; }
.bg-warning { background-color: var(--empire-warning) !important; color: var(--empire-white) !important; }
.bg-danger { background-color: var(--empire-danger) !important; }
.bg-info { background-color: var(--empire-info) !important; }
.bg-primary { background-color: var(--empire-navy) !important; }

/* ============================================
   PAGINATION - Clean navigation
   ============================================ */
.pagination {
  gap: var(--space-1);
}

.page-item .page-link {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  color: var(--empire-gray-700);
  font-weight: 500;
  font-size: var(--text-sm);
  background: var(--empire-white);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-base);
}

.page-item .page-link:hover {
  background: var(--empire-gray-100);
  color: var(--empire-navy);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.page-item.active .page-link {
  background: linear-gradient(135deg, var(--empire-navy) 0%, var(--empire-navy-light) 100%);
  color: var(--empire-white);
  box-shadow: var(--shadow-md);
}

.page-item.disabled .page-link {
  background: var(--empire-gray-100);
  color: var(--empire-gray-400);
  box-shadow: none;
}

/* ============================================
   MODALS - Polished overlays
   ============================================ */
.modal-backdrop {
  background-color: var(--empire-navy-deep);
}

.modal-backdrop.show {
  opacity: 0.7;
}

.modal-content {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  animation: modalSlideIn var(--transition-slow) ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  /* Flat navy, not a 135deg ramp: on a short, wide bar the diagonal reads as an
     uneven wash and disagrees with the flat --empire-navy used by .table th and
     the navbar (visible when a dialog contains a table). The gold top edge is
     the one brand accent dialogs carry. */
  background: var(--empire-navy);
  color: var(--empire-white);
  border-top: 3px solid var(--empire-gold);
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-4) var(--space-5);
}

.modal-header h1, .modal-header h2, .modal-header h3,
.modal-header h4, .modal-header h5, .modal-header h6,
.modal-header .h1, .modal-header .h2, .modal-header .h3,
.modal-header .h4, .modal-header .h5, .modal-header .h6,
.modal-header .modal-title {
  color: inherit;
  margin-bottom: 0;
}

/* Most dialogs put Bootstrap's .h5 utility on the header element itself
   (<div class="modal-header h5">Title</div>) instead of on a child .modal-title.
   The descendant rule above can't reach that, so .h5's margin-bottom: .5rem sat
   outside the navy background and opened an 8px white seam above the body.
   Compound selector (no space) so it matches the header itself. */
.modal-header.h5 {
  margin-bottom: 0;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

.modal-body {
  padding: var(--space-5);
}

.modal-footer {
  border-top: 1px solid var(--empire-gray-200);
  padding: var(--space-4) var(--space-5);
}

/* ============================================
   FOOTER - Minimal and clean
   ============================================ */
.navbar.fixed-bottom {
  background: var(--empire-white) !important;
  border-top: 1px solid var(--empire-gray-200);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
  padding: var(--space-3) 0;
}

.navbar.fixed-bottom .navbar-text {
  font-size: var(--text-xs);
  color: var(--empire-gray-500);
}

.navbar.fixed-bottom a {
  color: var(--empire-gold-dark);
  font-weight: 600;
}

.navbar.fixed-bottom a:hover {
  color: var(--empire-navy);
}

.navbar.fixed-bottom a.btn-warning {
  color: var(--empire-navy-deep);
}

.navbar.fixed-bottom a.btn-warning:hover {
  color: var(--empire-navy-deep);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-gold { color: var(--empire-gold) !important; }
.text-navy { color: var(--empire-navy) !important; }
.bg-gold { background-color: var(--empire-gold) !important; }
.bg-navy { background-color: var(--empire-navy) !important; }
.bg-gold-muted { background-color: var(--empire-gold-muted) !important; }

.border-gold { border-color: var(--empire-gold) !important; }
.border-navy { border-color: var(--empire-navy) !important; }

/* Border blue compatibility */
.border-blue {
  border: 2px solid var(--empire-navy);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Shadow utilities */
.shadow-elegant { box-shadow: var(--shadow-md); }
.shadow-premium { box-shadow: var(--shadow-lg); }

/* Text utilities */
.font-display { font-family: var(--font-display); }
.font-heading { font-family: var(--font-heading); }
.font-mono { font-family: var(--font-mono); }

.letter-spaced { letter-spacing: 0.1em; }
.font-small { font-size: var(--text-sm); }

/* Spinner */
.spinner-black {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("/assets/spinner-black-ad10007b.gif") center center no-repeat;
  background-size: 24px 24px;
}

/* Checkbox sizes */
.checkbox-lg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.checkbox-xl {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

/* Hover effects */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hover-glow {
  transition: box-shadow var(--transition-base);
}
.hover-glow:hover {
  box-shadow: var(--shadow-gold);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fadeIn { animation: fadeIn var(--transition-base) ease-out; }
.animate-slideUp { animation: slideUp var(--transition-slow) ease-out; }
.animate-scaleIn { animation: scaleIn var(--transition-base) ease-out; }

/* Staggered animations for lists */
.stagger-animate > *:nth-child(1) { animation-delay: 0ms; }
.stagger-animate > *:nth-child(2) { animation-delay: 50ms; }
.stagger-animate > *:nth-child(3) { animation-delay: 100ms; }
.stagger-animate > *:nth-child(4) { animation-delay: 150ms; }
.stagger-animate > *:nth-child(5) { animation-delay: 200ms; }
.stagger-animate > *:nth-child(6) { animation-delay: 250ms; }
.stagger-animate > *:nth-child(7) { animation-delay: 300ms; }
.stagger-animate > *:nth-child(8) { animation-delay: 350ms; }
.stagger-animate > *:nth-child(9) { animation-delay: 400ms; }
.stagger-animate > *:nth-child(10) { animation-delay: 450ms; }

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  @page {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .no-print,
  .modal-backdrop,
  #navbar,
  .navbar.fixed-bottom {
    display: none !important;
  }

  body {
    background: white !important;
  }

  body::before {
    display: none;
  }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
/* ==========================================================================
   MOBILE RESPONSIVE STYLES
   ========================================================================== */

/* --- Tablet and below (max-width: 991px) --- */
@media (max-width: 991px) {
  #navbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #navbar .container {
    flex-wrap: nowrap;
    align-items: center;
  }

  #navbar .navbar-brand {
    flex: 0 0 auto;
    margin-right: auto;
  }

  #navbar .navbar-brand h1 {
    width: 180px;
    padding-top: 40px;
    background-size: contain;
  }

  #navbar .navbar-toggler {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 10px;
  }

  #navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 24px;
    height: 24px;
  }

  #navbar .navbar-brand .h2 {
    display: none;
  }

  #navbar .small-phone-number {
    display: none;
  }

  /* Overlay the collapsed menu instead of pushing the page down: anchor it to
     the position:relative #navbar .container and float it below the toggler. */
  #navbar .navbar-collapse {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1030;
    min-width: 240px;
    width: auto;
    background-color: var(--empire-navy, #0C2340);
    margin-top: 6px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  #navbar .navbar-nav {
    gap: 5px;
  }

  #navbar .navbar-nav .nav-link {
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.2s;
  }

  #navbar .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
  #navbar {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #navbar .navbar-brand h1 {
    width: 150px;
    padding-top: 34px;
  }

  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Small Mobile (max-width: 576px) --- */
@media (max-width: 576px) {
  #navbar .navbar-brand h1 {
    width: 130px;
    padding-top: 30px;
  }

  #navbar .navbar-toggler {
    padding: 4px 8px;
  }

  #navbar .navbar-toggler-icon {
    width: 20px;
    height: 20px;
  }
}

/* ==========================================================================
   MOBILE-FRIENDLY SEARCH RESULTS TABLE
   ========================================================================== */

/* Hide table header on mobile, show card-style rows */
@media (max-width: 768px) {
  .table-sticky-header {
    border: 0;
  }

  .table-sticky-header thead {
    display: none;
  }

  .table-sticky-header tbody tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    background: #fff;
    padding: 12px;
  }

  .table-sticky-header tbody tr:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  }

  .table-sticky-header tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    text-align: left !important;
  }

  .table-sticky-header tbody td:last-child {
    border-bottom: none;
  }

  .table-sticky-header tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--empire-navy, #0C2340);
    flex: 0 0 40%;
    padding-right: 10px;
  }

  /* First column (Add to Cart) - make it full width and prominent */
  .table-sticky-header tbody td:first-child {
    justify-content: center;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 12px;
    margin-bottom: 8px;
  }

  .table-sticky-header tbody td:first-child::before {
    display: none;
  }

  .table-sticky-header tbody td:first-child .btn {
    width: 100%;
    padding: 10px 20px;
    font-weight: 600;
  }

  /* Price columns - align right */
  .table-sticky-header tbody td:nth-child(4),
  .table-sticky-header tbody td:nth-child(5) {
    font-weight: 600;
  }

  /* No Parts Found message */
  .table-sticky-header tbody tr td[colspan] {
    display: block;
    text-align: center !important;
  }

  .table-sticky-header tbody tr td[colspan]::before {
    display: none;
  }
}