/** Shopify CDN: Minification failed

Line 24:0 All "@import" rules must come first

**/
/* ===========================================================
   🟨 Amazon-Look Theme Styles für Shopify Empire (aktualisiert)
   =========================================================== */

/* === Grundfarben === */
:root {
  --amazon-blue: #232F3E;
  --amazon-blue-dark: #131A22;
  --amazon-yellow: #FFD814;
  --amazon-yellow-hover: #F7CA00;
  --ink: #111111;
  --ink-strong: #000000;
  --link: #007185;
  --link-hover: #C7511F;
  --border: #EAEDED;
  --bg: #FFFFFF;
}

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

.small-promo-content_heading {
  font-family: 'Lato', sans-serif !important;
  color: #FFFFFF !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.small-promo-content_heading:hover {
  color: #FFD814 !important;
  transition: color 0.2s ease-in-out;
}


/* === Basis === */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* === Header (Amazon.de-Stil) === */
.site-header {
  background: var(--amazon-blue) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--amazon-blue-dark);
}
.site-header a {
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
}
.site-header a:hover,
.site-header a:focus {
  color: var(--amazon-yellow) !important;
}

/* Suche im Header optisch zentrieren (ohne DOM-Moves) */
.site-header .header__search,
.site-header form[action*="search"] {
  max-width: 980px;
  margin: 0 auto;
  flex: 1 1 auto;
}

/* === Buttons === */
button, .btn, .button, .button--primary, .shopify-payment-button__button {
  background: var(--amazon-yellow) !important;
  color: var(--ink) !important;
  border: 1px solid var(--amazon-yellow-hover) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  transition: all .15s ease-in-out;
}
button:hover, .btn:hover, .button:hover, .button--primary:hover,
.shopify-payment-button__button:hover {
  background: var(--amazon-yellow-hover) !important;
}

/* === Produktkarten === */
.product-card, .grid__item .card, .product-grid__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.price, .product-price, .price__current { font-weight: 800; color: var(--ink); }

/* === Footer === */
.site-footer {
  background: var(--amazon-blue-dark) !important;
  color: #fff;
  padding: 30px 0;
}
.site-footer a { color: #ddd; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* ===========================================================
   📂 Mega-Menü / Dropdown – Amazon.de-Stil + Lesbarkeits-FIX
   =========================================================== */

/* 1) Struktur/Hintergrund */
.site-nav__dropdown,
.mega-menu,
.mega-menu__content {
  background-color: #ffffff !important;   /* Weißes Dropdown */
  border: 1px solid var(--border) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border-radius: 6px;
  padding: 12px 20px;
  min-width: 260px;
  animation: fadeInMega .15s ease-in-out;
}

/* Sanftes Einblenden */
@keyframes fadeInMega {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2) Linkfarben im Dropdown (sichtbar auf weiß) */
.site-nav__dropdown a,
.site-nav__dropdown .site-nav__link,
.mega-menu__link,
.mega-menu__content a {
  color: var(--ink) !important;       /* #111 */
  font-size: 15px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 4px;
  display: block;
  text-decoration: none;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

/* 3) Kinder-Elemente erben die Textfarbe (verhindert weiße spans/icons) */
.site-nav__dropdown .site-nav__link *,
.mega-menu__link *,
.mega-menu__content a * {
  color: inherit !important;
}

/* 4) Hover/Fokus – klarer Kontrast */
.site-nav__dropdown .site-nav__link:hover,
.mega-menu__link:hover,
.mega-menu__content a:hover,
.site-nav__dropdown .site-nav__link:focus,
.mega-menu__link:focus,
.mega-menu__content a:focus {
  background-color: var(--border) !important; /* #EAEDED */
  color: var(--ink-strong) !important;        /* #000 */
}

/* 5) Überschriften im Megamenü */
.mega-menu__title,
.mega-menu__column-title {
  color: var(--amazon-blue) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  margin: 6px 0 8px;
}

/* 6) Spalten & Listen */
.mega-menu__column { padding: 0 16px; border-right: 1px solid var(--border); }
.mega-menu__column:last-child { border-right: none; }
.mega-menu__list { margin: 0; padding: 0; list-style: none; }
.mega-menu__list li { margin-bottom: 4px; }

/* 7) Dropdown-Stabilität gegen Flackern */
.mega-menu, .site-nav__dropdown {
  z-index: 60;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

/* 8) Unter-Untermenüs (3. Ebene) */
.site-nav__dropdown .site-nav__dropdown,
.mega-menu__dropdown {
  background-color: #ffffff !important;
}
.site-nav__dropdown .site-nav__dropdown a {
  color: var(--ink) !important;
}

/* ===========================================================
   🔝 Top-Level Menü im dunklen Header
   =========================================================== */
.site-header .site-nav > li > a {
  color: #ffffff !important;                          /* weißer Text im Header */
}
.site-header .site-nav > li:hover > a,
.site-header .site-nav > li:focus-within > a {
  color: var(--amazon-yellow) !important;             /* gelber Hover */
}

/* Falls Empire den aktiven/expandierten Punkt umlackiert */
.site-header .site-nav > li.current > a,
.site-header .site-nav > li.active > a,
.site-header .site-nav > li[aria-expanded="true"] > a,
.site-header .site-nav > li.nav-hover > a {
  color: var(--amazon-yellow) !important;
}

/* ===========================================================
   📱 Mobile Navigation
   =========================================================== */
@media (max-width: 768px) {
  .mega-menu, .site-nav__dropdown {
    background-color: #ffffff !important;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  .mega-menu__link, .site-nav__dropdown .site-nav__link {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
  }
}

/* ===========================================================
   🌐 Sonstiges/Allgemein
   =========================================================== */
a { color: var(--link); }
a:hover { color: var(--link-hover); text-decoration: underline; }
hr { border-color: var(--border); }
.container { max-width: 1400px; margin: 0 auto; }
img { border-radius: 4px; }
/* ====== Empire/Pixel-Union: gezielter Menü-Fix (navmenu-*) ====== */

/* 1) TOP-LEVEL-LINK im dunklen Header */
.site-header .navmenu-link.navmenu-link-depth-1 {
  color: #ffffff !important; /* Weiß im Header */
}

/* Hover/aktiv/geöffnet: gelb wie Amazon */
.site-header li:hover > .navmenu-link.navmenu-link-depth-1,
.site-header .navmenu-link.navmenu-link-depth-1:hover,
.site-header .navmenu-link.navmenu-link-depth-1:focus,
.site-header .navmenu-link.navmenu-link-parent[aria-expanded="true"],
.site-header .navmenu-item.is-open > .navmenu-link.navmenu-link-depth-1,
.site-header .navmenu-item.is-active > .navmenu-link.navmenu-link-depth-1 {
  color: #FFD814 !important; /* Amazon-Gelb */
}

/* 2) DROPDOWN-PANELS auf weiß (alle Empire-Varianten abdecken) */
.site-header .navmenu-meganav,
.site-header .navmenu-submenu,
.site-header .nav-dropdown,
.site-header .navmenu-children,
.site-header .mega-menu,
.site-header .site-nav__dropdown {
  background-color: #ffffff !important;
  border: 1px solid #EAEDED;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  border-radius: 6px;
  padding: 12px 16px; /* je nach Theme ggf. anpassen */
  z-index: 60;
}

/* 3) LINKS im Dropdown: dunkel, gut lesbar */
.site-header .navmenu-meganav .navmenu-link,
.site-header .navmenu-submenu .navmenu-link,
.site-header .nav-dropdown a,
.site-header .navmenu-children a,
.site-header .mega-menu a,
.site-header .site-nav__dropdown a {
  color: #111111 !important;
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  text-decoration: none;
}

/* Kinder erben die Farbe (verhindert weiße <span>/<svg>) */
.site-header .navmenu-meganav .navmenu-link *,
.site-header .navmenu-submenu .navmenu-link *,
.site-header .nav-dropdown a *,
.site-header .navmenu-children a *,
.site-header .mega-menu a *,
.site-header .site-nav__dropdown a * {
  color: inherit !important;
  fill: currentColor !important; /* Icons/SVGs */
}

/* 4) HOVER im Dropdown: hellgrauer Hintergrund, schwarzer Text */
.site-header .navmenu-meganav .navmenu-link:hover,
.site-header .navmenu-submenu .navmenu-link:hover,
.site-header .nav-dropdown a:hover,
.site-header .navmenu-children a:hover,
.site-header .mega-menu a:hover,
.site-header .site-nav__dropdown a:hover {
  background-color: #EAEDED !important;
  color: #000000 !important;
}

/* 5) Spalten-/Titel-Stil (Amazon-Anmutung) – optional */
.site-header .navmenu-meganav .navmenu-title,
.site-header .navmenu-submenu .navmenu-title,
.site-header .mega-menu__title,
.site-header .mega-menu__column-title {
  color: #232F3E !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  margin: 6px 0 8px;
}

/* 6) Anti-Flicker (Rendering-Stabilität) */
.site-header .navmenu-meganav,
.site-header .navmenu-submenu,
.site-header .nav-dropdown,
.site-header .navmenu-children,
.site-header .mega-menu,
.site-header .site-nav__dropdown {
  backface-visibility: hidden;
  will-change: opacity, transform;
}

/* 7) Mobile – schlicht und lesbar */
@media (max-width: 768px) {
  .site-header .navmenu-meganav,
  .site-header .navmenu-submenu,
  .site-header .nav-dropdown,
  .site-header .navmenu-children {
    background-color: #ffffff !important;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .site-header .navmenu-meganav .navmenu-link,
  .site-header .navmenu-submenu .navmenu-link,
  .site-header .nav-dropdown a,
  .site-header .navmenu-children a {
    padding: 12px 16px;
    border-bottom: 1px solid #EAEDED;
  }
}
/************************************************************
  🔧 Menü-Feinschliff: Hover, Aktiv-Zustand, Fokus, Smoothness
  für Empire/Pixel-Union (navmenu-*)
*************************************************************/

/* ----------------------------------------------------------
   1) Top-Level: eleganter Hover (Amazon-Feeling)
---------------------------------------------------------- */
.site-header .navmenu-link.navmenu-link-depth-1 {
  position: relative;
  color: #FFFFFF !important;                 /* Lesbar im dunklen Header */
  transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

/* Gelber Hover + dezente Unterstreichung (Pseudo-Element) */
.site-header .navmenu-link.navmenu-link-depth-1:hover,
.site-header li:hover > .navmenu-link.navmenu-link-depth-1,
.site-header .navmenu-link.navmenu-link-depth-1:focus {
  color: #FFD814 !important;                 /* Amazon-Gelb */
}

.site-header .navmenu-link.navmenu-link-depth-1::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -6px;                              /* etwas unter dem Link */
  height: 2px;
  background-color: transparent;
  transition: background-color .15s ease-in-out;
}

.site-header .navmenu-link.navmenu-link-depth-1:hover::after,
.site-header li:hover > .navmenu-link.navmenu-link-depth-1::after,
.site-header .navmenu-link.navmenu-link-depth-1:focus::after {
  background-color: #FFD814;                 /* gelbe Linie beim Hover */
}

/* Optional: ganz leichtes Header-Hover-Highlight */
.site-header li:hover > .navmenu-link.navmenu-link-depth-1 {
  background-color: rgba(255, 255, 255, 0.06); /* sehr subtil */
  border-radius: 4px;
}

/* ----------------------------------------------------------
   2) Aktiver/aktueller Menüpunkt klar markieren
---------------------------------------------------------- */
.site-header .navmenu-item.is-active > .navmenu-link.navmenu-link-depth-1,
.site-header .navmenu-item.current > .navmenu-link.navmenu-link-depth-1,
.site-header .navmenu-link[aria-current="page"].navmenu-link-depth-1,
.site-header .navmenu-link.navmenu-link-parent[aria-expanded="true"] {
  color: #FFD814 !important;                 /* gelb, wie bei Amazon */
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.site-header .navmenu-item.is-active > .navmenu-link.navmenu-link-depth-1::after,
.site-header .navmenu-item.current > .navmenu-link.navmenu-link-depth-1::after,
.site-header .navmenu-link[aria-current="page"].navmenu-link-depth-1::after,
.site-header .navmenu-link.navmenu-link-parent[aria-expanded="true"]::after {
  background-color: #FFD814;
}

/* ----------------------------------------------------------
   3) Dropdown: glattes Ein-/Ausblenden (weiß/dunkler Text hast du schon)
---------------------------------------------------------- */
.site-header .navmenu-meganav,
.site-header .navmenu-submenu,
.site-header .nav-dropdown,
.site-header .navmenu-children {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease;  /* kurz & knackig */
  will-change: opacity, transform;
}

/* sichtbar, wenn geöffnet */
.site-header .navmenu-item:hover > .navmenu-meganav,
.site-header .navmenu-item:hover > .navmenu-submenu,
.site-header .navmenu-item:hover > .nav-dropdown,
.site-header .navmenu-item:hover > .navmenu-children,
.site-header .navmenu-item.is-open > .navmenu-meganav,
.site-header .navmenu-item.is-open > .navmenu-submenu,
.site-header .navmenu-item.is-open > .nav-dropdown,
.site-header .navmenu-item.is-open > .navmenu-children {
  opacity: 1;
  transform: translateY(0);
}

/* Hover in Dropdown (Farben hast du schon gesetzt; hier nur „clickable“ Feedback) */
.site-header .navmenu-meganav .navmenu-link,
.site-header .navmenu-submenu .navmenu-link {
  transition: background-color .12s ease, color .12s ease;
}

/* ----------------------------------------------------------
   4) Tastatur-Fokus (Accessibility)
---------------------------------------------------------- */
.site-header .navmenu-link:focus-visible {
  outline: 2px solid #FFD814;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----------------------------------------------------------
   5) Performance & Barrierearme Animation
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-header .navmenu-meganav,
  .site-header .navmenu-submenu,
  .site-header .nav-dropdown,
  .site-header .navmenu-children,
  .site-header .navmenu-link.navmenu-link-depth-1::after {
    transition: none !important;
  }
}

/* ----------------------------------------------------------
   6) Mobile: saubere Tap-Ziele
---------------------------------------------------------- */
@media (max-width: 768px) {
  .site-header .navmenu-meganav .navmenu-link,
  .site-header .navmenu-submenu .navmenu-link,
  .site-header .navmenu-link.navmenu-link-depth-1 {
    padding: 12px 16px;
  }
}
/* --- Telefon-Icon (Header) Amazon Style --- */
.icon-cell-phone {
  color: #FFFFFF !important;       /* Weiß auf dunklem Hintergrund */
  fill: #FFFFFF !important;        /* SVG-Icons werden gefüllt */
  transition: all 0.3s ease-in-out;
}

/* Hover-Effekt in Amazon-Gelb */
.icon-cell-phone:hover {
  color: #FFD814 !important;       /* Amazon-Gelb beim Überfahren */
  fill: #FFD814 !important;
}
/* --- Kleine Werbeaktion Desktop-Version (Amazon-Style) --- */
.small-promo-content--desktop {
  color: #FFFFFF !important;         /* Weißer Text */
  fill: #FFFFFF !important;          /* Für SVG-Icons */
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color 0.3s ease-in-out;
}

/* Untertitel oder sekundäre Texte in hellgrau */
.small-promo-content--desktop .small-promo-content_subheading {
  color: #EAEDED !important;         /* Hellgrau für weniger Kontrast */
}

/* Hover-Effekt in Amazon-Gelb */
.small-promo-content--desktop:hover {
  color: #FFD814 !important;         /* Gelb beim Hover */
  fill: #FFD814 !important;
}