:root {
  --coyful-v6-ink: #242424;
  --coyful-v6-ivory: #fffdf9;
  --coyful-v6-line: #d9d1c7;
  --coyful-v6-gold: #d4b055;
}

.coyful-v6-image-host {
  position: relative !important;
  display: block;
}
.coyful-v6-overlay-host {
  position: absolute !important;
  z-index: 35;
  top: 9px;
  left: 9px;
  width: 54px;
  height: 54px;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  line-height: 1;
}
.coyful-v6-overlay {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.coyful-v6-overlay img,
.coyful-v6-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
}
.coyful-v6-bestseller-star {
  fill: var(--coyful-v6-gold);
  stroke: #b4871f;
  stroke-width: 2;
}
.coyful-v6-bestseller-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  fill: var(--coyful-v6-ink);
  text-anchor: middle;
}
.coyful-v6-overlay-text {
  border: 1.4px solid var(--coyful-v6-line);
  border-radius: 50%;
  background: rgba(255,253,249,.97);
  color: var(--coyful-v6-ink);
  text-align: center;
}
.coyful-v6-overlay-text > span {
  padding: 5px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.coyful-v6-overlay-limited-edition { border-color: #bd9f66; }
.coyful-v6-overlay-exclusive-find { border-color: #b593ac; }

.coyful-v6-attributes {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  clear: both;
  line-height: normal;
  box-sizing: border-box;
}
.coyful-v6-attributes-loop {
  justify-content: center;
  margin: 6px 0 2px;
}
.coyful-v6-attributes-single {
  justify-content: flex-start;
  margin: 8px 0 12px;
}
.coyful-v6-attribute {
  width: 64px;
  height: 44px;
  flex: 0 0 64px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.coyful-v6-attribute-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.coyful-v6-attribute-text {
  flex-direction: column;
  gap: 1px;
  padding: 3px 4px;
  border: 1.2px solid var(--coyful-v6-line);
  border-radius: 16px;
  background: rgba(255,253,249,.97);
  color: var(--coyful-v6-ink);
  text-align: center;
}
.coyful-v6-attribute-text svg {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.coyful-v6-attribute-text > span {
  display: block;
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.coyful-v6-attribute-eco-friendly { color:#4b6d5b; border-color:#b9c9be; background:#f7fbf7; }
.coyful-v6-attribute-reusable-tin { color:#304964; border-color:#bcc6d1; background:#fafbfc; }
.coyful-v6-attribute-wet-dry { color:#3f6f8f; border-color:#bdd4e3; background:#f6fbff; }
.coyful-v6-attribute-gentle-detangling { color:#8d5b47; border-color:#d5b7aa; background:#fff8f4; }
.coyful-v6-attribute-curly-hair-friendly { color:#6a5678; border-color:#d2c7dd; background:#fbf9fe; }
.coyful-v6-attribute-travel-size { color:#85632c; border-color:#d9c7a1; background:#fffbf3; }
.coyful-v6-attribute-flexible-head { color:#5c6d7a; border-color:#c5cfd7; background:#f7fafc; }

/* Hide stale cached markup from abandoned versions. */
.coyful-v5-overlay-host, .coyful-v5-attributes,
.coyful-v4-overlay-host, .coyful-v4-attributes,
.coyful-badges-v3-overlay-host, .coyful-badges-v3-single-overlay-host, .coyful-badges-v3-attributes,
.coyful-overlay-slot, .coyful-product-overlay, .coyful-loop-overlay-anchor, .coyful-loop-overlay-slot,
.coyful-price-badge-host, .coyful-attribute-row, .coyful-attr-wrap, .coyful-single-overlay-row {
  display: none !important;
}

@media (max-width: 767px) {
  .coyful-v6-overlay-host {
    left: auto;
    right: 7px;
    top: 7px;
    width: 49px;
    height: 49px;
  }
  .coyful-v6-overlay {
    width: 49px;
    height: 49px;
  }
  .coyful-v6-attribute {
    width: 60px;
    height: 42px;
    flex-basis: 60px;
  }
  .coyful-v6-attribute-text > span { font-size: 8px; }
  .coyful-v6-attribute-text svg { width: 13px; height: 13px; flex-basis: 13px; }
}
