@property --quantity-gradient-position {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

.page-product .product-actions__quantity .input-group {
  position: relative;
  isolation: isolate;
  --quantity-gradient-position: 50%;
}

/* Draw the gradient over the existing shared outer edge without covering the controls. */
.page-product .product-actions__quantity .input-group::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 15px;
  background: radial-gradient(ellipse 55% 700% at var(--quantity-gradient-position) 50%, var(--primary-color), #e0bca3 58%, #c0a996) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: --quantity-gradient-position 260ms ease, opacity 160ms ease;
}

.page-product .product-actions__quantity .input-group:hover::before,
.page-product .product-actions__quantity .input-group:focus-within::before {
  opacity: 1;
}

.page-product .product-actions__quantity .input-group:has(> .decrement:focus-visible) {
  --quantity-gradient-position: 14%;
}

.page-product .product-actions__quantity .input-group:has(> .increment:focus-visible) {
  --quantity-gradient-position: 86%;
}

.page-product .product-actions__quantity .input-group:has(> .decrement:hover) {
  --quantity-gradient-position: 14%;
}

.page-product .product-actions__quantity .input-group:has(> input:hover) {
  --quantity-gradient-position: 50%;
}

.page-product .product-actions__quantity .input-group:has(> .increment:hover) {
  --quantity-gradient-position: 86%;
}

/* Theme hover/focus styles must not draw a second border around a segment. */
.page-product .product-actions__quantity .input-group > :is(button, input):is(:hover, :focus, :focus-visible) {
  border-color: #c0a996 !important;
  box-shadow: none !important;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-product .product-actions__quantity .input-group::before {
    transition: none;
  }
}