{{ 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">
            {% 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>
                  .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 {
                    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>
         <div class="col-lg-4 col-md-4 col-xs-12 zoom-left sticky t-50">
          {% 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">
          <div class="bg-green p-detls">
                  <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>
      </div>
      </div>
      </div>
    
      <div class="container">
        <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>
  /* 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 }}