/* Single swatches */
.vcs-single-swatches{margin:10px 0 12px;display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.vcs-single-swatches .vcs-label{font-weight:600;min-width:44px;line-height:36px}
.vcs-single-swatches .vcs-swatches{display:flex;flex-wrap:wrap;gap:10px;position:relative}

.vcs-swatch{
  width:36px;height:36px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  background-size:cover;
  background-position:center;
  cursor:pointer;
  position:relative;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  padding:0;
}
.vcs-swatch:hover{transform:translateY(-1px)}
.vcs-swatch.is-active{outline:2px solid #0b57d0;outline-offset:2px}

/* Light colors visibility */
.vcs-swatch[style*="background-color:#fff"],
.vcs-swatch[style*="background-color:#ffffff"],
.vcs-loop-swatch[style*="background-color:#fff"],
.vcs-loop-swatch[style*="background-color:#ffffff"]{
  box-shadow:0 6px 14px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.08);
}

/* Tooltip */
.vcs-tooltip{
  position:absolute;
  left:50%;
  bottom:130%;
  transform:translateX(-50%);
  background:#111;
  color:#fff;
  font-size:12px;
  line-height:1;
  padding:8px 10px;
  border-radius:12px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
  z-index:99999;
}
.vcs-tooltip:after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#111;
}
.vcs-swatch:hover .vcs-tooltip,
.vcs-loop-swatch:hover .vcs-tooltip{opacity:1}

/* Loop swatches (CATALOG) — nice bar under image */
.astra-shop-thumbnail-wrap{position:relative}

/* общая плашка */
.vcs-loop-swatches{
  position:static;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  width:calc(100% - 16px);
  margin:10px auto 0;
  padding:10px 12px;

  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.10);

  pointer-events:auto;
  z-index:1;
}

.vcs-loop-label{
  font-weight:600;
  font-size:13px;
  line-height:1;
  color:#111;
  opacity:.9;
  white-space:nowrap;
}

.vcs-loop-swatches-list{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

/* кружки побольше */
.vcs-loop-swatch{
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);

  background:#fff;
  background-size:cover;
  background-position:center;

  cursor:pointer;
  position:relative;
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  padding:0;

  pointer-events:auto;
}

.vcs-loop-swatch:hover{transform:translateY(-1px)}

/* светлые/белые чтобы было видно */
.vcs-loop-swatch[style*="background-color:#fff"],
.vcs-loop-swatch[style*="background-color:#ffffff"]{
  box-shadow:0 6px 14px rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.10);
}

/* мобилка */
@media (max-width: 544px){
  .vcs-loop-swatches{
    width:calc(100% - 12px);
    padding:9px 10px;
    margin-top:8px;
    border-radius:12px;
    gap:8px;
  }
  .vcs-loop-swatch{width:22px;height:22px}
  .vcs-loop-label{font-size:12px}
  .vcs-loop-swatches-list{gap:8px}
}