/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

@media (min-width: 992px) {
    #header .header-top .position-static .bon-nav-bar {
        justify-content: flex-start;
    }
}

@media (max-width: 991px) {
    #header .header-top .position-static {
        flex-direction: row;
    }
}


/* Preis-Hinweis unter dem Produktpreis */
.tax-shipping-delivery-label {
  margin-top: 6px;
  font-size: 13px;
  color: #6c6c6c;
  line-height: 1.4;
}

.tax-shipping-delivery-label .price-note {
  display: inline-block;
  font-style: italic;
  color: #777;
}

.tax-shipping-delivery-label .delivery-link {
  margin-left: 6px;
  font-size: 12px;
  color: #9b5e2e; /* warmes Kaffeebraun passend zum Thema */
  text-decoration: underline;
}

.tax-shipping-delivery-label .delivery-link:hover {
  color: #704422; /* dunkler beim Hover */
}

/* ================================
   🌿 ARABICA PREMIUM PRODUCT STYLE
   ================================ */

/* --- Produktvarianten nebeneinander mit Icons --- */
.product-variants {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px;
  margin-top: 16px;
}

.product-variants > div {
  flex: 1 1 45%;
  min-width: 220px;
  background-color: #faf9f8;
  border: 1px solid #e2ddd9;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.product-variants > div:hover {
  border-color: #c5a17b;
  box-shadow: 0 3px 8px rgba(197, 161, 123, 0.25);
}

.product-variants label {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #4b3a32;
  margin-bottom: 8px;
  font-size: 14px;
  gap: 8px;
}

.product-variants label::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 15px;
  color: #c5a17b;
  display: inline-block;
}

/* ⚖️ Waage für Füllmenge */
.product-variants label[for*="group_"]::before {
  content: "\f24e";
}

/* ☕ Kaffeetasse für Mahlgrad */
.product-variants label[for*="mahlgrad"]::before {
  content: "\f0f4";
}

.product-variants select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d7d3cf;
  border-radius: 6px;
  background-color: #fff;
  color: #2b2b2b;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-variants select:hover {
  border-color: #c5a17b;
  box-shadow: 0 0 5px rgba(197, 161, 123, 0.3);
}

.product-variants select:focus {
  outline: none;
  border-color: #8b5a3c;
  box-shadow: 0 0 7px rgba(139, 90, 60, 0.25);
}

/* --- Zusatzinfos unter dem Preis (Versand, Frage, Bewertung) --- */
.product-additional-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 22px;
  margin-top: 18px;
}

.product-additional-info a,
.product-additional-info span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #4a3b32;
  text-decoration: none;
  transition: color 0.3s ease;
}

.product-additional-info a:hover {
  color: #c5a17b;
}

/* Icons */
.product-additional-info i {
  color: #c5a17b;
  font-size: 15px;
}

/* --- Tabs (Beschreibung, Details, Zubereitung) --- */
.tabs {
  border-top: 1px solid #ece9e6;
  margin-top: 40px;
}

.nav-tabs {
  border: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.nav-tabs .nav-link {
  background: #f5f3f1;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  color: #3c302a;
  transition: all 0.2s ease;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  background: #c5a17b;
  color: #fff;
}

/* --- Tabellen in Artikeldetails / Kennzeichnung --- */
.table,
.product-description table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  margin-top: 10px;
  border: 1px solid #e2ddd9;
}

.table td,
.table th {
  border: 1px solid #e2ddd9;
  padding: 10px 12px;
}

.table th {
  background: #f7f4f1;
  font-weight: 600;
  color: #3a2d25;
}

.table td {
  color: #5a4d45;
}

/* --- Responsiv --- */
@media (max-width: 768px) {
  .product-variants {
    flex-direction: column;
    gap: 14px;
  }

  .product-additional-info {
    flex-direction: column;
    gap: 10px;
  }

  .nav-tabs .nav-link {
    width: 100%;
    text-align: center;
  }
}



/* =========================================
   Varianten 2-spaltig (überstimmt Theme-Styles)
   ========================================= */

/* Container als Flex-Layout */
#product .product-variants {
  display: flex !important;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 16px;
}

/* Jedes Varianten-Element auf 50% setzen */
@media (min-width: 768px) {
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item,
  #product .product-variants > div.product-variants-item,
  #product .product-variants > div[class*="product-variants-item"] {
    flex: 0 0 calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    float: none !important;    /* Theme-Floats neutralisieren */
    clear: none !important;
    display: block !important;
  }
}

/* Auf Mobil wieder einspaltig */
@media (max-width: 767.98px) {
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Container als Flex-Layout */
#product .product-variants {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

/* Kinder zwangsweise halbe Breite ab 768px */
@media (min-width: 768px) {
  #product .product-variants > * {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
    float: none !important;
    clear: none !important;
    display: block !important;
  }
}

/* Unter 768px wieder 100% */
@media (max-width: 767.98px) {
  #product .product-variants > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}


/********  🔧 VARIANTEN ZWEISPALTIG – HARDFIX  ********/
/* Ab Tablet: 2 Spalten mit Grid – unabhängig von Bootstrap-Floats/Breiten */
@media (min-width: 768px) {
  /* Container erzwingen */
  .page-product #product .product-variants,
  .page-product #content #product .product-variants {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;  /* zwei Spalten */
    column-gap: 24px !important;
    row-gap: 16px !important;
    align-items: start !important;
  }

  /* Alle direkten Kinder normalisieren (Breite/Floats entfernen) */
  .page-product #product .product-variants > *,
  .page-product #content #product .product-variants > *,
  .page-product #product .product-variants > .product-variants-item,
  .page-product #product .product-variants > .clearfix.product-variants-item {
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
  }
}

/* Unter 768px wieder einspaltig (Default) */
@media (max-width: 767.98px) {
  .page-product #product .product-variants,
  .page-product #content #product .product-variants {
    display: block !important;
  }
}

/****************************************************
 * Varianten nebeneinander – Clearfix neutralisieren
 * und 2 Spalten ab 768px erzwingen
 ****************************************************/

/* Ab Tablet/Desktop: 2 Spalten */
@media (min-width: 768px) {

  /* Container als Flex */
  #product .product-variants {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;     /* Abstand */
    align-items: flex-start !important;
  }

  /* WICHTIG: Clearfix auf den Items deaktivieren,
     sonst räumt sich jede Box selbst nach unten */
  #product .product-variants > .clearfix.product-variants-item {
    clear: none !important;
  }
  #product .product-variants > .clearfix.product-variants-item::after,
  #product .product-variants > .clearfix.product-variants-item::before {
    content: none !important;
    display: none !important;
  }

  /* Jede Varianten-Box: halbe Breite */
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item {
    float: none !important;                         /* evtl. Theme-Floats neutralisieren */
    width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
    display: block !important;
  }
}

/* Unter 768 px wieder einspaltig */
@media (max-width: 767.98px) {
  #product .product-variants {
    display: block !important;
  }
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/******************************
 * Produkt-Tabs – Eifelsüchtig
 * Pill-Look, mehr Luft, helles Braun
 ******************************/

/* Tab-Leiste aufräumen */
#product .tabs .nav-tabs,
.product-tabs .nav-tabs {
  border-bottom: 0 !important;
  gap: 10px;                 /* moderner Abstand */
  flex-wrap: wrap;
}

/* Standard-Tab (nicht aktiv) */
#product .tabs .nav-link,
.product-tabs .nav-link,
#product .tabs .nav-tabs li a,
.product-tabs .nav-tabs li a {
  padding: 10px 18px !important;       /* mehr Abstand zu den Buchstaben */
  line-height: 1.2 !important;
  border: 1px solid #d9cbbd !important;/* zartes Braun für Rahmen */
  border-radius: 9999px !important;    /* „Pill“-Form */
  background: #ffffff !important;
  color: #333 !important;
  font-weight: 500;
  letter-spacing: .2px;                /* leicht luftiger */
  text-transform: none;                /* bleibt wie in der Spracheinstellung */
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow: none !important;
}

/* Hover/Fokus */
#product .tabs .nav-link:hover,
.product-tabs .nav-link:hover {
  background: #f7f1ea !important;      /* ganz leichtes Creme */
  border-color: #cdb9a3 !important;
}

#product .tabs .nav-link:focus-visible,
.product-tabs .nav-link:focus-visible {
  outline: 2px solid #cdb9a3;
  outline-offset: 2px;
}

/* Aktiver Tab – gut sichtbar */
#product .tabs .nav-link.active,
.product-tabs .nav-link.active,
#product .tabs .nav-tabs li.active a,
.product-tabs .nav-tabs li.active a {
  background: #eadfd3 !important;      /* helles Braun/Beige */
  border-color: #c8b49b !important;
  color: #412611 !important;           /* dunkles Kaffee-Braun */
  font-weight: 600 !important;
}

/* Inhalt etwas Luft nach oben */
#product .tabs .tab-content,
.product-tabs .tab-content {
  margin-top: 14px;
}

/* Falls dein Theme die Tabs anders markiert – Sicherheitsnetz */
#product .tabs li a.active,
.product-tabs li a.active {
  background: #eadfd3 !important;
  border-color: #c8b49b !important;
  color: #412611 !important;
}