/* --------- NASCONDI IL SELECT WC QUANDO C'È IL NOSTRO CONTROLLO --------- */
.fixav-hidden-select{ display:none !important; }

/* --------- WRAPPER COMUNE --------- */
.fixav-control{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem .9rem;
  margin-top:.5rem;
}

/* nascondi i radio ma lasciali nel flow per i selettori :checked + label */
.fixav-control .fixav-input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none;
}

/* ======================================================================= */
/*                              BUTTON (pill)                               */
/* ======================================================================= */
.fixav-pill{
  display:inline-block;
  padding:.55rem .8rem;
  border:1px solid #d6d6d6;
  border-radius:999px;
  line-height:1.2;
  background:#fff;
  color:#222;
  cursor:pointer;
  transition:all .15s ease;
  user-select:none;
  font-weight:500;
}
.fixav-control .fixav-input:checked + .fixav-pill{
  border-color:#111;
  background:#111;
  color:#fff !important;
}
.fixav-pill:hover{ transform: translateY(-1px); }
.fixav-pill:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* ======================================================================= */
/*                      LAYOUT THUMB (immagini e colori)                    */
/* ======================================================================= */
.fixav-thumbitem{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  margin:.25rem .5rem .75rem 0;
  vertical-align:top;
  min-width:44px;
}

.fixav-thumb{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border:1px solid #dde1e6;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s, transform .05s;
}
.fixav-thumb:active{ transform:scale(.98); }

/* stato selezionato (uguale per img e colori) */
.fixav-control .fixav-input:checked + .fixav-thumb{
  border-color:#111827;
  box-shadow:0 0 0 2px #111827 inset;
}

/* focus tastiera */
.fixav-control .fixav-input:focus-visible + .fixav-thumb{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

/* caption sotto la card */
.fixav-caption{
  font-size:.78rem;
  line-height:1.1;
  color:#555;
  text-align:center;
  max-width:72px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* immagini dentro la card */
.fixav-thumb img {
    display: block;
    max-width: 90%;
    height: 90%;
    border-radius: 7px;
}

/* hover card */
.fixav-control .fixav-thumb:hover{ border-color:#c2c8d0; }

/* ======================================================================= */
/*                            COLOR (swatch card)                           */
/* ======================================================================= */
.fixav-thumb--color{
  position:relative;
  display:grid;
  place-items:center;
}

/* cerchio colore:
   - di default usa var(--swatch)
   - il PHP imposta anche style="background:#xxxxxx" per massima compatibilità */
.fixav-thumb--color > .fixav-swatch-inner{
  display:block;
  width:70%;
  height:70%;
  border-radius:50%;
  background:var(--swatch, #c7c7c7);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

/* piccola differenza visiva allo stato hover della card colore */
.fixav-control[data-mode="color"] .fixav-thumb:hover{
  border-color:#c2c8d0;
}

/* ======================================================================= */
/*               (compatibilità vecchio markup: pallino standalone)        */
/* ======================================================================= */
.fixav-swatch{
  width:28px; height:28px;
  border-radius:999px;
  border:1px solid #d6d6d6;
  display:inline-block;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:#fff;
}
.fixav-swatch .fixav-swatch-inner{
  position:absolute; inset:0;
  background:var(--swatch, #eee);
}
.fixav-control .fixav-input:checked + .fixav-swatch{
  outline:2px solid #111;
  outline-offset:2px;
  border-color:#111;
}