/* SeedHub B2B — Main Stylesheet
   Translated from Claude Design mockup "Basement Wholesale & Distribution"
   Apple-clean foundation with subtle street inflections.
*/

/* ─── Design Tokens ─────────────────────────────────────── */
/* Die :root-Tokens leben in assets/css/hgi-tokens.css — diese Datei wird
   als Abhaengigkeit vor hgi.css geladen (Frontend) UND separat in den
   Block-Editor (add_editor_style). Grund siehe Kopf von hgi-tokens.css. */

/* ─── Global Reset ──────────────────────────────────────── */

/* Astras Cart-Flyout (.astra-cart-drawer) traegt trotz Offscreen-Position
   (translateX) zur Scroll-Breite bei und erzeugt dadurch horizontalen
   Overflow auf Mobilgeraeten - betrifft jede Seite mit Header-Warenkorb,
   nicht nur neue Bereiche.

   overflow-x: clip auf dem BODY, nicht hidden — und das ist kein Geschmack,
   sondern der Grund, warum bisher kein einziges position:sticky auf dieser
   Site funktioniert hat (gemessen am 10.09. auf der Quick-Order-Seite: die
   Toolbar mit top:56px wanderte beim Scrollen auf -524px, klebte also
   nirgends; dasselbe gilt fuer die Filter-Sidebar der Kategorieseite).
   Ursache: overflow-x:hidden laesst die Y-Achse implizit auf auto
   hochlaufen, damit ist der Body ein eigener Scroll-Container. Beim <html>
   wird Overflow an den Viewport durchgereicht, beim <body> nicht — er wird
   zum naechsten Scrollport jedes sticky Elements darin, und weil er selbst
   nie scrollt (seine Hoehe IST der Inhalt), bleibt jedes sticky Element an
   seiner statischen Position stehen.

   clip klemmt den Ueberlauf genauso ab, macht aber ausdruecklich keinen
   Scroll-Container. hidden bleibt als erste Deklaration stehen: Safari vor
   16 kennt clip nicht und verwirft die zweite Zeile — dort bleibt es beim
   bisherigen Verhalten (kein sticky, aber auch kein horizontaler Ueberlauf)
   statt in einen kaputten Zwischenzustand zu fallen. */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--hgi-font-body);
  font-size: 15px;
  line-height: 1.5;
  /* Fliesstext grau, nicht dunkel (Dirk, 09.10.2026). Die Startseite war es
     schon ueber eigene Regeln; Konto, Produktbeschreibung und alles andere,
     was die Grundfarbe erbt, stand dunkel. Ueberschriften, Produktnamen und
     Preise setzen --hgi-ink selbst und bleiben dunkel. */
  color: var(--hgi-ink-2);
  background: var(--hgi-bg);
  -webkit-font-smoothing: antialiased;
  /* Keine einzelnen Woerter mehr in der letzten Zeile. Vererbt sich in den
     ganzen Fliesstext; Ueberschriften ueberschreiben es unten mit balance.
     Fuer einzeilige Inhalte (Chips, Tabellenzellen, Labels) ist es
     folgenlos, deshalb hier an der Wurzel statt in zwanzig Einzelregeln. */
  text-wrap: pretty;
}

::selection {
  background: var(--hgi-accent);
  color: var(--hgi-ink);
}

:focus-visible {
  outline: 2px solid var(--hgi-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── Typography ────────────────────────────────────────── */

/* Referenz (FONT_PAIRS.clean, einziges aktives Pairing) setzt Bold+Uppercase
   global auf :root — nicht nur im Quick-Order-Kontext. */
.hgi-display,
.woocommerce h1,
.woocommerce h2 {
  font-family: var(--hgi-font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.05;
}

/* Gleichmaessiger Umbruch statt einer kurzen letzten Zeile — an den Elementen
   statt an einer Klassenliste (Dirk, 28.09.2026).
 *
 * Vorher hing balance an .hgi-display/.woocommerce h1/h2. Gemessen am 28.09.
 * standen dadurch 31 von 31 Ueberschriften der Startseite auf dem von body
 * geerbten pretty: die Slider-Titel tragen .hgi-slide__title, die
 * Gutenberg-Ueberschriften .wp-block-heading, und keine der beiden stand in
 * der Liste. Der Kommentar behauptete die Wirkung, der Selektor lieferte sie
 * nicht — eine Klassenliste vergisst jede Klasse, die spaeter dazukommt.
 *
 * Eine direkte Deklaration schlaegt Vererbung unabhaengig von Spezifitaet,
 * deshalb genuegen die blanken Elementselektoren gegen body { pretty }.
 * Chrome balanciert bis vier Zeilen; laengere Ueberschriften fallen
 * folgenlos auf den normalen Umbruch zurueck. */
h1, h2, h3, h4, h5, h6,
.hgi-display {
  text-wrap: balance;
}

.hgi-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--hgi-ink-3);
}

.hgi-mono {
  font-family: var(--hgi-font-body);
  letter-spacing: 0.01em;
}

/* ─── Layout ────────────────────────────────────────────── */

.hgi-container {
  max-width: var(--hgi-max);
  margin: 0 auto;
  padding: 0 var(--hgi-rand);
}

/* Eine Seitenachse: den Rand setzt nur Astras Container (Dirk, 09.10.2026).
 * Die Seitenvorlagen fuer Katalog, Produktseite, Quick Order u.a. stecken
 * ihren .hgi-container IN .ast-container, der schon 22,5px Rand traegt.
 * Gemessen bei 1440px: Logo x=113, Katalog-Inhalt x=138, Produktseite
 * x=135 — der Inhalt stand um einen zweiten Rand eingerueckt.
 * Ausgenommen ist die feste Summenleiste der Quick Order: sie liegt
 * position:fixed ueber der ganzen Fensterbreite und braucht ihren Rand. */
.ast-container .hgi-container:not(.hgi-qo-total-bar *) {
  max-width: none;
  padding-inline: 0;
}

/* Eine Achse fuer die ganze Seite — Kopf, Inhalt, Fuss (Dirk, 24.09.2026).
 *
 * Gemessen am 24.09. auf der Startseite: Der Inhalt sass an allen sechs
 * geprueften Breiten sauber, Kopf- und Fussbereich nicht. Der Kopf hielt
 * einen festen Rand von 35px zur FENSTERKANTE, waehrend die Achse mit der
 * Fensterbreite wandert — bei 1920px stand das Logo dadurch 317px links von
 * der Linie, an der jeder Abschnitt darunter beginnt, und traf sie nur bei
 * rund 1285px zufaellig. Der Fuss lag ab 1280px richtig, verlor aber
 * darunter seinen Seitenrand vollstaendig: Inhalt auf 0, randlos an der
 * Kante.
 *
 * ZUR SPEZIFITAET, und das ist hier der ganze Punkt: Beide Werte stammen
 * nicht aus diesem Repo, sondern aus Astras generiertem Customizer-CSS
 * (wp-content/uploads/astra/astra-theme-dynamic-css-post-*.css). Der erste
 * Anlauf am 24.09. schrieb dagegen mit .site-header .site-primary-header-wrap
 * (0,2,0) an — und verlor gegen "#masthead .ast-container" (1,1,0), weil
 * eine ID jede Zahl von Klassen schlaegt. Sichtbar wurde es daran, dass der
 * Kopf sich ueberhaupt nicht ruehrte. Deshalb steht hier jeweils ein
 * Selektor, der Astras eigenen ueberbietet, statt ihn zu wiederholen.
 *
 * Aus demselben Grund "body .ast-container" und nicht ".ast-container":
 * Astra setzt max-width:1240px in drei Media-Queries (922/993/1201px), die
 * spaeter in der Kaskade stehen. Bei gleicher Spezifitaet gewinnt die
 * spaetere Regel — die Klasse allein liess deshalb die 1240 stehen und nur
 * das Polster wirken, was die Inhaltsspalte auf 1195px verschmaelerte und
 * die Achse an ALLEN Breiten um 2,5px verschob. */
body .ast-container {
  max-width: calc(var(--hgi-max) + 2 * var(--hgi-rand));
  padding-inline: var(--hgi-rand);
}

/* Kopfbereich: die Flaeche bleibt vollbreit, der INHALT steht auf der
 * Inhaltsachse (Jonas ueber Dirk, 28.09.2026 — Umentscheidung gegenueber
 * dem 24.09., wo Kopf und Fuss vom Seitenrand zum Seitenrand liefen).
 *
 * Getragen wird der Hintergrund von .ast-primary-header weiter oben, nicht
 * von diesem Wrapper — die Leiste bleibt deshalb durchgehend, nur Logo und
 * Navigation ruecken auf dieselbe Linie wie der Inhalt darunter.
 *
 * Das max-width gehoert an den WRAPPER, nicht an den Grid-Row darin: Am
 * Grid-Row verteilen sich die Spalten neu und schieben das Logo in die
 * Seitenmitte (gemessen am 24.09.: 523px statt 355px). Astra setzt hier
 * max-width:100%, deshalb steht der eigene Wert an einem Selektor mit ID
 * (1,2,0), der ihn ueberbietet.
 *
 * Der Fuss zieht seit 1.60.0 nach (Dirk, 28.09.) — dieselbe Konstruktion
 * ein Stueck weiter unten. */
#masthead .site-primary-header-wrap.ast-container,
#masthead .ast-mobile-header-wrap .ast-primary-header-bar {
  max-width: calc(var(--hgi-max) + 2 * var(--hgi-rand));
  margin-inline: auto;
  padding-inline: var(--hgi-rand);
}

/* Der Fuss steht auf derselben Inhaltsachse wie Kopf und Inhalt (Dirk,
 * 28.09.2026). Damit folgen alle drei Zonen der Seite einer Linie — der
 * Auftrag vom 24.09. ("eine Achse, ein Rhythmus") ist erst hiermit
 * vollstaendig; der Fuss war die letzte Ausnahme.
 *
 * UND HIER GENAU ANDERSHERUM ALS AM KOPF: Das max-width gehoert an den
 * GRID-ROW, nicht an den Wrapper. Der Grund sind die Farbflaechen — Astra
 * haengt sie an die Wrapper selbst:
 *
 *   .site-primary-footer-wrap[data-section=…] { background:#f9f9f9 }
 *   .site-below-footer-wrap[data-section=…]   { background:#1f2519 }
 *
 * Ein max-width am Wrapper haette beide Baender auf 1200px zusammengezogen
 * und links und rechts den Seitengrund durchblitzen lassen — derselbe
 * Fehler wie am 24.09. bei Quick Order und Kontakt (1.56.3). Am Kopf traegt
 * die Flaeche .ast-primary-header weiter oben, dort ist der Wrapper richtig.
 * Die Frage ist jedes Mal: WER traegt die Farbe.
 *
 * Es bleibt deshalb nur das Polster als Seitenrand; die 1200er-Spalte im
 * Grid-Row ist Astras eigene und stand vor dem 24.09. schon da. Sie wurde
 * damals fuer die Vollbreite ausgehebelt (max-width:none) — dieser Teil
 * faellt jetzt einfach weg, und Astras Wert traegt wieder. */
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap {
  padding-inline: var(--hgi-rand);
}

/* Logo auf 80 Prozent (Jonas ueber Dirk, 28.09.2026): 180px waren Astras
   Customizer-Wert, 144px sind 80 Prozent davon.

   IM CODE STATT IM CUSTOMIZER, wie die Indexierungssperre und der
   Cache-Buster-Gegenfilter: Der Customizer-Wert steht in einer generierten
   Datei unter uploads/astra/ und ist weder im Git nachvollziehbar noch
   deploybar. Hier steht er neben der Begruendung.

   Der Selektor traegt eine ID (1,1,1), weil Astras eigener "header
   .custom-logo-link img" (0,1,2) aus genau dieser generierten Datei kommt
   und spaeter in der Kaskade stehen kann — dieselbe Lehre wie am Kopf.
   width UND max-width, weil Astra beide setzt; ohne width bliebe die
   SVG-Eigenbreite von 826px stehen. */
#masthead .custom-logo-link img {
  width: 144px;
  max-width: 144px;
}

/* ─── Leere Above-Header-Reihe einklappen ─────────────────
   Auf Warenkorb und Kasse rendert das Laufband-Widget nicht — die
   Above-Header-Reihe steht dort trotzdem und ist 50px hoch: ein leerer
   grauer Streifen ueber dem Logo (gemessen 29.09. an beiden Seiten; zum
   Vergleich 32px MIT Band auf Startseite und Katalog).

   WARUM DIE BEDINGUNG AN DER WIDGET-FLAECHE HAENGT und nicht an den
   Seitenklassen: Astra rendert die Reihe auf JEDER Seite mit denselben
   sechs leeren Wrapper-Elementen. `:empty` scheitert am Whitespace,
   `:not(:has(*))` an den Wrappern — die Reihe hat immer Kinder. Einzig
   `.header-widget-area` unterscheidet die Faelle sauber: 0 Kindelemente
   auf Warenkorb und Kasse, 1 (der Ticker) ueberall sonst.

   Die Regel ist damit generisch statt an `body.woocommerce-cart`
   festgenagelt, und sie heilt sich selbst: Kommt dort jemals ein Widget
   hinein, erscheint die Reihe von allein wieder. Eine leere Kopfreihe ist
   auf keiner Seite richtig.

   Die URSACHE, warum das Widget auf diesen beiden Seiten nicht rendert,
   ist offen [Vermutung: Sichtbarkeitsregel an der Astra-Reihe oder ein
   Plugin, das auf WooCommerce-Systemseiten Kopf-Widgets ausraeumt — im
   Widget-Admin ist keine Regel sichtbar]. Auf der Kasse ist der
   ablenkungsfreie Kopf erwuenscht (Dirk, 29.09.), auf dem Warenkorb
   ebenfalls — deshalb wird hier der Leerraum behoben, nicht das Band
   nachgeruestet. */
.ast-above-header-wrap:not(:has(.header-widget-area > *)) {
  display: none;
}

/* ─── Nicht vorraetig: Marken-Ton statt Signalrot ─────────
   WooCommerce setzt .out-of-stock auf reines #ff0000 — eine Farbe, die in
   der Palette nirgends vorkommt und neben dem warmen Braun der Seite
   schreit (gemessen 29.09.). Der Shop hat fuer genau diesen Zustand schon
   eine Sprache: die Bestands-Ampel. --hgi-ampel-knapp ist ihr Rotton.

   Dazu die Typo der uebrigen Statuszeilen, damit die Meldung nicht als
   Fliesstext zwischen Preis und Kaufflaeche haengt. */
.woocommerce div.product .stock.out-of-stock {
  color: var(--hgi-ampel-knapp);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Keine Kaufflaeche fuer etwas, das nicht kaufbar ist.
   Bei gewaehlter, ausverkaufter Variante blieben Mengenfeld und
   "In den Warenkorb" stehen — der Knopf grau, aber im DOM nicht disabled
   (gemessen 29.09.: .disabled.wc-variation-is-unavailable, Property
   disabled=false). Ein Formular, das aussieht wie eine Kaufmoeglichkeit
   und keine ist, ist schlechter als keins.

   WooCommerce haengt .woocommerce-variation-add-to-cart-disabled an den
   Formularteil, sobald die gewaehlte Variante nicht bestellbar ist — die
   Bedingung kommt also von WooCommerce selbst, nicht aus einer eigenen
   Ableitung. Die Variantenkacheln bleiben sichtbar: Der Kunde soll sehen,
   welche Groesse er stattdessen nehmen kann. */
/* Der Knopf braucht nur die laengere Kette — mit der kurzen Form (0-2-0)
   blieb er sichtbar, weil Astra und WooCommerce ihn ueber laengere Ketten
   setzen. Kein !important noetig, die Regel gewinnt regulaer. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart-disabled .hgi-pdp-subtotal {
  display: none;
}

/* Das MENGENFELD braucht !important, und das ist hier kein Pfusch:
   WooCommerces add-to-cart-variation.js schreibt bei JEDEM Variantenwechsel
   `style="display: block"` direkt auf das Element (gemessen 29.09.,
   inlineStyle am div.quantity). Ein Inline-Style schlaegt jede Regel aus
   einer Datei — Spezifitaet hilft grundsaetzlich nicht, egal wie lang die
   Kette wird.

   Die drei Alternativen und warum sie schlechter sind:
     1. Den Inline-Style per eigenem JS zurueckdrehen — ein Wettlauf mit
        WooCommerces eigenem Handler bei jedem Klick.
     2. Das Feld serverseitig nicht rendern — geht nicht, der Zustand
        wechselt clientseitig mit der Variantenwahl.
     3. So lassen — ein Mengenfeld fuer etwas, das nicht kaufbar ist.

   Die Hausregel "kein !important gegen ein Symptom" zielt auf den Fall, wo
   eine eigene Regel gegen eine andere eigene Regel antritt. Gegen einen zur
   Laufzeit gesetzten FREMDEN Inline-Style ist es der einzige CSS-Weg. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart-disabled .quantity {
  display: none !important;
}

/* ─── Mini-Warenkorb: Hinweiszeile auf die Achse ihrer Nachbarn ───
   German Markets p.jde_hint stand ohne seitliches Innenpolster im Panel,
   waehrend .woocommerce-mini-cart__total und __buttons je 20px tragen —
   der Satz begann damit 20px weiter links als alles andere (gemessen
   29.09.: Textkante x=1041 gegen 1061 bei den Nachbarn).

   Senkrecht war er ebenso schief: 12px ueber, 18px unter sich. Beides auf
   16px, den Wert dazwischen. Die 20px sind als Zahl notiert und nicht als
   em-Wert uebernommen, weil der Hinweis 11px Schrift traegt und die
   Nachbarn 15px — dasselbe em waere hier ein anderer Abstand. */
.woocommerce-mini-cart__total ~ p.jde_hint,
.widget_shopping_cart_content p.jde_hint {
  padding-inline: 20px;
  /* Nur oben. Der Abstand nach unten kommt aus dem margin-top der
     Knopfgruppe darunter — beide zusammen ergaeben sonst 34px gegen 16px
     oben (so gemessen nach 1.69.0). */
  margin-block: 16px 0;
}

/* Geschwisterselektor statt Nachfahre: (0,3,1) gegen die (0,2,0) des
   ersten Versuchs, der gegen die 18px des Mini-Cart-Stylesheets verlor
   (gemessen 29.09.). Semantisch ist er ausserdem genauer — die 16px gelten
   nur, wenn der Hinweis wirklich davor steht. */
.widget_shopping_cart_content p.jde_hint + .woocommerce-mini-cart__buttons {
  margin-top: 16px;
}

/* ─── Navigation (Astra Header Override) ────────────────── */

.ast-primary-header {
  background: color-mix(in oklch, var(--hgi-bg) 82%, transparent) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hgi-line);
}

.ast-primary-header .site-title,
.ast-primary-header .site-title a {
  font-family: var(--hgi-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 16px;
  color: var(--hgi-ink);
}

.ast-primary-header .main-navigation a {
  font-size: 13.5px;
  color: var(--hgi-ink-2);
  transition: color 0.15s;
}

.ast-primary-header .main-navigation a:hover,
.ast-primary-header .main-navigation .current-menu-item > a {
  color: var(--hgi-ink);
}

/* ─── Sprachwahl (GTranslate-Widget im Header) ──────────── */

/* Gleicher Schriftgrad wie die Menuepunkte links (13,5px). Vorgabe Dirk,
   10.09.; vorher 15px, weil GTranslate seine Groesse aus der Flaggengroesse
   ableitet (24px Flagge -> 15px Text) und dafuer per JS ein <style> in den
   Kopf schreibt.
   !important ist hier unvermeidbar: der GTranslate-Selektor
   ".gt_container-<hash> a.glink span" hat dieselbe Spezifitaet wie jede
   Nachbildung, die wir schreiben koennten, und sein Block landet zur
   Laufzeit NACH unserem Stylesheet im Dokument — bei Gleichstand gewinnt
   damit immer er. Der Hash im Klassennamen ist ausserdem an die
   Widget-Instanz gebunden, taugt also nicht als stabiler Anker.
   Die Flagge bleibt bei 24px: sie ist ein Bild, keine Typografie. */
.gtranslate_wrapper a.glink span {
  font-size: 13.5px !important;
}

/* ─── Catalog-Dropdown ("Shop") ──────────────────────────── */

li.hgi-nav-dropdown-parent {
  position: relative !important;
}

.hgi-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  margin-top: 8px;
  min-width: 380px;
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.hgi-nav-dropdown-parent:hover .hgi-nav-dropdown,
.hgi-nav-dropdown-parent:focus-within .hgi-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ─── Mega-Menue am Katalog-Punkt ───────────────────────────
 * Maße und Aufbau nach der Referenz (styles.css, .nav-mega): breite Karte
 * unter dem Menuepunkt, drei Spalten plus eine etwas breitere Promo-Spalte.
 * Die schmale Zwei-Spalten-Variante von vorher bleibt als Basis erhalten —
 * .hgi-nav-mega ueberschreibt nur, was breiter werden muss. */

/* Astra setzt die Zeilenhoehe der Header-Menuezeile (gemessen 08.09.2026:
 * line-height 80px) — und sie wird in das injizierte Dropdown vererbt. Ohne
 * Reset ist darin JEDE Zeile 80px hoch: Eintraege standen 88px auseinander,
 * der Spaltenkopf war 90px hoch. Zuruecksetzen am Container reicht, die
 * Kinder erben davon; nur Kopf und Eintrag bekommen ihren eigenen Wert. */
.hgi-nav-dropdown,
.hgi-nav-dropdown a,
.hgi-nav-dropdown p,
.hgi-nav-dropdown div { line-height: 1.5; }

.hgi-nav-mega .hgi-nav-dropdown-heading { line-height: 1.2; }

.hgi-nav-dropdown.hgi-nav-mega {
  width: min(60rem, calc(100vw - 3rem));
  min-width: 0;
  border-radius: var(--hgi-radius-sm);
  box-shadow: 0 0.75rem 3rem rgba(0, 0, 0, 0.08), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
}

.hgi-nav-mega .hgi-nav-dropdown-inner {
  display: grid;
  /* auto-fit statt fester Spaltenzahl: der Kategoriebaum waechst, das Raster
   * bricht dann um, statt Spalten abzuschneiden. */
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 2.25rem;
  padding: 1.75rem;
}

.hgi-nav-mega .hgi-nav-dropdown-heading {
  justify-content: space-between;
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid var(--hgi-line);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Spaltenkopf ohne Ziel: "Genetik-Typ" ist eine Attributachse, keine Seite.
 * Sieht aus wie die anderen Koepfe, ist aber kein Link — ein toter Link
 * waere schlimmer als keiner. */
.hgi-nav-mega .hgi-nav-dropdown-heading-plain { cursor: default; }

.hgi-nav-mega-arrow {
  font-size: 0.75rem;
  opacity: 0.4;
  transition: transform 0.15s, opacity 0.12s;
}

.hgi-nav-mega .hgi-nav-dropdown-heading:hover .hgi-nav-mega-arrow {
  opacity: 0.9;
  transform: translateX(0.1875rem);
}

.hgi-nav-mega .hgi-nav-dropdown-col ul a { justify-content: space-between; }

.hgi-nav-mega-promo {
  background: var(--hgi-accent-bg);
  border-radius: var(--hgi-radius-sm);
  padding: 1.25rem;
}

.hgi-nav-mega-promo-title {
  font-family: var(--hgi-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--hgi-ink);
  margin-top: 0.625rem;
}

.hgi-nav-mega-promo p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--hgi-ink-2);
  margin: 0.5rem 0 1.125rem;
}

.hgi-nav-mega-cta {
  display: block;
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--hgi-ink) !important;
}

.hgi-nav-mega-cta-sub {
  margin-top: 0.5rem;
  font-weight: 400;
  color: var(--hgi-ink-2) !important;
}



.hgi-nav-dropdown-inner {
  display: flex;
  gap: 28px;
  padding: 22px 26px;
}

.hgi-nav-dropdown-col {
  min-width: 160px;
}

.hgi-nav-dropdown-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hgi-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--hgi-ink) !important;
  text-transform: none;
}

.hgi-nav-dropdown-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  margin-bottom: 10px;
}

.hgi-nav-dropdown-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hgi-nav-dropdown-col ul li {
  margin: 0 0 8px;
}

.hgi-nav-dropdown-col ul a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--hgi-ink-2) !important;
}

.hgi-nav-dropdown-col ul a:hover {
  color: var(--hgi-ink) !important;
}

.hgi-nav-dropdown-count {
  font-family: var(--hgi-font-body);
  font-size: 11px;
  color: var(--hgi-ink-4);
}

.hgi-nav-dropdown-all {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hgi-ink) !important;
}

/* ─── Marken-Dropdown (Vorbild House of Seeds) ──────────────
 * Gleiche Karte wie das Katalog-Dropdown (.hgi-nav-dropdown), innen eine
 * nach Buchstaben gruppierte Liste. Kurz (unter 21 Marken): zwei Spalten,
 * kein Scrollen, Suche und Buchstabenleiste verborgen. Lang (.is-lang): eine
 * scrollbare Spalte, Suchfeld oben, Buchstabenleiste rechts. */
.hgi-nav-dropdown.hgi-nav-marken {
  width: 26rem;
  min-width: 0;
  padding: 0.5rem 0 0;
}

.hgi-nav-marken-suche,
.hgi-nav-marken-index { display: none; }

.hgi-nav-marken-body { display: flex; }

.hgi-nav-marken-liste {
  flex: 1;
  columns: 2;
  column-gap: 1.75rem;
  padding: 0.75rem 1.5rem 0.5rem;
}

.hgi-nav-marken-gruppe {
  break-inside: avoid;
  margin-bottom: 0.75rem;
}

.hgi-nav-marken-buchstabe {
  padding-bottom: 0.25rem;
  margin-bottom: 0.375rem;
  border-bottom: 1px solid var(--hgi-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--hgi-ink-3);
}

.hgi-nav-marken ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hgi-nav-marken li { margin: 0 0 0.375rem; }

.hgi-nav-marken li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 13.5px;
  color: var(--hgi-ink-2) !important;
}

.hgi-nav-marken li a:hover { color: var(--hgi-ink) !important; }

.hgi-nav-marken-leer {
  margin: 0;
  font-size: 13px;
  color: var(--hgi-ink-3);
}

.hgi-nav-marken-alle {
  display: block;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--hgi-line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hgi-ink) !important;
}

.hgi-nav-marken.is-lang { width: 20rem; }

.hgi-nav-marken.is-lang .hgi-nav-marken-suche {
  display: block;
  padding: 0.5rem 1rem;
}

.hgi-nav-marken-suche input {
  width: 100%;
  font-size: 13.5px;
}

.hgi-nav-marken.is-lang .hgi-nav-marken-liste {
  /* auto, nicht 1: auch column-count 1 bleibt ein Mehrspalten-Container,
   * und der laeuft bei max-height seitlich in neue Spalten statt zu scrollen
   * (gemessen 1.88.0: scrollHeight blieb bei 36 Eintraegen 315px). */
  columns: auto;
  max-height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hgi-nav-marken.is-lang .hgi-nav-marken-index {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.5rem 0.5rem 0;
}

.hgi-nav-marken-index button {
  padding: 0.0625rem 0.25rem;
  border: 0;
  background: none;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--hgi-ink-3);
  cursor: pointer;
}

.hgi-nav-marken-index button:hover { color: var(--hgi-ink); }

/* ─── Header-Nav: Mockup-Angleichung ────────────────────── */

/* Suche + Konto laufen über die Astra-Header-Widgets, nicht mehr als
   Menüpunkte.

   Astras Original-Icons passen optisch nicht zusammen: die Lupe ist eine
   dünne Outline, das Konto-Icon eine massiv gefüllte Silhouette. Beide
   werden deshalb durch eigene, stroke-identische Outline-Icons ersetzt —
   umgesetzt als CSS-Maske auf ::before, damit Astras Markup (inkl. der
   screen-reader-Texte) unangetastet bleibt und currentColor/Hover greift.
   Runder Hit-Bereich nimmt die Formensprache der Warenkorb-Pill auf. */
.ast-header-search .astra-search-icon,
.ast-header-account .ast-header-account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--hgi-ink-2);
  transition: color 0.15s, background 0.15s;
}

.ast-header-search .astra-search-icon:hover,
.ast-header-account .ast-header-account-link:hover {
  color: var(--hgi-ink);
  background: var(--hgi-bg-soft);
}

/* Astras eigene SVGs raus — Ersatz kommt als Maske. */
.ast-header-search .astra-search-icon svg,
.ast-header-account .ast-header-account-link svg {
  display: none;
}

/* ACHTUNG: Da Astras SVGs hier durch Masken ersetzt werden, greifen Astras
   Customizer-Optionen "Icon Size" und "Icon Color" für Suche und Konto NICHT
   mehr — Größe und Farbe werden hier im Theme gesetzt. 18px entspricht dem
   im Customizer konfigurierten header-account-icon-size, damit beide Werte
   nicht auseinanderlaufen. */
.ast-header-search .astra-search-icon::before,
.ast-header-account .ast-header-account-link::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ast-header-search .astra-search-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.75'/%3E%3Cpath d='M15.6 15.6 20.5 20.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.75'/%3E%3Cpath d='M15.6 15.6 20.5 20.5'/%3E%3C/svg%3E");
}

.ast-header-account .ast-header-account-link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.9'/%3E%3Cpath d='M4.8 20.2a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.9'/%3E%3Cpath d='M4.8 20.2a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
}

/* Astras Slide-Such-Formular wird nicht mehr gebraucht — der Klick auf das
   Icon öffnet die ⌘K-Produktsuche aus hgi.js (siehe dortiger Capture-Handler).
   Das Formular bleibt im Markup (Astra rendert es fest), wird aber nie
   eingeblendet; ausblenden verhindert, dass es bei Fokus/Tab aufklappt. */
.ast-header-search .search-form {
  display: none !important;
}

/* Lime-Punkt vor "Quick Order" (Menüpunkt trägt die Klasse "quick",
   im WP-Menü-Editor gesetzt) — Akzent-Indikator wie im Mockup.
   inline-block ist Pflicht: als reines inline-Element ignoriert ::before
   width/height, dann bleibt der Punkt unsichtbar (u.a. im Mobile-Drawer,
   wo Astra display:block auf .menu-link erzwingt). */
/* Katalog und Quick Order als Hauptziele hervorheben. Astras Menü-
   Typografie aus dem Customizer greift auf .main-header-menu .menu-link mit
   ähnlicher Spezifität — der Kind-Selektor mit li-Klasse liegt darüber.
   Katalog zusätzlich über das Link-Ziel adressiert: die Klasse
   hgi-nav-dropdown-parent wird nur ins Desktop-Menü injiziert, im
   Mobile-Menü (ast-hf-mobile-menu) fehlt sie, dort blieb der Punkt sonst
   normal gewichtet. /shop/ als Anker ist stabil — der Mega-Dropdown-
   Injektor in functions.php hängt ohnehin an genau diesem Ziel. */
.main-header-menu > li.hgi-nav-dropdown-parent > .menu-link,
.main-header-menu > li.quick > .menu-link,
.main-header-menu > li > .menu-link[href$="/shop/"] {
  font-weight: 700;
}

.main-header-menu > li.quick > .menu-link::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--hgi-accent);
}

/* Warenkorb als Text-Pill statt Bag-Icon (Mockup).
   Astra rendert den Zähler als absolut positioniertes ::after-Badge auf
   dem <i data-cart-total="N">; hier wird das Icon ausgeblendet und der
   Zähler inline in die Pill geholt. */
.ast-header-woo-cart .cart-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--hgi-bg-soft);
  color: var(--hgi-ink);
  transition: background 0.15s;
}

.ast-header-woo-cart .cart-container:hover {
  background: var(--hgi-line);
}

.ast-header-woo-cart .ast-addon-cart-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Bag-SVG raus */
.ast-header-woo-cart .ast-icon.icon-bag {
  display: none;
}

.ast-header-woo-cart i.astra-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-style: normal;
}

.ast-header-woo-cart i.astra-icon::before {
  content: "Warenkorb";
  font-family: var(--hgi-font-body);
  font-size: 13.5px;
  font-style: normal;
  color: var(--hgi-ink);
}

/* Im mobilen Kopf ist der Warenkorb ein Icon, keine Text-Pill (Dirk,
   28.09.2026, nach dem Vorbild House of Seeds).

   NICHT NUR GESCHMACK, ES WAR EIN LAYOUTFEHLER: Mit dem Wort "Warenkorb"
   war die rechte Spalte 138px breit, zusammen mit Hamburger, Logo und
   Rinnen also 363px — mehr als die 349px, die bei 390px Fensterbreite
   zwischen den Seitenraendern liegen. Die Zeile lief ueber, und weil damit
   kein freier Platz mehr zu verteilen war, fielen Astras beide "1fr"-Spalten
   auf ihre Inhaltsbreite zurueck (gemessen: 41px links, 138px rechts). Das
   Logo stand dadurch NICHT in der Mitte, obwohl es in der Mittelspalte
   sitzt. Schrumpft die rechte Spalte, entsteht wieder freier Platz, die
   beiden 1fr-Spalten werden gleich gross und das Logo zentriert sich von
   selbst — dieselbe Mechanik wie bei der Punktreihe unter den Slides
   (hgi-core 1.6.1), nur andersherum.

   .ast-header-break-point setzt Astra am body, sobald der mobile Kopf
   greift. Der Schnitt liegt damit an Astras eigenem Umbruchpunkt und nicht
   an einer zweiten, selbst gewaehlten Breite. */
.ast-header-break-point .ast-header-woo-cart i.astra-icon::before {
  content: none;
}

.ast-header-break-point .ast-header-woo-cart .ast-icon.icon-bag {
  display: inline-flex;
  align-items: center;
}

.ast-header-break-point .ast-header-woo-cart .cart-container,
.ast-header-break-point .ast-header-woo-cart .cart-container:hover {
  gap: 0;
  padding: 0;
  background: none;
}

.ast-header-break-point .ast-header-woo-cart .ast-addon-cart-wrap {
  gap: 0;
}

/* Das Logo steht mobil wirklich in der Mitte der Leiste, nicht in der Mitte
   des Rests (Dirk, 28.09.2026, Vorbild House of Seeds).

   WARUM ASTRAS RASTER DAS NICHT KANN: Die Zeile ist "1fr auto 1fr", und eine
   fr-Spur faellt nie unter ihre Inhaltsbreite. Links steht nur der Hamburger
   (41px), rechts Suche und Warenkorb (91px); der gleiche Anteil waere 83px,
   die rechte Spur braucht aber 91,5. Sie wird deshalb auf ihre Inhaltsbreite
   gesetzt, die linke bekommt den Rest — und das Logo sitzt 8px links der
   Fenstermitte. Gemessen: Logo-Mitte 187 gegen Fenster-Mitte 195.

   ERSTER ANLAUF WAR FALSCH und steht hier, damit ihn niemand wiederholt: die
   Mittelspalte auf position:absolute zu setzen. Das Logo sass danach exakt
   auf 195 — aber die Spalte war aus dem Fluss, das Raster hatte nur noch
   zwei Spuren, und Suche und Warenkorb rutschten nach links MITTEN INS LOGO
   (gemessen: Logo 123-267, Suche ab 149). Eine Mitte, die ihre Nachbarn
   verschiebt, ist keine.

   Was wirklich traegt: Flexbox mit "flex: 1 1 0" auf beiden Seiten. Anders
   als eine fr-Spur darf ein Flex-Element mit Basis 0 und min-width:0 unter
   seine Inhaltsbreite — beide Seiten sind damit IMMER gleich breit, und die
   Mitte liegt auf der Fenstermitte, egal was rechts steht. Platz ist
   reichlich: je Seite 103px fuer 91px Inhalt.

   Die Tasten bleiben dabei unangetastet. Der naheliegende Weg waere gewesen,
   Suche und Warenkorb kleiner zu machen, bis Astras Raster von selbst
   aufgeht — 36px sind fuer einen Fingertipp aber schon die Untergrenze. */
.ast-header-break-point #masthead .ast-primary-header-bar .ast-grid-center-col-layout {
  display: flex;
  align-items: center;
  /* width und min-width, weil die Zeile ein Grid-Item ihres Elternteils ist:
     ohne beides wuchs sie auf ihre Inhaltsbreite und lief 23px ueber das
     Polster des Kopfbereichs hinaus (gemessen bei 390px, als das Konto
     dazukam: Zeile 373 statt 350 breit). Das Logo stand danach zwar mittig
     IN DER ZEILE, die Zeile aber nicht mittig im Fenster — 11px daneben.
     column-gap: 0, weil Astras 20px Spaltenabstand in der Flex-Zeile
     weiterwirken und zweimal zaehlen; die Abstaende zwischen den Tasten
     kommen aus deren eigenem Polster. */
  width: 100%;
  min-width: 0;
  column-gap: 0;
}

.ast-header-break-point #masthead .ast-primary-header-bar .site-header-primary-section-left,
.ast-header-break-point #masthead .ast-primary-header-bar .site-header-primary-section-right {
  flex: 1 1 0;
  min-width: 0;
}

.ast-header-break-point #masthead .ast-primary-header-bar .site-header-primary-section-right {
  justify-content: flex-end;
}

/* Auf schmalen Geraeten weicht das LOGO, nicht die Taste.
   Gemessen bei 360px: zwischen den Seitenraendern bleiben 319px, das Logo
   nimmt 144 — je Flanke also 87,5, waehrend Suche und Warenkorb 91 brauchen.
   Das Logo lief in die Suche hinein. Statt die Tasten unter 36px zu
   druecken, bekommt die Mittelspalte einen Deckel: was die Flanken brauchen,
   geht vom Logo ab.

   DER WERT IST ZWEIMAL DIE BREITESTE FLANKE PLUS LUFT, und er gehoert
   mitgezogen, sobald sich der Kopf aendert. Stand 29.09. traegt die linke
   Flanke nur noch den Hamburger (41px), die rechte nur den Warenkorb (36px)
   — Konto und Suche sind in das mobile Menue gewandert (Dirk im Customizer).
   Reserviert sind deshalb 110px statt der 200px, die vorher noetig waren,
   als Konto und Suche in den Flanken standen.

   WARUM DAS NICHT EGAL IST: Mit den alten 200px blieb bei 360px Fenster nur
   noch ein 120px-Logo und bei 320px sogar ein 80px-Logo uebrig — unnoetig
   klein, denn die Flanken brauchten den Platz gar nicht mehr. Gemessen am
   29.09., nachdem der Kopf leichter geworden war. Jetzt stehen die vollen
   144px bis hinunter zu 320px, ohne dass sich etwas beruehrt (Flanken dort
   68px fuer 41px Inhalt). */
.ast-header-break-point #masthead .ast-primary-header-bar .site-header-primary-section-center {
  flex: 0 0 auto;
  width: 144px;
  max-width: calc(100% - 110px);
}

.ast-header-break-point #masthead .ast-primary-header-bar .site-header-primary-section-center .custom-logo-link img {
  width: 100%;
  max-width: none;
  height: auto;
}

/* Der Zaehler geht mobil zurueck in sein absolutes Badge ueber dem Icon.
   Rechnung dahinter: Bei 390px Fensterbreite bleiben nach den Seitenraendern
   349px, davon nimmt das Logo 144 — fuer JEDE der beiden Seitenspalten
   bleiben also hoechstens 102px, sonst kann Astras "1fr auto 1fr" die Mitte
   nicht mehr halten und faellt auf Inhaltsbreiten zurueck. Mit dem Zaehler
   IN der Zeile war der Warenkorb allein 82px breit, zusammen mit der Suche
   138 — und das Logo stand sichtbar links der Mitte. Als Badge ueber dem
   Icon sind es rund 24px. */
.ast-header-break-point .ast-header-woo-cart i.astra-icon {
  position: relative;
}

.ast-header-break-point .ast-header-woo-cart i.astra-icon::after,
.ast-header-break-point .ast-site-header-cart i.astra-icon.no-cart-total::after {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  font-size: 9px;
}

/* Zähler: aus absolutem Badge in die Pill holen. Auch bei 0 anzeigen —
   Astras .no-cart-total-Regel würde ihn sonst ausblenden. */
.ast-header-woo-cart i.astra-icon::after,
.ast-site-header-cart i.astra-icon.no-cart-total::after {
  display: inline-grid;
  place-items: center;
  position: static;
  top: auto;
  right: auto;
  box-shadow: none;
  background: var(--hgi-ink);
  color: var(--hgi-bg);
  font-family: var(--hgi-font-body);
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  letter-spacing: 0;
}

/* Logo mark */
.hgi-logo-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--hgi-accent);
  color: var(--hgi-ink);
  font-family: var(--hgi-font-body);
  font-size: 11px;
  font-weight: 700;
  margin-right: 10px;
  vertical-align: middle;
}

/* ─── Buttons ───────────────────────────────────────────── */

.hgi-btn,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  /* Astra's global Buttons Customizer style ties on specificity with this
     rule for several WooCommerce button states and wins on source order —
     !important keeps every button on the site-wide pill language. */
  border-radius: 999px !important;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.08s, background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
}

.hgi-btn:active,
.woocommerce .button:active {
  transform: scale(0.98);
}

/* Astra's global "Buttons" Customizer style explicitly lists these two
   selectors (disabled variation-select state, WC Blocks buttons) and
   wins on specificity, flattening them back to square corners — force
   our pill language back on top regardless of that state/class combo. */
.woocommerce button.button.alt.disabled.wc-variation-selection-needed,
.wc-block-components-button {
  border-radius: 999px !important;
}

.hgi-btn-primary,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--hgi-ink) !important;
  color: var(--hgi-bg) !important;
  border: none !important;
}

.hgi-btn-primary:hover,
.woocommerce .button.alt:hover {
  background: var(--hgi-accent) !important;
  color: var(--hgi-ink) !important;
}

.hgi-btn-ghost {
  background: transparent;
  color: var(--hgi-ink);
  border-color: var(--hgi-line-2);
}

.hgi-btn-ghost:hover {
  background: var(--hgi-accent);
  color: var(--hgi-ink);
  border-color: var(--hgi-accent);
}

.hgi-btn-accent {
  background: var(--hgi-accent);
  color: var(--hgi-ink);
}

.hgi-btn-sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.hgi-btn-lg {
  height: 48px;
  padding: 0 24px;
  font-size: 15px;
}

/* ─── Pills / Chips ─────────────────────────────────────── */

.hgi-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hgi-bg-soft);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--hgi-ink-2);
  border: 1px solid var(--hgi-line);
}

.hgi-pill-accent {
  background: var(--hgi-accent);
  color: var(--hgi-ink);
  border-color: transparent;
}

/* ─── Product Cards ─────────────────────────────────────── */

.woocommerce ul.products li.product {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
  margin-bottom: 2em;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-2px);
}

/* ─── Konvention: content-visibility auf Listenseiten ──────
 *
 * Vorgabe Dirk, 10.09.: Listenseiten sollen ihre Inhalte erst rendern, wenn
 * sie in den Sichtbereich kommen. Reine CSS-Loesung, kein Observer, kein JS.
 * Wer eine neue Listenseite baut, setzt das hier fort.
 *
 * Zwei Regeln, die dabei nicht verhandelbar sind:
 *
 * 1. contain-intrinsic-height ist Pflicht, nicht Kosmetik. Ohne
 *    Platzhalterhoehe fiele jedes uebersprungene Element auf 0 zusammen und
 *    die Seite wuerde beim Scrollen springen. `auto <wert>` heisst: die
 *    zuletzt wirklich gemessene Hoehe gilt, solange sie bekannt ist, der
 *    Wert ist nur der Startpunkt fuers erste Paint.
 * 2. Die Granularitaet ist der Listenposten oder der Block, nicht die
 *    kleinste Zeile. Bei sehr kleinen Elementen kostet die
 *    Sichtbarkeitsverwaltung mehr, als das Ueberspringen einbringt.
 *
 * Wo es bewusst NICHT steht:
 *   - Marken-Index (page-brands.php): kleines DOM, aber Ankersprung je
 *     Buchstabe. Ein Sprung in einen uebersprungenen Bereich landet nur so
 *     genau wie die Platzhalterhoehe und korrigiert sich danach sichtbar.
 *   - Quick-Order-ZEILEN: die Produktspalte und der Tabellenkopf sind
 *     sticky. Der Markenblock darum traegt content-visibility schon
 *     (.hgi-qo-brand) und ist die richtige Groesse.
 *   - Warenkorb-/Bestellzeilen: zu wenige Posten, um etwas zu sparen.
 *
 * Produktkarten im klassischen Loop (Katalog, Startseite, "Passt ins
 * gleiche Regal"). 430px ist die live gemessene Kartenhoehe bei drei
 * Spalten (269px Bildquadrat + 162px Textkoerper). Die Breite bleibt
 * unangetastet — sie kommt aus der Grid-Spur (minmax(0,1fr)) und ist damit
 * nie inhaltsabhaengig. */
.woocommerce ul.products li.product {
  content-visibility: auto;
  contain-intrinsic-height: auto 430px;
}

/* Bild-Wrapper trägt den Rahmen und ist Bezugspunkt für das Badge.

   Rahmenfarbe ist die des schwarzen Dreiecks in den Produktbildern
   (--hgi-img-edge, gemessen rgb(19,19,19)) statt der hellen --hgi-line:
   die Bilder laufen bis an die Kante schwarz aus, eine helle Haarlinie
   setzte sie sichtbar davon ab. Vorgabe Dirk, 10.09. */
.hgi-pc-img {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--hgi-bg-soft);
  border: 1px solid var(--hgi-img-edge);
  border-radius: var(--hgi-radius-sm);
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* Der Rahmen sitzt am Wrapper — am Bild selbst würde er sich doppeln.
   Die Rundung ebenfalls: der Wrapper hat overflow:hidden und beschneidet
   das Bild damit auf seine runden Ecken. Ein eigener Radius am <img> waere
   doppelt und wuerde bei abweichenden Werten als Doppelkante sichtbar,
   deshalb steht hier weiter 0. (Loest die Vorgabe "ohne Rundung" vom
   03.09. ab — Dirk hat sich am 10.09. auf abgerundete Ecken festgelegt,
   Referenz ist der Sortier-Select: --hgi-radius-sm.)

   margin:0 ist der Fix für den hellen Streifen unter jedem Produktbild:
   WooCommerce gibt Loop-Bildern margin-bottom (hier 12px). Da .hgi-pc-img
   overflow:hidden hat, kann die Margin nicht herauskollabieren — der
   Wrapper wuchs um 14px und zeigte darunter seinen eigenen bg-soft-
   Hintergrund. Betraf ALLE Bilder, nicht nur den Platzhalter. Selektor
   mit .woocommerce-Präfix, weil WooCommerce' eigene Regel
   (.woocommerce ul.products li.product img) sonst gewinnt. */
.woocommerce ul.products li.product .hgi-pc-img img,
.hgi-pc-img img {
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* Die Karte ist eine Spalte mit festen Slots (Vorgabe Dirk, 10.09.): Preis
   und Grundpreis sollen auf jeder Karte auf derselben Höhe sitzen, egal ob
   ein Produkt Sorten hat, eine Marke gepflegt ist oder B2B Market einen UVP
   liefert. Zwei Mittel greifen zusammen:

   1. Jede optionale Zeile hält ihre Höhe frei (min-height unten, plus die
      leeren Platzhalter aus content-product.php). Damit sind die Karten
      schon strukturell gleich hoch.
   2. Der Meta-Block hängt zusätzlich per margin-top:auto an der Unterkante.
      Das fängt ab, was Slot 1 nicht kann — vor allem einen Produktnamen,
      der über die reservierten zwei Zeilen hinausläuft. Dafür muss die
      Höhe der Grid-Zelle bis zum Meta-Block durchgereicht werden, deshalb
      sind Karte und Link ebenfalls Flex-Spalten. */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product > .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hgi-pc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding: 12px 4px 0;
}

/* min-height, weil die Zeile auch ohne gepflegte Marke stehen bleibt
   (leeres div aus dem Template). 1em = genau eine Zeile in ihrer Größe. */
.hgi-pc-brand {
  /* 1.5em und explizite line-height: 1em waere nur die Schriftgroesse, nicht
     die Zeilenhoehe — eine leere Markenzeile war dadurch 5px flacher als
     eine gefuellte und verschob alles darunter (gemessen 392px statt
     397px Preishoehe). */
  line-height: 1.5;
  min-height: 1.5em;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  margin-bottom: 2px;
}

/* Produktname: das Template rendert .hgi-pc-name, nicht WooCommerce'
   .woocommerce-loop-product__title — ohne diese Regel erbte der Titel
   nur Body-Werte (15px/400 statt 14.5px/500 laut Styleguide). */
.hgi-pc-name {
  /* KEINE Zwei-Zeilen-Reserve mehr (Dirk, 09.10.2026, Screenshot Katalog
     Desktop: Luft unter einzeiligen Namen wie "A.M.S." zu gross). Seit
     10.09. hielt der Name zwei Zeilen frei, damit die Packungsknoepfe aller
     Karten auf einer Hoehe stehen. Am Telefon war die Reserve seit 1.85.1
     schon weg; jetzt ueberall. Die Preise stehen weiter auf einer Linie,
     weil .hgi-pc-meta per margin-top:auto unten haengt. */
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--hgi-ink);
}

/* align-items: flex-end und nicht baseline: sobald B2B Market einen UVP in
   den Preis-Slot schreibt, ist .hgi-pc-price zweizeilig (UVP oben, Preis
   unten). Bei baseline-Ausrichtung haengt sich der Grundpreis rechts an die
   ERSTE Zeile, also an den UVP — gemessen an den Karten mit UVP stand er
   dadurch eine Zeile hoeher als auf Karten ohne UVP. Unterkante haelt ihn
   in beiden Faellen auf Hoehe des Preises.

   padding-top haelt das Band fuer den UVP frei, AUCH wenn keiner da ist —
   er wird darin absolut positioniert (siehe .hgi-pc-price .b2b-rrp). Erst
   das bringt die Preiszeile auf jeder Karte auf dieselbe Hoehe: solange der
   UVP im Fluss stand, schob er den Preis auf seinen Karten um 15px nach
   unten (gemessen 381px vs. 396px ab Kartenoberkante).
   16px = eine UVP-Zeile (10,5px x 1,35) plus 2px Abstand. */
/* 13.10.2026 (Dirk, Screenshot Katalog): Preis, Grundpreis und Gratis-
   Hinweis stehen immer untereinander. Nebeneinander passte es nur ohne
   Aktion: Streichpreis + Preis + Grundpreis + "+ gleiche Packung" quetschten
   den Grundpreis in eine Spalte von einem Wort Breite ("ab / 2,37€ / /"),
   der Gratis-Hinweis lief rechts aus der Karte. Damit entfallen auch die
   frueheren Sonderregeln fuer schmale Karten und das Telefon. */
.hgi-pc-meta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* auto statt 4px: haelt den Block an der Unterkante der Karte. Die Karten
     einer Rasterzeile sind gleich hoch (Grid streckt sie), damit steht die
     Preiszeile auch dann auf einer Linie, wenn ein Produktname ueber die
     reservierten zwei Zeilen hinauslaeuft. 4px waren der Mindestabstand
     nach oben — der steckt jetzt im padding-top-Band. */
  margin-top: auto;
  padding-top: 16px;
}

/* Das 16px-Band fuer den UVP nur, wo einer steht (vorher nur am Telefon,
   seit 09.10.2026 ueberall). */
.hgi-pc-meta:not(:has(.b2b-rrp)) {
  padding-top: 8px;
}


.hgi-pc-price {
  font-family: var(--hgi-font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--hgi-ink);
}

/* UVP auf der Karte in eigener Typografie (Vorgabe Dirk, 10.09.).
   B2B Market schreibt ihn als <small class="b2b-rrp"> mitten in den
   Preis-Slot, gefolgt von einem <br>. Ohne eigene Regel erbte er Oswald 500
   in Preisgroesse (nur durch <small> auf ~12px verkleinert) und las sich
   dadurch wie ein zweiter Preis. Jetzt: Fliesstext-Schrift, Kaufhausgroesse
   der Nebenangaben, gedaempfte Farbe — dieselbe Rolle wie der Grundpreis
   daneben (.hgi-pc-unit).

   Nur .b2b-rrp bekommt display:block, KEINE generische small-Regel: das
   Sternchen (.hgi-tax-hint) steckt ebenfalls in einem <small> und gehoert
   hochgestellt an den Betrag, nicht auf eine eigene Zeile (derselbe Fehler
   war am 08.09. im PDP-Preiskasten zu korrigieren). Das <br> von B2B Market
   entfaellt, den Abstand macht margin-bottom. */
.hgi-pc-price .b2b-rrp {
  /* Absolut im reservierten Band oben in .hgi-pc-meta — im Fluss wuerde er
     die Preiszeile nach unten schieben und die Karten wieder ungleich
     machen. nowrap, weil eine absolut positionierte Box nur bis zur
     Containerbreite waechst und "UVP (inkl. MwSt.): 199,90 €" sonst in eine
     zweite Zeile umbrechen und aus dem Band laufen koennte. */
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  display: block;
  font-family: var(--hgi-font-body);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--hgi-ink-3);
}

.hgi-pc-price br {
  display: none;
}

/* Der UVP enthaelt selbst einen .woocommerce-Price-amount — ohne diese
   Regel zieht er sich die Kartenpreis-Typografie zurueck in die Zeile. */
.hgi-pc-price .b2b-rrp .woocommerce-Price-amount,
.hgi-pc-price .b2b-rrp .woocommerce-Price-currencySymbol {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Grundpreis pro Samen auf der Karte — Vergleichswert, deshalb leiser als
   der Preis darueber und in Mono wie die uebrigen Kennzahlen. */
.hgi-pc-unit {
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--hgi-ink-3);
}

/* Der Betrag kommt aus wc_price() und bringt WooCommerce-Markup mit, das
   sonst die Kartenpreis-Typografie erbt. */
.hgi-pc-unit .woocommerce-Price-amount {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
}

.hgi-pc-login-hint {
  font-size: 10px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14.5px !important;
  font-weight: 500;
  color: var(--hgi-ink);
  line-height: 1.3;
  padding: 0;
}

.woocommerce ul.products li.product .price {
  font-family: var(--hgi-font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--hgi-ink);
}

/* Karten ohne Packungsgroessen (z.B. Holy Hemp): Die leere Sortenzeile
   hielt 20px plus Luecken frei, darunter stand ein Loch bis zum Preis
   (Dirk, 09.10.2026). Das Template markiert sie mit aria-hidden. */
.hgi-pc-variants[aria-hidden="true"] {
  display: none;
}

/* Variant chips on product cards */
/* min-height = Chip-Höhe: die Zeile steht auch bei einfachen Artikeln ohne
   Sorten (leeres div aus dem Template) und hält deren Platz. */
.hgi-pc-variants {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  min-height: 20px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--hgi-ink-3);
}

.hgi-pc-variants-label {
  text-transform: uppercase;
  flex: 0 0 auto;
}

.hgi-pc-variants-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hgi-pc-variant-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius-sm);
  background: var(--hgi-surface);
  color: var(--hgi-ink-2);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Product badge */
.woocommerce ul.products li.product .onsale,
.hgi-pc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--hgi-ink);
  color: var(--hgi-bg);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: auto;
  line-height: 1.4;
}

/* ─── Product Grid ──────────────────────────────────────── */

.woocommerce ul.products {
  display: grid !important;
  gap: 24px;
}

/* Keine Spaltenzahl im Theme: Astra Pro setzt sie auf allen Breiten ueber
   die Klassen columns-N / tablet-columns-N / mobile-columns-N (Customizer >
   WooCommerce > Produktkatalog). Dirk, 07.10.2026: "das kann ich besser ueber
   den Customizer steuern". Bis 1.84.0 ueberschrieb das Theme Astra hier mit
   !important. */

/* Astra's "Infinite Scroll" pagination mode hides the classic numbered
   pager and relies on its own JS to auto-load further pages — that JS
   doesn't fire on this install, so it silently stranded products 21-90
   with no way to reach them. The classic pager markup/links still
   render correctly; force it visible regardless of the Customizer's
   pagination-type setting. */
.ast-woocommerce-pagination-type-infinite .woocommerce-pagination {
  display: block !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
}

.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

/* ─── Spec Strip ────────────────────────────────────────── */

.hgi-spec-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hgi-line);
  border-bottom: 1px solid var(--hgi-line);
  margin: 64px 0;
}

.hgi-spec-strip > div {
  padding: 28px 24px;
  border-right: 1px solid var(--hgi-line);
}

.hgi-spec-strip > div:last-child {
  border-right: 0;
}

.hgi-spec-strip .hgi-spec-n {
  font-family: var(--hgi-font-display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.hgi-spec-strip .hgi-spec-l {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  margin-top: 4px;
}

/* ─── Hero Section ──────────────────────────────────────── */

.hgi-hero {
  position: relative;
  overflow: hidden;
  background: var(--hgi-bg-soft);
}

.hgi-hero-inner {
  position: relative;
  z-index: 2;
  padding: 120px 0 96px;
  text-align: center;
}

.hgi-hero h1 {
  font-family: var(--hgi-font-display);
  font-size: 82px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.hgi-hero .hgi-hero-sub {
  font-size: 21px;
  color: var(--hgi-ink-2);
  max-width: 680px;
  margin: 18px auto 32px;
  text-wrap: balance;
}

.hgi-hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
}

/* ─── Aisles Section ────────────────────────────────────── */

.hgi-aisles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 96px 0;
}

.hgi-aisle-card {
  padding: 28px;
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius-lg);
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}

.hgi-aisle-card:hover {
  background: var(--hgi-bg-soft);
}

/* ─── Footer (Astra Override) ───────────────────────────── */

.site-footer {
  border-top: 1px solid var(--hgi-line);
  background: var(--hgi-bg);
}

.site-footer .ast-footer-copyright {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--hgi-ink-3);
}

/* Weg fuer Endkunden zum B2C-Shop (Dirk, 10.09.). Nur Unterstreichung, kein
   eigener Farbton: die Zeile sitzt in Astras Footer-Bar, und die Regel
   .site-below-footer-wrap a weiter oben setzt dort Weiss mit !important —
   eine Farbe hier waere toter Code. Unterstrichen statt farbig passt
   ohnehin: die Kernaussage ist der B2B-Ausschluss davor, das hier ist die
   Ausleitung. nowrap, damit "HOUSE-OF-SEEDS.DE" nicht mitten im Domainnamen
   umbricht. */
.site-footer .hgi-footer-b2c {
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Astras separate "Footer Bar"-Builder-Zeile (site-below-footer-wrap) hat
   ihre eigene dunkle Flaeche und erbt die globale Linkfarbe — der Credit-
   Link war darauf praktisch unsichtbar, deshalb die beiden Regeln unten.

   Die Flaeche selbst kam bis 10.09. aus dem Customizer und stand dort noch
   auf #1f2519, dem Dunkelgruen VOR dem Rebrand (gefunden in Astras
   dynamischem CSS: .site-below-footer-wrap[data-section=…]{background-color:
   #1f2519}). Freigabe Dirk am 10.09.: auf Braun ziehen. Dieselbe Variable
   wie die Quick-Order-Summenleiste, damit die dunklen Flaechen der Site
   einen Ton sprechen.

   Selektor mit .site-footer davor (0,3,0), damit er Astras (0,2,0) unter
   allen Umstaenden schlaegt — Astras Datei liegt aktuell VOR hgi.css im
   Dokument, aber das ist Reihenfolge, nicht Spezifitaet, und die kann sich
   mit einer Astra-Aktualisierung aendern. Das data-section-Attribut bleibt
   im Selektor, damit die Regel nur die Footer-Bar trifft. */
.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
  background-color: var(--hgi-brown-dark);
}

.site-below-footer-wrap {
  color: rgba(255, 255, 255, 0.55);
}

.site-below-footer-wrap a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.site-below-footer-wrap a:hover {
  color: var(--hgi-accent) !important;
}

/* Fussleiste schlank (Jonas, Entwurf v85; Freigabe Dirk 07.10.2026). Drei
   Polster stapelten sich um eine Textzeile: 20px am Wrapper (Astra), 48/8px
   an den Grid-Spalten (die Regel fuer die Widget-Spalten weiter unten trifft
   auch diese Zeile) und 20px am Copyright-Element — 133px Hoehe fuer 17px
   Text. Jetzt 10px oben und unten wie in v85.
   Die Farbe bleibt --hgi-brown-dark, nicht v85s #3d1b04: dieselbe Flaeche
   wie die Quick-Order-Summenleiste, damit die dunklen Leisten einen Ton
   sprechen (T90). */
.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
  padding-block: 0;
  min-height: 0;
}

.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row,
.site-footer .site-below-footer-wrap .ast-builder-footer-grid-columns {
  min-height: 0;
}

.site-footer .site-below-footer-wrap .ast-builder-footer-grid-columns {
  padding: 10px 0;
}

.site-below-footer-wrap .ast-builder-layout-element.ast-footer-copyright {
  padding-top: 0;
}

/* ─── WooCommerce PDP (Product Detail Page) ─────────────── */

.woocommerce div.product .product_title {
  font-family: var(--hgi-font-display);
  font-size: 32px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
}

.woocommerce div.product p.price {
  font-family: var(--hgi-font-display);
  font-size: 28px;
  font-weight: 500;
}

/* Sticky add-to-cart bar — matches the Quick Order total bar's dark
   treatment + lime-accent primary CTA, so both sticky cart-action bars
   on the site read as the same component instead of two unrelated ones
   (light single-button strip vs. dark multi-stat strip). */
.ast-sticky-add-to-cart {
  background: var(--hgi-brown-dark) !important; /* derselbe Ton wie Quick-Order-Leiste und Fussleiste (T90, Dirk 07.10.) */
  border-top: none !important;
}

.ast-sticky-add-to-cart .ast-sticky-add-to-cart-title {
  color: var(--hgi-bg);
}

.ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-price {
  color: var(--hgi-bg);
}

.ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-price .hgi-tax-hint {
  color: rgba(255, 255, 255, 0.6);
}

.ast-sticky-add-to-cart .single_add_to_cart_button,
.ast-sticky-add-to-cart .single_link_to_cart_button {
  background: var(--hgi-accent) !important;
  color: var(--hgi-ink) !important;
  height: 48px;
}

.ast-sticky-add-to-cart .single_add_to_cart_button:hover,
.ast-sticky-add-to-cart .single_link_to_cart_button:hover {
  background: #fff !important;
  color: var(--hgi-ink) !important;
}

/* Variant/Pack selector */
.woocommerce div.product .variations td.value select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--hgi-surface);
  color: var(--hgi-ink);
  border: 1px solid var(--hgi-line-2);
  border-radius: var(--hgi-radius);
}

/* Astra rendert Variationsattribute bereits selbst als Buttons statt als
   <select> (.ast-variation-button-group/.ast-single-variation, inkl. Klick-
   Handling + Sync mit dem darunterliegenden <select>) — ein eigenes JS zum
   "Select durch Pills ersetzen" war daher überflüssig und erzeugte eine
   Dublette (verworfen, s. CHANGELOG 1.4.3). Hier nur das Aussehen von Astras
   vorhandenen Buttons auf den Referenz-Pill-Stil umgestellt. */
.woocommerce div.product .variations .ast-variation-button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.woocommerce div.product .variations .ast-single-variation {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  min-width: 96px;
  border: 1.5px solid var(--hgi-line-2);
  border-radius: var(--hgi-radius-sm);
  background: var(--hgi-surface);
  color: var(--hgi-ink);
  cursor: pointer;
  font-family: var(--hgi-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.woocommerce div.product .variations .ast-single-variation:hover {
  border-color: var(--hgi-ink);
}

/* Gewaehlte Kachel in --hgi-brown-dark statt --hgi-ink (Jonas, 29.09.).
   --hgi-ink ist oklch(0.20 0.05 51) und liest sich auf der gefuellten
   Flaeche als Schwarz; --hgi-brown-dark (#4a2a12) ist derselbe Hue, nur
   hell genug, um als Braun erkennbar zu bleiben. Damit traegt die Kachel
   denselben Ton wie Footer-Bar und Quick-Order-Summenleiste.
   Die Kante bleibt auf --hgi-ink: sie ist nur 1,5px breit, dort gewinnt
   Abgrenzung gegen die Nachbarkachel vor Farbtreue. */
.woocommerce div.product .variations .ast-single-variation.active {
  border-color: var(--hgi-ink);
  background: var(--hgi-brown-dark);
  color: var(--hgi-bg);
}

.woocommerce div.product .variations .ast-single-variation[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.woocommerce div.product .variations td.label label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
}

/* Quantity stepper */
.woocommerce .quantity .qty {
  width: 44px;
  height: 36px;
  border: 1px solid var(--hgi-line-2);
  border-radius: 999px;
  text-align: center;
  font-size: 13px;
  color: var(--hgi-ink);
}

/* Product gallery
   Astra rendert die Galerie mit eigenem Markup (.woocommerce-product-gallery__wrapper
   direkt statt der klassischen .woocommerce-product-gallery__image-Slides, eigene
   vertikale Thumbnail-Liste .ast-woocommerce-product-gallery__image statt
   .flex-control-thumbs) — beide Selektor-Varianten stehenlassen, falls sich das
   irgendwann wieder ändert; die Astra-Selektoren sind die aktuell wirksamen. */
/* Kantenfarbe wie im Katalog: --hgi-img-edge ist der Ton des schwarzen
   Dreiecks in den JTL-Bildern. Vorgabe Dirk, 10.09. — dieselbe Begruendung
   wie an .hgi-pc-img: die Bilder laufen bis an den Rand schwarz aus, eine
   helle Haarlinie setzt sie sichtbar davon ab. Gilt fuer alle PRODUKT-
   bilder (Galerie, Thumbs, Warenkorb, Quick Order); redaktionelle Bilder
   aus Gutenberg-Bloecken behalten --hgi-line. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper img {
  border-radius: var(--hgi-radius-sm);
  border: 1px solid var(--hgi-img-edge);
}

.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce div.product div.images .ast-woocommerce-product-gallery__image img {
  width: 76px;
  height: 76px;
  border-radius: var(--hgi-radius-sm);
  background: var(--hgi-bg-soft);
  border: 1px solid var(--hgi-img-edge);
  object-fit: cover;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .ast-woocommerce-product-gallery__image.flex-active-slide img {
  border-color: var(--hgi-ink);
}

/* ─── WooCommerce Cart ──────────────────────────────────── */

.woocommerce-cart table.cart img {
  width: 72px;
  height: 72px;
  border-radius: var(--hgi-radius-sm);
  background: var(--hgi-bg-soft);
  border: 1px solid var(--hgi-img-edge);
  object-fit: cover;
}

.woocommerce-cart .cart_totals {
  padding: 24px;
  border-radius: var(--hgi-radius-lg);
  border: 1px solid var(--hgi-line);
  background: var(--hgi-surface);
}

/* ─── Filters (Sidebar) ────────────────────────────────── */

.hgi-filters {
  position: sticky;
  top: calc(var(--hgi-nav-h) + 24px);
  align-self: start;
}

/* Die Sidebar ist mit allen Facetten hoeher als das Fenster (gemessen
   ~1215px). Ein sticky Element, das nicht ins Fenster passt, friert beim
   Scrollen ein, sobald seine Oberkante `top` erreicht — sein unteres Ende
   waere danach nicht mehr erreichbar, hier also alles ab THC. Solange das
   sticky wegen des body-Overflows gar nicht wirkte, fiel das nicht auf; mit
   der Reparatur wuerde es auffallen. Deshalb: eigene Hoehenbegrenzung mit
   eigenem Scroll. Nur Desktop — unter 900px ist die Sidebar ein
   Bottom-Sheet und bringt seine eigene Begrenzung mit. */
@media (min-width: 901px) {
  .hgi-filters {
    max-height: calc(100vh - var(--hgi-nav-h) - 48px);
    overflow-y: auto;
    /* Abstand zur Scrollleiste, damit die Zaehler rechts nicht daran kleben. */
    padding-right: 6px;
  }
}

.hgi-filter-group {
  border-bottom: 1px solid var(--hgi-line);
  padding: 20px 0;
}

/* Referenz styles.css:757. Ohne das startet die Sidebar 20px tiefer als das
   Produktraster daneben.
   :first-of-type, nicht :first-child — sobald ein Filter gesetzt ist, stehen
   die Hidden-Felder von wc_query_string_form_fields() als erste Kinder im
   Formular, und :first-child hätte genau dann nicht mehr gegriffen. Die
   Hidden-Felder sind <input>, die Gruppen <div>: nach Elementtyp ist die
   erste Gruppe immer die erste. */
.hgi-filter-group:first-of-type {
  padding-top: 0;
}

.hgi-filter-group h5 {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: none;
  margin: 0 0 14px;
  color: var(--hgi-ink-3);
  font-weight: 500;
}

.hgi-filter-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hgi-filter-group li {
  font-size: 13.5px;
  color: var(--hgi-ink-2);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.hgi-filter-group li:hover,
.hgi-filter-group li.active {
  color: var(--hgi-ink);
}

.hgi-filter-group li.active {
  font-weight: 500;
}

/* ─── Facetten: Attribute + Marke ─────────────────────────
   Anders als die Kategorieliste ist das eine Mehrfachauswahl. Nur Fettung und
   Farbe wie dort wuerden nicht zeigen, dass ein zweiter Klick den Wert wieder
   herausnimmt — deshalb ein Kaestchen als Zustandsmarke. Kein zusaetzliches
   Markup fuer den Haken: derselbe Masken-Trick wie beim Chevron. */

.hgi-facet li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: inherit;
}

.hgi-facet .hgi-facet-name {
  flex: 1;
}

.hgi-facet .hgi-facet-box {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 1px solid var(--hgi-line-2);
  border-radius: var(--hgi-radius-sm);
  background: var(--hgi-surface);
  transition: background 0.12s, border-color 0.12s;
}

.hgi-facet li:hover .hgi-facet-box {
  border-color: var(--hgi-ink-3);
}

.hgi-facet li.active .hgi-facet-box {
  background: var(--hgi-ink);
  border-color: var(--hgi-ink);
  -webkit-mask: none;
  mask: none;
  position: relative;
}

.hgi-facet li.active .hgi-facet-box::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--hgi-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Werte ohne Treffer in der aktuellen Auswahl (T153, Variante B): grau,
   nicht klickbar, aber an ihrem Platz, damit die Leiste nicht springt. */
.hgi-facet li > .hgi-facet-leer {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: var(--hgi-ink-4);
  cursor: default;
}

.hgi-facet li.is-leer .hgi-facet-box,
.hgi-facet li.is-leer:hover .hgi-facet-box {
  border-color: var(--hgi-line);
  background: transparent;
}

.hgi-facet li.is-leer .count {
  color: var(--hgi-ink-4);
}

/* Der Zaehler steht rechts und darf nicht mit dem Namen konkurrieren. */
.hgi-facet .count {
  color: var(--hgi-ink-3);
  font-variant-numeric: tabular-nums;
}

.hgi-facet li.active .count {
  color: var(--hgi-ink-2);
}

/* ─── Brands Index Grid ─────────────────────────────────── */
/* Randlos statt Card-Grid mit Radius+Gap: eine gemeinsame Rahmenlinie zwischen
   allen Zellen (border-top/-left am Grid, border-right/-bottom je Zelle) statt
   Lücken zwischen einzelnen Karten — Referenz-Mockup styles.css:1626-1685. */

.hgi-brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hgi-line);
  border-left: 1px solid var(--hgi-line);
}

.hgi-brand-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  min-height: 36px;
  min-width: 0;
  border-right: 1px solid var(--hgi-line);
  border-bottom: 1px solid var(--hgi-line);
  background: var(--hgi-surface);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s;
}

.hgi-brand-card:hover {
  background: var(--hgi-bg-soft);
}

.hgi-brand-card-name {
  font-family: var(--hgi-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--hgi-ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hgi-brand-card-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
  font-family: var(--hgi-font-body);
}

.hgi-brand-card-count-n {
  font-size: 12px;
  font-weight: 600;
  color: var(--hgi-ink);
}

.hgi-brand-card-count-l {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
}

@media (max-width: 1100px) {
  .hgi-brands-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .hgi-brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Catalog: Sidebar Filters ──────────────────────────── */

.hgi-cat-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}

.hgi-filters-mobile-head {
  display: none;
}

/* .hgi-filter-group li ist display:flex;justify-content:space-between fuer
   Leaf-Items mit genau einem Inhalt (Name+Count in einem <a>). Kategorie-
   Gruppen haben aber ZWEI Block-Kinder (<a> und die verschachtelte
   <ul class="hgi-cat-sub">) - die geerbte Row-Flex-Regel schob beide als
   Flex-Geschwister nebeneinander statt die Unterliste darunter zu stapeln. */
.hgi-filter-group li.hgi-cat-group {
  display: block;
}

.hgi-cat-group > a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hgi-cat-group > a > span:first-of-type {
  flex: 1;
}

/* Der Glyph ‣ war bei 11px praktisch unsichtbar (sah wie ein Punkt aus).
   Ersetzt durch denselben Chevron wie im Sortier-Select, damit beide
   Aufklapp-Elemente der Seite dieselbe Form haben. Zugeklappt zeigt er
   nach rechts (-90deg), aufgeklappt nach unten (0deg) — vorher war die
   Logik invertiert (aufgeklappt zeigte er nach links). */
.hgi-cat-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--hgi-ink-3);
  font-size: 0;
  line-height: 0;
  width: 12px;
  height: 12px;
  padding: 0;
  cursor: pointer;
  transform: rotate(-90deg);
  transition: transform 0.15s, color 0.15s;
}

.hgi-cat-toggle::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Astras globales "button:focus, button:hover { background:
   var(--ast-global-color-1) }" (0,1,1) schlägt eine reine Klassenregel
   (0,1,0) — nach einem Klick lag deshalb ein limettengrünes Quadrat in der
   Sidebar (der Button behält den Fokus). Betrifft jeden flächenlosen
   Icon-Button; hier und bei den Geschwistern unten mit einer
   Zwei-Klassen-Regel gegengesetzt. */
.hgi-cat-toggle:hover,
.hgi-filter-group .hgi-cat-toggle:hover,
.hgi-filter-group .hgi-cat-toggle:focus,
.hgi-filter-group .hgi-cat-toggle:active {
  background: transparent;
  color: var(--hgi-ink);
}

/* Ohne die Lime-Fläche hätte der Button GAR keinen sichtbaren Fokus mehr
   (gemessen: outline 0px none) — das wäre eine Tastatur-Bedienbarkeitslücke.
   Deshalb ein eigener Ring, aber nur :focus-visible: bei Mausklick bleibt es
   ruhig, bei Tastaturnavigation ist der Fokus klar erkennbar. */
.hgi-filter-group .hgi-cat-toggle:focus-visible {
  background: transparent;
  color: var(--hgi-ink);
  outline: 2px solid var(--hgi-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Astra/Theme legt Buttons zusätzlich einen weichen Schatten auf
   (0 1px 2px rgba(0,0,0,.05)) — bei flächenlosen Icon-Buttons ergibt das
   einen schwach sichtbaren Kasten, auch ohne Fokus. Hier abgeschaltet. */
.hgi-filter-group .hgi-cat-toggle,
.hgi-qo-search .hgi-qo-search-clear,
.astra-cart-drawer .astra-cart-drawer-close {
  box-shadow: none;
}

/* Dieselbe Falle bei den anderen flächenlosen Icon-Buttons des Themes. */
.hgi-filters .hgi-sheet-close:hover,
.hgi-filters .hgi-sheet-close:focus,
.hgi-cat-layout .hgi-sheet-close:hover,
.hgi-cat-layout .hgi-sheet-close:focus,
.hgi-qo-search .hgi-qo-search-clear:hover,
.hgi-qo-search .hgi-qo-search-clear:focus,
.astra-cart-drawer .astra-cart-drawer-close:hover,
.astra-cart-drawer .astra-cart-drawer-close:focus {
  background: transparent;
}

.hgi-cat-group.is-open .hgi-cat-toggle {
  transform: rotate(0deg);
}

/* Unterkategorien waren NIE eingerückt (gemessen: Kind 19px LINKS vom
   Elterntext). Ursache ist nicht der Toggle-Button, sondern Spezifität:
   .hgi-filter-group ul (0,1,1) setzt margin/padding auf 0 und schlug das
   frühere .hgi-cat-sub (0,1,0) — border-left aus derselben Regel griff,
   margin/padding nicht, was den Fehler zunächst verschleierte. Selektor
   deshalb auf .hgi-filter-group ul.hgi-cat-sub (0,2,1) angehoben.
   34px kompensieren Button (12px) + gap (8px) und lassen 14px sichtbaren
   Versatz; die Leitlinie macht die Zugehörigkeit zusätzlich klar. */
.hgi-filter-group ul.hgi-cat-sub {
  list-style: none;
  margin: 8px 0 2px 34px;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--hgi-line);
  display: none;
  flex-direction: column;
  gap: 8px;
}

.hgi-cat-group.is-open .hgi-filter-group ul.hgi-cat-sub,
.hgi-filter-group .hgi-cat-group.is-open ul.hgi-cat-sub {
  display: flex;
}

.hgi-cat-sub li a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--hgi-ink-2);
}

.hgi-cat-sub li.active a {
  color: var(--hgi-ink);
  font-weight: 500;
}

.hgi-filter-group li a {
  display: flex;
  justify-content: space-between;
  flex: 1;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

/* ─── Chevron-Spur im Kategoriebaum ───────────────────────
   Jede Zeile der obersten Ebene reserviert 20px fuer den Aufklapp-Chevron
   (12px Button + 8px gap), auch wenn sie keinen hat.

   Vorher schob der Chevron als Flex-Geschwister die Beschriftung nach
   rechts — Kategorien MIT Unterkategorien standen damit 20px weiter rechts
   als solche ohne. Gemessen: "Alle" und "Cannabissamen" bei x=276,
   "Marken" und "Merch" bei x=296, deren Kinder bei x=323. Bei nur 27px
   Versatz zur naechsten Ebene liest sich das als Verschachtelung: "Marken"
   und "Merch" sahen aus wie Unterkategorien von "Cannabissamen", obwohl
   alle drei parent=0 sind.

   Der Chevron wird per negativem Margin in die Spur gezogen statt die Spur
   auf das <li> zu legen: die Unterliste .hgi-cat-sub haengt am <li>, nicht
   am <a>, und behaelt so ihre bestehende Geometrie. */
.hgi-cat-tree > li > a {
  padding-left: 20px;
}

.hgi-cat-tree > li > a > .hgi-cat-toggle {
  margin-left: -20px;
}

.hgi-filter-group li a .count,
.hgi-cat-sub li a .count {
  font-family: var(--hgi-font-body);
  font-size: 11px;
  color: var(--hgi-ink-4);
}

.hgi-filter-group li.active > a {
  color: var(--hgi-ink);
  font-weight: 500;
}

.hgi-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--hgi-ink-2);
  cursor: pointer;
}

/* Einzige echte Checkbox in der Sidebar — die Facetten zeichnen ihre
   Kaestchen selbst (.hgi-facet-box). Ohne accent-color haekt sie im
   System-Blau ab, also genau der Ton, der beim Preisregler weg sollte. */
.hgi-filter-checkbox input[type="checkbox"] {
  accent-color: var(--hgi-primary);
}

/* Preisregler vollstaendig selbst gezeichnet.
 *
 * Vorher lief er ueber accent-color: var(--hgi-ink). Das reicht nicht: in
 * Chromium faerbt accent-color Daumen und gefuellte Spur, WebKit zieht die
 * Spur weiterhin in der System-Akzentfarbe — dort blieb der Regler blau
 * (Befund Dirk, 10.09.; im Chromium-Rendering war er braun, der Fehler war
 * also nicht reproduzierbar, solange man nur einen Browser ansieht).
 *
 * appearance:none nimmt beide Engines aus dem Spiel: Spur und Daumen sind
 * danach eigene Boxen in --hgi-primary, es gibt keinen Systemton mehr, der
 * durchschlagen kann. Track- und Thumb-Regeln muessen dafuer getrennt je
 * Engine notiert werden (::-webkit-* und ::-moz-*) — ein gemeinsamer
 * Selektor mit Komma wuerde in beiden Engines komplett verworfen, weil
 * jede das fremde Pseudo-Element als ungueltig ansieht.
 */
#hgi-price-max {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin-top: 4px;
  background: transparent;
  cursor: pointer;
}

#hgi-price-max::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: var(--hgi-line-2);
}

#hgi-price-max::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: var(--hgi-line-2);
}

/* Nur Firefox kennt eine gefuellte Spur als eigenes Pseudo-Element.
   In WebKit/Chromium bleibt die Spur einfarbig — ohne JS ist die Fuellung
   dort nicht darstellbar, und dafuer ist sie zu wenig wert. */
#hgi-price-max::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: var(--hgi-primary);
}

#hgi-price-max::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  /* Der Daumen wird an der Spur zentriert, nicht an der Box: margin-top
     verschiebt ihn um die halbe Differenz (3px Spur, 16px Daumen). */
  margin-top: -6.5px;
  border: 0;
  border-radius: 999px;
  background: var(--hgi-primary);
}

#hgi-price-max::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--hgi-primary);
}

.hgi-filters-fab {
  display: none;
}

@media (max-width: 900px) {
  .hgi-cat-layout {
    display: block;
  }

  .hgi-filters {
    display: none;
  }

  .hgi-filters.is-open {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--hgi-surface);
    border-radius: var(--hgi-radius-sm) var(--hgi-radius-sm) 0 0;
    z-index: 61;
    padding: 14px 16px 32px;
    animation: hgi-sheet-up 0.22s ease-out;
  }

  .hgi-filters-mobile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--hgi-line);
  }

  .hgi-sheet-close {
    border: 0;
    background: transparent;
    font-size: 16px;
    color: var(--hgi-ink-3);
    cursor: pointer;
  }

  .hgi-filters-fab {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 40;
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    border: none;
    background: var(--hgi-ink);
    color: var(--hgi-bg);
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  }

  /* Weicht beim Abwaertsscrollen aus (hgi-catalog.js, T13) */
  .hgi-filters-fab.is-hidden {
    transform: translate(-50%, 90px);
    opacity: 0;
    pointer-events: none;
  }

  .hgi-filters-fab .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--hgi-accent);
    color: var(--hgi-ink);
    font-size: 10.5px;
    font-weight: 700;
  }
}

/* ─── Auth / Login ──────────────────────────────────────── */

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  max-width: 440px;
  margin: 80px 0;
  padding: 40px;
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius-lg);
}

.woocommerce-account h2 {
  font-size: 32px;
  margin-bottom: 8px;
}

/* ─── Rechnungsadresse gesperrt (inc/rechnungsadresse.php) ── */

/* Konto: Bearbeiten-Link der Rechnungsadresse weg, sobald der Hinweis
   darunter steht. :has statt Link-Selektor, weil der Slug uebersetzt ist. */
.woocommerce-Address:has(.hgi-rechnung-fest) a.edit {
  display: none;
}

.hgi-rechnung-fest {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ast-global-color-3);
}

.hgi-rechnung-fest--kasse {
  margin: 0 0 32px;
  padding: 20px 24px;
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius);
}

.hgi-rechnung-fest--kasse .hgi-rechnung-fest__titel {
  font-size: 20px;
  margin: 0 0 8px;
}

.hgi-rechnung-fest--kasse address {
  font-style: normal;
  margin-bottom: 8px;
}

.hgi-rechnung-fest--kasse p {
  margin: 0;
}

/* Kasse: Haken "gleiche Adresse fuer Rechnung" und Rechnungsformular des
   Blocks ausblenden. Der Server schreibt die gespeicherte Adresse ohnehin
   zurueck; das hier verhindert nur, dass der Kunde etwas Wirkungsloses
   ausfuellt. */
.hgi-rechnung-gesperrt .wc-block-checkout__use-address-for-billing,
.hgi-rechnung-gesperrt .wc-block-checkout__billing-fields {
  display: none;
}

/* ─── Dashboard ─────────────────────────────────────────── */

/* Astra Addon's avatar+"Hello X" block duplicates WooCommerce's own
   (correctly German) "Hallo X (...Abmelden)" greeting in the main
   content area — untranslated English, generic mystery-man avatar,
   pure redundancy. Hide it rather than translate it. */
.ast-wooaccount-user-wrapper {
  display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--hgi-radius-sm);
  font-size: 13.5px;
  color: var(--hgi-ink-2);
  transition: background 0.15s, color 0.15s;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--hgi-bg-soft);
  color: var(--hgi-ink);
}

/* ─── Forms ─────────────────────────────────────────────── */

/* HOEHE NICHT FESTNAGELN. Astras "Modern Woo Account Page" schiebt das
   schwebende Label mit padding:1.45em .8em .35em in das Feld hinein und
   gewinnt mit seiner hoeheren Spezifitaet. Zusammen mit den frueheren festen
   44px blieben dem Inhalt rund 15px: bei Textfeldern gerade noch lesbar, bei
   einem <select> nicht — dessen Optionstext kann nicht schrumpfen und wurde
   unten abgeschnitten (Befund Dirk, 17.09., "Deutschland" und "Kunde"). Die
   Hoehe kommt jetzt aus Astras Polsterung, 44px bleiben als Untergrenze. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 0 14px;
  background: var(--hgi-surface);
  color: var(--hgi-ink);
  border: 1px solid var(--hgi-line-2);
  border-radius: var(--hgi-radius);
  outline: none;
  transition: border-color 0.15s;
}

.woocommerce form .form-row textarea {
  height: auto;
  padding: 12px 14px;
  min-height: 100px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--hgi-ink);
}

/* NUR FELD-LABELS, NICHT DIE VON CHECKBOXEN UND RADIOS. Astra nimmt sie von
   seiner Floating-Regel ausdruecklich aus (:not(.woocommerce-form__label-for-
   checkbox)) — diese Regel hier tat es nicht und hat deshalb die
   Datenschutz-Zustimmung in 11px-Versalien gesetzt, als waere sie die
   Beschriftung eines Eingabefelds. */
.woocommerce form .form-row label:not(.woocommerce-form__label-for-checkbox):not(.checkbox):not(.radio) {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
}

/* ── Zustimmungs-Checkboxen (Datenschutz, Newsletter, AGB) ── */

/* Die Box selbst war UNSICHTBAR. Astra setzt ihr appearance:none samt Rahmen
   und weissem Grund, legt aber KEINE Groesse fest — ohne native Darstellung
   und ohne Masse fiel sie auf wenige Pixel zusammen. Hier ausdruecklich
   bemasst. */
.woocommerce form .form-row input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 1px 10px 0 0;
  accent-color: var(--hgi-primary);
  cursor: pointer;
}

/* Die Box liegt IM Label (WooCommerce-Markup). Flex statt Inline-Fluss, damit
   der Text bei Umbruch bündig unter sich selbst bleibt und nicht unter die
   Box laeuft. */
/* KEIN gap, sondern Abstand nur an der Box. Im Label stehen vier Kinder —
   Box, Text-Span, ein &nbsp; und der Pflicht-Stern. Als Flex-Items wirkt ein
   gap zwischen JEDEM Paar, vor dem Stern summierten sich so drei Abstaende
   und er stand abgesetzt in der Zeile (Befund 17.09.). Den einen Abstand vor
   dem Stern liefert das &nbsp; aus dem Markup. */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0;
  font-size: 14px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  color: var(--hgi-ink-2);
  cursor: pointer;
}

.woocommerce form .form-row label.woocommerce-form__label-for-checkbox a {
  color: var(--hgi-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Hinweis unter dem Dokumenten-Upload ── */

.woocommerce form .form-row.hgi-upload-hinweis {
  margin: -8px 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--hgi-ink-3);
}

/* ── Kundengruppen-Auswahl ── */

/* Ausgeblendet, nicht entfernt (Vorgabe Dirk, 17.09.): B2B Market bietet dort
   genau eine Option an. Der <select> MUSS im Markup bleiben — die gesamte
   Feldsteuerung des Plugins haengt an seiner Existenz und an einem sofort
   ausgeloesten change-Ereignis. Naeheres im Kommentar in functions.php. */
.woocommerce form.register .form-row#b2b_role_field {
  display: none !important;
}

/* ── Datei-Upload ── */

/* Der nackte Datei-Knopf des Browsers stand ungestaltet zwischen lauter
   gerundeten Feldern. Das Feld selbst laesst sich nicht umbauen, sein
   Knopf-Pseudo schon. */
.woocommerce form .form-row input[type="file"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--hgi-surface);
  color: var(--hgi-ink-3);
  font-size: 13px;
  border: 1px dashed var(--hgi-line-2);
  border-radius: var(--hgi-radius);
  cursor: pointer;
}

.woocommerce form .form-row input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border: 1px solid var(--hgi-line-2);
  border-radius: 999px;
  background: var(--hgi-bg-soft);
  color: var(--hgi-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.woocommerce form .form-row input[type="file"]::file-selector-button:hover {
  background: var(--hgi-accent);
  border-color: var(--hgi-accent);
}

/* DAS LABEL DES UPLOAD-FELDS SICHTBAR MACHEN.
   Die Annahme in 1.47.1, Astras Floating-Regel greife bei type=file nicht,
   war falsch: sie zielt auf .form-row label und nimmt nur Checkboxen und
   Radios aus — das Upload-Label wurde also absolut positioniert und
   durchsichtig gestellt, ein blosses display:block aendert daran nichts. Es
   stand deshalb gar nicht auf der Seite, obwohl es im DOM war (Befund
   17.09. am Screenshot, nicht an der DOM-Abfrage — die meldete das Label
   brav zurueck).
   !important ist hier noetig und nicht bequem: Astras Selektor traegt drei
   :not() und den body-Praefix, seine Spezifitaet ist auf ehrlichem Weg nicht
   zu erreichen. */
.woocommerce form .form-row.b2b-upload-field > label {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

/* Astras "Modern Woo Account Page"-Feature generiert seiteneigenes CSS
   (astra-addon-dynamic-css-post-16.css) mit exakt derselben Selektor-
   Spezifitaet (".woocommerce form .form-row-first {width:100%}") und
   gewinnt dadurch nur ueber die spaetere Ladereihenfolge gegen jede
   gleich spezifische eigene Regel - form-row-first blieb dadurch immer
   volle Breite, form-row-last rutschte in die Zeile darunter statt
   daneben zu stehen. !important zwingt unsere Breite durch. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  width: 48% !important;
}

.woocommerce form .form-row-wide {
  width: 100%;
  clear: both;
}

/* ─── Search Palette ────────────────────────────────────── */

.hgi-search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 120px;
}

.hgi-search-modal {
  width: 620px;
  max-width: 90vw;
  background: var(--hgi-surface);
  border-radius: var(--hgi-radius-sm);
  border: 1px solid var(--hgi-line);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
}

.hgi-search-input-wrap {
  padding: 4px 16px;
  border-bottom: 1px solid var(--hgi-line);
}

.hgi-search-input-wrap input {
  width: 100%;
  height: 52px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: var(--hgi-ink);
}

.hgi-search-results {
  max-height: 360px;
  overflow: auto;
}

.hgi-search-result {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  padding: 10px 16px;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--hgi-line);
  transition: background 0.12s;
}

.hgi-search-result:hover {
  background: var(--hgi-bg-soft);
}

/* ─── Toast ─────────────────────────────────────────────── */

.hgi-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hgi-ink);
  color: var(--hgi-bg);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 10000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: hgi-toast-in 0.2s ease-out;
}

@keyframes hgi-toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ─── B2B Badge ─────────────────────────────────────────── */

.hgi-badge-b2b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--hgi-radius-sm);
  background: var(--hgi-ink);
  color: var(--hgi-bg);
}

/* ─── Tables ────────────────────────────────────────────── */

.hgi-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.hgi-tbl th,
.hgi-tbl td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--hgi-line);
}

.hgi-tbl th {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  font-weight: 500;
}





























































































































































































/* Live-Summenleiste */

































/* Responsive */









/* ─── Mobile: Filter Bottom Sheet ───────────────────────── */

.hgi-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 60;
  animation: hgi-fade-in 0.15s ease-out;
}

.hgi-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--hgi-surface);
  border-radius: var(--hgi-radius-sm) var(--hgi-radius-sm) 0 0;
  z-index: 61;
  padding: 12px 16px 32px;
  animation: hgi-sheet-up 0.22s ease-out;
}

.hgi-sheet-handle {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: var(--hgi-line-2);
  margin: 4px auto 12px;
}

@keyframes hgi-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes hgi-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Mobile Nav Drawer ─────────────────────────────────── */

.hgi-nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9990;
  animation: hgi-fade-in 0.15s ease-out;
}

.hgi-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--hgi-surface);
  z-index: 9991;
  display: flex;
  flex-direction: column;
  animation: hgi-drawer-in 0.22s ease-out;
}

@keyframes hgi-drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.hgi-nav-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hgi-line);
  height: var(--hgi-nav-h);
}

.hgi-nav-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.hgi-nav-drawer-body a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  font-family: var(--hgi-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--hgi-ink);
  cursor: pointer;
  border-bottom: 1px solid var(--hgi-line);
  text-decoration: none;
}

.hgi-nav-drawer-body a:hover {
  background: var(--hgi-bg-soft);
}

.hgi-nav-drawer-foot {
  padding: 18px 22px;
  border-top: 1px solid var(--hgi-line);
  display: flex;
  gap: 10px;
  flex-direction: column;
}

/* ─── Katalog auf dem Telefon: eine Spalte ───────────────────────────────
   Entschieden am 30.09.2026 (Dirk). Anlass war nicht die Kartenbreite,
   sondern die Trefferflaeche der Varianten-Chips: Gemessen waren sie bei
   390px 18x17px — Apple empfiehlt 44, Google 48. In zwei Spalten ist dafuer
   kein Platz (vier Chips a 44px brauchen 176px plus Abstaende, die Spalte
   hatte 170px). Erst die eine Spalte macht die Chips bedienbar.

   Grenze bei 600px und nicht bei den sonst ueblichen 900px: Zwischen 600
   und 900 sitzt das Tablet, und dort waere eine einzige Spalte pure
   Platzverschwendung. Zwei Regeln weiter oben setzen bei <=900px zwei
   Spalten — die bleiben fuer genau dieses Fenster stehen. */
@media (max-width: 600px) {
  /* Die Spaltenregel (1fr) ist am 07.10.2026 entfallen: Die Spaltenzahl
     kommt jetzt aus Astra (Dirk). Die 44px-Chips gelten weiter, solange dort
     fuer das Handy eine Spalte eingestellt ist; bei mehreren Spalten greift
     die kompakte Variante am Dateiende. */

  /* Volle Trefferflaeche statt dekorativer Groesse. Der Chip traegt eine
     ein- bis zweistellige Zahl, 44px sind dafuer optisch viel — deshalb
     waechst er in der Hoehe auf das Mass und in der Breite nur so weit,
     wie die Zahl es braucht. */
  .hgi-pc-variant-chip {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 6px;
  }

  .hgi-pc-variants {
    min-height: 44px;
    gap: 10px;
  }

  .hgi-pc-variants-chips {
    gap: 8px;
  }
}

/* ─── Streichpreis neben dem neuen Preis, nicht darueber ─────────────────
   Gemessen am 30.09.2026 bei 390px in zwei Spalten: <del> bekam 36px
   Breite, brach in zwei Zeilen, wurde 45px hoch (y=659 bis 704) und
   ueberlappte das <ins> ab y=682 um 22px. Die Durchstreichung der zweiten
   Zeile stand dadurch direkt vor der Zahl darunter — am Bildschirm las es
   sich als "-23,68 EUR".

   Die Ursache ist der Umbruch INNERHALB des alten Preises, nicht der
   Abstand zwischen beiden. Deshalb nowrap auf beiden Betraegen: Sie
   bleiben je einzeilig, die Durchstreichung bleibt auf ihrer Zeile, und
   reicht der Platz trotzdem nicht, rutscht der neue Preis sauber in die
   naechste Zeile statt sich mit dem alten zu ueberlagern. */
.hgi-pc-price del,
.hgi-pc-price ins,
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins {
  white-space: nowrap;
}

.hgi-pc-price del,
.woocommerce ul.products li.product .price del {
  margin-right: 6px;
}

.hgi-pc-price ins,
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

/* ─── Responsive ────────────────────────────────────────── */

@media (max-width: 900px) {
  .hgi-spec-strip {
    grid-template-columns: 1fr 1fr;
  }

  .hgi-aisles {
    grid-template-columns: 1fr;
  }

  .hgi-hero h1 {
    font-size: 44px;
    line-height: 1.05;
  }

  .hgi-hero .hgi-hero-sub {
    font-size: 16px;
    margin: 14px auto 24px;
  }
}

@media (max-width: 640px) {
  .hgi-container {
    padding: 0 16px;
  }

  .hgi-hero-inner {
    padding: 64px 0 56px;
  }

  .hgi-hero h1 {
    font-size: 36px;
  }

  .hgi-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hgi-hero-cta .hgi-btn {
    width: 100%;
  }

  .hgi-spec-strip .hgi-spec-n {
    font-size: 26px;
  }

  .woocommerce ul.products {
    gap: 14px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
  }

  .woocommerce div.product .product_title {
    font-size: 28px;
  }

  .woocommerce div.product p.price {
    font-size: 22px;
  }

  .hgi-pc-variants {
    font-size: 9px;
  }

  /* ENTFERNT 2026-09-30: die Chip-Verkleinerung auf 18x17px.
     Sie stammt aus der Zeit, als der Katalog auch auf dem Telefon zwei
     Spalten hatte — da musste der Chip schrumpfen, um zu passen. Seit
     1.70.0 steht der Katalog unter 600px einspaltig, und dort gilt die
     Trefferflaechen-Regel (44px) weiter oben in dieser Datei.

     Warum sie hier weg MUSS und nicht nur ueberschrieben wird: Dieser
     Block steht spaeter in der Datei als die 600px-Regel und hat dieselbe
     Spezifitaet (0,1,0) — er hat sie schlicht ueberholt. Gemessen am
     30.09. nach dem Deploy von 1.70.0: Chip bei 390px weiterhin 18x17
     statt 44x44. Zwischen 601 und 640px bleibt jetzt die Basisgroesse
     22x20, was stimmt, weil dort auch zwei Spalten stehen. */

  /* ENTFERNT 2026-09-29: mobiler Sticky-CTA.
     Die Klasse .hgi-pdp-sticky-cta kam im ganzen Projekt nur hier vor —
     kein PHP und kein JS hat das Markup je erzeugt, im Browser bei 390px
     ist das Element nicht im DOM. Der TODO-Punkt vom 12.09. ("der mobile
     Sticky-CTA ist weiss, nicht dunkelbraun wie die anderen beiden")
     beschrieb damit eine Regel ohne Wirkung. Statt sie umzufaerben ist sie
     hier geloescht. Soll der Balken wirklich kommen, gehoert er als
     eigener Auftrag gebaut — Markup, Preisbindung an die gewaehlte
     Variante und Verhalten beim Warenkorb-Update. */
}

/* ─── Utility ───────────────────────────────────────────── */

.hgi-muted { color: var(--hgi-ink-3); }
.hgi-text-lg { font-size: 18px; line-height: 1.5; }

/* Tax hint */
.hgi-tax-hint {
  font-size: 11px;
  color: var(--hgi-ink-3);
  font-weight: 400;
}

/* Die Preishinweis-Fussnote ist am 10.09. entfallen — der Text steht jetzt
   im Footer-Builder und wird von Dirk selbst gepflegt. Regeln dazu mit
   entfernt statt als toter Code stehenzulassen; das Sternchen am Preis
   (.hgi-tax-hint, direkt darueber) bleibt. */

/* Hide add-to-cart on archive for logged-out users */
body:not(.logged-in) .woocommerce ul.products li.product .add_to_cart_button {
  display: none;
}

/* Hide prices for logged-out users */
body:not(.logged-in) .woocommerce ul.products li.product .price {
  display: none;
}

/* ─── Footer Columns (Footer Builder Widgets) ───────────── */

.site-footer .ast-builder-footer-grid-columns {
  gap: 32px;
  padding: 48px 0 8px;
}

.hgi-footer-col + .hgi-footer-col {
  margin-top: 28px;
}

.hgi-footer-brand {
  font-family: var(--hgi-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--hgi-ink);
  text-transform: uppercase;
}

/* Logo statt Schriftzug (Jonas, Entwurf v85; Freigabe Dirk 07.10.2026).
   Das Markup steht im Widget custom_html-2, die Groesse hier: ohne feste
   Hoehe zeigte die SVG ihre Eigenbreite von 826px. */
.hgi-footer-brand img {
  display: block;
  height: 28px;
  width: auto;
}

.hgi-footer-tagline {
  margin-top: 14px;
  max-width: 300px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--hgi-ink-3);
}

.hgi-footer-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hgi-footer-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hgi-bg-soft);
  border: 1px solid var(--hgi-line);
  font-family: var(--hgi-font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--hgi-ink-2);
}

.hgi-footer-heading {
  font-family: var(--hgi-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--hgi-ink-3);
  margin: 0 0 14px;
}

.hgi-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
}

.hgi-footer-links a {
  color: var(--hgi-ink-2) !important;
}

.hgi-footer-links a:hover {
  color: var(--hgi-ink) !important;
}

/* Quick Order aus der Footer-Liste nehmen, wo die Seite nicht bedienbar ist
   (Vorgabe Dirk, 10.09.). Der Menuepunkt verschwindet serverseitig per
   wp_is_mobile() — der Footer-Eintrag steckt dagegen in einem Widget, das
   kein Menue ist, dort greift der Filter nicht.
   Bewusster Unterschied im Kriterium: hier entscheidet die Fensterbreite,
   nicht der User-Agent. Ein schmales Desktop-Fenster verliert den Link
   damit ebenfalls, obwohl die Seite dort laeuft — vertretbar, weil die
   Matrix unter 900px ohnehin in den Scroll-Modus faellt.
   :has() traegt die Regel, weil nur das <li> als Ganzes weg kann: nur den
   Link auszublenden liesse eine Luecke in der Liste. Wo :has() fehlt,
   bleibt der Eintrag stehen und fuehrt auf die Hinweisseite — kein
   Sackgassen-Risiko. */
@media (max-width: 900px) {
  .hgi-footer-links li:has(> a[href*="/quick-order"]) {
    display: none;
  }
}

.hgi-footer-trade-only {
  margin-top: 18px;
  font-family: var(--hgi-font-body);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--hgi-ink-4);
}

/* Astra nests two elements that both carry the plain .ast-footer-copyright
   class (outer layout wrapper + inner content div) — this rule matched
   both, rendering as two stacked divider lines. Scope the line to the
   outer wrapper only and zero it out on the inner one. */
.ast-builder-layout-element.ast-footer-copyright {
  border-top: none;
  padding-top: 20px;
}

.ast-builder-layout-element.ast-footer-copyright .ast-footer-copyright {
  border-top: none;
  padding-top: 0;
}

/* ─── Kundenkonto: Anmeldung, Registrierung, Kontobereich ───
 *
 * Vorgabe Dirk, 10.09.: beide Ansichten ans bestehende Design angleichen.
 * Ausgangslage gemessen: Astra steckt den ganzen Bereich in einen Kasten
 * mit max-width 540px, 40px Innenabstand und eigener Rahmenfarbe
 * (rgb(228,220,216)) — bei 1200px Inhaltsbreite standen Login- und
 * Registrierformular dadurch untereinander in einer 440px-Spalte, und um
 * das Formular lagen ZWEI Rahmen (Astras Kasten plus die Karte des
 * Formulars). Im Kontobereich floaten Navigation (137px) und Inhalt
 * (311px) in demselben Kasten, die Menü-Icons klebten am Text.
 *
 * Deshalb: Astras Kasten auflösen und die beiden Ansichten mit den
 * Bausteinen der Site neu setzen — Karten wie im Warenkorb, Raster wie die
 * Kategorieseite (240px Spalte + Inhalt), Formularfelder wie überall. */

/* Astras 540px-Kasten aufloesen. !important, weil die Regel aus Astras
   WooCommerce-Kompatibilitaets-CSS mit derselben Klassenkette arbeitet. */
.woocommerce-account .woocommerce {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* WooCommerce und Astra haengen Clearfix-Pseudos an .woocommerce und
   .col2-set (content:" "; display:table). Im Float-Layout sind sie
   unsichtbar — in einem Raster werden sie zu eigenen ZELLEN und schieben
   alles um eine Position weiter: gemessen stand das Login-Formular dadurch
   in Spalte 2 und die Registrierung allein in Zeile 2, im Kontobereich
   landete die Navigation rechts. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after {
  display: none;
}

/* ── Anmelden / Registrieren nebeneinander ── */
.woocommerce-account .u-columns.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.woocommerce-account .u-columns.col2-set > .u-column1,
.woocommerce-account .u-columns.col2-set > .u-column2 {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
}

/* Ueberschriften linksbuendig und in der Groesse der uebrigen
   Abschnittstitel — Astra zentriert sie und setzt 32px. */
/* !important, weil Astra die Ueberschriften im Kontobereich zentriert und
   auf 32px setzt (gemessen) — mit derselben Klassenkette, nur laenger. */
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
  text-align: left !important;
  font-size: 22px !important;
  margin: 0 0 14px !important;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  max-width: none;
  padding: 28px;
  /* Astra gibt den Formularen einen eigenen Abstand nach oben (gemessen
     ~70px Luecke zur Ueberschrift) — der Abstand kommt jetzt aus dem
     margin-bottom der h2. */
  margin-top: 0;
}

/* Der Login-Kasten ist deutlich niedriger als der Registrierkasten daneben —
   die Aktionen unten anschlagen, damit beide Karten gleich hoch stehen. */
.woocommerce-account .woocommerce-form-login {
  display: flex;
  flex-direction: column;
}

.woocommerce-account .woocommerce-form-login .ast-woo-form-actions,
.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword {
  text-align: left;
}

/* Felder: derselbe Radius und dieselbe Rahmenfarbe wie in allen anderen
   Formularen des Themes (gemessen war hier Astras 4px/#e4dcd8). */
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account .woocommerce form .form-row textarea {
  border-radius: var(--hgi-radius) !important;
  border-color: var(--hgi-line-2) !important;
}

/* ── Kontobereich: Navigation + Inhalt als Raster ── */
/* :has(), damit die Regel nur den eingeloggten Zustand trifft — im
   Gastzustand liegt in demselben .woocommerce-Element das Formularpaar. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}

/* Platzierung ausdruecklich, weil Astras Template den INHALT vor die
   Navigation stellt (geprueft im gerenderten Markup) — im Float-Layout
   spielte das keine Rolle, im Raster landete die Navigation sonst rechts in
   der breiten Spalte und der Inhalt links in den 240px. */
.woocommerce-account .woocommerce-MyAccount-navigation {
  grid-column: 1;
  grid-row: 1;
}

.woocommerce-account .woocommerce-MyAccount-content {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Navigation als Karte wie die Summen-Karte im Warenkorb. */
.woocommerce-account .woocommerce-MyAccount-navigation {
  padding: 10px;
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius-lg);
  position: sticky;
  top: calc(var(--hgi-nav-h) + 24px);
}

/* Astras Avatar-Block (.ast-wooaccount-user-wrapper) steht im Markup, ist
   aber per Customizer-Vorgabe display:none — deshalb hier bewusst nicht
   gestaltet. Wird er eingeschaltet, braucht er eigene Regeln. */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Astra legt das Icon als inline-SVG IN den Link, ohne Abstand — deshalb
   klebte es am Text. Flex mit gap loest das ohne Eingriff ins Markup. */
/* !important beim display: Astra setzt an derselben Kette display:block mit
   hoeherer Spezifitaet (gemessen — gap kam an, display nicht), und ohne Flex
   klebt das inline-SVG des Icons am Text. */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--hgi-radius-sm);
  font-size: 13.5px;
  color: var(--hgi-ink-2);
  text-decoration: none;
  background: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: currentColor;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--hgi-bg-soft);
  color: var(--hgi-ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--hgi-bg-soft);
  color: var(--hgi-ink);
  font-weight: 500;
}

/* ── Kontobereich: Inhalt ── */
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content > h3 {
  font-size: 20px;
  margin: 0 0 14px;
}

/* Bestelltabelle in der Tabellensprache der Site: Kopfzeile in
   Mono-Versalien, Haarlinie je Zeile, kein Rahmengitter. Gleiche Anatomie
   wie die Attributtabelle auf der Produktseite. */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-MyAccount-downloads,
.woocommerce-account table.shop_table {
  width: 100%;
  border: 0 !important;
  border-collapse: collapse;
  font-size: 13.5px;
}

.woocommerce-account table.shop_table thead th,
.woocommerce-account table.woocommerce-orders-table thead th {
  padding: 0 8px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hgi-line) !important;
  background: none !important;
  font-family: var(--hgi-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hgi-ink-3) !important;
  text-align: left;
}

.woocommerce-account table.shop_table tbody td,
.woocommerce-account table.woocommerce-orders-table tbody td {
  padding: 12px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hgi-line) !important;
  background: none !important;
  vertical-align: middle;
}

.woocommerce-account table.shop_table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* Adressen: Astra rahmt sie mit eigener Farbe und ohne Rundung. */
.woocommerce-account .woocommerce-MyAccount-content address,
.woocommerce-account .woocommerce-Addresses address {
  border: 1px solid var(--hgi-line) !important;
  border-radius: var(--hgi-radius) !important;
  padding: 16px !important;
  background: var(--hgi-surface);
  font-style: normal;
  line-height: 1.6;
}

/* Astra zentriert die Adress-Titel und setzt sie auf Ueberschriftengroesse
   samt eigener Flaeche und Rahmen — hier auf die Groesse der uebrigen
   Abschnittstitel und linksbuendig, wie im restlichen Kontobereich. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title {
  background: none !important;
  border: 0 !important;
  padding: 0 0 8px !important;
  text-align: left !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h3 {
  font-size: 16px !important;
  margin: 0 !important;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title a,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title a {
  font-size: 12px;
  text-align: left;
}

@media (max-width: 900px) {
  .woocommerce-account .u-columns.col2-set,
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    position: static;
    grid-column: 1;
    grid-row: 1;
  }

  /* Einspaltig muss die Zeilenzuweisung mit: sonst laegen Navigation und
     Inhalt beide in Zeile 1 uebereinander. */
  .woocommerce-account .woocommerce-MyAccount-content {
    grid-column: 1;
    grid-row: 2;
  }
}

/* ─── B2B-Registrierung: Feldgruppen-Labels ────────────── */

.hgi-reg-group-label {
  font-family: var(--hgi-font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  margin: 22px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hgi-line);
}

.woocommerce-form-register .hgi-reg-group-label:first-of-type {
  margin-top: 4px;
}

/* ─── Mein Konto: Login + Registrierung immer beide sichtbar ──
   Astra Addon blendet per JS (my-account-form-switcher.min.js) je nach
   URL-Hash eine der beiden Spalten per inline style="display:none" aus.
   !important überstimmt das inline style, damit unabhängig vom Hash
   (#login, #createaccount oder gar keiner) immer beide Formulare zu
   sehen sind. Die Umschalt-Links ("Register" / "Login") sind dadurch
   funktionslos und werden versteckt. */

#customer_login.u-columns > .u-column1,
#customer_login.u-columns > .u-column2 {
  display: block !important;
}

#customer_login .ast-woo-form-actions {
  display: none;
}

/* ─── Warenkorb: Slide-in-Drawer (Astra Cart Flyout) ─────────
   Astra rendert im Drawer das Standard-WooCommerce-Mini-Cart-Widget, das
   ohne Zutun ungestaltet bleibt: Produktname über die volle Breite, Bild
   und Variations-Liste (dl.variation) darunter als Definitionsliste,
   Preis rechts abgehängt. Hier auf die Zeilen-Optik aus dem Mockup
   (.cart-line: Thumb + Name/Meta + Menge + Summe) gebracht. */

.astra-cart-drawer-header {
  border-bottom: 1px solid var(--hgi-line);
}

.astra-cart-drawer-title {
  font-family: var(--hgi-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--hgi-ink);
}

.astra-cart-drawer-close {
  color: var(--hgi-ink-3);
}

.astra-cart-drawer-close:hover {
  color: var(--hgi-ink);
}

.astra-cart-drawer .widget_shopping_cart ul.woocommerce-mini-cart {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Zeile: Thumb links, Textblock mittig, Preis rechts — statt der
   gestapelten Default-Anordnung. */
.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr minmax(0, 132px);
  grid-template-areas:
    "thumb name  price"
    "thumb meta  meta"
    "thumb qty   qty";
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  /* Astra setzt hier padding-left: 75px für sein eigenes Bild-Layout —
     das verschiebt auch den absolut positionierten Thumb (left:0 bezieht
     sich auf die Padding-Kante). Unser Grid übernimmt die Spalten.
     20px seitlich richtet den Inhalt am Drawer-Titel und der Summenzeile
     aus (die haben beide 20px) — die Trennlinie bleibt dabei volle Breite,
     weil sie am li-Rand sitzt, nicht am Inhalt. */
  padding: 16px 20px;
  margin: 0;
  border-bottom: 1px solid var(--hgi-line);
}

/* Der Produktlink enthält Bild UND Namen — Bild wird in die Thumb-Spalte
   geschoben, der Textknoten bleibt in der Namensspalte. */
.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item > a:not(.remove) {
  grid-area: name;
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--hgi-ink);
  padding-right: 22px; /* Platz für den Entfernen-Button */
}

.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item > a:not(.remove) img {
  grid-area: thumb;
  position: absolute;
  left: 0;
  top: 16px;
  width: 56px;
  height: 56px;
  margin: 0;
  object-fit: cover;
  border: 1px solid var(--hgi-img-edge);
  border-radius: var(--hgi-radius-sm);
  background: var(--hgi-bg-soft);
}

/* Variations-/Lieferzeit-Angaben: aus der Definitionsliste eine
   kompakte Meta-Zeile machen. */
/* WooCommerce gibt dl.variation einen border-left plus Einzug — das war der
   senkrechte Strich vor der Meta-Zeile. */
.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item dl.variation {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 11px;
  color: var(--hgi-ink-3);
}

.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item dl.variation dt,
.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item dl.variation dd {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item dl.variation dt {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item .quantity {
  grid-area: qty;
  font-size: 12px;
  color: var(--hgi-ink-2);
}

/* Der runde Kreis kam von der globalen input-Gestaltung auf input.qty. */
.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item .quantity input.qty {
  width: 58px;
  height: 30px;
  min-height: 0;
  padding: 0 6px;
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius-sm);
  background: var(--hgi-surface);
  text-align: center;
  font-size: 12.5px;
  color: var(--hgi-ink);
}

.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item .ast-mini-cart-price-wrap {
  grid-area: price;
  text-align: right;
  font-family: var(--hgi-font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--hgi-ink);
}

.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item .ast-mini-cart-price-wrap > .amount {
  white-space: nowrap;
}

/* Steuerhinweis klein und ruhig. German Market rendert ihn als
   span.wgm-tax (mit eigenem br.wgm-break), NICHT als small/.tax_label —
   ohne diese Regel erbt er die Display-Schrift der Preiszeile. */
.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item .wgm-tax,
.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item .wgm-tax *,
.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item .ast-mini-cart-price-wrap small,
.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item .ast-mini-cart-price-wrap .tax_label {
  font-family: var(--hgi-font-body);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--hgi-ink-3);
}

.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item .wgm-tax {
  display: block;
  margin-top: 2px;
}

.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item .wgm-break {
  display: none;
}

.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item a.remove {
  position: absolute;
  top: 14px;
  right: 0;
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  color: var(--hgi-ink-3) !important;
  background: transparent !important;
}

.astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item a.remove:hover {
  color: var(--hgi-ink) !important;
  background: var(--hgi-bg-soft) !important;
}

/* Summe */
.astra-cart-drawer .widget_shopping_cart .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0 12px;
  margin: 0;
  border-bottom: 1px solid var(--hgi-line);
}

.astra-cart-drawer .widget_shopping_cart .woocommerce-mini-cart__total strong {
  font-family: var(--hgi-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
}

.astra-cart-drawer .widget_shopping_cart .woocommerce-mini-cart__total .amount {
  font-family: var(--hgi-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--hgi-ink);
}

.astra-cart-drawer .widget_shopping_cart .woocommerce-mini-cart__total .tax_label {
  display: block;
  font-family: var(--hgi-font-body);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--hgi-ink-3);
  text-align: right;
}

/* German-Market-Hinweislinks ruhiger setzen */
.astra-cart-drawer .jde_hint {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--hgi-ink-3);
}

/* Buttons: Warenkorb ansehen = Ghost, Zur Kasse = Primary, volle Breite */
.astra-cart-drawer .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 0;
}

.astra-cart-drawer .woocommerce-mini-cart__buttons a.button {
  width: 100%;
  margin: 0;
}

/* Astras Buttons-Customizer-CSS trifft genau diesen Button mit einem
   7-Klassen-Selektor (.woocommerce-js .astra-cart-drawer
   .astra-cart-drawer-content .woocommerce-mini-cart__buttons
   .button:not(.checkout):not(.ast-continue-shopping)) = (0,7,0) und
   überschreibt dort sogar Astras eigene Ghost-Variante aus derselben
   Datei. Ohne !important verliert jede sinnvoll kurze Regel — gleiche
   Lage und gleiche Lösung wie bei den Button-Radien weiter oben. */
.astra-cart-drawer .woocommerce-mini-cart__buttons a.button:not(.checkout) {
  background: transparent !important;
  color: var(--hgi-ink) !important;
  border: 1px solid var(--hgi-line-2) !important;
}

.astra-cart-drawer .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
  background: var(--hgi-bg-soft) !important;
}

/* ─── Warenkorb-Seite (WooCommerce Blocks) ───────────────────
   ACHTUNG: Der Block-Warenkorb ist React-gerendert; die
   wc-block-components-*-Klassen sind WooCommerce-intern und können sich
   mit Plugin-Updates ändern. Deshalb hier nur zurückhaltend gestalten
   (Karte, Typo) und keine Layout-Grundstruktur überschreiben. */

/* Summen-Block als abgesetzte Karte wie im Mockup (.cart-summary).
   Die Karte sitzt am Summen-Block, NICHT an .wc-block-cart__sidebar:
   die Sidebar ist selbst .wc-block-components-sidebar (ein Element, kein
   Elternteil) und trägt das Layout-Gutter-Padding — sie zu karden würde
   in die Grundstruktur eingreifen. Der Kasse-Button ist ein Geschwister
   darunter und bleibt bewusst außerhalb der Karte. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius-lg);
  padding: 24px;
}

/* Gesamtsumme in der Display-Schrift (Mockup: Oswald 22px) */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--hgi-font-display);
  font-weight: 500;
  color: var(--hgi-ink);
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 22px;
}

/* Produktbild in der Zeile: gerahmt und gerundet wie auf den Karten */
.wp-block-woocommerce-cart .wc-block-cart-item__image img {
  border: 1px solid var(--hgi-img-edge);
  border-radius: var(--hgi-radius-sm);
  background: var(--hgi-bg-soft);
}

/* Produktname in der Zeile auf Kartenniveau */
.wp-block-woocommerce-cart .wc-block-components-product-name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hgi-ink);
}

/* ─── Kasse (WooCommerce Blocks) ─────────────────────────────
   Feinschliff, Vorgabe Dirk 10.09.: dieselbe Formularsprache und dasselbe
   Kartenbild wie der Rest der Site. Gemessen am Auslieferungszustand (WC
   Blocks): Karten mit 5px Radius, Felder mit 4px und fremder Rahmenfarbe,
   Produktname der Bestelluebersicht in Kapitaelchen.

   Zurueckhaltung wie beim Block-Warenkorb darueber: nur Rahmen, Radius,
   Farbe und Typografie — kein Eingriff in Raster oder Reihenfolge, weil die
   wc-block-components-*-Klassen WooCommerce-intern sind. */

/* Bestelluebersicht als Karte wie im Warenkorb. */
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line) !important;
  border-radius: var(--hgi-radius-lg) !important;
}

/* Gesamtsumme in der Display-Schrift, gleiche Werte wie im Warenkorb. */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--hgi-font-display);
  font-weight: 500;
  color: var(--hgi-ink);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 22px;
}

/* Produktname in der Bestelluebersicht: WooCommerce setzt dort
   Kapitaelchen (text-transform: uppercase, 0.75em) — das liest sich neben
   dem Titel im Warenkorb wie ein anderes Produkt. Auf Kartenniveau
   zurueckgeholt. */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name a {
  font-family: var(--hgi-font-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hgi-ink);
}

/* Produktbild wie in jeder anderen Zeile: dunkle Kante, 6px. */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img {
  border: 1px solid var(--hgi-img-edge);
  border-radius: var(--hgi-radius-sm);
  background: var(--hgi-bg-soft);
}

/* Preise in der Uebersicht in der Display-Schrift, Hinweiszeilen leiser —
   ohne das stehen Betrag und MwSt.-Hinweis in derselben Groesse. */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value {
  font-family: var(--hgi-font-display);
  font-weight: 500;
  color: var(--hgi-ink);
}

.wp-block-woocommerce-checkout .wc-block-components-product-metadata__description,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__description {
  font-size: 11px;
  line-height: 1.45;
  color: var(--hgi-ink-3);
}

/* Formularfelder auf die Themen-Optik: gleiche Rahmenfarbe, gleicher
   Radius und derselbe Fokus wie in den klassischen WooCommerce-Formularen
   (Login, Registrierung). Die Hoehe bleibt bei WooCommerces 50px — dort
   sitzt das Label IM Feld, mit 44px waere es zu eng. */
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"],
.wc-block-checkout textarea,
.wc-block-checkout select,
.wc-block-checkout .wc-blocks-components-select__container {
  background: var(--hgi-surface);
  color: var(--hgi-ink);
  border: 1px solid var(--hgi-line-2);
  border-radius: var(--hgi-radius);
}

/* Auswahllisten: Der Rahmen gehoert dem Container. Die Liste darin trug ihn
   zusaetzlich (Regel darueber), gemessen 07.10. als zwei 1px-Linien im
   Abstand von 1px — sah wie ein abgesetzter, "abgeschnittener" Kasten aus. */
.wc-block-checkout .wc-blocks-components-select__container .wc-blocks-components-select__select {
  border: 0;
}

/* Schwebendes Label bei befuelltem Feld: stand auf top:-2px und damit auf der
   Feldkante (Befund Dirk, 07.10.). 4px Abstand; mit 0,82-Skalierung endet das
   Label bei 22px und bleibt ueber dem Eingabetext (padding-top 24px). */
.wc-block-checkout .wc-block-components-text-input.is-active label {
  top: 4px;
}

.wc-block-checkout input[type="text"]:focus,
.wc-block-checkout input[type="email"]:focus,
.wc-block-checkout input[type="tel"]:focus,
.wc-block-checkout input[type="number"]:focus,
.wc-block-checkout textarea:focus,
.wc-block-checkout select:focus {
  border-color: var(--hgi-ink);
  outline: none;
}

/* Adress-Karte und die Optionskaesten (Versand, Zahlung) tragen dasselbe
   Kartenbild wie die Panels der Site. */
.wc-block-checkout .wc-block-components-address-card,
.wc-block-checkout .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-components-radio-control__option {
  border-radius: var(--hgi-radius) !important;
  border-color: var(--hgi-line) !important;
}

/* Gewaehlte Option deutlicher als WooCommerces Grauabstufung. */
.wc-block-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: var(--hgi-ink) !important;
}

/* Der Gutschein-Ausklapper und die Summenzeilen trennen mit Haarlinien —
   WooCommerce nimmt dafuer seine eigene Grenzfarbe. */
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-totals-block,
.wc-block-checkout .wc-block-checkout__terms--with-separator {
  border-color: var(--hgi-line) !important;
}

@media (max-width: 640px) {
  .astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item {
    grid-template-columns: 48px 1fr auto;
  }

  .astra-cart-drawer .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item > a:not(.remove) img {
    width: 48px;
    height: 48px;
  }
}

/* ─── Katalog-Kopfzeile mit Sortierung (Mockup .cat-top) ─────
   Eine Reihe: links Eyebrow + Titel, rechts Label + Select. */
.hgi-cat-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  /* Oben 32px statt 24px (Jonas-Liste, 29.09.): die Referenz styles.css:772
     hat hier 32px. Unten bleiben 24px — dort sitzt die Trennlinie, und ihr
     Abstand zum Titel war nie beanstandet. */
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--hgi-line);
  /* Referenz styles.css:772 hat hier margin-bottom: 32px. Das fehlte, und
     weil darunter Sidebar und Produktraster ohne eigenen Abstand ansetzen,
     lag die erste Produktreihe direkt auf der Trennlinie (gemessen: Linie
     und Bildoberkante beide bei y=242). In der Sidebar fiel es nicht auf,
     weil die erste Filtergruppe 20px Innenabstand mitbringt — die Referenz
     nimmt ihr die per :first-child weiter unten wieder weg, damit beide
     Spalten auf derselben Höhe beginnen. */
  margin-bottom: 32px;
}

.hgi-cat-top-main {
  min-width: 0;
}

.hgi-cat-top-eyebrow {
  margin-bottom: 8px;
}

.hgi-cat-top h1 {
  font-size: 40px;
}

.hgi-cat-top-desc {
  margin-top: 10px;
  color: var(--hgi-ink-2);
  max-width: 640px;
}

.hgi-cat-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding-bottom: 4px;
}

.hgi-cat-sort-label {
  font-family: var(--hgi-font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  white-space: nowrap;
}

.hgi-cat-sort .woocommerce-ordering {
  margin: 0;
}

/* Astra rendert den Sortier-Select randlos und in Fließtextgröße (live
   ~20px, 253px breit) — er dominierte die Kopfzeile. Auf die Formularoptik
   des Themes ziehen. Eigener Chevron per background-image, weil
   appearance:none den nativen Pfeil mitentfernt. */
.hgi-cat-sort select.orderby {
  appearance: none;
  -webkit-appearance: none;
  width: 210px;
  height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--hgi-line-2);
  border-radius: var(--hgi-radius-sm);
  background-color: var(--hgi-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23563b2c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 14px 14px;
  font-family: var(--hgi-font-body);
  font-size: 13.5px;
  color: var(--hgi-ink);
  cursor: pointer;
}

.hgi-cat-sort select.orderby:focus {
  outline: none;
  border-color: var(--hgi-ink);
}

@media (max-width: 880px) {
  .hgi-cat-top {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    /* Referenz styles.css:929 nimmt den Abstand mobil auf 20px zurueck. */
    margin-bottom: 20px;
  }

  .hgi-cat-sort {
    padding-bottom: 0;
  }

  .hgi-cat-sort select.orderby {
    flex: 1;
    width: auto;
  }
}








































































/* ─── PDP — Aufbau nach Mockup-Referenz ProductDetail ───────────────────
   pages-shop.jsx:227–417, Variante A (Konzept 04.09.2026).
   Ersetzt den früheren Spec-Strip-Aufbau.                              */

/* Breadcrumb: wie eine normale Ueberschrift, normale Schreibweise
   (Dirk, 29.09.) — vorher Mono/11px/Versalien/0.1em nach Mockup.
   Damit ist auch die Versalien-Frage entschieden, die der Handoff vom
   29.09. offen gelassen hatte: die Breadcrumb zaehlt zu den Ueberschriften,
   nicht zu Tabellenkoepfen und Badges.

   13px statt 11px: Versalien tragen bei gleicher px-Groesse optisch
   dicker auf. Oswald in normaler Schreibweise bei 11px waere kleiner
   erschienen als die Mono-Versalien davor, obwohl die Zahl dieselbe ist.
   letter-spacing auf dem Wert der H1 (0.01em) statt 0 — dieselbe
   Behandlung, nur kleiner gesetzt.
   Die SKU am Ende laeuft mit: sie ist Teil des Pfads, keine Codestelle. */
.hgi-pdp .hgi-breadcrumb {
  font-family: var(--hgi-font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  /* Aus dem Inline-Style des Templates hierher gezogen (29.09.): Abstand
     und Farbe standen dort und haben jede Regel von hier geschlagen. */
  padding: 8px 0 20px;
  color: var(--hgi-ink-3);
}

/* Brand über dem Titel */
.hgi-pdp-brand {
  display: inline-block;
  margin-bottom: 6px;
  text-decoration: none;
  color: var(--hgi-ink-3);
}

/* Tag-Pills unter dem Titel */
.hgi-pdp-pills {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin: 0.875rem 0 1.5rem;
}

/* Kurzbeschreibung */
.hgi-pdp-desc {
  max-width: 32.5rem;
  margin: 0 0 2rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--hgi-ink-2);
}

.hgi-pdp-desc p:last-child { margin-bottom: 0; }

/* Die Beschreibung kommt als <dl> aus JTL (Geschmack/Wirkung/Terpene) */
.hgi-pdp-desc dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 1.25rem;
  margin: 0;
  font-size: 0.9375rem;
}

.hgi-pdp-desc dt {
  font-family: var(--hgi-font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  align-self: baseline;
}

.hgi-pdp-desc dd { margin: 0; color: var(--hgi-ink); }

/* 3-Spalten-Strip: SKU | Packungsgröße | Bestand */
.hgi-pdp-strip {
  display: grid;
  grid-template-columns: repeat(var(--strip-cols, 3), 1fr);
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--hgi-line);
  border-bottom: 1px solid var(--hgi-line);
  margin: 0 0 2rem;
}

.hgi-pdp-strip-val {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.hgi-pdp-strip-val.hgi-mono { font-size: 0.8125rem; }

/* Preis-Kasten */
.hgi-pdp-price-label { margin-bottom: 0.875rem; }

.hgi-pdp-price-box {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius-lg);
  padding: 1.375rem 1.5rem;
  margin: 0 0 2rem;
}

.hgi-pdp-price-amount {
  font-family: var(--hgi-font-display);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
}

/* WooCommerce verschachtelt den Betrag mehrfach — der Betrag traegt seine
   Typografie deshalb selbst, statt sie zu erben.

   Warum !important und das Klassenpaar: der Preis steckt je Zustand in einem
   ANDEREN Element. Beim Elternprodukt rendert German Market serverseitig ein
   <p class="price"> in .legacy-itemprop-offers; bei gewaehlter Variante setzt
   hgi-pdp.js das price_html der Variante ein, dort ist es ein
   <span class="price">. Astra bedient beide Faelle mit eigenen Regeln
   hoeherer Spezifitaet und mit verschiedenen Werten — gemessen am 08.09.:

     Zustand 1 (keine Variante)  28px  / 500
     Zustand 2 (Variante 1)      22,5px / 700
     Zustand 3 (Variante 3)      22,5px / 700

   Drei Zustaende, zwei Typografien, und die eigene 2.25rem-Deklaration
   darueber griff in keinem. Referenzwert ist 36px / 500 / Oswald
   (Basement Wholesale & Distribution/pages-shop.jsx:350), also genau die
   2.25rem — sie wurde nur nie durchgesetzt. */
/* Der Preis-Wrapper muss ein Block sein. Bei gewaehlter Variante ist er ein
   <span class="price"> — also inline —, enthaelt mit dem UVP aber ein
   Block-Kind (.b2b-rrp). Der Browser zerlegt die Inline-Box dadurch in
   Fragmente, und alles nach dem Block beginnt eine neue Zeile: gemessen am
   08.09. 29px Luecke zwischen UVP und Preis und das Sternchen linksbuendig
   UNTER dem Betrag statt hochgestellt daneben. Beim Elternprodukt fiel es
   nicht auf, weil German Market dort ein <p> rendert, das ohnehin Block ist. */
.hgi-pdp-price-amount .price {
  display: block;
}

/* B2B Market setzt zwischen UVP und Betrag ein <br>. In Preisgroesse ergibt
   das eine 50px hohe Leerzeile — gemessen 29px sichtbare Luecke zwischen
   UVP-Unterkante und Preis-Oberkante, die es beim Elternprodukt nicht gibt.
   Der Abstand kommt stattdessen aus dem margin-bottom von .b2b-rrp. */
.hgi-pdp-price-amount .price br {
  display: none;
}

.hgi-pdp-price-amount .price,
.hgi-pdp-price-amount .woocommerce-Price-amount,
.hgi-pdp-price-amount .german-market-from-price-prefix {
  font-family: var(--hgi-font-display) !important;
  font-size: 2.25rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: var(--hgi-ink) !important;
}

/* Alles im Slot ausser dem Betrag selbst faellt auf Fliesstextgroesse
   zurueck. German Markets Hinweise (.wgm-info: Steuersatz, Versand, GTIN)
   erbten sonst die 2,25rem und wurden groesser als der Preis.

   !important, weil diese Zeilen ihre Groesse bisher NICHT von hier bekamen:
   gemessen am 08.09. 11,25px statt der hier stehenden 0.75rem (12px) — also
   0,75em von 15px aus einer fremden em-Regel. Solange der Betrag daneben
   auch nur 22,5px hatte, fiel das nicht auf; mit den jetzt durchgesetzten
   36px waere daraus 27px geworden und die Hinweise waeren fast so gross wie
   der Preis. Eine em-Regel im Elternkontext ist bei einer grossen
   Preiszahl immer eine Falle. */
.hgi-pdp-price-amount .b2b-rrp,
.hgi-pdp-price-amount .wgm-info,
.hgi-pdp-price-amount small {
  display: block;
  font-family: var(--hgi-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  color: var(--hgi-ink-3) !important;
}
/* Ist eine Variante gewaehlt, steht ihr Preis oben im Kasten (hgi-pdp.js).
 * Der untere Block von WooCommerce zeigte ihn dann ein zweites Mal —
 * ausblenden. Nur der PREIS: Verfuegbarkeit und Lieferzeit stehen im
 * gleichen Container und bleiben sichtbar. */
body.hgi-variante-gewaehlt .woocommerce-variation-price { display: none; }

/* Das Sternchen ist ein Fussnotenzeichen, keine Hinweiszeile: es gehoert
 * hochgestellt direkt an den Betrag. Die Block-Regel darueber (gegen
 * German Markets erbende Schriftgroesse) hatte es auf eine eigene Zeile
 * gedrueckt, wo es bei 11px wie ein Haken aussah. Als Klasse gewinnt diese
 * Regel gegen den `small`-Elementselektor oben. */
/* Zwei Klassen, weil das Sternchen je Zustand eine andere traegt: beim
   Elternprodukt kommt es als .hgi-tax-hint aus unserem Filter auf
   woocommerce_get_price_suffix, im price_html der Variante steckt es in
   WooCommerces eigenem <small class="woocommerce-price-suffix">. Gemessen am
   08.09. — deshalb griff die Hochstell-Regel bei gewaehlter Variante nicht
   und die generische small-Regel machte daraus einen Block auf eigener
   Zeile. display mit !important, damit sie das nicht mehr kann. */
.hgi-pdp-price-amount .hgi-tax-hint,
.hgi-pdp-price-amount .woocommerce-price-suffix {
  display: inline !important;
  font-family: var(--hgi-font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  vertical-align: super;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  margin-left: 0.0625rem;
  color: var(--hgi-ink-3) !important;
}



.hgi-pdp-price-amount .b2b-rrp { margin-bottom: 0.25rem; }

/* Der UVP enthaelt SELBST einen .woocommerce-Price-amount ("UVP (inkl.
   MwSt.): 39,90 €") und fiel damit unter die Preisregel oben — die
   Vergleichszahl stand danach so gross wie der Preis (gemessen 33,75px).
   Eigener Fehler beim Vereinheitlichen am 08.09., hier zurueckgenommen:
   im UVP erbt der Betrag die Groesse seiner Zeile. */
.hgi-pdp-price-amount .b2b-rrp .price,
.hgi-pdp-price-amount .b2b-rrp .woocommerce-Price-amount,
.hgi-pdp-price-amount .b2b-rrp .woocommerce-Price-currencySymbol {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* GTIN steht in der Spezifikationstabelle, im Preis-Kasten ist sie fehl
   am Platz. */
.hgi-pdp-price-amount .wgm-gtin { display: none; }

.hgi-pdp-price-unit {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  margin-top: 0.375rem;
}

.hgi-pdp-price-moq { text-align: right; white-space: nowrap; }

.hgi-pdp-price-moq-label {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
}

.hgi-pdp-price-moq-val { font-size: 0.875rem; margin-top: 0.25rem; }

/* Preis je Varianten-Button (an Astras Button-Gruppe angehängt).
   pointer-events:none ist Pflicht, nicht Kosmetik: Astras Klick-Handler
   liest data-slug von e.target. Ohne die Regel schluckt der Span die Klicks
   auf seiner Fläche (gemessen 33x30 von 96x60 = ein Drittel des Buttons)
   und die Variante lässt sich dort nicht auswählen.                     */
.hgi-variant-price {
  display: block;
  font-size: 0.71875rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin-top: 0.25rem;
  pointer-events: none;
}

/* Astras Variantenbutton stapelt Wert und Preis nicht von sich aus — der
   Preis landete sonst rechts neben der Zahl statt darunter (Mockup
   .variant-btn: flex column, align-items flex-start).                  */
.ast-variation-button-group .ast-single-variation:has(.hgi-variant-price) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.125rem;
  line-height: 1.2;
}

/* Live-Zwischensumme neben dem Mengenfeld */
/* [hidden] muss die eigene display-Regel schlagen — sonst bleibt das Label
   "Zwischensumme" ohne Wert stehen, solange keine Variante gewaehlt ist. */
.hgi-pdp-subtotal {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 1rem;
}

.hgi-pdp-subtotal[hidden] { display: none; }

.hgi-pdp-subtotal-label {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
}

.hgi-pdp-subtotal-val {
  font-family: var(--hgi-font-display);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
}

.hgi-pdp-moq-hint {
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--hgi-ink-3);
}

/* ─── Tab-/Akkordeon-Rahmen auf der Produktseite ────────────
 *
 * Astra baut den Rahmen aus Segmenten: der Container traegt nur unten eine
 * Linie, jede Kopfzeile oben/links/rechts, jeder Inhaltsblock links/rechts.
 * Gemessen am 10.09. hatte das drei Folgen — scharfe Ecken (Vorgabe Dirk:
 * abrunden), zwei verschiedene Rahmenfarben im selben Kasten
 * (rgb(228,220,216) an den Koepfen, --hgi-ink an den Inhalten) und eine
 * doppelte Linie dort, wo Kopf- und Inhaltssegment aneinanderstossen.
 *
 * Deshalb: EIN Rahmen am Container, alle Segmente abgeraeumt, und die
 * Trennlinie zwischen zwei Akkordeon-Punkten sitzt am border-top der
 * Kopfzeilen ab der zweiten. overflow:clip haelt die Segmentflaechen in den
 * runden Ecken (clip und nicht hidden — Begruendung im Global Reset).
 * Radius wie der Preis-Kasten darueber (--hgi-radius-lg), damit die beiden
 * Kaesten der Seite dieselbe Sprache sprechen.
 *
 * !important, weil Astras Regeln aus dem Addon-CSS (.ast-woocommerce-
 * accordion .ast-accordion-header) mit zwei Klassen mindestens so
 * spezifisch sind wie alles, was hier ohne Verrenkung notierbar ist. */

.woocommerce div.product .ast-woocommerce-accordion.woocommerce-tabs {
  border: 1px solid var(--hgi-line) !important;
  border-radius: var(--hgi-radius-lg);
  overflow: hidden;
  overflow: clip;
}

.woocommerce div.product .ast-woocommerce-accordion .ast-accordion-header,
.woocommerce div.product .ast-woocommerce-accordion .ast-accordion-content {
  border: 0 !important;
}

.woocommerce div.product .ast-woocommerce-accordion .ast-accordion-header ~ .ast-accordion-header,
.woocommerce div.product .ast-woocommerce-accordion .ast-accordion-content + .ast-accordion-header {
  border-top: 1px solid var(--hgi-line) !important;
}

/* Die Attributtabelle bringt einen eigenen Rahmen mit (Astras
   .woocommerce table.shop_attributes, gemessen 1px oben) — im gerahmten
   Kasten waere das eine zweite Linie direkt unter der Kopfzeile. Die
   Zeilenlinien der Tabelle bleiben, sie kommen aus
   .woocommerce-product-attributes-item. */
.woocommerce div.product table.woocommerce-product-attributes,
.woocommerce div.product table.hgi-versand-tbl {
  border: 0 !important;
}

/* ─── Attributtabelle im Tab "Weitere Angaben" ──────────────
 *
 * Fuer .woocommerce-product-attributes gab es bis 1.15.0 keine einzige
 * Regel — sichtbar war WooCommerce-/Astra-Default (Rahmengitter, fette
 * Labels), was neben dem restlichen PDP fremd wirkte.
 *
 * Aufbau: zwei Spalten, damit 14 Zeilen den Tab nicht zum Strip machen.
 * WooCommerce liefert die <tr> ohne <tbody>; der Parser legt es implizit
 * an, deshalb greift das Grid auf tbody zuverlaessig.
 */

.woocommerce-product-attributes {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.84375rem;
}

.woocommerce-product-attributes tbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
}

.woocommerce-product-attributes-item {
  display: grid;
  grid-template-columns: 10rem 1fr;
  align-items: baseline;
  gap: 0 1rem;
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--hgi-line);
}

/* Zellen zuruecksetzen. Astra und WooCommerce setzen an .shop_attributes
 * th/td eigenes border-bottom, padding, width:150px und die dunkle
 * Primaerfarbe — beides mit hoeherer Spezifitaet als eine Einzelklasse.
 * Ohne diesen Reset zerfaellt die Zeilenlinie in zwei Segmente (je eins
 * unter Label und Wert) und die Labels sind so laut wie die Werte.
 * Gemessen am 08.09.2026: th border-bottom 1px solid, width 150px,
 * color #3d1b04 gewannen gegen die Klassenregeln. */
table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td,
.woocommerce table.woocommerce-product-attributes th,
.woocommerce table.woocommerce-product-attributes td {
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
  width: auto !important;
  text-align: left;
  vertical-align: baseline;
}

table.woocommerce-product-attributes .woocommerce-product-attributes-item__label {
  font-family: var(--hgi-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hgi-ink-3) !important;
  font-weight: 500;
}

table.woocommerce-product-attributes .woocommerce-product-attributes-item__value {
  color: var(--hgi-ink);
}

.woocommerce-product-attributes-item__value p { margin: 0; }

/* Sammelfelder ueber die volle Breite: ihre Pills brauchen den Platz und
 * wuerden in einer halben Spalte mehrzeilig umbrechen. */
.woocommerce-product-attributes-item--attribute_pa_geschmack,
.woocommerce-product-attributes-item--attribute_pa_wirkung,
.woocommerce-product-attributes-item--attribute_pa_terpene,
.woocommerce-product-attributes-item--attribute_genetik {
  grid-column: 1 / -1;
}

/* Pills (Markup vom Filter in inc/wc-pdp.php) */
.hgi-attr-pills { display: block; margin: -0.15625rem 0; }

.hgi-attr-pill {
  display: inline-block;
  font-size: 0.71875rem;
  line-height: 1;
  padding: 0.375rem 0.6875rem;
  margin: 0.15625rem 0.3125rem 0.15625rem 0;
  border: 1px solid var(--hgi-line);
  border-radius: 999px;
  background: var(--hgi-bg-soft);
  color: var(--hgi-ink-2);
}

.hgi-attr-pill--accent {
  background: var(--hgi-accent-bg);
  border-color: transparent;
  color: var(--hgi-accent-ink);
}

@media (max-width: 47.5rem) {
  .woocommerce-product-attributes tbody { grid-template-columns: 1fr; }
  .woocommerce-product-attributes-item { grid-template-columns: 8rem 1fr; }
}

.hgi-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84375rem;
}

.hgi-tbl th,
.hgi-tbl td {
  text-align: left;
  padding: 0.875rem 0.75rem 0.875rem 0;
  border-bottom: 1px solid var(--hgi-line);
}

.hgi-tbl th {
  font-family: var(--hgi-font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.65625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  font-weight: 500;
  width: 12.5rem;
}

.hgi-tbl tr:last-child th,
.hgi-tbl tr:last-child td { border-bottom: 0; }

/* ─── Versand-Tab ───────────────────────────────────────────
 * Gleiche Anatomie wie die Attributtabelle: Label links in Mono-Versalien,
 * Wert rechts, eine Haarlinie je Zeile. Einspaltig, weil drei Zeilen auf
 * zwei Spalten eine halbe Zeile ergeben wuerden.
 *
 * Die Zellen-Resets stehen von Anfang an auf Tabellen-Spezifitaet plus
 * !important — Lektion aus v1.15.1: Astra und WooCommerce setzen an
 * Tabellenzellen eigenes border, padding und width und gewinnen hier
 * grundsaetzlich gegen eine Einzelklasse. */

.hgi-versand-tbl {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.84375rem;
}

table.hgi-versand-tbl th,
table.hgi-versand-tbl td,
.woocommerce table.hgi-versand-tbl th,
.woocommerce table.hgi-versand-tbl td {
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
  width: auto !important;
  text-align: left;
  vertical-align: baseline;
}

.hgi-versand-tbl tr {
  display: grid;
  grid-template-columns: 14rem 1fr;
  align-items: baseline;
  gap: 0 1rem;
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--hgi-line);
}

.hgi-versand-tbl tr:last-child { border-bottom: 0; }

table.hgi-versand-tbl th {
  font-family: var(--hgi-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hgi-ink-3) !important;
  font-weight: 500;
}

table.hgi-versand-tbl td { color: var(--hgi-ink); }

@media (max-width: 47.5rem) {
  .hgi-versand-tbl tr { grid-template-columns: 9rem 1fr; }
}

/* ─── Reihenfolge der Summary ──────────────────────────────────────────
   Astra ordnet die Single-Product-Elemente über eine Customizer-Struktur
   um, und German Market ersetzt den Preis-Hook. Beides macht die
   PHP-Prioritäten in wc-pdp.php unzuverlässig — die sichtbare Reihenfolge
   wird deshalb hier festgelegt. Elemente ohne eigene Regel landen über
   den Default-order-Wert hinter dem Formular.                          */

.single-product .summary.entry-summary {
  display: flex;
  flex-direction: column;
}

.single-product .summary.entry-summary > * { order: 8; }
.single-product .summary.entry-summary > .hgi-pdp-brand { order: 1; }
.single-product .summary.entry-summary > .product_title { order: 2; }
.single-product .summary.entry-summary > .hgi-pdp-pills { order: 3; }
.single-product .summary.entry-summary > .hgi-pdp-desc { order: 4; }
.single-product .summary.entry-summary > .hgi-pdp-strip { order: 5; }
.single-product .summary.entry-summary > .hgi-pdp-price-label { order: 6; }
.single-product .summary.entry-summary > .hgi-pdp-price-box { order: 7; }
.single-product .summary.entry-summary > form.cart { order: 9; }
.single-product .summary.entry-summary > .german-market-summary-gpsr { order: 10; }

/* ─── Aufräumen: Doppelungen und Platzhalter (Konzept 04.09.2026, 07) ── */
/* !important, weil Astras page-spezifisches Dynamic-CSS bei gleicher
   Spezifität je nach Ladereihenfolge gewinnt (bekannt seit v1.5.7).    */

/* Astras Bestandszeile — die Zahl steht jetzt im Strip */
.single-product p.ast-stock-detail { display: none !important; }

/* Astras Kategorie-Zeile — wortgleich zum Brand-Eyebrow darüber */
.single-product .single-product-category { display: none !important; }

/* Untere Herstellerzeile ausblenden (Jonas, freigegeben Dirk 29.09.).
   German Market haengt .german-market-summary-gpsr als letztes Element in
   die Summary (order 10, unter dem Warenkorb-Knopf). Sie zeigte dort
   "Hersteller: Green House Seeds" — denselben Namen, der als Eyebrow
   ueber dem Titel steht.

   GEMESSEN am 29.09. an GHS-AZA-0: Der Block enthaelt ausschliesslich die
   Herstellerzeile plus FUENF leere <br> aus den JTL-Daten — 19px Text auf
   112px Blockhoehe, also 95px toter Raum unter dem Warenkorb-Knopf. Das
   ist der "Whitespace-Muell", den die TODO fuer die GPSR-Felder in weedo
   notiert.

   RECHTLICHER MERKPOSTEN, bewusst hier und nicht nur in der TODO: Die
   GPSR-Herstellerangabe ist eine Pflichtangabe im Fernabsatz GEGENUEBER
   VERBRAUCHERN. Dieser Shop ist login-gegateter B2B — dieselbe Lage wie
   beim Preisrechtlichen, wo im Projekt seit 04.09. der Vermerk "erst nach
   anwaltlicher Abnahme" steht. Oeffnet sich der Shop je fuer Verbraucher,
   MUSS diese Regel zuerst wieder raus.

   Ganzer Container statt nur .german-market-gpsr-manufacturer: Er traegt
   heute nichts anderes. Wird spaeter eine "Verantwortliche Person"
   gepflegt (laut TODO bei 0 von 90 gesetzt), erscheint sie hier ebenfalls
   nicht mehr — dann gehoert die Regel auf den Hersteller-Teil verengt. */
.single-product .german-market-summary-gpsr { display: none; }

/* German Markets Lieferzeit-Platzhalter; echte Lieferzeiten bleiben sichtbar */
.single-product .wgm-info.delivery-time-nicht-angegeben { display: none !important; }

@media (max-width: 40rem) {
  .hgi-pdp-strip {
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
  }

  .hgi-pdp-price-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }

  .hgi-pdp-price-moq { text-align: left; }
  .hgi-tbl th { width: auto; }
}

/* ─── Marken-Streifen auf der Startseite ([hgi_marken]) ────
   Kacheln sind dunkel, weil die Logos aus JTL mit schwarzem Grund kommen —
   auf hellem Untergrund staenden sonst schwarze Quadrate im Raster. Marken
   ohne Logo bekommen dieselbe Kachel mit ihrem Namen in der Display-Schrift,
   damit der Streifen keine Luecke hat: Stand 08.09.2026 haben drei von sechs
   Marken ein Kategoriebild, darunter Dutch Passion mit 104 Produkten NICHT. */

/* Marken-Band ab 1.75.0: helles Band, Kacheln im Slider.
   Das Band steht auf Weiss, weil die Seite auf #FAFAF5 steht und die
   Nachbarabschnitte auf oklch(0.96 0.005 100) — Weiss unterscheidet sich von
   beiden (gemessen 06.10.2026). Die Kacheln waren schwarz, solange die Logos
   aus JTL einen eingebrannten schwarzen Grund hatten. Die SVG-Logos aus der
   Mediathek sind freigestellt; auf Weiss sind sie lesbar, auf Schwarz waren
   Doja, Dutch Passion und Hidden Labs es nicht. */
/* Seit 1.86.4 kein Weiss mehr (Dirk, 09.10.2026: "die Marken-Logos bitte
   nicht auf weissem Hintergrund, leichtes Grau, sollte definiert sein").
   Die Kacheln stehen auf --hgi-bg-soft, das Band auf dem Seitengrund. */
.hgi-section:has(.hgi-marken-wall) {
  background: var(--hgi-bg);
}

.hgi-marken-slider {
  position: relative;
  margin: 24px 0 8px;
}

/* Ohne JS bleibt es ein wischbarer Streifen; die Pfeile kommen aus hgi.js. */
.hgi-marken-wall {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px;
}
.hgi-marken-wall::-webkit-scrollbar { display: none; }

.hgi-marken-tile {
  flex: 0 0 150px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px 14px;
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius);
  background: var(--hgi-bg-soft);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.hgi-marken-tile:hover {
  border-color: var(--hgi-accent);
  transform: translateY(-2px);
}

/* Feste Hoehe fuer die Bildzone: die Logos haben unterschiedliche
   Seitenverhaeltnisse, ohne sie springen die Kacheln in der Hoehe. */
.hgi-marken-tile-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 72px;
}

.hgi-marken-tile-inner img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Marken ohne Logo: Name in Dunkel, der helle Akzentton war auf Schwarz
   gedacht und verschwindet auf Weiss. */
.hgi-marken-tile-name {
  font-family: var(--hgi-font-display);
  font-size: 17px;
  font-weight: 500;
  text-transform: none;
  line-height: 1.1;
  text-align: center;
  color: var(--hgi-primary, #1c1410);
}

/* Markenname und Produktanzahl unter dem Logo: eine Textrolle, eine Regel
   (Dirk, 09.10.2026: Marke ausgeschrieben, in der Schrift der Anzahl). */
.hgi-marken-tile-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-align: center;
  color: #6b6b60;
}

/* Pfeile: seit 1.87.0 die Karussell-Komponente .hgi-carousel__nav (Optik
   hgi-promo.css, Lage und Hover-Einblendung hgi-core.css). Die eigenen
   .hgi-marken-pfeil-Regeln sind entfallen: 42x36px statt rund, und das
   Zeichen stand weiss auf weissem Grund (gemessen 09.10.2026). */

@media (max-width: 640px) {
  .hgi-marken-tile { flex-basis: 120px; }
  .hgi-marken-tile-inner { height: 56px; }
  .hgi-marken-tile-inner img { max-height: 56px; }
}


/* Der Knopf zum Leeren steht neben "Warenkorb aktualisieren", aber ruhiger:
   Er ist die seltenere und die folgenreichere Handlung von beiden. */
/* Linksbuendig, seit der Knopf in der linken Spalte unter der Artikelliste
   haengt (functions.php, 29.09.). Rechtsbuendig war richtig, solange er
   unter beiden Spalten lag — dort gehoerte er optisch zur Summen-Sidebar. */
.hgi-cart-leeren-form {
  margin-top: 16px;
  text-align: left;
}

/* Runde Form wie jeder andere Knopf der Seite (Dirk, 29.09.): Er stand als
   einziger eckig (border-radius 0) neben lauter Pillen — "Weiter zur Kasse",
   "Warenkorb anzeigen", "In den Warenkorb" tragen alle 999px. Die RUHIGE
   Gewichtung bleibt: transparent statt gefuellt, Linie statt Flaeche. Er
   ist die seltenere und die folgenreichere Handlung von beiden, das soll
   man ihm ansehen — nur nicht an der Form, sondern am Gewicht. */
.hgi-cart-leeren {
  background: transparent !important;
  color: var(--hgi-ink-3) !important;
  border: 1px solid var(--hgi-line-2) !important;
  border-radius: 999px !important;
  padding: 0.5rem 1.25rem !important;
}

.hgi-cart-leeren:hover,
.hgi-cart-leeren:focus-visible {
  color: var(--hgi-danger, #c96f6f) !important;
  border-color: currentColor !important;
}


/* Keine Ueberschrift in Versalien — auch die nicht, die Astra setzt
   (Dirk, 24.09.2026).
   
   Die zwoelf Regeln im Repo waren nur die Haelfte: "h1, .entry-content
   :where(h1) { text-transform: uppercase }" steht in Astras generiertem
   Customizer-CSS und damit in keiner Datei dieses Projekts. Gefunden ueber
   CSS.getMatchedStylesForNode am Seitentitel, nicht durch Suchen im Code.
   
   :is() nimmt die Spezifitaet seines staerksten Arguments, mit body davor
   also (0,1,1) — gleichauf mit Astras Selektor, und diese Datei laedt
   spaeter.
   
   Die Eyebrow-Zeilen waren zunaechst ausgenommen (sie sind Labels, keine
   Ueberschriften) und sind am 24.09. auf Dirks Ansage dazugekommen: keine
   Versalien auf der Seite, auch nicht an den kleinen Zeilen darueber. */
body :is(h1, h2, h3, h4, h5, h6, .entry-title, .hgi-eyebrow) {
  text-transform: none;
}


/* ─── Bestands-Ampel an den Varianten-Chips ────────────────
 *
 * Die Farbe ist die Zusammenfassung, nicht die Information: Die Menge steht
 * im title und im aria-label jedes Chips. Eine Ampel, die ihre Aussage
 * allein ueber Farbe traegt, waere fuer rund jeden zwoelften Mann nicht
 * lesbar — deshalb kommt bei "nicht auf Lager" der Durchstrich dazu, und er
 * ist die einzige Stufe, die man auch ohne Farbe erkennt. */
.hgi-pc-variant-chip.hgi-ampel {
  border-color: currentColor;
}

.hgi-pc-variant-chip.hgi-ampel--reichlich {
  color: var(--hgi-ampel-reichlich);
  background: color-mix(in oklab, var(--hgi-ampel-reichlich) 14%, transparent);
}

.hgi-pc-variant-chip.hgi-ampel--begrenzt {
  color: var(--hgi-ampel-begrenzt);
  background: color-mix(in oklab, var(--hgi-ampel-begrenzt) 16%, transparent);
}

.hgi-pc-variant-chip.hgi-ampel--knapp {
  color: var(--hgi-ampel-knapp);
  background: color-mix(in oklab, var(--hgi-ampel-knapp) 12%, transparent);
}

.hgi-pc-variant-chip.hgi-ampel--leer {
  color: var(--hgi-ink-3);
  background: transparent;
  border-color: var(--hgi-line-2);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}


/* Ampel an den Variantenkacheln der Produktseite (Dirk, 24.09.2026).
 *
 * Erste Fassung war eine schmale Farbmarke am oberen Rand der Kachel. Sie
 * war zu leise: Dirks Frage dazu lautete "warum die Linie, und wo ist die
 * Ampel?" — wer nach der Bedeutung fragen muss, liest sie nicht als Ampel.
 * Jetzt das Zeichen, das jeder kennt: ein farbiger Punkt vor der Lagerzeile,
 * die Zeile in derselben Farbe.
 *
 * Die Flaeche der Kachel bleibt frei, weil die Kachel ein Bedienelement ist
 * und im gewaehlten Zustand dunkel wird — eine eingefaerbte Flaeche wuerde
 * dort mit dem Zustand kollidieren. */
.hgi-variant-lager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.01em;
  /* Die Kachel selbst steht in Versalien; die Lagerzeile erbte sie und las
     sich als "15 AUF LAGER" — bei einer Angabe, die man ablesen und nicht
     rufen soll, ist das falsch. */
  text-transform: none;
  color: currentColor;
}

.hgi-variant-lager::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ast-single-variation.hgi-ampel--reichlich .hgi-variant-lager { color: var(--hgi-ampel-reichlich); }
.ast-single-variation.hgi-ampel--begrenzt  .hgi-variant-lager { color: var(--hgi-ampel-begrenzt); }
.ast-single-variation.hgi-ampel--knapp     .hgi-variant-lager { color: var(--hgi-ampel-knapp); }

.ast-single-variation.hgi-ampel--leer .hgi-variant-lager {
  color: var(--hgi-ink-3);
}

/* Nicht lieferbar: durchgestrichen, und der Punkt wird zum leeren Ring —
   die einzige Stufe, die man auch ohne Farbunterscheidung erkennt. */
.ast-single-variation.hgi-ampel--leer .hgi-variant-lager::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

.ast-single-variation.hgi-ampel--leer {
  opacity: 0.6;
}

.ast-single-variation.hgi-ampel--leer .hgi-variant-price {
  text-decoration: line-through;
}

/* Im gewaehlten Zustand ist die Kachel dunkel: Dann traegt die Lagerzeile
   ihre Farbe weiter, aber aufgehellt, damit sie auf dem dunklen Grund
   lesbar bleibt. */
.ast-single-variation.active .hgi-variant-lager {
  filter: brightness(1.35);
}

/* Klickbare Karte ohne Link im Link (Dirk, 24.09.2026).
 *
 * Die Karte ist kein <a> mehr — die Varianten-Chips sind selbst Links auf
 * die vorgewaehlte Variante, und ein Link im Link ist ungueltiges HTML. Den
 * Karten-Klick uebernimmt der Link am Produktnamen: Sein ::after legt sich
 * ueber die ganze Karte. Die Chips liegen mit z-index darueber und behalten
 * ihren eigenen Klick. */
.woocommerce ul.products li.product {
  position: relative;
}

.hgi-pc-namelink {
  color: inherit;
  text-decoration: none;
}

.hgi-pc-namelink::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hgi-pc-variants-chips {
  position: relative;
  z-index: 1;
}

a.hgi-pc-variant-chip {
  text-decoration: none;
}

a.hgi-pc-variant-chip:hover,
a.hgi-pc-variant-chip:focus-visible {
  border-color: currentColor;
  filter: brightness(0.94);
}

/* ─── Startseite mobil: Packungsknoepfe in der zweispaltigen Liste ───────
   Gilt fuer jede mehrspaltige Liste unter 600px; mit einer Spalte in Astra
   (body.mobile-columns-1) bleiben die 44px-Knoepfe. Anlass: Die Topseller
   der Startseite sind zweispaltig (Karte 160px breit), und
   dort brachen "Samen" plus drei 44er-Knoepfe in zwei Zeilen um (Dirk,
   iPhone, 07.10.2026). Die Beschriftung steht jetzt ueber den Knoepfen,
   die Knoepfe sind 34px gross: vier passen nebeneinander (154px), und 34px
   liegen weiter ueber der WCAG-Mindestgroesse von 24px. */
/* 34px-Knoepfe bis zur Tablet-Grenze (921px), nicht nur am Telefon: Seit die
   Spalten aus Astra kommen (1.84.0), zeigte das Tablet die 20px-Desktop-Chips,
   zu klein zum Antippen (T263, Dirk 08.10.2026: "ja"). */
@media (max-width: 921px) {
  /* Beschriftung ueber den Knoepfen: bei 921px ist die Karte neben der
     Filterleiste nur 168px breit, "Samen" plus drei 34er brach dort um. */
  body:not(.mobile-columns-1) .hgi-pc-variants {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 0;
  }

  body:not(.mobile-columns-1) .hgi-pc-variants-chips {
    gap: 4px;
  }

  body:not(.mobile-columns-1) .hgi-pc-variant-chip {
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    font-size: 12px;
  }
}

@media (max-width: 600px) {

  /* Abstaende straffen (Dirk, iPhone, 07.10.2026). Namensreserve und
     UVP-Band gelten seit 09.10.2026 auf allen Breiten, siehe .hgi-pc-name
     und .hgi-pc-meta oben; hier bleibt nur der kleinere Knopfabstand. */
  /* 32 statt 34px breit (Hoehe bleibt 34): Am Telefon hat die Knopfreihe
     143px. Vier 34er mit 4px Luecke brauchen 148px, Karten mit vier
     Packungen brachen um. 4 x 32 + 3 x 4 = 140px. */
  body:not(.mobile-columns-1) .hgi-pc-variant-chip {
    min-width: 32px;
    padding: 0 4px;
  }

  body:not(.mobile-columns-1) .hgi-pc-variants {
    margin-top: 2px;
  }
}

/* ─── Nach-oben-Knopf in der Markenfarbe ────────────────────────────────
   Astras Standard war ein schwarzgruenes Quadrat (rgb 31,37,25), das wie
   ein Fremdkoerper ueber dem Inhalt stand (Dirk, iPhone, 07.10.2026). */
#ast-scroll-top {
  background-color: var(--hgi-brown-dark);
  color: #fff;
  border-radius: var(--hgi-radius-sm);
}

#ast-scroll-top:hover,
#ast-scroll-top:focus-visible {
  background-color: var(--hgi-primary);
}

/* ─── Aktionen: Streichpreis und Gratis-Packung (T280, 1.88.0) ─────────────
   Werte kommen aus Woo Discount Rules (inc/aktion.php). Eine Optik für
   Produktseite, Karte und Quick Order: der alte Preis klein und
   durchgestrichen, der Gratis-Hinweis als Etikett in der Akzentfläche. */

/* Preiskasten: Discount Rules setzt <del>alt</del><ins>neu</ins> ins
   price_html. Die Betragsregel oben erzwingt 2.25rem mit !important — der
   Streichpreis braucht deshalb dieselbe Waffe, sonst stünde er so groß wie
   der Preis. */
.hgi-pdp-price-amount del,
.hgi-pdp-price-amount del .woocommerce-Price-amount,
.hgi-pdp-price-amount del .german-market-from-price-prefix,
.hgi-pdp-price-amount del .woocommerce-Price-currencySymbol {
  font-family: var(--hgi-font-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--hgi-ink-3) !important;
}
.hgi-pdp-price-amount del {
  display: block;
  margin-bottom: 0.375rem;
  text-decoration: line-through;
}
.hgi-pdp-price-amount ins { text-decoration: none; }

.hgi-variant-price del,
.hgi-qo-price del,
.hgi-pc-unit del {
  opacity: 0.7;
  margin-right: 0.25em;
}

.hgi-gratis,
.hgi-variant-gratis {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--hgi-radius, 6px);
  background: var(--hgi-accent-bg);
  color: var(--hgi-accent-ink);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.3;
  white-space: nowrap;
}
/* Wie der Preis darüber: Klicks gehören dem Variantenknopf (siehe
   .hgi-variant-price). */
.hgi-variant-gratis {
  margin-top: 3px;
  pointer-events: none;
}
.hgi-pdp-gratis { margin-top: 0.5rem; }
/* Auf der Produktkachel liegt der Hinweis unten links im Bild (1.88.10),
   als Pill wie das Sale-Badge oben links. Der leichte Schatten haelt ihn
   auf hellen Packungsfotos lesbar. */
.hgi-pc-gratis {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Discount Rules legt den GANZEN alten Preisblock in <del>, samt UVP-Zeile
   von B2B Market — der UVP stand dadurch durchgestrichen (gemessen 13.10.,
   1.88.0). Eine Durchstreichung vererbt sich an Block-Kinder und lässt sich
   dort nicht per text-decoration:none zurücknehmen; inline-block unterbricht
   die Weitergabe. Der UVP selbst hat sich nicht geändert. */
.hgi-pdp-price-amount del .b2b-rrp {
  display: inline-block !important;
  width: 100%;
  text-decoration: none;
}