/* dancing-script-regular - latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/dancing-script-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/dancing-script-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* dancing-script-600 - latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/dancing-script-v16-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/dancing-script-v16-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* dancing-script-700 - latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/dancing-script-v16-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/dancing-script-v16-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* dancing-script-500 - latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/dancing-script-v16-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/dancing-script-v16-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* ------------------------------------------------------------
   Bom Dia Farben – nur hier ändern
   ------------------------------------------------------------ */
:root {
   --bd-bg:        #f4efe6;   /* Seitenhintergrund (Beige)                 */
   --bd-card:      #faf8f4;   /* Artikel-Karten: nur leicht heller als Bg  */
   --bd-card-line: #e8e0d4;   /* feiner Rand der Karten                    */
   --bd-line:      #ddd3c4;   /* Trennlinien                               */
   --bd-accent:    #8b3a2e;   /* Akzent Rotbraun (ersetzt NOVA-Gelb)       */
   --bd-header:    #faf8f4;   /* Header + Dropdown-Menü (= Kartenfarbe)    */
   --bd-topbar:    #ebe4d8;   /* obere Info-Leiste                         */
   --bd-red:       #a11a17;   /* Logo-Rot  (Sale)                          */
   --bd-orange:    #f7a600;   /* Logo-Orange (Bestseller)                  */
   --bd-green:     #8a9957;   /* Bom-Dia-Grün (Neu)                        */
   --bd-footer:    #3b302b;   /* Footer: warmes Espresso-Braun             */
   --bd-footer-txt:#f4efe6;   /* Footer-Schrift (Creme)                    */
}

body,
#main-wrapper {
   background-color: var(--bd-bg) !important;
}

/* Trennlinien sichtbar auf Beige */
hr,
.breadcrumb-wrapper,
.productlist-filter-headline {
   border-color: var(--bd-line) !important;
}

/* ------------------------------------------------------------
   Artikel-Karten – Kategorieseiten / Suche
   ------------------------------------------------------------ */
.productbox-inner {
   background-color: var(--bd-card);
   border: 1px solid var(--bd-card-line);
   border-radius: 6px;
   padding: 1rem;
}
.productbox.productbox-hover .productbox-inner::before {
   background-color: var(--bd-card);
   border-radius: 6px;
}
#product-list .product-wrapper {
   margin-bottom: 1.5rem;
}

/* Alle Karten einer Reihe gleich hoch */
#product-list .product-wrapper > .productbox,
#product-list .productbox > form,
#product-list .productbox-inner {
   height: 100%;
}

/* ------------------------------------------------------------
   Artikel-Karten – Product Streams / Artikel-Slider (Startseite, OPC)
   ------------------------------------------------------------ */
.slick-type-product .slick-slide,
.slick-type-half .slick-slide {
   height: auto;
}
.slick-type-product .slick-slide > div,
.slick-type-half .slick-slide > div,
.product-wrapper-product {
   height: 100%;
}
.product-wrapper-product {
   padding-bottom: .5rem;
}
.product-wrapper-product > a {
   display: block;
   height: 100%;
   background-color: var(--bd-card);
   border: 1px solid var(--bd-card-line);
   border-radius: 6px;
   padding: .75rem .75rem 1rem;
   transition: box-shadow .2s ease;
}
.product-wrapper-product > a:hover {
   box-shadow: 0 4px 14px rgba(60, 40, 20, .10);
}
.product-wrapper-product .item-slider-desc {
   display: block;
   margin-top: .5rem;
}

/* ------------------------------------------------------------
   Weiße Bildhintergründe mit der Karte verschmelzen
   (Weiß wird zur Kartenfarbe, Flaschen bleiben unverändert)
   ------------------------------------------------------------ */
.productbox-image img,
.item-slider img {
   mix-blend-mode: multiply;
}

/* ------------------------------------------------------------
   Header + Mega-Dropdown in Kartenfarbe
   ------------------------------------------------------------ */
header,
#jtl-nav-wrapper,
header .navbar-collapse,
header .dropdown-menu,
.fixed-search {
   background-color: var(--bd-header) !important;
}
header .dropdown-menu {
   border-top: 1px solid var(--bd-card-line);
}
/* feine Linie zwischen Header und Seite statt hartem Schatten */
#jtl-nav-wrapper {
   border-bottom: 1px solid var(--bd-card-line);
}

/* ------------------------------------------------------------
   Alle Dropdowns (Sortierung, Artikel pro Seite, Filter,
   Suchvorschläge, Variationsauswahl …)
   ------------------------------------------------------------ */
.dropdown-menu,
.tt-dropdown-menu,
.tt-menu {
   background-color: var(--bd-header) !important;
   border: 1px solid var(--bd-card-line) !important;
   border-radius: 6px;
   box-shadow: 0 6px 18px rgba(60, 40, 20, .10);
   padding: .35rem 0;
}
.dropdown-item {
   color: #525252;
   border-left: 3px solid transparent;
}
.dropdown-item:hover,
.dropdown-item:focus,
.tt-menu .tt-suggestion:hover,
.tt-menu .tt-suggestion.tt-cursor {
   background-color: var(--bd-bg) !important;
   color: #313237;
}
/* aktuell gewählter Eintrag */
.dropdown-item.active,
.dropdown-item:active {
   background-color: var(--bd-bg) !important;
   color: #313237 !important;
   font-weight: 600;
   border-left-color: var(--bd-accent);
}
/* Button, dessen Dropdown gerade offen ist */
.show > .btn.dropdown-toggle,
.btn.dropdown-toggle:focus {
   border-color: var(--bd-accent) !important;
   box-shadow: none !important;
}
/* Mega-Menü im Header behält seinen eigenen Stil */
header .dropdown-menu {
   border-radius: 0;
   border-left: 0 !important;
   border-right: 0 !important;
   padding: 0;
}
header .dropdown-item { border-left: 0; }

/* Logo: weißen Hintergrund ausblenden, falls das Logo kein transparentes PNG ist */
#shop-logo {
   mix-blend-mode: multiply;
}

/* ------------------------------------------------------------
   Ribbons / Badges in Bom-Dia-Farben
   ribbon-2 = Sale, ribbon-1 = Bestseller, ribbon-3 = Neu
   ------------------------------------------------------------ */
.ribbon-2 { background-color: var(--bd-red) !important;    color: #fff !important; }
.ribbon-2::before { border-right-color: #6e1210 !important; }
.ribbon-1 { background-color: var(--bd-orange) !important; color: #313237 !important; }
.ribbon-1::before { border-right-color: #b87c00 !important; }
.ribbon-3 { background-color: var(--bd-green) !important;  color: #fff !important; }
.ribbon-3::before { border-right-color: #66733f !important; }
.ribbon { box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); }

/* Buttons in Rotbraun: Schrift weiß */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
   color: #fff;
}


h1 {
  font-family: 'Dancing Script';
  color: #8A9957;  
  font-size: 3em;
}

#header-top-bar { background-color: var(--bd-topbar) !important; }
#header-top-bar .flex-row-reverse { flex-direction: row !important; justify-content: space-between; }
#header-top-bar .exVersand { font-weight: 300; line-height: 35px; }
#header-top-bar .exKontakt { font-weight: 600; line-height: 35px; }


#footer {
   background-color: var(--bd-footer) !important;
   color: var(--bd-footer-txt);
}
#footer a,
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer h2 .newsletter-footer-heading,
#footer .productlist-filter-headline { color: var(--bd-footer-txt) !important; }
#footer a:hover { color: #ffffff !important; }
#footer hr,
#footer .productlist-filter-headline { border-color: rgba(244, 239, 230, .25) !important; }

.newsletter-footer-heading { color: var(--bd-footer-txt) !important; font-family: 'Dancing Script'; font-size: 3em;}

#footer .nav.nav-list { display: block !important; }
#footer .nav.nav-list .fa { font-size: 1.2em; }