/* src/styles/gallery.css */

/* Minimal, non-invasive styles for color swatches and gallery images */
#colour-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
#colour-swatches .swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #ccc; background: #f7f7f7; cursor: pointer;
  display: inline-block; padding: 0; margin: 0; user-select: none;
}
#colour-swatches .swatch[aria-pressed="true"] { border: 2px solid #111; }
#colour-swatches .swatch:focus { outline: 2px solid #111; outline-offset: 2px; }

/* Ensure hero images behave predictably if our JS injects them */
#hero-track img { width: 100%; height: 100%; object-fit: cover; object-position: center; }