/* == Mobiele verbeteringen (Claude) == */
@media (max-width: 600px) {

  /* 1. Footer: van 4 kolommen naar 2 -> geen horizontale scroll meer
        (kwam voor op home, winkelwagen & checkout) */
  .bro-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px;
  }

  /* 2. Labresultaten-header: nav-links + winkelwagenknop laten afbreken
        in plaats van buiten beeld te duwen; overmatige padding terug */
  .lab-nav-links {
    flex-wrap: wrap !important;
    row-gap: 12px;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .lab-btn-cart {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* 3. Grotere tik-doelen (min. ~44px) in mobiel menu en footer */
  .bro-mnav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .bro-footer-col a {
    display: inline-block;
    padding: 8px 0;
  }

  /* 4. Vangnet tegen resterende horizontale scroll */
  html, body { overflow-x: hidden; }
}

/* 5. Betaalbadges (desktop trust-balk) leesbaarder */
.pay-chip { font-size: 12px; }


/* BRO kennisbank cards */
.page-id-425 .wp-block-post-template{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:20px !important;width:100%;margin:2rem 0 0;padding:0;list-style:none;}
@media(max-width:820px){.page-id-425 .wp-block-post-template{grid-template-columns:1fr !important;}}
.page-id-425 .wp-block-post-template li.wp-block-post{width:auto !important;min-width:0 !important;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e6e8eb;border-radius:16px;padding:24px;box-shadow:0 1px 3px rgba(15,23,42,.05);transition:box-shadow .2s ease,transform .2s ease;}
.page-id-425 .wp-block-post-template li.wp-block-post:hover{box-shadow:0 10px 28px rgba(15,23,42,.09);transform:translateY(-3px);}
.page-id-425 .wp-block-post-title{font-size:1.2rem !important;line-height:1.35 !important;margin:0 0 12px !important;font-weight:700 !important;letter-spacing:-.01em;}
.page-id-425 .wp-block-post-title a{color:#0f172a !important;text-decoration:none;}
.page-id-425 .wp-block-post-title a:hover{text-decoration:underline;}
.page-id-425 .wp-block-post-excerpt{display:flex;flex-direction:column;flex:1;margin:0;min-width:0;}
.page-id-425 .wp-block-post-excerpt__excerpt{font-size:.92rem;line-height:1.6;color:#4b5563;margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.page-id-425 .wp-block-post-excerpt .wp-block-post-excerpt__more-link,.page-id-425 .wp-block-read-more,.page-id-425 li.wp-block-post .wp-block-read-more{display:inline-block;align-self:flex-start;margin-top:auto;padding:9px 18px;background:#0f172a;color:#fff !important;border-radius:9px;text-decoration:none !important;font-size:.88rem;font-weight:600;}
.page-id-425 .wp-block-post-excerpt .wp-block-post-excerpt__more-link:hover,.page-id-425 .wp-block-read-more:hover{background:#1e293b;}


/* BRO producten-menu categorieen */
.bro-cat > a{font-size:.72rem !important;font-weight:700 !important;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8 !important;}
.bro-cat{margin-top:4px;}
.bro-cat:not(:first-child){border-top:1px solid #eef0f2;padding-top:6px;margin-top:6px;}


/* BRO gallery fix - productfoto altijd tonen (WooCommerce flexslider reveal faalt soms) */
.woocommerce-product-gallery{opacity:1 !important;}
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image{opacity:1 !important;}


/* == Gelijke hoogte productkaarten + uitgelijnde knoppen (Claude) == */
body.woocommerce-shop ul.products li.product,
body.tax-product_cat ul.products li.product {
  height: 100% !important;
}
body.woocommerce-shop ul.products li.product a.button.button,
body.tax-product_cat ul.products li.product a.button.button {
  margin-top: auto !important;
}

/* == Verberg tier-labels op productkaarten (Clinical White / Dark Lab / Nordic Frost) (Claude) == */
.pc-tier { display: none !important; }

/* == Gerelateerde producten: 2 kolommen op tablet & mobiel i.p.v. 4 (Claude) == */
@media (max-width: 960px) {
  body.single-product .related.products ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}