/*
  ColorMix palette (horizontal gallery, 3 items visible)
  Make it visually + behaviorally identical to the StoneMix palette gallery.
  Markup uses background-image on .colormixPaletteItem.
*/

.colormixPaletteBlock{
  margin-top: 10px;
  margin-bottom: 16px;
}

.colormixPaletteTitle{
  font-size: 16px;
  font-weight: 700;
  margin: 8px 0 10px;
  opacity: 0.9;
}

.colormixPaletteScroll{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.colormixPaletteScroll::-webkit-scrollbar{
  height: 6px;
}

.colormixPaletteScroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
}

.colormixPaletteItem{
  flex: 0 0 calc((100% - 20px) / 3); /* 3 cards per viewport (2 gaps) */
  aspect-ratio: 3 / 4;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.10);
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  scroll-snap-align: start;
}