/* JB Store brand override — loaded after styles.css / premium.css /
   storefront.css to remap the My Tech Monster palette to JB Store's.
   Keeps all layout/structure from the original design system; only colors
   and the logo-driven variables change. White background throughout. */
:root {
  /* styles.css / premium.css base tokens */
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #090B0F;
  --muted: #56677A;
  --line: #E2E6EA;
  --primary: #17202B;
  --primary-dark: #090B0F;
  --accent: #090B0F;
  --accent-soft: #F7F9FC;
  --logo-orange: #17202B;
  --logo-orange-text: #090B0F;
  --logo-orange-soft: #F7F9FC;

  /* premium.css brand tokens */
  --brand-mist: #F7F9FC;
  --brand-porcelain: #ffffff;
  --brand-ink: #090B0F;
  --brand-cobalt: #17202B;
  --brand-royal: #56677A;
  --brand-gold: #C0C8D1;

  /* storefront.css tokens */
  --sf-white: #ffffff;
  --sf-canvas: #ffffff;
  --sf-soft: #F7F9FC;
  --sf-ink: #090B0F;
  --sf-text: #17202B;
  --sf-muted: #56677A;
  --sf-border: #E2E6EA;
  --sf-border-strong: #C0C8D1;
  --sf-blue: #17202B;
  --sf-blue-dark: #090B0F;
  --sf-blue-soft: #F7F9FC;
  --sf-gold: #56677A;

  /* mobile header/store tokens */
  --store-bg: #ffffff;
  --store-blue: #090B0F;
  --store-blue-bright: #17202B;
  --store-ink: #090B0F;
  --store-muted: #56677A;
}

body {
  background-color: #ffffff;
}

/* Fix: the catalog search bar + filter dropdowns depend on the theme's own
   JS to toggle visibility (mobile "collapsed" bottom-sheet vs. desktop
   always-open sidebar), and that state wasn't rendering reliably. Force
   both always visible and laid out as a simple top bar, independent of any
   JS/data-state toggling, on every viewport. */
.catalog-controls { display: block !important; }
.catalog-mobile-search { display: flex !important; visibility: visible !important; }
.catalog-mobile-search > button[data-filter-sheet-open] { display: none !important; }

.filters.filter-sheet {
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  max-height: none !important;
  overflow: visible !important;
  width: auto !important;
  background: #fff !important;
  border: 1px solid #E2E6EA !important;
  border-radius: 14px !important;
  padding: 12px !important;
  margin: 12px 0 0 !important;
  box-shadow: 0 10px 28px rgba(10, 16, 32, .045) !important;
}
.filter-sheet-header { display: none !important; }
.filter-sheet form {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-end !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
.filter-sheet .filter-field { display: grid !important; gap: 4px; min-width: 140px; }
.filter-sheet-actions { display: flex !important; gap: 8px; align-items: center; }

/* Fix: the floating WhatsApp/help widget only became visible once the
   (unused, intentionally-skipped) skeleton-loader JS added a "page-loaded"
   class to <html>. Since that component isn't included, decouple visibility
   from it entirely. */
.faq-chat { opacity: 1 !important; pointer-events: auto !important; }

/* Homepage layout cleanup + horizontal product rails with a visible,
   custom-styled scrollbar (deliberately NOT hidden, per brand request). */
.jb-section {
  padding: 32px 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.jb-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.jb-section-head h2 {
  font-size: 1.15rem;
  margin: 0;
}
.jb-section-head a {
  font-size: .85rem;
  font-weight: 600;
  color: var(--primary, #17202B);
  text-decoration: none;
  white-space: nowrap;
}

.jb-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 2px 2px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #56677A #EEF1F4;
}
.jb-rail::-webkit-scrollbar { height: 9px; }
.jb-rail::-webkit-scrollbar-track { background: #EEF1F4; border-radius: 999px; }
.jb-rail::-webkit-scrollbar-thumb { background: #56677A; border-radius: 999px; }
.jb-rail::-webkit-scrollbar-thumb:hover { background: #17202B; }
.jb-rail > .product-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
}

.jb-quickbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px 4px;
  max-width: 1280px;
  margin: 0 auto;
  scrollbar-width: none;
}
.jb-quickbar::-webkit-scrollbar { display: none; }
.jb-quickbar a {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #E2E6EA;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: #17202B;
  white-space: nowrap;
}