.size-picker .size-photo,
.size-picker button[aria-pressed=true] .size-photo {
  position: relative;
  overflow: visible;
  outline: none;
}
.size-image { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; }
.size-selection-ring { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; pointer-events: none; opacity: 0; transition: opacity .25s; }
.size-selection-ring path { fill: none; stroke: var(--purple); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.size-picker button[aria-pressed=true] .size-selection-ring { opacity: 1; }
.size-picker .is-ring-drawing .size-selection-ring path { animation: size-ring-draw 1.5s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes size-ring-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.price-deck { position: relative; min-width: 0; perspective: 1000px; isolation: isolate; }
.price-deck > .price-tag { height: 100%; transform-origin: 50% 75%; }
.price-deck > .price-tag:not(.price-outgoing) { z-index: 2; }
.price-deck > .price-outgoing { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; margin: 0; transition: none; }

@media (max-width: 540px) {
  .price-tags { padding-top: 30px; padding-bottom: 32px; overflow-y: hidden; }
  .price-deck { flex: 0 0 77%; scroll-snap-align: start; }
  .price-deck .price-tag h3 { min-height: 2.08em; }
}
@media (prefers-reduced-motion: reduce) {
  .size-selection-ring { transition: none; }
  .size-picker .is-ring-drawing .size-selection-ring path { animation: none; stroke-dashoffset: 0; }
}