/* === SCROLLBARE VERTIKALMENÜBOX === */
.scrollable-menu {
    max-height: 400px;
    overflow-y: auto;
    padding: 5px 0;
    border: 1px solid #ddd;
    scroll-behavior: smooth;
    scrollbar-width: thin; /* Firefox */
}

/* Custom Scrollbar für Webkit-Browser (Chrome, Edge, Safari) */
.scrollable-menu::-webkit-scrollbar {
    width: 6px;
}
.scrollable-menu::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

/* === MENÜLISTE === */
.scrollable-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* === KATEGORIE-LINK === */
.scrollable-menu .menu-item > a {
    font-weight: 600;
    font-size: 15px;
    color: #222;
    display: block;
    padding: 4px 12px;
    line-height: 1.3;
    text-decoration: none;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

/* Hovereffekt für Hauptkategorie */
.scrollable-menu .menu-item > a:hover {
    background-color: #f5f5f5;
    color: #000;
    border-left: 3px solid #007BFF;
}

/* === UNTERKATEGORIEN === */
.scrollable-menu .subcategory {
    margin-left: 15px;
    margin-top: 2px;
}

/* Unterkategorie-Links */
.scrollable-menu .subcategory li a {
    font-size: 13px;
    font-style: italic;
    color: #555;
    padding: 3px 10px;
    display: block;
    line-height: 1.3;
    text-decoration: none;
    border-left: 2px dotted transparent;
    transition: all 0.2s ease;
}

/* Hover für Unterkategorie */
.scrollable-menu .subcategory li a:hover {
    background-color: #f0f0f0;
    color: #000;
    border-left: 2px dotted #888;
}

/* === OPTIONAL: Mobilfreundlich (bei kleiner Breite) === */
@media (max-width: 768px) {
    .scrollable-menu {
        max-height: 300px;
    }

    .scrollable-menu .menu-item > a {
        font-size: 14px;
        padding: 4px 10px;
    }

    .scrollable-menu .subcategory li a {
        font-size: 12px;
        padding: 2px 10px;
    }
}
/* =============== DROPDOWN GRUNDSTIL =============== */
.menu-item-has-children {
    position: relative;
}

.menu-item-has-children > .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 220px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 10px 0;
}

.menu-item-has-children:hover > .submenu {
    display: block;
}

/* =============== ZWEITE EBENE (Sub-Submenu/Flyout) =============== */
.menu-item-has-children > .submenu .menu-item-has-children {
    position: relative;
}

.menu-item-has-children > .submenu .menu-item-has-children > .submenu {
    top: 0;
    left: 100%;
    margin-left: 1px;
}

/* Links im Dropdown */
.submenu li a {
    display: block;
    padding: 6px 15px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.submenu li a:hover {
    background-color: #f5f5f5;
    color: #000;
}

/* Optional: kleiner Pfeil für Submenüs */
.menu-item-has-children > a::after {
    content: " ▾";
    font-size: 10px;
    margin-left: 4px;
}

/* Für zweite Ebene (Flyout) Pfeil rechts */
.menu-item-has-children > .submenu .menu-item-has-children > a::after {
    content: " ▸";
    float: right;
}


/* Scrollbarer Bereich für Subkategorien (Flyout-Ebene) */
.menu-item-has-children > .submenu .submenu {
    max-height: 300px;       /* Höhe begrenzen */
    overflow-y: auto;        /* Scrollen ermöglichen */
    overflow-x: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Optional */
    scrollbar-width: thin;   /* Firefox */
}

/* Webkit-basierte Browser (Chrome, Safari, Edge) */
.menu-item-has-children > .submenu .submenu::-webkit-scrollbar {
    width: 6px;
}
.menu-item-has-children > .submenu .submenu::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

/* Scrollbarer Wrapper für Subkategorien */
.submenu-scroll-container {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background-color: #fff;
}

/* Optional: schöner Scrollbar (Chrome, Edge, Safari) */
.submenu-scroll-container::-webkit-scrollbar {
    width: 6px;
}
.submenu-scroll-container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

/* Firefox */
.submenu-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
.related.products .related-small {
	font-size: 0.75em;
}

.related.products .related-small img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

.related.products .related-small .product-thumb {
	padding: 3px;
}

.related.products .related-small .product-info h5 {
	font-size: 0.85em;
	line-height: 1.1em;
	margin: 4px 0;
	text-align: center;
}

.related.products .related-small .group-info {
	font-size: 0.75em;
	text-align: center;
}

.related.products .related-small .price ins {
	font-size: 0.9em;
	color: #333;
}

.related.products .related-small .thumb-group,
.related.products .related-small .loop-form-add-to-cart,
.related.products .related-small .quick-wiew-button,
.related.products .related-small .yith-wcwl-add-to-wishlist {
	display: none; /* optional: alles verstecken für kompakte Darstellung */
}

.related.products .related-small .product-inner {
	padding: 5px;
}

.partners-section .partner-card {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.partners-section .partner-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.partners-section img {
  max-height: 60px;
  object-fit: contain;
}



/* Container für Menge */
.quantity.control {
    display: inline-flex;
    align-items: center;
    gap: 4px; /* etwas mehr Abstand für moderne Optik */
}

/* Plus/Minus-Buttons moderner, kleiner, rund */
.quantity.control .btn-number {
    width: 28px;
    height: 28px;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.quantity.control .btn-number:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

/* Eingabefeld breiter, klar lesbar, moderner Stil */
.quantity.control .input-qty {
    width: 60px;         /* optional auf 70px erhöhen */
    height: 30px;
    text-align: center;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.quantity.control .input-qty:focus {
    border-color: #0073aa;
    box-shadow: 0 0 4px rgba(0,115,170,0.3);
}
.quantity.control .input-qty::-webkit-outer-spin-button,
.quantity.control .input-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Update-Button moderner */
.update-btn {
    margin-left: 8px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    background-color: #0073aa;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.update-btn:hover {
    background-color: #005f8c;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* --- Menge-Formular --- */
.quantity-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* + / − Buttons kleiner & feiner */
.quantity-form .btn-number {
    background: #f2f2f2;
    border: 1px solid #ccc;
    color: #333;
    width: 26px;
    height: 26px;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.quantity-form .btn-number:hover {
    background: #e6e6e6;
}

/* Eingabefeld breiter & deutlicher */
.quantity-form .input-qty {
    width: 70px;           /* breiter */
    padding: 4px 6px;
    text-align: center;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 15px;
}

/* Update-Button dezent */
.quantity-form .update-btn {
    background:#0073aa;
    color:#fff;
    border:none;
    border-radius:4px;
    padding:5px 10px;
    font-size:14px;
    cursor:pointer;
    transition: background 0.2s;
}
.quantity-form .update-btn:hover {
    background:#005f8d;
}


/* ===== Reset für Number-Input in WebKit (Chrome/Safari) ===== */
.input-qty::-webkit-outer-spin-button,
.input-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-qty[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

/* ===== Eigene Gestaltung ===== */
.quantity-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* + / − Buttons */
.quantity-form .btn-number {
    background: #f2f2f2;
    border: 1px solid #ccc;
    color: #333;
    width: 26px;
    height: 26px;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.quantity-form .btn-number:hover {
    background: #e6e6e6;
}

/* Eingabefeld */
.quantity-form .input-qty {
    width: 70px;               /* feste Breite */
    padding: 4px 6px;
    text-align: center;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}
/* Kleines, modernes Entfernen-Icon */
.remove-btn {
    background: none;
    border: none;
    color: #cc0000;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
}
.remove-btn:hover {
    color: #ff0000;
}

/* ========================================
   FAVORIS PAGE - CUSTOM STYLES
======================================== */

/* Alert Messages */
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert i {
    font-size: 20px;
}

.alert-success {
    background: #d4edda;
    border-color: #27ae60;
    color: #155724;
}

.alert-success i {
    color: #27ae60;
}

.alert-danger {
    background: #f8d7da;
    border-color: #e74c3c;
    color: #721c24;
}

.alert-danger i {
    color: #e74c3c;
}

.alert .close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    margin-left: auto;
    padding: 0;
}

.alert .close:hover {
    opacity: 1;
}

/* Login Required Message */
.login-required-message {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border: 2px solid #ecf0f1;
    border-radius: 12px;
    margin: 40px 0;
}

.login-required-icon {
    font-size: 80px;
    color: #ff6b6b;
    margin-bottom: 30px;
}

.login-required-message h3 {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 15px;
}

.login-required-message p {
    font-size: 16px;
    color: #7f8c8d;
    margin-bottom: 30px;
}

/* Empty Favorites */
.empty-favorites-message {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    border: 2px dashed #ff6b6b;
    border-radius: 12px;
}

.empty-favorites-icon {
    font-size: 100px;
    color: #ff6b6b;
    margin-bottom: 30px;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10%, 30% { transform: scale(0.95); }
    20%, 40%, 60%, 80% { transform: scale(1); }
    50%, 70% { transform: scale(1.05); }
}

.empty-favorites-message h3 {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 15px;
}

.empty-favorites-message p {
    font-size: 16px;
    color: #7f8c8d;
    margin-bottom: 30px;
}

/* Favorites Products Card */
.favorites-products-card {
    background: #fff;
    border: 2px solid #ecf0f1;
    border-radius: 12px;
    overflow: hidden;
}

.favorites-header {
    background: linear-gradient(135deg, #fff5f5, #fff);
    padding: 20px 30px;
    border-bottom: 2px solid #ffe5e5;
}

.favorites-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.favorites-count-badge {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    margin-left: 10px;
}

/* Favorites Items List */
.favorites-items-list {
    padding: 20px;
}

.favorite-item {
    display: flex;
    gap: 20px;
    padding: 25px;
    background: #fff;
    border: 2px solid #ffe5e5;
    border-radius: 12px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    position: relative;
}

.favorite-item:hover {
    border-color: #ff6b6b;
    box-shadow: 0 5px 20px rgba(255, 107, 107, 0.15);
    transform: translateY(-2px);
}

.favorite-item-image {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    position: relative;
}

.favorite-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favorite-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
    animation: heartbeat 1.5s ease-in-out infinite;
}

.favorite-item-details {
    flex: 1;
}

.product-name {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.product-name a {
    color: #2c3e50;
    text-decoration: none;
}

.product-name a:hover {
    /* Markenblau statt Rot - passt zum uebrigen Erscheinungsbild */
    color: #12305f;
}

.product-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #7f8c8d;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Product Availability */
.product-availability {
    margin-bottom: 15px;
}

.availability-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.availability-badge.in-stock {
    background: #d4edda;
    color: #27ae60;
}

.availability-badge.in-stock i {
    color: #27ae60;
}

.availability-badge.out-stock {
    background: #f8d7da;
    color: #e74c3c;
}

.availability-badge.out-stock i {
    color: #e74c3c;
}

.favorite-item-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Add to Cart Button */
.btn-add-cart {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    border: none;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-add-cart:hover {
    background: linear-gradient(135deg, #45a049, #3d8b40);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.btn-add-cart i {
    font-size: 16px;
}

/* Remove Favorite Button */
.btn-remove-favorite {
    background: transparent;
    border: 2px solid #ff6b6b;
    color: #ff6b6b;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-remove-favorite:hover {
    background: #ff6b6b;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

.btn-remove-favorite i {
    font-size: 14px;
}

/* Favorite Item Price */
.favorite-item-price {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 120px;
}

.price-value {
    font-size: 24px;
    font-weight: 700;
    color: #ff6b6b;
    margin-bottom: 5px;
}

.price-label {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
}

/* Favorites Footer */
.favorites-footer {
    padding: 20px 30px;
    background: #fff5f5;
    border-top: 2px solid #ffe5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Favorites Summary Sticky */
.favorites-summary-sticky {
    position: sticky;
    top: 100px;
}

.favorites-summary-card {
    background: #fff;
    border: 2px solid #ffe5e5;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 20px;
}

.summary-title {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #ffe5e5;
}

.summary-title i {
    color: #ff6b6b;
    margin-right: 10px;
}

/* Summary Details */
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 15px;
    color: #2c3e50;
}

.favorites-count {
    font-size: 24px;
    font-weight: 700;
    color: #ff6b6b;
}

.summary-divider {
    height: 2px;
    background: #ffe5e5;
    margin: 15px 0;
}

.summary-info {
    background: #fff5f5;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 15px;
}

.summary-info i {
    color: #ff6b6b;
    font-size: 20px;
    margin-top: 2px;
}

.summary-info p {
    margin: 0;
    font-size: 14px;
    color: #7f8c8d;
    line-height: 1.5;
}

/* Add All Button */
.btn-add-all {
    margin-top: 20px;
    margin-bottom: 15px;
    padding: 18px;
    font-size: 16px;
    font-weight: 700;
}

/* Quick Actions Card */
.quick-actions-card {
    background: #fff;
    border: 2px solid #ffe5e5;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
}

.quick-actions-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.quick-actions-card h4 i {
    color: #ff6b6b;
    margin-right: 8px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #ffe5e5;
}

.action-item:last-child {
    border-bottom: none;
}

.action-item i {
    font-size: 24px;
    color: #ff6b6b;
}

.action-content strong {
    display: block;
    font-size: 14px;
    color: #2c3e50;
    margin-bottom: 3px;
}

.action-content small {
    font-size: 12px;
    color: #7f8c8d;
}

/* Info Card */
.info-card {
    background: linear-gradient(135deg, #fff5f5, #ffe5e5);
    border: 2px solid #ff6b6b;
    border-radius: 12px;
    padding: 20px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 107, 107, 0.2);
}

.info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-item i {
    font-size: 28px;
    color: #ff6b6b;
    margin-top: 2px;
}

.info-content strong {
    display: block;
    font-size: 14px;
    color: #2c3e50;
    margin-bottom: 5px;
    font-weight: 700;
}

.info-content small {
    font-size: 12px;
    color: #7f8c8d;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 991px) {
    .favorites-summary-sticky {
        position: static;
    }
    
    .favorite-item {
        flex-direction: column;
    }
    
    .favorite-item-price {
        text-align: left;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .favorite-item-image {
        width: 100%;
        height: 200px;
    }
}

@media (max-width: 767px) {
    .favorites-footer {
        flex-direction: column;
        gap: 15px;
    }
    
    .favorites-footer .btn {
        width: 100%;
    }
    
    .favorite-item-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .favorite-item-actions form {
        width: 100%;
    }
    
    .btn-add-cart,
    .btn-remove-favorite {
        width: 100%;
        justify-content: center;
    }
}

/* HERZ-ICON - Oben Rechts auf dem Bild */
.product-wishlist-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
}

.product-wishlist-badge a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.product-wishlist-badge a i {
    font-size: 18px;
    color: #666;
    transition: all 0.3s ease;
}

/* Hover - Nicht favorisiert */
.product-wishlist-badge a:hover {
    background: #fff;
    transform: scale(1.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.product-wishlist-badge a:hover i {
    color: #e74c3c;
}

/* IN FAVORITEN - Rotes gefülltes Herz */
.product-wishlist-badge.active a i {
    color: #e74c3c;
    font-size: 20px;
}

.product-wishlist-badge.active a {
    background: #fff;
}

.product-wishlist-badge.active a:hover {
    transform: scale(1.15);
}

.product-wishlist-badge.active a:hover i {
    color: #c0392b;
}

/* Mobile */
@media (max-width: 768px) {
    .product-wishlist-badge a {
        width: 36px;
        height: 36px;
    }
    
    .product-wishlist-badge a i {
        font-size: 16px;
    }
    
    .product-wishlist-badge.active a i {
        font-size: 18px;
    }
}

/**
 * favorites-ajax.css
 * CSS für AJAX Favoriten Funktionalität
 * Fügen Sie dies zu personalisiert.css hinzu oder als separate Datei einbinden
 */

/* Hidden Class für Favoriten-Button */
.yith-wcwl-add-to-wishlist.hidden {
    display: none !important;
}

/* Pulse Animation für Herz */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

.pulse-animation {
    animation: pulse 0.6s ease-in-out;
}

/* Toast Notifications */
.favorite-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
}

.favorite-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.favorite-toast.toast-success {
    border-left: 4px solid #27ae60;
    color: #27ae60;
}

.favorite-toast.toast-error {
    border-left: 4px solid #e74c3c;
    color: #e74c3c;
}

.favorite-toast i {
    font-size: 20px;
}

/* Loading State */
.wishlist-heart-toggle[style*="pointer-events: none"] {
    cursor: not-allowed;
}

/* Smooth Transitions */
.product-wishlist-badge,
.product-wishlist-badge a,
.product-wishlist-badge i,
.yith-wcwl-add-to-wishlist {
    transition: all 0.3s ease;
}

/* Mobile Toast */
@media (max-width: 768px) {
    .favorite-toast {
        top: 60px;
        right: 10px;
        left: 10px;
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ================================================
   ACTIVE MENU HIGHLIGHTING
   Füge dieses CSS am Ende von style.css hinzu
   ================================================ */

/* Hauptmenü - Aktiver Menüpunkt */
.main-menu > li.menu-item.active > a,
.main-menu > li.menu-item.active > a:hover {
    color: #12305f !important;
    font-weight: 700;
    position: relative;
}

/* Dezenter Unterstrich-Effekt für aktiven Menüpunkt */
.main-menu > li.menu-item.active > a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #3498db;
    border-radius: 2px;
}

/* Mobiles Menü - Aktiver Menüpunkt */
.dungar-clone-mobile-menu .menu-item.active > a {
    color: #12305f !important;
    font-weight: 700;
    border-bottom: 2px solid #3498db;
}

/* Hover-Effekt für nicht-aktive Menüpunkte */
.main-menu > li.menu-item:not(.active) > a:hover {
    color: #3498db;
    transition: color 0.3s ease;
}

/* Vertikales Menü - Aktiver Menüpunkt */
.vertical-menu .menu-item.active > a {
    color: #12305f !important;
    font-weight: 700;
    border-bottom: 2px solid #3498db;
}

/* Header Style 2 - Aktiver Menüpunkt */
.header.style2 .main-menu > li.menu-item.active > a {
    color: #12305f !important;
}

/* Header Style 3 - Aktiver Menüpunkt */
.header.style3 .main-menu > li.menu-item.active > a {
    color: #12305f !important;
}

/* Optionaler Highlight-Effekt (kommentiere ein/aus nach Bedarf) */
/*
.main-menu > li.menu-item.active {
    background: rgba(18, 48, 95, 0.03);
    border-radius: 8px;
}
*/

/* Responsive - Mobile Anpassungen */
@media (max-width: 991px) {
    .main-menu > li.menu-item.active > a::after {
        display: none; /* Unterstrich wird durch border-bottom im Mobile-Klon ersetzt */
    }
}

/* Sticky Header - Aktiver Menüpunkt */
.header.header-sticky .main-menu > li.menu-item.active > a {
    color: #12305f !important;
}

/* Dark Mode Support (optional) */
@media (prefers-color-scheme: dark) {
    .main-menu > li.menu-item.active > a {
        color: #3498db !important;
    }
    
    .main-menu > li.menu-item.active > a::after {
        background: linear-gradient(90deg, #3498db 0%, #5dade2 100%);
    }
}

/* ================================================
   TECHNISCHE DOKUMENTE (Produktseite)
   ================================================ */

.tab-details-product .tab-link .doc-count {
    font-weight: 400;
    opacity: 0.6;
}

.doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

.doc-list li {
    margin: 0;
}

.doc-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e6eaee;
    border-radius: 8px;
    background: #fff;
    color: #2c3e50;
    text-decoration: none;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.doc-list a:hover {
    border-color: #12305f;
    box-shadow: 0 4px 14px rgba(18, 48, 95, 0.08);
    color: #12305f;
    text-decoration: none;
}

.doc-list .doc-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #eef4fb;
    color: #12305f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.doc-list .doc-label {
    flex: 1;
    line-height: 1.35;
}

.doc-list .doc-arrow {
    flex: 0 0 auto;
    color: #b6c2cf;
    font-size: 12px;
}

.doc-list a:hover .doc-arrow {
    color: #12305f;
}

@media (max-width: 767px) {
    .doc-list {
        grid-template-columns: 1fr;
    }
}

.doc-list .doc-ref {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: #8a97a3;
    margin-top: 2px;
    word-break: break-all;
}

/* ================================================
   EINHEITLICHE PRODUKTBILDER IN LISTEN/GRID
   Herstellerbilder kommen in sehr unterschiedlichen Groessen
   (ABB-CDN liefert z.B. 720x540). Ohne feste Box wird die
   Kachelhoehe unruhig. object-fit: contain verzerrt nicht.
   ================================================ */

.product-item .product-thumb .thumb-inner img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

/* Listenansicht: etwas kleiner */
.product-item.style-list .product-thumb .thumb-inner img {
    height: 160px;
}

@media (max-width: 767px) {
    .product-item .product-thumb .thumb-inner img {
        height: 160px;
    }
}

/* ================================================
   AUSLAUFPRODUKTE + NACHFOLGER-VERWEIS
   ================================================ */

.product-lifecycle-notice {
    border: 1px solid #f0d9a8;
    background: #fdf7e9;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 22px;
}

.product-lifecycle-notice .lifecycle-head {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8a6100;
    font-size: 15px;
    margin-bottom: 6px;
}

.product-lifecycle-notice p {
    margin: 0;
    font-size: 13.5px;
    color: #6b5836;
    line-height: 1.5;
}

.product-lifecycle-notice .lifecycle-successor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid #d8e6f5;
    border-radius: 6px;
    color: #12305f;
    font-size: 13.5px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-lifecycle-notice .lifecycle-successor:hover {
    border-color: #12305f;
    box-shadow: 0 3px 10px rgba(18, 48, 95, 0.08);
    text-decoration: none;
    color: #12305f;
}

.product-lifecycle-notice .lifecycle-successor-name {
    color: #6b7a8a;
    font-size: 12.5px;
    width: 100%;
}

/* ================================================
   COOKIE-BANNER
   ================================================ */

#mt-cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 99999;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(15, 52, 96, 0.16);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#mt-cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#mt-cookie-banner .mt-cookie-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 18px 22px;
    max-width: 1140px;
    margin: 0 auto;
}

#mt-cookie-banner .mt-cookie-text {
    flex: 1;
    min-width: 0;
}

#mt-cookie-banner .mt-cookie-text strong {
    display: block;
    font-size: 15px;
    color: #12305f;
    margin-bottom: 4px;
}

#mt-cookie-banner .mt-cookie-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #5b6875;
}

#mt-cookie-banner .mt-cookie-text a {
    color: #12305f;
    text-decoration: underline;
}

#mt-cookie-banner .mt-cookie-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
}

#mt-cookie-banner .mt-cookie-btn {
    border: 1px solid #12305f;
    background: #12305f;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

#mt-cookie-banner .mt-cookie-btn:hover {
    background: #0d2447;
}

#mt-cookie-banner .mt-cookie-refuse {
    background: #fff;
    color: #12305f;
}

#mt-cookie-banner .mt-cookie-refuse:hover {
    background: #eef4fb;
}

@media (max-width: 767px) {
    #mt-cookie-banner .mt-cookie-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }
    #mt-cookie-banner .mt-cookie-actions {
        flex-direction: column;
    }
    #mt-cookie-banner .mt-cookie-btn {
        width: 100%;
    }
}

/* ================================================
   RECHTSSEITEN (mentions légales / confidentialité)
   ================================================ */

.legal-page {
    padding: 45px 0 70px;
}

.legal-page .legal-title {
    font-size: 30px;
    font-weight: 700;
    color: #12305f;
    margin-bottom: 12px;
}

.legal-page .legal-intro {
    font-size: 14px;
    line-height: 1.65;
    color: #6b7a8a;
    max-width: 820px;
    margin-bottom: 34px;
}

.legal-page .legal-section {
    margin-bottom: 34px;
    max-width: 900px;
}

.legal-page .legal-section h2 {
    font-size: 18px;
    font-weight: 700;
    color: #12305f;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6eaee;
}

.legal-page .legal-section p {
    font-size: 14px;
    line-height: 1.7;
    color: #46525f;
    margin-bottom: 12px;
}

.legal-page .legal-list {
    margin: 0 0 12px 18px;
    padding: 0;
}

.legal-page .legal-list li {
    font-size: 14px;
    line-height: 1.7;
    color: #46525f;
    margin-bottom: 6px;
}

.legal-page .legal-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.legal-page .legal-table th,
.legal-page .legal-table td {
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f4;
    font-size: 13.5px;
    line-height: 1.55;
}

.legal-page .legal-table th {
    width: 34%;
    color: #12305f;
    font-weight: 600;
    background: #f8fafc;
}

.legal-page .legal-table td {
    color: #46525f;
}

.legal-page .legal-table-wide thead th {
    width: auto;
    background: #eef4fb;
}

.legal-page .legal-table code {
    background: #f1f4f7;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12.5px;
    color: #12305f;
}

.legal-page .legal-missing {
    display: inline-block;
    background: #fdf3e3;
    border: 1px dashed #e0b96a;
    color: #8a6100;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 4px;
}

.legal-page .legal-updated {
    font-size: 12.5px;
    color: #8a97a3;
    margin-top: 26px;
}

@media (max-width: 767px) {
    .legal-page .legal-table th {
        width: 42%;
    }
    .legal-page .legal-table th,
    .legal-page .legal-table td {
        padding: 8px;
        font-size: 12.5px;
    }
}

.footer-legal-links {
    display: inline-block;
    margin-left: 6px;
}

.footer-legal-links a {
    margin-left: 14px;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .footer-legal-links {
        display: block;
        margin: 8px 0 0 0;
    }
    .footer-legal-links a {
        margin: 0 12px 0 0;
    }
}

/* ============================================================
   Kategorieseiten: Ueberschrift und Einleitung
   ------------------------------------------------------------
   Die Kategorieseiten hatten keine H1 und keinen erklaerenden
   Text. Beides zaehlt fuer die Auffindbarkeit - und hilft dem
   Kunden, der von einer Suche kommt, sich zu orientieren.
   ============================================================ */

.mt-category-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    color: #12305f;
}

.mt-category-intro {
    max-width: 900px;
    margin: 0 0 26px;
    padding: 16px 20px;
    border-left: 3px solid #0bc1fa;
    background: #f7f9fd;
    border-radius: 0 6px 6px 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: #4a5a6a;
}

.mt-category-intro strong { color: #12305f; font-weight: 600; }

@media (max-width: 767px) {
    .mt-category-title { font-size: 21px; }
    .mt-category-intro { font-size: 14px; padding: 14px 16px; }
}

/* ============================================================
   Kategorienliste am Handy
   ------------------------------------------------------------
   Die farbigen Icon-Kacheln standen in style.css hinter
   @media (min-width: 992px) und griffen am Handy deshalb nie -
   dort erschienen nur schlichte Symbole. Die Liste sah dadurch
   anders aus als am Rechner.

   Zweites Problem: der Aufklapp-Pfeil sitzt absolut am rechten
   Rand (50 px breit), der Linktext hatte aber keinen Abstand
   dorthin. Lange Namen wie "Accessoires d'installation et de
   montage" liefen in den Pfeil hinein.
   ============================================================ */

.cat-icon-badge-mobile {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    margin-right: 12px;
    vertical-align: middle;
    flex-shrink: 0;
}

.cat-mobile-list .cat-menu-link,
.dungar-menu-panel > ul > li > a {
    display: flex;
    align-items: center;
    gap: 0;
    padding-right: 46px;      /* Platz fuer den Pfeil */
    min-height: 50px;
    line-height: 1.35;
}

.cat-menu-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der geklonte Menuebaum uebernimmt die Auszeichnung, aber nicht
   immer die Klassennamen - deshalb zusaetzlich generisch. */
.dungar-menu-panel > ul > li > a > .cat-icon-badge {
    margin-right: 12px;
}

/* Anschrift im Footer (NAP) */
.mt-footer-nap {
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
    color: #777;
    margin-bottom: 14px;
}
.mt-footer-nap strong { color: #12305f; }
.mt-footer-contact a { display: inline-flex; align-items: center; gap: 8px; }
.mt-footer-contact i { color: #0bc1fa; width: 16px; }

/* ====================================================================
   HAUPTNAVIGATION: sieben Punkte, eine Zeile

   Seit dem Zusammenlegen von Hauptsite und Shop stehen sieben Punkte im
   Menue statt fuenf. Die Vorlage setzt .main-menu auf "display: table" -
   damit darf die Zeile umbrechen, und "Contact" rutschte nach unten.

   Flexbox mit flex-wrap: nowrap schliesst den Umbruch konstruktiv aus.
   Die Abstaende sinken gestaffelt mit der Bildschirmbreite, damit die
   Punkte trotzdem in die Spalte neben "Toutes categories" passen.
   ==================================================================== */
.main-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.main-menu > li {
    flex: 0 0 auto;
}
.main-menu > li > a {
    padding-left: 15px;
    padding-right: 15px;
    white-space: nowrap;
}

@media (max-width: 1400px) {
    .main-menu > li > a { padding-left: 11px; padding-right: 11px;
                          font-size: 13px; letter-spacing: 0.02em; }
}
@media (max-width: 1200px) {
    .main-menu > li > a { padding-left: 8px; padding-right: 8px;
                          font-size: 12px; letter-spacing: 0; }
}

/* Unterhalb 992px uebernimmt das Mobilmenue der Vorlage - dort gilt die
   Flex-Zeile nicht, sonst stuenden die Punkte nebeneinander im Auszug. */
@media (max-width: 991px) {
    .main-menu { display: block; }
    .main-menu > li > a { font-size: 14px; letter-spacing: 0.05em; }
}

/* ====================================================================
   SEITENBREITE

   Bootstrap 3 begrenzt .container ab 1200px Bildschirmbreite fest auf
   1170px. Auf einem 1920er Monitor bleiben damit links und rechts je
   rund 375px leer - der Inhalt klebt in der Mitte, waehrend Haendler wie
   Rexel die Flaeche nutzen.

   Rexel laesst den Inhalt mitwachsen und haelt nur einen festen Rand
   frei. Genau das machen wir hier: ab 1200px nutzt .container die volle
   Breite abzueglich 40px (ab 1800px 60px) Rand und laeuft erst bei
   1780px gegen eine Grenze, damit Fliesstext nicht unlesbar lang wird.
   Fuer die Produktraster heisst das mehr Artikel je Reihe.
   ==================================================================== */
@media (min-width: 1200px) {
    .container {
        width: 100%;
        max-width: 1780px;
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media (min-width: 1800px) {
    .container {
        padding-left: 60px;
        padding-right: 60px;
    }
}

/* =========================================================================
   PREIS PER WHATSAPP ANFRAGEN

   Steht auf der Produktseite vor "Ajouter au panier". Fuer den Besucher,
   der ueber eine EAN-Suche hereinkommt, ist das die eigentliche Handlung:
   er hat das Teil in der Hand und will wissen, was es kostet. Der
   Warenkorb setzt ein Konto voraus, dieser Weg nicht.

   Deshalb traegt der Knopf das Gruen von WhatsApp und nicht das Blau des
   Shops - er soll als anderer Weg erkennbar sein, nicht als zweite
   Schaltflaeche neben dem Warenkorb.
   ========================================================================= */
.mt-wa-anfrage { margin: 14px 0 10px; }

.mt-wa-knopf {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 20px; border-radius: 6px;
    background: #25D366; color: #fff !important;
    font-size: 15px; font-weight: 600; line-height: 1.2;
    text-decoration: none !important;
    border: 0; cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}
.mt-wa-knopf:hover,
.mt-wa-knopf:focus {
    background: #1da851; color: #fff !important;
    box-shadow: 0 2px 10px rgba(37, 211, 102, .35);
    text-decoration: none !important;
}
.mt-wa-knopf:focus-visible { outline: 2px solid #12305f; outline-offset: 2px; }

/* Das Zeichen faerbt sich mit der Schrift - kein zweiter Farbwert, der
   beim naechsten Umstyling vergessen wird. */
.mt-wa-knopf svg {
    width: 21px; height: 21px; flex: 0 0 21px;
    fill: currentColor;
}

@media (max-width: 480px) {
    .mt-wa-knopf { width: 100%; justify-content: center; }
}