/*
Theme Name: Hello Child
Theme URI: https://example.com
Author: Erwin Bonné
Author URI: https://bwebs.be/erwin-bonne
Description: Child theme voor Hello Elementor
Version: 1.0.0
Template: hello-elementor
Text Domain: hello-child
*/

/* WooCommerce producten in Elementor: 1 per rij op mobiel, geen overlap */
@media (max-width: 767px) {
  .elementor-widget-woocommerce-products ul.products {
    display: block;                 /* breek grid/flex die blijft hangen */
  }
  .elementor-widget-woocommerce-products ul.products li.product {
    width: 100% !important;
    float: none !important;         /* floats uit op mobiel */
    clear: both;                    /* forceer nieuwe regel */
    margin: 0 0 24px !important;    /* genoeg ondermarge */
    position: relative;             /* voor veiligheid bij z-index issues */
  }

  /* Zorg dat content binnen de kaart niet uitsteekt */
  .elementor-widget-woocommerce-products ul.products li.product .woocommerce-LoopProduct-link,
  .elementor-widget-woocommerce-products ul.products li.product a {
    display: block;
  }
  .elementor-widget-woocommerce-products ul.products li.product img {
    width: 100%;
    height: auto;
  }
}

/* Als de sectie eronder alsnog ‘eronder schuift’, kun je dit toevoegen: */
@media (max-width: 767px) {
  .elementor-section { clear: both; }
}

/* 1) Kill the pseudo-element arrow Elementor adds to the link */
.elementor-nav-menu .menu-item-has-children > a:after {
  content: none !important;
}

/* 2) If one arrow is inside the <a>, hide it */
.elementor-nav-menu .menu-item-has-children > a .sub-arrow {
  display: none !important;
}

/* 3) If Elementor outputs multiple .sub-arrow siblings, keep only the first */
.elementor-nav-menu .menu-item-has-children > .sub-arrow:not(:first-of-type) {
  display: none !important;
}

/* --- WooCommerce Cart: mobiele fix (Hello + Elementor) --- */

/* Veiligheidsnet: alles binnen de cart moet in de viewport blijven */
.woocommerce-cart, .woocommerce-cart * { box-sizing: border-box; }
.woocommerce-cart .product-name a { word-break: break-word; overflow-wrap: anywhere; }

/* Hello/Elementor wrappers mogen geen extra breedte forceren */
.elementor .woocommerce .shop_table,
.elementor .woocommerce .cart-collaterals,
.elementor .woocommerce .cart {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* Cart totals/collaterals altijd 100% breed op mobiel */
@media (max-width: 768px) {
  .woocommerce .cart-collaterals,
  .woocommerce .cart-collaterals .cart_totals {
    float: none !important;
    width: 100% !important;
    clear: both !important;
  }
}

/* --- Cart table → stacked layout op mobiel --- */
@media (max-width: 768px) {
  .woocommerce-cart .shop_table {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
  }

  .woocommerce-cart .shop_table thead { 
    display: none !important; 
  }

  .woocommerce-cart .shop_table tbody,
  .woocommerce-cart .shop_table tr,
  .woocommerce-cart .shop_table td,
  .woocommerce-cart .shop_table th {
    display: block !important;
    width: 100% !important;
  }

  .woocommerce-cart .shop_table td {
    position: relative;
    padding-left: 44% !important;   /* ruimte voor label */
    text-align: left !important;
    white-space: normal !important;  /* heel belangrijk: mag afbreken */
    word-break: break-word;
  }

  .woocommerce-cart .shop_table td::before {
    content: attr(data-title);
    position: absolute;
    top: 0; left: 0;
    width: 42%;
    padding: 12px 10px;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
  }

  /* Beeld, remove, qty en knoppen netjes schalen */
  .woocommerce-cart .product-thumbnail img { 
    width: 96px !important; height: auto !important; 
  }
  .woocommerce-cart .product-remove { 
    position: absolute; right: 10px; top: 10px; 
  }
  .woocommerce .quantity .qty { 
    max-width: 90px !important; 
  }
  .woocommerce-cart .actions { 
    display: block !important; 
  }
  .woocommerce-cart .actions .coupon { 
    display: flex; gap: 8px; flex-wrap: wrap; 
  }
  .woocommerce-cart .actions .coupon .input-text { 
    flex: 1 1 180px; min-width: 0; width: 100% !important; 
  }
  .woocommerce-cart .actions .button,
  .woocommerce-cart .actions .coupon .button {
    width: 100% !important;
  }
}

/* N.B.: verwijder eventuele eerdere regels met:
   .woocommerce-cart .shop_table td, th { white-space: nowrap; }
   want dat veroorzaakt juist de overflow op mobiel. */