/* ==========================================================
    Kaushan Script – Headlines Font (lokal, performance-optimiert)
   ========================================================== */
@font-face {
  font-family: "Kaushan Script";
  src: url("/wp-content/mu-plugins/bt-core/assets/fonts/kaushanscript/kaushan-regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
    Headlines – Kaushan - Kaushan NUR Startseite
   ========================================================== */

.home h1,
.home .page-title {
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
}

/* ==========================================================
    VARIABLES / BASICS
   ========================================================== */

/* body {
  -webkit-overflow-scrolling: touch !important;
}
*/

:root {
  --bt-radius: 5px;

  --bt-accent: #e42c8c; /* Hauptfarbe */
  --bt-accent-hover: #c81f79; /* Hover */
  --bt-accent-contrast: #ffffff; /* Text auf Accent */

  --bt-border: rgba(0, 0, 0, 0.08);
  --bt-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* ==========================================================
   2) GLOBAL (Buttons, Quantity, allgemeines Woo)
   ========================================================== */

/*Alle Buttons im Shop vereinheitlichen*/
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.single_add_to_cart_button {
  background: var(--bt-accent) !important;
  color: var(--bt-accent-contrast) !important;
  border-radius: var(--bt-radius) !important;
  padding: 14.5px 18px !important;
  font-weight: 700 !important;

  transition:
    background-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.single_add_to_cart_button:hover {
  background: var(--bt-accent-hover) !important;
  transform: translateY(-2px); /* 👈 sanft */
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.woocommerce a.button:active,
.woocommerce button.button:active {
  transform: translateY(0); /* 👈 fühlt sich „druckvoll“ an */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

/*Quantity*/
.woocommerce .quantity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.woocommerce .quantity input.qty {
  width: 90px !important;
  height: 46px !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: var(--bt-radius) !important;
  font-weight: 700;
  text-align: center;
}

/* ==========================================================
   START   ===>   GP Mobile Menu
   ========================================================== */
/* ==========================================================
   GP Mobile Menu -> Drawer + Overlay (ohne Gefrickel)
   ========================================================== */
@media (max-width: 768px) {
  /* Vollflächiger Overlay-Hintergrund (damit rechts NICHT mehr komplett weiß ist) */
  #site-navigation.toggled {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Drawer links */
  #site-navigation.toggled .main-nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: min(86vw, 360px);
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
  }

  /* Damit das Innenlayout nicht “komisch” wird */
  #site-navigation.toggled .inside-navigation {
    position: static;
  }

  @media (max-width: 768px) {
    /* Overlay muss Viewport bleiben */
    #site-navigation.toggled {
      height: 100vh;
    }

    /* Drawer bleibt im Viewport (nicht Dokumenthöhe) */
    #site-navigation.toggled .main-nav {
      height: 70vh;
      max-height: 100vh;
    }
  }
}

/* ==========================================================
   GP Mobile Menu -> Drawer + Overlay (Header "Menü" + X)
   ========================================================== */
@media (max-width: 768px) {
  /* Overlay bleibt wie bei dir */
  #site-navigation.toggled {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Drawer links (wie bei dir) */
  #site-navigation.toggled .main-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: min(86vw, 360px);
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
  }

  /* Drawer-Höhe: NICHT bis Footer */
  #site-navigation.toggled .main-nav {
    height: 70vh;
    max-height: 100vh;
  }

  /* inside-navigation neutral */
  #site-navigation.toggled .inside-navigation {
    position: static;
  }

  /* ==========================================================
     GP Mobile Menu Kopfzeile "Menü" + X (GP menu-toggle)
     ========================================================== */

  /* Button sichtbar + als Kopfzeile oben im Drawer */
  #site-navigation.toggled .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: min(86vw, 360px);
    /* exakt wie Drawer */
    position: absolute;
    /* innerhalb des Overlays */
    top: 0;
    left: 0;
    z-index: 100000;
    /* über dem Drawer-Inhalt */
    background: #fff;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* Platz schaffen, damit Menü nicht unter der Kopfzeile startet */
  #site-navigation.toggled .main-nav {
    padding-top: 85px;
    /* Höhe der Kopfzeile */
    height: calc(70vh - 0px);
    /* bleibt 70vh, nur Inhalt rutscht runter */
  }

  /* Label "Menü" erzwingen, falls leer */
  #site-navigation.toggled .menu-toggle .mobile-menu:empty::before {
    content: "Menü";
  }

  /* Icon darf nicht versteckt sein */
  #site-navigation.toggled .menu-toggle .gp-icon {
    display: inline-flex !important;
  }
}

/* GP Mobile Menu offen: BT Sticky-Elemente ausblenden (kein Doppel-Header) */
@media (max-width: 768px) {
  #site-navigation.toggled .bt-sticky-logo {
    display: none !important;
    visibility: hidden !important;
  }
}

@media (max-width: 768px) {
  /* Drawer MUSS wirklich ganz links starten */
  #site-navigation.toggled {
    padding: 0 !important;
  }

  #site-navigation.toggled .inside-navigation {
    padding: 0 !important;
  }

  #site-navigation.toggled .main-nav {
    left: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  #site-navigation.toggled .main-nav {
    left: 0 !important;
    margin: 0 !important;

    /* wichtig: nicht "none", sondern 0 */
    transform: translateX(0) !important;

    /* killt das "schwarzer Rand schiebt sich zu" */
    transition: none !important;
    will-change: auto !important;
  }
}



/* ==========================================================
   START   ===>   SHOP / LOOP
   ========================================================== */
/* ==========================================================
   PATCH 2026-02-05: Migrated from WP Customizer (SSOT -> bt-core)
   Zweck: Render-Blocking im Customizer eliminieren + CSS zentralisieren.
   ========================================================== */

/* Direkt im Loop: Text unter dem Preis-hook (inkl Heliumfüllung) */
.wc-helium-note {
  font-size: 0.85rem;
  margin-top: 0.25rem;
  pointer-events: none !important;
  cursor: default !important;
}

.wc-gzd-price-info,
.woocommerce-price-suffix {
  font-size: 0.75rem;
  color: #777;
}

/* Shop Loop Höhe + Clamp */
.woocommerce-loop-product__title {
  min-height: 7em;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  .woocommerce-loop-product__title {
    -webkit-line-clamp: 3;
    min-height: 4.8em;
  }
}

/* Desktop: Button nur bei Hover zeigen (nur für euren "Produkt ansehen"-Link) */
@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product a.button[href*="bt_pool="] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
      opacity 0.15s ease,
      transform 0.15s ease,
      visibility 0.15s ease;
    width: 90% !important;
    text-align: center !important;
  }

  .woocommerce ul.products li.product:hover a.button[href*="bt_pool="] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Mobile/Touch: Button immer sichtbar */
@media (hover: none), (pointer: coarse) {
  .woocommerce ul.products li.product a.button[href*="bt_pool="] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}



/* ==========================================================
   START   ===>   CHECKOUT
   ========================================================== */

/* Classic Checkout 2-Spalten (robust per Grid) */
.bt-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}

/* Links */
.bt-checkout-grid #customer_details {
  grid-column: 1;
}

/* Rechts */
.bt-checkout-grid #order_review_heading,
.bt-checkout-grid #order_review {
  grid-column: 2;
}

/* Review-Box */
.bt-checkout-grid #order_review {
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

/* Mobile */
@media (max-width: 900px) {
  .bt-checkout-grid {
    grid-template-columns: 1fr;
  }
  .bt-checkout-grid #order_review_heading,
  .bt-checkout-grid #order_review {
    grid-column: 1;
  }
}

/* Checkout: Customer Details intern EINspaltig */
.woocommerce-checkout #customer_details .col2-set .col-1,
.woocommerce-checkout #customer_details .col2-set .col-2 {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Falls das Theme Flex nutzt */
.woocommerce-checkout #customer_details .col2-set {
  display: flex;
  flex-wrap: wrap !important;
}
.woocommerce-checkout #customer_details .col2-set .col-1,
.woocommerce-checkout #customer_details .col2-set .col-2 {
  flex: 0 0 100% !important;
}

.bt-checkout-grid .col2-set {
  display: flex;
  flex-direction: column;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
  width: 100%;
}

.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
  width: 100%;
}

.col-1 .bt-delivery-fields,
.col-2 {
  margin-top: 43px;
}




/* ======================================================
   PATCH 2026-02-07: Cart Fragments Flicker minimieren (nur Anzeige)
   Warum: bt-fragments-pending wird serverseitig gesetzt; verhindert "0 → korrekt" auf Start/Shop.
   ====================================================== */
/* body.bt-fragments-pending span.menu-cart-total,
body.bt-fragments-pending span.menu-cart-count {
  visibility: hidden;
} */

/* ======================================================
   PATCH 2026-02-07: MiniCart-Remove -> Total kurz verstecken (nur Anzeige)
   Warum: Nach Remove kann Total kurz 0/stale sein; Count ist oft schon korrekt.
   ====================================================== */
/* html.bt-cart-total-pending span.menu-cart-total {
  visibility: hidden;
} */



/* ======================================================
   PATCH 2026-02-07: Offcanvas Produktsuche – Anzeige nur unter 900px
   Warum: Search wird serverseitig immer injiziert (UA-unabhängig); Sichtbarkeit über Breakpoint.
   ====================================================== */
.bt-mobile-product-search { display: none; }

@media (max-width: 900px) {
  .bt-mobile-product-search { display: block; }
}