/* ========================================
   NOBEL-HOBEL MODERN CSS UPGRADE
   Version: 2.5 - HEADER ULTRA FIX: Aggressive Lösung
   Datum: 21.08.2025
   ======================================== */

/* QuickView komplett deaktiviert - 2025-11-14 */
.quickview,
div.quickview,
.open-mp-quickview {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* AGGRESSIVER FIX: Doppeltes "Mein Konto" Problem */
/* Verstecke ALLE topbar_inner Elemente außer dem letzten */
.topbar_inner:not(:last-of-type) {
    display: none !important;
}

/* Verstecke alle Registrierung-Links überall */
a[href*="register"],
.mobile-menu a[href*="register"],
#mobmenu a[href*="register"] {
    display: none !important;
}

/* Verstecke doppelten Text in topbar */
.topbar_inner *:contains("Mein Konto"):first-child {
    display: none !important;
}

/* ODER: Spezifischer - verstecke VQMod-topbar falls noch vorhanden */
.topbar_inner[style*="float: left"] {
    display: none !important;
}

/* ALTERNATIVE: Verstecke alle topbar_inner und zeige nur das #top-links */
.topbar_inner {
    font-size: 0 !important;
    line-height: 0 !important;
}

.topbar_inner #top-links,
.topbar_inner #wrapselector,
.topbar_inner .social {
    font-size: 0.8rem !important;
    line-height: normal !important;
    display: block !important;
}

/* Besseres "Mein Konto" Dropdown Styling - nur das richtige anzeigen */
#top-links {
    display: block !important;
}

#top-links .account-link-large .account-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    display: inline !important;
}

/* Dropdown-Funktionalität verbessern */
#top-links .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

#top-links .dropdown:hover .dropdown-menu,
#top-links .dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

/* Verstecke mobile Registrierung */
#mobmenu .login-options .btn-link[href*="register"] {
    display: none !important;
}

/* Sticky Header - JavaScript handles position:fixed on scroll */
/* Targets .page-header which contains ribbon, search, icons, and navigation */

/* Default state when not scrolled */
.page-header {
    position: relative;
    z-index: 1000;
    background: white;
    transition: box-shadow 0.2s ease;
}

/* Fixed state applied by JavaScript when scrolled */
.page-header[style*="fixed"] {
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* Body class added when header is fixed - can be used for spacing adjustments */
body.header-fixed {
    /* Additional styles if needed */
}

/* Ensure dropdowns appear above everything when header is fixed */
.page-header .dropdown-menu,
.page-header .mega-dropdown,
#header .dropdown-menu,
#header .mega-dropdown,
.mf-navigation-bar .dropdown-menu,
.mf-navigation-bar .mega-dropdown {
    z-index: 10001 !important;
}

/* Page wrapper - normal positioning */
.page-wrapper {
    position: relative;
    z-index: auto;
}

/* Bestehende Styles behalten */
.chatstack-olle {
    position: fixed;
    bottom: -30px;
    z-index: 2238473289430 !important;
}

#kundenauswahl {
    z-index: 90000;
}

#kundenauswahl .modal-footer {
    text-align: left;
}

/* ========================================================================
   FIX: Bootstrap Modals müssen über dem fixed Header erscheinen
   Header hat z-index: 20000, Bootstrap default ist nur 1050
   ======================================================================== */
.modal {
    z-index: 100000 !important;
}
.modal-backdrop {
    z-index: 99999 !important;
}
.modal-dialog {
    z-index: 100001 !important;
}

/* Fix: Header z-index senken wenn Modal offen ist */
body.modal-open .page-header,
body.modal-open header,
body.modal-open #header,
body.modal-open .navbar-fixed-top,
body.modal-open [style*="position: fixed"] {
    z-index: 99998 !important;
}

/* Sicherstellen dass Modal-Backdrop über allem liegt */
body.modal-open .modal-backdrop {
    z-index: 99999 !important;
}

body.modal-open .modal {
    z-index: 100000 !important;
}

.navbar-fixed-top #logo img {
    max-width: 42px;
}

header.navbar-fixed-top .searchbox-regular .search-trigger {
    visibility: hidden;
}

.navbar-nav > li {
    max-height: 40px;
    font-weight: bold;
    color: #0857bb !important;
}

#content-wrapper .container-inner {
    background: none !important;
    border: none !important;
}

@media (min-width: 992px) { 
    .navbar-nav {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

.navbar-fixed-top .container .row {
    display: flex;
}

#header {
    z-index: 20000 !important;
}

/* ========================================
   MODERNE HEADER VERBESSERUNGEN - MITBEWERBER-STIL
   Version 3.0 - Logo Links, Professionelle Suche, Warenkorb-Icon
   ======================================== */

/* TOPBAR ENTFERNT - Account-Dropdown jetzt in Header integriert */
/* Alte topbar Styles sind nicht mehr nötig */

/* Account Link - Immer "Mein Konto" anzeigen */
#top-links .myaccount {
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center;
    gap: 5px;
}

#top-links .myaccount .account-text {
    display: inline !important;
}

/* Account Text - BEREINIGTES FIX für doppeltes Mein Konto */
/* Entferne ::after content und verstecke doppelten Text anders */

/* Verstecke den ersten doppelten Mein Konto Text */
.topbar_inner a[href*="account"]:first-child {
    font-size: 0 !important;
}

.topbar_inner a[href*="account"]:first-child i {
    font-size: 0.8rem !important;
}

/* Oder verstecke alle topbar account links außer dem letzten */
.topbar_inner a[href*="account"]:not(:last-of-type) {
    display: none !important;
}

/* Account-Link sauberes Styling */
#top-links .myaccount {
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center;
    gap: 5px;
    text-decoration: none !important;
}

#top-links .myaccount:hover {
    color: #0857bb !important;
}

/* Normaler Text - OHNE ::after injection */
#top-links .myaccount span:not(.caret) {
    display: inline !important;
}

/* NEUE TOP-LINKS SEKTION - Integriert in Header rightbox */
#top-links {
    display: inline-block !important;
    margin-right: 10px !important;
    line-height: 1.4;
    vertical-align: middle;
}

/* Icon größer machen */
#top-links .myaccount i.fa {
    font-size: 16px !important;
    margin-right: 6px !important;
}

/* Topbar entfernt - Styles nicht mehr nötig */

#top-links .myaccount {
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 15px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    min-height: 32px !important;
}

#top-links .myaccount:hover {
    color: #0857bb !important;
    background: rgba(8, 87, 187, 0.1) !important;
}

#top-links .dropdown-menu {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    min-width: 180px !important;
    padding: 8px 0 !important;
    margin-top: 5px !important;
}

#top-links .dropdown-menu li a {
    color: #333 !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

#top-links .dropdown-menu li a:hover {
    background: #f5f5f5 !important;
    color: #0857bb !important;
}

/* Registrierung aus Dropdown entfernen */
#top-links .dropdown-menu li a[href*="register"] {
    display: none !important;
}

/* WhatsApp Button verstecken */
.fa-whatsapp,
a[href*="whatsapp"],
a[href*="wa.me"],
.social .fa-whatsapp {
    display: none !important;
}

/* Alle Register-Links verstecken */
a[href*="register"],
.mobile-menu a[href*="register"],
#mobmenu a[href*="register"],
.login-options a[href*="register"] {
    display: none !important;
}

/* 2. Haupt-Header - Saubere Struktur */
#header {
    background: #ffffff !important;
    border-bottom: 2px solid #0857bb !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    z-index: 20000 !important;
    padding: 0 !important;
}

.header_inner {
    padding: 15px 0 !important;
}

/* Layout-Anpassungen - FORCIERT Logo links, Suchfeld zentral vergrößert */
/* Überschreibt alle Theme-Varianten (center/left logo) */
.header_inner .row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

/* Logo Bereich - IMMER links, egal welche Theme-Einstellung */
.header_inner .row #logo,
.header_inner .row .col-sm-3:first-child,
.header_inner .centerlogo #logo,
.header_inner .leftlogo #logo {
    flex: 0 0 18% !important;
    max-width: 18% !important;
    order: 1 !important;
    /* Bootstrap Push/Pull zurücksetzen */
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
}

/* Mittlerer Bereich - Vergrößert für Suchfeld */
.header_inner .row .leftbox,
.header_inner .row .col-sm-6,
.header_inner .centerlogo .leftbox,
.header_inner .leftlogo .leftbox {
    flex: 0 0 58% !important;
    max-width: 58% !important;
    order: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    /* Bootstrap Push/Pull zurücksetzen */
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
}

/* Rechter Bereich - Warenkorb und Funktionen NEBENEINANDER */
.header_inner .row .rightbox,
.header_inner .row .col-sm-3:last-child,
.header_inner .centerlogo .rightbox,
.header_inner .leftlogo .rightbox {
    flex: 0 0 24% !important;
    max-width: 24% !important;
    order: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    /* Bootstrap Push/Pull zurücksetzen */
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
}

/* AGGRESSIVE LOGO-POSITIONIERUNG - Überschreibt ALLE Theme-Einstellungen */
/* Alle möglichen Logo-Selektoren abdecken */
.header_inner #logo,
.header_inner .row #logo,
.header_inner .centerlogo #logo,
.header_inner .leftlogo #logo,
.header_inner .row .col-sm-3:first-child,
.header_inner .centerlogo .col-sm-3:first-child,
.header_inner .leftlogo .col-sm-3:first-child,
#logo.col-sm-3,
.col-sm-3#logo {
    flex: 0 0 18% !important;
    max-width: 18% !important;
    order: 1 !important;
    /* Bootstrap Push/Pull AGGRESSIV zurücksetzen */
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: static !important;
    transform: none !important;
    /* Center-Push Klassen überschreiben */
    -webkit-transform: none !important;
    -ms-transform: none !important;
}

/* Logo Container - IMMER links justiert */
#logo,
#logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Logo Bild - Optimiert */
#logo img {
    max-height: 45px !important;
    width: auto !important;
    margin-left: 0 !important;
    object-fit: contain !important;
}

/* Suchbereich - WIE IM SCREENSHOT - Einfaches, sauberes Design */
.header_inner .leftbox {
    position: relative !important;
    padding: 0 20px !important;
}

/* Verstecke altes Menu im leftbox */
.header_inner .leftbox .fixed-menu,
.header_inner .leftbox .header-info,
.header_inner .leftbox .btn-menu {
    display: none !important;
}

/* Hauptsuchfeld Container - Sauberes Design wie Screenshot */
#search {
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    display: flex !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 100 !important;
    height: 40px !important;
}

#search:hover,
#search:focus-within {
    border-color: #999999 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Suchfeld Input - Wie im Screenshot */
#search input[name="search"] {
    border: none !important;
    background: transparent !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    flex: 1 !important;
    outline: none !important;
    color: #333 !important;
    font-weight: normal !important;
    height: 38px !important;
    line-height: 1.4 !important;
}

#search input[name="search"]::placeholder {
    color: #999999 !important;
    font-style: normal !important;
    font-weight: normal !important;
}

/* Such-Button - Einfacher Stil wie Screenshot */
#search .btn,
#search button[type="submit"] {
    background: #f8f8f8 !important;
    border: none !important;
    border-left: 1px solid #dddddd !important;
    padding: 10px 15px !important;
    color: #666666 !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    font-weight: normal !important;
    min-width: 50px !important;
    cursor: pointer !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#search .btn:hover,
#search button[type="submit"]:hover {
    background: #e8e8e8 !important;
    color: #333333 !important;
}

#search .btn i,
#search button i {
    font-size: 16px !important;
    color: inherit !important;
}

/* Rechter Bereich - NUR Warenkorb, KEIN Such-Button */
.rightbox {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

/* Such-Trigger Button VERSTECKEN - nur Warenkorb zeigen */
.search-trigger,
.rightbox .search-trigger,
.btn.search-trigger {
    display: none !important;
}

/* Warenkorb Button - Kompakter Stil wie Screenshot */
#cart {
    position: relative !important;
    flex-shrink: 0 !important;
}

#cart .btn,
#cart > .btn {
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    color: #333 !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: normal !important;
    font-size: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
    height: 40px !important;
    min-width: 60px !important;
}

#cart .btn:hover,
#cart > .btn:hover {
    background: #f8f8f8 !important;
    color: #333 !important;
    border-color: #999999 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Warenkorb Icon hinzufügen - Kleiner */
#cart .btn::before,
#cart > .btn::before {
    content: "\f07a" !important;
    font-family: "FontAwesome" !important;
    font-size: 16px !important;
    margin-right: 4px !important;
    font-weight: normal !important;
}

/* Such-Trigger Button - Kompakter */
.search-trigger {
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    color: #333 !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.search-trigger:hover {
    background: #f8f8f8 !important;
    color: #333 !important;
    border-color: #999999 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.search-trigger i {
    font-size: 16px !important;
}

/* Mein Konto Dropdown */
.account-dropdown {
    position: relative;
}

.account-dropdown .dropdown-menu {
    min-width: 200px;
    border: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 10px 0;
    margin-top: 8px;
}

/* 3. Navigation - Mega Menu Stil */
#menu {
    background: #ffffff !important;
    border-top: 1px solid #e9ecef !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.navbar {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar-nav {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
}

.navbar-nav > li {
    margin: 0 !important;
}

.navbar-nav > li > a {
    color: #333333 !important;
    font-weight: 500 !important;
    padding: 15px 25px !important;
    border-radius: 0 !important;
    transition: all 0.3s ease;
    text-transform: none !important;
    font-size: 15px;
    letter-spacing: 0;
    border-bottom: 3px solid transparent;
}

.navbar-nav > li > a:hover {
    background: #f8f9fa !important;
    color: #0857bb !important;
    border-bottom: 3px solid #0857bb;
    transform: none;
    box-shadow: none;
}

.navbar-nav > li.active > a,
.navbar-nav > li.open > a {
    background: #f8f9fa !important;
    color: #0857bb !important;
    border-bottom: 3px solid #0857bb;
}

/* Dropdown Mega-Menu */
.navbar-nav .dropdown-menu {
    border: none !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    border-radius: 0 !important;
    padding: 20px !important;
    margin-top: 0 !important;
    min-width: 600px;
    left: 50%;
    transform: translateX(-50%);
}

/* Mobile Anpassungen - Responsive Header mit korrektem Layout */
@media (max-width: 991px) {
    /* Topbar war schon entfernt */
    
    .header_inner {
        padding: 10px 0 !important;
    }
    
    /* Mobile Header Layout - Logo links halten */
    .header_inner .row {
        flex-wrap: nowrap !important;
        display: flex !important;
    }
    
    .header_inner .row #logo,
    .header_inner .centerlogo #logo,
    .header_inner .leftlogo #logo {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        order: 1 !important;
    }
    
    .header_inner .row .leftbox,
    .header_inner .centerlogo .leftbox,
    .header_inner .leftlogo .leftbox {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        order: 2 !important;
        padding: 0 8px !important;
    }
    
    .header_inner .row .rightbox,
    .header_inner .centerlogo .rightbox,
    .header_inner .leftlogo .rightbox {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        order: 3 !important;
        gap: 8px !important;
    }
    
    #search {
        max-width: 100% !important;
        margin: 0 !important;
        height: 36px !important;
    }
    
    #search input[name="search"] {
        padding: 8px 12px !important;
        font-size: 13px !important;
        height: 34px !important;
    }
    
    #search .btn {
        padding: 8px 12px !important;
        min-width: 45px !important;
        height: 34px !important;
    }
    
    #cart .btn {
        padding: 6px 10px !important;
        font-size: 13px !important;
        height: 36px !important;
        min-width: 50px !important;
    }
    
    .search-trigger {
        padding: 6px 10px !important;
        height: 36px !important;
        min-width: 36px !important;
    }
}

@media (max-width: 767px) {
    #logo img {
        max-height: 32px !important;
    }
    
    .header_inner .row #logo,
    .header_inner .centerlogo #logo,
    .header_inner .leftlogo #logo {
        flex: 0 0 22% !important;
        max-width: 22% !important;
    }
    
    .header_inner .row .leftbox,
    .header_inner .centerlogo .leftbox,
    .header_inner .leftlogo .leftbox {
        flex: 0 0 53% !important;
        max-width: 53% !important;
        padding: 0 5px !important;
    }
    
    .header_inner .row .rightbox,
    .header_inner .centerlogo .rightbox,
    .header_inner .leftlogo .rightbox {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        gap: 4px !important;
    }
    
    #search {
        height: 32px !important;
    }
    
    #search input[name="search"] {
        padding: 6px 10px !important;
        font-size: 12px !important;
        height: 30px !important;
    }
    
    #search .btn {
        padding: 6px 10px !important;
        min-width: 40px !important;
        height: 30px !important;
    }
    
    #cart .btn {
        padding: 5px 8px !important;
        font-size: 12px !important;
        height: 32px !important;
        min-width: 45px !important;
    }
    
    #cart .btn::before {
        font-size: 14px !important;
        margin-right: 3px !important;
    }
    
    .search-trigger {
        padding: 5px 8px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    
    .navbar-nav > li > a {
        padding: 12px 15px !important;
        font-size: 14px;
    }
}

/* ========================================
   2. PRODUKTKARTEN - KOMPLETT ÜBERARBEITET
   ======================================== */

/* BASIS-STYLES für alle Produktkarten */
.product-thumb {
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    background: #fff;
    display: flex !important;
    flex-direction: column !important;
    position: relative;
}

.product-thumb:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

/* ========================================
   HAUPTPRODUKTE - Feste Höhe für einheitliches Layout
   ======================================== */

/* Sehr spezifische Selektoren für Hauptbereich (Content) */
#content .tab-pane .product-thumb,
#content .product-listing .product-thumb,
#content #tab-featured-0 .product-thumb,
#content #tab-latest-0 .product-thumb,
#content #tab-bestseller-0 .product-thumb,
#content #tab-special-0 .product-thumb,
#content .box .product-thumb {
    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;
}

/* Hauptprodukte Layout Container */
#content .tab-pane .row,
#content .product-listing,
#content .box .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

#content .product-layout {
    display: flex !important;
    margin-bottom: 30px !important;
}

/* Hauptprodukte Caption */
#content .product-thumb .caption {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 15px !important;
}

#content .product-thumb .caption h4 {
    min-height: 50px;
    margin-bottom: 10px;
    font-size: 1em;
}

/* ========================================
   SIDEBAR PRODUKTE - Horizontales Layout (Bild links, Text rechts)
   ======================================== */

/* Sehr spezifische Selektoren für Sidebar */
#column-right .product-thumb,
#column-left .product-thumb,
aside .product-thumb,
.sidebar .product-thumb {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin-bottom: 15px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* Sidebar Container NICHT flex - bleibt vertikal gestapelt */
#column-right .row,
#column-left .row,
aside .row,
.sidebar .row {
    display: block !important;
}

#column-right .product-layout,
#column-left .product-layout,
aside .product-layout,
.sidebar .product-layout {
    width: 100% !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* Sidebar Produktbilder - Links positioniert */
#column-right .product-thumb .image,
#column-left .product-thumb .image,
aside .product-thumb .image,
.sidebar .product-thumb .image {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
    overflow: hidden;
    border-radius: 8px;
    margin: 0 12px 0 0 !important;
    display: block !important;
}

#column-right .product-thumb .image img,
#column-left .product-thumb .image img,
aside .product-thumb .image img,
.sidebar .product-thumb .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Sidebar Caption - Rechts neben dem Bild */
#column-right .product-thumb .caption,
#column-left .product-thumb .caption,
aside .product-thumb .caption,
.sidebar .product-thumb .caption {
    flex: 1 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-align: left !important;
    min-height: 80px !important;
}

#column-right .product-thumb .caption h4,
#column-left .product-thumb .caption h4,
aside .product-thumb .caption h4,
.sidebar .product-thumb .caption h4 {
    margin: 0 0 8px 0 !important;
    font-size: 0.85em !important;
    line-height: 1.2 !important;
    text-align: left !important;
    padding: 0 !important;
    font-weight: 600;
}

/* Sidebar Preise - Unter dem Titel */
#column-right .product-thumb .caption .price,
#column-left .product-thumb .caption .price,
aside .product-thumb .caption .price,
.sidebar .product-thumb .caption .price {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    font-size: 0.85em;
    text-align: left !important;
    font-weight: 600;
    color: #0857bb;
}

/* Sidebar Buttons - Am unteren Ende */
#column-right .product-thumb .button-group,
#column-left .product-thumb .button-group,
aside .product-thumb .button-group,
.sidebar .product-thumb .button-group {
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    margin-top: auto !important;
}

#column-right .product-thumb .button-group .btn,
#column-left .product-thumb .button-group .btn,
aside .product-thumb .button-group .btn,
.sidebar .product-thumb .button-group .btn {
    padding: 4px 8px !important;
    font-size: 0.7em !important;
    margin: 1px 2px 0 0 !important;
}

/* Wishlist und Compare Buttons kleiner */
#column-right .product-thumb .button-group .btn-link,
#column-left .product-thumb .button-group .btn-link,
aside .product-thumb .button-group .btn-link,
.sidebar .product-thumb .button-group .btn-link {
    padding: 4px !important;
    font-size: 0.7em !important;
    min-width: auto !important;
}

/* Spezielle PersonalizedRecommendations Anpassungen - Horizontal */
.personalizedrecommendations_module .product-thumb {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.personalizedrecommendations_module .product-thumb .image {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    border-radius: 8px;
    margin: 0 12px 0 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.personalizedrecommendations_module .product-thumb .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 8px;
}

.personalizedrecommendations_module .product-thumb .caption {
    flex: 1 !important;
    padding: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 80px !important;
}

.personalizedrecommendations_module .product-thumb .caption h4 {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    font-size: 0.85em !important;
}

.personalizedrecommendations_module .product-thumb .caption .price {
    text-align: left !important;
    margin: 0 0 8px 0 !important;
    font-size: 0.85em;
    color: #0857bb;
}

.personalizedrecommendations_module .product-thumb .button-group,
.personalizedrecommendations_module .cart-personalizedrecommendations .button-group {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-top: auto !important;
}

/* ========================================
   IMAGE HOVER EFFEKTE
   ======================================== */

.product-thumb .image {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

.product-thumb .image img {
    transition: transform 0.3s ease;
    width: 100%;
    height: auto;
}

.product-thumb:hover .image img {
    transform: scale(1.05);
}

/* ========================================
   BUTTON STYLES
   ======================================== */

.product-thumb .caption .price {
    margin-top: auto !important;
    padding-top: 10px;
}

.product-thumb .button-group {
    margin-top: auto !important;
    padding: 0 15px 15px 15px !important;
}

/* Moderne Buttons */
.btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    font-size: 0.85em !important;
    letter-spacing: 0.5px;
    padding: 10px 20px !important;
}

.btn-primary,
.btn-add,
.btn-cart {
    background: linear-gradient(135deg, #0857bb 0%, #0a6fd8 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(8, 87, 187, 0.2);
}

.btn-primary:hover,
.btn-add:hover,
.btn-cart:hover {
    background: linear-gradient(135deg, #064a9e 0%, #0857bb 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(8, 87, 187, 0.3);
}

/* ========================================
   RESPONSIVE ANPASSUNGEN
   ======================================== */

/* Mobile */
@media (max-width: 576px) {
    /* Mobile Hauptprodukte kleiner */
    #content .tab-pane .product-thumb,
    #content .product-listing .product-thumb,
    #content .box .product-thumb {
        height: 380px !important;
        min-height: 380px !important;
        max-height: 380px !important;
    }
    
    /* Mobile Sidebar - Horizontal Layout angepasst */
    #column-right .product-thumb,
    #column-left .product-thumb,
    aside .product-thumb,
    .sidebar .product-thumb {
        height: auto !important;
        margin-bottom: 10px !important;
        padding: 10px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    #column-right .product-thumb .image,
    #column-left .product-thumb .image,
    aside .product-thumb .image,
    .sidebar .product-thumb .image {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        margin: 0 10px 0 0 !important;
    }
    
    #column-right .product-thumb .image img,
    #column-left .product-thumb .image img,
    aside .product-thumb .image img,
    .sidebar .product-thumb .image img {
        width: 100%;
        height: 100%;
    }
    
    #column-right .product-thumb .caption,
    #column-left .product-thumb .caption,
    aside .product-thumb .caption,
    .sidebar .product-thumb .caption {
        min-height: 60px !important;
    }
    
    #column-right .product-thumb .caption h4,
    #column-left .product-thumb .caption h4,
    aside .product-thumb .caption h4,
    .sidebar .product-thumb .caption h4 {
        font-size: 0.8em !important;
        margin-bottom: 6px !important;
        line-height: 1.1 !important;
    }
    
    #column-right .product-thumb .caption .price,
    #column-left .product-thumb .caption .price,
    aside .product-thumb .caption .price,
    .sidebar .product-thumb .caption .price {
        font-size: 0.8em !important;
        margin: 0 0 6px 0 !important;
    }
    
    #column-right .product-thumb .button-group .btn,
    #column-left .product-thumb .button-group .btn,
    aside .product-thumb .button-group .btn,
    .sidebar .product-thumb .button-group .btn {
        padding: 3px 6px !important;
        font-size: 0.65em !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    #content .tab-pane .product-thumb,
    #content .product-listing .product-thumb,
    #content .box .product-thumb {
        height: 420px !important;
        min-height: 420px !important;
        max-height: 420px !important;
    }
}

/* ========================================
   BESTEHENDE ORIGINAL STYLES
   ======================================== */

/************************ RSS-NEWS ************************/
.news-heading-title a {
    float: right;
}

.post-date {
    margin-left: -60px;
}

.blog-posts article .post-content {
    border-bottom: 1px solid #DDD;
    min-height: 50px;
}

.box-product {
    display: flex;
    flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 576px) {
    .post-date {
        margin-left: 0 !important;
    }
    
    .blog-posts article .post-content {
        margin-left: 60px;
    }

    .box-product {
        flex-direction: column;
    }
}

/********************** PRODUKTSEITE **********************/
#related-products > .row > .product-layout {
    /* Removed max-width constraint to allow proper responsive grid layout */
    flex: 0 0 auto !important; /* Ensure flexbox doesn't override Bootstrap widths */
}

/* Related products responsive layout - 4 per row on desktop */
#related-products .product-layout {
    margin-bottom: 20px;
}

#related-products .quickview {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

#related-products .image {
    position: relative;
    margin-bottom: 15px;
}

/* Responsive layout: 4/3/2/1 per row */
@media (min-width: 1200px) {
    #related-products .col-lg-3 {
        width: 25%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #related-products .col-md-3 {
        width: 33.333333%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #related-products .col-sm-6 {
        width: 50%;
    }
}

@media (max-width: 767px) {
    #related-products .col-xs-12 {
        width: 100%;
    }
}

#tab-family > .box-product > div {
    max-width: 287.5px !important;
    text-align: center;
}

.product-page .rightcol .cart {
    text-align: left !important;
}

.price-padding {
    margin-left: 10px;
    padding-left: 26%;
}

.price-padding-special {
    margin-left: 10px;
    padding-left: 23%;
}

.miete-iframe {
    width: 600px;
    height: 420px;
    border: none;
}

@media (max-width: 768px) {
    .miete-iframe {
        width: 100%;
        height: 420px;
    }

    .chatstack-olle {
        display: none;
    }
}

/* ========================================
   NEWS CAROUSEL - EQUAL HEIGHT
   ======================================== */

.news-carousel-container .owl-item {
    display: flex !important;
}

.news-carousel-container .owl-item .item {
    width: 100% !important;
    display: flex !important;
}

.news-carousel-container .news-thumb {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 350px !important;
}

.news-carousel-container .news-caption {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

.news-carousel-container .news-title {
    flex: 0 0 auto !important;
    min-height: 60px !important;
    margin-bottom: 10px !important;
}

.news-carousel-container .news-excerpt {
    flex: 1 !important;
    margin-bottom: 15px !important;
    overflow: hidden !important;
}

.news-carousel-container .news-button-group {
    flex: 0 0 auto !important;
    margin-top: auto !important;
}

/* ========================================
   MEGA FILTER - KEEP FILTERS IN SIDEBAR
   Fix: Prevent responsive feature from moving filters to floating container
   Date: 2025-11-05
   ======================================== */

/* Force hide mega filter free container (floating widget) */
.mfilter-free-container {
    display: none !important;
}

/* Ensure filters always stay in sidebar */
#column-left .mfilter-box {
    display: block !important;
    position: static !important;
}

/* Override any transform/positioning that might move filters */
#column-left .mfilter-box,
#column-left .mfilter-content {
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure sidebar is always visible to layout */
#column-left.sidebar {
    display: block !important;
}

/* Mega Filter Zero-Count Hiding Support */
.mfilter-tb-as-tr.mfilter-hide,
.mfilter-option.mfilter-hide,
.mfilter-filter-item.mfilter-hide {
    display: none !important;
}

/* Keep selected filters visible with visual indicator */
.mfilter-counter.mfilter-close {
    color: #4CAF50;
    font-weight: bold;
}

/* Hide Mega Filter selected filters bar */
.mfilter-selected-filters {
    display: none !important;
}

/* Hide the selected filters container completely */
.mfilter-selected-filters-cnt {
    display: none !important;
}

/* Fix FontAwesome icons in input-group buttons */
.input-group-btn .btn .fa {
    font-size: 14px !important;
}

/* ========================================
   PRODUCT COMPARE - PREVENT BREAKING IN ATTRIBUTE NAMES
   Date: 2025-11-14
   Prevents text breaking at parentheses in attribute names
   like "Abmessungen (L x B x H)"
   ======================================== */

/* Prevent line breaks in attribute name column (first column) */
.compare-info tbody td:first-child {
    white-space: nowrap !important;
}

/* Optional: Allow wrapping for longer attribute values in other columns */
.compare-info tbody td:not(:first-child) {
    white-space: normal;
    word-wrap: break-word;
}

/* ========================================
   PRODUKTBOX EINHEITLICHE GRÖSSE & TITEL-LIMITIERUNG
   Datum: 2025-11-12
   ======================================== */

/* Einheitliche Produktbox-Höhe für alle Module und Listen */
.product-thumb {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 420px !important; /* Mindesthöhe für einheitliches Erscheinungsbild */
}

/* Abstand zwischen Produktreihen */
.product-layout {
    margin-bottom: 30px !important; /* Abstand zwischen den Reihen */
}

/* Bild-Container feste Höhe */
.product-thumb .image {
    flex-shrink: 0 !important;
    height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Caption-Bereich nimmt verfügbaren Platz ein */
.product-thumb .caption {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Produkttitel auf ca. 90 Zeichen limitieren (ca. 3 Zeilen) */
.product-thumb .name,
.product-thumb h4.name {
    overflow: hidden !important;
    max-height: 5em !important; /* Ca. 3 Zeilen - genug Platz */
    line-height: 1.6em !important;
    margin-bottom: 10px !important;
    word-wrap: break-word !important; /* Bricht lange Wörter nur wenn nötig */
}

/* Link innerhalb des Titels */
.product-thumb .name a {
    display: inline !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* Hover-Effekt für Titel */
.product-thumb .name a:hover {
    color: #337ab7 !important; /* Bootstrap primary color */
    text-decoration: underline !important;
}

/* Button-Group am unteren Rand */
.product-thumb .button-group {
    margin-top: auto !important;
    padding-top: 10px !important;
}

/* ========================================
   RESPONSIVE LOGO & NAVIGATION HIDING
   Datum: 2025-11-13
   ======================================== */

/* Hide logo on small and medium screens (below 992px) */
@media (max-width: 991px) {
    .logo {
        display: none !important;
    }
}

/* Hide navigation bar on small screens (768px and below) */
@media (max-width: 768px) {
    .mf-navigation-bar {
        display: none !important;
    }
}

/* ========================================
   PRODUCT FILTER & NAVIGATION Z-INDEX FIX
   Date: 2025-12-11 (Updated)

   SOLUTION: Header has z-index: 1000 (set via JS in header.twig)
   Content area stays at z-index: auto or low values
   This ensures navigation dropdowns appear ABOVE all content
   ======================================== */

/* Product filter - keep z-index low so navigation (z-index: 1000) is above */
.product-filter {
    position: relative;
    z-index: auto;  /* No stacking context - inherits from parent */
}

/* Subcategories carousel - no stacking context needed */
#subcategories,
.product-filter #subcategories,
.product-filter .category-list,
.product-filter .owl-carousel,
.product-filter .owl-wrapper-outer,
.product-filter .owl-wrapper,
.product-filter .owl-item,
.product-filter .subcat_thumb,
.product-filter .subcat_thumb img {
    position: relative;
    z-index: auto;  /* Inherit from parent, don't create stacking context */
}

/* Product cards - no high z-index needed */
.product-layout,
.product-layout .product-thumb {
    position: relative;
    z-index: auto;
}

/* List options (sort/limit) - slightly elevated for internal dropdown use */
.product-filter .list-options,
.list-options {
    position: relative;
    z-index: 10;
}

/* Sort/Limit dropdown menus - positioned correctly, z-index for internal layering */
.product-filter .dropdown-menu,
.list-options .dropdown-menu,
.product-filter .sort .dropdown-menu,
.product-filter .limit .dropdown-menu {
    position: absolute !important;
    z-index: 100;  /* Above filter content but below header (1000) */
    right: 0;
    left: auto;
    top: 100%;
}

/* Open dropdown containers - slightly elevated */
.product-filter .dropdown.open,
.list-options .dropdown.open,
.product-filter .sort.open,
.product-filter .limit.open {
    position: relative;
    z-index: 20;
}