/* WM360 Design Overrides — Lädt NACH ecomus.css */
:root {
  --primary: #1c36fc !important;
  --main: #211e8f;
  --text: #525252;
  --text-2: #737373;
  --text-3: #a3a3a3;
  --line: #e5e5e5;
  --line-2: #d4d4d4;
  --bg-2: #f5f5f5;
  --bg-11: #f8f8f8;
  --success: #10B981;
}

/* Ecomus color-primary Varianten alle auf Blau */
.color-primary-2,
.color-primary-3,
.color-primary-4,
.color-primary-5,
.color-primary-6,
.color-primary-7,
.color-primary-8,
.color-primary-9,
.color-primary-10,
.color-primary-11,
.color-primary-12 {
  --primary: #1c36fc;
}

/* Button Hover */
.tf-btn.btn-fill:hover,
.tf-btn.btn-fill:focus { background-color: #2a1fe0; }
.tf-btn.btn-line:hover,
.tf-btn.btn-line:focus { border-color: #1c36fc; color: #1c36fc; }

/* WM360 Fonts */
body { font-family: 'DM Sans', sans-serif; }
h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Titillium Web', sans-serif; }

/* Button Radius */
.tf-btn { border-radius: 26px; }

/* Swiper Fade: Ecomus überschreibt Swipers Slide-Positioning.
   Fix: Nicht-aktive Slides ausblenden statt opacity-Animation kämpfen lassen */
.tf-slideshow.slider-effect-fade .swiper-slide:not(.swiper-slide-active) {
  visibility: hidden !important;
  pointer-events: none;
}
.tf-slideshow.slider-effect-fade .swiper-slide.swiper-slide-active {
  visibility: visible !important;
}

/* ============================================================
   WM360 MOBILE OVERRIDES — max-width: 767px
   ============================================================ */

/* FIX 1: Top-Bar auf Mobile verstecken */
.wm-topbar-desktop { display: block; }

/* FIX 2: USP-Leiste — 2x2 Grid auf Mobile */
@media (max-width: 767px) {
  .wm-topbar-desktop { display: none !important; }

  .wm-usp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }

  /* FIX 3: Product-Card Badges kleiner auf Mobile */
  .on-sale-wrap .on-sale-item {
    font-size: 10px !important;
    padding: 2px 6px !important;
    max-width: 72px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* FIX 4: Kategorie-Banner — stärkeres Overlay auf Mobile */
  .wm-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
  }
  .wm-category-banner .tf-breadcrumb a,
  .wm-category-banner .tf-breadcrumb span {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  /* FIX 5: Login 2-Spalten → 1 Spalte */
  .tf-grid-layout.lg-col-2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .tf-login-content {
    order: -1;
  }
  .flat-spacing-10 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* FIX 6: Produktseite — col-md-6 stacked (Bootstrap macht das, aber sticky-top auf Mobile deaktivieren) */
  .tf-product-media-wrap.sticky-top {
    position: static !important;
  }

  /* Staffelpreis-Tabelle horizontal scrollbar */
  .tf-product-info-variant-picker table,
  .quantity-prices-table table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .quantity-prices-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* FIX 7: Footer — col-12 setzt bereits 1 Spalte via Bootstrap.
     Sicherheits-Override für Ecomus-eigenes Grid-System falls aktiv: */
  .footer .footer-body .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .footer-bottom-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Container: weniger seitliches Padding */
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Hero kompakter */
  [style*="min-height: 520px"] { min-height: 340px !important; }

  /* Hero-Inhalt: weniger Padding */
  .tf-slideshow [style*="padding: 60px 0"] { padding: 36px 0 !important; }
  .tf-slideshow [style*="padding: 0 40px"] { padding: 0 20px !important; }

  /* Heading kleiner */
  .heading { font-size: 1.5rem !important; }
  h1 { font-size: 1.4rem !important; }
  .subheading { font-size: 0.7rem !important; }

  /* Sections: weniger vertikales Padding */
  .flat-spacing-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .flat-spacing-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .flat-spacing-11 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  /* Body: Platz für Mobile-Toolbar (56px) */
  body { padding-bottom: 60px; }

  /* USP-Sektion: Padding anpassen wegen 40px-Margin */
  section > [style*="padding: 0 40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* B2B Banner Text-Fix */
  .tf-banner-collection .box-content .container {
    padding: 24px 20px !important;
  }

  /* Wrapper-Control auf Mobile: Stack statt nebeneinander */
  .wrapper-control-shop {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .tf-control-sorting {
    width: 100% !important;
  }
  .tf-control-sorting .tf-select {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Nav-Pagination oben an Header anpassen */
  .nav-sw.nav-next-slider,
  .nav-sw.nav-prev-slider {
    display: none !important;
  }
}