@property --scroll-ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Wrapper pro obrázky */
.vb-scroll-ring-wrap {
  position: relative;
  display: block;
  line-height: 0;
  border-radius: 8px;
}

.vb-scroll-ring-wrap > img {
  position: relative;
  z-index: 1;
  display: block;
}

/* Host pro ne-obrázkové prvky (karty, boxy) */
.vb-ring-host {
  position: relative;
}

/* Obsah karet musí být nad ringem */
.vb-ring-host > :not(.scroll-gradient-ring):not(.scroll-gradient-ring--tr):not(.scroll-gradient-ring--bl):not(.scroll-gradient-ring--br) {
  position: relative;
  z-index: 1;
}

/* Sdílené styly všech variant ringu */
.scroll-gradient-ring,
.scroll-gradient-ring--tr,
.scroll-gradient-ring--bl,
.scroll-gradient-ring--br {
  position: absolute;
  inset: -2px;
  z-index: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
  background-origin: border-box;
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
}

/* Top-left (výchozí) */
.scroll-gradient-ring {
  background-image:
    linear-gradient(var(--scroll-ring-bg, #0d0d0d), var(--scroll-ring-bg, #0d0d0d)),
    conic-gradient(
      from var(--scroll-ring-angle) at 11% 9%,
      #5a0014 0deg,
      #5a0014 150deg,
      #fe1a3f 180deg,
      #FF8384 210deg,
      #FF8384 255deg,
      #FF8384 300deg,
      #fe1a3f 330deg,
      #5a0014 360deg
    );
  -webkit-mask: radial-gradient(ellipse 120% 90% at 0% 0%, #fff 0%, transparent 70%);
  mask: radial-gradient(ellipse 120% 90% at 0% 0%, #fff 0%, transparent 70%);
}

/* Top-right */
.scroll-gradient-ring--tr {
  background-image:
    linear-gradient(var(--scroll-ring-bg, #0d0d0d), var(--scroll-ring-bg, #0d0d0d)),
    conic-gradient(
      from var(--scroll-ring-angle) at 89% 9%,
      #5a0014 0deg,
      #5a0014 150deg,
      #fe1a3f 180deg,
      #FF8384 210deg,
      #FF8384 255deg,
      #FF8384 300deg,
      #fe1a3f 330deg,
      #5a0014 360deg
    );
  -webkit-mask: radial-gradient(ellipse 120% 90% at 100% 0%, #fff 0%, transparent 70%);
  mask: radial-gradient(ellipse 120% 90% at 100% 0%, #fff 0%, transparent 70%);
}

/* Pricing karty mají overflow:hidden — pro viditelný ring musíme překrýt */
.vb-ring-host.clean-pricing-item {
  overflow: visible;
}

/* Bottom-left */
.scroll-gradient-ring--bl {
  background-image:
    linear-gradient(var(--scroll-ring-bg, #0d0d0d), var(--scroll-ring-bg, #0d0d0d)),
    conic-gradient(
      from var(--scroll-ring-angle) at 11% 91%,
      #5a0014 0deg,
      #5a0014 150deg,
      #fe1a3f 180deg,
      #FF8384 210deg,
      #FF8384 255deg,
      #FF8384 300deg,
      #fe1a3f 330deg,
      #5a0014 360deg
    );
  -webkit-mask: radial-gradient(ellipse 120% 90% at 0% 100%, #fff 0%, transparent 70%);
  mask: radial-gradient(ellipse 120% 90% at 0% 100%, #fff 0%, transparent 70%);
}

/* Bottom-right */
.scroll-gradient-ring--br {
  background-image:
    linear-gradient(var(--scroll-ring-bg, #0d0d0d), var(--scroll-ring-bg, #0d0d0d)),
    conic-gradient(
      from var(--scroll-ring-angle) at 89% 91%,
      #5a0014 0deg,
      #5a0014 150deg,
      #fe1a3f 180deg,
      #FF8384 210deg,
      #FF8384 255deg,
      #FF8384 300deg,
      #fe1a3f 330deg,
      #5a0014 360deg
    );
  -webkit-mask: radial-gradient(ellipse 120% 90% at 100% 100%, #fff 0%, transparent 70%);
  mask: radial-gradient(ellipse 120% 90% at 100% 100%, #fff 0%, transparent 70%);
}