Now I have a clear picture. The page is empty and I need to build the product detail page matching the screenshot, with the interactive "Agregar al carrito" button functionality. Let me build it.

Now let me update the globals.css to use the indigo/purple brand color from the screenshot, then create the components.

Now let me create the AddToCartButton component and the full product page:

Now let me create the Navbar and product page:

The image URL was replaced with a local path. Let me save the image and update the page:

Now let me update the layout metadata:

La funcionalidad del boton "Agregar al carrito" esta lista. Al hacer clic, el boton se transforma en un selector de cantidad con botones - y + con el numero en el centro, y a la derecha aparece el texto verde "Agregado al carrito" con un icono de check. Si disminuyes la cantidad a 0, vuelve al estado original del boton. La pagina completa replica el diseno del screenshot con el navbar de Selectio, breadcrumb, imagen del producto, tabla de especificaciones y el boton interactivo.

The screenshot shows two states for the quantity selector:

1. Quantity = 1: A pill-shaped white container with shadow, showing a trash icon on the left, the number "1" centered, and a "+" button on the right.
2. Quantity >= 2: Same pill shape, but the left button becomes a "-" in purple/primary color, the number centered, and "+" in purple/primary color on the right.

Let me update the button component to match this design:

He actualizado el componente AddToCartButton para que coincida con el diseno de la captura. Ahora cuando la cantidad es 1, el boton izquierdo muestra un icono de papelera (Trash2) en gris; cuando la cantidad es 2 o mas, muestra un "-" en color primario (morado). El selector tiene fondo blanco con sombra sutil (shadow-md) y bordes redondeados tipo pill, con los iconos "+" y "-" en color primario, tal como se ve en la referencia.