{%- comment -%}
  Product page — top half (design: Product Detail Page: breadcrumb, gallery, title, price,
  quick answers, buy box, add-on, frequently bought together, sticky buy bar).
  Nutrition look-up order: see NUTRITION-LOOKUP.md in the theme source folder. Label-pending products show protein only.
{%- endcomment -%}
{%- liquid
  assign p = product
  assign v = p.selected_or_first_available_variant
  assign pr = p.metafields.nutrition.protein_g.value | default: p.metafields.jprotein.protein_g.value
  assign su = p.metafields.nutrition.sugar_g.value | default: p.metafields.jprotein.sugar_g.value
  assign ca = p.metafields.nutrition.calories.value | default: p.metafields.jprotein.calories.value
  assign fi = p.metafields.nutrition.fibre_g.value | default: p.metafields.jprotein.fibre_g.value
  assign ss = p.metafields.nutrition.serving_size.value | default: p.metafields.jprotein.serving_size.value
  assign sv = p.metafields.nutrition.servings.value | default: p.metafields.jprotein.servings_per_pack.value
  assign pk = p.metafields.jprotein.pack_size.value
  assign dt = p.metafields.nutrition.dietary.value | default: '' | downcase
  assign lp = false
  if p.metafields.jprotein.needs_label_data.value == true and p.metafields.nutrition.calories.value == blank
    assign lp = true
  endif
  assign cold = false
  if p.metafields.nutrition.refrigerated.value == true or p.metafields.jprotein.refrigerated.value == true
    assign cold = true
  endif
  assign glp = false
  if p.metafields.nutrition.glp1.value == true or p.metafields.jprotein.glp1_friendly.value == true
    assign glp = true
  endif
  assign rd = p.metafields.jprotein.dietitian_reviewed.value
  assign rc = p.metafields.jprotein_reviews.rating_count.value | default: 0
  assign rt = p.metafields.jprotein_reviews.rating.value | default: 0
  assign show_rating = false
  if settings.show_ratings and rc > 0 and rt > 0
    assign show_rating = true
  endif
  assign per_g = blank
  if pr and sv
    assign tg = pr | times: sv
    if tg > 0
      assign per_g = v.price | times: 1.0 | divided_by: tg | round
    endif
  endif
  assign crumb = collection | default: p.collections.first
  assign quick = p.metafields.nutrition.quick_answers.value
-%}
<div class="jp-wrap jp-crumb">
  <a href="{{ routes.root_url }}">Home</a><i>/</i>
  {%- if crumb -%}<a href="{{ crumb.url }}">{{ crumb.title }}</a><i>/</i>{%- endif -%}
  <b>{{ p.title }}</b>
</div>

<section class="jp-wrap jp-pdp">
  {%- comment -%} LEFT: gallery {%- endcomment -%}
  <div class="jp-gal" data-jp-gal>
    <div class="jp-gal__main">
      {%- assign m0 = p.featured_media -%}
      {%- if m0 -%}
        {%- if m0.media_type == 'video' -%}
          {{ m0 | video_tag: autoplay: true, loop: true, muted: true, controls: false, playsinline: true, image_size: '1200x' }}
        {%- else -%}
          {{ m0.preview_image | image_url: width: 1200 | image_tag: loading: 'eager', fetchpriority: 'high', sizes: '(min-width: 1180px) 540px, 100vw', widths: '500,800,1200', alt: m0.alt | escape }}
        {%- endif -%}
      {%- else -%}
        {{ 'product-1' | placeholder_svg_tag: 'jp-ph' }}
      {%- endif -%}
      {%- if glp -%}<span class="jp-gal__flag">Made for GLP-1</span>{%- endif -%}
      <span class="jp-gal__flag2{% if lp %} jp-gal__flag2--pend{% endif %}">{% if lp %}◷ Label pending{% else %}✓ Verified label{% endif %}</span>
    </div>
    {%- if p.media.size > 1 -%}
      <div class="jp-thumbs" role="group" aria-label="Product images">
        {%- for m in p.media limit: 8 -%}
          <button type="button" aria-pressed="{% if forloop.first %}true{% else %}false{% endif %}" aria-label="Show image {{ forloop.index }}" data-src="{{ m.preview_image | image_url: width: 1200 }}">
            {{ m.preview_image | image_url: width: 160 | image_tag: loading: 'lazy', alt: '' }}
            {%- if m.media_type == 'video' or m.media_type == 'external_video' -%}<span class="is-vid"><svg width="14" height="14" viewBox="0 0 24 24" fill="#FBFAF4"><path d="M8 5v14l11-7z"/></svg></span>{%- endif -%}
          </button>
        {%- endfor -%}
      </div>
    {%- endif -%}
    {%- capture bens -%}
      {%- if pr -%}<div><b>{% render 'jp-num', n: pr %}g</b><span>protein</span></div>{%- endif -%}
      {%- if lp == false -%}
        {%- if fi != blank -%}<div><b>{% render 'jp-num', n: fi %}g</b><span>fibre</span></div>{%- endif -%}
        {%- if ca != blank -%}<div><b>{{ ca }}</b><span>calories</span></div>{%- endif -%}
        {%- if su != blank -%}<div><b>{% render 'jp-num', n: su %}g</b><span>sugar</span></div>{%- endif -%}
      {%- else -%}
        {%- if sv -%}<div><b>{{ sv }}</b><span>servings</span></div>{%- endif -%}
        {%- if ss != blank -%}<div><b style="font-size:17px">{{ ss }}</b><span>serving</span></div>{%- endif -%}
      {%- endif -%}
    {%- endcapture -%}
    {%- if bens != blank -%}<div class="jp-bens">{{ bens }}</div>{%- endif -%}
  </div>

  {%- comment -%} RIGHT {%- endcomment -%}
  <div class="jp-pdp__r">
    <div class="jp-kick">{{ p.type }}{% if p.vendor != blank %} · {{ p.vendor }}{% endif %}</div>
    <h1>{{ p.title }}</h1>
    <div class="jp-pdp__meta">
      {%- if pk != blank or ss != blank -%}<span class="jp-chip jp-chip--mist">{{ pk }}{% if pk != blank and ss != blank %} · {% endif %}{% if ss != blank %}{{ ss }} each{% endif %}</span>{%- endif -%}
      {%- if show_rating -%}
        {%- assign full = rt | floor -%}
        <a class="jp-pdp__rate" href="#reviews"><span class="jp-stars">{% for i in (1..5) %}{% if i <= full %}★{% else %}☆{% endif %}{% endfor %}</span><b>{{ rt | round: 1 }}</b><u>{{ rc }} reviews</u></a>
      {%- endif -%}
    </div>
    <div class="jp-pdp__price">
      <b data-jp-price>{{ v.price | money }}</b>
      {%- if v.compare_at_price > v.price -%}<s>{{ v.compare_at_price | money }}</s>{%- endif -%}
      {%- if per_g != blank -%}<span>· {{ per_g | money }} per gram of protein</span>{%- endif -%}
    </div>
    <p class="jp-pdp__sum">{{ p.description | split: '</p>' | first | strip_html | strip | truncatewords: 34 }}</p>
    <div class="jp-flags">
      {%- if glp -%}<span class="jp-chip jp-chip--on">Made for GLP-1</span>{%- endif -%}
      <span class="jp-chip">{% if lp %}Label pending{% else %}Verified label{% endif %}</span>
      {%- if cold -%}<span class="jp-chip">Ships cold-chain</span>{%- endif -%}
      {%- if rd -%}<span class="jp-chip">Dietitian-reviewed</span>{%- endif -%}
    </div>

    {%- comment -%} QUICK ANSWERS — nutrition.quick_answers ("Q|A" per line) or generated from the data {%- endcomment -%}
    <section id="quick-answers-block" class="jp-qa" aria-labelledby="quick-answers">
      <h2 id="quick-answers">Quick answers</h2>
      {%- if quick != blank -%}
        {%- assign lines = quick | newline_to_br | split: '<br />' -%}
        {%- for ln in lines -%}{%- assign bits = ln | strip | split: '|' -%}{%- if bits.size > 1 -%}
          <div class="jp-qa__i"><h3>{{ bits[0] | strip }}</h3><p>{{ bits[1] | strip }}</p></div>
        {%- endif -%}{%- endfor -%}
      {%- else -%}
        {%- if pr -%}<div class="jp-qa__i"><h3>How much protein per serving?</h3><p>{% render 'jp-num', n: pr %} g{% if ss != blank %} per {{ ss }}{% endif %}{% if lp == false and ca != blank %}, with {{ ca }} calories{% if su != blank %} and {% render 'jp-num', n: su %} g of sugar{% endif %}{% endif %}.{% if lp %} The rest of the panel is being verified.{% endif %}</p></div>{%- endif -%}
        <div class="jp-qa__i"><h3>Can I have this on Ozempic or Wegovy?</h3><p>It is a food or supplement, not a medication. Check with your prescriber before changing your diet while on GLP-1 medication.</p></div>
        <div class="jp-qa__i"><h3>Where do you ship, and what does it cost?</h3><p>{{ settings.shipping_line | default: 'All ten provinces, at live rates for your address shown at checkout.' }}</p></div>
        <div class="jp-qa__i"><h3>How is it shipped?</h3><p>{% if cold %}Refrigerated, by cold-chain delivery. Orders with a chilled item cannot use standard or express shipping.{% else %}Standard parcel shipping — no refrigeration needed in transit.{% endif %}</p></div>
      {%- endif -%}
    </section>

    {%- comment -%} BUY BOX {%- endcomment -%}
    <div class="jp-buy" data-jp-buy>
      {%- form 'product', p, data-jp-pform: '', data-title: p.title, data-unit: v.price -%}
        <input type="hidden" name="id" value="{{ v.id }}" data-jp-vid>
        {%- unless p.has_only_default_variant -%}
          <div class="jp-buy__k">Option</div>
          <select class="jp-select" style="width:100%;padding:13px 14px;font-size:15px;margin-bottom:6px" data-jp-variant aria-label="Choose an option">
            {%- for x in p.variants -%}
              <option value="{{ x.id }}" data-price="{{ x.price }}"{% if x.id == v.id %} selected{% endif %}{% unless x.available %} disabled{% endunless %}>{{ x.title }} — {{ x.price | money }}{% unless x.available %} (sold out){% endunless %}</option>
            {%- endfor -%}
          </select>
          <div class="jp-buy__hr"></div>
        {%- endunless -%}

        {%- if p.selling_plan_groups.size > 0 -%}
          <div class="jp-buy__k">How you buy</div>
          <div class="jp-radios">
            {%- unless p.requires_selling_plan -%}
            <label class="jp-radio"><input type="radio" name="selling_plan" value="" checked><span class="jp-radio__dot"></span><span class="jp-radio__txt"><b>One-time purchase</b><span>Single delivery, no commitment.</span></span><span class="jp-radio__p">{{ v.price | money }}</span></label>
            {%- endunless -%}
            {%- for g in p.selling_plan_groups -%}{%- for sp in g.selling_plans -%}
              {%- assign sp_price = blank -%}
              {%- for al in v.selling_plan_allocations -%}{%- if al.selling_plan.id == sp.id -%}{%- assign sp_price = al.price -%}{%- endif -%}{%- endfor -%}
              <label class="jp-radio"><input type="radio" name="selling_plan" value="{{ sp.id }}"{% if p.requires_selling_plan and forloop.first %} checked{% endif %}><span class="jp-radio__dot"></span><span class="jp-radio__txt"><b>{{ sp.name }}</b><span>{{ g.name }}</span></span><span class="jp-radio__p">{% if sp_price != blank %}{{ sp_price | money }}{% endif %}</span></label>
            {%- endfor -%}{%- endfor -%}
          </div>
          <div class="jp-buy__hr"></div>
        {%- endif -%}

        <div class="jp-buy__k">Quantity</div>
        <div class="jp-radios" data-jp-qty>
          {%- for q in (1..3) -%}
            <label class="jp-radio"><input type="radio" name="quantity" value="{{ q }}"{% if forloop.first %} checked{% endif %}><span class="jp-radio__dot"></span>
              <span class="jp-radio__txt"><b>{% case q %}{% when 1 %}{{ section.settings.q1 }}{% when 2 %}{{ section.settings.q2 }}{% else %}{{ section.settings.q3 }}{% endcase %}{% if q == 2 and section.settings.q2_tag != blank %}<span class="jp-tag">{{ section.settings.q2_tag }}</span>{% endif %}</b><span>{{ q }} × {{ pk | default: 'pack' }}</span></span>
              <span class="jp-radio__p" data-jp-qprice="{{ q }}">{{ v.price | times: q | money }}</span>
            </label>
          {%- endfor -%}
        </div>

        <button type="submit" name="add" class="jp-btn jp-btn--block" data-jp-addbtn{% unless v.available %} disabled{% endunless %}>
          {%- if v.available -%}Add to cart · <span data-jp-total>{{ v.price | money }}</span>{%- else -%}Sold out{%- endif -%}
        </button>
        <div class="jp-buy__sub">{% if cold %}Ships refrigerated by cold-chain delivery.{% else %}{{ settings.shipping_line }}{% endif %}</div>

        {%- if section.blocks.size > 0 -%}
        <div class="jp-trust">
          {%- for block in section.blocks -%}{%- if block.type == 'trust' -%}<div {{ block.shopify_attributes }}><i>{{ block.settings.ic }}</i><span>{{ block.settings.t }}</span></div>{%- endif -%}{%- endfor -%}
        </div>
        {%- endif -%}

        {%- capture certs -%}
          {%- if rd -%}<div><i>RD</i><span>Dietitian reviewed</span></div>{%- endif -%}
          {%- unless lp -%}<div><i>LV</i><span>Label verified</span></div>{%- endunless -%}
          {%- if glp -%}<div><i>G1</i><span>GLP-1 friendly</span></div>{%- endif -%}
          {%- if dt contains 'gluten' -%}<div><i>GF</i><span>Gluten free</span></div>{%- endif -%}
          {%- if dt contains 'vegan' or dt contains 'plant' -%}<div><i>VG</i><span>Plant-based</span></div>{%- endif -%}
          {%- if cold -%}<div><i>❄</i><span>Refrigerated</span></div>{%- endif -%}
        {%- endcapture -%}
        {%- if certs != blank -%}<div class="jp-certs">{{ certs }}</div>{%- endif -%}

        {%- assign bp = section.settings.bump_product -%}
        {%- if bp != blank and bp.available and bp.id != p.id -%}
          {%- assign bv = bp.selected_or_first_available_variant -%}
          <label class="jp-bump">
            <input type="checkbox" data-jp-bump="{{ bv.id }}" data-price="{{ bv.price }}">
            <span class="jp-bump__box"></span>
            <span class="jp-bump__ic">{%- if bp.featured_image -%}{{ bp.featured_image | image_url: width: 120 | image_tag: alt: '' }}{%- endif -%}</span>
            <span class="jp-bump__t"><b>{{ section.settings.bump_title | default: bp.title }}</b><span>{{ section.settings.bump_text }}</span></span>
            <span class="jp-bump__p"><b>{{ bv.price | money }}</b>{% if bv.compare_at_price > bv.price %}<s>{{ bv.compare_at_price | money }}</s>{% endif %}</span>
          </label>
        {%- endif -%}
      {%- endform -%}
    </div>

    {%- if section.settings.show_fbt -%}
    <div style="margin-top:22px" data-jp-recs="{{ routes.product_recommendations_url }}?section_id=jp-recs-mini&product_id={{ p.id }}&limit=3&intent=complementary" data-fallback="{{ routes.product_recommendations_url }}?section_id=jp-recs-mini&product_id={{ p.id }}&limit=2"></div>
    {%- endif -%}
  </div>
</section>

<div class="jp-sticky" data-jp-sticky aria-hidden="true">
  <div class="jp-wrap jp-sticky__in">
    <span class="jp-sticky__img">{%- if p.featured_image -%}{{ p.featured_image | image_url: width: 120 | image_tag: alt: '' }}{%- endif -%}</span>
    <span class="jp-sticky__t"><b>{{ p.title }}</b><span>{% if pr %}{% render 'jp-num', n: pr %}g protein · {% endif %}<span data-jp-sticky-price>{{ v.price | money }}</span></span></span>
    <button type="button" class="jp-btn" data-jp-sticky-add tabindex="-1"{% unless v.available %} disabled{% endunless %}>{% if v.available %}Add to cart{% else %}Sold out{% endif %}</button>
  </div>
</div>
{% schema %}
{
  "name": "Product — top",
  "settings": [
    { "type": "text", "id": "q1", "label": "Quantity 1 label", "default": "Single" },
    { "type": "text", "id": "q2", "label": "Quantity 2 label", "default": "Two" },
    { "type": "text", "id": "q2_tag", "label": "Quantity 2 tag", "info": "Optional, e.g. a real bundle discount you have set up." },
    { "type": "text", "id": "q3", "label": "Quantity 3 label", "default": "Three" },
    { "type": "header", "content": "Add-on offer" },
    { "type": "product", "id": "bump_product", "label": "Add-on product", "info": "Shown as a tick-box under the buy box, e.g. a digital guide. Empty = hidden." },
    { "type": "text", "id": "bump_title", "label": "Add-on title" },
    { "type": "text", "id": "bump_text", "label": "Add-on line" },
    { "type": "checkbox", "id": "show_fbt", "label": "Show 'Frequently bought together'", "default": true }
  ],
  "blocks": [{ "type": "trust", "name": "Trust point", "settings": [{ "type": "text", "id": "ic", "label": "Icon text", "default": "CA" }, { "type": "text", "id": "t", "label": "Text", "default": "Ships from Calgary" }] }]
}
{% endschema %}