/* Bandeja — mobiele optimalisatie (geladen na main.css via mu-plugin bd-mobile.php).
   Selectors met "html body" winnen van inline <style>-blokken (bd-action, scratch.js) en interactive.css in de footer. */

/* ---------- alle schermen: echte bugs ---------- */
/* productgrid kromp naast de zwevende sorteer-select (grid naast float) */
ul.products{clear:both;width:100%}
.woocommerce-result-count{float:left}
/* producten in een pagina-tekst (sale) niet als blauwe onderstreepte links */
.prose ul.products{list-style:none;padding:0;margin:0}
.prose ul.products a:not(.button):not(.btn){color:inherit;text-decoration:none}
.prose ul.products li.product::marker{content:none}
/* nette selects in formulieren (retour, maat, sortering) */
.track-form select,.variations select,.prose form select{appearance:none;-webkit-appearance:none;width:100%;min-height:46px;padding:.7em 2.4em .7em .9em;border:1px solid var(--line);border-radius:12px;font:inherit;color:var(--fg);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b1220' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}
/* cross-sells in de winkelwagen: geen grote blauwe titels */
.cross-sells ul.products a:not(.button):not(.btn){color:inherit;text-decoration:none}
.cross-sells .woocommerce-loop-product__title{font-size:1rem;color:var(--fg)}
/* pagina niet laten scrollen achter de kraslot-popup */
body:has(.bd-pop:not([hidden])){overflow:hidden}

/* ---------- tablet en kleiner ---------- */
@media(max-width:900px){
  .ftr-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .ftr-grid>div:first-child,.ftr-grid>div:last-child{grid-column:1/-1}
}

/* ---------- telefoon ---------- */
@media(max-width:600px){
  .wrap{padding-left:16px;padding-right:16px}
  .sec{padding-block:36px}
  .sec h2,.sec-head h2{font-size:1.5rem;line-height:1.15}
  .sec-head{gap:10px;margin-bottom:16px}
  .lead{font-size:1.02rem}

  /* balken bovenaan */
  .sale-banner{font-size:.82rem;padding:8px 12px;line-height:1.35}
  .sale-banner a{margin-left:4px}

  /* hero homepage + funnels */
  .hero,.hero.funnel-hero{min-height:0}
  .hero-in{padding:40px 16px 34px}
  .hero h1{font-size:clamp(2rem,9vw,2.5rem);line-height:1.05;margin-bottom:.4em}
  .hero .lead{font-size:1rem;line-height:1.55;margin-bottom:22px}
  .hero .cta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero .cta-row .btn{width:100%;justify-content:center;text-align:center;padding:.85em .6em;font-size:.92rem;min-height:48px}
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;margin-top:24px;padding-top:18px}
  .hero-stats b{font-size:1.45rem}
  .hero-stats span{font-size:.72rem;line-height:1.3;display:block}

  /* vertrouwensblokken */
  .trust-strip .wrap{grid-template-columns:1fr 1fr;gap:12px 10px}
  .trust-strip b{font-size:.84rem}
  .trust-strip span{font-size:.72rem}
  .reassure{padding:28px 0}
  .reassure .four,.stats,.four{grid-template-columns:1fr 1fr;gap:18px 14px}
  .reassure .four>div b,.reassure h4{font-size:.92rem;line-height:1.25}
  .reassure span{font-size:.78rem;line-height:1.35}
  .reassure .ic{width:24px;height:24px;margin-bottom:4px}
  .stat{padding:18px 10px}
  .stat b,.stat strong{font-size:1.7rem}
  .stat span,.stat p{font-size:.8rem}

  /* niveaukaarten 2 per rij */
  .level-grid{grid-template-columns:1fr 1fr;gap:10px}
  .level-card{padding:14px 12px}
  .level-card b{font-size:1rem}
  .level-card span{font-size:.8rem;line-height:1.35}

  /* productkaarten */
  ul.products,ul.products.columns-4,ul.products.columns-3{grid-template-columns:1fr 1fr;gap:10px}
  ul.products li.product{padding:10px;border-radius:14px}
  ul.products li.product:hover{transform:none;box-shadow:none}
  ul.products li.product img{border-radius:10px;margin-bottom:8px}
  ul.products .woocommerce-loop-product__title{font-size:.9rem;line-height:1.28;min-height:3.84em;margin-bottom:2px}
  ul.products .price{font-size:.98rem;margin:2px 0 8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
  ul.products .price del{font-size:.8rem}
  ul.products .unit{font-size:.72rem;margin-bottom:4px}
  ul.products .star-rating{font-size:.7rem}
  ul.products li.product .button,ul.products li.product .btn{margin-top:auto;width:100%;min-height:42px;padding:.6em .4em;font-size:.82rem;white-space:nowrap;justify-content:center;text-align:center}
  ul.products .badge,ul.products .onsale{font-size:.66rem;padding:3px 8px}

  /* filters: één regel per groep, horizontaal swipen */
  .filters{padding:12px 0 12px 12px;gap:10px}
  .fgroup{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-right:12px;-webkit-overflow-scrolling:touch}
  .fgroup::-webkit-scrollbar{display:none}
  .fgroup .flabel{flex:none;min-width:52px}
  .fgroup .chip{flex:none;min-height:38px;display:inline-flex;align-items:center}
  .woocommerce-result-count{float:none;margin:0 0 10px;font-size:.85rem}
  .woocommerce-ordering{float:none;display:block;width:100%;margin-bottom:14px}
  .woocommerce-ordering select{width:100%;min-height:44px}
  .woocommerce-pagination a,.woocommerce-pagination span{min-width:42px;min-height:42px;display:flex;align-items:center;justify-content:center}

  /* sale-pagina */
  .sale-count{display:grid!important;grid-template-columns:repeat(4,1fr);gap:8px}
  .sale-count div{min-width:0;padding:8px 4px}
  .sale-count b{font-size:1.35rem}
  .sale-count span{font-size:.62rem}

  /* productpagina */
  .single-product .product_meta{margin-bottom:0}
  .woocommerce-tabs{margin-top:24px}
  .single-product .quantity .qty{min-height:48px}
  body.single-product{padding-bottom:78px}
  /* koopknop: aantal + knop op één rij, maatkeuze volle breedte */
  form.cart{gap:10px;flex-wrap:nowrap}
  form.variations_form.cart{display:block}
  form.cart .single_add_to_cart_button{flex:1;min-height:48px;justify-content:center}
  table.variations,table.variations tbody,table.variations tr,table.variations th,table.variations td{display:block;width:100%;padding:0;border:0}
  table.variations th.label{margin-bottom:6px;font-weight:600;text-align:left}
  table.variations{margin-bottom:12px}
  .reset_variations{display:inline-block;margin-top:6px;font-size:.85rem}
  .woocommerce-variation-add-to-cart{display:flex;gap:10px;align-items:center;margin-top:10px}
  .cookiebar{bottom:10px;left:10px;right:10px;padding:14px}
  .cookiebar p{min-width:0;font-size:.84rem}
  .cookiebar .btn{flex:1;min-height:44px}

  /* checkout */
  .woocommerce-terms-and-conditions-wrapper input[type=checkbox],#terms{width:20px;height:20px;vertical-align:-4px}

  /* reviews: horizontaal swipen in plaats van 6 kaarten onder elkaar */
  .sec .reviews{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;gap:12px;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none}
  .sec .reviews::-webkit-scrollbar{display:none}
  .sec .reviews>*{flex:0 0 84%;scroll-snap-align:start}

  /* footer: linkgroepen naast elkaar */
  .ftr-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .ftr-grid>div:first-child,.ftr-grid>div:last-child{grid-column:1/-1}
  .ftr-grid a{margin-bottom:0;padding:6px 0;font-size:.92rem}
  .ftr h4{margin-bottom:6px}

  /* inline secties (bd-action) */
  html body .bda-hero{min-height:480px}
  html body .bda-hero-in{padding-top:56px;padding-bottom:30px}
  html body .bda-hero-in h2{font-size:1.75rem}
  html body .bda-cap{padding:30px 12px 12px}
  html body .bda-cap b{font-size:1.05rem}
  html body .bda-cap span{font-size:.78rem}
  html body .bda-cap i{font-size:.76rem}
}

@media(max-width:380px){
  .hero .cta-row{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  ul.products .woocommerce-loop-product__title{font-size:.86rem}
  ul.products li.product .button,ul.products li.product .btn{font-size:.78rem}
  html body .sc12{padding:22px 14px}
  html body .sc12 h3{font-size:1.35rem}
  html body .sc12 .pop-sub{font-size:.88rem;margin-bottom:10px}
  html body .sc-grid{gap:6px;padding:10px}
}