.elementor-7515 .elementor-element.elementor-element-052d1db{--spacer-size:75px;}.elementor-7515 .elementor-element.elementor-element-611a043 .elementor-button{background-color:#02010100;fill:#000000;color:#000000;}.elementor-7515 .elementor-element.elementor-element-611a043 .elementor-button-content-wrapper{flex-direction:row;}.elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper form.eael-woo-cart-form .eael-woo-cart-table .eael-wc-table-body .eael-wct-tr{background-color:#00000000;}.elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper,
					.elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper form.eael-woo-cart-form .eael-woo-cart-table .product-quantity .quantity input[type=number]{background-color:#02010100;}.elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper form.eael-woo-cart-form .eael-woo-cart-table .product-remove a svg,
                    .eael-woo-cart .elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper.eael-woo-style-2 form.eael-woo-cart-form .eael-woo-cart-table .product-thumbnail .eael-woo-cart-product-remove,
                    .elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper.eael-woo-style-2 form.eael-woo-cart-form .eael-woo-cart-table .product-thumbnail .eael-woo-cart-product-remove a svg,
					.elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper.eael-woo-style-2 form.eael-woo-cart-form .eael-woo-cart-table .eael-woo-cart-tr .eael-woo-cart-td.product-remove a svg{height:16px;width:16px;line-height:16px;}.elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper form.eael-woo-cart-form .eael-woo-cart-table .product-remove a i,
                    .elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper form.eael-woo-cart-form .eael-woo-cart-table .product-thumbnail .eael-woo-cart-product-remove a i,
					.elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper.eael-woo-style-2 form.eael-woo-cart-form .eael-woo-cart-table .eael-woo-cart-tr .eael-woo-cart-td.product-remove a i{font-size:16px;}.elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper .eael-cart-coupon-and-collaterals .cart-collaterals button,
					.eael-woo-cart .elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper .eael-cart-clear-btn .button, 
					.eael-woo-cart .elementor-7515 .elementor-element.elementor-element-18f1cb8 .eael-woo-cart-wrapper .eael-cart-coupon-and-collaterals .cart-collaterals .button{background-color:#001931;}.elementor-7515 .elementor-element.elementor-element-44be75e{--spacer-size:100px;}:root{--page-title-display:none;}/* Start custom CSS *//* 1. Make the browser window a flex container */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

/* 2. Target the main content wrapper and force it to grow */
#content, 
#primary, 
.site-content, 
.main-content-wrapper {
    flex: 1 0 auto;
}

/* 3. Keep the footer pinned to the absolute bottom */
footer, 
.site-footer, 
.elementor-location-footer {
    flex-shrink: 0;
    margin-top: auto;
}

.section-that-needs-bg {
  background-image: 
    url('https://thehealthywhole.co.za/wp-content/uploads/2026/08/top-scaled.png'),
    url('https://thehealthywhole.co.za/wp-content/uploads/2026/08/bottom-scaled.png'),
    url('https://thehealthywhole.co.za/wp-content/uploads/2026/08/mid-scaled.png');
  
  background-position: top center, bottom center, center !important;
  background-repeat: no-repeat, no-repeat, repeat-y !important;
  background-size: 100% auto, 100% auto, 100% auto !important;
}

@media (max-width: 767px) {
  .section-that-needs-bg {
    background-image: 
      url('https://thehealthywhole.co.za/wp-content/uploads/2026/08/mobile-top.png'),
      url('https://thehealthywhole.co.za/wp-content/uploads/2026/08/mobile-bottom.png');
    
    background-position: top center, bottom center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: 100% auto, 100% auto !important;
    background-color: #FFFFFF; /* your navy — adjust to exact hex */
    min-height: 100vh; /* forces enough room for both curves to separate */
    padding-top: 15vw;    /* pushes content below the top curve */
    padding-bottom: 15vw; /* keeps content above the bottom curve */
    box-sizing: border-box;
  }
}/* End custom CSS */