/* ============================================================================
   BIKE ABK — WOOCOMMERCE
   ============================================================================
   Die Standard-Stylesheets von WooCommerce sind abgeschaltet (siehe
   inc/woocommerce.php), weil sie für ein helles Layout gebaut sind und mit dem
   Dark-Design kollidieren. Diese Datei ist der Ersatz.

   Abgedeckt: Hinweismeldungen, Produktraster, Produktseite, Warenkorb, Kasse,
   Mein Konto, Formularfelder, Blättern, Breadcrumb.

   Farben kommen ausschließlich aus den Tokens in style.css — hier nie Hex-Werte
   hartcodieren, sonst wirkt die Farbeinstellung im Customizer auf den Shop nicht.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. HINWEISMELDUNGEN
   "In den Warenkorb gelegt", Fehlermeldungen der Kasse, Kuponhinweise.
   --------------------------------------------------------------------------- */

.woocommerce-notices-wrapper { margin-bottom: 30px; }

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  list-style: none;
  margin: 0 0 22px;
  padding: 16px 20px;
  background: var(--th-graphite-2);
  border-left: 3px solid var(--th-hivis);
  color: var(--th-paper);
  font-size: 0.92rem;
  line-height: 1.55;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.woocommerce-error { border-left-color: var(--th-error); }
.woocommerce-info { border-left-color: var(--th-stone); }

.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a { color: var(--th-hivis); }

/* Der Button in einer Meldung ("Warenkorb ansehen") soll rechts stehen */
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

.woocommerce-error li { margin: 0; }


/* ---------------------------------------------------------------------------
   2. BUTTONS
   WooCommerce nutzt .button für alles — vom Warenkorb bis zur Kasse.
   --------------------------------------------------------------------------- */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  font-family: var(--th-font-disp);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 14px 26px;
  background: var(--th-hivis);
  color: var(--th-on-accent);
  border: 1px solid var(--th-hivis);
  border-radius: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  line-height: 1.2;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--th-hivis-bright);
  color: var(--th-on-accent);
  transform: translateY(-2px);
}

/* Sekundäre Aktionen: "Warenkorb aktualisieren", "Weiter einkaufen" */
.woocommerce .button.alt { background: var(--th-hivis); color: var(--th-on-accent); }
.woocommerce button.button:disabled,
.woocommerce .button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Der graue Zweitknopf im Warenkorb */
.woocommerce .actions .button[name="update_cart"] {
  background: transparent;
  color: var(--th-paper);
  border-color: var(--th-line);
}
.woocommerce .actions .button[name="update_cart"]:hover {
  border-color: var(--th-paper);
  background: transparent;
}


/* ---------------------------------------------------------------------------
   3. FORMULARFELDER
   Gilt für Kasse, Mein Konto, Kupon, Versandrechner.
   --------------------------------------------------------------------------- */

.woocommerce form .form-row { margin-bottom: 18px; padding: 0; }

.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce label {
  display: block;
  font-family: var(--th-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-stone);
  margin-bottom: 6px;
}
/* Ausnahme: Checkboxen brauchen das Label daneben, nicht darüber */
.woocommerce label.checkbox,
.woocommerce .form-row label.checkbox,
.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--th-font-body);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--th-paper-3);
  line-height: 1.5;
}

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce textarea,
.woocommerce .select2-selection {
  width: 100%;
  background: var(--th-ink);
  border: 1px solid var(--th-line);
  border-radius: 0;
  color: var(--th-paper);
  padding: 11px 13px;
  font-family: var(--th-font-body);
  font-size: 0.9rem;
  line-height: 1.4;
  height: auto;
}
.woocommerce textarea { min-height: 100px; resize: vertical; }

.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  outline: none;
  border-color: var(--th-hivis);
}

.woocommerce .required { color: var(--th-error); border: none; }

/* Pflichtfeld-Markierung von WooCommerce */
.woocommerce form .form-row.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--th-error); }
.woocommerce form .form-row.woocommerce-validated input { border-color: var(--th-line); }

/* Auswahlfelder (selectWoo) */
.woocommerce .select2-container--default .select2-selection--single {
  background: var(--th-ink);
  border: 1px solid var(--th-line);
  border-radius: 0;
  height: auto;
  padding: 5px 0;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--th-paper);
  line-height: 1.6;
}
.woocommerce .select2-dropdown {
  background: var(--th-graphite-2);
  border-color: var(--th-line);
  border-radius: 0;
  color: var(--th-paper);
}
.woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--th-hivis);
  color: var(--th-on-accent);
}

/* Mengenfeld */
.woocommerce .quantity input.qty {
  width: 74px;
  text-align: center;
  padding: 11px 6px;
}


/* ---------------------------------------------------------------------------
   4. HINWEIS OBERHALB DES PRODUKTRASTERS
   --------------------------------------------------------------------------- */

.th-shop-notice {
  padding: 22px var(--th-gutter) 0;
}
@media (max-width: 700px) {
  .th-shop-notice { padding-left: var(--th-gutter-mobile); padding-right: var(--th-gutter-mobile); }
}


/* ---------------------------------------------------------------------------
   5. PRODUKTRASTER
   Bewusst im gleichen Raster wie die Bike-Karten des Themes: 2 Pixel Fugen,
   Karten auf var(--th-graphite-2).
   --------------------------------------------------------------------------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--th-line);
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  background: var(--th-graphite-2);
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
}

.woocommerce ul.products li.product a { text-decoration: none; }

.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  display: block;
  box-shadow: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--th-font-disp);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--th-paper);
  padding: 24px 24px 6px;
  margin: 0;
}

.woocommerce ul.products li.product .price {
  font-family: var(--th-font-disp);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--th-paper);
  padding: 0 24px;
  margin: 0 0 16px;
  display: block;
}
.woocommerce ul.products li.product .price del {
  color: var(--th-stone);
  font-weight: 400;
  font-size: 0.85rem;
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--th-hivis);
}

.woocommerce ul.products li.product .button {
  margin: auto 24px 24px;
  align-self: flex-start;
}

/* Angebots-Fähnchen */
.woocommerce span.onsale {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  background: var(--th-hivis);
  color: var(--th-on-accent);
  font-family: var(--th-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 7px 12px;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  margin: 0;
  z-index: 2;
}

/* Sortierung und Trefferanzahl */
.woocommerce .woocommerce-result-count {
  color: var(--th-stone);
  font-size: 0.85rem;
  margin: 0 0 24px;
}
.woocommerce .woocommerce-ordering { margin: 0 0 24px; }
.woocommerce .woocommerce-ordering select { max-width: 280px; }

@media (max-width: 900px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   6. STERNEBEWERTUNG
   ---------------------------------------------------------------------------
   RECHT: Sterne nur anzeigen, wenn echte Bewertungen dahinterstehen. Erfundene
   Bewertungen sind nach UWG Anhang Z23b und Z23c verboten — Per-se-Verbote ohne
   Interessenabwägung. Nach § 5b Abs 3 UWG musst du außerdem angeben, ob und wie
   du prüfst, dass Bewertungen von echten Käufern stammen.

   WARUM HIER EIGENE STERNE STEHEN
   WooCommerce zeichnet seine Sterne mit einer eigenen Icon-Schrift. Die wird in
   der Plugin-Stylesheet deklariert, und die ist in inc/woocommerce.php bewusst
   abgemeldet — sonst kämen zwei Designs übereinander. Damit fehlte aber auch die
   Schrift: Statt Sternen stand der reine Text da, „Bewertet mit 4 von 5" in der
   Produktliste und „1 von 5 Sternen" als Link im Bewertungsformular.

   Ersatz ist das Zeichen ★ (U+2605) aus der Systemschrift. Bewusst nur dieses
   eine Zeichen und kein ☆ für leere Sterne: ★ ist praktisch überall vorhanden,
   ☆ fehlt in manchen Schriften und würde dort als leeres Kästchen erscheinen.
   Der Unterschied zwischen leer und gefüllt kommt deshalb über die Deckkraft.
   --------------------------------------------------------------------------- */

/* --- Anzeige vorhandener Bewertungen ------------------------------------- */

/*
 * Aufbau von WooCommerce:
 *   <div class="star-rating"><span style="width:80%">… 4 von 5</span></div>
 *
 * Die Breite in Prozent steckt als Inline-Angabe im span. Damit 80 % genau vier
 * Sternen entsprechen, muss der Rahmen exakt fünf Sterne breit sein — deshalb
 * bestimmt die untere, blasse Ebene über ihren Inhalt die Breite, statt einen
 * geratenen em-Wert zu setzen.
 */
.woocommerce .star-rating {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--th-hivis);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.woocommerce .star-rating::before {
  content: "\2605\2605\2605\2605\2605";
  opacity: 0.26;
}
.woocommerce .star-rating span {
  position: absolute;
  /* right: auto — die Breite kommt aus der Inline-Angabe von WooCommerce. */
  inset: 0 auto 0 0;
  overflow: hidden;
  /* Schiebt den Originaltext („Bewertet mit 4 von 5") aus dem Sichtfeld. Er
     bleibt im Dokument und damit für Screenreader lesbar. */
  padding-top: 1.5em;
}
.woocommerce .star-rating span::before {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  top: 0;
  left: 0;
}

.woocommerce .woocommerce-product-rating { margin-bottom: 18px; }
.woocommerce .woocommerce-review-link { color: var(--th-stone); font-size: 0.85rem; }

/* --- Sterne im Bewertungsformular ---------------------------------------- */

/*
 * Aufbau von WooCommerce:
 *   <p class="stars"><span>
 *     <a class="star-1" href="#">1 von 5 Sternen</a> … </span></p>
 *
 * Der Linktext bleibt stehen und wird nur unsichtbar gemacht (font-size: 0) —
 * er ist der zugängliche Name des Links. Ein Stern ohne Beschriftung wäre für
 * Screenreader und Spracheingabe nicht ansprechbar (WCAG 2.5.3, 4.1.2).
 */
.woocommerce #review_form .comment-form-rating { margin-bottom: 22px; }
.woocommerce p.stars { margin: 0; line-height: 1; }
.woocommerce p.stars > span { display: inline-flex; gap: 12px; }

/*
 * ACHTUNG BEI DEN EINHEITEN — hier stand vorher em, und das war ein Fehler.
 *
 * font-size: 0 macht den Linktext unsichtbar. em rechnet aber gegen die
 * Schriftgröße des Elements selbst, und die ist damit 0 — width: 1.5em ergab
 * also 0 Pixel. Alle fünf Flex-Elemente hatten keine Breite, die absolut
 * platzierten Sterne lagen übereinander, und der Abstand aus gap konnte nichts
 * bewirken. Genau das sah nach „zu klein und zusammengeschoben" aus.
 *
 * rem rechnet gegen die Wurzel-Schriftgröße und ist von font-size: 0 nicht
 * betroffen. Die Fläche und der Stern werden deshalb in rem angegeben.
 */
.woocommerce p.stars a {
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 0;
  text-decoration: none;
  color: var(--th-hivis);
  opacity: 0.3;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.woocommerce p.stars a::before {
  content: "\2605";
  position: absolute;
  inset: 0;
  font-size: 2.2rem;
  line-height: 2.2rem;
  text-align: center;
}

/*
 * Reihenfolge der Zustände ist hier entscheidend, nicht Geschmack:
 *
 *   1. Auswahl (.selected + .active) — bleibt nach dem Klick stehen
 *   2. Überfahren — muss die Auswahl übertönen, sonst gibt es nach dem ersten
 *      Klick keine Vorschau mehr
 *
 * Deshalb tragen die Hover-Regeln .selected mit im Selektor: Ohne das wäre die
 * Auswahl-Regel spezifischer und der Zeiger würde nichts mehr bewirken.
 */
.woocommerce p.stars.selected a { opacity: 1; }
.woocommerce p.stars.selected a.active ~ a { opacity: 0.3; }

.woocommerce p.stars.selected:hover a,
.woocommerce p.stars:hover a { opacity: 1; }
.woocommerce p.stars.selected a:hover ~ a,
.woocommerce p.stars a:hover ~ a { opacity: 0.3; }

.woocommerce p.stars a:hover { transform: scale(1.12); }

/* Tastaturbedienung sichtbar halten — ohne Umriss wäre nicht erkennbar, welcher
   Stern gerade angesteuert ist. */
.woocommerce p.stars a:focus-visible {
  opacity: 1;
  outline: 2px solid var(--th-hivis);
  outline-offset: 3px;
}

/* --- Restliches Bewertungsformular --------------------------------------- */

/* Liste der vorhandenen Rezensionen: ebenfalls ohne Aufzählungspunkte. */
.woocommerce #reviews ol.commentlist { list-style: none; margin: 0 0 32px; padding: 0; }
.woocommerce #reviews ol.commentlist li { margin: 0 0 24px; }
.woocommerce #reviews .comment-text { border: 1px solid var(--th-line); padding: 20px 22px; }
.woocommerce #reviews .comment-text p.meta { font-size: 0.82rem; color: var(--th-stone); margin: 0 0 10px; }

/*
 * Das Häkchen „Name, E-Mail-Adresse und Website … speichern" ist ein ganzer
 * Satz. Die Beschriftungsregel des Themes setzt Feldnamen in Versalien und
 * Schreibmaschinenschrift — richtig für „E-MAIL", falsch für einen Satz, der
 * dadurch über zwei Zeilen schreit. Hier also normale Schrift.
 */
.woocommerce #review_form .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.woocommerce #review_form .comment-form-cookies-consent label {
  font-family: var(--th-font-body);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--th-paper-3);
  margin: 0;
}


/* ---------------------------------------------------------------------------
   7. EINZELPRODUKT
   --------------------------------------------------------------------------- */

.woocommerce div.product { display: block; }

.woocommerce div.product .product_title {
  font-family: var(--th-font-disp);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--th-paper);
  margin: 0 0 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--th-font-disp);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--th-hivis);
  margin: 0 0 20px;
}
.woocommerce div.product p.price del { color: var(--th-stone); font-size: 1rem; font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--th-paper-2);
  line-height: 1.65;
  margin-bottom: 26px;
  max-width: 56ch;
}

.woocommerce div.product form.cart { margin: 26px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.woocommerce div.product form.cart .variations { width: 100%; }
.woocommerce div.product form.cart .variations td { padding: 0 0 14px; }
.woocommerce div.product form.cart .variations label { margin-bottom: 6px; }

.woocommerce div.product .product_meta {
  font-size: 0.82rem;
  color: var(--th-stone);
  border-top: 1px solid var(--th-line);
  padding-top: 18px;
  margin-top: 26px;
  line-height: 2;
}
.woocommerce div.product .product_meta a { color: var(--th-paper-2); }

/* Bildergalerie */
.woocommerce div.product div.images { margin-bottom: 34px; }
.woocommerce div.product div.images img { border: 1px solid var(--th-line); }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: 2px; gap: 2px; display: flex; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; flex: 0 0 90px; margin: 0; }

/* ---------------------------------------------------------------------------
   Lupe zum Vergrößern
   ---------------------------------------------------------------------------
   WooCommerce gibt dafür das Emoji 🔍 als einzigen Inhalt eines Links aus:

     <a href="#" class="woocommerce-product-gallery__trigger">🔍</a>

   Größe und Platzierung kamen aus der Plugin-Stylesheet, die abgemeldet ist.
   Übrig blieb ein winziges Emoji in Standardschriftgröße, oben links über dem
   Bild — genau das im Screenshot.

   Jetzt ein runder Knopf oben rechts in der Ecke des Bildes, in derselben
   Größenordnung wie die Bewertungssterne.

   ZUR FARBE: color wirkt auf ein Emoji nicht, es bringt seine eigene mit —
   deshalb war die Lupe blau. grayscale nimmt die Farbe heraus, brightness hebt
   das Ergebnis auf ein helles Grau, das zum dunklen Design passt. Der Umweg über
   den Filter ist nötig, weil das Emoji zugleich der einzige Text des Links ist:
   Würde ich es ausblenden und durch eine eigene Grafik ersetzen, hätte der Link
   für Screenreader keinen Namen mehr.
   --------------------------------------------------------------------------- */

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery { position: relative; }

.woocommerce div.product .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--th-line);
  background: rgba(15, 18, 16, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  filter: grayscale(1) brightness(1.9);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.woocommerce div.product .woocommerce-product-gallery__trigger:hover {
  border-color: var(--th-hivis);
  transform: scale(1.08);
}
.woocommerce div.product .woocommerce-product-gallery__trigger:focus-visible {
  outline: 2px solid var(--th-hivis);
  outline-offset: 3px;
}

/* Reiter unter dem Produkt */
.woocommerce div.product .woocommerce-tabs { margin-top: 50px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  /* list-style hat gefehlt — vor „Beschreibung" und „Rezensionen" stand
     dadurch je ein Aufzählungspunkt. Bei einer Reiterleiste aus einer Liste
     fällt das nur auf, wenn die Plugin-Styles abgemeldet sind. */
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  border-bottom: 1px solid var(--th-line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 20px;
  font-family: var(--th-font-disp);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--th-stone);
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--th-paper);
  border-bottom-color: var(--th-hivis);
}
.woocommerce div.product .woocommerce-tabs .panel { color: var(--th-paper-2); line-height: 1.7; max-width: 76ch; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.3rem; color: var(--th-paper); }

/* Weitere Produkte */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
  font-family: var(--th-font-disp);
  font-size: 1.5rem;
  color: var(--th-paper);
  margin: 60px 0 26px;
}

@media (min-width: 901px) {
  /* Bild links, Angaben rechts */
  .woocommerce div.product > div.images { float: left; width: 52%; margin-bottom: 40px; }
  .woocommerce div.product > div.summary { float: right; width: 44%; }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .upsells { clear: both; }
}


/* ---------------------------------------------------------------------------
   8. TABELLEN — Warenkorb, Bestellübersicht, Mein Konto
   --------------------------------------------------------------------------- */

.woocommerce table.shop_table,
.woocommerce table.shop_attributes {
  width: 100%;
  border-collapse: collapse;
  border: none;
  border-radius: 0;
  margin: 0 0 30px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_attributes th {
  font-family: var(--th-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-stone);
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--th-line);
  font-weight: 500;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_attributes td {
  padding: 18px 12px;
  border-top: none;
  border-bottom: 1px solid var(--th-line);
  color: var(--th-paper-2);
  font-size: 0.92rem;
  vertical-align: middle;
}

.woocommerce table.shop_table td.product-name a { color: var(--th-paper); text-decoration: none; }
.woocommerce table.shop_table td.product-name a:hover { color: var(--th-hivis); }
.woocommerce table.shop_table td.product-thumbnail img { width: 70px; height: 70px; object-fit: cover; display: block; }
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal { font-family: var(--th-font-mono); white-space: nowrap; }

.woocommerce a.remove {
  color: var(--th-stone);
  font-size: 1.3rem;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: 0;
}
.woocommerce a.remove:hover { color: var(--th-rust); background: transparent; }

/* Kupon-Zeile */
.woocommerce table.shop_table td.actions { padding: 22px 0; border-bottom: none; }
.woocommerce table.shop_table td.actions .coupon {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  float: none;
  padding: 0;
  border: none;
}
.woocommerce table.shop_table td.actions .coupon input[type="text"] { max-width: 240px; }


/* ---------------------------------------------------------------------------
   9. WARENKORB-SUMMEN UND KASSE
   --------------------------------------------------------------------------- */

.woocommerce .cart-collaterals { margin-top: 20px; }
.woocommerce .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--th-graphite-2);
  border: 1px solid var(--th-line);
  padding: 30px;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  font-family: var(--th-font-disp);
  font-size: 1.25rem;
  color: var(--th-paper);
  margin: 0 0 20px;
}
.woocommerce .cart_totals table.shop_table th { padding-left: 0; }
.woocommerce .cart_totals table.shop_table td { padding-right: 0; text-align: right; }
.woocommerce .cart_totals .order-total .amount { color: var(--th-hivis); font-family: var(--th-font-disp); font-size: 1.2rem; }
.woocommerce .wc-proceed-to-checkout { padding: 20px 0 0; }
.woocommerce .wc-proceed-to-checkout .button { width: 100%; }

.woocommerce-checkout h3 {
  font-family: var(--th-font-disp);
  font-size: 1.25rem;
  color: var(--th-paper);
  margin: 0 0 20px;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields { margin-bottom: 34px; }

/* Zahlungsarten */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--th-line);
  padding: 0 0 20px;
  margin: 0 0 20px;
  list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 12px; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--th-ink);
  color: var(--th-paper-3);
  font-size: 0.85rem;
  border-radius: 0;
  padding: 14px 16px;
  margin-top: 10px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: 0; }
.woocommerce-checkout #payment .place-order .button { width: 100%; }

/*
 * RECHT: Der Bestellabschluss-Knopf muss die Zahlungspflicht klar benennen —
 * "Jetzt kaufen", "Zahlungspflichtig bestellen" oder gleichwertig
 * (§ 8 Abs 2 FAGG, in DE § 312j Abs 3 BGB). Ein Knopf mit "Bestellung
 * abschicken" reicht nicht und kann den Vertrag unwirksam machen.
 * Der Text steht in WooCommerce → Einstellungen, nicht hier.
 *
 * Ebenso Pflicht: Vor dem Knopf müssen Gesamtpreis, Versandkosten, AGB und
 * Widerrufsrecht sichtbar sein. Das erledigt "Germanized for WooCommerce".
 */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 20px;
  font-size: 0.85rem;
}
.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 0.82rem; color: var(--th-stone); }
.woocommerce-checkout .woocommerce-privacy-policy-text a { color: var(--th-hivis); }

@media (min-width: 901px) {
  .woocommerce-checkout form.checkout > .col2-set { float: left; width: 54%; }
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review { float: right; width: 42%; }
  .woocommerce-checkout form.checkout::after { content: ""; display: table; clear: both; }
  .woocommerce .cart_totals { float: right; width: 42%; }
  .woocommerce .cart-collaterals::after { content: ""; display: table; clear: both; }
}


/* ---------------------------------------------------------------------------
   10. MEIN KONTO
   --------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--th-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 13px 0;
  color: var(--th-paper-2);
  text-decoration: none;
  font-size: 0.92rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--th-hivis); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--th-paper);
  font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { border-bottom-color: var(--th-hivis); }

.woocommerce-account .woocommerce-MyAccount-content { color: var(--th-paper-2); line-height: 1.7; }
/* Buttons ausnehmen, sonst grün auf grün — siehe .th-entry-content in pages.css. */
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.th-btn) { color: var(--th-hivis); }

/* Anmelde- und Registrierformular */
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
  background: var(--th-graphite-2);
  border: 1px solid var(--th-line);
  padding: 30px;
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------
   EIN KASTEN STATT ZWEI
   ---------------------------------------------------------------------------
   WooCommerce liefert Anmelden und Registrieren als zwei Spalten. Hier werden
   sie zu einem Kasten mit Reitern zusammengelegt.

   Die Regeln oben bleiben stehen, weil col2-set auch an anderer Stelle vorkommt
   (Adressen im Konto). Überschrieben wird nur innerhalb von #customer_login —
   das ist die Kennung, die WooCommerce ausschließlich der Anmeldeseite gibt.
   --------------------------------------------------------------------------- */

.woocommerce-account #customer_login {
  background: var(--th-graphite-2);
  border: 1px solid var(--th-line);
  padding: 30px;
  max-width: 540px;
}

/* Spalten auflösen: kein eigener Rahmen, keine Breiten, keine Floats. */
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  float: none;
}

.th-account-tabs {
  display: flex;
  max-width: 540px;
  border: 1px solid var(--th-line);
  border-bottom: none;
  background: var(--th-graphite-2);
}
.th-account-tab {
  flex: 1 1 0;
  padding: 15px 18px;
  text-align: center;
  font-family: var(--th-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--th-stone);
  text-decoration: none;
  /* Innen statt außen, damit die Linie exakt auf der Kastenkante sitzt. */
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
.th-account-tab:hover { color: var(--th-paper-2); }
.th-account-tab[aria-current="true"] {
  color: var(--th-paper);
  box-shadow: inset 0 -2px 0 var(--th-hivis);
}

/*
 * Erst wenn JavaScript die Reiter übernommen hat, wird umgeschaltet. Ohne diese
 * Klasse bleiben beide Formulare sichtbar — siehe Begründung in
 * bike_abk_account_tabs().
 */
.th-account-live #customer_login { border-top: none; }
.th-account-live #customer_login .col-1[hidden],
.th-account-live #customer_login .col-2[hidden] { display: none; }

/* Die Überschriften „Anmelden" und „Registrieren" stehen dann schon im Reiter. */
.th-account-live #customer_login .col-1 > h2,
.th-account-live #customer_login .col-2 > h2 { display: none; }

/*
 * Der Datenschutzabsatz im Registrierformular ist WooCommerce-Fließtext und
 * dadurch deutlich größer als der Rest des Formulars. Kleiner gesetzt bleibt er
 * lesbar, drängt sich aber nicht vor die Eingabefelder.
 */
.woocommerce-account #customer_login .woocommerce-privacy-policy-text p {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--th-paper-3);
}
.woocommerce form.login,
.woocommerce form.register {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.woocommerce .woocommerce-form-login__rememberme { margin-bottom: 14px; display: block; }
.woocommerce .lost_password { font-size: 0.85rem; margin-top: 12px; }
.woocommerce .lost_password a { color: var(--th-stone); }

@media (min-width: 901px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 24%; }
  .woocommerce-account .woocommerce-MyAccount-content { float: right; width: 72%; }
  .woocommerce-account .woocommerce::after { content: ""; display: table; clear: both; }
  .woocommerce-account .col2-set .col-1,
  .woocommerce-account .col2-set .col-2 { float: left; width: 48%; }
  .woocommerce-account .col2-set .col-2 { float: right; }
  .woocommerce-account .col2-set::after { content: ""; display: table; clear: both; }
}


/* ---------------------------------------------------------------------------
   11. BLÄTTERN UND BREADCRUMB
   --------------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination { margin-top: 44px; }
.woocommerce nav.woocommerce-pagination ul {
  border: none;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none;
  margin: 0;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--th-line);
  padding: 9px 16px;
  color: var(--th-paper);
  font-size: 0.85rem;
  background: transparent;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--th-hivis);
  color: var(--th-hivis);
  background: transparent;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--th-hivis);
  border-color: var(--th-hivis);
  color: var(--th-on-accent);
}

.woocommerce .woocommerce-breadcrumb {
  font-family: var(--th-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-stone);
  margin: 0 0 26px;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--th-stone); text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--th-hivis); }


/* ---------------------------------------------------------------------------
   12. LEERER WARENKORB
   --------------------------------------------------------------------------- */

.woocommerce .cart-empty {
  font-family: var(--th-font-disp);
  font-size: 1.3rem;
  color: var(--th-paper);
  border-left: none;
  background: transparent;
  padding: 0;
  margin-bottom: 20px;
}
.woocommerce .return-to-shop { margin-bottom: 0; }


/* ---------------------------------------------------------------------------
   13. KASSE — Zahlungsarten, AGB-Häkchen, Bestellknopf
   ---------------------------------------------------------------------------
   Die teuerste Stelle der ganzen Website für einen Darstellungsfehler: Wer hier
   stockt, kauft nicht — und man erfährt nie, warum.

   Diese Auswahl war bisher gar nicht gestaltet. Ohne die Plugin-Styles standen
   Zahlungsarten als nackte Radioliste mit Aufzählungspunkten da, und der
   Bestellknopf sah aus wie ein Browser-Standardknopf.
   --------------------------------------------------------------------------- */

.woocommerce-checkout #payment {
  background: var(--th-graphite-2);
  border: 1px solid var(--th-line);
  border-radius: 0;
  padding: 22px 24px;
}

.woocommerce-checkout #payment ul.wc_payment_methods {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border: none;
}
.woocommerce-checkout #payment ul.wc_payment_methods li {
  margin: 0 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--th-line);
  list-style: none;
}
/* Die gewählte Zahlungsart hervorheben. WooCommerce setzt diese Klasse per JS —
   ohne sichtbaren Unterschied weiß niemand, was gerade ausgewählt ist. */
.woocommerce-checkout #payment ul.wc_payment_methods li:has(input:checked) {
  border-color: var(--th-hivis);
}
.woocommerce-checkout #payment ul.wc_payment_methods label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--th-font-body);
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--th-paper);
  margin: 0;
  cursor: pointer;
}
.woocommerce-checkout #payment ul.wc_payment_methods label img {
  max-height: 24px;
  width: auto;
  vertical-align: middle;
}

/* Erklärtext zur gewählten Zahlungsart. WooCommerce blendet ihn per JS ein; der
   dunkle Grund unterscheidet ihn von der Auswahl darüber. */
.woocommerce-checkout #payment div.payment_box {
  background: var(--th-ink);
  border: 1px solid var(--th-line);
  border-top: none;
  color: var(--th-paper-3);
  font-size: 0.88rem;
  line-height: 1.6;
  padding: 16px 18px;
  margin: 0 0 4px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }

/*
 * AGB- und Widerrufshäkchen.
 *
 * RECHT: Das ist ein Pflichtelement (§ 4 Abs 1 Z 8, § 8 FAGG). Es muss
 * erkennbar und lesbar sein — eine Beschriftung in Versalien und
 * Schreibmaschinenschrift, wie sie die Feldregel des Themes sonst setzt, ist bei
 * einem ganzen Satz das Gegenteil davon.
 */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  border-top: 1px solid var(--th-line);
  padding-top: 18px;
  margin-bottom: 18px;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label,
.woocommerce-checkout .validate-required label.woocommerce-form__label-for-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--th-font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
  color: var(--th-paper-2);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--th-hivis); }

/* Bestellknopf: der wichtigste Knopf des Shops, entsprechend breit. */
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order {
  width: 100%;
  padding: 17px 28px;
  font-size: 1rem;
}

/* Ladezustand während der Zahlungsabwicklung — sonst klickt man zweimal. */
.woocommerce .blockUI.blockOverlay { background: rgba(15, 18, 16, 0.6) !important; }


/*
 * Zustimmung zur verkürzten Gewährleistung bei Gebrauchtware.
 *
 * RECHT: Muss GESONDERT von den AGB stehen und darf nicht vorangekreuzt sein
 * (§ 10 Abs 2 VGG verlangt eine ausdrückliche und gesonderte Vereinbarung).
 * Deshalb ein eigener, abgesetzter Kasten mit farbiger Kante — nicht
 * hervorgehoben, um zu drängen, sondern damit er nicht in der Sammelzustimmung
 * untergeht.
 */
.th-used-consent {
  border: 1px solid var(--th-line);
  border-left: 3px solid var(--th-hivis);
  background: var(--th-graphite-2);
  padding: 18px 20px;
  margin: 0 0 20px;
}
.th-used-consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--th-font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
  color: var(--th-paper-2);
  margin: 0;
  cursor: pointer;
}
.th-used-consent input[type="checkbox"] { flex: none; margin-top: 3px; }
.th-used-consent .required { color: var(--th-error); text-decoration: none; }

/*
 * Vertrauensleiste.
 *
 * Bewusst ohne Häkchen oder Siegel-Grafiken: Ein Häkchen vor jeder Zeile
 * suggeriert eine Prüfung, die niemand vorgenommen hat, und Siegel ohne echte
 * Zertifizierung wären irreführend. Die Tatsachen wirken für sich — zurückhaltend
 * gesetzt, damit sie nicht wie Werbung aussehen.
 */
.th-trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--th-line);
  display: grid;
  gap: 8px;
}
.th-trust li {
  margin: 0;
  padding-left: 14px;
  position: relative;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--th-paper-3);
}
/* Ein kurzer Strich statt eines Häkchens — Gliederung ohne Behauptung. */
.th-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--th-hivis);
}

/*
 * Zustandstabelle beim Gebrauchtrad.
 *
 * Als Definitionsliste und nicht als <table>: Es sind Paare aus Bezeichnung und
 * Wert, keine Daten in Zeilen und Spalten. Screenreader lesen dl korrekt als
 * zusammengehörige Paare vor, eine Tabelle würde eine Struktur behaupten, die
 * es nicht gibt.
 */
.th-used-specs { margin: 40px 0; max-width: 820px; }
.th-used-specs h3 { font-size: 1.2rem; margin: 0 0 18px; }
.th-used-specs dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px;
  background: var(--th-line);
  margin: 0 0 16px;
}
.th-used-specs dl > div { background: var(--th-graphite-2); padding: 16px 18px; }
.th-used-specs dt {
  font-family: var(--th-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-stone);
  margin-bottom: 6px;
}
.th-used-specs dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--th-paper);
}

/* Hinweis auf der Produktseite und Kennzeichen im Raster. */
.woocommerce .th-used-note {
  border-left: 3px solid var(--th-hivis);
  padding-left: 14px;
  margin: 16px 0;
}
.th-used-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border: 1px solid var(--th-line);
  font-family: var(--th-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-paper-3);
  vertical-align: middle;
}


/* ---------------------------------------------------------------------------
   14. VERSANDRECHNER IM WARENKORB
   --------------------------------------------------------------------------- */

.woocommerce .shipping-calculator-button { color: var(--th-hivis); font-size: 0.88rem; }
.woocommerce .shipping-calculator-form { margin-top: 14px; }
.woocommerce .shipping-calculator-form .form-row { margin-bottom: 12px; }
.woocommerce ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.woocommerce ul#shipping_method li {
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.9rem;
  color: var(--th-paper-2);
}
.woocommerce ul#shipping_method label { display: inline; margin: 0; }
.woocommerce .woocommerce-shipping-destination { font-size: 0.82rem; color: var(--th-stone); }


/* ---------------------------------------------------------------------------
   15. BESTELLBESTÄTIGUNG UND BESTELLDETAILS
   ---------------------------------------------------------------------------
   Die Seite nach dem Kauf. Sie wird selten angesehen und ist genau deshalb oft
   ungestaltet — obwohl sie der Beleg ist, den Kunden ausdrucken und aufbewahren.
   --------------------------------------------------------------------------- */

.woocommerce .woocommerce-thankyou-order-received {
  font-family: var(--th-font-disp);
  font-size: 1.25rem;
  color: var(--th-paper);
  border-left: 3px solid var(--th-hivis);
  padding: 14px 0 14px 18px;
  margin-bottom: 26px;
}

.woocommerce ul.woocommerce-thankyou-order-details {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--th-line);
}
.woocommerce ul.woocommerce-thankyou-order-details li {
  flex: 1 1 150px;
  background: var(--th-graphite-2);
  padding: 16px 18px;
  border: none;
  font-family: var(--th-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-stone);
}
.woocommerce ul.woocommerce-thankyou-order-details li strong {
  display: block;
  margin-top: 6px;
  font-family: var(--th-font-disp);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--th-paper);
}

.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details { margin-bottom: 34px; }
.woocommerce .woocommerce-column__title { font-size: 1.05rem; margin: 0 0 12px; }
.woocommerce address {
  font-style: normal;
  line-height: 1.7;
  color: var(--th-paper-2);
  border: 1px solid var(--th-line);
  padding: 16px 18px;
}


/* ---------------------------------------------------------------------------
   16. PASSWORT-SICHTBARKEIT
   ---------------------------------------------------------------------------
   WooCommerce legt ein Augensymbol über das Passwortfeld. Ohne Positionierung
   saß es außerhalb des Feldes und sah nach einem Fehler aus.
   --------------------------------------------------------------------------- */

.woocommerce form .password-input { position: relative; display: block; }
.woocommerce form .show-password-input {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--th-stone);
}
.woocommerce form .show-password-input::after { color: inherit; }
.woocommerce form .show-password-input.display-password { color: var(--th-hivis); }

/*
 * PASSWORTSTÄRKE
 *
 * WooCommerce blendet diesen Hinweis ein, sobald jemand ein Passwort tippt —
 * bei der Registrierung und im Konto unter „Konto-Details". Das Theme entfernt
 * WooCommerces eigenes Stylesheet, also gäbe es hier ohne diese Regeln einen
 * hellen Kasten mit hellem Text auf dunklem Grund: unlesbar genau in dem Moment,
 * in dem der Text etwas Wichtiges sagt.
 *
 * Die vier Stufen kommen von WooCommerce als Klassen: short, bad, good, strong.
 * Farben allein reichen dafür nicht — die Stufe steht ohnehin als Wort darin
 * („Schwach", „Stark"), und das ist der Teil, auf den Verlass ist (WCAG 1.4.1).
 */
.woocommerce form .woocommerce-password-strength {
  display: block;
  margin-top: 8px;
  padding: 9px 12px;
  border-left: 3px solid var(--th-line);
  background: var(--th-ink);
  font-family: var(--th-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-paper-2);
}
.woocommerce form .woocommerce-password-strength.short,
.woocommerce form .woocommerce-password-strength.bad {
  border-left-color: var(--th-error);
  color: var(--th-paper);
}
.woocommerce form .woocommerce-password-strength.good { border-left-color: #d9a441; }
.woocommerce form .woocommerce-password-strength.strong {
  border-left-color: var(--th-hivis);
  color: var(--th-paper);
}

.woocommerce form .woocommerce-password-hint {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--th-paper-3);
}


/* ---------------------------------------------------------------------------
   17. BLOCK-WARENKORB UND BLOCK-KASSE
   ---------------------------------------------------------------------------
   WICHTIG ZUM VERSTÄNDNIS: WooCommerce hat zwei Bauarten für Warenkorb und
   Kasse. Die klassische arbeitet mit Shortcodes und den Klassen, die oben
   gestaltet sind. Neue Installationen legen stattdessen BLÖCKE an
   (.wc-block-checkout), und die bringen ihre eigenen Stylesheets mit — die sind
   von unserem Abmelden gar nicht betroffen.

   Folge: Ist bei dir die Blockvariante aktiv, wirkt nichts aus Abschnitt 9 bis
   15. Die Seite ist dann nicht kaputt, sieht aber fremd aus: hellere Flächen,
   andere Knöpfe, andere Schrift.

   Was hier steht, ist deshalb bewusst knapp — Farben, Flächen, Felder und
   Knöpfe. Die Blockstruktur von WooCommerce ändert sich häufiger als die
   klassische; je weniger davon wir überschreiben, desto weniger geht bei einem
   Update kaputt.

   Welche Bauart bei dir läuft, siehst du im Editor der Seite „Kasse": Steht dort
   ein einzelner Shortcode, ist es die klassische.
   --------------------------------------------------------------------------- */

.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input,
.wc-block-components-textarea {
  background: var(--th-ink);
  border: 1px solid var(--th-line);
  border-radius: 0;
  color: var(--th-paper);
  font-family: var(--th-font-body);
}
.wc-block-components-text-input label,
.wc-block-components-checkbox__label,
.wc-block-components-title {
  color: var(--th-paper);
}
.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
  border-color: var(--th-line);
  color: var(--th-paper-2);
}
.wc-block-components-totals-item__value,
.wc-block-components-product-name { color: var(--th-paper); }
.wc-block-components-button:not(.is-link) {
  background: var(--th-hivis);
  color: var(--th-on-accent);
  border-radius: 0;
}
.wc-block-components-button.is-link { color: var(--th-hivis); }


/* ---------------------------------------------------------------------------
   18. LAYOUT-RAHMEN
   --------------------------------------------------------------------------- */

.th-page-body--shop { padding-top: 40px; }

/* WooCommerce-Inhalte auf Warenkorb-, Kassen- und Kontoseite bekommen mehr
   Breite als normaler Text — Tabellen brauchen Platz. */
.th-layout-standard .woocommerce { max-width: none; }
.th-page-body--standard .th-entry-content .woocommerce { max-width: none; }