{{ header }}

<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"Organization",
  "name":"Popper Express Australia",
  "url":"https://popperexpress.com.au/",
  "logo":"https://popperexpress.com.au/image/catalog/POPPER EXPRESS LOGO/popperexpress.png",
  "sameAs":[
    "https://www.facebook.com/PopperExpressAU",
    "https://www.instagram.com/PopperExpressAU"
  ]
}
</script>
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"WebSite",
  "url":"https://popperexpress.com.au/",
  "name":"Popper Express Australia",
  "potentialAction":{
    "@type":"SearchAction",
    "target":"https://popperexpress.com.au/index.php?route=product/search&search={search_term_string}",
    "query-input":"required name=search_term_string"
  }
}
</script>

<script src="catalog/view/javascript/workdo/jquery.ez-plus.js" type="text/javascript"></script>
<script src="catalog/view/javascript/workdo/web.js" type="text/javascript"></script>
<div class="">
<div id="product-info">
  <div class="">{{ column_left }}
    <div id="content" class="col">
      
      <div class="productbg p-bg">
      <div class="container">            
        <div class="row mb-3">
          <!-- Breadcrumb -->
          <div class="d-flex justify-content-between align-items-center pt-3 pb-3">
            <div class="">
            <div class="back-to-home">
                <a href="{{ home }}"><img src="image/catalog/back-to-home.svg" alt="Back to home"> &nbsp <span> {{ back_to_main }}</span></a>
            </div>  
            </div>
            <div class="">
              <ul class="breadcrumb ">
                {% for breadcrumb in breadcrumbs %}
                  <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
                {% endfor %}
              </ul>  
            </div> 
          </div>
          <!-- Breadcrumb end -->

          <div class="col-lg-4 col-md-4 col-xs-12 pro-content mt-3 t-50 order-sm-1 order-0">
           <div class="parallex-item">
              {% if review_status %}
                  <div class="rating">
                    <li>{% for i in 1..5 %}
                        {% if rating < i %}
                        <span class="fa-stack"><i class="fa-regular fa-star fa-stack-1x"></i></span>
                      {% else %}
                        <span class="fa-stack"><i class="fa-solid fa-star fa-stack-1x"></i><i class="fa-regular fa-star fa-stack-1x"></i></span>
                      {% endif %}
                      {% endfor %}
                      </li>
                      <li class="proreview">
                        <a id="ratecount" href="" onClick="$('a[href=\'#tab-review\']').tab('show'); return false;">{{ text_reviews }}</a> 
                      </li>
                      <li>
                      <a  id="ratep" href="#rt" onClick="$('a[href=\'#tab-review\']').trigger('click'); return false;">{{ text_write }}</a>
                    </li>
                  </div>
                {% endif %}
              <h1>{{ product_name }}</h1>
              {% if status == "yes" and seo_heading_title  %}
                <h2 style="color:{{ text_color_pro }}">{{ seo_heading_title }}</h2>
              {% endif %}
            <div id="product" class="clearfix">
              <form id="form-product">
                {% if options %}
                <h3>{{ text_option }}</h3>
                
                  {% for option in options %}

                    {% if option.type == 'select' %}
                      <div class="mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <select name="option[{{ option.product_option_id }}]" id="input-option-{{ option.product_option_id }}" class="form-select">
                          <option value="">{{ text_select }}</option>
                          {% for option_value in option.product_option_value %}
                            <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
                              {% if option_value.price %}
                                ({{ option_value.price_prefix }}{{ option_value.price }})
                              {% endif %}</option>
                          {% endfor %}
                        </select>
                        <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                      </div>
                    {% endif %}

                    {% if option.type == 'radio' %}
                      <div class="mb-3{% if option.required %} required{% endif %}">
                        <label class="form-label">{{ option.name }}</label>
                        <div id="input-option-{{ option.product_option_id }}">
                          {% for option_value in option.product_option_value %}
                            <div class="form-check">
                              <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" id="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-input"/> <label for="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-label">{% if option_value.image %}<img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %}{{ option_value.price_prefix }} {{ option_value.price }}{% endif %}" class="img-thumbnail"/>{% endif %}
                                {{ option_value.name }}
                                {% if option_value.price %}
                                  ({{ option_value.price_prefix }}{{ option_value.price }})
                                {% endif %}
                              </label>
                            </div>
                          {% endfor %}
                        </div>
                        <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                      </div>
                    {% endif %}

                    {% if option.type == 'checkbox' %}
                      <div class="mb-3{% if option.required %} required{% endif %}">
                        <label class="form-label">{{ option.name }}</label>
                        <div id="input-option-{{ option.product_option_id }}">

                          {% for option_value in option.product_option_value %}
                            <div class="form-check">
                              <input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" id="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-input"/> <label for="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-label">
                                {% if option_value.image %}
                                  <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %}{{ option_value.price_prefix }} {{ option_value.price }}{% endif %}" class="img-thumbnail"/>{% endif %}
                                {{ option_value.name }}
                                {% if option_value.price %}
                                  ({{ option_value.price_prefix }}{{ option_value.price }})
                                {% endif %}</label>
                            </div>
                          {% endfor %}

                        </div>
                        <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                      </div>
                    {% endif %}

                    {% if option.type == 'text' %}
                      <div class="mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>
                        <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                      </div>
                    {% endif %}

                    {% if option.type == 'textarea' %}
                      <div class="mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea>
                        <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                      </div>
                    {% endif %}

                    {% if option.type == 'file' %}
                      <div class="mb-3{% if option.required %} required{% endif %}">
                        <label for="button-upload-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label>
                        <div>
                          <button type="button" id="button-upload-{{ option.product_option_id }}" data-oc-toggle="upload" data-oc-size-max="{{ config_file_max_size }}" data-oc-size-error="{{ error_upload_size }}" data-oc-url="{{ upload }}" data-oc-target="#input-option-{{ option.product_option_id }}" class="btn btn-light btn-block"><i class="fas fa-upload"></i> {{ button_upload }}</button>
                          <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option-{{ option.product_option_id }}"/>
                        </div>
                        <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                      </div>
                    {% endif %}

                    {% if option.type == 'date' %}
                      <div class="mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label>
                        <div class="input-group">
                          <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control date"/>
                          <div class="input-group-text"><i class="fas fa-calendar"></i></div>
                        </div>
                        <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                      </div>
                    {% endif %}

                    {% if option.type == 'datetime' %}
                      <div class="mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label>
                        <div class="input-group">
                          <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control datetime"/>
                          <div class="input-group-text"><i class="fas fa-calendar"></i></div>
                        </div>

                        <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                      </div>
                    {% endif %}

                    {% if option.type == 'time' %}
                      <div class="mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label>
                        <div class="input-group">
                          <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control time"/>
                          <div class="input-group-text"><i class="fas fa-calendar"></i></div>
                        </div>
                        <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                      </div>
                    {% endif %}

                  {% endfor %}
                  {% endif %}

                  {% if subscription_plans %}
                    <hr/>
                    <h3>{{ text_subscription }}</h3>

                    <div class="mb-3 required">
                      <select name="subscription_plan_id" id="input-subscription" class="form-select">
                        <option value="">{{ text_select }}</option>
                        {% for subscription_plan in subscription_plans %}
                          <option value="{{ subscription_plan.subscription_plan_id }}">{{ subscription_plan.name }}</option>
                        {% endfor %}
                      </select>

                      {% for subscription_plan in subscription_plans %}
                        <div id="subscription-description-{{ subscription_plan.subscription_plan_id }}" class="form-text subscription d-none">{{ subscription_plan.description }}</div>
                      {% endfor %}

                      <div id="error-subscription" class="invalid-feedback"></div>

                    </div>
                  {% endif %}
                  
                  {% if price %}
                    <ul class="list-unstyled">
                      {% if not special %}
                        <li class="text-decor-bold">
                          <h2><span class="price-new">{{ price }}</span></h2>
                        </li>
                      {% else %}
                      <ul class="list-inline">
                        <li class="text-decor-bold"><h2><span class="price-new">{{ special }}</span></h2></li>
                        <li><span class="price-old">{{ price }}</span></li></ul>
                      {% endif %}

                      {% if tax %}
                        <li>{{ text_tax }} {{ tax }}</li>
                      {% endif %}

                      {% if points %}
                        <li>{{ text_points }} {{ points }}</li>
                      {% endif %}
                      {% if discounts %}
                        <li>
                          <hr>
                        </li>
                        {% for discount in discounts %}
                          <li>{{ discount.quantity }}{{ text_discount }}{{ discount.price }}</li>
                        {% endfor %}
                      {% endif %}
                    </ul>
                  {% endif %}
                  <div class="">
                    <div class="qty-flex">
                    {# <label for="input-quantity" class="form-label">{{ entry_qty }}</label> #}
                    <div class="op-box qty-plus-minus">
                    <button type="button" class="form-control pull-left btn-number btnminus" disabled="disabled" data-type="minus" data-field="quantity">
                      <span class="fa fa-minus"></span> 
                    </button>
                    <input id="input-quantity" type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" class="form-control input-number pull-left" />
                    <button type="button" class="form-control pull-left btn-number btnplus" data-type="plus" data-field="quantity">
                        <span class="fa fa-plus"></span>
                    </button>
                    <div id="error-quantity" class="form-text"></div> 
                  </div>
                  <button type="submit" id="button-cart" class="btn btn-primary btn-lg btn-block">{{ button_cart }}</button>
                  <input type="hidden" name="product_id" value="{{ product_id }}"/>
                </div>
                    <br/>
                  </div>
                  {% if minimum > 1 %}
                    <div class="alert alert-info"><i class="fas fa-info-circle"></i> {{ text_minimum }}</div>
                  {% endif %}
                </form>
                                            <!-- CRO: Stock Urgency Box (under ATC) -->
                  <div id="stock-msg" class="stock-box" aria-live="polite">
                    ⚡ Hurry — only <span id="stock-count" class="stock-num"></span> left in stock today! ⏳
                  </div>
                  
                  <style>
                    .pro-content .qty-flex {
                      justify-content: space-between;
                    }
                    .op-box.qty-plus-minus {
                      width: 35%;
                    }
                    #button-cart {
                      width: 65%;
                      color: #fdfdfd;
                    }
                    .parallex-item {
                      text-align: left;
                      border: 1px solid #ebebeb;
                      padding: 0 16px;
                      border-radius: 10px;
                      transition: 0.3s ease;
                      background: #fdfdfd;
                    }
                    .parallex-item.p-detls {
                      text-align: left !important;
                      margin-top: 15px !important;
                      padding-top: 12px !important;
                      padding-bottom: 12px !important;
                    }
                    .stock-box {
                      margin-top:10px;
                      background:#fff3cd;
                      border:1px solid #ffeeba;
                      border-radius:6px;
                      padding:10px;
                      text-align:center;
                      font-size:14px;
                      font-weight:600;
                      color:#856404;
                    }
                    .stock-num {
                      color:#d9534f;
                      font-weight:700;
                    }
                  </style>
                  
                  <script>
                    (function(){
                      try {
                        var min = 3, max = 9;
                  
                        // use product ID if available, fallback to URL
                        var productKey = document.querySelector('[name="product_id"]')?.value 
                                        || window.location.pathname;
                  
                        var key = "stock-count-" + productKey;
                        var n = sessionStorage.getItem(key);
                  
                        if (!n) {
                          n = Math.floor(Math.random() * (max - min + 1)) + min;
                          sessionStorage.setItem(key, n);
                        }
                  
                        var el = document.getElementById("stock-count");
                        if (el) el.textContent = n;
                      } catch(e){}
                    })();
                  </script>
                  <!-- /CRO: Stock Urgency Box -->
                <!-- Trust Strip – 2 per line -->
                  <style>
                    .trust-grid {
                      max-width:1100px;
                      margin:18px auto;
                      /*
                      padding:12px 16px;
                      background:#fff;
                      */
                      border-radius:12px;
                      box-shadow:0 6px 18px rgba(0,0,0,0.06);
                      display:grid;
                      grid-template-columns:repeat(2,1fr);
                      gap:14px;
                      font-size:14px;
                      font-weight:700;
                      color:#111;
                      text-align:center;
                    }
                    .trust-grid div {
                      box-shadow: 0 0px 1px 2px #ebebeb;
                      padding:12px 10px;
                      background:#f9f9f9;
                      border-radius:8px;
                      transition:all .25s ease;
                    }
                    .trust-grid div:hover {
                      background:#000;
                      color:#fff;
                      transform:translateY(-2px);
                    }
                    /* On mobile <480px, stack into 1 column */
                    @media (max-width:480px) {
                      .trust-grid { grid-template-columns:1fr; }
                    }
                  </style>
                  
                  <div class="trust-grid">
                    <div>⚡ Fast Express Shipping</div>
                    <div>🛡️ 100% Authentic Brands</div>
                  </div>
                    <!-- AddToAny BEGIN -->
                    <style>
                      .a2a_kit.custom-grid {
                        display: grid !important;
                        grid-template-columns: repeat(6, 1fr);
                        gap: 8px;
                        max-width: 300px;
                        margin: 0 auto;
                      }
                      .a2a_kit.custom-grid a {
                        width: 40px !important;
                        height: 40px !important;
                        display: flex !important;
                        align-items: center;
                        justify-content: center;
                        border-radius: 8px;
                        background: #f9f9f9;
                        transition: all 0.3s ease;
                      }
                      .a2a_kit.custom-grid a:hover {
                        transform: scale(1.1);
                        background: #ffcc00;
                      }
                    </style>
                    {#
                    <div class="a2a_kit a2a_kit_size_32 a2a_default_style custom-grid">
                    <a class="a2a_button_facebook"></a>
                    <a class="a2a_button_twitter"></a>
                    <a class="a2a_button_pinterest"></a>
                    <a class="a2a_button_tumblr"></a>
                    <a class="a2a_button_reddit"></a>
                    <a class="a2a_button_whatsapp"></a>
                    </div>
                  <script async src="https://static.addtoany.com/menu/page.js"></script>
                  #}
                  <!-- AddToAny END -->
            </div>
          </div>


  <!-- SECTION 2: WHY CUSTOMERS CHOOSE US -->
  <!-- SECTION 2: WHY CUSTOMERS CHOOSE US -->
<style>
  .why-us {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #fff;
    padding: 20px 15px;
    margin: 10px 0;
    border: 1px solid #ebebeb;
    border-radius: 5px;
  }
  .why-us__inner {
    max-width: 960px;
    margin: 0 auto;    
  }
  .why-us__heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a1a1a;
    text-align: left;
    margin: 0 0 16px;
    display: block;
  }
  .why-us__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;    
    grid-gap: 10px;
  }
  .why-us__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0 6px 0 0;
    border-right: 1px solid #e0e0e0;    
  }
  .why-us__card:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
  }
  .why-us__icon-wrap {
    width: 56px;
    height: 56px;
    border: 1.5px solid #1a1a1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .why-us__icon-wrap svg {
    width: 26px;
    height: 26px;
    stroke: #1a1a1a;
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .why-us__card-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: 0.01em;
  }
  .why-us__card-text {
    font-size: 12.5px;
    color: #555;
    margin: 0;
    line-height: 1.6;
  }
  @media (max-width: 760px) {
    .why-us__heading { text-align: center; }
    .why-us__grid { grid-template-columns: repeat(2, 1fr); }
    .why-us__card { padding: 0 20px 24px 0; margin-right: 20px; }
    .why-us__card:nth-child(2) { border-right: none; margin-right: 0; padding-right: 0; }
    .why-us__card:nth-child(3),
    .why-us__card:nth-child(4) { padding-top: 24px; }
    .why-us__card:nth-child(3) { border-right: 1px solid #e0e0e0; }
  }
  @media (max-width: 420px) {
    .why-us__grid { grid-template-columns: 1fr; }
    .why-us__card { padding: 0 0 20px 0; margin-right: 0; border-right: none !important; border-bottom: 1px solid #e0e0e0; }
    .why-us__card:last-child { border-bottom: none; padding-bottom: 0; }
  }
</style>

<div class="why-us">
  <div class="why-us__inner">
    <p class="why-us__heading">Why Customers Choose Us</p>
    <div class="why-us__grid">

      <!-- Trusted Quality -->
      <div class="why-us__card">
        <div class="why-us__icon-wrap">
          <svg viewBox="0 0 24 24">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/>
          </svg>
        </div>
        <p class="why-us__card-title">Trusted Quality</p>
        <p class="why-us__card-text">Carefully selected products you can rely on.</p>
      </div>

      <!-- Great Service -->
      <div class="why-us__card">
        <div class="why-us__icon-wrap">
          <svg viewBox="0 0 24 24">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
          </svg>
        </div>
        <p class="why-us__card-title">Great Service</p>
        <p class="why-us__card-text">We're here to help before and after your purchase.</p>
      </div>

      <!-- Ready to Ship -->
      <div class="why-us__card">
        <div class="why-us__icon-wrap">
          <svg viewBox="0 0 24 24">
            <rect x="1" y="3" width="15" height="13" rx="1"/>
            <path d="M16 8h4l3 5v4h-7V8z"/>
            <circle cx="5.5" cy="18.5" r="2.5"/>
            <circle cx="18.5" cy="18.5" r="2.5"/>
          </svg>
        </div>
        <p class="why-us__card-title">Ready to Ship</p>
        <p class="why-us__card-text">In stock and dispatched fast.</p>
      </div>

      <!-- Customer Approved -->
      <div class="why-us__card">
        <div class="why-us__icon-wrap">
          <svg viewBox="0 0 24 24">
            <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z"/>
            <path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>
          </svg>
        </div>
        <p class="why-us__card-title">Customer Approved</p>
        <p class="why-us__card-text">Consistently highly rated by customers.</p>
      </div>

    </div>
  </div>
</div>
<!-- END SECTION 2 -->


          {#
            <div class="parallex-item mt-2">
              <span>WHY CUSTOMERS CHOOSE US</span>

              

            </div>
          #}
           
         </div>
         <div class="col-lg-4 col-md-4 col-xs-12 zoom-left sticky t-50 order-sm-0 order-1">
          {% if thumb or images %}
            <div class="image magnific-popup">
              {% if thumb %}
                <a href="{{ popup }}" title="{{ product_name }}"><img  id="img_01" src="{{ thumb }}" data-zoom-image="{{ popup }}"  title="{{ product_name }}" alt="{{ product_name }}" class="img-thumbnail img-fluid mb-3"/></a>
              {% endif %}

              {% if images %}                
                <div id="gal1" class="gallery_img">
                
                <!-- <a href="{{ popup }}" class="elevatezoom-gallery img-fluid" title="{{ product_name }}" data-update="" data-image="{{ thumb }}"  data-zoom-image="{{ thumb }}"><img width="100" src="{{ thumb }}" data-zoom-image="{{ popup }}" id="img_01" title="{{ product_name }}" alt="{{ product_name }}" class="img-thumbnail"/></a>&nbsp; -->



                 {% for image in images %}
                    <a href="{{ image.popup }}" title="{{ product_name }}" data-image="{{ image.thumb }}"  data-zoom-image="{{ image.thumb }}"><img src="{{ image.thumb }}" title="{{ product_name }}" alt="{{ product_name }}" class="img-thumbnail elevatezoom-gallery img-fluid" width="100" /></a>&nbsp;
                  {% endfor %}
                </div>
              {% endif %}
            </div>
          {% endif %}
         </div>
         <div class="col-lg-4 col-md-4 col-xs-12 t-none order-sm-2 order-2">
          <div class="bg-green p-detls parallex-item">
                <span class="products-details">ADITIONAL INFO: </span>
                <p>Great News!! It looks like this product is In Stock and ready to ship. <br>Seen it Cheaper? Let us know and we'll match it (conditions apply)</p>
                <span class="products-details"> PRODUCTS DETAILS: </span>
                   <ul class="list-unstyled">
                      {% if manufacturer %}
                        <li><span class="text-decor">{{ text_manufacturer }}</span><a href="{{ manufacturers }}">{{ manufacturer }}</a></li>
                      {% endif %}
                      <li><span class="text-decor">{{ text_model }}</span>{{ model }}</li>                
                    </ul>
                    <ul class="list-unstyled">
                      {% if reward %}
                      <li><span class="text-decor">{{ text_reward }}</span>{{ reward }}</li>
                      {% endif %}
                      <li><span class="text-decor">{{ text_stock }}</span>{{ stock }}</li>
                    </ul>
          </div>
          <div class="vert-testimonial">
           {{ content_top }}
          </div>
         </div>         
        </div>

           <!-- SECTION 1: TRUST BAR -->
              <style>
                .test-pad.row.mt-50 {
                  margin-top: 15px;
                  margin-left: -12px; 
                  margin-bottom: 0 !important; 
                }
                .trust-bar {
                  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                  background: #fff;
                  border-top: 1px solid #e8e8e8;
                  border-bottom: 1px solid #e8e8e8;
                  padding: 18px 20px;
                }
                .trust-bar__inner {
                  max-width: 1200px;
                  margin: 0 auto;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  flex-wrap: wrap;
                  gap: 0;
                }
                .trust-bar__item {
                  display: flex;
                  align-items: center;
                  gap: 14px;
                  flex: 1 1 200px;
                  padding: 10px 20px;
                  position: relative;
                }
                .trust-bar__item:not(:last-child)::after {
                  content: '';
                  position: absolute;
                  right: 0;
                  top: 50%;
                  transform: translateY(-50%);
                  height: 40px;
                  width: 1px;
                  background: #e0e0e0;
                }
                .trust-bar__icon {
                  flex-shrink: 0;
                  width: 36px;
                  height: 36px;
                  color: #1a1a1a;
                }
                .trust-bar__icon svg {
                  width: 36px;
                  height: 36px;
                  stroke: #1a1a1a;
                  fill: none;
                  stroke-width: 1.4;
                  stroke-linecap: round;
                  stroke-linejoin: round;
                }
                .trust-bar__text {}
                .trust-bar__title {
                  font-size: 11px;
                  font-weight: 700;
                  letter-spacing: 0.08em;
                  text-transform: uppercase;
                  color: #1a1a1a;
                  margin: 0 0 2px;
                  line-height: 1.2;
                }
                .trust-bar__sub {
                  font-size: 12px;
                  color: #666;
                  margin: 0;
                  line-height: 1.3;
                }
                @media (max-width: 700px) {
                  .trust-bar__inner { flex-direction: column; align-items: flex-start; gap: 4px; }
                  .trust-bar__item { flex: 1 1 100%; padding: 10px 0; }
                  .trust-bar__item:not(:last-child)::after { display: none; }
                  .trust-bar__item:not(:last-child) { border-bottom: 1px solid #e8e8e8; }
                }
                @media (max-width: 900px) and (min-width: 701px) {
                  .trust-bar__inner { flex-wrap: wrap; }
                  .trust-bar__item { flex: 1 1 45%; }
                  .trust-bar__item:nth-child(2)::after { display: none; }
                  .trust-bar__item:nth-child(4)::after { display: none; }
                  .trust-bar__item:nth-child(3),
                  .trust-bar__item:nth-child(4) { border-top: 1px solid #e8e8e8; }
                }
              </style>

              <div class="trust-bar order-sm-3 order-3 mb-3">
                <div class="trust-bar__inner">

                  <!-- Fast Dispatch -->
                  <div class="trust-bar__item">
                    <div class="trust-bar__icon">
                      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <rect x="1" y="3" width="15" height="13" rx="1"/>
                        <path d="M16 8h4l3 5v4h-7V8z"/>
                        <circle cx="5.5" cy="18.5" r="2.5"/>
                        <circle cx="18.5" cy="18.5" r="2.5"/>
                      </svg>
                    </div>
                    <div class="trust-bar__text">
                      <p class="trust-bar__title">Fast Dispatch</p>
                      <p class="trust-bar__sub">Orders ship same day</p>
                    </div>
                  </div>

                  <!-- Discreet Shipping -->
                  <div class="trust-bar__item">
                    <div class="trust-bar__icon">
                      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
                        <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
                        <line x1="12" y1="22.08" x2="12" y2="12"/>
                      </svg>
                    </div>
                    <div class="trust-bar__text">
                      <p class="trust-bar__title">Discreet Shipping</p>
                      <p class="trust-bar__sub">Plain packaging, private delivery</p>
                    </div>
                  </div>

                  <!-- Secure Checkout -->
                  <div class="trust-bar__item">
                    <div class="trust-bar__icon">
                      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                      </svg>
                    </div>
                    <div class="trust-bar__text">
                      <p class="trust-bar__title">Secure Checkout</p>
                      <p class="trust-bar__sub">Safe &amp; encrypted payments</p>
                    </div>
                  </div>

                  <!-- Australian Business -->
                  <div class="trust-bar__item">
                    <div class="trust-bar__icon">
                      <!-- Australia outline SVG -->
                      <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" stroke-width="1.8">
                        <path d="M30 6 C31 7 33 8 34 9 C36 11 35 13 36 14 C37 15 38 14 39 15 C40 16 40 18 41 19 C42 20 43 19 44 21 C45 23 44 25 43 27 C42 29 41 29 40 31 C39 33 39 36 38 37 C37 38 35 37 34 38 C32 39 31 41 30 42 C29 43 27 44 26 44 C25 44 24 42 23 41 C22 40 20 40 19 39 C18 38 18 36 17 35 C16 34 14 34 13 33 C12 32 12 30 11 29 C10 27 9 26 9 24 C9 22 10 20 11 19 C12 18 13 18 14 17 C15 16 15 14 16 13 C17 12 19 12 20 11 C21 10 22 8 23 7 C24 6 26 5 27 5 C28 5 29 5 30 6 Z" fill="none"/>
                        <!-- Tasmania -->
                        <path d="M29 46 C30 46 31 47 30 48 C29 49 28 48 28 47 C28 46 28 46 29 46 Z" fill="none"/>
                      </svg>
                    </div>
                    <div class="trust-bar__text">
                      <p class="trust-bar__title">Australian Business</p>
                      <p class="trust-bar__sub">Proudly owned &amp; operated</p>
                    </div>
                  </div>

                </div>
              </div>
              <!-- END SECTION 1 -->
        
      </div>       
      </div>
      </div>
    
      <div class="container mt-2">
        <div class="row">
          <div class="row">
            <div class="col-md-6 col-xs-12">
              <div class="des-section">
                  <div class="p-des-title">
                    <div class="top-subtitle">{{ tab_description }}</div>
                    <!--<h3>{{ tab_description }}</h3>-->
                  </div>
                  <div class="p-des">
                    {{ description }}
                  </div>
              </div>
            </div>
            <div class="col-md-6 col-xs-12">
              <div class="des-section">
                  <div class="p-des-title">
                    <div class="top-subtitle">About Product</div>
                    <!--<h3>About Product</h3>-->
                  </div>
                  <div class="p-des">
                    {{ aboutproduct }}
                  </div>
              </div>
            </div>
          </div>

        {# ===================== REVIEWS: OUTER + INNER ACCORDIONS (ROBUST) ===================== #}

{# Anchor for old links #}
<div id="tab-review" style="position:relative; top:-80px; height:0; overflow:hidden;"></div>

{# --- TOP HELP BUTTONS: 4 across; stack on mobile --- #}
<nav class="pe-help-wrap" aria-label="Help & Info">
  <a class="pe-help" href="https://popperexpress.com.au/index.php?route=product/special">✨ Exclusive Deals</a>
  <a class="pe-help" href="https://popperexpress.com.au/aussie-poppers-express-delivery">🚚 Fast & Discreet Delivery</a>
  <a class="pe-help" href="{{ home }}">🔒 100% Secure Checkout</a>
  <a class="pe-help" href="https://popperexpress.com.au/popper-express-faq">💬 FAQs & Support</a>
</nav>

{# IDs unique per product #}
{% set outer_id = 'pe-reviews-' ~ product_id %}
{% set inner_id = 'pe-write-' ~ product_id %}

<div class="des-section" id="rt">
  <div class="p-des-title"><h4>{{ tab_review }}</h4></div>

  <div class="p-des">
    {# -------- OUTER ACCORDION: Customer reviews -------- #}
    <section class="pe-acc" aria-label="Customer reviews">
      <button
        id="{{ outer_id }}-btn"
        class="pe-acc-btn"
        aria-controls="{{ outer_id }}-panel"
        aria-expanded="false"
        type="button">
        ⭐ Customer reviews
        <svg class="pe-caret" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
      </button>

      <div id="{{ outer_id }}-panel" class="pe-acc-panel" role="region" aria-labelledby="{{ outer_id }}-btn">
        <div class="pe-acc-inner">
          <div id="review" class="p-reviews">{{ review }}</div>

          {# ------ INNER ACCORDION: Write a review ------ #}
          <section class="pe-acc mt-3" aria-label="Write a review">
            <button
              id="{{ inner_id }}-btn"
              class="pe-acc-btn"
              aria-controls="{{ inner_id }}-panel"
              aria-expanded="false"
              type="button">
              📝 Write a review
              <svg class="pe-caret" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            </button>

            <div id="{{ inner_id }}-panel" class="pe-acc-panel" role="region" aria-labelledby="{{ inner_id }}-btn">
              <div class="pe-acc-inner pe-review-form-wrap">
                <form id="form-review" class="form-horizontal" novalidate>
                  <input type="hidden" name="product_id" value="{{ product_id }}"/>

                  <div class="mb-3">
                    <label class="form-label" for="input-name">{{ entry_name }}</label>
                    <input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" required>
                  </div>

                  <div class="mb-3">
                    <label class="form-label" for="input-review">{{ entry_review }}</label>
                    <textarea name="text" rows="5" id="input-review" class="form-control" required></textarea>
                    <div class="form-text">{{ text_note }}</div>
                  </div>

                  <fieldset class="mb-3">
                    <legend class="col-form-label">{{ entry_rating }}</legend>
                    <div class="d-flex gap-2 align-items-center flex-wrap">
                      <span class="me-2">{{ entry_bad }}</span>
                      {% for i in 1..5 %}
                        <label class="me-1"><input type="radio" name="rating" value="{{ i }}"> {{ i }}</label>
                      {% endfor %}
                      <span class="ms-2">{{ entry_good }}</span>
                    </div>
                  </fieldset>

                  {{ captcha }}

                  <div id="pe-review-alert" class="mt-2" style="display:none;"></div>

                  <div class="text-end">
                    <button type="button" id="button-review" class="btn btn-primary">{{ button_continue }}</button>
                  </div>
                </form>
              </div>
            </div>
          </section>
          {# ------ /INNER ACCORDION ------ #}
        </div>
      </div>
    </section>
    {# -------- /OUTER ACCORDION -------- #}
  </div>
</div>

<style>
   @media (min-width: 767px) {
    .order-sm-1.order-0 {
      padding-right: 0 !important;
    }
    #product-info .image.magnific-popup > a > img {
      object-fit: fill;
      height: 590px;
      margin-top: -40px;
    }
    #product-info .zoom-left {
      margin-top: 0 !important;
      padding-right: 0;
    }
  }

  /* Help buttons */
  .pe-help-wrap{
    --bg:#fafafa; --fg:#111; --bd:#e9e9e9; --hover:#000;
    display:grid; gap:12px; grid-template-columns:repeat(4,1fr);
    background:var(--bg); border:1px solid var(--bd); border-radius:12px;
    padding:12px; margin:22px 0;
  }
  @media (max-width:768px){ .pe-help-wrap{ grid-template-columns:1fr; } }
  .pe-help{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:44px;
    color:var(--fg); font-weight:600; text-decoration:none; border:1px solid var(--bd);
    border-radius:10px; padding:10px 12px; transition:background .2s, color .2s, border-color .2s; }
  .pe-help:hover{ background:var(--hover); color:#fff; border-color:var(--hover); }

  /* Accordions — class-based open (no brittle height math) */
  .pe-acc{ max-width:1100px; margin:0 auto; }
  .pe-acc-btn{
    width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center;
    padding:14px 16px; font-weight:800; border:1px solid #e9e9e9; border-radius:10px; background:#fafafa;
    cursor:pointer; transition:background .18s ease, border-color .18s ease;
  }
  .pe-acc-btn:hover{ background:#f2f2f2; border-color:#ddd; }
  .pe-caret{ transition:transform .18s ease; }
  .pe-acc-btn[aria-expanded="true"] .pe-caret{ transform:rotate(180deg); }

  .pe-acc-panel{
    overflow:hidden; max-height:0;
    border:1px solid #e9e9e9; border-top:none; border-radius:0 0 10px 10px; background:#fff;
    transition:max-height .25s ease;
  }
  .pe-acc-panel.open{ max-height: 9999px; }   /* <- key fix */
  .pe-acc-inner{ padding:16px; }

  .pe-review-form-wrap{ border:1px solid #e9e9e9; border-radius:12px; background:#fff; }
  @media (prefers-reduced-motion:reduce){
    .pe-acc-panel{ transition:none; }
  }
</style>

<script>
(function(){
  // Toggle using a CSS class so content always renders (no scrollHeight timing issues)
  function bindAcc(root){
    var btn   = root.querySelector('.pe-acc-btn');
    var panel = root.querySelector('.pe-acc-panel');
    if (!btn || !panel) return;

    function setOpen(open){
      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
      panel.classList.toggle('open', open);

      // If this panel sits inside another open accordion, ensure parent stays tall enough
      var parentAcc = root.parentElement && root.parentElement.closest('.pe-acc');
      if (parentAcc){
        var parentPanel = parentAcc.querySelector('.pe-acc-panel');
        if (parentPanel && parentPanel.classList.contains('open')){
          // force a reflow tick so CSS recalculates; no height math needed
          parentPanel.style.willChange = 'max-height';
          requestAnimationFrame(function(){ parentPanel.style.willChange = 'auto'; });
        }
      }
    }

    btn.addEventListener('click', function(){
      var open = btn.getAttribute('aria-expanded') === 'true';
      setOpen(!open);
      if (!open){
        // smooth scroll to newly opened panel
        var OFFSET = 80;
        var top = panel.getBoundingClientRect().top + window.pageYOffset - OFFSET;
        window.scrollTo({ top: top, behavior:'smooth' });
      }
    });

    // public method for deep-link auto-open
    root._peOpen = function(){ setOpen(true); };
  }

  // Bind all accordions (outer + inner)
  document.querySelectorAll('.pe-acc').forEach(bindAcc);

  // jQuery: reviews pagination
  if (window.jQuery && document.getElementById('review')) {
    $('#review').delegate('.pagination a', function(e){
      e.preventDefault();
      $('#review').fadeTo(150, .6).load(this.href, function(){
        $('#review').fadeTo(150, 1);
      });
    });
  }

  // jQuery: submit review (guest)
  if (window.jQuery) {
    var $form   = $('#form-review');
    var $button = $('#button-review');
    var $list   = $('#review');
    var $alert  = $('#pe-review-alert');

    var writeUrl = 'index.php?route=product/product|write&product_id={{ product_id }}&language={{ language }}';
    var listUrl  = 'index.php?route=product/product|review&product_id={{ product_id }}';

    $button.off('click.pe').on('click.pe', function(e){
      e.preventDefault();
      if (!$form.length) return;

      $alert.hide().removeClass('alert alert-success alert-danger');

      $.ajax({
        url: writeUrl,
        type: 'post',
        dataType: 'json',
        data: $form.serialize(),
        beforeSend: function(){ $button.prop('disabled', true); },
        complete:   function(){ $button.prop('disabled', false); },
        success: function(json){
          if (json.error) {
            $alert.addClass('alert alert-danger').html(json.error).show();
            return;
          }
          $alert.addClass('alert alert-success')
                .html(json.success || 'Thanks! Our team will moderate and publish it shortly.')
                .show();

          if ($form[0]) { $form[0].reset(); }

          if ($list.length) { $list.load(listUrl); }
        },
        error: function(){
          $alert.addClass('alert alert-danger').text('Error submitting review. Please try again.').show();
        }
      });
    });
  }

  // Deep-links: open the right layers (#tab-review/#rt for list; #form-review opens both)
  (function(){
    var outer = document.getElementById('{{ outer_id }}-panel')?.closest('.pe-acc');
    var inner = document.getElementById('{{ inner_id }}-panel')?.closest('.pe-acc');
    function openForHash(){
      var h = location.hash;
      if (!outer) return;
      if (h === '#tab-review' || h === '#rt') {
        outer._peOpen && outer._peOpen();
      } else if (h === '#form-review') {
        outer._peOpen && outer._peOpen();
        setTimeout(function(){ inner && inner._peOpen && inner._peOpen(); }, 30);
      }
    }
    window.addEventListener('hashchange', openForHash);
    openForHash();
  })();
})();
</script>
{# =================== /REVIEWS: OUTER + INNER ACCORDIONS (ROBUST) =================== #}

          {# <div class="product-tab">
            <ul class="nav nav-tabs">
              <li class="nav-item"><a href="#tab-description" id="description-tab" class="nav-link active" data-bs-toggle="tab">{{ tab_description }}</a></li>
              {% if attribute_groups %}
                <li class="nav-item"><a href="#tab-specification" id="specification-tab" class="nav-link" data-bs-toggle="tab">{{ tab_attribute }}</a></li>
              {% endif %}
              {% if review_status %}
                <li class="nav-item"><a href="#tab-review" id="review-tab" class="nav-link" data-bs-toggle="tab">{{ tab_review }}</a></li>
              {% endif %}
            </ul>
            <div class="tab-content">
              <div id="tab-description" class="tab-pane fade show active mb-4" role="tabpanel" aria-labelledby="description-tab">{{ description }}</div>
              {% if attribute_groups %}
                <div id="tab-specification" class="tab-pane fade" role="tabpanel" aria-labelledby="specification-tab">
                  <div class="table-responsive">
                    <table class="table table-bordered">
                      {% for attribute_group in attribute_groups %}
                        <thead>
                          <tr>
                            <td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
                          </tr>
                        </thead>
                        <tbody>
                          {% for attribute in attribute_group.attribute %}
                            <tr>
                              <td>{{ attribute.name }}</td>
                              <td>{{ attribute.text }}</td>
                            </tr>
                          {% endfor %}
                        </tbody>
                      {% endfor %}
                    </table>
                  </div>
                </div>
              {% endif %}
             {% if review_status %}
                <div id="tab-review" class="tab-pane fade mb-4">{{ review }}</div>
              {% endif %}
            </div>
          </div> #}    
        </div>
      </div>
      
      <div class="bg-white pt-30 pb-30">
        <div class="container">
          <div class="">
            {% if products %}              
              <h2 class="left-heading"><span><b>{{ text_related }}</b></span></h2>              
                <div class="rless productslider">
                {% for product in products %}
                  <div class="col cless">{{ product }}</div>
                {% endfor %}              
              </div>
            {% endif %}
          </div>
        </div>
      </div>
       {% if gaproducts %}
      <div class="bg-white pt-30 pb-30">
        <div class="container">
          <div class="">
                          
              <h2 class="left-heading"><span><b>&#128293; Gear and Accessories</b></span></h2>              
                <div class="rless productslider">
                {% for gaproduct in gaproducts %}
                  <div class="col cless">{{ gaproduct }}</div>
                {% endfor %}              
              </div>
          </div>
        </div>
      </div>
    {% endif %}    
    {% if tags %}
        <p class="tags-data">{{ text_tags }}
          {% for i in 0..tags|length %}
            {% if i < (tags|length - 1) %}
              <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a>,
            {% else %}
              <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a>
            {% endif %}
          {% endfor %}
        </p>
      {% endif %}

      {{ content_bottom }}
    </div>
    {{ column_right }}
 
  </div>
</div>
</div>

<div class="seo-accordion container mb-5">
  <style>
    .accordion-section { margin-bottom: 10px; border-top: 1px solid #ddd; }
    .accordion-header { background: #f7f7f7; padding: 10px; cursor: pointer; font-weight: bold; }
    .accordion-content { display: none; padding: 10px; background: #fff; }
	@media (max-width: 500px){
		.product-thumb .wrap.input-group{
			width: 50%;
		}
		.productslider .cless.col-6{margin-bottom: 20px;}
	}
  </style>
  <!-- CATEGORY STRIP (Drop-in, under product content) -->
<nav class="pe-cat-wrap" aria-label="Popular Categories">
  <a class="pe-cat" href="https://popperexpress.com.au/poppers-triple-packs">🔥 Triple Packs</a>
  <a class="pe-cat" href="https://popperexpress.com.au/poppers-small-bottles">🎯 Small Bottles</a>
  <a class="pe-cat" href="https://popperexpress.com.au/buy-poppers-online">🧪 Large Bottles</a>
  <a class="pe-cat" href="https://popperexpress.com.au/power-pack-machine-cleaners">🧼 Power Packs</a>
</nav>

<style>
  /* ---- Category Buttons ---- */
  .pe-cat-wrap{
    --pe-bg:#fff; --pe-fg:#111; --pe-bd:#eee; --pe-hover:#000; --pe-hoverfg:#fff;
    --pe-radius:12px; --pe-shadow:0 2px 10px rgba(0,0,0,.06);
    max-width:1100px; margin:18px auto 0; display:grid; gap:12px;
    grid-template-columns:repeat(4,1fr);
  }
  .pe-cat{
    display:flex; align-items:center; justify-content:center;
    padding:14px 16px; text-decoration:none; font-weight:800; line-height:1.1;
    background:var(--pe-bg); color:var(--pe-fg); border:1px solid var(--pe-bd);
    border-radius:var(--pe-radius); box-shadow:var(--pe-shadow);
    transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
    text-align:center; min-height:48px;
  }
  .pe-cat:hover{ background:var(--pe-hover); color:var(--pe-hoverfg); border-color:var(--pe-hover); transform:translateY(-1px); }
  .pe-cat:focus-visible{ outline:3px solid #da7915; outline-offset:2px; }
  @media (max-width:1024px){ .pe-cat-wrap{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .pe-cat-wrap{ grid-template-columns:1fr; } .pe-cat{ width:100%; } }
  @media (prefers-reduced-motion:reduce){
    .pe-cat{ transition:none; }
  }
</style>


<script type="text/javascript"><!--
if($(window).width() > 500){
	$(".productslider").addClass("related");	
}
if($(window).width() < 500){
	$(".productslider").addClass("row");
	$(".productslider .cless").addClass("col-6");	
}

$('#input-subscription').on('change', function (e) {
    var element = this;

    $('.subscription').addClass('d-none');

    $('#subscription-description-' + $(element).val()).removeClass('d-none');
});

$('#form-product').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
        url: 'index.php?route=checkout/cart|add&language={{ language }}',
        type: 'post',
        data: $('#form-product').serialize(),
        dataType: 'json',
        contentType: 'application/x-www-form-urlencoded',
        cache: false,
        processData: false,
        beforeSend: function () {
            $('#button-cart').prop('disabled', true).addClass('loading');
        },
        complete: function () {
            $('#button-cart').prop('disabled', false).removeClass('loading');
        },
        success: function (json) {
            $('#form-product').find('.is-invalid').removeClass('is-invalid');
            $('#form-product').find('.invalid-feedback').removeClass('d-block');

            if (json['error']) {
                for (key in json['error']) {
                    $('#input-' + key.replaceAll('_', '-')).addClass('is-invalid').find('.form-control, .form-select, .form-check-input, .form-check-label').addClass('is-invalid');
                    $('#error-' + key.replaceAll('_', '-')).html(json['error'][key]).addClass('d-block');
                }
            }

            if (json['success']) {
                $('#alert').prepend('<div class="a-one"><div class="alert alert-success alert-dismissible"><svg width="20px" height="20px"> <use xlink:href="#successi"></use> </svg> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div></div');

                $('#header-cart').load('index.php?route=common/cart|info');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});


$('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
  $.ajax({
    url: 'index.php?route=product/product/getRecurringDescription',
    type: 'post',
    data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
    dataType: 'json',
    beforeSend: function() {
      $('#recurring-description').html('');
    },
    success: function(json) {
      $('.alert-dismissible, .text-danger').remove();

      if (json['success']) {
        $('#recurring-description').html(json['success']);
      }
    }
  });
});


//plugin bootstrap minus and plus
    $(document).ready(function() {
    $('.btn-number').click(function(e){
    e.preventDefault();
    var fieldName = $(this).attr('data-field');
    var type = $(this).attr('data-type');
    var input = $("input[name='" + fieldName + "']");
    var currentVal = parseInt(input.val());
    if (!isNaN(currentVal)) {
    if (type == 'minus') {
    var minValue = parseInt(input.attr('min'));
    if (!minValue) minValue = 1;
    if (currentVal > minValue) {
    input.val(currentVal - 1).change();
    }
    if (parseInt(input.val()) == minValue) {
    $(this).attr('disabled', true);
    }

    } else if (type == 'plus') {
    var maxValue = parseInt(input.attr('max'));
    if (!maxValue) maxValue = 999;
    if (currentVal < maxValue) {
    input.val(currentVal + 1).change();
    }
    if (parseInt(input.val()) == maxValue) {
    $(this).attr('disabled', true);
    }

    }
    } else {
    input.val(0);
    }
    });
    $('.input-number').focusin(function(){
    $(this).data('oldValue', $(this).val());
    });
    $('.input-number').change(function() {

    var minValue = parseInt($(this).attr('min'));
    var maxValue = parseInt($(this).attr('max'));
    if (!minValue) minValue = 1;
    if (!maxValue) maxValue = 999;
    var valueCurrent = parseInt($(this).val());
    var name = $(this).attr('name');
    if (valueCurrent >= minValue) {
    $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
    alert('Sorry, the minimum value was reached');
    $(this).val($(this).data('oldValue'));
    }
    if (valueCurrent <= maxValue) {
    $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
    alert('Sorry, the maximum value was reached');
    $(this).val($(this).data('oldValue'));
    }
    });
    $(".input-number").keydown(function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== - 1 ||
            // Allow: Ctrl+A
                    (e.keyCode == 65 && e.ctrlKey === true) ||
                    // Allow: home, end, left, right
                            (e.keyCode >= 35 && e.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
            }
            // Ensure that it is a number and stop the keypress
            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
            }
            });
    });
    //plugin bootstrap minus and plus

$(document).ready(function () {
    $('.magnific-popup').magnificPopup({
        type: 'image',
        delegate: 'a',
        gallery: {
            enabled: true
        }
    });

    $('.date').daterangepicker({
        singleDatePicker: true,
        autoApply: true,
        locale: {
            format: 'YYYY-MM-DD'
        }
    });

    $('.time').daterangepicker({
        singleDatePicker: true,
        datePicker: false,
        autoApply: true,
        timePicker: true,
        timePicker24Hour: true,
        locale: {
            format: 'HH:mm'
        }
    }).on('show.daterangepicker', function (ev, picker) {
        picker.container.find('.calendar-table').hide();
    });

    $('.datetime').daterangepicker({
        singleDatePicker: true,
        autoApply: true,
        timePicker: true,
        timePicker24Hour: true,
        locale: {
            format: 'YYYY-MM-DD HH:mm'
        }
    });
});
{# zoom product start #}
  if (jQuery(window).width() >= 1200){
    //initiate the plugin and pass the id of the div containing gallery images
    $("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: ''});
    //pass the images to Fancybox
    $("#zoom_03").bind("click", function (e) {
      var ez = $('#zoom_03').data('elevateZoom');
      $.fancybox(ez.getGalleryList());
      return false;
    });
  };
  {# Zoom End #}
  

  
</script>


{# --- BEGIN: Product JSON-LD (SAFE v3) ---
   IMPORTANT: Ensure only ONE Product JSON-LD exists on the page.
   This version builds a Twig dictionary and encodes it as JSON to avoid brace errors.
--- #}
{% set availability = 'https://schema.org/InStock' %}
{% if stock is defined and stock %}
  {% set low = stock|lower %}
  {% if 'out' in low %}
    {% set availability = 'https://schema.org/OutOfStock' %}
  {% elseif 'pre' in low %}
    {% set availability = 'https://schema.org/PreOrder' %}
  {% endif %}
{% endif %}

{% set shown_price = special ? special : price %}
{% set clean_price = shown_price|striptags|replace({'$':'','AUD':'',',':''})|trim %}

{% set product_image = popup ? popup : thumb %}

{# Build base product dict #}
{% set product_json = {
  '@context': 'https://schema.org',
  '@type': 'Product',
  'name': product_name,
  'image': [ product_image|default('') ],
  'description': description|striptags|trim|slice(0,350),
  'sku': model|default(''),
  'mpn': model|default(''),
  'brand': {
    '@type': 'Brand',
    'name': manufacturer|default('Locker Room')
  },
  'offers': {
    '@type': 'Offer',
    'url': (self_url is defined and self_url ? self_url : (current_url is defined ? current_url : ''))|default(''),
    'priceCurrency': 'AUD',
    'price': clean_price,
    'availability': availability,
    'itemCondition': 'https://schema.org/NewCondition',
    'priceValidUntil': '2026-12-31',
    'shippingDetails': [
      {
        '@type': 'OfferShippingDetails',
        'shippingRate': { '@type': 'MonetaryAmount', 'value': '9.95', 'currency': 'AUD' },
        'shippingDestination': { '@type': 'DefinedRegion', 'addressCountry': 'AU' },
        'deliveryTime': {
          '@type': 'ShippingDeliveryTime',
          'handlingTime': { '@type': 'QuantitativeValue', 'minValue': 0, 'maxValue': 1, 'unitCode': 'd' },
          'transitTime': { '@type': 'QuantitativeValue', 'minValue': 1, 'maxValue': 3, 'unitCode': 'd' }
        }
      },
      {
        '@type': 'OfferShippingDetails',
        'shippingRate': { '@type': 'MonetaryAmount', 'value': '0', 'currency': 'AUD' },
        'shippingDestination': { '@type': 'DefinedRegion', 'addressCountry': 'AU' },
        'deliveryTime': {
          '@type': 'ShippingDeliveryTime',
          'handlingTime': { '@type': 'QuantitativeValue', 'minValue': 0, 'maxValue': 1, 'unitCode': 'd' },
          'transitTime': { '@type': 'QuantitativeValue', 'minValue': 1, 'maxValue': 3, 'unitCode': 'd' }
        }
      }
    ],
    'hasMerchantReturnPolicy': {
      '@type': 'MerchantReturnPolicy',
      'applicableCountry': 'AU',
      'returnPolicyCategory': 'https://schema.org/MerchantReturnFiniteReturnWindow',
      'merchantReturnDays': 30,
      'returnFees': 'https://schema.org/FreeReturn',
      'returnMethod': 'https://schema.org/ReturnByMail'
    }
  }
} %}

{# If (and only if) you show ratings to guests, uncomment and set real values:
{% set product_json = product_json|merge({
  'aggregateRating': {
    '@type': 'AggregateRating',
    'ratingValue': '4.8',
    'reviewCount': '127'
  }
}) %}
#}

<script type="application/ld+json">{{ product_json|json_encode|raw }}</script>
{# --- END: Product JSON-LD (SAFE v3) #}


{{ footer }}