/* ==========================================================================
   SAYÉ — eigene Ergaenzungen
   --------------------------------------------------------------------------
   Diese Datei wird NACH style.css geladen und gewinnt deshalb bei
   gleicher Spezifitaet. Sie existiert, damit parallel gearbeitet werden
   kann: style.css bleibt unberuehrt, neue Regeln kommen hierher. So
   entstehen beim Zusammenfuehren zweier Staende keine Konflikte.

   Eingebunden in functions.php (Handle: saye-custom, haengt an
   flatsome-style).

   Aufbau wie style.css: nach Seiten sortiert, Abschnittsnummern
   passend zur grossen Datei.
   ========================================================================== */


/* ==========================================================================
   16 · KASSE
   ========================================================================== */

/* Zahlungsart steht links als dritter Schritt (siehe
   inc/saye-checkout.php, Abschnitt 5). Der Abschnitt bringt seinen
   eigenen Abstand mit, deshalb hier keiner. */
.sy-co-sec--pay #payment{margin-top:0}
.sy-co-sec--pay #order_payment_heading{margin-top:0}

/* Die Bestellübersicht steht rechts und ist KEIN Schritt der linken
   Spalte — sie darf deshalb nie eine Nummer bekommen. Absichtlich
   defensiv: greift auch dann, wenn eine aeltere Fassung von style.css
   den Zaehler weiter fasst als '.sy-co-panel h3'. */
.sy-co-summary h3:before,
.sy-checkout aside h3:before,
#order_review_heading:before{content:none!important}

/* Die Übersicht laeuft beim Scrollen mit (ab Tablet aufwaerts).
   WARUM 'align-items:stretch': ein sticky Element kann sich nur
   innerhalb seines Gitterfeldes bewegen. '.sy-commerce' setzt
   'align-items:start', dadurch ist das Feld genauso hoch wie die
   Karte selbst — es bleibt kein Weg zum Mitlaufen. Mit 'stretch'
   reicht das Feld ueber die volle Zeilenhoehe (also so hoch wie die
   linke Spalte), und 'height:fit-content' haelt die sichtbare Karte
   trotzdem kurz. */
@media (min-width:850px){
  .sy-checkout .sy-commerce{align-items:stretch}

  /* Abstand nach oben = Hoehe des eingerasteten Flatsome-Headers
     (.stuck .header-main = 70px) plus etwas Luft. Frueher standen hier
     100px — die Differenz war als Leerraum ueber der Karte sichtbar,
     sobald die Seite gescrollt war. */
  .sy-checkout .sy-co-summary{position:sticky;top:var(--sy-co-sticky-top,86px);
    height:fit-content}
}

/* Sichtbare Reihenfolge in der Bestellübersicht: Tabelle, gesetzliche
   Haken, Button. Im Markup stehen die Haken davor (Prio 19 vor der
   Tabelle mit Prio 20) — das ist Absicht, weil sie so den AJAX-Refresh
   ueberleben (siehe inc/saye-checkout.php, Abschnitt 5). Optisch
   ruecken sie hier an die richtige Stelle. */
.sy-checkout #order_review{display:flex;flex-direction:column}
.sy-checkout #order_review > *{order:2}
.sy-checkout #order_review > .woocommerce-checkout-review-order-table{order:1}
.sy-checkout #order_review > .wc-gzd-order-submit{order:3}

/* '.sy-band' setzt 'overflow:hidden'. Ein Vorfahre mit overflow != visible
   wird zum Scroll-Container fuer sticky-Elemente — und weil dieser Kasten
   selbst nicht scrollt, bleibt die Übersicht einfach stehen. Deshalb hier
   zurueck auf 'visible'; das Formular hat nichts zu beschneiden. */
.sy-checkout.sy-band{overflow:visible}

/* --------------------------------------------------------------------------
   Bestellbutton wie der Haupt-CTA im Header ("Set sichern")
   --------------------------------------------------------------------------
   Farben kommen aus den CI-Variablen (--primary / --primary-deep), damit
   ein spaeterer Farbwechsel automatisch mitgeht. Form und Typografie sind
   an '.sy-btn--primary' angeglichen (style.css, Abschnitt 3).

   Das '!important' ist noetig, weil Flatsome die Button-Farben ueber
   generiertes Inline-CSS im <head> setzt ('.button.alt', '#place_order') —
   das gewinnt sonst gegen eine externe Datei. */
.sy-checkout #place_order,
.sy-checkout button#place_order{
  background-color:var(--primary)!important;
  border:1px solid var(--primary)!important;
  color:var(--ink)!important;
  font-size:.82rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 30px;border-radius:var(--r);line-height:1.2;
  box-shadow:none;text-shadow:none;background-image:none;
  transition:.25s}
.sy-checkout #place_order:hover,
.sy-checkout button#place_order:hover{
  background-color:var(--primary-deep)!important;
  border-color:var(--primary-deep)!important;
  color:var(--ink)!important;
  transform:translateY(-2px)}
.sy-checkout #place_order:disabled,
.sy-checkout button#place_order:disabled{opacity:.5;transform:none}

/* Zahlungs-Logos entfallen auf der Kasse: die Zahlungsarten stehen dort
   bereits als echte Auswahl in Schritt 3. Im Warenkorb bleiben sie, weil
   sie dort noch etwas ankuendigen. */
.sy-checkout .sy-pay-badges{display:none}

/* ==========================================================================
   15 · KONTO — Bestellhistorie
   --------------------------------------------------------------------------
   Ergaenzungen zu woocommerce/myaccount/orders.php. Die Zeile selbst
   (.sy-order-row), die Statuspille und die Bildchen kommen aus
   style.css, Abschnitt 15 — hier steht nur, was die Listenansicht
   zusaetzlich braucht.
   ========================================================================== */

.sy-order-list{display:flex;flex-direction:column;gap:12px}

/* Aktionen von Erweiterungen (z. B. "Rechnung" des PDF-Plugins).
   Sie stehen unter ihrer Zeile, weil ein Link nicht in einem Link stehen
   darf. Bewusst als dezenter Textlink statt als Button: die Zeile selbst
   ist die Hauptaktion, das hier ist ein Nachschlag. Die Klasse des
   Plugins ('button') wird dabei ueberschrieben. */
.sy-order-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:16px;
  margin:-6px 0 0;padding:0 18px}
.sy-checkout .sy-order-actions,
.sy-acct-layout .sy-order-actions a,
.sy-order-action{font-size:.78rem;color:var(--slate);text-decoration:underline;
  text-underline-offset:3px;background:none!important;border:0!important;padding:0!important;
  margin:0!important;min-height:0!important;height:auto!important;line-height:1.4;
  font-weight:400;letter-spacing:0;text-transform:none;box-shadow:none!important}
.sy-acct-layout .sy-order-actions a:hover,
.sy-order-action:hover{color:var(--ink)}

/* VORERST AUSGEBLENDET: nur die Rechnung (Stand 05.09.2026).
   Gezielt diese eine Aktion, NICHT der ganze Container — dort landen
   auch die Aktionen von WooCommerce selbst: 'pay' (Bezahlen bei offener
   Zahlung) und 'cancel' (Stornieren), dazu alles, was Erweiterungen
   spaeter ergaenzen. Die duerfen nicht mit verschwinden.

   Die Klasse kommt aus dem Schluessel der Aktion, siehe
   woocommerce/myaccount/orders.php. Zum Zurueckholen diesen Block
   loeschen — die Gestaltung als Textlink steht darueber. */
.sy-order-action.invoice{display:none}

/* Bleibt dadurch nichts uebrig, soll auch der Abstand weg. */
.sy-order-actions:not(:has(.sy-order-action:not(.invoice))){display:none}

.sy-acct-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:22px;border:0;padding:0}
.sy-acct-pager-info{font-size:.82rem;color:var(--muted);margin-left:auto;margin-right:auto}

.sy-acct-empty{text-align:center;padding:44px 20px;color:var(--muted)}
.sy-acct-empty svg{width:44px;height:44px;stroke:var(--lav-2);stroke-width:1.4;fill:none;
  margin:0 auto 14px;display:block}
.sy-acct-empty p{margin:0 0 14px}

/* Flatsome gestaltet die Konto-Endpunkte mit eigenen Tabellen- und
   Abstandsregeln. Die Karte bringt ihre eigene Optik mit. */
.sy-acct-layout .woocommerce-orders-table,
.sy-acct-layout .woocommerce-MyAccount-content > .woocommerce-message:empty{display:none}

/* --------------------------------------------------------------------------
   Konto — gespeicherte Adressen (woocommerce/myaccount/my-address.php)
   -------------------------------------------------------------------------- */

.sy-addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sy-addr-grid--one{grid-template-columns:1fr;max-width:420px}

.sy-addr-card{border:1px solid var(--line);border-radius:12px;padding:20px;
  background:#fff;transition:.2s}
.sy-addr-card:hover{border-color:var(--slate)}

.sy-addr-head{display:flex;align-items:center;gap:8px;margin-bottom:11px;flex-wrap:wrap}
.sy-addr-head b{color:var(--ink);font-weight:500}
.sy-addr-badge{font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  color:var(--slate);background:var(--soft);border-radius:20px;padding:3px 9px;white-space:nowrap}

/* WooCommerce liefert die Adresse als <address> mit <br>. Flatsome setzt
   dort kursiv — deshalb hier ausdruecklich zurueck. */
.sy-addr-card address{font-style:normal;font-size:.92rem;color:var(--body);
  line-height:1.75;margin:0}
.sy-addr-empty{color:var(--muted)}

.sy-addr-actions{display:flex;gap:16px;margin-top:14px;font-size:.8rem}
.sy-addr-actions a{color:var(--slate);text-decoration:underline;text-underline-offset:2px}
.sy-addr-actions a:hover{color:var(--ink)}

/* Reste des WooCommerce-Standards: zweispaltige Wrapper und der
   Einleitungssatz stehen jetzt in der Karte. */
.sy-acct-layout .woocommerce-Addresses,
.sy-acct-layout .woocommerce-MyAccount-content > p:first-child:not(.sy-acct-sub){display:none}

@media (max-width:849px){
  .sy-addr-grid{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Konto — Formulare (Adresse bearbeiten UND Kontodetails)
   --------------------------------------------------------------------------
   Dieselbe Feldoptik wie an der Kasse (style.css, Abschnitt 16): Label
   klein darueber, ruhiger Rahmen, 13/14 Innenabstand. Zwei Spalten fuer
   Vor-/Nachname und PLZ/Ort, alles andere volle Breite — die Klassen
   'form-row-first'/'-last' liefert WooCommerce bereits mit.
   -------------------------------------------------------------------------- */

.sy-addr-form .woocommerce-address-fields__field-wrapper{display:grid;
  grid-template-columns:1fr 1fr;gap:0 22px}
.sy-addr-form .woocommerce-address-fields__field-wrapper > .form-row{grid-column:1 / -1}
.sy-addr-form .form-row-first,
.sy-addr-form .form-row-last{grid-column:auto}

.sy-addr-form .form-row,
.sy-acct-form .form-row{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;padding:0;
  width:auto;float:none}
.sy-addr-form .form-row label,
.sy-acct-form .form-row label{font-size:.78rem;color:var(--body);letter-spacing:.02em;
  font-weight:400;margin:0}
.sy-addr-form .form-row .required,
.sy-acct-form .form-row .required{color:var(--muted);text-decoration:none}
.sy-addr-form .form-row .optional{color:var(--muted)}

.sy-addr-form .form-row input[type=text],
.sy-acct-form .form-row input[type=text],
.sy-addr-form .form-row input[type=email],
.sy-acct-form .form-row input[type=email],
.sy-addr-form .form-row input[type=tel],
.sy-acct-form .form-row input[type=tel],
.sy-addr-form .form-row input[type=number],
.sy-acct-form .form-row input[type=number],
.sy-addr-form .form-row input[type=password],
.sy-acct-form .form-row input[type=password],
.sy-addr-form .form-row textarea,
.sy-acct-form .form-row textarea,
.sy-addr-form .form-row select,
.sy-acct-form .form-row select,
.sy-addr-form .select2-container .select2-selection{font-family:inherit;font-size:.95rem;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
  background:#fff;width:100%;height:auto;margin:0;box-shadow:none;line-height:1.4}
.sy-acct-form .form-row input:focus,
.sy-addr-form .form-row input:focus,
.sy-addr-form .form-row textarea:focus,
.sy-addr-form .form-row select:focus{outline:none;border-color:var(--slate);box-shadow:none}
.sy-addr-form .select2-container .select2-selection__rendered{padding:0;line-height:inherit;
  color:var(--ink)}
.sy-addr-form .select2-container .select2-selection__arrow{top:50%;transform:translateY(-50%);
  right:10px}

/* Kontrollkaestchen stehen neben ihrem Text, nicht darueber. */
.sy-acct-form label.checkbox,
.sy-addr-form label.checkbox,
.sy-addr-form .woocommerce-form__label-for-checkbox{flex-direction:row;align-items:flex-start;
  gap:10px;font-size:.85rem;color:var(--body);display:flex}
.sy-acct-form input[type=checkbox],
.sy-addr-form input[type=checkbox]{margin:3px 0 0;flex:0 0 auto;width:auto}

.sy-addr-form-actions{margin:10px 0 0}

/* Flatsome faerbt Buttons ueber generiertes Inline-CSS — daher wie beim
   Bestellbutton mit '!important' auf die CI-Farben zurueck. */
.sy-addr-form button[name=save_address],
.sy-acct-form button[name=save_account_details]{background-color:var(--primary)!important;
  border:1px solid var(--primary)!important;color:var(--ink)!important;
  font-size:.82rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 30px;border-radius:var(--r);line-height:1.2;box-shadow:none;text-shadow:none;
  background-image:none;transition:.25s;min-height:0;height:auto}
.sy-addr-form button[name=save_address]:hover,
.sy-acct-form button[name=save_account_details]:hover{background-color:var(--primary-deep)!important;
  border-color:var(--primary-deep)!important;color:var(--ink)!important;
  transform:translateY(-2px)}

/* Ueberschrift des Formulars auf Kartenmass — WooCommerce/Flatsome
   setzen dort sonst die grosse Seitentypografie. */
.sy-acct-layout .woocommerce-MyAccount-content .sy-acct-ch h2{font-size:1.15rem;margin:0;
  letter-spacing:0;text-transform:none}

/* Kontodetails: dieselben Felder, nur ein anderer Wrapper. */
.sy-acct-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;border:0;padding:0;margin:0}
.sy-acct-fields > .form-row{grid-column:1 / -1}
.sy-acct-fields > .form-row-first,
.sy-acct-fields > .form-row-last{grid-column:auto}
.sy-acct-hint{display:block;font-size:.76rem;color:var(--muted);margin-top:2px;font-style:normal}
.sy-acct-form-actions{margin:10px 0 0}
.sy-acct-form .sy-acct-card + .sy-acct-card{margin-top:22px}

@media (max-width:849px){
  .sy-addr-form .woocommerce-address-fields__field-wrapper,
  .sy-acct-fields{grid-template-columns:1fr}
  .sy-addr-form .form-row-first,
  .sy-addr-form .form-row-last,
  .sy-acct-fields > .form-row-first,
  .sy-acct-fields > .form-row-last{grid-column:1 / -1}
}

/* --------------------------------------------------------------------------
   Konto — Navigation links
   --------------------------------------------------------------------------
   Gleiche Korrektur wie bei der Bestellübersicht an der Kasse:

   1. '.sy-account' setzt 'align-items:start'. Das Gitterfeld ist dann
      genauso hoch wie die Navigation selbst — ein sticky Element hat
      darin keinen Weg und bleibt wirkungslos stehen. Mit 'stretch'
      reicht das Feld ueber die volle Zeilenhoehe, 'height:fit-content'
      haelt den sichtbaren Kasten trotzdem kurz.

   2. Der Abstand nach oben war 100px, der eingerastete Flatsome-Header
      ist aber nur 70px hoch. Die Differenz stand als Leerraum ueber der
      Navigation — sichtbar, sobald die Seite gescrollt war, und dadurch
      oben nicht mehr buendig mit der Karte rechts.
   -------------------------------------------------------------------------- */

/* 3. Der eigentliche Grund fuer den Leerraum: '.sy-account' traegt auch
      '.sy-band', und das setzt 'overflow:hidden'. Ein solcher Kasten ist
      der Scrollport fuer sticky-Elemente darin — und ein sticky Element
      muss zu SEINEM Scrollport immer den 'top'-Abstand halten. Da der
      Kasten genau dort beginnt, wo die Navigation steht, wurde sie
      sofort um 86px nach unten gedrueckt, schon ohne Scrollen.
      Gemessen: navTop 562,9 vs. gridTop 476,9 bei scrollY 0.
      Mit 'overflow:visible' ist wieder das Fenster der Scrollport. */
.sy-acct-layout .sy-account.sy-band{overflow:visible}

@media (min-width:850px){
  .sy-acct-layout .sy-account{align-items:stretch}
  .sy-acct-layout .sy-acct-nav{position:sticky;top:var(--sy-acct-sticky-top,86px);
    height:fit-content}
}

/* --------------------------------------------------------------------------
   Konto — Wunschliste (inc/saye-wishlist-account.php)
   --------------------------------------------------------------------------
   Die Karten kommen aus dem Shop ('.sy-woo'), das Raster steht hier nur
   deshalb, weil in der schmalen Kontospalte zwei Spalten reichen. Die
   negativen Aussenabstaende heben das Flatsome-Spaltenpolster auf, damit
   die Karten buendig in der Konto-Karte sitzen.
   -------------------------------------------------------------------------- */

.sy-wl-grid{margin-left:-13px;margin-right:-13px}
.sy-wl-grid .product-small.col{padding-bottom:0}

@media (max-width:849px){
  .sy-wl-grid{margin-left:0;margin-right:0}
}

/* --------------------------------------------------------------------------
   Wirkstoffe — Beschreibung auf eine Zeile kuerzen
   --------------------------------------------------------------------------
   Vorher lief der Text ueber zwei Zeilen und drueckte die Schlagwoerter
   nach unten, wodurch die Zeilen unterschiedlich hoch wurden.

   Bewusst per CSS statt ueber wp_trim_words(): die Wortzahl passt immer
   nur zu EINER Breite. Der Zeilenumbruch kennt die tatsaechliche Spalte
   und kuerzt auf jedem Bildschirm an der richtigen Stelle — die drei
   Punkte setzt der Browser selbst.

   Fuer zwei Zeilen: '-webkit-line-clamp' auf 2 setzen.
   -------------------------------------------------------------------------- */

.sy-ing-body p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;
  line-clamp:1;overflow:hidden;text-overflow:ellipsis}

/* --------------------------------------------------------------------------
   Mobiler Header — Symbole gleich gross, gleich ausgerichtet, gleicher Abstand
   --------------------------------------------------------------------------
   Flatsome nutzt eine Icon-Schrift ('icon-search', 'icon-user',
   'icon-shopping-bag'). Jede Glyphe hat eigene Masse, dadurch stand die
   Lupe 2px tiefer und war schmaler als die anderen. Gemessen bei 390px:
   Lupe 16x19 auf y=65, Konto und Warenkorb 20x24 auf y=63.

   Feste Schriftgroesse plus Flex-Zentrierung bringt alle drei auf
   dieselbe Grundlinie; der Abstand kommt aus dem Innenabstand der Links
   statt aus den unterschiedlichen Glyphenbreiten.
   -------------------------------------------------------------------------- */

@media (max-width:849px){
  .header-main .nav > li{margin:0}
  .header-main .nav > li > a{display:flex;align-items:center;justify-content:center;
    height:100%;padding:0 9px;line-height:1}
  .header-main .nav > li > a > i{font-size:21px;line-height:1;display:block;margin:0;
    width:auto;height:auto}

  /* Die Lupe bekommt von Flatsome ein 'style="font-size:16px"' direkt ins
     Markup (template-parts/header/partials/element-search.php, Zeile 37 —
     fest verdrahtet, keine Einstellung). Inline-Stile schlagen jede
     externe Datei, deshalb hier ausnahmsweise '!important'. */
  .header-main .nav > li > a > i.icon-search{font-size:21px!important}

  /* Der Zaehler am Warenkorb sitzt sonst mittig auf dem Symbol. */
  .header-main .nav > li.cart-item > a{position:relative}

  /* Aussen buendig mit dem Seitenrand — sonst haengt die Gruppe frei. */
  .header-main .nav-right > li:last-child > a{padding-right:0}
  .header-main .nav-left > li:first-child > a{padding-left:0}
}

/* --------------------------------------------------------------------------
   Off-Canvas-Menue auf kleinen Geraeten ueber die volle Breite
   --------------------------------------------------------------------------
   Flatsome steuert die Schubladenbreite ueber die Variable
   '--drawer-width' (Customizer > Header > "Drawer width", Standard
   300px). Hier wird nur diese Variable veraendert — dadurch stimmen
   Breite UND die Einfahr-Animation, die dieselbe Variable im
   'transform' benutzt.

   Kein '!important' noetig: die zu breite Popup-Regel im Additional CSS
   ist inzwischen auf '.saye-popup' eingegrenzt, es kaempft also nichts
   mehr dagegen. Die eine Klasse mehr ('.mfp-wrap') braucht es trotzdem:
   Flatsome schreibt seinen Standardwert als <style> in den head, also
   NACH dieser Datei — bei gleicher Spezifitaet gewaenne sonst der
   Standard.
   -------------------------------------------------------------------------- */

@media (max-width:479px){
  .mfp-wrap.off-canvas-left .mfp-content,
  .mfp-wrap.off-canvas-right .mfp-content{--drawer-width:100vw;box-shadow:none}
}


/* =====================================================================
 * SAYÉ Announcement-Ticker (Topbar)
 * ---------------------------------------------------------------------
 * Markup steckt im Header-Builder-Element "HTML 1" (inc/saye-announce.php),
 * die Positionierung (links/mittig/rechts) macht also der Header Builder.
 * Die Liste rollt vertikal durch alle Meldungen; das letzte <li> ist ein
 * Klon der ersten Meldung, damit der Sprung zurueck auf 0 unsichtbar ist.
 * Keyframes + Dauer kommen aus PHP (wp_head, #saye-announce-inline), weil
 * sie von der Anzahl der Meldungen abhaengen.
 * ===================================================================== */
#top-bar {
	--saye-announce-h: 38px;
	background-color: #343844 !important;
	min-height: var(--saye-announce-h);
}

/* Das <li> ist nur noch Huelle — Flatsomes Nav-Abstaende hier abschalten. */
#top-bar li.html_topbar_left {
	margin: 0;
	padding: 0;
	width: 100%;
}

.saye-announce {
	height: var(--saye-announce-h, 38px);
	overflow: hidden;
	position: relative;
	color: #fff;
	text-align: center;
	font-family: 'Mukta Mahee', system-ui, -apple-system, sans-serif;
	font-size: .76rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.saye-announce .saye-announce__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.saye-announce .saye-announce__list li {
	height: var(--saye-announce-h, 38px);
	margin: 0;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	white-space: nowrap;
}

/* Einzelne Meldung: nichts zu rollen, Klon ausblenden. */
.saye-announce[data-count="1"] .saye-announce__list li:last-child { display: none; }

@media (max-width: 549px) {
	.saye-announce { font-size: .64rem; letter-spacing: .05em; }
}

@media (prefers-reduced-motion: reduce) {
	.saye-announce .saye-announce__list { animation: none !important; }
	.saye-announce .saye-announce__list li:not(:first-child) { display: none; }
}

/* =====================================================================
 * SAYÉ Passwort-Ablauf (vergessen / neu vergeben)
 * ---------------------------------------------------------------------
 * Nutzt die Auth-Karte aus style.css. Hier stehen nur die Ergaenzungen,
 * die der Anmelde-Karte fehlen: Platzhalter-Farbe und der Abstand des
 * Formulars zum Kartenrand, weil hier nur ein einziges Feld steht.
 * ===================================================================== */
.sy-auth-form input::placeholder {
	color: var(--muted);
	opacity: 1;
}

/* Einfeldriges Formular: etwas Luft vor dem Button. */
.sy-auth-form .sy-field + .sy-auth-submit,
.sy-auth-form .sy-field + .clear + .sy-auth-submit {
	margin-top: 6px !important;
}

/* WooCommerce-Meldungen stehen VOR dem Formular, nicht darin — deshalb
   ueber die Body-Klasse der Kontoseite auf Kartenbreite bringen. */
.sy-acct-layout .woocommerce-error,
.sy-acct-layout .woocommerce-message,
.sy-acct-layout .woocommerce-info {
/*	max-width: 440px;*/
	margin: 0 auto 18px;
	border-radius: var(--r);
	font-size: .88rem;
}

/* ---------------------------------------------------------------------
 * Checkboxen im Konto-Bereich ("Angemeldet bleiben", AGB-Haken usw.)
 * Ohne Angabe faerbt der Browser den Haken im Systemakzent (unter Ubuntu
 * z. B. orange). accent-color holt ihn ins CI-Dunkelblau.
 * ------------------------------------------------------------------ */
.sy-auth input[type="checkbox"],
.sy-auth input[type="radio"],
.sy-acct-layout input[type="checkbox"],
.sy-acct-layout input[type="radio"] {
	accent-color: #343844;
}

/* ---------------------------------------------------------------------
 * Header-Logo beim Sticky-Zustand
 * ---------------------------------------------------------------------
 * Oben auf der Seite haengt das Logo bewusst unter die Headerleiste
 * hinaus (style.css: max-height 122px + 18px Abstand). Sobald der Header
 * mitfaehrt (.stuck), passt der Ueberhang nicht mehr — er ragt dann ueber
 * den Seiteninhalt. Deshalb faehrt das Logo hier kompakt in die Leiste
 * zurueck, so wie in der Referenz.
 * ------------------------------------------------------------------ */
.header-inner.container div#logo img {
	transition: max-height .28s ease, margin .28s ease;
}

.stuck .header-inner.container div#logo img,
header .stuck #logo img {
	margin: 0 !important;
	max-height: 66px !important;
}

/* Unter 850px greift in style.css bereits eine kleinere Sticky-Hoehe
   (58px) — die darf diese Regel nicht wieder aufblasen. */
@media (max-width: 849px) {
	.stuck .header-inner.container div#logo img,
	header .stuck #logo img {
		max-height: 58px !important;
	}
}

/* =====================================================================
 * SAYÉ Bestelldetails (Mein Konto → Bestellung ansehen)
 * ---------------------------------------------------------------------
 * Markup: woocommerce/myaccount/view-order.php
 * Karten, Statuspille und Summenzeilen kommen aus style.css
 * (.sy-acct-card, .sy-ostatus, .sy-sum-row) — hier steht nur, was diese
 * Seite zusaetzlich braucht. Werte wie in der Vorlage konto-bestellung.php.
 * ===================================================================== */

/* --- Kopfkarte: Fortschritt Bestellt → In Bearbeitung → Versandt → Zugestellt --- */
.sy-od-steps {
	display: flex;
	margin: 8px 0 4px;
	padding: 0;
	list-style: none;
}

.sy-od-steps li {
	flex: 1;
	text-align: center;
	position: relative;
	font-size: .74rem;
	color: var(--muted);
	padding-top: 26px;
	margin: 0;
}

/* Der Punkt auf der Linie. */
.sy-od-steps li::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--line);
	transform: translateX(-50%);
	z-index: 1;
}

/* Die Verbindung zum vorherigen Schritt. */
.sy-od-steps li::after {
	content: "";
	position: absolute;
	top: 13px;
	right: 50%;
	width: calc(100% + 20px);
	height: 2px;
	background: var(--line);
}

.sy-od-steps li:first-child::after { display: none; }

.sy-od-steps li.is-done { color: var(--ink); font-weight: 500; }
.sy-od-steps li.is-done::before { background: var(--ink); border-color: var(--ink); }
.sy-od-steps li.is-done::after { background: var(--ink); }

/* Storniert/erstattet: statt der Leiste ein Hinweis. */
.sy-od-stopped {
	margin: 4px 0 0;
	padding: 14px 16px;
	border-radius: var(--r);
	background: #fbeaea;
	color: #a33a3a;
	font-size: .88rem;
}

/* --- Zwei Spalten: Artikel | Lieferung & Zahlung --- */
.sy-od-grid {
	display: grid;
	grid-template-columns: 1.5fr .9fr;
	gap: 22px;
	align-items: start;
	margin-top: 22px;
}

/* Die Karten stehen nebeneinander, nicht untereinander. */
.sy-od-grid > .sy-acct-card + .sy-acct-card { margin-top: 0; }

/* style.css:280 setzt '.sy-band h2' auf clamp(1.9rem…2.9rem) — die
   Kontoseite liegt in einem .sy-band, deshalb hier die gleiche Tiefe. */
.sy-band .sy-od-h { font-size: 1.05rem; margin-bottom: 14px; }
.sy-od-items + .sy-sum-row { margin-top: 14px; }

/* --- Artikelzeile --- */
.sy-od-line {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

.sy-od-line:last-child { border-bottom: none; }

.sy-od-line .im {
	width: 64px;
	height: 64px;
	background: var(--lav);
	border-radius: 10px;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.sy-od-line .im img {
	width: 78%;
  padding: 5px;
	object-fit: contain;
	margin: 0 auto;
}

.sy-od-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sy-od-line .on { color: var(--ink); font-weight: 500; font-size: .94rem; }
.sy-od-line .on a { color: inherit; }
.sy-od-line .oq { font-size: .8rem; color: var(--muted); }
.sy-od-line .op { color: var(--ink); font-weight: 500; white-space: nowrap; }
.my-account  h2#woocommerce-order-shipments,
.my-account .woocommerce-shipment-details__title,
.my-account .woocommerce-column__title {
   font-size: 1.7rem;
    line-height: 1.14;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 20px 0;
}
.my-account .shop_table th{
  border-width: 1px;
}
/* Variationen / Zusatzfelder aus wc_display_item_meta(). */
.sy-od-meta,
.sy-od-meta p { font-size: .8rem; color: var(--muted); margin: 0; }
.sy-od-meta .wc-item-meta { list-style: none; margin: 0; padding: 0; }
.sy-od-meta .wc-item-meta li { display: flex; gap: 5px; margin: 0; }
.sy-od-meta .wc-item-meta strong { font-weight: 500; }

/* --- Buttons unter den Summen --- */
.sy-od-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px;
}

/* WooCommerce gibt "Erneut bestellen" als <p class="order-again"> aus —
   der Absatz darf die Reihe nicht umbrechen. */
.sy-od-actions p { margin: 0; }
.sy-od-actions .order-again { display: contents; }

/* Fremde Buttons (Erneut bestellen, PDF-Rechnung) auf die Hausform bringen. */
.sy-od-actions .button,
.sy-od-actions a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 11px 20px;
	border-radius: var(--r);
	border: 1px solid var(--primary);
	background-color: var(--primary);
	background-image: none;
	color: var(--ink);
	line-height: 1.2;
	min-height: 0;
	height: auto;
	margin: 0;
	box-shadow: none;
	text-shadow: none;
}

.sy-od-actions .button:hover,
.sy-od-actions a.button:hover {
	background-color: var(--primary-deep);
	border-color: var(--primary-deep);
	color: var(--ink);
}

/* --- Rechte Spalte --- */
.sy-od-side .sy-acct-sub { margin: 0 0 4px; }

.sy-od-addr {
	font-style: normal;
	font-size: .92rem;
	color: var(--body);
	line-height: 1.75;
	margin-bottom: 18px;
}

/* WooCommerce setzt den Namen in die erste Zeile — die wird hervorgehoben. */
.sy-od-addr { color: var(--body); }
.sy-od-pay { font-size: .92rem; color: var(--ink); margin: 0; }

.sy-od-trust {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
	font-size: .82rem;
	color: var(--body);
}

.sy-od-trust span { display: flex; align-items: center; gap: 9px; }

.sy-od-trust svg {
	width: 17px;
	height: 17px;
	stroke: var(--slate);
	stroke-width: 1.5;
	fill: none;
	flex: none;
}

/* --- Bestellhinweise --- */
.sy-od-notes { margin-top: 22px; }
.sy-od-notes ol { list-style: none; margin: 0; padding: 0; }
.sy-od-notes li { margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.sy-od-notes li:last-child { margin: 0; padding: 0; border-bottom: none; }
.sy-od-note-text { font-size: .9rem; color: var(--body); }
.sy-od-note-text p:last-child { margin-bottom: 0; }

@media (max-width: 849px) {
	.sy-od-grid { grid-template-columns: 1fr; gap: 16px; }
	.sy-od-line { grid-template-columns: 52px 1fr auto; gap: 12px; }
	.sy-od-line .im { width: 52px; height: 52px; }
	.sy-od-steps li { font-size: .68rem; }
}

/* =====================================================================
 * SAYÉ Produktseite — Sparbetrag und Kauf-Button
 * ---------------------------------------------------------------------
 * Markup: inc/saye-product.php (Filter am Preis-HTML bzw. Button-Text)
 * ===================================================================== */

/* "Spare 28 €" — sitzt in derselben Flex-Zeile wie der Preis. */
.sy-pdp-info .price .sy-pdp-save {
	align-self: center;
	background: var(--primary);
	color: var(--ink);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 5px 11px;
	border-radius: 30px;
	white-space: nowrap;
}

/* Kauf-Button: Flatsome faerbt ihn sonst in seiner Akzentfarbe. */
.sy-pdp-info form.cart button.single_add_to_cart_button,
.sy-pdp-info form.cart button.single_add_to_cart_button:focus {
	background-color: var(--primary);
	background-image: none;
	border: 1px solid var(--primary);
	color: var(--ink);
	font-family: inherit;
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: var(--r);
	padding: 16px 30px;
	line-height: 1.2;
	min-height: 0;
	height: auto;
	box-shadow: none;
	text-shadow: none;
}

.sy-pdp-info form.cart button.single_add_to_cart_button:hover {
	background-color: var(--primary-deep);
	border-color: var(--primary-deep);
	color: var(--ink);
}

/* Ausverkauft/nicht bestellbar: der Button darf dann nicht wie ein
   aktiver Kauf-Button aussehen. */
.sy-pdp-info form.cart button.single_add_to_cart_button.disabled,
.sy-pdp-info form.cart button.single_add_to_cart_button:disabled {
	background-color: var(--lav-2);
	border-color: var(--lav-2);
	color: var(--muted);
}

/* ---------------------------------------------------------------------
 * Preiszeile: neuer Preis zuerst, dann der durchgestrichene alte.
 * ---------------------------------------------------------------------
 * WooCommerce gibt <del>alt</del><ins>neu</ins> aus — in dieser
 * Reihenfolge steht im Markup zuerst der alte Preis. Die Vorlage zeigt
 * es andersherum. Weil '.sy-pdp-info .price' schon eine Flex-Zeile ist,
 * genuegt 'order'; das Markup bleibt unangetastet, Vorlesesoftware liest
 * weiter die Quelltext-Reihenfolge mit den erklaerenden Zusaetzen.
 * ------------------------------------------------------------------ */
.sy-pdp-info .price ins { order: 1; }
.sy-pdp-info .price del { order: 2; }
.sy-pdp-info .price .sy-pdp-save { order: 3; }

/* "Ursprünglicher Preis war …" — nur für Vorlesesoftware, ans Ende. */
.sy-pdp-info .price .screen-reader-text { order: 4; }

/* Der Preis steht jetzt direkt über den Pflichtangaben — der große
   Abstand von oben wird dort nicht mehr gebraucht. */
.sy-pdp-info .price-wrapper { margin: 0; }
.sy-pdp-info .price { margin: 6px 0 4px; }

/* =====================================================================
 * SAYÉ Set-Kaufbereich ([saye_set_buy], Bundle-Abschnitt Startseite)
 * ---------------------------------------------------------------------
 * Markup: inc/saye-set-buy.php
 * Die Knopfformen (.sy-btn) kommen aus style.css, Abschnitt 3 — sie
 * greifen innerhalb von .sy-band, und der Abschnitt hat diese Klasse.
 * ===================================================================== */
.sy-setbuy-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 14px;
}

.sy-setbuy-now {
	font-size: 2rem;
	color: var(--ink);
	font-weight: 400;
	line-height: 1.1;
}

.sy-setbuy-was,
.sy-setbuy-was .amount {
	font-size: 1.1rem;
	color: var(--muted);
	text-decoration: line-through;
}

.sy-setbuy-save {
	align-self: center;
	background: var(--primary);
	color: var(--ink);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 5px 11px;
	border-radius: 30px;
	white-space: nowrap;
}

/* Pflichtangaben: klein unter dem Preis, wie im Rest des Shops. */
.sy-setbuy-legal,
.sy-setbuy-legal .wc-gzd-additional-info {
	font-size: .76rem;
	color: var(--muted);
	margin: 6px 0 0;
	display: inline;
}

.sy-setbuy-cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 18px;
}

/* Flatsome faerbt .button selbst — hier gewinnt die Hausform. */
.sy-band .sy-setbuy-cta .sy-btn.button {
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	min-height: 0;
	height: auto;
}

.sy-setbuy-cta .is-disabled {
	background-color: var(--lav-2);
	border-color: var(--lav-2);
	color: var(--muted);
	cursor: not-allowed;
}

@media (max-width: 549px) {
	.sy-setbuy-cta { flex-direction: column; }
	.sy-setbuy-cta .sy-btn { width: 100%; }
}

/* Bundle-Abschnitt: Flatsome laesst den Rahmen des Etiketts stehen, auch
   wenn nichts darin steht (loop/sale-flash.php gibt das <div> immer aus).
   In diesen beiden Bausteinen kommt das Etikett aus eigenem Markup
   (★ Bestseller), deshalb hier ganz weg. */
.sy-woo-shot .badge-container,
.sy-woo-buy .badge-container { display: none; }

/* =====================================================================
 * SAYÉ Mini-Karte im Hero ([saye_mini_card])
 * ---------------------------------------------------------------------
 * Die Karte ist jetzt selbst der Link. Die Positionierung (absolut im
 * Hero-Bild, weisser Grund, Schatten) kommt weiter aus style.css über
 * die Klasse .sy-hero-card — die behaelt das Markup deshalb bei.
 * Die Masse hier entsprechen den bisherigen .sy-woo-mini-Regeln, damit
 * die Karte genauso aussieht wie vorher.
 * ===================================================================== */
.sy-hero .sy-hero-card.sy-minicard {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ink);
}

/* style.css setzt auf .sy-hero-card ein ::before mit dem Wort
   "Bestseller" — die Zeile steht hier im Textblock, sonst waere sie
   doppelt und wuerde die Reihe sprengen. */
.sy-hero .sy-hero-card.sy-minicard:before { content: none; }

.sy-minicard-img {
	width: 56px;
	min-width: 56px;
	flex: none;
	background: var(--lav);
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

.sy-minicard-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
}

.sy-minicard-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.sy-minicard-label {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--muted);
	line-height: 1;
}

.sy-minicard-title {
	font-size: .96rem;
	line-height: 1.3;
	color: var(--ink);
	/* Lange Titel auf zwei Zeilen begrenzen, wie bisher. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sy-minicard-price { font-size: 1rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.sy-minicard-price .amount { font-size: 1rem; font-weight: 500; color: var(--ink); }
.sy-minicard-price del,
.sy-minicard-price del .amount { font-size: .8rem; font-weight: 400; color: var(--muted); }
.sy-minicard-price ins { text-decoration: none; }

.sy-minicard-cta {
	/* Nur dieser Text ist der Link — die Karte selbst nicht. */
	margin-left: auto;
	color: var(--ink);
	flex: none;
	color: var(--ink);
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	white-space: nowrap;
}

.sy-minicard-cta:hover { text-decoration: underline; color: var(--ink); }