{% extends 'base.html' %}

{% block container %}
<main>
  <div class="container py-5" id="productDetail">
    {% include 'partial/breadcrumb.html' %}

    <div class="row g-5">
      <!-- Product Images -->
      <div class="col-lg-7">
        <div class="row g-3">
          <div class="col-12">
            <div class="bg-light ratio ratio-1x1 overflow-hidden">
              <a id="product-poster" href="{% archiveDetail with name='Logo' %}" data-fancybox="product-gallery" class="d-block bg-light ratio ratio-1x1 overflow-hidden"><img src="{% archiveDetail with name='Logo' %}" class="img-fluid object-fit-cover" alt="{% archiveDetail with name='Title' %}"></a>
            </div>
          </div>
          {%- archiveDetail images with name="Images" %}
          {% for item in images %}
          <div class="col-6">
            <div class="bg-light ratio ratio-1x1 overflow-hidden">
              <a href="{{item}}" data-fancybox="product-gallery" class="d-block bg-light ratio ratio-1x1 overflow-hidden"><img src="{{item}}" class="img-fluid object-fit-cover" alt="{% archiveDetail with name='Title' %} {{forloop.Counter}}"/></a>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- Product Info -->
      <div class="col-lg-5">
        <div class="sticky-top" style="top: 100px;">
          <h1 class="h2 fw-bold mb-3">{% archiveDetail with name="Title" %}</h1>
          {%- archiveDetail price with name="Price" %}
          {%- archiveDetail originPrice with name="OriginPrice" %}
          {%- archiveDetail stock with name="Stock" %}
          <div class="d-flex align-items-center mb-4">
            <span class="fs-4 fw-bold me-3" id="product-price">${{priceFormat(price)}}</span>
            {%- if originPrice > 0 %}
            <span class="me-3 text-decoration-line-through text-black-50" id="origin-price">${{priceFormat(originPrice)}}</span>
            {%- endif %}
            <span id="product-availability">
              {%- if stock > 0 %}
              <span class="badge bg-light text-dark border rounded-pill px-3 py-2 small">In Stock</span>
              {%- else %}
              <span class="badge bg-dark text-light border rounded-pill px-3 py-2 small opacity-75">Sold Out</span>
              {%- endif %}
            </span>
          </div>

          <hr class="my-4">
          {%- archiveDetail optionType with name="OptionType" %}
          {%- archiveDetail variants with name="Options" %}
          <!-- Variants -->
           {%- for item in variants %}
          <div class="mb-4 sku-option" data-option="{{item.Id}}" data-is-attribute="{{item.IsAttribute}}">
            <label class="form-label small fw-bold text-uppercase mb-3 text-muted">{{item.Title}}: <span class="selectedValue text-dark"></span></label>
            <div class="d-flex gap-2 flex-wrap">
              {%- for valItem in item.Values %}
              <label class="btn btn-outline-dark rounded-pill px-3 py-2" data-value="{{valItem.Id}}" for="{{item.Title}}-{{forloop.Counter}}" data-stock="{{valItem.Stock}}">
                {{valItem.Title}}
                {%- if optionType == 2 && valItem.Price > 0 %}
                {# 加价模式下显示加价值 #}
                +{{valItem.Price|priceFormat:2}}
                {%- endif %}
              </label>
              {%- endfor %}
            </div>
          </div>
          {%- endfor %}

          <!-- Quantity -->
          <div class="mb-4">
            <label class="form-label small fw-bold text-uppercase mb-3">Quantity</label>
            <div class="input-group border border-dark" style="width: 150px;">
              <button class="btn btn-link text-dark px-3 py-2 text-decoration-none" type="button" onclick="this.parentNode.querySelector('input[name=quantity]').stepDown()">
                <i class="bi bi-dash"></i>
              </button>
              <input type="number" name="quantity" class="form-control border-0 text-center px-0" value="1" min="1" max="{% archiveDetail with name='Stock' %}">
              <button class="btn btn-link text-dark px-3 py-2 text-decoration-none" type="button" onclick="this.parentNode.querySelector('input[name=quantity]').stepUp()">
                <i class="bi bi-plus"></i>
              </button>
            </div>
          </div>

          <!-- Actions -->
          <div class="d-grid gap-2 mb-4">
            <button class="btn btn-outline-dark py-3 btn-add-to-cart">Add to cart</button>
            <button class="btn btn-dark py-3 btn-buy-now">Buy it now</button>
          </div>

          <div class="mt-4 mb-4">
            {%- archiveDetail with name="Content" %}
          </div>
          <!-- Description Accordion -->
          <div class="accordion accordion-flush border-top" id="productAccordion">
            <div class="accordion-item bg-transparent">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed px-0 bg-transparent text-dark fw-bold small text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#materialsCollapse">
                  <svg class="icon icon-accordion" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M7.97895 1.55555C7.75602 1.55555 7.55049 1.71237 7.49305 1.94762L7.49123 1.95509C7.42498 2.21019 7.33959 2.53757 7.21755 2.85227C7.09741 3.16208 6.92519 3.50498 6.66011 3.77111C5.94871 4.49525 4.9347 4.58069 4.15302 4.58069C3.86517 4.58069 3.57871 4.54519 3.29458 4.47515C3.24995 4.46626 3.17168 4.45029 3.08678 4.41925C3.02446 4.40156 2.97878 4.39485 2.93608 4.39485C2.85763 4.39485 2.77367 4.41506 2.69931 4.45229C2.58049 4.51177 2.49244 4.61426 2.45245 4.74393L2.08187 5.96006C1.99969 6.23376 2.14791 6.5108 2.40926 6.59694C3.06631 6.80864 3.64401 7.16273 4.12596 7.64524C5.79603 9.31728 5.79603 12.0249 4.12596 13.697L4.1207 13.7022C3.70656 14.1053 3.22471 14.4375 2.66344 14.653C2.42776 14.7449 2.29223 15.0137 2.37026 15.2777L2.3694 15.275L2.37085 15.2797L2.37026 15.2777L2.92436 17.0653L2.92291 17.061L2.92626 17.0715L2.92436 17.0653C2.97736 17.22 3.1002 17.3437 3.23664 17.3938C3.23134 17.3924 3.22591 17.3909 3.22032 17.3894L3.24853 17.3979C3.24455 17.3966 3.24059 17.3952 3.23664 17.3938C3.31908 17.4155 3.36721 17.4222 3.41048 17.4222C3.49912 17.4222 3.60995 17.3887 3.70246 17.3233C3.98945 17.1198 4.30448 16.9574 4.6125 16.8318L4.61978 16.8288C5.10547 16.639 5.61461 16.5446 6.14334 16.5446C7.11309 16.5446 8.05549 16.8874 8.79764 17.4889L8.80712 17.4966L8.81955 17.5076C8.90806 17.5864 9.00821 17.6755 9.10985 17.7768C9.10724 17.7743 9.10462 17.7719 9.10199 17.7695L9.11722 17.7841C9.11476 17.7817 9.11231 17.7792 9.10985 17.7768C9.26909 17.925 9.40178 18.0826 9.51863 18.2455L9.51488 18.2407L9.52415 18.2532C9.52231 18.2507 9.52048 18.2481 9.51863 18.2455C9.61654 18.3713 9.76885 18.4444 9.91772 18.4444V19.4999C9.42913 19.4999 8.96472 19.2651 8.67058 18.8776L8.66585 18.8714L8.66131 18.865C8.57515 18.7443 8.48502 18.6386 8.38216 18.5436L8.3744 18.5364L8.36693 18.5289C8.28943 18.4513 8.21077 18.3808 8.12058 18.3006C8.12363 18.303 8.12667 18.3055 8.12971 18.3079L8.11112 18.2921C8.11428 18.295 8.11744 18.2978 8.12058 18.3006C7.56475 17.8535 6.86093 17.6002 6.14334 17.6002C5.74527 17.6002 5.36861 17.6705 5.00975 17.8102L5.01345 17.8087L5.00616 17.8116L5.00975 17.8102C4.7622 17.9115 4.52249 18.0371 4.31551 18.1839C4.05739 18.3663 3.73435 18.4778 3.41048 18.4778C3.22966 18.4778 3.07494 18.4441 2.94062 18.4074L2.9264 18.4036L2.91241 18.3989C2.43607 18.2399 2.07057 17.8518 1.91799 17.3935L1.91453 17.3831L1.35631 15.5819C1.12631 14.8143 1.50604 13.9695 2.27996 13.6691L2.28202 13.6683C2.68845 13.5124 3.05095 13.2676 3.37829 12.9495L3.37567 12.9522L3.38096 12.9469L3.37829 12.9495C4.63437 11.6891 4.6335 9.64934 3.37567 8.39003C3.01234 8.02628 2.57987 7.76103 2.08252 7.60098L2.08001 7.60016C1.26969 7.33494 0.820566 6.47637 1.06787 5.6562L1.06832 5.65473L1.43956 4.43642L1.43993 4.43521C1.565 4.02823 1.84814 3.69722 2.22417 3.50898C2.43856 3.40166 2.68453 3.3393 2.93608 3.3393C3.11661 3.3393 3.27314 3.37268 3.40855 3.41335L3.43121 3.42015L3.45248 3.42867C3.45248 3.42867 3.45629 3.42989 3.46231 3.4314C3.47374 3.43427 3.48719 3.43707 3.51473 3.44259L3.52713 3.44507L3.5394 3.44814C3.746 3.49985 3.95026 3.52514 4.15302 3.52514C4.91759 3.52514 5.52295 3.42089 5.9046 3.03158L5.90806 3.02805C6.02355 2.91242 6.13155 2.72544 6.22996 2.47166C6.32632 2.22316 6.39772 1.95396 6.46528 1.69386L6.46427 1.69798L6.46615 1.69052L6.46528 1.69386C6.63616 1.00201 7.25456 0.5 7.97895 0.5H11.609C12.3348 0.5 12.9542 1.00401 13.1237 1.69798L13.1242 1.70013C13.1834 1.94725 13.2587 2.21702 13.359 2.46369C13.4616 2.71581 13.5762 2.90808 13.696 3.02807C14.1211 3.45365 14.7781 3.68003 15.4455 3.68003C15.5631 3.68003 15.6809 3.67176 15.7991 3.65507C16.0139 3.6203 16.225 3.56054 16.415 3.47834C16.6179 3.38568 16.8361 3.3393 17.0543 3.3393C17.2747 3.3393 17.4951 3.38664 17.6997 3.48119C18.0942 3.66348 18.4093 4.00233 18.5392 4.44215L18.9305 5.59736L18.9334 5.60717C19.0547 6.01723 19.0121 6.46746 18.7906 6.84757C18.5695 7.22709 18.1953 7.48993 17.7778 7.58282L17.7709 7.58435C17.5695 7.62636 17.3676 7.69501 17.1451 7.78185C16.7638 7.95199 16.4097 8.19235 16.1092 8.49326C15.4747 9.1285 15.1188 9.97588 15.1188 10.8775C15.1188 11.7824 15.4665 12.6274 16.1066 13.2593L16.1092 13.2619C16.4842 13.6374 16.929 13.9137 17.4287 14.0838C18.1828 14.3325 18.7843 15.188 18.5193 16.05L18.0759 17.4952L18.0752 17.4976C17.9207 17.9926 17.544 18.3705 17.0476 18.5259L17.0418 18.5277C16.9097 18.5673 16.7524 18.6017 16.5797 18.6017C16.2411 18.6017 15.898 18.4939 15.6144 18.273L15.6108 18.2702C15.3991 18.1024 15.1801 17.9708 14.9427 17.865L14.9447 17.8659L14.9408 17.8641L14.9427 17.865C14.5354 17.688 14.1132 17.6002 13.6715 17.6002C12.9507 17.6002 12.2587 17.8453 11.7065 18.2988L11.7141 18.2921L11.6994 18.3047C11.7018 18.3028 11.7041 18.3008 11.7065 18.2988L11.4477 18.5292C11.4511 18.5257 11.4547 18.5221 11.4582 18.5186L11.4356 18.5399L11.4477 18.5292C11.3396 18.6384 11.2492 18.7459 11.1669 18.8609C11.1682 18.8589 11.1695 18.857 11.1708 18.8551L11.1639 18.865L11.1669 18.8609C10.8858 19.2703 10.4109 19.4975 9.92545 19.4999L9.92546 18.4444H9.91772C10.0873 18.4444 10.2255 18.3642 10.2941 18.2632L10.3009 18.2532C10.4214 18.0843 10.5538 17.9281 10.7079 17.7738L10.7189 17.7628L11.0162 17.4983L11.0237 17.4921C11.7696 16.8756 12.7042 16.5446 13.6715 16.5446C14.2604 16.5446 14.8275 16.663 15.3684 16.8985L15.3723 16.9002C15.6902 17.0416 15.9855 17.219 16.2676 17.4422L16.2662 17.4411L16.2698 17.444L16.2676 17.4422C16.355 17.5098 16.4651 17.5461 16.5797 17.5461C16.6128 17.5461 16.6607 17.5394 16.7332 17.5179L16.7305 17.5187L16.7363 17.517L16.7332 17.5179C16.895 17.4664 17.0122 17.3494 17.0638 17.185L17.5069 15.741C17.5716 15.5306 17.412 15.1893 17.0951 15.0856L17.0895 15.0838C16.4357 14.8617 15.8506 14.4986 15.3602 14.008L15.3615 14.0093L15.3589 14.0067L15.3602 14.008C14.5161 13.1739 14.0599 12.0577 14.0599 10.8775C14.0599 9.69362 14.529 8.57933 15.3589 7.74846C15.7569 7.34998 16.2242 7.03443 16.7259 6.81248L16.7363 6.80786L16.747 6.80369C16.9934 6.70716 17.2611 6.61261 17.5499 6.55201L17.5472 6.55261L17.5541 6.55113L17.5499 6.55201C17.6881 6.52047 17.8079 6.43273 17.875 6.3174C17.9411 6.20409 17.9608 6.05889 17.9202 5.91414L17.924 5.92537L17.9178 5.90587C17.9187 5.90862 17.9195 5.91138 17.9202 5.91414L17.5282 4.75688L17.5247 4.74458C17.4871 4.61282 17.3921 4.50249 17.2544 4.43887C17.1909 4.40952 17.1226 4.39485 17.0543 4.39485C16.9859 4.39485 16.9176 4.40953 16.8541 4.43887L16.8433 4.44383C16.5614 4.56653 16.2601 4.6503 15.9626 4.69796L15.9538 4.69937C15.7847 4.72356 15.6152 4.73559 15.4455 4.73559C14.5661 4.73559 13.6138 4.4417 12.9457 3.77286C12.684 3.51084 12.5047 3.17239 12.3778 2.86025C12.2488 2.54315 12.1592 2.21564 12.0947 1.94676C12.037 1.71199 11.8317 1.55555 11.609 1.55555H7.97895Z"></path></svg>
                  <span class="ms-2">Materials</span>
                </button>
              </h2>
              <div id="materialsCollapse" class="accordion-collapse collapse" data-bs-parent="#productAccordion">
                <div class="accordion-body px-0 py-3 text-muted small">
                  {%- archiveDetail materials with name="materials" %}
                  {{materials|render|safe}}
                </div>
              </div>
            </div>
            <div class="accordion-item bg-transparent">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed px-0 bg-transparent text-dark fw-bold small text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#shippingCollapse">
                  <svg class="icon icon-accordion" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M0 3.75156C0 3.47454 0.224196 3.24997 0.500755 3.24997H10.647C10.9235 3.24997 11.1477 3.47454 11.1477 3.75156V5.07505V5.63362V6.10938V13.6616C10.9427 14.0067 10.8813 14.1101 10.5516 14.6648L7.22339 14.6646V13.6614H10.1462V4.25316H1.00151V13.6614H2.6842V14.6646H0.500755C0.224196 14.6646 0 14.44 0 14.163V3.75156Z"></path>
      <path d="M18.9985 8.08376L11.1477 6.10938V5.07505L19.6212 7.20603C19.8439 7.26203 20 7.46255 20 7.69253V14.1631C20 14.4401 19.7758 14.6647 19.4992 14.6647H17.3071V13.6615H18.9985V8.08376ZM11.1477 13.6616L13.3442 13.6615L13.3443 14.6647L10.5516 14.6648L11.1477 13.6616Z"></path>
      <path d="M7.71269 14.1854C7.71269 15.6018 6.56643 16.75 5.15245 16.75C3.73847 16.75 2.59221 15.6018 2.59221 14.1854C2.59221 12.7691 3.73847 11.6209 5.15245 11.6209C6.56643 11.6209 7.71269 12.7691 7.71269 14.1854ZM5.15245 15.7468C6.01331 15.7468 6.71118 15.0478 6.71118 14.1854C6.71118 13.3231 6.01331 12.6241 5.15245 12.6241C4.29159 12.6241 3.59372 13.3231 3.59372 14.1854C3.59372 15.0478 4.29159 15.7468 5.15245 15.7468Z"></path>
      <path d="M17.5196 14.1854C17.5196 15.6018 16.3733 16.75 14.9593 16.75C13.5454 16.75 12.3991 15.6018 12.3991 14.1854C12.3991 12.7691 13.5454 11.6209 14.9593 11.6209C16.3733 11.6209 17.5196 12.7691 17.5196 14.1854ZM14.9593 15.7468C15.8202 15.7468 16.5181 15.0478 16.5181 14.1854C16.5181 13.3231 15.8202 12.6241 14.9593 12.6241C14.0985 12.6241 13.4006 13.3231 13.4006 14.1854C13.4006 15.0478 14.0985 15.7468 14.9593 15.7468Z"></path></svg>
                  <span class="ms-2">Shipping & Returns</span>
                </button>
              </h2>
              <div id="shippingCollapse" class="accordion-collapse collapse" data-bs-parent="#productAccordion">
                <div class="accordion-body px-0 py-3 text-muted small">
                  {%- archiveDetail shipping with name="shipping" %}
                  {{shipping|render|safe}}
                </div>
              </div>
            </div>
            <div class="accordion-item bg-transparent">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed px-0 bg-transparent text-dark fw-bold small text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#dimensionsCollapse">
                  <svg class="icon icon-accordion" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M18.9836 5.32852L14.6715 1.01638L1.01638 14.6715L5.32852 18.9836L18.9836 5.32852ZM15.3902 0.297691C14.9933 -0.0992303 14.3497 -0.0992303 13.9528 0.297691L0.297691 13.9528C-0.0992301 14.3497 -0.0992305 14.9932 0.297691 15.3902L4.60983 19.7023C5.00675 20.0992 5.65029 20.0992 6.04721 19.7023L19.7023 6.04721C20.0992 5.65029 20.0992 5.00675 19.7023 4.60983L15.3902 0.297691Z" fill-rule="evenodd"></path>
      <path d="M11.7863 2.67056C11.9848 2.4721 12.3065 2.4721 12.505 2.67056L14.4237 4.58927C14.6222 4.78774 14.6222 5.1095 14.4237 5.30796C14.2252 5.50642 13.9035 5.50642 13.705 5.30796L11.7863 3.38925C11.5878 3.19079 11.5878 2.86902 11.7863 2.67056Z"></path>
      <path d="M8.93891 5.36331C9.13737 5.16485 9.45914 5.16485 9.6576 5.36331L11.5763 7.28202C11.7748 7.48048 11.7748 7.80225 11.5763 8.00071C11.3779 8.19917 11.0561 8.19917 10.8576 8.00071L8.93891 6.082C8.74045 5.88354 8.74045 5.56177 8.93891 5.36331Z"></path>
      <path d="M6.24307 8.20742C6.44153 8.00896 6.76329 8.00896 6.96175 8.20742L8.88047 10.1261C9.07893 10.3246 9.07893 10.6464 8.88047 10.8448C8.68201 11.0433 8.36024 11.0433 8.16178 10.8448L6.24307 8.92611C6.0446 8.72765 6.0446 8.40588 6.24307 8.20742Z"></path>
      <path d="M3.37296 10.8776C3.57142 10.6791 3.89319 10.6791 4.09165 10.8776L6.01036 12.7963C6.20882 12.9948 6.20882 13.3165 6.01036 13.515C5.8119 13.7134 5.49013 13.7134 5.29167 13.515L3.37296 11.5963C3.1745 11.3978 3.1745 11.076 3.37296 10.8776Z"></path></svg>
                  <span class="ms-2">Dimensions</span>
                </button>
              </h2>
              <div id="dimensionsCollapse" class="accordion-collapse collapse" data-bs-parent="#productAccordion">
                <div class="accordion-body px-0 py-3 text-muted small">
                  {%- archiveDetail dimensions with name="dimensions" %}
                  {{dimensions|render|safe}}
                </div>
              </div>
            </div>
            <div class="accordion-item bg-transparent">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed px-0 bg-transparent text-dark fw-bold small text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#instructionsCollapse">
                  <svg class="icon icon-accordion" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10 5.2393L8.5149 3.77392C6.79996 2.08174 4.01945 2.08174 2.30451 3.77392C0.589562 5.4661 0.589563 8.2097 2.30451 9.90188L10 17.4952L17.6955 9.90188C19.4104 8.2097 19.4104 5.4661 17.6955 3.77392C15.9805 2.08174 13.2 2.08174 11.4851 3.77392L10 5.2393ZM10.765 3.06343C12.8777 0.978857 16.3029 0.978856 18.4155 3.06343C20.5282 5.148 20.5282 8.52779 18.4155 10.6124L10.72 18.2057C10.3224 18.5981 9.67763 18.5981 9.27996 18.2057L1.58446 10.6124C-0.528154 8.52779 -0.528154 5.14801 1.58446 3.06343C3.69708 0.978859 7.12233 0.978858 9.23495 3.06343L10 3.81832L10.765 3.06343Z" fill-rule="evenodd"></path></svg>
                  <span class="ms-2">Care Instructions</span>
                </button>
              </h2>
              <div id="instructionsCollapse" class="accordion-collapse collapse" data-bs-parent="#productAccordion">
                <div class="accordion-body px-0 py-3 text-muted small">
                  {%- archiveDetail instructions with name="instructions" %}
                  {{instructions|render|safe}}
                </div>
              </div>
            </div>
          </div>

          <!-- Social Share -->
          <div class="mt-4 pt-3 border-top">
            <span class="small text-muted me-3">Share:</span>
            <a href="#" class="text-dark me-3"><i class="bi bi-facebook"></i></a>
            <a href="#" class="text-dark me-3"><i class="bi bi-twitter-x"></i></a>
            <a href="#" class="text-dark"><i class="bi bi-pinterest"></i></a>
          </div>
        </div>
      </div>
    </div>

    <!-- FAQs Section -->
    <section class="mt-5 pt-5 border-top">
      <div class="row justify-content-center">
        <div class="col-lg-8">
          <h3 class="fw-bold mb-4 text-center">Frequently Asked Questions</h3>
          <div class="accordion accordion-flush" id="faqAccordion">
            {%- archiveList faqs with categoryId=14 limit=10 showContent=true %}
            {%- for faq in faqs %}
            <div class="accordion-item bg-transparent">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed px-0 bg-transparent text-dark fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#faq-{{forloop.Counter}}">
                  {{faq.Title}}
                </button>
              </h2>
              <div id="faq-{{forloop.Counter}}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body px-0 py-3 text-muted">
                  {{faq.Content|safe}}
                </div>
              </div>
            </div>
            {%- endfor %}
            {%- endarchiveList %}
          </div>
        </div>
      </div>
    </section>

    <!-- Related Products -->
    <section class="mt-5 pt-5 border-top">
      <h3 class="fw-bold mb-4">You may also like</h3>
      <div class="row row-cols-2 row-cols-md-4 g-4">
        {%- archiveList products with type="related" limit=4 %}
        {%- for item in products %}
        <div class="col">
          <div class="card product-card border-0 h-100 bg-transparent">
            <div class="position-relative overflow-hidden bg-light" style="aspect-ratio: 1/1;">
              <a href="{{item.Link}}">
                <img src="{{item.Thumb}}" class="card-img-top object-fit-cover h-100 w-100 transition-scale" alt="{{item.Title}}">
              </a>
            </div>
            <div class="card-body px-0 pt-3">
              <h6 class="card-title mb-1">
                <a href="{{item.Link}}" class="text-decoration-none text-dark hover-underline">{{item.Title}}</a>
              </h6>
              <div class="d-flex align-items-center">
                <span class="text-dark fw-bold me-2">${{priceFormat(item.Price)}}</span>

              </div>
            </div>
          </div>
        </div>
        {%- endfor %}
        {%- endarchiveList %}
      </div>
    </section>
  </div>

</main>
<script>
  var productId = '{% archiveDetail with name="Id" %}';
  var variantId = '{{sku.Id}}';
</script>
{% endblock %}