/* === Crawlermanufaktur custom overrides (added) === */
/* Farben */
:root {
  --ss-header-bg: #5b3a29;      /* braun */
  --ss-header-text: #ffffff;   /* weiß */
  --ss-dropdown-bg: #ffffff;   /* weiß */
  --ss-dropdown-text: #111827; /* dunkel */
  --ss-btn-bg: #e5e7eb;        /* hellgrau */
  --ss-btn-border: #d1d5db;
  --ss-btn-text: #111827;
  --ss-cart-empty-bg: #e5e7eb;
  --ss-cart-full-bg: #9ca3af;  /* dunkler */
  --ss-cart-border: #6b7280;
}

/* Header + Navigation Hintergrund */
#header,
#header .header-nav,
#header .header-top,
#_desktop_top_menu,
#_desktop_top_menu .top-menu {
  background-color: var(--ss-header-bg) !important;
}

/* Header Links (grundsätzlich) */
#header a,
#header .header-nav a,
#header .header-top a {
  color: var(--ss-header-text) !important;
}

/* Desktop Menü: nur Top-Level (data-depth="0") weiß */
#_desktop_top_menu a[data-depth="0"],
#_desktop_top_menu a[data-depth="0"] span {
  color: var(--ss-header-text) !important;
}

/* Dropdown/Submenu Hintergrund */
#_desktop_top_menu .popover,
#_desktop_top_menu .sub-menu,
#_desktop_top_menu .dropdown-menu {
  background-color: var(--ss-dropdown-bg) !important;
}

/* Dropdown/Submenu Text schwarz (data-depth >= 1 + Fallback auf sub-menu Links) */
#_desktop_top_menu a[data-depth="1"],
#_desktop_top_menu a[data-depth="2"],
#_desktop_top_menu a[data-depth="3"],
#_desktop_top_menu a[data-depth="1"] span,
#_desktop_top_menu a[data-depth="2"] span,
#_desktop_top_menu a[data-depth="3"] span,
#_desktop_top_menu .sub-menu a,
#_desktop_top_menu .sub-menu a span,
#_desktop_top_menu .dropdown-menu a,
#_desktop_top_menu .dropdown-menu a span,
#_desktop_top_menu .popover a,
#_desktop_top_menu .popover a span {
  color: var(--ss-dropdown-text) !important;
}

/* Mobile Untermenü ebenfalls schwarz */
#_mobile_top_menu a[data-depth="1"],
#_mobile_top_menu a[data-depth="2"],
#_mobile_top_menu a[data-depth="3"],
#_mobile_top_menu .sub-menu a,
#_mobile_top_menu .sub-menu a span {
  color: var(--ss-dropdown-text) !important;
}

/* Buttons überall hellgrau (inkl. Bootstrap/PS-Varianten) */
.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-info,
.btn-success,
.btn-warning,
.btn-danger,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
button,
input[type="submit"],
input[type="button"],
a.btn {
  background-color: var(--ss-btn-bg) !important;
  border-color: var(--ss-btn-border) !important;
  color: var(--ss-btn-text) !important;
  box-shadow: none !important;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
a.btn:hover,
a.btn:focus {
  background-color: #d1d5db !important;
  border-color: #cbd5e1 !important;
  color: var(--ss-btn-text) !important;
  box-shadow: none !important;
}

/* Warenkorb im Header (Classic): leer = hellgrau, gefüllt = dunkler */
#header .blockcart .cart-preview {
  background-color: var(--ss-cart-empty-bg) !important;
  border-color: var(--ss-btn-border) !important;
  color: var(--ss-cart-text, #111827) !important;
}

#header .blockcart .cart-preview.active,
#header .header-nav .blockcart .cart-preview.active {
  background-color: var(--ss-cart-full-bg) !important;
  border-color: var(--ss-cart-border) !important;
  color: #111827 !important;
}

/* Text/Icon im Warenkorb-Preview immer dunkel (auch wenn active früher blau war) */
#header .blockcart .cart-preview a,
#header .blockcart .cart-preview i,
#header .blockcart .cart-preview .header,
#header .blockcart .cart-preview .cart-products-count {
  color: #111827 !important;
}
/* === /Crawlermanufaktur custom overrides === */

/* =========================================
   FIX: Cart-Button bleibt blau wenn gefüllt
   ========================================= */

/* Gefüllter Warenkorb (active) – stärker überschreiben */
#header .header-nav #_desktop_cart .cart-preview.active,
#header .header-nav #_mobile_cart .cart-preview.active,
#header .header-nav .blockcart .cart-preview.active,
#header #_desktop_cart .cart-preview.active,
#header #_mobile_cart .cart-preview.active,
#header .blockcart .cart-preview.active {
  background-color: #6b7280 !important;   /* dunkleres Grau */
  border-color: #4b5563 !important;
  color: #111827 !important;
}

/* Text/Icon/Counter im aktiven Warenkorb */
#header .blockcart .cart-preview.active a,
#header .blockcart .cart-preview.active i,
#header .blockcart .cart-preview.active .header,
#header .blockcart .cart-preview.active .cart-products-count {
  color: #111827 !important;
}

/* =========================================
   FIX: Links werden beim Hover hellblau
   -> alles Hover dunkelgrau
   ========================================= */

/* Normale Links (Buttons ausgenommen) */
a:not(.btn):hover,
a:not(.btn):focus {
  color: #374151 !important; /* dunkelgrau */
}

/* Falls irgendwo noch 'link' Klassen genutzt werden */
.link:hover,
.link:focus {
  color: #374151 !important;
}

/* Optional: Menü-Links Hover (Top-Level) ebenfalls dunkelgrau statt hellblau */
#_desktop_top_menu a[data-depth="0"]:hover {
  color: #e5e7eb !important; /* bleibt gut sichtbar auf braun/dunkel */
}

/* Preise (Classic Theme) in Braun */
.price,
.product-price,
.current-price,
.product-price-and-shipping .price,
.product-price-and-shipping .regular-price,
.product-prices .current-price,
.product-prices .price,
#products .product-price-and-shipping,
#products .product-price-and-shipping .price {
  color: #5b3a29 !important; /* braun wie Header */
}

/* =========================================
   ACTIVE STATES (Tabs, Auswahl, Bilder) = dunkelgrau
   HOVER = hellgrau
   ========================================= */

/* Tabs (Produkt-Tabs, CMS-Tabs etc.) */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.tabs .nav-link.active {
  color: #374151 !important;              /* dunkelgrau */
  border-color: #4b5563 !important;
}

.nav-tabs .nav-link:hover,
.tabs .nav-link:hover {
  background-color: #e5e7eb !important;   /* hellgrau */
  color: #111827 !important;
}

/* Aktive/ausgewählte Thumbnail-Bilder (Produktbilder) */
.product-images .thumb.selected,
.product-images .thumb.active,
.product-images .js-thumb.selected,
.product-images .js-thumb.active,
.product-images .thumb-container .thumb.selected,
.product-images .thumb-container .thumb.active {
  border-color: #4b5563 !important;       /* dunkelgrau */
  box-shadow: none !important;
}

.product-images .thumb:hover,
.product-images .js-thumb:hover,
.product-images .thumb-container .thumb:hover {
  border-color: #d1d5db !important;       /* hellgrau */
}

/* Pagination / aktive Filter / aktive Elemente (häufige Classic-Selektoren) */
.pagination .page-item.active .page-link,
.page-item.active .page-link,
.facet-label.active,
li.current a {
  background-color: #6b7280 !important;   /* dunkleres grau */
  border-color: #4b5563 !important;
  color: #ffffff !important;
}

.pagination .page-link:hover {
  background-color: #e5e7eb !important;   /* hellgrau */
  border-color: #d1d5db !important;
  color: #111827 !important;
}

/* =========================================
   Social Media Links/Buttons (Footer/Sharing)
   ========================================= */
.social-sharing a,
.social-sharing a:visited,
#footer .social-links a,
.footer-container .social-links a {
  color: #374151 !important;              /* dunkelgrau */
  border-color: #d1d5db !important;
}

.social-sharing a:hover,
#footer .social-links a:hover,
.footer-container .social-links a:hover {
  color: #111827 !important;
  background-color: #e5e7eb !important;   /* hellgrau */
}


/* =========================================
   Tabs: Hover-Unterstrich/Border nicht hellblau, sondern hellgrau
   ========================================= */

/* Classic Theme Tabs (Beschreibung/Details etc.) */
.nav-tabs .nav-link,
.product-tabs .nav-link {
  border-bottom-color: transparent !important;
}

/* Hover: die Linie/Border unten hellgrau */
.nav-tabs .nav-link:hover,
.product-tabs .nav-link:hover {
  border-color: transparent transparent #d1d5db transparent !important; /* bottom = hellgrau */
}

/* Active: Linie/Border unten dunkelgrau */
.nav-tabs .nav-link.active,
.product-tabs .nav-link.active {
  border-color: transparent transparent #4b5563 transparent !important; /* bottom = dunkelgrau */
}

/* =========================================
   Links allgemein: kein hellblau mehr (auch mailto/tel)
   ========================================= */

a,
a:visited {
  color: inherit; /* lässt deine bestehenden Farben wirken */
}

/* Hover/Focus: dunkelgrau */
a:hover,
a:focus,
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover {
  color: #374151 !important;
}

/* Optional: wenn irgendwo noch ein Rahmen/Outline hellblau ist */
a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================
   Social Media Buttons: Hover nicht hellblau
   ========================================= */
.social-sharing a:hover,
.social-sharing a:focus,
#footer .social-links a:hover,
#footer .social-links a:focus,
.footer-container .social-links a:hover,
.footer-container .social-links a:focus {
  color: #111827 !important;
  background-color: #e5e7eb !important;  /* hellgrau */
  border-color: #d1d5db !important;
  box-shadow: none !important;
}

/* Falls es Icon-Fonts/SVGs sind */
.social-sharing a:hover i,
#footer .social-links a:hover i,
.footer-container .social-links a:hover i,
.social-sharing a:hover svg,
#footer .social-links a:hover svg,
.footer-container .social-links a:hover svg {
  color: #111827 !important;
  fill: #111827 !important;
}

/* =========================================
   Produkt-Badges (z.B. NEU) hellgrau
   ========================================= */
#products .product-miniature .product-flags li,
.product-flags li,
.product-flag {
  background-color: #e5e7eb !important;  /* hellgrau */
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
}

/* =========================================
   Language selector (Header) – Classic Theme
   Text schwarz, Hover hellgrau, kein blau
   ========================================= */

/* Toggle (aktueller Sprach-Button oben) */
#_desktop_language_selector .expand-more,
#_desktop_language_selector button,
#_desktop_language_selector a {
  color: #111827 !important;              /* schwarz */
}

/* Dropdown Menü Hintergrund */
#_desktop_language_selector .dropdown-menu {
  background-color: #ffffff !important;
}

/* Einträge im Dropdown */
#_desktop_language_selector .dropdown-item {
  color: #111827 !important;              /* schwarz */
}

/* Hover im Dropdown */
#_desktop_language_selector .dropdown-item:hover,
#_desktop_language_selector .dropdown-item:focus {
  background-color: #e5e7eb !important;   /* hellgrau */
  color: #111827 !important;
}

/* Blaues Focus/Shadow entfernen (Bootstrap) */
#_desktop_language_selector .dropdown-toggle:focus,
#_desktop_language_selector .dropdown-item:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================
   FIX: Sprachauswahl (Header) – Text schwarz + sichtbar
   ========================================= */

/* Toggle (aktuelle Sprache) */
#header #_desktop_language_selector,
#header #_desktop_language_selector a,
#header #_desktop_language_selector .expand-more,
#header #_desktop_language_selector button,
#header #_desktop_language_selector .dropdown-toggle {
  color: #111827 !important; /* schwarz */
}

/* Dropdown Hintergrund */
#header #_desktop_language_selector .dropdown-menu {
  background-color: #ffffff !important;
}

/* Dropdown Links (auch wenn nicht "dropdown-item" genutzt wird) */
#header #_desktop_language_selector .dropdown-menu a,
#header #_desktop_language_selector .dropdown-menu .dropdown-item,
#header #_desktop_language_selector .dropdown-menu li a {
  color: #111827 !important;           /* schwarz -> immer sichtbar */
  background-color: transparent !important;
  opacity: 1 !important;
}

/* Hover im Dropdown */
#header #_desktop_language_selector .dropdown-menu a:hover,
#header #_desktop_language_selector .dropdown-menu .dropdown-item:hover,
#header #_desktop_language_selector .dropdown-menu li a:hover {
  background-color: #e5e7eb !important; /* hellgrau */
  color: #111827 !important;
}

/* Blaues Focus/Shadow entfernen */
#header #_desktop_language_selector .dropdown-toggle:focus,
#header #_desktop_language_selector .dropdown-menu a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================
   Varianten-Auswahl (Select) – kein blau mehr
   ========================================= */

/* Select (Dropdown) */
.product-variants select.form-control:hover,
.product-variants select.form-control:focus,
.product-variants .form-control:hover,
.product-variants .form-control:focus,
.form-control:hover,
.form-control:focus {
  border-color: #9ca3af !important;      /* grau */
  box-shadow: 0 0 0 0.2rem #e5e7eb !important; /* hellgrauer "Focus-Ring" */
  outline: none !important;
}

/* Auch für custom-select (manche Classic-Setups) */
.custom-select:hover,
.custom-select:focus {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 0.2rem #e5e7eb !important;
  outline: none !important;
}

/* Radio/Checkbox Varianten (falls genutzt) */
.product-variants input[type="radio"]:focus,
.product-variants input[type="checkbox"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem #e5e7eb !important;
}

/* =========================================
   Newsletter Input (Footer/Header) – kein blaues Hover/Focus mehr
   ========================================= */
.block_newsletter input[type="email"],
.block_newsletter input.form-control,
.block_newsletter .form-control {
  border-color: #d1d5db !important;
}

/* Hover/Focus Ring grau statt blau */
.block_newsletter input[type="email"]:hover,
.block_newsletter input[type="email"]:focus,
.block_newsletter input.form-control:hover,
.block_newsletter input.form-control:focus,
.block_newsletter .form-control:hover,
.block_newsletter .form-control:focus {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 0.2rem #e5e7eb !important;
  outline: none !important;
}

/* =========================================
   Mobile Menü (Classic): Text schwarz, Hover hellgrau
   ========================================= */

/* gesamtes Mobile-Menü */
#_mobile_top_menu,
#_mobile_top_menu a,
#_mobile_top_menu a span {
  color: #111827 !important;            /* schwarz */
}

/* Hintergrund (falls nötig) */
#_mobile_top_menu {
  background-color: #ffffff !important;
}

/* Hover / aktive Auswahl */
#_mobile_top_menu a:hover,
#_mobile_top_menu a:focus {
  background-color: #e5e7eb !important; /* hellgrau */
  color: #111827 !important;
}

/* Falls das Menü in .mobile-menu steckt (je nach Classic-Version) */
.mobile-menu,
.mobile-menu a,
.mobile-menu a span {
  color: #111827 !important;
}

/* =========================================
   Classic Theme OFFCANVAS Mobile Menu Fix
   (Hamburger-Menü) – Text immer sichtbar
   ========================================= */

/* Offcanvas-Container Hintergrund */
#mobile_top_menu_wrapper,
#mobile_top_menu_wrapper .top-menu {
  background-color: #ffffff !important;
}

/* ALLE Links im Mobile-Menü schwarz (auch spans) */
#mobile_top_menu_wrapper a,
#mobile_top_menu_wrapper a span,
#mobile_top_menu_wrapper .top-menu a,
#mobile_top_menu_wrapper .top-menu a span,
#mobile_top_menu_wrapper .sub-menu a,
#mobile_top_menu_wrapper .sub-menu a span {
  color: #111827 !important;   /* schwarz */
  opacity: 1 !important;
}

/* Hover/Active im Mobile-Menü hellgrau */
#mobile_top_menu_wrapper a:hover,
#mobile_top_menu_wrapper a:focus,
#mobile_top_menu_wrapper a:active,
#mobile_top_menu_wrapper .top-menu a:hover,
#mobile_top_menu_wrapper .top-menu a:focus,
#mobile_top_menu_wrapper .top-menu a:active {
  background-color: #e5e7eb !important; /* hellgrau */
  color: #111827 !important;
}

/* Falls Bootstrap/Theme einen blauen Focus-Ring setzt */
#mobile_top_menu_wrapper a:focus {
  outline: none !important;
  box-shadow: none !important;
}