/*
 Theme Name:     Divi Child
 Theme URI:      https://allerhand.design
 Description:    Child Theme
 Author:         Thomas R. Jörger
 Author URI:     https://allerhand.design
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */
/*********** Horizontales Scrollen verhindern ***********/
#page-container {
    overflow-x: hidden;
}

/************ PREISE BANNER FIX ******************/
/* Wir sprechen das Element direkt über die Divi-Struktur an */
.et_pb_module.bestseller-badge {
    position: relative !important;
    overflow: hidden !important;
}

.et_pb_module.bestseller-badge::before {
    content: "BELIEBT" !important;
    display: block !important;
    position: absolute !important;
    
    /* Positionierung */
    top: 15px !important;
    right: -35px !important;
    width: 140px !important;
    
    /* Styling */
    background-color: #ad9551 !important;
    color: #ffffff !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 28px !important;
    
    /* Drehung */
    transform: rotate(45deg) !important;
    -webkit-transform: rotate(45deg) !important; /* Safari Support */
    
    /* Ebenen */
    z-index: 9999 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    pointer-events: none !important;
}

/***** Länderwappen vor Button *****/
/***** Länderwappen vor Button - FIXED *****/

/* Wir sprechen NUR das Text-Innere an, wenn es INNERHALB eines Button-Links liegt */
.custom-chf-button, 
.custom-eur-button {
    display: flex !important;
    flex-direction: row !important; /* Nebeneinander (Icon & Text) */
    align-items: center !important;
    justify-content: center !important;
    
    /* FIXE GRÖSSE */
    width: 280px !important;
    height: 46px !important; 
    overflow: hidden !important; 
    
    background-color: #438d91 !important;
    color: #ffffff !important;
    margin: 8px auto !important; /* Zentriert den Button in der Spalte */
    padding: 0 !important;
    
    border-radius: 50px !important;
    border: 2px solid #438d91 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    
    /* Hier korrigieren wir die Line-Height nur für den Button */
    line-height: 1.2 !important; 
}

/* Entferne den allgemeinen .et_pb_text_inner Block komplett! */

/* 3. Hover-Effekt (Invertierung) */
.custom-chf-button:hover, 
.custom-eur-button:hover {
    background-color: #d8eceb !important;
    color: #438d91 !important;
}

/* 4. Das Innere (Icon & Text) bändigen */
.custom-chf-button .button-icon,
.custom-eur-button .button-icon {
    width: 20px !important;
    height: 20px !important; /* Quadratisch fixieren */
    margin-right: 10px !important;
    object-fit: contain !important;
    display: block !important;
}

.custom-chf-button span,
.custom-eur-button span {
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    line-height: 1 !important; /* Verhindert das Aufblähen von innen */
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}


/********** MENU HERZ ******************/

/* 1. GRUNDZUSTAND & ANIMATION */
@keyframes herzschlag {
    0% { transform: translateX(-50%) scale(1); }
    14% { transform: translateX(-50%) scale(1.3); }
    28% { transform: translateX(-50%) scale(1); }
    42% { transform: translateX(-50%) scale(1.3); }
    70% { transform: translateX(-50%) scale(1); }
}

.et_pb_menu .nav li a {
    position: relative !important;
    padding-top: 25px !important;
}

/* Das Herz (Standard: Teal) */
.et_pb_menu .nav li a::before {
    content: "" !important; /* Unicode: U+1F496, UTF-8: F0 9F 92 96 */
	background-image: url('https://anjajoerger.life/wp-content/uploads/2026/03/heart_icon.png');
	width: 15px;
	height: 15px;
	background-size: contain;
	background-repeat: no-repeat;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    font-size: 16px !important;
    color: #2d878d !important; /* Dein Teal-Ton */
    opacity: 0 !important;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease !important;
}

/* 2. HOVER & AKTIVER LINK (Anzeigen) */
.et_pb_menu .nav li a:hover::before,
.et_pb_menu .nav li.current-menu-item a::before {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Nur beim Hover soll es schlagen */
.et_pb_menu .nav li a:hover::before {
    animation: herzschlag 1.2s infinite ease-in-out !important;
}

/* 3. STICKY MODUS (Farbe auf Weiß ändern) */
/* Wir nutzen mehrere Selektoren, um Divi 5 sicher zu "fangen" */
.et_pb_section.et_pb_sticky_element .et_pb_menu .nav li a::before,
.et_pb_sticky .et_pb_menu .nav li a::before,
.et_pb_section_sticky .et_pb_menu .nav li a::before {
    color: #ffffff !important;
}

/* Sicherstellen, dass das aktive Herz im Sticky-Modus auch weiß bleibt */
.et_pb_section.et_pb_sticky_element .et_pb_menu .nav li.current-menu-item a::before {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* --- 1. BASIS (Unverändert lassen) --- */
#menu-main li.makrame:before, 
#menu-main li.makrame a:before {
    display: none !important;
    content: none !important;
}

#menu-main li.makrame {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin-left: 20px !important;
	margin-bottom: -12px !important;
}

/* --- 2. NORMALER ZUSTAND --- */
#menu-main li.makrame a {
    font-size: 12px !important;
	font-weight: bold;
    color: #ffffff !important;
    background-color: #2c8b92 !important;
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 18px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    transition: all 0.4s ease-in-out !important;
}

/* --- 3. STICKY-HAMMER (Spezifisch auf deine IDs) --- */
/* Wir schauen auf die Section-Klasse UND die Menü-ID aus deinen Screenshots */
.et_pb_section_1_tb_header.et_pb_sticky #menu-main li.makrame a,
.et_pb_section_1_tb_header.et_pb_sticky_module #menu-main li.makrame a,
div.et_pb_sticky #menu-main li.makrame a,
body .et_pb_sticky li.makrame a {
    background-color: #a5d0d1 !important;
    color: #2c8b92 !important;
}

/* --- 4. MOBILE (Sicherstellen, dass er da ist) --- */
@media (max-width: 980px) {
    /* Wir erzwingen die Anzeige im mobilen Menü-Container */
    .et_mobile_menu li.makrame,
    #et-mobile-menu li.makrame {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }
    
    .et_mobile_menu li.makrame a {
		font-size: 12px !important;
        display: inline-block !important;
        background-color: #a5d0d1 !important;
		font-weight: bold !important;
        padding: 5px 20px !important;
        border-radius: 20px !important;
    }
}

/* --- VERKAUFT-LOGIK --- */

/* Grundzustand: Status-Text ist immer unsichtbar */
.status-anzeige {
    display: none !important;
}

/* Wenn das Skript 'ist-verkauft' erkennt */

/* 1. Button komplett eliminieren */
.schmuck-kachel.ist-verkauft .et_pb_button_module_wrapper {
    display: none !important;
}

/* 2. Status-Text schick machen und anzeigen */
.schmuck-kachel.ist-verkauft .status-anzeige {
    display: block !important;
    background-color: #f4f4f4 !important;
    color: #2c8b92 !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
    border: 1px dashed #2c8b92 !important;
    font-weight: bold !important;
    text-align: center !important;
    margin-top: 5px !important;
}