{%- comment -%}
  MW · Product Information — full editorial buy box (gallery + variants + qty + ATC + trust).
  Portable main-product section. Uses the real product object; works on any OS 2.0 theme.
{%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{%- assign p = product -%}
{%- assign cur = p.selected_or_first_available_variant -%}
{%- if cur.compare_at_price > cur.price -%}{%- assign onsale = true -%}{%- assign pct = cur.compare_at_price | minus: cur.price | times: 100.0 | divided_by: cur.compare_at_price | round -%}{%- endif -%}
{% style %}
  #shopify-section-{{ section.id }}{ --pi-bg:{{ section.settings.section_bg }}; --pi-ink:{{ section.settings.heading_color }}; --pi-text:{{ section.settings.text_color }}; --pi-accent:{{ section.settings.accent_color }}; --pi-accent2:{{ section.settings.accent_color_2 }}; --pi-price:{{ section.settings.price_color }}; --pi-sale:{{ section.settings.sale_color }}; --pi-btn:{{ section.settings.button_bg }}; --pi-btn2:{{ section.settings.button_bg_2 }}; --pi-btntx:{{ section.settings.button_text_color }}; --pi-box:{{ section.settings.box_bg }}; --pi-line:{{ section.settings.line_color }}; --pi-star:{{ section.settings.star_color }}; }
  .pi-{{ uid }}{ background:var(--pi-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; overflow-x:hidden; }
  .pi-{{ uid }} *{ box-sizing:border-box; }
  .pi-{{ uid }} .pi__grid{ max-width:{{ section.settings.max_width }}px; margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,3.5vw,52px); align-items:start; }
  .pi-{{ uid }} .pi__grid>*{ min-width:0; }               /* prevents wide media from forcing overflow */
  .pi-{{ uid }} .pi__media{ position:sticky; top:20px; }
  .pi-{{ uid }} .pi__viewer{ position:relative; border-radius:{{ section.settings.image_radius }}px; overflow:hidden; background:var(--pi-box); aspect-ratio:{{ section.settings.image_ratio }}; }
  .pi-{{ uid }} .pi__slide{ position:absolute; inset:0; opacity:0; transition:opacity .3s; }
  .pi-{{ uid }} .pi__slide.on{ opacity:1; position:relative; }
  .pi-{{ uid }} .pi__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pi-{{ uid }} .pi__arrow{ position:absolute; top:calc(50% - 20px); width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.92); border:0; box-shadow:0 6px 18px rgba(58,48,39,.18); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--pi-ink); z-index:2; }
  .pi-{{ uid }} .pi__arrow svg{ width:20px; height:20px; } .pi-{{ uid }} .pi__arrow--prev{ left:12px; } .pi-{{ uid }} .pi__arrow--next{ right:12px; }
  .pi-{{ uid }} .pi__thumbs{ display:flex; gap:8px; margin-top:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .pi-{{ uid }} .pi__thumbs::-webkit-scrollbar{ display:none; }
  .pi-{{ uid }} .pi__thumb{ flex:0 0 {{ section.settings.thumb_size }}px; width:{{ section.settings.thumb_size }}px; aspect-ratio:1/1; border-radius:6px; overflow:hidden; border:2px solid transparent; cursor:pointer; padding:0; background:none; }
  .pi-{{ uid }} .pi__thumb.on{ border-color:var(--pi-accent); }
  .pi-{{ uid }} .pi__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pi-{{ uid }} .pi__cause{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:12.5px; color:var(--pi-text); }
  .pi-{{ uid }} .pi__cause svg{ width:18px; height:18px; color:var(--pi-accent); flex:none; margin-top:1px; }
  .pi-{{ uid }} .pi__cause b{ color:var(--pi-ink); }
  .pi-{{ uid }} .pi__rating{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .pi-{{ uid }} .pi__stars{ display:inline-flex; gap:1px; color:var(--pi-star); } .pi-{{ uid }} .pi__stars svg{ width:15px; height:15px; }
  .pi-{{ uid }} .pi__rcount{ font-size:13px; color:var(--pi-text); }
  .pi-{{ uid }} .pi__title{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:{{ section.settings.heading_font.weight | default: 600 }}; font-size:clamp(26px,3vw,36px); line-height:1.08; color:var(--pi-ink); margin:0 0 8px; }
  .pi-{{ uid }} .pi__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:15px; line-height:1.55; color:var(--pi-text); margin:0 0 16px; }
  .pi-{{ uid }} .pi__sub em, .pi-{{ uid }} .mw-grad{ font-style:normal; color:var(--pi-accent); background:linear-gradient(99deg,var(--pi-accent) 0%,var(--pi-accent2) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .pi-{{ uid }} .pi__prices{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .pi-{{ uid }} .pi__price{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:26px; color:var(--pi-price); }
  .pi-{{ uid }} .pi__compare{ font-size:16px; color:#A89C8B; text-decoration:line-through; }
  .pi-{{ uid }} .pi__badge{ background:linear-gradient(99deg,var(--pi-sale),#8f2d22); color:#fff; font-size:12px; font-weight:600; border-radius:4px; padding:3px 8px; }
  .pi-{{ uid }} .pi__callout{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(99deg,var(--pi-ink),#5c4a34); color:#F3ECE1; font-size:13px; font-weight:500; border-radius:6px; padding:9px 14px; margin-bottom:16px; }
  .pi-{{ uid }} .pi__callout svg{ width:16px; height:16px; flex:none; color:var(--pi-accent2); }
  .pi-{{ uid }} .pi__usps{ display:grid; gap:9px; margin:0 0 18px; }
  .pi-{{ uid }} .pi__usp{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--pi-text); }
  .pi-{{ uid }} .pi__usp svg{ width:19px; height:19px; color:var(--pi-accent); flex:none; }
  .pi-{{ uid }} .pi__opt{ margin-bottom:18px; }
  .pi-{{ uid }} .pi__olabel{ font-size:13px; font-weight:600; color:var(--pi-ink); margin-bottom:9px; } .pi-{{ uid }} .pi__olabel span{ font-weight:400; color:var(--pi-text); }
  .pi-{{ uid }} .pi__vals{ display:flex; flex-wrap:wrap; gap:8px; }
  .pi-{{ uid }} .pi__val{ position:relative; }
  .pi-{{ uid }} .pi__val input{ position:absolute; opacity:0; pointer-events:none; }
  .pi-{{ uid }} .pi__pill{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; padding:11px 18px; border:1px solid var(--pi-line); border-radius:8px; font-size:13.5px; color:var(--pi-ink); cursor:pointer; background:#fff; transition:border-color .15s,background .15s,box-shadow .15s; }
  .pi-{{ uid }} .pi__val input:checked + .pi__pill{ border-color:var(--pi-ink); background:var(--pi-ink); color:#fff; }
  .pi-{{ uid }} .pi__val input:focus-visible + .pi__pill{ box-shadow:0 0 0 3px rgba(183,155,110,.4); }
  .pi-{{ uid }} .pi__swatch{ width:36px; height:36px; min-width:36px; border-radius:50%; padding:0; overflow:hidden; border:2px solid transparent; box-shadow:0 0 0 1px var(--pi-line); }
  .pi-{{ uid }} .pi__swatch img,.pi-{{ uid }} .pi__swatch .sw{ width:100%; height:100%; object-fit:cover; display:block; }
  .pi-{{ uid }} .pi__val input:checked + .pi__swatch{ border-color:#fff; box-shadow:0 0 0 2px var(--pi-ink); }
  .pi-{{ uid }} .pi__stock{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--pi-sale); margin:12px 0 0; }
  .pi-{{ uid }} .pi__stock .dot{ width:8px; height:8px; border-radius:50%; background:var(--pi-sale); box-shadow:0 0 0 0 rgba(178,59,46,.5); animation:pi-pulse-{{ uid }} 1.8s infinite; }
  @keyframes pi-pulse-{{ uid }}{ 0%{box-shadow:0 0 0 0 rgba(178,59,46,.5)} 70%{box-shadow:0 0 0 7px rgba(178,59,46,0)} 100%{box-shadow:0 0 0 0 rgba(178,59,46,0)} }
  .pi-{{ uid }} .pi__buy{ display:flex; align-items:stretch; gap:10px; margin:18px 0 0; }
  .pi-{{ uid }} .pi__qty{ display:inline-flex; align-items:center; border:1px solid var(--pi-line); border-radius:6px; background:#fff; flex:none; }
  .pi-{{ uid }} .pi__qty button{ width:42px; height:100%; min-height:52px; border:0; background:none; font-size:18px; color:var(--pi-ink); cursor:pointer; }
  .pi-{{ uid }} .pi__qty input{ width:38px; text-align:center; border:0; font-size:15px; font-weight:600; color:var(--pi-ink); background:none; -moz-appearance:textfield; }
  .pi-{{ uid }} .pi__qty input::-webkit-outer-spin-button,.pi-{{ uid }} .pi__qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .pi-{{ uid }} .pi__atc{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(99deg,var(--pi-btn) 0%,var(--pi-btn2) 100%); color:var(--pi-btntx); border:0; border-radius:6px; padding:17px 20px; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:15px; letter-spacing:.02em; cursor:pointer; transition:filter .18s,transform .18s,box-shadow .18s; box-shadow:0 6px 18px rgba(58,48,39,.18); }
  .pi-{{ uid }} .pi__atc svg{ width:18px; height:18px; flex:none; }
  .pi-{{ uid }} .pi__atc:hover{ filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 10px 24px rgba(58,48,39,.24); }
  .pi-{{ uid }} .pi__atc[disabled]{ opacity:.5; cursor:not-allowed; filter:grayscale(.3); }
  .pi-{{ uid }} .pi__note{ text-align:center; font-size:12.5px; color:var(--pi-text); margin:12px 0 0; }
  .pi-{{ uid }} .pi__pay{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:14px 0 0; }
  .pi-{{ uid }} .pi__pay .mw-pay svg{ width:38px; height:23px; display:block; }
  .pi-{{ uid }} .pi__trust{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin:22px 0 0; padding:18px 0; border-top:1px solid var(--pi-line); border-bottom:1px solid var(--pi-line); }
  .pi-{{ uid }} .pi__ti{ display:flex; gap:10px; align-items:flex-start; }
  .pi-{{ uid }} .pi__ti svg{ width:22px; height:22px; color:var(--pi-ink); flex:none; }
  .pi-{{ uid }} .pi__tt{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:13.5px; color:var(--pi-ink); }
  .pi-{{ uid }} .pi__td{ font-size:12px; color:var(--pi-text); }
  .pi-{{ uid }} .pi__eta{ margin:22px 0 0; }
  .pi-{{ uid }} .pi__etatx{ font-size:13px; color:var(--pi-text); margin-bottom:14px; } .pi-{{ uid }} .pi__etatx b{ color:var(--pi-accent); font-weight:700; font-variant-numeric:tabular-nums; }
  .pi-{{ uid }} .pi__time{ display:flex; align-items:flex-start; justify-content:space-between; position:relative; }
  .pi-{{ uid }} .pi__time:before{ content:""; position:absolute; left:34px; right:34px; top:17px; border-top:1.5px dashed var(--pi-line); }
  .pi-{{ uid }} .pi__node{ position:relative; text-align:center; z-index:1; background:var(--pi-bg); padding:0 6px; flex:1; }
  .pi-{{ uid }} .pi__nic{ width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid var(--pi-line); display:flex; align-items:center; justify-content:center; margin:0 auto 6px; color:var(--pi-ink); }
  .pi-{{ uid }} .pi__nic svg{ width:17px; height:17px; }
  .pi-{{ uid }} .pi__nl{ font-size:11.5px; font-weight:600; color:var(--pi-ink); } .pi-{{ uid }} .pi__nd{ font-size:10.5px; color:var(--pi-text); }
  .pi-{{ uid }} .pi__rows{ margin:20px 0 0; }
  .pi-{{ uid }} .pi__row{ border-bottom:1px solid var(--pi-line); }
  .pi-{{ uid }} .pi__row summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:16px 2px; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:500; font-size:14px; color:var(--pi-ink); }
  .pi-{{ uid }} .pi__row summary::-webkit-details-marker{ display:none; }
  .pi-{{ uid }} .pi__row .ci{ width:18px; height:18px; color:var(--pi-accent); flex:none; } .pi-{{ uid }} .pi__row .ch{ margin-left:auto; width:18px; height:18px; transition:transform .25s; color:var(--pi-text); flex:none; }
  .pi-{{ uid }} .pi__row[open] .ch{ transform:rotate(180deg); }
  .pi-{{ uid }} .pi__rc{ font-size:13.5px; line-height:1.6; color:var(--pi-text); padding:0 2px 16px; }
  @media (max-width:860px){
    .pi-{{ uid }} .pi__grid{ grid-template-columns:1fr; gap:22px; }
    .pi-{{ uid }} .pi__media{ position:static; }
    .pi-{{ uid }} .pi__trust{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:420px){ .pi-{{ uid }} .pi__trust{ grid-template-columns:1fr; } .pi-{{ uid }} .pi__pay .mw-pay svg{ width:34px; height:21px; } }
{% endstyle %}
<div class="pi-{{ uid }}" id="pi-{{ uid }}">
  <div class="pi__grid">
    <!-- MEDIA -->
    <div class="pi__media">
      <div class="pi__viewer" data-viewer>
        {%- for image in p.images limit: 10 -%}
          <div class="pi__slide{% if forloop.first %} on{% endif %}" data-slide="{{ forloop.index0 }}">{% render 'mw-image', image: image, alt: p.title, width: 1000, loading: forloop.first %}</div>
        {%- else -%}
          <div class="pi__slide on" data-slide="0">{% render 'mw-image', image: p.featured_image, url: section.settings.fallback_image_url, alt: p.title, width: 1000 %}</div>
        {%- endfor -%}
        <button class="pi__arrow pi__arrow--prev" data-prev aria-label="Previous">{% render 'mw-icon', name: 'arrow-left' %}</button>
        <button class="pi__arrow pi__arrow--next" data-next aria-label="Next">{% render 'mw-icon', name: 'arrow-right' %}</button>
      </div>
      {%- if p.images.size > 1 -%}
      <div class="pi__thumbs" data-thumbs>
        {%- for image in p.images limit: 10 -%}<button class="pi__thumb{% if forloop.first %} on{% endif %}" data-thumb="{{ forloop.index0 }}" aria-label="View image {{ forloop.index }}">{% render 'mw-image', image: image, alt: p.title, width: 160 %}</button>{%- endfor -%}
      </div>
      {%- endif -%}
      {%- if section.settings.cause_text != blank -%}<div class="pi__cause">{% render 'mw-icon', name: 'heart' %}<span>{{ section.settings.cause_text }}</span></div>{%- endif -%}
    </div>
    <!-- DETAILS -->
    <div class="pi__details">
      {%- if section.settings.show_rating -%}<div class="pi__rating"><span class="pi__stars">{% for i in (1..5) %}{% render 'mw-icon', name: 'star' %}{% endfor %}</span><span class="pi__rcount">{{ section.settings.rating_text | escape }}</span></div>{%- endif -%}
      <h1 class="pi__title">{{ p.title | escape }}</h1>
      {%- if section.settings.subtitle != blank -%}<div class="pi__sub">{{ section.settings.subtitle }}</div>{%- endif -%}
      <div class="pi__prices">
        <span class="pi__price" data-price>{{ cur.price | money }}</span>
        {%- if onsale -%}<span class="pi__compare" data-compare>{{ cur.compare_at_price | money }}</span><span class="pi__badge" data-savebadge>-{{ pct }}%</span>{%- endif -%}
      </div>
      {%- if section.settings.callout != blank -%}<div class="pi__callout">{% render 'mw-icon', name: 'sparkle' %}{{ section.settings.callout | escape }}</div>{%- endif -%}
      {%- assign usps = section.blocks | where: 'type', 'usp' -%}
      {%- if usps.size > 0 -%}<div class="pi__usps">{%- for b in usps -%}<div class="pi__usp" {{ b.shopify_attributes }}>{% render 'mw-icon', name: b.settings.icon %}<span>{{ b.settings.text | escape }}</span></div>{%- endfor -%}</div>{%- endif -%}
      <!-- FORM -->
      {% form 'product', p %}
        <input type="hidden" name="id" value="{{ cur.id }}" data-variant-id>
        {%- for option in p.options_with_values -%}
          {%- assign is_color = false -%}{%- if option.name == section.settings.color_option -%}{%- assign is_color = true -%}{%- endif -%}
          <div class="pi__opt" data-option="{{ forloop.index0 }}">
            <div class="pi__olabel">{{ option.name | escape }} <span data-optval>&mdash; {{ option.selected_value }}</span></div>
            <div class="pi__vals">
              {%- for value in option.values -%}
                {%- assign vid = section.id | append: '-o' | append: forloop.parentloop.index0 | append: '-' | append: forloop.index0 -%}
                <label class="pi__val">
                  <input type="radio" name="opt-{{ forloop.parentloop.index0 }}" value="{{ value | escape }}" data-opt="{{ forloop.parentloop.index0 }}" {% if option.selected_value == value %}checked{% endif %} id="{{ vid }}">
                  {%- if is_color -%}
                    {%- assign vimg = null -%}{%- for v in p.variants -%}{%- if v.option1 == value or v.option2 == value or v.option3 == value -%}{%- if v.featured_image and vimg == null -%}{%- assign vimg = v.featured_image -%}{%- endif -%}{%- endif -%}{%- endfor -%}
                    <span class="pi__pill pi__swatch" title="{{ value | escape }}">{%- if vimg -%}<img src="{{ vimg | image_url: width: 80 }}" alt="{{ value | escape }}">{%- else -%}<span class="sw" style="background:{{ value | downcase | replace: ' ', '' }}"></span>{%- endif -%}</span>
                  {%- else -%}
                    <span class="pi__pill">{{ value | escape }}</span>
                  {%- endif -%}
                </label>
              {%- endfor -%}
            </div>
          </div>
        {%- endfor -%}
        {%- if section.settings.show_stock -%}<div class="pi__stock" data-stock><span class="dot"></span><span>{{ section.settings.stock_text | escape }}</span></div>{%- endif -%}
        <div class="pi__buy">
          {%- if section.settings.show_quantity -%}
          <div class="pi__qty">
            <button type="button" data-qminus aria-label="Decrease quantity">&minus;</button>
            <input type="number" name="quantity" value="1" min="1" inputmode="numeric" data-qty aria-label="Quantity">
            <button type="button" data-qplus aria-label="Increase quantity">+</button>
          </div>
          {%- endif -%}
          <button type="submit" class="pi__atc" data-atc>{% render 'mw-icon', name: 'check' %}<span data-atclabel>{{ section.settings.atc_label | escape }} &middot; {{ cur.price | money }}</span></button>
        </div>
        {%- if section.settings.cart_note != blank -%}<p class="pi__note">{{ section.settings.cart_note | escape }}</p>{%- endif -%}
      {% endform %}
      {%- if section.settings.payment_types != blank -%}<div class="pi__pay">{% render 'mw-payment', types: section.settings.payment_types %}</div>{%- endif -%}
      <!-- TRUST -->
      {%- assign trust = section.blocks | where: 'type', 'trust' -%}
      {%- if trust.size > 0 -%}<div class="pi__trust">{%- for b in trust -%}<div class="pi__ti" {{ b.shopify_attributes }}>{% render 'mw-icon', name: b.settings.icon %}<div><div class="pi__tt">{{ b.settings.title | escape }}</div><div class="pi__td">{{ b.settings.text | escape }}</div></div></div>{%- endfor -%}</div>{%- endif -%}
      <!-- ETA TIMELINE with live countdown -->
      {%- if section.settings.show_eta -%}
      <div class="pi__eta">
        <div class="pi__etatx">{{ section.settings.eta_prefix | escape }} <b data-countdown data-cutoff="{{ section.settings.cutoff_hour }}">{{ section.settings.eta_window | escape }}</b>{{ section.settings.eta_suffix | escape }}</div>
        <div class="pi__time">
          <div class="pi__node"><div class="pi__nic">{% render 'mw-icon', name: 'box' %}</div><div class="pi__nl">{{ section.settings.eta_1_label | escape }}</div><div class="pi__nd">{{ section.settings.eta_1_date | escape }}</div></div>
          <div class="pi__node"><div class="pi__nic">{% render 'mw-icon', name: 'truck' %}</div><div class="pi__nl">{{ section.settings.eta_2_label | escape }}</div><div class="pi__nd">{{ section.settings.eta_2_date | escape }}</div></div>
          <div class="pi__node"><div class="pi__nic">{% render 'mw-icon', name: 'check-circle' %}</div><div class="pi__nl">{{ section.settings.eta_3_label | escape }}</div><div class="pi__nd">{{ section.settings.eta_3_date | escape }}</div></div>
        </div>
      </div>
      {%- endif -%}
      <!-- COLLAPSIBLE ROWS -->
      {%- assign rows = section.blocks | where: 'type', 'row' -%}
      {%- if rows.size > 0 -%}<div class="pi__rows">{%- for b in rows -%}
        <details class="pi__row" {% if b.settings.open %}open{% endif %} {{ b.shopify_attributes }}>
          <summary>{% if b.settings.icon != blank %}{% render 'mw-icon', name: b.settings.icon, class: 'ci' %}{% endif %}{{ b.settings.title | escape }}{% render 'mw-icon', name: 'chevron', class: 'ch' %}</summary>
          <div class="pi__rc">{{ b.settings.content }}</div>
        </details>
      {%- endfor -%}</div>{%- endif -%}
    </div>
  </div>
</div>
<script>
(function(){var r=document.getElementById('pi-{{ uid }}');if(!r)return;
// gallery
var slides=[].slice.call(r.querySelectorAll('.pi__slide')),thumbs=[].slice.call(r.querySelectorAll('.pi__thumb')),gi=0;
function show(n){gi=(n+slides.length)%slides.length;slides.forEach(function(s,x){s.classList.toggle('on',x===gi)});thumbs.forEach(function(t,x){t.classList.toggle('on',x===gi);if(x===gi)t.scrollIntoView({inline:'nearest',block:'nearest'});});}
thumbs.forEach(function(t){t.addEventListener('click',function(){show(+t.dataset.thumb)})});
var pv=r.querySelector('[data-prev]'),nx=r.querySelector('[data-next]');pv&&pv.addEventListener('click',function(){show(gi-1)});nx&&nx.addEventListener('click',function(){show(gi+1)});
// quantity
var qty=r.querySelector('[data-qty]');
var qm=r.querySelector('[data-qminus]'),qp=r.querySelector('[data-qplus]');
qm&&qm.addEventListener('click',function(){qty.value=Math.max(1,(parseInt(qty.value)||1)-1);});
qp&&qp.addEventListener('click',function(){qty.value=(parseInt(qty.value)||1)+1;});
// variants
var variants={{ p.variants | json }};
function fmt(c){return '$'+(c/100).toFixed(2);}
var idField=r.querySelector('[data-variant-id]'),priceEl=r.querySelector('[data-price]'),cmpEl=r.querySelector('[data-compare]'),badgeEl=r.querySelector('[data-savebadge]'),atc=r.querySelector('[data-atc]'),atcl=r.querySelector('[data-atclabel]');
function selected(){var o=[];r.querySelectorAll('.pi__opt').forEach(function(g){var c=g.querySelector('input:checked');if(c)o[+c.dataset.opt]=c.value;});return o;}
function update(){var sel=selected();var v=variants.find(function(x){var vo=x.options||[x.option1,x.option2,x.option3];return sel.every(function(s,i){return s==null||vo[i]===s;});})||variants[0];if(!v)return;idField.value=v.id;priceEl.textContent=fmt(v.price);if(cmpEl){if(v.compare_at_price>v.price){cmpEl.textContent=fmt(v.compare_at_price);cmpEl.style.display='';if(badgeEl){badgeEl.textContent='-'+Math.round((v.compare_at_price-v.price)*100/v.compare_at_price)+'%';badgeEl.style.display='';}}else{cmpEl.style.display='none';if(badgeEl)badgeEl.style.display='none';}}
if(atcl)atcl.innerHTML=(v.available?'{{ section.settings.atc_label }}':'Sold out')+' &middot; '+fmt(v.price);atc.disabled=!v.available;}
r.querySelectorAll('input[data-opt]').forEach(function(i){i.addEventListener('change',function(){update();var g=i.closest('.pi__opt');var ov=g.querySelector('[data-optval]');if(ov)ov.innerHTML='&mdash; '+i.value;});});
update();
// live delivery countdown to a daily cutoff hour
var cd=r.querySelector('[data-countdown]');
if(cd){var cutoff=parseInt(cd.dataset.cutoff);
  function tick(){var now=new Date();var t=new Date();t.setHours(cutoff,0,0,0);if(t<=now)t.setDate(t.getDate()+1);var d=Math.max(0,t-now);var h=Math.floor(d/3.6e6),m=Math.floor(d%3.6e6/6e4),s=Math.floor(d%6e4/1e3);
    cd.textContent=(h<10?'0':'')+h+' Hrs. '+(m<10?'0':'')+m+' Min. '+(s<10?'0':'')+s+' Sec.';}
  if(!isNaN(cutoff)){tick();setInterval(tick,1000);}}
})();
</script>
{% schema %}
{
  "name": "MW · Product Information",
  "tag": "section",
  "class": "mw-section mw-product-information",
  "settings": [
    { "type": "header", "content": "Header / rating" },
    { "type": "checkbox", "id": "show_rating", "label": "Show rating stars", "default": true },
    { "type": "text", "id": "rating_text", "label": "Rating text", "default": "1,200+ reviews" },
    { "type": "richtext", "id": "subtitle", "label": "Subtitle", "default": "<p>A hand-finished sequin knit that reads <em>elegant at 11am</em>, not costume.</p>" },
    { "type": "text", "id": "callout", "label": "Callout pill", "default": "Free knit stole with every dress this week" },
    { "type": "header", "content": "Buy box" },
    { "type": "text", "id": "atc_label", "label": "Add-to-cart label", "default": "Add to cart" },
    { "type": "checkbox", "id": "show_quantity", "label": "Show quantity selector", "default": true },
    { "type": "text", "id": "cart_note", "label": "Note under button", "default": "Free shipping over $50 · 60-day returns · Free size swaps" },
    { "type": "text", "id": "color_option", "label": "Colour option name (rendered as swatches)", "default": "Color" },
    { "type": "checkbox", "id": "show_stock", "label": "Show stock line", "default": true },
    { "type": "text", "id": "stock_text", "label": "Stock text", "default": "Low stock in this size" },
    { "type": "text", "id": "payment_types", "label": "Payment marks", "info": "Comma list: visa,mastercard,amex,paypal,apple_pay,google_pay,klarna", "default": "paypal,klarna,visa,mastercard,apple_pay,google_pay,amex" },
    { "type": "text", "id": "fallback_image_url", "label": "Fallback image URL", "info": "Shown if the product has no images (e.g. on demo pages)." },
    { "type": "text", "id": "cause_text", "label": "Cause line (under gallery)", "default": "A portion of every order is donated to the Garment Worker Center to support fair pay in the factories that make our knitwear." },
    { "type": "header", "content": "Delivery timeline" },
    { "type": "checkbox", "id": "show_eta", "label": "Show delivery timeline", "default": true },
    { "type": "text", "id": "eta_prefix", "label": "Prefix", "default": "If you order within" },
    { "type": "range", "id": "cutoff_hour", "min": 0, "max": 23, "step": 1, "unit": "h", "label": "Daily order cutoff hour (live countdown)", "default": 17 },
    { "type": "text", "id": "eta_window", "label": "Fallback window text", "default": "03 Hrs. 37 Min." },
    { "type": "text", "id": "eta_suffix", "label": "Suffix", "default": ", you'll get it by" },
    { "type": "text", "id": "eta_1_label", "label": "Step 1 label", "default": "Ordered" },
    { "type": "text", "id": "eta_1_date", "label": "Step 1 date", "default": "Today" },
    { "type": "text", "id": "eta_2_label", "label": "Step 2 label", "default": "Shipped" },
    { "type": "text", "id": "eta_2_date", "label": "Step 2 date", "default": "In 1–2 days" },
    { "type": "text", "id": "eta_3_label", "label": "Step 3 label", "default": "Delivered" },
    { "type": "text", "id": "eta_3_date", "label": "Step 3 date", "default": "In 5–7 days" },
    { "type": "header", "content": "Gallery" },
    { "type": "select", "id": "image_ratio", "label": "Image ratio", "default": "3/4", "options": [ {"value":"3/4","label":"3:4"}, {"value":"4/5","label":"4:5"}, {"value":"1/1","label":"Square"} ] },
    { "type": "range", "id": "image_radius", "min": 0, "max": 20, "step": 1, "unit": "px", "label": "Image radius", "default": 4 },
    { "type": "range", "id": "thumb_size", "min": 48, "max": 96, "step": 4, "unit": "px", "label": "Thumbnail size", "default": 64 },
    { "type": "header", "content": "Layout & colour" },
    { "type": "range", "id": "max_width", "min": 1000, "max": 1400, "step": 10, "unit": "px", "label": "Content width", "default": 1250 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 120, "step": 4, "unit": "px", "label": "Padding top", "default": 40 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 120, "step": 4, "unit": "px", "label": "Padding bottom", "default": 48 },
    { "type": "range", "id": "side_padding", "min": 12, "max": 64, "step": 2, "unit": "px", "label": "Side padding", "default": 24 },
    { "type": "font_picker", "id": "heading_font", "label": "Heading font", "default": "poppins_n6" },
    { "type": "font_picker", "id": "body_font", "label": "Body font", "default": "inter_n4" },
    { "type": "color", "id": "section_bg", "label": "Background", "default": "#F5F0E8" },
    { "type": "color", "id": "heading_color", "label": "Headings", "default": "#241C15" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#5C5449" },
    { "type": "color", "id": "accent_color", "label": "Accent (gradient start)", "default": "#B79B6E" },
    { "type": "color", "id": "accent_color_2", "label": "Accent (gradient end)", "default": "#D6C19E" },
    { "type": "color", "id": "price_color", "label": "Price", "default": "#241C15" },
    { "type": "color", "id": "sale_color", "label": "Sale badge / stock", "default": "#B23B2E" },
    { "type": "color", "id": "button_bg", "label": "Button gradient start", "default": "#3A3027" },
    { "type": "color", "id": "button_bg_2", "label": "Button gradient end", "default": "#5C4A34" },
    { "type": "color", "id": "button_text_color", "label": "Button text", "default": "#F3ECE1" },
    { "type": "color", "id": "box_bg", "label": "Image placeholder tint", "default": "#EFE7DA" },
    { "type": "color", "id": "line_color", "label": "Lines / borders", "default": "#E1D6C4" },
    { "type": "color", "id": "star_color", "label": "Stars", "default": "#E8B04B" }
  ],
  "blocks": [
    { "type": "usp", "name": "USP line", "settings": [
      { "type": "select", "id": "icon", "label": "Icon", "default": "check-circle", "options": [ {"value":"check-circle","label":"Check"}, {"value":"leaf","label":"Leaf"}, {"value":"wash","label":"Wash"}, {"value":"sparkle","label":"Sparkle"}, {"value":"shield","label":"Shield"}, {"value":"ruler","label":"Ruler"} ] },
      { "type": "text", "id": "text", "label": "Text", "default": "Micro sequins knitted in by hand, never glued on" }
    ] },
    { "type": "trust", "name": "Trust badge", "settings": [
      { "type": "select", "id": "icon", "label": "Icon", "default": "sparkle", "options": [ {"value":"sparkle","label":"Sparkle"}, {"value":"shield","label":"Shield"}, {"value":"swap","label":"Swap"}, {"value":"refresh","label":"Refresh"}, {"value":"truck","label":"Truck"}, {"value":"lock","label":"Lock"}, {"value":"heart","label":"Heart"} ] },
      { "type": "text", "id": "title", "label": "Title", "default": "Hand-Finished" },
      { "type": "text", "id": "text", "label": "Text", "default": "Knitted, not glued" }
    ] },
    { "type": "row", "name": "Collapsible row", "settings": [
      { "type": "select", "id": "icon", "label": "Icon", "default": "ruler", "options": [ {"value":"ruler","label":"Ruler"}, {"value":"leaf","label":"Leaf"}, {"value":"truck","label":"Truck"}, {"value":"wash","label":"Wash"}, {"value":"shield","label":"Shield"}, {"value":"","label":"None"} ] },
      { "type": "text", "id": "title", "label": "Title", "default": "Find your size" },
      { "type": "richtext", "id": "content", "label": "Content", "default": "<p>Order your usual size. The knit has give and the fit is graded across eight sizes.</p>" },
      { "type": "checkbox", "id": "open", "label": "Open by default", "default": false }
    ] }
  ],
  "max_blocks": 16,
  "presets": [ { "name": "MW · Product Information", "blocks": [
    { "type": "usp", "settings": { "icon": "sparkle", "text": "Micro sequins knitted in by hand, never glued on" } },
    { "type": "usp", "settings": { "icon": "shield", "text": "Lined through the body, no slip needed" } },
    { "type": "usp", "settings": { "icon": "wash", "text": "Machine washable cold, no dry-clean bill" } },
    { "type": "trust", "settings": { "icon": "sparkle", "title": "Hand-Finished", "text": "Knitted, not glued" } },
    { "type": "trust", "settings": { "icon": "shield", "title": "Fully Lined", "text": "No slip needed" } },
    { "type": "trust", "settings": { "icon": "swap", "title": "Free Size Swaps", "text": "Both ways, on us" } },
    { "type": "trust", "settings": { "icon": "refresh", "title": "60 Day Returns", "text": "Or your money back" } },
    { "type": "row", "settings": { "icon": "ruler", "title": "Find your size", "content": "<p>Order your usual size. The knit has give and the fit is graded across eight sizes, so most people keep their normal pick.</p>", "open": true } },
    { "type": "row", "settings": { "icon": "leaf", "title": "Fabric & care", "content": "<p>Recycled sequin knit, fully lined. Machine wash cold, gentle, inside out and dry flat. No dry cleaning.</p>" } },
    { "type": "row", "settings": { "icon": "truck", "title": "Shipping & returns", "content": "<p>Free shipping over $50. Dispatched in 1–2 days, delivered in 5–7. 60-day returns and free size swaps both ways.</p>" } }
  ] } ]
}
{% endschema %}
