@layer components {
  .quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .quantity-controls__value {
    min-width: 1.5rem;
    text-align: center;
  }

  .quantity-controls__btn:disabled,
  .quantity-controls__btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}