/* ==========================================================================
   Selector de cantidad (stepper) para tarjetas de producto y formularios
   de "anadir al carrito" en todo el sitio (tienda, categorias, relacionados,
   pagina de producto).
   Sistema de diseno Semillas Plantae - Catalogo de Huerta: borde 1px
   neutral-300, sin radius, acento verde en hover/estado activo.

   IMPORTANTE sobre el ancho: el widget de Elementor Pro ("Add to cart") mete
   .quantity dentro de contenedores flex propios y en algunos layouts le
   aplica flex-basis:100% / width:100%, lo que antes dejaba el stepper
   estirado a todo el ancho de la tarjeta con un hueco en blanco despues del
   boton "+". flex/width/max-width forzados con !important evitan que crezca
   mas alla del contenido (boton - + input + boton +), sin importar que
   contenedor lo envuelva.
   ========================================================================== */

.quantity{
  display:inline-flex !important;
  flex:0 0 auto !important;
  width:auto !important;
  max-width:max-content !important;
  align-items:stretch;
  float:none !important;
  margin:0 !important;
  border:1px solid #D3CFC2;
  background:#fff;
  border-radius:0;
  overflow:hidden;
  box-sizing:border-box;
  line-height:1;
  vertical-align:middle;
}

.quantity .qty{
  order:2;
  flex:0 0 auto !important;
  height:auto !important;
  min-height:38px;
  border:none !important;
  border-left:1px solid #D3CFC2 !important;
  border-right:1px solid #D3CFC2 !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 4px;
  text-align:center;
  color:#1B2620 !important;
  background:#fff !important;
  box-sizing:border-box;
  /* Oculta el spinner nativo del navegador -- los botones -/+ lo reemplazan. */
  -moz-appearance:textfield;
  appearance:textfield;
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.sp-qty-btn{
  order:1;
  flex:0 0 auto !important;
  align-self:stretch;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:34px !important;
  min-width:34px !important;
  min-height:38px;
  height:auto;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  border-style:none !important;
  border-radius:0 !important;
  background:#fff !important;
  color:#1B2620 !important;
  font-family:'Public Sans', system-ui, sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1 !important;
  cursor:pointer;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease, color .15s ease !important;
}
.sp-qty-btn--plus{ order:3; }

.sp-qty-btn:hover:not(:disabled){
  background:#3F7D52 !important;
  color:#fff !important;
}
.sp-qty-btn:active:not(:disabled){
  background:#2E6644 !important;
  color:#fff !important;
}
.sp-qty-btn:focus-visible{
  outline:2px solid #3F7D52;
  outline-offset:-2px;
}
.sp-qty-btn:disabled{
  cursor:not-allowed;
  color:#B9B6A8 !important;
  background:#fff !important;
}

/* La pagina de producto ya define su propio ancho/alto para .qty y el
   formulario de compra (ver product.css); aqui solo se ajusta el alto de
   los botones -/+ para que igualen al input existente. */
.single-product form.cart .quantity{
  height:48px;
}
.single-product form.cart .quantity .qty{
  min-height:46px;
}
.single-product form.cart .sp-qty-btn{
  width:40px;
  min-width:40px;
  min-height:46px;
  font-size:18px;
}