Easy-to-configure dark mode scrollbar
:root {
  /* Easy configuration - just change these values */
  --scrollbar-width: 14px;
  --scrollbar-border-radius: 8px;
  --scrollbar-track-bg: #1a1a1a;
  --scrollbar-thumb-bg: #404040;
  --scrollbar-thumb-hover: #505050;
  --scrollbar-thumb-active: #606060;
  --scrollbar-border-color: transparent;
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
}

/* WebKit - all browsers using these variables */
*::-webkit-scrollbar { 
  width: var(--scrollbar-width); 
  height: var(--scrollbar-width); 
}

*::-webkit-scrollbar-track { 
  background: var(--scrollbar-track-bg);
  border-radius: var(--scrollbar-border-radius);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: var(--scrollbar-border-radius);
  border: 3px solid var(--scrollbar-border-color);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover { 
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active { 
  background: var(--scrollbar-thumb-active);
}

/* Optional: Enhanced visibility for specific containers */
.options-container *::-webkit-scrollbar-thumb,
.shop-grid *::-webkit-scrollbar-thumb {
  background: #484848;
}

/* Fallback for older browsers */
body { 
  -ms-overflow-style: auto; 
}