<style>
/* base look only; visibility handled inline by JS */
.scroll-to-cart{
  transition: opacity 0.3s ease-in-out;
}
</style>

<script>
(function(){
  var THRESHOLD = 300; // show after 300px
  var btn = document.querySelector('.scroll-to-cart');
  if(!btn) return;

  function show(){ btn.style.opacity = '0.7'; btn.style.pointerEvents = 'auto'; }
  function hide(){ btn.style.opacity = '0'; btn.style.pointerEvents = 'none'; }

  function toggle(){
    if (window.scrollY > THRESHOLD) { show(); } else { hide(); }
  }

  // hide immediately (beats any CSS because it's inline)
  hide();
  // run now + on scroll + after lazy content shifts
  toggle();
  window.addEventListener('scroll', toggle, { passive: true });
  setTimeout(toggle, 400);
})();
</script>

<style>
.afterpay-container {
  margin-top: 10px !important;
  margin-bottom: 1px !important;
  text-align: center !important;
  font-size: 0.85em !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
}

.afterpay-container square-placement {
  display: inline-block !important;
  transform: scale(0.85) !important;
  transform-origin: center !important;
}

/* Force all Afterpay internal elements to have minimal spacing */
.afterpay-container * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

.afterpay-container p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  height: auto !important;
}

.afterpay-container span {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* Reduce spacing on the Add to Cart button container */
.woocommerce-variation-add-to-cart {
  margin-bottom: 1px !important;
}

/* Reduce spacing on the variation container */
.woocommerce-variation {
  margin-bottom: 1px !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const form = document.querySelector('form.variations_form');

  if (!form) return;

  // Function to update Afterpay
  function updateAfterpay() {
    // Check if a variation is selected by looking at the Add to Cart button
    const addToCartButton = document.querySelector('.single_add_to_cart_button');
    const isVariationSelected = addToCartButton && 
                               !addToCartButton.classList.contains('disabled') && 
                               addToCartButton.textContent.includes('Add selected to cart');
    
    if (!isVariationSelected) {
      // Hide Afterpay if no variation is selected
      const existingContainer = document.querySelector('.afterpay-container');
      if (existingContainer) {
        existingContainer.style.display = 'none';
      }
      return;
    }

    if (window.Afterpay && typeof window.Afterpay.createPlacements === 'function') {
      try {
        // Get the current total price from the Add to Cart button
        let currentPrice = 479.00; // fallback
        
        if (addToCartButton) {
          const buttonText = addToCartButton.textContent;
          // Extract the current price (not the strikethrough price)
          const priceMatch = buttonText.match(/\$([0-9,]+\.?[0-9]*)/g);
          if (priceMatch && priceMatch.length > 1) {
            // Take the last price (current price, not strikethrough)
            const lastPrice = priceMatch[priceMatch.length - 1];
            currentPrice = parseFloat(lastPrice.replace(/[^0-9.]/g, ''));
          } else if (priceMatch && priceMatch.length === 1) {
            // Only one price found
            currentPrice = parseFloat(priceMatch[0].replace(/[^0-9.]/g, ''));
          }
        }
        
        // Find or create the afterpay container
        let afterpayContainer = document.querySelector('.afterpay-container');
        if (!afterpayContainer) {
          afterpayContainer = document.createElement('div');
          afterpayContainer.className = 'afterpay-container';
          
          // Add it below the Add to Cart button
          if (addToCartButton && addToCartButton.parentElement) {
            addToCartButton.parentElement.parentElement.appendChild(afterpayContainer);
          }
        }
        
        // Show the container
        afterpayContainer.style.display = 'flex';
        
        // Update the placement without recreating the container
        let placement = afterpayContainer.querySelector('square-placement');
        if (!placement) {
          placement = document.createElement('square-placement');
          afterpayContainer.appendChild(placement);
        }
        
        // Update the placement attributes
        placement.setAttribute('data-mpid', '6a71cfd1-967d-42ae-94be-bd56ecfb5208');
        placement.setAttribute('data-currency', 'AUD');
        placement.setAttribute('data-amount', currentPrice.toFixed(2));
        placement.setAttribute('data-platform', 'WooCommerce');
        placement.setAttribute('data-page-type', 'product-variant');
        placement.setAttribute('data-item-skus', 'template-test');
        placement.setAttribute('data-item-categories', 'KloudSacs');
        
        console.log('Updated Afterpay placement with total price:', currentPrice);
      } catch(e) {
        console.warn('Afterpay placement failed:', e);
      }
    }
  }

  // Listen for swatch clicks and force WooCommerce to re-check variations
  form.addEventListener('click', () => {
    setTimeout(() => {
      if (typeof jQuery !== 'undefined') {
        const $form = jQuery(form);
        // Trigger all the standard WooCommerce variation events
        $form.trigger('check_variations');
        $form.trigger('woocommerce_variation_select_change');
        $form.trigger('woocommerce_variation_has_changed');
        
        // Update Afterpay after variation change
        setTimeout(updateAfterpay, 300);
      }
    }, 50);
  });

  // Listen for addon changes
  document.addEventListener('ks_addons_total_changed', function() {
    setTimeout(updateAfterpay, 100);
  });
});
</script>

/* ATC Button Layout */
.woocommerce-variation-add-to-cart { 
  display: flex !important; 
  width: 100% !important; 
  gap: 1rem !important; 
  align-items: center !important; 
}

.woocommerce-variation-add-to-cart .quantity { 
  flex: 0 0 120px !important; 
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button { 
  flex: 1 1 0 !important; 
  width: auto !important; 
  max-width: none !important; 
  box-sizing: border-box; 
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button span { 
  pointer-events: none !important; 
}

/* Afterpay Styling */
.afterpay-wrap { 
  width: 100% !important; 
  margin: 0.1rem 0 0 !important; 
  display: flex !important; 
  justify-content: center !important; 
}

.afterpay-wrap square-placement { 
  display: inline-block !important; 
  transform: scale(0.85); 
  transform-origin: top center; 
}

/* Reduce Vertical Spacing */
.woocommerce-variation-add-to-cart .woocommerce-variation-price,
.woocommerce-variation-add-to-cart .woocommerce-variation-availability,
.woocommerce-variation-add-to-cart .woocommerce-variation-description { 
  margin-bottom: 0.3rem !important; 
}

/* Addons Container */
#ks-addons { 
  margin: 8px 0 6px !important; 
  border: 1px solid #999 !important; 
  border-radius: 12px !important;
  padding: 12px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#ks-addons .ks-addons-title { 
  font-weight: 700 !important; 
  font-size: 1.05rem !important; 
  margin-bottom: 8px !important;
}

/* Grid Layout */
#ks-addons .ks-addons-grid { 
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Addon Cards */
#ks-addons .ks-addon-card { 
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 10px !important;
  gap: 8px !important;
  border: 1px solid #ddd !important;
  border-radius: 12px !important;
  background: #fff !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Addon Images */
#ks-addons .ks-addon-figure img { 
  width: 100px !important;
  height: 100px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* Addon Text */
#ks-addons .ks-addon-name {
  font-weight: 400 !important;
  line-height: 1.25 !important;
  font-size: 0.9rem !important;
  color: #000 !important;
}

#ks-addons .ks-addon-text .ks-addon-price { 
  font-weight: 400 !important;
  margin-top: 2px !important;
  font-size: 0.85rem !important;
  color: #000 !important;
}

#ks-addons .ks-addon-text .ks-addon-stock { 
  margin-top: 2px !important;
  font-size: 0.8em !important;
  color: #999 !important;
}

/* Checkbox Styling */
#ks-addons .ks-addon-checkbox { 
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  width: 24px !important;
  height: 24px !important;
  border: 2px solid #ddd !important;
  border-radius: 50% !important;
  background: #fff !important;
  appearance: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

#ks-addons .ks-addon-checkbox:checked { 
  background: #fff !important;
  border: 3px solid #111 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}

#ks-addons .ks-addon-card.oos .ks-addon-checkbox { 
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Tablet Responsive */
@media (max-width: 900px) {
  #ks-addons .ks-addons-grid { 
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  
  #ks-addons .ks-addon-figure img { 
    width: 90px !important;
    height: 90px !important;
  }
  
  #ks-addons .ks-addon-name { 
    font-size: 0.85rem !important;
  }
  
  #ks-addons .ks-addon-price { 
    font-size: 0.8rem !important;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  #ks-addons .ks-addons-grid { 
    grid-template-columns: 1fr !important;
    gap: 0px !important;
  }
  
  #ks-addons .ks-addon-card { 
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 12px !important;
    gap: 12px !important;
    border: none !important;
  }
  
  #ks-addons .ks-addon-figure { 
    order: 2 !important;
    flex-shrink: 0 !important;
  }
  
  #ks-addons .ks-addon-figure img { 
    width: 80px !important;
    height: 80px !important;
  }
  
  #ks-addons .ks-addon-text { 
    order: 3 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 80px !important;
  }
  
  #ks-addons .ks-addon-checkbox { 
    order: 1 !important;
    position: static !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    align-self: center !important;
  }
  
  #ks-addons .ks-addon-name { 
    font-size: 0.9rem !important;
    margin-bottom: 4px !important;
  }
  
  #ks-addons .ks-addon-price { 
    font-size: 0.85rem !important;
    margin-top: 0 !important;
  }
  
  #ks-addons .ks-addon-stock { 
    font-size: 0.75em !important;
    margin-top: 2px !important;
  }
  
    .afterpay-container {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .afterpay-container * {
    white-space: nowrap !important;
  }
  
  .afterpay-wrap {
    text-align: center !important;
    justify-content: center !important;
  }
  
  .afterpay-wrap square-placement {
    display: inline-block !important;
    margin: 0 auto !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .afterpay-wrap square-placement {
    transform: scale(0.8) !important;
  }
}

/* Afterpay Container */
.afterpay-container {
  margin-top: 10px;
  text-align: center;
  min-height: 20px;
}

// CRITICAL: Block all errors from interfering with Afterpay
window.addEventListener('error', function(e) {
    if (e.filename && e.filename.includes('chunk-placement.js')) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
});

jQuery(function($){
    var $form          = $('form.variations_form');
    var $button        = $('.single_add_to_cart_button');
    var $variationWrap = $('.single_variation_wrap');
    if (!$variationWrap.length || !$button.length) return;

    function addonsUnitTotal(){
        return (window.KS_ADDONS && typeof KS_ADDONS.getTotal==='function') ? Number(KS_ADDONS.getTotal()||0) : 0;
    }

    // Robust base price reader
    function readBasePrices(){
        var $src = $variationWrap.find('.woocommerce-variation-price .amount');
        if (!$src.length) $src = $variationWrap.find('.price .amount');
        if (!$src.length) $src = $('.summary .price .amount');
        var texts = $src.map(function(){ return $(this).text().trim(); }).get();
        if (texts.length > 2) texts = texts.slice(-2);
        var nums = texts.map(t => parseFloat(t.replace(/[^0-9.]/g,'')) || 0);
        if (!nums.length) return {regular:0, sale:0, hasSale:false};
        if (nums.length === 1) return {regular:nums[0], sale:nums[0], hasSale:false};
        return {regular:nums[0], sale:nums[1], hasSale:true};
    }

function updateButtonText(){
    // Don't update if button is loading
    if ($button.hasClass('loading')) return;
    
    var base = readBasePrices();
    if (!base.regular && !base.sale) { 
        $button.html('<span>Add to cart</span>'); 
        return; 
    }

    var qty    = parseInt($('.woocommerce-variation-add-to-cart .quantity input.qty').val(), 10) || 1;
    var addons = addonsUnitTotal() * qty;

    var saleTotal = (base.sale * qty) + addons;

    // Preserve the button's original attributes and classes
    var originalClasses = $button.attr('class');
    var originalData = $button.data();
    
    $button.html('<span>Add selected to cart $' + saleTotal.toFixed(2) + '</span>');
    
    // Restore original classes and data attributes
    $button.attr('class', originalClasses);
    $button.data(originalData);
}

    // Simple loading text functions
    function showLoading(button) {
        const originalText = button.html();
        button.data('originalText', originalText);
        button.html('Adding...');
    }

    function hideLoading(button) {
        const originalText = button.data('originalText');
        if (originalText) {
            button.html(originalText);
        } else {
            // Fallback: regenerate the button text
            updateButtonText();
        }
    }

    // Ensure OOS cards have no checkbox visual
    function enforceOOSUI(){
        document.querySelectorAll('#ks-addons .ks-addon-card').forEach(function(card){
            var cb = card.querySelector('.ks-addon-checkbox');
            if (!cb) return;
            if (cb.disabled) {
                card.classList.add('oos');
                cb.checked = false;
            } else {
                card.classList.remove('oos');
            }
        });
    }

    // OPTIMIZED: Simplified mutation observer for better performance
    var observer = new MutationObserver(function(mutations) {
        var shouldUpdate = false;
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                shouldUpdate = true;
            }
        });
        
        if (shouldUpdate) {
            setTimeout(function(){ 
                updateButtonText(); 
                enforceOOSUI(); 
            }, 500);
        }
    });

    observer.observe($variationWrap[0], {
        childList: true, 
        subtree: true,
        attributes: false,
        characterData: false
    });

    updateButtonText(); 
    enforceOOSUI();

    // CRITICAL: Proper variation event handling
    if ($form.length) $form.on('show_variation hide_variation', function(){
        setTimeout(function(){ 
            updateButtonText(); 
            enforceOOSUI(); 
        }, 300);
    });

    var $qty = $('.woocommerce-variation-add-to-cart .quantity input.qty');
    if ($qty.length) $qty.on('change keyup', function(){ 
        setTimeout(function(){ 
            updateButtonText(); 
        }, 300);
    });

    document.addEventListener('ks_addons_total_changed', function(){
        setTimeout(function(){ 
            updateButtonText(); 
        }, 300);
    });

    // OPTIMIZED: AJAX add-to-cart with proper error handling
    $(document).off('click.ksAjax', '.single_add_to_cart_button').on('click.ksAjax', '.single_add_to_cart_button', function(e){
        var $btn = $(this);
        var $frm = $btn.closest('form.cart');
        if ($btn.is('.disabled')) return;

        e.preventDefault();
        var formData = new FormData($frm[0]);
        var url = (typeof wc_add_to_cart_params !== 'undefined')
            ? wc_add_to_cart_params.wc_ajax_url.replace('%%endpoint%%', 'add_to_cart')
            : (window.location.href.replace(/(\?|#).*/, '')) + '?wc-ajax=add_to_cart';

        $(document.body).trigger('adding_to_cart', [$btn, formData]);
        $btn.prop('disabled', true).addClass('loading');
        showLoading($btn);

        $.ajax({ 
            url, 
            method:'POST', 
            data:formData, 
            processData:false, 
            contentType:false 
        })
        .done(function(resp){
            if (resp && resp.fragments) $.each(resp.fragments, function(sel, html){ $(sel).replaceWith(html); });
            $(document.body).trigger('added_to_cart', [resp.fragments, resp.cart_hash, $btn]);
            
            // Force immediate cart refresh
            $(document.body).trigger('wc_fragment_refresh');
            setTimeout(function() {
                $(document.body).trigger('updated_wc_div');
            }, 50);
        })
        .fail(function(){ 
            $frm.off('submit.ksFallback').trigger('submit'); 
        })
        .always(function(){ 
            $btn.prop('disabled', false).removeClass('loading');
            hideLoading($btn);
        });
    });
});

<div class="shipping-calculator-custom">
  <p><strong>Delivery</strong></p>
  <p>Check your delivery time and cost.</p>
  <div class="input-row">
    <input id="postcode-input" type="text" maxlength="4" placeholder="Enter your postcode" autocomplete="off">
    <button id="shipping-submit-btn" type="button">Enter</button>
  </div>
  <div id="shipping-result"></div>
</div>

  /* Hide the vendor’s calculator */
  .rpship_calculator { 
    display: none !important; 
  }

  /* Container: left-aligned, no auto-centering */
  .shipping-calculator-custom {
    max-width: 480px;
    margin: 1.5em 0;
    font-family: inherit;
    text-align: left;
  }

  /* “Delivery” title (only if you still use <h2>) */
  .shipping-calculator-custom h2 {
    margin: 0 0 0.25em;
    font-size: 1.5rem;
  }

  /* Subtitle / general paragraph spacing (tighter) */
  .shipping-calculator-custom p {
    margin: 0 0 0.25em;
  }

  /* Postcode row: tighter gap above & below */
  .shipping-calculator-custom .input-row {
    display: flex;
    width: 100%;
    margin: 0.5em 0 0.25em !important; /* tighten under postcode form */
  }

  /* Postcode input: 2/3 width, 25% shorter */
  .shipping-calculator-custom .input-row input {
    flex: 0 0 66%;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    padding: 0 0.75em;
    height: 36px;           /* was 48px */
    font-size: 1rem;
  }

  /* Enter button: keep width by content, pill corners, match height */
  .shipping-calculator-custom .input-row button {
    background: #000;
    color: #fff;
    flex: 0 0 auto;
    border: 1px solid #000;
    border-radius: 12px !important;
    padding: 0 1.5em;
    font-size: 1rem;
    cursor: pointer;
    height: 36px;           /* match input height */
  }

  /* Results container: slightly smaller + tighter */
  #shipping-result {
    font-size: 0.85rem;     /* slight reduction */
    line-height: 1.3;       /* tighter */
    margin-top: 0.5em;      /* reduced gap before results */
  }

  /* ETA text uses same colour as body; countdown in red */
  .shipping-calculator-custom .eta { 
    color: inherit !important; 
    font-size: inherit; 
    margin-top: 0.5em; 
  }
  .shipping-calculator-custom .countdown { 
    color: red !important; 
  }

  /* Table look — tighter vertical rhythm */
  .ks-ship-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5em;      /* was 1em */
  }
  .ks-ship-table th,
  .ks-ship-table td {
    text-align: left;
    padding: 0.4em 0.5em;   /* was 0.5em */
    border-bottom: 1px solid #eee;
  }

  /* ETA column: exactly two lines (no wrapping within each line) */
  .ks-ship-table .ks-eta-date,
  .ks-ship-table .ks-eta-timer {
    white-space: nowrap;
    margin: 0;
    display: block;
  }
  .ks-ship-table .ks-eta-timer .countdown {
    color: red !important;
  }