.dbags-yith-colors { margin: .5rem 0 .75rem; clear: both; }
.dbags-yith-colors .dbags-yith-colors__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: inherit; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.dbags-yith-colors .dbags-yith-colors__item { position: relative; display: inline-flex; align-items: center; float: none; width: auto; margin: 0; padding: 0; cursor: default; }
.dbags-yith-colors__swatch { display: block; width: 1.15rem; height: 1.15rem; border: 1px solid #767676; border-radius: 50%; box-sizing: border-box; }
.dbags-yith-colors__name { font-size: .8rem; }
.dbags-yith-colors__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Tooltips: existing swatch dimensions, colors and spacing are unchanged. */
.dbags-yith-colors__item[data-color-name]::before,
.dbags-yith-colors__item[data-color-name]::after {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 z-index: 1000;
}
.dbags-yith-colors__item[data-color-name]::before {
 content: attr(data-color-name);
 bottom: calc(100% + 7px);
 width: max-content;
 max-width: min(15rem, 80vw);
 box-sizing: border-box;
 padding: .35rem .55rem;
 border-radius: 4px;
 background: #292929;
 color: #fff;
 font-size: .75rem;
 font-weight: 400;
 line-height: 1.35;
 text-align: center;
 text-transform: none;
 letter-spacing: normal;
 white-space: normal;
 overflow-wrap: anywhere;
 box-shadow: 0 2px 6px rgb(0 0 0 / 18%);
}
.dbags-yith-colors__item[data-color-name]::after {
 content: "";
 bottom: calc(100% + 2px);
 border: 5px solid transparent;
 border-bottom: 0;
 border-top-color: #292929;
}
.dbags-yith-colors__item[data-color-name]:focus {
 z-index: 1001;
 outline: 2px solid #555;
 outline-offset: 3px;
}
.dbags-yith-colors__item[data-color-name]:focus::before,
.dbags-yith-colors__item[data-color-name]:focus::after {
 opacity: 1;
 visibility: visible;
}
@media (hover: hover) {
 .dbags-yith-colors__item[data-color-name]:hover { z-index: 1001; }
 .dbags-yith-colors__item[data-color-name]:hover::before,
 .dbags-yith-colors__item[data-color-name]:hover::after {
  opacity: 1;
  visibility: visible;
 }
}