/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme – PoppyVers
 Author:       PoppyVers
 Template:     woodmart
 Version:      1.2.0
 Text Domain:  woodmart
*/

/* ===================================================
   FIGTREE FONT – PoppyVers Global
   =================================================== */

/* Figtree wird seit 2026-08-29 LOKAL geladen: fonts/figtree.css, eingebunden
   ueber poppyvers_enqueue_figtree() in functions.php. Kein @import auf Google —
   das uebertrug die Besucher-IP ohne Einwilligung (LG Muenchen I, 3 O 17493/20). */

:root {
  /* Font */
  --poppy-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --poppy-letter-spacing: -0.5px;
  --poppy-letter-spacing-tight: -1px;

  /* Primaerfarben */
  /* Markenfarbe. Bis 2026-08-31 lief hier #7B9E87 (Salbei), waehrend die
     Top-Leiste bereits #83B735 trug — vier Gruentoene parallel. Vereinheitlicht. */
  --poppy-primary: #83B735;
  /* Lesevariante fuer Text und Preise auf hellem Grund.
     #83B735 pur erreicht auf Creme nur 2,25:1, WCAG verlangt 4,5:1 fuer Fliesstext.
     #557722 ist der HELLSTE Ton derselben Farbfamilie (84°/55%), der 4,89:1 schafft.
     ⛔ Nicht aufhellen, ohne den Kontrast neu zu rechnen. */
  --poppy-primary-dark: #557722;
  --poppy-primary-light: #9BB8A5;
  --poppy-accent: #C08050;
  --poppy-accent-light: #D4A070;
  --poppy-success: #6B8F71;

  /* Hintergruende */
  --poppy-bg: #FAF8F5;
  --poppy-bg-alt: #F5F0EA;
  --poppy-card: #FEFCFA;
  --poppy-hover: #EDE8E0;

  /* Text */
  --poppy-text: #4A3728;
  --poppy-text-light: #6B5B4E;
  --poppy-text-muted: #9B8B7E;

  /* Borders */
  --poppy-border: #E8DDD0;
  --poppy-border-light: #F0E8DE;
}

/* ===================================================
   FONT – Globaler Reset
   =================================================== */

body,
body.woodmart-theme,
input, textarea, select, button,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--poppy-font) !important;
  letter-spacing: var(--poppy-letter-spacing);
}

/* Wildcard-Font für Theme + WCFM, aber Icon-Fonts ausnehmen */
.woodmart-theme *:not([class*="mce-i-"]):not(.mce-ico):not([class*="dashicons"]):not([class*="wcfmfa"]):not([class*="fa-"]),
.wcfm-container *:not([class*="mce-i-"]):not(.mce-ico):not([class*="dashicons"]):not([class*="wcfmfa"]):not([class*="fa-"]),
.wcfm_dashboard *:not([class*="mce-i-"]):not(.mce-ico):not([class*="dashicons"]):not([class*="wcfmfa"]):not([class*="fa-"]) {
  font-family: var(--poppy-font) !important;
  letter-spacing: var(--poppy-letter-spacing);
}

h1, h2, h3,
.page-title,
.entry-title,
.product_title,
.woodmart-heading {
  font-weight: 700;
  letter-spacing: var(--poppy-letter-spacing-tight);
}

body,
p,
.woocommerce-product-details__short-description,
.product-description {
  font-weight: 450;
  line-height: 1.65;
  letter-spacing: var(--poppy-letter-spacing);
}

.wcfm-container,
.wcfm_dashboard,
.wcfm-container h2,
.wcfm-container h3,
.wcfm_page_heading {
  font-family: var(--poppy-font) !important;
  letter-spacing: var(--poppy-letter-spacing);
}

.wcfm-content-container *:not([class*="mce-i-"]):not(.mce-ico):not([class*="dashicons"]):not([class*="wcfmfa"]):not([class*="fa-"]),
#wcfm-main-contentainer *:not([class*="mce-i-"]):not(.mce-ico):not([class*="dashicons"]):not([class*="wcfmfa"]):not([class*="fa-"]) {
  font-family: var(--poppy-font) !important;
  letter-spacing: var(--poppy-letter-spacing);
}

.footer-container,
.footer-container *:not([class*="dashicons"]):not([class*="fa-"]) {
  font-family: var(--poppy-font) !important;
  letter-spacing: var(--poppy-letter-spacing);
}

/* ===================================================
   1. GLOBALE HINTERGRUENDE + TEXTFARBEN
   =================================================== */

body,
body.woodmart-theme {
  background-color: var(--poppy-bg) !important;
  color: var(--poppy-text) !important;
}

body, p, span, div, li, td, th, label {
  color: var(--poppy-text);
}

a {
  color: var(--poppy-primary);
}
a:hover {
  color: var(--poppy-primary-dark);
}

/* Page Title + Breadcrumb */
.page-title,
.entry-title {
  color: var(--poppy-text) !important;
}

.woocommerce-breadcrumb,
.breadcrumb-trail {
  color: var(--poppy-text-muted) !important;
}
.woocommerce-breadcrumb a {
  color: var(--poppy-primary) !important;
}

/* ===================================================
   2. HEADER
   =================================================== */

/* Top-Bar */
.woodmart-top-bar,
.whb-top-bar-row {
  background-color: var(--poppy-primary) !important;
}

/* Header-Hintergrund */
.whb-main-header,
.whb-general-header {
  background-color: var(--poppy-bg) !important;
  border-bottom: 1px solid var(--poppy-border-light) !important;
}

/* Header Navigation – Semi-Bold */
.wd-nav a,
.wd-nav .menu-item a,
.main-nav a,
.woodmart-navigation a,
.wd-header-nav a,
header .menu > li > a,
.whb-row .menu > li > a,
.menu-item a,
nav a {
  color: var(--poppy-text) !important;
  font-weight: 600 !important;
  letter-spacing: var(--poppy-letter-spacing);
  text-transform: none;
}

.wd-nav a:hover,
header .menu > li > a:hover,
.whb-row .menu > li > a:hover {
  color: var(--poppy-primary) !important;
}

/* Aktiver Nav-Link */
.wd-nav .current-menu-item > a,
.menu > li.current-menu-item > a {
  color: var(--poppy-primary) !important;
}

/* ===================================================
   3. WCFM VENDOR DASHBOARD – SIDEBAR
   =================================================== */

/* Sidebar Hintergrund */
.wcfm_menu,
.wcfm-left-menu,
#wcfm-main-contentainer .wcfm_menu {
  background-color: var(--poppy-bg-alt) !important;
  border-right: 1px solid var(--poppy-border-light) !important;
}

/* Sidebar Menu-Items */
.wcfm_menu_items a,
.wcfm_menu_items span {
  font-family: var(--poppy-font) !important;
  font-weight: 500;
  letter-spacing: var(--poppy-letter-spacing);
  color: var(--poppy-text) !important;
  transition: all 0.2s ease;
}

/* Hover */
.wcfm_menu_items a:hover,
.wcfm_menu_items li:hover > a {
  background-color: var(--poppy-hover) !important;
  color: var(--poppy-primary) !important;
}

/* Aktiver Menuepunkt */
.wcfm_menu_items .active a,
.wcfm_menu_items .wcfm-menu-active a,
.wcfm_menu_items .current a {
  background-color: rgba(123, 158, 135, 0.12) !important;
  color: var(--poppy-primary) !important;
  border-left: 4px solid var(--poppy-primary) !important;
}

/* Sidebar Icons */
.wcfm_menu_items i,
.wcfm_menu_items .fa,
.wcfm_menu_items .wcfmfa {
  color: var(--poppy-primary) !important;
}

/* "Mein Shop" Label */
.wcfm-store-name,
.wcfm_menu_header {
  color: var(--poppy-text) !important;
  font-weight: 700;
}

/* ===================================================
   4. WCFM DASHBOARD – HAUPTBEREICH
   =================================================== */

.wcfm-container,
#wcfm-main-contentainer,
.wcfm_dashboard {
  background-color: var(--poppy-bg) !important;
}

/* Dashboard Karten/Boxen */
.wcfm-container .wcfm-container,
.wcfm_dashboard_box,
.wcfm-content-container > div {
  background-color: var(--poppy-card) !important;
  border: 1px solid var(--poppy-border-light) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(74, 55, 40, 0.06) !important;
}

/* Dashboard Ueberschriften */
.wcfm-container h2,
.wcfm-container h3,
.wcfm_page_heading {
  color: var(--poppy-text) !important;
}

/* Willkommens-Bereich */
.wcfm_dashboard_welcome {
  background: linear-gradient(135deg, var(--poppy-bg-alt), var(--poppy-card)) !important;
  border: 1px solid var(--poppy-border-light) !important;
  border-radius: 12px !important;
}

/* ===================================================
   5. STATISTIK-KARTEN
   =================================================== */

.wcfm_dashboard_stats,
.wcfm-stat-box,
.wcfm_dashboard_stats_block {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(74, 55, 40, 0.08) !important;
}

/* Umsatz – Salbeigruen */
.wcfm_dashboard_stats_block:nth-child(1),
.wcfm_dashboard_stats > div:nth-child(1) {
  background: linear-gradient(135deg, var(--poppy-primary), var(--poppy-primary-dark)) !important;
  color: white !important;
}
.wcfm_dashboard_stats_block:nth-child(1) *,
.wcfm_dashboard_stats > div:nth-child(1) * {
  color: white !important;
}

/* Einnahmen – Terrakotta */
.wcfm_dashboard_stats_block:nth-child(2),
.wcfm_dashboard_stats > div:nth-child(2) {
  background: linear-gradient(135deg, #C08050, #A06840) !important;
  color: white !important;
}
.wcfm_dashboard_stats_block:nth-child(2) *,
.wcfm_dashboard_stats > div:nth-child(2) * {
  color: white !important;
}

/* Artikel – Warmes Beige */
.wcfm_dashboard_stats_block:nth-child(3),
.wcfm_dashboard_stats > div:nth-child(3) {
  background: linear-gradient(135deg, #E8DDD0, #D4C4B0) !important;
  color: var(--poppy-text) !important;
}

/* Bestellungen – Sanftes Blaugrau */
.wcfm_dashboard_stats_block:nth-child(4),
.wcfm_dashboard_stats > div:nth-child(4) {
  background: linear-gradient(135deg, #8FA5B0, #7A919C) !important;
  color: white !important;
}
.wcfm_dashboard_stats_block:nth-child(4) *,
.wcfm_dashboard_stats > div:nth-child(4) * {
  color: white !important;
}

/* ===================================================
   6. BUTTONS
   =================================================== */

/* Primaere Buttons – Salbeigruen */
.wcfm_submit_button,
.button.wc-forward,
.woocommerce .button.alt,
.single_add_to_cart_button,
input[type="submit"],
.wcfm-action-button {
  background-color: var(--poppy-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700;
  letter-spacing: var(--poppy-letter-spacing-tight);
  text-transform: none;
  transition: all 0.2s ease;
}

.wcfm_submit_button:hover,
.button.wc-forward:hover,
.woocommerce .button.alt:hover,
.single_add_to_cart_button:hover,
input[type="submit"]:hover {
  background-color: var(--poppy-primary-dark) !important;
  box-shadow: 0 2px 8px rgba(123, 158, 135, 0.3) !important;
}

/* Sekundaere Buttons – Terrakotta Outline */
.wcfm-action-button.wcfm-action-button-secondary,
/* Umriss-Knoepfe im Shop.
   ⛔ body:not(.wcfm-store-setup) seit 10.09.2026 (Ziel 90, Schritt 3): Der WCFM-
   Einrichtungsassistent ist eine eigenstaendige Seite, laedt dieses Stylesheet aber mit.
   Ohne den Ausschluss traf die Regel auch seinen "Weiter"-Knopf — der Primaerknopf sah
   dort aus wie ein Sekundaerknopf, und die Beschriftung wurde von Laufweite und dem
   vierfachen text-shadow des Plugins gestaucht. Der Assistent bringt eigene Knopffarben
   aus den WCFM-Optionen mit; die sollen dort gelten. Die Website traegt die Klasse
   wcfm-store-setup nie und aendert sich durch diesen Ausschluss nicht. */
body:not(.wcfm-store-setup) .button:not(.alt) {
  background-color: transparent !important;
  color: var(--poppy-accent) !important;
  border: 2px solid var(--poppy-accent) !important;
  border-radius: 8px !important;
}
.wcfm-action-button.wcfm-action-button-secondary:hover,
body:not(.wcfm-store-setup) .button:not(.alt):hover {
  background-color: var(--poppy-accent) !important;
  color: white !important;
}

/* Knoepfe im WCFM-Einrichtungsassistenten (Ziel 90, Schritt 3, 10.09.2026).
   Der Assistent ist die erste Seite, die eine neue Verkaeuferin sieht. Drei Dinge
   werden hier geradegerueckt, alle am gerenderten Knopf gemessen:
   1. Grund war --poppy-primary #83B735 mit weisser Schrift = Kontrast 2,39.
      --poppy-primary-dark schafft 5,19 und ist die Lesevariante derselben Familie.
   2. Das Plugin legt einen vierfachen text-shadow auf, davon zwei in Lila (#a36597) —
      ein Rest der WCFM-Werksfarben. Der macht die Beschriftung unscharf.
   3. Die enge Laufweite des Themes staucht die kurze Knopfbeschriftung.
   Der Sekundaerknopf bleibt Umriss — er soll sich unterscheiden. */
body.wcfm-store-setup .wc-setup-actions .button-primary,
body.wcfm-store-setup .wc-setup-actions input.wcfm_submit_button {
  background-color: var(--poppy-primary-dark) !important;
  border: none !important;
  color: #ffffff !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  border-radius: 8px !important;
}
body.wcfm-store-setup .wc-setup-actions .button-primary:hover,
body.wcfm-store-setup .wc-setup-actions input.wcfm_submit_button:hover {
  background-color: var(--poppy-text) !important;
}
body.wcfm-store-setup .wc-setup-actions .button:not(.button-primary):not(.wcfm_submit_button) {
  color: var(--poppy-text-light) !important;
  border: 2px solid var(--poppy-border) !important;
  border-radius: 8px !important;
  letter-spacing: normal !important;
}

/* Warenkorb + allgemeine Buttons (Font) */
.button,
.btn,
.woocommerce .button,
.add_to_cart_button,
.single_add_to_cart_button,
.woodmart-button {
  font-weight: 700;
  letter-spacing: var(--poppy-letter-spacing-tight);
  text-transform: none;
}

/* ===================================================
   7. TABELLEN + LISTEN
   =================================================== */

.wcfm-container table,
.wcfm_dashboard table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--poppy-border-light) !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.wcfm-container table th {
  background-color: var(--poppy-bg-alt) !important;
  color: var(--poppy-text) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--poppy-border) !important;
}

.wcfm-container table td {
  border-bottom: 1px solid var(--poppy-border-light) !important;
  color: var(--poppy-text);
}

.wcfm-container table tr:hover td {
  background-color: var(--poppy-hover) !important;
}

/* ===================================================
   8. FORMULAR-FELDER
   =================================================== */

.wcfm-container input[type="text"],
.wcfm-container input[type="email"],
.wcfm-container input[type="number"],
.wcfm-container input[type="password"],
.wcfm-container textarea,
.wcfm-container select,
.woocommerce input[type="text"],
.woocommerce textarea,
.woocommerce select {
  background-color: var(--poppy-card) !important;
  border: 1.5px solid var(--poppy-border) !important;
  border-radius: 8px !important;
  color: var(--poppy-text) !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s ease;
}

/* Focus-State – Salbeigruen */
.wcfm-container input:focus,
.wcfm-container textarea:focus,
.wcfm-container select:focus,
.woocommerce input:focus,
.woocommerce textarea:focus {
  border-color: var(--poppy-primary) !important;
  box-shadow: 0 0 0 3px rgba(123, 158, 135, 0.15) !important;
  outline: none !important;
}

/* Kategorie-Box */
.wcfm-product-categories,
.wcfm-categories-checklist {
  background-color: var(--poppy-card) !important;
  border: 1.5px solid var(--poppy-border) !important;
  border-radius: 8px !important;
}

/* ===================================================
   9. BADGES + TAGS
   =================================================== */

.wcfm-membership-badge,
.membership_title {
  background-color: var(--poppy-accent) !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-weight: 600;
}

.wcfm-container .badge,
.tag-link,
.product-tag {
  background-color: rgba(192, 128, 80, 0.12) !important;
  color: var(--poppy-accent) !important;
  border: 1px solid rgba(192, 128, 80, 0.3) !important;
  border-radius: 6px !important;
}

/* Kleine Labels, Meta-Text */
.price,
.woocommerce-Price-amount,
.badge,
.onsale,
.product-meta,
.posted_in,
.tagged_as,
small,
.small {
  font-weight: 500;
  letter-spacing: 0;
}

/* ===================================================
   10. UPLOAD/GALERIE BUTTONS
   =================================================== */

.wcfm-gallery-button,
.wcfm_gallery_upload,
[class*="gallery"] .button,
.multi_input_holder .button {
  background-color: var(--poppy-primary) !important;
  border-color: var(--poppy-primary) !important;
}

/* ===================================================
   11. SHOP-SEITE PRODUKTKARTEN
   =================================================== */

.product-grid-item .content-product-imagin,
.wd-product,
.product-element {
  background-color: var(--poppy-card) !important;
  border-radius: 12px !important;
  border: 1px solid var(--poppy-border-light) !important;
  transition: all 0.3s ease;
}

.product-grid-item:hover .content-product-imagin,
.wd-product:hover {
  box-shadow: 0 4px 16px rgba(74, 55, 40, 0.1) !important;
  border-color: var(--poppy-border) !important;
}

.product-title,
.wd-entities-title,
.woodmart-product-title {
  font-weight: 600;
  letter-spacing: var(--poppy-letter-spacing-tight);
  line-height: 1.3;
}

/* Preis – Terrakotta */
.price,
.woocommerce-Price-amount {
  color: var(--poppy-accent) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Sale Badge */
.onsale {
  background-color: var(--poppy-accent) !important;
  color: white !important;
  border-radius: 6px !important;
}

/* ===================================================
   12. FOOTER
   =================================================== */

.footer-container,
.woodmart-footer {
  background-color: var(--poppy-text) !important;
  color: var(--poppy-bg) !important;
}

.footer-container a {
  color: var(--poppy-primary-light) !important;
}

/* ===================================================
   RESPONSIVE – Mobile & Tablet
   =================================================== */

/* Tablets (iPad) */
@media (max-width: 1024px) {
  body {
    font-size: 15px;
    letter-spacing: -0.3px;
  }

  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
}

/* Mobile Phones */
@media (max-width: 576px) {
  body {
    font-size: 14px;
    letter-spacing: -0.2px;
  }

  h1 { font-size: 24px; font-weight: 700; }
  h2 { font-size: 20px; font-weight: 700; }
  h3 { font-size: 17px; font-weight: 600; }

  .button,
  .btn,
  .woocommerce .button {
    font-size: 15px;
    font-weight: 600;
    padding: 12px 24px;
  }
}

/* -------------------------------------------------------
   Keine-KI-Muster-Kodex Badge Styles
------------------------------------------------------- */
.kk-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.kk-card-badge img {
    display: block;
}
.kk-product-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 14px;
    font-size: 13px;
    color: var(--poppy-primary-dark);
}
.kk-product-badge a {
    color: var(--poppy-primary-dark);
    text-decoration: underline;
}
.kk-trust-section {
    border-top: 1px solid #dceee6;
    border-bottom: 1px solid #dceee6;
}
/* Kodex-Seite */
.kodex-page {
    max-width: 800px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════
   FUSSZEILE — Schrift auf dunklem Grund (#4A3728)
   ══════════════════════════════════════════════════════════════════════
   Befund 01.09.2026: Der Grund war laengst #4A3728, die Schrift darauf
   aber unlesbar — Widget-Ueberschriften #333333 ergaben 1,12:1, der
   Fliesstext stand in der HINTERGRUNDFARBE selbst und damit bei 1,0:1.
   Sichtbar wurde das erst, als die Fusszeile ueberhaupt wieder ausgegeben
   wurde; sie war ueber die Theme-Option `disable_footer` abgeschaltet.

   Alle Werte gegen #4A3728 gerechnet, WCAG AA verlangt 4,5:1:
     #FAF8F5  Ueberschriften  10,60:1
     #E0D6CB  Fliesstext       7,84:1
     #C9D9C6  Links            7,61:1
     #A8D45C  Link  :hover     6,55:1   (= "Vers" der dunklen Wortmarke)
   ⛔ Nicht abdunkeln, ohne neu zu rechnen.                             */

.wd-footer .widgettitle,
.wd-footer .widget-title,
.wd-footer .widget > h5,
.wd-footer .wd-widget > h5 {
	color: #FAF8F5;
	letter-spacing: .02em;
}

.wd-footer,
.wd-footer p,
.wd-footer li,
.wd-footer .widget_text {
	color: #E0D6CB;
}

.wd-footer a {
	color: #C9D9C6;
}

.wd-footer a:hover,
.wd-footer a:focus-visible {
	color: #A8D45C;
}

.wd-footer .wd-copyrights {
	color: #E0D6CB;
	border-top: 1px solid rgba(250, 248, 245, .14);
}

/* ──────────────────────────────────────────────────────────────────────
   Bezahlarten in der Fusszeile — "Sicher bezahlen"
   ──────────────────────────────────────────────────────────────────────
   Die Marken sind KEINE Auswahl nach Geschmack, sondern der gemessene
   Stand aus WooPayments (Konto acct_1Tyq8S…, DE, live, payments_enabled):
     upe_enabled_payment_method_ids = ['card']
     woocommerce_payments_apple_pay / google_pay / amazon_pay = enabled 1
   NICHT aktiv und deshalb NICHT gezeigt: PayPal, Klarna, SEPA-Lastschrift,
   Rechnung, Vorkasse, Nachnahme. Mit einer Zahlungsart zu werben, die es an
   der Kasse nicht gibt, ist abmahnfaehig — vor jeder Aenderung hier den
   Gateway-Stand nachmessen, nicht aus dem Gedaechtnis ergaenzen.

   Die Symbole brauchen eine helle Flaeche: es sind farbige Markenlogos auf
   transparentem Grund, teils mit dunkler Schrift. Auf #4A3728 verschwaenden
   sie. Genau daran ist die Vorgaengerloesung gescheitert — ein Demo-PNG des
   Themes mit `filter: brightness(0) invert(1)`, das jede Flaeche weiss
   faerbte und sechs graue Kaestchen ergab.                              */

.pv-zahlung-block {
	display: inline-flex;
	flex-direction: column;
	gap: 9px;
	align-items: flex-end;
}

.pv-zahlung-titel {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #C9BFB2;            /* 5,49:1 auf #4A3728 */
	white-space: nowrap;
}

.pv-zahlung-liste {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.pv-zahlung {
	width: 52px;
	height: 33px;
	padding: 4px 5px;
	background: #FFFFFF;
	border-radius: 4px;
	object-fit: contain;
	box-sizing: border-box;
	display: block;
}

/* Untere Leiste seit 02.09.2026: EIN Stapel (Beschriftung, Symbole, © Jahr) — die Beschriftung richtet sich
   an der Breite der Symbolreihe aus, nicht an der Seite. „Zwei Dinge, die einzeln zentriert sind, stehen nicht
   übereinander.“ Inline-Styles im Markup sind das Netz gegen gecachtes CSS. */
.pv-bezahlen { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: 100%; }
.pv-bezahlen .pv-symbole { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pv-bezahlen .pv-zahlung-titel { white-space: nowrap; }
.pv-fuss-copy { font-size: 12px; color: #C9BFB2; opacity: .85; line-height: 1.5; }
.wd-copyrights.wd-layout-centered .wd-col { justify-content: center; text-align: center; }

@media (max-width: 768px) {
	.pv-zahlung-block:not(.pv-fuss-stapel) { align-items: flex-start; }
	.pv-zahlung-block:not(.pv-fuss-stapel) .pv-zahlung-liste { justify-content: flex-start; }
}

/* ──────────────────────────────────────────────────────────────────────
   Suchleiste im Kopfbereich — Text lief unter die Kategorieauswahl
   ──────────────────────────────────────────────────────────────────────
   Befund 01.09.2026, im Browser gemessen statt geraten:

     form.searchform   373 px   position: relative
     Kategorie-Knopf   172 px   position: ABSOLUTE, beginnt 155 px im Feld
     Lupe               46 px   position: ABSOLUTE
     input.s           373 px   padding-right: 14 px   <- zu wenig

   Beide Bedienelemente liegen ABSOLUT ueber dem Eingabefeld. Das Feld
   reserviert ihnen aber keinen Platz — der Platzhaltertext lief einfach
   darunter weiter. Gemessene Ueberlappung: 218 px = 172 + 46.

   ⚠️ Der erste Versuch war `min-width: 0` samt `text-overflow`. Er hat
   gegriffen (im Browser stand danach minW=0px) und trotzdem nichts
   geaendert — es war die falsche Stellschraube. Nicht der Platz fehlte,
   sondern der Innenabstand. Ein Grün am Selektor ist kein Gruen am Problem.

   224 px = 218 gemessen + 6 Luft. Feste Groesse, weil beide Elemente
   absolut liegen und nicht mitschrumpfen; unter 1024 px rendert WoodMart
   ohnehin den mobilen Kopf ohne Kategorieauswahl.                       */

.whb-header form.searchform.wd-with-cat input.s,
.whb-header form.searchform.wd-with-cat input[type="text"] {
	padding-right: 224px !important;   /* Theme setzt 14px mit hoeherer Spezifitaet */
	text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════
   PRODUKTKACHEL — 268 x 268, Stand 01.09.2026 (Gesamtanweisung A2)
   ══════════════════════════════════════════════════════════════════════
     Bild                       201    4:3, object-fit: contain
     Abstand                      5
     Titel, 2 Zeilen             30    am Wort abbrechen
     Abstand                      4
     Preis links · Shop rechts   20    eine gemeinsame Zeile
     Abstand unten                8
     ────────────────────────────────
                                268

   `contain`, nie `cover`: Verkaeufer schreiben Text auf ihre Bilder,
   `cover` schneidet ihn ab. Raender in #F5EFE6, dann wirken sie gewollt.

   ⚠️ VIER FALLEN, alle gemessen:

   1. `.wd-product-wrapper` hat eine EIGENE Hoehe. Nur die Kachel auf 268
      zu setzen reicht nicht — der Wrapper laeuft ueber und die unterste
      Zeile wird stillschweigend abgeschnitten.

   2. Das Shop-LOGO ist 25x25 in einer 13-px-Zeile und ragte gemessen
      12 px unter die Karte. Auf 14x14 begrenzt.

   3. In `.price` steckt Vorlesetext („Ursprünglicher Preis war: …").
      Unsichtbar, aber er sprengt die Zeile.

   4. Flex verteilt den Restplatz auf die Zwischenraeume, wenn man ihn
      laesst: gemessen 16–18 px Luecken bei 4–6 px Rand, wodurch die
      letzte Zeile aus der Karte geschoben wurde. `justify-content:
      flex-start` haelt alles oben.

   🔑 In einer Kachel mit fester Hoehe darf genau EIN Element kuerzbar
   sein, und das muss der Titel sein. Alles andere bekommt reservierten
   Platz. Wer abschneidet statt zu reservieren, verliert das, was
   zufaellig zuletzt kommt — und merkt es nicht, weil abgeschnitten
   aussieht wie nicht vorhanden.

   ⚠️ Jede Eigenschaft braucht Vorrang: ohne !important setzt sich das
   Theme durch (belegt — Bildhoehe mit griff, Titelhoehe ohne nicht).
   ══════════════════════════════════════════════════════════════════════ */

.wd-products.wd-grid-g {
	align-items: stretch !important;
}

/* Kategoriekacheln quadratisch */
.product-category .wd-cat-image img,
.product-category a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

/* Bei ZWEI Kacheln mittig statt linksbuendig (A6) */
.wd-products.wd-grid-g:has(> .product-category:nth-child(2):last-child) {
	justify-content: center !important;
}

/* ── Karte ───────────────────────────────────────────────────────────── */
.wd-products .wd-product-wrapper {
	height: 268px !important;
	min-height: 268px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	overflow: hidden !important;
	position: relative !important;
	padding-bottom: 28px !important;   /* Platz fuer die Preis/Shop-Zeile */
}

/* ── Bildflaeche 201 px (4:3) — alle drei Ebenen, siehe Falle 1 ─────── */
.wd-products .wd-product-thumb,
.wd-products .wd-product-img-link,
.wd-products .wd-product-img-hover {
	height: 201px !important;
	min-height: 201px !important;
	max-height: 201px !important;
	flex: 0 0 201px !important;
	background: #F5EFE6 !important;
	overflow: hidden !important;
}

.wd-products .wd-product-thumb img {
	height: 201px !important;
	width: 100% !important;
	object-fit: contain !important;
	background: #F5EFE6 !important;
	display: block !important;
}

/* ── Titel, zwei Zeilen, am Wort abbrechen ──────────────────────────── */
.wd-products .wd-entities-title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	height: 30px !important;
	flex: 0 0 30px !important;
	line-height: 15px !important;
	margin: 5px 12px 0 !important;
	font-size: 12px !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
}

.wd-products .wd-entities-title a {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.wd-products .wd-product-cats {
	display: none !important;
}

/* Abzeichen aufs Bild statt in den Textfluss (nahm 38 px) */
.wd-products .kk-card-badge {
	position: absolute !important;
	top: 6px !important;
	right: 6px !important;
	margin: 0 !important;
	z-index: 3 !important;
}

/* ── Preis links · Shop rechts, EINE Zeile am unteren Rand ──────────── */
.wd-products .price {
	position: absolute !important;
	left: 12px !important;
	bottom: 8px !important;
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 20px !important;
	max-width: 45% !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.wd-products .price .screen-reader-text {   /* Falle 3 */
	display: none !important;
}

.wd-products .wcfmmp_sold_by_container {
	position: absolute !important;
	right: 14px !important;
	bottom: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 11px !important;
	height: 20px !important;
	line-height: 20px !important;
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	max-width: 55% !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

.wd-products .wcfmmp_sold_by_container .wcfm-clearfix {
	display: none !important;
}

/* Falle 2 — Logo begrenzen */
.wd-products .wcfmmp_sold_by_logo {
	width: 14px !important;
	height: 14px !important;
	flex: 0 0 14px !important;
	object-fit: contain !important;
	margin: 0 !important;
	border-radius: 50% !important;
}

.wd-products .wcfmmp_sold_by_wrapper {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.wd-products .wcfmmp_sold_by_label {
	display: none !important;   /* „Shop:" – der Name genuegt */
}

/* A3 · Bewertung — bis zur ERSTEN ECHTEN erscheint hier nichts.
   Es gibt keine Produktbewertung; angezeigt wuerde die SHOP-Bewertung
   aus .wcfmmp_sold_by_container, aktuell ueberall „0 von 5" — fuenf graue
   Sterne auf jedem Artikel. Das liest sich nicht als „noch nicht
   bewertet", sondern als „bewertet und schlecht befunden".

   Nebeneffekt, gemessen: Die Sterne brauchten 66 px der 138 px breiten
   Zeile und schnitten den Shopnamen auf „Poppy D…" ab. Ohne sie passt er.

   ⛔ Sobald die erste echte Bewertung existiert, gehoert dieser Block raus.
   Pruefbefehl:
     wp-pv db query "SELECT COUNT(*) FROM wp_wcfm_marketplace_reviews" */
.wd-products .wcfmmp-store-rating {
	display: none !important;
}

/* Steuer-/Versandhinweis in der Uebersicht ausgeblendet (Entscheidung
   Chris 01.09.). ⚠️ Widerspruch festgehalten: Pflichtangaben nach PAngV,
   die Rechtsprechung verlangt sie dort, wo ein Preis steht — Listen
   eingeschlossen. Nur ausgeblendet, nicht entfernt; auf der Produktseite
   stehen sie weiter. Vor dem Start rechtlich pruefen lassen. */
.wd-products .wc-gzd-additional-info,
.wd-products .wc-gzd-additional-info-placeholder {
	display: none !important;
}

.wd-products .wrapp-buttons {
	position: absolute !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Klebender Kopfbereich — Hintergrund und Hoehe
   ──────────────────────────────────────────────────────────────────────
   Seit dem 01.09. klebt die Hauptzeile selbst (sticky_clone = false).
   Zwei Fehler dabei, beide gemessen:

   1. Die Zeile traegt die Klasse `whb-without-bg` — sie ist im geklebten
      Zustand DURCHSICHTIG, der Seiteninhalt scheint hindurch. Oben faellt
      das nicht auf, weil der Elterncontainer die Flaeche traegt; beim
      Kleben loest sich die Zeile daraus.

   2. Beim Scrollen schrumpft sie auf 1 px:
        oben       hoehe 106, oben 40
        gescrollt  hoehe   1, oben  0
      Die Zeile hat keine Mindesthoehe fuer den geklebten Zustand.

   #FAF8F5 ist dieselbe Farbe, die der Kopf oben traegt (gemessen:
   rgb(250,248,245)) — die klebende Leiste sieht damit aus wie der Kopf,
   nur schmaler.

   ⚠️ Fuer eingeloggte Nutzer schiebt zusaetzlich die WordPress-Leiste
   (32 px) den Kopf nach unten. Das betrifft nur den Adminbereich, nicht
   die Besucher — es ist KEIN Fehler der Seite.                        */

.whb-header .whb-general-header,
.whb-header .whb-sticky-row {
	background-color: #FAF8F5 !important;
}

.whb-header.whb-sticky .whb-general-header,
.whb-header.whb-sticked .whb-general-header {
	min-height: 64px !important;
	background-color: #FAF8F5 !important;
	box-shadow: 0 2px 8px rgba(74, 55, 40, .08);
}

/* 3. Der Inhalt sass am OBEREN Rand der 64 px und wirkte abgeschnitten —
      die Zeile bekommt ihre Hoehe, verteilt sie aber nicht. */
.whb-header.whb-sticky .whb-general-header .whb-flex-row,
.whb-header.whb-sticked .whb-general-header .whb-flex-row {
	min-height: 64px !important;
	align-items: center !important;
}

.whb-header.whb-sticky .whb-general-header .whb-column,
.whb-header.whb-sticked .whb-general-header .whb-column {
	align-items: center !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Bewertungen ausblenden, solange es keine gibt
   ──────────────────────────────────────────────────────────────────────
   § 5b Abs. 3 UWG: Wer Bewertungen anzeigt, muss erklaeren, ob und wie er
   sicherstellt, dass sie von echten Kaeuferinnen stammen. Die Seite
   /echtheit-von-bewertungen/ hat heute 1 Zeichen Inhalt — und auf der
   Verkaeuferseite standen 6 Bewertungselemente.

   🔑 Der billigste Weg, eine Pflicht zu erfuellen, ist, den Fall nicht
   entstehen zu lassen: keine angezeigte Bewertung, keine Erklaerungs-
   pflicht. Es gibt ohnehin null echte Bewertungen — die Sterne zeigten
   „0 von 5", was sich wie ein schlechtes Urteil liest.

   ⛔ SOBALD die erste echte Bewertung existiert, muss BEIDES zurueck:
   dieser Block hier raus UND die Seite /echtheit-von-bewertungen/
   gefuellt. Eines ohne das andere ist ein Rueckschritt.
   Pruefbefehl:
     wp-pv db query "SELECT COUNT(*) FROM wp_wcfm_marketplace_reviews"   */

.wcfmmp-store-rating,
.wcfm-store-rating,
.wcfmmp_sold_by_container .wcfmmp-store-rating,
.wcfm_store_rating,
.wcfm-product-rating,
.woocommerce-product-rating:not(.has-echte-bewertung) {
	display: none !important;
}

/* ── Hilfeseite EPR (/hilfe-epr/) ──────────────────────────────────────────
   Der Text kommt vom Architect und bringt eigene Klassen mit. Ohne diese
   Regeln kaeme er als Fliesstext an — die Kaesten waeren nicht als Kaesten
   erkennbar, und genau die tragen die wichtigsten Saetze.
   Farben aus dem Bestand: Markengruen #83B735, Sage #4A6741, Terracotta
   #C17755, Creme #FAF6F2, Text #4A3728. Keine neuen Toene. */

.pv-hilfe-gut {
	background: #EDF4E0;
	border: 1px solid #C6DDA0;
	border-left: 4px solid #61892A;
	border-radius: 0 12px 12px 0;
	padding: 18px 22px;
	margin: 0 0 26px;
}
.pv-hilfe-gut p { margin: 0; }

.pv-hilfe-merk {
	background: #FFFFFF;
	border: 1px solid #E6DBCC;
	border-radius: 12px;
	padding: 18px 22px;
	margin: 0 0 20px;
}
.pv-hilfe-merk p:last-child { margin-bottom: 0; }

.pv-hilfe-tag {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	background: #FAEFE4;
	color: #B06E3C;
	border: 1px solid #E8CDB2;
	border-radius: 20px;
	padding: 3px 10px;
}

.pv-hilfe-klein {
	font-size: 15px;
	color: #7A6A5C;
}

/* ===================================================
   HINWEISBOXEN – lesbar (Kontrast mind. 4,5:1, WCAG 2.1 AA)
   =================================================== */

/* 13.10.2026 (Chris, „ja bau das mal“): Die WooCommerce-Hinweise trugen weißen Text auf
   WoodMart-Gelb #E0B252 (1,97:1) und grüne Links aus der Regel `a` oben (1,21:1).
   Gemessen im Browser auf Staging, je Hinweisart vorher → nachher:
     Gelb (info, error, Block-Hinweise, wd-warning): Text 1,97 → 5,71, Link 1,21 → 5,71
     Grün (message, wd-success, Block-Erfolg):       Text 3,68 → 5,07, Link 1,54 → 5,07
     Blau (wd-info, WoodMart):                       Text 3,28 → 5,71 (jetzt wie Gelb)
     WCFM-Meldungen (weißer Grund):                  Text 1,55–2,86 → 11,24
   Kein Text aus der Palette erreicht auf dem WoodMart-Grün #459647 (max. 3,05) oder -Blau
   #4D93D1 (max. 3,43) die 4,5. Deshalb trägt der Erfolgshinweis jetzt --poppy-primary-dark
   als Fläche mit --poppy-card als Schrift, und der blaue WoodMart-Hinweis sieht aus wie der
   gelbe. Die globale Link-Farbe bleibt unverändert.
   Die Variablen setzt WoodMart auf :root (uploads/…/xts-theme_settings_*.css); auf body
   gesetzt gewinnen sie für alles darunter, auch für Kontaktformular- und Newsletter-Meldungen. */
body {
  --notices-warning-color: var(--poppy-text);
  --notices-success-bg: var(--poppy-primary-dark);
  --notices-success-color: var(--poppy-card);
}

/* body davor: WoodMarts eigene Regel gleicher Stärke lädt nach diesem Stylesheet. */
body .wd-notice.wd-info {
  background-color: var(--notices-warning-bg);
  color: var(--notices-warning-color);
}

/* Innen erbt alles die Schrift der Box: Links (sonst --poppy-primary), Absätze und Listen
   (sonst --poppy-text über die Typ-Regel oben), Preise (sonst --poppy-accent !important). */
:is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .wd-notice,
    .wc-block-components-notice-banner, div.wpcf7-response-output, .mc4wp-alert)
  :is(a, a:hover, p, li, span, strong, div, .amount, .woocommerce-Price-amount) {
  color: inherit !important;
}
:is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .wd-notice,
    .wc-block-components-notice-banner, div.wpcf7-response-output, .mc4wp-alert)
  a:not(.button) {
  text-decoration: underline;
}

/* Knöpfe im Hinweis („Warenkorb anzeigen“, „Weiter einkaufen“): WoodMart zeichnet sie als
   unterstrichenen Text in der Farbe der Box. Die Umriss- und Primärregeln aus Abschnitt 6
   färbten sie Terrakotta (1,13:1 auf Grün) bzw. weiß auf --poppy-primary.
   body:not(.wcfm-store-setup) wie dort, sonst gewinnt die stärkere Umrissregel. */
body:not(.wcfm-store-setup) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .wd-notice,
    .wc-block-components-notice-banner) :is(.button, .wc-backward, .wc-forward),
body:not(.wcfm-store-setup) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .wd-notice,
    .wc-block-components-notice-banner) :is(.button, .wc-backward, .wc-forward):hover {
  background-color: transparent !important;
  color: inherit !important;
  border: 0 !important;
  border-bottom: 2px solid currentColor !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* WCFM-Meldungen (Formulare im Verkäuferinnen-Bereich, Anfrage auf der Laden-Seite):
   WCFM färbt den Text selbst (#4dbd74, #f86c6b, #f8cb00, #20a8d8, 1,55–2,86:1 auf Weiß).
   Die Schrift wird --poppy-text, die Art bleibt am Rahmen erkennbar. */
.wcfm-message:is(.wcfm-success, .wcfm-error, .wcfm-warning, .wcfm-info),
.wcfm-message:is(.wcfm-success, .wcfm-error, .wcfm-warning, .wcfm-info) a {
  color: var(--poppy-text);
}
.wcfm-message:is(.wcfm-success, .wcfm-error, .wcfm-warning, .wcfm-info) a {
  text-decoration: underline;
}
.wcfm-message.wcfm-success { border-color: var(--poppy-primary-dark); }
.wcfm-message:is(.wcfm-error, .wcfm-warning) { border-color: var(--poppy-accent); }
.wcfm-message.wcfm-info { border-color: var(--poppy-text-light); }

/* Block-Hinweise (Warenkorb/Kasse): WoodMart setzt den Inhalt auf inline-flex, dann fällt das Leerzeichen
   vor einem Link weg („Konto?Hier anmelden“). Als Block fließen Text und Link wieder normal. Symbol und
   Schließen-Knopf sind absolut gesetzt und bleiben, wo sie sind. */
.wd .wc-block-components-notice-banner > .wc-block-components-notice-banner__content { display: block; }

/* Schließen-Knopf der Block-Hinweise: WoodMarts allgemeine Knopf-Regel (base.css, :is(.btn, .button, button …))
   gibt jedem button 5px 20px Innenabstand und einen grauen Grund. Bei der festen Breite von 20 px aus
   woo-mod-block-notices.css blieb für das X 0 px: ein graues Kästchen ohne Zeichen, bei 390 px über dem Text.
   Das X nimmt die Schriftfarbe der Box an (--notices-*-color), keine eigene Farbe. */
.wd .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss { padding: 0; background-color: transparent; box-shadow: none; color: inherit; }
.wd .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss svg { width: 20px; height: 20px; fill: currentColor; }

/* WCFM-Menü bis 768 px ohne Handy-Knopf: WCFM erkennt Handy und Tablet am User-Agent. Nur dann gibt es den
   Menü-Knopf, und das Menü startet zugeklappt. Meldet sich der Browser als Desktop (iPad mini mit Safari,
   schmales Fenster), legt wcfm-style-responsive-non-float-menu.css das Menü absolut über den Inhalt, ohne
   Knopf zum Zuklappen. Dann steht es hier zweispaltig über dem Inhalt. Handys mit Knopf bleiben unverändert. */
@media only screen and (max-width: 768px) {
	#wcfm-main-contentainer:not(:has(.wcfm_responsive_menu_toggler)) #wcfm_menu { position: static; width: 100%; height: auto; display: flex; flex-flow: row wrap; gap: 6px; padding: 8px 0; }
	#wcfm-main-contentainer:not(:has(.wcfm_responsive_menu_toggler)) #wcfm_menu > .wcfm_menu_items { flex: 0 0 calc(50% - 3px); width: calc(50% - 3px); height: auto; margin-top: 0; }
}