/* ============================================================
   Jenny's Zauberfaden – Brücke zwischen Design und WooCommerce
   ------------------------------------------------------------
   design-system.css bringt das Aussehen mit (.karte, .btn, .fahne …).
   Diese Datei verbindet es mit dem, was WooCommerce tatsächlich ausgibt.

   Grundsatz: WIR BLENDEN NICHTS AUS, WAS TEXT ENTHÄLT.
   Insbesondere die Hinweise von German Market (§ 19 UStG, Grundpreis,
   Lieferzeit, Versandkosten) werden nur gestaltet – niemals versteckt.
   Siehe TESTPLAN.md, Abschnitt 6.
   ============================================================ */

/* ---------- Grundgerüst der Seite ---------- */
.jz-theme .site-main,
.jz-theme .woocommerce > .woocommerce-notices-wrapper {
  width: min(100% - 2.25rem, var(--breite));
  margin-inline: auto;
}
.jz-theme .site-main { padding-block: var(--raum-4) var(--raum-6); }

/* Elementor-Bereiche (Kopf-/Fußzeile) nicht anfassen –
   sie sollen genau so bleiben, wie Jenny sie gebaut hat. */
.jz-theme .elementor-location-header,
.jz-theme .elementor-location-footer { }

/* ---------- Produktraster ---------- */
.jz-theme ul.products {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.jz-theme ul.products::before,
.jz-theme ul.products::after { content: none; }

/* WooCommerce vergibt Spaltenklassen, die wir nicht brauchen –
   das Grid regelt den Umbruch. */
.jz-theme ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}
@media (max-width: 560px) {
  .jz-theme ul.products { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}

/* ---------- Produktkarte ---------- */
.jz-theme li.product.karte { padding: 0; text-align: left; }

.jz-theme li.product .woocommerce-loop-product__title { display: none; } /* wir geben den Titel selbst aus */

.jz-theme li.product .price {
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--tinte);
  margin: 0;
  display: block;
}
.jz-theme li.product .price del { color: var(--tinte-leise); font-weight: 600; font-size: .9rem; }
.jz-theme li.product .price ins { text-decoration: none; color: var(--rose-dunkel); }

/* German Market: Grundpreis, Steuerhinweis, Lieferzeit.
   Werden hier NUR verkleinert und eingefärbt – niemals ausgeblendet. */
.jz-theme li.product .wgm-info,
.jz-theme li.product .price_label,
.jz-theme li.product .woocommerce-price-suffix,
.jz-theme li.product .german-market-shipping-costs,
.jz-theme li.product .delivery-time-info,
.jz-theme li.product .wgm-tax-info {
  display: block;
  font-size: .76rem;
  line-height: 1.35;
  font-weight: 400;
  color: var(--tinte-leise);
  margin-top: .2rem;
}

/* In-den-Warenkorb auf der Karte: klein und zurückhaltend */
.jz-theme li.product .button,
.jz-theme li.product .added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: .6rem;
  padding: .45rem 1rem;
  border-radius: var(--rund-voll);
  background: var(--papier);
  border: 1.5px solid var(--sand);
  color: var(--tinte);
  font-size: .88rem;
  font-weight: 700;
  width: 100%;
  transition: border-color var(--tempo), color var(--tempo);
}
.jz-theme li.product .button:hover,
.jz-theme li.product .added_to_cart:hover {
  border-color: var(--rose);
  color: var(--rose-dunkel);
}
.jz-theme li.product .button.loading { opacity: .6; }

/* ---------- Werkzeugleiste über den Produkten ---------- */
.jz-theme .shop-leiste { margin-bottom: var(--raum-3); }
.jz-theme .woocommerce-result-count {
  margin: 0;
  font-size: .94rem;
  color: var(--tinte-weich);
}
.jz-theme .woocommerce-ordering { margin: 0 0 0 auto; }
.jz-theme .woocommerce-ordering select {
  min-height: 46px;
  padding: .5rem 2.2rem .5rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-voll);
  background-color: var(--papier);
  font-size: .94rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F504E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
}

/* ---------- Seitenblättern (wichtig bei ~850 Produkten) ---------- */
.jz-theme .woocommerce-pagination { margin-top: var(--raum-5); }
.jz-theme .woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  border: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jz-theme .woocommerce-pagination li { border: 0; margin: 0; }
.jz-theme .woocommerce-pagination a,
.jz-theme .woocommerce-pagination span {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 .8rem;
  border-radius: var(--rund-voll);
  border: 1px solid var(--linie);
  background: var(--papier);
  font-weight: 700;
  font-size: .95rem;
  color: var(--tinte-weich);
  transition: border-color var(--tempo), color var(--tempo), background var(--tempo);
}
.jz-theme .woocommerce-pagination a:hover { border-color: var(--rose); color: var(--rose-dunkel); }
.jz-theme .woocommerce-pagination .current {
  background: var(--rose-tief);
  border-color: var(--rose-tief);
  color: #fff;
}

/* ---------- Produktdetailseite ---------- */
@media (min-width: 940px) {
  .jz-theme .single-product div.product {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--raum-5);
    align-items: start;
  }
  .jz-theme .single-product div.product .woocommerce-product-gallery {
    position: sticky;
    top: calc(var(--kopf-h) + 20px);
    z-index: var(--e-klebend);
    background: var(--creme);
  }
  .jz-theme .single-product div.product .woocommerce-tabs,
  .jz-theme .single-product div.product .related,
  .jz-theme .single-product div.product .upsells { grid-column: 1 / -1; }
}
.jz-theme div.product .woocommerce-product-gallery__wrapper { border-radius: var(--rund-l); overflow: hidden; }
.jz-theme div.product .woocommerce-product-gallery__image img { border-radius: var(--rund-l); }
.jz-theme div.product .flex-control-thumbs { display: flex; gap: .55rem; margin-top: var(--raum-2); padding: 0; list-style: none; }
.jz-theme div.product .flex-control-thumbs li { width: 76px; }
.jz-theme div.product .flex-control-thumbs img { border-radius: var(--rund-s); border: 2px solid transparent; }
.jz-theme div.product .flex-control-thumbs img.flex-active { border-color: var(--rose); }

.jz-theme div.product .product_title { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-bottom: .5rem; }
.jz-theme div.product .summary > .price { font-size: 1.75rem; font-weight: 700; margin-bottom: .35rem; }

/* German Market auf der Produktseite: gestaltet, nicht versteckt */
.jz-theme div.product .wgm-info,
.jz-theme div.product .price_label,
.jz-theme div.product .woocommerce-price-suffix,
.jz-theme div.product .german-market-shipping-costs,
.jz-theme div.product .delivery-time-info,
.jz-theme div.product .wgm-tax-info,
.jz-theme div.product .product_meta {
  font-size: .86rem;
  color: var(--tinte-leise);
  line-height: 1.5;
}
.jz-theme div.product .wgm-info a,
.jz-theme div.product .german-market-shipping-costs a { text-decoration: underline; }

.jz-theme div.product .woocommerce-product-details__short-description {
  color: var(--tinte-weich);
  padding-bottom: var(--raum-4);
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--raum-4);
}

/* Varianten */
.jz-theme div.product table.variations { border: 0; margin-bottom: var(--raum-3); width: 100%; }
.jz-theme div.product table.variations th,
.jz-theme div.product table.variations td { border: 0; padding: .35rem 0; display: block; width: 100%; }
.jz-theme div.product table.variations label {
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}
.jz-theme div.product table.variations select {
  width: 100%;
  min-height: 50px;
  padding: .6rem 2.2rem .6rem 1rem;
  border: 1.5px solid var(--linie);
  border-radius: var(--rund-m);
  background-color: var(--papier);
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F504E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
}
.jz-theme div.product .reset_variations { font-size: .85rem; color: var(--tinte-leise); }

/* Menge und Kaufschaltfläche */
.jz-theme div.product form.cart { display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: center; }
.jz-theme div.product form.cart.variations_form { display: block; }
.jz-theme div.product .quantity {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--linie);
  border-radius: var(--rund-voll);
  background: var(--papier);
  overflow: hidden;
}
.jz-theme div.product .quantity input.qty {
  width: 68px;
  min-height: 50px;
  text-align: center;
  border: 0;
  background: none;
  font-weight: 700;
}
.jz-theme div.product .single_add_to_cart_button {
  flex: 1;
  min-width: 190px;
  min-height: 50px;
  padding: .8rem 1.7rem;
  border: 0;
  border-radius: var(--rund-voll);
  background: var(--rose-tief);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--tempo), transform var(--tempo);
}
.jz-theme div.product .single_add_to_cart_button:hover {
  background: var(--rose-dunkel);
  transform: translateY(-2px);
}
.jz-theme div.product .woocommerce-variation-add-to-cart { display: flex; gap: var(--raum-2); flex-wrap: wrap; align-items: center; margin-top: var(--raum-3); }

/* Reiter (Beschreibung, Bewertungen, …) */
.jz-theme .woocommerce-tabs { margin-top: var(--raum-5); }
.jz-theme .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0;
  margin: 0 0 var(--raum-3);
  border: 0;
  list-style: none;
}
.jz-theme .woocommerce-tabs ul.tabs::before,
.jz-theme .woocommerce-tabs ul.tabs li::before,
.jz-theme .woocommerce-tabs ul.tabs li::after { content: none !important; border: 0 !important; }
.jz-theme .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--rund-voll);
  background: var(--papier);
}
.jz-theme .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .6rem 1.2rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--tinte-weich);
}
.jz-theme .woocommerce-tabs ul.tabs li.active { background: var(--rose-zart); border-color: var(--rose); }
.jz-theme .woocommerce-tabs ul.tabs li.active a { color: var(--rose-dunkel); }
.jz-theme .woocommerce-tabs .panel > h2:first-child { display: none; }

/* Ähnliche Produkte */
.jz-theme .related > h2,
.jz-theme .upsells > h2,
.jz-theme .cross-sells > h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--raum-3); }

/* ---------- Warenkorb ---------- */
.jz-theme .woocommerce-cart-form table.shop_table {
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--papier);
}
.jz-theme .shop_table th { background: var(--creme-tief); font-family: var(--font-text); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.jz-theme .shop_table td, .jz-theme .shop_table th { padding: var(--raum-3); border-bottom: 1px solid var(--linie); }
.jz-theme .cart_item img { border-radius: var(--rund-s); }
.jz-theme .cart-collaterals .cart_totals {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  padding: var(--raum-4);
}
.jz-theme .checkout-button,
.jz-theme .wc-proceed-to-checkout .button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: var(--rund-voll);
  background: var(--rose-tief);
  color: #fff;
  font-weight: 700;
  border: 0;
}
.jz-theme .checkout-button:hover { background: var(--rose-dunkel); }

/* ---------- Kasse: bewusst zurückhaltend ----------
   Hier greift das Theme nur auf Felder und Schaltflächen zu.
   Der Aufbau bleibt exakt so, wie WooCommerce und German Market
   ihn erzeugen – inklusive aller Pflichtangaben und Checkboxen. */
.jz-theme.jz-kasse .form-row input.input-text,
.jz-theme.jz-kasse .form-row textarea,
.jz-theme.jz-kasse .form-row select,
.jz-theme.jz-konto .form-row input.input-text {
  min-height: 48px;
  padding: .6rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  background: var(--papier);
  width: 100%;
}
.jz-theme.jz-kasse #place_order {
  min-height: 54px;
  border-radius: var(--rund-voll);
  background: var(--rose-tief);
  color: #fff;
  font-weight: 700;
  border: 0;
  width: 100%;
}
/* German-Market-Bereiche auf der Kasse bleiben unverändert sichtbar. */
.jz-theme.jz-kasse .woocommerce-terms-and-conditions-wrapper,
.jz-theme.jz-kasse .wgm-checkbox,
.jz-theme.jz-kasse #order_review .wgm-info { font-size: .9rem; line-height: 1.55; }

/* ---------- Kundenkonto ---------- */
.jz-theme.jz-konto .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.jz-theme.jz-konto .woocommerce-MyAccount-navigation a {
  display: block;
  padding: .7rem 1rem;
  border-radius: var(--rund-s);
  color: var(--tinte-weich);
  font-weight: 600;
}
.jz-theme.jz-konto .woocommerce-MyAccount-navigation a:hover { background: var(--creme-tief); }
.jz-theme.jz-konto .woocommerce-MyAccount-navigation .is-active a { background: var(--rose-zart); color: var(--rose-dunkel); }
@media (min-width: 860px) {
  .jz-theme.jz-konto .woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: var(--raum-4); align-items: start; }
}

/* ---------- Meldungen ---------- */
.jz-theme .woocommerce-message,
.jz-theme .woocommerce-info,
.jz-theme .woocommerce-error {
  border-top: 0;
  border-left: 4px solid var(--salbei);
  border-radius: var(--rund-m);
  background: var(--salbei-zart);
  padding: var(--raum-3) var(--raum-4);
  color: #43513f;
}
.jz-theme .woocommerce-error { border-left-color: var(--rose-dunkel); background: var(--rose-zart); color: var(--rose-dunkel); }
.jz-theme .woocommerce-message .button,
.jz-theme .woocommerce-info .button {
  border-radius: var(--rund-voll);
  background: var(--papier);
  border: 1px solid var(--sand);
  padding: .4rem 1rem;
  font-weight: 700;
  font-size: .88rem;
}

/* ---------- Produktreihen der Startseite (Kurzbefehle) ---------- */
.jz-produktreihe { margin-block: var(--raum-4); }
.jz-reihe__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: none;
}

/* ---------- Merkliste ---------- */
.jz-merkliste [data-merkliste-leer][hidden] { display: none; }

/* ---------- Suchtreffer ---------- */
.jz-theme .treffer__preis { font-weight: 700; }

/* ---------- Hinweisband ganz oben ---------- */
.jz-band {
  background: var(--tinte);
  color: var(--creme);
  font-family: var(--font-text);
  font-size: .82rem;
  text-align: center;
  padding: .5rem 1rem;
  letter-spacing: .02em;
}
.jz-band strong { color: #fff; font-weight: 700; }
@media (max-width: 640px) {
  .jz-band { font-size: .76rem; padding: .42rem .75rem; }
}

/* ---------- Startseite des Themes ---------- */
.jz-start { display: block; }
.jz-start .hero { margin-top: 0; }
/* Die Produktreihen der Startseite tragen keine .site-main-Breite,
   deshalb hier die Hülle selbst setzen. */
.jz-start .huelle { width: min(100% - 2.25rem, var(--breite)); margin-inline: auto; }
.jz-start ul.products { margin-top: var(--raum-3); }
.jz-reihe__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: none;
}

/* ---------- Eigene Kopf- und Fußzeile ---------- */
.jz-theme .kopf .marke img,
.jz-theme .fuss__marke img { mix-blend-mode: multiply; }
.jz-theme .kopf .marke img { height: 40px; width: auto; }
.jz-theme .fuss__marke img { height: 52px; width: auto; }
@media (max-width: 640px) { .jz-theme .kopf .marke img { height: 36px; } }
/* Damit der Inhalt nicht unter der klebenden Kopfzeile verschwindet */
.jz-theme .site-main:first-of-type { padding-top: var(--raum-4); }

/* ============================================================
   VEREINHEITLICHUNG – Vorrang vor Elementor
   ------------------------------------------------------------
   Elementor setzt die Schrift global über die Klasse auf dem
   <body> (z. B. .elementor-kit-27 { font-family:"Charm" }).
   Diese Regel ist spezifischer als ein einfaches body { }.
   Deshalb stehen hier die Design-Schriften mit "body.jz-theme"
   davor – damit gewinnt das neue Design.

   Abschaltbar: In der functions.php
   define( 'JZ_SCHRIFT_ERZWINGEN', false );
   Dann bleiben die Elementor-Schriften erhalten.
   ============================================================ */

body.jz-theme {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--creme);
}

body.jz-theme h1,
body.jz-theme h2,
body.jz-theme h3,
body.jz-theme h4,
body.jz-theme h5,
body.jz-theme h6 {
  font-family: var(--font-titel);
  color: var(--tinte);
  letter-spacing: -.015em;
  line-height: 1.15;
}

body.jz-theme p,
body.jz-theme li,
body.jz-theme td,
body.jz-theme th,
body.jz-theme dd,
body.jz-theme dt,
body.jz-theme label,
body.jz-theme input,
body.jz-theme select,
body.jz-theme textarea,
body.jz-theme button,
body.jz-theme .price,
body.jz-theme .amount,
body.jz-theme .woocommerce-Price-amount {
  font-family: var(--font-text);
}

/* Elementor-Seiten (z. B. "Über mich") mitziehen.
   Elementor schreibt Schriften teils pro Baustein – dort hilft nur
   der Vorrang. Nur die Schriftart wird erzwungen, sonst nichts. */
body.jz-theme.jz-schrift .elementor-widget-container,
body.jz-theme.jz-schrift .elementor-widget-text-editor,
body.jz-theme.jz-schrift .elementor-widget-text-editor *,
body.jz-theme.jz-schrift .elementor-button-text,
body.jz-theme.jz-schrift .elementor-icon-list-text {
  font-family: var(--font-text) !important;
}
body.jz-theme.jz-schrift .elementor-heading-title {
  font-family: var(--font-titel) !important;
}

/* Elementor-Schaltflächen an das Design angleichen */
body.jz-theme.jz-schrift .elementor-button {
  border-radius: var(--rund-voll);
  font-weight: 700;
}

/* ---------- "Shop": Link plus Pfeil fürs Kategoriemenü ---------- */
.jz-shop-punkt { display: flex; align-items: center; gap: 0; }
.jz-shop-punkt .nav-link { padding-right: .5rem; }
.nav-link--pfeil { padding-left: .2rem; padding-right: .6rem; }

/* ---------- Filtereinträge (jetzt Links statt Schaltflächen) ---------- */
.filter-liste .jz-filter-eintrag {
  display: flex; width: 100%; justify-content: space-between; align-items: center;
  gap: .5rem; padding: .5rem .65rem; border-radius: var(--rund-s);
  text-align: left; font-size: .94rem; color: var(--tinte-weich);
  min-height: 40px; transition: background var(--tempo), color var(--tempo);
}
.filter-liste .jz-filter-eintrag:hover { background: var(--creme-tief); }
.filter-liste .jz-filter-eintrag[aria-pressed="true"] {
  background: var(--rose-zart); color: var(--rose-dunkel); font-weight: 700;
}


/* ---------- Ebenen: nichts verdeckt mehr etwas anderes ----------
   Produktkarten heben sich beim Überfahren leicht an. Dadurch entsteht
   ein eigener Zeichenkontext, der ohne Ebenenangabe VOR den klebenden
   Spalten liegen würde. Deshalb hier feste Ebenen. */
.jz-theme .shop-leiste { position: relative; z-index: var(--e-klebend); }
@media (min-width: 768px) { .jz-theme .filter-spalte { z-index: var(--e-klebend); } }
/* Handy: Filter ist eine Schublade und muss ÜBER dem Schleier liegen */
@media (max-width: 767px) { .jz-theme .filter-spalte { z-index: var(--e-schublade); } }
.jz-theme ul.products li.product { position: relative; }
.jz-theme ul.products li.product:hover { z-index: var(--e-karte); }

/* Die Sortierauswahl muss immer bedienbar bleiben */
.jz-theme .woocommerce-ordering { position: relative; z-index: var(--e-klebend); }

/* Abstand zur klebenden Kopfzeile bei Sprungmarken */
.jz-theme { scroll-padding-top: calc(var(--kopf-h) + 20px); }

/* ============================================================
   VEREINHEITLICHUNG
   ------------------------------------------------------------
   WooCommerce, Elementor und German Market bringen eigene
   Grundstile mit. Hier werden Eingabefelder, Schaltflächen,
   Rahmen, Rundungen und Schatten auf die Werte des
   Design-Systems gezogen – überall gleich.
   ============================================================ */

/* ---------- Eingabefelder: überall gleich ---------- */
.jz-theme input[type="text"],
.jz-theme input[type="email"],
.jz-theme input[type="tel"],
.jz-theme input[type="password"],
.jz-theme input[type="number"],
.jz-theme input[type="search"],
.jz-theme input[type="url"],
.jz-theme textarea,
.jz-theme select {
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--tinte);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  padding: .6rem 1rem;
  min-height: 48px;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.jz-theme input:focus,
.jz-theme textarea:focus,
.jz-theme select:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--rose-zart);
  outline: none;
}
.jz-theme ::placeholder { color: var(--tinte-leise); opacity: 1; }

/* Felder innerhalb der runden .feld-Hülle behalten deren Form */
.jz-theme .feld input,
.jz-theme .feld select {
  border: 0; border-radius: 0; background: none; padding-left: 0; box-shadow: none;
}
.jz-theme .feld input:focus,
.jz-theme .feld select:focus { box-shadow: none; }

/* ---------- Schaltflächen: eine Form für alle ---------- */
.jz-theme .button,
.jz-theme button[type="submit"],
.jz-theme input[type="submit"],
.jz-theme .wc-block-components-button,
.jz-theme .woocommerce-button {
  font-family: var(--font-text);
  font-weight: 700;
  border-radius: var(--rund-voll);
  transition: background var(--tempo), color var(--tempo),
              border-color var(--tempo), transform var(--tempo);
}
.jz-theme .button:hover,
.jz-theme button[type="submit"]:hover,
.jz-theme input[type="submit"]:hover { transform: translateY(-2px); }

/* Hauptaktionen einheitlich in Rosé */
.jz-theme .single_add_to_cart_button,
.jz-theme .checkout-button,
.jz-theme #place_order,
.jz-theme .woocommerce-Button--next,
.jz-theme button[name="save_account_details"],
.jz-theme button[name="save_address"],
.jz-theme .woocommerce-form-login__submit,
.jz-theme .woocommerce-form-register__submit {
  background: var(--rose-tief);
  color: #fff;
  border: 0;
  min-height: 50px;
  padding: .8rem 1.7rem;
  font-size: 1rem;
}
.jz-theme .single_add_to_cart_button:hover,
.jz-theme .checkout-button:hover,
.jz-theme #place_order:hover,
.jz-theme .woocommerce-form-login__submit:hover,
.jz-theme .woocommerce-form-register__submit:hover { background: var(--rose-dunkel); }

/* Nebenaktionen einheitlich hell */
.jz-theme .button:not(.single_add_to_cart_button):not(.checkout-button):not(.alt),
.jz-theme .woocommerce-button:not(.checkout-button) {
  background: var(--papier);
  color: var(--tinte);
  border: 1.5px solid var(--sand);
  min-height: 46px;
  padding: .55rem 1.3rem;
}
.jz-theme .button:not(.single_add_to_cart_button):not(.checkout-button):not(.alt):hover {
  border-color: var(--rose);
  color: var(--rose-dunkel);
}

/* ---------- Rahmen, Rundungen, Schatten ---------- */
.jz-theme .shop_table,
.jz-theme .cart_totals,
.jz-theme .woocommerce-info,
.jz-theme .woocommerce-message,
.jz-theme .woocommerce-error,
.jz-theme .woocommerce-order-details,
.jz-theme .woocommerce-customer-details,
.jz-theme .woocommerce-Address,
.jz-theme .woocommerce-MyAccount-content,
.jz-theme #order_review,
.jz-theme .filter-block { border-radius: var(--rund-m); }

.jz-theme .woocommerce-MyAccount-content,
.jz-theme .woocommerce-Address address,
.jz-theme #order_review {
  background: var(--papier);
  border: 1px solid var(--linie);
  padding: var(--raum-4);
}

/* ---------- Überschriften ----------
   Die Abstände kommen aus dem Design-System. Hier werden nur die
   Überschriften von WooCommerce angeglichen – keine pauschalen Regeln,
   damit die Abstände einzelner Bausteine erhalten bleiben. */
.jz-theme .woocommerce-MyAccount-content h2,
.jz-theme #order_review_heading,
.jz-theme .cart_totals h2,
.jz-theme .cross-sells h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }

/* ---------- Tabellen einheitlich ---------- */
.jz-theme table.shop_table,
.jz-theme table.woocommerce-table {
  border: 1px solid var(--linie);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--papier);
  overflow: hidden;
}
.jz-theme table.shop_table th,
.jz-theme table.woocommerce-table th {
  font-family: var(--font-text);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  background: var(--creme-tief);
}

/* ---------- Abstände: gleiche Rhythmen ---------- */
.jz-theme .woocommerce-notices-wrapper:not(:empty) { margin-bottom: var(--raum-4); }
.jz-theme .related, .jz-theme .upsells, .jz-theme .cross-sells { margin-top: var(--raum-6); }

/* ---------- Bilder: einheitliche Rundung ---------- */
.jz-theme .cart_item img,
.jz-theme .woocommerce-order-details img,
.jz-theme .mini-zeile img { border-radius: var(--rund-s); }

/* ============================================================
   SHOPÜBERSICHT – ruhig, übersichtlich, schnell bedienbar
   ------------------------------------------------------------
   Aufbau:
     Kopf         Titel + kurze Beschreibung
     Schnellwahl  Kategorien als Chips in einer Zeile
     Zwei Spalten Filter links, Produkte rechts (ab 1000 px)
     Werkzeug     Trefferzahl + Sortierung in einer Zeile
   ============================================================ */

/* ---------- Kopfbereich ---------- */
.jz-theme .woocommerce-products-header {
  margin-bottom: var(--raum-3);
}
.jz-theme .woocommerce-products-header__title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin: 0 0 .35rem;
}
.jz-theme .jz-shop__text {
  color: var(--tinte-weich);
  max-width: 46rem;
  margin: 0 0 var(--raum-2);
  font-size: 1rem;
}

/* ---------- Schnellwahl: Kategorie-Chips ---------- */
.jz-chips {
  margin: 0 0 var(--raum-4);
  position: relative;
}
.jz-chips__spur {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.jz-chips__spur::-webkit-scrollbar { height: 4px; }
.jz-chips__spur::-webkit-scrollbar-thumb { background: var(--linie); border-radius: 999px; }

.jz-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 40px;
  padding: .45rem 1rem;
  border-radius: var(--rund-voll);
  border: 1px solid var(--linie);
  background: var(--papier);
  color: var(--tinte-weich);
  font-size: .93rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--tempo), color var(--tempo), background var(--tempo);
}
.jz-chip:hover { border-color: var(--rose); color: var(--rose-dunkel); }
.jz-chip[aria-current="page"] {
  background: var(--rose-zart);
  border-color: var(--rose);
  color: var(--rose-dunkel);
}
.jz-chip__zahl {
  font-size: .78rem;
  font-weight: 700;
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.jz-chip[aria-current="page"] .jz-chip__zahl { color: var(--rose-dunkel); opacity: .75; }
.jz-chip--zurueck { background: var(--creme-tief); }

/* ---------- Zwei Spalten ---------- */
.jz-shop__raster { display: block; }
.jz-shop__inhalt { min-width: 0; }

@media (min-width: 1000px) {
  .jz-shop__raster {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--raum-4);
    align-items: start;
  }
  /* Am Rechner steht der Filter fest daneben – kein Knopf nötig */
  .jz-theme .filter-schalter { display: none; }
  .jz-theme .filter-spalte .sheet-kopf,
  .jz-theme .filter-spalte .sheet-fuss { display: none; }
}

/* ---------- Werkzeugleiste: alles in einer Zeile ---------- */
.jz-theme .shop-leiste {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
  margin: 0 0 var(--raum-3);
  padding-bottom: var(--raum-2);
  border-bottom: 1px solid var(--linie);
}
.jz-theme .woocommerce-result-count {
  margin: 0;
  font-size: .93rem;
  color: var(--tinte-weich);
  font-variant-numeric: tabular-nums;
}
.jz-theme .jz-trenner { color: var(--sand); margin: 0 .15rem; }
.jz-theme .woocommerce-ordering { margin: 0 0 0 auto; }
.jz-theme .woocommerce-ordering select {
  min-height: 42px;
  border-radius: var(--rund-voll);
  font-size: .92rem;
  padding: .4rem 2.2rem .4rem 1rem;
}

/* ---------- Filterspalte: ruhiger ---------- */
.jz-theme .filter-block {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  padding: 0 0 var(--raum-3);
  margin-bottom: var(--raum-3);
}
.jz-theme .filter-block:last-of-type { border-bottom: 0; }
.jz-theme .filter-block h3 {
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--tinte-leise);
  margin-bottom: .5rem;
}
.jz-theme .filter-liste .jz-filter-eintrag { padding: .45rem .6rem; font-size: .93rem; }

/* ---------- Produktkarten: minimalistisch ---------- */
/* Die Schaltfläche erscheint am Rechner erst beim Überfahren.
   Auf dem Handy führt ein Tippen auf die Karte zum Produkt. */
.jz-theme li.product .button,
.jz-theme li.product .added_to_cart {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--tempo), transform var(--tempo),
              border-color var(--tempo), color var(--tempo);
}
.jz-theme li.product:hover .button,
.jz-theme li.product:focus-within .button,
.jz-theme li.product:hover .added_to_cart {
  opacity: 1;
  transform: none;
}
@media (hover: none), (max-width: 767px) {
  .jz-theme li.product .button,
  .jz-theme li.product .added_to_cart { display: none; }
}

/* ---------- Seitenblättern: ruhiger ---------- */
.jz-theme .woocommerce-pagination { margin-top: var(--raum-4); }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 640px) {
  .jz-chips { margin-bottom: var(--raum-3); }
  .jz-chips__spur {
    margin-inline: calc(var(--raum-3) * -1);
    padding-inline: var(--raum-3);
  }
  .jz-chip { min-height: 38px; padding: .4rem .85rem; font-size: .88rem; }
  .jz-theme .woocommerce-products-header { margin-bottom: var(--raum-2); }
  .jz-theme .shop-leiste { gap: .5rem; }
  .jz-theme .woocommerce-result-count { order: 3; width: 100%; font-size: .87rem; }
  .jz-theme .woocommerce-ordering { margin-left: 0; flex: 1; }
  .jz-theme .woocommerce-ordering select { width: 100%; }
}

/* ---------- Filterspalte: Kategoriebaum ---------- */
.jz-theme .jz-filter-gruppe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-family: var(--font-text);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte);
  padding: .2rem 0;
}
.jz-theme .jz-filter-gruppe:hover { color: var(--rose-dunkel); }
.jz-theme .jz-filter-gruppe[aria-current="page"] { color: var(--rose-dunkel); }
.jz-theme .jz-filter-gruppe .anzahl {
  font-size: .75rem; font-weight: 600; letter-spacing: 0;
  color: var(--tinte-leise); font-variant-numeric: tabular-nums;
}
.jz-theme .filter-block h3 { margin-bottom: .45rem; }
.jz-theme .jz-filter-alle {
  display: inline-flex; margin-top: var(--raum-2);
  font-weight: 700; color: var(--rose-dunkel);
}

/* ============================================================
   WOOCOMMERCE-STANDARDFARBEN NEUTRALISIEREN
   ------------------------------------------------------------
   WooCommerce bringt eigene Farben mit (olivgrüne Preise,
   lila Seitenzahlen). Deren Regeln sind spezifischer als
   einfache Theme-Regeln – deshalb hier mit body.jz-theme und
   der vollen Auswahlkette davor.
   ============================================================ */

/* Preise: immer in der Textfarbe, nie olivgrün */
body.jz-theme.woocommerce ul.products li.product .price,
body.jz-theme .woocommerce ul.products li.product .price,
body.jz-theme.woocommerce div.product p.price,
body.jz-theme.woocommerce div.product span.price,
body.jz-theme ul.products li.product .price {
  color: var(--tinte);
  font-weight: 700;
}
body.jz-theme.woocommerce ul.products li.product .price del,
body.jz-theme ul.products li.product .price del { color: var(--tinte-leise); font-weight: 600; }
body.jz-theme.woocommerce ul.products li.product .price ins,
body.jz-theme ul.products li.product .price ins { color: var(--rose-dunkel); text-decoration: none; }

/* Seitenzahlen: keine lila Flächen */
body.jz-theme.woocommerce nav.woocommerce-pagination ul,
body.jz-theme .woocommerce nav.woocommerce-pagination ul { border: 0; }
body.jz-theme.woocommerce nav.woocommerce-pagination ul li,
body.jz-theme .woocommerce nav.woocommerce-pagination ul li { border: 0; overflow: visible; }
body.jz-theme.woocommerce nav.woocommerce-pagination ul li a,
body.jz-theme.woocommerce nav.woocommerce-pagination ul li span,
body.jz-theme .woocommerce nav.woocommerce-pagination ul li a,
body.jz-theme .woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 .8rem;
  border-radius: var(--rund-voll);
  border: 1px solid var(--linie);
  background: var(--papier);
  color: var(--tinte-weich);
  font-weight: 700;
}
body.jz-theme.woocommerce nav.woocommerce-pagination ul li a:hover,
body.jz-theme .woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--rose);
  color: var(--rose-dunkel);
  background: var(--papier);
}
body.jz-theme.woocommerce nav.woocommerce-pagination ul li span.current,
body.jz-theme .woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--rose-tief);
  border-color: var(--rose-tief);
  color: #fff;
}

/* Platzhalterbild ohne fremden Rahmen */
body.jz-theme img.woocommerce-placeholder { border: 0; }

/* Der Pfeil neben "Shop" erbt die Textfarbe der Navigation */
body.jz-theme .nav-link--pfeil { color: var(--tinte); border: 0; background: none; }
body.jz-theme .nav-link--pfeil:hover,
body.jz-theme .nav-link--pfeil[aria-expanded="true"] { color: var(--rose-dunkel); }

/* Ausverkauft-Hinweis von WooCommerce in der Designfarbe */
body.jz-theme .stock.out-of-stock { color: var(--rose-dunkel); font-weight: 700; }
body.jz-theme .stock.in-stock { color: var(--salbei); }
body.jz-theme.woocommerce ul.products li.product img.woocommerce-placeholder,
body.jz-theme .woocommerce ul.products li.product img { border: 0; box-shadow: none; }

/* ---------- Produkte ohne Bild ----------
   WooCommerce zeigt dort ein graues Platzhalterbild. Damit die Karte
   trotzdem zum Design passt, wird die Fläche ruhig eingefärbt.
   (Auf jennyszauberfaden.de betrifft das aktuell genau ein Produkt.) */
body.jz-theme li.product img.woocommerce-placeholder {
  background: var(--creme-tief);
  opacity: .35;
  padding: 22%;
  object-fit: contain;
}

/* ---------- Produktnamen sauber auf zwei Zeilen begrenzen ----------
   Hello Elementor setzt Überschriften auf display:flow-root. Damit
   funktioniert die Zeilenbegrenzung (-webkit-line-clamp) nicht mehr,
   und bei langen Namen ragte eine dritte Zeile angeschnitten heraus.
   Deshalb hier mit ausreichendem Vorrang. */
body.jz-theme li.product h3.karte__name,
body.jz-theme ul.products li.product h3.karte__name,
body.jz-theme .karte__name {
  /* WooCommerce gibt Überschriften in Produktkarten ein Innenabstand von
     0,5em oben und unten. Zusammen mit der Höhenbegrenzung blieb dadurch
     nur Platz für gut eine Zeile – die zweite wurde mittig abgeschnitten.
     Deshalb hier zuerst den Innenabstand zurücksetzen. */
  padding: 0;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  /* Genau zwei Zeilen, ohne angeschnittene dritte. */
  max-height: 2.6em;
}

/* ---------- Dritte Kategorie-Ebene (z. B. Saison → Halloween) ---------- */
.jz-theme .mobil-nav__enkel a { padding-left: 2.6rem; font-size: .92rem; color: var(--tinte-leise); }
.jz-theme .mobil-nav__enkel a::before { content: "– "; opacity: .6; }
.jz-theme .jz-filter-enkel .jz-filter-eintrag { padding-left: 1.5rem; font-size: .88rem; }
.jz-theme .jz-filter-enkel .jz-filter-eintrag > span:first-child::before { content: "– "; opacity: .5; }

/* ---------- Hello-Elementor-Reset: button:hover/:focus färbt Text weiß ----------
   Betrifft alle Klapp-Schaltflächen (Handy-Menü, Akkordeon, Menü-Pfeil).
   Nach dem Antippen bleibt der Fokus – ohne diese Regel wäre der Text unsichtbar. */
body.jz-theme .mobil-nav__link:hover,
body.jz-theme .mobil-nav__link:focus,
body.jz-theme .akkordeon__kopf:hover,
body.jz-theme .akkordeon__kopf:focus,
body.jz-theme .nav-link:hover,
body.jz-theme .nav-link:focus { color: var(--tinte); }
body.jz-theme .mobil-nav__link[aria-expanded="true"],
body.jz-theme .akkordeon__kopf[aria-expanded="true"],
body.jz-theme .nav-link[aria-expanded="true"] { color: var(--rose-dunkel); }


/* ---------- Hello-Elementor-Reset neutralisieren: button:hover/:focus ----------
   Der Reset des Eltern-Themes färbt JEDEN Knopf bei Hover/Fokus magenta (#c36)
   mit weißer Schrift. Hier bekommen alle Knöpfe des Designs ihre eigenen
   Zustände zurück. Spezifität bewusst höher als "[type=button]:hover". */
body.jz-theme .btn--primaer:hover,
body.jz-theme .btn--primaer:focus { background-color: var(--rose-dunkel); color: #fff; }
body.jz-theme .btn--sekundaer:hover,
body.jz-theme .btn--sekundaer:focus { background-color: var(--papier); color: var(--rose-dunkel); border-color: var(--rose); }
body.jz-theme .icon-btn:hover,
body.jz-theme .icon-btn:focus,
body.jz-theme .herz:hover,
body.jz-theme .herz:focus,
body.jz-theme .nach-oben:hover,
body.jz-theme .nach-oben:focus { background-color: var(--rose-zart); color: var(--rose-dunkel); }
body.jz-theme .herz[aria-pressed="true"],
body.jz-theme .herz[aria-pressed="true"]:hover { background-color: var(--rose-zart); color: var(--rose-tief); }
body.jz-theme .tableiste__punkt:hover,
body.jz-theme .tableiste__punkt:focus { background-color: transparent; color: var(--rose-dunkel); }
body.jz-theme .filter-schalter:hover,
body.jz-theme .filter-schalter:focus { background-color: var(--papier); color: var(--rose-dunkel); border-color: var(--rose); }
body.jz-theme .schleier:hover,
body.jz-theme .schleier:focus { background-color: rgba(51, 41, 42, .45); }
body.jz-theme .mega__zu:hover, body.jz-theme .mega__zu:focus,
body.jz-theme .sheet-titel .icon-btn:hover { background-color: var(--rose-zart); color: var(--rose-dunkel); }
/* WooCommerce-eigene Knöpfe (Warenkorb aktualisieren, Gutschein, Menge) */
body.jz-theme .woocommerce button.button:hover,
body.jz-theme .woocommerce button.button:focus,
body.jz-theme button.button:hover,
body.jz-theme button.button:focus { background-color: var(--rose-dunkel); color: #fff; }