/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'lobor-product.css'"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 20:0 Unexpected "<"
Line 26:7 Expected identifier but found "%"
Line 27:8 Unexpected "<"
Line 28:55 Unexpected "{"
Line 28:64 Expected ":"
... and 89 more hidden warnings

**/
{{ 'lobor-product.css' | asset_url | stylesheet_tag }}

{% assign product_form_id = 'product-form-' | append: section.id %}

<section class="lobor-product">
  <div class="page-width">

    <nav class="lobor-product-breadcrumb">
      <a href="{{ routes.root_url }}">ホーム</a>

      {% if product.collections.first %}
        <span>&gt;</span>
        <a href="{{ product.collections.first.url }}">{{ product.collections.first.title }}</a>
      {% endif %}

      <span>&gt;</span>
      <span>{{ product.title }}</span>
    </nav>

    <div class="lobor-product-with-sidebar">

      <aside class="lobor-product-sidebar">
        <h3>シリーズから探す</h3>
        <ul>
          <li><a href="/collections/all">すべての商品から探す</a></li>
          <li><a href="/collections/cellini">CELLINI</a></li>
          <li><a href="/collections/dynasty">DYNASTY</a></li>
          <li><a href="/collections/cosmopolitan">COSMOPOLITAN</a></li>
          <li><a href="/collections/heritage">HERITAGE</a></li>
          <li><a href="/collections/new-york">NEW YORK</a></li>
          <li><a href="/collections/premier">PREMIER</a></li>
          <li><a href="/collections/classy">CLASSY</a></li>
          <li><a href="/collections/planetarium">PLANETARIUM</a></li>
          <li><a href="/collections/audrey">AUDREY</a></li>
          <li><a href="/collections/meridian">MERIDIAN</a></li>
          <li><a href="/collections/strap">STRAP</a></li>
        </ul>

        <h3>条件から探す</h3>
        <ul>
          <li><a href="/collections/automatic">自動巻き</a></li>
          <li><a href="/collections/quartz">電池式</a></li>
          <li><a href="/collections/42mm">42mm</a></li>
          <li><a href="/collections/40mm">40mm</a></li>
          <li><a href="/collections/35mm">35mm</a></li>
          <li><a href="/collections/pair-watch">PAIR WATCH</a></li>
        </ul>

        <h3>カラーで探す</h3>
        <ul>
          <li><a href="/collections/black">BLACK</a></li>
          <li><a href="/collections/brown">BROWN</a></li>
          <li><a href="/collections/white">WHITE</a></li>
          <li><a href="/collections/blue">BLUE</a></li>
          <li><a href="/collections/silver">SILVER</a></li>
          <li><a href="/collections/gold">GOLD</a></li>
          <li><a href="/collections/rosegold">ROSEGOLD</a></li>
        </ul>
      </aside>

      <div class="lobor-product-main">

        <product-form class="lobor-product-form">
          {% form 'product', product, id: product_form_id %}

            <div class="lobor-product-layout">

              <div class="lobor-product-media">
                <div class="lobor-product-main-image">
                  {% if product.featured_media %}
                    <img
                      src="{{ product.featured_media | image_url: width: 1400 }}"
                      alt="{{ product.featured_media.alt | default: product.title | escape }}"
                      loading="eager"
                    >
                  {% endif %}
                </div>

                {% if product.media.size > 1 %}
                  <div class="lobor-product-thumbs">
                    {% for media in product.media %}
                      {% if media.media_type == 'image' %}
                        <button
                          type="button"
                          class="lobor-product-thumb {% if forloop.first %}is-active{% endif %}"
                          data-image="{{ media | image_url: width: 1400 }}"
                        >
                          <img
                            src="{{ media | image_url: width: 220 }}"
                            alt="{{ media.alt | default: product.title | escape }}"
                            loading="lazy"
                          >
                        </button>
                      {% endif %}
                    {% endfor %}
                  </div>
                {% endif %}
              </div>

              <div class="lobor-product-info">
                <h1 class="lobor-product-title">{{ product.title }}</h1>

                <div class="lobor-product-price">
                  {% if product.compare_at_price > product.price %}
                    <span class="lobor-product-compare">
                      {{ product.compare_at_price | money }}
                    </span>
                  {% endif %}
                  <span>{{ product.price | money }}</span>
                </div>

                {% unless product.has_only_default_variant %}
                  <div class="lobor-product-options">
                    {% for option in product.options_with_values %}
                      <div class="lobor-product-option">
                        <label>{{ option.name }}</label>
                        <select name="options[{{ option.name | escape }}]">
                          {% for value in option.values %}
                            <option
                              value="{{ value | escape }}"
                              {% if option.selected_value == value %}selected{% endif %}
                            >
                              {{ value }}
                            </option>
                          {% endfor %}
                        </select>
                      </div>
                    {% endfor %}
                  </div>
                {% endunless %}

                <input
                  type="hidden"
                  name="id"
                  value="{{ product.selected_or_first_available_variant.id }}"
                >

                <div class="lobor-product-quantity">
                  <label for="Quantity-{{ section.id }}">購入数</label>
                  <input
                    id="Quantity-{{ section.id }}"
                    type="number"
                    name="quantity"
                    value="1"
                    min="1"
                  >
                </div>

                <button
                  type="submit"
                  name="add"
                  class="lobor-add-cart"
                  {% unless product.selected_or_first_available_variant.available %}disabled{% endunless %}
                >
                  {% if product.selected_or_first_available_variant.available %}
                    カートに入れる
                  {% else %}
                    SOLD OUT
                  {% endif %}
                </button>

                <ul class="lobor-product-links">
                  <li><a href="/policies/refund-policy">返品について</a></li>
                  <li><a href="/policies/legal-notice">特定商取引法に基づく表記</a></li>
                  <li><a href="/pages/contact">この商品について問い合わせる</a></li>
                </ul>

                <div class="lobor-product-service-image">
                  <img src="https://img21.shop-pro.jp/PA01377/281/etc/p2.jpg" alt="">
                </div>
              </div>

            </div>

            <div class="lobor-product-detail">
              <div class="lobor-product-tabs">
                <button type="button" class="is-active" data-tab="description">商品説明</button>
                <button type="button" data-tab="images">イメージ</button>
              </div>

              <div class="lobor-product-panel is-active" id="description">
                {% if product.description != blank %}
                  <div class="lobor-product-description">
                    {{ product.description }}
                  </div>
                {% else %}
                  <p class="lobor-product-empty">商品説明はありません。</p>
                {% endif %}
              </div>

              <div class="lobor-product-panel" id="images">
                <div class="lobor-product-image-list">
                  {% for media in product.media %}
                    {% if media.media_type == 'image' %}
                      <img
                        src="{{ media | image_url: width: 1400 }}"
                        alt="{{ media.alt | default: product.title | escape }}"
                        loading="lazy"
                      >
                    {% endif %}
                  {% endfor %}
                </div>

                <a href="#{{ product_form_id }}" class="lobor-buy-anchor">
                  この商品を購入する
                </a>
              </div>
            </div>

          {% endform %}
        </product-form>

      </div>
    </div>
  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const mainImage = document.querySelector('.lobor-product-main-image img');
    const thumbs = document.querySelectorAll('.lobor-product-thumb');

    thumbs.forEach(function (thumb) {
      thumb.addEventListener('click', function () {
        const imageUrl = thumb.getAttribute('data-image');

        thumbs.forEach(function (item) {
          item.classList.remove('is-active');
        });

        thumb.classList.add('is-active');

        if (mainImage && imageUrl) {
          mainImage.src = imageUrl;
        }
      });
    });

    const tabButtons = document.querySelectorAll('.lobor-product-tabs button');
    const panels = document.querySelectorAll('.lobor-product-panel');

    tabButtons.forEach(function (button) {
      button.addEventListener('click', function () {
        const target = button.dataset.tab;

        tabButtons.forEach(function (btn) {
          btn.classList.remove('is-active');
        });

        panels.forEach(function (panel) {
          panel.classList.remove('is-active');
        });

        button.classList.add('is-active');

        const targetPanel = document.getElementById(target);
        if (targetPanel) {
          targetPanel.classList.add('is-active');
        }
      });
    });
  });
</script>

{% schema %}
{
  "name": "LOBOR 商品詳細",
  "settings": [],
  "presets": [
    {
      "name": "LOBOR 商品詳細"
    }
  ]
}
{% endschema %}