/* ===================================================================
   KLD Variation Swatches — Miniatures photo + overflow
   =================================================================== */

.kld-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .5rem 0 .25rem;
  align-items: center;
}

/* FEATURE 1 — Swatches carres arrondis avec miniature produit */
.kld-swatch {
  width: 60px;
  height: 60px;
  padding: 2px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.kld-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.kld-swatch:hover {
  border-color: #999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  transform: translateY(-1px);
}

.kld-swatch--active {
  border-color: #1a1a2e;
  border-width: 3px;
  box-shadow: 0 0 0 2px rgba(26, 26, 46, .15), 0 2px 8px rgba(0, 0, 0, .1);
}

.kld-swatch--active:hover {
  border-color: #1a1a2e;
}

/* Fallback texte (pas d'image) */
.kld-swatch--text {
  width: auto;
  min-width: 52px;
  height: 36px;
  padding: .25rem .5rem;
}

.kld-swatch--text span {
  font-size: .7rem;
  font-weight: 600;
  color: #333;
  text-transform: capitalize;
}

.kld-swatch--text.kld-swatch--active span {
  color: #1a1a2e;
}

/* FEATURE 2 — Bouton "+N couleurs" */
.kld-swatch--more {
  width: 60px;
  height: 60px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  background: #f5f5f7;
  font-size: .9rem;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}

.kld-swatch--more:hover {
  border-color: #1a1a2e;
  background: #eaeaed;
  color: #1a1a2e;
  transform: translateY(-1px);
}

/* Label "Couleur : Black" */
.kld-swatch-label {
  font-size: .82rem;
  color: #777;
  margin: .35rem 0 .15rem;
  font-family: 'Lato', sans-serif;
}

.kld-swatch-label__value {
  color: #333;
  font-weight: 700;
}

/* -- Responsive */
@media (max-width: 600px) {
  .kld-swatches { gap: .4rem; }
  .kld-swatch { width: 50px; height: 50px; }
  .kld-swatch--more { width: 50px; height: 50px; font-size: .85rem; }
  .kld-swatch--text { height: 38px; min-width: 50px; padding: .3rem .5rem; }
  .kld-swatch--text span { font-size: .75rem; }
  .kld-swatch-label { font-size: .82rem; margin: .4rem 0 .2rem; }
}

@media (max-width: 380px) {
  .kld-swatch { width: 44px; height: 44px; }
  .kld-swatch--more { width: 44px; height: 44px; font-size: .78rem; }
}

/* -- Cacher le select WC original (securite CSS) */
.variations td.value select + .kld-swatches {
  /* Le select est deja cache via inline style */
}

/* Override theme/plugins qui affichent leurs propres swatches */
.variations .value .cfvsw-swatches-container,
.variations .value .vi-wpvs-variation-wrap,
.variations .value .tms-vsw-swatches,
.variations .value .tms-vsw-swatches-wrapper,
.tms-vsw-swatches-container {
  display: none !important;
}