/* ============================================================
   JUPOMA CI — KONSOLIDIERTE CHILD-THEME-CSS
   Single Source of Truth für jupoma.de
   ------------------------------------------------------------
   Reihenfolge (nicht ändern):
   1. Font-Import
   2. Design Tokens (Custom Properties)
   3. Base (Body, Typo, Links)
   4. Layout (Boxed-Off, Container)
   5. Komponenten (Wordmark, Buttons, Forms, Menü, Cart-Icon)
   6. WooCommerce (Shop, Produkt, Checkout)
   7. Mobile Overrides (≤767px) — Mobile-First-Korrekturen
   8. Tablet Overrides (768–980px)
   9. JTL-Override (importierte Produkt-HTMLs entgiften)
   ============================================================ */


/* ============================================================
   1. FONT-IMPORT
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");


/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root {
  /* Farben — Basis */
  --jp-paper:  #f4efe4;
  --jp-linen:  #ece6d8;
  --jp-sand:   #d8cfba;
  --jp-rule:   rgba(26, 22, 15, 0.18);

  /* Farben — Text */
  --jp-ink:    #1a160f;
  --jp-soil:   #3a322a;
  --jp-gravel: #8c8070;

  /* Farben — Akzente */
  --jp-amber:  #d97706;
  --jp-toast:  #b45e00;

  /* Farben — Semantik */
  --jp-moss:   #3a6349;
  --jp-brick:  #9a2e1e;

  /* Typografie */
  --jp-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --jp-sans:    "Inter Tight", Arial, sans-serif;
  --jp-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Spacing */
  --jp-grid:   32px;
  --jp-gap-s:  8px;
  --jp-gap-m:  16px;
  --jp-gap-l:  24px;
  --jp-gap-xl: 32px;

  /* Touch-Target */
  --jp-tap:    44px;
}


/* ============================================================
   3. BASE
   ============================================================ */
.count,
.meta-author,
.meta-date {
  display: none !important;
}

html,
body,
#page-container,
#main-content,
.et-l--body,
.et_builder_inner_content,
.et_pb_section,
.woocommerce-page #main-content,
.woocommerce #main-content,
.woocommerce-page .container,
.woocommerce .container {
  background: var(--jp-paper) !important;
  color: var(--jp-ink);
}

body,
p,
li,
.et_pb_text {
  font-family: var(--jp-sans);
  color: var(--jp-soil);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3 {
  font-family: var(--jp-display) !important;
  color: var(--jp-ink) !important;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

a {
  color: var(--jp-amber);
  text-decoration: none;
}

a:hover {
  color: var(--jp-toast);
}


/* ============================================================
   4. LAYOUT
   ============================================================ */
@media only screen and (max-width: 767px) {
  body.et_boxed_layout,
  body.et_boxed_layout #page-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  body.et_boxed_layout #main-content,
  body.et_boxed_layout .container,
  body.et_boxed_layout .et-l--body,
  body.et_boxed_layout .et_builder_inner_content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.et_boxed_layout.woocommerce-page #main-content .container,
  body.et_boxed_layout.woocommerce #main-content .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.et_boxed_layout .et_pb_section,
  body.et_boxed_layout .et_pb_row {
    max-width: 100% !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.et_boxed_layout,
  body.et_boxed_layout #page-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  body.et_boxed_layout.woocommerce-page #main-content .container,
  body.et_boxed_layout.woocommerce #main-content .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}


/* ============================================================
   5. KOMPONENTEN
   ============================================================ */

/* ---- Jupoma Wordmark (typografisch) -----------------------
   Markup:
     Hell:  <span class="jp-wordmark"><span class="jp-wordmark__lead">J</span><span class="jp-wordmark__body">upoma</span></span>
     Dunkel: <span class="jp-wordmark jp-wordmark--inverse">...</span>

   Regel jupoma-design:
   - hell:   J=Ink,   upoma=Amber
   - dunkel: J=Amber, upoma=Paper
   ------------------------------------------------------------ */
.jp-wordmark {
  font-family: var(--jp-display) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
}

.jp-wordmark__lead { color: var(--jp-ink) !important; }
.jp-wordmark__body { color: var(--jp-amber) !important; }

.jp-wordmark--inverse .jp-wordmark__lead { color: var(--jp-amber) !important; }
.jp-wordmark--inverse .jp-wordmark__body { color: var(--jp-paper) !important; }

.jp-wordmark--sm { font-size: 18px; }
.jp-wordmark--md { font-size: 24px; }
.jp-wordmark--lg { font-size: 32px; }

@media only screen and (max-width: 767px) {
  .jp-wordmark--lg { font-size: 24px; }
  .jp-wordmark--md { font-size: 20px; }
}


/* ---- Buttons ---------------------------------------------- */
.et_pb_button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
#submit {
  background: var(--jp-amber) !important;
  color: var(--jp-ink) !important;
  border: 1px solid var(--jp-amber) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--jp-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 14px 24px !important;
  min-height: var(--jp-tap);
  cursor: pointer;
}

.et_pb_button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
#submit:hover {
  background: var(--jp-toast) !important;
  border-color: var(--jp-toast) !important;
  color: var(--jp-paper) !important;
}

.et_pb_button:after,
.et_pb_button_module_wrapper .et_pb_button:after {
  display: none !important;
}


/* ---- Formulare -------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select,
.jupoma-homepage input,
.jupoma-homepage textarea,
.jupoma-homepage select,
.jp-divi-hero-block input,
.jp-divi-hero-block textarea,
.jp-divi-hero-block select {
  background: var(--jp-paper) !important;
  color: var(--jp-ink) !important;
  border: 1px solid var(--jp-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: var(--jp-sans) !important;
  font-size: 16px !important;
  padding: 12px 14px !important;
  min-height: var(--jp-tap);
  -webkit-appearance: none;
}

input::placeholder,
textarea::placeholder,
.jupoma-homepage input::placeholder,
.jupoma-homepage textarea::placeholder {
  color: var(--jp-gravel) !important;
  opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus,
.jupoma-homepage input:focus,
.jupoma-homepage textarea:focus,
.jupoma-homepage select:focus {
  background: var(--jp-paper) !important;
  border-color: var(--jp-amber) !important;
  color: var(--jp-ink) !important;
  box-shadow: none !important;
}


/* ---- Hauptmenü -------------------------------------------- */
#top-menu li a,
.et_pb_menu .et-menu li a {
  font-family: var(--jp-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--jp-ink) !important;
}

#top-menu li.current-menu-item > a,
.et_pb_menu .et-menu li.current-menu-item > a {
  color: var(--jp-amber) !important;
}


/* ---- Dropdown-Menü ---------------------------------------- */
#top-menu li ul,
.et_pb_menu .nav li ul,
.et-menu-nav li ul {
  background: var(--jp-paper) !important;
  border: 1px solid var(--jp-rule) !important;
  width: auto !important;
  min-width: 280px !important;
  box-shadow: 0 8px 32px rgba(26, 22, 15, 0.12) !important;
}

#top-menu li li,
.et_pb_menu .nav li li,
.et-menu-nav li li {
  width: auto !important;
  min-width: 280px !important;
}

#top-menu li li a,
.et_pb_menu .nav li li a,
.et-menu-nav li li a {
  background: transparent !important;
  color: var(--jp-ink) !important;
  border-bottom: 1px solid var(--jp-rule) !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  width: auto !important;
  min-width: 240px !important;
}

#top-menu li li a:hover,
.et_pb_menu .nav li li a:hover,
.et-menu-nav li li a:hover {
  background: var(--jp-linen) !important;
  color: var(--jp-amber) !important;
}


/* ---- Cart-Icon im Header (Desktop) ------------------------ */
#et-top-navigation .et-cart-info {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 72px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: top !important;
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

#et-top-navigation .et-cart-info span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
}

#et-top-navigation .et-cart-info span:before {
  display: block !important;
  position: static !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  color: var(--jp-ink) !important;
  font-size: 20px !important;
  line-height: 24px !important;
  text-align: center !important;
  pointer-events: none !important;
}


/* ---- Kommentare ------------------------------------------- */
#respond,
#comment-wrap,
#commentform,
.comment-form {
  background: var(--jp-paper) !important;
}

#comment,
textarea#comment,
#respond textarea,
#commentform textarea,
#comment-wrap textarea,
.comment-form-comment textarea,
.et_pb_comments_module textarea {
  background: var(--jp-linen) !important;
  color: var(--jp-ink) !important;
  border: 1px solid var(--jp-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#comment::placeholder,
textarea#comment::placeholder,
#commentform textarea::placeholder {
  color: var(--jp-gravel) !important;
}

#reply-title,
#comment-wrap h3,
.comment-reply-title {
  color: var(--jp-ink) !important;
  font-family: var(--jp-display) !important;
}


/* ---- Jupoma Abschnittsfarben ------------------------------ */
.jp-section-linen,
.et_pb_section.jp-section-linen {
  background: var(--jp-linen) !important;
}


/* ============================================================
   6. WOOCOMMERCE
   ============================================================ */

/* ---- Produktbilder ---------------------------------------- */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img,
.woocommerce div.product .woocommerce-product-gallery img {
  border: 1px solid var(--jp-rule) !important;
  border-radius: 0 !important;
  background: var(--jp-linen) !important;
  box-shadow: none !important;
}

/* ---- Leere Pseudo-Elemente neutralisieren ----------------- */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.et_pb_shop ul.products::before,
.et_pb_shop ul.products::after,
.et_pb_wc_products ul.products::before,
.et_pb_wc_products ul.products::after,
.related.products ul.products::before,
.related.products ul.products::after,
.cross-sells ul.products::before,
.cross-sells ul.products::after,
.upsells.products ul.products::before,
.upsells.products ul.products::after {
  content: none !important;
  display: none !important;
}

/* ---- Produktliste Desktop (3 Spalten) --------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products,
.et_pb_shop ul.products,
.et_pb_wc_products ul.products,
.related.products ul.products,
.cross-sells ul.products,
.upsells.products ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  border: 1px solid var(--jp-rule);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.et_pb_shop ul.products li.product,
.et_pb_wc_products ul.products li.product,
.related.products ul.products li.product,
.cross-sells ul.products li.product,
.upsells.products ul.products li.product {
  float: none !important;
  clear: none !important;
  box-sizing: border-box !important;
  width: 33.333333% !important;
  max-width: 33.333333% !important;
  flex: 0 0 33.333333% !important;
  margin: 0 !important;
  padding: 24px !important;
  border-right: 1px solid var(--jp-rule);
  border-bottom: 1px solid var(--jp-rule);
}

/* ---- Sidebar auf WC-Seiten unterdrücken ------------------- */
body.woocommerce-page.et_right_sidebar #main-content .container:before {
  display: none !important;
  content: none !important;
}

body.woocommerce-page.et_right_sidebar #left-area {
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

body.woocommerce-page.et_right_sidebar #sidebar {
  display: none !important;
}


/* ---- Checkout: Select2 ------------------------------------ */
body.woocommerce-checkout .woocommerce-billing-fields .select2-container,
body.woocommerce-checkout .woocommerce-shipping-fields .select2-container {
  width: 100% !important;
  display: block !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 56px !important;
  min-height: 56px !important;
  border: 1px solid var(--jp-sand) !important;
  border-radius: 0 !important;
  background: var(--jp-linen) !important;
  color: var(--jp-ink) !important;
  display: flex !important;
  align-items: center !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  width: 100% !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 0 42px 0 16px !important;
  color: var(--jp-ink) !important;
  display: block !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--jp-gravel) !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 56px !important;
  width: 36px !important;
  top: 0 !important;
  right: 10px !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--jp-ink) transparent transparent transparent !important;
}

body.woocommerce-checkout .select2-dropdown {
  border: 1px solid var(--jp-ink) !important;
  border-radius: 0 !important;
  background: var(--jp-paper) !important;
  color: var(--jp-ink) !important;
}

body.woocommerce-checkout .select2-search--dropdown {
  padding: 6px !important;
  background: var(--jp-paper) !important;
}

body.woocommerce-checkout .select2-search--dropdown .select2-search__field {
  height: 40px !important;
  border: 1px solid var(--jp-amber) !important;
  border-radius: 0 !important;
  background: var(--jp-paper) !important;
  color: var(--jp-ink) !important;
  padding: 8px 10px !important;
  outline: none !important;
}

body.woocommerce-checkout .select2-results__option {
  padding: 10px 12px !important;
  background: var(--jp-paper) !important;
  color: var(--jp-ink) !important;
}

body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--jp-ink) !important;
  color: var(--jp-paper) !important;
}

body.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-checkout .select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--jp-linen) !important;
  color: var(--jp-ink) !important;
}


/* ---- Checkout: Bestelltabelle ----------------------------- */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--jp-paper) !important;
  border: 1px solid var(--jp-sand) !important;
  color: var(--jp-ink) !important;
}

body.woocommerce-checkout table.shop_table {
  border: 1px solid var(--jp-sand) !important;
  border-radius: 0 !important;
  border-collapse: collapse !important;
  background: var(--jp-paper) !important;
}

body.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout table.shop_table td {
  border: 1px solid rgba(26, 22, 15, 0.14) !important;
  color: var(--jp-ink) !important;
}

body.woocommerce-checkout table.shop_table th {
  background: var(--jp-linen) !important;
  font-family: var(--jp-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.woocommerce-checkout table.shop_table td {
  background: var(--jp-paper) !important;
}

body.woocommerce-checkout table.shop_table tfoot th {
  background: var(--jp-linen) !important;
}

body.woocommerce-checkout table.shop_table tfoot td {
  background: var(--jp-paper) !important;
  font-weight: 700 !important;
}

body.woocommerce-checkout table.shop_table .order-total th,
body.woocommerce-checkout table.shop_table .order-total td {
  background: var(--jp-linen) !important;
  color: var(--jp-ink) !important;
  font-weight: 700 !important;
}

body.woocommerce-checkout table.shop_table a {
  color: var(--jp-toast) !important;
  text-decoration: none !important;
}

body.woocommerce-checkout table.shop_table a:hover {
  color: var(--jp-amber) !important;
}


/* ---- Preise in Mono --------------------------------------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  font-family: var(--jp-mono) !important;
  color: var(--jp-ink) !important;
  font-weight: 700 !important;
}

/* ---- WC Messages ------------------------------------------ */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--jp-moss) !important;
  background: var(--jp-linen) !important;
  color: var(--jp-ink) !important;
}

.woocommerce-error {
  border-top-color: var(--jp-brick) !important;
  background: var(--jp-linen) !important;
  color: var(--jp-ink) !important;
}


/* ============================================================
   7. MOBILE OVERRIDES (≤767px)
   ============================================================ */
@media only screen and (max-width: 767px) {

  body,
  p,
  li,
  .et_pb_text {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  h1, .et_pb_module h1 { font-size: 28px !important; }
  h2, .et_pb_module h2 { font-size: 22px !important; }
  h3, .et_pb_module h3 { font-size: 18px !important; }

  #et-top-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    padding-right: 28px !important;
  }

  #et-top-navigation .et-cart-info {
    order: 1 !important;
    width: var(--jp-tap) !important;
    min-width: var(--jp-tap) !important;
    height: var(--jp-tap) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #et_mobile_nav_menu {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    height: var(--jp-tap) !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #et_mobile_nav_menu .mobile_nav,
  #et_mobile_nav_menu .mobile_menu_bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--jp-tap) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #et_mobile_nav_menu .mobile_menu_bar {
    width: var(--jp-tap) !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    line-height: 1 !important;
  }

  #et_mobile_nav_menu .mobile_menu_bar:before {
    position: static !important;
    display: block !important;
    line-height: var(--jp-tap) !important;
  }

  /* ---- Mobile-Menü-Dropdown: Anker fixen ------------------
     Beim Entboxen + 44px-Burger verschiebt Divi den vertikalen
     Anker. Wir verankern das Dropdown explizit unter dem
     gesamten Header (#main-header), machen es voll breit und
     scrollbar — damit auch die oberen Items erreichbar bleiben.
  */
  #main-header {
    position: relative !important;
  }

  .et_mobile_menu {
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--jp-paper) !important;
    border-top: 1px solid var(--jp-rule) !important;
    z-index: 99999 !important;
  }

  .et_mobile_menu li a {
    padding: 14px 18px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    min-height: var(--jp-tap);
    display: flex !important;
    align-items: center !important;
  }

  .et_pb_button,
  button,
  input[type="submit"],
  .woocommerce a.button,
  .woocommerce button.button {
    padding: 16px 24px !important;
    font-size: 13px !important;
    width: auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--jp-tap);
  }

  body.single-product .single_add_to_cart_button {
    width: 100% !important;
    padding: 18px 24px !important;
    font-size: 14px !important;
  }

  body.woocommerce-page ul.products,
  body.woocommerce ul.products,
  body.woocommerce-page ul.products.columns-2,
  body.woocommerce-page ul.products.columns-3,
  body.woocommerce-page ul.products.columns-4,
  body.woocommerce-page .et_pb_shop ul.products,
  body.woocommerce-page .et_pb_wc_products ul.products {
    display: grid !important;
    grid-template-columns: 50% 50% !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--jp-rule) !important;
    border-bottom: 0 !important;
    list-style: none !important;
  }

  body.woocommerce-page ul.products li.product,
  body.woocommerce ul.products li.product,
  body.woocommerce-page .et_pb_shop ul.products li.product,
  body.woocommerce-page .et_pb_wc_products ul.products li.product {
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 1px solid var(--jp-rule) !important;
  }

  body.woocommerce-page ul.products li.product:nth-child(odd),
  body.woocommerce ul.products li.product:nth-child(odd),
  body.woocommerce-page .et_pb_shop ul.products li.product:nth-child(odd),
  body.woocommerce-page .et_pb_wc_products ul.products li.product:nth-child(odd) {
    border-right: 1px solid var(--jp-rule) !important;
  }

  body.woocommerce-page ul.products li.product:nth-child(even),
  body.woocommerce ul.products li.product:nth-child(even),
  body.woocommerce-page .et_pb_shop ul.products li.product:nth-child(even),
  body.woocommerce-page .et_pb_wc_products ul.products li.product:nth-child(even) {
    border-right: 0 !important;
  }

  body.woocommerce-page ul.products li.product.first,
  body.woocommerce-page ul.products li.product.last,
  body.woocommerce ul.products li.product.first,
  body.woocommerce ul.products li.product.last {
    clear: none !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-family: var(--jp-display) !important;
    color: var(--jp-ink) !important;
  }
  .woocommerce ul.products li.product .price {
    font-size: 13px !important;
  }

  body.single-product div.product .summary > * + * {
    margin-top: 14px !important;
  }
  body.single-product div.product .product_title {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
  body.single-product div.product p.price,
  body.single-product div.product span.price {
    font-size: 22px !important;
  }
  body.single-product form.cart .quantity input.qty {
    height: var(--jp-tap) !important;
    width: 64px !important;
    font-size: 16px !important;
    text-align: center !important;
  }

  body.woocommerce-checkout form.checkout #customer_details .col-1,
  body.woocommerce-checkout form.checkout #customer_details .col-2 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
  body.woocommerce-checkout .form-row {
    padding: 0 0 12px 0 !important;
  }
  body.woocommerce-checkout label {
    font-family: var(--jp-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--jp-ink) !important;
    margin-bottom: 6px !important;
    display: block !important;
  }
  body.woocommerce-checkout .woocommerce-checkout-review-order {
    margin-top: 24px !important;
  }
}


/* ============================================================
   8. TABLET OVERRIDES (768–980px)
   ============================================================ */
@media only screen and (min-width: 768px) and (max-width: 980px) {

  body.woocommerce-page ul.products,
  body.woocommerce ul.products,
  body.woocommerce-page ul.products.columns-2,
  body.woocommerce-page ul.products.columns-3,
  body.woocommerce-page ul.products.columns-4,
  body.woocommerce-page .et_pb_shop ul.products,
  body.woocommerce-page .et_pb_wc_products ul.products {
    display: grid !important;
    grid-template-columns: 50% 50% !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--jp-rule) !important;
    border-bottom: 0 !important;
    list-style: none !important;
  }

  body.woocommerce-page ul.products li.product,
  body.woocommerce ul.products li.product,
  body.woocommerce-page .et_pb_shop ul.products li.product,
  body.woocommerce-page .et_pb_wc_products ul.products li.product {
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 1px solid var(--jp-rule) !important;
  }

  body.woocommerce-page ul.products li.product:nth-child(odd),
  body.woocommerce ul.products li.product:nth-child(odd) {
    border-right: 1px solid var(--jp-rule) !important;
  }

  body.woocommerce-page ul.products li.product:nth-child(even),
  body.woocommerce ul.products li.product:nth-child(even) {
    border-right: 0 !important;
  }
}

@media only screen and (max-width: 981px) {
  body.single-product .upsells.products ul.products,
  body.single-product .related.products ul.products {
    display: grid !important;
    grid-template-columns: 50% 50% !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--jp-rule) !important;
    border-bottom: 0 !important;
    list-style: none !important;
  }

  body.single-product .upsells.products ul.products li.product,
  body.single-product .related.products ul.products li.product {
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 1px solid var(--jp-rule) !important;
  }

  body.single-product .upsells.products ul.products li.product:nth-child(odd),
  body.single-product .related.products ul.products li.product:nth-child(odd) {
    border-right: 1px solid var(--jp-rule) !important;
  }

  body.single-product .upsells.products ul.products li.product:nth-child(even),
  body.single-product .related.products ul.products li.product:nth-child(even) {
    border-right: 0 !important;
  }

  body.single-product .upsells.products ul.products li.product a img,
  body.single-product .related.products ul.products li.product a img {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 12px !important;
  }

  body.single-product .upsells.products ul.products li.product .woocommerce-loop-product__title,
  body.single-product .related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px !important;
    line-height: 1.08 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.single-product .upsells.products ul.products li.product .price,
  body.single-product .related.products ul.products li.product .price {
    font-size: 13px !important;
  }
}


/* ============================================================
   8b. HEADER & BURGER ≤980px — v2 (basierend auf echter DOM)
   ------------------------------------------------------------
   Fixes:
   (1) .container.et_menu_container voll breit + Paper-BG
       → eliminiert weißen Kasten um Logo+Burger
   (2) #et-top-navigation { padding-left: 0 !important }
       → überschreibt Divis JS-Inline-padding-left:117px
   (3) .et_mobile_menu li / li a Paper-BG
       → Dropdown nicht mehr weiß
   (4) .select_page { display:none } → "Select Page"-Text weg
   ============================================================ */
@media only screen and (max-width: 980px) {

  /* (1) Weißer Container im Header voll breit + Paper ---------- */
  #main-header .container,
  #main-header .container.et_menu_container,
  body.et_boxed_layout #main-header .container,
  body.et_boxed_layout #main-header .container.et_menu_container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    background: var(--jp-paper) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body.et_boxed_layout,
  body.et_boxed_layout #page-container,
  body.et_boxed_layout #main-header,
  body.et_boxed_layout #et-main-area,
  body.et_boxed_layout #top-header,
  #main-header,
  #et-main-area,
  #top-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: var(--jp-paper) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* (2) Inline-padding-left aus Divi-JS aufheben --------------- */
  #et-top-navigation,
  #main-header #et-top-navigation,
  #main-header .container #et-top-navigation {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
  }

  #main-header .logo_container {
    max-width: 50% !important;
  }

  /* Cart + Burger als 44px-Touch-Targets ----------------------- */
  #et-top-navigation .et-cart-info {
    order: 1 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #et_mobile_nav_menu {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #et_mobile_nav_menu .mobile_nav,
  #et_mobile_nav_menu .mobile_menu_bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #et_mobile_nav_menu .mobile_menu_bar {
    width: 44px !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    line-height: 1 !important;
  }

  #et_mobile_nav_menu .mobile_menu_bar:before {
    position: static !important;
    display: block !important;
    line-height: 44px !important;
    color: var(--jp-ink) !important;
  }

  /* (4) "Select Page"-Default-Text verstecken ------------------ */
  .mobile_nav .select_page,
  #et_mobile_nav_menu .select_page {
    display: none !important;
  }

  /* Mobile-Dropdown: Anker + Layout ---------------------------- */
  #main-header {
    position: relative !important;
  }

  .et_mobile_menu,
  #mobile_menu.et_mobile_menu {
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--jp-paper) !important;
    border-top: 1px solid var(--jp-rule) !important;
    z-index: 99999 !important;
  }

  /* (3) Dropdown-Items Paper statt weiß ------------------------ */
  .et_mobile_menu li,
  .et_mobile_menu li a,
  #mobile_menu li,
  #mobile_menu li a {
    background: var(--jp-paper) !important;
    color: var(--jp-ink) !important;
    border-color: var(--jp-rule) !important;
  }

  .et_mobile_menu > li.menu-item-has-children > a,
  #mobile_menu > li.menu-item-has-children > a {
    background: var(--jp-linen) !important;
    color: var(--jp-ink) !important;
    font-weight: 700 !important;
  }

  .et_mobile_menu li.current-menu-item > a,
  .et_mobile_menu li.current_page_item > a,
  .et_mobile_menu li.current-product-ancestor > a,
  .et_mobile_menu li.current-product-parent > a,
  #mobile_menu li.current-menu-item > a,
  #mobile_menu li.current_page_item > a {
    color: var(--jp-amber) !important;
  }

  .et_mobile_menu li a,
  #mobile_menu li a {
    padding: 14px 18px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

}


/* ============================================================
   8c. STICKY HEADER Desktop (≥981px)
   ------------------------------------------------------------
   Divi-Default macht beim Scrollen den Fixed-Header weiß:

     @media (min-width: 981px) {
       .et-fixed-header#main-header,
       .et-fixed-header#main-header .nav li ul,
       .et-fixed-header .et-search-form {
         background-color: #ffffff;
       }
     }

   Wir überschreiben das mit Paper, damit der Marken-Hintergrund
   auch beim Scrollen erhalten bleibt. Untermenüs und Suchform
   ebenfalls.
   ============================================================ */
@media only screen and (min-width: 981px) {

  .et-fixed-header#main-header,
  .et-fixed-header#main-header .container,
  .et-fixed-header#main-header .container.et_menu_container,
  .et-fixed-header#main-header .nav li ul,
  .et-fixed-header .et-search-form {
    background-color: var(--jp-paper) !important;
    background: var(--jp-paper) !important;
  }

  /* Menü-Items im fixed Header sollen Ink bleiben (nicht Divi-Hover-Hellgrau) */
  .et-fixed-header#main-header #top-menu li a,
  .et-fixed-header#main-header .et-menu li a {
    color: var(--jp-ink) !important;
  }

  .et-fixed-header#main-header #top-menu li.current-menu-item > a,
  .et-fixed-header#main-header .et-menu li.current-menu-item > a {
    color: var(--jp-amber) !important;
  }

  /* Cart-Icon im fixed Header: dunkel bleiben */
  .et-fixed-header#main-header #et-top-navigation .et-cart-info span:before {
    color: var(--jp-ink) !important;
  }
}


/* ============================================================
   9. JTL-OVERRIDE
   ============================================================ */
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel--description,
.woocommerce-product-description,
.woocommerce div.product .woocommerce-Tabs-panel--description {
  font-family: var(--jp-sans) !important;
  color: var(--jp-soil) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.woocommerce-Tabs-panel--description img,
.woocommerce-product-details__short-description img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
  display: block;
  margin: 16px 0;
}

.woocommerce-Tabs-panel--description table,
.woocommerce-product-details__short-description table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--jp-sans) !important;
  font-size: 14px !important;
}

.woocommerce-Tabs-panel--description table th,
.woocommerce-Tabs-panel--description table td,
.woocommerce-product-details__short-description table th,
.woocommerce-product-details__short-description table td {
  border: 1px solid var(--jp-rule) !important;
  padding: 10px 12px !important;
  background: transparent !important;
  color: var(--jp-ink) !important;
  vertical-align: top !important;
}

.woocommerce-Tabs-panel--description table th,
.woocommerce-product-details__short-description table th {
  background: var(--jp-linen) !important;
  font-family: var(--jp-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
}

@media only screen and (max-width: 767px) {
  .woocommerce-Tabs-panel--description,
  .woocommerce-product-details__short-description {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .woocommerce-Tabs-panel--description table,
  .woocommerce-product-details__short-description table {
    font-size: 13px !important;
  }
}

.woocommerce-Tabs-panel--description font,
.woocommerce-product-details__short-description font {
  font-family: inherit !important;
  color: inherit !important;
  font-size: inherit !important;
}