/**
 * op-shop-upgrade — стили для альтернативных товаров (кружки цветов)
 * Не использует класс .mimi-swatch на ссылках, чтобы JS темы (color-swatches.js)
 * не перехватывал клики и не превращал их в выбор вариации.
 */

/* Базовый кружок — повторяет геометрию .mimi-swatch из темы */
.op-alt-swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid transparent;
  position: relative;
  transition: 0.2s;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  box-sizing: border-box;
}

a.op-alt-swatch:hover,
a.op-alt-swatch:focus {
  text-decoration: none;
  transform: scale(1.1);
}

/* Выделение текущего цвета — тёмная обводка в брендовом цвете темы */
.op-alt-swatch.is-current {
  border: 1.5px solid var(--brown, #593e3c);
  cursor: default;
}

/* Скрываем штатный блок выбора цвета темы (одиночный кружок текущего товара).
 * Наш блок отличается тем, что у него дополнительный класс .op-alt-products.
 * Селектор: блок без .op-alt-products = штатный mimi-блок = прячем. */
.mimi-colors-block:not(.op-alt-products) {
  display: none;
}