/* === VANDLA overrides.css — lädt zuletzt ==============================
   Fonts laden, Produktlisten-Buttons stylen (400), Header/Carousel Fixes
   Keine Schriftgrößen – die steuert Elementor/Customizer.
====================================================================== */

/* 0) Design-Variablen (Hover-Farbe hier ändern) */
:root{
  --vd-btn-hover-bg: #222; /* <- Wunschfarbe einsetzen */
  --vd-btn-hover-text: #fff;
  --vd-btn-border: #000;
}

/* 1) Lokale Fonts NUR LADEN (korrekte Gewichte) */
@font-face{
  font-family:'Inter Tight';
  src:url('https://vandla-design.de/wp-content/uploads/2025/09/InterTight-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('https://vandla-design.de/wp-content/uploads/2025/09/InterTight-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('https://vandla-design.de/wp-content/uploads/2025/09/CormorantGaramond-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('https://vandla-design.de/wp-content/uploads/2025/09/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

/* 2) Produktlisten-Buttons – weiß, Pill, kompakter, FONT 400 */
.archive.post-type-archive-product ul.products li.product a.button,
.archive.post-type-archive-product ul.products li.product button.button,
.tax-product_cat ul.products li.product a.button,
.tax-product_cat ul.products li.product button.button,
.elementor .woocommerce ul.products li.product a.button,
.elementor .woocommerce ul.products li.product button.button,
.elementor-widget-woocommerce-products ul.products li.product a.button,
.elementor-widget-woocommerce-products ul.products li.product button.button,
ul.products li.product a.add_to_cart_button,
ul.products li.product button.add_to_cart_button{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  margin:.75rem auto 0 !important;
  padding:10px 22px !important;             /* kompakter */
  background:#fff !important; color:#000 !important;
  border:1px solid var(--vd-btn-border) !important; /* dünner */
  border-radius:9999px !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;

  /* Typo: Inter Tight 400 (nicht bold) */
  font-family:'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight:400 !important;
  font-variation-settings: 'wght' 400 !important; /* falls irgendwo Variable-Font aktiv ist */
  font-synthesis:none !important;

  font-size:clamp(14px, 2.5vw, 16px) !important;
  line-height:1.25 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

/* Produktlisten-Buttons: Hover = globale Sekundärfarbe */
.archive.post-type-archive-product ul.products li.product a.button:hover,
.archive.post-type-archive-product ul.products li.product button.button:hover,
.tax-product_cat ul.products li.product a.button:hover,
.tax-product_cat ul.products li.product button.button:hover,
.elementor .woocommerce ul.products li.product a.button:hover,
.elementor .woocommerce ul.products li.product button.button:hover,
.elementor-widget-woocommerce-products ul.products li.product a.button:hover,
.elementor-widget-woocommerce-products ul.products li.product button.button:hover {
  background: var(--e-global-color-secondary, #222) !important;
  border-color: var(--e-global-color-secondary, #222) !important;
  color: #fff !important;
}

/* Extra kompakt nur mobil (optional) */
@media (max-width: 767px){
  .archive.post-type-archive-product ul.products li.product a.button,
  .archive.post-type-archive-product ul.products li.product button.button,
  .elementor .woocommerce ul.products li.product a.button,
  .elementor .woocommerce ul.products li.product button.button{
    padding:9px 18px !important;
    font-size:14px !important;
  }
}

/* 3) Header mobil – nicht verschoben, nichts abgeschnitten */
@media (max-width: 767px){
  .elementor-location-header .elementor-section,
  .elementor-location-header .elementor-section.elementor-section-stretched,
  .elementor-location-header .e-con{
    width:100% !important; max-width:100% !important;
    left:0 !important; right:0 !important; margin:0 auto !important;
    transform:none !important;
  }
  .elementor-location-header,
  .elementor-location-header .elementor-container,
  .elementor-location-header .e-con-inner{
    padding-inline:16px !important;
    box-sizing:border-box; overflow:visible !important;
  }
  .elementor-menu-cart__toggle,
  .elementor-menu-cart__toggle .elementor-button{
    max-width:100% !important; white-space:nowrap !important;
  }
}

/* 4) Karussell mobil – Bilder sichtbar, Swiper nicht „zerbiegen“ */
@media (max-width: 767px){
  .elementor-widget-image-carousel .swiper,
  .elementor-widget-image-carousel .swiper-wrapper,
  .elementor-widget-woocommerce-products .swiper,
  .elementor-widget-woocommerce-products .swiper-wrapper{
    overflow: visible !important;  /* nichts wegclippen */
    height: auto !important;
  }
  /* KEIN width:100% für Slides erzwingen! Swiper setzt es selbst. */
  .elementor .swiper-slide img{ display:block !important; width:100% !important; height:auto !important; }
}

/* 5) Kleinkram */
.elementor-swiper .swiper-pagination{ overflow:visible; }