/* =========================================================================
   THÜRINGER SCHWITZHÜTTE – WOOCOMMERCE GLASS-SKIN
   =========================================================================
   Bereinigte Portierung des bisherigen Customizer-CSS:
     - Duplikate zusammengeführt (Links, Mini-Cart-Buttons, Checkboxen)
     - globaler `opacity:1 !important`-Hotfix entfernt (im Theme nicht nötig)
     - Tokens aus main.css statt Hardcodes

   Wird nur auf WooCommerce-relevanten Seiten geladen (siehe inc/assets.php).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Typografie & Farben
   ------------------------------------------------------------------------- */
/* !important ist hier nötig: Elementors Widget-CSS (Cart/Checkout) lädt
   NACH dem Theme-CSS und bringt eigene Farben/Typografie über CSS-Variablen
   mit – genau deshalb hatte auch das alte Customizer-CSS diese !important. */
.woocommerce,
.woocommerce-page {
  font-family: var(--ts-font-body) !important;
  font-size: var(--ts-text-body) !important;
  font-weight: 400 !important;
  color: var(--ts-color-text) !important;
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce .cart_totals > h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--ts-font-heading) !important;
  font-weight: 700 !important;
  font-size: var(--ts-text-h3) !important;
  line-height: 1.25;
  color: var(--ts-color-text) !important;
}

.woocommerce p,
.woocommerce small,
.woocommerce label,
.woocommerce .woocommerce-Price-amount,
.woocommerce .amount,
.woocommerce .shipping-calculator-button,
.woocommerce .woocommerce-shipping-destination,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-info * {
  color: var(--ts-color-text) !important;
}

/* Links: weiß, Hover unterstrichen (kein Blau/Grau) */
.woocommerce a,
.woocommerce a:visited {
  color: var(--ts-color-text) !important;
  text-decoration: none !important;
}

.woocommerce a:hover {
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Erfolgsmeldungen sind wieder sichtbar (einheitlich gestylt, Sektion 14);
   nur die redundante "Zum Warenkorb hinzugefügt"-Meldung wird per PHP
   unterdrückt (wc_add_to_cart_message_html → leer). */

/* -------------------------------------------------------------------------
   2. Glass-Container (Cart, Checkout, Danke-Seite, Notices)
   ------------------------------------------------------------------------- */
.woocommerce .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce .e-cart__container .e-cart__column-start .woocommerce-cart-form,
.woocommerce .e-cart__container .e-cart__column-end .e-cart-totals,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout .e-checkout__order_review,
.woocommerce-checkout .e-checkout__order_review-2,
.woocommerce-checkout .e-coupon-box,
.woocommerce-checkout .e-woocommerce-login-section,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .shipping_address,
.woocommerce-order,
.woocommerce-customer-details address {
  position: relative;
  border-radius: var(--ts-radius-glass) !important;
  background: var(--ts-glass-surface) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--ts-glass-shadow) !important;
  padding: clamp(16px, 2.5vw, 28px) !important;
  max-width: 100%;
}

/* Glanz + Kanten der Container */
.woocommerce .woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce .woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce .e-cart__container .e-cart__column-start .woocommerce-cart-form::before,
.woocommerce .e-cart__container .e-cart__column-end .e-cart-totals::before,
.woocommerce-checkout #customer_details .col-1::before,
.woocommerce-checkout .e-checkout__order_review::before,
.woocommerce-checkout .e-checkout__order_review-2::before,
.woocommerce-checkout .e-coupon-box::before,
.woocommerce-checkout .e-woocommerce-login-section::before,
.woocommerce-checkout .woocommerce-additional-fields::before,
.woocommerce-checkout .shipping_address::before,
.woocommerce-order::before,
.woocommerce-customer-details address::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--ts-glass-sheen);
  mix-blend-mode: screen;
}

.woocommerce .woocommerce-notices-wrapper .woocommerce-error::after,
.woocommerce .woocommerce-notices-wrapper .woocommerce-info::after,
.woocommerce .e-cart__container .e-cart__column-start .woocommerce-cart-form::after,
.woocommerce .e-cart__container .e-cart__column-end .e-cart-totals::after,
.woocommerce-checkout #customer_details .col-1::after,
.woocommerce-checkout .e-checkout__order_review::after,
.woocommerce-checkout .e-checkout__order_review-2::after,
.woocommerce-checkout .e-coupon-box::after,
.woocommerce-checkout .e-woocommerce-login-section::after,
.woocommerce-checkout .woocommerce-additional-fields::after,
.woocommerce-checkout .shipping_address::after,
.woocommerce-order::after,
.woocommerce-customer-details address::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset;
}

/* Coupon-/Login-Hinweisboxen im Checkout */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  background: var(--ts-glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--ts-radius-glass) !important;
  color: var(--ts-color-text) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px var(--glass-inner) inset;
  padding: 16px 18px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a {
  color: var(--ts-color-text);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   3. Warenkorb: Layout & Tabelle
   ------------------------------------------------------------------------- */
.woocommerce .e-cart__container,
.woocommerce .e-cart__container * {
  min-width: 0;
}

.woocommerce .e-cart__container {
  max-width: 100%;
}

@media (max-width: 767px) {
  .woocommerce .e-cart__container {
    flex-wrap: wrap;
  }
  .woocommerce .e-cart__container .e-cart__column-start,
  .woocommerce .e-cart__container .e-cart__column-end {
    width: 100% !important;
  }
}

/* Elementors Cart-Widget malt seine "Abschnitte" standardmäßig WEISS
   (--sections-background-color: #fff) – das war die weiße Box im Warenkorb.
   Hart neutralisieren, das Glas kommt vom umgebenden Container. */
.elementor-widget-woocommerce-cart .e-cart-section {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.elementor-widget-woocommerce-cart .woocommerce table.cart img {
  display: none;
}

.elementor-widget-woocommerce-cart .woocommerce .cart td::before {
  color: var(--ts-color-text) !important;
}

/* Tabelle bewusst TRANSPARENT: Der umgebende Container ist bereits eine
   Glass-Karte – "Glas in Glas" wirkte unruhig (Kundenfeedback). */
.woocommerce-cart-form .shop_table {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ts-color-text);
}

@media (min-width: 768px) {
  .woocommerce-cart-form .shop_table {
    table-layout: auto !important;
  }
}

@media (max-width: 767px) {
  .woocommerce-cart-form .shop_table {
    table-layout: fixed !important;
  }
}

.woocommerce-cart-form .shop_table thead th {
  font-family: var(--ts-font-heading) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--ts-color-text) !important;
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
  white-space: nowrap;
}

.woocommerce-cart-form .shop_table thead th.product-name {
  white-space: normal;
}

.woocommerce-cart-form .shop_table th,
.woocommerce-cart-form .shop_table td {
  background: transparent !important;
  color: var(--ts-color-text) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  /* Elementor setzt padding-inline: 0 20px – Text klebte an der Kante */
  padding: 16px 14px !important;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none; /* keine Trennung mitten im Wort ("Thürin-ger") */
}

/* Vorschaubild-Spalte komplett ausblenden (Elementor zeigt img sonst mit
   display:block wieder an – deren CSS lädt nach unserem) */
.elementor-widget-woocommerce-cart .woocommerce table.cart img,
.woocommerce-cart-form .shop_table td.product-thumbnail,
.woocommerce-cart-form .shop_table th.product-thumbnail {
  display: none !important;
}

/* Anzahl-Spalte ausblenden (Buchungen sind immer Menge 1) */
.woocommerce-cart-form .shop_table td.product-quantity,
.woocommerce-cart-form .shop_table th.product-quantity {
  display: none !important;
}

/* Graue Variablen-Fallbacks des Elementor-Cart-Widgets neutralisieren */
.elementor-widget-woocommerce-cart .e-cart-content,
.elementor-widget-woocommerce-cart .woocommerce #shipping_method li label,
.elementor-widget-woocommerce-cart .woocommerce table.cart td span,
.elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table th,
.elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table td .woocommerce-Price-amount {
  color: var(--ts-color-text) !important;
}

/* Warenkorbübersicht: Inhalt sicher in der Glass-Karte halten.
   Elementor blendet die th-Labels aus und rendert sie als td::before
   (data-title) mit float links – wir nutzen genau dieses Muster:
   Label links (fett, weiß), Wert rechts, Zeile über die volle Breite. */
.woocommerce .e-cart__container .e-cart-totals {
  overflow: hidden;
}

.woocommerce .cart_totals table.shop_table {
  width: 100% !important;
  table-layout: auto;
}

.elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table th {
  display: none;
}

.elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table td {
  display: block;
  width: 100%;
  text-align: right;
  overflow-wrap: break-word; /* NICHT "anywhere" – bricht sonst pro Buchstabe */
}

/* Elementor floatet das Label (data-title) mit width:100% – der Inhalt
   daneben bekam dadurch null Breite und stapelte Buchstabe für Buchstabe.
   Als normaler Block fließt alles sauber darunter. */
.elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table td::before {
  float: none !important;
  display: block;
  width: 100% !important;
  text-align: left;
  margin-bottom: 6px;
  color: var(--ts-color-text) !important;
  font-weight: 700;
}

/* Versandart: volle Breite, rechtsbündig unter dem Label */
.woocommerce .cart_totals ul#shipping_method,
.woocommerce .cart_totals ul#shipping_method li {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0;
  padding: 0;
  text-align: right !important;
}

.woocommerce .cart_totals ul#shipping_method li label {
  display: inline !important;
  width: auto !important;
  white-space: normal !important;
  color: var(--ts-color-text) !important;
}

/* Spaltenbreiten */
.woocommerce-cart-form .shop_table th.product-remove,
.woocommerce-cart-form .shop_table td.product-remove { width: 54px; }
.woocommerce-cart-form .shop_table th.product-price,
.woocommerce-cart-form .shop_table td.product-price { width: 120px; }
.woocommerce-cart-form .shop_table th.product-quantity,
.woocommerce-cart-form .shop_table td.product-quantity { width: 100px; }
.woocommerce-cart-form .shop_table th.product-subtotal,
.woocommerce-cart-form .shop_table td.product-subtotal { width: 160px; }

/* Entfernen-Button (X) */
.woocommerce-cart-form .shop_table td.product-remove {
  text-align: center !important;
  vertical-align: middle !important;
  padding-inline: 10px !important;
}

.woocommerce-cart-form .shop_table td.product-remove a.remove {
  position: static !important;
  transform: none !important;
  float: none !important;
  margin: 0 auto !important;
}

/* Elementor-Scope nötig: deren ".woocommerce .remove"-Regel trägt selbst
   !important (Farbe #000) und lädt nach uns – höhere Spezifität gewinnt. */
.woocommerce a.remove,
.elementor-widget-woocommerce-cart .woocommerce a.remove,
.elementor-widget-woocommerce-cart .woocommerce .remove {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

/* Summen-Tabellen (Cart Totals + Checkout Review) immer weiß */
.woocommerce .cart_totals th,
.woocommerce .cart_totals td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table small,
.woocommerce-checkout-review-order-table strong,
.woocommerce-checkout-review-order-table .amount,
.woocommerce-checkout-review-order-table .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table .woocommerce-Price-amount bdi {
  color: var(--ts-color-text) !important;
}

/* -------------------------------------------------------------------------
   4. Formularfelder (Checkout & Cart) – Glass
   ------------------------------------------------------------------------- */
/* !important nötig: Elementors Cart-/Checkout-Widget-CSS lädt NACH dem
   Theme-CSS und setzt #f9fafa-Hintergründe + graue Schrift auf Felder. */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0.75em 1em !important;
  border-radius: var(--ts-radius-input) !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--ts-glass-surface) !important;
  background-clip: padding-box;
  color: var(--ts-color-text) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px var(--glass-inner) inset !important;
  outline: none !important;
  transition: border-color var(--ts-transition), background var(--ts-transition), box-shadow var(--ts-transition);
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  color: var(--ts-color-text) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
}

.woocommerce select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6em;
}

.woocommerce select::-ms-expand {
  display: none;
}

.woocommerce select option {
  background: rgba(20, 20, 20, 0.95);
  color: #fff;
}

/* Bestellhinweise-Textarea */
.woocommerce-checkout .woocommerce-additional-fields textarea {
  min-height: 110px;
  resize: vertical;
}

/* -------------------------------------------------------------------------
   5. Checkboxen & Radios (Ship-to, Germanized, Zahlungsarten)
   ------------------------------------------------------------------------- */
.woocommerce-checkout #ship-to-different-address {
  margin: 22px 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.woocommerce-checkout #ship-to-different-address label {
  display: flex !important;
  align-items: center !important;
  gap: 14px;
  color: var(--ts-color-text) !important;
  font-family: var(--ts-font-heading) !important;
  font-weight: 700 !important;
  font-size: 34px !important;
  line-height: 1.1 !important;
}

/* Elementor färbt den Text im Checkbox-Label über den SPAN grau
   (--sections-checkboxes-color: #69727d) – explizit weiß setzen. */
.woocommerce-checkout #ship-to-different-address label span,
.woocommerce-checkout .woocommerce-form__label-for-checkbox span {
  color: var(--ts-color-text) !important;
}

.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Germanized-Checkbox-Wrapper transparent, Text weiß */
.wc-gzd-checkbox-placeholder,
.wc-gzd-checkbox-placeholder .form-row {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}

.woocommerce-checkout .woocommerce-form__label.checkbox,
.woocommerce-checkout .woocommerce-gzd-legal-checkbox-text,
.woocommerce-checkout .woocommerce-gzd-nutzungsbedingungen-checkbox-text,
.wc-gzd-checkbox-placeholder,
.wc-gzd-checkbox-placeholder * {
  color: var(--ts-color-text) !important;
}

.woocommerce-checkout .woocommerce-form__label.checkbox a {
  color: var(--ts-color-text) !important;
  text-decoration: underline !important;
}

/* Checkboxen im Glass-Look */
.woocommerce-checkout #ship-to-different-address input[type="checkbox"],
.woocommerce-checkout input.woocommerce-form__input-checkbox,
.woocommerce-checkout input.input-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 auto;
  border-radius: var(--ts-radius-check) !important;
  border: 1px solid var(--glass-border) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px var(--glass-inner) inset !important;
  display: inline-grid !important;
  place-items: center !important;
  position: relative !important;
  margin-right: 10px !important;
  cursor: pointer;
}

.woocommerce-checkout #ship-to-different-address input[type="checkbox"]::after,
.woocommerce-checkout input.woocommerce-form__input-checkbox::after,
.woocommerce-checkout input.input-checkbox::after {
  content: "";
  width: 7px;
  height: 12px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}

.woocommerce-checkout #ship-to-different-address input[type="checkbox"]:checked::after,
.woocommerce-checkout input.woocommerce-form__input-checkbox:checked::after,
.woocommerce-checkout input.input-checkbox:checked::after {
  transform: rotate(45deg) scale(1);
}

/* Radios (Zahlungsarten) im Glass-Look */
.woocommerce-checkout input.input-radio {
  -webkit-appearance: none;
  appearance: none;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 auto;
  border-radius: 50% !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--ts-glass-surface) !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px var(--glass-inner) inset !important;
  position: relative !important;
  margin-right: 10px !important;
  cursor: pointer;
}

.woocommerce-checkout input.input-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}

.woocommerce-checkout input.input-radio:checked::after {
  transform: translate(-50%, -50%) scale(1);
}

/* -------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-proceed-to-checkout a.checkout-button,
.woocommerce .coupon .button,
#place_order {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
  text-transform: uppercase;
  border-radius: var(--ts-radius-btn) !important;
  padding: 13px 30px !important; /* Pill-Look wie die CTAs */
  color: var(--ts-color-text) !important;
  text-decoration: none !important;
  font-family: var(--ts-font-body);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  transition: transform var(--ts-transition), box-shadow var(--ts-transition), background var(--ts-transition);
}

.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce input.button::before,
.woocommerce #respond input#submit::before,
.wc-proceed-to-checkout a.checkout-button::before,
.woocommerce .coupon .button::before,
#place_order::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%),
    radial-gradient(60% 80% at 100% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
}

@media (hover: hover) {
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce input.button:hover,
  .woocommerce #respond input#submit:hover,
  .wc-proceed-to-checkout a.checkout-button:hover,
  .woocommerce .coupon .button:hover,
  #place_order:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.25),
      0 1px 0 rgba(255, 255, 255, 0.07) inset,
      0 0 0 1px rgba(255, 255, 255, 0.10) inset !important;
  }
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.wc-proceed-to-checkout a.checkout-button:focus-visible,
#place_order:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   7. Checkout: Bestellübersicht ("Deine Bestellung")
   ------------------------------------------------------------------------- */
/* Auf kleinen Screens horizontal scrollen statt Spalten zu zerquetschen */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout #order_review table.shop_table {
  width: 100% !important;
  min-width: 520px;
  max-width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  table-layout: auto !important;
  background: var(--ts-glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  box-shadow: var(--ts-glass-shadow) !important;
  color: var(--ts-color-text) !important;
  margin: var(--sections-margin, 24px 0);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  background: transparent !important;
  color: var(--ts-color-text) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 14px 18px;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  vertical-align: top;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: 18px;
  border-top: none !important;
  white-space: nowrap;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
  white-space: normal;
  padding-right: 20px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout .woocommerce-checkout-review-order-table th.product-total {
  text-align: right;
  white-space: nowrap;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name *,
.woocommerce-checkout .woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper,
.woocommerce-checkout .woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper * {
  color: var(--ts-color-text) !important;
  hyphens: none !important;
}

/* Produktbild in der Bestellübersicht ausblenden */
table.woocommerce-checkout-review-order-table tr.wc-gzd-cart-item-has-thumbnail
.wc-gzd-cart-item-name-wrapper .wc-gzd-cart-item-thumbnail img {
  display: none !important;
}

/* -------------------------------------------------------------------------
   8. Zahlung & Versand
   ------------------------------------------------------------------------- */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment .payment_box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ts-color-text) !important;
  padding: 0;
}

.woocommerce-checkout #shipping_method label,
.woocommerce-checkout .woocommerce-shipping-methods label,
.woocommerce-checkout .wc_payment_method label,
.woocommerce-checkout #payment label,
.woocommerce-checkout #payment .payment_box * {
  color: var(--ts-color-text) !important;
}

.woocommerce-checkout .place-order {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 0;
  margin-top: 1em;
}

#place_order {
  width: var(--purchase-button-width, auto);
  float: none;
  min-height: auto;
}

/* "Versand nach …"-Zeile ausblenden (wie bisher, Germanized) */
p.woocommerce-shipping-destination {
  display: none;
}

/* -------------------------------------------------------------------------
   9. Select2 (Länderauswahl) – Glass
   ------------------------------------------------------------------------- */
.select2-container--default .select2-selection--single {
  min-height: 48px !important;
  padding: 0.55em 2.4em 0.55em 1em !important;
  border-radius: var(--ts-radius-input) !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--ts-glass-surface) !important;
  color: var(--ts-color-text) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px var(--glass-inner) inset !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ts-color-text) !important;
  line-height: 1.4 !important;
  font-size: 18px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #fff transparent transparent transparent !important;
}

.select2-dropdown {
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--ts-radius-input) !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(25,25,25,.95), rgba(45,45,45,.85)) !important;
  color: var(--ts-color-text) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

.select2-results__option {
  padding: 0.6em 1em !important;
  font-size: 16px !important;
  color: #fff !important;
  background: transparent !important;
}

.select2-results__option--highlighted {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.select2-results__option[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  background: rgba(30, 30, 30, 0.85) !important;
  color: #fff !important;
  padding: 0.5em 0.75em !important;
  outline: none !important;
}

/* -------------------------------------------------------------------------
   10. Mini-Cart (Elementor Side-Cart, Bestand)
   ------------------------------------------------------------------------- */
.elementor-menu-cart__footer-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.elementor-menu-cart__footer-buttons .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  isolation: isolate;
  overflow: hidden;
  text-transform: uppercase;
  border-radius: var(--ts-radius-btn);
  padding: 13px 30px;
  color: #fff !important;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform var(--ts-transition), box-shadow var(--ts-transition), background var(--ts-transition);
}

.elementor-menu-cart__footer-buttons .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%),
    radial-gradient(60% 80% at 100% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
}

@media (hover: hover) {
  .elementor-menu-cart__footer-buttons .elementor-button:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.25),
      0 1px 0 rgba(255, 255, 255, 0.07) inset,
      0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  }
}

.elementor-menu-cart__main small {
  color: #fff;
}

/* -------------------------------------------------------------------------
   11. Produkt-Einzelseite (Gutschein)
   ------------------------------------------------------------------------- */
.single-product div.product {
  max-width: var(--ts-container);
  margin-inline: auto;
  padding: var(--ts-space-lg) var(--ts-gutter) var(--ts-space-xl);
}

/* Floats einschließen (Galerie/Kaufbox floaten links/rechts) */
.single-product div.product::after {
  content: "";
  display: block;
  clear: both;
}

/* Zwei-Spalten-Layout explizit (nicht auf Woo-Core-CSS verlassen) */
@media (min-width: 768px) {
  .single-product div.product .woocommerce-product-gallery {
    float: left;
    width: 48%;
  }
  .single-product div.product .summary {
    float: right;
    width: 48%;
  }
}

@media (max-width: 767px) {
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary {
    float: none;
    width: 100%;
  }
}

/* Galerie: Bild als Glass-Karte */
.single-product .woocommerce-product-gallery {
  border-radius: var(--ts-radius-card);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--ts-glass-shadow);
}

.single-product .woocommerce-product-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

/* Zusammenfassung (Titel, Preis, Kaufen) als Glass-Karte */
.single-product div.product .summary {
  position: relative;
  border-radius: var(--ts-radius-card);
  background: var(--ts-glass-surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--ts-glass-shadow);
  padding: clamp(20px, 3vw, 36px);
}

.single-product .product_title {
  font-family: var(--ts-font-heading);
  font-size: var(--ts-text-h2);
  line-height: var(--ts-leading-h2);
  color: var(--ts-color-text);
  margin-bottom: 0.4em;
}

.single-product div.product .summary .price {
  font-family: var(--ts-font-heading);
  font-size: var(--ts-text-price);
  font-weight: 600;
  color: var(--ts-color-text) !important;
  margin-bottom: 0.4em;
}

.single-product div.product .summary .price del {
  font-size: var(--ts-text-price-old);
  color: var(--ts-color-text-muted);
  margin-right: 0.3em;
}

.single-product div.product .summary .price ins {
  text-decoration: none;
}

/* Variationen-Tabelle (z. B. Gutschein-Wert) */
.single-product table.variations th,
.single-product table.variations td {
  background: transparent;
  color: var(--ts-color-text);
  border: 0;
  padding: 6px 8px 6px 0;
  vertical-align: middle;
}

.single-product table.variations label {
  font-weight: 700;
}

.single-product .reset_variations {
  font-size: var(--ts-text-small);
}

/* Menge + Kaufen-Button in einer Reihe */
.single-product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
  margin-top: 1em;
}

.single-product form.cart .quantity {
  flex: 0 0 auto;
}

.single-product form.cart .quantity .qty {
  width: 90px;
  text-align: center;
}

.single-product form.cart table.variations,
.single-product form.cart .woocommerce-variation {
  flex: 1 1 100%;
}

/* Sale-Badge als grüne Pille */
.single-product span.onsale {
  position: absolute;
  top: 1em;
  left: 1em;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--ts-color-accent);
  color: #fff;
  font-family: var(--ts-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* Germanized-Hinweise (MwSt., Lieferzeit) dezent */
.single-product .wc-gzd-additional-info,
.single-product .shipping-costs-info,
.single-product .tax-info,
.single-product .delivery-time-info {
  color: var(--ts-color-text-muted) !important;
  font-size: var(--ts-text-small);
}

/* Beschreibung als eigene Glass-Sektion.
   WICHTIG: clear:both – sonst legt sie sich über die gefloatete
   Galerie/Kaufbox (war der "alles verschwommen"-Bug). */
.ts-product-description {
  clear: both;
  max-width: var(--ts-container);
  margin: var(--ts-space-lg) auto 0;
  border-radius: var(--ts-radius-card);
  padding: clamp(20px, 3vw, 36px);
}

.ts-product-description > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .single-product div.product .summary {
    margin-top: 1.5em;
  }
}

/* -------------------------------------------------------------------------
   12. Checkout-Hinweise
   ------------------------------------------------------------------------- */
/* Hinweis unter dem Telefonfeld (serverseitig gerendert, inc/woocommerce/checkout.php) */
.ts-phone-note,
.plain-phone-text {
  display: block;
  color: var(--ts-color-text) !important;
  font-size: var(--ts-text-small);
  font-weight: 400;
  margin-top: 10px;
}

/* -------------------------------------------------------------------------
   13. Elementor Cart-/Checkout-Widgets – kompletter Feinschliff
   ------------------------------------------------------------------------- */

/* --- 13.1 Fehlermeldungen & Hinweise -------------------------------------- */
.woocommerce ul.woocommerce-error {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 16px 18px 16px 22px;
  border-left: 4px solid var(--ts-color-danger) !important;
}

.woocommerce ul.woocommerce-error li {
  color: var(--ts-color-text);
  margin: 0;
}

.woocommerce ul.woocommerce-error li + li {
  margin-top: 0.5em;
}

/* --- 13.2 Warenkorb-Widget ------------------------------------------------ */
/* Abschnitts-Überschriften ("Warenkorb", "Warenkorb-Summe") */
.elementor-widget-woocommerce-cart .e-cart-section h2,
.woocommerce .cart_totals > h2 {
  margin: 0 0 0.75em;
}

/* Gutschein-Zeile: Feld + Button kompakt nebeneinander.
   Elementor teilt die Zeile in zwei weit auseinanderliegende Spalten
   (.coupon-col-start flex:2 + Abstand) – wird hier neutralisiert. */
.woocommerce-cart-form .coupon {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  max-width: 560px;
}

.woocommerce-cart-form .coupon .coupon-col-start,
.woocommerce-cart-form .coupon .coupon-col-end {
  flex: 0 0 auto !important;
  padding: 0 !important;
  display: flex;
  align-items: stretch;
}

.woocommerce-cart-form .coupon .coupon-col-start {
  flex: 1 1 220px !important;
}

.woocommerce-cart-form .coupon .input-text,
.woocommerce-cart-form .coupon #coupon_code {
  width: 100% !important;
  margin: 0 !important;
}

.woocommerce-cart-form .coupon .button {
  float: none !important;
  width: auto !important;
  white-space: nowrap; /* "Gutschein anwenden" nicht umbrechen */
  margin: 0 !important;
}

.woocommerce-cart-form td.actions {
  padding-top: 1em;
}

.woocommerce-cart-form td.actions > .button {
  margin-top: 10px;
}

/* Deaktivierter "Warenkorb aktualisieren"-Button */
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Fixierte Menge bei Buchungen */
.wbt-fixed-qty {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  border-radius: var(--ts-radius-input);
  border: 1px solid var(--glass-border);
  background: var(--ts-glass-surface);
  font-weight: 700;
}

/* Mengen-Eingabe */
.woocommerce .quantity .qty {
  width: 80px !important;
  text-align: center;
}

/* Produktname im Warenkorb */
.woocommerce-cart-form .shop_table td.product-name {
  font-weight: 700;
}

.woocommerce-cart-form .shop_table td.product-name small,
.woocommerce-cart-form .shop_table td.product-name p {
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

/* Warenkorb-Summe: Tabelle transparent, Gesamtsumme betont */
.woocommerce .cart_totals table.shop_table {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 12px 0;
}

.woocommerce .cart_totals table.shop_table tr:last-child th,
.woocommerce .cart_totals table.shop_table tr:last-child td {
  border-bottom: 0 !important;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  font-family: var(--ts-font-heading);
  font-size: 22px;
  font-weight: 700;
}

/* Versandarten-Liste */
.woocommerce ul#shipping_method,
.woocommerce ul.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce ul#shipping_method li,
.woocommerce ul.woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}

/* "Weiter zur Kasse" volle Breite */
.woocommerce .wc-proceed-to-checkout {
  padding-top: 1em;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  width: 100%;
}

/* --- 13.3 Checkout-Widget ------------------------------------------------- */
/* Überschriften & Abstände */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  margin: 0 0 0.75em;
}

.woocommerce-checkout #order_review_heading {
  margin-top: 1em;
}

/* Formularzeilen */
.woocommerce-checkout .form-row {
  margin-bottom: 1em;
}

.woocommerce-checkout .form-row label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.woocommerce form .form-row .required {
  color: var(--ts-color-accent) !important;
  text-decoration: none;
}

/* Validierung: dezente Farb-Ränder statt Theme-Defaults */
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--ts-color-danger) !important;
  box-shadow: 0 0 0 1px var(--ts-color-danger) inset !important;
}

.woocommerce form .form-row.woocommerce-validated .input-text,
.woocommerce form .form-row.woocommerce-validated select {
  border-color: rgba(93, 153, 114, 0.7) !important;
}

/* Zahlungsarten-Liste */
.woocommerce-checkout ul.wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
  padding: 0.75em 0;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method + li.wc_payment_method {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  cursor: pointer;
}

.woocommerce-checkout #payment .payment_box {
  margin: 0.5em 0 0 32px;
  font-size: var(--ts-text-small);
}

.woocommerce-checkout #payment .payment_box p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Datenschutz-Hinweis & Kleingedrucktes */
.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p {
  font-size: var(--ts-text-small);
  color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Elementor-Checkout-Widget: graue Variablen-Fallbacks neutralisieren ---
   (Quelle: widget-woocommerce-checkout-page.min.css, lädt nach dem Theme) */
.elementor-widget-woocommerce-checkout-page,
.elementor-widget-woocommerce-checkout-page .e-description,
.elementor-widget-woocommerce-checkout-page .e-checkout-secondary-title,
.elementor-widget-woocommerce-checkout-page .e-coupon-anchor-description,
.elementor-widget-woocommerce-checkout-page .e-checkout-message,
.woocommerce-checkout .form-row > span {
  color: var(--ts-color-text) !important;
}

/* Login-Formular im Checkout: Elementor gibt ihm weißen Hintergrund */
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout.login,
.woocommerce-checkout form.login {
  background: transparent !important;
  border: 0 !important;
  color: var(--ts-color-text) !important;
}

/* "Kaufen"-Button volle Breite */
.woocommerce-checkout #place_order {
  width: 100%;
  margin-top: 1em;
}

/* --- 13.4 Danke-Seite (Bestellung erhalten) -------------------------------- */
.woocommerce-order p.woocommerce-notice,
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--ts-font-heading);
  font-size: var(--ts-text-h3);
  font-weight: 700;
  color: var(--ts-color-text) !important;
}

.woocommerce ul.woocommerce-order-overview {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em 2.5em;
  margin: 1.5em 0;
  padding: 0;
}

.woocommerce ul.woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--ts-text-small);
  color: var(--ts-color-text-muted);
  text-transform: none;
}

.woocommerce ul.woocommerce-order-overview li strong {
  font-size: var(--ts-text-body);
  color: var(--ts-color-text);
}

/* Bestelldetails-Tabelle auf der Danke-Seite */
.woocommerce .woocommerce-order-details table.shop_table {
  width: 100%;
  background: transparent !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none !important;
}

.woocommerce .woocommerce-order-details table.shop_table th,
.woocommerce .woocommerce-order-details table.shop_table td {
  background: transparent !important;
  color: var(--ts-color-text) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 12px 16px;
}

.woocommerce .woocommerce-order-details table.shop_table tfoot tr:last-child th,
.woocommerce .woocommerce-order-details table.shop_table tfoot tr:last-child td {
  border-bottom: 0 !important;
  font-family: var(--ts-font-heading);
  font-size: 20px;
}

/* -------------------------------------------------------------------------
   14. WooCommerce-Meldungen – einheitlicher Glass-Look (FINAL)
   Deckt beide Markups ab: klassische Notices (.woocommerce-error/-info/
   -message) UND die Banner-Notices von WooCommerce 8+ (.wc-block-
   components-notice-banner). Steht bewusst am Dateiende und gewinnt damit
   gegen frühere Regeln (inkl. Glanz-Pseudoelemente) und Elementors
   Notices-CSS (helle Hintergründe, farbige Top-Border, Icon-::before).
   ------------------------------------------------------------------------- */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
div.wc-block-components-notice-banner {
  position: relative;
  list-style: none !important;
  margin: 0 0 1.5em !important;
  padding: 16px 20px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(26, 43, 32, 0.55) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 4px solid var(--ts-color-accent) !important;
  border-radius: 16px !important;
  color: var(--ts-color-text) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
  font-family: var(--ts-font-body) !important;
  font-size: var(--ts-text-body) !important;
}

.woocommerce-error,
div.wc-block-components-notice-banner.is-error {
  border-left-color: var(--ts-color-danger) !important;
}

/* Woo-Icons (::before) und unsere Glanz-Ebenen (::after) deaktivieren –
   sie kollidierten und machten die Meldungen unleserlich. */
.woocommerce-error::before,
.woocommerce-error::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-message::before,
.woocommerce-message::after {
  display: none !important;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  color: var(--ts-color-text) !important;
}

.woocommerce-error li + li {
  margin-top: 0.5em !important;
}

/* Banner-Variante: Icon + Inhalt nebeneinander, alles weiß */
div.wc-block-components-notice-banner {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}

div.wc-block-components-notice-banner > svg {
  background-color: var(--ts-color-accent) !important;
  fill: #fff !important;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 2px;
}

div.wc-block-components-notice-banner.is-error > svg {
  background-color: var(--ts-color-danger) !important;
}

div.wc-block-components-notice-banner > .wc-block-components-notice-banner__content,
div.wc-block-components-notice-banner > .wc-block-components-notice-banner__content * {
  color: var(--ts-color-text) !important;
}

/* Buttons/Links in Meldungen kompakt rechts */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
div.wc-block-components-notice-banner .wc-forward {
  float: right;
  margin-left: 1em !important;
  padding: 8px 18px !important;
  color: var(--ts-color-text) !important;
}

/* -------------------------------------------------------------------------
   15. Bestellübersicht: Buchungsdetails untereinander stapeln
   Germanized macht .wc-gzd-cart-item-name-wrapper zum Flex-Container –
   Name, Zeitraum, Düfte und Holz standen dadurch nebeneinander gequetscht.
   ------------------------------------------------------------------------- */
.woocommerce table .wc-gzd-cart-item-name-wrapper,
.woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper {
  display: block !important;
}

.woocommerce-checkout-review-order-table td.product-name p,
.woocommerce-cart-form .shop_table td.product-name p {
  display: block !important;
  margin: 2px 0 !important;
}

.woocommerce-checkout-review-order-table td.product-name .product-quantity {
  display: block;
  margin-top: 6px;
}

/* -------------------------------------------------------------------------
   16. Kasse – Mobil-Optimierung
   Elementor begrenzt Zellen der Bestellübersicht hart (product-name auf
   150px, Versand-Zelle auf 70px) und unser min-width erzwang Scrollen.
   ------------------------------------------------------------------------- */

/* Quetsch-Regeln von Elementor aufheben (gilt auch am Desktop) */
.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .cart_item td.product-name {
  max-width: none !important;
  padding-inline-end: 14px !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce-shipping-totals td {
  max-width: none !important;
}

@media (max-width: 767px) {
  /* Kein Zwangs-Scrollen: Tabelle passt sich dem Display an,
     die Inhalte stapeln dank Germanized-Fix sauber untereinander */
  .woocommerce-checkout .woocommerce-checkout-review-order-table,
  .woocommerce-checkout #order_review table.shop_table {
    min-width: 0 !important;
  }

  .woocommerce-checkout .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 10px !important;
  }

  /* "Lieferung an eine andere Adresse" in handlicher Größe */
  .woocommerce-checkout #ship-to-different-address label {
    font-size: 22px !important;
    line-height: 1.3 !important;
    gap: 10px !important;
  }

  .elementor-widget-woocommerce-checkout-page #ship-to-different-address {
    padding-inline-start: 0 !important;
  }

  /* Abschnitts-Karten kompakter, damit die Felder Platz haben */
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout .e-checkout__order_review,
  .woocommerce-checkout .e-checkout__order_review-2,
  .woocommerce-checkout .e-coupon-box,
  .woocommerce-checkout .woocommerce-additional-fields {
    padding: 16px 14px !important;
  }

  /* Überschriften eine Stufe kleiner */
  .woocommerce-checkout h3,
  .woocommerce-checkout #order_review_heading {
    font-size: 20px !important;
  }

  /* Kaufen-Button bequem tippbar in voller Breite */
  .woocommerce-checkout #place_order {
    width: 100% !important;
    padding: 14px 20px !important;
  }
}