/* Quantity Input UX-Optimierung (27.03.2026)
 * Problem: Input-Feld optisch nicht als Eingabefeld erkennbar.
 * Nutzer klicken auf + statt Menge einzutippen (Rage Clicks in Clarity).
 * Loesung basiert auf Drei-Experten-Konsens (Baymard, NN/g, Google-Studie):
 *   1. Farbkontrast: Input weiss, Buttons grau (staerkster Signifier)
 *   2. Eigener Border + Inset-Shadow auf Input (Eingabe-Affordanz)
 *   3. Input breiter als Buttons (Verhaeltnis ~1:1.8)
 *   4. Einheitliche Hoehe 44px (Touch-Target WCAG AAA / Apple HIG)
 *
 * Spezifitaet: body.woocommerce-js (0,1,1) + .quantity.buttons_added (0,2,0)
 * schlaegt Astra-Override .woocommerce-js .quantity .qty
 */

/* --- Buttons: grau, flach, quadratisch 44x44 --- */
body.woocommerce-js .quantity.buttons_added .minus,
body.woocommerce-js .quantity.buttons_added .plus {
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  font-size: 18px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Button Hover (Desktop) */
body.woocommerce-js .quantity.buttons_added .minus:hover,
body.woocommerce-js .quantity.buttons_added .plus:hover {
  background-color: #e4e4e4;
}

/* Button Active/Pressed (Touch-Feedback) */
body.woocommerce-js .quantity.buttons_added .minus:active,
body.woocommerce-js .quantity.buttons_added .plus:active {
  background-color: #d8d8d8;
}

/* --- Input: weiss, eigener Rahmen, eingesenkt, 80px breit --- */
body.woocommerce-js .quantity.buttons_added input.qty {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  width: 80px;
  max-width: 80px;
  height: 44px;
  font-size: 18px;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  padding: 0 8px;
  border-radius: 4px;
  cursor: text;
}

/* Focus-Ring: Markenfarbe, klar sichtbar */
body.woocommerce-js .quantity.buttons_added input.qty:focus {
  outline: 2px solid #62BC66;
  outline-offset: -1px;
  border-color: #62BC66;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(98, 188, 102, 0.2);
}

/* Hover auf Input (Desktop): subtiler Border-Wechsel */
body.woocommerce-js .quantity.buttons_added input.qty:hover {
  border-color: #999999;
}

/* Native Browser-Spinner ausblenden */
body.woocommerce-js .quantity.buttons_added input.qty::-webkit-inner-spin-button,
body.woocommerce-js .quantity.buttons_added input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.woocommerce-js .quantity.buttons_added input.qty {
  -moz-appearance: textfield;
}

/* Container: kleiner Gap zwischen Elementen (Fat-Finger-Schutz) */
body.woocommerce-js .quantity.buttons_added {
  gap: 4px;
}

/* --- Produktseite: Stepper + Warenkorb-Button harmonisieren --- */

/* form.cart: Float durch Flex ersetzen (nur Produktseite)
 * Spezifitaet mit body.woocommerce-js noetig um Astra-Float zu schlagen */
body.woocommerce-js.single-product form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* Wishlist-Abstand angleichen (Astra-Default 12px -> 20px) */
body.woocommerce-js.single-product .custom-wishlist-wrapper {
  margin-top: 20px !important;
}

/* Astra-Clearfix Pseudo-Elemente entfernen (erzeugen Ghost-Flex-Kinder) */
body.woocommerce-js.single-product form.cart::before,
body.woocommerce-js.single-product form.cart::after {
  display: none !important;
}

/* Float + Astra-Margins aufraemen */
body.woocommerce-js.single-product form.cart .quantity,
body.woocommerce-js.single-product form.cart .single_add_to_cart_button {
  float: none !important;
  margin: 0 !important;
}

/* Warenkorb-Button: gleiche Hoehe wie Stepper (44px) */
body.woocommerce-js.single-product form.cart .single_add_to_cart_button {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: nur Button volle Breite, Stepper bleibt kompakt */
@media (max-width: 768px) {
  body.woocommerce-js.single-product form.cart .single_add_to_cart_button {
    width: 100%;
  }
}