/* ================================================
   VLABTECH MOBILE CSS
   Alleen voor schermen <= 768px
   Desktop wordt NIET aangeraakt
   ================================================ */

/* Prijs rij en knoppen (desktop + mobiel) */
.vlab-price-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:8px 0 6px; }
.vlab-price-row .vlab-price { font-size:22px; font-weight:900; color:#fff; }
.vlab-price-row .vlab-stars { font-size:13px; color:#ffbc00; }
.vlab-price-row .vlab-stars span { color:rgba(255,255,255,.6); margin-left:3px; }
.vlab-btn-row { display:flex; flex-direction:row; gap:8px; margin-top:10px; width:100%; box-sizing:border-box; }
.vlab-card-view-btn { flex:1; height:42px; display:flex; align-items:center; justify-content:center; background:#1684a8; color:#fff; border:none; border-radius:6px; text-decoration:none; font-weight:800; font-size:14px; }
.vlab-card-cart-btn { width:42px; min-width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:6px; text-decoration:none; font-size:18px; }

@media screen and (max-width: 768px) {

  /* === HEADER === */
  .vlab-hamburger { display:flex !important; }
  .vlab-menu { display:none !important; }
  .vlab-topbar .vlab-contact { display:none !important; }
  .vlab-topbar {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:12px 16px !important;
  }

  /* === BANNER: volledig zichtbaar op mobiel === */

  /* Slider container: hoogte bepaald door afbeelding */
  .vlab-wrap.vlab-layout-home .vlab-slider {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
  .vlab-wrap.vlab-layout-home .vlab-slides {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Slider container: vaste hoogte, overflow hidden */
  .vlab-wrap.vlab-layout-home .vlab-slider {
    overflow: hidden !important;
  }
  .vlab-wrap.vlab-layout-home .vlab-slides {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  /* ALLE slides: absoluut op elkaar gestapeld */
  .vlab-wrap.vlab-layout-home .vlab-slide {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
  }
  /* Actieve slide: zichtbaar, geen offset */
  .vlab-wrap.vlab-layout-home .vlab-slide.is-active {
    position: relative !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    z-index: 2 !important;
  }

  /* Banner afbeelding: volledig zichtbaar, gecentreerd */
  .vlab-wrap.vlab-layout-home .vlab-banner-img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Slide content (tekst overlay) verbergen op mobiel - staat al in de afbeelding */
  .vlab-wrap.vlab-layout-home .vlab-slide-content,
  .vlab-wrap.vlab-layout-home .vlab-pos-left .vlab-slide-content,
  .vlab-wrap.vlab-layout-home .vlab-pos-right .vlab-slide-content {
    display: none !important;
  }

  /* Pijltjes verbergen op mobiel - swipe werkt */
  .vlab-wrap.vlab-layout-home .vlab-arrow {
    display: none !important;
  }

  /* Override de inline CSS variabelen die vaste hoogte zetten */
  .vlab-wrap.vlab-layout-home {
    --vlab-banner-h: auto !important;
    --vlab-banner-h-mobile: auto !important;
  }

  /* === PRODUCTEN === */
  .vlab-hp-products {
    flex-direction: column !important;
    gap: 14px !important;
    margin: 14px 0 !important;
    padding: 0 !important;
  }
  .vlab-hp-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .vlab-hp-thumb {
    height: 55vw !important;
    max-height: 280px !important;
  }
  .vlab-hp-body { padding: 12px 14px 14px !important; }
  .vlab-hp-body h3 { font-size: 16px !important; margin: 0 0 6px !important; }
  .vlab-hp-desc { font-size: 13px !important; -webkit-line-clamp: 3 !important; }
  .vlab-hp-meta { margin-top: 8px !important; padding-top: 8px !important; }
  .vlab-hp-price { font-size: 18px !important; }
  .vlab-hp-btns { margin-top: 10px !important; }
  .vlab-hp-view { height: 40px !important; font-size: 14px !important; }
  .vlab-hp-cart { width: 40px !important; height: 40px !important; font-size: 16px !important; }
}