/* grow2gether — NOVAChild · Fable Screen 1 (design/fable/01-home) · JTL-dynamisch */

/* Self-hosted variable font — kein render-blocking Google-Fonts-@import
 * font-display:optional → kein CLS-Swap auf Desktop (PSI misst kalt ohne Cache) */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette Fable Screen 1 — warm, kein A3-Steingrau. Hex NUR hier. */
  --g2g-hell: #faf6eb;           /* Papier */
  --g2g-stein: #c4b07a;          /* warmer Sand — Rahmen, nicht Steingrau */
  --g2g-dark-mid: #4a4035;       /* Fable muted */
  --g2g-btn: #8a6806;            /* warmes Dunkelbraun — Primary, nie Gold-Fläche */
  --g2g-dark: #3d2f0a;           /* Überschriften */
  --g2g-text: #1a1508;           /* Ink */
  --g2g-gold: #c89a09;           /* Logo, 1px Linie, Hover — nie Fläche+Weiß, nie Primary */
  /* NOVA Critical CSS setzt --primary:#F8BF00 (Gold). Primary-Fläche = Braun. */
  --primary: var(--g2g-btn);
  --g2g-success: #3a4e3c;
  --g2g-soldout: #6b665c;
  --g2g-white: #ffffff;          /* Karten */
  --g2g-danger: #6b3a36;

  --g2g-text-muted: var(--g2g-dark-mid);
  --g2g-hell-border: #e8dfc8;
  --g2g-success-bg: color-mix(in srgb, var(--g2g-success) 14%, var(--g2g-white));
  --g2g-success-border: color-mix(in srgb, var(--g2g-success) 32%, var(--g2g-hell));
  --g2g-danger-bg: color-mix(in srgb, var(--g2g-danger) 12%, var(--g2g-white));
  --g2g-danger-border: color-mix(in srgb, var(--g2g-danger) 28%, var(--g2g-hell));
  --g2g-warning-bg: color-mix(in srgb, var(--g2g-gold) 14%, var(--g2g-white));
  --g2g-warning-border: color-mix(in srgb, var(--g2g-gold) 38%, var(--g2g-hell));
  --g2g-ribbon-ok: color-mix(in srgb, var(--g2g-success) 16%, var(--g2g-white));
  --g2g-ribbon-out: color-mix(in srgb, var(--g2g-soldout) 18%, var(--g2g-white));

  --g2g-gold-soft: color-mix(in srgb, var(--g2g-gold) 12%, transparent);
  --g2g-gold-soft-strong: color-mix(in srgb, var(--g2g-gold) 25%, transparent);
  --g2g-gold-wash: color-mix(in srgb, var(--g2g-gold) 8%, transparent);
  /* Hero v6: dunkles Overlay ~40 % auf dem Foto (Lesbarkeit Headline) */
  --g2g-hero-overlay: color-mix(in srgb, var(--g2g-dark) 42%, transparent);
  --g2g-hero-overlay-strong: color-mix(in srgb, var(--g2g-dark) 62%, transparent);

  --g2g-radius: 8px;
  --g2g-shadow: 0 8px 24px color-mix(in srgb, var(--g2g-text) 6%, transparent);
  --g2g-shadow-sm: 0 1px 4px color-mix(in srgb, var(--g2g-text) 8%, transparent);
  --g2g-shadow-md: 0 2px 6px color-mix(in srgb, var(--g2g-text) 8%, transparent);
  --g2g-shadow-lg: 0 12px 32px color-mix(in srgb, var(--g2g-text) 14%, transparent);
  --g2g-shadow-xl: 0 24px 48px color-mix(in srgb, var(--g2g-text) 16%, transparent),
    0 6px 16px color-mix(in srgb, var(--g2g-text) 6%, transparent);
  --g2g-shadow-header: 0 4px 18px color-mix(in srgb, var(--g2g-text) 6%, transparent);
  --g2g-shadow-mega: 0 22px 48px color-mix(in srgb, var(--g2g-text) 10%, transparent);
  --g2g-focus-ring: 0 0 0 3px var(--g2g-gold-soft);
  --g2g-focus-ring-strong: 0 0 0 0.2rem var(--g2g-gold-soft-strong);

  /* Content-Breite wie Indras Planet (container--xl), nicht Viewport-Kante */
  --g2g-page-pad: 1rem;          /* 16px Mobile */
  --g2g-content-max: 1680px;     /* Indras Header/Main */

  /* Platzhalter-/Bildflächen (bis echte Fotos da sind) */
  --g2g-media-grad: linear-gradient(
    150deg,
    var(--g2g-hell) 0%,
    color-mix(in srgb, var(--g2g-stein) 22%, var(--g2g-hell)) 100%
  );

  /* Gebrandeter "kein Bild"-Platzhalter (Ioannis 04.09.2026): feines
     Hanfblatt-Linienmotiv in Sand (#c4b07a — einzige Ausnahme: Farbe muss
     als Literal in die Data-URI, gehört aber zu :root) + Signet mittig.
     Genutzt in PLP/Slider (.productbox-image) und PDP-Galerie. */
  --g2g-nopic-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%23c4b07a' stroke-opacity='.20' stroke-width='1.3' transform='translate(64,72)'%3E%3Cpath d='M0,0 Q-4,-18 0,-40 Q4,-18 0,0'/%3E%3Cpath d='M0,0 Q-4,-16 0,-34 Q4,-16 0,0' transform='rotate(28)'/%3E%3Cpath d='M0,0 Q-4,-16 0,-34 Q4,-16 0,0' transform='rotate(-28)'/%3E%3Cpath d='M0,0 Q-3,-13 0,-27 Q3,-13 0,0' transform='rotate(56)'/%3E%3Cpath d='M0,0 Q-3,-13 0,-27 Q3,-13 0,0' transform='rotate(-56)'/%3E%3Cpath d='M0,0 Q-2,-10 0,-20 Q2,-10 0,0' transform='rotate(82)'/%3E%3Cpath d='M0,0 Q-2,-10 0,-20 Q2,-10 0,0' transform='rotate(-82)'/%3E%3Cpath d='M0,0 L0,13'/%3E%3C/g%3E%3C/svg%3E");
  --g2g-nopic-signet: url("/templates/NOVAChild/themes/my-nova/img/logo-signet.png");
}

/* === Basis === */
/* NOVA Critical/CSS setzt Open Sans + Montserrat → überschreiben, sonst Desktop-CLS ~0.5 beim Font-Swap */
body {
  background-color: var(--g2g-hell);
  color: var(--g2g-text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

button,
input,
select,
textarea {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

p, li, td, th, label, .card-text, .productbox-title {
  color: var(--g2g-text);
}

.text-muted, small, .text-secondary {
  color: var(--g2g-text-muted) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hr-sect,
.sidepanel-left .box-normal .box-normal-link,
.productlist-filter-headline,
header .submenu-headline-toplevel,
.box-normal .box-normal-link {
  color: var(--g2g-text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Logo-Slot: reservierte Box — Wortmarke größer, Signet liegt absolut drin (kein CLS) */
header .navbar-brand {
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible;
  background: transparent;
  height: 4rem;
  min-height: 4rem;
  min-width: 16.5rem;
  margin-right: 0.75rem;
  padding-top: 0;
  padding-bottom: 0;
}

header .navbar-brand img#shop-logo,
header .navbar-brand .g2g-logo-wordmark {
  position: relative;
  z-index: 1;
  height: 3.5rem;
  width: auto;
  max-width: none;
  aspect-ratio: 440 / 100;
  object-fit: contain;
  object-position: left center;
  background: transparent !important;
  opacity: 1;
  transform: scale(1);
  transform-origin: left center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

header .navbar-brand .g2g-logo-signet {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94);
  transform-origin: left center;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

#jtl-nav-wrapper.g2g-header-compact .navbar-brand img#shop-logo,
#jtl-nav-wrapper.g2g-header-compact .navbar-brand .g2g-logo-wordmark {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

#jtl-nav-wrapper.g2g-header-compact .navbar-brand .g2g-logo-signet {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.45s ease 0.06s, transform 0.45s ease 0.06s;
}

#jtl-nav-wrapper.g2g-header-compact {
  box-shadow: var(--g2g-shadow-header);
}

@media (max-width: 991.98px) {
  header .navbar-brand {
    height: 3rem;
    min-height: 48px;
    min-width: 11.5rem;
  }

  header .navbar-brand img#shop-logo,
  header .navbar-brand .g2g-logo-wordmark {
    height: 2.625rem;
  }

  header .navbar-brand .g2g-logo-signet {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  header .navbar-brand img#shop-logo,
  header .navbar-brand .g2g-logo-wordmark,
  header .navbar-brand .g2g-logo-signet {
    transition: none;
  }
}

/* Nav-Scrollbar-Pfeile: JS hängt sie nach dem Paint ein — absolut = kein Flex-CLS */
@media (min-width: 992px) {
  header .nav-scrollbar {
    position: relative;
  }

  header .nav-scrollbar-arrow {
    position: absolute !important;
    top: 0;
    bottom: 0;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
  }

  header .nav-scrollbar-arrow.left {
    left: 0;
  }

  header .nav-scrollbar-arrow.right {
    right: 0;
  }

  header .navbar-collapse {
    min-height: 4rem;
  }
}

/* === Topbar (News/Kontakt) — hell === */
#header-top-bar {
  background-color: var(--g2g-hell) !important;
  border-bottom: 1px solid var(--g2g-hell-border);
  font-size: 0.8125rem;
}

#header-top-bar,
#header-top-bar a,
#header-top-bar .dropdown-toggle {
  color: var(--g2g-text-muted) !important;
}

#header-top-bar a:hover {
  color: var(--g2g-btn) !important;
}

.topbar-wrapper {
  background-color: var(--g2g-hell);
  color: var(--g2g-text-muted);
}

/* === Header — weiß, sticky === */
.navbar-main,
header nav.navbar-main,
.navbar-main.bg-primary {
  background-color: var(--g2g-white) !important;
  border-bottom: 1px solid var(--g2g-hell-border);
  box-shadow: none;
}

/* Desktop: Logo + Suche + Icons vertikal mittig
   (schlägt NOVA/Bootstrap .align-items-lg-end) */
@media (min-width: 992px) {
  #jtl-nav-wrapper .navbar.navbar-expand-lg,
  #jtl-nav-wrapper .navbar.align-items-lg-end,
  header#jtl-nav-wrapper .navbar {
    align-items: center !important;
    min-height: 3.4rem;
    padding-top: 0.38rem !important;
    padding-bottom: 0.6rem !important;
  }

  #jtl-nav-wrapper #shop-nav.nav-icons {
    align-self: center !important;
    margin-top: -0.17rem;
  }

  #jtl-nav-wrapper #shop-nav #search,
  #jtl-nav-wrapper #shop-nav .search-wrapper,
  #jtl-nav-wrapper #shop-nav #search .input-group {
    display: flex;
    align-items: center;
  }
}

#jtl-nav-wrapper {
  background-color: var(--g2g-white);
}

.navbar-main .nav-link,
.navbar-main .navbar-brand,
.navbar-main .nav-link .fa,
.navbar-main .navbar-toggler-icon,
.navbar-main .account-icon-dropdown,
.navbar-main .cart-icon-dropdown {
  color: var(--g2g-text) !important;
}

.navbar-main .nav-link:hover,
.navbar-main .nav-link:focus,
.navbar-main .navbar-brand:hover {
  color: var(--g2g-btn) !important;
}

/* Header-Actions (Konto / Wunschzettel / Warenkorb) — Fable Ghost-Buttons */
#shop-nav.nav-icons {
  align-items: center;
  gap: 4px;
}

#shop-nav.nav-icons > .nav-item > .nav-link,
#shop-nav.nav-icons .account-icon-dropdown > .nav-link,
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem 0.55rem !important;
  border-radius: var(--g2g-radius);
  color: var(--g2g-text) !important;
  background: transparent !important;
  transition: color 0.15s, background 0.15s;
}

#shop-nav.nav-icons > .nav-item > .nav-link .fas,
#shop-nav.nav-icons > .nav-item > .nav-link .fa,
#shop-nav.nav-icons .account-icon-dropdown > .nav-link .fas,
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link .fas,
#shop-nav.nav-icons .cart-icon-dropdown-icon {
  color: var(--g2g-text) !important;
  font-size: 1.0625rem;
  transition: color 0.15s;
}

#shop-nav.nav-icons > .nav-item > .nav-link:hover,
#shop-nav.nav-icons > .nav-item > .nav-link:focus,
#shop-nav.nav-icons .account-icon-dropdown > .nav-link:hover,
#shop-nav.nav-icons .account-icon-dropdown > .nav-link:focus,
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link:hover,
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link:focus,
#shop-nav.nav-icons .show > .nav-link {
  color: var(--g2g-btn) !important;
  background: var(--g2g-hell) !important;
}

#shop-nav.nav-icons > .nav-item > .nav-link:hover .fas,
#shop-nav.nav-icons > .nav-item > .nav-link:hover .fa,
#shop-nav.nav-icons > .nav-item > .nav-link:focus .fas,
#shop-nav.nav-icons .account-icon-dropdown > .nav-link:hover .fas,
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link:hover .fas,
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link:hover .cart-icon-dropdown-icon,
#shop-nav.nav-icons .show > .nav-link .fas {
  color: var(--g2g-btn) !important;
}

/* Warenkorb-Summe neben Icon — gedämpft wie Fable-Label */
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link .cart-icon-dropdown-price,
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link .price_text,
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link .cart-icon-dropdown-price *,
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link span:not(.fa-sup):not(.badge) {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--g2g-text-muted) !important;
  white-space: nowrap;
}

#shop-nav.nav-icons .cart-icon-dropdown > .nav-link:hover .cart-icon-dropdown-price,
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link:hover .price_text,
#shop-nav.nav-icons .cart-icon-dropdown > .nav-link:hover span:not(.fa-sup):not(.badge) {
  color: var(--g2g-btn) !important;
}

/* Hauptnavigation (Megamenü-Zeile): Hover mit Gold-Linie */
#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
  font-weight: 600;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 0.15s, box-shadow 0.15s;
}

#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:focus,
#jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link {
  color: var(--g2g-btn) !important;
  box-shadow: inset 0 -2px 0 var(--g2g-gold);
}

/* ============================================================
   Header-Suche — g2g Pill-Style, Live-Dropdown, kein iOS-Zoom
   search-suggest.js liefert Produkt-Vorschläge (JTL-Typeahead = leer)
   ============================================================ */

.g2g-search-host,
.search-wrapper {
  position: relative;
}

/* Desktop (#search / .search-wrapper) + Mobile (.main-search) — gleiche Pill */
.main-search .input-group,
.search-wrapper .input-group,
#search .input-group,
.form-icon .input-group {
  align-items: stretch;
  background: var(--g2g-hell);
  border: 1.5px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.main-search .input-group:focus-within,
.search-wrapper .input-group:focus-within,
#search .input-group:focus-within,
.form-icon .input-group:focus-within {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-focus-ring);
}

.main-search .twitter-typeahead,
.search-wrapper .twitter-typeahead,
#search .twitter-typeahead {
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
}

/* Typeahead-Hint ausblenden — nur echtes Input-Feld sichtbar */
.main-search .tt-hint,
.search-wrapper .tt-hint,
#search .tt-hint {
  display: none !important;
}

/* Leeres NOVA-Typeahead-Menü verstecken (wir nutzen .g2g-search-suggest) */
.tt-menu,
.tt-menu.tt-empty {
  display: none !important;
}

.navbar-main .form-control,
#search-header,
#search-header-mobile-top,
.search-wrapper input[name="qs"],
#search input[name="qs"],
input[name="qs"] {
  background: transparent !important;
  color: var(--g2g-text) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 16px !important; /* iOS: kein Auto-Zoom unter 16px */
  min-height: 44px;
  height: 44px; /* fixe Höhe = saubere vertikale Mitte (Ioannis 15.09.2026) */
  padding: 0 0.85rem 0 0.25rem; /* Lupe sitzt links — wenig Innenabstand nötig */
  line-height: normal;
  text-align: left;
}

.navbar-main .form-control::placeholder,
#search-header::placeholder,
#search-header-mobile-top::placeholder,
.search-wrapper input[name="qs"]::placeholder,
#search input[name="qs"]::placeholder,
input[name="qs"]::placeholder {
  color: var(--g2g-text-muted);
  opacity: 0.8;
}

.navbar-main .form-control:focus,
#search-header:focus,
#search-header-mobile-top:focus,
.search-wrapper input[name="qs"]:focus,
#search input[name="qs"]:focus,
input[name="qs"]:focus {
  outline: none;
  box-shadow: none !important;
}

/* Suchfeld v2 (Ioannis 15.09.2026): weiße Pille statt Papier-Kasten,
   Lupe LINKS im Feld, Text linksbündig — ruhiger und klar als Suche
   erkennbar. Gilt für Desktop-Header und mobiles Fixfeld. */
.main-search .input-group,
.search-wrapper .input-group,
#search .input-group {
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: 999px;
  box-shadow: var(--g2g-shadow-sm);
}

.main-search .input-group .input-group-append,
.search-wrapper .input-group .input-group-append,
#search .input-group .input-group-append {
  order: -1; /* Lupe vor das Eingabefeld */
}

/* Such-Button — Fable: Icon im Feld (kein gefüllter Primary-Block) */
#search .btn.btn-secondary,
#search .input-group .btn,
.search-wrapper .input-group .btn,
.search-wrapper .btn.btn-secondary,
.main-search .input-group-append .btn,
.main-search .input-group > .btn,
.form-icon .input-group .btn,
#search-header + .input-group-append .btn,
#search-header-mobile-top + .input-group-append .btn {
  background: transparent !important;
  border: none !important;
  color: var(--g2g-text-muted) !important;
  border-radius: 0 !important;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.85rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: color 0.15s, background 0.15s;
}

#search .input-group .btn .fas,
.search-wrapper .input-group .btn .fas,
.main-search .input-group .btn .fas,
.form-icon .input-group .btn .fas {
  color: inherit !important;
  font-size: 1rem;
}

#search .input-group .btn:hover,
#search .btn.btn-secondary:hover,
.search-wrapper .input-group .btn:hover,
.search-wrapper .btn.btn-secondary:hover,
.main-search .input-group-append .btn:hover,
.main-search .input-group > .btn:hover,
.form-icon .input-group .btn:hover {
  background: transparent !important;
  color: var(--g2g-btn) !important;
}

#search .input-group .btn:focus,
.search-wrapper .input-group .btn:focus,
.main-search .input-group .btn:focus,
.form-icon .input-group .btn:focus {
  background: transparent !important;
  color: var(--g2g-btn) !important;
  box-shadow: none !important;
}

/* Live-Such-Dropdown — Breite/Position setzt JS (fixed, viewport-sicher) */
.g2g-search-suggest {
  position: fixed;
  z-index: 1100;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  box-shadow: var(--g2g-shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.g2g-search-host,
.search-wrapper,
#search,
#shop-nav,
#jtl-nav-wrapper {
  overflow: visible !important;
}

.g2g-search-suggest-grid {
  display: grid;
  grid-template-columns: minmax(10rem, 34%) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  max-height: inherit;
  overflow: hidden;
}

.g2g-search-suggest-left,
.g2g-search-suggest-right {
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
  max-height: inherit;
}

.g2g-search-suggest-left {
  border-right: 1px solid var(--g2g-hell-border);
  background: var(--g2g-white);
  padding: 0.35rem 0;
}

.g2g-search-suggest-right {
  background: var(--g2g-white);
  padding: 0.35rem 0;
  display: flex;
  flex-direction: column;
}

.g2g-search-quick {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  color: var(--g2g-text);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.g2g-search-quick:hover,
.g2g-search-quick:focus {
  background: var(--g2g-gold-wash);
  color: var(--g2g-btn);
}

.g2g-search-quick-icon::before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.15rem;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%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'%3E%3Cpath fill='black' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.g2g-search-quick-text strong,
.g2g-search-product-name strong,
.g2g-search-meta-link strong {
  color: var(--g2g-dark);
  font-weight: 800;
}

.g2g-search-section-title {
  padding: 0.65rem 0.85rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g2g-text-muted);
}

.g2g-search-meta-link {
  display: block;
  padding: 0.35rem 0.85rem;
  color: var(--g2g-text);
  text-decoration: none;
  font-size: 0.9375rem;
}

.g2g-search-meta-link:hover {
  color: var(--g2g-btn);
  background: var(--g2g-gold-wash);
}

.g2g-search-product {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  color: var(--g2g-text);
  text-decoration: none;
  border-bottom: 1px solid var(--g2g-hell-border);
  transition: background 0.1s;
}

.g2g-search-product:hover,
.g2g-search-product.is-active {
  background: var(--g2g-hell);
}

.g2g-search-product-img {
  flex: 0 0 3.25rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 6px;
  overflow: hidden;
  background: var(--g2g-media-grad);
  border: 1px solid var(--g2g-hell-border);
}

.g2g-search-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.g2g-search-product-img--empty {
  background: var(--g2g-media-grad);
}

.g2g-search-product-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.g2g-search-product-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.g2g-search-quick-text {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.g2g-search-product-price {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--g2g-btn);
}

.g2g-search-suggest-empty {
  padding: 0.75rem 0.85rem;
  color: var(--g2g-text-muted);
  font-size: 0.875rem;
}

.g2g-search-suggest-loading {
  position: relative;
}

.g2g-search-suggest-loading::after {
  content: "";
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-left: 0.4rem;
  border: 2px solid var(--g2g-hell-border);
  border-top-color: var(--g2g-btn);
  border-radius: 50%;
  vertical-align: -0.1rem;
  animation: g2g-search-spin 0.6s linear infinite;
}

@keyframes g2g-search-spin {
  to {
    transform: rotate(360deg);
  }
}

.g2g-search-suggest-all {
  display: block;
  padding: 0.65rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--g2g-btn);
  text-decoration: none;
  background: var(--g2g-hell);
  border-top: 1px solid var(--g2g-hell-border);
}

.g2g-search-suggest-all:hover {
  color: var(--g2g-gold);
}

/* iOS: kein automatisches Text-Aufblasen. Kein CSS-zoom — Safari
   koppelt zoom am html-Root an den Website-Seitenzoom (85 %-Falle). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Typo-Basis v2 (Ioannis 15.09.2026, Runde 2): Der 17px-Root hat ALLES
   mitskaliert (Padding, Megamenü-Höhen → „rangezoomt", Menü musste scrollen).
   Root bleibt daher bei der alten 85 %-Dichte — NUR die Schrift wird größer:
   Abschnitt „g2g Desktop-Textskala" am Dateiende hebt alle Textgrößen ×1.25
   an (gleiche gerenderte Größen wie der 17px-Stand, den Ioannis mochte),
   Layout-Abstände bleiben unverändert. Mobile (16px Root) unberührt. */
@media (min-width: 992px) {
  html {
    font-size: 85%;
  }
}

.main-search,
.main-search .input-group,
.main-search .twitter-typeahead,
.search-form-wrapper-fixed,
.fixed-search {
  touch-action: manipulation;
}

.main-search pre[aria-hidden="true"],
.main-search .tt-hint {
  font-size: 16px !important;
}

html.g2g-search-focus {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Mobile: fixes Suchfeld (außerhalb .navbar-main) — eng an die Chrome-Zeile */
.search-form-wrapper-fixed {
  background: var(--g2g-white);
  border-bottom: 1px solid var(--g2g-hell-border);
  padding-top: 0.2rem;
  padding-bottom: 0.35rem;
  margin-top: 0;
  font-size: 16px !important; /* iOS erbt sonst 14px vom NOVA-Wrapper */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.search-form-wrapper-fixed .main-search .input-group {
  width: 100%;
}

@media (max-width: 991.98px) {
  .g2g-search-suggest-grid {
    grid-template-columns: minmax(8rem, 36%) minmax(0, 1fr);
  }

  .search-form-wrapper-fixed,
  .fixed-search,
  .search-form-wrapper-fixed .main-search,
  .search-form-wrapper-fixed .twitter-typeahead {
    transform: none !important;
    font-size: 16px !important;
  }

  .main-search input[name="qs"],
  .main-search .tt-input,
  .main-search .form-control,
  #search-header-mobile-top,
  .search-form-wrapper-fixed input[name="qs"] {
    font-size: 16px !important;
    line-height: 1.4 !important;
    -webkit-text-size-adjust: 100% !important;
  }
}

@media (max-width: 575.98px) {
  /* Sehr schmal: Spalten untereinander, nichts abschneiden */
  .g2g-search-suggest-grid {
    grid-template-columns: 1fr;
  }

  .g2g-search-suggest-left {
    border-right: none;
    border-bottom: 1px solid var(--g2g-hell-border);
    max-height: 9rem;
  }

  .g2g-search-suggest-right {
    max-height: none;
  }
}

/* === Buttons site-weit — Fable, ruhig (Feedback Ioannis 03.09.) ===
 * Primary: Braun-Fläche, weißer Text, 8px Radius — kein Schatten, kein
 * Uppercase, kein Letterspacing. Hover: Dark + feine Gold-Linie (FABLE-BRIEF).
 * Sekundär: dünne Outline. Gold NIE als Fläche. */
.btn {
  border-radius: var(--g2g-radius);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover,
.btn:focus,
.btn:active {
  box-shadow: none;
}

/* NOVA my-nova.css: .btn-primary { background:#F8BF00; color:#525252 }.
   !important + html body, sonst gewinnt Gold+Weiß gegen Child ohne Spezifität. */
html body .btn-primary,
html body a.btn-primary,
html body button.btn-primary,
html body input.btn-primary,
html body .btn.btn-primary,
html body .btn-primary:not(:disabled):not(.disabled),
html body #buy_form .btn-primary,
html body .product-buy .btn-primary,
html body .g2g-hero-cta .btn,
html body .g2g-hero-cta .btn-primary,
html body .g2g-hero-v6 .g2g-hero-cta .btn,
html body .g2g-tour-start.btn-primary {
  background-color: var(--g2g-btn) !important;
  background-image: none !important;
  border: 1px solid var(--g2g-btn) !important;
  color: var(--g2g-white) !important;
}

html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active,
html body .btn-primary:not(:disabled):not(.disabled):active,
html body a.btn-primary:hover,
html body button.btn-primary:hover,
html body .btn.btn-primary:hover,
html body #buy_form .btn-primary:hover,
html body .product-buy .btn-primary:hover,
html body .g2g-hero-cta .btn:hover,
html body .g2g-hero-cta .btn-primary:hover,
html body .g2g-hero-v6 .g2g-hero-cta .btn:hover,
html body .g2g-tour-start.btn-primary:hover {
  background-color: var(--g2g-dark) !important;
  background-image: none !important;
  border-color: var(--g2g-gold) !important;
  color: var(--g2g-white) !important;
}

.btn-outline-primary {
  color: var(--g2g-btn);
  border: 1px solid var(--g2g-btn);
  background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background: transparent !important;
  border-color: var(--g2g-gold) !important;
  color: var(--g2g-dark) !important;
}

/* === Links auf hellem Grund === */
a {
  color: var(--g2g-btn);
}

a:hover,
a:focus {
  color: var(--g2g-gold);
}

#content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.g2g-cat-tile) {
  color: var(--g2g-btn);
  text-decoration-underline-offset: 2px;
}

#content-wrapper a:not(.btn):not(.g2g-cat-tile):hover {
  color: var(--g2g-gold);
}

/* Produkttitel: kein Link-Blau, keine Unterstreichung (schlägt #content-wrapper a) */
#content-wrapper .productbox-title a,
#content-wrapper .productbox-title a:link,
#content-wrapper .productbox-title a:visited,
#content-wrapper .productbox-title a:hover,
#content-wrapper .productbox-title a:focus,
.product-wrapper .productbox-title a,
.product-wrapper .productbox-title a:link,
.product-wrapper .productbox-title a:visited {
  color: var(--g2g-text) !important;
  text-decoration: none !important;
}

#content-wrapper .productbox-title a:hover,
#content-wrapper .productbox-title a:focus,
.product-wrapper .productbox-title a:hover,
.product-wrapper .productbox-title a:focus,
#content-wrapper .productbox a:hover:not(.btn),
.product-wrapper .productbox a:hover:not(.btn) {
  color: var(--g2g-text) !important;
  text-decoration: none !important;
}

/* === Footer — weiß, Gold-Linie oben === */
#footer,
footer.bg-primary,
#footer.bg-primary {
  background-color: var(--g2g-white) !important;
  color: var(--g2g-text) !important;
  border-top: 2px solid var(--g2g-gold);
}

/* :not(.btn) — sonst überschreibt das den weißen Text von .btn-primary
   (z. B. "Vertrag widerrufen"), Gold-Fläche + dunkler Text = Kontrastbruch */
#footer a:not(.btn),
#footer .nav-link {
  color: var(--g2g-text-muted) !important;
}

#footer a:not(.btn):hover {
  color: var(--g2g-btn) !important;
}

/* Batteriegesetzhinweise: verkaufen wir nicht — Link aus der Linkgruppe
   ausblenden, bis die Seite im Shop-Admin (Eigene Inhalte) gelöscht ist.
   (Ioannis 15.09.2026) */
#footer li:has(> a[href$="/Batteriegesetzhinweise"]),
#footer a[href$="/Batteriegesetzhinweise"] {
  display: none !important;
}

#footer h1, #footer h2, #footer h3,
#footer h4, #footer h5, #footer h6 {
  color: var(--g2g-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* === Produktboxen — flach, Fable, praktisch kein Hover === */
.product-wrapper .productbox,
.opc-ProductStream .product-wrapper .productbox,
#product-list .productbox {
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  box-shadow: none !important;
  overflow: hidden;
  cursor: pointer;
  transition: none !important;
}

/* NOVA .productbox-hover: Overlay, ±1rem, z-index, Schatten — tot */
.product-wrapper .productbox.productbox-hover .productbox-inner::before,
.product-wrapper .productbox.productbox-hover:hover .productbox-inner::before,
.product-wrapper .productbox.productbox-hover:focus .productbox-inner::before,
.product-wrapper .productbox.productbox-hover.focus .productbox-inner::before,
.product-wrapper .productbox.productbox-hover:focus-visible .productbox-inner::before,
.product-wrapper .productbox.productbox-hover:focus-within .productbox-inner::before,
.opc-ProductStream .productbox.productbox-hover .productbox-inner::before,
.opc-ProductStream .productbox.productbox-hover:hover .productbox-inner::before {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  outline: none !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  background: transparent !important;
}

.product-wrapper .productbox:hover,
.product-wrapper .productbox:focus,
.product-wrapper .productbox.productbox-hover:hover,
.product-wrapper .productbox.productbox-hover:focus,
.product-wrapper .productbox.productbox-hover.focus,
.opc-ProductStream .product-wrapper .productbox:hover,
#product-list .productbox:hover {
  border-color: var(--g2g-hell-border) !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: auto !important;
  outline: none !important;
  overflow: hidden !important;
  background: var(--g2g-white) !important;
}

.product-wrapper .productbox.productbox-hover.productbox-column:hover .productbox-inner.pos-abs,
.product-wrapper .productbox.productbox-hover.productbox-column:focus .productbox-inner.pos-abs {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
}

.productbox-title,
.productbox-title a {
  color: var(--g2g-text) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.productbox-title a:hover {
  color: var(--g2g-text) !important;
  text-decoration: none !important;
}

.productbox .price,
.price_wrapper .price,
.price-regular {
  color: var(--g2g-btn) !important;
  font-weight: 700;
}

/* === Badges === */
.badge-primary,
.label-primary,
.badge.bg-primary {
  background-color: var(--g2g-btn) !important;
  color: var(--g2g-white) !important;
}

/* === Formulare === */
.form-control {
  color: var(--g2g-text);
  background-color: var(--g2g-white);
  border-color: var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
}

.form-control:focus {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-focus-ring-strong);
  color: var(--g2g-text);
}

/* === Breadcrumb === */
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--g2g-btn);
}

.breadcrumb-item.active {
  color: var(--g2g-text-muted);
}

/* === Warenkorb-Badge === */
.navbar .badge,
.cart-icon-dropdown .badge {
  background-color: var(--g2g-gold) !important;
  color: var(--g2g-dark) !important;
  font-weight: 700;
}

/* === Gold nie als Fläche mit Text === */
.bg-primary:not(.navbar-main):not(#footer) {
  background-color: var(--g2g-dark) !important;
  color: var(--g2g-white) !important;
}

/* === Buttons: niemals Durchstreichung (NOVA .text-stroke Konflikt) === */
.btn,
a.btn,
button.btn,
.btn span,
a.btn span {
  text-decoration: none !important;
}

/* === Fokus sichtbar (Tastatur) === */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
  outline: 2px solid var(--g2g-gold);
  outline-offset: 2px;
}

/* ============================================================
   Mengen-Stepper (input-group mit -/+ Buttons)
   Gilt für PDP, Warenkorb und PLP Varianten-Expansion
   ============================================================ */

/* Wrapper */
.amount-container,
.quantity-spinner-wrapper,
.input-group:has(input[name="menge"]),
.input-group:has(input[name*="quantity"]),
.input-group:has(input[name*="anzahl"]) {
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  background: var(--g2g-white);
  height: 44px;
  gap: 0;
}

/* Minus / Plus Buttons */
.amount-container .btn,
.quantity-spinner-wrapper .btn,
.input-group:has(input[name="menge"]) .btn,
.input-group:has(input[name="menge"]) .input-group-prepend .btn,
.input-group:has(input[name="menge"]) .input-group-append .btn {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--g2g-text) !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s !important;
}

.input-group:has(input[name="menge"]) .input-group-prepend .btn:hover,
.input-group:has(input[name="menge"]) .input-group-append .btn:hover {
  background: var(--g2g-hell) !important;
  color: var(--g2g-btn) !important;
}

/* Mengen-Input */
.input-group:has(input[name="menge"]) input[name="menge"],
.input-group:has(input[name="menge"]) input[type="number"] {
  width: 54px !important;
  height: 44px !important;
  border: none !important;
  border-left: 1px solid var(--g2g-hell-border) !important;
  border-right: 1px solid var(--g2g-hell-border) !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--g2g-text) !important;
  background: var(--g2g-white) !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Einheit "Stk" */
.input-group:has(input[name="menge"]) .input-group-text,
.input-group:has(input[name="menge"]) .input-group-append .input-group-text {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--g2g-hell-border) !important;
  padding: 0 0.6rem !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--g2g-text-muted) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Wrapper-Borders für Bootstrap input-group entfernen */
.input-group:has(input[name="menge"]) .input-group-prepend,
.input-group:has(input[name="menge"]) .input-group-append {
  border: none !important;
}

.input-group:has(input[name="menge"]) .input-group-prepend .btn {
  border-right: 1px solid var(--g2g-hell-border) !important;
}

/* Focus auf dem Input-Group-Wrapper */
.input-group:has(input[name="menge"]:focus) {
  border-color: var(--g2g-gold) !important;
  box-shadow: var(--g2g-focus-ring) !important;
}

/* ============================================================
   Startseite (OnPage Composer) — Fable Screen 1
   Klassen kompatibel mit Blueprint v3 UND v4
   ============================================================ */

.g2g-homepage {
  max-width: var(--g2g-content-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Öffnungszeiten-Zeile unterm Header: ENTFERNT (Ioannis 15.09.2026) —
   Öffnungszeiten stehen im Vor-Ort-Block und im Footer. display:none statt
   Markup-Löschung, weil die Zeile im OPC-Inhalt der Startseite (Shop-DB)
   steckt; aus homepage-static.html + Blueprint-Generator ist sie raus. */
.g2g-topbar {
  display: none;
}

/* --- Hero (Split: Copy + Bildfläche) --- */
.g2g-hero-split {
  margin-bottom: 1.5rem;
}

/* Leere Foto-Slots nicht als Beige-Löcher stehen lassen */
.g2g-hero-visual:empty,
.g2g-static-media:empty,
.g2g-cat-media:empty {
  display: none !important;
}

.g2g-hero-split:has(.g2g-hero-visual:empty) .g2g-hero-copy,
.g2g-hero-split:not(:has(.g2g-hero-visual)) .g2g-hero-copy {
  flex: 0 0 100%;
  max-width: min(52rem, 100%);
}

.g2g-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g2g-btn);
  margin-bottom: 0.75rem;
}

.g2g-hero-copy h1 {
  font-size: clamp(2.35rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}

.g2g-hero-copy > p:not(.g2g-hero-hours) {
  font-size: 1.125rem;
  color: var(--g2g-text-muted) !important;
  max-width: 46ch;
}

.g2g-gold-text {
  color: var(--g2g-gold);
}

/* Öffnungszeiten-Pill im Hero — Topbar hat denselben Text, daher aus */
.g2g-hero-hours {
  display: none;
}

.g2g-hero-copy .btn-primary,
.g2g-hero-copy a.btn {
  min-height: 48px;
  padding: 0.7rem 1.75rem;
  font-size: 1rem;
}

/* Bildfläche nur wenn Inhalt (img) da ist — sonst :empty oben */
.g2g-hero-visual:not(:empty),
.g2g-static-media:not(:empty) {
  min-height: 300px;
  border-radius: 12px;
  border: 1px solid var(--g2g-hell-border);
  overflow: hidden;
}

.g2g-hero-visual img,
.g2g-static-media img,
.g2g-cat-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Trust-Pills --- */
.g2g-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
  margin-bottom: 2.5rem;
}

.g2g-trust-pills span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--g2g-text);
}

/* Gold-Punkt statt Icon (OPC-Sanitizer-sicher) */
.g2g-trust-pills span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g2g-gold);
  flex: none;
}

.g2g-trust-pills svg {
  color: var(--g2g-btn);
  flex: none;
}

/* --- Sektionsköpfe (H2 + Subline, ohne Goldlinie) --- */
.g2g-section-title,
.g2g-homepage .opc-Heading h1,
.g2g-homepage .opc-Heading h2,
.g2g-section-head h2 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 3rem 0 0.25rem;
  padding-bottom: 0;
  border-bottom: none;
  display: block;
}

.g2g-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}

.g2g-section-head h2 {
  margin-bottom: 0.25rem;
}

.g2g-sub {
  color: var(--g2g-text-muted) !important;
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.g2g-section-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--g2g-btn) !important;
  white-space: nowrap;
  padding: 0.5rem 0;
  text-decoration: none;
}

.g2g-section-link:hover {
  color: var(--g2g-gold) !important;
}

/* --- Kategorien-Kacheln (Fable: weiße Karte, Bildfläche + Caption) --- */
.g2g-cat-grid {
  margin-bottom: 1rem;
  margin-top: 1.25rem;
}

.g2g-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  min-height: 0;
  padding: 0;
  border-radius: var(--g2g-radius);
  border: 1px solid var(--g2g-hell-border);
  border-left: 3px solid var(--g2g-gold);
  background: var(--g2g-white);
  text-decoration: none !important;
  transition: transform 0.15s ease;
  overflow: hidden;
  position: relative;
  height: 100%;
}

/* Bildfläche nur mit echtem Bild — leere Slots sind :empty / display:none */
.g2g-cat-media:not(:empty) {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--g2g-hell-border);
}

.g2g-cat-tile:has(.g2g-cat-media:not(:empty)) {
  border-left-width: 1px;
  border-left-color: var(--g2g-hell-border);
}

.g2g-cat-tile span:not(.g2g-cat-media) {
  color: var(--g2g-text) !important;
  font-weight: 700;
  font-size: 1.0625rem;
  position: relative;
  z-index: 1;
  text-shadow: none;
  padding: 1.2rem 1.35rem;
  min-height: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Chevron rechts in der Caption */
.g2g-cat-tile span:not(.g2g-cat-media)::after {
  content: "›";
  color: var(--g2g-gold);
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 700;
}

.g2g-cat-tile:hover {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-shadow);
  transform: translateY(-2px);
}

/* --- OPC-Sektionen (ProductStreams) --- */
.g2g-section {
  margin-bottom: 3.5rem;
  padding-top: 0.5rem;
}

/* Fable: kein farbiger Sektions-Hintergrund mehr */
.g2g-section--offers,
.g2g-section--bestseller,
.g2g-section--recommended,
.g2g-section--available {
  background: transparent;
  padding: 0.5rem 0 0;
  margin-bottom: 2.5rem;
  border-radius: 0;
}

.opc-ProductStream.gallery .product-wrapper {
  margin-bottom: 1.5rem;
}

.g2g-cookie-note {
  margin: -1.5rem 0 2.5rem;
  text-align: left;
  font-size: 0.8125rem;
}

/* --- Samenbanken: weiße Karte (Band) --- */
.g2g-seedbanks {
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: 12px;
  padding: 1.5rem;
}

.g2g-seedbanks .manufacturer-slider-item,
.g2g-seedbanks .product-slider-item {
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  padding: 0.75rem;
}

.g2g-seedbanks img {
  border-radius: 6px;
}

.g2g-seedbanks-hint {
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* --- Blog-Teaser --- */
.g2g-blog-teaser {
  padding: 1.5rem;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: 12px;
  margin-bottom: 2rem;
}

/* --- USPs (v3) — weiße Karten mit Goldkante --- */
.g2g-usps {
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-top: 3px solid var(--g2g-gold);
  border-radius: var(--g2g-radius);
  padding: 1.5rem 1.25rem;
  margin-bottom: 1rem;
  height: 100%;
}

.g2g-usps h3,
.g2g-usps h4,
.g2g-usps .h3,
.g2g-usps .h4 {
  color: var(--g2g-text) !important;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.g2g-usps p {
  color: var(--g2g-text-muted) !important;
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* --- Laden-Block (v3 .g2g-store / v4 .g2g-store-card) --- */
.g2g-store,
.g2g-store-card {
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-left: none;
  border-radius: 12px;
  padding: 2.5rem 2.75rem;
  margin-top: 2rem;
  text-align: left;
}

.g2g-store h2,
.g2g-store-card h2 {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

.g2g-store p,
.g2g-store-card p {
  color: var(--g2g-text) !important;
  margin-bottom: 0.5rem;
}

.g2g-store a,
.g2g-store-card a {
  color: var(--g2g-btn);
  font-weight: 600;
}

.g2g-store-card .g2g-static-media {
  min-height: 240px;
  height: 100%;
}

/* Anker unter Sticky-Header */
.g2g-anchor {
  display: block;
  position: relative;
  top: -96px;
  visibility: hidden;
}

/* OPC-Sektionsüberschriften (NOVA hr-sect) */
.hr-sect a {
  color: var(--g2g-text) !important;
  border-bottom-color: var(--g2g-gold) !important;
}

/* ============================================================
   Kategorie-Seite (Artikelübersicht)
   ============================================================ */

#result-wrapper {
  max-width: var(--g2g-content-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.productlist-header-description .title h1,
.productlist-header-description .title .h2 {
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 2px solid var(--g2g-gold);
  padding-bottom: 0.35rem;
  display: inline-block;
  margin-bottom: 0.75rem;
}

.productlist-header-description .desc,
.productlist-header-description .desc p {
  color: var(--g2g-text-muted) !important;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 720px;
}

.productlist-header-description-image {
  border-radius: 12px;
  border: 1px solid var(--g2g-hell-border);
  margin-bottom: 1rem;
}

/* Hub-Kategorien (Growshop / Headshop / …): Unterkat-Kacheln mit Bild.
   Wawi-Kategoriebild zeigen; Kamera-nopic und Unter-Unterkat-Listen weg. */
#result-wrapper .content-cats-small,
#result-wrapper .row.content-cats-small {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  margin-left: -0.4rem;
  margin-right: -0.4rem;
  margin-bottom: 1.5rem;
}

#result-wrapper .content-cats-small > [class*="col"] {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0.4rem;
}

@media (min-width: 768px) {
  #result-wrapper .content-cats-small > [class*="col"] {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

@media (min-width: 992px) {
  #result-wrapper .content-cats-small > [class*="col"] {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

#result-wrapper .content-cats-small .sub-categories {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--g2g-hell-border);
  border-left: 3px solid var(--g2g-gold);
  border-radius: var(--g2g-radius);
  background: var(--g2g-hell);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#result-wrapper .content-cats-small .sub-categories:has(img[src*="/media/image/"]),
#result-wrapper .content-cats-small .sub-categories.g2g-has-photo {
  background: var(--g2g-white);
  border-left-width: 1px;
  border-left-color: var(--g2g-hell-border);
}

#result-wrapper .content-cats-small .sub-categories:hover,
#result-wrapper .content-cats-small .sub-categories:focus-within {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-shadow);
  transform: translateY(-2px);
}

#result-wrapper .content-cats-small .sub-categories > a:has(.subcategories-image) {
  display: block !important;
  line-height: 0;
  text-decoration: none !important;
}

#result-wrapper .content-cats-small .subcategories-image,
#result-wrapper .content-cats-small .subcategories-image.d-none {
  display: flex !important;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 !important;
  overflow: hidden;
  background: var(--g2g-media-grad);
  border-bottom: 1px solid var(--g2g-gold);
}

#result-wrapper .content-cats-small .sub-categories:has(img[src*="/media/image/"]) .subcategories-image,
#result-wrapper .content-cats-small .sub-categories.g2g-has-photo .subcategories-image {
  border-bottom-color: var(--g2g-hell-border);
}

#result-wrapper .content-cats-small .subcategories-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

#result-wrapper .content-cats-small .subcategories-image img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#result-wrapper .content-cats-small hr,
#result-wrapper .content-cats-small ul {
  display: none !important;
}

#result-wrapper .content-cats-small .caption {
  display: block !important;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

#result-wrapper .content-cats-small .caption a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 44px;
  height: 100%;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--g2g-text) !important;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: left;
  text-decoration: none !important;
}

#result-wrapper .content-cats-small .caption a::after {
  content: "›";
  flex: 0 0 auto;
  color: var(--g2g-gold);
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 700;
}

#result-wrapper .content-cats-small .caption a:hover,
#result-wrapper .content-cats-small .caption a:focus {
  color: var(--g2g-btn) !important;
  background: transparent;
}

@media (max-width: 767.98px) {
  #result-wrapper .content-cats-small .caption a {
    min-height: 44px;
    font-size: 0.9375rem;
    padding: 0.7rem 0.85rem;
  }
}

/* === Produkte ohne Bild: gebrandeter Platzhalter (Ioannis 04.09.2026) ===
   JTLs keinBild/nopic-Kamera unsichtbar machen und stattdessen Papier-
   Fläche + feines Hanfblatt-Muster + Blume-des-Lebens-Signet zentriert
   zeigen. Gilt für PLP, Slider und Unterkategorie-Kacheln; PDP unten. */
#result-wrapper .subcategories-image img[src*="keinBild"],
#result-wrapper .subcategories-image img[src*="nopic"],
.productbox-image img[src*="keinBild"],
.productbox-image img[src*="nopic"],
.productbox-image img[src*="placeholder"] {
  display: none !important;
  opacity: 0;
}

/* Nur die innere Bildfläche (.square), nie der äußere .productbox-image-
   Wrapper — dort liegt ribbon-7, ein inset-0 ::after würde das Badge zudecken. */
.productbox-image.square:has(img[src*="keinBild"]),
.productbox-image.square-image:has(img[src*="keinBild"]),
.productbox-image.square:has(img[src*="nopic"]),
.productbox-images .square:has(img[src*="keinBild"]),
#product-list.layout-gallery .productbox-image.square:has(img[src*="keinBild"]),
.opc-ProductStream.gallery .productbox-image.square:has(img[src*="keinBild"]),
#xselling .item-slider.productbox-image.square:has(img[src*="keinBild"]),
#result-wrapper .subcategories-image:has(img[src*="keinBild"]),
#result-wrapper .subcategories-image:has(img[src*="nopic"]) {
  position: relative;
  background-color: var(--g2g-hell) !important;
  background-image: var(--g2g-nopic-leaf) !important;
  background-size: 128px 128px !important;
  background-repeat: repeat !important;
}

.productbox-image.square:has(img[src*="keinBild"])::after,
.productbox-image.square-image:has(img[src*="keinBild"])::after,
.productbox-image.square:has(img[src*="nopic"])::after,
.productbox-images .square:has(img[src*="keinBild"])::after,
#product-list.layout-gallery .productbox-image.square:has(img[src*="keinBild"])::after,
.opc-ProductStream.gallery .productbox-image.square:has(img[src*="keinBild"])::after,
#xselling .item-slider.productbox-image.square:has(img[src*="keinBild"])::after,
#result-wrapper .subcategories-image:has(img[src*="keinBild"])::after,
#result-wrapper .subcategories-image:has(img[src*="nopic"])::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--g2g-nopic-signet) center / 52px 52px no-repeat !important;
  opacity: 0.55 !important;
  pointer-events: none;
}

/* PDP: Galerie ohne Bild ebenso branden.
   Markup: #gallery > .square.square-image > .inner > img[src*=keinBild]
   (plus Fullview-Modal #productImagesModal mit gleicher square-Struktur) */
#gallery img[src*="keinBild"],
#gallery_preview img[src*="keinBild"],
#productImagesModal img[src*="keinBild"] {
  visibility: hidden;
}

#gallery .square-image:has(img[src*="keinBild"]),
#productImagesModal .square-image:has(img[src*="keinBild"]) {
  position: relative;
  background-color: var(--g2g-hell);
  background-image: var(--g2g-nopic-leaf);
  background-size: 128px 128px;
  border-radius: var(--g2g-radius);
  min-height: 280px;
}

#gallery .square-image:has(img[src*="keinBild"])::after,
#productImagesModal .square-image:has(img[src*="keinBild"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g2g-nopic-signet) center / 72px 72px no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

/* PLP: keine dauerhafte Kategorien-Sidebar, Content volle Breite
   :has() gilt sofort (kein Sidebar-Blitz); .g2g-plp setzt JS zusätzlich. */
body.is-nova:has(#result-wrapper) #sidepanel_left,
body.is-nova:has(#result-wrapper) .sidepanel-left,
html.g2g-plp #sidepanel_left,
html.g2g-plp .sidepanel-left,
html.g2g-plp .box-categories {
  display: none !important;
}

body.is-nova:has(#result-wrapper) #content .col-lg-8.col-xl-9,
body.is-nova:has(#result-wrapper) #content .col-lg-8,
html.g2g-plp #content .col-lg-8.col-xl-9,
html.g2g-plp #content .col-lg-8,
html.g2g-plp #content > .row > [class*="col-lg-8"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
}

/* Chip-Leiste (Hauptkats / Growzelte-Filter) */
.g2g-plp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1.25rem;
  padding: 0;
}

.g2g-plp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--g2g-hell-border);
  border-radius: 999px;
  background: var(--g2g-white);
  color: var(--g2g-text) !important;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.g2g-plp-chip:hover,
.g2g-plp-chip:focus {
  border-color: var(--g2g-gold);
  color: var(--g2g-btn) !important;
  background: var(--g2g-white);
}

.g2g-plp-chip.is-active {
  border-color: var(--g2g-dark);
  background: var(--g2g-dark);
  color: var(--g2g-white) !important;
}

.g2g-plp-chip.is-active:hover,
.g2g-plp-chip.is-active:focus {
  border-color: var(--g2g-dark);
  background: var(--g2g-dark);
  color: var(--g2g-white) !important;
}

/* Filter nur als Button (NOVA #js-filters → Modal) */
#js-filters {
  min-height: 44px;
  min-width: 44px;
  padding: 0.4rem 1rem !important;
  border-radius: var(--g2g-radius) !important;
  border-color: var(--g2g-hell-border) !important;
  color: var(--g2g-text) !important;
  background: var(--g2g-white) !important;
  font-weight: 600 !important;
}

#js-filters:hover,
#js-filters:focus {
  border-color: var(--g2g-gold) !important;
  color: var(--g2g-btn) !important;
}

#collapseFilter .modal-content {
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  box-shadow: var(--g2g-shadow);
}

#collapseFilter .modal-header {
  border-bottom-color: var(--g2g-hell-border);
}

#collapseFilter .modal-title {
  font-weight: 700;
  color: var(--g2g-text);
}

/* ============================================================
   PLP — Kategorie-Seite · Fable-Aufwertung
   ============================================================ */

/* --- Seitenheader --- */
.content-header h1,
.productlist-header-description .title h1,
.productlist-header-description .title .h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  border-bottom: 3px solid var(--g2g-gold);
  padding-bottom: 0.45rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.productlist-header-description .desc,
.category-description {
  color: var(--g2g-text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 72ch;
  margin-top: 0.5rem;
}

/* --- Verfügbarkeits-Ribbon — Indras: eckig, keine Pills ---
   NOVA: .ribbon-8 default green  → 0,1,0
   Wir:  .product-wrapper .ribbon… → Parent-Kontext, nur var(--g2g-*)
   ribbon-8 „Auf Lager“: aus (Rauschen, fällt nicht auf)
   ribbon-7 „Ausverkauft“: klar, eckig
*/
.product-wrapper .ribbon.productbox-ribbon,
.opc-ProductStream .ribbon.productbox-ribbon,
#image_wrapper .ribbon.productbox-ribbon,
.product-gallery .ribbon.productbox-ribbon {
  position: absolute !important;
  top: 0.65rem !important;
  left: 0.6rem !important;
  z-index: 6 !important;
  background: var(--g2g-soldout) !important;
  color: var(--g2g-white) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.28rem 0.55rem !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

.product-wrapper .ribbon.ribbon-8.productbox-ribbon,
.opc-ProductStream .ribbon.ribbon-8.productbox-ribbon {
  display: none !important;
}

/* ribbon-7 = Ausverkauft */
.product-wrapper .ribbon.ribbon-7.productbox-ribbon,
.opc-ProductStream .ribbon.ribbon-7.productbox-ribbon,
#image_wrapper .ribbon.ribbon-7.productbox-ribbon,
.product-gallery .ribbon.ribbon-7.productbox-ribbon {
  display: block !important;
  background: var(--g2g-soldout) !important;
  color: var(--g2g-white) !important;
}

/* PDP-Galerie: Badge braucht positionierte Hülle (NOVA hat hier kein productbox) */
#image_wrapper.gallery-with-action,
.gallery-with-action-main,
#product-offer .product-gallery {
  position: relative;
}

/* Lieferstatus 0 + OutOfStock: nicht wie „auf Lager“ (success) färben */
.delivery-status .status-0,
.delivery-status:has(link[itemprop="availability"][href*="OutOfStock"]) .status {
  color: var(--g2g-soldout) !important;
  font-weight: 700;
}

/* Pseudo-Elemente (Falten-Schatten NOVA) entfernen */
.product-wrapper .ribbon.productbox-ribbon::before,
.product-wrapper .ribbon.productbox-ribbon::after,
.opc-ProductStream .ribbon.productbox-ribbon::before,
.opc-ProductStream .ribbon.productbox-ribbon::after,
#image_wrapper .ribbon.productbox-ribbon::before,
#image_wrapper .ribbon.productbox-ribbon::after,
.product-gallery .ribbon.productbox-ribbon::before,
.product-gallery .ribbon.productbox-ribbon::after {
  display: none !important;
}

/* (Varianten-Panels werden generell unterdrückt — siehe
   "Keine Variantenauswahl in der Übersicht" weiter unten) */

.productbox:has(.ribbon-7) .productbox-quick-actions {
  display: none !important;
}

/* --- Produktbild: overflow hier clippen, nicht auf der ganzen Karte --- */
.productbox-image {
  overflow: hidden;
  border-radius: 0;
  border-bottom: 1px solid var(--g2g-hell-border);
}

/* PLP/Stream: Foto füllt das Quadrat, weißer Grund (keine Papier-Letterbox). */
#product-list .productbox-image img,
#product-list .productbox-image .inner img,
.opc-ProductStream .productbox-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover !important;
  object-position: center;
}

#product-list.layout-gallery .productbox-image.square,
#product-list.layout-gallery .productbox-image.square-image,
.opc-ProductStream .productbox-image.square,
.opc-ProductStream .productbox-image.square-image {
  min-height: 9rem;
}

/* In der Listenansicht liegt das Bild links → linke Ecken runden */
#product-list.layout-list .productbox-image,
.layout-list .productbox-image {
  border-radius: var(--g2g-radius) 0 0 var(--g2g-radius);
}

/* --- Produktbild-Platzhalter --- */
.productbox-image.square,
.productbox-image.square.square-image {
  background: var(--g2g-media-grad);
}

.productbox-image img[src*="placeholder"],
.productbox-image .img-default {
  opacity: 0.4;
}

/* --- Produktbox allgemein (ergänzend zu oben) --- */
.productbox {
  position: relative;
}

/* productbox-inner: KEIN height:100% — würde Titel auf Mobile clippen
   NOVA verwaltet die Innen-Höhe bereits via row-eq-height/JS */
.productbox-inner {
  /* display und height absichtlich nicht gesetzt */
}

/* Produkttitel + Preis — links, wenig Deko, zur 5–6-Spalten-Dichte */
.productbox .price_wrapper,
.productbox .productbox-description {
  padding: 0.4rem 0.55rem 0.5rem;
}

.productbox-title {
  padding: 0.45rem 0.55rem 0;
}

.productbox-title a {
  display: block;
  color: var(--g2g-text) !important;
  text-decoration: none !important;
}

.productbox .price,
.productbox .price-regular,
.productbox .price_wrapper .price,
.productbox:hover .price,
.productbox:hover .price-regular,
.productbox:hover .price_wrapper .price {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--g2g-text) !important;
}

.productbox .price_on_application {
  font-size: 0.875rem !important;
  color: var(--g2g-text-muted) !important;
  font-weight: 500 !important;
}

#product-list.layout-gallery .productbox-title,
#product-list.layout-gallery .price_wrapper,
#product-list.layout-gallery .productbox-description,
.opc-ProductStream .productbox-title,
.opc-ProductStream .price_wrapper,
.opc-ProductStream .productbox-description,
.carousel .productbox-title,
.carousel .price_wrapper {
  text-align: left;
}

/* Echte Produktfotos auf Weiß statt Beige-Verlauf —
   Platzhalter (keinBild/img-default) behalten den Verlauf.
   Nicht die Hover-Schicht: die liegt absolut über dem ersten Foto,
   ihr Bild ist opacity 0, der weiße Grund verdeckt das Foto bis :hover. */
.productbox-image.square:has(img):not(:has(img[src*="keinBild"])):not(:has(img[src*="placeholder"])):not(:has(img.img-default)):not(.second-wrapper) {
  background: var(--g2g-white);
}

.productbox-images .second-wrapper,
.list-gallery .second-wrapper {
  display: none !important;
}

/* --- Quick-Actions (Wunschzettel etc. on Hover) --- */
.productbox-quick-actions.productbox-onhover {
  gap: 0.35rem;
  padding: 0.5rem;
  z-index: 2;
}

.productbox-quick-actions .btn,
.productbox-quick-actions button.btn {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--g2g-white) !important;
  border: 1px solid var(--g2g-hell-border) !important;
  color: var(--g2g-btn) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--g2g-shadow-md) !important;
  transition: border-color 0.12s, color 0.12s !important;
}

.productbox-quick-actions .btn:hover,
.productbox-quick-actions button.btn:hover {
  border-color: var(--g2g-gold) !important;
  color: var(--g2g-gold) !important;
  background: var(--g2g-white) !important;
}

/* --- Keine Variantenauswahl in der Übersicht ---
   Variantenwahl passiert ausschließlich auf der Artikelseite
   (g2g-variant-buttons). NOVA rendert die Panels teils per AJAX nach —
   beide ID-Schreibweisen abdecken (variation- und variations-collapse). */
.productbox [id*="variation-collapse"],
.productbox [id*="variations-collapse"],
.productbox .variation-collapse,
#product-list [id*="variations-collapse"],
.opc-ProductStream [id*="variations-collapse"] {
  display: none !important;
}

/* Hover-/Klick-Expansion stilllegen — NOVA macht Varianten-Karten
   absolute + z-index 1000 (ID schlägt html body ohne #product-list). */
html body #product-list.layout-gallery .productbox.productbox-hover.productbox-show-variations,
html body #product-list.layout-gallery .productbox.productbox-hover.productbox-show-variations:hover,
html body #product-list.layout-gallery .productbox.productbox-hover.productbox-show-variations:focus,
html body #product-list.layout-gallery .productbox.productbox-hover.productbox-show-variations.focus,
html body #product-list.layout-gallery .productbox.productbox-hover.productbox-show-variations.transition,
html body #product-list.layout-gallery .productbox.productbox-hover.productbox-show-variations.show-variation-collapse,
html body #product-list.layout-gallery .productbox.productbox-hover.productbox-show-variations.show-variation-collapse:hover,
html body .opc-ProductStream .productbox.productbox-show-variations:hover,
.productbox.show-variation-collapse,
.productbox.productbox-hover.show-variation-collapse {
  position: relative !important;
  z-index: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Buttons, die nur das (versteckte) Varianten-Panel öffnen würden —
   nicht .productbox-image treffen, das Bild trägt denselben data-target */
.productbox .productbox-quick-actions [data-target*="variation"],
.productbox button[data-toggle="collapse"][data-target*="variations-collapse"] {
  display: none !important;
}

/* --- Produktgrid --- */
#product-list.layout-gallery {
  margin-top: 1.25rem;
}

/* Einheitlicher Abstand für ALLE Karten. NOVA setzt 4rem via
   `#product-list .product-wrapper:not(:last-child)` (Spezifität 1,2,0) —
   nur die letzte Karte bekam unsere 1.5rem. Durch align-items:stretch
   der Flex-Row wurde die letzte Karte dann 40px höher gestreckt
   (uneinheitliche Boxen). Beide Selektoren angleichen: */
#product-list .product-wrapper,
#product-list .product-wrapper:not(:last-child) {
  margin-bottom: 1.5rem;
}

/* PLP/Suche/ProductStream: mehr Karten pro Reihe auf Desktop.
   NICHT #xselling / .recommendations — das sind Slick-Slider
   (flex-% bezieht sich auf den Track → Bilder explodieren).
   Tablet 768–991 bleibt 2 Spalten; Mobile 2 bzw. 1 unter 390. */
@media (min-width: 992px) {
  #product-list.layout-gallery .product-wrapper,
  #product-list.layout-gallery .product-wrapper.col-lg-3,
  #product-list.layout-gallery .product-wrapper.col-xl-3,
  #result-wrapper #product-list .product-wrapper,
  .opc-ProductStream.gallery .product-wrapper {
    flex: 0 0 20%;
    max-width: 20%;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin-bottom: 1rem;
  }

  #product-list.layout-gallery .productbox-title,
  #product-list.layout-gallery .price_wrapper,
  #product-list.layout-gallery .productbox-description,
  .opc-ProductStream .productbox-title,
  .opc-ProductStream .price_wrapper {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
}

@media (min-width: 1280px) {
  #product-list.layout-gallery .product-wrapper,
  #product-list.layout-gallery .product-wrapper.col-lg-3,
  #product-list.layout-gallery .product-wrapper.col-xl-3,
  #result-wrapper #product-list .product-wrapper,
  .opc-ProductStream.gallery .product-wrapper {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
}

/* ============================================================
   Listenansicht (layout-list) — Redesign (Tablet + Desktop)
   Vorher: Bootstrap-%-Spalten (col-xl-3) erzeugten ein winziges
   130px-Bild in einer riesigen Spalte, eine leere Varianten-Spalte
   verschwendete 1/3 der Breite, und der Warenkorb-Button war durch
   NOVAs `.productbox-onhover { opacity: 0 }` (ab 768px, Zeile ~22136
   my-nova.css) komplett unsichtbar bis zum Hover — daher die riesigen
   Leerflächen. Jetzt: feste Bildbreite, 2-Spalten-Flexrow, Button
   permanent sichtbar. ============================================ */

#product-list.layout-list .productbox,
.layout-list .productbox {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Hauptinhalt (Bild + Info) nebeneinander */
#product-list.layout-list .productbox-inner,
.layout-list .productbox-inner {
  display: flex;
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  /* Äußere Row: Bild-Spalte (fix) + Content-Spalte (flexibel) */
  #product-list.layout-list .productbox-inner > .row,
  .layout-list .productbox-inner > .row {
    display: flex;
    align-items: stretch;
    margin: 0;
    width: 100%;
  }

  #product-list.layout-list .productbox-inner > .row > .col:first-child,
  .layout-list .productbox-inner > .row > .col:first-child {
    flex: 0 0 160px;
    width: 160px;
    max-width: 160px;
    padding: 0;
  }

  #product-list.layout-list .productbox-image,
  .layout-list .productbox-image {
    height: 100%;
  }

  #product-list.layout-list .productbox-image.square-image,
  .layout-list .productbox-image.square-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
  }

  #product-list.layout-list .productbox-inner > .row > .col:last-child,
  .layout-list .productbox-inner > .row > .col:last-child {
    /* width:auto ist Pflicht — Bootstraps .col setzt width:100%, und
       bei flex-basis:auto wird genau dieses width als Basis benutzt
       (CSS-Spec). Ohne das hier stimmt die Aufteilung mit der
       Bild-Spalte nicht. */
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0.9rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
  }

  #product-list.layout-list .productbox-title,
  .layout-list .productbox-title {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  #product-list.layout-list .productbox-title a,
  .layout-list .productbox-title a {
    font-size: 1.0625rem;
  }

  /* Innere Form-Row: Artikelnummer/Details | Varianten (immer leer → aus) | Preis+Kauf */
  #product-list.layout-list .form-basket > .row,
  .layout-list .form-basket > .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin: 0;
  }

  #product-list.layout-list .productbox-variations,
  .layout-list .productbox-variations {
    display: none !important;
  }

  #product-list.layout-list .productbox-details,
  .layout-list .productbox-details {
    display: block !important;
    flex: 1 1 200px;
    width: auto;
    max-width: none;
    padding: 0;
    order: 1;
  }

  #product-list.layout-list .productbox-details dl,
  .layout-list .productbox-details dl {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
  }

  /* dt/dd sind Bootstrap-Grid-Spalten (.col-6) — deren feste 50%-Breite
     ergab bei kurzen Werten wie "Artikelnummer: 15" riesige Lücken.
     flex:0 0 auto + width:auto lässt sie sich am Inhalt orientieren. */
  #product-list.layout-list .productbox-details dt,
  #product-list.layout-list .productbox-details dd,
  .layout-list .productbox-details dt,
  .layout-list .productbox-details dd {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--g2g-text-muted);
    white-space: nowrap;
  }

  #product-list.layout-list .productbox-details dt,
  .layout-list .productbox-details dt {
    margin-right: 0.3rem;
  }

  /* Bei Artikeln mit echten Varianten rendert JTL ein 2. dt/dd-Paar
     "Variationen in: <Liste>" direkt hinter der Artikelnummer — seit
     wir .productbox-details erzwungen anzeigen (s.o.), blutet das
     durch. Variantenwahl passiert nur auf der Artikelseite, daher weg. */
  #product-list.layout-list .productbox-details dl dt:nth-of-type(n + 2),
  #product-list.layout-list .productbox-details dl dd:nth-of-type(n + 2),
  .layout-list .productbox-details dl dt:nth-of-type(n + 2),
  .layout-list .productbox-details dl dd:nth-of-type(n + 2) {
    display: none !important;
  }

  /* Bei Varianten-Artikeln zeigt JTL statt Warenkorb-Button eine
     Sackgassen-Meldung ("... wählen Sie bitte die gewünschte
     Variation aus") — ohne Auswahl (die haben wir global deaktiviert)
     ist das ein Dead-End. custom.js ersetzt sie per JS durch einen
     "Zum Artikel"-Link; hier nur das Rohlayout, falls JS mal spät lädt. */
  #product-list.layout-list .alert.choose-variations,
  .layout-list .alert.choose-variations {
    display: none !important;
  }

  #product-list.layout-list .productbox-options,
  .layout-list .productbox-options {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 1.25rem;
    text-align: right !important;
  }

  #product-list.layout-list .item-list-price,
  .layout-list .item-list-price {
    text-align: right;
  }

  #product-list.layout-list .price_wrapper,
  .layout-list .price_wrapper {
    padding: 0 !important;
  }

  #product-list.layout-list .item-delivery-status,
  .layout-list .item-delivery-status {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  /* NOVA versteckt den Kauf-Bereich per opacity:0 bis :hover/:focus —
     in der Listenansicht ist das der einzige Warenkorb-Button, der
     darf nie unsichtbar sein */
  #product-list.layout-list .productbox-actions.productbox-onhover,
  .layout-list .productbox-actions.productbox-onhover {
    opacity: 1 !important;
  }

  #product-list.layout-list .productbox-actions,
  .layout-list .productbox-actions {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
  }

  #product-list.layout-list .productbox-actions .col-12,
  .layout-list .productbox-actions .col-12 {
    width: auto;
    max-width: none;
    padding: 0;
    flex: 0 0 auto;
  }

  #product-list.layout-list .productbox-actions .form-counter,
  .layout-list .productbox-actions .form-counter {
    width: auto;
  }

  #product-list.layout-list .basket-details-add-to-cart,
  .layout-list .basket-details-add-to-cart {
    width: auto;
    white-space: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Schmalere Content-Spalte (Sidebar-Filter nimmt Platz weg) —
     kleineres Bild gibt der Kauf-Zeile mehr Raum, bevor sie umbricht */
  #product-list.layout-list .productbox-inner > .row > .col:first-child,
  .layout-list .productbox-inner > .row > .col:first-child {
    flex-basis: 120px;
    width: 120px;
    max-width: 120px;
  }
}

/* --- Filter-Sidebar --- */
.productlist-filter-headline {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--g2g-text-muted) !important;
  padding-bottom: 0.45rem !important;
  margin-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--g2g-hell-border) !important;
}

.productlist-filter,
.box-filter-characteristics,
.box-categories,
.box.box-linkgroup {
  background: transparent;
  border: none !important;
  border-radius: 0;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
}

.box-normal-link.dropdown-toggle {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--g2g-text-muted) !important;
  padding: 0 0 0.45rem !important;
  border-bottom: 1px solid var(--g2g-hell-border) !important;
  text-decoration: none !important;
}

/* Mobile-Accordion-Toggle nur mobil zeigen — NOVA blendet ihn ab 768px
   selbst per `display: none` aus; ohne diese Media-Query hätte unser
   `display: block` das überschrieben → doppelte Überschriften auf
   Tablet/Desktop (Toggle + statische Headline gleichzeitig sichtbar) */
@media (max-width: 767.98px) {
  .box-normal-link.dropdown-toggle {
    display: block;
  }
}

.box-normal-link.dropdown-toggle::after {
  border-top-color: var(--g2g-text-muted);
  opacity: 0.6;
}

/* Nav-Links in Sidebar */
.nav-panel .nav-link,
.box-nav-item .nav-link,
.nav-panel a,
.box-categories a,
.snippet-categories a {
  font-size: 0.875rem;
  color: var(--g2g-text-muted);
  padding: 0.3rem 0 !important;
  border-bottom: none !important;
  transition: color 0.12s, padding-left 0.12s;
  text-decoration: none;
}

.nav-panel .nav-link:hover,
.box-nav-item .nav-link:hover,
.nav-panel a:hover,
.box-categories a:hover {
  color: var(--g2g-btn);
  padding-left: 0.3rem !important;
}

.nav-panel .nav-link.active,
.box-nav-item .nav-link.active,
.box-filter-characteristics .active {
  color: var(--g2g-btn) !important;
  font-weight: 700;
}

/* Checkboxen + Radiobuttons (Merkmal-Filter) */
.box-filter-characteristics .form-check-label,
.filter-item label {
  font-size: 0.875rem;
  color: var(--g2g-text);
  cursor: pointer;
}

.box-filter-characteristics input[type="checkbox"],
.box-filter-characteristics input[type="radio"],
.filter-item input[type="checkbox"] {
  accent-color: var(--g2g-gold);
  margin-right: 0.4rem;
}

/* Preisspanne-Inputs */
.filter-price,
.snippets-filter-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.filter-price input[type="text"],
.filter-price input[type="number"],
.snippets-filter-price input,
#snippets-filter input[type="text"] {
  border: 1px solid var(--g2g-hell-border) !important;
  border-radius: var(--g2g-radius) !important;
  font-size: 0.8125rem !important;
  color: var(--g2g-text) !important;
  background: var(--g2g-white) !important;
  padding: 0.35rem 0.55rem !important;
  width: 72px !important;
  text-align: center !important;
}

.filter-price .unit,
.filter-price label {
  font-size: 0.75rem;
  color: var(--g2g-text-muted);
  white-space: nowrap;
}

/* noUi Range-Slider (Preisspanne) */
.noUi-target {
  background: var(--g2g-hell-border) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  height: 4px !important;
  margin: 1rem 0 0.5rem !important;
}

.noUi-connect {
  background: var(--g2g-gold) !important;
}

.noUi-handle {
  border: 2px solid var(--g2g-gold) !important;
  background: var(--g2g-white) !important;
  box-shadow: 0 1px 6px var(--g2g-gold-soft-strong) !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  top: -8px !important;
  right: -9px !important;
  cursor: pointer;
}

.noUi-handle::before,
.noUi-handle::after {
  display: none !important;
}

/* Nativer range-Input fallback */
input[type="range"] {
  accent-color: var(--g2g-gold);
}

/* --- Sortier-/Ergebniszeile --- */
.productlist-result-options,
.result-options {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.25rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--g2g-hell-border);
  border-bottom: 1px solid var(--g2g-hell-border);
}

/* Sortierung / Artikel-pro-Seite Buttons */
.result-options .btn,
.result-options .dropdown-toggle,
.productlist-result-options .btn,
.productlist-result-options .dropdown-toggle {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--g2g-text) !important;
  background: var(--g2g-white) !important;
  border: 1px solid var(--g2g-hell-border) !important;
  border-radius: var(--g2g-radius) !important;
  padding: 0.35rem 0.8rem !important;
  transition: border-color 0.12s, color 0.12s !important;
}

.result-options .btn:hover,
.result-options .dropdown-toggle:hover,
.productlist-result-options .btn:hover {
  border-color: var(--g2g-gold) !important;
  color: var(--g2g-btn) !important;
  background: var(--g2g-white) !important;
}

/* Listenansicht aus — nur Galerie. Toggle komplett weg. */
#ed_list,
#ed_gallery,
.btn-group:has(> #ed_list),
.btn-option.ed.list,
.btn-option.ed.gallery {
  display: none !important;
}

/* Pagination 1 2 3 4 aus — Endless Scroll in custom.js */
#result-wrapper .productlist-pagination,
#result-wrapper .navbar-pagination,
#result-wrapper .pagination,
.productlist-pagination {
  display: none !important;
}

.g2g-plp-sentinel {
  width: 100%;
  min-height: 1px;
  clear: both;
  grid-column: 1 / -1;
}

.g2g-plp-sentinel.is-loading {
  min-height: 2.5rem;
  padding: 1rem 0 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--g2g-text-muted);
}

/* Ausverkauft-Umsortierung ENTFERNT (Ioannis 15.09.2026): Die CSS-order-
   Gruppierung sprang beim Endless Scroll (neue alphabetische Seiten schoben
   sich vor bereits gerenderte Ausverkaufte). Jetzt bleibt alles in
   Original-Reihenfolge; Ausverkauftes ist nur ausgegraut (.g2g-sold-out). */

/* Artikel-Anzahl rechts */
.result-options .result-count,
.result-options .count {
  font-size: 0.8125rem;
  color: var(--g2g-text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* Dropdown-Menü Sortierung */
.result-options .dropdown-menu,
.productlist-result-options .dropdown-menu {
  border: 1px solid var(--g2g-hell-border) !important;
  border-radius: var(--g2g-radius) !important;
  box-shadow: var(--g2g-shadow) !important;
  background: var(--g2g-white) !important;
  padding: 0.35rem 0 !important;
}

.result-options .dropdown-item,
.productlist-result-options .dropdown-item {
  font-size: 0.875rem !important;
  color: var(--g2g-text) !important;
  padding: 0.4rem 1rem !important;
}

.result-options .dropdown-item:hover,
.productlist-result-options .dropdown-item:hover {
  background: var(--g2g-hell) !important;
  color: var(--g2g-btn) !important;
}

.result-options .dropdown-item.active,
.productlist-result-options .dropdown-item.active {
  background: transparent !important;
  color: var(--g2g-btn) !important;
  font-weight: 700 !important;
}

/* --- Bestseller-Slider --- */
#slider-top-products {
  margin-bottom: 2rem;
}

#slider-top-products .productbox {
  border-radius: var(--g2g-radius);
}

/* ============================================================
   Alerts & Shop-Meldungen — Fable
   ============================================================ */

/* Erfolg (Artikel hinzugefügt, Bestellung etc.) */
.alert-success,
.alert.alert-success {
  background: var(--g2g-success-bg) !important;
  border: 1px solid var(--g2g-success-border) !important;
  color: var(--g2g-success) !important;
  border-radius: var(--g2g-radius) !important;
  padding: 0.85rem 1rem !important;
}

.alert-success a,
.alert.alert-success a {
  color: var(--g2g-success) !important;
  font-weight: 600;
}

/* Info (Varianten-Hinweis etc.) */
.alert-info,
.alert.alert-info,
.alert.choose-variations {
  background: var(--g2g-hell) !important;
  border: 1px solid var(--g2g-hell-border) !important;
  color: var(--g2g-btn) !important;
  border-radius: var(--g2g-radius) !important;
  padding: 0.75rem 1rem !important;
}

/* Warnung */
.alert-warning,
.alert.alert-warning {
  background: var(--g2g-warning-bg) !important;
  border: 1px solid var(--g2g-warning-border) !important;
  color: var(--g2g-dark-mid) !important;
  border-radius: var(--g2g-radius) !important;
}

/* Fehler */
.alert-danger,
.alert.alert-danger {
  background: var(--g2g-danger-bg) !important;
  border: 1px solid var(--g2g-danger-border) !important;
  color: var(--g2g-danger) !important;
  border-radius: var(--g2g-radius) !important;
}

/* ============================================================
   Produkt-Detailseite (PDP)
   ============================================================ */

.product-detail {
  padding-top: 1rem;
}

/* Produktname */
#product-offer h1,
.product-detail h1,
.product-detail .product-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

/* Availability ("Sofort verfügbar", "Auf Lager") */
.list-inline.availability-list,
.product-availability,
[class*=availability],
.availability-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--g2g-success);
}

/* Artikel-Eigenschaften (Artikelnummer, Gewicht etc.) */
.product-properties,
.product-specs,
.details-list,
.product-details-list,
.article-attributes,
[class*=product-attribute],
[class*=article-attribute] {
  font-size: 0.875rem;
}

.product-properties dt,
.product-specs dt,
.article-attributes dt {
  font-weight: 600;
  color: var(--g2g-text);
}

.product-properties dd,
.article-attributes dd {
  color: var(--g2g-text-muted);
}

/* PDP: Stammdaten nur in aside.g2g-desc-specs — Duplikat unter dem Titel weg.
   Nicht .g2g-desc-specs treffen (liegt in den Tabs, nicht in .product-info). */
#product-offer .product-info .info-essential,
.product-detail .product-info .info-essential,
#product-offer .product-info .product-attributes,
.product-detail .product-info .product-attributes {
  display: none;
}

/* PDP Merkmale — Steckbrief neben der Beschreibung (Indras: Text | Tabelle).
   Nicht in der Kaufspalte, nicht als Filter-Pillen. NOVA-Tabelle stylen. */
#tab-description .desc:has(> p:only-child:empty) {
  display: none;
}

.g2g-desc-specs {
  min-width: 0;
  width: min(100%, 32rem);
}

@media (min-width: 992px) {
  /* #product-tabs ist nur die Nav-<ul>, Inhalt liegt in #tab-content-product-tabs */
  #tab-description.tab-pane {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 2.5rem;
    align-items: flex-start;
  }

  #tab-description.tab-pane > .desc {
    flex: 1 1 18rem;
    min-width: 0;
  }

  #tab-description.tab-pane > .g2g-desc-specs {
    flex: 0 1 24rem;
    width: 100%;
    max-width: 26rem;
  }

  #tabAccordion #tab-description > .card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 2.5rem;
    align-items: flex-start;
  }

  #tabAccordion #tab-description > .card-body > .desc {
    flex: 1 1 18rem;
    min-width: 0;
  }

  #tabAccordion #tab-description > .card-body > .g2g-desc-specs {
    flex: 0 1 24rem;
    width: 100%;
    max-width: 26rem;
  }
}

@media (max-width: 991.98px) {
  .g2g-desc-specs {
    max-width: none;
    margin-top: 0.25rem;
  }
}

.g2g-desc-specs .product-attributes {
  margin: 0;
  padding: 0;
  background: var(--g2g-hell);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  overflow: hidden;
}

.g2g-desc-specs .table,
.g2g-desc-specs .table-striped,
.g2g-desc-specs .table-bordered-outline {
  width: 100%;
  margin: 0;
  background: var(--g2g-hell);
  border: 0;
  color: var(--g2g-text);
}

.g2g-desc-specs .table-striped tbody tr:nth-of-type(odd),
.g2g-desc-specs .table-striped tbody tr:nth-of-type(even) {
  background-color: transparent;
}

.g2g-desc-specs .table td {
  border: 0;
  border-bottom: 1px solid var(--g2g-hell-border);
  padding: 0.55rem 0.85rem;
  vertical-align: top;
  background: transparent !important;
}

.g2g-desc-specs .table tr:last-child td {
  border-bottom: 0;
}

.g2g-desc-specs .table td.h6 {
  width: 42%;
  max-width: 12rem;
  margin: 0;
  padding-right: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--g2g-text-muted);
  white-space: normal;
}

.g2g-desc-specs .table td.attr-characteristic,
.g2g-desc-specs .table td.attr-value,
.g2g-desc-specs .table td.weight-unit {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--g2g-text);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.g2g-desc-specs .attr-characteristic {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.g2g-desc-specs td.attr-characteristic:has(.g2g-spec-value) {
  display: block;
}

.g2g-desc-specs .g2g-spec-value {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.g2g-desc-specs a.g2g-spec-link {
  color: var(--g2g-btn);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  font-weight: 500;
}

.g2g-desc-specs a.g2g-spec-link:hover,
.g2g-desc-specs a.g2g-spec-link:focus {
  color: var(--g2g-dark);
}

@media (max-width: 575.98px) {
  .g2g-desc-specs .table td.h6 {
    width: 36%;
    padding-right: 0.5rem;
  }

  .g2g-desc-specs .table td {
    padding: 0.5rem 0.65rem;
  }
}

.g2g-desc-specs .badge,
.g2g-desc-specs .badge-primary {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--g2g-hell-border);
  border-radius: 4px;
  background: var(--g2g-white) !important;
  color: var(--g2g-text) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
  box-shadow: none;
}

.g2g-desc-specs .badge:hover,
.g2g-desc-specs .badge:focus {
  border-color: var(--g2g-stein);
  color: var(--g2g-dark) !important;
  background: var(--g2g-white) !important;
}

/* Varianten-Select im Kaufformular */
#buy_form select,
.product-buy select {
  border: 1px solid var(--g2g-hell-border) !important;
  border-radius: var(--g2g-radius) !important;
  font-size: 0.9375rem !important;
  color: var(--g2g-text) !important;
  background: var(--g2g-white) !important;
  padding: 0.5rem 0.75rem !important;
  width: 100%;
}

#buy_form select:focus,
.product-buy select:focus {
  border-color: var(--g2g-gold) !important;
  outline: none !important;
  box-shadow: var(--g2g-focus-ring) !important;
}

/* Variation-Badge (Preisaufschlag) */
.variation-badge {
  font-size: 0.75rem;
  color: var(--g2g-text-muted);
  margin-left: 0.3rem;
}

/* "Zurück zur Liste" Link (Breadcrumb-Bereich) */
.back-to-list a,
.breadcrumb-return a,
a[href*="Zurueck"],
a[class*=back-to] {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--g2g-btn) !important;
  text-decoration: none;
}

/* Mengen-Input PDP */
#buy_form input[name="menge"],
.product-buy input[type="number"] {
  width: 64px !important;
  text-align: center !important;
  border: 1px solid var(--g2g-hell-border) !important;
  border-radius: var(--g2g-radius) !important;
  padding: 0.45rem !important;
  font-size: 0.9375rem !important;
}

/* ============================================================
   PDP — Varianten als Buttons (nur #buy_form, nicht PLP-Collapse)
   variant-buttons.js (→ NOVAChild/js/custom.js) baut aus dem
   bootstrap-select (.selectpicker) Buttons.
   Das native <select> bleibt im DOM (JTL braucht Wert + change).
   ============================================================ */

/* bootstrap-select-Widget + natives Select ausblenden, sobald Buttons da sind.
   CSS statt JS-Hide → schlägt auch späte selectpicker-Initialisierung */
.g2g-variant-host .bootstrap-select,
.g2g-variant-host select.g2g-variant-native {
  display: none !important;
}

.g2g-variant-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

.g2g-variant-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.45rem 1.1rem;
  min-height: 44px;
  border: 1.5px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  background: var(--g2g-white);
  color: var(--g2g-text);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  line-height: 1.25;
  text-align: center;
}

.g2g-variant-btn:hover {
  border-color: var(--g2g-gold);
  color: var(--g2g-btn);
  background: var(--g2g-white);
}

.g2g-variant-name {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Gewählt: brauner Rand, Papierfläche. Die braune Fläche bleibt dem Warenkorb-Button. */
.g2g-variant-btn.active {
  border: 2px solid var(--g2g-btn);
  background: var(--g2g-white);
  color: var(--g2g-dark);
}

/* Nicht verfügbar: Caption UNTER dem Namen, kein Text-über-Text */
.g2g-variant-btn.g2g-variant-unavailable {
  cursor: pointer;
  background: var(--g2g-hell);
  border-style: dashed;
  border-color: var(--g2g-hell-border);
  color: var(--g2g-text-muted);
  min-height: 52px;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.g2g-variant-btn.g2g-variant-unavailable .g2g-variant-name {
  color: var(--g2g-text-muted);
}

.g2g-variant-btn.g2g-variant-unavailable:hover {
  border-color: var(--g2g-gold);
  color: var(--g2g-text-muted);
}

/* Ausverkauft + gewählt: Auswahl per Gold-Rand sichtbar, aber gedämpft */
.g2g-variant-btn.g2g-variant-unavailable.active {
  background: var(--g2g-hell);
  border-style: solid;
  border-color: var(--g2g-btn);
  color: var(--g2g-dark);
}

.g2g-variant-btn.g2g-variant-unavailable.active .g2g-variant-name {
  color: var(--g2g-dark);
}

.g2g-variant-note {
  display: block;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g2g-soldout);
  line-height: 1.2;
  white-space: normal;
}



/* ============================================================
   PDP — Indras-Struktur, A3-Tokens (kein Pink)
   Varianten-Kacheln, keine Sidebar, Tabs, Cross-sell
   ============================================================ */

body:has(#product-offer) #sidepanel_left,
body:has(#product-offer) .sidepanel-left,
body:has(.product-detail) #sidepanel_left,
body:has(.product-detail) .sidepanel-left {
  display: none !important;
}

body:has(#product-offer) #content .col-lg-8.col-xl-9,
body:has(#product-offer) #content .col-lg-8,
body:has(#product-offer) #content > .row > [class*="col-lg-8"],
body:has(.product-detail) #content .col-lg-8.col-xl-9,
body:has(.product-detail) #content .col-lg-8 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
}

#product-offer {
  max-width: var(--g2g-content-max);
  margin-left: auto;
  margin-right: auto;
}

#buy_form .g2g-variant-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
}

#buy_form .g2g-variant-btn {
  min-width: 0;
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.75rem;
  border-width: 1px;
  text-align: left;
  align-items: flex-start;
}

#buy_form .g2g-variant-btn.active,
#buy_form .g2g-variant-btn.g2g-variant-unavailable.active {
  border: 2px solid var(--g2g-btn);
  background: var(--g2g-white);
  color: var(--g2g-dark);
}

#buy_form .g2g-variant-btn.g2g-variant-unavailable.active {
  background: var(--g2g-hell);
}

@media (max-width: 991.98px) {
  #buy_form .g2g-variant-buttons {
    grid-template-columns: minmax(0, 1fr);
  }
}

.product-detail .nav-tabs,
#content .product-detail .nav-tabs,
.nav-tabs.product-tabs {
  border-bottom: 1px solid var(--g2g-hell-border);
  margin-top: 2rem;
  gap: 0.25rem;
}

.product-detail .nav-tabs .nav-link,
.nav-tabs.product-tabs .nav-link {
  color: var(--g2g-text-muted);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  font-weight: 600;
  padding: 0.7rem 0.9rem;
  min-height: 44px;
}

.product-detail .nav-tabs .nav-link:hover,
.nav-tabs.product-tabs .nav-link:hover {
  color: var(--g2g-text);
  border-bottom-color: var(--g2g-gold);
  background: transparent;
}

.product-detail .nav-tabs .nav-link.active,
.nav-tabs.product-tabs .nav-link.active {
  color: var(--g2g-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--g2g-gold);
}

.product-detail .tab-content,
#content .tab-content {
  padding-top: 1.25rem;
  color: var(--g2g-text);
}

#xselling,
.xselling,
[id*="xselling"],
.product-recommendations,
.recommendations,
.product-list-recommendation {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--g2g-hell-border);
}

#xselling .hr-sect,
.xselling .hr-sect,
.product-recommendations .hr-sect,
.recommendations .hr-sect {
  color: var(--g2g-text);
  border-bottom-color: var(--g2g-gold);
}

/* ============================================================
   Warenkorb-Dropdown (Header-Popup)
   Wichtig: nur sichtbar mit .show — sonst bleibt Mobile-Sheet dauerhaft offen
   ============================================================ */

/* Geschlossen = komplett weg (schlägt NOVA + unser Flex) */
#cart-dropdown-container.cart-dropdown:not(.show) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#cart-dropdown-container.cart-dropdown.show {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Breite in px: Desktop rendert Text ×1.25 bei 85 %-Root, rem-Breite wäre zu schmal */
#cart-dropdown-container.cart-dropdown {
  width: min(400px, calc(100vw - 1.25rem)) !important;
  max-width: calc(100vw - 1.25rem) !important;
  padding: 0 !important;
  margin-top: 0.6rem !important;
  background: var(--g2g-white) !important;
  border: 1px solid var(--g2g-hell-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--g2g-shadow-xl) !important;
  overflow: hidden;
  color: var(--g2g-text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

/* --- Kopfzeile: Titel + Artikelanzahl --- */
#cart-dropdown-container .g2g-cart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.15rem 1.35rem 0.95rem;
  border-bottom: 1px solid var(--g2g-hell-border);
}

#cart-dropdown-container .g2g-cart-head-title {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--g2g-dark);
}

#cart-dropdown-container .g2g-cart-head-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--g2g-text-muted);
}

#cart-dropdown-container .table-responsive {
  margin: 0;
  padding: 0 !important;
  max-height: min(38vh, 17rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 0;
}

#cart-dropdown-container .dropdown-cart-items {
  width: 100%;
  margin: 0 !important;
  background: transparent;
}

#cart-dropdown-container .dropdown-cart-items .form-row > .col {
  min-width: 0;
  overflow-wrap: break-word;
}

#cart-dropdown-container .dropdown-cart-items td {
  border-top: 0 !important;
  border-bottom: 1px solid var(--g2g-hell-border) !important;
  padding: 1rem 1.35rem !important;
  vertical-align: middle;
  color: var(--g2g-text);
  font-size: 0.875rem;
}

#cart-dropdown-container .dropdown-cart-items tr:last-child td {
  border-bottom: 0 !important;
}

#cart-dropdown-container .dropdown-cart-items .img-sm,
#cart-dropdown-container .dropdown-cart-items img {
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  object-fit: contain;
  border-radius: 8px;
  background: var(--g2g-hell);
  border: 1px solid var(--g2g-hell-border);
  padding: 4px;
}

#cart-dropdown-container .dropdown-cart-items .form-row {
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.15rem;
}

#cart-dropdown-container .dropdown-cart-items .col-auto + .col-auto {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--g2g-text-muted);
  padding-right: 0.35rem !important;
}

#cart-dropdown-container .dropdown-cart-items a {
  color: var(--g2g-text) !important;
  font-weight: 600;
  text-decoration: none !important;
}

#cart-dropdown-container .dropdown-cart-items a:hover {
  color: var(--g2g-btn) !important;
}

#cart-dropdown-container .dropdown-cart-items .text-right-util {
  color: var(--g2g-text) !important;
  font-weight: 700;
  font-size: 0.875rem;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  white-space: nowrap;
}

/* --- Artikel im Popup entfernen --- */
#cart-dropdown-container .g2g-cart-remove-cell {
  padding-left: 0 !important;
  padding-right: 1.1rem !important;
  width: 1%;
  white-space: nowrap;
}

#cart-dropdown-container .g2g-cart-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--g2g-text-muted);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

#cart-dropdown-container .g2g-cart-remove:hover,
#cart-dropdown-container .g2g-cart-remove:focus {
  background: var(--g2g-hell);
  color: var(--g2g-danger);
}

#cart-dropdown-container .g2g-cart-remove:disabled {
  opacity: 0.4;
  cursor: default;
}

#cart-dropdown-container .dropdown-cart-items tr.g2g-cart-item-removing {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s;
}

#cart-dropdown-container .dropdown-body {
  padding: 1.1rem 1.35rem 1.25rem !important;
  background: var(--g2g-white);
  border-top: 1px solid var(--g2g-hell-border);
}

#cart-dropdown-container .dropdown-body .list-unstyled {
  margin: 0 0 1rem !important;
  padding: 0;
}

#cart-dropdown-container .cart-dropdown-total-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--g2g-text-muted) !important;
  line-height: 1.45;
  margin-bottom: 0.35rem;
}

#cart-dropdown-container .cart-dropdown-total-item:not(:has(.cart-dropdown-total-item-price)) {
  display: block;
  margin-top: 0.25rem;
}

#cart-dropdown-container .cart-dropdown-total-item a {
  color: var(--g2g-btn) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#cart-dropdown-container .cart-dropdown-total-item-price {
  font-weight: 600;
  color: var(--g2g-text);
  white-space: nowrap;
}

#cart-dropdown-container .font-weight-bold-util {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.5rem !important;
  padding-top: 0.65rem;
  border-top: 1px solid var(--g2g-hell-border);
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--g2g-text) !important;
}

#cart-dropdown-container .font-weight-bold-util .cart-dropdown-total-item-price {
  color: var(--g2g-btn) !important;
  font-size: 1.1875rem;
  font-weight: 800;
}

/* Zwei gleichwertige, großzügige Buttons */
#cart-dropdown-container .cart-dropdown-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem;
  margin: 0 !important;
}

#cart-dropdown-container .cart-dropdown-buttons > [class*="col"] {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

#cart-dropdown-container .cart-dropdown-buttons > [class*="col"]:has(.cart-dropdown-next) {
  order: 1;
}

#cart-dropdown-container .cart-dropdown-buttons > [class*="col"]:not(:has(.cart-dropdown-next)) {
  order: 2;
}

#cart-dropdown-container .cart-dropdown-buttons .btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px !important;
  padding: 0.7rem 1.1rem !important;
  border-radius: var(--g2g-radius) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

#cart-dropdown-container a.cart-dropdown-next.btn,
#cart-dropdown-container a.cart-dropdown-next {
  background: var(--g2g-btn) !important;
  border: 1.5px solid var(--g2g-btn) !important;
  color: var(--g2g-white) !important;
}

#cart-dropdown-container a.cart-dropdown-next:hover,
#cart-dropdown-container a.cart-dropdown-next:focus {
  background: var(--g2g-text) !important;
  border-color: var(--g2g-gold) !important;
  color: var(--g2g-white) !important;
}

/* „Zum Warenkorb" als vollwertiger, ruhiger Sekundär-Button (kein dünner Textlink) */
#cart-dropdown-container .cart-dropdown-buttons .btn-primary:not(.cart-dropdown-next) {
  background: var(--g2g-white) !important;
  border: 1.5px solid var(--g2g-hell-border) !important;
  color: var(--g2g-text) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#cart-dropdown-container .cart-dropdown-buttons .btn-primary:not(.cart-dropdown-next):hover,
#cart-dropdown-container .cart-dropdown-buttons .btn-primary:not(.cart-dropdown-next):focus {
  border-color: var(--g2g-btn) !important;
  color: var(--g2g-btn) !important;
  background: var(--g2g-hell) !important;
}

#cart-dropdown-container .cart-dropdown-shipping-notice {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--g2g-hell-border);
  color: var(--g2g-text-muted);
  font-size: 0.8125rem;
}

#cart-dropdown-container .cart-dropdown-shipping-notice .fas {
  color: var(--g2g-btn) !important;
}

#cart-dropdown-container .item-overflow-notice {
  padding: 0.65rem 1.35rem;
  font-size: 0.8125rem;
  color: var(--g2g-text-muted);
}

/* --- Leer --- */
#cart-dropdown-container .g2g-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
}

#cart-dropdown-container .g2g-cart-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.35rem;
  border-radius: 50%;
  background: var(--g2g-hell);
  color: var(--g2g-btn);
  font-size: 1.3125rem;
}

#cart-dropdown-container .g2g-cart-empty-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--g2g-dark);
}

#cart-dropdown-container .g2g-cart-empty-text {
  margin: 0 0 0.9rem;
  max-width: 17rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--g2g-text-muted);
}

#cart-dropdown-container .g2g-cart-empty-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.35rem !important;
  border-radius: var(--g2g-radius) !important;
  background: var(--g2g-btn) !important;
  border: 1.5px solid var(--g2g-btn) !important;
  color: var(--g2g-white) !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
}

#cart-dropdown-container .g2g-cart-empty-cta:hover,
#cart-dropdown-container .g2g-cart-empty-cta:focus {
  background: var(--g2g-text) !important;
  border-color: var(--g2g-gold) !important;
  color: var(--g2g-white) !important;
}

#cart-dropdown-container .cart-dropdown-empty,
#cart-dropdown-container a.cart-dropdown-empty,
#cart-dropdown-container .dropdown-item.cart-dropdown-empty {
  display: block !important;
  padding: 1.5rem 1.35rem !important;
  margin: 0 !important;
  text-align: center;
  white-space: normal !important;
  color: var(--g2g-text-muted) !important;
  background: var(--g2g-white) !important;
  border: 0 !important;
  font-size: 0.875rem !important;
}

@media (min-width: 992px) {
  #cart-dropdown-container.cart-dropdown {
    width: 440px !important;
  }
}

/* Mobile: volle Breite unter dem Header — nur wenn .show */
@media (max-width: 767.98px) {
  #cart-dropdown-container.cart-dropdown.show {
    position: fixed !important;
    top: auto !important;
    right: 0.75rem !important;
    left: 0.75rem !important;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 16px !important;
    max-height: min(75vh, 32rem);
    z-index: 1080 !important;
    transform: none !important;
  }

  #cart-dropdown-container .g2g-cart-head {
    padding: 1.1rem 1.15rem 0.85rem;
  }

  #cart-dropdown-container .table-responsive {
    max-height: min(34vh, 14rem);
  }

  #cart-dropdown-container .dropdown-cart-items td {
    padding: 0.9rem 1.15rem !important;
  }

  #cart-dropdown-container .dropdown-body {
    padding: 1rem 1.15rem 1.1rem !important;
  }

  /* Auf dem Handy: primäre Aktion oben, direkt unter dem Daumen erreichbar */
  #cart-dropdown-container .cart-dropdown-buttons > [class*="col"]:has(.cart-dropdown-next) {
    order: 1;
  }
}

/* ============================================================
   Warenkorb-Seite (Basket)
   ============================================================ */

.basket-heading {
  font-size: 1.625rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  border-bottom: 3px solid var(--g2g-gold) !important;
  padding-bottom: 0.45rem !important;
  display: inline-block !important;
  margin-bottom: 1.25rem !important;
}

/* Artikel-Tabellenkopf */
.cart-items-header,
.row.cart-items-header {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--g2g-text-muted) !important;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--g2g-hell-border);
  margin-bottom: 0.75rem;
}

/* Einzelne Artikel-Zeile */
.cart-item-row,
[class*=cart-item-] {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--g2g-hell-border);
}

/* Zusammenfassungs-Karte (rechts) */
.card.card-gray,
.basket-summary.card,
.basket .card {
  background: var(--g2g-white) !important;
  border: 1px solid var(--g2g-hell-border) !important;
  border-radius: var(--g2g-radius) !important;
  box-shadow: none !important;
}

.card-gray .card-header,
.basket .card .card-header {
  background: var(--g2g-hell) !important;
  border-bottom: 1px solid var(--g2g-hell-border) !important;
  border-radius: var(--g2g-radius) var(--g2g-radius) 0 0 !important;
  font-size: 0.8125rem !important;
  color: var(--g2g-text-muted) !important;
  padding: 0.65rem 1rem !important;
}

.card-gray .card-body,
.basket .card .card-body {
  padding: 1rem !important;
}

/* Menge-Stepper im Warenkorb */
.basket .quantity-spinners,
.basket input[type="number"][name*="menge"],
.basket input[name="menge_"] {
  width: 56px !important;
  text-align: center !important;
  border: 1px solid var(--g2g-hell-border) !important;
  border-radius: var(--g2g-radius) !important;
  padding: 0.35rem !important;
}

.basket .btn-qty,
.basket .btn[name*="qty"],
.basket button[aria-label*="Menge"] {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: var(--g2g-radius) !important;
  background: var(--g2g-hell) !important;
  border: 1px solid var(--g2g-hell-border) !important;
  color: var(--g2g-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color 0.12s, color 0.12s !important;
}

.basket .btn-qty:hover {
  border-color: var(--g2g-gold) !important;
  color: var(--g2g-btn) !important;
}

/* Versandkosten-Bereich */
.basket-shipping-container,
[class*=shipping-cost] {
  font-size: 0.875rem;
  color: var(--g2g-text-muted);
}

/* "Zur Kasse" CTA */
a.btn-basket-order,
.basket-summary a.btn-primary,
.basket .btn-checkout {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  font-size: 1rem !important;
  padding: 0.75rem !important;
}

/* Produkt in Warenkorb: "Weiter einkaufen" / "Zum Warenkorb" Buttons */
.basket-added-buttons,
[class*=added-to-basket] .btn,
.after-basket-add .btn {
  width: 100%;
}

/* ============================================================
   Tablet (768–991px) — PLP & PDP
   ============================================================ */

@media (min-width: 768px) and (max-width: 991.98px) {
  /* PLP: 2 Spalten statt 4 */
  #product-list.layout-gallery .product-wrapper {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Sidebar kompakter */
  .productlist-filter-headline {
    font-size: 0.75rem !important;
  }

  /* PDP: Bildgalerie unterhalb auf Tablet */
  .product-gallery {
    margin-bottom: 1.25rem;
  }
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 767.98px) {
  /* Safe area + kein horizontaler Scroll */
  #content-wrapper {
    padding-left: 16px;
    padding-right: 16px;
    overflow-x: clip;
  }

  .container,
  .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Touch-Ziele */
  .btn,
  .btn-primary,
  .navbar-toggler,
  .cart-icon-dropdown,
  .account-icon-dropdown {
    min-height: 44px;
    min-width: 44px;
  }

  /* Header kompakter */
  .navbar-main {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  /* Startseite OPC */
  .g2g-homepage {
    padding-left: 0;
    padding-right: 0;
  }

  .g2g-topbar {
    font-size: 0.75rem;
    line-height: 1.35;
    padding: 0.45rem 0.65rem;
    margin-bottom: 1.25rem;
  }

  .g2g-hero-copy h1 {
    font-size: 2.125rem;
  }

  .g2g-hero-copy > p:not(.g2g-hero-hours) {
    font-size: 1rem;
  }

  .g2g-hero-copy .btn-primary,
  .g2g-hero-copy a.btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  .g2g-trust-pills {
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .g2g-trust-pills span {
    font-size: 0.8125rem;
    padding: 0.5rem 0.85rem;
  }

  /* Kategorien: 2 Spalten, letzte Kachel volle Breite */
  .g2g-cat-grid .col-6 {
    padding-left: 6px;
    padding-right: 6px;
  }

  .g2g-cat-grid > div:last-child {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .g2g-cat-grid > div:last-child .g2g-cat-media:not(:empty) {
    aspect-ratio: 16 / 6;
  }

  .g2g-cat-tile span {
    font-size: 0.875rem;
    padding: 0.7rem 0.85rem;
  }

  .g2g-section-title,
  .g2g-homepage .opc-Heading h2,
  .g2g-section-head h2 {
    font-size: 1.375rem;
    margin-top: 2rem;
  }

  .g2g-usps {
    padding: 1rem;
  }

  .g2g-store,
  .g2g-store-card {
    padding: 1.5rem 1.25rem;
    text-align: left;
  }

  .g2g-store h2,
  .g2g-store-card h2 {
    font-size: 1.375rem;
  }

  .g2g-store-card .g2g-static-media:not(:empty) {
    min-height: 180px;
    margin-top: 1rem;
  }

  .g2g-seedbanks {
    padding: 1rem;
  }

  /* OPC ProductStream: 2 Spalten erzwingen */
  .opc-ProductStream.gallery .product-wrapper {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .opc-ProductStream .productbox-title {
    font-size: 0.875rem;
    line-height: 1.35;
  }

  /* === Kategorie-Seite Mobile === */

  .productlist-header-description .title h1,
  .productlist-header-description .title .h2 {
    font-size: 1.5rem;
  }

  .productlist-header-description-image {
    max-height: 160px;
    width: 100%;
    object-fit: cover;
  }

  .productlist-header-description .desc {
    font-size: 0.9375rem;
  }

  .g2g-plp-chips {
    margin-bottom: 1rem;
  }

  .g2g-plp-chip {
    font-size: 0.8125rem;
    padding: 0.4rem 0.85rem;
  }

  #collapseFilter .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  /* Produktgrid */
  #product-list.layout-gallery .product-wrapper {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 1rem;
  }

  #product-list .productbox-title,
  #product-list .productbox-title a {
    font-size: 0.875rem !important;
    line-height: 1.35;
  }

  #product-list .price,
  #product-list .price-regular {
    font-size: 1rem !important;
  }

  /* Filter & Sortierung Mobile */
  .snippets-filter-mobile-heading {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
  }

  .snippets-filter-mobile-item .btn,
  .snippets-filter-mobile-sorting-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .productlist-result-options,
  .result-options {
    font-size: 0.875rem;
  }

  .breadcrumb {
    font-size: 0.8125rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
  }

  /* Warenkorb-Dropdown */
  .dropdown-menu {
    max-width: calc(100vw - 2rem);
  }

  /* Warenkorb-Seite Mobile */
  .basket-heading {
    font-size: 1.375rem !important;
  }

  .card.card-gray,
  .basket .card {
    margin-top: 1.25rem;
  }

  /* PDP Mobile */
  #product-offer h1,
  .product-detail h1 {
    font-size: 1.5rem;
  }

  #buy_form select,
  .product-buy select {
    font-size: 16px !important; /* iOS-Zoom verhindern */
  }

  /* Alerts Mobile */
  .alert,
  .alert-success,
  .alert-info {
    font-size: 0.875rem;
    padding: 0.65rem 0.85rem !important;
  }

  /* Ausverkauft-Badge Mobile: eckig, etwas kleiner */
  .product-wrapper .ribbon.ribbon-7.productbox-ribbon,
  .opc-ProductStream .ribbon.ribbon-7.productbox-ribbon {
    font-size: 0.75rem !important;
    padding: 0.22rem 0.42rem !important;
    border-radius: 0 !important;
  }

  /* Footer */
  #footer {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
  }
}

@media (max-width: 389.98px) {
  .g2g-cat-grid .col-6,
  #product-list.layout-gallery .product-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .opc-ProductStream.gallery .product-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* === Consent-UX (grow2gether) === */
/* Banner unsichtbar, bis JS .g2g-consent-show setzt (Critical-CSS hat dasselbe) */
#consent-manager.active:not(.g2g-consent-show) #consent-banner,
#consent-manager.active:not(.g2g-consent-show) #consent-settings-btn {
  display: none !important;
}

/* Nach Zustimmung (JTL setzt .mini): Fingerabdruck weg */
#consent-manager.mini #consent-settings-btn,
html.g2g-consent-decided #consent-settings-btn {
  display: none !important;
}

/* Mobile: Banner kompakt */
@media (max-width: 767.98px) {
  .g2g-hero-copy h1 {
    font-size: 2.35rem;
    line-height: 1.15;
  }

  #consent-manager {
    bottom: 0.65rem;
    left: 0.65rem;
    right: 0.65rem;
  }

  #consent-banner {
    padding: 0.7rem 0.85rem !important;
  }

  #consent-banner .consent-banner-icon {
    display: none !important;
  }

  #consent-banner .consent-banner-body {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem;
  }

  #consent-banner .consent-banner-description {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
  }

  #consent-banner .consent-banner-description p {
    margin: 0 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  #consent-banner .consent-banner-actions {
    margin: 0 !important;
    width: 100% !important;
  }

  #consent-banner .consent-banner-actions .btn {
    padding: 0.45rem 0.65rem !important;
    font-size: 0.8125rem !important;
    min-height: 40px;
  }

  #consent-banner .consent-show-more {
    display: none !important;
  }
}

/* ============================================================
   Content-Breite wie Indras (1680px), responsive auf BS4
   Kein zweites Grid — nur NOVA/Bootstrap-4-Container überschreiben.
   ============================================================ */

@media (min-width: 768px) {
  :root {
    --g2g-page-pad: 1.25rem; /* 20px wie Indras --container-padding */
  }
}

/* Tablet: volle nutzbare Breite, nicht NOVAs 720px-Kasten */
@media (min-width: 768px) and (max-width: 991.98px) {
  .container,
  .container-sm,
  .container-md,
  .container-fluid-xl,
  header .container-fluid-xl,
  #footer .container,
  .breadcrumb-container.container {
    max-width: 100% !important;
    padding-left: var(--g2g-page-pad) !important;
    padding-right: var(--g2g-page-pad) !important;
  }
}

@media (min-width: 992px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-fluid-xl,
  header .container-fluid-xl,
  #header-top-bar .container,
  #header-top-bar .container-fluid,
  #footer .container,
  .breadcrumb-container.container {
    max-width: var(--g2g-content-max) !important;
    width: 100%;
    padding-left: var(--g2g-page-pad) !important;
    padding-right: var(--g2g-page-pad) !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Checkout: Formular lesbar halten, nicht wandbreit */
body.is-checkout .container,
.checkout .container,
#checkout .container,
#result-wrapper.checkout .container {
  max-width: 72rem !important;
  margin-left: auto;
  margin-right: auto;
}

/* --- Header / Nav volle Breite, klarere Zeile --- */
#jtl-nav-wrapper,
#jtl-nav-wrapper .navbar,
#header-top-bar {
  width: 100%;
}

@media (min-width: 992px) {
  #jtl-nav-wrapper .navbar-nav.nav-scrollbar,
  #jtl-nav-wrapper .navbar-nav.nav-scrollbar-inner {
    width: 100%;
    justify-content: stretch;
    gap: 0;
  }

  #jtl-nav-wrapper .navbar-nav > .nav-item,
  #jtl-nav-wrapper .navbar-nav > .nav-item.nav-scrollbar-item,
  #jtl-nav-wrapper .navbar-nav > .nav-item.dropdown-full {
    flex: 1 1 0;
    max-width: none;
    text-align: center;
  }

  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.9rem 0.5rem;
  }
}

/* --- Mega-Menü: vollbreit, weniger JTL-Demo --- */
@media (min-width: 992px) {
  #jtl-nav-wrapper .dropdown-full > .dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--g2g-hell-border) !important;
    background: var(--g2g-white) !important;
    box-shadow: var(--g2g-shadow-mega) !important;
  }

  #jtl-nav-wrapper .dropdown-full .dropdown-body,
  #jtl-nav-wrapper .dropdown-menu .dropdown-body {
    padding: 1.75rem 0 2.1rem;
    background: var(--g2g-white);
  }

  #jtl-nav-wrapper .dropdown-full .subcategory-wrapper,
  #jtl-nav-wrapper .dropdown-menu .subcategory-wrapper,
  #jtl-nav-wrapper .dropdown-full .container.subcategory-wrapper,
  #jtl-nav-wrapper .dropdown-menu .container.subcategory-wrapper {
    max-width: var(--g2g-content-max) !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--g2g-page-pad) !important;
    padding-right: var(--g2g-page-pad) !important;
  }

  #jtl-nav-wrapper .submenu-headline-toplevel,
  #jtl-nav-wrapper a.submenu-headline-toplevel {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--g2g-text) !important;
    border-bottom: 1px solid var(--g2g-hell-border);
    padding: 0 0 0.55rem !important;
    margin: 0 0 0.7rem !important;
  }

  #jtl-nav-wrapper .dropdown-full .categories-recursive-link:not(.submenu-headline-toplevel),
  #jtl-nav-wrapper .dropdown-full .dropdown-item,
  #jtl-nav-wrapper .dropdown-full .nav-item-lg-m a:not(.submenu-headline-toplevel) {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    padding: 0.32rem 0 !important;
    color: var(--g2g-text-muted) !important;
    background: transparent !important;
    border: none !important;
  }

  #jtl-nav-wrapper .dropdown-full a:hover,
  #jtl-nav-wrapper .dropdown-full a:focus {
    color: var(--g2g-btn) !important;
    background: transparent !important;
  }

  #jtl-nav-wrapper .dropdown-full .col.nav-item-lg-m {
    padding-bottom: 1.25rem;
  }

  #jtl-nav-wrapper .nav-scrollbar-arrow {
    background: var(--g2g-white);
  }
}

/* --- Wunschzettel / Vergleichsliste zurücknehmen --- */
#shop-nav-wish,
#shop-nav-compare,
.product-detail .product-actions,
.productbox-quick-actions {
  display: none !important;
}

/* JTL-Branding im Footer: darf ohne gebuchte BrandFree-Option NICHT
   entfernt werden (JTL-Lizenz, geprüft 04.09.2026 — BrandFree ist bei
   JTL Advanced zubuchbar, nicht enthalten). Also: klein und dezent.
   Voll entfernen erst nach Buchung: JTL-Kundencenter → Bestellungen &
   Lizenzen → Onlineshop → Shop-Module → BrandFree (dann blendet
   isBrandfree() den Block von selbst aus). */
#footer #system-credits,
#footer #system-credits a {
  color: var(--g2g-text-muted) !important;
  font-size: 0.75rem;
  opacity: 0.75;
  text-decoration: none !important;
}

#footer #system-credits a:hover {
  color: var(--g2g-btn) !important;
}

/* Galerie: nur Kauf-Buttons weg — NICHT .form-basket (darin Titel+Preis) */
#product-list.layout-gallery .productbox-actions,
.opc-ProductStream.gallery .productbox-actions {
  display: none !important;
}

.product-wrapper .productbox,
.opc-ProductStream .product-wrapper .productbox {
  border-radius: var(--g2g-radius);
}

.productbox-title a {
  font-size: 0.875rem;
  line-height: 1.3;
  font-weight: 600;
  text-decoration: none !important;
}

.productbox .price,
.productbox .price-regular,
.productbox .price_wrapper .price {
  font-size: 0.9375rem;
}

@media (min-width: 1400px) {
  #product-list.layout-gallery .product-wrapper.col-xl-3 {
    margin-bottom: 1.35rem;
  }

  .opc-ProductStream.gallery .product-wrapper {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
}

/* PLP: Header und Filter weniger gequetscht */
@media (min-width: 992px) {
  .productlist-header-description .title h1,
  .content-header h1 {
    font-size: clamp(1.85rem, 2.6vw, 2.6rem);
    border-bottom-width: 2px;
  }

  .productlist-result-options,
  .result-options {
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
  }
}

/* PDP: Bild klebt neben der Kaufbox (admorris: .productdetails-gallery).
   Die Spalte .product-gallery streckt sich auf die Höhe der Kaufbox.
   #image_wrapper bleibt in der natürlichen Galeriehöhe und klebt unter
   dem Header, bis der untere Rand der Zeile (#product-offer) erreicht ist.
   Darunter scrollen Beschreibung und Tabelle normal mit.
   Unter 992px stehen die Spalten untereinander — kein Kleben. */
@media (min-width: 992px) {
  #product-offer {
    align-items: stretch;
  }

  #product-offer > .product-gallery #image_wrapper {
    position: sticky;
    top: calc(var(--g2g-sticky-top, 5.5rem) + 20px);
    height: auto;
    z-index: 2;
    margin-bottom: 0;
  }

  #product-offer > .product-gallery #image_wrapper #gallery {
    margin-bottom: 0;
  }

  /* Live-Indras: Foto etwa 42 %, Kaufbox der Rest. */
  #product-offer > .product-gallery.col-lg-6 {
    flex: 0 0 42%;
    max-width: 42%;
    padding-right: 1.5rem;
  }

  #product-offer > .product-info {
    flex: 1 1 0;
    max-width: none;
    width: auto;
    padding-left: 0.5rem;
  }

  #product-offer h1,
  .product-detail h1 {
    font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  }

  #buy_form {
    padding: 1.5rem 0 0;
  }

  #product-offer .basket-form-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
  }

  #product-offer .basket-form-inline > [class*="col"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  #product-offer .basket-form-inline > [class*="col"]:last-child {
    flex: 1 1 auto;
    padding-left: 0.65rem;
  }
}

/* PDP-Kaufbox: Karte, Größenleiste, Preis, Lager, Menge.
   Infotabelle bleibt in .g2g-desc-specs unter der Beschreibung. */
#product-offer > .product-info .product-info-inner {
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  padding: 1.15rem 1.25rem 1rem;
}

#product-offer .variations .variation-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 0 0.85rem;
}

#product-offer .variations dt {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  background: var(--g2g-dark);
  color: var(--g2g-hell);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

#product-offer .variations dd {
  margin: 0;
  width: 100%;
}

#product-offer .price_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin: 0.25rem 0 0.75rem;
}

#product-offer .price_wrapper .price_label {
  margin-right: 0.2rem;
  color: var(--g2g-text-muted);
  font-size: 1rem;
  font-weight: 600;
}

#product-offer .price_wrapper .price,
#product-offer .price_wrapper .price.h1 {
  color: var(--g2g-btn);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

#product-offer .price-note,
#product-offer .price-note a {
  color: var(--g2g-text-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

#product-offer .stock-information {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 0 0.75rem;
  border: 0;
  padding: 0;
}

#product-offer .stock-information > [class*="col"] {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding: 0;
}

#product-offer .delivery-status {
  display: block;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--g2g-radius);
  background: var(--g2g-hell);
}

#product-offer .delivery-status .status {
  color: var(--g2g-success);
  font-weight: 700;
}

#product-offer .delivery-status .status-0,
#product-offer .delivery-status:has(link[itemprop="availability"][href*="OutOfStock"]) .status {
  color: var(--g2g-soldout);
}

#product-offer .question-on-item {
  margin: 0.55rem 0 0;
}

#product-offer .question-on-item .question {
  padding: 0;
  min-height: 44px;
  color: var(--g2g-text-muted);
  font-weight: 600;
  text-decoration: none;
}

#product-offer #quantity-grp {
  display: inline-flex;
  align-items: center;
  height: 48px;
  width: auto;
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  overflow: hidden;
  background: var(--g2g-white);
}

#product-offer #quantity-grp .btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--g2g-text);
}

#product-offer #quantity-grp input.quantity {
  width: 3rem;
  height: 48px;
  border: 0;
  border-left: 1px solid var(--g2g-hell-border);
  border-right: 1px solid var(--g2g-hell-border);
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  font-weight: 700;
  color: var(--g2g-text);
  background: var(--g2g-white);
}

#product-offer #quantity-grp .input-group-text {
  border: 0;
  background: transparent;
  color: var(--g2g-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#product-offer .product-buy {
  margin-top: 0.35rem;
}

#product-offer .product-buy .btn-primary {
  min-height: 48px;
}

@media (max-width: 991.98px) {
  #product-offer > .product-gallery #image_wrapper {
    position: static;
    top: auto;
  }

  #product-offer > .product-info .product-info-inner {
    margin-top: 0.75rem;
  }

  #product-offer #quantity-grp {
    width: 100%;
  }

  #product-offer .basket-form-inline > [class*="col"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #product-offer .basket-form-inline .btn-primary {
    width: 100%;
    margin-top: 0.55rem;
  }

  #tab-description .g2g-desc-specs,
  #tabAccordion #tab-description .g2g-desc-specs {
    display: block;
    width: 100%;
    max-width: none;
    margin-top: 1.25rem;
  }

  body.g2g-buybar-on {
    padding-bottom: 4.75rem;
  }
}

/* Mobil: Preis + Warenkorb bleiben unten, sobald die Kaufzeile aus dem Bild läuft. */
.g2g-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
  background: var(--g2g-white);
  border-top: 1px solid var(--g2g-hell-border);
}

.g2g-buybar[hidden] {
  display: none !important;
}

.g2g-buybar-price {
  font-weight: 700;
  color: var(--g2g-btn);
  font-size: 1.05rem;
}

.g2g-buybar-btn {
  margin-left: auto;
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--g2g-radius);
  background: var(--g2g-btn);
  color: var(--g2g-white);
  font-weight: 700;
}

.g2g-buybar-btn:disabled {
  background: var(--g2g-hell);
  color: var(--g2g-text-muted);
}

@media (min-width: 992px) {
  .g2g-buybar {
    display: none !important;
  }
}

/* Store-Karte ohne leere Kartenfläche */
.g2g-store-card:has(.g2g-static-media:empty) .col-md-6:has(.g2g-static-media) {
  display: none;
}

.g2g-store-card:has(.g2g-static-media:empty) .col-md-6:first-child,
.g2g-store-card:not(:has(.g2g-static-media)):not(:has(.g2g-store-map)) .col-md-6:first-child {
  flex: 0 0 100%;
  max-width: 40rem;
}

/* Footer volle Breite, mehr Luft */
@media (min-width: 992px) {
  #footer {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
  }

  #footer-boxes {
    gap: 1.5rem 0;
  }
}

/* Mobile: Kante mit 16px, kein Desktop-Mega, kein Quer-Scroll */
@media (max-width: 767.98px) {
  .container,
  .container-fluid-xl,
  #footer .container,
  .g2g-homepage,
  #result-wrapper {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
  }


  .g2g-cat-tile span:not(.g2g-cat-media) {
    min-height: 44px;
    font-size: 0.9375rem;
    padding: 0.95rem 1rem;
  }

  .g2g-hero-copy h1 {
    font-size: 2rem;
    overflow-wrap: anywhere;
  }

  .productbox .price,
  .productbox .price-regular {
    overflow-wrap: anywhere;
  }
}

/* Tablet + Mobile: Offcanvas/Collapse, kein Desktop-Mega quetschen */
@media (max-width: 991.98px) {
  #burger-menu,
  #burger-menu,
  header .navbar-toggler,
  header .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    padding: 0.35rem;
  }

  #jtl-nav-wrapper .dropdown-full > .dropdown-menu,
  #jtl-nav-wrapper .navbar-nav > .nav-item > .dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 0 0.35rem !important;
    margin: 0 !important;
  }

  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  #jtl-nav-wrapper .nav-mobile-body .nav-link,
  #jtl-nav-wrapper .nav-mobile-heading {
    min-height: 44px;
  }
}

/* ============================================================
   g2g Header 2.0 — EINE Zeile: Logo | Growshop · Headshop · Seeds | Suche/Icons
   Mega-Panels baut custom.js aus dem echten JTL-Megamenü (g2g Mega-Menü Modul).
   Nur Header-Scope (#jtl-nav-wrapper / .g2g-mega*) — keine PLP-Selektoren.
   ============================================================ */

/* --- Logo: Desktop 56px (Laptop nicht lupig), Mobile bleibt 48/44px --- */
header#jtl-nav-wrapper .navbar-brand {
  height: 4rem;
  min-height: 4rem;
  min-width: 16.5rem;
  margin-right: 0.85rem;
}

header#jtl-nav-wrapper .navbar-brand img#shop-logo,
header#jtl-nav-wrapper .navbar-brand .g2g-logo-wordmark {
  height: 3.5rem; /* 56px — lesbar, nicht lupig */
}

header#jtl-nav-wrapper .navbar-brand .g2g-logo-signet {
  width: 3rem; /* 48px */
  height: 3rem;
  margin-top: -1.5rem;
}

@media (max-width: 991.98px) {
  header#jtl-nav-wrapper .navbar-brand {
    height: 3.5rem;
    min-height: 3.5rem;
    min-width: 13.5rem;
  }

  header#jtl-nav-wrapper .navbar-brand img#shop-logo,
  header#jtl-nav-wrapper .navbar-brand .g2g-logo-wordmark {
    height: 3rem; /* 48px */
  }

  header#jtl-nav-wrapper .navbar-brand .g2g-logo-signet {
    width: 44px;
    height: 44px;
    margin-top: -22px;
  }
}

@media (max-width: 575.98px) {
  header#jtl-nav-wrapper .navbar-brand {
    min-width: 12.25rem;
    margin-right: 0.5rem;
  }

  header#jtl-nav-wrapper .navbar-brand img#shop-logo,
  header#jtl-nav-wrapper .navbar-brand .g2g-logo-wordmark {
    height: 2.75rem; /* 44px ≥ 40px Minimum */
  }
}

/* Mobil-Header (≤991): EINE Chrome-Zeile.
   Burger links | Logo Mitte | Profil+Cart rechts. Suche hängt direkt
   unter der 52px-Zeile (kein Container-padding als Leerraum). */
@media (max-width: 991.98px) {
  header#jtl-nav-wrapper {
    padding-bottom: 2.7rem;
    overflow: visible !important;
  }

  #jtl-nav-wrapper > .container-fluid-xl {
    position: relative;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 0.75rem !important;
    overflow: visible;
  }

  #jtl-nav-wrapper .toggler-logo-wrapper {
    position: static;
    display: flex;
    align-items: center;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 3rem !important;
    min-height: 0;
    overflow: visible;
    z-index: 2;
  }

  #jtl-nav-wrapper #logo.logo-wrapper {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    height: 48px !important;
    transform: translateX(-50%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin: 0;
    pointer-events: auto;
    max-width: calc(100% - 8.5rem);
  }

  header#jtl-nav-wrapper .navbar-brand,
  header#jtl-nav-wrapper .navbar-brand.g2g-logo-brand {
    position: relative;
    min-width: 0 !important;
    margin: 0 !important;
    height: 3rem;
    justify-content: center;
  }

  header#jtl-nav-wrapper .navbar-brand img#shop-logo,
  header#jtl-nav-wrapper .navbar-brand .g2g-logo-wordmark {
    object-position: center;
    transform-origin: center center;
    max-width: min(36vw, 7.75rem) !important;
    width: auto !important;
  }

  header#jtl-nav-wrapper .navbar-brand .g2g-logo-signet {
    left: 50%;
    margin-top: -22px;
    transform: translateX(-50%) scale(0.94);
    transform-origin: center center;
  }

  #jtl-nav-wrapper.g2g-header-compact .navbar-brand .g2g-logo-signet {
    transform: translateX(-50%) scale(1);
  }

  #jtl-nav-wrapper.g2g-header-compact .navbar-brand img#shop-logo,
  #jtl-nav-wrapper.g2g-header-compact .navbar-brand .g2g-logo-wordmark {
    transform-origin: center center;
  }

  #burger-menu,
  header#jtl-nav-wrapper .navbar-toggler {
    position: relative;
    z-index: 3;
    min-width: 44px;
    min-height: 44px;
    margin-right: 0;
  }

  header#jtl-nav-wrapper .navbar,
  header#jtl-nav-wrapper .navbar.navbar-expand-lg,
  header#jtl-nav-wrapper .navbar.navbar-expand-1 {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;
    width: auto !important;
    min-width: 0;
    margin-left: auto;
    padding: 0 !important;
    height: 48px;
    overflow: visible !important;
  }

  #jtl-nav-wrapper #shop-nav.nav-icons,
  #jtl-nav-wrapper #shop-nav.nav-right {
    position: static;
    z-index: 3;
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    flex: 0 0 auto;
    flex-shrink: 0;
    width: auto;
    margin-left: auto;
    gap: 0;
  }

  /* Suche hängt unter der Chrome-Zeile und darf im Flex keine Breite mehr haben */
  #jtl-nav-wrapper #shop-nav #search {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: auto !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0.1rem 0.75rem 0.25rem !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  #jtl-nav-wrapper #shop-nav #search .search-wrapper,
  #jtl-nav-wrapper #shop-nav #search .form-icon,
  #jtl-nav-wrapper #shop-nav #search .input-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 44px;
    min-height: 0;
  }

  @media (max-width: 575.98px) {
    #jtl-nav-wrapper #shop-nav .cart-icon-dropdown-price,
    #jtl-nav-wrapper #shop-nav .cart-icon-dropdown .price_text {
      display: none !important;
    }
  }

  /* Icons fest rechts in der 48px-Zeile — unabhängig vom Suche-Flex */
  #jtl-nav-wrapper #shop-nav > .account-icon-dropdown {
    position: absolute !important;
    top: 0;
    right: 3.15rem;
    height: 48px;
    display: flex;
    align-items: center;
    z-index: 4;
    margin: 0 !important;
  }

  #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown {
    position: absolute !important;
    top: 0;
    right: 0.15rem;
    height: 48px;
    display: flex;
    align-items: center;
    z-index: 4;
    margin: 0 !important;
  }

  @media (min-width: 576px) {
    #jtl-nav-wrapper #shop-nav > .account-icon-dropdown {
      right: 6.75rem;
    }
  }

  #jtl-nav-wrapper:has(.search-form-wrapper-fixed) #shop-nav #search,
  #jtl-nav-wrapper:has(.fixed-search) #shop-nav #search {
    display: none !important;
  }

  header#jtl-nav-wrapper:has(.search-form-wrapper-fixed),
  header#jtl-nav-wrapper:has(.fixed-search) {
    padding-bottom: 0;
  }
}

#jtl-nav-wrapper {
  border-bottom: 1px solid var(--g2g-hell-border);
}

/* --- Desktop ≥992: DREI Zonen, volle Content-Breite ---
   Logo links | Nav optisch Mitte | Suche+Profil+Cart rechts.
   Mobile-absolute (!important) hier hart zurücksetzen. */
@media (min-width: 992px) {
  header#jtl-nav-wrapper {
    padding-bottom: 0;
    overflow: visible;
  }

  #jtl-nav-wrapper > .container-fluid-xl {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-top: 0;
    padding-bottom: 0;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  #jtl-nav-wrapper .toggler-logo-wrapper {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
    padding: 0.5rem 0;
    position: static;
  }

  /* Mobile-absolute-Logo darf ≥992 nicht greifen */
  #jtl-nav-wrapper #logo.logo-wrapper {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
    max-width: none;
    margin: 0;
  }

  header .navbar-brand,
  header#jtl-nav-wrapper .navbar-brand,
  header#jtl-nav-wrapper .navbar-brand.g2g-logo-brand {
    height: 4rem;
    min-height: 4rem;
    min-width: 16.5rem;
    margin-right: 0.85rem;
  }

  header#jtl-nav-wrapper .navbar-brand img#shop-logo,
  header#jtl-nav-wrapper .navbar-brand .g2g-logo-wordmark,
  header .navbar-brand img#shop-logo {
    height: 3.5rem;
  }

  header#jtl-nav-wrapper .navbar-brand .g2g-logo-signet {
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
  }

  header#jtl-nav-wrapper .navbar,
  header#jtl-nav-wrapper .navbar.navbar-expand-lg,
  header#jtl-nav-wrapper .navbar.align-items-lg-end,
  header#jtl-nav-wrapper .navbar.navbar-expand-1 {
    flex: 1 1 auto !important;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch !important;
    align-self: stretch !important;
    justify-content: flex-end;
    gap: 0;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    min-width: 0;
    padding: 0 !important;
    position: static !important;
    border-bottom: none !important;
  }

  #jtl-nav-wrapper .navbar-collapse,
  header#jtl-nav-wrapper .navbar-collapse,
  #jtl-nav-wrapper #mainNavigation.navbar-collapse {
    min-height: 0 !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    flex-grow: 1 !important;
    width: auto !important;
    max-width: none;
    min-width: 0;
    align-self: stretch;
    align-items: stretch !important;
    position: static !important;
    transform: none !important;
  }

  #jtl-nav-wrapper #shop-nav.nav-icons,
  #jtl-nav-wrapper #shop-nav.nav-right,
  header#jtl-nav-wrapper .nav-right {
    position: static !important;
    flex: 0 0 auto;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: 0;
  }

  #jtl-nav-wrapper #shop-nav #search {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 10.2rem;
    padding: 0 !important;
    overflow: visible !important;
  }

  #jtl-nav-wrapper #shop-nav #search .search-wrapper,
  #jtl-nav-wrapper #shop-nav #search .form-icon,
  #jtl-nav-wrapper #shop-nav #search .input-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
    height: 2.5rem;
    min-height: 0;
  }

  #jtl-nav-wrapper #shop-nav #search .twitter-typeahead {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
  }

  #jtl-nav-wrapper #shop-nav #search input[name="qs"],
  #jtl-nav-wrapper #shop-nav #search .tt-input,
  #jtl-nav-wrapper #shop-nav #search .form-control {
    min-height: 0 !important;
    height: 2.5rem !important;
    line-height: 1.25;
    padding: 0 0.75rem;
  }

  #jtl-nav-wrapper #shop-nav #search .input-group .btn,
  #jtl-nav-wrapper #shop-nav #search .btn {
    min-height: 0 !important;
    height: 2.5rem;
    min-width: 2.5rem;
    flex: 0 0 auto;
  }

  #jtl-nav-wrapper #shop-nav > .account-icon-dropdown,
  #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown {
    position: static !important;
    top: auto;
    right: auto;
    height: auto;
    margin: 0;
  }

  /* Suche flexibel, aber nicht wandfüllend */
  #jtl-nav-wrapper #shop-nav #search .search-wrapper {
    width: clamp(10.2rem, 15.3vw, 15.3rem);
  }

  /* Nav füllt die Mitte und zentriert GROWSHOP/HEADSHOP/SEEDS */
  #jtl-nav-wrapper .nav-mobile-body {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: static;
  }

  #jtl-nav-wrapper .navbar-nav,
  #jtl-nav-wrapper .navbar-nav.nav-scrollbar-inner {
    width: auto;
    height: 100%;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
    position: static;
  }

  /* Carets weg — Hover-Goldlinie ist die Affordance (ruhigere Leiste) */
  #mainNavigation .navbar-nav > .nav-item > .nav-link::after {
    content: none !important;
    display: none !important;
  }

  /* Bootstraps mr-auto würde die Zentrierung auffressen; NOVA-padding-bottom
     (24px) würde die li von der Panel-Oberkante wegdrücken → Hover-Lücke */
  #mainNavigation .navbar-nav.mr-auto {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #mainNavigation .navbar-nav,
  #mainNavigation .navbar-nav.nav-scrollbar-inner {
    padding: 0 !important;
  }

  #jtl-nav-wrapper .navbar-nav > .nav-item,
  #jtl-nav-wrapper .navbar-nav > .nav-item.nav-scrollbar-item,
  #jtl-nav-wrapper .navbar-nav > .nav-item.dropdown-full {
    flex: 0 0 auto;
    display: flex;
    align-self: stretch;
    height: auto !important; /* NOVA-Scrollbar gibt li eine feste Höhe → Lücke */
    max-width: none;
    text-align: left;
  }

  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
    height: 100%;
    width: auto;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Nav-Mitte: GROWSHOP · HEADSHOP · SEEDS (Runde 2, 15.09.2026):
     ~14.5px gerendert — größer als die alte 11px-Leiste, aber nicht mehr
     „zu groß/zu fett" (600 statt 700). */
  #mainNavigation .navbar-nav > .nav-item > .nav-link {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0 0.89rem;
  }

  /* Overflow-Pfeile: bei 3 Punkten überflüssig; static = Panel-Kontext Header */
  #jtl-nav-wrapper .nav-scrollbar {
    position: static !important;
  }

  #jtl-nav-wrapper .nav-scrollbar-arrow {
    display: none !important;
  }

  /* Panel full-bleed direkt unter der Headerzeile
     (Containing Block = sticky Header, alles dazwischen static) */
  #mainNavigation .navbar-nav > .nav-item.dropdown {
    position: static !important;
  }

  #jtl-nav-wrapper .dropdown-full > .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
    animation: none !important;
    /* Flache Laptop-Fenster: Panel nie unter den Viewport ragen lassen —
       lieber intern scrollen als abgeschnitten (15.09.2026) */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }

  /* Hover-Brücke: 0px sichtbare Lücke, unsichtbarer Streifen für Intent */
  #jtl-nav-wrapper .dropdown-full > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
  }

  /* Nur Hover + JS-Intent — kein :focus-within (klebt sonst nach Klick) */
  #mainNavigation .navbar-nav > .nav-item.dropdown-full:hover > .dropdown-menu,
  #mainNavigation .navbar-nav > .nav-item.dropdown-full.g2g-mega-open > .dropdown-menu {
    display: block !important;
  }

  /* custom.js hat das Panel gebaut → JTL-Standard-Spalten desktopseitig aus */
  #mainNavigation .navbar-nav > .nav-item.g2g-enhanced > .dropdown-menu > .dropdown-body {
    display: none !important;
  }
}

/* 992–1279: Wortmarke 56px (Spec-Minimum), alles bleibt in EINER Zeile */
@media (min-width: 992px) and (max-width: 1279.98px) {
  header#jtl-nav-wrapper .navbar-brand {
    min-width: 0;
    margin-right: 0.5rem;
  }

  header#jtl-nav-wrapper .navbar-brand img#shop-logo,
  header#jtl-nav-wrapper .navbar-brand .g2g-logo-wordmark {
    height: 3.5rem;
  }

  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link,
  #mainNavigation .navbar-nav > .nav-item > .nav-link {
    font-size: 0.9375rem; /* ~12.8px gerendert — Squeeze-Band, einzeilig */
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0 0.8rem;
  }

  #jtl-nav-wrapper #shop-nav #search .search-wrapper {
    width: clamp(10rem, 17vw, 13rem);
  }

  #jtl-nav-wrapper #shop-nav.nav-icons {
    gap: 2px;
    margin-left: auto !important;
  }
}

@keyframes g2gMegaIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #jtl-nav-wrapper .dropdown-full > .dropdown-menu {
    animation: none;
  }
}

/* Hersteller-Punkt weg — CSS-Fallback, custom.js entfernt das li zusätzlich */
#mainNavigation .navbar-nav > .nav-item:has(> a[href$="/Hersteller"]) {
  display: none !important;
}

/* --- Mega-Panels: Desktop-Grid, mobil eigenes Akkordeon (.g2g-nav-m) --- */
@media (max-width: 991.98px) {
  .g2g-mega {
    display: none !important;
  }
}

.g2g-mega {
  background: var(--g2g-white);
  white-space: normal; /* NOVA/Bootstrap vererbt nowrap im Dropdown */
}

/* Kompakter seit 15.09.2026 („bissi rauszoomen"): weniger vertikale Luft,
   damit das Panel auch auf flachen Laptop-Fenstern komplett sichtbar ist. */
.g2g-mega-inner {
  max-width: var(--g2g-content-max);
  margin: 0 auto;
  padding: 1.7rem var(--g2g-page-pad) 1.3rem;
}

.g2g-mega-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.g2g-mega-kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g2g-gold);
  margin-bottom: 0.35rem;
}

.g2g-mega-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--g2g-dark);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

a.g2g-mega-all {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--g2g-btn) !important;
  white-space: nowrap;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

a.g2g-mega-all:hover {
  border-bottom-color: var(--g2g-gold);
}

/* Growshop: der Grow-Zyklus in 8 nummerierten Stationen */
.g2g-mega-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.3rem 2.2rem;
}

.g2g-step-num {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--g2g-gold);
  font-variant-numeric: tabular-nums;
}

a.g2g-step-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--g2g-dark) !important;
  padding: 0.2rem 0 0.65rem;
  border-bottom: 1px solid var(--g2g-hell-border);
  margin-bottom: 0.65rem;
  transition: color 0.15s, border-color 0.15s;
}

a.g2g-step-title::after {
  content: "\2192";
  font-size: 0.85em;
  color: var(--g2g-stein);
  transition: transform 0.15s, color 0.15s;
}

a.g2g-step-title:hover,
a.g2g-step-title:focus {
  color: var(--g2g-btn) !important;
  border-bottom-color: var(--g2g-gold);
}

a.g2g-step-title:hover::after {
  color: var(--g2g-gold);
  transform: translateX(2px);
}

.g2g-step-links a {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--g2g-text-muted) !important;
  padding: 0.22rem 0;
}

.g2g-step-links a:hover,
.g2g-step-links a:focus {
  color: var(--g2g-btn) !important;
}

.g2g-step-links a.g2g-step-more {
  font-weight: 600;
  color: var(--g2g-btn) !important;
}

.g2g-mega-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--g2g-hell-border);
  margin-top: 1.3rem;
  padding-top: 0.9rem;
  font-size: 0.875rem;
  color: var(--g2g-text-muted);
}

.g2g-mega-foot a {
  color: var(--g2g-text-muted) !important;
  font-weight: 600;
}

.g2g-mega-foot a:hover {
  color: var(--g2g-btn) !important;
}

/* Flache Laptop-Fenster: Megamenü nochmal verdichten, damit Growshop
   (8 Stationen) und Seeds komplett ohne Scrollen sichtbar sind.
   .dropdown-menu-Prefix = höhere Spezifität als die generierte
   Desktop-Textskala am Dateiende (15.09.2026). */
@media (min-width: 992px) and (max-height: 760px) {
  .dropdown-menu .g2g-mega-inner {
    padding: 1.1rem var(--g2g-page-pad) 0.9rem;
  }

  .dropdown-menu .g2g-mega-head {
    margin-bottom: 0.8rem;
  }

  .dropdown-menu .g2g-mega-title {
    font-size: 1.25rem;
  }

  .dropdown-menu .g2g-mega-steps {
    gap: 0.9rem 2rem;
  }

  .dropdown-menu a.g2g-step-title {
    font-size: 1rem;
    padding: 0.15rem 0 0.4rem;
    margin-bottom: 0.4rem;
  }

  .dropdown-menu .g2g-step-links a {
    font-size: 0.9rem;
    line-height: 1.3;
    padding: 0.14rem 0;
  }

  .dropdown-menu .g2g-mega-foot {
    display: none;
  }
}

/* Headshop: kuratierte Gruppen + Feature-Karte (goldener Akzent, kein Kitsch) */
.g2g-mega-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 2.4rem;
}

@media (min-width: 1400px) {
  .g2g-mega-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 19rem;
  }
}

/* 992–1199: etwas enger — lesbar, nicht viewport-voll */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .g2g-mega-inner {
    padding: 1.85rem var(--g2g-page-pad) 1.35rem;
  }

  .g2g-mega-title {
    font-size: 1.25rem;
  }

  .g2g-mega-steps,
  .g2g-mega-cols {
    gap: 1.35rem 1.5rem;
  }

  a.g2g-step-title {
    font-size: 1rem;
  }

  .g2g-step-links a {
    font-size: 0.875rem;
  }
}

.g2g-mega-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g2g-text);
  border-bottom: 1px solid var(--g2g-hell-border);
  padding-bottom: 0.55rem;
  margin-bottom: 0.65rem;
}

a.g2g-mega-h {
  color: var(--g2g-text) !important;
  transition: color 0.15s, border-color 0.15s;
}

a.g2g-mega-h:hover,
a.g2g-mega-h:focus {
  color: var(--g2g-btn) !important;
  border-bottom-color: var(--g2g-gold);
}

.g2g-mega-feature {
  background: var(--g2g-gold-wash);
  border: 1px solid var(--g2g-warning-border);
  border-radius: var(--g2g-radius);
  padding: 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: start;
}

a.g2g-feature-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--g2g-dark) !important;
  letter-spacing: -0.01em;
}

a.g2g-feature-title:hover {
  color: var(--g2g-btn) !important;
}

.g2g-mega-feature p {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--g2g-text-muted);
  margin: 0;
}

a.g2g-feature-cta {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--g2g-btn) !important;
  margin-top: 0.2rem;
}

a.g2g-feature-cta:hover {
  text-decoration: underline;
  text-decoration-color: var(--g2g-gold);
}

@media (max-width: 1399.98px) {
  .g2g-mega-feature {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
  }
}

/* Seeds: Marken-Grid der 15 Samenbanken */
.g2g-mega-brands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: 1rem;
}

a.g2g-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 4rem;
  padding: 0.95rem 1.15rem;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--g2g-dark) !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, color 0.15s;
}

a.g2g-brand::after {
  content: "\2192";
  flex: 0 0 auto;
  color: var(--g2g-stein);
  font-size: 0.85em;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.15s, transform 0.15s, color 0.15s;
}

a.g2g-brand:hover,
a.g2g-brand:focus {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-shadow-md);
  transform: translateY(-1px);
  color: var(--g2g-btn) !important;
}

a.g2g-brand:hover::after,
a.g2g-brand:focus::after {
  opacity: 1;
  transform: none;
  color: var(--g2g-gold);
}

/* Samen-Art: Mega + /Seeds-Hub — 3 Einstiege über alle Banken */
.g2g-seed-arts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 0 1.15rem;
}

.g2g-seed-arts--hub {
  margin: 0 0 1.5rem;
}

a.g2g-seed-art,
button.g2g-seed-art {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
  min-height: 4.25rem;
  padding: 0.7rem 0.9rem;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  color: var(--g2g-dark) !important;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

a.g2g-seed-art:hover,
a.g2g-seed-art:focus,
button.g2g-seed-art:hover,
button.g2g-seed-art:focus {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-shadow-md);
  color: var(--g2g-btn) !important;
}

button.g2g-seed-art.is-on {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-shadow-md);
  color: var(--g2g-btn) !important;
}

.g2g-art-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
}

.g2g-art-filter-label {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 4.5rem;
}

.g2g-art-filter-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g2g-text-muted);
}

.g2g-art-filter-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--g2g-dark);
  line-height: 1.15;
}

.g2g-art-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

button.g2g-art-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.3rem 0.8rem;
  background: var(--g2g-hell);
  border: 1px solid var(--g2g-hell-border);
  border-radius: 999px;
  color: var(--g2g-dark);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

button.g2g-art-chip:hover,
button.g2g-art-chip:focus {
  border-color: var(--g2g-gold);
  color: var(--g2g-btn);
}

button.g2g-art-chip.is-on {
  border-color: var(--g2g-gold);
  color: var(--g2g-btn);
  box-shadow: inset 0 0 0 1px var(--g2g-gold);
}

.g2g-art-chip-check {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  border: 1px solid var(--g2g-stein);
  border-radius: 2px;
  background: var(--g2g-white);
  font-size: 0.75rem;
  line-height: 0.75rem;
  text-align: center;
}

button.g2g-art-chip.is-on .g2g-art-chip-check {
  border-color: var(--g2g-btn);
  background: var(--g2g-btn);
  color: var(--g2g-white);
}

@media (max-width: 767.98px) {
  .g2g-art-filter {
    flex-direction: column;
    align-items: stretch;
  }

  .g2g-art-filter-chips {
    width: 100%;
  }
}

.g2g-seed-art-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g2g-text-muted);
}

.g2g-seed-art-label {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
}

@media (max-width: 575.98px) {
  .g2g-seed-arts--hub {
    grid-template-columns: 1fr;
  }

  a.g2g-seed-art,
  button.g2g-seed-art {
    min-height: 44px;
    padding: 0.55rem 0.85rem;
  }
}

/* --- Mobil-Menü: Offcanvas + Akkordeon (kein leeres Mega) --- */
@media (min-width: 992px) {
  .g2g-nav-toggle,
  .g2g-nav-m,
  .g2g-seeds-toggle,
  .g2g-seeds-m {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  header#jtl-nav-wrapper .navbar-collapse,
  #jtl-nav-wrapper #mainNavigation.navbar-collapse {
    position: fixed !important;
    top: 0;
    left: 0;
    display: block !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: min(22rem, 92vw);
    max-width: min(22rem, 92vw);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--g2g-white) !important;
    z-index: 1050;
    flex: none !important;
    min-height: 0 !important;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    transition: transform 0.2s ease-out, visibility 0.2s;
    box-shadow: none;
  }

  header#jtl-nav-wrapper .navbar-collapse.show,
  #jtl-nav-wrapper #mainNavigation.navbar-collapse.show {
    transform: none;
    visibility: visible;
    pointer-events: auto;
    box-shadow: var(--g2g-shadow-lg);
  }

  #jtl-nav-wrapper .nav-mobile-header {
    background: var(--g2g-hell);
    border-bottom: 1px solid var(--g2g-hell-border);
    padding-left: 1rem;
    padding-right: 0.5rem;
  }

  #jtl-nav-wrapper .nav-offcanvas-title {
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--g2g-dark);
    font-size: 0.8125rem;
  }

  #jtl-nav-wrapper .nav-mobile-body {
    display: block !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 3.125rem);
    overflow: visible;
    position: static;
  }

  #jtl-nav-wrapper .navbar-nav,
  #jtl-nav-wrapper .navbar-nav.nav-scrollbar-inner,
  #jtl-nav-wrapper .navbar-nav.mr-auto {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.35rem 0 1.5rem !important;
    flex: none !important;
    transform: none !important;
  }

  #jtl-nav-wrapper .navbar-nav > .nav-item,
  #jtl-nav-wrapper .navbar-nav > .nav-item.dropdown-full,
  #mainNavigation .nav-item.g2g-nav-acc,
  #mainNavigation .nav-item.g2g-seeds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: none;
    flex: none;
    height: auto !important;
    text-align: left;
  }

  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
    flex: 1 1 auto;
    width: auto;
    min-height: 48px;
    height: auto;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    justify-content: flex-start;
    padding: 0.7rem 0.35rem 0.7rem 1rem;
    box-shadow: none;
  }

  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link::after,
  #mainNavigation .nav-item.g2g-nav-acc > .nav-link::after,
  #mainNavigation .nav-item.g2g-seeds > .nav-link::after {
    content: none !important;
    display: none !important;
  }

  #mainNavigation .nav-item.g2g-enhanced > .dropdown-menu,
  #mainNavigation .nav-item.g2g-nav-acc > .dropdown-menu,
  #mainNavigation .nav-item.g2g-seeds > .dropdown-menu {
    display: none !important;
  }

  .g2g-nav-toggle,
  .g2g-seeds-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--g2g-text);
    cursor: pointer;
  }

  .g2g-nav-toggle::after,
  .g2g-seeds-toggle::after {
    content: "";
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    padding: 4px;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s;
  }

  li.g2g-open > .g2g-nav-toggle::after,
  li.g2g-open > .g2g-seeds-toggle::after {
    transform: rotate(-135deg);
  }

  .g2g-nav-m,
  .g2g-seeds-m {
    display: none;
    flex: 1 1 100%;
    width: 100%;
    padding: 0 0 0.45rem;
    background: var(--g2g-hell);
    border-top: 1px solid var(--g2g-hell-border);
    border-bottom: 1px solid var(--g2g-hell-border);
  }

  li.g2g-open > .g2g-nav-m,
  li.g2g-open > .g2g-seeds-m {
    display: block;
  }

  .g2g-nav-m a,
  .g2g-seeds-m a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.45rem 1rem 0.45rem 1.15rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--g2g-text) !important;
  }

  .g2g-nav-m a:hover,
  .g2g-nav-m a:focus,
  .g2g-seeds-m a:hover,
  .g2g-seeds-m a:focus {
    color: var(--g2g-btn) !important;
  }

  .g2g-nav-m a.g2g-nav-m-all,
  .g2g-seeds-m a.g2g-seeds-m-all {
    font-weight: 700;
    color: var(--g2g-btn) !important;
  }
}

/* ============================================================
   Fable-PLP-Karte — Papier, wenig Chrome, leichter Hover-Hauch.
   NICHT .form-basket verstecken (Titel+Preis liegen darin).
   Mega-Nav unberührt.
   ============================================================ */

#product-list.layout-gallery .product-wrapper,
.opc-ProductStream.gallery .product-wrapper {
  display: flex;
}

#product-list.layout-gallery .productbox,
#product-list.layout-gallery .productbox.productbox-hover,
#product-list.layout-gallery .productbox.productbox-column,
.opc-ProductStream.gallery .product-wrapper .productbox {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  cursor: pointer;
  transition: none !important;
}

#product-list.layout-gallery .productbox-inner,
.opc-ProductStream.gallery .productbox-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: transparent;
  box-shadow: none !important;
}

#product-list.layout-gallery .productbox-image,
#product-list.layout-gallery .productbox-image.square,
#product-list.layout-gallery .productbox-image.square-image,
.opc-ProductStream.gallery .productbox-image,
.opc-ProductStream.gallery .productbox-image.square {
  background: var(--g2g-white) !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  border-radius: var(--g2g-radius) !important;
  min-height: 9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#product-list.layout-gallery .productbox-title,
#product-list.layout-gallery .price_wrapper,
#product-list.layout-gallery .productbox-description,
.opc-ProductStream.gallery .productbox-title,
.opc-ProductStream.gallery .price_wrapper {
  text-align: left;
  padding: 0.45rem 0.15rem 0;
  background: transparent;
}

#product-list.layout-gallery .productbox-title a,
.opc-ProductStream.gallery .productbox-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--g2g-text) !important;
  text-decoration: none !important;
}

#product-list.layout-gallery .productbox .price,
#product-list.layout-gallery .productbox .price-regular,
#product-list.layout-gallery .productbox .price_wrapper .price,
.opc-ProductStream.gallery .productbox .price {
  color: var(--g2g-text) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
}

/* Harter Hover tot; leichter Hauch nur am Bildquadrat (einheitlich). */
#product-list.layout-gallery .productbox:hover,
#product-list.layout-gallery .productbox:focus,
#product-list.layout-gallery .productbox.productbox-hover:hover,
#product-list.layout-gallery .productbox.productbox-hover:focus,
#product-list.layout-gallery .productbox.productbox-hover.focus,
.opc-ProductStream.gallery .productbox:hover,
.opc-ProductStream.gallery .productbox.productbox-hover:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: auto !important;
  outline: none !important;
  filter: none !important;
  overflow: hidden !important;
}

#product-list.layout-gallery .productbox:hover .productbox-image,
#product-list.layout-gallery .productbox:focus .productbox-image,
.opc-ProductStream.gallery .productbox:hover .productbox-image {
  border-color: var(--g2g-gold) !important;
  box-shadow: none !important;
}

#product-list.layout-gallery .productbox.productbox-hover .productbox-inner::before,
#product-list.layout-gallery .productbox.productbox-hover:hover .productbox-inner::before,
#product-list.layout-gallery .productbox.productbox-hover:focus .productbox-inner::before,
#product-list.layout-gallery .productbox.productbox-hover.focus .productbox-inner::before,
#product-list.layout-gallery .productbox.productbox-hover:focus-within .productbox-inner::before,
.opc-ProductStream.gallery .productbox.productbox-hover .productbox-inner::before,
.opc-ProductStream.gallery .productbox.productbox-hover:hover .productbox-inner::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  pointer-events: none !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  background: none !important;
}

#product-list.layout-gallery .productbox.productbox-hover:hover .productbox-ribbon,
#product-list.layout-gallery .productbox.productbox-hover:focus .productbox-ribbon,
#product-list.layout-gallery .productbox.productbox-hover.focus .productbox-ribbon {
  top: 0.65rem !important;
  left: 0.6rem !important;
}

#product-list.layout-gallery .productbox-onhover,
#product-list.layout-gallery .productbox:hover .productbox-onhover,
#product-list.layout-gallery .productbox-quick-actions,
#product-list.layout-gallery .productbox:hover .productbox-quick-actions,
#product-list.layout-gallery .productbox-actions,
.opc-ProductStream.gallery .productbox-onhover,
.opc-ProductStream.gallery .productbox-quick-actions,
.opc-ProductStream.gallery .productbox-actions {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#product-list.layout-gallery .productbox-title a:hover,
#product-list.layout-gallery .productbox a:hover:not(.btn),
#content-wrapper #product-list.layout-gallery .productbox a:hover:not(.btn),
.opc-ProductStream.gallery .productbox-title a:hover {
  color: var(--g2g-text) !important;
  text-decoration: none !important;
}

#product-list.layout-gallery .productbox:hover .price,
#product-list.layout-gallery .productbox:hover .price_wrapper .price {
  color: var(--g2g-text) !important;
}

#product-list.layout-gallery .productbox:hover .productbox-image,
#product-list.layout-gallery .productbox:hover .productbox-image img,
#product-list.layout-gallery .productbox:hover .productbox-image .inner,
.opc-ProductStream.gallery .productbox:hover .productbox-image img {
  filter: none !important;
  opacity: 1 !important;
  outline: none !important;
}

#product-list.layout-gallery .productbox-image::after,
#product-list.layout-gallery .productbox:hover .productbox-image::after,
.opc-ProductStream.gallery .productbox-image::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  pointer-events: none !important;
}

/* ============================================================
   PDP-Slider (Ähnliche Artikel / X-Selling)
   Slick setzt Item-Breite in px. flex-% auf .product-wrapper
   gilt relativ zum Track → Karten explodieren. Nie Grid-% hier.
   Caption: .item-slider-desc + .item-slider-price (kein form-basket).
   ============================================================ */

.slick-type-product.slick-initialized .slick-slide,
.slick-slider-other .slick-initialized .slick-slide,
#slider-related .slick-slide,
#xselling .slick-slide,
.xselling .slick-slide,
.recommendations .slick-slide,
.product-recommendations .slick-slide {
  flex: none !important;
  max-width: none !important;
}

.slick-type-product:not(.slick-initialized) .product-wrapper,
.recommendations .slick-type-product:not(.slick-initialized) .product-wrapper,
#xselling .slick-type-product:not(.slick-initialized) .product-wrapper {
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

@media (min-width: 992px) {
  .slick-type-product:not(.slick-initialized) .product-wrapper,
  .recommendations .slick-type-product:not(.slick-initialized) .product-wrapper,
  #xselling .slick-type-product:not(.slick-initialized) .product-wrapper {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 1280px) {
  .slick-type-product:not(.slick-initialized) .product-wrapper,
  .recommendations .slick-type-product:not(.slick-initialized) .product-wrapper,
  #xselling .slick-type-product:not(.slick-initialized) .product-wrapper {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
}

.slick-type-product .product-wrapper,
.slick-slider-other .product-wrapper,
#slider-related .product-wrapper,
#xselling .product-wrapper,
.recommendations .product-wrapper {
  background: transparent;
}

.slick-type-product .item-slider.productbox-image,
.slick-type-product .productbox-image.square,
.slick-slider-other .item-slider.productbox-image,
.recommendations .item-slider.productbox-image,
#xselling .item-slider.productbox-image {
  background: var(--g2g-white) !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  border-radius: var(--g2g-radius) !important;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.slick-type-product .item-slider img,
.slick-type-product .item-slider .inner img,
.slick-type-product .productbox-image img,
.slick-slider-other .productbox-image img,
.recommendations .item-slider img,
#xselling .item-slider img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center;
}

.slick-type-product .item-slider-desc,
.slick-slider-other .item-slider-desc,
.recommendations .item-slider-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  color: var(--g2g-text) !important;
}

.slick-type-product .item-slider-price,
.slick-slider-other .item-slider-price,
.recommendations .item-slider-price {
  text-align: left;
  padding-top: 0.15rem;
}

.slick-type-product .item-slider-price .price,
.slick-type-product .price.productbox-price,
.recommendations .item-slider-price .price,
#xselling .item-slider-price .price {
  color: var(--g2g-text) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
}

.slick-type-product .product-wrapper:hover,
.slick-slider-other .productbox:hover,
.recommendations .product-wrapper:hover,
#xselling .product-wrapper:hover {
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  z-index: auto !important;
}

.slick-type-product .product-wrapper:hover .item-slider,
.recommendations .product-wrapper:hover .item-slider,
#xselling .product-wrapper:hover .item-slider {
  border-color: var(--g2g-gold) !important;
  box-shadow: none !important;
}

.slick-type-product .product-wrapper:hover .item-slider-desc,
.slick-type-product .product-wrapper:hover a,
.recommendations .product-wrapper:hover .item-slider-desc {
  color: var(--g2g-text) !important;
  text-decoration: none !important;
}

.slick-type-product .productbox-onhover,
.slick-type-product .productbox-quick-actions,
.slick-type-product .productbox-actions,
.recommendations .productbox-actions,
#xselling .productbox-actions {
  display: none !important;
  pointer-events: none !important;
}

.slick-slider-other,
.recommendations .slick-type-product,
#xselling .slick-type-product,
#slider-related {
  overflow-x: clip;
  max-width: 100%;
}

.slick-type-product .slick-list,
.slick-slider-other .slick-list,
.recommendations .slick-list,
#xselling .slick-list {
  overflow: hidden;
}

.slick-type-product .slick-arrow,
.slick-slider-other .slick-prev,
.slick-slider-other .slick-next,
.recommendations .slick-arrow,
#xselling .slick-arrow {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  opacity: 1 !important;
  background: var(--g2g-white) !important;
  border: 1px solid var(--g2g-hell-border) !important;
  color: var(--g2g-dark) !important;
  box-shadow: none !important;
  border-radius: 999px;
  top: 6.75rem;
  margin-top: 0 !important;
  transform: none !important;
  z-index: 2;
}

.slick-type-product .slick-prev,
.slick-slider-other .slick-prev,
.recommendations .slick-prev,
#xselling .slick-prev {
  left: 0.15rem;
}

.slick-type-product .slick-next,
.slick-slider-other .slick-next,
.recommendations .slick-next,
#xselling .slick-next {
  right: 0.15rem;
}

.slick-type-product .slick-arrow::after,
.slick-slider-other .slick-arrow::after,
.recommendations .slick-arrow::after,
#xselling .slick-arrow::after {
  color: var(--g2g-dark) !important;
  font-size: 0.75rem !important;
}

.slick-type-product .slick-arrow:hover,
.slick-slider-other .slick-prev:hover,
.slick-slider-other .slick-next:hover,
.recommendations .slick-arrow:hover,
#xselling .slick-arrow:hover {
  border-color: var(--g2g-gold) !important;
  color: var(--g2g-dark) !important;
  background: var(--g2g-white) !important;
}

.slick-type-product .slick-arrow:hover::after,
.recommendations .slick-arrow:hover::after {
  color: var(--g2g-dark) !important;
}

@media (max-width: 991.98px) {
  .slick-type-product .slick-arrow,
  .slick-slider-other .slick-arrow,
  .slick-slider-other .slick-prev,
  .slick-slider-other .slick-next,
  .recommendations .slick-arrow,
  #xselling .slick-arrow,
  #slider-related .slick-arrow {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .recommendations,
  #slider-related,
  .slick-slider-other,
  #xselling {
    overflow-x: clip;
    max-width: 100%;
  }
}

.slick-type-product .slick-dots li button:before,
.recommendations .slick-dots li button:before {
  color: var(--g2g-stein) !important;
  opacity: 0.7;
}

/* ============================================================
   PDP-Galerie — weißer Grund, Cover, kein hartes Zoom-Overlay.
   Mega-Nav unberührt. Varianten-Kacheln behalten ihren Hauch.
   ============================================================ */

#product-offer .product-gallery,
#product-offer #gallery,
#product-offer #image_wrapper,
#product-offer .product-gallery-lg,
.product-detail .product-gallery,
.product-detail #gallery {
  background: var(--g2g-white);
}

#product-offer .product-gallery img,
#product-offer #gallery img,
#product-offer #image_wrapper img,
#product-offer .product-gallery-lg img,
.product-detail .product-gallery img {
  object-fit: cover;
  object-position: center;
  background: var(--g2g-white);
}

#product-offer .zoomPup,
#product-offer .zoomWindow,
#product-offer .zoomPreload,
#product-offer .zoomWrapper::after,
#gallery .zoomPup,
#gallery .zoomWindow,
.product-gallery .zoomPup,
.product-gallery .zoomWindow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#product-offer .product-gallery a:hover,
#product-offer #gallery a:hover,
#content-wrapper #product-offer .product-gallery a:hover:not(.btn) {
  color: inherit !important;
}

#product-offer .product-thumbnails .slick-slide img,
#product-offer #gallery .slick-slide img,
.product-detail .product-thumbnails img {
  border: 1px solid transparent;
  background: var(--g2g-white);
  transition: border-color 0.15s ease;
}

#product-offer .product-thumbnails .slick-slide:hover img,
#product-offer #gallery .slick-slide:hover img {
  border-color: var(--g2g-hell-border);
}

#content-wrapper .item-slider-desc,
#content-wrapper .slick-type-product a:not(.btn),
#content-wrapper .recommendations a:not(.btn) {
  color: var(--g2g-text) !important;
  text-decoration: none !important;
}

#content-wrapper .item-slider-desc:hover,
#content-wrapper .slick-type-product a:hover:not(.btn),
#content-wrapper .recommendations a:hover:not(.btn) {
  color: var(--g2g-text) !important;
  text-decoration: none !important;
}

/* ============================================================
   Karten-Hover einheitlich: NUR 1px Gold-Linie.
   Mix-Ursache: NOVA .productbox-hover:hover .productbox-inner::before
   (±1rem, 1.5rem Schatten, z-index 1001, Ribbon-Sprung) plus
   getrennte Hover-Pfade (PLP-Galerie / generische Box / Slider).
   .productbox-hover = Ruhezustand, außer Goldrahmen am Bild.
   Mega-Nav unberührt. form-basket nicht verstecken.
   ============================================================ */

html body .product-wrapper:hover .productbox-inner::before,
html body .product-wrapper .productbox:hover .productbox-inner::before,
html body .productbox:hover .productbox-inner::before,
html body .productbox.productbox-hover .productbox-inner::before,
html body .productbox.productbox-hover:hover .productbox-inner::before,
html body .productbox.productbox-hover:focus .productbox-inner::before,
html body .productbox.productbox-hover.focus .productbox-inner::before,
html body .productbox.productbox-hover:focus-visible .productbox-inner::before,
html body .productbox.productbox-hover:focus-within .productbox-inner::before,
html body #product-list .productbox.productbox-hover .productbox-inner::before,
html body #product-list .productbox.productbox-hover:hover .productbox-inner::before,
html body #product-list.layout-gallery .productbox.productbox-hover:hover .productbox-inner::before,
html body .opc-ProductStream .productbox.productbox-hover .productbox-inner::before,
html body .opc-ProductStream .productbox.productbox-hover:hover .productbox-inner::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  box-shadow: none !important;
  outline: none !important;
  background: none !important;
  pointer-events: none !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  filter: none !important;
}

html body .product-wrapper:hover .productbox,
html body .product-wrapper:focus .productbox,
html body .productbox:hover,
html body .productbox:focus,
html body .productbox.productbox-hover:hover,
html body .productbox.productbox-hover:focus,
html body .productbox.productbox-hover.focus,
html body .opc-ProductStream .productbox:hover,
html body .slick-type-product .product-wrapper:hover,
html body .recommendations .product-wrapper:hover,
html body #xselling .product-wrapper:hover,
html body #slider-related .product-wrapper:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  z-index: auto !important;
}

html body .product-wrapper:hover .productbox-image,
html body .product-wrapper:focus .productbox-image,
html body .productbox:hover .productbox-image,
html body .productbox.productbox-hover:hover .productbox-image,
html body .productbox.productbox-hover.focus .productbox-image,
html body .opc-ProductStream .productbox:hover .productbox-image,
html body .slick-type-product .product-wrapper:hover .item-slider,
html body .recommendations .product-wrapper:hover .item-slider,
html body #xselling .product-wrapper:hover .item-slider,
html body #slider-related .product-wrapper:hover .item-slider,
html body .product-wrapper:hover .item-slider {
  border-color: var(--g2g-gold) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  outline: none !important;
}

html body .productbox:hover .productbox-ribbon,
html body .productbox.productbox-hover:hover .productbox-ribbon,
html body .productbox.productbox-hover:focus .productbox-ribbon,
html body .productbox.productbox-hover.focus .productbox-ribbon {
  top: 0.65rem !important;
  left: 0.6rem !important;
}

html body #product-list.layout-gallery .productbox-onhover,
html body .opc-ProductStream .productbox-onhover,
html body .slick-type-product .productbox-onhover,
html body .recommendations .productbox-onhover,
html body .product-wrapper .productbox-quick-actions,
html body .product-wrapper:hover .productbox-quick-actions {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .product-wrapper:hover a:not(.btn),
html body .productbox:hover a:not(.btn),
html body #content-wrapper .product-wrapper a:hover:not(.btn),
html body #content-wrapper .productbox a:hover:not(.btn),
html body #content-wrapper .item-slider-desc:hover {
  color: var(--g2g-text) !important;
  text-decoration: none !important;
}

html body .product-wrapper:hover img,
html body .productbox:hover img,
html body .product-wrapper:hover .productbox-image .inner,
html body .productbox:hover .productbox-image .inner {
  filter: none !important;
  opacity: 1 !important;
}

/* ============================================================
   Warenkorb-Popup
   "Artikel wurde in den Warenkorb gelegt" — dezentes eModal
   (custom.js schaltet das PDP-Kaufformular auf NOVAs AJAX-Flow;
   .g2g-cart-modal wird per JS gesetzt, sobald das Modal
   #pushed-success enthält). Dieselben #pushed-success-Regeln
   greifen auch für die No-JS-Fallback-Karte auf der PDP.
   ============================================================ */

/* --- Modal-Hülle: kompakt, Fable-Look statt NOVA-XL --- */
.modal.g2g-cart-modal .modal-dialog {
  max-width: 720px;
  width: auto;
  margin: 1.75rem auto;
}

.modal.g2g-cart-modal .modal-content {
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  box-shadow: var(--g2g-shadow-lg);
}

.modal.g2g-cart-modal .modal-header {
  align-items: center;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--g2g-hell-border);
  background: var(--g2g-ribbon-ok);
  border-radius: var(--g2g-radius) var(--g2g-radius) 0 0;
}

.modal.g2g-cart-modal .modal-title {
  color: var(--g2g-success);
  font-size: 1rem;
  font-weight: 600;
}

.modal.g2g-cart-modal .modal-title::before {
  content: "✓";
  margin-right: 0.5rem;
  font-weight: 700;
}

.modal.g2g-cart-modal .modal-header .close {
  color: var(--g2g-success);
  opacity: 0.7;
  min-width: 44px;
  min-height: 44px;
  margin: -0.75rem -0.75rem -0.75rem auto;
}

.modal.g2g-cart-modal .modal-body {
  padding: 1rem 1.25rem 1.25rem;
}

/* --- Inhalt kompakt: kleines Bild, keine Daten-Tabelle --- */
#pushed-success .productbox-title.subheadline {
  font-size: 1rem;
  font-weight: 600;
  color: var(--g2g-dark);
  margin-bottom: 0.5rem;
}

#pushed-success .pushed-success-image-wrapper {
  flex: 0 0 auto;
  width: auto;
  max-width: 160px;
}

#pushed-success .pushed-success-image-wrapper img {
  max-height: 110px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  border-radius: calc(var(--g2g-radius) - 2px);
}

/* Artikelnummer/Merkmale/Gewichte: auf der Bestätigung redundant */
#pushed-success dl.form-row {
  display: none;
}

/* --- Zwei klare Buttons: Warenkorb primary, Weiter sekundär --- */
#pushed-success .pushed-success-buttons {
  margin-top: 0.75rem;
}

#pushed-success .pushed-success-buttons .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--g2g-radius);
  font-weight: 600;
}

#pushed-success .pushed-success-buttons .btn-basket {
  background: var(--g2g-btn);
  border-color: var(--g2g-btn);
  color: var(--g2g-white);
}

#pushed-success .pushed-success-buttons .btn-basket:hover,
#pushed-success .pushed-success-buttons .btn-basket:focus {
  background: var(--g2g-dark);
  border-color: var(--g2g-dark);
  color: var(--g2g-white);
}

#pushed-success .pushed-success-buttons .continue-shopping {
  background: transparent;
  border-color: var(--g2g-hell-border);
  color: var(--g2g-btn);
}

#pushed-success .pushed-success-buttons .continue-shopping:hover,
#pushed-success .pushed-success-buttons .continue-shopping:focus {
  background: var(--g2g-hell);
  border-color: var(--g2g-gold);
  color: var(--g2g-dark);
}

/* --- Cross-Selling-Slider ("Kunden kauften auch"), wenn Daten da --- */
#pushed-success .x-selling .productbox-title.subheadline {
  font-size: 0.9375rem;
  color: var(--g2g-text-muted, var(--g2g-dark-mid));
  margin-bottom: 0.25rem;
}

#pushed-success .x-selling .productbox {
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  background: var(--g2g-white);
}

/* --- No-JS-Fallback: Karte auf der PDP entschärfen --- */
#pushed-success.card {
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  box-shadow: var(--g2g-shadow-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}

#pushed-success.card .card-header.alert-success {
  background: var(--g2g-ribbon-ok);
  color: var(--g2g-success);
  border-bottom: 1px solid var(--g2g-hell-border);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
}

/* --- Mobile (< 768px): Modal füllt nicht den Screen, Buttons gestapelt --- */
@media (max-width: 767.98px) {
  .modal.g2g-cart-modal .modal-dialog {
    margin: 0.75rem;
    max-width: none;
  }

  #pushed-success .pushed-success-image-wrapper {
    max-width: 120px;
  }

  #pushed-success .pushed-success-image-wrapper img {
    max-height: 88px;
  }

  #pushed-success .pushed-success-buttons > [class*="col"] + [class*="col"] {
    margin-top: 0.5rem;
  }

  /* x-selling-Spalte ist im NOVA-Template hart col-6 → mobil auf volle Breite */
  #pushed-success .x-selling {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 1rem;
  }
}

/* --- Mini-Toast: "… ist im Warenkorb" (custom.js, kein Flow-Stop) --- */
.g2g-cart-toast {
  position: fixed;
  top: 96px;
  right: 16px;
  z-index: 1090;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: min(520px, calc(100vw - 32px));
  padding: 0.625rem 0.75rem 0.625rem 0.875rem;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-left: 3px solid var(--g2g-success);
  border-radius: var(--g2g-radius);
  box-shadow: var(--g2g-shadow-lg);
  color: var(--g2g-text);
  font-size: 0.875rem;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.g2g-cart-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.g2g-cart-toast-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  background: var(--g2g-ribbon-ok);
  color: var(--g2g-success);
  font-weight: 700;
  font-size: 0.8125rem;
}

.g2g-cart-toast-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--g2g-dark);
}

.g2g-cart-toast-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -0.625rem 0;
  padding: 0 0.25rem;
  color: var(--g2g-btn);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.g2g-cart-toast-link:hover,
.g2g-cart-toast-link:focus {
  color: var(--g2g-dark);
  text-decoration: none;
  border-bottom-color: var(--g2g-gold);
}

.g2g-cart-toast-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -0.625rem -0.75rem -0.625rem -0.375rem;
  border: 0;
  background: transparent;
  color: var(--g2g-text-muted, var(--g2g-dark-mid));
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.g2g-cart-toast-close:hover {
  color: var(--g2g-dark);
}

@media (max-width: 767.98px) {
  .g2g-cart-toast {
    top: 68px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g2g-cart-toast {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   Homepage (03.09.2026) — Vor-Ort-Block mit OSM-Karte
   Karte in Karte: weiße Store-Card, Kartenbild mit Haarlinie
   (--g2g-hell-border), Attribution klein darunter (ODbL).
   ============================================================ */
.g2g-store-map {
  display: flex;
}

.g2g-map-frame {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.g2g-map-frame img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  flex: 1 1 auto;
  object-fit: cover;
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  background: var(--g2g-hell);
}

.g2g-map-frame figcaption {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--g2g-text-muted);
  text-align: right;
}

/* Mobile: Karte unter dem Text, kompakter */
@media (max-width: 767.98px) {
  .g2g-store-map {
    margin-top: 1.5rem;
  }

  .g2g-map-frame img {
    min-height: 200px;
    max-height: 260px;
  }
}

/* ============================================================
   Startseite v5 (Fable, 04.09.2026) — eigener Block
   Blueprint: blueprint/grow2gether-homepage-v5.json
   Generator: scripts/generate-homepage-blueprint.py
   Neu: grosser Hero, Drei Einstiege (Growshop/Headshop/Seeds),
   USP-Band, "Empfohlen für dich" mit Leer-Ausblendung,
   Consent-Banner im Fable-Look.
   ============================================================ */

/* --- Hero v5: Papier-Look, grosse Typo, EIN CTA --- */
.g2g-block-hero-v5 .g2g-topbar {
  margin-bottom: 3rem;
}

.g2g-hero-v5 {
  padding: 1rem 0 3.5rem;
  max-width: 56rem;
}

.g2g-hero-v5 h1 {
  font-size: clamp(2.6rem, 6.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--g2g-dark);
  margin: 0 0 1.25rem;
}

.g2g-hero-v5 .g2g-hero-lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--g2g-text-muted) !important;
  max-width: 52ch;
  margin-bottom: 1.75rem;
}

.g2g-hero-v5 .g2g-hero-cta .btn {
  min-height: 48px;
  padding: 0.75rem 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* --- Drei Einstiege: Growshop / Headshop / Seeds --- */
.g2g-block-entries {
  margin-bottom: 2.5rem;
}

.g2g-entry-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-top: 3px solid var(--g2g-gold);
  border-radius: var(--g2g-radius);
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.g2g-entry-card:hover {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-shadow);
  transform: translateY(-3px);
}

.g2g-entry-title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--g2g-dark) !important;
}

.g2g-entry-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--g2g-text-muted) !important;
  flex: 1 1 auto;
}

.g2g-entry-cta {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--g2g-btn) !important;
  margin-top: 0.5rem;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

.g2g-entry-cta::after {
  content: "›";
  color: var(--g2g-gold);
  font-size: 1.125rem;
  line-height: 1;
  margin-left: 0.4rem;
  transition: margin-left 0.15s ease;
}

.g2g-entry-card:hover .g2g-entry-cta {
  color: var(--g2g-gold) !important;
}

.g2g-entry-card:hover .g2g-entry-cta::after {
  margin-left: 0.65rem;
}

/* --- "Empfohlen für dich": ausblenden solange ohne Produkte.
   Datenquelle = Suchspecial Bestseller (tbestseller, aggregierte
   Bestellhistorie; min. 10 Verkäufe / 90 Tage). Bis dahin rendert JTL
   einen leeren Stream → Head + Stream weg statt Loch. --- */
.g2g-section--recommended:not(:has(.productbox, .product-wrapper)),
.g2g-section--available:not(:has(.productbox, .product-wrapper)) {
  display: none !important;
}

/* Die zugehörige Überschrift (.g2g-head-reco) blendet custom.js aus —
   CSS allein geht nicht: :has() darf nicht in :has() verschachtelt werden. */
.g2g-head-reco.g2g-head-reco--empty {
  display: none !important;
}

/* --- USP-Band (Vertrauen): weisses Band, drei Spalten --- */
.g2g-block-usps {
  margin: 3.5rem 0 1rem;
}

.g2g-usp-band {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: 12px;
  padding: 1.75rem 1rem;
}

.g2g-usp {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 1.75rem;
  border-left: 1px solid var(--g2g-hell-border);
}

.g2g-usp:first-child {
  border-left: none;
}

.g2g-usp strong {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--g2g-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.g2g-usp strong::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g2g-gold);
  flex: none;
}

.g2g-usp span {
  font-size: 0.875rem;
  color: var(--g2g-text-muted);
  line-height: 1.5;
}

/* --- Consent-Banner im Fable-Look (dezent, Papier/Sand/Braun) --- */
#consent-banner {
  background: var(--g2g-white) !important;
  color: var(--g2g-text) !important;
  border: 1px solid var(--g2g-hell-border) !important;
  border-radius: var(--g2g-radius) !important;
  box-shadow: var(--g2g-shadow) !important;
}

#consent-banner .consent-banner-icon {
  color: var(--g2g-gold) !important;
}

#consent-banner .consent-banner-description,
#consent-banner .consent-banner-description p {
  color: var(--g2g-text-muted) !important;
}

#consent-banner a {
  color: var(--g2g-btn) !important;
  font-weight: 600;
}

#consent-banner a:hover {
  color: var(--g2g-gold) !important;
}

/* --- Tablet 768–991px --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .g2g-entry-card {
    padding: 1.35rem 1.25rem 1.15rem;
  }

  .g2g-usp {
    padding: 0 1.1rem;
  }
}

/* --- Mobile ≤ 767px --- */
@media (max-width: 767.98px) {
  .g2g-block-hero-v5 .g2g-topbar {
    margin-bottom: 1.5rem;
  }

  .g2g-hero-v5 {
    padding: 0.25rem 0 2rem;
  }

  .g2g-hero-v5 h1 {
    font-size: clamp(2.15rem, 9.5vw, 2.6rem);
  }

  .g2g-hero-v5 .g2g-hero-lead {
    font-size: 1rem;
    margin-bottom: 1.35rem;
  }

  .g2g-hero-v5 .g2g-hero-cta .btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .g2g-block-entries {
    margin-bottom: 1.5rem;
  }

  .g2g-entry-card {
    padding: 1.35rem 1.25rem 1.15rem;
  }

  .g2g-block-usps {
    margin-top: 2rem;
  }

  .g2g-usp-band {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
  }

  .g2g-usp {
    padding: 0;
    border-left: none;
  }
}

/* ============================================================
   Startseite v6 (Fable, 04.09.2026) — Ioannis-Feedback 8+1 Punkte
   Blueprint: blueprint/grow2gether-homepage-v6.json
   Generator: scripts/generate-homepage-blueprint.py
   Neu: Hero mit Foto (keimende Hanfsamen + Overlay ~40 %),
   Samenbanken-Text-Karten (bis Wawi-Logos da sind), FAQ-Akkordeon
   (details/summary), Karte klickbar → Google-Route, Matterport-
   3D-Rundgang (Click-to-Load), Slick-Arrow-Fix (zentriert, 44px,
   nicht abgeschnitten). Kategorie-Kacheln + "Empfohlen" sind raus.
   ============================================================ */

/* --- Hero v6: Foto, dunkles Overlay (var(--g2g-dark) ~40 %), helle Typo --- */
.g2g-block-hero-v6 .g2g-topbar {
  margin-bottom: 2rem;
}

.g2g-hero-v6 {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 2.25rem;
  /* Auf flachen Laptop-Fenstern gedeckelt (max. halbe Fensterhöhe), damit
     unter dem Hero die Einstiegskarten anreißen — „man sieht, dass es
     weitergeht" (Ioannis 15.09.2026). */
  min-height: min(30rem, 50vh);
  display: flex;
  align-items: flex-end;
}

.g2g-hero-v6 .g2g-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* Overlay: unten/links stärker, damit die Headline sicher lesbar ist */
.g2g-hero-v6::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--g2g-hero-overlay) 0%,
    var(--g2g-hero-overlay-strong) 100%
  );
  pointer-events: none;
}

.g2g-hero-v6 .g2g-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  padding: 3.5rem 3rem 3rem;
}

.g2g-hero-v6 .g2g-eyebrow {
  color: var(--g2g-hell);
  opacity: 0.85;
}

.g2g-hero-v6 h1 {
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--g2g-hell);
  margin: 0.5rem 0 1.1rem;
}

.g2g-hero-v6 h1 .g2g-gold-text {
  color: var(--g2g-gold);
}

/* Flache Laptop-Fenster (z. B. 13" mit Dock + Safari-Leisten): Hero-Inhalt
   verdichten, damit unterm Hero die Einstiegskarten anreißen (15.09.2026). */
@media (min-width: 992px) and (max-height: 760px) {
  .g2g-hero-v6 .g2g-hero-inner {
    padding: 2rem 2.5rem 1.8rem;
  }

  .g2g-hero-v6 h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.2rem);
    margin: 0.35rem 0 0.8rem;
  }
}

.g2g-hero-v6 .g2g-hero-lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--g2g-hell) !important;
  opacity: 0.92;
  max-width: 52ch;
  margin-bottom: 1.6rem;
}

.g2g-hero-v6 .g2g-hero-cta .btn {
  min-height: 48px;
  padding: 0.75rem 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* --- Slick-Arrows (Punkt 4): vertikal mittig auf Bildhöhe, 44px,
   vollständig sichtbar. Slider-Aufbau: quadratisches Bild + ~110px
   Text (Titel + Preis) darunter → Bildmitte = 50 % minus halben
   Textblock. Innenliegend (left/right 0.5rem) statt überstehend,
   damit overflow:hidden der OPC-Sektion nichts mehr abschneidet.
   Optik wie "Ähnliche Artikel" (weißer Kreis, Sand-Rand, dunkler Pfeil). --- */
.opc-product-slider .slick-arrow,
.g2g-section--available .slick-arrow {
  width: 44px !important;
  height: 44px !important;
  top: calc(50% - 61px) !important; /* Bildmitte: 50 % − halber Textblock (Titel+Preis) */
  margin-top: 0 !important;
  transform: none !important;
}

/* 1.5rem statt 0.5rem: die Bootstrap-Row hat −15px Margin, bei weniger
   Abstand schneidet overflow:hidden der OPC-Sektion den Kreis an. */
.opc-product-slider .slick-prev,
.g2g-section--available .slick-prev {
  left: 1.5rem !important;
  right: auto !important;
}

.opc-product-slider .slick-next,
.g2g-section--available .slick-next {
  right: 1.5rem !important;
  left: auto !important;
}

/* --- Samenbanken-Text-Karten (Punkt 5a): Name auf Papier-Karte.
   Ersetzt den ManufacturerSlider, solange keine Hersteller-Logos in
   der Wawi sind (der Slider rendert sonst leere weiße Karten). --- */
.g2g-block-seedbanks {
  margin-bottom: 2.5rem;
}

.g2g-seedbank-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

.g2g-seedbank-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 1rem 1.1rem;
  background: var(--g2g-hell);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  text-align: center;
  text-decoration: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.g2g-seedbank-card span {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--g2g-dark);
}

.g2g-seedbank-card:hover {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-shadow);
}

#content-wrapper .g2g-seedbank-card,
#content-wrapper .g2g-seedbank-card:hover {
  color: var(--g2g-dark) !important;
  text-decoration: none !important;
}

/* --- FAQ v7 (Ioannis 04.09.2026, Punkt 1): Karten-Look auf Papier,
   2-spaltig ab Desktop (Grid, align-start — offene Karte streckt den
   Nachbarn nicht), Plus-Icon das zu × rotiert, Trennlinie zur Antwort.
   Weiter details/summary ohne JS, kein SVG (OPC-Text-Sanitizer). --- */
.g2g-block-faq {
  margin-bottom: 2.5rem;
}

.g2g-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem 1rem;
  align-items: start;
}

.g2g-faq-item {
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: 10px;
  box-shadow: var(--g2g-shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.g2g-faq-item:hover {
  border-color: var(--g2g-gold);
}

.g2g-faq-item[open] {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-shadow);
}

.g2g-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px; /* Touch >= 44px */
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--g2g-dark);
  cursor: pointer;
  list-style: none;
}

.g2g-faq-item summary::-webkit-details-marker {
  display: none;
}

/* Plus-Icon: rotiert offen zu × (Text-Pseudo, sanitizer-sicher) */
/* Plus als gezeichnete Linien statt Text-Glyph — Font-Metriken haben das
   „+“ nie exakt zentriert (Ioannis 15.09.2026). Öffnen = 45°-Rotation. */
.g2g-faq-item summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  background-color: var(--g2g-hell);
  background-image:
    linear-gradient(var(--g2g-btn), var(--g2g-btn)),
    linear-gradient(var(--g2g-btn), var(--g2g-btn));
  background-size: 12px 2px, 2px 12px;
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px solid var(--g2g-hell-border);
  border-radius: 50%;
  transform: rotate(0deg);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.g2g-faq-item[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--g2g-gold-soft);
  border-color: var(--g2g-gold);
}

.g2g-faq-item summary:hover {
  color: var(--g2g-btn);
}

.g2g-faq-a {
  padding: 0.875rem 1.25rem 1.1rem;
  border-top: 1px solid var(--g2g-hell-border);
  margin: 0 0 0;
}

.g2g-faq-a p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--g2g-text-muted);
}

/* --- Karte klickbar (Punkt 6): OSM-Bild als Link auf Google-Route --- */
.g2g-map-link {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  text-decoration: none !important;
}

.g2g-map-link img {
  transition: border-color 0.15s ease;
}

.g2g-map-link:hover img {
  border-color: var(--g2g-gold);
}

.g2g-map-hint {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.375rem 0.875rem;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--g2g-dark);
  box-shadow: var(--g2g-shadow-sm);
  pointer-events: none;
}

.g2g-map-link:hover .g2g-map-hint {
  border-color: var(--g2g-gold);
}

/* --- 3D-Rundgang "Schau dich um" (Punkt 8): Matterport Click-to-Load.
   Kein iframe im HTML — custom.js lädt ihn erst nach Klick (Datenschutz). --- */
.g2g-tour {
  margin-top: 2rem;
}

.g2g-tour h3 {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--g2g-dark);
  margin-bottom: 0.375rem;
}

.g2g-tour > p {
  max-width: 62ch;
}

.g2g-tour-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  width: 100%;
  background: var(--g2g-hell);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  overflow: hidden;
}

.g2g-tour-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.g2g-tour-start {
  min-height: 48px;
  padding: 0.75rem 2rem;
  font-weight: 600;
}

/* --- Tablet 768–991px --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .g2g-hero-v6 {
    min-height: 24rem;
  }

  .g2g-hero-v6 .g2g-hero-inner {
    padding: 2.5rem 2rem 2rem;
  }

  .g2g-seedbank-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Mobile ≤ 767px --- */
@media (max-width: 767.98px) {
  .g2g-block-hero-v6 .g2g-topbar {
    margin-bottom: 1.25rem;
  }

  .g2g-hero-v6 {
    min-height: 26rem;
    margin-bottom: 2rem;
    border-radius: var(--g2g-radius);
  }

  .g2g-hero-v6 .g2g-hero-bg {
    object-position: 62% center; /* Keimling rechts im Bild sichtbar halten */
  }

  .g2g-hero-v6 .g2g-hero-inner {
    padding: 2rem 1.25rem 1.5rem;
  }

  .g2g-hero-v6 h1 {
    font-size: clamp(2.05rem, 9vw, 2.5rem);
  }

  .g2g-hero-v6 .g2g-hero-lead {
    font-size: 1rem;
    margin-bottom: 1.25rem;
  }

  .g2g-hero-v6 .g2g-hero-cta .btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .g2g-seedbank-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .g2g-seedbank-card {
    min-height: 60px;
    padding: 0.75rem 0.875rem;
  }

  .g2g-tour {
    margin-top: 1.5rem;
  }

  .g2g-tour-frame {
    aspect-ratio: 4 / 3;
  }

  .g2g-map-hint {
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g2g-faq-item summary::after,
  .g2g-map-link img {
    transition: none;
  }
}

/* ============================================================
   Startseite v7 (Fable, 04.09.2026) — Ioannis-Feedback Runde 2
   Blueprint: blueprint/grow2gether-homepage-v7.json
   Generator: scripts/generate-homepage-blueprint.py
   Neu: Drei Einstiege als FOTO-Karten (statt Textkacheln),
   Ratgeber-Block (3 News-Karten, Alt-Content der WP-Site),
   FAQ 2-spaltig (Block oben bei v6 ersetzt), Footer-Politur
   (theme/layout/footer.tpl Child-Override), Widerrufs-Link klein
   (theme/snippets/withdrawal_link.tpl Child-Override).
   ============================================================ */

/* --- Drei Einstiege v7: Bild dominant, Titelzeile darunter,
   ganze Karte = Link. Kein "Zum ... >"-Textlink-Stil mehr. --- */
.g2g-entry-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: var(--g2g-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.g2g-entry-tile:hover {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-shadow);
  transform: translateY(-3px);
}

.g2g-entry-media {
  display: block;
  height: 220px;
  overflow: hidden;
  background: var(--g2g-hell);
}

.g2g-entry-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.g2g-entry-tile:hover .g2g-entry-media img {
  transform: scale(1.03);
}

/* Headshop: Freisteller (Volcano, transparentes PNG) auf Papier */
.g2g-entry-media--contain img {
  object-fit: contain;
  padding: 1.1rem;
}

.g2g-entry-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.9rem 1.25rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--g2g-dark) !important;
}

.g2g-entry-chev {
  flex: none;
  color: var(--g2g-gold);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.g2g-entry-tile:hover .g2g-entry-chev {
  transform: translateX(4px);
}

#content-wrapper .g2g-entry-tile,
#content-wrapper .g2g-entry-tile:hover {
  text-decoration: none !important;
}

/* --- Ratgeber-Block (Blog): 3 Karten, Bild + Datum + Titel --- */
.g2g-block-blog {
  margin-bottom: 2.5rem;
}

.g2g-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.g2g-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--g2g-shadow-sm);
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.g2g-blog-card:hover {
  border-color: var(--g2g-gold);
  box-shadow: var(--g2g-shadow);
  transform: translateY(-3px);
}

.g2g-blog-media {
  display: block;
  height: 180px;
  overflow: hidden;
  background: var(--g2g-media-grad);
}

.g2g-blog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.g2g-blog-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem 1.25rem 1.15rem;
  flex: 1 1 auto;
}

.g2g-blog-date {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g2g-text-muted) !important;
}

.g2g-blog-title {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--g2g-dark) !important;
}

.g2g-blog-text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--g2g-text-muted) !important;
  flex: 1 1 auto;
}

.g2g-blog-more {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--g2g-btn) !important;
}

.g2g-blog-more span {
  color: var(--g2g-gold);
}

#content-wrapper .g2g-blog-card,
#content-wrapper .g2g-blog-card:hover {
  text-decoration: none !important;
}

/* --- Footer v7: Marken-/Kontakt-Zeile (theme/layout/footer.tpl),
   Gold-Haarlinie, dezenter Rechtsbereich --- */
#footer {
  border-top-width: 1px; /* Haarlinie statt 2px */
  padding-top: 2.5rem;
}

.g2g-footer-top {
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--g2g-hell-border);
}

.g2g-footer-top .col-12 {
  padding-top: 0.5rem;
}

.g2g-footer-brand img {
  display: block;
  margin-bottom: 0.75rem;
}

.g2g-footer-name {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--g2g-dark);
  margin-bottom: 0.375rem;
}

.g2g-footer-top p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--g2g-text-muted);
  margin-bottom: 0.25rem;
  max-width: 38ch;
}

.g2g-footer-h {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g2g-text);
  margin-bottom: 0.625rem;
}

#footer .g2g-footer-top a:not(.btn) {
  color: var(--g2g-text-muted) !important;
  text-decoration: none;
}

#footer .g2g-footer-top a:not(.btn):hover {
  color: var(--g2g-btn) !important;
}

/* Widerrufs-Link: klein im Rechtsbereich statt fettem Primary-Button
   (Override theme/snippets/withdrawal_link.tpl) */
#footer .withdrawal-link-wrapper {
  margin-top: 0.25rem;
}

#footer .g2g-withdrawal-link {
  font-size: 0.8125rem;
  color: var(--g2g-text-muted) !important;
  text-decoration: none;
}

#footer .g2g-withdrawal-link:hover {
  color: var(--g2g-btn) !important;
  text-decoration: underline;
}

/* Copyright-Zeile: hell statt NOVA-dunkel, ruhig */
#footer #copyright {
  background: var(--g2g-hell);
  border-top: 1px solid var(--g2g-hell-border);
  padding: 0.875rem 0;
  font-size: 0.8125rem;
  color: var(--g2g-text-muted);
}

/* --- Tablet 768–991px --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .g2g-faq {
    grid-template-columns: 1fr;
    max-width: 44rem;
  }

  .g2g-entry-media {
    height: 170px;
  }

  .g2g-blog-grid {
    gap: 0.75rem;
  }

  .g2g-blog-media {
    height: 140px;
  }

  .g2g-blog-body {
    padding: 0.875rem 1rem 1rem;
  }
}

/* --- Mobile ≤ 767px --- */
@media (max-width: 767.98px) {
  .g2g-faq {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }

  .g2g-entry-media {
    height: 180px; /* Ioannis: 160 bis 200px auf 390 */
  }

  .g2g-entry-label {
    min-height: 52px;
    font-size: 1.125rem;
    padding: 0.75rem 1rem;
  }

  .g2g-blog-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .g2g-blog-media {
    height: 170px;
  }

  .g2g-footer-top .col-12 {
    padding-top: 1rem;
  }

  .g2g-footer-top {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g2g-entry-tile,
  .g2g-entry-media img,
  .g2g-entry-chev,
  .g2g-blog-card {
    transition: none;
  }
}

/* === g2g Desktop-Textskala (GENERIERT 15.09.2026) ============
   Root bleibt 85 % (alte Layout-Dichte), aber jede globale Text-
   größe wird auf Desktop x1.25 gesetzt — ergibt exakt die geren-
   derten Größen des 17px-Stands, den Ioannis gut fand (PDP ~15px,
   Nebentexte ~16px), ohne Abstände zu vergrößern. Mobile bleibt.
   NICHT von Hand editieren — Quelle sind die Originalregeln oben;
   neu erzeugen mit: python3 scripts/generate-desktop-textscale.py
   ============================================================ */
@media (min-width: 992px) {
  /* Vererbter Text (NOVA body 0.875rem) -> 14.875px wie gehabt */
  body { font-size: 1.09375rem; }
  #header-top-bar { font-size: 1.01562rem; }
  #shop-nav.nav-icons > .nav-item > .nav-link .fas, #shop-nav.nav-icons > .nav-item > .nav-link .fa, #shop-nav.nav-icons .account-icon-dropdown > .nav-link .fas, #shop-nav.nav-icons .cart-icon-dropdown > .nav-link .fas, #shop-nav.nav-icons .cart-icon-dropdown-icon { font-size: 1.32812rem; }
  #shop-nav.nav-icons .cart-icon-dropdown > .nav-link .cart-icon-dropdown-price, #shop-nav.nav-icons .cart-icon-dropdown > .nav-link .price_text, #shop-nav.nav-icons .cart-icon-dropdown > .nav-link .cart-icon-dropdown-price *, #shop-nav.nav-icons .cart-icon-dropdown > .nav-link span:not(.fa-sup):not(.badge) { font-size: 1.01562rem; }
  #search .input-group .btn .fas, .search-wrapper .input-group .btn .fas, .main-search .input-group .btn .fas, .form-icon .input-group .btn .fas { font-size: 1.25rem; }
  .g2g-search-quick { font-size: 1.17188rem; }
  .g2g-search-section-title { font-size: 0.9375rem; }
  .g2g-search-meta-link { font-size: 1.17188rem; }
  .g2g-search-product-name { font-size: 1.17188rem; }
  .g2g-search-product-price { font-size: 1.09375rem; }
  .g2g-search-suggest-empty { font-size: 1.09375rem; }
  .g2g-search-suggest-all { font-size: 1.01562rem; }
  #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 { font-size: 1.01562rem; }
  .amount-container .btn, .quantity-spinner-wrapper .btn, .input-group:has(input[name="menge"]) .btn, .input-group:has(input[name="menge"]) .input-group-prepend .btn, .input-group:has(input[name="menge"]) .input-group-append .btn { font-size: 1.40625rem !important; }
  .input-group:has(input[name="menge"]) input[name="menge"], .input-group:has(input[name="menge"]) input[type="number"] { font-size: 1.25rem !important; }
  .input-group:has(input[name="menge"]) .input-group-text, .input-group:has(input[name="menge"]) .input-group-append .input-group-text { font-size: 0.9375rem !important; }
  .g2g-eyebrow { font-size: 0.9375rem; }
  .g2g-hero-copy > p:not(.g2g-hero-hours) { font-size: 1.40625rem; }
  .g2g-hero-copy .btn-primary, .g2g-hero-copy a.btn { font-size: 1.25rem; }
  .g2g-trust-pills span { font-size: 1.09375rem; }
  .g2g-section-title, .g2g-homepage .opc-Heading h1, .g2g-homepage .opc-Heading h2, .g2g-section-head h2 { font-size: 2.1875rem; }
  .g2g-sub { font-size: 1.17188rem; }
  .g2g-section-link { font-size: 1.09375rem; }
  .g2g-cat-tile span:not(.g2g-cat-media) { font-size: 1.32812rem; }
  .g2g-cat-tile span:not(.g2g-cat-media)::after { font-size: 1.5625rem; }
  .g2g-cookie-note { font-size: 1.01562rem; }
  .g2g-seedbanks-hint { font-size: 1.09375rem; }
  .g2g-usps h3, .g2g-usps h4, .g2g-usps .h3, .g2g-usps .h4 { font-size: 1.25rem; }
  .g2g-usps p { font-size: 1.17188rem; }
  .g2g-store h2, .g2g-store-card h2 { font-size: 2.1875rem; }
  .productlist-header-description .desc, .productlist-header-description .desc p { font-size: 1.25rem; }
  #result-wrapper .content-cats-small .caption a { font-size: 1.25rem; }
  #result-wrapper .content-cats-small .caption a::after { font-size: 1.5625rem; }
  .g2g-plp-chip { font-size: 1.09375rem; }
  .productlist-header-description .desc, .category-description { font-size: 1.17188rem; }
  .product-wrapper .ribbon.productbox-ribbon, .opc-ProductStream .ribbon.productbox-ribbon, #image_wrapper .ribbon.productbox-ribbon, .product-gallery .ribbon.productbox-ribbon { font-size: 0.9375rem !important; }
  .productbox .price, .productbox .price-regular, .productbox .price_wrapper .price, .productbox:hover .price, .productbox:hover .price-regular, .productbox:hover .price_wrapper .price { font-size: 1.17188rem !important; }
  .productbox .price_on_application { font-size: 1.09375rem !important; }
  .productlist-filter-headline { font-size: 0.9375rem !important; }
  .box-normal-link.dropdown-toggle { font-size: 0.9375rem !important; }
  .nav-panel .nav-link, .box-nav-item .nav-link, .nav-panel a, .box-categories a, .snippet-categories a { font-size: 1.09375rem; }
  .box-filter-characteristics .form-check-label, .filter-item label { font-size: 1.09375rem; }
  .filter-price input[type="text"], .filter-price input[type="number"], .snippets-filter-price input, #snippets-filter input[type="text"] { font-size: 1.01562rem !important; }
  .filter-price .unit, .filter-price label { font-size: 0.9375rem; }
  .result-options .btn, .result-options .dropdown-toggle, .productlist-result-options .btn, .productlist-result-options .dropdown-toggle { font-size: 1.01562rem !important; }
  .g2g-plp-sentinel.is-loading { font-size: 1.01562rem; }
  .result-options .result-count, .result-options .count { font-size: 1.01562rem; }
  .result-options .dropdown-item, .productlist-result-options .dropdown-item { font-size: 1.09375rem !important; }
  .list-inline.availability-list, .product-availability, [class*=availability], .availability-text { font-size: 1.09375rem; }
  .product-properties, .product-specs, .details-list, .product-details-list, .article-attributes, [class*=product-attribute], [class*=article-attribute] { font-size: 1.09375rem; }
  .g2g-desc-specs .table td.h6 { font-size: 1.01562rem; }
  .g2g-desc-specs .table td.attr-characteristic, .g2g-desc-specs .table td.attr-value, .g2g-desc-specs .table td.weight-unit { font-size: 1.09375rem; }
  .g2g-desc-specs .badge, .g2g-desc-specs .badge-primary { font-size: 1.01562rem; }
  #buy_form select, .product-buy select { font-size: 1.17188rem !important; }
  .variation-badge { font-size: 0.9375rem; }
  .back-to-list a, .breadcrumb-return a, a[href*="Zurueck"], a[class*=back-to] { font-size: 1.01562rem; }
  #buy_form input[name="menge"], .product-buy input[type="number"] { font-size: 1.17188rem !important; }
  .g2g-variant-btn { font-size: 1.17188rem; }
  .g2g-variant-note { font-size: 0.9375rem; }
  #cart-dropdown-container .g2g-cart-head-title { font-size: 1.32812rem; }
  #cart-dropdown-container .g2g-cart-head-count { font-size: 1.01562rem; }
  #cart-dropdown-container .dropdown-cart-items td { font-size: 1.09375rem; }
  #cart-dropdown-container .dropdown-cart-items .col-auto + .col-auto { font-size: 1.01562rem; }
  #cart-dropdown-container .dropdown-cart-items .text-right-util { font-size: 1.09375rem; }
  #cart-dropdown-container .g2g-cart-remove { font-size: 1.17188rem; }
  #cart-dropdown-container .cart-dropdown-total-item { font-size: 1.09375rem; }
  #cart-dropdown-container .font-weight-bold-util { font-size: 1.25rem !important; }
  #cart-dropdown-container .font-weight-bold-util .cart-dropdown-total-item-price { font-size: 1.48438rem; }
  #cart-dropdown-container .cart-dropdown-buttons .btn { font-size: 1.17188rem !important; }
  #cart-dropdown-container .cart-dropdown-shipping-notice { font-size: 1.01562rem; }
  #cart-dropdown-container .item-overflow-notice { font-size: 1.01562rem; }
  #cart-dropdown-container .g2g-cart-empty-icon { font-size: 1.64062rem; }
  #cart-dropdown-container .g2g-cart-empty-title { font-size: 1.32812rem; }
  #cart-dropdown-container .g2g-cart-empty-text { font-size: 1.09375rem; }
  #cart-dropdown-container .g2g-cart-empty-cta { font-size: 1.17188rem !important; }
  #cart-dropdown-container .cart-dropdown-empty, #cart-dropdown-container a.cart-dropdown-empty, #cart-dropdown-container .dropdown-item.cart-dropdown-empty { font-size: 1.09375rem !important; }
  .basket-heading { font-size: 2.03125rem !important; }
  .cart-items-header, .row.cart-items-header { font-size: 0.9375rem; }
  .card-gray .card-header, .basket .card .card-header { font-size: 1.01562rem !important; }
  .basket-shipping-container, [class*=shipping-cost] { font-size: 1.09375rem; }
  a.btn-basket-order, .basket-summary a.btn-primary, .basket .btn-checkout { font-size: 1.25rem !important; }
  #footer #system-credits, #footer #system-credits a { font-size: 0.9375rem; }
  .productbox-title a { font-size: 1.09375rem; }
  .productbox .price, .productbox .price-regular, .productbox .price_wrapper .price { font-size: 1.17188rem; }
  .g2g-mega-kicker { font-size: 0.89375rem; }
  .g2g-mega-title { font-size: 1.65rem; }
  a.g2g-mega-all { font-size: 1.03125rem; }
  .g2g-step-num { font-size: 0.89375rem; }
  a.g2g-step-title { font-size: 1.2375rem; }
  .g2g-step-links a { font-size: 1.03125rem; }
  .g2g-mega-foot { font-size: 0.9625rem; }
  .g2g-mega-h { font-size: 0.89375rem; }
  a.g2g-feature-title { font-size: 1.5625rem; }
  .g2g-mega-feature p { font-size: 0.9625rem; }
  a.g2g-feature-cta { font-size: 1.09375rem; }
  a.g2g-brand { font-size: 1.32812rem; }
  .g2g-art-filter-kicker { font-size: 0.9375rem; }
  .g2g-art-filter-name { font-size: 1.25rem; }
  button.g2g-art-chip { font-size: 1.09375rem; }
  .g2g-art-chip-check { font-size: 0.9375rem; }
  .g2g-seed-art-kicker { font-size: 0.825rem; }
  .g2g-seed-art-label { font-size: 1.16875rem; }
  #product-list.layout-gallery .productbox-title a, .opc-ProductStream.gallery .productbox-title a { font-size: 1.01562rem; }
  #product-list.layout-gallery .productbox .price, #product-list.layout-gallery .productbox .price-regular, #product-list.layout-gallery .productbox .price_wrapper .price, .opc-ProductStream.gallery .productbox .price { font-size: 1.09375rem !important; }
  .slick-type-product .item-slider-desc, .slick-slider-other .item-slider-desc, .recommendations .item-slider-desc { font-size: 1.01562rem; }
  .slick-type-product .item-slider-price .price, .slick-type-product .price.productbox-price, .recommendations .item-slider-price .price, #xselling .item-slider-price .price { font-size: 1.09375rem !important; }
  .slick-type-product .slick-arrow::after, .slick-slider-other .slick-arrow::after, .recommendations .slick-arrow::after, #xselling .slick-arrow::after { font-size: 0.9375rem !important; }
  .modal.g2g-cart-modal .modal-title { font-size: 1.25rem; }
  #pushed-success .productbox-title.subheadline { font-size: 1.25rem; }
  #pushed-success .x-selling .productbox-title.subheadline { font-size: 1.17188rem; }
  .g2g-cart-toast { font-size: 1.09375rem; }
  .g2g-cart-toast-check { font-size: 1.01562rem; }
  .g2g-cart-toast-close { font-size: 1.40625rem; }
  .g2g-map-frame figcaption { font-size: 0.9375rem; }
  .g2g-hero-v5 .g2g-hero-lead { font-size: 1.48438rem; }
  .g2g-hero-v5 .g2g-hero-cta .btn { font-size: 1.32812rem; }
  .g2g-entry-title { font-size: 1.71875rem; }
  .g2g-entry-text { font-size: 1.17188rem; }
  .g2g-entry-cta { font-size: 1.09375rem; }
  .g2g-entry-cta::after { font-size: 1.40625rem; }
  .g2g-usp strong { font-size: 1.32812rem; }
  .g2g-usp span { font-size: 1.09375rem; }
  .g2g-hero-v6 .g2g-hero-lead { font-size: 1.48438rem; }
  .g2g-hero-v6 .g2g-hero-cta .btn { font-size: 1.32812rem; }
  .g2g-seedbank-card span { font-size: 1.17188rem; }
  .g2g-faq-item summary { font-size: 1.25rem; }
  .g2g-faq-a p { font-size: 1.17188rem; }
  .g2g-map-hint { font-size: 1.01562rem; }
  .g2g-tour h3 { font-size: 1.71875rem; }
  .g2g-entry-label { font-size: 1.5625rem; }
  .g2g-entry-chev { font-size: 1.875rem; }
  .g2g-blog-date { font-size: 0.9375rem; }
  .g2g-blog-title { font-size: 1.32812rem; }
  .g2g-blog-text { font-size: 1.09375rem; }
  .g2g-blog-more { font-size: 1.09375rem; }
  .g2g-footer-name { font-size: 1.32812rem; }
  .g2g-footer-top p { font-size: 1.09375rem; }
  .g2g-footer-h { font-size: 1.01562rem; }
  #footer .g2g-withdrawal-link { font-size: 1.01562rem; }
  #footer #copyright { font-size: 1.01562rem; }
}

/* Banner: Samen gratis. Dunkel, keine Goldfläche. */
.g2g-ship-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  padding: 0.4rem 0.75rem;
  background: var(--g2g-dark);
  color: var(--g2g-hell);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}
.g2g-ship-banner strong {
  color: var(--g2g-white);
  font-weight: 700;
}
.g2g-ship-banner span {
  color: var(--g2g-stein);
}

/* Warenkorb: Fortschritt und Ersparnis */
.g2g-ship-goal {
  margin: 0.75rem 0 1rem;
  max-width: 100%;
}
.cart-summary .g2g-ship-goal {
  margin: 0 0 1rem;
}
.g2g-ship-goal-track {
  height: 8px;
  border-radius: 999px;
  background: var(--g2g-hell);
  overflow: hidden;
}
.g2g-ship-goal-track span {
  display: block;
  height: 100%;
  background: var(--g2g-btn);
}
.g2g-ship-goal-text,
.g2g-ship-goal-note,
.g2g-ship-goal-save {
  margin: 0.45rem 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--g2g-text);
}
.g2g-ship-goal-text--done {
  color: var(--g2g-success);
  font-weight: 700;
}
.g2g-ship-goal-note,
.g2g-ship-goal-save {
  color: var(--g2g-text-muted);
}

/* 404 — Papier, eine Karte, Suche und drei Einstiege (07.10.2026) */
#page-not-found.g2g-404 {
  max-width: 40rem;
  margin: 2.5rem auto 3.5rem;
  padding: 2rem 1.25rem 1.75rem;
  background: var(--g2g-white);
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  box-shadow: var(--g2g-shadow);
  text-align: center;
}

#page-not-found .g2g-404-code {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g2g-btn);
}

#page-not-found.g2g-404 h1 {
  margin: 0 0 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--g2g-gold);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--g2g-dark);
}

#page-not-found .g2g-404-lead {
  margin: 0.9rem auto 1.25rem;
  max-width: 34rem;
  color: var(--g2g-text);
  font-size: 1rem;
  line-height: 1.5;
}

#page-not-found .g2g-404-search {
  display: flex;
  gap: 0.5rem;
  margin: 0 auto 1.25rem;
  max-width: 32rem;
}

#page-not-found .g2g-404-search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--g2g-hell-border);
  border-radius: var(--g2g-radius);
  background: var(--g2g-hell);
  color: var(--g2g-text);
  font-size: 1rem;
}

#page-not-found .g2g-404-search input:focus {
  outline: none;
  box-shadow: var(--g2g-focus-ring);
  border-color: var(--g2g-gold);
}

#page-not-found .g2g-404-search button {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: var(--g2g-radius);
  background: var(--g2g-btn);
  color: var(--g2g-white);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

#page-not-found .g2g-404-search button:hover,
#page-not-found .g2g-404-search button:focus {
  background: var(--g2g-dark);
  outline: none;
  box-shadow: var(--g2g-focus-ring);
}

#page-not-found .g2g-404-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

#page-not-found .g2g-404-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--g2g-hell-border);
  border-radius: 999px;
  background: var(--g2g-hell);
  color: var(--g2g-dark);
  font-weight: 700;
  text-decoration: none;
}

#page-not-found .g2g-404-links a:hover,
#page-not-found .g2g-404-links a:focus {
  border-color: var(--g2g-gold);
  color: var(--g2g-btn);
  text-decoration: none;
  outline: none;
  box-shadow: var(--g2g-focus-ring);
}
}

@media (max-width: 767.98px) {
  #page-not-found.g2g-404 {
    margin: 1.25rem 0 2rem;
    padding: 1.5rem 1rem 1.25rem;
  }

  #page-not-found.g2g-404 h1 {
    font-size: 1.45rem;
  }

  #page-not-found .g2g-404-search {
    flex-direction: column;
  }

  #page-not-found .g2g-404-search button,
  #page-not-found .g2g-404-links a {
    width: 100%;
  }
}

/* Sperrgut: Anfrage statt Warenkorb, im Kaufbereich neben dem Preis */
#product-offer.is-g2g-inquiry #add-to-cart .basket-form-inline,
#product-offer.is-g2g-inquiry .price-note .shipment {
  display: none;
}
#product-offer.is-g2g-inquiry #add-to-cart .g2g-inquiry {
  margin-top: 0.75rem;
}
.g2g-inquiry {
  margin-top: 0.75rem;
}
.g2g-inquiry-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--g2g-dark);
}
.g2g-inquiry-text {
  margin: 0.2rem 0 0.55rem;
  font-size: 13px;
  line-height: 1.4;
  color: var(--g2g-text-muted);
}
.g2g-inquiry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.g2g-inquiry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  border: 1.5px solid var(--g2g-btn);
  border-radius: var(--g2g-radius);
  background: var(--g2g-white);
  color: var(--g2g-btn);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.g2g-inquiry-btn:hover,
.g2g-inquiry-btn:focus {
  background: var(--g2g-btn);
  color: var(--g2g-white);
  text-decoration: none;
}

/* ============================================================
   Login-Dropdown (Konto-Icon) — kompakte Karte, 17.09.2026
   NOVA label-slide legt Labels IN die Felder (daher „E-Mail-A…“).
   Labels werden visuell versteckt, Platzhalter tragen den Text.
   Lokale 16px-Schrift, unabhängig von der 85%-Root-Dichte.
   ============================================================ */

.account-icon-dropdown > .dropdown-menu:not(.show) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.account-icon-dropdown > .dropdown-menu.show {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#jtl-nav-wrapper .account-icon-dropdown > .dropdown-menu,
.account-icon-dropdown > .dropdown-menu {
  width: 320px !important;
  min-width: 320px !important;
  max-width: calc(100vw - 1.5rem) !important;
  padding: 0 !important;
  margin-top: 0.5rem !important;
  background: var(--g2g-white) !important;
  border: 1px solid var(--g2g-hell-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--g2g-shadow-lg) !important;
  overflow: hidden;
  color: var(--g2g-text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px; /* lokale Basis — nicht 85%-Root */
  z-index: 1080;
}

#jtl-nav-wrapper .account-icon-dropdown .dropdown-body#account-dropdown-menu,
#account-dropdown-menu,
#account-dropdown-menu.lg-min-w-lg {
  padding: 1.15rem 1.2rem 0.95rem !important;
  min-width: 0 !important;
  width: 100%;
}

.account-icon-dropdown fieldset,
.account-icon-dropdown #quick-login {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.account-icon-dropdown #quick-login legend {
  display: block;
  width: 100%;
  float: none;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--g2g-dark);
  padding: 0;
  margin: 0 0 1rem;
  border: 0;
  white-space: nowrap;
}

.account-icon-dropdown .form-group {
  margin-bottom: 0.7rem;
}

.account-icon-dropdown .form-group .d-flex.flex-column-reverse {
  display: block !important;
  position: relative;
}

/* NOVA label-slide: Label lag im Feld und wurde abgeschnitten.
   Platzhalter übernimmt die Beschriftung (JS setzt den Text). */
#jtl-nav-wrapper .account-icon-dropdown form.label-slide .col-form-label,
#jtl-nav-wrapper .account-icon-dropdown .col-form-label,
.account-icon-dropdown form.label-slide label.col-form-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
}

.account-icon-dropdown .col-form-label .asterisk,
.account-icon-dropdown .col-form-label .text-danger,
.account-icon-dropdown .col-form-label::after {
  display: none !important;
}

.account-icon-dropdown .form-control,
.account-icon-dropdown .form-control-sm {
  display: block;
  height: 44px !important;
  min-height: 44px !important;
  width: 100%;
  font-size: 16px !important; /* iOS: kein Auto-Zoom */
  line-height: 1.3;
  padding: 0 0.9rem !important;
  border: 1px solid var(--g2g-hell-border) !important;
  border-radius: var(--g2g-radius) !important;
  background: var(--g2g-white) !important;
  color: var(--g2g-text) !important;
  box-shadow: none !important;
}

.account-icon-dropdown .form-control::placeholder {
  color: var(--g2g-text-muted);
  opacity: 0.85;
}

.account-icon-dropdown .form-control:focus {
  border-color: var(--g2g-gold) !important;
  box-shadow: var(--g2g-focus-ring) !important;
  background: var(--g2g-white) !important;
  outline: none;
}

.account-icon-dropdown #submit-btn,
.account-icon-dropdown #quick-login .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 0.15rem;
  padding: 0.65rem 1rem !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  border-radius: var(--g2g-radius) !important;
  background: var(--g2g-btn) !important;
  border: 0 !important;
  color: var(--g2g-white) !important;
}

.account-icon-dropdown #submit-btn:hover,
.account-icon-dropdown #submit-btn:focus,
.account-icon-dropdown #quick-login .btn-primary:hover,
.account-icon-dropdown #quick-login .btn-primary:focus {
  background: var(--g2g-dark) !important;
  color: var(--g2g-white) !important;
}

#account-dropdown-menu > a {
  display: block;
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--g2g-text-muted) !important;
  white-space: nowrap;
}

#account-dropdown-menu > a:hover {
  color: var(--g2g-btn) !important;
}

.account-icon-dropdown .dropdown-footer {
  background: transparent;
  padding: 0.85rem 1.2rem 1.05rem !important;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--g2g-text-muted);
  border-top: 1px solid var(--g2g-hell-border);
  white-space: nowrap;
}

.account-icon-dropdown .dropdown-footer a {
  font-weight: 700;
  color: var(--g2g-btn) !important;
  margin-left: 0.15rem;
}

.account-icon-dropdown .dropdown-footer a:hover {
  color: var(--g2g-dark) !important;
}

/* Handy: Menü unter dem Konto-Icon, nicht als Leiste am unteren Rand.
   Desktop (≥768) bleibt beim normalen Dropdown. Das Icon sitzt absolute
   in der 48px-Zeile; 3.5rem schiebt das Menü unter die Suchzeile.
   Warenkorb/Kasse haben keine Suche (padding-bottom 0) — dort reicht ein kleiner Abstand.
   Die ID im Selektor schlägt die Regel oben, sonst bleibt der Such-Abstand stehen. */
@media (max-width: 767.98px) {
  #jtl-nav-wrapper .account-icon-dropdown > .dropdown-menu.show,
  .account-icon-dropdown > .dropdown-menu.show {
    position: absolute !important;
    top: calc(100% + 3.5rem) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: min(20rem, calc(100vw - 4.75rem)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 4.75rem) !important;
    margin: 0 !important;
    border-radius: 12px !important;
    max-height: min(70vh, 28rem);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1080 !important;
    transform: none !important;
  }

  body[data-page="3"] #jtl-nav-wrapper .account-icon-dropdown > .dropdown-menu.show,
  body[data-page="11"] #jtl-nav-wrapper .account-icon-dropdown > .dropdown-menu.show,
  body[data-page="33"] #jtl-nav-wrapper .account-icon-dropdown > .dropdown-menu.show,
  body.is-checkout #jtl-nav-wrapper .account-icon-dropdown > .dropdown-menu.show {
    top: calc(100% + 0.45rem) !important;
  }

  .account-icon-dropdown #quick-login legend,
  #account-dropdown-menu > a,
  .account-icon-dropdown .dropdown-footer {
    white-space: normal;
  }
}