/*
 * GlamDog - Korrekturen gegenueber Astra und WooCommerce
 * ------------------------------------------------------------------
 * Diese Datei wird als letzte geladen und holt zurueck, was Astras
 * dynamisches CSS mit hoeherer Spezifitaet ueberschreibt.
 *
 * Gemessen auf sandbox.glamdog.de am 20.08.2026:
 *   Astra:    .woocommerce-js a.button        -> (0,2,1) = 21
 *   Prototyp: .button                          -> (0,1,0) = 10
 * Die Ladereihenfolge allein reicht deshalb nicht. Der dreifache
 * Klassenselektor kommt auf (0,3,0) = 30 und gewinnt, ohne dass
 * !important noetig waere.
 *
 * Bewusst nur die Eigenschaften, die Astra tatsaechlich beansprucht.
 * Die Werte spiegeln .button aus startseite.css und shop.css; aendert
 * sich dort etwas, muss es hier nachgezogen werden.
 */

.button.button.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.72rem 1.6rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--brush-block), linear-gradient(#141210, #141210);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 128%, 100% 64%;
  color: #fff6e6;
  font-family: var(--font-hand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transform: rotate(-0.9deg);
}

/* Astra setzt auch den Schwebezustand: .woocommerce-js a.button:hover
   liegt bei (0,3,1) = 31, hier sind es (0,4,0) = 40. */
.button.button.button:hover,
.button.button.button:focus-visible {
  color: #fff6e6;
  background-color: transparent;
  background-size: 104% 134%, 100% 64%;
  transform: rotate(-0.9deg) translateY(-2px);
}

.button.button.button:focus-visible {
  outline: 3px solid #134e4a;
  outline-offset: 2px;
}