/* ============================================================
   ROVERS BOGENSCHÜTZEN HILTRUP — WOOCOMMERCE
   Brücke zwischen WooCommerce-Markup und Design-System.

   WooCommerce' eigene Stylesheets werden nicht geladen (siehe
   inc/woocommerce.php). Diese Datei ersetzt sie nicht, sondern bindet nur das
   Markup an, das WooCommerce selbst erzeugt und das kein Template-Override
   erreicht: Formularzeilen, Meldungen, Preisangaben, Variationsanzeige.

   Es kommen ausschließlich Tokens aus style.css zum Einsatz — keine eigenen
   Farben, Schriften oder Abstände.

   Alles hängt an `.woocommerce`, weil das der einzige Haken ist, den beide
   Wege setzen: Produkt- und Kursübersicht bekommen ihn als Body-Klasse,
   Warenkorb und Kasse als Wrapper um die Shortcode-Ausgabe. Der eigene
   `.rovers-wc`-Rahmen aus `woocommerce/global/wrapper-start.php` greift nur
   auf den Produktseiten und taugt deshalb nicht als Aufhänger.
   ============================================================ */

/* ------------------------------------------------------------
   1 · Formularzeilen
   `woocommerce_form_field()` erzeugt `p.form-row > label + input`.
   Das ist strukturell dasselbe wie `.field` im Prototyp.
   ------------------------------------------------------------ */

.woocommerce .form-row{
  display:grid; gap:var(--s2);
  margin:0 0 var(--s6);
}
.woocommerce .form-row:last-child{ margin-bottom:0; }

.woocommerce .form-row label{
  font-size:var(--t-sm); font-weight:600; color:var(--text);
}
.woocommerce .form-row .required{ color:var(--status-bad); margin-left:2px; text-decoration:none; }
.woocommerce .form-row .optional{ color:var(--text-muted); font-weight:400; }

.woocommerce .form-row input.input-text,
.woocommerce .form-row textarea,
.woocommerce .form-row select,
.woocommerce .quantity input,
.woocommerce .variations select{
  width:100%;
  min-height:48px;
  padding:var(--s3) var(--s4);
  font-family:var(--font-body); font-size:var(--t-sm); color:var(--text);
  background:var(--surface-raised);
  border:1.5px solid var(--line-strong); border-radius:var(--radius);
}
/* Gleiche Höhe für alle einzeiligen Felder — wie im Kontaktformular.
   `min-height` allein genügt nicht: Safari bemisst ein <select> nach der
   Schrift, und Zahlenfelder werden an ihren Pfeilchen höher als der Rest. */
.woocommerce .form-row input.input-text,
.woocommerce .form-row select,
.woocommerce .quantity input,
.woocommerce .variations select{ height:48px; }

.woocommerce .form-row select,
.woocommerce .variations select{
  appearance:none;
  padding-inline-end:2.75rem;
  background-image:var(--select-arrow);
  background-repeat:no-repeat;
  background-position:right var(--s4) center;
  background-size:1.125rem 1.125rem;
}
.woocommerce select::-ms-expand{ display:none; }

.woocommerce .form-row input.input-text:hover,
.woocommerce .form-row select:hover,
.woocommerce .quantity input:hover,
.woocommerce .variations select:hover{ border-color:var(--primary); }

.woocommerce .form-row input.input-text:focus,
.woocommerce .form-row select:focus,
.woocommerce .quantity input:focus,
.woocommerce .variations select:focus{
  outline:2px solid var(--accent-color); outline-offset:2px;
  border-color:var(--accent-color);
}

/* iOS Safari zoomt beim Hineintippen in jedes Feld, dessen Schrift kleiner
   als 16px ist — und springt danach nicht zurück. Das Design-System setzt
   `--t-sm` (15px); auf kleinen Schirmen bekommen Eingabefelder deshalb 16px.
   Betrifft nur die Kasse und die Kursseiten, also genau die Stellen, an denen
   überhaupt getippt wird. */
@media (max-width:767px){
  .woocommerce .form-row input.input-text,
  .woocommerce .form-row textarea,
  .woocommerce .form-row select,
  .woocommerce .quantity input,
  .woocommerce .variations select{ font-size:16px; }
}

/* Beschreibungstexte unter einem Feld — im Prototyp `.hint`. */
.woocommerce .form-row .description,
.woocommerce .woocommerce-input-wrapper + .description{
  font-size:var(--t-xs); color:var(--text-muted); margin:var(--s1) 0 0;
}

/* Fehlerhafte Felder markieren, wie `.field[data-invalid]`.

   Die Farbe ist nie das einzige Merkmal: Der Fehlertext steht vollständig in
   der Übersicht am Formularanfang und ist von dort aus verlinkt. Hier geht es
   nur darum, die Stelle wiederzufinden. */
.woocommerce .form-row.woocommerce-invalid input.input-text,
.woocommerce .form-row.woocommerce-invalid textarea,
.woocommerce .form-row.woocommerce-invalid select{ border-color:var(--status-bad); }

/* Optionsgruppen und das Ankreuzfeld tragen keine eigene Eingabefläche —
   sie werden über ihre Fläche und ihre Frage gekennzeichnet. */
/* Das Ankreuzfeld-Label liegt in `span.woocommerce-input-wrapper`, die Legende
   direkt im `fieldset` — deshalb zwei unterschiedliche Kombinatoren. Die
   ID-Variante muss mit: Die Farbregel für die Einwilligung unten trägt eine
   ID (Spezifität 1,2,1) und schlüge diese Zeile sonst. */
.woocommerce .form-row.woocommerce-invalid > legend,
.woocommerce .form-row.woocommerce-invalid label.checkbox,
.woocommerce #rovers_dsgvo_field.woocommerce-invalid label.checkbox{ color:var(--status-bad); }

.woocommerce fieldset.form-row.woocommerce-invalid,
.woocommerce .form-row.woocommerce-invalid#rovers_dsgvo_field{
  border-left:3px solid var(--status-bad);
  padding-left:var(--s5);
}

/* Der Anker aus der Fehlerübersicht landet auf der Legende. Ohne sichtbares
   Ziel wüsste niemand, wo der Sprung endete. */
.woocommerce fieldset.form-row > legend:focus-visible{
  outline:2px solid var(--accent-color); outline-offset:3px; border-radius:var(--radius);
}

.woocommerce .woocommerce-input-wrapper{ display:block; }

/* Zwei Felder nebeneinander (Vor-/Nachname, PLZ/Ort).

   Die `grid-column`-Angaben müssen an ihren Container gebunden bleiben.
   Standen sie frei, setzte `.form-row-last` auch in einspaltigen Rastern
   `grid-column: 2` — und erzeugte dort eine implizite zweite Spalte, die den
   Rest der Felder auf gut die halbe Breite zusammenschob. */
@media (min-width:640px){
  .woocommerce .woocommerce-billing-fields__field-wrapper,
  .woocommerce .rovers-grundkurs-felder > .form{
    display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s6);
  }
  .woocommerce .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .woocommerce .rovers-grundkurs-felder > .form > .form-row-first{ grid-column:1; }

  .woocommerce .woocommerce-billing-fields__field-wrapper > .form-row-last,
  .woocommerce .rovers-grundkurs-felder > .form > .form-row-last{ grid-column:2; }

  .woocommerce .woocommerce-billing-fields__field-wrapper > .form-row-wide,
  .woocommerce .rovers-grundkurs-felder > .form > .form-row-wide{ grid-column:1 / -1; }
}

/* ------------------------------------------------------------
   1b · Anmeldebogen Grundkurs
   Auswahl- und Ankreuzfelder gibt es an der Kasse erst, seit der Grundkurs
   dort mehr abfragt. Sie folgen `.field--check` aus dem Design-System.
   ------------------------------------------------------------ */

.rovers-grundkurs-felder{ border-top:1px solid var(--line); padding-top:var(--s10); }

/* Optionsgruppen stehen als `fieldset`; dessen Browservorgaben müssen weg,
   damit sie sich wie jede andere Formularzeile verhalten. */
.woocommerce fieldset.form-row{
  border:0; padding:0; margin-inline:0; min-inline-size:0;
}
.woocommerce fieldset.form-row > legend{
  padding:0; float:left; width:100%;
  font-size:var(--t-sm); font-weight:600; color:var(--text);
}
.woocommerce fieldset.form-row > legend + .description{ clear:both; }
.woocommerce fieldset.form-row .description{
  display:block; margin:0 0 var(--s2);
  font-size:var(--t-xs); color:var(--text-muted);
}
.woocommerce fieldset.form-row .optional{ font-weight:400; color:var(--text-muted); }

/* Radiogruppen: eine Zeile je Antwort, ganze Zeile anklickbar.

   Zwei Spalten statt absoluter Positionierung. Markup ist eine Folge aus
   `input` und `label`; das Raster verteilt sie automatisch auf Auswahlknopf
   (Spalte 1) und Text (Spalte 2), Zeile für Zeile.

   Absolut positioniert waren die Knöpfe aus zwei Gründen falsch: Sie saßen
   ohne Bezugspunkt an ihrer statischen Stelle, also an der Oberkante der
   Zeile statt auf Höhe der ersten Textzeile. Und `[data-reveal]` blendet
   Abschnitte mit `transform` ein — ein transformierter Vorfahre wird zum
   Bezugsrahmen für absolut positionierte Nachfahren, wodurch die Knöpfe
   während der Animation an eine ganz andere Stelle sprangen. */
.woocommerce .rovers-radio .woocommerce-input-wrapper{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:var(--s3);
  align-items:start;
}
.woocommerce .rovers-radio .woocommerce-input-wrapper > input[type="radio"]{
  position:static;
  width:1.15rem; height:1.15rem;
  margin:0;
  accent-color:var(--primary);
  /* Auf die Mitte der ersten Textzeile ausrichten, nicht auf die Zeilenmitte:
     Bricht eine Antwort um, gehört der Knopf trotzdem nach oben. */
  margin-top:calc(var(--s3) + (1.5 * var(--t-sm) - 1.15rem) / 2);
}
.woocommerce .rovers-radio .woocommerce-input-wrapper > label.radio{
  display:block;
  min-height:44px; /* Mindestgröße für Zeigegeräte */
  padding:var(--s3) 0;
  font-size:var(--t-sm); font-weight:400; color:var(--text-muted);
  line-height:1.5; cursor:pointer;
}
.woocommerce .rovers-radio .woocommerce-input-wrapper > input[type="radio"]:checked + label.radio{
  color:var(--text); font-weight:500;
}
.woocommerce .rovers-radio .woocommerce-input-wrapper > input[type="radio"]:focus-visible + label.radio{
  outline:2px solid var(--accent-color); outline-offset:2px; border-radius:var(--radius);
}

/* Einwilligung: eigene Fläche, damit sie nicht als weitere Antwortzeile
   missverstanden wird.

   Hier steht das Ankreuzfeld *innerhalb* des Labels. Ein Raster scheidet aus,
   weil das Pflicht-Sternchen ein eigenes Element ist und in eine zweite
   Zeile rutschen würde. Stattdessen das klassische Muster: Label
   `position: relative`, Feld `left: 0`, und der Innenabstand hält den Platz
   frei. Ohne `relative` und ohne `left` landete das Feld an seiner statischen
   Stelle — also *hinter* dem Innenabstand, mitten auf dem ersten Wort. */
/* Das Label steckt in `span.woocommerce-input-wrapper` — es ist kein direktes
   Kind der Formularzeile. Der Nachfahren-Selektor ist hier also Pflicht. */
.woocommerce .form-row .woocommerce-input-wrapper > label.checkbox{
  position:relative;
  display:block;
  min-height:44px;
  padding:var(--s3) 0 var(--s3) calc(1.15rem + var(--s3));
  font-size:var(--t-sm); font-weight:400; color:var(--text-muted);
  line-height:1.5; cursor:pointer;
}
.woocommerce .form-row .woocommerce-input-wrapper > label.checkbox > input[type="checkbox"]{
  position:absolute;
  left:0;
  top:calc(var(--s3) + (1.5 * var(--t-sm) - 1.15rem) / 2);
  width:1.15rem; height:1.15rem; margin:0;
  accent-color:var(--primary);
}

.woocommerce #rovers_dsgvo_field{
  padding:var(--s5) var(--s6);
  background:var(--surface-sunken, var(--accent-wash));
  border:1px solid var(--line); border-radius:var(--radius);
}
.woocommerce #rovers_dsgvo_field label.checkbox{ color:var(--text); }
.woocommerce #rovers_dsgvo_field .required{ margin-left:2px; }

/* Langer Auswahltext im Aufklappfeld darf nicht abgeschnitten wirken. */
.woocommerce #rovers_teilnahmeart_field select{
  text-overflow:ellipsis;
}

/* Die getroffene Wahl im Klartext unter dem Aufklappfeld — dort steht sie
   vollständig und umbricht, statt nach einem Fünftel abgeschnitten zu sein.

   In den Kontaktdaten steht sie in einem zweispaltigen Raster. Ohne die
   Spaltenangabe bekäme sie nur eine Spalte, während das Feld darüber beide
   einnimmt — ein ganzer Satz in halber Breite. */
.woocommerce .rovers-auswahl-echo{ grid-column:1 / -1; }

.woocommerce .rovers-auswahl-echo{
  margin:calc(var(--s6) * -1 + var(--s2)) 0 var(--s6);
  padding:var(--s3) var(--s4);
  font-size:var(--t-sm); line-height:1.5; color:var(--text);
  background:var(--accent-wash);
  border-left:3px solid var(--accent-color);
  border-radius:0 var(--radius) var(--radius) 0;
}
.woocommerce .rovers-auswahl-echo.is-leer{ display:none; }

/* Der Hinweis unter der Nachricht ist eine Bitte, kein Kleingedrucktes. */
.woocommerce #rovers_nachricht_field .description{
  font-size:var(--t-sm); color:var(--text-muted);
}

/* Anzahlfeld bleibt schmal — es steht nie mehr als zweistellig drin. */
.woocommerce .quantity{ display:grid; gap:var(--s2); max-width:9rem; }
.woocommerce .quantity label{ font-size:var(--t-sm); font-weight:600; color:var(--text); }
.woocommerce td .quantity{ max-width:7rem; }
.woocommerce td .quantity label{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ------------------------------------------------------------
   2 · Preise und Variationsanzeige
   ------------------------------------------------------------ */

.woocommerce .price,
.woocommerce .woocommerce-Price-amount,
.woocommerce .amount{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  color:var(--text);
}

/* Der Preis in der Buchungskarte trägt die Optik der Preiskarten des
   Prototyps. Ohne diese Regel gewänne die generische `.woocommerce .amount`
   von oben — gleiche Spezifität, aber später in der Datei — und der Betrag
   käme in gewöhnlicher Textgröße und -farbe. */
.woocommerce .price-card > .amount,
.woocommerce .price-card .woocommerce-variation-price .price{
  font-family:var(--font-mono); font-size:clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem);
  font-weight:500; color:var(--accent-color); margin:0;
  font-variant-numeric:tabular-nums;
}
.woocommerce .price-card > .amount .woocommerce-Price-amount,
.woocommerce .price-card > .amount bdi{
  font-family:inherit; font-size:inherit; font-weight:inherit; color:inherit;
}
.woocommerce .price-card > .amount small{
  display:inline; margin-left:var(--s2);
  font-family:var(--font-body); font-size:var(--t-sm);
  font-weight:400; color:var(--text-muted);
}

/* Bei variablen Produkten steht vor der Auswahl eine Preisspanne
   („20,00 € – 40,00 €“). Sie darf die Karte nicht sprengen. */
.woocommerce .price-card > .amount{ line-height:1.15; overflow-wrap:anywhere; }

/* Solange keine Teilnahmeart gewählt ist, sperrt WooCommerce die Schaltfläche
   über die Klasse `disabled` — nicht über das Attribut `disabled`, auf das
   `.btn:disabled` im Design-System reagiert. Ohne diese Regel sähe der Knopf
   voll aktiv aus, täte aber nichts außer einer JavaScript-Meldung. */
.woocommerce .btn.disabled,
.woocommerce .btn.wc-variation-selection-needed,
.woocommerce .btn.wc-variation-is-unavailable{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}

.woocommerce .woocommerce-variation{ margin:var(--s4) 0 0; }
.woocommerce .woocommerce-variation-description p{ color:var(--text-muted); font-size:var(--t-sm); margin:0 0 var(--s3); }
.woocommerce .woocommerce-variation-availability p{ margin:0 0 var(--s3); font-size:var(--t-sm); color:var(--text-muted); }

/* Ausverkauft: dieselbe Farbrolle wie `.tag-full`, nie nur über Farbe. */
.woocommerce p.stock.out-of-stock{ color:var(--status-bad); font-weight:600; }
.woocommerce p.stock.in-stock{ color:var(--status-ok); font-weight:600; }

.woocommerce .reset_variations{ display:none; }

/* ------------------------------------------------------------
   3 · Zahlungsart
   ------------------------------------------------------------ */

.woocommerce .payment_methods{ margin:0; padding:0; list-style:none; }
.woocommerce .payment_methods li{ margin:0; }
.woocommerce .payment_box{
  margin:var(--s2) 0 0 calc(1.15rem + var(--s3));
  font-size:var(--t-sm); color:var(--text-muted);
}
.woocommerce .payment_box p{ margin:0; }

/* Der Datenschutzhinweis gehört nicht in den Kasten der Zahlungsart, sondern
   darunter als abgesetztes Kleingedrucktes. */
.woocommerce .woocommerce-privacy-policy-text{
  margin:var(--s5) 0 0;
  padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.woocommerce .woocommerce-privacy-policy-text p{
  font-size:var(--t-xs); line-height:1.6; color:var(--text-muted); margin:0;
}
.woocommerce .woocommerce-privacy-policy-text a{
  color:var(--accent-color); text-underline-offset:.2em;
}

/* Steht nur eine Zahlungsart bereit, ist die Auswahl keine Auswahl mehr. */
.woocommerce .methods--single input.input-radio{ display:none; }
.woocommerce .methods--single .field--check{ display:block; }
.woocommerce .methods--single label{ font-weight:600; color:var(--text); }
.woocommerce .methods--single .payment_box{ margin-left:0; }

/* ------------------------------------------------------------
   4 · Warenkorb
   ------------------------------------------------------------ */

.woocommerce .product-remove{ width:1%; text-align:right; }
.woocommerce a.remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  font-size:var(--t-lg); line-height:1;
  color:var(--text-muted); text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius-pill);
}
.woocommerce a.remove:hover{ color:var(--status-bad); border-color:var(--status-bad); }

.woocommerce .cart-collaterals .cart_totals{ max-width:26rem; margin-left:auto; }
.woocommerce .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td{ font-weight:600; color:var(--text); }

/* `table.data` nimmt in der letzten Zeile nur den Zellen (`td`) den unteren
   Rand, nicht der Zeilenüberschrift (`th`). In der Terminliste fällt das nicht
   auf, weil dort keine Fußzeile folgt — im Warenkorb und in der
   Buchungsübersicht blieb dadurch ein Strich unter der ersten Spalte stehen,
   der abrupt vor dem rechten Rand endete. */
.woocommerce table.data tbody tr:last-child th{ border-bottom:0; }

/* Steht die Tabelle in einer Karte, polstert die Karte bereits. Die
   zusätzliche Zelleninnenkante hätte den Inhalt ein zweites Mal eingerückt. */
.woocommerce .card table.data th:first-child,
.woocommerce .card table.data td:first-child{ padding-left:0; }
.woocommerce .card table.data th:last-child,
.woocommerce .card table.data td:last-child{ padding-right:0; }
.woocommerce .card table.data{ min-width:0; }

/* Zahlenspalte rechtsbündig — Beträge lesen sich an der Kante besser. */
.woocommerce .card table.data td.num{ text-align:right; }

/* Teilnahmeart als kleine Zeile unter dem Kursdatum — im Warenkorb, in der
   Buchungsübersicht und auf der Bestätigung dieselbe Darstellung. */
.woocommerce .variation,
.woocommerce .wc-item-meta{
  margin:var(--s1) 0 0; padding:0; list-style:none;
  font-size:var(--t-xs); color:var(--text-muted); font-weight:400;
}
.woocommerce .variation dt,
.woocommerce .variation dd,
.woocommerce .wc-item-meta li,
.woocommerce .wc-item-meta strong,
.woocommerce .wc-item-meta p{ display:inline; margin:0; }
.woocommerce .variation dd{ margin-right:var(--s3); }
.woocommerce .variation dd p{ display:inline; margin:0; }
.woocommerce .wc-item-meta strong::after{ content:" "; }

/* ------------------------------------------------------------
   5 · Schaltfläche in der Terminliste
   Kompakte Variante von `.btn` — in einer Tabellenzeile wäre die volle
   Höhe von 48px zu wuchtig.
   ------------------------------------------------------------ */

.btn-compact{
  min-height:38px;
  padding:var(--s2) var(--s4);
  font-size:var(--t-xs);
}
.btn-compact .icon{ width:15px; height:15px; }

.table-muted{ font-size:var(--t-xs); color:var(--text-muted); }

/* ------------------------------------------------------------
   Warenkorb in der Navigation

   Der Menüpunkt „Warenkorb“ erscheint als Sinnbild mit Zähler. In der
   Kopfleiste erbt er Farbe, Höhe und Unterstreichung von `.nav-links a`, im
   mobilen Panel von `.mobile-nav a` — er sieht damit aus wie jeder andere
   Menüpunkt, nur eben als Symbol.
   ------------------------------------------------------------ */

.nav-cart{ white-space:nowrap; }

/* Eigener Bezugspunkt für die Plakette: So sitzt sie am Symbol, unabhängig
   davon, wie viel Innenabstand der umgebende Menüpunkt gerade hat. */
.nav-cart-icon{ position:relative; display:inline-flex; }
.nav-cart-icon .icon{ width:22px; height:22px; flex:none; }

.nav-cart-badge{
  position:absolute; top:-7px; inset-inline-end:-9px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  line-height:1; font-variant-numeric:tabular-nums;
  color:var(--sidebar); background:var(--invert-accent);
  border-radius:var(--radius-pill);
}

/* Im mobilen Panel steht das Wort daneben — dort ist Platz, und eine Liste
   aus Wörtern mit einem einzelnen Symbol dazwischen liest sich schlecht.

   `.mobile-nav a` verteilt seinen Inhalt mit `space-between` über die ganze
   Breite; bei Punkten mit Chevron ist das richtig, hier schöbe es das Wort an
   den rechten Rand. Der Selektor muss zwei Klassen tragen, sonst gewinnt
   `.mobile-nav a` (eine Klasse plus Typ). */
.nav-cart--mit-text{ display:inline-flex; align-items:center; gap:var(--s6); }
/* Die Plakette ragt 9px über das Symbol hinaus — der übliche Abstand von
   `.mobile-nav a` ließe ihr nur 3px zum Wort. */
.mobile-nav .nav-cart--mit-text{ justify-content:flex-start; gap:var(--s6); }
.nav-cart-text{ display:inline; }

/* Unterhalb von 1180px ist die Navigation eingeklappt; dann steht das Symbol
   neben dem Menüknopf und übernimmt dessen Form, damit die beiden als Paar
   auftreten. */
.nav-cta .nav-cart--cta{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; flex:none;
  color:var(--sidebar-foreground);
  border:1.5px solid var(--invert-line-strong);
  border-radius:var(--radius);
  text-decoration:none;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-cta .nav-cart--cta:hover{ border-color:var(--invert-accent); }

/* ------------------------------------------------------------
   5b · Meldungen

   WooCommerce schickt die Ausgabe der `notices/*.php` durch
   `wc_kses_notice()`. Dessen SVG-Freigabe streicht `class`, `fill` und
   `stroke` und wirft verschachtelte Formen weg — ein Inline-Icon käme als
   schwarz gefüllter Pfad ohne Größe an und bliese sich auf die Breite des
   Containers auf. Die Symbole kommen deshalb als Maske aus dem CSS, wo kein
   Filter sie erreicht. `background-color: currentColor` hält sie in Hell-
   und Dunkelmodus automatisch auf der richtigen Farbe.
   ------------------------------------------------------------ */

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  content:"";
  width:18px; height:18px; flex:none; margin-top:3px;
  background-color:currentColor;
  -webkit-mask:var(--rovers-notice-icon) center / contain no-repeat;
  mask:var(--rovers-notice-icon) center / contain no-repeat;
}

/* Haken im Kreis */
.woocommerce-message{
  --rovers-notice-icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8.5 12 2.5 2.5 4.5-5"/></svg>');
  color:var(--status-ok);
}

/* „i“ im Kreis */
.woocommerce-info{
  --rovers-notice-icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>');
}

/* Ausrufezeichen im Kreis */
.woocommerce-error{
  --rovers-notice-icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5M12 16h.01"/></svg>');
}
.woocommerce-error::before{ width:20px; height:20px; margin-top:2px; color:var(--status-bad); }

/* Der Meldungstext trägt die Aussage, nicht die Farbe — der Haken ist grün,
   der Satz daneben bleibt in der normalen Textfarbe lesbar. */
.woocommerce-message > span,
.woocommerce-info > span{ color:var(--text-muted); }

/* Sollte doch einmal ein Inline-SVG durch den Filter kommen, darf es die
   Seite nicht sprengen. */
.woocommerce-message svg,
.woocommerce-info svg,
.woocommerce-error svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; }

/* „Einkauf fortsetzen“ steckt im Meldungstext und trägt WooCommerce' eigene
   `.button`-Klasse — als Textlink im Fließtext richtiger denn als Knopf. */
.woocommerce-message .button,
.woocommerce-info .button{
  color:var(--accent-color); text-decoration:underline; text-underline-offset:.2em;
  white-space:nowrap;
}

/* ------------------------------------------------------------
   6 · Aufräumen

   Hier steht bewusst nur `.screen-reader-text`. Formularfelder, die nicht
   erhoben werden sollen, werden in `inc/woocommerce.php` entfernt statt hier
   versteckt — ein per CSS ausgeblendetes Feld bliebe in der Tabreihenfolge
   und würde von Screenreadern weiterhin vorgelesen.
   ------------------------------------------------------------ */

.woocommerce .screen-reader-text{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.woocommerce .blockUI.blockOverlay{ background:var(--surface) !important; opacity:.6 !important; }