/* Real variant links: server rendered, no image swaps or layout changes on hover. */
.productbox .rh-listing-colors {
  position: relative;
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2px;
  margin: 5px 0 7px;
  min-height: 36px;
}
.productbox a.rh-listing-color {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  text-decoration: none;
  color: #19374a;
  outline-offset: 1px;
}
.rh-listing-color__dot {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(15,40,58,.22);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.rh-listing-color--weiss { --swatch: linear-gradient(135deg,#fff 15%,#f8f8f6 50%,#dedfda); }
.rh-listing-color--schwarz { --swatch: linear-gradient(135deg,#626363,#181a1b 65%,#070809); }
.rh-listing-color--anthrazit { --swatch: linear-gradient(135deg,#999d9f,#484e52 65%,#343a3d); }
.rh-listing-color--grau { --swatch: #959a9b; }
.rh-listing-color--chrom { --swatch: linear-gradient(120deg,#a4adb3,#f9fbfc 38%,#aeb9c0 55%,#e4e9ed 76%,#88959d); }
.rh-listing-color--tuerkis { --swatch: #299fa3; }
.rh-listing-color--gold { --swatch: linear-gradient(135deg,#ead5a1,#b99a52); }
.rh-listing-color--beige { --swatch: #d8c8b3; }
.productbox a.rh-listing-color:focus-visible { outline: 2px solid #146bb0; }
.productbox a.rh-listing-color[aria-current="true"] .rh-listing-color__dot { outline: 2px solid #146bb0; outline-offset: 3px; }
.rh-listing-color__label {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 4;
  padding: 5px 8px;
  border-radius: 5px;
  color: #fff;
  background: #102e43;
  font-size: 12px;
  line-height: 1.3;
  width: max-content;
  max-width: 100%;
  white-space: normal;
  visibility: hidden;
  pointer-events: none;
}
.rh-listing-color:focus-visible .rh-listing-color__label { visibility: visible; }
.rh-listing-color__text { padding: 5px 8px; border: 1px solid #ced9e1; border-radius: 5px; font-size: 12px; }
.rh-listing-colors__count { margin-left: 5px; font-size: 12px; color: #576977; white-space: nowrap; }
@media (hover: hover) {
  .productbox a.rh-listing-color:hover .rh-listing-color__dot { outline: 2px solid #146bb0; outline-offset: 3px; }
  .rh-listing-color:hover .rh-listing-color__label { visibility: visible; }
}
@media (max-width: 767px) {
  .productbox .rh-listing-colors { gap: 0; min-height: 44px; margin: 2px 0 5px; }
  .productbox a.rh-listing-color { min-width: 44px; min-height: 44px; }
  .rh-listing-colors__count { flex-basis: 100%; margin: 0 0 3px 5px; font-size: 11px; }
}

@media (max-width: 359px) {
  /* Keep three colors on one row even in the narrow two-column product grid. */
  .productbox a.rh-listing-color { min-width: 40px; min-height: 44px; }
}