/* newactive Design (CSS-only) */

/* Container */
/* === VARIABLES (single source of truth) === */
/* Hinweis: Werte entsprechen dem aktuellen Live-Zustand (letzte Definition gewinnt). */
:root{
  --na-bg-soft: rgba(0,0,0,.02);
  --na-border: rgba(0,0,0,.08);
  --na-border-strong: rgba(0,0,0,.12);
  --na-container: 100%;
  --na-radius: 12px;
  --na-header-container-max: 1400px;
  --na-header-container-pad: 20px;
  --na-header-py: 14px;
  --na-devicefinder-mt: 10px;
  --na-nav-py: 6px;
  --na-topbar-py: 6px;
  --na-df-gap: 12px;
  --na-df-height: 44px;
  --na-df-pad-x: 14px;
  --na-df-radius: 12px;
  --na-df-bg: #f1f3f5;        /* like your select background */
  --na-df-border: #dfe3e8;    /* soft border like inputs */
  --na-df-text: #212529;      /* normal text */
  --na-df-control-bg: var(--bs-body-bg);        /* same as inputs/selects */
  --na-df-control-border: var(--bs-border-color);
  --na-df-control-text: var(--bs-body-color);
  --na-df-control-text-muted: var(--bs-secondary-color);
  --na-df-disabled-bg: #f1f3f5;
  --na-df-disabled-border: #dfe3e8;
  --na-df-disabled-text: #6c757d;
}



/* NA: responsive container width */
@media (min-width: 576px) { :root { --na-container: 540px; } }
@media (min-width: 768px) { :root { --na-container: 720px; } }
@media (min-width: 992px) { :root { --na-container: 960px; } }
@media (min-width: 1200px) { :root { --na-container: 1140px; } }
@media (min-width: 1400px) { :root { --na-container: 1320px; } }
/* NA: responsive container width end */
/* Max-Width konsistent */


body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   HEADER: kompakt + klar
   ========================= */


.header-row{
  align-items: center;
}

/* Suche dominanter, aber ruhig */
.header-search{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Eingabefeld/Button visuell ruhiger, gleiche Höhe */
.header-search input,
.header-search .form-control,
.header-search .input-group .form-control{
  min-height: 44px;
  border-radius: 10px;
  border-color: var(--na-border-strong);
}

.header-search .btn,
.header-search button{
  min-height: 44px;
  border-radius: 10px;
}

/* Focus-States sauber (Accessibility) */
.header-search input:focus,
.header-search .form-control:focus,
.device-finder-nav-inner select:focus,
.device-finder-nav-inner .form-select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.22);
}

/* Navigation: klare Trennung, keine dicke Optik */
.main-navigation{
  border-top: 1px solid var(--na-border);
  border-bottom: 1px solid var(--na-border);
}

.main-navigation-link{
  padding-top: 12px;
  padding-bottom: 12px;
}

/* =========================
   TONERFINDER: Tool-Card
   ========================= */

/* Falls euer Plugin diese Wrapper nutzt */
.device-finder-nav{
  background: var(--na-bg-soft);
  border: 1px solid var(--na-border);
  border-radius: var(--na-radius);
  padding: 12px;
  margin-top: 10px;
}

.device-finder-nav-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Controls einheitlich */
.device-finder-nav-inner select,
.device-finder-nav-inner .form-select,
.device-finder-nav-inner input{
  min-height: 44px;
  border-radius: 10px;
  border-color: var(--na-border-strong);
}

/* Buttons im Finder */


/* Desktop: 3 Dropdowns + CTA in einer sauberen Zeile */
@media (min-width: 992px) {
  

  /* CTA soll nicht riesig werden */
  .device-finder-nav-inner .btn,
  .device-finder-nav-inner button{
    white-space: nowrap;
  }
}

/* Mobile: untereinander, volle Breite */
@media (max-width: 991.98px) {
  .device-finder-nav-inner > *{
    width: 100%;
  }
}

/* =========================
   Tuning: Finder als Tool-Card + weniger Luft
   ========================= */

/* Finder-Wrapper sicher als Card stylen (unabhängig vom Parent) */
.device-finder-nav-inner{
  background: var(--na-bg-soft);
  border: 1px solid var(--na-border);
  border-radius: var(--na-radius);
  padding: 10px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
}

/* Zwischen Header und Navigation weniger Abstand */


.main-navigation{
  margin-top: 6px;
}


/* =========================
   FORCE: Finder als ruhige Tool-Card (gegen spätere Inline-Styles)
   ========================= */

.device-finder-nav{
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 10px !important;
}

.device-finder-nav-inner{
  background: #f7f7f7 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 12px !important;
  padding: 12px !important;
}

/* Controls optisch ruhiger */
.device-finder-nav-inner .form-select,
.device-finder-nav-inner select{
  border-color: rgba(0,0,0,.18) !important;
  border-radius: 10px !important;
  min-height: 44px !important;
}




/* =========================
   PREMIUM: ruhiger, hochwertiger Look (Finder + Header/Navigation)
   ========================= */

/* Finder-Card: heller, dezenter Schatten, sauberer Radius */
.device-finder-nav{
  margin-top: 12px !important;
}

/* Dropdowns: ruhiger, mehr Luft */
.device-finder-nav-inner .form-select,
.device-finder-nav-inner select{
  background-color: #ffffff !important;
  padding-left: 12px !important;
  padding-right: 38px !important;
}

/* CTA: etwas “stabiler” wirken lassen */


/* Navigation optisch näher an Header, aber nicht gequetscht */
.main-navigation{
  margin-top: 10px !important;
}

/* Auf großen Screens Header nicht so “hoch” wirken lassen */
@media (min-width: 992px){
  .header-main{
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }
}

/* Falls irgendein CSS die Actions nach unten schiebt: immer in einer Linie halten */
.header-main .header-actions-col,
.header-main .header-actions-col > *{
  white-space: nowrap !important;
}


/* =========================
   LAYOUT: Suche + TonerFinder entkoppeln (3 Reihen)
   ========================= */

/* Header darf umbrechen, damit wir Reihen bauen können */


/* Reihe 1: Logo links */
.header-main .header-logo-col{
  order: 1 !important;
  flex: 0 0 auto !important;
}

/* Reihe 1: Actions rechts (Anmelden/Warenkorb etc.) */
.header-main .header-actions-col{
  order: 2 !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

/* Reihe 2+3: Suchbereich volle Breite */


/* Suche: sichtbar, ruhig, zentriert */
.header-main .header-search{
  width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Suchfeld: stabile Höhe + klare Abgrenzung */
.header-main .header-search .form-control,
.header-main .header-search input{
  min-height: 46px !important;
  border-radius: 12px !important;
  border-color: rgba(0,0,0,.14) !important;
}

/* =========================
   TonerFinder als eigene Leiste (unter der Suche)
   ========================= */

/* Finder-Block volle Breite unter der Suche, zentriert im Container */
.device-finder-nav{
  width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 10px !important;
}

/* Card-Optik bleibt, aber als eigenständige Leiste */
.device-finder-nav-inner{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}

/* Desktop: 3 Dropdowns + CTA in einer Zeile */
@media (min-width: 992px){
  
}

/* Mobile/Tablet: untereinander */
@media (max-width: 991.98px){
  
}

/* Controls einheitlich */
.device-finder-nav-inner .form-select,
.device-finder-nav-inner select{
  min-height: 46px !important;
  border-radius: 12px !important;
  border-color: rgba(0,0,0,.14) !important;
}

/* CTA */
.device-finder-nav-inner .btn,
.device-finder-nav-inner button{
  min-height: 46px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  white-space: nowrap !important;
}


/* =========================
   FINAL OVERRIDE: Disabled-States + Header-Abstände
   ========================= */

/* Header kompakter, Suche weniger "unten" */


/* Suche-Row näher an Logo/Actions */


/* Finder etwas näher an die Suche */
.device-finder-nav{
  margin-top: 8px !important;
}

/* Disabled Selects wieder sichtbar grau */
.device-finder-nav-inner .form-select:disabled,
.device-finder-nav-inner select:disabled{
  background-color: #f1f3f5 !important;
  color: #6c757d !important;
  border-color: rgba(0,0,0,.12) !important;
  opacity: 1 !important;           /* Bootstrap setzt sonst opacity */
  cursor: not-allowed !important;
}

/* Disabled Button klar erkennbar */
.device-finder-nav-inner .df-go:disabled,
.device-finder-nav-inner button:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
}


/* =========================
   RESET: Suche wieder neben Logo (Header-Standard), Finder darunter volle Breite
   ========================= */

/* Header-Zeile: nicht umbrechen, Standard-Layout */


/* Suche wieder in der Header-Zeile (keine order/flex-basis 100%) */
.header-main .header-search-col{
  order: 0 !important;
  flex: 1 1 auto !important;
  max-width: none !important;
  margin-top: 0 !important;
  min-width: 0 !important;
}

.header-main .header-search{
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}

/* TonerFinder unter der Header-Zeile: volle Containerbreite */
.device-finder-nav{
  width: 100% !important;
  max-width: var(--na-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 10px !important;
}

/* Finder-Grid: Desktop 3+CTA, Mobile untereinander */
@media (min-width: 992px){
  .device-finder-nav-inner{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
  }
}
@media (max-width: 991.98px){
  .device-finder-nav-inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* =========================
   Device-Finder (sauber, unter Header)
   ========================= */
.na-device-finder{
  margin-top: 10px;
  margin-bottom: 6px;
}

.na-device-finder .device-finder-nav-inner{
  display: grid;
  gap: 10px;
}

@media (min-width: 992px){
  
  
}

@media (max-width: 991.98px){
  
  
}

/* Disabled sichtbar */
.na-device-finder .form-select:disabled{
  background-color: #f1f3f5;
  color: #6c757d;
  opacity: 1;
  cursor: not-allowed;
}
.na-device-finder .df-go:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* =========================================================
   FIX: Header-Layout wieder wie Shopware Standard (Grid/Order)
   Ziel:
   - Logo links, Suche daneben, Account/Warenkorb rechts (Desktop)
   - Mobile bleibt Shopware-Standard
   - TonerFinder als eigene, breite Leiste UNTER der Header-Zeile
   ========================================================= */

/* 1) Keine erzwungenen Flex/Order-Overrides auf den Header-Spalten */
.header-main .header-row{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.header-main .header-logo-col,
.header-main .header-search-col,
.header-main .header-actions-col{
  order: unset !important;
  flex: unset !important;
}

/* 2) Suche: im Desktop nicht zentriert “wegschieben”, sondern normal im Grid laufen lassen */
@media (min-width: 992px){
  .header-main .header-search{
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 3) TonerFinder: volle Breite innerhalb Container unter Header */
.na-device-finder{
  width: 100%;
  margin-top: 12px;
}

/* vorhandene max-width/margin:auto Regeln neutralisieren */
.na-device-finder.device-finder-nav{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Inner: Desktop 3 Dropdowns + Button in einer Zeile, Mobile untereinander */
.na-device-finder .device-finder-nav-inner{
  max-width: none !important;
  margin: 0 !important;
  padding: 12px !important;
  width: 100%;
}

@media (min-width: 992px){
  .na-device-finder .device-finder-nav-inner{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .na-device-finder .df-btn-col{
    justify-self: end;
  }
  .na-device-finder .df-go{
    min-width: 220px;
    white-space: nowrap;
  }
}

@media (max-width: 991.98px){
  .na-device-finder .device-finder-nav-inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .na-device-finder .df-go{
    width: 100% !important;
  }
}


/* =========================================================
   FIX2: Desktop-Header wieder 1 Zeile (Logo | Suche | Actions)
   - überschreibt "flex: unset" aus früheren Blöcken
   ========================================================= */

@media (min-width: 992px){

  /* Header-Zeile nicht umbrechen */
  .header-main .header-row{
    flex-wrap: nowrap !important;
  }

  /* Spalten-Flex sauber definieren */
  .header-main .header-logo-col{
    flex: 0 0 auto !important;
  }

  .header-main .header-search-col{
    flex: 1 1 0% !important;
    min-width: 0 !important; /* wichtig, damit die Suche nicht rausdrückt */
  }

  .header-main .header-actions-col{
    flex: 0 0 auto !important;
  }

  /* Suche nimmt die volle Breite in ihrer Spalte */
  .header-main .header-search,
  .header-main .header-search form{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}


/* =========================
   FIX: Header-Suche wieder sauber (Input+Button als ein Block, korrekt im Header)
   ========================= */

/* nicht mehr künstlich zentrieren/limitieren */
.header-main .header-search{
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Input+Button als ein zusammenhängender Block */


/* keine doppelte Rundung auf den Einzelteilen */
.header-search-form .header-search-input,
.header-search-form .form-control{
  border-radius: 0 !important;
  min-height: 44px !important;
}

.header-search-form .header-search-btn,
.header-search-form .btn{
  border-radius: 0 !important;
  min-height: 44px !important;
  min-width: 44px !important;
}

/* kleine Kante zwischen Input und Button vermeiden */
.header-search-form .header-search-input{
  border-right: 0 !important;
}

/* =========================
   FIX: Header-Suche (InputGroup) sauber gerundet, keine Doppel-Umrandung
   ========================= */


/* Input links rund, rechts gerade (damit Button sauber anliegt) */
.header-search-form .header-search-input,
.header-search-form .form-control{
  border-radius: 10px 0 0 10px !important;
}

/* Button rechts rund, links gerade + keine Doppelborder zwischen Input & Button */
.header-search-form .header-search-btn,
.header-search-form .btn{
  border-radius: 0 10px 10px 0 !important;
  border-left: 0 !important;
}

/* Sicherheit: falls irgendwo noch pauschale Rundungen greifen */
.header-search .input-group .form-control{
  border-radius: 0 !important;
}

/* =========================
   Header Search: sauberer Rahmen als EIN Block
   ========================= */
.header-search-form .input-group{
  border: 1px solid var(--na-border-strong, rgba(0,0,0,.12)) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* Kinder haben keinen eigenen Rahmen mehr (sonst "doppelte" Kanten) */
.header-search-form .header-search-input{
  border: 0 !important;
  box-shadow: none !important;
  min-height: 44px !important;
}

.header-search-form .header-search-btn,
.header-search-form .header-close-btn{
  border: 0 !important;
  box-shadow: none !important;
  min-height: 44px !important;
}

/* Fokus-Ring auf dem ganzen Block (nicht auf einzelnen Elementen) */
.header-search-form .input-group:focus-within{
  box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important;
  border-color: rgba(0,0,0,.22) !important;
}

/* =========================
   MAIN NAV: Mega-Flyout clean (Desktop)
   ========================= */

@media (min-width: 992px){

  /* Dropdown Container (die große Fläche) */
  .main-navigation-menu .dropdown-menu.w-100{
    border: 1px solid var(--na-border, rgba(0,0,0,.08)) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.08) !important;
    margin-top: 10px !important;
  }

  /* Innenabstände etwas “ruhiger” */
  .main-navigation-menu .dropdown-menu.w-100.p-4{
    padding: 22px !important;
  }

  /* Flyout Grid: etwas mehr Spacing */
  .navigation-flyout-categories.is-level-0{
    row-gap: 14px;
  }

  /* Spalten: dezente Trennung */
  .navigation-flyout-categories.is-level-0 > div{
    padding-right: 16px;
  }

  /* Level-0 Links (Hauptgruppe) wie Überschrift */
  .navigation-flyout-link.is-level-0{
    font-weight: 600;
    font-size: 15px;
    padding: 6px 8px;
    border-radius: 10px;
    color: inherit;
  }

  /* Unterebenen: kompakter, klar */
  .navigation-flyout-categories.is-level-1,
  .navigation-flyout-categories.is-level-2{
    margin-top: 6px;
  }

  .navigation-flyout-link.is-level-1,
  .navigation-flyout-link.is-level-2{
    font-weight: 400;
    font-size: 14px;
    padding: 5px 8px;
    border-radius: 10px;
    color: rgba(0,0,0,.75);
  }

  /* Hover/Focus: ruhiger Background statt harter Effekte */
  .navigation-flyout-link:hover,
  .navigation-flyout-link:focus{
    background: rgba(0,0,0,.04);
    text-decoration: none;
  }

  /* Entferne ggf. harte Bootstrap-Fokus-Ringe auf Links (wir nutzen Background) */
  .navigation-flyout-link:focus{
    outline: none;
    box-shadow: none;
  }
}

/* =======================================================================
   NA Mega-Flyout v1 (Desktop)
   Ziel: ruhig, klar, scanbar, saubere Hover/Focus States (CSS-only)
   ======================================================================= */
@media (min-width: 992px) {

  /* Flyout Container als ruhige "Card" */
  .main-navigation .dropdown-menu.w-100.p-4,
  .navigation-flyout {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* Spalten: mehr Luft + visuelle Trennung */
  .navigation-flyout-categories.is-level-0 > [class*="col-"] {
    padding-left: 18px;
    padding-right: 18px;
  }
  .navigation-flyout-categories.is-level-0 > [class*="col-"]:not(:first-child) {
    border-left: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* Level 0: "Überschrift" / Primärgruppen */
  .navigation-flyout-link.is-level-0 {
    display: inline-block;
    font-weight: 650;
    font-size: 15px;
    line-height: 1.25;
    margin: 0 0 10px 0;
    padding: 6px 10px;
    border-radius: 10px;
    text-decoration: none;
  }

  /* Level 1/2: ruhige Listen-Links */
  .navigation-flyout-link.is-level-1,
  .navigation-flyout-link.is-level-2 {
    display: block;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    padding: 7px 10px;
    border-radius: 10px;
    text-decoration: none;
  }

  /* Hover: dezenter Background, kein "Zappeln" */
  .navigation-flyout-link.is-level-0:hover,
  .navigation-flyout-link.is-level-1:hover,
  .navigation-flyout-link.is-level-2:hover {
    background: rgba(0, 0, 0, 0.035);
    text-decoration: none;
  }

  /* Focus: klar, aber ruhig (Accessibility) */
  .navigation-flyout-link.is-level-0:focus,
  .navigation-flyout-link.is-level-1:focus,
  .navigation-flyout-link.is-level-2:focus {
    outline: none;
  }
  .navigation-flyout-link.is-level-0:focus-visible,
  .navigation-flyout-link.is-level-1:focus-visible,
  .navigation-flyout-link.is-level-2:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18);
  }
}

/* =======================================================================
   NA Mega-Flyout v1.1 (Desktop) – Fixes
   - Flyout nicht mehr Full-Width, sondern ruhiger/zentriert
   - Vertikale Spalten-Trenner entfernen (wirken wie "Cursor")
   ======================================================================= */
@media (min-width: 992px) {

  /* Full-Width Dropdown in Shopware/Bootstrap entschärfen */
  .main-navigation .dropdown-menu.w-100.p-4,
  .navigation-flyout {
    width: auto !important;
    max-width: 1180px;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 16px !important;
  }

  /* Unsere v1-Spaltenlinien entfernen (wirken im Layout wie senkrechte "Cursor") */
  .navigation-flyout-categories.is-level-0 > [class*="col-"] {
    border-left: 0 !important;
  }

  /* Etwas kompaktere Spalten-Luft, damit das Flyout nicht so "leer" wirkt */
  .navigation-flyout-categories.is-level-0 > [class*="col-"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Close-Button ruhiger */
  .navigation-flyout-close,
  .navigation-flyout-close-button,
  .navigation-flyout-close-btn {
    opacity: 0.6;
  }
  .navigation-flyout-close:hover,
  .navigation-flyout-close-button:hover,
  .navigation-flyout-close-btn:hover {
    opacity: 1;
  }
}

/* =======================================================================
   NA Mega-Flyout v1.2 (Desktop) – Entfernt linke "Strich/Marker"-Optik
   Ursache: Shopware Default setzt je Link oft border-left oder ::before/::after.
   ======================================================================= */
@media (min-width: 992px) {

  /* 1) Alle linken Marker/Borders im Flyout komplett entfernen */
  .navigation-flyout .navigation-flyout-link,
  .navigation-flyout .navigation-flyout-link.is-level-0,
  .navigation-flyout .navigation-flyout-link.is-level-1,
  .navigation-flyout .navigation-flyout-link.is-level-2 {
    border-left: 0 !important;
    background-image: none !important;
  }

  .navigation-flyout .navigation-flyout-link::before,
  .navigation-flyout .navigation-flyout-link::after {
    content: none !important;
    display: none !important;
  }

  /* 2) Saubere, ruhige Klickflächen statt Marker */
  .navigation-flyout .navigation-flyout-link.is-level-0,
  .navigation-flyout .navigation-flyout-link.is-level-1,
  .navigation-flyout .navigation-flyout-link.is-level-2 {
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 10px;
  }

  /* 3) Hover/Focus ruhig halten */
  .navigation-flyout .navigation-flyout-link:hover {
    background: rgba(0,0,0,0.035);
    text-decoration: none;
  }
  .navigation-flyout .navigation-flyout-link:focus { outline: none; }
  .navigation-flyout .navigation-flyout-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.18);
  }
}

/* =======================================================================
   NA Topbar Menu (Desktop) – Navigation in Top-Bar (Währung-Leiste)
   ======================================================================= */
@media (min-width: 992px) {

  /* Topbar: dezent, ruhig */
  .top-bar {
    background: #f3f4f6;
    border-bottom: 1px solid #ffffff;
  }

  .na-topbar-inner {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Links: horizontal, dezente Trenner */
  .na-topmenu {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
  }

  .na-topmenu-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
  }

  .na-topmenu-link + .na-topmenu-link {
    border-left: 1px solid #ffffff;
    margin-left: 6px;
    padding-left: 16px;
  }

  .na-topmenu-link:hover {
    background: rgba(0,0,0,0.035);
    text-decoration: none;
  }

  .na-topmenu-link:focus { outline: none; }
  .na-topmenu-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.18);
  }

  /* Alte Hauptnavigation unter Header auf Desktop ausblenden (Mobile bleibt via Offcanvas) */
  .main-navigation {
    display: none !important;
  }
}

/* =======================================================================
   NA Topbar Menu – Fix: Untere Desktop-Navigation wirklich ausblenden
   (Shopware rendert navbar als .main-navigation-menu)
   ======================================================================= */
@media (min-width: 992px) {
  nav.main-navigation-menu,
  #main-navigation-menu {
    display: none !important;
  }
}

/* =======================================================================
   NA Topbar – Full-bleed Background + Abstand zum Header
   ======================================================================= */
@media (min-width: 992px) {

  /* Full-bleed: Hintergrund über komplette Viewport-Breite */
  .top-bar {
    background: #f3f4f6;
    border-bottom: 1px solid #ffffff;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Inhalt bleibt im Container, aber mehr Luft nach unten */
  .top-bar .na-topbar-inner {
    min-height: 40px;        /* vorher 36 */
    padding-top: 8px;        /* vorher 6 */
    padding-bottom: 10px;    /* mehr Abstand nach unten */
  }

  /* zusätzlicher Abstand zwischen Topbar und Logo-/Header-Zeile */
  .header-row {
    margin-top: 10px;
  }
}

/* =======================================================================
   NA Topbar – Full-bleed innerhalb eines begrenzten Containers
   (zieht die Topbar auf 100vw und zentriert sie wieder)
   ======================================================================= */
@media (min-width: 992px) {

  .top-bar {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* falls durch 100vw irgendwo 1-2px Scrollbar entsteht */
  html, body {
    overflow-x: hidden;
  }
}

/* =======================================================================
   NA TonerFinder Bar – dezenter + Full-bleed Background (Desktop)
   ======================================================================= */
@media (min-width: 992px) {

  .na-devicebar {
    background: #f3f4f6;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.06);

    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* Innere Box/Shadow entschärfen (robust, ohne exakte Klassen zu raten) */
  .na-devicebar .card,
  .na-devicebar .device-finder,
  .na-devicebar .device-finder-nav,
  .na-devicebar .device-finder-nav-inner {
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Controls ruhig, konsistent */
  .na-devicebar select,
  .na-devicebar .form-select,
  .na-devicebar input,
  .na-devicebar .form-control,
  .na-devicebar button,
  .na-devicebar .btn {
    border-radius: 10px;
  }
}

/* =======================================================================
   NA TonerFinder Bar – Höhe reduzieren (Desktop)
   ======================================================================= */
@media (min-width: 992px) {

  /* weniger vertikales Padding */
  .na-devicebar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* typische vertikale Abstände im Inneren entschärfen */
  .na-devicebar .container,

  .na-devicebar .device-finder,
  .na-devicebar .device-finder-nav,
  .na-devicebar .device-finder-nav-inner,
  .na-devicebar form {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Controls minimal kompakter */
  .na-devicebar select,
  .na-devicebar .form-select,
  .na-devicebar input,
  .na-devicebar .form-control,
  .na-devicebar button,
  .na-devicebar .btn {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* =======================================================================
   NA TonerFinder Bar – exakt flach: 5px oben/unten Grau (Desktop)
   ======================================================================= */
@media (min-width: 992px) {

  /* Exakt 5px oben/unten */
  .na-devicebar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  /* Alles Innen-Spacing/Margins killen (häufige Ursachen für "zu hoch") */
  .na-devicebar .container,
  .na-devicebar .container-fluid {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .na-devicebar .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    --bs-gutter-y: 0 !important;
  }

  .na-devicebar form,
  .na-devicebar .device-finder,
  .na-devicebar .device-finder-nav,
  .na-devicebar .device-finder-nav-inner,
  .na-devicebar .card,
  .na-devicebar .card-body {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* =======================================================================
   NA Header – Logo kleiner + Header sticky (Desktop)
   ======================================================================= */
@media (min-width: 992px) {

  /* 1) Logo etwas kleiner */
  .header-logo-col img,
  .header-logo img {
    max-height: 44px;
    width: auto;
    height: auto;
  }

  /* 2) Gesamten Header sticky machen (Topbar + Logo/Suche + TonerFinder) */
  .header-main {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  }

  /* sicherstellen, dass Dropdowns/Widgets über Inhalt liegen */
  .top-bar {
    position: relative;
    z-index: 1101;
  }
}

/* =======================================================================
   NA Sticky Header (Desktop): nur Logo/Suche/Actions + TonerFinder sticky
   Topbar (Währung) bleibt NICHT sticky
   ======================================================================= */
@media (min-width: 992px) {

  /* falls vorher versehentlich gesetzt: neutralisieren */
  .header-main {
    position: static !important;
    top: auto !important;
    box-shadow: none !important;
  }

  .na-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  }
}

/* =======================================================================
   NA Sticky Header – Fix: sticky erzwingen + Rahmen entfernen (Desktop)
   ======================================================================= */
@media (min-width: 992px) {

  /* 1) Rahmen/Shadow entfernen (war der "komische Rahmen") */
  .na-sticky-header {
    box-shadow: none !important;
    border: 0 !important;
  }

  /* 2) Sticky wirklich erzwingen */
  .na-sticky-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;
    background: #ffffff !important;
  }

  /* 3) Häufigster Sticky-Killer: overflow auf Parent-Containern */
  header,
  .header-main,
  .header-row,
  .header-search-col,
  .header-actions-col,
  .header-logo-col,
  .na-sticky-header {
    overflow: visible !important;
  }
}

/* =======================================================================
   NA Sticky (JS-fixed) – Desktop only
   Aktiviert nach Topbar-Scroll: Logo/Suche/Actions + TonerFinder bleibt oben
   ======================================================================= */
@media (min-width: 992px) {
  

  body.na-sticky-on .na-sticky-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1100 !important;
    background: #ffffff !important;
  }

  /* NA Sticky: Overlay stacking (modals/zoom above sticky header) */
  /* Problem: Overlay-Controls (z.B. Foto-Zoom) landen unter Sticky-Header */
  /* Fix: Overlays/Modals müssen IMMER über dem Sticky-Header liegen */
  body.na-sticky-on .pswp{ z-index: 2000 !important; }
  body.na-sticky-on .pswp__top-bar,
  body.na-sticky-on .pswp__ui{ z-index: 2001 !important; }
  body.na-sticky-on .modal{ z-index: 2000 !important; }
  body.na-sticky-on .modal-backdrop{ z-index: 1990 !important; }



  /* NA Sticky: Modal z-index fix
     Problem: Modal/Zoom-UI (close/zoom controls) liegt unter Sticky-Header (z-index 1100)
     Fix: Während body.modal-open Header + Sticky-Backdrop unter das Modal legen
     Hinweis: wirkt nur, wenn Sticky aktiv ist (na-sticky-on)
  */
  body.modal-open.na-sticky-on::before {
    z-index: 1000 !important;
  }
  body.modal-open.na-sticky-on .na-sticky-header {
    z-index: 1001 !important;
  }
}

/* =======================================================================
   NA Sticky (JS-fixed) – Sticky NICHT full width, sondern wie Container zentriert
   ======================================================================= */
@media (min-width: 992px) {

  /* Nur im Sticky-Zustand: fixed, aber zentriert + Container-Breite */
  body.na-sticky-on .na-sticky-header {
    position: fixed !important;
    top: 0 !important;

    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: calc(100% - 2rem) !important;  /* etwas Luft links/rechts */
    max-width: 1320px !important;         /* Bootstrap container (xxl) */
    background: #ffffff !important;

    /* keine harte Kante */
    border-radius: 10px;
  }

  /* Body-Offset bleibt korrekt, auch wenn Header nicht 100% breit ist */
  body.na-sticky-on {
    padding-top: var(--na-sticky-h, 0px) !important;
  }
}

/* =======================================================================
   NA Sticky: Full-bleed weißer Hintergrund + Topbar ausblenden (Desktop)
   ======================================================================= */

/* NA Sticky: Anchor offset (hash links)
   Problem: Hash-Jumps (z.B. Hersteller A-Z) landen unter Sticky-Header
   Fix: scroll-padding-top + scroll-margin-top anhand der Sticky-Höhe (--na-sticky-h)
*/
@media (min-width: 992px) {
  :root{
    --na-anchor-offset: calc(var(--na-sticky-h, 170px) + 12px);
  }
  html{
    scroll-padding-top: var(--na-anchor-offset);
  }
  .content-main [id]{
    scroll-margin-top: var(--na-anchor-offset);
  }
}

@media (min-width: 992px) {

  /* Weißer Backdrop über volle Breite, genau so hoch wie Sticky-Header */
  body.na-sticky-on::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--na-sticky-h, 0px);
    background: #ffffff;
    z-index: 1090;
  }

  /* Sticky-Header liegt über dem Backdrop */
  body.na-sticky-on .na-sticky-header {
    z-index: 1100 !important;
    background: #ffffff !important;
  }

  /* Topbar im Sticky-Zustand vollständig ausblenden (verhindert "rutscht zurück") */
  body.na-sticky-on .top-bar {
    display: none !important;
  }
}

/* =======================================================================
   GLOBAL FIX: Shop-Content wieder in normaler Containerbreite
   - betrifft alle Seiten
   - lässt Topbar (100vw) und TonerFinder-Devicebar (full-bleed) unberührt
   ======================================================================= */



/* Standard-Container wieder sauber begrenzen */
.container,
.container-main,
.cms-section .container{
  max-width: var(--na-container) !important;
  margin-left: auto;
  margin-right: auto;
}

/* Content-Bereich: keine "full width" Leaks */
.content-main .container,
.content-main .cms-page .container,
.content-main .cms-section .container{
  max-width: var(--na-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Links/Rechts Padding im Content sicherstellen (falls irgendwo auf 0 gesetzt wurde) */
.content-main .container,
.content-main .container-main{
  padding-left: var(--bs-gutter-x, 1.5rem) !important;
  padding-right: var(--bs-gutter-x, 1.5rem) !important;
}


/* NA: devicefinder container-main padding fix (avoid double gutters) */
body.is-ctl-devicefinderpage .content-main .container-main{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* NA: devicefinder container-main padding fix end */
/* NA: devicefinder nested container padding fix (avoid double gutters) */
body.is-ctl-devicefinderpage .content-main .container .container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* NA: devicefinder nested container padding fix end */


/* AUSNAHMEN: diese Bereiche dürfen full-bleed bleiben */
.top-bar,
.top-bar *{
  /* Topbar ist bewusst 100vw umgesetzt */
}

.na-devicebar,
.na-devicebar .container,
.na-devicebar .container-fluid{
  /* Devicebar ist bewusst full-bleed + eigener innerer Container */
}

/* NA: LISTING-ACTIONS-ALIGN (filters next to sorting) - BEGIN */

/* NA: LISTING-ACTIONS-ALIGN (filters next to sorting) - END */


/* NA-LISTING-FILTERS-IN-ACTIONS
   Desktop: Filter (z.B. Hauptgruppe/Hersteller/Preis) rechts neben Sortierung anzeigen */


/* =========================================================
   FIX: Mobile Filter wieder sichtbar
   - Desktop: Offcanvas-Filterbutton ausblenden (Inline-Filter genutzt)
   - Mobile: Offcanvas-Filterbutton EINBLENDEN (sonst keine Filter erreichbar)
   ========================================================= */

/* Desktop: den "Produkte filtern"-Button aus dem CMS-Filterblock ausblenden */
@media (min-width: 992px){
  .cms-block-sidebar-filter .filter-panel-wrapper-toggle{
    display: none !important;
  }
}

/* Mobile: Filterblock + Button wieder sichtbar machen */
@media (max-width: 991.98px){

  /* Wichtig: überschreibt body.na-filters-in-actions ... display:none */
  body.na-filters-in-actions .cms-block-sidebar-filter,
  body.na-filters-in-actions .cms-block-sidebar-filter .cms-element-sidebar-filter,
  body.na-filters-in-actions .cms-block-sidebar-filter .filter-panel-wrapper-toggle,
  .cms-block-sidebar-filter,
  .cms-block-sidebar-filter .cms-element-sidebar-filter,
  .cms-block-sidebar-filter .filter-panel-wrapper-toggle{
    display: block !important;
  }
}

/* =========================================================
   Listing: Hersteller + Preis neben Sortierung (Desktop)
   ========================================================= */


/* NA_SUBCAT_JUMP_V1 */
/* Unterkategorie-Dropdown optisch wie die Inline-Filterbuttons */
.na-subcat-jump .filter-panel-item-toggle.btn{
  padding: 6px 10px !important;
  white-space: nowrap;
}

.na-subcat-jump-menu{
  max-height: 60vh;
  overflow: auto;
}

@media (max-width: 991.98px){
  /* Mobile: Dropdown ausblenden (Mobile nutzt weiterhin das normale Filter-Offcanvas) */
  .na-subcat-jump{ display: none !important; }
}

/* NA_SUBCAT_INLINEFIX: Inline-Filter + Unterkategorie neben Sortierung sauber rechts ausrichten */
@media (min-width: 992px){
  .na-listing-actions-right{
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* Inline-Container darf nicht 100% breit werden */
  .na-inline-filters{
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Filter-Elemente im Inline-Container kompakt */
  .na-inline-filters .filter-panel-item{
    margin: 0 !important;
  }

  /* Unterkategorie-Dropdown (optisch wie Filter-Button) */
  .na-subcat-jump{
    display: inline-flex;
    align-items: center;
  }
  .na-subcat-jump .btn.filter-panel-item-toggle{
    padding: 6px 10px !important;
  }
}

/* NA: Align header bars left/right edges (fix nested container in top-bar) */


/* NA: unify left/right edges for top-bar (inner), header, and main navigation */


/* Top-bar has container-in-container: outer becomes full-width wrapper */
.header-main .top-bar > .container{
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* Inner container defines the real left/right edges */
.header-main .top-bar > .container > .container{
  max-width: var(--na-header-container-max);
  padding-left: var(--na-header-container-pad);
  padding-right: var(--na-header-container-pad);
}

/* Header row + main navigation use the same edges */
.header-main > .container,
.nav-main > .container{
  max-width: var(--na-header-container-max);
  padding-left: var(--na-header-container-pad);
  padding-right: var(--na-header-container-pad);
}

/* NA: make first/last top navigation items align exactly to container edges */
.nav-main .main-navigation-menu-list{
  padding-left: 0;
  margin-left: 0;
}
.nav-main .main-navigation-menu-list > .nav-item:first-child > .nav-link{
  padding-left: 0 !important;
}
.nav-main .main-navigation-menu-list > .nav-item:last-child > .nav-link{
  padding-right: 0 !important;
}

/* NA: vertical spacing fine-tune (top-bar, header, nav, device-finder) */


/* Top bar: tighter */
.header-main .top-bar{
  padding-top: var(--na-topbar-py);
  padding-bottom: var(--na-topbar-py);
}

/* Header main area: tighter */
.header-main{
  padding-top: var(--na-header-py);
  padding-bottom: var(--na-header-py);
}

/* Main navigation: slightly tighter */
.nav-main{
  padding-top: var(--na-nav-py);
  padding-bottom: var(--na-nav-py);
}

/* TonerFinder block: reduce gap to header */
.device-finder-nav{
  margin-top: var(--na-devicefinder-mt);
}

/* NA: top navigation (Hardware/Original/...) spacing more calm */
.nav-main .main-navigation-menu{
  gap: 10px; /* reduces "jumpy" spacing on wide screens */
}
.nav-main .main-navigation-link{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* NA: TonerFinder polish (consistent heights, padding, alignment) */


/* Layout */
.device-finder-nav .device-finder-nav-inner{
  gap: var(--na-df-gap);
  align-items: center;
}

/* Inputs (selects + search) */
.device-finder-nav .form-select,
.device-finder-nav .form-control{
  height: var(--na-df-height);
  min-height: var(--na-df-height);
  border-radius: var(--na-df-radius);
  padding-left: var(--na-df-pad-x);
  padding-right: var(--na-df-pad-x);
}

/* Button */
.device-finder-nav .btn{
  height: var(--na-df-height);
  min-height: var(--na-df-height);
  border-radius: var(--na-df-radius);
  padding-left: calc(var(--na-df-pad-x) + 6px);
  padding-right: calc(var(--na-df-pad-x) + 6px);
}

/* Make the select arrow not look cramped on the right */
.device-finder-nav .form-select{
  padding-right: calc(var(--na-df-pad-x) + 18px);
}

/* NA: TonerFinder button text alignment + make it look like inputs (inactive/active same) */


/* Ensure the button is vertically centered */
.device-finder-nav .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  background: var(--na-df-bg) !important;
  border: 1px solid var(--na-df-border) !important;
  color: var(--na-df-text) !important;
}

/* Keep same look on hover/focus/active (no "blue button" state) */


/* NA: TonerFinder button - border intensity + consistent states (disabled/active/primary) */


/* Force button to look like the selects in ALL states */
.device-finder-nav .btn,
.device-finder-nav .btn.btn-primary,
.device-finder-nav .btn.btn-secondary,
.device-finder-nav .btn.btn-outline-primary,
.device-finder-nav .btn.btn-outline-secondary{
  background: var(--na-df-control-bg) !important;
  border: 1px solid var(--na-df-control-border) !important;
  color: var(--na-df-control-text) !important;
  box-shadow: none !important;
}

/* Disabled (inactive): keep border equally strong, just mute text */
.device-finder-nav .btn:disabled,
.device-finder-nav .btn.disabled{
  opacity: 1 !important;
  color: var(--na-df-control-text-muted) !important;
  background: var(--na-df-control-bg) !important;
  border-color: var(--na-df-control-border) !important;
  box-shadow: none !important;
}

/* Hover/Focus/Active: no color change, no shadow */


/* NA: TonerFinder - make selects + button identical (bg + border), keep disabled border strong */


/* Unify selects + button visual */
.device-finder-nav .form-select,
.device-finder-nav .form-control,
.device-finder-nav .btn,
.device-finder-nav .btn.btn-primary,
.device-finder-nav .btn.btn-secondary{
  background: var(--na-df-control-bg) !important;
  border: 1px solid var(--na-df-control-border) !important;
  color: var(--na-df-control-text) !important;
  box-shadow: none !important;
}

/* Disabled button: same bg + border, only text muted */
.device-finder-nav .btn:disabled,
.device-finder-nav .btn.disabled{
  opacity: 1 !important;
  background: var(--na-df-control-bg) !important;
  border-color: var(--na-df-control-border) !important;
  color: var(--na-df-control-text-muted) !important;
  box-shadow: none !important;
}

/* No visual change on hover/focus/active (keep identical) */
.device-finder-nav .btn:hover,
.device-finder-nav .btn:focus,
.device-finder-nav .btn:active,
.device-finder-nav .btn:focus-visible{
  background: var(--na-df-control-bg) !important;
  border-color: var(--na-df-control-border) !important;
  color: var(--na-df-control-text) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* NA: TonerFinder - disabled button should be grey, active same as selects */


/* Only change disabled state */
.device-finder-nav .btn:disabled,
.device-finder-nav .btn.disabled{
  background: var(--na-df-disabled-bg) !important;
  border-color: var(--na-df-disabled-border) !important;
  color: var(--na-df-disabled-text) !important;
}

/* NA: Topnavigation link color like normal text (no blue) */
.nav-main .main-navigation-link{
  color: var(--bs-body-color) !important;
}
.nav-main .main-navigation-link:hover,
.nav-main .main-navigation-link:focus{
  color: var(--bs-body-color) !important;
  text-decoration: none;
}
.nav-main .main-navigation-link.active,
.nav-main .main-navigation-link.is-active,
.nav-main .main-navigation-link[aria-current="page"]{
  color: var(--bs-body-color) !important;
}

/* NA: kill "link blue" in top area (top-bar + main nav) */
.header-main .top-bar a,
.header-main .top-bar .nav-link,
.header-main .top-bar .top-bar-nav a,
.nav-main a,
.nav-main .nav-link,
.nav-main .main-navigation-link{
  color: var(--bs-body-color) !important;
  text-decoration: none !important;
}

.header-main .top-bar a:hover,
.header-main .top-bar .nav-link:hover,
.header-main .top-bar .top-bar-nav a:hover,
.nav-main a:hover,
.nav-main .nav-link:hover,
.nav-main .main-navigation-link:hover,
.header-main .top-bar a:focus,
.header-main .top-bar .nav-link:focus,
.nav-main a:focus,
.nav-main .nav-link:focus,
.nav-main .main-navigation-link:focus{
  color: var(--bs-body-color) !important;
  text-decoration: none !important;
}

/* active/current states also not blue */
.header-main .top-bar a.active,
.header-main .top-bar .nav-link.active,
.nav-main a.active,
.nav-main .nav-link.active,
.nav-main .main-navigation-link.active,
.header-main .top-bar a[aria-current="page"],
.nav-main a[aria-current="page"]{
  color: var(--bs-body-color) !important;
}

  /* Listing: mehr „ruhige“ Fläche, weniger harte Kanten */

  /* Innenabstände der Card */

  /* Bildbereich etwas sauberer */

  /* Titel kompakter/ruhiger */

  /* Wenn Beschreibung/duplizierter Text zu viel „Noise“ macht */

  /* Toolbar/Sortierung etwas sauberer ausrichten */

  /* Pagination oben etwas Luft */
}

  .category-content .cms-element-title{
    margin-bottom: 10px;
  }

  /* Cards kompakter */

  /* Bildbereich: feste Höhe, sauber zentriert */

  /* Info-Bereich: weniger Padding */

  /* Titel: etwas kompakter */

  /* Beschreibung ausblenden (du hattest „Noise“/Dopplung) */

  /* Optional: sehr dezentes Hover-Feedback (kein Farbwechsel, nur Schatten) */
}

/* NA: Kategorie-Headline unter Breadcrumb ausblenden + Weißraum reduzieren (Desktop only) */

/* === NA_CUSTOM_NAV_AND_CATEGORY_START === */

/* 1) Topnavigation: Links nicht blau, sondern wie normaler Text */
.header-main .main-navigation a,
.header-main .navigation-main a,
.header-main .main-navigation .main-navigation-link,
.header-main .main-navigation .main-navigation-link a {
  color: var(--bs-body-color) !important;
  text-decoration: none !important;
}
.header-main .main-navigation a:hover,
.header-main .navigation-main a:hover,
.header-main .main-navigation .main-navigation-link:hover,
.header-main .main-navigation .main-navigation-link a:hover {
  color: var(--bs-body-color) !important;
  text-decoration: none !important;
}

/* 2) Kategorie-Seite: große Überschrift (H1) ausblenden + Weißraum oben reduzieren
   (Shopware rendert das je Theme/CMS leicht unterschiedlich, daher mehrere Selektoren) */
body.is-ctl-navigation .cms-element-category-name,
body.is-ctl-navigation .cms-element-category-name h1,
body.is-ctl-navigation h1.category-name,
body.is-ctl-navigation h1.navigation-page-title,
body.is-ctl-navigation .category-name {
  display: none !important;
}

body.is-ctl-navigation .breadcrumb {
  margin-bottom: 10px !important;
}
body.is-ctl-navigation main.content-main {
  padding-top: 10px !important;
}

/* === NA_CUSTOM_NAV_AND_CATEGORY_END === */

/* === NA FIX: Topnavigation + Kategorie-H1 (2026-01-01) === */

/* 1) Top-Nav (unsere Custom-Topnavigation) */
a.na-topmenu-link,
a.na-topmenu-link:visited{
  color: var(--bs-body-color) !important;
  text-decoration: none !important;
}
a.na-topmenu-link:hover,
a.na-topmenu-link:focus{
  color: var(--bs-body-color) !important;
  text-decoration: none !important;
}

/* 2) Main Navigation Link Text (Shopware Standard-Navi, falls relevant) */
.main-navigation-link-text{
  color: var(--bs-body-color) !important;
}

/* 3) Kategorie-Seite: H1 unter Breadcrumb ausblenden + Abstand reduzieren */

/* PDP compat devices (Passende Geräte) — grouped Brand -> Series -> Device */
.product-detail-tabs .compat-devices-wrap{
  margin-top: 10px;
}

.product-detail-tabs .compat-devices-wrap .compat-brand{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.product-detail-tabs .compat-devices-wrap .compat-brand:first-child{
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.product-detail-tabs .compat-devices-wrap .compat-brand > h4{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.product-detail-tabs .compat-devices-wrap .compat-series{
  margin: 10px 0 0;
}

.product-detail-tabs .compat-devices-wrap .compat-series > h5{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0,0,0,.65);
}

.product-detail-tabs .compat-devices-wrap .compat-series > ul{
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
}

@media (max-width: 767.98px){
  .product-detail-tabs .compat-devices-wrap .compat-series > ul{
    columns: 1;
  }
}

.product-detail-tabs .compat-devices-wrap .compat-series > ul > li{
  break-inside: avoid;
  margin: 4px 0;
}

.product-detail-tabs .compat-devices-wrap .compat-series > ul > li > a{
  text-decoration: none;
}

.product-detail-tabs .compat-devices-wrap .compat-series > ul > li > a:hover{
  text-decoration: underline;
}


/* --- Category headline hide (Hardware CMS text element) --- */
body.is-ctl-navigation.is-act-index [data-cms-element-id="019b412b9298711e9628b5dd9acadc90"]{
  display: none !important;
}
body.is-ctl-navigation.is-act-index .cms-page{
  padding-top: 0 !important;
}
body.is-ctl-navigation.is-act-index .cms-section:first-child{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* NA: Zoom/Modal z-index fix (sticky header compatibility) - BEGIN */
/* Problem: Sticky Header (z-index ~1100) liegt über Modals/Zoom (Bootstrap default z-index 1050/1040)
   Effekt: Close/Zoom Controls + Modal-Inhalt werden von Sticky-Header überdeckt.
   Fix: Modals/Zoom-Overlay konsequent über Sticky Header legen (global, robust).
*/
.modal-backdrop {
  z-index: 1990 !important;
}
.modal {
  z-index: 2000 !important;
}

/* Fallback für Shopware Zoom-Modal-Wrapper (falls nicht als .modal gerendert) */
.zoom-modal-backdrop {
  z-index: 1990 !important;
}
.zoom-modal,
.zoom-modal-wrapper {
  z-index: 2000 !important;
}
/* NA: Zoom/Modal z-index fix (sticky header compatibility) - END */

/* NA: Cart Offcanvas z-index fix (sticky header compatibility) - BEGIN */
/* Problem: Cart-Offcanvas liegt unter Header/Sticky (z-index ~1100) – Desktop */
/* Fix: Desktop: Cart-Offcanvas + Backdrop über den Header heben (nur cart-offcanvas, kein globales offcanvas) */
@media (min-width: 992px) {
  .cart-offcanvas.offcanvas,
  .cart-offcanvas.offcanvas.show {
    z-index: 2000 !important;
  }
  .cart-offcanvas.offcanvas.show ~ .offcanvas-backdrop.show {
    z-index: 1990 !important;
  }
}
/* NA: Cart Offcanvas z-index fix (sticky header compatibility) - END */




/* NA: Footer Polish - BEGIN */
.footer-main{
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 40px;
}

.na-footer-columns{
  padding-top: 26px;
  padding-bottom: 26px;
  gap: 8px 0;
}

.na-footer-col{
  padding-top: 6px;
  padding-bottom: 6px;
}

.na-footer-title{
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 10px;
  color: rgba(0,0,0,.75);
}

.na-footer-links{
  margin: 0;
  padding: 0;
}

.na-footer-link-item{
  margin: 6px 0;
  line-height: 1.35;
}

.na-footer-link,
.na-footer-link:visited{
  text-decoration: none;
  color: rgba(0,0,0,.72);
}

.na-footer-link:hover{
  text-decoration: underline;
  color: rgba(0,0,0,.92);
}

.na-footer-link-text{
  color: rgba(0,0,0,.72);
}

.na-footer-contact-row,
.na-footer-follow-row{
  margin: 6px 0;
  color: rgba(0,0,0,.72);
}

.na-footer-badges{
  margin-top: 12px;
}

.na-footer-itrecht img{
  display: block;
  max-width: 120px;   /* kleineres Siegel */
  width: 100%;
  height: auto;
}

.na-footer-newsletter-text{
  color: rgba(0,0,0,.72);
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 10px;
  max-width: 320px;
}

.na-footer-newsletter-input{
  width: 100%;
  height: 40px;
  border-radius: 6px;
}

.na-footer-newsletter-privacy{
  margin-top: 10px;
  max-width: 360px;
}

.na-footer-newsletter-privacy .form-check{
  margin-top: 8px;
}

/* Mobile spacing */
@media (max-width: 767.98px){
  .na-footer-col{
    padding-top: 12px;
    padding-bottom: 12px;
  }
  }
/* NA: Footer Polish - END */

/* NA: Footer Polish v2 - BEGIN */
/* Titel: größer + Unterstreichung */
.na-footer-title{
  font-size: 15px;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,.20);
  margin-bottom: 12px;
}

/* IT-Recht Siegel: kleiner + mehr Abstand nach oben */
.na-footer-itrecht{
  margin-top: 16px;
}
.na-footer-itrecht img,
.na-footer-badges img{
  max-width: 90px;
  width: 100%;
  height: auto;
  display: block;
}

/* Newsletter: Button unter Input (auch Desktop) */
.na-footer-newsletter-row{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  max-width: 360px;
  margin-top: 8px;
}

.na-footer-newsletter-btn{
  width: 100%;
  height: 40px;
  border-radius: 6px;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
  margin-top: 10px;
}

/* NA: Footer Polish v2 - END */

/* NA: Footer Polish v3 - BEGIN */
/* Full-width Hintergrund (100vw) am Footer-Wrapper, damit nichts durch Container-Breite geclippt wird */
.footer-main,
.footer-main .container,
.footer-main .footer-columns {
  overflow: visible !important;
}

.footer-main {
  position: relative;
  z-index: 0;
}

.footer-main::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #f5f5f5;
  z-index: -1;
}

/* Unser Footer-Block bleibt optisch "aufgeräumt" im Container */
.footer-main .na-footer-columns {
  background: transparent !important;
  padding-top: 22px;
  padding-bottom: 22px;
}
/* NA: Footer Polish v3 - END */

/* NA: Footer Polish v4 - BEGIN */
/* Mehr Luft zwischen den Footer-Menüpunkten (Links/Contact/Social) */
.na-footer-link-item { margin: 0 0 8px 0; }
.na-footer-contact-row { margin: 0 0 8px 0; }
.na-footer-follow-row { margin: 0 0 8px 0; }

/* Newsletter: etwas Luft zwischen Text/Input/Button/Privacy */
.na-footer-newsletter-text { margin-bottom: 10px; }
/* NA: Footer Polish v4 - END */

/* NA: PDP Layout v4 - BEGIN */
/* Ziel: kompakte 3-Spalten-PDP wie Referenz (Bild links, Titel/Mitte, Buybox rechts).
   Desktop-only. Mobile unverändert. */
@media (min-width: 992px) {
  /* Referenzcontainer für absolute Headline */
  .cms-page .cms-section-default.boxed{
    position: relative;
  }

  /* Gallery/Buybox: oben bündig starten */
  .cms-page .cms-block-gallery-buybox .cms-block-container{
    padding-top: 0 !important;
  }

  /* Spaltenabstände kompakter */
  .cms-page .cms-block-gallery-buybox .cms-block-container-row{
    align-items: flex-start;
    gap: 24px;
  }

  /* links: Bild kompakt */
  .cms-page .cms-block-gallery-buybox .product-detail-media{
    flex: 0 0 320px;
    max-width: 320px;
  }

  /* rechts: Buybox kompakt + als dezente Box */
  .cms-page .cms-block-gallery-buybox .product-detail-buy{
    flex: 0 0 300px;
    max-width: 300px;
    margin-left: auto;
    align-self: flex-start;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 16px 16px 12px;
  }
  /* falls Shopware intern ein Container-Element nutzt: ebenfalls „Box“-Look geben */
  .cms-page .cms-block-gallery-buybox .product-detail-buy .product-detail-buy-container{
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .cms-page .cms-block-gallery-buybox .gallery-slider-single-image{
    min-height: 260px !important;
  }

  /* Headline-Block: in die Mitte zwischen Bild und Buybox setzen (wie Referenz) */
  .cms-page .cms-block-product-heading{
    position: absolute;
    z-index: 2;
    top: 0;
    left: calc(320px + 24px);
    right: calc(300px + 24px);
    width: auto;
    margin: 0 !important;
    pointer-events: none;
  }

  .cms-page .cms-block-product-heading .cms-block-container{
    padding: 0 !important;
  }
  .cms-page .cms-block-product-heading .cms-block-container-row{
    margin: 0 !important;
  }
  .cms-page .cms-block-product-heading .product-heading-manufacturer-logo-container{
    display: none !important;
  }
  .cms-page .cms-block-product-heading .product-heading-name-container{
    padding: 0 !important;
  }

  /* Titel deutlich kleiner/kompakter */
  .cms-page .cms-block-product-heading .product-detail-name{
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 8px 0;
  }

  /* Tabs-Bereich etwas dichter */
  .cms-page .product-detail-tabs{
    margin-top: 18px !important;
  }
  .cms-page .product-detail-tabs .card-body{
    padding-top: 10px !important;
  }

  /* "Produktinformationen ..." kleiner machen */
  .cms-page .product-detail-description-title{
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 10px 0;
  }
}

@media (min-width: 1200px) {
  .cms-page .cms-block-gallery-buybox .cms-block-container-row{ gap: 32px; }
  .cms-page .cms-block-gallery-buybox .product-detail-media{ flex: 0 0 360px; max-width: 360px; }
  .cms-page .cms-block-gallery-buybox .product-detail-buy{ flex: 0 0 320px; max-width: 320px; }
  .cms-page .cms-block-product-heading{ left: calc(360px + 32px); right: calc(320px + 32px); }
  .cms-page .cms-block-product-heading .product-detail-name{ font-size: 23px; }
}

@media (min-width: 1400px) {
  .cms-page .cms-block-gallery-buybox .cms-block-container-row{ gap: 40px; }
  .cms-page .cms-block-gallery-buybox .product-detail-media{ flex: 0 0 380px; max-width: 380px; }
  .cms-page .cms-block-gallery-buybox .product-detail-buy{ flex: 0 0 340px; max-width: 340px; }
  .cms-page .cms-block-product-heading{ left: calc(380px + 40px); right: calc(340px + 40px); }
  .cms-page .cms-block-product-heading .product-detail-name{ font-size: 24px; }
}
/* NA: PDP Layout v4 - END */


/* NA: PDP Center Meta v2 - BEGIN */
/* Ziel:
   - Bild bekommt „Kasten“ ähnlich Buybox
   - Produktnummer in der Buybox ausblenden (weil wir sie in die Mitte ziehen)
   - Unter H1: kompakte, aufgeräumte Meta-Liste (untereinander, gleiche Breite)
   - Pointer-events im Heading wieder aktiv für Titel + Chips */

@media (min-width: 992px) {
  /* Bild-Kasten */
  .cms-page .cms-block-gallery-buybox .product-detail-media{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    padding: 16px;
    background: var(--bs-body-bg);
  }
  .cms-page .cms-block-gallery-buybox .product-detail-media .cms-element-image-gallery{
    margin: 0 !important;
  }

  /* Produktnummer in Buybox ausblenden (Klasse kann je nach Template variieren -> breit absichern) */
  .cms-page .product-detail-buy .product-detail-ordernumber,
  .cms-page .product-detail-buy .product-detail-ordernumber-container,
  .cms-page .product-detail-buy [class*="ordernumber"]{
    display: none !important;
  }

  /* Heading-Overlay hatte pointer-events:none -> für Name + Meta wieder aktivieren */
  .cms-page .cms-block-product-heading .product-heading-name-container,
  .cms-page .cms-block-product-heading .product-detail-name,
  .cms-page .cms-block-product-heading .na-pdp-center-meta{
    pointer-events: auto;
  }

  /* Center Meta unter dem Titel: untereinander, gleiche Breite */
  .cms-page .cms-block-product-heading .na-pdp-center-meta{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
    max-width: 360px;        /* kompakt wie Referenz */
  }

  .cms-page .cms-block-product-heading .na-pdp-center-meta .na-chip{
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;     /* weniger „Pill“, mehr „Karte“ */
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.2;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    white-space: normal;     /* lange Werte dürfen umbrechen */
  }

  .cms-page .cms-block-product-heading .na-pdp-center-meta .na-chip.na-chip-pn{
    font-weight: 700;
  }
}
/* NA: PDP Center Meta v2 - END */

/* NA: PDP Buybox + Tabs Polish v3 - BEGIN */
/* Fixes:
   - Buybox-Höhe etwas reduzieren (nicht höher als Bild-Kasten wirken)
   - Stepper/Quantity wirklich weiß (kein Grau-Durchscheinen) */

@media (min-width: 992px) {
  .cms-page .cms-block-gallery-buybox .cms-block-container-row{
    align-items: stretch;
  }

  .cms-page .cms-block-gallery-buybox .product-detail-buy{
    align-self: stretch;
    display: flex;
  }
  .cms-page .cms-block-gallery-buybox .product-detail-buy > *{
    width: 100%;
  }

  .cms-page .cms-block-gallery-buybox .product-detail-buy .cms-element-buy-box{
    height: 100%;
    min-height: 320px; /* vorher 360px -> etwas kompakter */
    background: #f6f7f9;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
  }

  /* Quantity/Stepper: alles im Input-Group sauber weiß */
  .cms-page .cms-block-gallery-buybox .product-detail-buy .cms-element-buy-box .buy-widget-quantity,
  .cms-page .cms-block-gallery-buybox .product-detail-buy .cms-element-buy-box .buy-widget-quantity .input-group,
  .cms-page .cms-block-gallery-buybox .product-detail-buy .cms-element-buy-box .buy-widget-quantity .input-group > *,
  .cms-page .cms-block-gallery-buybox .product-detail-buy .cms-element-buy-box .buy-widget-quantity .btn,
  .cms-page .cms-block-gallery-buybox .product-detail-buy .cms-element-buy-box .buy-widget-quantity .form-control,
  .cms-page .cms-block-gallery-buybox .product-detail-buy .cms-element-buy-box .buy-widget-quantity .input-group-text{
    background: #fff !important;
  }

  .cms-page .cms-block-gallery-buybox .product-detail-buy .cms-element-buy-box .buy-widget-quantity .btn{
    border-color: rgba(0,0,0,.15) !important;
  }
}

/* Tabs-Bereich: Kasten */
.cms-page .product-detail-tabs{
  background: #f6f7f9;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
}
.cms-page .product-detail-tabs .product-detail-tabs-content{
  background: transparent;
}
.cms-page .product-detail-tabs.card,
.cms-page .product-detail-tabs{
  padding: 14px 16px;
}
.cms-page .product-detail-tab-navigation-list{
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* NA: PDP Quantity Stepper Fix v1 */
/* Force white stepper inside the (grey) buybox */
.product-detail-buybox .product-detail-quantity-group,
.product-detail-buybox .quantity-selector-group {
  background: #fff !important;
  border-radius: 6px !important;
}

/* Buttons */
.product-detail-buybox .product-detail-quantity-group .btn-minus,
.product-detail-buybox .product-detail-quantity-group .btn-plus,
.product-detail-buybox .quantity-selector-group .btn-minus,
.product-detail-buybox .quantity-selector-group .btn-plus {
  background: #fff !important;
  background-color: #fff !important;
  border-color: #ced4da !important;
}

/* Input */
.product-detail-buybox .product-detail-quantity-group .quantity-selector-group-input,
.product-detail-buybox .quantity-selector-group .quantity-selector-group-input {
  background: #fff !important;
  background-color: #fff !important;
  border-color: #ced4da !important;
}

/* Remove any inherited background from input-group wrappers */
.product-detail-buybox .product-detail-quantity-group .input-group,
.product-detail-buybox .quantity-selector-group .input-group {
  background: transparent !important;
}

/* NA: PDP Buybox + Tabs Polish v3 - END */

/* NA: PDP Quantity Stepper Fix v2 - BEGIN */
/* Ziel: Stepper immer weiß, damit Buybox-Grau nicht "durchscheint" */
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group{
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}

.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .btn,
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .quantity-selector-group-input{
  background: #fff !important;
}

.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .btn{
  border-color: rgba(0,0,0,.12) !important;
  box-shadow: none !important;
}

.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .btn:hover,
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .btn:focus,
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .btn:active{
  background: #fff !important;
}

.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .quantity-selector-group-input{
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}
/* NA: PDP Quantity Stepper Fix v2 - END */

/* NA: PDP Quantity Stepper Fix v3 - BEGIN */
/* Ziel: Zahl im Stepper sichtbar (Textfarbe + Breite) */
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .quantity-selector-group-input{
  color: #111 !important;
  caret-color: #111 !important;
  opacity: 1 !important;

  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;

  background: #fff !important;
  text-align: center !important;
  font-weight: 600 !important;
}
/* NA: PDP Quantity Stepper Fix v3 - END */

/* NA: PDP Quantity + Buy Button Layout v4 - BEGIN */
/* Ziel: Warenkorb-Button unter Stepper + Stepper horizontal + Zahl sichtbar */
.cms-block-gallery-buybox .buy-widget-container{
  display:flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}
.cms-block-gallery-buybox .buy-widget-container > *{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}
.cms-block-gallery-buybox .buy-widget-container fieldset{
  justify-content: flex-start !important;
}

/* Add-to-cart Button full width (unter Stepper) */
.cms-block-gallery-buybox .buy-widget-container button[type="submit"]{
  width: 100% !important;
}

/* Stepper: horizontal + fix widths */
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group{
  width: auto !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .btn-minus,
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .btn-plus{
  flex: 0 0 38px !important;
  width: 38px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #fff !important;
}
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .quantity-selector-group-input{
  flex: 0 0 52px !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;

  background: #fff !important;
  color: #111 !important;
  caret-color: #111 !important;
  opacity: 1 !important;

  text-align: center !important;
  font-weight: 600 !important;
}
/* NA: PDP Quantity + Buy Button Layout v4 - END */

/* NA: PDP Buybox Visual Polish v5 - BEGIN */
/* Scope: nur PDP Buybox Block */
.cms-block-gallery-buybox .product-detail-buy{
  background: #f6f7f8 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}

.cms-block-gallery-buybox .product-detail-price{
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 6px !important;
}

.cms-block-gallery-buybox .product-detail-tax{
  margin-bottom: 14px !important;
}
.cms-block-gallery-buybox .product-detail-tax-link{
  padding: 0 !important;
  font-size: 0.95rem !important;
}

/* Stepper + Button Layout bereits v4: hier nur Optik */
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group{
  border: 1px solid #d7dde3 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  align-self: center !important; /* zentriert in der Buybox */
}

.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .btn-minus,
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .btn-plus{
  border: 0 !important;
  background: #fff !important;
}
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .btn-minus:hover,
.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .btn-plus:hover{
  background: #f2f4f6 !important;
}

.cms-block-gallery-buybox .product-detail-quantity-group.quantity-selector-group .quantity-selector-group-input{
  border: 0 !important;
  background: #fff !important;
  color: #111 !important;
}

/* Button als Primary-Block */
.cms-block-gallery-buybox .buy-widget-container button[type="submit"]{
  border-radius: 12px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-weight: 700 !important;
}
/* NA: PDP Buybox Visual Polish v5 - END */


/* NA: PDP Buybox HQ-style v1 - BEGIN */
@media (min-width: 992px) {
  /* Right align everything inside buybox */
  .cms-block-gallery-buybox .product-detail-buy {
    text-align: right;
  }

  /* Smaller text under price (tax/shipping) */
  .cms-block-gallery-buybox .product-detail-buy .product-detail-tax,
  .cms-block-gallery-buybox .product-detail-buy .product-detail-tax-link {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }

  /* Keep qty + button area right-aligned */
  .cms-block-gallery-buybox .product-detail-buy .buy-widget-container {
    justify-content: flex-end !important;
  }
  .cms-block-gallery-buybox .product-detail-buy .product-detail-quantity-group {
    margin-left: auto !important;
  }

  /* Button narrower and right-aligned (HQ-like) */
  .cms-block-gallery-buybox .product-detail-buy .btn-buy {
    width: auto !important;
    min-width: 220px !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    margin-left: auto !important;
  }
}
/* NA: PDP Buybox HQ-style v1 - END */


/* NA: PDP Buybox Stepper+Button Bottom v1 - BEGIN */
@media (min-width: 992px) {

  /* Put qty + button in one row and align to bottom/right */
  .cms-block-gallery-buybox .product-detail-buy .buy-widget-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  /* Keep the qty fieldset compact */
  .cms-block-gallery-buybox .product-detail-buy .buy-widget-container > fieldset {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }

  /* Ensure the button column aligns right (Shopware usually uses a .col-8 wrapper) */
  .cms-block-gallery-buybox .product-detail-buy .buy-widget-container > .col-8,
  .cms-block-gallery-buybox .product-detail-buy .buy-widget-container > .col {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }

  /* Make stepper fully white and same height as button */
  .cms-block-gallery-buybox .product-detail-buy .product-detail-quantity-group,
  .cms-block-gallery-buybox .product-detail-buy .product-detail-quantity-group * {
    background: transparent !important;
  }

  .cms-block-gallery-buybox .product-detail-buy .product-detail-quantity-group {
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  /* Smaller (height) add-to-cart button */
  .cms-block-gallery-buybox .product-detail-buy .btn-buy {
    height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 44px !important;
  }
}
/* NA: PDP Buybox Stepper+Button Bottom v1 - END */


/* NA: PDP Buybox Stepper above Button at Bottom v2 - BEGIN */
@media (min-width: 992px) {
  /* Keep buybox as a column and push form to bottom (from v1), but stack qty + button vertically */
  .cms-block-gallery-buybox .product-detail-buy {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  .cms-block-gallery-buybox .product-detail-buy .product-detail-form-container {
    margin-top: auto !important;
  }

  /* Stack: stepper above button, both anchored bottom */
  .cms-block-gallery-buybox .product-detail-buy .buy-widget-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* Make both columns full width inside buybox */
  .cms-block-gallery-buybox .product-detail-buy .buy-widget-container > fieldset,
  .cms-block-gallery-buybox .product-detail-buy .buy-widget-container > .col-8,
  .cms-block-gallery-buybox .product-detail-buy .buy-widget-container > .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Stepper full width, white background stays */
  .cms-block-gallery-buybox .product-detail-buy .product-detail-quantity-group {
    width: 100% !important;
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .cms-block-gallery-buybox .product-detail-buy .product-detail-quantity-group .btn,
  .cms-block-gallery-buybox .product-detail-buy .product-detail-quantity-group .quantity-selector-group-input {
    background: #fff !important;
    height: 44px !important;
  }

  /* Fix button text centering properly (no line-height hack) */
  .cms-block-gallery-buybox .product-detail-buy .btn-buy {
    width: 100% !important;
    height: 44px !important;
    padding: 0 16px !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* NA: PDP Buybox Stepper above Button at Bottom v2 - END */


/* NA: PDP Buybox Stepper+Button Bottom + Compact Width v3 - BEGIN */
@media (min-width: 992px) {

  /* Make sure the buybox column is a flex column with real height */
  .cms-block-gallery-buybox .cms-element-buy-box,
  .cms-block-gallery-buybox .product-detail-buy {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Push the form area to the bottom (apply to both possible wrappers) */
  .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container,
  .cms-block-gallery-buybox .product-detail-buy .product-detail-form-container {
    margin-top: auto !important;
  }

  /* Stack stepper above button, but keep it compact (not full-width stretched) */
  .cms-block-gallery-buybox .buy-widget-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Limit width so it doesn't look “gezogen” */
  .cms-block-gallery-buybox .buy-widget-container > fieldset,
  .cms-block-gallery-buybox .buy-widget-container > .col-8,
  .cms-block-gallery-buybox .buy-widget-container > .col {
    width: 100% !important;
    max-width: 260px !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
  }

  /* Stepper: white, compact, consistent height */
  .cms-block-gallery-buybox .product-detail-quantity-group {
    width: 100% !important;
    max-width: 260px !important;
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .cms-block-gallery-buybox .product-detail-quantity-group .btn,
  .cms-block-gallery-buybox .product-detail-quantity-group .quantity-selector-group-input {
    background: #fff !important;
    height: 44px !important;
  }

  /* Button: keep current look, just ensure perfect vertical centering */
  .cms-block-gallery-buybox .btn-buy {
    width: 100% !important;
    max-width: 260px !important;
    height: 44px !important;
    padding: 0 16px !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* NA: PDP Buybox Stepper+Button Bottom + Compact Width v3 - END */


/* NA: PDP Buybox Stepper+Button Bottom v4 - BEGIN */
/* Ziel:
   - Warenkorb-Button ganz unten in der Buybox, volle Breite
   - Mengen-Stepper direkt darüber, normale Breite, rechts ausgerichtet
   - Stepper darf NICHT mehr “langgezogen” werden
*/
@media (min-width: 992px) {

  /* Buybox inner wrapper: macht es möglich, Inhalte nach unten zu drücken */
  .product-detail-buy [class^="product-detail-buy-"]{
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Der Formularbereich sitzt am Ende der Buybox */
  .product-detail-buy [class^="product-detail-buy-"] .product-detail-form-container{
    margin-top: auto !important;
  }

  /* Buy widget selbst als Column, damit wir unten “stacken” können */
  .product-detail-buy [class^="product-detail-buy-"] form.buy-widget{
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Container als Column; fieldset bekommt margin-top:auto => Stepper+Button unten */
  .product-detail-buy [class^="product-detail-buy-"] .buy-widget-container{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: 100% !important;
  }

  /* Stepper-Block: nach unten schieben + rechtsbündig */
  .product-detail-buy [class^="product-detail-buy-"] .buy-widget-container > fieldset{
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: auto !important;
  }

  /* Stepper: normale Breite erzwingen (verhindert “langgezogen”) */
  .product-detail-buy [class^="product-detail-buy-"] .product-detail-quantity-group.quantity-selector-group{
    width: 140px !important;
    max-width: 140px !important;
    flex: 0 0 140px !important;
  }

  /* Stepper Farben: komplett weiß (kein Grau “durchscheinend”) */
  .product-detail-buy [class^="product-detail-buy-"] .product-detail-quantity-group .btn,
  .product-detail-buy [class^="product-detail-buy-"] .product-detail-quantity-group input{
    background: #fff !important;
  }

  .product-detail-buy [class^="product-detail-buy-"] .product-detail-quantity-group input{
    color: #111 !important;
    text-align: center !important;
  }

  /* Warenkorb-Button: volle Breite + direkt unter dem Stepper */
  .product-detail-buy [class^="product-detail-buy-"] .btn-buy{
    width: 100% !important;
    margin-top: 0 !important;

    /* Höhe/Vertikalzentrierung fix (Text wieder mittig) */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* NA: PDP Buybox Stepper+Button Bottom v4 - END */

/* NA: PDP Delivery Dot Left + Line Spacing v2 - BEGIN */
.product-detail-buy .product-detail-delivery-information .product-delivery-information {
  display: grid;
  grid-template-columns: 12px 1fr;
  column-gap: 10px;
  align-items: start;

  max-width: 230px;
  margin-left: auto;

  text-align: right;
  line-height: 1.65;
}

.product-detail-buy .product-detail-delivery-information .product-delivery-information .delivery-status-indicator {
  justify-self: start;
  margin-top: 0.35em;
}
/* NA: PDP Delivery Dot Left + Line Spacing v2 - END */

/* NA: PDP Delivery Two-Line + Indicator Align v1 - BEGIN */
.cms-block-gallery-buybox .product-detail-buy .product-detail-delivery-information .delivery-information{
  display: grid !important;
  grid-template-columns: 10px 1fr !important;
  column-gap: 10px !important;
  align-items: start !important;

  /* Reset gegen "Buchstaben untereinander" / Min-Content / Break-Experimente */
  width: auto !important;
  min-width: 0 !important;
  max-width: 220px !important; /* erzwingt meist den Umbruch nach dem Komma */
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;

  text-align: left !important;
  line-height: 1.35 !important;

  /* rechts im Buybox-Block positionieren */
  margin: 0 0 8px auto !important;
}

.cms-block-gallery-buybox .product-detail-buy .product-detail-delivery-information .delivery-status-indicator{
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  margin-top: 0.35rem !important;
}
/* NA: PDP Delivery Two-Line + Indicator Align v1 - END */


/* NA: PDP Delivery Wrap Fix v2 - BEGIN */
.cms-block-gallery-buybox .product-detail-buy .product-detail-delivery-information .delivery-information{
  /* erzwingt: 2 sinnvolle Zeilen (Sofort verfügbar) + (Lieferzeit: 1-3 Tage) */
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;

  /* gegen "komische" Breaks */
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;

  /* etwas mehr Luft zwischen den zwei Zeilen */
  line-height: 1.5 !important;
}
/* NA: PDP Delivery Wrap Fix v2 - END */


/* NA: MOBILE PDP + Offcanvas Fix v1 - BEGIN */
@media (max-width: 991.98px) {
}
/* NA: MOBILE PDP + Offcanvas Fix v1 - END */


/* NA: MOBILE PDP + Offcanvas Fix v1 - BEGIN */
@media (max-width: 991.98px) {

  /* 1) PDP Titel kleiner (nur Mobile) */
  .product-detail-name {
    font-size: 1.45rem !important;
    line-height: 1.22 !important;
  }

  /* 2) Buybox: Delivery/Availability sauber links, Punkt linksbündig, 2 Zeilen mit Luft */
  .product-detail-buy .product-detail-delivery-information,
  .product-detail-buy .product-delivery-information {
    text-align: left !important;
  }

  /* Shopware Delivery-Block (Standard-Klassen) */
  .product-detail-buy .delivery-status {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .product-detail-buy .delivery-status-indicator,
  .product-detail-buy .delivery-status-indicator::before {
    flex: 0 0 auto !important;
  }

  /* Punkt minimal nach unten, damit er optisch zur ersten Textzeile sitzt */
  .product-detail-buy .delivery-status-indicator {
    margin-top: 0.28rem !important;
  }

  .product-detail-buy .delivery-status-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; /* Luft zwischen “Sofort verfügbar” und “Lieferzeit …” */
    text-align: left !important;

    /* verhindert diese “Buchstabe-pro-Zeile”-Katastrophen */
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* Falls Shopware/Theme an irgendeiner Stelle Wort-Trennung erzwingt */
  .product-detail-buy .delivery-status-text * {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* 3) Mobile Offcanvas (Passende Geräte Overlay): wieder scroll + close */
  .na-compat-offcanvas.offcanvas.show {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .na-compat-offcanvas.offcanvas .offcanvas-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100vh - 56px) !important; /* Header bleibt klickbar */
  }

  .na-compat-offcanvas.offcanvas .offcanvas-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #fff !important;
  }

  /* Close-Button sichtbar/klickbar erzwingen (Shopware + Bootstrap Varianten) */
  .na-compat-offcanvas.offcanvas .btn-close,
  .na-compat-offcanvas.offcanvas .offcanvas-close {
    display: inline-flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
/* NA: MOBILE PDP + Offcanvas Fix v1 - END */


/* NA: PDP Mobile Bullets + Offcanvas Close v1 - BEGIN */
@media (max-width: 575.98px) {

  /* 1) Infos unter dem Titel: sauber untereinander (Mobile) */
  .product-detail-content .product-detail-properties,
  .product-detail-content .product-detail-ordernumber-container,
  .product-detail-content .product-detail-manufacturer {
    display: block !important;
  }

  /* Falls es als dl/dt/dd oder rows gerendert wird: jede Zeile als Block */
  .product-detail-content .product-detail-properties dl,
  .product-detail-content .product-detail-properties dt,
  .product-detail-content .product-detail-properties dd,
  .product-detail-content .product-detail-properties .product-detail-properties-row,
  .product-detail-content .product-detail-properties .product-detail-properties-item {
    display: block !important;
  }

  /* Abstand zwischen den Zeilen */
  .product-detail-content .product-detail-ordernumber-container,
  .product-detail-content .product-detail-manufacturer,
  .product-detail-content .product-detail-properties .product-detail-properties-row,
  .product-detail-content .product-detail-properties .product-detail-properties-item,
  .product-detail-content .product-detail-properties dt,
  .product-detail-content .product-detail-properties dd {
    margin: 0 0 6px 0 !important;
  }

  /* Label/Wert: auf einer Zeile, aber jede Info als eigene Zeile */
  .product-detail-content .product-detail-properties dt,
  .product-detail-content .product-detail-properties .property-label {
    font-weight: 600;
    display: inline !important;
    margin-right: 4px !important;
  }
  .product-detail-content .product-detail-properties dd,
  .product-detail-content .product-detail-properties .property-value {
    display: inline !important;
    margin: 0 !important;
  }

  /* nach jedem dd/Wert Zeilenumbruch erzwingen (nur Mobile) */
  .product-detail-content .product-detail-properties dd::after,
  .product-detail-content .product-detail-properties .property-value::after {
    content: "";
    display: block;
    height: 0;
  }

  /* 2) Offcanvas: Header + Close sichtbar, Body scrollbar */
  .na-compat-offcanvas.offcanvas .offcanvas-header {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .na-compat-offcanvas.offcanvas .offcanvas-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 64px);
  }

  /* Close Button erzwingen (falls im DOM vorhanden aber unsichtbar) */
  .na-compat-offcanvas.offcanvas .btn-close {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 44px;
    height: 44px;
    background: none !important;
    position: relative;
  }
  .na-compat-offcanvas.offcanvas .btn-close::before {
    content: "×";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: #000;
  }
}
/* NA: PDP Mobile Bullets + Offcanvas Close v1 - END */


/* NA: PDP Mobile Quickfacts + Offcanvas Close v1 - BEGIN */
@media (max-width: 575.98px) {

  /* Quickfacts unter dem Titel (JS-Chips): sauber untereinander + Bullet */
  .product-detail-content .na-chip,
  .product-detail-content [class*="na-chip-"]{
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    padding-left: 18px !important;
    position: relative !important;
    white-space: normal !important;
  }

  .product-detail-content .na-chip::before,
  .product-detail-content [class*="na-chip-"]::before{
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.2;
  }

  .product-detail-content .na-chip:last-child,
  .product-detail-content [class*="na-chip-"]:last-child{
    margin-bottom: 0 !important;
  }

  /* Falls ein Container bisher "inline" alles zusammenquetscht */
  .product-detail-content .na-quickfacts,
  .product-detail-content .na-quickfacts *,
  .product-detail-content .na-chip-box{
    white-space: normal !important;
  }

  /* Offcanvas: Header + Close Button erzwingen, Body scrollbar lassen */
  .na-compat-offcanvas.offcanvas .offcanvas-header{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: #fff !important;
    padding: 12px 12px !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
  }

  .na-compat-offcanvas.offcanvas .offcanvas-close{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    color: #111 !important;
  }

  /* Falls der Button bisher "leer" wirkt: ein sichtbares X rendern */
  .na-compat-offcanvas.offcanvas .offcanvas-close::before{
    content: "×";
    font-size: 26px;
    line-height: 1;
  }

  .na-compat-offcanvas.offcanvas .offcanvas-body{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}
/* NA: PDP Mobile Quickfacts + Offcanvas Close v1 - END */


/* === NA: PDP Mobile fixes v2 (quickfacts list + tabs offcanvas close) === */
@media (max-width: 767.98px) {
  /* 1) Bullet-List (kommt aus description <ul><li>...): wieder sauber untereinander */
  body.is-ctl-product.is-act-index .product-detail-description-text ul {
    display: block !important;
    margin: 10px 0 0 0 !important;
    padding-left: 1.1rem !important; /* echte Bullet-Einrückung */
    list-style: disc !important;
    list-style-position: outside !important;
  }
  body.is-ctl-product.is-act-index .product-detail-description-text ul > li {
    display: list-item !important;   /* verhindert "alles klebt zusammen" */
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  /* 2) Tabs-Offcanvas: Close-Header sichtbar halten (scroll bleibt wie er ist) */
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas .offcanvas-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1060 !important;
    background: #fff !important;
    padding: 12px 12px !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
  }
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas .offcanvas-close {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
}
/* === /NA: PDP Mobile fixes v2 === */


/* NA: PDP Mobile Hotfix v3 (Quickfacts Bullets + Offcanvas Close) - BEGIN */
@media (max-width: 575.98px) {

  /* A) Quickfacts/Meta unter dem Titel: echte Bullets, sauber untereinander (nur PDP mobile) */
  body.is-ctl-product.is-act-index
  .cms-page .cms-block-product-heading .na-pdp-center-meta .na-chip {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    padding-left: 18px !important;
    position: relative !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }

  body.is-ctl-product.is-act-index
  .cms-page .cms-block-product-heading .na-pdp-center-meta .na-chip::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.25;
  }

  body.is-ctl-product.is-act-index
  .cms-page .cms-block-product-heading .na-pdp-center-meta .na-chip:last-child {
    margin-bottom: 0 !important;
  }

  /* B) Offcanvas (PDP Tabs / passende Geräte): Header sticky + Close sichtbar, kleiner, klickbar */
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas .offcanvas-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1060 !important;
    background: #fff !important;
    padding: 10px 12px !important;
    min-height: 56px !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
  }

  /* WICHTIG: im DOM ist offcanvas-close (btn btn-secondary ...) */
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas .offcanvas-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;          /* Button-Text verstecken */
    line-height: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 999px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas .offcanvas-close::before {
    content: "×";
    font-size: 26px;
    line-height: 1;
    color: #111;
  }

  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas .offcanvas-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100vh - 56px) !important;
  }
}
/* NA: PDP Mobile Hotfix v3 (Quickfacts Bullets + Offcanvas Close) - END */


/* NA: PDP Mobile Hotfix v4 (Offcanvas Singleton: dvh height + clean scroll) - BEGIN */
@media (max-width: 575.98px) {

  /* Singleton-Offcanvas (Shopware/Bootstrap) */
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.offcanvas-singleton,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton.offcanvas-singleton {
    --bs-offcanvas-width: 100vw !important;
    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.offcanvas-singleton .offcanvas-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100dvh - 56px) !important; /* 56px = unser sticky header aus v3 */
  }
}
/* NA: PDP Mobile Hotfix v4 (Offcanvas Singleton: dvh height + clean scroll) - END */
/* NA: PDP Mobile Hotfix v5 (Compat Devices Offcanvas compact) - BEGIN */
@media (max-width: 575.98px) {

  /* Scope: nur PDP + Offcanvas-Singleton (Tabs/Kompatible Geräte) */
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body {
    padding: 10px 10px 14px 10px !important;
  }

  /* Container/Bootstrap-Spacing im Offcanvas entschärfen (wir wollen volle Breite) */
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body .container,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body .container-fluid,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body .cms-section,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body .cms-block,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body .cms-element {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Falls der Device-Finder im Offcanvas gerendert wird: kompakteres Grid */
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body .row {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 8px;
  }

  /* Kacheln/Buttons/Links im Offcanvas etwas kleiner (damit „nicht so riesig“) */
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body a[class],
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body button,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body .btn {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body a.btn,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body button.btn,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body .btn {
    padding: 10px 10px !important;
  }

  /* Überschriften im Offcanvas etwas enger */
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body h1,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body h2,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-of-offcanvas-singleton .offcanvas-body h3 {
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }
}
/* NA: PDP Mobile Hotfix v5 (Compat Devices Offcanvas compact) - END */

/* NA: PDP Mobile Hotfix v5 (Offcanvas Singleton Fullscreen + Padding) - BEGIN */
@media (max-width: 575.98px) {
  /* Ziel: Singleton-Offcanvas (Tabs) wirklich fullscreen + weniger „Luft“ links/rechts */
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-offcanvas-singleton {
    --bs-offcanvas-width: 100vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
  }

  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-offcanvas-singleton .offcanvas-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1060 !important;
    background: #fff !important;
  }

  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-offcanvas-singleton .offcanvas-body {
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100dvh - 56px) !important;
  }

  /* Container im Offcanvas nicht zentrieren/max-widthen – aber kleines Padding behalten */
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-offcanvas-singleton .offcanvas-body .container,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-offcanvas-singleton .offcanvas-body .container-main,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-offcanvas-singleton .offcanvas-body .cms-section .container,
  body.is-ctl-product.is-act-index .na-compat-offcanvas.offcanvas.is-offcanvas-singleton .offcanvas-body .cms-section .container-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* NA: PDP Mobile Hotfix v5 (Offcanvas Singleton Fullscreen + Padding) - END */

/* NA: OffcanvasTabs header/close (mobile only) - DISABLED (was affecting non-compat tab offcanvas) */
/* NA-COMPAT-OFFCANVAS-MOBILE-HEADER-CSS
   Scope: nur wenn JS die Klasse .na-compat-offcanvas setzt (also nur Compat-Devices Offcanvas),
   und nur auf Mobile.
*/
@media (max-width: 767.98px) {
  .na-compat-offcanvas.offcanvas {
    width: 100% !important;
    max-width: 100% !important;
  }

  .na-compat-offcanvas .na-compat-offcanvas-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .na-compat-offcanvas .na-compat-offcanvas-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    margin-right: 10px;
  }

  .na-compat-offcanvas .offcanvas-body {
    padding-top: 12px;
  }

  /* Wenn Shopware in diesem Offcanvas noch einen Standard-Header reinlegt, blenden wir ihn aus */
  .na-compat-offcanvas .offcanvas-header:not(.na-compat-offcanvas-header) {
    display: none !important;
  }
}

/* NA: Search Suggest Dropdown Canonical v2 - BEGIN */
/*
  Fix v2:
  - Shopware platziert .search-suggest.js-search-result nicht immer IN der form,
    manchmal als Sibling im .header-search Kontext.
  - Daher: Anchor auf .header-search UND .header-search-form; Dropdown-Selector ohne Form-Pfad.
*/

.header,
.header-main,
.header-main > .container,
.header-row,
.header-search,
.header-search-col,
.header-search-form,
.header-search-input,
.header-search .input-group,
.header-search .form-control {
  overflow: visible !important;
}

/* Positioning context: immer vorhanden */
.header-search {
  position: relative !important;
}

/* Falls Form existiert, ebenfalls Anchor */
.header-search .header-search-form,
.header-search form.header-search-form {
  position: relative !important;
}

/* Dropdown wrapper: greift sowohl im Form als auch als Sibling */
.header-search .search-suggest.js-search-result,
.header-search .header-search-form .search-suggest.js-search-result,
.header-search form.header-search-form .search-suggest.js-search-result {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;

  z-index: 5000 !important;
  overflow: hidden !important;
}

/* UL Container: keine Scrollbox */
.header-search .search-suggest.js-search-result > .search-suggest-container,
.header-search .search-suggest.js-search-result > ul#search-suggest-listbox.search-suggest-container,
.header-search .search-suggest.js-search-result .search-suggest-container {
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  width: 100% !important;

  max-height: none !important;
  overflow: visible !important;
}

/* Sicherheitsnetz gegen alte globale max-height/overflow-Regeln */
.header-search .search-suggest .search-suggest-list,
.header-search .search-suggest .search-suggest-listbox {
  max-height: none !important;
  overflow: visible !important;
}

/* Nur Top 6 Einträge anzeigen (Footer bleibt) */
.header-search .search-suggest.js-search-result .search-suggest-container > li:nth-child(n+7):not(.search-suggest-total):not(.search-suggest-bottom) {
  display: none !important;
}

/* Links: volle Breite + filigrane Typo */
.header-search .search-suggest.js-search-result a.search-suggest-product-link,
.header-search .search-suggest.js-search-result a.search-suggest-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 10px 14px !important;
  width: 100% !important;

  text-decoration: none !important;
  color: inherit !important;

  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

.header-search .search-suggest.js-search-result a.search-suggest-product-link:hover,
.header-search .search-suggest.js-search-result a.search-suggest-product-link:focus,
.header-search .search-suggest.js-search-result a.search-suggest-link:hover,
.header-search .search-suggest.js-search-result a.search-suggest-link:focus {
  background: rgba(0,0,0,.035) !important;
}

/* Bild/Placeholder */
.header-search .search-suggest-product-image-container,
.header-search .search-suggest-entry-image {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 10px !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.03) !important;
}

.header-search .search-suggest-product-image img,
.header-search .search-suggest-entry-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Text: 2 Zeilen */
.header-search .search-suggest-product-name,
.header-search .search-suggest-entry-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;

  font-weight: 450 !important;
  font-size: 13.5px !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Preis rechts */
.header-search .search-suggest-product-price,
.header-search .search-suggest-entry-price {
  margin-left: auto !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* Footer */
.header-search .search-suggest-total,
.header-search .search-suggest-bottom {
  border-top: 1px solid rgba(0,0,0,.08) !important;
  margin-top: 6px !important;
  padding: 10px 14px !important;
  background: #fff !important;
}

.header-search .search-suggest-total a,
.header-search .search-suggest-bottom a {
  font-weight: 500 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.header-search .search-suggest-total a:hover,
.header-search .search-suggest-bottom a:hover {
  text-decoration: underline !important;
}
/* NA: Search Suggest Dropdown Canonical v2 - END */



/* NA: Search Suggest Dropdown Final v1 - BEGIN */
/*
  Ziel:
  - Dropdown sitzt sauber unter dem Suchfeld (nicht fullscreen/zentriert)
  - Panel ist das UL (kein leerer Weißbereich rechts)
  - Row/Cols füllen 100% Breite (Name/Preis korrekt)
*/

/* Ensure dropdown is not clipped by header wrappers */
.header-search,
.header-search .header-search-form,
.header-search .header-search-input,
.header-search .input-group {
  overflow: visible !important;
}

/* Positioning context */
.header-search .header-search-form {
  position: relative !important;
}

/* Wrapper only positions dropdown; no own panel styling */
.header-search .search-suggest.js-search-result {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  z-index: 5000 !important;
  overflow: visible !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* UL is the actual panel */
.header-search .search-suggest.js-search-result > ul.search-suggest-container,
.header-search .search-suggest.js-search-result > ul#search-suggest-listbox.search-suggest-container {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 10px !important;
  list-style: none !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;

  max-height: 420px !important;
  overflow-y: auto !important;

  box-sizing: border-box !important;
}

/* Optional: limit suggestions to 10 (keeps panel tidy) */
.header-search .search-suggest.js-search-result
  > ul.search-suggest-container
  > li.search-suggest-product:nth-of-type(n+11) {
  display: none !important;
}

/* Make every entry fill full width */
.header-search .search-suggest-product,
.header-search .search-suggest-entry {
  width: 100% !important;
  margin: 0 !important;
}

/* Link should fill the row */
.header-search .search-suggest-product-link,
.header-search .search-suggest-entry-link {
  display: block !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-sizing: border-box !important;
}

.header-search .search-suggest-product-link:hover,
.header-search .search-suggest-product-link:focus,
.header-search .search-suggest-entry-link:hover,
.header-search .search-suggest-entry-link:focus {
  background: rgba(0,0,0,.04) !important;
}

/* Row inside link must be full width (prevents left "shrink") */
.header-search .search-suggest-product-link .row,
.header-search .search-suggest-entry-link .row {
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

/* Image container sizing */
.header-search .search-suggest-product-image-container,
.header-search .search-suggest-entry-image-container {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.03) !important;
}

.header-search .search-suggest-product-image,
.header-search .search-suggest-entry-image,
.header-search .search-suggest-product-image img,
.header-search .search-suggest-entry-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Name grows, price stays right */
.header-search .search-suggest-product-name,
.header-search .search-suggest-entry-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.header-search .search-suggest-product-price,
.header-search .search-suggest-entry-price {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
}

/* Footer separator */
.header-search .search-suggest-total,
.header-search .search-suggest-bottom {
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
}
/* NA: Search Suggest Dropdown Final v1 - END */


/* NA: Search Suggest ALIGN Fix v1 - BEGIN */
/* Problem: UL ist absolut positioniert + Wrapper wird riesig -> Inhalt "zu weit links" + leere Fläche rechts */

/* Wrapper darf kein Panel/Scrollbereich sein */
.header-search .search-suggest.js-search-result {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* UL muss das Panel sein und darf NICHT absolut sein */
.header-search .search-suggest.js-search-result > ul.search-suggest-container,
.header-search .search-suggest.js-search-result > ul#search-suggest-listbox.search-suggest-container {
  position: relative !important;     /* overrides absolute */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;

  width: 100% !important;
  max-width: none !important;

  box-sizing: border-box !important;
}
/* NA: Search Suggest ALIGN Fix v1 - END */


/* NA: Search Suggest HEIGHT Fix v1 - BEGIN */
/* Ziel: Scroll/Nutzbarkeit über UL steuern (nicht über den Wrapper) */
.header-search .search-suggest.js-search-result > ul.search-suggest-container,
.header-search .search-suggest.js-search-result > ul#search-suggest-listbox.search-suggest-container {
  max-height: 420px !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 8px !important;
  margin: 0 !important;
  list-style: none !important;
}
/* NA: Search Suggest HEIGHT Fix v1 - END */


/* NA: Search Suggest COMPACT Layout v1 - BEGIN */
/* Ziel: kompakte Zeilen, Bild+Text+Preis in einer Reihe, weniger Leerraum */

.header-search .search-suggest.js-search-result {
  padding: 0 !important;           /* Wrapper selbst ohne Innenabstand */
}

/* UL ist der Scroll-Container */
.header-search .search-suggest.js-search-result > ul.search-suggest-container,
.header-search .search-suggest.js-search-result > ul#search-suggest-listbox.search-suggest-container {
  max-height: 360px !important;
  overflow: auto !important;
  padding: 6px !important;
  margin: 0 !important;
}

/* LI nicht als "Card" rendern */
.header-search li.search-suggest-product,
.header-search li.search-suggest-entry {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Link: kompakt + klare Trennung */
.header-search .search-suggest-product-link,
.header-search .search-suggest-entry-link,
.header-search .search-suggest-entry a,
.header-search .search-suggest-product a {
  display: block !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
}

/* Inneres Layout (Shopware-Markup nutzt .row) */
.header-search .search-suggest-product-link > .row,
.header-search .search-suggest-entry-link > .row,
.header-search .search-suggest-product a > .row,
.header-search .search-suggest-entry a > .row {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Bild links klein und zentriert */
.header-search .search-suggest-product-image-container,
.header-search .search-suggest-entry-image-container {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Text: eine Zeile, nicht nach unten schieben */
.header-search .search-suggest-product-name,
.header-search .search-suggest-entry-name {
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Preis rechts ausrichten */
.header-search .search-suggest-product-price,
.header-search .search-suggest-entry-price {
  margin-left: auto !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
}

/* Hover dezenter */
.header-search li.search-suggest-product:hover,
.header-search li.search-suggest-entry:hover {
  background: rgba(0,0,0,.03) !important;
}

/* Footer unten: kompakter */
.header-search .search-suggest-total,
.header-search .search-suggest-bottom {
  padding: 8px 10px !important;
}
/* NA: Search Suggest COMPACT Layout v1 - END */


/* NA: Search Suggest NO-SCROLL v1 - BEGIN */
/* Ziel: kein unnötiger Scrollbar im Dropdown (Top-6 bleiben sichtbar) */

/* Falls vorher irgendwo Scroll erzwungen wurde: abschalten */
.header-search .search-suggest,
.header-search .search-suggest.js-search-result {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

/* UL ebenfalls ohne Scroll-Container */
.header-search .search-suggest.js-search-result > ul.search-suggest-container,
.header-search .search-suggest.js-search-result > ul#search-suggest-listbox.search-suggest-container {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

/* NA: Search Suggest NO-SCROLL v1 - END */


/* NA: Search Suggest Bottom Row Polish v1 - BEGIN */
/* Ziel: "Alle Suchergebnisse anzeigen" sauber, Icon klein, vertikal zentriert */

.header-search .search-suggest-total,
.header-search .search-suggest-bottom {
  padding: 10px 12px !important;
}

/* Link links: als Flex, damit Icon + Text sauber sitzen */
.header-search .search-suggest-total a,
.header-search .search-suggest-bottom a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.1 !important;
}

/* Shopware Icon (falls vorhanden) kleiner machen */
.header-search .search-suggest-total a .icon,
.header-search .search-suggest-bottom a .icon {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

.header-search .search-suggest-total a .icon svg,
.header-search .search-suggest-bottom a .icon svg {
  width: 14px !important;
  height: 14px !important;
}

/* Falls der Pfeil nicht als .icon kommt, sondern als ::before, dann neutralisieren */
.header-search .search-suggest-total a::before,
.header-search .search-suggest-bottom a::before {
  font-size: 14px !important;
  line-height: 1 !important;
}

/* NA: Search Suggest Bottom Row Polish v1 - END */

/* NA: Search Suggest Bottom Link Align v1 - BEGIN */
/* Ziel: '>' (Icon) und 'Alle Suchergebnisse anzeigen' vertikal mittig ausrichten */
.header-search .search-suggest-total a,
.header-search .search-suggest-bottom a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}

/* Icon-Wrapper in Shopware ist meist .icon (SVG) */
.header-search .search-suggest-total a .icon,
.header-search .search-suggest-bottom a .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.header-search .search-suggest-total a .icon svg,
.header-search .search-suggest-bottom a .icon svg {
  display: block !important;  /* verhindert Baseline-Offset */
}

/* Text-Baseline beruhigen */
.header-search .search-suggest-total a span,
.header-search .search-suggest-bottom a span {
  line-height: 1 !important;
}

/* Falls irgendwo ein Offset gesetzt wurde */
.header-search .search-suggest-total a .icon,
.header-search .search-suggest-bottom a .icon {
  top: 0 !important;
  transform: none !important;
}
/* NA: Search Suggest Bottom Link Align v1 - END */

/* NA: Search Suggest Bottom Link Style v5 (right group, same font, spaced, underlined) - BEGIN */
/* Ziel:
   - Pfeil/Icon entfernen
   - Link + Anzahl als Gruppe rechts
   - gleiche Schrift / Größe, mit Abstand (auch wenn Anzahl als Textnode kommt)
   - beide unterstrichen (ruhig, einheitlich)
*/

.header-search .search-suggest-total a .icon,
.header-search .search-suggest-bottom a .icon {
  display: none !important;
}

.header-search .search-suggest-total,
.header-search .search-suggest-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;   /* alles rechts */
  padding-top: 10px !important;
  padding-bottom: 10px !important;

  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

/* Link einheitlich + Abstand rechts (funktioniert auch, wenn danach nur Text steht) */
.header-search .search-suggest-total a,
.header-search .search-suggest-bottom a {
  display: inline-flex !important;
  align-items: center !important;

  margin-right: 12px !important;          /* <- fixes missing whitespace */
  padding-right: 0 !important;

  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;

  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(0,0,0,.55) !important;
}

/* Fallback: erzwingt mindestens ein NBSP direkt nach dem Link */
.header-search .search-suggest-total a::after,
.header-search .search-suggest-bottom a::after {
  content: "\00a0" !important;
}

/* Anzahl: gleicher Font + ebenfalls unterstrichen (falls es ein Element ist) */
.header-search .search-suggest-total > :last-child,
.header-search .search-suggest-bottom > :last-child {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  white-space: nowrap !important;

  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(0,0,0,.35) !important;
}

/* Hover nur beim Link etwas stärker */
.header-search .search-suggest-total a:hover,
.header-search .search-suggest-bottom a:hover,
.header-search .search-suggest-total a:focus-visible,
.header-search .search-suggest-bottom a:focus-visible {
  text-decoration-color: rgba(0,0,0,.85) !important;
}
/* NA: Search Suggest Bottom Link Style v5 (right group, same font, spaced, underlined) - END */