/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'product-dime-style.css'"
Line 17:0 Unexpected "<"
Line 18:1 Expected identifier but found "%"
Line 19:0 Unexpected "<"
Line 20:3 Expected identifier but found "%"
Line 20:36 Unexpected "-"
Line 20:53 Expected identifier but found "%"
Line 21:2 Unexpected "<"
... and 163 more hidden warnings

**/
{{ 'product-dime-style.css' | asset_url | stylesheet_tag }}
<script src="{{ 'product-dime-modal.js' | asset_url }}" defer="defer"></script>
{% assign current_variant = product.selected_or_first_available_variant %}
<div class="pdp-container">
  {%- comment -%} Mobile Breadcrumb - Sticky at top {%- endcomment -%}
  <div class="pdp-breadcrumb-mobile">
    <nav class="breadcrumb-nav">
      <a href="/collections/all" class="breadcrumb-link">Shop</a>
      {% if collection %}
        <span class="breadcrumb-separator">></span>
        <a href="{{ collection.url }}" class="breadcrumb-link">{{ collection.title }}</a>
      {% endif %}
    </nav>
  </div>
  <div class="pdp-layout">
    {%- comment -%} Left Column - Product Images {%- endcomment -%}
    <div class="pdp-gallery">
      {% if product.images.size > 0 %}
        {% for image in product.images %}
          <div class="pdp-gallery-item">
            <img 
              src="{{ image | img_url: '1200x' }}" 
              alt="{{ image.alt | escape }}"
              loading="{% if forloop.first %}eager{% else %}lazy{% endif %}"
            >
          </div>
        {% endfor %}
      {% else %}
        <div class="pdp-gallery-item">
          {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% endif %}
    </div>
    {%- comment -%} Right Column - Product Info (Sticky on Desktop) {%- endcomment -%}
    <div class="pdp-info">
      <div class="pdp-info-inner">
        {%- comment -%} Desktop Breadcrumb {%- endcomment -%}
        <nav class="pdp-breadcrumb-desktop">
          <a href="/collections/all" class="breadcrumb-link">Shop</a>
          {% if collection %}
            <span class="breadcrumb-separator">></span>
            <a href="{{ collection.url }}" class="breadcrumb-link">{{ collection.title }}</a>
          {% endif %}
        </nav>
        {%- comment -%} Product Title {%- endcomment -%}
        <h1 class="pdp-title">{{ product.title }}</h1>
        {%- comment -%} Custom Description Blocks {%- endcomment -%}
        {% if section.blocks.size > 0 %}
          <div class="pdp-description-blocks">
            {% for block in section.blocks %}
              {% if block.type == 'description' %}
                <div class="pdp-description-block" {{ block.shopify_attributes }}>
                  {{ block.settings.text }}
                </div>
              {% endif %}
            {% endfor %}
          </div>
        {% endif %}
        {%- comment -%} Variant + Add to Cart Row {%- endcomment -%}
        <div class="pdp-purchase-section">
          <button type="button" class="pdp-variant-btn" id="openSizeModal">
            <span class="pdp-variant-text">
              {% if current_variant.title != 'Default Title' %}
                {{ current_variant.title }}
              {% else %}
                Select a size
              {% endif %}
            </span>
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5"/>
            </svg>
          </button>
          <button 
            type="button" 
            class="pdp-add-to-cart"
            id="addToCartBtn"
            {% unless current_variant.available %}disabled{% endunless %}
          >
            <span class="pdp-atc-text">
              {% if current_variant.available %}
                Add to Cart
              {% else %}
                Sold Out
              {% endif %}
            </span>
            <span class="pdp-atc-price">{{ current_variant.price | money }}</span>
          </button>
        </div>
        {%- comment -%} Product Details - Accordions (Editable via Blocks) {%- endcomment -%}
        <div class="pdp-accordions">
          {% for block in section.blocks %}
            {% if block.type == 'accordion' %}
              <div class="pdp-accordion" {{ block.shopify_attributes }}>
                <button type="button" class="pdp-accordion-header">
                  <span>{{ block.settings.title }}</span>
                  <svg class="pdp-accordion-icon" width="12" height="12" viewBox="0 0 12 12">
                    <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5"/>
                  </svg>
                </button>
                <div class="pdp-accordion-content">
                  <div class="pdp-accordion-inner">
                    {{ block.settings.content }}
                  </div>
                </div>
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  {%- comment -%} Mobile Sticky Bottom Bar {%- endcomment -%}
  <div class="pdp-mobile-bar">
    <div class="pdp-mobile-bar-inner">
      <div class="pdp-mobile-info">
        <h2 class="pdp-mobile-title">{{ product.title }}</h2>
        <button type="button" class="pdp-variant-btn-mobile" id="openSizeModalMobile">
          <span class="pdp-variant-text">
            {% if current_variant.title != 'Default Title' %}
              {{ current_variant.title }}
            {% else %}
              Select a size
            {% endif %}
          </span>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5"/>
          </svg>
        </button>
      </div>
      <button 
        type="button" 
        class="pdp-add-to-cart-mobile"
        id="addToCartBtnMobile"
        {% unless current_variant.available %}disabled{% endunless %}
      >
        <span>{{ current_variant.price | money }}</span>
      </button>
    </div>
  </div>
</div>
{%- comment -%} Size Selection Modal {%- endcomment -%}
<div class="pdp-modal" id="sizeModal">
  <div class="pdp-modal-overlay" id="modalOverlay"></div>
  <div class="pdp-modal-content">
    <div class="pdp-modal-header">
      <h3 class="pdp-modal-title">Select a size</h3>
      <button type="button" class="pdp-modal-close" id="closeModal">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <path d="M2 2L14 14M14 2L2 14" stroke="currentColor" stroke-width="1.5"/>
        </svg>
      </button>
    </div>
    <div class="pdp-modal-body">
      {% for variant in product.variants %}
        <button 
          type="button" 
          class="pdp-size-option {% if variant.id == current_variant.id %}active{% endif %}"
          data-variant-id="{{ variant.id }}"
          data-variant-title="{{ variant.title }}"
          data-variant-price="{{ variant.price | money }}"
          {% unless variant.available %}disabled{% endunless %}
        >
          <span class="pdp-size-name">{{ variant.title }}</span>
          <span class="pdp-size-status">
            {% unless variant.available %}
              Sold out
            {% else %}
              {% if variant.inventory_quantity < 5 and variant.inventory_quantity > 0 %}
                Only a few left
              {% endif %}
            {% endunless %}
          </span>
        </button>
      {% endfor %}
    </div>
    {% if section.settings.size_guide_link != blank %}
      <div class="pdp-modal-footer">
        <a href="{{ section.settings.size_guide_link }}" class="pdp-size-guide">Size Guide</a>
      </div>
    {% endif %}
  </div>
</div>
{%- comment -%} Product JSON for JavaScript {%- endcomment -%}
<script type="application/json" id="productJSON">
  {{ product | json }}
</script>
{% schema %}
{
  "name": "Product Dime Style",
  "settings": [
    {
      "type": "url",
      "id": "size_guide_link",
      "label": "Size Guide Link"
    }
  ],
  "blocks": [
    {
      "type": "description",
      "name": "Description Block",
      "settings": [
        {
          "type": "html",
          "id": "text",
          "label": "Description Text",
          "default": "<p>Add custom description here.</p>"
        }
      ]
    },
    {
      "type": "accordion",
      "name": "Accordion",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Accordion Title",
          "default": "Details"
        },
        {
          "type": "html",
          "id": "content",
          "label": "Accordion Content",
          "default": "<p>Add content here.</p>"
        }
      ]
    }
  ]
}
{% endschema %}