/* Piilota select visuaalisesti, jätä toimintaan/lomakkeelle */
.wcas-hidden-select{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* Kääre */
.wcas-wrap{ margin-top:.35rem; }

/* Lista */
.wcas-list{
  display:flex; flex-wrap:wrap; gap:.5rem;
}

/* Yleinen swatch */
.wcas-swatch{
  appearance:none; -webkit-appearance:none;
  border:1px solid rgba(0,0,0,.2);
  background:#fff;
  padding:0; margin:0;
  width:44px; height:44px;
  border-radius:6px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Kuva */
.wcas-swatch__img{
  width:100%; height:100%;
  background-size:cover; background-position:center;
  border-radius:6px;
}

/* Tekstiswatch fallbackille */
.wcas-swatch__txt{
  font-size:12px; line-height:1.1; padding:4px; text-align:center;
  color:#111; text-transform:capitalize;
}

/* Valittu */
.wcas-swatch.is-selected{
  border-color:#111;
  box-shadow:0 0 0 2px #111 inset;
}

/* Hover */
.wcas-swatch:hover{
  transform:translateY(-1px);
  border-color:#111;
}

/* Pois käytöstä/ei varastossa/ei aktiivinen */
.wcas-swatch.is-disabled{
  opacity:.35; cursor:not-allowed;
}

/* Pienempi mobiiliin */
@media (max-width:420px){
  .wcas-swatch{ width:40px; height:40px; }
}