/* Único CSS propio del storefront. No define diseño: la identidad visual sale
   entera de styles.css, que es copia del fuente del desktop React. Acá viven el
   salto al contenido, el foco visible y dos normalizaciones donde Blade usa un
   control de formulario real (input, form) allí donde React usaba un <span> o
   un <div>. No cambian el aspecto: lo igualan. */

/* React muestra la cantidad en un <span>; acá es un <input> para que el
   formulario funcione sin JavaScript. Se le quitan borde lateral, fondo y
   flechitas para que se vea exactamente igual que el span original. */
.producto-cantidad__numero {
  border-left: 0;
  border-right: 0;
  text-align: center;
  background: transparent;
  appearance: textfield;
  -moz-appearance: textfield;
}

.producto-cantidad__numero::-webkit-outer-spin-button,
.producto-cantidad__numero::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* Con un solo botón, la grilla de dos columnas de React dejaría un hueco. */
.producto-cta--simple {
  grid-template-columns: 1fr;
}

/* Los botones de la grilla van dentro de un <form>, que como hijo de flex/grid
   introduciría un salto de caja que en React no existe. */
.categ-card__info form,
.tarjeta-regalo form {
  display: contents;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.6rem 1rem;
  background: #fff;
  border: 1px solid currentColor;
}

:focus-visible {
  outline: 3px solid #b89359;
  outline-offset: 3px;
}