.sidorta-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2px;
}

select.sidorta-native-select { display: none !important; }

.sidorta-swatch,
.rb-product-options--swatches .rb-product-option--swatch.sidorta-swatch {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 11px;
  background: var(--sidorta-swatch-color, #e8ddda);
  box-shadow: 0 0 0 1px #d4cdca;
  color: transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.sidorta-swatch:hover:not(:disabled),
.rb-product-options--swatches .rb-product-option--swatch.sidorta-swatch:hover:not(:disabled) {
  background: var(--sidorta-swatch-color, #e8ddda);
  box-shadow: 0 0 0 2px #8a7770;
  transform: translateY(-1px);
}

.sidorta-swatch.is-selected,
.sidorta-swatch.is-active,
.sidorta-swatch[aria-selected="true"],
.rb-product-options--swatches .rb-product-option--swatch.sidorta-swatch.is-selected,
.rb-product-options--swatches .rb-product-option--swatch.sidorta-swatch.is-active {
  background: var(--sidorta-swatch-color, #e8ddda);
  box-shadow: 0 0 0 2px #312b29, 0 0 0 4px #fff;
}

.sidorta-swatch::before,
.sidorta-swatch .rb-product-option__check,
.rb-product-options--swatches .rb-product-option--swatch.sidorta-swatch::before {
  display: none !important;
  content: none !important;
}

.sidorta-swatch:disabled,
.sidorta-swatch.is-unavailable,
.rb-product-options--swatches .rb-product-option--swatch.sidorta-swatch:disabled {
  background: var(--sidorta-swatch-color, #e8ddda);
  opacity: .72;
  filter: none;
  cursor: not-allowed;
}

.sidorta-swatch:disabled::after,
.sidorta-swatch.is-unavailable::after,
.rb-product-options--swatches .rb-product-option--swatch.sidorta-swatch:disabled::after {
  position: absolute;
  inset: 1px;
  border-radius: 7px;
  background: linear-gradient(135deg, transparent 48.5%, rgba(83, 78, 76, .72) 49%, rgba(83, 78, 76, .72) 51%, transparent 51.5%);
  content: '';
  pointer-events: none;
}

.sidorta-selected-color {
  color: #312b29;
  font-weight: 700;
}

.sidorta-swatch:focus-visible {
  outline: 2px solid #312b29;
  outline-offset: 4px;
}

@media (max-width: 600px) {
  .sidorta-swatches { gap: 10px; }
}