/*
Theme Name:   ecomus Child
Theme URI:    https://example.com/ecomus-child
Description:  Ein Child Theme von ecomus
Author:       lifedesign
Author URI:   https://example.com
Template:     ecomus
Version:      1.0.0
*/

/* Eigene CSS-Anpassungen kommen hierhin */

/*----------------------------------Compare Button Ausblenden------------------------*/

.wcboost-products-compare-button--single {
    display: none !important;
}


/*--------------------------------Custom Font----------------------------------*/



/*-------------------------------Newsletter--------------------------------------------*/
/* Layout für das E-Mail-Feld und den Abonnieren-Button */
.newsletter-wrapper {
  display: flex;
  align-items: center; /* Elemente vertikal auf die gleiche Höhe bringen */
}

.newsletter-wrapper input[type="email"] {
  width: 200px; /* Breite des E-Mail-Feldes */
  padding: 12px; /* Padding für die Höhe */
  box-sizing: border-box;
  border: 1px solid #ccc; /* Optional: Rand für das E-Mail-Feld */
  height: auto; /* Höhe wird durch Padding bestimmt */
}

.newsletter-wrapper input[type="submit"] {
  padding: 12px 20px; /* Padding für den Button */
  background-color: #653F5F;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  height: auto; /* Höhe wird durch Padding bestimmt */
  display: inline-block;
  vertical-align: middle; /* Sicherstellen, dass der Button zentriert ist */
  line-height: normal; /* Gleiche Textausrichtung wie beim E-Mail-Feld */
}

.newsletter-wrapper input[type="submit"]:hover {
  background-color: #ffff;
  color: black; /* Text beim Hover schwarz machen */
}

/* Abstand unterhalb des Buttons */
.newsletter-wrapper {
  margin-bottom: 5px;
}

/*--------------------------------------Link Farbe Footer---------------------------*/

/* NUR Links im Footer-Bereich innerhalb eines speziellen Containers ändern */
footer .elementor-widget-container p a {
  color: white; /* Link-Farbe im Footer auf weiß setzen */
  text-decoration: none; /* Optional: Unterstreichung entfernen */
}

footer .elementor-widget-container p a:hover {
  color: #D9BBD2; /* Hover-Farbe im Footer */
}

/*---------------------------------Kopfzeile-----------------------------------*/

.topbar-slides__item a {
    color: white !important; /* Link-Farbe auf Weiß setzen */
}

.topbar-slides__item a:hover {
    color: white !important; /* Link-Farbe auf Weiß auch beim Hover */
}


/*--------------------------------Änderungen Einzelprodukt---------------------------------*/

.em-buy-now-button {
    background-color: #653F5F !important; /* Button-Hintergrundfarbe ändern */
    border-color: #653F5F !important; /* Button-Rahmenfarbe ändern */
    color: white !important; /* Textfarbe bleibt weiß */
	
}

.em-buy-now-button:hover {
    background-color: #502A48 !important; /* Hover-Effekt: dunklere Hintergrundfarbe */
    border-color: #502A48 !important; /* Optional: dunklere Rahmenfarbe beim Hover */
}


.single-product .em-button-icon.wcboost-wishlist-button {
    background-color: white !important; /* Hintergrund auf Weiß setzen */
    border: 2px solid #9D638A !important; /* Umrandung in #9D638A */
    color: #9D638A !important; /* Text und Icon in #9D638A */
}

.single-product .em-button-icon.wcboost-wishlist-button .ecomus-svg-icon--trash svg {
    fill: #9D638A !important; /* Icon in #9D638A */
}

.single-product .em-button-icon.wcboost-wishlist-button:hover {
    background-color: #9D638A !important; /* Hover: Hintergrund in #9D638A */
    color: white !important; /* Text und Icon in Weiß */
}

.single-product .em-button-icon.wcboost-wishlist-button:hover .ecomus-svg-icon--trash svg {
    fill: white !important; /* Icon in Weiß beim Hover */
}

.single-product div.product .buy-now-before-wrapper {
	display: inline-block !important;
	align-items: center;
	gap: 7px;
}
/*-------------------------Sterne Bewertung Ausblenden------------------------------*/

.product-inner .star-rating, 
.product-inner .review-count {
    display: none !important; /* Versteckt die Sternebewertung und die Anzahl der Bewertungen bei Produkten */
}


/*------------------------------Einzel Produkt Layout Anpassungen-----------------------------------------*/
/* Stil für den "Personalisieren"-Button */
.wp-block-button__link.wp-element-button {
    background: linear-gradient(135deg, #9D638A, #653F5F); /* Farbverlauf */
    color: #fff;
    padding: 14px 24px; /* Größere Padding für Buttongröße */
	margin-bottom:20px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Abstand zwischen Icon und Text */
    transition: all 0.3s ease;
}

/* Icon für den "Personalisieren"-Button */
.wp-block-button__link.wp-element-button::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"/></svg>');
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"/></svg>');
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
}


.ecomus-extra-link-item--ask-question {
    display: none !important;
}

/* Lila Umrandung für ausgewählte Items */
.wcboost-variation-swatches__item.selected {
    border: 2px solid #9D638A !important;
}

/* Lila Umrandung beim Hover */
.wcboost-variation-swatches__item:hover {
    border: 2px solid #9D638A !important;
}

/* Zeilenumbrüche in der kurzen Beschreibung*/

.short-description__content {
    white-space: pre-line;
}



/*----------------------------------Einzel Produkt Meta Data ausblenden------------------------------*/

.product_meta {
    display: none !important;
}


/*-------------------------------Woocommerce Message Anpassung---------------------------------------*/

.ecomus-pbt-alert.woocommerce-message {
    background-color: #f4e8f1 !important; /* Hintergrundfarbe */
    color: #653F5F !important; /* Textfarbe */
}


/*----------------------------------Personalisierungs Anfrage Formular-----------------------------------*/

/* Style für die Akzeptanz-Checkbox und den Text */
.wpcf7-form-control.wpcf7-acceptance {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item {
    display: flex;
    align-items: center;
}

.wpcf7-form-control.wpcf7-acceptance input[type="checkbox"] {
    margin-right: 8px; /* Abstand zwischen Checkbox und Text */
}

.wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    margin-left: 0px; /* Passe diesen Wert an, um die Checkbox weiter nach links zu schieben */
}

/*--------------------------------------Personalisierung Formular------------------------------------------------*/

/* Layout für die Produktauswahl */
.product-options {
    display: flex;
    gap: 20px;
    justify-content: flex-start; /* Links ausrichten */
    flex-wrap: wrap; /* Zeilenumbruch, falls zu wenig Platz */
    margin-bottom: 20px; /* Abstand unter den Produktoptionen */
    margin-top: 15px; /* Zusätzlicher Abstand oberhalb der Produktauswahl */
}

/* Stil für die Produkt-Labels */
.product-options label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-align: center;
    width: 140px; /* Breite der Option für die Bildgröße */
    max-width: 140px;
    padding: 5px; /* Rahmenabstand verkleinert */
    border: 2px solid transparent; /* Unsichtbarer Rahmen */
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    border-radius: 8px; /* Optional, um die Ecken abzurunden */
}

/* Radiobuttons unsichtbar machen */
.product-options input[type="radio"] {
    opacity: 0; /* Radiobuttons ausblenden, aber weiterhin auswählbar */
    position: absolute;
    left: -9999px; /* Position außerhalb des sichtbaren Bereichs */
}

/* Deutlicher Rahmen und gefärbter Titel bei Auswahl */
.product-options input[type="radio"]:checked + label {
    border: 2px solid #9D638A; /* Kräftiger Rahmen in der Standardfarbe */
    background-color: #f0f0f0; /* Leichter Hintergrund */
}

/* Stil für die Produktbilder */
.product-options label img {
    width: 100%; /* Passt das Bild an die Breite des Containers an */
    height: auto;
    margin-bottom: 8px; /* Abstand unter dem Bild */
    box-sizing: border-box;
}

/* Abstand für Texte und Felder */
p, .product-options {
    margin-bottom: 15px; /* Abstand unter Texten und Feldern, angepasst */
}

/* Anpassung der Beschreibung und Kontaktdatenfelder */
textarea, input[type="text"], input[type="email"], input[type="tel"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

/* Stil für den Absenden-Button */
input[type="submit"] {
    background-color: #9D638A; /* Primärfarbe des Buttons */
    color: #fff;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #7b4e6b; /* Hover-Farbe des Buttons */
}


/* Stil für ausgewähltes Produkt */
.product-options label.selected {
    border: 2px solid #9D638A; /* Kräftiger Rahmen */
}


/* Eingabefeld für zusätzlichen Produktlink */
#additional-product-link input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}


/* Style speziell für die Datenschutz-Checkbox */
input#terms-acceptance {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
}

/*-----------------------------------Warenkorb Leer-------------------------*/

.wp-block-heading.has-text-align-center.with-empty-cart-icon.wc-block-cart__empty-cart__title {
    display: none;
}

.wp-block-separator.has-alpha-channel-opacity.is-style-dots {
    display: none;
}


/*---------------------------------Colum tauschen - B2B Seite -----------------------------*/

@media (max-width: 768px) {
    .mobile-first {
        order: -1; /* Das Element wird nach vorne gesetzt */
    }
}

.page-id-543 .ecomus-image-box-carousel__button {
    display: none;
    margin: 0 0 30px 15px;
}




/*----------------------------------Button Sidebar Anpassung--------------------------------------*/

.woocommerce-mini-cart__buttons a.wc-forward:first-child {
    background-color: #9D638A !important; /* Hintergrundfarbe */
    color: #fff !important; /* Textfarbe */
    border: none !important;
}

.woocommerce-mini-cart__buttons a.wc-forward:first-child:hover {
    background-color: #653F5F !important; /* Hover bleibt gleich */
    color: #fff !important; /* Textfarbe bleibt weiß */
}


/*---------------------------------------Wunschliste Anpassung------------------------------------------*/

.product-date {
    display: none !important;
}
/*---------------------------------------Woocommerce ------------------------------------------*/
.woocommerce-app-notice {
    display: none !important;
}

/*---------------------------------------Plugin input fields for Woocommerce ------------------------------------------ */



#alg_wc_pif_local_1 + img {
    width: auto;
    max-width: 374px; /* nicht größer als Original */
    height: auto;
    margin: 0 auto;
    object-fit: contain; /* behält Proportionen */
}



#alg_wc_pif_local_1 {
	margin: 30px 20px;
}