/* ==========================================================
   wachs-en.de – Design-Aufwertung für das classic-Theme
   Ablage: themes/classic/assets/css/custom.css
   Farbwelt: Honig / Bienenwachs / Holz – ohne externe Fonts (DSGVO)
   ========================================================== */

:root {
  --honig:        #c8891a;   /* Hauptfarbe: Buttons, Links */
  --honig-dunkel: #9c6610;   /* Hover */
  --wachs:        #f6e7c1;   /* helle Flächen */
  --creme:        #fdf9f0;   /* Seitenhintergrund */
  --holz:         #3b2a1a;   /* Text, Footer */
  --holz-hell:    #6b5440;   /* Nebentext */
  --linie:        #e8dcc0;
  --radius:       10px;
  --schatten:     0 2px 10px rgba(59, 42, 26, .08);
  --schatten-hov: 0 8px 24px rgba(59, 42, 26, .16);
  --schrift-titel: Georgia, "Palatino Linotype", "Book Antiqua", serif;
}

/* ---------- Grundlayout ---------- */
body,
#wrapper {
  background: var(--creme);
  color: var(--holz);
}
a { color: var(--honig-dunkel); }
a:hover, a:focus { color: var(--honig); text-decoration: none; }

h1, h2, h3, .h1, .h2, .h3,
.products-section-title,
.page-header h1 {
  font-family: var(--schrift-titel);
  color: var(--holz);
  letter-spacing: .01em;
}

/* Abschnittstitel mit Honig-Unterstrich */
.products-section-title {
  text-transform: none;
  font-size: 1.75rem;
  text-align: center;
  margin: 2.5rem 0 1.5rem;
  position: relative;
}
.products-section-title::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  margin: .6rem auto 0;
  border-radius: 2px;
  background: var(--honig);
}

/* ---------- Header ---------- */
#header {
  background: #fff;
  box-shadow: 0 1px 0 var(--linie);
}
#header .header-nav {
  background: var(--holz);
  border-bottom: 0;
  max-height: none;
}
#header .header-nav,
#header .header-nav a,
#header .header-nav .material-icons,
#header .header-nav .user-info a,
#header .header-nav .blockcart,
#header .header-nav .cart-preview .shopping-cart {
  color: var(--wachs) !important;
}
#header .header-nav .blockcart {
  background: transparent;
}
#header .header-nav .blockcart.active {
  background: var(--honig);
}
#header .header-nav .blockcart.active a,
#header .header-nav .blockcart.active .shopping-cart {
  color: #fff !important;
}

/* Shopname als Schriftzug, solange kein Logo-Bild gesetzt ist */
#header .header-top h1,
#header #_desktop_logo h1,
#header #_desktop_logo a {
  font-family: var(--schrift-titel);
  color: var(--holz);
  font-size: 1.6rem;
  font-weight: 700;
}

/* Hauptmenü */
#header .top-menu a[data-depth="0"] {
  color: var(--holz);
  font-weight: 600;
  text-transform: none;
  font-size: 1rem;
  padding: .75rem 1rem;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
#header .top-menu a[data-depth="0"]:hover,
#header .top-menu li:hover > a[data-depth="0"] {
  color: var(--honig-dunkel);
  background: var(--wachs);
}
.top-menu .sub-menu {
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--schatten-hov);
  border-top: 3px solid var(--honig);
}
.top-menu .sub-menu a:hover { color: var(--honig-dunkel); }

/* Suche */
#search_widget form input[type="text"] {
  background: var(--creme);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding-left: 2.5rem;
}
#search_widget form input[type="text"]:focus {
  background: #fff;
  border-color: var(--honig);
  outline: none;
}
#search_widget form i { color: var(--holz-hell); }

/* ---------- Slider ---------- */
#carousel {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--wachs) 0%, #f0d48f 100%);
}
#carousel .carousel-item .caption {
  background: rgba(30, 20, 10, .82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  bottom: 2rem;
  left: 2rem;
  max-width: 34rem;
}
#carousel .carousel-item .caption .display-1,
#carousel .carousel-item .caption h2 {
  font-family: var(--schrift-titel);
  color: #fff;
  font-size: 2rem;
  text-transform: none;
}
#carousel .carousel-item .caption .caption-description,
#carousel .carousel-item .caption .caption-description p {
  color: var(--wachs);
}
/* Alles im Slider-Text hell – egal welche Überschrift das Modul nutzt */
#carousel .caption,
#carousel .caption *,
.carousel .caption,
.carousel .caption * {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
#carousel .caption h1, #carousel .caption h2, #carousel .caption h3,
#carousel .caption .display-1, #carousel .caption .display-2,
.carousel .caption h1, .carousel .caption h2, .carousel .caption h3,
.carousel .caption .display-1, .carousel .caption .display-2 {
  color: #f0c463 !important;   /* Honiggold für den Titel */
  font-family: var(--schrift-titel);
  text-transform: none;
}

/* Slider-Text: eigener dunkler Hintergrund direkt hinter der Schrift,
   funktioniert egal wo das Modul den Text platziert */
#carousel .caption,
.carousel .caption {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0 !important;
  box-shadow: none;
}
#carousel .caption h1, #carousel .caption h2, #carousel .caption h3,
#carousel .caption .display-1, #carousel .caption .display-2,
#carousel .caption .caption-description,
.carousel .caption h1, .carousel .caption h2, .carousel .caption h3,
.carousel .caption .display-1, .carousel .caption .display-2,
.carousel .caption .caption-description {
  display: inline-block;
  background: rgba(30, 20, 10, .80);
  padding: .55rem 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .4rem;
}
#carousel .caption .caption-description,
.carousel .caption .caption-description {
  font-weight: 400;
  font-size: 1.05rem;
}
#carousel .caption .caption-description p,
.carousel .caption .caption-description p {
  margin: 0;
}
/* leere Beschreibung nicht als dunklen Fleck zeigen */
#carousel .caption .caption-description:empty,
.carousel .caption .caption-description:empty {
  display: none;
}
/* Slider-Pfeile: runde, gut sichtbare Buttons */
#carousel .carousel-control,
.carousel .carousel-control {
  opacity: 1 !important;
  background: none !important;
  width: 4.5rem;
}
#carousel .carousel-control .icon-next,
#carousel .carousel-control .icon-prev,
.carousel .carousel-control .icon-next,
.carousel .carousel-control .icon-prev {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  background: rgba(30, 20, 10, .78) !important;
  border: 2px solid #f0c463;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: background .15s, transform .15s;
}
#carousel .carousel-control .icon-next i,
#carousel .carousel-control .icon-prev i,
.carousel .carousel-control .icon-next i,
.carousel .carousel-control .icon-prev i,
#carousel .carousel-control .material-icons,
.carousel .carousel-control .material-icons {
  color: #f0c463 !important;
  font-size: 2rem !important;
  line-height: 1;
  text-shadow: none;
}
#carousel .carousel-control:hover .icon-next,
#carousel .carousel-control:hover .icon-prev,
.carousel .carousel-control:hover .icon-next,
.carousel .carousel-control:hover .icon-prev {
  background: var(--honig) !important;
  transform: scale(1.08);
}
#carousel .carousel-control:hover .material-icons,
.carousel .carousel-control:hover .material-icons {
  color: #fff !important;
}
#carousel .carousel-control:focus-visible .icon-next,
#carousel .carousel-control:focus-visible .icon-prev {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
/* Punkte unten */
#carousel .carousel-indicators li,
.carousel .carousel-indicators li {
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(30, 20, 10, .5);
}
#carousel .carousel-indicators .active,
.carousel .carousel-indicators .active {
  background: #f0c463;
}

/* ---------- Produktkacheln ---------- */
.product-miniature .thumbnail-container {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.product-miniature .thumbnail-container:hover,
.product-miniature .thumbnail-container:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--schatten-hov);
}
.product-miniature .thumbnail-container .product-thumbnail img {
  transition: transform .3s ease;
}
.product-miniature .thumbnail-container:hover .product-thumbnail img {
  transform: scale(1.04);
}
.product-miniature .product-description {
  background: #fff;
  box-shadow: none;
}
.product-miniature .product-title a {
  color: var(--holz);
  font-weight: 600;
  text-transform: none;
  /* zwei Zeilen statt abgeschnittener Einzeile */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}
.product-miniature .product-title a:hover { color: var(--honig-dunkel); }
.product-miniature .product-price-and-shipping .price,
.product-price .current-price-value,
.product-prices .current-price span {
  color: var(--honig-dunkel);
  font-weight: 700;
  font-size: 1.15rem;
}
.product-miniature .highlighted-informations {
  background: rgba(253, 249, 240, .95);
}
.product-miniature .highlighted-informations .quick-view {
  color: var(--honig-dunkel);
  font-weight: 600;
}

/* Etiketten (Neu, Rabatt …) */
.product-flags li.product-flag {
  background: var(--honig);
  border-radius: 4px;
  font-weight: 600;
  text-transform: none;
}
.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale {
  background: #b5452b;
}

.all-product-link {
  color: var(--honig-dunkel);
  font-weight: 600;
  font-size: 1rem;
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--honig);
  border-color: var(--honig);
  color: #fff;
  border-radius: 999px;
  text-transform: none;
  font-weight: 600;
  padding: .6rem 1.4rem;
  box-shadow: 0 2px 6px rgba(200, 137, 26, .3);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--honig-dunkel) !important;
  border-color: var(--honig-dunkel) !important;
  color: #fff;
}
.btn-secondary,
.btn-tertiary {
  border-radius: 999px;
  text-transform: none;
}
.product-add-to-cart .add-to-cart { font-size: 1.05rem; }

/* ---------- Info-/Hinweis-Blöcke (Custom-Text, Reassurance) ---------- */
#custom-text {
  background: var(--wachs);
  border-radius: var(--radius);
  border-left: 5px solid var(--honig);
  box-shadow: var(--schatten);
  padding: 2rem;
  text-align: left;
}
#custom-text h2,
#custom-text h3 {
  font-family: var(--schrift-titel);
  text-transform: none;
  color: var(--holz);
}
#custom-text strong { color: var(--honig-dunkel); }

#block-reassurance,
.blockreassurance {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
#block-reassurance li,
.blockreassurance .block-icon,
.blockreassurance_product > div { border-color: var(--linie); }
.blockreassurance .block-title,
#block-reassurance span { color: var(--holz); font-weight: 600; }

/* Linke Spalte / Seitenblöcke */
.block-categories,
#search_filters,
#search_filters_brands,
#search_filters_suppliers,
.card,
.page-content.card,
.cart-grid-body .card {
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  border: 0;
}
.block-categories .category-sub-menu li[data-depth="0"] > a {
  color: var(--holz);
  font-weight: 600;
}
.block-categories .category-sub-menu a:hover { color: var(--honig-dunkel); }

/* Breadcrumb */
#wrapper .breadcrumb {
  background: transparent;
  padding-left: 0;
}
#wrapper .breadcrumb li a { color: var(--holz-hell); }
#wrapper .breadcrumb li:last-child { color: var(--holz); font-weight: 600; }

/* ---------- Footer ---------- */
#footer {
  background: var(--holz);
  color: var(--wachs);
  padding-top: 2.5rem;
  margin-top: 3rem;
}
.footer-container {
  background: transparent;
  box-shadow: none;
  margin-top: 0;
  padding-top: 0;
}
#footer .h3, #footer .h4, #footer h3, #footer h4,
.footer-container .h3, .footer-container .h4 {
  color: #fff;
  font-family: var(--schrift-titel);
  text-transform: none;
  font-size: 1.1rem;
}
#footer a,
#footer li a,
.footer-container li a,
.footer-container .block-contact,
.footer-container .block-contact a,
#footer .block-contact {
  color: var(--wachs) !important;
}
#footer a:hover,
.footer-container li a:hover { color: #f0c463 !important; }
#footer .text-sm-center,
#footer p {
  color: rgba(246, 231, 193, .7);
}
.footer-container .links .collapse { background: transparent; }

/* Newsletter-Block über dem Footer */
.block_newsletter {
  background: var(--wachs);
  border-radius: var(--radius);
}
.block_newsletter form input[type="email"] {
  border-radius: 999px 0 0 999px;
  border: 1px solid var(--linie);
}
.block_newsletter form .btn {
  border-radius: 0 999px 999px 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .products-section-title { font-size: 1.4rem; }
  #carousel .carousel-item .caption {
    left: 1rem; right: 1rem; bottom: 1rem; max-width: none;
    padding: .9rem 1rem;
  }
  #carousel .carousel-item .caption .display-1,
  #carousel .carousel-item .caption h2 { font-size: 1.3rem; }
  #custom-text { padding: 1.25rem; }
  .product-miniature .thumbnail-container:hover { transform: none; }
}

/* Weniger Bewegung, wenn im System eingestellt */
@media (prefers-reduced-motion: reduce) {
  .product-miniature .thumbnail-container,
  .product-miniature .thumbnail-container .product-thumbnail img {
    transition: none;
  }
  .product-miniature .thumbnail-container:hover,
  .product-miniature .thumbnail-container:hover .product-thumbnail img {
    transform: none;
  }
}
