/**
 * Selector de cantidad (− 1 +) de la ficha de producto y la vista rápida.
 * Ruta: assets/css/quantity.css
 *
 * Markup: woocommerce/global/quantity-input.php. Los glifos − / + de texto
 * quedan descentrados con la fuente del tema, así que se ocultan y se
 * dibujan con pseudo-elementos. Colores para fondo claro (ficha); la vista
 * rápida los sobrescribe en template-parts/quick-view/content.php.
 */

/* Una sola pieza: − | número | + con el mismo borde */
form.cart .quantity {
  gap: 0 !important;
}

form.cart .quantity input.qty {
  box-sizing: border-box;
  width: 48px;
  height: 40px;
  border: 0;
  border-top: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
  border-radius: 0;
}

form.cart .quantity .minus-btn,
form.cart .quantity .plus-btn {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d4d4d4;
  background: transparent;
  cursor: pointer;
  font-size: 0;
  color: transparent;
  transition: border-color 0.2s;
}

/* Recto del lado del número, redondeado hacia fuera */
form.cart .quantity .minus-btn {
  border-radius: 9999px 0 0 9999px;
}
form.cart .quantity .plus-btn {
  border-radius: 0 9999px 9999px 0;
}

form.cart .quantity .minus-btn::before,
form.cart .quantity .plus-btn::before,
form.cart .quantity .plus-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: #525252;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: background 0.2s;
}
form.cart .quantity .plus-btn::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

form.cart .quantity .minus-btn:hover,
form.cart .quantity .plus-btn:hover {
  border-color: #737373;
}
form.cart .quantity .minus-btn:hover::before,
form.cart .quantity .plus-btn:hover::before,
form.cart .quantity .plus-btn:hover::after {
  background: #000;
}