.saya-rail-tag {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform-origin: center top;
  rotate: var(--rail-sway, 0rad);
}

.saya-rail-tag-position {
  position: absolute;
  top: calc(15% + var(--rail-front-blend) * 5%);
  left: calc(56% + var(--rail-front-blend) * 6%);
  width: calc(12% + var(--rail-front-blend) * 3.75%);
  padding-top: 7%;
  translate: -50% 0;
  rotate: -7deg;
  transform-origin: center top;
  perspective: 220px;
}

.saya-rail-tag-position::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 50%;
  width: 5px;
  height: 43%;
  border: 1px solid #c9bda8;
  border-radius: 65% 35% 45% 50%;
  translate: -50% 0;
  rotate: 9deg;
}

.saya-rail-tag-card {
  position: relative;
  display: block;
  aspect-ratio: 1;
  transform: rotateY(calc(-180deg * var(--tag-turn, 0)));
  transform-style: preserve-3d;
  transition: transform 340ms cubic-bezier(.3,.65,.3,1);
}

.saya-rail-item.is-active .saya-rail-tag.has-label .saya-rail-tag-card {
  --tag-turn: 1;
  transition-delay: 110ms;
}

.saya-rail-tag-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #f5efe4;
  color: #111;
  box-shadow: 1px 2px 4px rgb(39 27 21 / 23%);
  backface-visibility: hidden;
}

.saya-rail-tag-face::after {
  content: '';
  position: absolute;
  top: 8%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #b9ad99;
  translate: -50% 0;
}

.saya-rail-tag-front::before {
  content: '';
  width: 84%;
  height: 65%;
  background: #111;
  mask: url('/byandrea-logo.png') center / contain no-repeat;
}

.saya-rail-tag-back {
  transform: rotateY(180deg) translateZ(.1px);
  font: 700 max(6px, calc(var(--skirt-width) * .032))/1 system-ui, sans-serif;
  letter-spacing: -.02em;
}

.saya-rail-tag-back.is-price { font-size: 11px; }

@media (max-width: 960px), (hover: none), (pointer: coarse) {
  .saya-rail-item.is-active .saya-rail-tag.has-label .saya-rail-tag-card {
    --tag-turn: clamp(0, calc((var(--rail-turn) - .68) * 3.125), 1);
  }

  .saya-rail-tag .saya-rail-tag-card { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .saya-rail-tag .saya-rail-tag-card { transition: none; }
}