/*
Theme Name: TerraHaven
Theme URI: https://terrahaven.de
Author: Jansen Shops
Author URI: https://terrahaven.de
Description: Eigenständiges WooCommerce-Theme für TerraHaven – einen Terraristik-Shop. Design-Konzept "Terrarium-Strata": geschichtete Sektionen im Stil eines Terrarium-Querschnitts (Glas, Bodengrund, Bepflanzung, Wärmelicht).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: terrahaven
Tags: e-commerce, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Farben — "Terrarium-Strata" Palette */
  --th-deep-moss: #1F2E1C;      /* dunkles Laub — Header, Footer */
  --th-humus-brown: #3B2A1E;    /* Bodengrund — Text auf hellem Grund */
  --th-basking-amber: #D9A428;  /* Wärmelampen-Glühen — Akzent, CTA */
  --th-basking-amber-dim: #B8871E;
  --th-canopy-green: #4C7A3D;   /* mittleres Grün — Links, Sekundärakzent */
  --th-glass-sage: #C7D9C0;     /* helles Terrarienglas — Karten-BG */
  --th-glass-sage-tint: #E4EDE0;
  --th-stone-cream: #F2EFE6;    /* Seitenhintergrund */
  --th-white: #FFFFFF;
  --th-error: #B3432B;
  --th-success: #4C7A3D;

  /* Typografie */
  --th-font-display: "Fraunces", Georgia, serif;
  --th-font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --th-font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Skalen */
  --th-radius-sm: 6px;
  --th-radius-md: 14px;
  --th-radius-lg: 28px;
  --th-shadow-soft: 0 8px 24px rgba(31, 46, 28, 0.12);
  --th-shadow-glow: 0 0 32px rgba(217, 164, 40, 0.25);
  --th-max-width: 1440px;
  --th-space-unit: 8px;
}

/* ==========================================================================
   2. RESET & BASICS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--th-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--th-humus-brown);
  background: var(--th-stone-cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--th-canopy-green); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--th-basking-amber-dim); }
h1, h2, h3, h4 {
  font-family: var(--th-font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--th-deep-moss);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 500; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.th-container {
  max-width: var(--th-max-width);
  margin: 0 auto;
  padding: 0 24px;
}
/* Breiterer Container nur für den Header (Top-Bar, Logo/Suche/Icons, Menü) —
   bewusst nur geringfügig breiter als der Inhalt (--th-max-width), damit der
   Übergang von Header zu Seiteninhalt nicht sprunghaft wirkt. */
.th-header-container {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 32px;
}
:focus-visible {
  outline: 3px solid var(--th-basking-amber);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Screen-reader only utility (WP-Standard) */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
  width: 1px; word-wrap: normal !important;
}

/* ==========================================================================
   3. STRATA — Sektionstrenner (Signature-Element)
   ========================================================================== */
.th-strata-divider {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  line-height: 0;
}
.th-strata-divider--to-moss { fill: var(--th-deep-moss); }
.th-strata-divider--to-cream { fill: var(--th-stone-cream); }
.th-strata-divider--to-sage { fill: var(--th-glass-sage-tint); }

/* ==========================================================================
   4. HEADER / NAVIGATION
   ========================================================================== */
/* Header als eigenen, isolierten Stacking-Context erzwingen: Auf der
   CheckoutWC-Kassenseite (eigenes Template/eigene Stacking-Contexts des
   Plugins) reichte z-index:100 auf .th-header-sticky allein nicht aus,
   damit unser Mega-Menü zuverlässig ÜBER dem Checkout-Inhalt schwebt statt
   sich mit ihm zu vermischen. isolation:isolate + hoher z-index auf dem
   äußersten Header-Element sorgt dafür, dass der komplette Header (inkl.
   Mega-Menü-Panels) unabhängig davon gewinnt, welche eigenen
   Stacking-Contexts CheckoutWC innerhalb des Seiteninhalts aufbaut. */
.th-site-header {
  position: relative;
  isolation: isolate;
  z-index: 500;
}
.th-header-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Kontaktleiste */
.th-top-bar {
  background: var(--th-deep-moss);
  color: var(--th-glass-sage);
  font-size: .8rem;
}
.th-top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 24px;
  flex-wrap: wrap;
}
.th-top-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--th-glass-sage);
  white-space: nowrap;
  font-size: .88rem;
}
a.th-top-bar-item:hover { color: var(--th-basking-amber); }
.th-top-bar-promo { color: var(--th-basking-amber); font-weight: 600; }
a.th-top-bar-promo:hover { color: var(--th-white); }

/* Auf Mobil: nur noch eine kompakte Icon-Zeile statt drei ausgeschriebener
   Zeilen — Telefonnummer, Rabatt-Text und E-Mail bleiben über die Icons
   weiterhin antippbar (aria-label sorgt für Screenreader-Zugänglichkeit). */
@media (max-width: 780px) {
  .th-top-bar-inner {
    justify-content: center;
    gap: 32px;
    padding: 8px 16px;
    flex-wrap: nowrap;
  }
  .th-top-bar-text { display: none; }
  .th-top-bar-item { gap: 0; }
}

/* Logo/Suche/Icons-Zeile */
.th-header-main {
  background: var(--th-white);
  border-bottom: 1px solid rgba(59, 42, 30, .08);
}
.th-header-main-inner {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 24px;
  min-height: 100px;
}
.th-logo {
  font-family: var(--th-font-display);
  font-size: 2rem;
  color: var(--th-deep-moss);
  letter-spacing: .01em;
  flex-shrink: 0;
}
.th-logo a { color: var(--th-deep-moss); }
.th-logo span { color: var(--th-basking-amber-dim); }

.th-header-search-form {
  flex: 1 1 auto;
  max-width: 900px;
  display: flex;
  align-items: center;
  border: 1.5px solid rgba(59, 42, 30, .18);
  border-radius: var(--th-radius-sm);
  background: var(--th-white);
  overflow: hidden;
}
.th-header-search-form:focus-within { border-color: var(--th-canopy-green); }
.th-header-search-form .th-search-submit {
  background: none;
  border: none;
  padding: 14px 14px 14px 20px;
  color: var(--th-humus-brown);
  opacity: .55;
  cursor: pointer;
  display: inline-flex;
}
.th-header-search-form .th-search-field {
  flex: 1;
  border: none;
  background: none;
  padding: 14px 20px 14px 4px;
  font-family: var(--th-font-body);
  font-size: 1.05rem;
  color: var(--th-humus-brown);
}
.th-header-search-form .th-search-field:focus { outline: none; }
.th-header-search-form .th-search-field::placeholder { color: rgba(59, 42, 30, .45); }

.th-header-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
  margin-left: 24px;
}
.th-icon-link {
  position: relative;
  color: var(--th-humus-brown);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.th-icon-link:hover { color: var(--th-basking-amber-dim); }
.th-icon-badge {
  position: absolute;
  top: -9px;
  right: -12px;
  background: var(--th-basking-amber);
  color: var(--th-deep-moss);
  font-family: var(--th-font-mono);
  font-size: .7rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.th-icon-badge--cart { background: var(--th-error); color: var(--th-white); }
.th-cart-total {
  font-family: var(--th-font-mono);
  font-size: .9rem;
  color: var(--th-humus-brown);
  opacity: .8;
}
.th-cart-total .woocommerce-Price-amount { color: inherit; }

.th-tooltip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--th-humus-brown);
  color: var(--th-white);
  font-size: .72rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--th-radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 20;
}
.th-icon-link:hover .th-tooltip { opacity: 1; }

/* Konto-Dropdown */
.th-account { position: relative; }
.th-account-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  width: 340px;
  max-width: 90vw;
  background: var(--th-white);
  border-radius: var(--th-radius-md);
  box-shadow: 0 20px 48px rgba(31, 46, 28, .28);
  padding: 24px;
  z-index: 30;
  color: var(--th-humus-brown);
}
.th-account-dropdown[hidden] { display: none; }

.th-account-tabs {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(59, 42, 30, .12);
}
.th-account-tab {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--th-font-display);
  font-size: 1.15rem;
  color: rgba(59, 42, 30, .45);
  cursor: pointer;
}
.th-account-tab.is-active { color: var(--th-deep-moss); }

.th-account-dropdown__inner[data-active-tab="login"] .u-column2 { display: none; }
.th-account-dropdown__inner[data-active-tab="register"] .u-column1 { display: none; }
.th-account-dropdown__inner .u-columns { display: block; margin: 0; }
.th-account-dropdown__inner .u-column1,
.th-account-dropdown__inner .u-column2 { width: 100%; float: none; }
.th-account-dropdown__inner form p { margin-bottom: 14px; }
.th-account-dropdown__inner form label {
  display: block;
  font-size: .85rem;
  margin-bottom: 6px;
}
.th-account-dropdown__inner form label .required { color: var(--th-error); }
.th-account-dropdown__inner form .woocommerce-Input,
.th-account-dropdown__inner form input[type="text"],
.th-account-dropdown__inner form input[type="password"],
.th-account-dropdown__inner form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--th-radius-sm);
  border: 1px solid rgba(59, 42, 30, .25);
  font-family: var(--th-font-body);
}
.th-account-dropdown__inner form button[type="submit"] {
  width: 100%;
  background: var(--th-basking-amber);
  color: var(--th-deep-moss);
  border: none;
  padding: 14px;
  border-radius: var(--th-radius-sm);
  font-weight: 700;
  cursor: pointer;
  margin: 4px 0 14px;
  box-shadow: var(--th-shadow-glow);
}
.th-account-dropdown__inner .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
}
.th-account-dropdown__inner .lost_password a,
.th-account-dropdown__inner .woocommerce-LostPassword a { font-size: .88rem; }

.th-account-dropdown__loggedin { display: flex; flex-direction: column; gap: 4px; }
.th-account-dropdown__loggedin a {
  padding: 10px 8px;
  border-radius: var(--th-radius-sm);
  color: var(--th-humus-brown);
  font-weight: 500;
}
.th-account-dropdown__loggedin a:hover { background: var(--th-glass-sage-tint); color: var(--th-deep-moss); }
.th-account-dropdown__loggedin .th-logout-link { color: var(--th-error); }

/* Menüleiste */
.th-nav-bar { background: var(--th-deep-moss); position: relative; }
.th-main-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 36px;
  margin: 0;
  padding: 0;
}
.th-main-nav > ul > li > a {
  display: inline-block;
  padding: 17px 0;
  color: var(--th-glass-sage);
  font-size: 1rem;
  font-weight: 500;
}
.th-main-nav > ul > li > a:hover { color: var(--th-basking-amber); }

/* Mega-Menü */
.th-mega-item { position: static; }
.th-mega-toggle,
.th-main-nav > ul > li > a.th-mega-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.th-mega-chevron {
  display: inline-flex;
  color: currentColor;
  transition: transform .15s ease;
}
.th-mega-item.is-open .th-mega-chevron { transform: rotate(180deg); }
.th-mega-toggle .th-tooltip {
  top: calc(100% + 4px);
  background: var(--th-humus-brown);
}
.th-mega-toggle:hover .th-tooltip { opacity: 1; }
.th-mega-item.is-open .th-mega-toggle .th-tooltip { opacity: 0; }

.th-mega-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 94vw);
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  background: var(--th-stone-cream);
  border-radius: 0 0 var(--th-radius-lg) var(--th-radius-lg);
  border-top: 3px solid var(--th-basking-amber);
  box-shadow: 0 24px 56px rgba(31, 46, 28, .3);
  padding: 26px 40px 30px;
  z-index: 40;
  color: var(--th-humus-brown);
}
.th-mega-panel[hidden] { display: none; }

.th-mega-close {
  position: absolute;
  top: 16px; right: 18px;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--th-white);
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--th-humus-brown);
  opacity: .7;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.th-mega-close:hover { opacity: 1; background: var(--th-glass-sage-tint); }

.th-mega-panel .th-mega-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--th-basking-amber);
  color: var(--th-deep-moss);
  font-weight: 600;
  font-size: .86rem;
  text-decoration: none;
  border-radius: 999px;
  margin-bottom: 16px;
  padding: 7px 16px !important;
  transition: transform .15s ease;
}
.th-mega-panel .th-mega-view-all:hover { transform: translateY(-1px); }
.th-mega-panel .th-mega-view-all::after { content: "→"; }

.th-mega-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px 0;
}
.th-mega-col {
  padding: 0 22px;
  border-left: 1px solid var(--th-glass-sage);
}
.th-mega-col:first-child { border-left: none; padding-left: 0; }
.th-mega-panel .th-mega-col-title {
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 2.9em;
  font-family: var(--th-font-display);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--th-deep-moss);
  margin-bottom: 10px;
  padding: 0 !important;
  border-bottom: 2px solid var(--th-basking-amber);
  padding-bottom: 6px !important;
}
.th-mega-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.th-mega-panel .th-mega-col-list a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px !important;
  margin: 0 -10px;
  border-radius: var(--th-radius-sm);
  color: var(--th-humus-brown);
  font-size: .87rem;
  line-height: 1.4;
  font-weight: 400;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.th-mega-panel .th-mega-col-list a::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--th-basking-amber);
  flex-shrink: 0;
  opacity: .8;
}
.th-mega-panel .th-mega-col-list a:hover {
  background: var(--th-glass-sage-tint);
  color: var(--th-canopy-green);
  padding-left: 13px !important;
}

.th-menu-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(59, 42, 30, .25);
  border-radius: var(--th-radius-sm);
  color: var(--th-humus-brown);
  padding: 8px 10px;
  cursor: pointer;
}
@media (max-width: 960px) {
  .th-header-search-form { display: none; }
}

/* Mobile Such-Icon: nur unterhalb der Breite sichtbar, in der die normale
   Suchleiste im Header verschwindet — sonst gäbe es auf dem Handy gar
   keinen Weg mehr, nach Produkten zu suchen. */
.th-mobile-search-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
@media (max-width: 960px) {
  .th-mobile-search-toggle { display: inline-flex; }
}
.th-mobile-search-row {
  background: var(--th-white);
  border-bottom: 1px solid rgba(59, 42, 30, .1);
  padding: 14px 0;
}
.th-mobile-search-row[hidden] { display: none; }
.th-mobile-search-row .th-header-search-form {
  display: flex !important;
  align-items: center;
  border: 1.5px solid rgba(59, 42, 30, .18);
  border-radius: var(--th-radius-sm);
  background: var(--th-white);
  overflow: hidden;
}
.th-mobile-search-row .th-search-submit {
  background: none;
  border: none;
  padding: 12px 10px 12px 16px;
  color: var(--th-humus-brown);
  opacity: .55;
}
.th-mobile-search-row .th-search-field {
  flex: 1;
  border: none;
  background: none;
  padding: 12px 16px 12px 4px;
  font-family: var(--th-font-body);
  font-size: 1rem;
  color: var(--th-humus-brown);
}
.th-mobile-search-row .th-search-field:focus { outline: none; }

@media (max-width: 860px) {
  .th-nav-bar { position: relative; }
  .th-main-nav { display: none; }
  .th-main-nav.is-open { display: block; padding: 10px 24px 20px; }
  .th-menu-toggle { display: inline-flex; }
  .th-main-nav ul { flex-direction: column; gap: 0; padding: 10px 0; }
  .th-main-nav a { padding: 10px 0; }
  .th-account-dropdown { position: fixed; top: auto; left: 12px; right: 12px; width: auto; }
  .th-tooltip { display: none; }
  .th-header-main-inner { flex-wrap: wrap; gap: 14px; }

  /* Mega-Menü auf Mobil: statt Overlay-Panel als eingeklappter Bereich direkt im Menü */
  .th-mega-panel {
    position: static;
    transform: none;
    width: auto;
    box-shadow: none;
    border-radius: var(--th-radius-sm);
    background: rgba(242, 239, 230, .06);
    padding: 16px;
    margin: 8px 0 16px;
  }
  .th-mega-close { display: none; }
  .th-mega-columns { grid-template-columns: 1fr; gap: 18px; }
  .th-mega-col { border-left: none; padding: 0; }
  .th-mega-panel .th-mega-col-title,
  .th-mega-panel .th-mega-view-all,
  .th-mega-panel .th-mega-col-list a {
    color: var(--th-glass-sage) !important;
  }
  .th-mega-panel .th-mega-col-title { border-bottom-color: var(--th-basking-amber); }
  .th-mega-panel .th-mega-view-all { color: var(--th-deep-moss) !important; }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.th-hero {
  background: linear-gradient(180deg, var(--th-glass-sage-tint) 0%, var(--th-glass-sage) 100%);
  padding: 88px 0 0;
  position: relative;
  overflow: hidden;
}
.th-hero .th-container { padding-bottom: 64px; }
@media (max-width: 780px) {
  .th-hero { padding-top: 48px; }
  .th-hero .th-container { padding-bottom: 40px; }
}
.th-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 860px) { .th-hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.th-hero-eyebrow {
  font-family: var(--th-font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  color: var(--th-canopy-green);
  display: inline-block;
  margin-bottom: 18px;
}
.th-hero h1 { margin-bottom: 20px; }
.th-hero p.lead { font-size: 1.15rem; max-width: 46ch; margin-bottom: 32px; }
.th-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 16px 30px;
  border-radius: var(--th-radius-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.th-btn--primary {
  background: var(--th-basking-amber);
  color: var(--th-deep-moss);
  box-shadow: var(--th-shadow-glow);
}
.th-btn--primary:hover { transform: translateY(-2px); color: var(--th-deep-moss) !important; }
.th-btn--ghost {
  background: transparent;
  border: 1.5px solid var(--th-deep-moss);
  color: var(--th-deep-moss);
}

/* Einheitlicher vertikaler Abstands-Rhythmus für Startseiten-Abschnitte */
.th-section { padding: 88px 0; }
.th-section--moss { background: var(--th-deep-moss); }
.th-section-title {
  margin-bottom: 40px;
  text-align: center;
}
@media (max-width: 780px) {
  .th-section { padding: 48px 0; }
  .th-section-title { margin-bottom: 24px; }
}
.th-section-title--light { color: var(--th-white); }

/* ==========================================================================
   6. PRODUKT-KARTEN ("Glasscheiben"-Stil, Signature-Element)
   ========================================================================== */
.th-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
}
.th-product-card,
ul.products li.product {
  background: var(--th-white);
  border-radius: var(--th-radius-lg) var(--th-radius-lg) var(--th-radius-sm) var(--th-radius-sm);
  overflow: hidden;
  position: relative;
  box-shadow: var(--th-shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.th-product-card::before,
ul.products li.product::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--th-basking-amber), transparent);
}
.th-product-card:hover,
ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(31, 46, 28, 0.18);
}
.th-product-card__body { padding: 18px; }
.th-product-card__price,
.price {
  font-family: var(--th-font-mono);
  font-weight: 600;
  color: var(--th-humus-brown);
}

/* ==========================================================================
   7. KATEGORIE-/SHOP-ARCHIV
   ========================================================================== */
.th-category-hero {
  background: linear-gradient(180deg, var(--th-glass-sage-tint) 0%, var(--th-glass-sage) 100%);
  padding: 28px 0 0;
  position: relative;
}
.th-category-hero.has-image {
  background:
    linear-gradient(180deg, rgba(31,46,28,.55), rgba(31,46,28,.75)),
    var(--th-cat-bg) center/cover no-repeat;
}
.th-category-hero.has-image h1,
.th-category-hero.has-image .th-hero-eyebrow,
.th-category-hero.has-image .th-category-desc,
.th-category-hero.has-image .th-breadcrumb a,
.th-category-hero.has-image .th-breadcrumb span {
  color: var(--th-stone-cream);
}
.th-category-hero.has-image .th-hero-eyebrow { color: var(--th-basking-amber); }
.th-category-hero .th-container { padding-bottom: 32px; }
.th-breadcrumb {
  font-family: var(--th-font-mono);
  font-size: .78rem;
  color: var(--th-humus-brown);
  opacity: .75;
  margin-bottom: 18px;
}
.th-breadcrumb a { color: inherit; }
.th-breadcrumb span { margin: 0 8px; opacity: .6; }
.th-category-desc { max-width: 60ch; opacity: .9; }
.th-category-desc p:last-child { margin-bottom: 0; }

.th-woo-layout {
  display: grid;
  grid-template-columns: 1fr;
  padding: 40px 0 72px;
}
@media (max-width: 780px) {
  .th-woo-layout { padding: 24px 0 48px; }
}
.th-shop-sidebar .th-widget {
  background: var(--th-white);
  border-radius: var(--th-radius-md);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--th-shadow-soft);
}
.th-widget-title {
  font-family: var(--th-font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  color: var(--th-canopy-green);
}
.th-shop-sidebar ul { list-style: none; margin: 0; padding: 0; }
.th-shop-sidebar li { margin-bottom: 6px; }
.th-shop-sidebar a { color: var(--th-humus-brown); font-size: .92rem; }
.th-shop-sidebar a:hover { color: var(--th-canopy-green); }

/* Unterkategorien-Liste (Fallback, wenn keine Widgets gesetzt sind) */
.th-subcat-list li { margin-bottom: 4px; }
.th-subcat-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  margin: 0 -8px;
  border-radius: var(--th-radius-sm);
  transition: background .15s ease;
}
.th-subcat-list a:hover { background: var(--th-glass-sage-tint); }
.th-subcat-list a.is-active {
  background: var(--th-glass-sage-tint);
  font-weight: 600;
}
.th-subcat-list a.is-active .th-subcat-name { color: var(--th-deep-moss); }

/* ==========================================================================
   KATEGORIE-KACHELN — [product_categories]-Shortcode (Startseite: "Nach
   Bedarf stöbern"). Läuft über eine eigene WooCommerce-Klasse
   (li.product-category statt li.product), daher separat gestylt.
   ========================================================================== */
ul.products li.product-category {
  position: relative;
  background: var(--th-white);
  border-radius: var(--th-radius-lg);
  overflow: hidden;
  box-shadow: var(--th-shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
ul.products li.product-category:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(31, 46, 28, .18);
}
ul.products li.product-category a {
  display: block;
  color: inherit;
}
ul.products li.product-category img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  background: var(--th-glass-sage-tint);
}
/* Auf schmalen Bildschirmen (1-spaltiges Raster) wird ein 1:1-Quadrat bei
   voller Breite unangenehm hoch (fast bildschirmfüllend) — dort auf ein
   flacheres Format wechseln. */
@media (max-width: 480px) {
  ul.products li.product-category img { aspect-ratio: 16 / 9; }
}
/* WooCommerce's Standard-Platzhalterbild (falls keine Kategoriebilder
   gesetzt sind) dezenter machen, statt es hart/kaputt wirken zu lassen. */
ul.products li.product-category img[src*="placeholder"] {
  opacity: .3;
  padding: 22%;
  box-sizing: border-box;
}
ul.products li.product-category .woocommerce-loop-category__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--th-font-display) !important;
  font-weight: 500 !important;
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  color: var(--th-deep-moss) !important;
  margin: 0 !important;
  padding: 18px 20px !important;
}
ul.products li.product-category .woocommerce-loop-category__title mark.count {
  background: var(--th-glass-sage-tint);
  color: var(--th-canopy-green);
  font-family: var(--th-font-mono);
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.th-subcat-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--th-radius-sm);
  background: var(--th-glass-sage-tint) center/cover;
  color: var(--th-canopy-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.th-subcat-name { flex: 1; font-size: .9rem; }
.th-subcat-count {
  font-family: var(--th-font-mono);
  font-size: .74rem;
  color: var(--th-humus-brown);
  opacity: .55;
}

.th-shop-toolbar {
  margin-bottom: 24px;
}
.th-result-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  border-bottom: 1px solid rgba(59, 42, 30, .12);
  padding-bottom: 16px;
}
.woocommerce-result-count {
  font-family: var(--th-font-mono);
  font-size: .82rem;
  color: var(--th-humus-brown);
  opacity: .75;
  margin: 0;
  margin-right: auto;
}
.woocommerce-ordering select,
.th-per-page select {
  font-family: var(--th-font-body);
  font-size: .88rem;
  padding: 8px 12px;
  border-radius: var(--th-radius-sm);
  border: 1px solid rgba(59, 42, 30, .25);
  background: var(--th-white);
  color: var(--th-humus-brown);
  cursor: pointer;
}
@media (max-width: 780px) {
  .th-result-count {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .woocommerce-result-count { margin-right: 0; }
  .woocommerce-ordering,
  .th-per-page { width: 100%; }
  .woocommerce-ordering select,
  .th-per-page select { width: 100%; }
}
.th-per-page select:hover,
.woocommerce-ordering select:hover { border-color: var(--th-canopy-green); }

/* Neutralisiert WooCommerce's eigenes Float-Grid (float/width/margin je Produkt),
   das sonst parallel zu unserem CSS-Grid greift und die Karten schmal/hoch verzerrt. */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1100px) {
  ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  ul.products { grid-template-columns: 1fr; }
}
/* WooCommerce hängt an ul.products einen ::before/::after-Clearfix dran
   (für sein altes Float-Layout gedacht). Seit ul.products bei uns
   display:grid ist, würden diese leeren Pseudo-Elemente als echte,
   unsichtbare Grid-Zellen mitzählen und Platz wegnehmen — deshalb hart
   deaktiviert. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}
ul.products li.product {
  display: flex;
  flex-direction: column;
}
ul.products li.product > a:not(.button) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  color: inherit;
}
ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--th-radius-lg) var(--th-radius-lg) 0 0;
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--th-font-display);
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--th-deep-moss);
  margin: 16px 20px 14px !important;
  word-break: break-word;
}
/* Sterne-Bewertung (Produktraster) — reines Unicode-Zeichen, kein Icon-Font */
ul.products li.product .th-star-rating {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 20px 6px !important;
  font-size: .78rem;
}
.th-star-rating__stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  letter-spacing: 1px;
  font-size: 1.2rem;
}
.th-star-rating__stars--empty { color: rgba(59, 42, 30, .18); }
.th-star-rating__stars--filled {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--th-basking-amber);
}
.th-star-rating__count {
  font-family: var(--th-font-mono);
  font-size: .72rem;
  color: var(--th-humus-brown);
  opacity: .6;
}
.th-star-rating__count--empty { opacity: .4; font-style: italic; }

ul.products li.product .price {
  margin: 0 20px 14px !important;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-family: var(--th-font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--th-basking-amber-dim);
  padding-top: 12px;
  border-top: 1px solid rgba(59, 42, 30, .08);
}
ul.products li.product .price del { opacity: .5; font-weight: 500; font-size: .85rem; color: var(--th-humus-brown); margin-right: 4px; }
ul.products li.product .price ins { text-decoration: none; color: var(--th-basking-amber-dim); }
/* Germanized-Grundpreis (z. B. "1,39 € / kg") direkt neben den Preis stellen
   statt darunter. Germanized hängt den Grundpreis mit an die Preis-Ausgabe
   dran — die genaue Klasse variiert je nach Version, daher breiter Selektor. */
ul.products li.product .price [class*="unit-price"],
ul.products li.product .price [class*="price-unit"],
ul.products li.product .price .wc-gzd-additional-info,
ul.products li.product .price .wc-gzd-additional-info * {
  margin: 0 !important;
  padding: 0 !important;
  font-size: .78rem;
  font-family: var(--th-font-mono);
  color: var(--th-humus-brown);
  opacity: .65;
  font-weight: 400;
}

/* Germanized-Zusatzhinweise ("inkl. 19 % MwSt.", "zzgl. Versandkosten") —
   eigene <p class="wc-gzd-additional-info ..."> Elemente, direkte
   Geschwister von Bild/Titel-Link und Button innerhalb der Karte. */
ul.products li.product > p.wc-gzd-additional-info {
  clear: none;
  margin: 0 20px 4px !important;
  padding: 0 !important;
  font-size: .74rem;
  line-height: 1.4;
  color: var(--th-humus-brown);
  opacity: .65;
}
ul.products li.product > p.wc-gzd-additional-info:last-of-type {
  margin-bottom: 16px !important;
}
ul.products li.product > p.wc-gzd-additional-info a {
  color: var(--th-canopy-green);
  opacity: 1;
}

ul.products li.product > a { margin-bottom: auto; }
ul.products li.product .button {
  display: block;
  margin: 0 20px 20px !important;
  margin-top: auto;
  text-align: center;
  background: var(--th-canopy-green);
  color: var(--th-white);
  padding: 12px 14px;
  border-radius: var(--th-radius-sm);
  font-weight: 600;
  font-size: .88rem;
  transition: background .15s ease, transform .15s ease;
}
ul.products li.product .button:hover { background: var(--th-deep-moss); color: var(--th-white); transform: translateY(-1px); }
.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  background: var(--th-basking-amber);
  color: var(--th-deep-moss);
  font-family: var(--th-font-mono);
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}
/* Alte WooCommerce-Sterne (falls sie irgendwo doch noch gerendert werden,
   z. B. in Widgets) bleiben ausgeblendet — unsere eigene .th-star-rating
   läuft komplett unabhängig davon über reines Unicode-Zeichen. */
.star-rating { display: none; }

/* Merkzettel-Herz auf Produktkarten */
ul.products li.product { position: relative; }
.th-wishlist-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 3;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .9);
  color: var(--th-humus-brown);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(31,42,28,.15);
  transition: transform .15s ease, color .15s ease;
}
.th-wishlist-btn:hover { transform: scale(1.08); }
.th-wishlist-btn.is-active { color: var(--th-error); }
.th-wishlist-btn.is-active svg { fill: var(--th-error); }

.th-wishlist-btn--inline {
  position: static;
  width: auto;
  height: auto;
  border-radius: var(--th-radius-sm);
  background: transparent;
  border: 1.5px solid rgba(59,42,30,.25);
  padding: 12px 18px;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--th-humus-brown);
  box-shadow: none;
}
.th-wishlist-btn--inline.is-active { border-color: var(--th-error); color: var(--th-error); }
.th-wishlist-btn--inline.is-active svg { fill: var(--th-error); }
.th-wishlist-btn--inline:hover { transform: none; border-color: var(--th-humus-brown); }
.woocommerce div.product .th-wishlist-btn--inline { margin-bottom: 24px; }

.th-single-trust-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  margin-top: 4px;
  border-top: 1px solid rgba(59, 42, 30, .12);
}
.th-single-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--th-canopy-green);
}
.th-single-trust-item svg { flex-shrink: 0; margin-top: 1px; }
.th-single-trust-item p {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--th-deep-moss);
}
.th-single-trust-item span {
  font-size: .78rem;
  color: var(--th-humus-brown);
  opacity: .7;
}

/* ==========================================================================
   REZENSIONEN (eigenes Template, ersetzt WooCommerce's Standard-Ausgabe)
   ========================================================================== */
.th-reviews {
  /* Sitzt bereits innerhalb des "Rezensionen"-Tab-Panels (eigene Karte mit
     Padding/Schatten) — daher hier keine zusätzliche Rahmenlinie/Abstand
     nötig, das würde sich mit dem Panel selbst doppeln. */
}
.th-reviews-title {
  font-size: 1.4rem;
  margin-bottom: 24px;
}
.th-reviews-title span { color: var(--th-basking-amber-dim); }

.th-reviews-summary {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  background: var(--th-white);
  border-radius: var(--th-radius-md);
  padding: 28px;
  margin-bottom: 32px;
  box-shadow: var(--th-shadow-soft);
}
@media (max-width: 640px) { .th-reviews-summary { grid-template-columns: 1fr; } }
.th-reviews-summary__average {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  border-right: 1px solid rgba(59, 42, 30, .1);
}
@media (max-width: 640px) { .th-reviews-summary__average { border-right: none; border-bottom: 1px solid rgba(59, 42, 30, .1); padding-bottom: 20px; } }
.th-reviews-summary__number {
  font-family: var(--th-font-display);
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--th-deep-moss);
  line-height: 1;
}
.th-reviews-summary__average .th-star-rating__stars { font-size: 1.15rem; }
.th-reviews-summary__label {
  display: block;
  font-size: .78rem;
  color: var(--th-humus-brown);
  opacity: .65;
  margin-top: 4px;
}
.th-reviews-summary__bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.th-reviews-bar-row {
  display: grid;
  grid-template-columns: 64px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--th-humus-brown);
}
.th-reviews-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--th-glass-sage-tint);
  overflow: hidden;
}
.th-reviews-bar-fill {
  display: block;
  height: 100%;
  background: var(--th-basking-amber);
  border-radius: 999px;
}
.th-reviews-bar-pct { text-align: right; opacity: .7; font-family: var(--th-font-mono); font-size: .74rem; }

.th-reviews-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.th-review__inner {
  display: flex;
  background: var(--th-white);
  border-radius: var(--th-radius-md);
  padding: 20px;
  box-shadow: var(--th-shadow-soft);
}
.th-review__body { flex: 1; }
.th-review__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.th-review__author { font-weight: 600; color: var(--th-deep-moss); }
.th-review__date { font-size: .78rem; color: var(--th-humus-brown); opacity: .6; }
.th-review__body .th-star-rating__stars { font-size: 1rem; margin-bottom: 8px; display: inline-block; }
.th-review__text p { margin: 0; font-size: .92rem; line-height: 1.6; }
.th-review.depth-2 { margin-left: 68px; }
.th-review ol.children { list-style: none; padding: 0; margin: 16px 0 0; }

.th-review-form {
  background: var(--th-white);
  border-radius: var(--th-radius-md);
  padding: 28px;
  box-shadow: var(--th-shadow-soft);
}
.th-review-form #reply-title,
.th-review-form .comment-reply-title {
  font-size: 1.15rem;
  margin-bottom: 16px;
}
.th-review-form p { margin-bottom: 16px; }
.th-review-form label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: 6px; color: var(--th-deep-moss); }
.th-review-form label .required { color: var(--th-error); }
.th-review-form select,
.th-review-form textarea,
.th-review-form input[type="text"],
.th-review-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--th-radius-sm);
  border: 1px solid rgba(59, 42, 30, .25);
  font-family: var(--th-font-body);
  background: var(--th-stone-cream);
}
.th-review-form__rating select { max-width: 320px; }
.th-review-form .form-submit input[type="submit"] {
  background: var(--th-basking-amber);
  color: var(--th-deep-moss);
  border: none;
  padding: 13px 26px;
  border-radius: var(--th-radius-sm);
  font-weight: 700;
  cursor: pointer;
}

.th-empty-category {
  background: var(--th-white);
  border-radius: var(--th-radius-md);
  padding: 48px 24px;
  text-align: center;
}
.th-empty-category p { margin-bottom: 20px; opacity: .8; }

.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination:hover,
.woocommerce nav.woocommerce-pagination:hover,
.woocommerce-pagination:focus,
.woocommerce nav.woocommerce-pagination:focus {
  margin-top: 48px !important;
  display: flex !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers:hover {
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.woocommerce-pagination ul.page-numbers li,
.woocommerce nav.woocommerce-pagination ul.page-numbers li,
.woocommerce-pagination ul.page-numbers li:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li:hover {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.woocommerce-pagination .page-numbers,
.woocommerce nav.woocommerce-pagination .page-numbers,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  margin: 0 !important;
  border-radius: 999px !important;
  border: none !important;
  outline: none !important;
  font-family: var(--th-font-mono) !important;
  font-size: .85rem !important;
  font-weight: 600;
  color: var(--th-humus-brown) !important;
  background: var(--th-white) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: color .15s ease, transform .15s ease;
}
.woocommerce-pagination .page-numbers.dots {
  background: transparent !important;
}
.woocommerce-pagination .page-numbers.current,
.woocommerce nav.woocommerce-pagination .page-numbers.current {
  background: var(--th-basking-amber) !important;
  color: var(--th-deep-moss) !important;
}
.woocommerce-pagination .page-numbers:hover:not(.current):not(.dots) {
  background: var(--th-white) !important;
  color: var(--th-canopy-green) !important;
}
.woocommerce-pagination .page-numbers.next,
.woocommerce-pagination .page-numbers.prev {
  font-family: var(--th-font-body) !important;
  font-size: 1.1rem !important;
}
/* Falls WooCommerce/Germanized beim Hover ein Pseudo-Element mit eigenem
   Hintergrund einblendet, das unsere bisherigen Regeln nicht erfasst haben
   (die zielten nur auf die "echten" Elemente, nicht auf ::before/::after). */
.woocommerce-pagination *::before,
.woocommerce-pagination *::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ==========================================================================
   8. EINZELPRODUKT-SEITE
   ========================================================================== */
.th-category-hero--slim { padding: 20px 0 0; }
.th-category-hero--slim .th-container { padding-bottom: 12px; }

.th-single-product-wrap { padding: 40px 0 72px; }

.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}
/* Neutralisiert WooCommerce's eigenes Standard-Layout (width: 48% auf Bild
   und Textspalte, für ein klassisches Float-Layout gedacht), das sonst mit
   unserem Grid kollidiert und jede Spalte auf halbe Breite zusammenschrumpft. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.woocommerce div.product div.images {
  background: var(--th-white);
  border-radius: var(--th-radius-lg);
  overflow: hidden;
  box-shadow: var(--th-shadow-soft);
  align-self: start;
}
.woocommerce div.product div.images img { border-radius: 0; width: 100%; }
.woocommerce div.product .flex-control-thumbs {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 12px;
  margin: 0;
}
.woocommerce div.product .flex-control-thumbs li img {
  border-radius: var(--th-radius-sm);
  opacity: .6;
  cursor: pointer;
}
.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover { opacity: 1; outline: 2px solid var(--th-basking-amber); }

.woocommerce div.product .summary { align-self: start; }
.woocommerce div.product .summary .product_title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  margin-bottom: 6px;
}

.woocommerce div.product .summary .th-star-rating {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
}
.woocommerce div.product .summary .th-star-rating .th-star-rating__stars {
  font-size: 1.4rem;
}
.woocommerce div.product .summary .th-star-rating .th-star-rating__count {
  font-size: .82rem;
}

.th-merken-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 14px;
  color: var(--th-humus-brown);
  opacity: .75;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
}
.th-merken-link:hover { opacity: 1; color: var(--th-canopy-green); }
.th-merken-link.is-active { color: var(--th-error); opacity: 1; }
.th-merken-link.is-active svg { fill: var(--th-error); }

.woocommerce div.product .summary .price {
  font-family: var(--th-font-mono);
  font-size: 1.4rem;
  color: var(--th-basking-amber-dim);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.woocommerce div.product .summary .price del { color: var(--th-humus-brown); opacity: .5; font-size: 1rem; margin-right: 8px; }
.woocommerce div.product .summary .price [class*="unit-price"],
.woocommerce div.product .summary .price [class*="price-unit"],
.woocommerce div.product .summary .price .wc-gzd-additional-info,
.woocommerce div.product .summary .price .wc-gzd-additional-info * {
  margin: 0 !important;
  padding: 0 !important;
  font-size: .85rem;
  color: var(--th-humus-brown);
  opacity: .65;
  font-weight: 400;
}

.th-delivery-estimate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .86rem;
  color: var(--th-canopy-green);
  background: var(--th-glass-sage-tint);
  padding: 10px 14px;
  border-radius: var(--th-radius-sm);
  margin: 0 0 20px;
}
.th-delivery-estimate strong { color: var(--th-deep-moss); }
.th-delivery-estimate__region {
  width: 100%;
  font-size: .78rem;
  color: var(--th-humus-brown);
  opacity: .7;
  padding-left: 23px;
}

.woocommerce div.product .summary .woocommerce-product-details__short-description {
  margin-bottom: 24px;
  opacity: .9;
}
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.woocommerce div.product form.cart .quantity input {
  width: 64px;
  padding: 12px 10px;
  border-radius: var(--th-radius-sm);
  border: 1px solid rgba(59, 42, 30, .25);
  font-family: var(--th-font-mono);
  text-align: center;
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
  background: var(--th-basking-amber);
  color: var(--th-deep-moss);
  border: none;
  padding: 14px 28px;
  border-radius: var(--th-radius-sm);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--th-shadow-glow);
  transition: transform .18s ease;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover { transform: translateY(-2px); }
.woocommerce div.product .product_meta {
  font-size: .85rem;
  color: var(--th-humus-brown);
  opacity: .8;
  border-top: 1px solid rgba(59, 42, 30, .12);
  padding-top: 16px;
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }

/* Tabs */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 24px; }
.woocommerce-tabs ul.tabs {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0 0 -1px;
  border-bottom: 1px solid rgba(59, 42, 30, .15);
}
.woocommerce-tabs ul.tabs li {
  padding: 12px 20px;
  border-radius: var(--th-radius-sm) var(--th-radius-sm) 0 0;
  font-family: var(--th-font-mono);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  background: transparent;
}
.woocommerce-tabs ul.tabs li.active { background: var(--th-white); box-shadow: var(--th-shadow-soft); }
.woocommerce-tabs ul.tabs li a { color: var(--th-humus-brown); }
.woocommerce-tabs .panel {
  background: var(--th-white);
  border-radius: 0 var(--th-radius-md) var(--th-radius-md) var(--th-radius-md);
  padding: 28px !important;
  box-sizing: border-box;
  overflow-x: hidden;
  box-shadow: var(--th-shadow-soft);
}
.woocommerce-tabs .panel > * { max-width: 100%; box-sizing: border-box; }
.woocommerce-tabs .panel table { width: 100% !important; }
.woocommerce-tabs .panel img { height: auto; }
.woocommerce-tabs table.shop_attributes { width: 100%; border-collapse: collapse; }
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td { padding: 10px 0; border-bottom: 1px solid rgba(59,42,30,.1); text-align: left; }

.related.products { grid-column: 1 / -1; margin-top: 56px; }
.related.products > h2 { margin-bottom: 20px; }

/* ==========================================================================
   9. WARENKORB / CHECKOUT / MEIN KONTO
   ========================================================================== */
.woocommerce-cart .th-shop-main,
.woocommerce-checkout .th-shop-main,
.woocommerce-account .th-shop-main {
  padding: 40px 0 72px;
}

/* Warenkorb: Produkttabelle + Summen-Box nebeneinander, statt schmal
   untereinander — nutzt sonst nicht die volle Breite wie andere Seiten. */
.woocommerce-cart .th-shop-main {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .woocommerce-cart .th-shop-main { grid-template-columns: 1fr; }
}

/* Checkout: Kontaktdaten/Adresse links, Bestellübersicht rechts als
   Sidebar — WooCommerce's eigenes Float-Layout dafür wird neutralisiert
   und durch echtes Grid ersetzt. */
.woocommerce-checkout .th-shop-main {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .woocommerce-checkout .th-shop-main { grid-template-columns: 1fr; }
}
.woocommerce-checkout .th-shop-main form.checkout { grid-column: 1 / -1; display: contents; }
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
  float: none !important;
  width: auto !important;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  float: none !important;
  width: auto !important;
  margin-bottom: 24px;
}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  float: none !important;
  width: auto !important;
}

table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--th-white);
  border-radius: var(--th-radius-md);
  overflow: hidden;
  box-shadow: var(--th-shadow-soft);
  margin-bottom: 32px;
}
table.shop_table th {
  background: var(--th-glass-sage-tint);
  font-family: var(--th-font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
  padding: 14px 16px;
  color: var(--th-humus-brown);
}
table.shop_table td { padding: 16px; border-bottom: 1px solid rgba(59,42,30,.08); }
table.shop_table .product-thumbnail img { width: 64px; border-radius: var(--th-radius-sm); }
table.shop_table .product-remove a {
  color: var(--th-error);
  font-weight: 700;
}
td.actions .coupon { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
td.actions input[type="text"] {
  padding: 12px 14px;
  border-radius: var(--th-radius-sm);
  border: 1px solid rgba(59,42,30,.25);
}
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--th-canopy-green);
  color: var(--th-white);
  border: none;
  padding: 12px 22px;
  border-radius: var(--th-radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease;
}
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--th-deep-moss); }
.woocommerce a.remove { color: var(--th-error) !important; }

.cart_totals,
.woocommerce-checkout-review-order {
  background: var(--th-white);
  border-radius: var(--th-radius-md);
  padding: 24px;
  box-shadow: var(--th-shadow-soft);
}
.cart_totals table,
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
.cart_totals table th,
.cart_totals table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(59,42,30,.1);
}
.cart_totals .order-total .amount,
.woocommerce-checkout-review-order-table .order-total .amount {
  font-family: var(--th-font-mono);
  font-weight: 700;
  color: var(--th-basking-amber-dim);
}
.wc-proceed-to-checkout .checkout-button {
  display: block;
  text-align: center;
  background: var(--th-basking-amber);
  color: var(--th-deep-moss);
  padding: 16px;
  border-radius: var(--th-radius-sm);
  font-weight: 700;
  box-shadow: var(--th-shadow-glow);
}

.woocommerce-checkout .form-row { margin-bottom: 16px; }
.woocommerce-checkout label { display: block; font-size: .85rem; margin-bottom: 6px; color: var(--th-humus-brown); }
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--th-radius-sm);
  border: 1px solid rgba(59,42,30,.25);
  font-family: var(--th-font-body);
  background: var(--th-white);
}
#payment { background: var(--th-white); border-radius: var(--th-radius-md); box-shadow: var(--th-shadow-soft); }
#payment ul.payment_methods { list-style: none; padding: 0; margin: 0; }
#payment div.payment_box { background: var(--th-glass-sage-tint); border-radius: var(--th-radius-sm); padding: 14px; margin-top: 10px; font-size: .9rem; }

/* ==========================================================================
   10. CHECKOUTWC — KASSE (Plugin-eigene Klassen, nicht Standard-WooCommerce)
   ==========================================================================
   CheckoutWC ersetzt die komplette Checkout-Seite durch eigenes Markup mit
   eigenen Klassen (#cfw, .cfw-*) statt der WooCommerce-Standardstruktur
   (.col2-set, #customer_details, #order_review als Bestellübersicht usw.),
   für die unsere alten Checkout-Regeln oben geschrieben waren. Deshalb
   greifen diese kaum — CheckoutWC bringt außerdem eine eigene Schriftart
   (Inter) mit, die unser Design überschreibt. Alles hier zielt auf die
   tatsächlich live geprüften CheckoutWC-Klassen (per DevTools ermittelt,
   nicht geraten). !important, weil CheckoutWCs eigenes CSS teils gleiche
   oder höhere Spezifität hat. */

/* Schrift & Grundfarben zurück auf Theme-Design */
#cfw,
#cfw h1, #cfw h2, #cfw h3, #cfw h4,
#cfw p, #cfw label, #cfw span, #cfw a, #cfw li,
#cfw td, #cfw th, #cfw button, #cfw input, #cfw select, #cfw textarea {
  font-family: var(--th-font-body) !important;
  color: var(--th-humus-brown);
}
#cfw h1, #cfw h2, #cfw h3,
#cfw .cfw-panel-heading,
#cfw-billing-methods h3,
.cfw-shipping-methods-heading {
  font-family: var(--th-font-display) !important;
  color: var(--th-deep-moss);
}

/* page.php (Standard-Seiten-Template, das die Kasse-Seite nutzt) begrenzt
   Textseiten bewusst auf Lesebreite (.th-page-content { max-width: 76ch }
   — gedacht für Impressum/AGB & Co.). Für den zweispaltigen Checkout ist
   das viel zu schmal (das Formular hätte kaum noch Platz neben der
   400px-Bestellübersicht) — auf der Kasse-Seite daher die normale
   Container-Breite wie im Rest des Shops verwenden. */
.woocommerce-checkout .th-page-content { max-width: var(--th-max-width); }

/* Zwei-Spalten-Layout: CheckoutWCs eigenes Bootstrap-artiges .row/.col-lg-*
   Grid läuft ohne geladenes Bootstrap ins Leere (Spalten sind zusammen
   breiter als der Container, brechen um) — deshalb rendert die
   Bestellübersicht unter statt neben dem Formular. Wir ersetzen es durch
   ein eigenes, verlässliches Grid. */
form#checkout.woocommerce-checkout.row {
  display: grid !important;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: start;
}
#order_review.col-lg-7,
#cfw-cart-summary.col-lg-5 {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}
@media (max-width: 900px) {
  form#checkout.woocommerce-checkout.row { grid-template-columns: 1fr; }
}

/* Schritt-Breadcrumb (Warenkorb > Information > Versand > Zahlung) */
#cfw-breadcrumb.etabs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  gap: 6px;
  font-family: var(--th-font-mono) !important;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
#cfw-breadcrumb.etabs li { display: flex; align-items: center; gap: 6px; }
#cfw-breadcrumb.etabs li:not(:last-child)::after { content: "›"; margin-left: 6px; color: rgba(59, 42, 30, .35); text-transform: none; letter-spacing: 0; }
#cfw-breadcrumb.etabs a { color: rgba(59, 42, 30, .5) !important; }
#cfw-breadcrumb.etabs li.active a,
#cfw-breadcrumb.etabs a.active { color: var(--th-deep-moss) !important; font-weight: 700; }

/* Bestellübersicht-Karte (rechte Spalte) */
#cfw-cart-summary-content {
  background: var(--th-white);
  border-radius: var(--th-radius-md);
  padding: 24px;
  box-shadow: var(--th-shadow-soft);
}
table.cfw-cart-table.cfw-module { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
table.cfw-cart-table .cfw-cart-item-image-wrap img {
  width: 60px;
  border-radius: var(--th-radius-sm);
}
table.cfw-cart-table .cfw-cart-item-title { font-weight: 600; color: var(--th-humus-brown); }
/* Germanized-Zusatzangaben (Lieferzeit, Grundpreis-Einheiten) in CheckoutWCs
   Warenkorb-Zusammenfassung: Root Cause gefunden (Germanized liefert seinen
   eigenen technischen Feld-Schluessel, z. B. "gzd-delivery_time", als Label,
   statt einer Uebersetzung; der functions.php-Fix in Abschnitt 7 sorgt zwar
   jetzt dafuer, dass CheckoutWC WooCommerces eigenen Formatierer nutzt, aber
   auch der zeigt denselben von Germanized gelieferten Schluessel an). Auf
   Wunsch bleibt die Zeile bis auf Weiteres ausgeblendet, statt den kaputten
   Text anzuzeigen. */
.cfw-cart-item-data { display: none; }
table.cfw-cart-table td, table.cfw-cart-table th { padding: 12px 8px; border-bottom: 1px solid rgba(59, 42, 30, .08); vertical-align: top; }
#cfw-cart-summary-content table.cfw-module th,
#cfw-cart-summary-content table.cfw-module td { padding: 10px 4px; border-bottom: 1px solid rgba(59, 42, 30, .1); }
#cfw-cart-summary-content table.cfw-module .order-total .amount,
#cfw-cart-summary-content table.cfw-module .order-total strong {
  font-family: var(--th-font-body) !important;
  font-weight: 700;
  color: var(--th-humus-brown) !important;
}
#cfw-mobile-cart-header { font-family: var(--th-font-body) !important; }

/* Versandarten-Liste */
ul.cfw-shipping-methods-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
ul.cfw-shipping-methods-list li .cfw-shipping-method-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(59, 42, 30, .18);
  border-radius: var(--th-radius-sm);
  padding: 14px 16px;
  background: var(--th-white);
  transition: border-color .15s ease, background .15s ease;
}
ul.cfw-shipping-methods-list li:has(input:checked) .cfw-shipping-method-inner {
  border-color: var(--th-basking-amber);
  background: var(--th-glass-sage-tint);
}

/* Zahlungsarten-Liste + "Rechnungsadresse"-Auswahl — beide nutzen dieselben
   .cfw-radio-reveal-* Klassen. */
ul.wc_payment_methods.payment_methods,
ul.cfw-radio-reveal-group {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cfw-radio-reveal-li {
  border: 1px solid rgba(59, 42, 30, .18) !important;
  border-radius: var(--th-radius-sm);
  padding: 14px 16px;
  background: var(--th-white);
  transition: border-color .15s ease, background .15s ease;
}
.cfw-radio-reveal-li.cfw-active {
  border-color: var(--th-basking-amber) !important;
  background: var(--th-glass-sage-tint);
}
.cfw-radio-reveal-label { font-weight: 600 !important; color: var(--th-humus-brown) !important; }

/* Eingabefelder: Fokus-Farbe an Theme angleichen */
#cfw input.input-text:focus,
#cfw select:focus,
#cfw textarea:focus { border-color: var(--th-canopy-green) !important; outline: none; }
.cfw-floatable-label { color: var(--th-humus-brown) !important; }

/* Weiter-/Kaufen-Button (identisch auf allen drei Schritten) */
/* Gleiche Optik wie die anderen primären Aktions-Buttons im Shop
   ("In den Warenkorb", Hero-/Newsletter-CTA): Amber-Fläche, Moosgrün-Text,
   Glow-Schatten, leichtes Anheben bei Hover — statt einer eigenen,
   abweichenden dunkelgrünen Variante nur für die Kasse. */
.cfw-primary-btn,
.cfw-primary-btn * {
  background: none !important;
  color: var(--th-deep-moss) !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-family: var(--th-font-body) !important;
  font-size: 1rem !important;
  padding: 0 !important;
}
.cfw-primary-btn {
  display: inline-block;
  background: var(--th-basking-amber) !important;
  border-radius: var(--th-radius-sm) !important;
  padding: 16px 30px !important;
  box-shadow: var(--th-shadow-glow);
  cursor: pointer;
  transition: transform .18s ease;
}
.cfw-primary-btn:hover { transform: translateY(-2px); }
.cfw-bottom-controls {
  flex-wrap: wrap !important;
  gap: 12px;
}
.cfw-bottom-controls .cfw-primary-btn {
  white-space: nowrap;
  flex: 0 0 auto !important;
}
#place_order { width: 100%; padding: 16px; font-size: 1rem; }

/* Mein Konto */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--th-radius-sm);
  color: var(--th-humus-brown);
  font-weight: 500;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--th-glass-sage-tint);
  color: var(--th-deep-moss);
}
.woocommerce-account .th-shop-main {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 780px) { .woocommerce-account .th-shop-main { grid-template-columns: 1fr; } }
.woocommerce-MyAccount-content { background: var(--th-white); border-radius: var(--th-radius-md); padding: 28px; box-shadow: var(--th-shadow-soft); }
.woocommerce-MyAccount-content table.shop_table { box-shadow: none; margin-bottom: 0; }
.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}
@media (max-width: 640px) { .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr !important; } }
.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address,
.woocommerce-MyAccount-content .woocommerce-Addresses address {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.woocommerce-MyAccount-content address { line-height: 1.7; margin-bottom: 12px; }
.woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 16px;
  flex-wrap: wrap;
  float: none !important;
  width: auto !important;
  margin-bottom: 12px !important;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  margin: 0 !important;
  font-size: 1.1rem !important;
  float: none !important;
}
.woocommerce-MyAccount-content .woocommerce-Address-title a {
  font-size: .85rem;
  white-space: nowrap;
}
.woocommerce-MyAccount-content fieldset { border: 1px solid rgba(59,42,30,.15); border-radius: var(--th-radius-sm); padding: 16px; margin-bottom: 16px; }
.woocommerce-MyAccount-content fieldset legend { padding: 0 8px; font-weight: 600; color: var(--th-deep-moss); }

/* Genereller Sicherheitsnetz-Reset für den kompletten "Mein Konto"-Bereich
   (Dashboard, Bestellungen, Downloads, Adressen, Wunschliste …) — statt
   jede Unterseite einzeln zu jagen: WooCommerce nutzt hier an vielen
   Stellen noch sein altes Float-Layout, das gegen unsere Flex-/Grid-Regeln
   gewinnt, solange es nicht explizit ausgehebelt wird. */
.woocommerce-MyAccount-content div,
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content ul,
.woocommerce-MyAccount-content li,
.woocommerce-MyAccount-content table,
.woocommerce-MyAccount-content a,
.woocommerce-MyAccount-content h1,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content h4 {
  float: none !important;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td { text-align: left; }
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads-file { display: inline-block; }

/* WooCommerce-Meldungen (Gutschein-Fehler, "In den Warenkorb gelegt",
   Checkout-Formularfehler usw.) — lief bisher komplett im WordPress-
   Grundzustand, betrifft den ganzen Shop, nicht nur eine einzelne Seite. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  list-style: none !important;
  margin: 0 0 24px !important;
  padding: 16px 20px !important;
  border-radius: var(--th-radius-md);
  font-size: .92rem;
  line-height: 1.5;
  box-shadow: var(--th-shadow-soft);
}
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* Fehler (z. B. ungültiger Gutschein, Pflichtfeld fehlt) */
.woocommerce-error {
  background: #fbeae6;
  color: #7a2e1c;
  border-left: 4px solid var(--th-error);
}
.woocommerce-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23B3432B' stroke-width='1.8'/%3E%3Cpath d='M12 8v5M12 16h.01' stroke='%23B3432B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Erfolg (z. B. "In den Warenkorb gelegt", Gutschein erfolgreich angewendet) */
.woocommerce-message {
  background: var(--th-glass-sage-tint);
  color: var(--th-deep-moss);
  border-left: 4px solid var(--th-canopy-green);
}
.woocommerce-message::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%234C7A3D' stroke-width='1.8'/%3E%3Cpath d='M8.5 12.5l2.3 2.3L16 10' stroke='%234C7A3D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Reine Info-Hinweise (z. B. "Warenkorb ist leer") */
.woocommerce-info {
  background: var(--th-stone-cream);
  color: var(--th-humus-brown);
  border-left: 4px solid var(--th-basking-amber);
}
.woocommerce-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23D9A428' stroke-width='1.8'/%3E%3Cpath d='M12 11v5M12 8h.01' stroke='%23D9A428' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Mehrere Fehler auf einmal (z. B. Checkout-Pflichtfelder) — Liste statt Fließtext */
.woocommerce-error {
  flex-direction: column;
  align-items: stretch;
}
.woocommerce-error li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-error li:not(:last-child) { margin-bottom: 8px !important; }
.woocommerce-error li::before {
  content: "";
  flex-shrink: 0;
  width: 6px; height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--th-error);
}
/* Der "Zum Warenkorb"/"Erneut versuchen"-Button, den WooCommerce oft direkt
   in die Meldung mit reinpackt (z. B. bei "Produkt bereits im Warenkorb"). */
.woocommerce-error a.button,
.woocommerce-message a.button,
.woocommerce-info a.button {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--th-canopy-green);
  color: var(--th-white);
  padding: 8px 16px;
  border-radius: var(--th-radius-sm);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.woocommerce-error a.button:hover,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover { background: var(--th-deep-moss); }

/* ==========================================================================
   10. BLOG / SEITEN / SUCHE / 404 / KOMMENTARE
   ========================================================================== */
.th-page-hero {
  background: linear-gradient(180deg, var(--th-glass-sage-tint) 0%, var(--th-glass-sage) 100%);
  padding: 56px 0 0;
}
.th-page-hero .th-container { padding-bottom: 24px; }
.th-page-content { padding: 40px 0 72px; max-width: 76ch; }
.th-page-content img { border-radius: var(--th-radius-md); }
@media (max-width: 780px) {
  .th-page-hero { padding-top: 36px; }
  .th-page-content { padding: 24px 0 48px; }
}

.th-single-post-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  padding: 40px 0 72px;
}
@media (max-width: 860px) { .th-single-post-layout { grid-template-columns: 1fr; } }
.th-post-thumb { border-radius: var(--th-radius-lg); overflow: hidden; margin-bottom: 24px; box-shadow: var(--th-shadow-soft); }
.th-post-content { max-width: 72ch; }
.th-post-meta { margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(59,42,30,.12); font-size: .85rem; opacity: .75; }
.th-blog-sidebar .th-widget {
  background: var(--th-white);
  border-radius: var(--th-radius-md);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--th-shadow-soft);
}

.th-search-form { display: flex; gap: 10px; max-width: 440px; }
.th-search-field {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--th-radius-sm);
  border: 1px solid rgba(59,42,30,.25);
  background: var(--th-white);
}
.th-search-submit {
  background: var(--th-basking-amber);
  border: none;
  border-radius: var(--th-radius-sm);
  padding: 0 18px;
  font-weight: 700;
  cursor: pointer;
  color: var(--th-deep-moss);
}

.th-404-content { padding: 40px 0 80px; max-width: 56ch; }
.th-404-content .th-search-form { margin: 20px 0 28px; }

.th-comments { margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(59,42,30,.12); }
.th-comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.th-comment-list .comment-body {
  background: var(--th-white);
  border-radius: var(--th-radius-md);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--th-shadow-soft);
}
.th-comment-list ol.children { list-style: none; padding-left: 32px; }
.th-comment-form input,
.th-comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--th-radius-sm);
  border: 1px solid rgba(59,42,30,.25);
  margin-bottom: 14px;
  font-family: var(--th-font-body);
}

/* Vertrauens-Duo (Startseite) */
.th-trust-duo { background: var(--th-stone-cream); }
.th-trust-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(59, 42, 30, .1);
}
@media (max-width: 700px) { .th-trust-duo-grid { grid-template-columns: 1fr; } }
.th-trust-duo-item {
  background: var(--th-white);
  padding: 24px clamp(24px, 6vw, 64px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.th-trust-duo-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--th-glass-sage-tint);
  color: var(--th-canopy-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.th-trust-duo-title { font-weight: 600; color: var(--th-deep-moss); margin: 0 0 2px; }
.th-trust-duo-text { font-size: .88rem; opacity: .75; margin: 0; }

/* Vertrauens-Badges (Startseite, unten) */
.th-trust-badges { background: var(--th-white); border-top: 1px solid rgba(59, 42, 30, .08); }
.th-trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 48px 24px;
}
@media (max-width: 700px) { .th-trust-badges-grid { grid-template-columns: 1fr; } }
.th-trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  color: var(--th-canopy-green);
}
.th-trust-badge p { font-weight: 600; color: var(--th-deep-moss); margin: 0; font-size: .95rem; }
.th-trust-badge span { font-size: .82rem; color: var(--th-humus-brown); opacity: .75; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.th-site-footer {
  background: var(--th-deep-moss);
  color: var(--th-glass-sage);
  padding: 64px 0 0;
}
.th-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1.3fr;
  gap: 32px;
  padding-bottom: 56px;
}
@media (max-width: 960px) { .th-footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .th-footer-grid { grid-template-columns: 1fr 1fr; } }
.th-footer-grid h4 { color: var(--th-white); font-size: .95rem; margin-bottom: 14px; }
.th-footer-grid ul { list-style: none; margin: 0; padding: 0; }
.th-footer-grid li { margin-bottom: 9px; }
.th-footer-grid a { color: var(--th-glass-sage); font-size: .9rem; }
.th-footer-grid a:hover { color: var(--th-basking-amber); }

.th-footer-newsletter .th-btn {
  margin-bottom: 14px;
  padding: 12px 22px;
  font-size: .9rem;
}
.th-footer-newsletter__fine {
  font-size: .78rem;
  color: var(--th-glass-sage);
  opacity: .7;
  line-height: 1.5;
  margin: 0;
}
.th-footer-social {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.th-footer-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(242, 239, 230, .1);
  color: var(--th-glass-sage);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.th-footer-social a:hover { background: var(--th-basking-amber); color: var(--th-deep-moss); }

.th-footer-wordmark-wrap {
  border-top: 1px solid rgba(242, 239, 230, .12);
  padding: 40px 0;
}
.th-footer-wordmark {
  text-align: center;
  font-family: var(--th-font-display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 500;
  color: var(--th-white);
  letter-spacing: -.01em;
}
.th-footer-wordmark span { color: var(--th-basking-amber); }

.th-footer-legal-links {
  border-top: 1px solid rgba(242, 239, 230, .12);
  padding: 22px 0;
}
.th-footer-legal-nav {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 0;
}
.th-footer-legal-nav a {
  color: var(--th-glass-sage);
  font-weight: 600;
  font-size: .88rem;
}
.th-footer-legal-nav a:hover { color: var(--th-basking-amber); }

.th-footer-legal-text {
  border-top: 1px solid rgba(242, 239, 230, .12);
  padding: 28px 0;
}
.th-footer-legal-text .th-container {
  max-width: 900px;
  text-align: center;
}
.th-footer-legal-text p {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--th-glass-sage);
  opacity: .7;
  margin: 0 0 10px;
}

.th-footer-bottom-bar {
  background: var(--th-humus-brown);
  padding: 18px 0;
}
.th-footer-bottom-bar span {
  display: block;
  text-align: center;
  font-size: .82rem;
  color: rgba(242, 239, 230, .75);
}

/* ==========================================================================
   12. ZURÜCK-NACH-OBEN-BUTTON
   ========================================================================== */
/* Bewusst unten LINKS statt rechts positioniert: CheckoutWCs eigener
   schwebender Seitenwagen-Button sitzt (falls aktiviert) standardmäßig unten
   rechts — so gibt es keine Überlappung der beiden Buttons. */
.th-back-to-top {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--th-basking-amber);
  color: var(--th-deep-moss);
  box-shadow: var(--th-shadow-glow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.th-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.th-back-to-top:hover {
  transform: translateY(-2px);
}
@media (max-width: 782px) {
  .th-back-to-top {
    left: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .th-back-to-top {
    transition: opacity .2s ease, visibility .2s;
  }
  .th-back-to-top:hover {
    transform: none;
  }
}

/* ==========================================================================
   13. NATIVER WOOCOMMERCE-BLOCKS-CHECKOUT — NUR CHECKBOXEN
   ==========================================================================
   Bewusst NUR die Checkboxen (Rechnungsadresse, AGB-Zustimmung,
   Bewertungs-Einwilligung usw.), sonst nichts an diesem Checkout verändert.
   Farbe des Häkchens auf Theme-Grün statt WooCommerce-Standardblau/-Schwarz. */
.wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark {
  color: var(--th-canopy-green) !important;
}
.wc-block-components-checkbox__input:focus + .wc-block-components-checkbox__mark {
  outline: 2px solid var(--th-canopy-green);
  outline-offset: 2px;
}