/* ===========================================================
   aromaneo Shop – KOMPLETTES Custom CSS
   Diese Datei ersetzt ab jetzt immer den GESAMTEN Inhalt von
   Design -> Customizer -> Zusätzliches CSS (nicht anhängen,
   sondern alles ersetzen).
   =========================================================== */

/* Google Fonts werden erst nach Cookie-Zustimmung per JS geladen
   (siehe Cookie-Banner-Script in shop-qty-stepper.js), genau wie
   auf der Landingpage. Bis dahin greift der serif/sans-serif-Fallback. */

:root{
  --dark-green:#2f3d28;
  --beige:#e2d2ac;
  --beige-deep:#8f6d3f;
  --beige-darkest:#6b4f30;
  --cream:#eee4ce;
  --shop-bg:#e4dbbd;
  --ink:#2a2a24;
  --radius:2px;
}

/* ---------- Grundgestaltung ---------- */
html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}
@media (max-width:780px){
  html{scroll-padding-top:95px;}
}
body{
  font-family:'Jost', sans-serif;
  color:var(--ink);
  background:var(--shop-bg);
  line-height:1.6;
}
h1,h2,h3,.site-title{
  font-family:'Playfair Display', serif;
  font-weight:600;
  color:var(--dark-green);
}
a{color:var(--dark-green);}
.site-title, .site-description{
  /* wir nutzen ein Logo-Bild statt Textlogo */
  position:absolute;
  clip:rect(0 0 0 0);
  width:1px;height:1px;
  overflow:hidden;
}

/* ---------- Header: bleibt beim Scrollen oben fixiert, Logo und
   Menü-Button in einer schmalen Zeile nebeneinander ---------- */
.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:200 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  gap:12px;
  padding:10px 20px !important;
  background:rgba(238,228,206,.28) !important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(238,228,206,.15);
}
/* WICHTIG: ".col-full" ist Storefronts eigene generische Grid-Klasse
   (für normale Seiteninhalte gedacht) und bringt IMMER, unabhängig von
   dieser Datei, ihre eigenen responsiven margin-left/margin-right mit
   (z.B. 1.41575em ≈ 22.65px auf dem echten Handy, sogar bis 2.61792em
   ≈ 41.9px im Tablet-Bereich – siehe Storefront-Kern-CSS). Weil unser
   Header zufällig dieselbe Klasse für sein Logo/Menü-Wrapper nutzt,
   hat sich dieser Rand bisher unbemerkt zusätzlich zum padding oben
   aufaddiert – das war der eigentliche Grund, warum Logo/Menü trotz
   entferntem doppelten padding immer noch viel zu weit Richtung Mitte
   gerückt wirkten. Hier explizit auf 0 zurückgesetzt, egal bei welcher
   Bildschirmbreite. */
.site-header > .col-full,
.site-header .storefront-primary-navigation{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  flex:0 0 auto !important;
  padding:0 !important;
}
.site-header .storefront-primary-navigation .col-full{
  padding:0 !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
}
.site-header .site-search{
  display:none !important;
}

/* ---------- Desktop: Menüpunkte in einer Zeile neben dem Logo,
   Warenkorb bleibt ganz rechts ---------- */
@media (min-width:781px){
  .site-header{
    align-items:center !important;
    justify-content:flex-start !important;
    gap:48px;
  }
  .site-header .storefront-primary-navigation{
    flex:1 1 auto !important;
  }
  .storefront-primary-navigation .col-full{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    gap:28px !important;
    width:100% !important;
    max-width:none !important;
  }
  .main-navigation{
    display:flex !important;
    align-items:center !important;
    width:auto !important;
    margin-right:auto;
  }
  .main-navigation ul.nav-menu,
  .main-navigation ul.menu{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
    gap:26px;
  }
  .main-navigation ul.nav-menu li,
  .main-navigation ul.menu li{
    float:none !important;
    white-space:nowrap;
  }
  button.menu-toggle{
    display:none !important;
  }
}
.admin-bar .site-header{
  top:32px !important;
}
@media (max-width:782px){
  .admin-bar .site-header{
    top:46px !important;
  }
}
/* Der obere Abstand (padding-top) wird per JS anhand der echten
   Header-Höhe gesetzt, siehe shop-qty-stepper.js */
.main-navigation ul.nav-menu li a,
.main-navigation ul.menu li a{
  color:var(--dark-green);
  font-family:'Jost',sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:13.5px;
}
.site-header-cart .amount{color:var(--dark-green);}
/* Preis + Artikelanzahl direkt neben das Warenkorb-Icon rücken (Desktop),
   ohne die Position der Menüpunkte zu verändern: nur der interne Aufbau
   des Warenkorb-Links wird zum rechtsbündigen Flex-Layout, der Link selbst
   bleibt an seiner bisherigen Stelle im Header. */
@media (min-width:781px){
  .site-header-cart a.cart-contents{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
  }
  /* Auffälliger machen (auf Wunsch): fetter, etwas größer, einheitliche
     dunkelgrüne Farbe für Preis, Artikelanzahl und Korb-Icon – nur Web,
     Mobil bleibt unverändert (diese Regeln stecken in der 781px-Media-Query). */
  .site-header-cart .amount{
    margin:0 !important;
    font-weight:700 !important;
    font-size:19px !important;
  }
  .site-header-cart .count{
    margin:0 !important;
    font-weight:700 !important;
    font-size:15px !important;
    color:var(--dark-green) !important;
  }
  .site-header-cart a.cart-contents::after{
    font-size:22px !important;
    color:var(--dark-green) !important;
  }
}

/* ---------- Buttons ---------- */
.button,
.add_to_cart_button,
.single_add_to_cart_button,
#place_order,
input[type="submit"]{
  background:var(--dark-green) !important;
  color:var(--cream) !important;
  border-radius:var(--radius);
  border:none !important;
  font-family:'Jost',sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:13px;
  transition:background .2s ease, transform .2s ease;
}
.button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
#place_order:hover{
  background:var(--beige-deep) !important;
  transform:translateY(-1px);
}

/* ---------- Shop-Banner: neues Bio-Kräuter-Hero-Bild oberhalb des
   Produktrasters, ersetzt den zuvor komplett ausgeblendeten WooCommerce-
   Standard-Header (nur "Shop"-Text). Das neue Bild traegt seinen Text
   bereits eingebrannt (kein zusaetzlicher Textinhalt noetig). Datei liegt
   auf der Landingpage-Ebene (public_html/shop-hero-banner.jpg), daher
   absolute URL - gleiches Muster wie footer-illustration.jpg/de-bio-siegel.png.
   .woocommerce-products-header ist das allererste Element in <main>, direkt
   unter dem fixierten Header/Banner (body hat eigenes padding-top dafuer),
   dadurch automatisch volle Bildschirmbreite ohne Zusatz-CSS.
   Vorerst NUR Desktop (>=781px) - Mobil-Darstellung wird separat geprueft. */
.woocommerce-products-header{
  display:none;
}
.woocommerce-products-header__title{
  position:absolute;
  clip:rect(0 0 0 0);
  width:1px;
  height:1px;
  overflow:hidden;
}
@media (max-width:780px){
  .woocommerce-products-header{
    display:block !important;
    position:relative;
    width:100%;
    aspect-ratio:5/3;
    background:url('https://aromaneo.com/shop/shop-hero-banner.jpg') left center/cover no-repeat;
    margin:0 0 24px;
  }
}
@media (min-width:781px){
  .woocommerce-products-header{
    display:block !important;
    position:relative;
    width:100%;
    aspect-ratio:2400/748;
    background:url('https://aromaneo.com/shop/shop-hero-banner.jpg') center center/cover no-repeat;
    margin:0 0 40px;
  }
}

/* ---------- Oel-Banner-Text (Olivenoele-Filter): NICHT ins Bild
   eingebrannt wie beim Kraeuter-Banner, sondern echter Text per CSS,
   damit Schriftart/-schnitt garantiert 1:1 mit dem Rest der Seite
   uebereinstimmt (Playfair Display 600 / Jost - siehe h1,h2,h3 oben).
   Wird von shop-qty-stepper.js per JS ein-/ausgeblendet, sobald der
   "Olivenoele"-Filter aktiv ist; Hintergrundbild wechselt parallel auf
   das textfreie olive-banner-notext.jpg. */
.shop-banner-text{
  display:none;
  position:absolute;
  left:6%;
  top:0;
  height:100%;
  max-width:54%;
  flex-direction:column;
  justify-content:center;
  z-index:2;
}
.shop-banner-text.is-active{display:flex;}
.shop-banner-text .sbt-rule{
  display:block;
  width:40px;
  height:2px;
  background:#f7f2e4;
  opacity:.85;
  margin-bottom:18px;
}
.shop-banner-text .sbt-h{
  font-family:'Playfair Display',serif;
  font-weight:600;
  font-size:clamp(26px,3.6vw,44px);
  line-height:1.24;
  color:#f7f2e4;
  margin:0 0 12px;
  text-shadow:0 1px 4px rgba(0,0,0,.18);
}
.shop-banner-text .sbt-sub{
  font-family:'Jost',sans-serif;
  font-size:clamp(12.5px,1.35vw,15.5px);
  letter-spacing:.05em;
  color:#f7f2e4;
  opacity:.92;
  margin:0;
}

/* ---------- Fix: verstecktes Theme-Clearfix (::before/::after) auf
   ul.products wird sonst im CSS-Grid als eigenes (leeres) Rasterfeld
   gezählt und verschiebt dadurch die erste Zeile um ein Feld nach
   rechts (Desktop) bzw. erzeugt ein leeres erstes Feld (Mobil) ---------- */
ul.products::before,
ul.products::after{
  content:none !important;
  display:none !important;
}

/* ---------- Schmales Ankündigungs-Banner: hängt fest unter dem
   fixierten Header (Web UND Mobil) und bewegt sich beim Scrollen mit dem
   Menü mit statt wegzuscrollen. "top" wird von adjustHeaderSpace() in
   shop-qty-stepper.js exakt anhand der echten Header-Höhe gesetzt; 69px
   ist nur ein Platzhalter, bis das Skript einmal gelaufen ist. ---------- */
.aromaneo-shop-banner{
  position:fixed;
  top:69px;
  left:0;
  right:0;
  z-index:190;
  overflow:hidden;
  background:var(--dark-green);
  color:var(--cream);
  text-align:center;
  padding:9px 20px;
  font-family:'Jost',sans-serif;
  font-size:12.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.aromaneo-shop-banner strong{
  color:var(--beige);
  font-weight:600;
}
.aromaneo-shop-banner .banner-text{position:relative;z-index:1;}
/* Kleine, helle Rosmarin-/Oregano-Blätter, die dezent durchs Banner fallen
   (gleiche Animation wie auf der Landingpage). Emoji lassen sich nicht
   direkt umfärben, deshalb per Filter auf ein helles Beige getrimmt statt
   im natürlichen Grün. */
.aromaneo-shop-banner .leaf{
  position:absolute;
  top:-30%;
  font-size:10px;
  line-height:1;
  pointer-events:none;
  filter:grayscale(1) brightness(1.9) sepia(.4);
  opacity:.45;
  z-index:0;
  animation:aromaneoLeafFallShop linear infinite;
}
/* Sanftes Wehen/Fliegen statt geradem Fallen: Blätter driften seitlich
   hin und her, während sie durchs Banner ziehen. */
@keyframes aromaneoLeafFallShop{
  0%{transform:translate(0,0) rotate(0deg);opacity:0;}
  12%{opacity:.5;}
  30%{transform:translate(12px,70%) rotate(35deg);}
  55%{transform:translate(-14px,140%) rotate(-15deg);}
  80%{transform:translate(10px,205%) rotate(45deg);}
  88%{opacity:.5;}
  100%{transform:translate(-8px,260%) rotate(20deg);opacity:0;}
}
@media (max-width:780px){
  .aromaneo-shop-banner{
    font-size:11px;
    padding:8px 14px;
  }
  .aromaneo-shop-banner .leaf{font-size:8px;}
}

/* ---------- Kategorie-Filter auf der Shop-Übersichtsseite ---------- */
.aromaneo-shop-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 28px;
}
.aromaneo-filter-btn{
  padding:9px 20px;
  border-radius:20px;
  border:1.5px solid var(--dark-green);
  background:transparent;
  color:var(--dark-green);
  font-family:'Jost',sans-serif;
  font-size:12.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s ease;
}
.aromaneo-filter-btn:hover{
  background:rgba(47,61,40,.08);
}
.aromaneo-filter-btn.active{
  background:var(--dark-green);
  color:var(--cream);
}
@media (max-width:780px){
  .aromaneo-shop-filter{
    gap:8px;
    margin:0 0 20px;
  }
  .aromaneo-filter-btn{
    padding:7px 15px;
    font-size:11px;
  }
}

/* ---------- Produktkarten: transparent/schwebend statt weißer Box,
   der Schatten liegt gezielt am Foto, nicht am ganzen Kartenrahmen ---------- */
ul.products li.product{
  display:flex;
  flex-direction:column;
  background:transparent;
  border:none;
  padding:0 0 22px;
  transition:transform .25s ease;
}
ul.products li.product:hover{
  transform:translateY(-4px);
}
ul.products li.product img{
  aspect-ratio:1/1;
  width:100%;
  object-fit:cover;
  display:block;
  border-radius:calc(var(--radius) + 3px);
  box-shadow:0 14px 30px rgba(47,32,15,.2);
  transition:box-shadow .25s ease;
}
ul.products li.product:hover img{
  box-shadow:0 20px 38px rgba(47,32,15,.26);
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2{
  font-family:'Playfair Display', serif;
  color:var(--dark-green);
  font-weight:700;
  font-size:17px;
  margin:14px 0 4px;
}
ul.products li.product a.woocommerce-loop-product__link{
  position:relative;
  display:block;
}
/* Auf Wunsch: offizielles Bio-Siegel (Bild) statt der reinen "BIO"-Textpille
   oben links im Produktbild. Datei liegt auf der Landingpage-Ebene
   (public_html/de-bio-siegel.png), daher absolute URL. */
ul.products li.product a.woocommerce-loop-product__link::before{
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  width:60px;
  height:50px;
  background-image:url('https://aromaneo.com/de-bio-siegel.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
}

/* ---------- Desktop: Produktkarten insgesamt kleiner (mehr pro Zeile) ---------- */
@media (min-width:781px){
  ul.products{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:26px !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
  }
  ul.products li.product{
    width:100% !important;
    margin:0 !important;
    float:none !important;
  }
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2{
    font-size:15px;
  }
  ul.products li.product .price{
    font-size:14px !important;
  }
  ul.products li.product .price .amount,
  ul.products li.product .price bdi,
  ul.products li.product .price .woocommerce-Price-amount,
  ul.products li.product .price .woocommerce-Price-currencySymbol,
  ul.products li.product .price-amount-wrap{
    font-size:14px !important;
  }
}

/* ---------- Fix: bei schmaleren Desktop-Fensterbreiten (z.B. nicht
   maximiertes Browserfenster, kleinerer Monitor - auf einem PC eines
   Geschäftspartners beobachtet) blieb die 3-spaltige Rasteransicht
   erhalten, wodurch für "In den Warenkorb"-Button + Mengen-Stepper pro
   Karte nur noch ~114px Breite übrig blieben. Der Button-Text ("Ins
   Beutelchen damit") brach dadurch dreizeilig um und wirkte kaputt/
   verrutscht. Ab hier nur noch 2 Spalten, wodurch jede Karte deutlich
   mehr Breite bekommt - auf sehr breiten Bildschirmen (>1099px) bleibt
   es bei 3 Spalten wie bisher. */
@media (min-width:781px) and (max-width:1099px){
  ul.products{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

/* ---------- Bewertungen & Ergebnis-Anzahl ausblenden ---------- */
.star-rating,
.woocommerce-result-count{
  display:none !important;
}

/* ---------- Hintergrund: manche Shop-Seiten fielen auf reines Weiß
   zurück statt der (etwas dunkleren) Marken-Cremefarbe ---------- */
html, body, body.woocommerce, body.woocommerce-page{
  background:var(--shop-bg) !important;
}

/* ---------- Logo-Größe (Blatt-Icon statt Schriftzug) ---------- */
.site-branding img,
.custom-logo{
  height:48px !important;
  width:auto !important;
  max-width:none !important;
}

/* ---------- Sortier-Dropdown ausblenden ---------- */
.woocommerce-ordering{
  display:none !important;
}

/* ---------- Breadcrumbs ---------- */
.woocommerce-breadcrumb{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8b8b7d;
  margin-bottom:28px;
}
.woocommerce-breadcrumb a{
  color:var(--beige-deep);
}
.woocommerce-breadcrumb a:hover{
  color:var(--dark-green);
}

/* ---------- Mengen-Stepper (+ / -) ---------- */
.quantity{
  position:relative;
  display:inline-flex;
  align-items:stretch;
  border:1.5px solid var(--dark-green);
  border-radius:var(--radius);
  overflow:hidden;
  height:48px;
}
.quantity .qty{
  width:56px;
  height:100%;
  border:none;
  text-align:center;
  font-family:'Jost',sans-serif;
  font-size:15px;
  color:var(--ink);
  background:transparent;
  -moz-appearance:textfield;
}
.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.quantity .qty-step{
  width:38px;
  border:none;
  background:var(--cream);
  color:var(--dark-green);
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease;
}
.quantity .qty-step:hover{
  background:var(--beige);
}
.quantity .qty-step:active{
  background:var(--beige-deep);
  color:var(--cream);
}
.quantity .qty-step-minus{border-right:1px solid rgba(47,61,40,.18);}
.quantity .qty-step-plus{border-left:1px solid rgba(47,61,40,.18);}

form.cart{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* ---------- "In den Warenkorb gelegt"-Hinweis ---------- */
.woocommerce-message{
  position:relative;
  overflow:hidden;
  background:var(--dark-green) !important;
  color:var(--cream) !important;
  border:none !important;
  border-radius:var(--radius);
  padding:16px 70px 16px 22px !important;
  font-family:'Jost',sans-serif;
  font-size:14.5px;
  letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}
/* Haken-Icon vor dem Text entfernt (auf Wunsch) ... */
.woocommerce-message::before{
  display:none !important;
}
/* ...stattdessen unten rechts eine kleine Wachstumsanimation einer
   Pflanze in Beige (gleicher Beige-Ton wie die Blatt-Deko im Banner,
   per Filter aus dem Emoji "gefärbt"). */
.woocommerce-message::after{
  content:"🌱";
  position:absolute;
  right:16px;
  bottom:6px;
  font-size:32px;
  line-height:1;
  transform-origin:bottom center;
  filter:grayscale(1) brightness(2) sepia(.5);
  animation:aromaneoMessageGrow 1.6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes aromaneoMessageGrow{
  0%{transform:scale(.1) translateY(14px);opacity:0;}
  55%{opacity:1;}
  100%{transform:scale(1) translateY(0);opacity:1;}
}
/* "Warenkorb ansehen"-Link komplett entfernt (auf Wunsch) – sowohl der
   Link im Hinweis-Banner (Einzelprodukt-Seite, .woocommerce-message)
   als auch der separate Link, den WooCommerce im Grid per AJAX direkt
   neben/unter den "In den Warenkorb"-Button einblendet
   (a.added_to_cart.wc-forward) */
.woocommerce-message a.button,
.added_to_cart,
a.added_to_cart,
.added_to_cart.wc-forward{
  display:none !important;
}

/* ---------- Produktübersicht: Preis als eigene Zeile ----------
   Auf Wunsch: keine durchgehende horizontale Trennlinie mehr unter dem
   Titel – stattdessen trennt eine vertikale Linie (wie am Kilopreis
   rechts) den Stückpreis vom Kilopreis, siehe .price-weight unten.
   Die Karte bekommt dafür align-items:stretch, damit die vertikale
   Linie (border-left) die volle Höhe der Preis-Zeile durchzieht. */
ul.products li.product .price{
  display:flex !important;
  align-items:stretch;
  justify-content:space-between;
  width:100%;
  margin:14px 0 12px !important;
  padding-top:12px;
  font-family:'Jost', sans-serif !important;
  font-size:16px !important;
  font-weight:500;
  color:var(--dark-green) !important;
  text-align:left;
}
ul.products li.product .price .amount,
ul.products li.product .price bdi,
ul.products li.product .price .woocommerce-Price-amount,
ul.products li.product .price .woocommerce-Price-currencySymbol,
ul.products li.product .price-amount-wrap{
  color:var(--dark-green) !important;
  font-family:'Jost', sans-serif !important;
  font-size:16px !important;
  font-weight:500 !important;
}
.price-amount-wrap{
  white-space:nowrap;
  display:flex;
  align-items:center;
}
/* Zeigt jetzt den Kilopreis (z.B. "266,00 €/kg") statt der reinen
   Grammangabe – siehe aromaneo_price_html_with_weight() in
   shop-loop-quantity.php. Die vertikale Linie links davon ersetzt die
   frühere horizontale Linie unter dem Titel. */
.price-weight{
  display:flex;
  align-items:center;
  font-family:'Jost',sans-serif !important;
  font-size:12px !important;
  font-weight:400 !important;
  color:#8b8b7d !important;
  border-left:1px solid rgba(90,68,42,.3);
  padding-left:10px;
  margin-left:10px;
  white-space:nowrap;
}

/* ---------- Produktübersicht: Menge + Warenkorb-Button in einer Zeile ---------- */
.loop-cart-row{
  display:flex;
  align-items:stretch;
  gap:10px;
  margin-top:auto;
}
.loop-cart-row .quantity{
  height:44px;
  flex-shrink:0;
}
.loop-cart-row .quantity .qty{
  width:44px;
}
.loop-cart-row .qty-step{
  width:32px;
}
.loop-cart-row a.button,
.loop-cart-row .add_to_cart_button{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  height:44px;
  padding:0 12px !important;
  font-size:12.5px;
  text-align:center;
}

/* ---------- Einzelprodukt-Seite: Bild schwebend/transparent,
   genau wie im Produktraster (kein weißer Rahmen, Schatten am Foto) ---------- */
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product div.images img{
  border-radius:calc(var(--radius) + 3px);
  box-shadow:0 14px 30px rgba(47,32,15,.2);
}
.woocommerce div.product .product_title{
  font-weight:700;
}

/* ===========================================================
   Mobile-Feinschliff (bewusst gestaltet, nicht Theme-Standard)
   =========================================================== */
@media (max-width:780px){

  /* Header kompakter, Logo zentriert-links, klarer Warenkorb rechts.
     KEIN eigenes padding hier mehr: .site-header selbst hat bereits
     padding:10px 20px (s.o., gilt immer, nicht nur mobil) – das
     zusätzliche padding hier hat sich damit verdoppelt (effektiv ca.
     40px Abstand statt 20px) und Logo/Menü auf dem echten Handy viel zu
     weit von der Kante Richtung Mitte gezogen, statt nur "etwas Luft"
     zu lassen. */
  .site-header .col-full{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  /* GEFUNDENER ECHTER GRUND für "Logo/Menü hängen in der Mitte fest":
     .site-header hat (weiter oben in dieser Datei) justify-content:
     space-between. Mit genau zwei starren Flex-Kindern (Logo-.col-full
     und Nav-.col-full, beide flex:0 0 auto) verteilt der Browser bei
     dieser Datei-Konstellation (zusammen mit dem gap:12px auf
     .site-header) den freien Platz nicht wie erwartet NUR zwischen die
     beiden Kinder, sondern zu gleichen Teilen VOR, ZWISCHEN und NACH
     beiden Kindern – bestätigt per echtem 386px-iframe-Test (nicht nur
     Kaskaden-Prüfung). Ergebnis: Logo und Menü-Button sitzen beide
     eingerückt Richtung Mitte statt an den Rändern. Robuster Ersatz für
     space-between mit exakt zwei Kindern: flex-start + margin-left:auto
     auf das zweite Kind – funktioniert zuverlässig, unabhängig von
     dieser gap-Eigenart. Nur mobil, damit Desktop (eigene, funktionierende
     flex-start/flex:1 1 auto-Regeln weiter oben) unangetastet bleibt. */
  .site-header{
    justify-content:flex-start !important;
  }
  .site-header .storefront-primary-navigation{
    margin-left:auto !important;
  }
  /* Zusätzlicher Theme-Fund: .site-branding hat unconditional
     width:calc(100% - 120px) (für eine viel breitere Desktop-Zeile
     gedacht). Seit die Logo-.col-full jetzt korrekt auf ihren Inhalt
     schrumpft (viel schmaler als früher), rechnet sich "100%" hier auf
     nur noch ~70px herunter – calc(70px - 120px) ist negativ und wird
     von CSS auf 0 gekappt. Das Logo-Bild "überläuft" seinen eigenen,
     unsichtbar breiten Container zwar noch sichtbar, aber der Container
     selbst zählt beim Layout als (fast) breitenlos. Mit width:auto
     bekommt .site-branding wieder seine echte, vom Inhalt bestimmte
     Breite. */
  .site-branding{
    width:auto !important;
    max-width:none !important;
  }
  /* Untere mobile Symbolleiste (Konto/Suche/Warenkorb) ausblenden */
  .storefront-handheld-footer-bar{
    display:none !important;
  }
  body.storefront-handheld-footer-bar-visible,
  body{
    padding-bottom:0 !important;
  }

  /* Etwas Luft zum linken Bildschirmrand, statt direkt an der Kante zu
     kleben – analog zur Landingpage (dort header .logo-mark margin-left
     auf Mobil). */
  .site-branding{margin:0 0 0 6px;}
  .site-branding img{
    height:64px !important;
    width:auto !important;
    max-width:none !important;
  }

  /* Menü-Button rechtsbündig statt am linken Rand (ursprüngliche Regel,
     unverändert – die Positionierung von Logo/Burger im Shop soll NICHT
     angepasst werden, nur das Aufklapp-Verhalten des Dropdowns darunter). */
  .main-navigation{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    width:100% !important;
  }
  .main-navigation .primary-navigation{
    width:100% !important;
    text-align:left !important;
  }
  /* .handheld-navigation bewusst NICHT width:100% (das würde die 100%
     immer auf die volle Bildschirmbreite berechnen und damit den
     rechten Inset unten (left+right) überstimmen/ignorieren – bestätigt
     per Live-Messung: Box ragte dadurch bei größerem Inset rechts über
     den Bildschirmrand hinaus). width:auto lässt links+rechts (s.u. bei
     .handheld-navigation) die Box korrekt symmetrisch schmaler machen,
     ohne dass sich die Breite/der Zeilenumbruch der Menüpunkte darin
     sonst verändert (die haben unten weiterhin ihr eigenes width:100%,
     jetzt einfach relativ zu einem korrekt schmaleren Elternelement). */
  .main-navigation .handheld-navigation{
    width:auto !important;
    text-align:left !important;
  }
  /* KEIN eigener position:relative-Anker mehr auf .col-full: dieses
     Element ist auf dem echten Handy nur so breit wie der Burger-Button
     selbst (width:auto), wodurch das absolut positionierte Dropdown
     darunter auf diese schmale Breite eingedampft wurde (auf dem Handy
     sichtbar als stark eingerückte, schmale Menü-Box mit umgebrochenem
     Text). .site-header weiter oben in dieser Datei ist bereits
     position:fixed und volle Breite (100%) – das reicht als Positio-
     nierungs-Kontext für .handheld-navigation aus (s.u.), ganz ohne
     einen zusätzlichen, zu schmalen Anker. */

  /* Hamburger-Menü: nur noch reines Icon, kein grüner Kasten und kein
     "Menü"-Text mehr – analog zum Burger auf der Landingpage
     (.burger: background:none, nur 3 dunkelgrüne Streifen, kein Text). */
  .storefront-primary-navigation .menu-toggle,
  button.menu-toggle{
    position:relative;
    /* Etwas Luft zum rechten Bildschirmrand, statt direkt an der Kante
       zu kleben – analog zur Landingpage (dort .burger margin-right auf
       Mobil). */
    margin-right:10px;
    background:none !important;
    border:none !important;
    border-radius:0 !important;
    width:44px !important;
    height:44px !important;
    padding:0 !important;
    /* "Menü"-Textinhalt des Buttons unsichtbar machen (font-size:0
       kollabiert den Textknoten auf 0 Breite); das Icon selbst hängt
       nicht an font-size, sondern an eigenen px-Maßen (s.u.), bleibt
       also unberührt. */
    font-size:0 !important;
    line-height:1 !important;
  }
  .storefront-primary-navigation .menu-toggle::before,
  button.menu-toggle::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:24px !important;
    height:2px !important;
    background:var(--dark-green) !important;
    box-shadow:0 7px 0 var(--dark-green), 0 -7px 0 var(--dark-green) !important;
    transform:translate(-50%,-50%) !important;
    border:none !important;
    font-size:0 !important;
  }
  .storefront-primary-navigation .menu-toggle::after,
  button.menu-toggle::after{
    content:none !important;
  }
  /* Storefront zeichnet sein EIGENES Standard-Icon nicht auf dem Button
     selbst, sondern auf dem inneren <span>Menü</span> (span::before –
     ein eigenständiges, eigenes Pseudo-Element, unabhängig von
     button.menu-toggle::before oben). Dadurch blieb bisher ein einzelner
     kurzer, grauer Extra-Strich neben unserem sauberen 3-Streifen-Icon
     sichtbar. Per iframe-Test bei echten 390px bestätigt und behoben. */
  .storefront-primary-navigation .menu-toggle span::before,
  button.menu-toggle span::before,
  .storefront-primary-navigation .menu-toggle span::after,
  button.menu-toggle span::after{
    content:none !important;
    display:none !important;
  }
  /* Komplett transparent – nur die Schrift soll zu sehen sein */
  .main-navigation ul.nav-menu,
  .main-navigation .handheld-navigation ul.menu{
    background:transparent;
    border-top:none;
  }
  .main-navigation ul.nav-menu li a,
  .main-navigation .handheld-navigation ul.menu li a{
    display:block;
    padding:12px 20px !important;
    font-size:14px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--dark-green);
    border-bottom:none;
  }
  /* "Zurück zur Startseite"-Link im Dropdown farblich hervorheben – exakt
     dieselbe Farbe wie der "Zum Shop"-Link im Mobilmenü der Landingpage
     (dort .nav-shop-mobile a{color:var(--beige-deep)}). Per href statt
     Text ausgewählt (robuster als Menüpunkt-ID, falls das Menü mal neu
     gespeichert wird). */
  .main-navigation .handheld-navigation ul.menu li a[href="https://aromaneo.com/"]{
    color:var(--beige-deep) !important;
    font-weight:500;
  }

  /* Dropdown-Menü als eigenständige Überlagerung UNTER dem Header,
     statt (wie vorher) im normalen Dokumentfluss Platz einzunehmen und
     dabei alles darunter (inkl. wahrgenommen das Logo in der Zeile
     darüber) wegzudrücken/verschieben zu lassen. position:absolute
     wirkt hier relativ zu .site-header (s.o., bereits position:fixed
     und volle Breite) – NICHT relativ zum Bildschirm wie position:fixed
     es täte, und NICHT relativ zur schmalen .col-full-Menüzeile (das
     hatte auf dem echten Handy zu einem viel zu schmalen, eingerückten
     Dropdown geführt). Dadurch bleibt der gesamte Rest der Kopfzeile
     beim Öffnen/Schließen unverändert an Ort und Stelle, und das
     Dropdown bekommt zuverlässig die volle Bildschirmbreite – exakt
     das gleiche Muster (CSS-Grid 0fr -> 1fr statt JS-gemessener
     max-height) wie das aufklappende Menü auf der Landingpage. */
  .handheld-navigation{
    position:absolute;
    /* Auf Wunsch: das Dropdown darf sich erst UNTER dem schmalen
       Ankündigungs-Banner öffnen (statt es zu überlagern/zu verdecken).
       top:100% allein reicht nur bis zur Unterkante von .site-header
       (dem positionierten Elternelement); die zusätzliche, per JS in
       adjustHeaderSpace() (shop-qty-stepper.js) gemessene Banner-Höhe
       (--aromaneo-banner-h) wird hier draufaddiert. Fällt das Banner
       weg (Variable dann 0px/undefiniert), verhält es sich wie zuvor. */
    top:calc(100% + var(--aromaneo-banner-h, 0px));
    /* Auf Wunsch schmaler gemacht, analog zum Inset des aufklappenden
       Menüs auf der Landingpage (dort nav > ul / die Menübox: left/right
       12px, siehe home.css). Vorher nur 2px (0,5mm) – jetzt exakt
       derselbe 12px-Wert wie auf der Landingpage, ohne dass sich dadurch
       die Menüpunkte selbst verschieben/umbrechen (siehe width:auto-Fix
       oben bei .main-navigation .handheld-navigation). */
    left:12px;
    right:12px;
    z-index:250;
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    background:rgba(238,228,206,.99);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-radius:0 0 12px 12px;
    box-shadow:0 14px 24px rgba(0,0,0,.2);
    border-top:1px solid rgba(47,61,40,.08);
    transition:grid-template-rows .35s ease, opacity .25s ease;
  }
  .main-navigation.toggled .handheld-navigation{
    grid-template-rows:1fr;
    opacity:1;
    transition:grid-template-rows .35s ease, opacity .3s ease .05s;
  }
  .handheld-navigation ul.menu{
    overflow:hidden;
    min-height:0;
    padding:0 20px;
    transition:padding .35s ease;
    /* "Zurück zur Startseite" soll optisch als LETZTER Punkt erscheinen,
       ohne die DOM-Reihenfolge im WP-Menü selbst anzufassen (das würde
       auch die Desktop-Navigation mit umsortieren) und ohne eine leere
       Lücke an der bisherigen (ersten) Stelle zu hinterlassen – dafür
       hier auf Flex mit "order" umgestellt (nur mobil, nur dieses
       Dropdown): alle anderen Punkte rücken automatisch lückenlos eine
       Position nach oben. */
    display:flex;
    flex-direction:column;
  }
  .handheld-navigation ul.menu li:has(> a[href="https://aromaneo.com/"]){
    order:99;
  }
  .main-navigation.toggled .handheld-navigation ul.menu{
    padding:14px 20px 18px;
  }

  /* Produktraster: ZWEI Spalten, zwei Produkte pro Zeile */
  ul.products{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:16px 12px !important;
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    list-style:none !important;
  }
  ul.products li.product{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 0 18px !important;
    float:none !important;
    clear:none !important;
  }
  ul.products li.product .button{
    padding:10px 8px;
    font-size:11px;
  }
  ul.products li.product a.woocommerce-loop-product__link::before{
    width:64px;
    height:52px;
    top:8px;
    left:8px;
  }

  /* Menge + Warenkorb-Button: bei zwei Spalten übereinander statt
     nebeneinander, damit beides gut lesbar/klickbar bleibt. Der Button
     bleibt bewusst schmaler (halbe Breite, zentriert) statt über die
     volle Breite zu gehen wie die Mengenauswahl. */
  .loop-cart-row{
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .loop-cart-row .quantity{
    height:40px;
    width:100%;
  }
  .loop-cart-row .quantity .qty{
    width:100%;
    font-size:13px;
  }
  .loop-cart-row .qty-step{
    width:28px;
    font-size:15px;
  }
  .loop-cart-row a.button,
  .loop-cart-row .add_to_cart_button{
    width:78%;
    margin:0 auto !important;
    height:auto;
    min-height:38px;
    padding:8px 6px !important;
    font-size:10.5px;
    line-height:1.25;
    white-space:normal;
    font-weight:600;
    letter-spacing:.02em;
    border-radius:8px;
    box-shadow:0 3px 8px rgba(0,0,0,.12);
  }
  ul.products li.product h2,
  ul.products li.product .woocommerce-loop-product__title{
    font-size:13.5px;
    line-height:1.3;
    margin:8px 0 4px;
    /* Immer Platz für 2 Zeilen reservieren, damit der Trennstrich zum
       Preis bei allen Karten in einer Reihe auf gleicher Höhe sitzt,
       unabhängig von der Titellänge (am längsten Titel orientiert) */
    min-height:2.6em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* Preis links, Kilopreis rechts – gleiche Zeile wie am Desktop, statt
     untereinander gestapelt. Mobil bewusst bei der alten, horizontalen
     Trennlinie belassen (keine vertikale Linie wie am Desktop) – die
     Umstellung auf die vertikale Linie war ausdrücklich nur für Web
     gewünscht. */
  ul.products li.product .price{
    font-size:12.5px !important;
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
    gap:6px;
    margin:8px 0 10px !important;
    padding-top:8px;
    border-top:1px solid rgba(90,68,42,.3);
  }
  ul.products li.product .price .amount,
  ul.products li.product .price bdi,
  ul.products li.product .price .woocommerce-Price-amount,
  ul.products li.product .price .woocommerce-Price-currencySymbol,
  ul.products li.product .price-amount-wrap{
    font-size:12.5px !important;
  }
  .price-weight{
    border-left:none;
    padding-left:0;
    margin-left:0;
  }

  /* Einzelprodukt: Bild groß, Kaufbereich als klarer Block darunter */
  div.product .images{margin-bottom:20px;}
  div.product .summary{
    padding:0;
  }
  div.product form.cart{
    position:sticky;
    bottom:0;
    background:var(--cream);
    padding:14px 0 18px;
    border-top:1px solid rgba(90,68,42,.15);
    margin-top:16px;
    z-index:20;
  }
  div.product form.cart .single_add_to_cart_button{
    flex:1;
    text-align:center;
    padding:14px 20px;
  }
}

/* ---------- Cookie-Banner (analog zur Landingpage) ---------- */
.aromaneo-cookie-banner{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:1000;
  background:var(--dark-green);
  box-shadow:0 -8px 24px rgba(0,0,0,.25);
  padding:22px 32px;
  display:none;
}
.aromaneo-cookie-banner.show{display:block;}
.aromaneo-cookie-banner-inner{
  max-width:1140px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.aromaneo-cookie-banner p{font-size:13.5px;line-height:1.6;color:var(--cream);max-width:640px;margin:0;}
.aromaneo-cookie-banner a{color:var(--beige);text-decoration:underline;}
.aromaneo-cookie-banner a:hover{color:var(--cream);}
.aromaneo-cookie-banner-actions{display:flex;gap:12px;flex-wrap:wrap;}
.aromaneo-cookie-btn{
  display:inline-block;
  padding:11px 24px;
  border-radius:var(--radius);
  font-family:'Jost',sans-serif;
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .25s ease;
  white-space:nowrap;
  border:1.5px solid transparent;
}
.aromaneo-cookie-btn-accept{background:var(--beige);color:var(--dark-green);border-color:var(--beige);}
.aromaneo-cookie-btn-accept:hover{background:var(--beige-deep);border-color:var(--beige-deep);color:var(--cream);}
.aromaneo-cookie-btn-decline{background:transparent;color:var(--cream);border-color:rgba(240,230,210,.45);}
.aromaneo-cookie-btn-decline:hover{border-color:var(--cream);}
@media (max-width:700px){
  .aromaneo-cookie-banner-inner{flex-direction:column;align-items:flex-start;}
  .aromaneo-cookie-banner-actions{width:100%;}
  .aromaneo-cookie-btn{flex:1;text-align:center;}
}

/* ---------- Schwebendes Warenkorb-Icon unten rechts (nur mobil) ---------- */
.aromaneo-cart-fab{
  display:none;
}
@media (max-width:780px){
  .aromaneo-cart-fab{
    position:fixed;
    right:8px;
    bottom:18px;
    z-index:260;
    width:120px;
    height:120px;
    /* Auf Wunsch: kein runder Hintergrund-Kreis mehr – nur noch der
       Korb selbst ist sichtbar. Button-Box bleibt (unsichtbar) exakt so
       groß wie vorher der Kreis, damit die Antipp-Fläche/Drag-Ziel
       gleich groß bleibt. */
    background:none;
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    /* Auf Wunsch: Icon bleibt unsichtbar, solange der Warenkorb leer
       ist, und blendet erst ein, sobald tatsächlich etwas hineingelegt
       wurde (Klasse "has-items" wird in updateCartFabCount() in
       shop-qty-stepper.js anhand der echten Warenkorb-Anzahl gesetzt).
       display bleibt bewusst immer "flex" (nicht "none"), sonst könnte
       weder die Opacity- noch die Drag/Snap-Transition sauber laufen -
       stattdessen komplett unsichtbar UND per pointer-events:none
       unantastbar, solange leer. */
    opacity:0;
    pointer-events:none;
  }
  .aromaneo-cart-fab.has-items{
    opacity:1;
    pointer-events:auto;
  }
  .aromaneo-cart-fab-img{
    /* Bild füllt jetzt die komplette vorherige Kreisfläche aus statt nur
       einen kleineren Ausschnitt daraus. Der Schatten sitzt jetzt direkt
       am Korb-Umriss (drop-shadow statt Box-Shadow auf einem jetzt gar
       nicht mehr sichtbaren Kreis). */
    width:115px;
    height:auto;
    flex-shrink:0;
    object-fit:contain;
    pointer-events:none;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.4));
  }
  .aromaneo-cart-fab-count{
    position:absolute;
    top:-2px;
    right:0px;
    min-width:28px;
    height:28px;
    padding:0 6px;
    border-radius:14px;
    background:var(--dark-green);
    color:var(--cream);
    font-family:'Jost',sans-serif;
    font-size:14px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid var(--cream);
    /* Jetzt ohne umgebenden Kreis-Hintergrund muss die Zahl selbst
       kräftig genug wirken, um sich gegen das bunte Korb-Bild
       durchzusetzen – daher zusätzlich ein eigener Schatten und ein
       garantiert höherer Stapelkontext (Bild hat keinen z-index, könnte
       sonst je nach Browser/Reihenfolge theoretisch überlappen). */
    box-shadow:0 3px 8px rgba(0,0,0,.45);
    z-index:2;
  }
  .aromaneo-cart-fab-count.hidden{
    display:none;
  }
  /* Auf der Warenkorb-/Kasse-Seite selbst nicht nötig */
  body.woocommerce-cart .aromaneo-cart-fab,
  body.woocommerce-checkout .aromaneo-cart-fab{
    display:none !important;
  }
  /* Sofortiges Zusammendrücken beim Antippen (Klasse wird per JS in
     initPageLeaveTransition() gesetzt/entfernt, siehe shop-qty-
     stepper.js) – vorher fühlte sich ein Tap auf das Icon "tot" an,
     weil nichts sichtbar reagierte. */
  .aromaneo-cart-fab{
    /* left/top zusätzlich zu right/bottom animiert, für das sanfte
       Einschnappen in eine Ecke nach dem Ziehen (siehe setupCartFabDrag()
       in shop-qty-stepper.js). Während des aktiven Ziehens selbst wird
       die Transition per JS (inline style) UND per .dragging-Klasse
       hier zusätzlich hart deaktiviert, damit der Button ruckelfrei am
       Finger klebt statt hinterherzueiern. */
    transition:left .3s ease, top .3s ease, right .3s ease, bottom .3s ease,
               transform .15s ease, box-shadow .15s ease, opacity .35s ease;
    /* Erlaubt eigenes Drag-Handling per JS (Pointer Events) statt dass
       der Browser selbst scrollt/zoomt, wenn man den Button berührt. */
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-user-drag:none;
  }
  .aromaneo-cart-fab.dragging{
    transition:none !important;
  }
  .aromaneo-cart-fab.dragging .aromaneo-cart-fab-img{
    filter:drop-shadow(0 14px 22px rgba(0,0,0,.45));
  }
  .aromaneo-cart-fab.is-pressed{
    transform:scale(.88);
  }
  /* "Etwas ist reingefallen"-Effekt wie eine Feder: erst spannt sich
     das Icon spürbar nach unten auf (längere Anlaufphase, statt sofort
     zurückzuschnellen), dann löst sich die Spannung nach oben und klingt
     in mehreren, länger nachwippenden Schwingungen aus, sobald per JS
     (added_to_cart-Event, siehe shop-qty-stepper.js) die Klasse
     "cart-bump" gesetzt wird. animation-timing-function bewusst linear,
     da das Timing/Tempo schon komplett über die Keyframe-Prozente selbst
     gesteuert wird. Endet exakt wieder bei transform:none, damit beim
     Entfernen der Klasse kein sichtbarer Sprung entsteht. */
  @keyframes aromaneoCartFabBump{
    0%{transform:translateY(0) scale(1,1);}
    15%{transform:translateY(13px) scale(1.05,.91);}
    32%{transform:translateY(-16px) scale(.93,1.09);}
    44%{transform:translateY(7px) scale(1.03,.96);}
    55%{transform:translateY(-7px) scale(.97,1.04);}
    65%{transform:translateY(4px) scale(1.02,.98);}
    74%{transform:translateY(-4px) scale(.985,1.015);}
    82%{transform:translateY(2.3px) scale(1.011,.99);}
    89%{transform:translateY(-2.2px) scale(.992,1.008);}
    94%{transform:translateY(1.2px) scale(1.006,.996);}
    97.5%{transform:translateY(-.8px) scale(.997,1.003);}
    100%{transform:translateY(0) scale(1,1);}
  }
  .aromaneo-cart-fab.cart-bump{
    animation:aromaneoCartFabBump 1.7s linear;
  }
}
/* Überblende in Cremeweiß mit Lade-Spinner beim Wechsel zur Warenkorb-
   Seite – kaschiert den leeren/weißen Blitz, während die Zielseite
   lädt, statt dass der Tap ins Leere zu laufen scheint. */
.aromaneo-page-leave-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background:var(--cream);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.aromaneo-page-leave-overlay.show{
  opacity:1;
  pointer-events:auto;
}
.aromaneo-page-leave-spinner{
  width:40px;
  height:40px;
  border-radius:50%;
  border:3px solid rgba(47,61,40,.2);
  border-top-color:var(--dark-green);
  animation:aromaneoSpin .7s linear infinite;
}
@keyframes aromaneoSpin{
  to{transform:rotate(360deg);}
}

/* ---------- Automatisches Popup: "Noch X€ bis gratis Versand" ----------
   Auf Wunsch von der bisherigen unauffälligen Leiste unten (leicht zu
   übersehen) an die obere rechte Ecke gezogen, direkt neben/unter das
   Warenkorb-Icon im Header (bzw. auf Mobil in Richtung des schwebenden
   Warenkorb-Icons) – dort, wo der Blick nach einer Aktion ohnehin
   hinwandert. "--aromaneo-safe-top" wird laufend per JS anhand der
   tatsächlichen Header-/Banner-/Adminleisten-Höhe berechnet (siehe
   adjustHeaderSpace() in shop-qty-stepper.js), damit der Hinweis auf
   jeder Seite und Bildschirmgröße exakt darunter andockt statt darüber
   zu schweben. Für die paar Sekunden, die er sichtbar ist, bewusst mit
   spürbarem Bounce beim Einblenden PLUS einem einmaligen Leucht-Ring
   (aromaneoToastPulse), der kurz nach außen ausklingt – auffällig genug,
   um nicht übersehen zu werden, aber ohne dauerhaft zu blinken/nerven. */
.aromaneo-shipping-toast{
  position:fixed;
  top:var(--aromaneo-safe-top, 96px);
  right:16px;
  transform:translate(12px, -10px) scale(.9);
  transform-origin:top right;
  z-index:400;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--dark-green);
  color:var(--cream);
  padding:15px 22px;
  border-radius:16px;
  border:1.5px solid var(--beige);
  font-family:'Jost',sans-serif;
  font-size:14px;
  line-height:1.35;
  letter-spacing:.02em;
  box-shadow:0 14px 34px rgba(0,0,0,.38), 0 0 0 5px rgba(226,210,172,.14);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
  max-width:min(340px, calc(100vw - 24px));
  text-align:left;
}
.aromaneo-shipping-toast::after{
  content:"";
  position:absolute;
  top:-7px;
  right:22px;
  width:14px;
  height:14px;
  background:var(--dark-green);
  border-top:1.5px solid var(--beige);
  border-left:1.5px solid var(--beige);
  transform:rotate(45deg);
}
/* Variante für Mobil: Sprechblase hängt über dem schwebenden Warenkorb-
   Icon unten rechts, Spitze zeigt daher nach UNTEN statt nach oben (wird
   per JS als Klasse gesetzt, siehe separates Positionierungs-Snippet). */
.aromaneo-shipping-toast.point-down{
  transform-origin:bottom right;
}
.aromaneo-shipping-toast.point-down::after{
  top:auto;
  bottom:-7px;
  border-top:none;
  border-left:none;
  border-bottom:1.5px solid var(--beige);
  border-right:1.5px solid var(--beige);
}
.aromaneo-shipping-toast::before{
  content:"🚚";
  font-size:22px;
  line-height:1;
  flex-shrink:0;
}
.aromaneo-shipping-toast.show{
  opacity:1;
  pointer-events:auto;
  transform:translate(0, 0) scale(1);
  animation:aromaneoToastPulse 1.1s ease-out .05s 1;
}
.aromaneo-shipping-toast strong{
  color:var(--beige);
  font-weight:600;
}
@keyframes aromaneoToastPulse{
  0%{box-shadow:0 14px 34px rgba(0,0,0,.38), 0 0 0 5px rgba(226,210,172,.14), 0 0 0 0 rgba(226,210,172,.55);}
  70%{box-shadow:0 14px 34px rgba(0,0,0,.38), 0 0 0 5px rgba(226,210,172,.14), 0 0 0 16px rgba(226,210,172,0);}
  100%{box-shadow:0 14px 34px rgba(0,0,0,.38), 0 0 0 5px rgba(226,210,172,.14), 0 0 0 0 rgba(226,210,172,0);}
}
@media (max-width:780px){
  .aromaneo-shipping-toast{
    padding:12px 16px;
    border-radius:14px;
    font-size:12.5px;
    gap:8px;
    right:10px;
  }
  .aromaneo-shipping-toast::after{
    right:18px;
    width:11px;
    height:11px;
    top:-6px;
  }
  .aromaneo-shipping-toast::before{
    font-size:19px;
  }
}

/* ---------- Mini-Warenkorb-Dropdown (Klick/Hover auf das Icon im Header) ----------
   Das Theme zeigt das standardmäßig als schlichte graue/weiße Box – hier an
   den Rest der Seite angeglichen (Creme statt Weiß, Jost/Playfair, Rahmen-
   farbe). Wichtig: .quantity wird an anderer Stelle in dieser Datei für den
   Mengen-Stepper im Produktraster als umrandete Box gestylt (48px hoch,
   Rahmen etc.) – dieselbe Klasse nutzt WooCommerce hier für die schlichte
   "1 × 3,99 €"-Textzeile, daher unten gezielt zurückgesetzt. */
.widget_shopping_cart_content{
  background:var(--cream);
  border:1px solid rgba(90,68,42,.15);
  border-radius:var(--radius);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  padding:18px;
  font-family:'Jost',sans-serif;
}
.widget_shopping_cart_content ul.cart_list{
  list-style:none;
  margin:0 0 14px;
  padding:0;
}
/* Grid statt Flexbox: robuste 2-Zeilen-Ausrichtung (Bild+Titel oben,
   Menge darunter) unabhängig davon, wie breit der Produktname ist – die
   vorherige Flex+order-Lösung ließ den Entfernen-Kreis bei langen Titeln
   auf eine eigene Zeile über dem Bild rutschen (sah "versetzt" aus). */
.widget_shopping_cart_content ul.cart_list li{
  display:grid;
  grid-template-columns:20px 1fr;
  align-items:start;
  column-gap:10px;
  row-gap:6px;
  padding:12px 0;
  border-bottom:1px solid rgba(90,68,42,.12);
}
.widget_shopping_cart_content ul.cart_list li:first-child{padding-top:0;}
.widget_shopping_cart_content ul.cart_list li:last-child{border-bottom:none;padding-bottom:0;}
/* Achtung: WooCommerce packt Bild UND Titeltext gemeinsam in denselben
   <a>-Link (kein separates <img> auf Höhe von <li>). */
.widget_shopping_cart_content ul.cart_list li a.remove{
  grid-column:1;
  grid-row:1;
  align-self:center;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  line-height:1;
  border-radius:50%;
  background:transparent;
  color:var(--dark-green) !important;
  border:1.5px solid var(--dark-green);
  font-size:13px;
  text-align:center;
  text-decoration:none !important;
  transition:background .2s ease, color .2s ease;
}
.widget_shopping_cart_content ul.cart_list li a.remove:hover{
  background:var(--dark-green);
  color:var(--cream) !important;
}
.widget_shopping_cart_content ul.cart_list li a:not(.remove){
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:var(--dark-green);
  font-size:13.5px;
  line-height:1.35;
}
.widget_shopping_cart_content ul.cart_list li a:not(.remove) img{
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:calc(var(--radius) + 2px);
  flex-shrink:0;
}
.widget_shopping_cart_content ul.cart_list li .quantity{
  grid-column:2;
  grid-row:2;
  display:block !important;
  height:auto !important;
  border:none !important;
  background:none !important;
  overflow:visible !important;
  font-size:12px;
  color:#8b8b7d;
}
.widget_shopping_cart_content ul.cart_list li .quantity .amount{
  color:#8b8b7d;
  font-size:12px;
}
/* Theme liefert für Zwischensumme/Buttons standardmäßig einen abweichenden
   (grauen) Hintergrund statt der restlichen Creme-Fläche des Dropdowns -
   hier explizit gegen das Theme-Default überschrieben. */
.widget_shopping_cart_content .woocommerce-mini-cart__total,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons,
.widget_shopping_cart_content .total,
.widget_shopping_cart_content .buttons{
  background:var(--cream) !important;
}
.woocommerce-mini-cart__total{
  display:flex;
  justify-content:space-between;
  font-family:'Playfair Display',serif;
  font-weight:600;
  color:var(--dark-green);
  font-size:15px;
  margin:0 0 16px;
  padding:0;
}
.woocommerce-mini-cart__total .amount{color:var(--dark-green);}
.woocommerce-mini-cart__buttons{
  display:flex;
  gap:10px;
  margin:0;
  padding:0;
}
.woocommerce-mini-cart__buttons a.button{
  flex:1 1 0%;
  min-width:0; /* sonst zieht das automatische Mindest-Inhalts-Maß (min-content)
                  den Button mit dem längeren Wort "Warenkorb" breiter als den
                  "Kasse"-Button, obwohl beide flex:1 haben – mit min-width:0
                  werden beide Buttons rechnerisch exakt gleich breit. */
  margin:0 !important; /* Theme setzt auf ".buttons a" ein margin-bottom:0.618em,
                  aber via :last-child-Ausnahme nur beim Kasse-Button nicht.
                  Dadurch schrumpft der Warenkorb-Button unter align-items:stretch
                  um diesen Rand, während Kasse auf volle Zeilenhöhe wächst –
                  der Kasse-Button wirkte dadurch sichtbar tiefer/größer als
                  der Warenkorb-Button. Mit margin:0 auf beiden strecken sich
                  beide gleich hoch. */
  text-align:center;
  font-size:12px;
  padding:11px 10px;
}
/* Auf Web etwas mehr Platz: das Dropdown war so schmal, dass "Warenkorb
   anzeigen" zweizeilig umbrach und dadurch optisch unruhig/verrutscht
   wirkte. Mobil bewusst unverändert gelassen. */
@media (min-width:781px){
  .widget_shopping_cart_content{
    width:340px;
  }
}
/* ---------- Fix: Dropdown-Box selbst (nicht nur der Inhalt) fest
   positionieren. Bisher hing die Positionierung/Breite komplett vom
   umgebenden <li> im Hauptmenü ab - das kann je nach Fensterbreite,
   Bildschirmauflösung oder Zoomstufe deutlich schmaler sein als die
   340px des Inhalts (auf dem PC eines Geschäftspartners beobachtet:
   Box wirkte "verbuggt", mit weißem Leerraum daneben). Mit einer
   eigenen, festen rechtsbündigen Positionierung ist die Box davon
   unabhängig; max-width als Sicherheitsnetz gegen sehr schmale
   Fenster, damit sie nie über den Bildschirmrand hinausragt. */
@media (min-width:781px){
  /* WICHTIG: Nur im Hover/Focus-Zustand überschreiben (spiegelt Theme-eigenen
     Selektor .site-header-cart:hover .widget_shopping_cart / .focus). Der
     Standardzustand des Themes hält das Dropdown per left:-999em unsichtbar
     außerhalb des Bildschirms (trotz display:block!) und zeigt es erst bei
     :hover durch left:0. Ein unconditional left:auto !important hier hätte
     dieses Verstecken permanent aufgehoben -> Dropdown wäre immer sichtbar. */
  .site-header-cart:hover .widget_shopping_cart,
  .site-header-cart.focus .widget_shopping_cart{
    position:absolute !important;
    top:100% !important;
    right:0 !important;
    left:auto !important;
    width:340px !important;
    max-width:calc(100vw - 24px) !important;
  }
  .widget_shopping_cart_content{
    width:100% !important;
    max-width:calc(100vw - 24px) !important;
    box-sizing:border-box;
  }
}

/* ---------- Kontakt-CTA über dem Footer (sitewide, jede Shop-Seite) ----------
   Der Shop selbst hat kein eigenes Kontaktformular; verlinkt stattdessen auf
   das neue "Schreib uns"-Formular der Landingpage. Wird per JS (siehe
   shop-qty-stepper.js) direkt vor <footer class="site-footer"> eingefügt,
   erscheint dadurch auf jeder Shop-Seite. Optik analog zum CTA-Banner auf der
   Landingpage kurz vor deren eigenem Kontaktbereich. */
.aromaneo-contact-cta{
  background:var(--beige);
  padding:64px 32px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.aromaneo-contact-cta-inner{
  max-width:540px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

/* ---------- Maskottchen im Hintergrund des Kontakt-Banners ----------
   Fragender Cartoon-Charakter mit kleiner Standup-Pouch-Verpackung in der
   Hand, dezent hinter dem Text platziert (pointer-events:none, damit Klicks
   auf Button/Text nicht blockiert werden). Sanftes Auf-und-Ab plus
   pulsierende Sprechblase sorgen für etwas Leben im Banner. Erscheint auf
   jeder Shop-Seite (siehe shop-qty-stepper.js) in allen Breiten - Größe/
   Deckkraft wird je nach Platz neben dem zentrierten Text angepasst. */
.aromaneo-contact-cta-mascot{
  position:absolute;
  right:4%;
  bottom:0;
  width:170px;
  pointer-events:none;
  z-index:0;
  --mascot-walk-dist:140px;
}
.aromaneo-contact-cta-mascot svg{display:block;width:100%;height:auto;overflow:visible;}

/* ---------- Schwebe-Gag: bleibt an Ort und Stelle stehen und schwebt nur
   sanft auf und ab - kein Lauf mehr nach links/rechts. */
.mascot-runner{
  transform-box:fill-box;
  transform-origin:center;
  animation:aromaneoMascotFloat 3.2s ease-in-out infinite;
}
@keyframes aromaneoMascotFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
.mascot-bubble{
  transform-box:fill-box;
  transform-origin:center;
  animation:aromaneoMascotBubble 2.6s ease-in-out infinite;
}
@keyframes aromaneoMascotBubble{
  0%,50%,100%{transform:scale(1);opacity:1;}
  25%{transform:scale(1.12);opacity:.85;}
}
.mascot-shadow{fill:rgba(47,61,40,.15);}
.mascot-body,.mascot-head,.mascot-hand{fill:var(--beige-deep);}
.mascot-arm-left,.mascot-arm-right{fill:none;stroke:var(--beige-deep);stroke-width:13;stroke-linecap:round;}
.mascot-brow{fill:none;stroke:var(--dark-green);stroke-width:3;stroke-linecap:round;}
.mascot-eye,.mascot-mouth,.mascot-pouch-leaf{fill:var(--dark-green);}
.mascot-mouth-grin{fill:none;stroke:var(--dark-green);stroke-width:4;stroke-linecap:round;}
.mascot-pouch-body{fill:var(--cream);stroke:var(--dark-green);stroke-width:2.5;}
.mascot-pouch-seal{fill:var(--dark-green);opacity:.85;}
.mascot-bubble-main,.mascot-bubble-dot{fill:var(--cream);stroke:var(--dark-green);stroke-width:2.2;}
.mascot-bubble-mark{font-family:'Playfair Display',serif;font-weight:700;font-size:20px;fill:var(--dark-green);}
@media (min-width:781px) and (max-width:1020px){
  .aromaneo-contact-cta-mascot{width:118px;opacity:.55;--mascot-walk-dist:70px;}
}
.aromaneo-contact-cta h2{
  font-family:'Playfair Display',serif;
  font-weight:600;
  color:var(--dark-green);
  font-size:clamp(22px,3.5vw,30px);
  margin:0 0 12px;
}
.aromaneo-contact-cta p{
  font-family:'Jost',sans-serif;
  color:#5c5c50;
  font-size:14.5px;
  line-height:1.6;
  margin:0 0 26px;
}
.aromaneo-contact-cta-btn{
  display:inline-block;
  background:var(--dark-green);
  color:var(--cream) !important;
  border-radius:var(--radius);
  padding:14px 32px;
  font-family:'Jost',sans-serif;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:background .2s ease, transform .2s ease;
}
.aromaneo-contact-cta-btn:hover{
  background:var(--beige-deep);
  color:var(--cream) !important;
  transform:translateY(-2px);
}
@media (max-width:780px){
  .aromaneo-contact-cta{
    padding:46px 24px;
  }
  .aromaneo-contact-cta p{
    font-size:14px;
  }
  .aromaneo-contact-cta-mascot{
    width:100px;
    right:2%;
    bottom:-4px;
    opacity:.6;
    --mascot-walk-dist:45px;
  }
}

/* ---------- Shop-Footer: eigenständig gestaltet statt WooCommerce-
   Standard (Mobil UND Desktop). Dunkelgrüner Hintergrund (statt des
   Haupt-Beige) mit drei sanft schwebenden Griechenland-Motiven
   (Olivenzweig, Sonne/Ägäis, Kräuterblatt) als dezentes Wasserzeichen im
   Hintergrund - gleiche Optik/Technik wie die fallenden Blätter im
   Ankündigungsbanner (Emoji, per Filter in helles Beige getönt). ---------- */
.site-footer{
  position:relative;
  overflow:hidden;
  /* aromaneo: gleiche Footer-Bilddarstellung wie auf der Landingpage
     (footer-illustration-eleftherochori.png mit demselben Overlay und
     text-shadow) - optische Konsistenz zwischen Shop und Landingpage. */
  background:
    linear-gradient(180deg, rgba(43,53,36,.35), rgba(43,53,36,.42)),
    url('https://aromaneo.com/footer-illustration.jpg') center bottom/cover no-repeat !important;
  color:var(--cream);
  /* aromaneo: Vertikales Padding mit vw-Anteil, analog zur Landingpage -
     bei fester Footer-Hoehe wird das Hintergrundbild (background-size:
     cover) auf breiten Bildschirmen zunehmend vertikal beschnitten (man
     sieht dann kaum noch Landschaft, nur die naechstgelegenen
     Pflanzenreihen). Die vw-Komponente laesst den Footer mit der Breite
     mitwachsen, damit der Bildausschnitt konsistent bleibt. */
  padding-top:clamp(60px, 10vw, 200px) !important;
  padding-bottom:clamp(30px, 5vw, 100px) !important;
  text-shadow:0 1px 4px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6);
  isolation:isolate;
}
.site-footer .col-full{
  position:relative;
  z-index:1;
}
/* Drei Wasserzeichen-Motive, an drei verschiedene, stets vorhandene
   Footer-Elemente gehängt (::before/::after geben pro Element nur je
   einen Slot), dadurch unabhängig positionierbar über die ganze
   Footer-Fläche verteilt. pointer-events:none, damit sie nie Klicks auf
   die echten Links darunter blockieren. */
.site-footer::before,
.site-footer::after,
.site-footer .footer-widgets::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  line-height:1;
  filter:grayscale(1) brightness(1.9) sepia(.35);
  opacity:.16;
}
.site-footer::before{
  content:"";
  left:-18px;
  top:-10px;
  font-size:120px;
  transform:rotate(-18deg);
  animation:aromaneoFooterFloat1 9s ease-in-out infinite;
}
.site-footer::after{
  content:"";
  right:-14px;
  top:8px;
  font-size:96px;
  animation:aromaneoFooterFloat2 11s ease-in-out infinite;
}
.site-footer .footer-widgets::before{
  content:"";
  left:50%;
  bottom:-40px;
  font-size:130px;
  transform:translateX(-50%) rotate(8deg);
  animation:aromaneoFooterFloat3 10s ease-in-out infinite;
}
@keyframes aromaneoFooterFloat1{
  0%,100%{transform:rotate(-18deg) translateY(0);}
  50%{transform:rotate(-14deg) translateY(-10px);}
}
@keyframes aromaneoFooterFloat2{
  0%,100%{transform:rotate(0deg) translateY(0);}
  50%{transform:rotate(6deg) translateY(8px);}
}
@keyframes aromaneoFooterFloat3{
  0%,100%{transform:translateX(-50%) rotate(8deg) translateY(0);}
  50%{transform:translateX(-50%) rotate(4deg) translateY(-8px);}
}
@media (prefers-reduced-motion:reduce){
  .site-footer::before,
  .site-footer::after,
  .site-footer .footer-widgets::before{
    animation:none;
  }
}

/* Rechtliche Links (Versand/Impressum/Widerruf/Datenschutz): vom Theme
   als WordPress-Menü im Footer-Widget-Bereich gerendert, hier auf
   Cream/Beige vor dem dunkelgrünen Hintergrund umgefärbt und im
   Markenstil (Jost, Großbuchstaben, Punkt-Trenner) ausgerichtet. */
.site-footer .footer-widgets{
  padding:34px 0 18px;
}
.site-footer .menu-footer-container ul.menu{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  list-style:none;
  gap:8px 22px;
  margin:0;
  padding:0;
}
.site-footer .menu-footer-container ul.menu li{
  float:none;
  width:auto;
}
.site-footer .menu-footer-container ul.menu li a{
  color:var(--cream);
  font-family:'Jost',sans-serif;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.85;
  transition:opacity .2s ease, color .2s ease;
}
.site-footer .menu-footer-container ul.menu li a:hover{
  opacity:1;
  color:var(--beige);
}

/* Dezenter Instagram-Link im Footer, per JS eingefügt (siehe
   shop-qty-stepper.js) - gleiche Pill-Optik wie der "Folge uns"-Link im
   Landingpage-Footer, nur auf den dunkelgrünen Shop-Footer abgestimmt. */
.site-footer .shop-footer-instagram{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  padding:14px 20px 0;
}
.site-footer .shop-footer-instagram a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:'Jost',sans-serif;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:.85;
  border:1px solid rgba(240,230,210,.3);
  border-radius:30px;
  padding:8px 16px 8px 10px;
  transition:opacity .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
}
.site-footer .shop-footer-instagram svg{width:16px;height:16px;flex-shrink:0;}
.site-footer .shop-footer-instagram a:hover{
  opacity:1;
  border-color:rgba(240,230,210,.6);
  background:rgba(240,230,210,.06);
  transform:translateY(-2px);
}

/* "© 2026 [Datenschutzerklärung-Link] . Erstellt mit WooCommerce."
   ersetzen durch reines aromaneo-Branding. Die drei ursprünglichen
   Bestandteile (doppelter Datenschutz-Link, Trenner, WooCommerce-Link)
   werden ausgeblendet; die restlichen freien Textknoten ("© 2026" / ".")
   lassen sich nicht einzeln ansprechen, deshalb wird der gesamte
   sichtbare Text über font-size:0 kollabiert und per ::after komplett
   neu aufgebaut. */
.site-footer .site-info .privacy-policy-link,
.site-footer .site-info span[role="separator"],
.site-footer .site-info a[href*="woocommerce.com"]{
  display:none;
}
.site-footer .site-info{
  position:relative;
  z-index:1;
  font-size:0;
  text-align:center;
  padding:18px 20px 28px;
  border-top:1px solid rgba(238,228,206,.15);
}
.site-footer .site-info::after{
  content:"© 2026 aromaneo · Ioannidis & Ioannidis GbR";
  display:inline-block;
  font-family:'Jost',sans-serif;
  font-size:12px;
  letter-spacing:.04em;
  color:rgba(238,228,206,.7);
}

@media (max-width:780px){
  .site-footer::before{
    font-size:78px;
    left:-14px;
    top:-6px;
  }
  .site-footer::after{
    font-size:66px;
    right:-10px;
    top:2px;
  }
  .site-footer .footer-widgets::before{
    font-size:88px;
    bottom:-26px;
  }
  .site-footer .footer-widgets{
    padding:28px 0 14px;
  }
  .site-footer .menu-footer-container ul.menu{
    flex-direction:column;
    gap:14px;
    text-align:center;
  }
  .site-footer .site-info{
    padding:14px 20px 90px;
  }
}

/* ===========================================================
   Warenkorb & Kasse (WooCommerce Blocks) ans übrige Shop-Design
   angleichen. Diese beiden Seiten laufen technisch nicht über die
   klassischen WooCommerce-Templates, sondern über die WC-Blocks
   (wp-block-woocommerce-cart / -checkout) mit eigenen Klassen, die
   von den .button/.quantity-Regeln weiter oben nicht erfasst werden
   - bisher liefen sie daher komplett unstyled im Storefront-Default
   (dunkler Textlink-Button, nackte Eingabefelder). Hier gezielt
   nachgezogen: gleiche Farben (dunkelgrün/creme/beige), gleiche
   Schrift (Jost), gleicher Button-/Eingabefeld-Stil wie im Rest des
   Shops. =========================================================== */

/* "Weiter zur Kasse", "Bestellung aufgeben", "Anwenden" (Gutschein):
   alle drei teilen sich die Basisklasse .wc-block-components-button. */
.wc-block-components-button.wp-element-button{
  background:var(--dark-green) !important;
  color:var(--cream) !important;
  border-radius:var(--radius) !important;
  border:none !important;
  font-family:'Jost',sans-serif !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:13px !important;
  font-weight:600 !important;
  text-decoration:none !important;
  transition:background .2s ease, transform .2s ease;
  box-shadow:none !important;
}
.wc-block-components-button.wp-element-button:hover{
  background:var(--beige-deep) !important;
  color:var(--cream) !important;
  transform:translateY(-1px);
}
.wc-block-components-button.wp-element-button:disabled{
  background:rgba(47,61,40,.35) !important;
  color:var(--cream) !important;
}

/* Mengen-Stepper im Warenkorb: gleicher Look wie Produktseite/-raster */
.wc-block-components-quantity-selector{
  border:1.5px solid var(--dark-green) !important;
  border-radius:var(--radius) !important;
  overflow:hidden;
  height:44px;
}
.wc-block-components-quantity-selector__input{
  font-family:'Jost',sans-serif !important;
  color:var(--ink) !important;
  background:transparent !important;
}
.wc-block-components-quantity-selector__button{
  background:var(--cream) !important;
  color:var(--dark-green) !important;
  transition:background .2s ease;
}
.wc-block-components-quantity-selector__button:hover{
  background:var(--beige) !important;
}
.wc-block-components-quantity-selector__button:active{
  background:var(--beige-deep) !important;
  color:var(--cream) !important;
}

/* Produktname + Entfernen-Link im Warenkorb */
.wc-block-components-product-name{
  color:var(--dark-green) !important;
  font-weight:500;
}
.wc-block-cart-item__remove-link{
  font-family:'Jost',sans-serif !important;
  color:var(--beige-deep) !important;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.05em;
}

/* Eingabefelder auf der Kasse: Kontaktinformationen, Adresse, etc. */
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-totals-coupon input[type="text"]{
  font-family:'Jost',sans-serif !important;
  border:1.5px solid rgba(47,61,40,.35) !important;
  border-radius:var(--radius) !important;
  background:var(--cream) !important;
  color:var(--ink) !important;
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.wc-block-components-totals-coupon input[type="text"]:focus{
  border-color:var(--dark-green) !important;
  box-shadow:0 0 0 1px var(--dark-green) !important;
  outline:none !important;
}
.wc-block-components-text-input label{
  font-family:'Jost',sans-serif;
  color:var(--ink);
}

/* Checkbox ("Rechnungsadresse entspricht der Lieferadresse" etc.) */
.wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark{
  color:var(--dark-green);
}
.wc-block-components-checkbox svg{
  fill:var(--dark-green);
}

/* Radio-Auswahl: Versandart, Zahlungsart */
.wc-block-components-radio-control__option{
  border:1.5px solid rgba(47,61,40,.25) !important;
  border-radius:var(--radius) !important;
  background:var(--cream) !important;
  font-family:'Jost',sans-serif;
}
.wc-block-components-radio-control__option-checked{
  border-color:var(--dark-green) !important;
  background:var(--beige) !important;
}
.wc-block-components-radio-control__input:checked{
  color:var(--dark-green) !important;
  border-color:var(--dark-green) !important;
}

/* Gutschein-Aufklapper ("Gutscheine hinzufügen") */
.wc-block-components-panel__button{
  font-family:'Jost',sans-serif;
  color:var(--dark-green);
}

/* Bestellübersicht: Zwischensumme/Versand/Gesamt */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value{
  font-family:'Jost',sans-serif;
  color:var(--ink);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  color:var(--dark-green);
  font-weight:600;
}


/* ========================================================================
   aromaneo Shop - Warenkorb Slide-in Drawer (ersetzt die Navigation zur
   /warenkorb/-Seite beim Klick auf das Warenkorb-Icon). HTML/JS-Logik im
   WPCode-Snippet "aromaneo - Warenkorb Slide-in Drawer". Header/Navigation
   bleiben beim Einschub sichtbar (top-Offset via --aromaneo-cart-drawer-top,
   von JS je nach Header-/Banner-Hoehe gesetzt).
   ======================================================================== */
.aromaneo-cart-overlay{
  position:fixed;
  top:var(--aromaneo-cart-drawer-top, 140px);
  left:0;right:0;bottom:0;
  background:rgba(42,42,36,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:190;
}
.aromaneo-cart-overlay.show{opacity:1;pointer-events:auto;}

.aromaneo-cart-drawer{
  position:fixed;
  top:var(--aromaneo-cart-drawer-top, 140px);
  right:0;
  bottom:0;
  width:min(420px, 100vw);
  background:var(--cream);
  box-shadow:-8px 0 30px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.32,.72,.35,1);
  z-index:195;
  display:flex;
  flex-direction:column;
  font-family:'Jost',sans-serif;
  color:var(--ink);
}
.aromaneo-cart-drawer.show{transform:translateX(0);}

.aromaneo-cart-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--beige);
  flex-shrink:0;
}
.aromaneo-cart-drawer-head h2{
  font-family:'Playfair Display',serif;
  font-size:22px;
  font-weight:600;
  margin:0;
  color:var(--dark-green);
}
.aromaneo-cart-drawer-close{
  background:none;border:none;
  font-size:26px;line-height:1;
  color:var(--dark-green);
  cursor:pointer;
  /* aromaneo: groesserer Tap-Bereich (min. 44x44px) fuer bessere
     Erkennbarkeit/Bedienbarkeit auf Mobil, gleiche Optik wie vorher. */
  padding:10px 12px;
  min-width:44px;
  min-height:44px;
  border-radius:50%;
  transition:background-color .15s ease;
}
.aromaneo-cart-drawer-close:hover,
.aromaneo-cart-drawer-close:focus-visible{
  background:rgba(43,53,36,.08);
}
.aromaneo-cart-drawer-close:hover{opacity:.7;}

.aromaneo-cart-drawer-shipping{
  padding:14px 22px;
  border-bottom:1px solid var(--beige);
  flex-shrink:0;
}
.aromaneo-cart-drawer-shipping:empty{display:none;}
.aromaneo-cart-drawer-shipping p{
  margin:0 0 8px;
  font-size:13.5px;
  color:var(--ink);
}
.aromaneo-cart-drawer-shipping p.is-unlocked{
  font-weight:600;
  color:var(--dark-green);
}
.aromaneo-cart-drawer-progress{
  height:6px;
  border-radius:6px;
  background:var(--beige);
  overflow:hidden;
}
.aromaneo-cart-drawer-progress-bar{
  height:100%;
  background:var(--dark-green);
  border-radius:6px;
  transition:width .4s ease;
}

.aromaneo-cart-drawer-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:6px 22px;
}

.aromaneo-cart-drawer-item{
  display:flex;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid rgba(143,109,63,.18);
}
.aromaneo-cart-drawer-item img{
  width:64px;height:64px;
  object-fit:cover;
  border-radius:var(--radius);
  flex-shrink:0;
  background:var(--shop-bg);
}
.aromaneo-cart-drawer-item-info{
  flex:1 1 auto;
  min-width:0;
}
.aromaneo-cart-drawer-item-name{
  margin:0 0 8px;
  font-size:14px;
  font-weight:500;
  line-height:1.3;
  color:var(--ink);
}
.aromaneo-cart-drawer-item-qty{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--beige);
  border-radius:var(--radius);
  overflow:hidden;
}
.aromaneo-cart-drawer-item-qty .qty-step{
  width:28px;
  height:28px;
  font-size:15px;
}
.aromaneo-cart-drawer-item-qty-val{
  display:inline-block;
  min-width:26px;
  text-align:center;
  font-size:13px;
  font-weight:600;
}
.aromaneo-cart-drawer-item-side{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
}
.aromaneo-cart-drawer-item-price{
  font-weight:600;
  font-size:14px;
  color:var(--dark-green);
  white-space:nowrap;
}
.aromaneo-cart-drawer-item-remove{
  background:none;
  border:none;
  padding:0;
  font-size:12px;
  color:var(--beige-deep);
  text-decoration:underline;
  cursor:pointer;
}
.aromaneo-cart-drawer-item-remove:hover{color:var(--beige-darkest);}

.aromaneo-cart-drawer-empty{
  padding:40px 4px;
  text-align:center;
}
.aromaneo-cart-drawer-empty p{
  margin:0 0 16px;
  color:var(--ink);
}
.aromaneo-cart-drawer-shop-link{
  display:inline-block;
  padding:11px 24px;
  background:var(--dark-green);
  color:var(--cream);
  border-radius:var(--radius);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
}
.aromaneo-cart-drawer-shop-link:hover{opacity:.9;}

.aromaneo-cart-drawer-footer{
  flex-shrink:0;
  padding:16px 22px 20px;
  border-top:1px solid var(--beige);
  background:var(--cream);
}
.aromaneo-cart-drawer-subtotal{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:12px;
  font-size:14px;
}
.aromaneo-cart-drawer-subtotal strong{
  font-size:18px;
  color:var(--dark-green);
}
.aromaneo-cart-drawer-checkout-btn{
  display:block;
  text-align:center;
  padding:13px;
  background:var(--dark-green);
  color:var(--cream) !important;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  letter-spacing:.02em;
}
.aromaneo-cart-drawer-checkout-btn:hover{opacity:.92;}
.aromaneo-cart-drawer-view-link{
  display:block;
  text-align:center;
  margin-top:10px;
  font-size:12.5px;
  color:var(--beige-deep);
  text-decoration:underline;
}
.aromaneo-cart-drawer-view-link:hover{color:var(--beige-darkest);}

body.aromaneo-cart-drawer-open{overflow:hidden;}

@media (max-width:480px){
  .aromaneo-cart-drawer{width:100vw;}
}


/* Natives Storefront Hover-Mini-Cart-Popup (.widget_shopping_cart) komplett
   deaktiviert - wird jetzt vollstaendig durch den Slide-in Warenkorb-Drawer
   ersetzt, sonst ueberlagern sich beide Panels beim Hover/Klick auf das
   Warenkorb-Icon. */
.site-header-cart .widget_shopping_cart{
  display:none !important;
}

/* aromaneo - Cart Bookmark Tab (Mobil, ersetzt FAB) */
.aromaneo-cart-bookmark{
  position:fixed;
  right:0;
  top:calc(var(--aromaneo-cart-drawer-top, 140px) + 14px);
  z-index:210;
  display:none;
  align-items:center;
  gap:6px;
  background:var(--dark-green);
  color:var(--cream);
  padding:12px 10px 12px 14px;
  border-radius:14px 0 0 14px;
  box-shadow:-4px 4px 16px rgba(0,0,0,.25);
  border:none;
  cursor:pointer;
}
.aromaneo-cart-bookmark.has-items{
  display:flex;
}
/* aromaneo: eigenes Gewuerzbeutel-Icon (warenkorbneu.ai) - schwarze
   Zeichnung, deshalb auf einem kleinen hellen Kreis-Chip platziert
   (sonst kaum Kontrast auf dem dunkelgruenen Hintergrund). */
.aromaneo-cart-bookmark-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.aromaneo-cart-bookmark-icon img{
  width:30px;
  height:auto;
  display:block;
}
.aromaneo-cart-bookmark-count{
  background:var(--cream);
  color:var(--dark-green);
  font-size:11px;
  font-weight:700;
  min-width:18px;
  height:18px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
}
@media (min-width:781px){
  .aromaneo-cart-bookmark{ display:none !important; }
}
@media (max-width:780px){
  .aromaneo-cart-fab{ display:none !important; }
}
@media (max-width:780px){
  .site-header-cart{ display:none !important; }
}


/* aromaneo: Altes Versand-Toast (#aromaneoShippingToast) komplett
   ausgeblendet, auf allen Breakpoints - der Warenkorb-Drawer zeigt den
   Versand-Hinweis bereits selbst an (Desktop + Mobil einheitlich), das
   alte Popup soll nirgends mehr zusaetzlich erscheinen. */
#aromaneoShippingToast{ display:none !important; }


/* aromaneo: Preis-Anzeige im Header-Menü neben dem Warenkorb-Icon
   ausgeblendet (Artikelanzahl bleibt sichtbar), Wunsch war nur den
   Betrag dort nicht mehr anzuzeigen. */
.site-header-cart .cart-contents .woocommerce-Price-amount{
  display:none !important;
}