/* =========================================================
   Woo-Systemseiten (Warenkorb / Kasse / Mein Konto) auf das
   Design-System gemappt. Reines CSS, keine Hook-/Markup-Eingriffe:
   German Market und Checkout-Logik bleiben unangetastet.
   Laedt nur auf is_cart() / is_checkout() / is_account_page().
   ========================================================= */

/* ---- Grundflaeche: weisse Arbeitsflaeche unter dem Utility-Kopf ---- */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
  background: var(--paper);
  padding-top: clamp(32px, 4vw, 56px);
  /* sauberer Abschluss: Inhalt darf nie am Footer kleben */
  padding-bottom: clamp(64px, 7vw, 104px) !important;
}

/* ---- Typo-Grundlagen ---- */
.woocommerce-cart .entry-content h2,
.woocommerce-checkout .entry-content h2,
.woocommerce-account .entry-content h2 {
  font-size: var(--fs-h3);
  max-width: none;
}

/* ---- Formularfelder (Checkout/Konto/Coupon) ----
   EINE Feldsprache fuer die ganze Seite: identisch zur Kontaktseite
   (.kt-input in info-pages.css) - 46px Mindesthoehe, --r-chip, 1px --line,
   Fokus mit Border --ink + 3px color-mix-Ring. Die Selektoren tragen den
   Body-Namensraum, weil Woo/German Market die Felder mit
   `.woocommerce form .form-row input.input-text` (0,3,2) adressieren und
   dort einen 4px-Radius setzen - ohne Gleichstand gewinnt Fremd-CSS. */
.woocommerce .form-row label { font-size: var(--fs-meta); font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.woocommerce .form-row label .required { color: var(--lime-deep); font-weight: 700; text-decoration: none; }
.woocommerce .form-row .optional { font-size: var(--fs-micro); font-weight: 500; color: var(--ink-subtle); }
.woocommerce .input-text,
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea,
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select,
.woocommerce-cart form .form-row input.input-text,
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row textarea,
.woocommerce-account form .form-row select,
.select2-container--default .select2-selection--single {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-meta);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
/* Textarea darf wachsen, Selects behalten den nativen Pfeil */
.woocommerce textarea,
.woocommerce-checkout form .form-row textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.woocommerce select,
.woocommerce-checkout form .form-row select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238492A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px 17px;
  cursor: pointer;
}
.woocommerce .input-text::placeholder,
.woocommerce textarea::placeholder { color: var(--ink-subtle); }
.woocommerce .input-text:hover,
.woocommerce-checkout form .form-row input.input-text:hover,
.woocommerce-checkout form .form-row textarea:hover { border-color: color-mix(in oklab, var(--ink) 22%, var(--line)); }
/* Select2 (Land / Bundesland) auf exakt dieselbe Optik */
.select2-container--default .select2-selection--single { display: flex; align-items: center; height: 46px; padding: 0 14px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--ink); font-weight: 500; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 10px; }
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 12%, transparent);
}
.select2-dropdown { border-color: var(--line); border-radius: var(--r-chip); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--lime-soft); color: var(--ink); }
.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus,
.woocommerce-checkout form .form-row select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 12%, transparent);
}

/* ---- Buttons: Systemsprache (lime Pill fuer primaere Aktionen) ---- */
.woocommerce-cart .entry-content .button,
.woocommerce-checkout .entry-content .button,
.woocommerce-account .entry-content .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-meta);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
/* Primary-CTA der Geldstrecke: EINE Definition fuer Warenkorb, Kasse und Konto.
   Navy-Text auf Lime (Kontrast ca. 7:1); !important schlaegt Woo-/Payment-Plugin-
   Buttonfarben (woocommerce.css setzt auf .button.alt weissen Text). */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-account .entry-content .button[type="submit"] {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--lime) !important;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink) !important;
  font-weight: 700;
  font-size: var(--fs-body);
  padding: 15px 20px;
  transition: background var(--t-fast) var(--ease);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-account .entry-content .button[type="submit"]:hover { background: var(--lime-deep) !important; }

/* ---- Warenkorb-Tabelle: Hairline-Zeilen statt Boxen ---- */
.woocommerce table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  margin-bottom: var(--s6);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: var(--s4) var(--s3);
  background: none;
  vertical-align: middle;
}
.woocommerce table.shop_table thead th {
  font-size: var(--fs-micro);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1.5px solid var(--ink-subtle);
}
.woocommerce table.shop_table td.product-name a { color: var(--ink); font-weight: 600; text-decoration: none; }
/* Kein generisches Qty-Input-Styling mehr: das einzige Mengenfeld dieser Seiten
   sitzt im Warenkorb-Stepper und wird dort vollstaendig gestylt (verschweisste
   Gruppe, Input ohne eigenen Rahmen). Die alte Regel gewann per Spezifitaet. */
.woocommerce table.shop_table .wgm-info { display: block; font-size: var(--fs-micro); color: var(--ink-subtle); }
.woocommerce table.shop_table .price, .woocommerce table.shop_table .amount { font-variant-numeric: tabular-nums; }

/* Coupon-/Aktionszeile */
.woocommerce-cart .coupon { display: flex; gap: var(--s2); align-items: center; }
.woocommerce-cart td.actions .button[name="update_cart"] { float: right; }
.woocommerce-cart td.actions .button:disabled,
.woocommerce-cart td.actions .button[disabled] { opacity: .4; cursor: default; }

/* Ausverkauftes nie als Kaufempfehlung; ohne kaufbare Produkte ganze Sektion weg */
.cross-sells li.product.outofstock { display: none; }
.cross-sells:not(:has(li.product:not(.outofstock))) { display: none; }

/* Woo-Iconfont-Glyphen (Info/Message) auf allen Systemseiten aus */
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before { content: none !important; display: none !important; }

/* Formularfeld-Borders gegen GM/Woo-Spezifitaet behaupten (wirkten rotbraun = Dauer-Error).
   Radius muss hier mit stehen: die Fremdregel auf derselben Stufe setzte 4px. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce #order_comments {
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--paper);
  color: var(--ink);
  /* NGC DIN wird nur in Medium 500 und Bold 700 verwendet; 400 lief hier
     als duennerer Schnitt gegen alle anderen Felder. */
  font-weight: 500;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 12%, transparent);
}

/* Native Controls im Systemton, Checkbox-Ausrichtung */
.woocommerce-cart, .woocommerce-checkout, .woocommerce-account { accent-color: var(--ink); }
.woocommerce-checkout input[type="checkbox"],
.woocommerce-account input[type="checkbox"] { width: 17px; height: 17px; }
#ship-to-different-address label { display: flex; align-items: center; gap: 10px; cursor: pointer; }

/* PAngV-/Preisspalten nicht mitten in der Einheit umbrechen */
.woocommerce table.shop_table .wgm-info { white-space: nowrap; }
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal { white-space: nowrap; }

/* Betraege rechtsbuendig (inkl. Spaltenkoepfe) + Tabellenziffern:
   dieselbe Zahlenlogik wie in der Summen-Karte daneben, sonst stehen
   zwei Ausrichtungen im selben Viewport (Audit P1) */
.woocommerce-cart table.shop_table thead th.product-price,
.woocommerce-cart table.shop_table thead th.product-subtotal,
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-subtotal {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Woo-Iconfont-Glyph am Versandkosten-Rechner */
.woocommerce-cart .shipping-calculator-button::after { display: none; content: none; }

/* §312k-Kuendigungsbutton: EINE Definition sitewide in components.css
   (der Button rendert auf jeder Seite, woo-pages.css laedt aber nur auf
   Warenkorb/Kasse/Konto; die alte Doppel-Definition hier erzeugte je Seite
   ein anderes Erscheinungsbild, auf der Startseite sogar Lime). */
/* German-Market-Checkboxen (AGB/Widerruf) ruhig setzen */
.woocommerce-checkout .wgm-second-checkout-page-container,
.woocommerce-checkout .legal { font-size: var(--fs-meta); color: var(--ink-muted); }

/* ---- Mein Konto: Navigation als Pill-Liste ---- */
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 100%; margin-bottom: var(--s6); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: inline-flex;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--ink); border-color: var(--ink); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; }

/* ---- Woo-Notices auf Systemseiten ---- */
.woocommerce-cart .woocommerce-message, .woocommerce-cart .woocommerce-info, .woocommerce-cart .woocommerce-error li,
.woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info, .woocommerce-checkout .woocommerce-error li,
.woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-error li {
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: var(--fs-meta);
  list-style: none;
}
.woocommerce .woocommerce-error { margin: 0 0 var(--s4); padding: 0; }

/* =========================================================
   ALP Woo-Systemseiten - GETEILTE Primitive
   (an woo-pages.css angehaengt; laedt auf Warenkorb/Kasse/Konto).
   Alles unter .woocommerce (Shortcode-Wrapper) gescoped -> kein Leak.
   ========================================================= */

/* ---- Karte: helle Arbeitsflaeche mit Hairline + Ambient-Schatten ---- */
.woocommerce .alp-card {
  background: var(--paper);
  border-radius: var(--r-surface);
  box-shadow: var(--sh-card);
}
.woocommerce .alp-card__header {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--line);
}
/* 3-Klassen-Selektor schlaegt .woocommerce-account .entry-content h2 (0,2,1) */
.woocommerce .alp-card__header .alp-card__title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.2;
  color: var(--ink);
  max-width: none;
}
.woocommerce .alp-card__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-chip);
  background: var(--lime-soft);
  color: var(--ink);
}
.woocommerce .alp-card__icon svg { width: 22px; height: 22px; }
.woocommerce .alp-card__body { padding: clamp(18px, 2.2vw, 26px); }

/* ---- Status-Badge: Pille mit Punkt, 5 Varianten auf ALP-Tokens ---- */
.woocommerce .alp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.woocommerce .alp-badge__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.woocommerce .alp-badge--lg { padding: 7px 15px; font-size: var(--fs-meta); }
.woocommerce .alp-badge--success { color: var(--green-ok); background: color-mix(in oklab, var(--green-ok) 12%, #fff); }
.woocommerce .alp-badge--info    { color: var(--ink); background: var(--bg-soft); }
/* warning bleibt in der Lime-Familie, Text aber ink-lastig fuer WCAG AA auf lime-soft */
.woocommerce .alp-badge--warning { color: color-mix(in oklab, var(--ink) 55%, var(--lime-deep)); background: var(--lime-soft); }
.woocommerce .alp-badge--error   { color: #B4232A; background: color-mix(in oklab, #B4232A 9%, #fff); }
.woocommerce .alp-badge--neutral { color: var(--ink-muted); background: var(--bg); }

/* ---- Formular-Primitive ---- */
.woocommerce .alp-form { display: grid; gap: var(--s5); }
.woocommerce .alp-form__row { margin: 0 0 var(--s4); }
.woocommerce .alp-form__row--half { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.woocommerce .alp-form__field { margin: 0 0 var(--s4); }
.woocommerce .alp-form__label { display: block; margin-bottom: 4px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink); }
.woocommerce .alp-form__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-meta);
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
/* Woo-Zeilen im alp-form-Kontext beruhigen (German Market darf Felder frei einspeisen) */
.woocommerce .alp-form .form-row { float: none; width: 100%; margin: 0 0 var(--s4); }
.woocommerce .alp-form__row--half .form-row { margin: 0; }
.woocommerce .alp-form .form-row:last-child { margin-bottom: 0; }
/* Actions als direktes Grid-Kind (edit-address): Abstand traegt das Grid-gap */
.woocommerce .alp-form > .alp-form__actions { margin-top: 0; }

/* Passwort-Feld: Auge-Toggle rechts im Feld */
.woocommerce .alp-form__input-wrapper { position: relative; display: block; }
.woocommerce .alp-form__input-wrapper .input-text,
.woocommerce .alp-form__input-wrapper .alp-form__input { padding-right: 46px; }
.woocommerce .alp-form__toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-subtle);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.woocommerce .alp-form__toggle-password:hover { color: var(--ink); }
.woocommerce .alp-form__eye-off { display: none; }
.woocommerce .alp-form__toggle-password[aria-pressed="true"] .alp-form__eye,
.woocommerce .alp-form__toggle-password.is-visible .alp-form__eye { display: none; }
.woocommerce .alp-form__toggle-password[aria-pressed="true"] .alp-form__eye-off,
.woocommerce .alp-form__toggle-password.is-visible .alp-form__eye-off { display: block; }

.woocommerce .alp-form__hint { display: block; margin-top: 6px; font-size: var(--fs-micro); line-height: 1.45; color: var(--ink-subtle); }
.woocommerce .alp-form__hint em { font-style: normal; }
.woocommerce .alp-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

/* ---- Fokus & A11y ---- */
/* Aesthetischer Ring (Maus + Tastatur) */
.woocommerce .alp-form__input:focus,
.woocommerce .alp-form .input-text:focus,
.woocommerce .alp-form textarea:focus,
.woocommerce .alp-form select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 12%, transparent);
}
/* Sichtbarer WCAG-Tastaturring (getrennte Ebene) */
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible,
.woocommerce summary:focus-visible,
.woocommerce [tabindex]:focus-visible {
  outline: 2px solid var(--lime-deep);
  outline-offset: 2px;
}
/* Validierung (Woo setzt die Klassen auf .form-row) */
.woocommerce .woocommerce-invalid input.input-text,
.woocommerce .woocommerce-invalid select,
.woocommerce .woocommerce-invalid .alp-form__input { border-color: #B4232A; }
.woocommerce .woocommerce-invalid input.input-text:focus,
.woocommerce .woocommerce-invalid .alp-form__input:focus { box-shadow: 0 0 0 3px color-mix(in oklab, #B4232A 15%, transparent); }
.woocommerce .woocommerce-validated input.input-text,
.woocommerce .woocommerce-validated .alp-form__input { border-color: var(--green-ok); }

/* Geldbetraege: gleichmaessige Ziffern */
.woocommerce .amount,
.woocommerce bdi { font-variant-numeric: tabular-nums; }

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .woocommerce *,
  .woocommerce *::before,
  .woocommerce *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Warenkorb (gefuellt): zweispaltig mit Sticky-Summen-Karte,
   ruhige Positionsliste, Mengen-Stepper, Trust-Zeile,
   Cross-Sells in voller Breite. Markup bleibt Stock (GM safe).
   ========================================================= */
.woocommerce-cart .entry-content > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--s6);
  align-items: start;
}
.woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .entry-content > .woocommerce > .alp-woo-title,
.woocommerce-cart .entry-content > .woocommerce > .cart-empty-state,
.woocommerce-cart .entry-content > .woocommerce > .cross-sells { grid-column: 1 / -1; }
.woocommerce-cart form.woocommerce-cart-form { grid-column: 1; min-width: 0; }
.woocommerce-cart .cart-collaterals {
  grid-column: 2;
  position: sticky;
  top: calc(76px + var(--s3));
  width: auto;
  float: none;
}

.alp-woo-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h3-lg);
  color: var(--ink);
  margin: 0 0 var(--s2);
}

/* Positionsliste: Tabelle entkernen, Zeilen mit Hairlines */
.woocommerce-cart table.shop_table {
  border: 0;
  border-radius: 0;
  background: none;
}
.woocommerce-cart table.shop_table thead th {
  background: none;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  padding: 10px 12px;
}
.woocommerce-cart table.shop_table td {
  background: none;
  border-top: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 12px;
  vertical-align: middle;
}
.woocommerce-cart td.product-thumbnail img {
  width: 76px;
  border-radius: var(--r-chip);
  background: var(--bg-soft);
}
.woocommerce-cart td.product-name a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.woocommerce-cart td.product-name a:hover { color: var(--lime-deep); }
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal { font-variant-numeric: tabular-nums; white-space: nowrap; }
.woocommerce-cart td.product-subtotal { font-weight: 700; }
/* Entfernen-X: EINE Definition, 44px-Touchziel, bewusst roter Hover (Loesch-Aktion) */
.woocommerce-cart table.shop_table .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  line-height: 1;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink-subtle) !important;
  font-size: var(--fs-lead);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.woocommerce-cart table.shop_table .product-remove a.remove:hover {
  background: #B4232A;
  color: #fff !important;
}

/* Mengen-Stepper: verschweisste Gruppe (Buttons via Quantity-Hooks) */
.woocommerce-cart .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  overflow: hidden;
  background: var(--paper);
}
.woocommerce-cart .quantity .qty {
  width: 52px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 8px 2px;
}
.woocommerce-cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.alp-qty__btn {
  width: 34px;
  border: 0;
  background: var(--bg-soft);
  color: var(--ink-muted);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.alp-qty__btn:hover { background: var(--lime-soft); color: var(--ink); }
.alp-qty__btn:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: -2px; }

/* Coupon + Aktualisieren-Zeile (Selektor-Staerke gewinnt gegen woocommerce.css width:80px
   und gegen die eigene Zellen-Basisregel .woocommerce-cart table.shop_table td) */
.woocommerce-cart table.shop_table td.actions { padding: var(--s4) 0 0; border-bottom: 0; }
.woocommerce-cart table.shop_table td.actions .coupon .input-text {
  width: 200px;
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Summen-Karte. Erste Regel neutralisiert das Woo-Layout-Float
   (woocommerce-layout.css: float right, width 48%) mit gleicher Spezifitaet */
.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; max-width: none; margin: 0; }
.woocommerce-cart .cart_totals {
  width: 100%;
  float: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--sh-card);
  padding: clamp(18px, 2vw, 26px);
}
.woocommerce-cart .cart_totals h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h3);
  margin: 0 0 var(--s3);
}
.woocommerce-cart .cart_totals table.shop_table { margin-bottom: var(--s3); }
.woocommerce-cart .cart_totals th {
  background: none;
  border: 0;
  padding: 10px 0;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  text-align: left;
}
.woocommerce-cart .cart_totals td {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total th { font-size: var(--fs-body); font-weight: 700; color: var(--ink); border-bottom: 0; }
/* Primary-CTA: siehe die EINE Definition im Button-Block oben */
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }

/* Gleiche Spezifitaets-Absicherung wie bei der Kasse: die globale
   Listen-Regel des Themes wuerde das ul zum Grid mit Einzug machen. */
.woocommerce-cart ul.alp-cart-trust {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.woocommerce-cart ul.alp-cart-trust li { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-micro); font-weight: 500; color: var(--ink-muted); }
.woocommerce-cart ul.alp-cart-trust svg { width: 14px; height: 14px; color: var(--lime-deep); flex: none; }

/* =========================================================
   Warenkorb (leer): Empty-State-Karte.
   Die Inline-SVGs in cart-empty.php tragen zusaetzlich width/height als
   Attribut. Ohne feste Groesse rechnet Chromium ein viewBox-only-SVG auf
   100 % des Elternelements hoch: Blatt und Haken wurden dadurch je ueber
   1000 px gross. max-width/max-height sichern das doppelt ab, damit das
   Layout auch dann haelt, wenn diese Datei einmal nicht laedt.
   ========================================================= */
.woocommerce-cart .cart-empty-state { margin: var(--s5) 0 0; }
.woocommerce-cart .cart-empty-state .wrap { width: 100%; max-width: none; padding: 0; }
.woocommerce-cart .ces {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s4);
  padding: clamp(40px, 6vw, 72px) var(--s5);
  background: var(--paper);
  border-radius: var(--r-surface);
  box-shadow: var(--sh-card);
}
.woocommerce-cart .ces__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--lime-soft);
  color: var(--lime-deep);
}
.woocommerce-cart .ces__icon svg { width: 30px; height: 30px; max-width: 30px; max-height: 30px; flex: none; display: block; }
.woocommerce-cart .ces__title { font-family: var(--serif); font-weight: 700; font-size: var(--fs-h3-lg); line-height: 1.15; margin: 0; max-width: none; color: var(--ink); }
.woocommerce-cart .ces__text { margin: 0; max-width: 54ch; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-muted); }
.woocommerce-cart .ces__btn { margin-top: var(--s2); }
/* ul.-Praefix noetig: die globale Listen-Regel (base.css) macht sonst ein
   Grid mit Einzug und Aufzaehlungspunkten daraus. */
.woocommerce-cart ul.ces__reassure {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s6);
  width: 100%;
}
.woocommerce-cart ul.ces__reassure li { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-meta); font-weight: 500; color: var(--ink-muted); }
.woocommerce-cart ul.ces__reassure svg { width: 16px; height: 16px; max-width: 16px; max-height: 16px; color: var(--lime-deep); flex: none; display: block; }
@media (max-width: 600px) {
  .woocommerce-cart .ces { padding: var(--s7) var(--s4); }
  .woocommerce-cart ul.ces__reassure { flex-direction: column; align-items: center; gap: var(--s3); }
}

/* Cross-Sells: volle Breite, pcard-Raster (archive.css laedt auf dem Warenkorb).
   Linksbuendig auf der Rail (harte Kundenregel): Karten starten an der
   Headline-Achse, auch wenn nur eine Empfehlung gepflegt ist. Zentrierung
   aus fremden Regeln (Woo-Default, Flex-Fallbacks) wird hart neutralisiert. */
.woocommerce-cart .cross-sells { margin-top: var(--s7); }
.woocommerce-cart .cross-sells > h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h3);
  margin: 0 0 var(--s4);
  text-align: left;
}
/* Woos Clearfix-Pseudos belegen im Grid die erste Spalte und schoben die
   einzige Empfehlung in die Mitte (harte Kundenregel: linksbuendig). */
.woocommerce-cart .cross-sells ul.products::before,
.woocommerce-cart .cross-sells ul.products::after { content: none; display: none; }
.woocommerce-cart .cross-sells ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  justify-content: start;
  justify-items: stretch;
  text-align: left;
}
/* .entry-content-Variante hebt die Spezifitaet ueber Woos columns-3-Raster
   (woocommerce.css setzt li.product auf width 30.75% + float) */
.woocommerce-cart .cross-sells ul.products li.product,
.woocommerce-cart .entry-content .cross-sells ul.products li.product {
  width: 100%;
  max-width: none;
  float: none;
  clear: none;
  margin: 0;
}

@media (max-width: 1099px) {
  .woocommerce-cart .entry-content > .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-cart .cart-collaterals { grid-column: 1; position: static; }
  .woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .woocommerce-cart .cross-sells ul.products { grid-template-columns: 1fr; }
  .woocommerce-cart table.shop_table td.actions .coupon .input-text { width: 100%; margin-bottom: 8px; }
}

/* =========================================================
   Kasse: zweispaltig. Links die Kundendaten-Karte, rechts EINE
   zusammenhaengende Bestell-Karte (Karten-Kopf + Zahlarten +
   Bestelluebersicht + Pflichtangaben + Bestell-Button + Trust).

   German Market baut die rechte Spalte selbst: es gibt ZWEI Elemente
   mit id="order_review_heading" - das aeussere (direktes Form-Kind)
   traegt "Zahlungsweise", das innere (in #order_review, nach der
   Zahlarten-Liste) traegt "Deine Bestellung". Deshalb trennen die
   Selektoren strikt nach `> #order_review_heading` (Karten-Kopf)
   und `#order_review #order_review_heading` (Abschnittsmarke).
   Die Reihenfolge Zahlart -> Uebersicht -> Button bleibt unangetastet:
   §312j BGB verlangt die Bestelluebersicht direkt ueber dem Button.
   ========================================================= */
form.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  /* min-content deckelt die Zeilen auf ihren Inhalt. Ohne diesen Deckel
     verteilt der Grid-Algorithmus den Ueberhang der linken, ueber mehrere
     Zeilen gespannten Karte auf die Zeilen der rechten Spalte - genau das
     riss den Karten-Kopf vom Karten-Koerper (mehrere hundert Pixel Leere). */
  grid-auto-rows: min-content;
  column-gap: var(--s6);
  row-gap: 0;
  align-content: start;
  align-items: start;
}
/* Streukinder (GM-/Gateway-Elemente als direkte Form-Kinder) landen rechts
   in der Uebersichts-Spalte; nur im Zwei-Spalten-Layout noetig */
@media (min-width: 1024px) {
  form.woocommerce-checkout > *:not(#customer_details) { grid-column: 2; min-width: 0; }
  form.woocommerce-checkout > #customer_details { grid-column: 1; grid-row: 1 / span 20; }
}
form.woocommerce-checkout #customer_details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--sh-card);
  padding: clamp(22px, 2.6vw, 34px);
  min-width: 0;
}
form.woocommerce-checkout #customer_details .col-1,
form.woocommerce-checkout #customer_details .col-2 {
  float: none;
  width: 100%;
}
form.woocommerce-checkout #customer_details h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-soft);
  max-width: none;
}
/* "Lieferung an eine andere Adresse?" ist im Woo-Markup ein h3, semantisch
   aber eine Checkbox-Zeile: sonst steht sie so gross wie "Rechnungsdaten"
   im Formular und liest sich wie ein neuer Abschnitt. */
form.woocommerce-checkout #customer_details h3#ship-to-different-address {
  margin: var(--s2) 0 0;
  padding: 0;
  border: 0;
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0;
}
form.woocommerce-checkout #customer_details .col-2 { margin-top: var(--s6); }
/* Adressfelder: Zwei-Spalten-Raster fuer Vor-/Nachname und PLZ/Ort,
   Woos Floats werden dafuer neutralisiert. */
form.woocommerce-checkout #customer_details .form-row {
  float: none;
  width: 100%;
  margin: 0 0 var(--s4);
  padding: 0;
}
@media (min-width: 560px) {
  form.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper,
  form.woocommerce-checkout #customer_details .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s4);
  }
  form.woocommerce-checkout #customer_details .form-row-wide,
  form.woocommerce-checkout #customer_details .form-row-full { grid-column: 1 / -1; }
}
/* "Konto erstellen" / "andere Lieferadresse": Checkbox-Zeilen mit Touchziel */
form.woocommerce-checkout .woocommerce-account-fields .form-row,
form.woocommerce-checkout #ship-to-different-address { margin-bottom: var(--s2); }
form.woocommerce-checkout #ship-to-different-address {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
}
form.woocommerce-checkout #ship-to-different-address label,
form.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}

/* ---- Die rechte Karte: Kopf ---- */
form.woocommerce-checkout > #order_review_heading {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-surface) var(--r-surface) 0 0;
  padding: clamp(20px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px) var(--s3);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-lead);
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: none;
}
/* ---- Die rechte Karte: Koerper ---- */
form.woocommerce-checkout > #order_review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-surface) var(--r-surface);
  box-shadow: var(--sh-card);
  padding: 0 clamp(18px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px);
  min-width: 0;
}
/* Abschnittsmarke "Deine Bestellung" INNERHALB der Karte (GM-Duplikat-ID) */
form.woocommerce-checkout #order_review #order_review_heading,
form.woocommerce-checkout #order_review > h3 {
  margin: var(--s5) 0 var(--s2);
  padding: var(--s5) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: none;
}

/* ---- Zahlarten: ruhige Zeilen, ein Logo-Slot, klarer Auswahlzustand ----
   DOM: li.wc_payment_method > input.input-radio + label + div.payment_box.
   Das li wird zum Flex-Container, die payment_box bricht per width:100%
   in die zweite Zeile. Selektoren mit .woocommerce-checkout davor treffen
   die Spezifitaet von woocommerce.css (graue #payment-Box, 1em-Padding). */
.woocommerce-checkout #payment,
#payment { background: none; border: 0; border-radius: 0; }
/* Leere Gateway-Container erzeugen sonst Geister-Abstaende */
#payment div:empty { display: none; }
.woocommerce-checkout #payment ul.payment_methods,
#payment ul.payment_methods {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s4) 0 0;
  border: 0;
  list-style: none;
  margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method,
#payment ul.payment_methods li.wc_payment_method {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 52px;
  margin: 0;
  padding: 0 14px 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--paper);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#payment ul.payment_methods li.wc_payment_method:hover { border-color: color-mix(in oklab, var(--ink) 22%, var(--line)); }
/* Auswahlzustand ohne JS: Lime-Rand + zarter Lime-Grund, Label wird fett */
#payment ul.payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--lime-deep);
  background: var(--lime-wash);
  box-shadow: inset 0 0 0 1px var(--lime-deep);
}
#payment ul.payment_methods li.wc_payment_method:has(input:checked) > label { font-weight: 700; }
#payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
  flex: none;
  order: 0;
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}
#payment ul.payment_methods li.wc_payment_method > label {
  order: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  margin: 0;
  padding: 8px 0 8px 12px;
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}
/* Gateway-Logos in EINEM einheitlichen Slot. Die Anbieter liefern sehr
   unterschiedliche Assets (Trustly breit mit Claim, Klarna mit pinker
   Flaeche, Karte fast schwarz) - ein weisser Slot mit Hairline bringt sie
   auf dieselbe Kante, ohne die Marken zu verfaelschen. */
#payment ul.payment_methods li.wc_payment_method > label img {
  flex: none;
  box-sizing: content-box;
  width: 44px;
  height: 24px;
  max-width: none;
  margin: 0;
  padding: 3px 5px;
  object-fit: contain;
  object-position: center;
  float: none;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
}
/* Gateway-Hinweise: leise Box unter der gewaehlten Zeile, volle Breite */
.woocommerce-checkout #payment div.payment_box,
#payment div.payment_box {
  order: 2;
  flex: 0 0 100%;
  width: 100%;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--ink-muted);
  font-size: var(--fs-micro);
  line-height: 1.5;
}
.woocommerce-checkout #payment div.payment_box::before,
#payment div.payment_box::before { content: none; display: none; }
#payment div.payment_box p { margin: 0; }
#payment div.payment_box p + p { margin-top: 8px; }
/* Mollie-Kartenfelder wie native Felder wirken lassen */
#payment .payment_box .mollie-component {
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--paper);
  padding: 2px 10px;
  margin-bottom: 10px;
}
#payment .payment_box .mollie-component-label { display: block; margin: 0 0 5px; font-size: var(--fs-micro); font-weight: 500; color: var(--ink); }
/* Mollie-Fusszeile ("Sichere Zahlungen bereitgestellt durch") lief in
   Fliesstextgroesse und schob das Logo auf eine eigene Zeile. */
#payment .payment_box .mollie-components ~ *,
#payment .payment_box [class*="secure"],
#payment .payment_box [id*="secure"] { font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-subtle); }
#payment .payment_box img[alt*="ollie"],
#payment .payment_box [class*="secure"] img,
#payment .payment_box [class*="secure"] svg { display: inline-block; height: 14px; width: auto; vertical-align: -2px; }

/* ---- Bestelluebersicht: entkernte Positionsliste mit Thumbnails ---- */
#order_review table.shop_table {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: none;
  margin: 0;
}
/* Der Tabellenkopf ("Produkt / Zwischensumme") ist neben der Abschnittsmarke
   redundant und macht die Karte buerokratisch - Spaltenlogik traegt das Layout. */
#order_review table.shop_table thead { display: none; }
#order_review table.shop_table th,
#order_review table.shop_table td {
  background: none;
  border: 0;
  padding: 12px 0;
  font-size: var(--fs-meta);
  vertical-align: top;
}
/* Positionszeile: Thumbnail absolut, Text laeuft daneben */
#order_review table.shop_table tbody tr.cart_item td { border-bottom: 1px solid var(--line-soft); }
#order_review table.shop_table tbody tr:last-child td { border-bottom: 0; }
/* Der Selektor traegt table.shop_table mit: die Basisregel fuer alle Zellen
   liegt eine Klasse hoeher und hat sonst das padding-left zurueckgesetzt
   (Text lief unter das Thumbnail). */
#order_review table.shop_table td.product-name {
  position: relative;
  width: auto;
  padding: 12px 10px 12px 64px;
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.38;
  color: var(--ink);
}
#order_review td.product-name .german-market-product-image {
  position: absolute;
  left: 0;
  top: 12px;
  width: 52px;
  margin: 0;
}
#order_review td.product-name .german-market-product-image img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-chip);
  background: var(--bg-soft);
  display: block;
}
#order_review td.product-name a { color: var(--ink); text-decoration: none; }
/* Menge als ruhiger Chip statt fettem Streu-Strong */
#order_review td.product-name strong.product-quantity {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-muted);
  white-space: nowrap;
  vertical-align: 1px;
}
/* Lieferzeit (German Market) als leise Metazeile */
#order_review td.product-name dl.variation { margin: 6px 0 0; font-size: var(--fs-micro); line-height: 1.45; color: var(--ink-subtle); }
#order_review td.product-name dl.variation dt,
#order_review td.product-name dl.variation dd { display: inline; margin: 0; font-weight: 500; }
/* Der Wert steckt in einem <p>: ohne inherit erbt er die 16,5px der Seite
   und stand dreimal groesser neben seinem eigenen Label. */
#order_review td.product-name dl.variation dd p { display: inline; margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }
#order_review td.product-name dl.variation dt { margin-right: 4px; }
/* Preisspalte: Betrag gross, PAngV-/MwSt-Zeilen darunter. Die Spalte bleibt
   schmal, damit der lange Produktname links Luft bekommt; die Pflichtzeilen
   duerfen dafuer umbrechen statt die Spalte aufzuziehen. */
#order_review table.shop_table td.product-total {
  width: 132px;
  padding: 12px 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-meta);
  color: var(--ink);
}
#order_review td.product-total .wgm-info,
#order_review td.product-total .wgm-tax,
#order_review .order-total .wgm-tax {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-nano);
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  color: var(--ink-subtle);
}
#order_review br.wgm-break { display: none; }
/* Summenblock */
#order_review tfoot th,
#order_review tfoot td {
  padding: 9px 0;
  font-size: var(--fs-meta);
  font-weight: 500;
  vertical-align: middle;
}
#order_review tfoot th { text-align: left; color: var(--ink-muted); }
#order_review tfoot td { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
#order_review tfoot tr:first-child th,
#order_review tfoot tr:first-child td { padding-top: var(--s4); border-top: 1px solid var(--line); }
#order_review .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
#order_review .woocommerce-shipping-methods li { list-style: none; }
#order_review .woocommerce-shipping-methods label { margin: 0; font-weight: 500; color: var(--ink); }
#order_review tr.order-total th,
#order_review tr.order-total td {
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--ink);
}
#order_review tr.order-total th { font-size: var(--fs-body); }

/* ---- Pflichtangaben (German Market): lesbare Checkbox-Zeilen ---- */
form.woocommerce-checkout #order_review .form-row,
form.woocommerce-checkout #order_review p.german-market-checkbox-p {
  margin: 0;
  padding: var(--s3) 0 0;
  width: 100%;
  float: none;
}
form.woocommerce-checkout #order_review .form-row:first-of-type { padding-top: var(--s5); margin-top: var(--s4); border-top: 1px solid var(--line); }
/* Block statt Grid: das Pflichtsternchen ist ein eigenes Geschwister nach
   dem Text-Span und rutschte im Grid auf eine eigene dritte Zeile. */
form.woocommerce-checkout #order_review label.woocommerce-form__label-for-checkbox {
  display: block;
  position: relative;
  min-height: auto;
  margin: 0;
  padding-left: 32px;
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-muted);
  cursor: pointer;
}
form.woocommerce-checkout #order_review label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
  flex: none;
}
form.woocommerce-checkout #order_review label.woocommerce-form__label-for-checkbox a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Kein Lime-Marker in Pflichttexten: das .mark-Muster ist Kampagnen-Sprache
     und liess die Rechtstexte wie fehlerhaft markiert aussehen. */
  background: none;
}
form.woocommerce-checkout #order_review .required { color: var(--lime-deep); font-weight: 700; }
/* Fehlerzustand der Pflicht-Checkbox sichtbar machen */
form.woocommerce-checkout #order_review .form-row.woocommerce-invalid label.woocommerce-form__label-for-checkbox { color: #B4232A; }
form.woocommerce-checkout #order_review .form-row.woocommerce-invalid input[type="checkbox"] { outline: 2px solid #B4232A; outline-offset: 2px; }

/* ---- Bestell-Button: siehe die EINE Primary-Definition im Button-Block oben ---- */
/* German Market zieht den Bestell-Button aus #payment heraus und laesst den
   Original-Container leer zurueck. Der brachte 65px Leere plus eine
   Trennlinie mitten in die Karte. :has() blendet ihn nur aus, solange er
   wirklich leer ist - kaeme der Button je zurueck, ist er sofort wieder da. */
#payment .form-row.place-order { padding: 0; margin: 0; border: 0; }
#payment .form-row.place-order:not(:has(button)):not(:has(input[type="submit"])) { display: none; }
.woocommerce-checkout #place_order {
  min-height: 54px;
  margin-top: var(--s5);
  font-size: var(--fs-body);
  letter-spacing: 0.01em;
  box-shadow: var(--sh-lime);
}
.woocommerce-checkout #place_order:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
/* PayPal-Smart-Buttons (ppcp) sitzen als eigener Block in der Karte */
.woocommerce-checkout .ppc-button-wrapper:not(:empty) { margin-top: var(--s4); }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .legal { font-size: var(--fs-micro); color: var(--ink-muted); }
.woocommerce-checkout .woocommerce-terms-and-conditions {
  margin-top: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--bg-soft);
  font-size: var(--fs-micro);
  line-height: 1.55;
}

/* ---- Kopfzeile der Kasse + Login-/Coupon-Hinweise ---- */
.woocommerce-checkout .alp-woo-title { margin-bottom: var(--s5); }
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-chip);
  color: var(--ink-muted);
  font-size: var(--fs-meta);
  padding: 13px 18px;
  margin-bottom: var(--s3);
}
/* Lime-Marker (.mark-Muster aus base.css) hat hier nichts verloren: unter
   Funktionslinks las er sich wie eine fehlerhafte Texthervorhebung. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--ink);
  font-weight: 700;
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Land / Region ist auf Deutschland festgelegt. Woo rendert dafuer ein
   Select mit einer Option und nimmt ihm per `country_to_state--single`
   jede Feldoptik - es stand als nackter Text zwischen zwei Feldern.
   Wir geben ihm die Feldform zurueck, aber in Readonly-Anmutung. */
form.woocommerce-checkout #customer_details .form-row select.country_to_state--single {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--bg-soft);
  background-image: none;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-meta);
  -webkit-appearance: none;
  appearance: none;
}
form.woocommerce-checkout #billing_country_field .woocommerce-input-wrapper > strong,
form.woocommerce-checkout #shipping_country_field .woocommerce-input-wrapper > strong,
form.woocommerce-checkout #billing_country_field > strong,
form.woocommerce-checkout #shipping_country_field > strong {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--bg-soft);
  color: var(--ink-muted);
  font-weight: 500;
  font-size: var(--fs-meta);
}
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login {
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--paper);
  box-shadow: var(--sh-card);
  padding: clamp(18px, 2.2vw, 26px);
  margin: 0 0 var(--s5);
}

/* ---- Trust-Abschluss unter der Karte (Hook: after_order_review) ---- */
/* Selektor mit form davor: die globale Listen-Regel des Themes macht aus
   jedem ul im Inhalt ein Grid mit Einzug - die Zeile stand sonst als drei
   untereinander zentrierte Zeilen unter der Karte. */
.woocommerce-checkout ul.alp-checkout-trust,
form.woocommerce-checkout ul.alp-checkout-trust {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  justify-content: center;
}
.woocommerce-checkout ul.alp-checkout-trust li { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: var(--fs-micro); font-weight: 500; white-space: nowrap; color: var(--ink-muted); }
.woocommerce-checkout ul.alp-checkout-trust svg { width: 14px; height: 14px; color: var(--lime-deep); flex: none; }

/* ---- Fehlerzustaende ---- */
.woocommerce-checkout .woocommerce-error,
.woocommerce-cart .woocommerce-error {
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
}
/* Woos Iconfont-Glyph im Fehlerkasten wird ohne geladene Schrift zu einem
   Ersatzzeichen mitten im Text; wir setzen stattdessen ein eigenes Zeichen. */
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-checkout .woocommerce-error li::before,
.woocommerce-cart .woocommerce-error li::before,
.woocommerce-account .woocommerce-error li::before { content: none !important; display: none !important; }
.woocommerce-checkout .woocommerce-error li,
.woocommerce-cart .woocommerce-error li,
.woocommerce-account .woocommerce-error li {
  position: relative;
  padding-left: 52px;
  border: 1px solid color-mix(in oklab, #B4232A 30%, #fff);
  background: color-mix(in oklab, #B4232A 7%, #fff)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4232A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E")
    no-repeat 20px center / 20px 20px;
  color: #8E2026;
  font-weight: 500;
}
.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid textarea,
.woocommerce-checkout .woocommerce-invalid select,
.woocommerce-checkout .woocommerce-invalid .select2-selection--single { border-color: #B4232A; }
.woocommerce-checkout .woocommerce-invalid label { color: #8E2026; }
.woocommerce-checkout .woocommerce-invalid input.input-text:focus,
.woocommerce-checkout .woocommerce-invalid textarea:focus,
.woocommerce-checkout .woocommerce-invalid select:focus {
  border-color: #B4232A;
  box-shadow: 0 0 0 3px color-mix(in oklab, #B4232A 16%, transparent);
}
.woocommerce-checkout .woocommerce-validated input.input-text { border-color: color-mix(in oklab, var(--green-ok) 55%, var(--line)); }
/* Woos BlockUI-Schleier entschaerfen, statt ihn zu ersetzen */
.woocommerce-checkout .blockUI.blockOverlay { background: rgba(255, 255, 255, .68) !important; opacity: 1 !important; }

@media (max-width: 1023px) {
  form.woocommerce-checkout { grid-template-columns: 1fr; }
  form.woocommerce-checkout > #customer_details,
  form.woocommerce-checkout > #order_review_heading,
  form.woocommerce-checkout > #order_review { grid-column: 1; grid-row: auto; }
  form.woocommerce-checkout > #order_review_heading { margin-top: var(--s5); }
}

/* =========================================================
   RWD-Hardening Warenkorb @ Handy: Positions-Tabelle wird
   zu Karten gestapelt (data-title-Labels), Coupon volle Breite.
   ========================================================= */
@media (max-width: 1099px) {
  .woocommerce-cart table.shop_table.cart thead { display: none; }
  .woocommerce-cart table.shop_table.cart,
  .woocommerce-cart table.shop_table.cart tbody,
  .woocommerce-cart table.shop_table.cart tr,
  .woocommerce-cart table.shop_table.cart td { display: block; width: 100%; }
  .woocommerce-cart tr.woocommerce-cart-form__cart-item {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-media);
    padding: 14px 14px 14px 104px;
    margin-bottom: 12px;
    min-height: 118px;
    background: var(--paper);
  }
  .woocommerce-cart tr.woocommerce-cart-form__cart-item td {
    border: 0;
    padding: 4px 0;
  }
  .woocommerce-cart td.product-thumbnail {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 76px;
    padding: 0;
  }
  .woocommerce-cart td.product-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: auto;
    padding: 0;
  }
  /* Leeres data-title-Label der Entfernen-Zelle unterdruecken (Streu-Doppelpunkt
     aus dem Woo-Responsive-Tabellen-CSS) */
  .woocommerce-cart table.shop_table tr td.product-remove::before { content: none !important; }
  /* Titel vom 44px-Entfernen-Ziel oben rechts freistellen */
  .woocommerce-cart td.product-name { padding-right: 56px; font-size: var(--fs-meta); }
  .woocommerce-cart td.product-name dl.variation { margin: 4px 0 0; font-size: var(--fs-micro); }
  .woocommerce-cart td.product-price,
  .woocommerce-cart td.product-quantity,
  .woocommerce-cart td.product-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .woocommerce-cart td.product-price::before,
  .woocommerce-cart td.product-quantity::before,
  .woocommerce-cart td.product-subtotal::before {
    content: attr(data-title);
    font-size: var(--fs-nano);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-subtle);
  }
  .woocommerce-cart table.shop_table td.actions { padding: var(--s3) 0 0; }
  .woocommerce-cart td.actions .coupon { display: grid; gap: 8px; }
  .woocommerce-cart table.shop_table td.actions .coupon .input-text { width: 100%; }
  .woocommerce-cart td.actions .coupon .button,
  .woocommerce-cart td.actions > .button { width: 100%; margin-top: 8px; }
  /* Touch-Ziele: Mengen-Stepper mindestens 44px */
  .woocommerce-cart .alp-qty__btn { width: 44px; min-height: 44px; }
  .woocommerce-cart .quantity .qty { min-height: 44px; }
}

/* RWD-Review-Fixes: Update-Button-Kontrast, Thumbnail-Mindestgroesse,
   Kasse-Versandzeile einzeilig */
.woocommerce-cart td.actions > .button:not(:disabled) {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
}
.woocommerce-cart td.product-thumbnail img { min-width: 64px; height: auto; }
#order_review tr.woocommerce-shipping-totals td,
#order_review .cart-subtotal td { white-space: nowrap; }

/* =========================================================
   Kasse @ Handy: Bestelluebersicht-Produktzeile einspaltig
   stapeln (Thumb, Name, Menge, darunter Preis-, PAngV- und
   MwSt-Zeilen untereinander statt gequetscht). Die Summen-
   Zeilen bleiben zweispaltig, nur die Produktzeile stapelt.
   ========================================================= */
@media (max-width: 640px) {
  /* Positionszeile stapelt: Thumbnail bleibt links stehen, Name und
     Preisblock laufen darunter auf derselben Textachse. Kein Quetschen
     der PAngV-/MwSt-Zeilen in eine 130px-Spalte. */
  #order_review table.shop_table tr.cart_item,
  #order_review table.shop_table tr.cart_item td { display: block; width: 100%; }
  #order_review table.shop_table tr.cart_item td.product-name {
    border-bottom: 0;
    padding: 12px 0 0 72px;
    min-height: 58px;
  }
  #order_review table.shop_table tr.cart_item td.product-total {
    padding: 8px 0 14px 72px;
    text-align: left;
    white-space: normal;
  }
  #order_review table.shop_table tr.cart_item td.product-total .wgm-info,
  #order_review table.shop_table tr.cart_item td.product-total .wgm-tax,
  #order_review table.shop_table tr.cart_item small { display: block; white-space: normal; }
  /* Summenzeilen bleiben zweispaltig; die Beschriftung bekommt einen festen
     Anteil, damit "Kostenloser Versand" und die MwSt-Zeile einzeilig bleiben */
  #order_review tfoot th { width: 42%; font-size: var(--fs-meta); }
  #order_review tfoot td { font-size: var(--fs-meta); }
  #order_review tr.order-total th { font-size: var(--fs-meta); }
  #order_review tr.woocommerce-shipping-totals td,
  #order_review .cart-subtotal td { white-space: normal; }
  .woocommerce-checkout #place_order { font-size: var(--fs-body); }
  /* iOS zoomt bei Feldern unter 16px in das Formular hinein */
  .woocommerce-checkout form .form-row input.input-text,
  .woocommerce-checkout form .form-row textarea,
  .woocommerce-checkout form .form-row select { font-size: var(--fs-body); }
}

/* =========================================================
   Danke-Seite (/kasse/bestellung-erhalten/). Reines CSS plus der
   Schritte-Block aus inc/woo-hooks.php. `woocommerce_thankyou` und
   `woocommerce_order_details_table` bleiben unangetastet, damit
   gateway-spezifische Ausgaben (z. B. Ueberweisungsdaten) weiter laufen.
   ========================================================= */
.woocommerce-order-received .entry-content > .woocommerce {
  max-width: 860px;
  margin-inline: auto;
}

/* Erfolgs-Banner mit Haekchen (Data-URI, kein Asset noetig) */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  position: relative;
  margin: 0 0 var(--s6);
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(24px, 3vw, 34px) clamp(80px, 8vw, 96px);
  border: 1px solid color-mix(in oklab, var(--green-ok) 26%, #fff);
  border-radius: var(--r-surface);
  background: color-mix(in oklab, var(--green-ok) 7%, #fff);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.woocommerce-order-received .woocommerce-thankyou-order-received::before {
  content: "";
  position: absolute;
  left: clamp(22px, 2.6vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green-ok) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 23px 23px no-repeat;
}

/* Bestell-Eckdaten als Info-Leiste. Bewusst Flex statt Grid: Woo liefert je
   nach Bestellung unterschiedlich viele Eintraege (E-Mail nur bei Gaesten),
   ein Raster mit fixer Spaltenzahl liess dann leere Zellen stehen. */
.woocommerce-order-received ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--s6);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--paper);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.woocommerce-order-received ul.woocommerce-order-overview::before,
.woocommerce-order-received ul.woocommerce-order-overview::after { content: none; display: none; }
.woocommerce-order-received ul.woocommerce-order-overview li:empty { display: none; }
.woocommerce-order-received ul.woocommerce-order-overview li {
  flex: 1 1 168px;
  list-style: none;
  margin: 0;
  padding: var(--s5) var(--s4);
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.woocommerce-order-received ul.woocommerce-order-overview li:first-child { border-left: 0; }
.woocommerce-order-received ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 7px;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.woocommerce-order-received ul.woocommerce-order-overview li strong .amount { font-size: var(--fs-body); }

/* "Wie geht es weiter" (Hook) */
.alp-next-steps {
  margin: 0 0 var(--s6);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--paper);
  box-shadow: var(--sh-card);
}
.alp-next-steps__title {
  margin: 0 0 var(--s5);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: none;
}
/* ol.-Selektor: `.entry-content ul, .entry-content ol` (base.css) setzt
   sonst Einzug und Schriftgroesse. */
.alp-next-steps ol.alp-next-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); font-size: inherit; }
.alp-next-steps ol.alp-next-steps__list > li.alp-next-steps__item { display: grid; grid-template-columns: 34px 1fr; gap: var(--s4); align-items: start; margin: 0; }
.alp-next-steps__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lime-soft);
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.alp-next-steps__body b { display: block; font-size: var(--fs-meta); font-weight: 700; line-height: 1.35; color: var(--ink); }
.alp-next-steps__body span { display: block; margin-top: 3px; font-size: var(--fs-meta); line-height: 1.55; color: var(--ink-muted); }
@media (min-width: 720px) {
  .alp-next-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
}

/* Gateway-Ausgaben (z. B. Ueberweisungsdaten) als eigene Karte */
.woocommerce-order-received .woocommerce-bacs-bank-details,
.woocommerce-order-received .mollie-instructions {
  margin: 0 0 var(--s6);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--bg-soft);
}
.woocommerce-order-received .woocommerce-bacs-bank-details h2,
.woocommerce-order-received .woocommerce-bacs-bank-details h3 { font-size: var(--fs-h4); margin: 0 0 var(--s3); max-width: none; }
.woocommerce-order-received ul.wc-bacs-bank-details { list-style: none; margin: 0; padding-left: 0; display: grid; gap: 6px; font-size: var(--fs-meta); }
.woocommerce-order-received ul.wc-bacs-bank-details li { list-style: none; font-variant-numeric: tabular-nums; }

/* Bestelldetails + Adressen als ruhige Karten mit entkernter Tabelle */
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
  margin: 0 0 var(--s6);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--paper);
  box-shadow: var(--sh-card);
}
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
  margin: 0 0 var(--s4);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: none;
}
.woocommerce-order-received table.woocommerce-table--order-details {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0;
  background: none;
}
.woocommerce-order-received table.woocommerce-table--order-details th,
.woocommerce-order-received table.woocommerce-table--order-details td {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 0;
  background: none;
  font-size: var(--fs-meta);
  font-weight: 500;
  vertical-align: top;
}
.woocommerce-order-received table.woocommerce-table--order-details thead th {
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  border-bottom: 1px solid var(--line);
}
.woocommerce-order-received table.woocommerce-table--order-details td.woocommerce-table__product-total,
.woocommerce-order-received table.woocommerce-table--order-details th:last-child,
.woocommerce-order-received table.woocommerce-table--order-details td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce-order-received table.woocommerce-table--order-details td a { color: var(--ink); font-weight: 500; text-decoration: none; }
.woocommerce-order-received table.woocommerce-table--order-details .product-quantity { color: var(--ink-muted); font-weight: 500; }
.woocommerce-order-received table.woocommerce-table--order-details tfoot th { color: var(--ink-muted); font-weight: 500; text-align: left; }
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; }
/* Die Gesamtsumme steht bei Woo ohne eigene Klasse in der Fusszeile; sie ist
   aber die einzige Zeile, an der German Market den MwSt-Hinweis ausgibt.
   Faellt der Hinweis weg, bleibt die Zeile schlicht - nichts bricht. */
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:has(.includes_tax) th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:has(.includes_tax) td {
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}
.woocommerce-order-received .wgm-info,
.woocommerce-order-received .wgm-tax,
.woocommerce-order-received .product-tax { display: block; font-size: var(--fs-micro); font-weight: 500; color: var(--ink-subtle); }
/* Woos Clearfix `.col2-set::before/::after` wird im Grid zu einem echten
   Grid-Item und schob die Rechnungsadresse eine Spalte nach rechts. */
.woocommerce-order-received .woocommerce-columns--addresses::before,
.woocommerce-order-received .woocommerce-columns--addresses::after { content: none; display: none; }
.woocommerce-order-received .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 640px) {
  .woocommerce-order-received .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; }
}
.woocommerce-order-received .woocommerce-columns--addresses .col-1,
.woocommerce-order-received .woocommerce-columns--addresses .col-2 { float: none; width: 100%; margin: 0; }
/* Woo umrahmt die Adresse als Box; im Karten-Kontext ist das eine Box zu viel */
.woocommerce-order-received .woocommerce-customer-details address,
.woocommerce-order-received address {
  font-style: normal;
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--ink-muted);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
}
.woocommerce-order-received .woocommerce-customer-details--phone,
.woocommerce-order-received .woocommerce-customer-details--email { margin-top: 6px; }

/* Gast ohne Login: Verifizierungs-/Login-Formular als ruhige Karte */
.woocommerce-order-received form.woocommerce-verify-email,
.woocommerce-order-received form.woocommerce-form-login {
  max-width: 520px;
  margin: 0 0 var(--s6);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--paper);
  box-shadow: var(--sh-card);
}
.woocommerce-order-received form .form-row { float: none; width: 100%; margin: 0 0 var(--s4); padding: 0; }
.woocommerce-order-received form .form-row:last-child { margin-bottom: 0; }
.woocommerce-order-received form button.button { width: 100%; }