/* ==========================================================
 *  WPC Linked Variation – FRONTEND overrides (safe la update)
 * ========================================================== */
:root {
  --wpclv-blue-bg: #1c61e714;      /* bleu deschis (fundal text) */
  --wpclv-blue-border: #1c61e7;  /* chenar/hover activ */
  --wpclv-grey-border: #e7e7e7;  /* chenar implicit gri deschis */
  --wpclv-radius: 6px;           /* colțuri rotunjite */
}

/* Scope pe pagina de produs (evităm efecte globale) */
.single-product .wpclv-attributes .wpclv-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

/* Anulăm setările vechi (float/height fixe) + chenar implicit GRI */
.single-product .wpclv-attributes .wpclv-terms .wpclv-term {
  float: none !important;
  margin: 0 !important;
  padding: 2px;
  height: auto !important;
  min-width: 60px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--wpclv-grey-border);   /* gri deschis implicit */
  border-radius: var(--wpclv-radius);
  background: transparent;
}

/* Hover/activ – chenar BLEU */
.single-product .wpclv-attributes .wpclv-terms .wpclv-term:hover,
.single-product .wpclv-attributes .wpclv-terms .wpclv-term.active {
  border-color: var(--wpclv-blue-border) !important;
}

/* SWATCH TEXT / BUTTON: înălțime după conținut + fundal bleu + colțuri */
.single-product .wpclv-attributes .wpclv-terms .wpclv-term span,
.single-product .wpclv-attributes .wpclv-terms .wpclv-term a {
  display: block;
  width: 100%;
  height: auto !important;
  line-height: 1.25 !important;
  padding: 8px 12px !important;
  white-space: normal;
  background-color: var(--wpclv-blue-bg) !important;
  border-radius: var(--wpclv-radius) !important;
  outline: none;
  box-shadow: none;
  border: none;
}

/* SWATCH CULOARE: pătrățel plin, cu rotunjire fină */
.single-product .wpclv-attributes .wpclv-terms .wpclv-term-color span,
.single-product .wpclv-attributes .wpclv-terms .wpclv-term-color a {
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  line-height: 0 !important;
  border-radius: var(--wpclv-radius) !important;
}

/* SWATCH IMAGINE: 60x60, cover, colțuri rotunjite */
.single-product .wpclv-attributes .wpclv-terms .wpclv-term-image {
  width: 80px !important;
  height: 80px !important;
  padding: 0;
  border-radius: var(--wpclv-radius);
}
.single-product .wpclv-attributes .wpclv-terms .wpclv-term-image span,
.single-product .wpclv-attributes .wpclv-terms .wpclv-term-image a {
  padding: 0 !important;
  height: 100% !important;
  line-height: 0 !important;
  background: transparent !important;
  border-radius: var(--wpclv-radius) !important;
  border: none;
}
.single-product .wpclv-attributes .wpclv-terms .wpclv-term-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: var(--wpclv-radius);
  margin: 0 !important;
  border: none !important;
}

/* Eticheta atributului – aliniată, dar fără efecte vizuale intruzive */
.single-product .wpclv-attributes .wpclv-attribute-label {
  margin-bottom: 6px;
}

/* —— Mobil: EXACT 5 imagini pe rând, dar textul rămâne liber —— */
@media (max-width: 480px) {
  .single-product .wpclv-attributes .wpclv-terms .wpclv-term-image {
    flex: 0 0 calc(25% - 5px) !important;
    width: calc(25% - 5px) !important;
    max-width: calc(25% - 5px) !important;
    aspect-ratio: 1 / 1;
    height: auto !important;

    /* flex: 1 0 calc(20% - 6px); */
    /* max-width: calc(20% - 6px); */
  }
  /* Textul rămâne natural, fără forțare */
  .single-product .wpclv-attributes .wpclv-terms .wpclv-term-button {
    flex: unset;
    width: auto !important;
  }
}

/* RTL – păstrăm layoutul corect */
body.rtl .single-product .wpclv-attributes .wpclv-terms .wpclv-term {
  direction: rtl;
}