/**
 * Ecom Motor Colores - fila de colores con foto (listados y bloque de la ficha) y la
 * foto dentro del selector de color de los temas que no la pintan ellos.
 *
 * @author    Ecom Experts <ecomyseo@gmail.com>
 * @copyright 2026 Ecom Experts
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License (AFL 3.0)
 */
.ecmo-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
}
.ecmo-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d6d6d6;
  background: #f2f2f2;
  color: inherit;
  font-size: 12px;
  text-decoration: none;
  overflow: hidden;
}
.ecmo-swatch:hover {
  border-color: #000;
}
.ecmo-swatch img,
.ecmo-swatch > span {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ecmo-swatches--block {
  margin: 24px 0 0;
}
.ecmo-swatches--block .ecmo-swatch {
  width: 64px;
  height: 64px;
}
/* selector de color con la foto de fondo (la pone front.js) */
.ecmo-color {
  background-size: cover !important;
  background-position: center !important;
}