/* Selector de cantidad de las tarjetas de producto (portada y buscador).
   Va entre el precio y el botón de agregar. Los colores salen de las variables de
   la tienda (--or = color de marca de cada cliente), así que no hay nada fijo acá.
   Mismo comportamiento en claro y en oscuro: nada depende del hover. */
.pcard-act{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.pcard-act .btn-cart,.pcard-act .pcard-btn{margin-top:0}
/* El buscador usa Bootstrap solo para los íconos: su "me-1" no existe y el ícono
   quedaba pegado al texto. */
.pcard-act .pcard-btn{display:flex;align-items:center;justify-content:center;gap:6px}

.qty{
  display:flex;align-items:stretch;
  border:1px solid rgba(var(--fg-rgb),.16);border-radius:10px;
  background:rgba(var(--fg-rgb),.04);overflow:hidden;cursor:default;
  transition:border-color .15s,box-shadow .15s;
}
.qty:focus-within{border-color:var(--or);box-shadow:0 0 0 3px var(--or-glow)}

.qty-b{
  flex:0 0 40px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:0;color:var(--text);font-size:15px;
  cursor:pointer;transition:background .15s,color .15s;
}
.qty-b:hover:not(:disabled){background:rgba(var(--fg-rgb),.09);color:var(--or)}
.qty-b:active:not(:disabled){background:rgba(var(--fg-rgb),.16)}
.qty-b:disabled{opacity:.32;cursor:not-allowed}
.qty-b:focus-visible{outline:2px solid var(--or);outline-offset:-3px}

.qty-in{
  flex:1 1 auto;min-width:0;width:100%;height:40px;padding:0;border:0;border-radius:0;
  background:transparent;color:var(--text);text-align:center;
  font:700 14px/1 inherit;font-family:inherit;
  -moz-appearance:textfield;appearance:textfield;
}
.qty-in::-webkit-outer-spin-button,.qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-in:focus{outline:none}

/* Dedo: 44 px de alto (mínimo cómodo para tocar) y 16 px de letra, que además
   evita el zoom automático de iOS al enfocar un campo. */
@media (pointer:coarse){
  .qty-b{flex-basis:44px;font-size:17px}
  .qty-in{height:44px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .qty,.qty-b{transition:none}
}