/* =========================================
   TOOLTIP ДЛЯ ЦВЕТОВ ВЕРЁВКИ И ДЕРЕВА
========================================= */

.zc-rope-color,
.zc-wood-color{
  cursor:pointer;
}

/* =========================
   ОСНОВНАЯ ПЛАШКА
========================= */

.zc-rope-color::after,
.zc-wood-color::after{
  content:attr(data-name);

  position:absolute;

  left:50%;
  top:-52px;

  transform:translateX(-50%) translateY(6px);

  background:#fff;
  color:#222;

  padding:11px 16px;

  border-radius:16px;

  border:2px solid rgba(0,0,0,.06);

  box-shadow:
    0 10px 30px rgba(0,0,0,.08);

  font-family:'TildaSans', Arial, sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1 !important;

  white-space:nowrap;

  opacity:0;
  pointer-events:none;

  transition:
    opacity .18s ease,
    transform .18s ease;

  z-index:99999;
}

/* =========================
   СТРЕЛОЧКА
========================= */

.zc-rope-color::before,
.zc-wood-color::before{
  content:"";

  position:absolute;

  left:50%;
  top:-12px;

  transform:translateX(-50%);

  border:7px solid transparent;
  border-top-color:#fff;

  opacity:0;

  transition:opacity .18s ease;

  z-index:99999;
}

/* =========================
   ПОКАЗ
========================= */

.zc-rope-color:hover::after,
.zc-rope-color:hover::before,
.zc-wood-color:hover::after,
.zc-wood-color:hover::before{
  opacity:1;
}

.zc-rope-color:hover::after,
.zc-wood-color:hover::after{
  transform:translateX(-50%) translateY(0);
}
</style>