:root {
  --variant-bg-overlay: linear-gradient(#fff6, #fff6);
}

html[data-design="velvet-night"] .content-wrapper {
  background-color: #170f16 !important;
  background-image: linear-gradient(rgba(20, 8, 18, .72), rgba(20, 8, 18, .72)), url("../images/girly-pink-shoes-bg.webp") !important;
}

html[data-design="velvet-night"] .content {
  background-color: rgba(34, 24, 32, .94);
  border-color: rgba(255, 134, 199, .24);
  color: #fff3fa;
}

html[data-design="velvet-night"] .hero-offer,
html[data-design="velvet-night"] .section,
html[data-design="velvet-night"] .footer {
  background-color: rgba(34, 24, 32, .94);
}

html[data-design="velvet-night"] .regular-m,
html[data-design="velvet-night"] .regular-s,
html[data-design="velvet-night"] .h1,
html[data-design="velvet-night"] .h2,
html[data-design="velvet-night"] .h3 {
  color: #fff3fa;
}

html[data-design="velvet-night"] .link-button,
html[data-design="velvet-night"] .social-button {
  background-color: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
}

html[data-design="velvet-night"] .ticker {
  background-color: #f074b8;
}

html[data-design="cream-doll"] .content-wrapper {
  background-color: #fff2e5 !important;
  background-image: linear-gradient(rgba(255, 250, 242, .6), rgba(255, 232, 242, .68)), url("../images/girly-pink-shoes-bg.webp") !important;
}

html[data-design="cream-doll"] .content,
html[data-design="cream-doll"] .hero-offer,
html[data-design="cream-doll"] .section,
html[data-design="cream-doll"] .footer {
  background-color: #fff8f0;
}

html[data-design="cream-doll"] .ticker {
  background-color: #f9a7c8;
}

html[data-design="cream-doll"] .link-button,
html[data-design="cream-doll"] .social-button {
  background-color: #f5ece7;
}

html[data-design="glass-bloom"] .content-wrapper {
  background-color: #fbeefa !important;
  background-image: linear-gradient(rgba(255, 255, 255, .36), rgba(255, 255, 255, .64)), url("../images/girly-pink-shoes-bg.webp") !important;
}

html[data-design="glass-bloom"] .content {
  background-color: rgba(255, 255, 255, .52);
  backdrop-filter: blur(18px);
}

html[data-design="glass-bloom"] .hero-offer,
html[data-design="glass-bloom"] .section,
html[data-design="glass-bloom"] .footer {
  background-color: rgba(255, 255, 255, .58);
}

html[data-design="glass-bloom"] .link-button,
html[data-design="glass-bloom"] .social-button {
  background-color: rgba(255, 255, 255, .52);
  backdrop-filter: blur(12px);
}

html[data-design="glass-bloom"] .ticker {
  background-color: rgba(216, 107, 174, .84);
}