/* Schriftarten */
@font-face {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/templates/Bestprotection/themes/base/fonts/Montserrat-Regular.ttf') format('truetype');
}

.et-text-hyphens {
    hyphens: manual;
}

/* Hauptslider */
.et-widget-mainslider .container-fluid { padding-top: 0px; }


/* Header-Hintergrund */
.et-widget-headermain.bg-fullsize {
    background-image: url('../media/image/Background_BPHeader2.jpg'); /* Relativer Pfad zum Bild */
    background-repeat: repeat;                               /* Bild horizontal und vertikal wiederholen */
    background-attachment: scroll;                           /* Hintergrund scrollt mit (Standard) */
    background-position: top left;                           /* Startposition */
}

.et-header-main-search { background-color: #1c201e00 !important; }

/* 1. Hintergrund der gesamten Navigationsleiste */
#et-menu-main-wrapper {
  background-color: #1c201e !important;
}

/* Hintergrund Sale-Kategorie */
#et-menu-main-item-ceacb9acc29ac19cfa8ec38584dd99b8373d4d6592dbe0161793696719 { background-color: #710505 !important; }

/* 2. Basis-Styling für die Menüpunkte (Schriftart & Textfarbe) */
#et-menu-main-wrapper .et-menu-item-link .et-textfield {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400;
  font-size: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  transition: all 0.2s ease-in-out;
}

.et-menu-item-link {
	padding-right: 1rem !important; 
	padding-left: 1rem !important;
}

/* 3. HOVER-Zustand (wenn man mit der Maus drüberfährt) */
#et-menu-main-wrapper .et-menu-item:hover {
  background-color: #2c322f !important;
  border-top: 2px solid #596815 !important;    /* Klares Ersetzen des oberen Borders */
  border-bottom: 2px solid #596815 !important; /* Klares Ersetzen des unteren Borders */
}

#et-menu-main-wrapper .et-menu-item:hover .et-textfield {
  color: #ffffff !important;
}

/* 4. AKTIVER Zustand (aktive Kategorie / geöffnete Seite) */
#et-menu-main-wrapper .et-menu-item.active,
#et-menu-main-wrapper .et-menu-item[aria-expanded="true"] {
  background-color: #2c322f !important;
  border-top: 2px solid #596815 !important;
  border-bottom: 2px solid #596815 !important;
}

#et-menu-main-wrapper .et-menu-item.active .et-textfield,
#et-menu-main-wrapper .et-menu-item[aria-expanded="true"] .et-textfield {
  color: #ffffff !important;
}

/* 5. Abstände & Basis-Border (damit die Kachel nicht 'springt' beim Hovern) */
#et-menu-main-wrapper .et-menu-item {
  background-color: transparent;
  border-top: 2px solid transparent !important;    /* Reserviert den Platz oben */
  border-bottom: 2px solid transparent !important; /* Reserviert den Platz unten */
  transition: all 0.2s ease-in-out;
}

/* 6. Design MEGA-Menü */
#et-menu-main-wrapper,
#et-menu-main-content,
.et-menu-item-content {
  background-color: #1c201e !important;
  color: #ffffff !important;
}

/* 2. Kategorie-Spalten & Abstufungen */
.et-menu-category-subcategory {
  padding: 15px !important;
}

/* 3. Haupt-Überschriften der Spalten (z. B. Schutzwesten, Schutzhelme) */
.et-menu-category-subcategory-title,
.et-menu-category-subcategory-title h4,
.et-menu-category-subcategory-title a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding-bottom: 6px !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
}

.et-menu-category-subcategory-title { border-bottom: 1px solid #2c322f !important; }

/* 4. Unterpunkte (z. B. Komplettsets, Stichschutzwesten) */
#et-menu-main-wrapper .et-menu-category-subcategory-child .link-discreet {
  color: #b5bcba !important; /* Gut lesbares Hellgrau */
  font-size: 13px !important;
  transition: all 0.2s ease-in-out !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 3px 0 !important;
}

/* Hover-Effekt für die Unterpunkte */
.et-menu-category-subcategory-children a:hover,
.et-menu-category-subcategory-child a:hover,
.et-menu-category-subcategory-title a:hover {
  color: #596815 !important; /* Taktisches Olivgrün beim Drüberfahren */
  transform: translateX(3px); /* Leichter Einrück-Effekt beim Hovern */
}


/* Container-Breite & Ausrichtung des Suchfelds */
.search-wrapper {
  max-width: 500px; /* Optional: Breite der Suchleiste im Header anpassen */
  width: 100%;
}

/* Suchfeld */
.search-wrapper .input-group {
  border-radius: 20px; /* Stark abgerundete Pille-Form aus der Preview */
  overflow: hidden;
  background-color: #2c322f;
  border: 1px solid #3a423e;
  transition: all 0.2s ease-in-out;
}

/* Eingabefeld (Textfeld & Typeahead) */
.search-wrapper input#search-header,
.search-wrapper .ac_input {
  background-color: transparent !important;
  color: #e1e5e2 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 18px !important;
  font-size: 14px;
}

/* Platzhalter-Text ("Suchen") */
.search-wrapper input#search-header::placeholder {
  color: #828c85 !important;
}

/* Fokus-Effekt (wenn der User ins Feld klickt) */
.search-wrapper .input-group:focus-within {
  border-color: #596815 !important;
  box-shadow: 0 0 8px rgba(89, 104, 21, 0.4) !important;
}

/* Der Lupe-Button rechts (.input-group-append) */
.search-wrapper .input-group-append,
.search-wrapper .input-group-append button,
.search-wrapper .input-group-append .btn {
  background-color: #596815 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

/* Hover-Effekt für den Lupe-Button */
.search-wrapper .input-group-append:hover,
.search-wrapper .input-group-append button:hover,
.search-wrapper .input-group-append .btn:hover {
  background-color: #3f6b2b !important;
}

/* Lupe-Icon im Button auf weiß setzen */
.search-wrapper .input-group-append i,
.search-wrapper .input-group-append svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.et-product-slider-product.productbox {
  border: 1px solid #e0e4e1 !important;
  border-radius: 8px !important;
transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important; }

.productbox-image img.product-image {
  border-radius: 8px !important;
}

/* Footer */
#footer .et-footer-box-heading h3.et-footer-box-headline {
  position: relative !important;
  display: inline-block !important;
  width: auto !important;
  padding-bottom: 6px !important; /* Abstand zwischen Text und Linie */
}

#footer .et-footer-box-heading h3.et-footer-box-headline::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 30% !important; /* 30% Textlänge */
  height: 2px !important; /* Linienstärke */
  background-color: #596815 !important; /* Logo-Grün */
}

.et-footer-box-imagelink img {
	max-width: 70px;
}

#footer .et-widget-imagelist .et-image-list-item img {
	max-width: 150px;
}

#vat-credits {
    background-color: #0d0f0e !important;
    color: #9ba39e !important;
	border-top: 1px solid #1c201e !important;
}

#vat-credits .container {
    background-color: #0d0f0e !important;
    color: #9ba39e !important;
	border-top: 1px solid #1c201e !important;
}

/* Listing */
.et-categories-mega-sub-category .text-truncate {overflow: visible;}
.productbox { height: 100% !important; }
.productbox-title { min-height: 48px !important; color: #1c201e; font-weight: 400; }
.productbox-manufacturer { color: #596815; font-weight: 700;}
.productbox-price { color: #1c201e; }
.productbox-title .text-clamp-2,
.et-item-box-title .text-clamp-2 {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}


/* Artikeldetailseite */
.tab-content { background: #fff; color: #000; padding: 30px; margin: 0px; }
.product-info-inner { background-color: #fff; padding: 20px; border-radius: 5px; }
.et-productdetail-wrapper .product-info .product-actions { border: none; }
.et-productdetail-wrapper .product-manufacturer img { max-width: 100px; }
.et-productdetail-wrapper .product-essential-info-row { color: #000; }
.choose_quantity .input-group-text { display: none; }
.swatches-image { width: 70px; }
.swatches .variation { border: 1px solid #c3c0c0; }
.et-product-slider-product.productbox { background-color: #fff; }
.et-productdetail-wrapper #gallery .js-gallery-images .product-image {  background-color: #fff; }

/* Kontaktformular */
/* 1. Haupt-Container des Formulars (Card-Look wie die Textboxen) */
.contact-form .et-boxed-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-sizing: border-box !important;
}

/* 2. Überschriften (z.B. "Kontaktdaten", "Nachricht") als Badge-Look */
.contact-form .h3,
.contact-form legend {
  display: inline-block !important;
  background-color: #f1f4e6 !important;
  color: #424e0f !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border-left: 3px solid #596815 !important;
  margin-bottom: 16px !important;
}

/* 3. Labels & Pflichtfeldtexte */
.contact-form label,
.contact-form .col-form-label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 4px !important;
}

.contact-form label .optional {
  color: #94a3b8 !important;
  font-weight: 400 !important;
  font-size: 0.8rem !important;
}

/* 4. Eingabefelder (Inputs, Textarea, Selects) */
.contact-form .form-control {
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Fokus-Zustand mit Oliv-Akzent */
.contact-form .form-control:focus {
  border-color: #596815 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(89, 104, 21, 0.18) !important;
}

/* 5. Absende-Button */
.contact-form button[type="submit"],
.contact-form .btn-primary {
  background-color: #596815 !important;
  border-color: #596815 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.contact-form button[type="submit"]:hover,
.contact-form .btn-primary:hover {
  background-color: #424e0f !important;
  border-color: #424e0f !important;
  color: #ffffff !important;
}

/* 6. Info-Hinweise (z.B. "Pflichtfelder mit * markiert") */
.contact-form .required-info {
  font-size: 0.8rem !important;
  color: #64748b !important;
  margin-bottom: 12px !important;
}

/* Formular */
.form-control { color: #fff; }
.col-form-label { background-color: #000; }
#quantity-grp0 .form-control { border: none; }
.label-slide .form-group { color: #000; }
.custom-control-label { color: #fff;}


/* Checkout - Versandarten */
/* Container jeder Option als dezente Karte gestalten */
.checkout-shipping-form-options .custom-radio {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
/* Hervorhebung bei aktiver Auswahl / Hover */
.checkout-shipping-form-options .custom-radio:hover,
.checkout-shipping-form-options .custom-control-input:checked ~ .custom-control-label {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}
/* Logos kompakt und dezent halten */
.checkout-shipping-form-options .title img {
  max-height: 40px !important;
  width: auto !important;
  margin-right: 12px;
  border-radius: 3px;
  vertical-align: middle;
}
/* Lieferzeit dezent unter den Titel setzen und Kontrast anheben */
.checkout-shipping-form-options .title .desc {
  display: block;
  font-size: 0.82rem;
  color: #a5a5a5;
  margin-top: 2px;
}
/* Preis rechts vertikal mittig ausrichten */
.checkout-shipping-form-options .shipping-option-price {
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}