/* Product color labels retain the existing variant selection and gallery. */
.swatches.colorMarkerChoices {gap:12px;align-items:flex-start;padding:6px 4px 10px;}
.swatches.colorMarkerChoices .swThumb,#linkedProductsList .linkedProductCard.colorMarkerChoice {position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;width:auto!important;min-width:64px!important;max-width:112px;min-height:0!important;height:auto!important;padding:8px 6px!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;color:inherit;}
.colorMarkerDot {display:block!important;flex:none;width:34px;height:34px;border-radius:50%;background:var(--product-swatch,#e5e7eb);border:1px solid rgba(100,116,139,.38);box-shadow:0 0 0 3px var(--bg,#fff);}
.colorMarkerChoice.swThumbOn .colorMarkerDot,.colorMarkerChoice.isCurrent .colorMarkerDot {outline:2px solid currentColor;outline-offset:4px;}
.colorMarkerChoice:focus-visible {outline:2px solid currentColor!important;outline-offset:2px;}
.swatches .colorMarkerChoice .swThumbLbl {position:static!important;background:transparent!important;color:inherit!important;white-space:normal!important;text-align:center;font-size:12px;line-height:1.3;padding:0!important;max-width:100px;}
.swatches .colorMarkerChoice .swNewBadge,.swatches .colorMarkerChoice .swStockBadge {position:static!important;display:block;font-size:9px;line-height:1.2;max-width:100%;}
#linkedProductsList .colorMarkerChoice .linkedProductText {text-align:center;}
/* Store themes may deliberately square every element; swatches stay circular. */
html body .colorMarkerDot {border-radius:50%!important;}
html body #swatches.swatches.colorMarkerChoices button.swThumb.colorMarkerChoice {border:0!important;outline:none!important;box-shadow:none!important;}
html body #swatches.swatches.colorMarkerChoices button.swThumb.colorMarkerChoice::before,html body #swatches.swatches.colorMarkerChoices button.swThumb.colorMarkerChoice::after {display:none!important;}
html body #swatches.swatches.colorMarkerChoices button.swThumb.colorMarkerChoice:focus-visible {outline:2px solid currentColor!important;}

/* Compact color choices: the accessible name and native hover tooltip stay on the button. */
html body .swatches.colorMarkerChoices {gap:8px;flex-wrap:wrap;}
html body .swatches.colorMarkerChoices .swThumb,
html body #linkedProductsList .linkedProductCard.colorMarkerChoice {
  width:44px!important;min-width:44px!important;max-width:44px!important;
  height:44px!important;min-height:44px!important;padding:5px!important;gap:0!important;
  justify-content:center!important;
}
html body .swatches .colorMarkerChoice .swThumbLbl,
html body .swatches .colorMarkerChoice .swNewBadge,
html body .swatches .colorMarkerChoice .swStockBadge,
html body #linkedProductsList .colorMarkerChoice .linkedProductText {display:none!important;}

/* Immediate in-page tooltips, also available to keyboard users. */
html body #swatches.colorMarkerChoices {overflow:visible!important;}
html body #swatches.colorMarkerChoices .colorMarkerChoice:hover,
html body #swatches.colorMarkerChoices .colorMarkerChoice:focus-visible,
html body #linkedProductsList .colorMarkerChoice:hover,
html body #linkedProductsList .colorMarkerChoice:focus-visible {z-index:20;}
html body #swatches.colorMarkerChoices .colorMarkerChoice:hover .swThumbLbl,
html body #swatches.colorMarkerChoices .colorMarkerChoice:focus-visible .swThumbLbl,
html body #linkedProductsList .colorMarkerChoice:hover .linkedProductText,
html body #linkedProductsList .colorMarkerChoice:focus-visible .linkedProductText {
  display:block!important;position:absolute!important;top:calc(100% + 8px)!important;
  left:0!important;bottom:auto!important;right:auto!important;
  width:max-content!important;max-width:220px!important;padding:7px 10px!important;
  margin:0!important;background:#182030!important;color:#fff!important;
  border-radius:6px!important;box-shadow:0 3px 12px #0002!important;
  font-size:13px!important;line-height:1.4!important;font-weight:400!important;
  white-space:normal!important;text-align:left!important;pointer-events:none!important;
}
html body #linkedProductsList .colorMarkerChoice .linkedProductText small {display:none!important;}