/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 19:6 Unexpected "'product-layout'"
Line 21:1 Expected identifier but found "%"
Line 23:0 Unexpected "{"
Line 23:1 Expected identifier but found "%"
Line 23:37 Unexpected "{"
Line 23:38 Expected identifier but found "%"
... and 284 more hidden warnings

**/
{% include 'product-content.zipifypages', contentprt: 'header' %}

{% comment %}
  The 'product-layout' section is used to compile a string of settings that 
  are then parsed and used to build the layout.
{% endcomment %}

{% capture pdp_layout_section_full %}{% section 'product-layout' %}{% endcapture %}

{% comment %}Extract pdp_settings schema string and pdp_meta html{% endcomment %}
{% assign pdp_layout_pieces = pdp_layout_section_full | split: '[[pdp_meta]]' %}
{% assign pdp_layout_section = pdp_layout_pieces[0] | append: pdp_layout_pieces[2] %}
{% assign pdp_meta_html = pdp_layout_pieces[1] %}
{{ pdp_layout_section }}

{% assign pdp_settings = pdp_layout_section | split: '[[[' %}
{% assign pdp_settings = pdp_settings[1] | split: ']]]' %}
{% assign pdp_settings = pdp_settings[0] %}

{% comment %}Parse the pdp_settings objstr into variables{% endcomment %}
{% capture gallery_style %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'gallery_style' %}{% endcapture %}
{% capture gallery_width %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'gallery_width' %}{% endcapture %}
{% capture scroll_image_width %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'scroll_image_width' %}{% endcapture %}
{% capture pdp_content_width %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'pdp_content_width' %}{% endcapture %}
{% capture thumbnail_placement %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'thumbnail_placement' %}{% endcapture %}
{% capture thumbs_to_show %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'thumbs_to_show' %}{% endcapture %}
{% capture pdp_meta_max_width %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'pdp_meta_max_width' %}{% endcapture %}
{% capture pdp_meta_alignment %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'pdp_meta_alignment' %}{% endcapture %}
{% capture image_zoom_enable %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'image_zoom_enable' %}{% endcapture %}
{% capture pdp_tabs_below %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'pdp_tabs_below' %}{% endcapture %}
{% capture allow_transparent_pngs %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'allow_transparent_pngs' %}{% endcapture %}

{% capture block_order %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'block_order' %}{% endcapture %}
{% assign block_order = block_order | split: ',' %}
{% capture highlights_display %}{% include 'cfn-objstr', objstr: pdp_settings, key: 'highlights_display' %}{% endcapture %}

{% comment %}Initialize product vars{% endcomment %}
{%- assign template_object = product -%}
{%- assign selected_variant = product.selected_variant | default: product.first_available_variant | default: product.variants.first -%}
{% include 'onyx-fn-variant-price', variant: selected_variant %}

{% comment %}Initialize width values and classes{% endcomment %}
{%- assign content_width_full = content_width_full | default: 1920 -%}
{%- assign content_width_page = content_width_page | default: 1200 -%}
{% assign content_width_px = content_width_full %}
{% if section.settings.content_width == 'page-width' %}
  {% assign content_width_px = content_width_page %}
{% endif %}

{% assign images_width = gallery_width | prepend: 'large-up--' %}
{% assign details_width = 'large-up--one-half' %}
{% assign img_width_px = content_width_px | divided_by: 2 %}

{% case gallery_width %}
  {% when 'two-thirds' %}
    {% assign details_width = 'large-up--one-third' %}
    {% assign img_width_px = content_width_px | times: 2 | divided_by: 3 %}
  {% when 'three-quarters' %}
    {% assign details_width = 'large-up--one-quarter' %}
    {% assign img_width_px = content_width_px | times: 3 | divided_by: 4 %}
{% endcase %}

<div class="product-detail-wrap product-single {{ pdp_content_width }} pt-0" 
  id="ProductSection-product-details" 
  data-section-id="product-details"
  data-section-type="product"
  data-images-style="{{ gallery_style }}"
  data-scroll-image-width="{{ scroll_image_width }}"
  data-zoom="{{ image_zoom_enable }}"
  data-advanced-variant-images="{{ settings.advanced_variant_images_enable }}"
  data-tabs-below-images="{{ pdp_tabs_below }}"
  {% if settings.app_wh_enable and wh_customer_tag %}
  data-wh="true"
  data-wh-show-retail="{{ settings.app_wh_retail_prices_show }}"
  {% endif %}
  data-enable-history-state="true">

  {% capture variant_form_class %}product-form product-form-product-variants-form{% endcapture %}

  {% form 'product', product, class: variant_form_class, data-section: section.id, data-productid: product.id, data-loop-product-id: product.id %}

  {% comment %}=== MOBILE HEADER (Title + Reviews Above Image) ==={% endcomment %}
  <div class="mobile-pdp-header">
    <h1 class="mobile-pdp-header__title">{{ product.title }}</h1>
    <div class="mobile-pdp-header__reviews">
      {% comment %}Find the existing Yotpo widget from the main content and clone it{% endcomment %}
      <div class="yotpo-mobile-clone"></div>
    </div>
  </div>

  <div class="grid-new grid--equal-height">	

    <div class="grid-item grid-item--product-images product-images medium--one-half {{ images_width }}">
      {% include 'pdp-product-gallery' %}
    </div>

    {%- if gallery_style == 'scroll' -%}
      <div class="grid-item grid-item--scroll-featured-image">
        {% include 'responsive_image' with product.images[0], img_class: 'product-featured-img', cropping: false, img_size: img_width_px, lazyload: false %}
      </div> 
    {%- endif -%}

    <div class="grid-item grid-item--pdp-meta medium--one-half {{ details_width }}">
      <div class="pdp-meta-wrap {% if gallery_style == 'scroll' %}sticky{% endif %}">
      
        {{ pdp_meta_html }}

        <div class="pdp-meta pdp-meta__add_to_cart_form">
          {% comment %}LOOP WIDGET CODE STARTS{% endcomment %}
          {% assign template_exists = false %}
          {% capture template_content %}
            {% render 'loop-subscriptions', type: 'product-widget', product: product %}
          {% endcapture %}

          {% if template_content contains 'Rendering loop-subscriptions' %}
            {% assign template_exists = true %}
          {% endif %}

          {% if template_exists %}
            {% render 'loop-subscriptions', type: 'product-widget', product: product %}
          {% endif %}
          {% comment %}LOOP WIDGET CODE ENDS{% endcomment %}

          {% section 'product-virtual-options' %}
          {% section 'product-variants-form' %}
        </div>

        {% comment %}Include product_tabs after so that description auto-hide CSS can work{% endcomment %}
        {% if block_order contains 'product_tabs' and pdp_tabs_below == 'false' %}
          {% section 'product-tabs' %}
        {% endif %}

      </div>
      
      {% comment %}Buy With Prime Widget{% endcomment %}
      <style>
      .bwp-widget-and-separator-container {
        display: flex;
        flex-direction: column-reverse;
      }
      .or-separator {
        text-align: center;
        display: none;
      }
      .bwp-widget-loaded ~ .or-separator {
        display: flex;
        align-items: center;
        text-align: center;
        margin-top:6px;
      }
      .bwp-widget-loaded ~ .or-separator::before {
        margin-right:.5em;
      }
      .bwp-widget-loaded ~ .or-separator::after {
        margin-left:.5em;
      }
      .bwp-widget-loaded ~ .or-separator::after, 
      .bwp-widget-loaded ~ .or-separator::before {
        content: "";
        border-bottom: 1px solid black;
        flex: 1;
      }
      </style>
      <div class="bwp-widget-and-separator-container">
        <script defer src='https://code.buywithprime.amazon.com/default.variant.selector.shopify.js'></script>
        <script async fetchpriority='high' src='https://code.buywithprime.amazon.com/bwp.v1.js'></script>
        {% if product.sku %}
          <div id="amzn-buy-now" data-site-id="g0hwyima0m" data-widget-id="w-fjwkwxLAnM7NBY3ucdIHT8" data-sku="{{product.sku}}"></div>
        {% else %}
          <div id="amzn-buy-now" data-site-id="g0hwyima0m" data-widget-id="w-fjwkwxLAnM7NBY3ucdIHT8" data-sku="{{product.selected_or_first_available_variant.sku}}"></div>
        {% endif %}
        <span class="or-separator">OR</span>
      </div>
    </div>

    {% if block_order contains 'product_tabs' and pdp_tabs_below == 'true' %}
      <div class="grid-item grid-item--pdp-meta pdp-tabs-below content-width">
        {% section 'product-tabs' %}
      </div>
    {% endif %}

  </div>
  {% endform %}
  
  {% comment %}=== MOBILE OPTIMIZATION START ==={% endcomment %}
  <div class="mobile-sticky-cta" id="mobile-sticky-cta">
    <div class="mobile-sticky-cta__content">
      <div class="mobile-sticky-cta__info">
        <span class="mobile-sticky-cta__title">{{ product.title | truncate: 30 }}</span>
        <div class="mobile-sticky-cta__price-wrapper">
          {%- if selected_variant.compare_at_price > selected_variant.price -%}
            <span class="mobile-sticky-cta__price--compare">{{ selected_variant.compare_at_price | money }}</span>
          {%- endif -%}
          <span class="mobile-sticky-cta__price">{{ selected_variant.price | money }}</span>
        </div>
      </div>
      <button type="button" class="btn mobile-sticky-cta__button" onclick="scrollToAddToCart()">
        Add to Cart
      </button>
    </div>
  </div>

  <style>
  /* Hide mobile header on desktop */
  .mobile-pdp-header { display: none; }
  .mobile-sticky-cta { display: none; }
  
  @media screen and (max-width: 749px) {
    
    /* === HIDE ANNOUNCEMENT BAR COMPLETELY === */
    .announcement-bar,
    [class*="promo-bar"],
    .header-announcement,
    [data-section-type*="announcement"],
    [id*="shopify-section-announcement"] {
      display: none !important;
      height: 0 !important;
      min-height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      visibility: hidden !important;
    }
    
    /* === MOBILE HEADER (Title + Reviews Above Image) === */
    .mobile-pdp-header {
      display: block !important;
      background: #FFF9F5;
      padding: 0.75rem 1rem !important;
      margin: 0 !important;
    }
    
    .mobile-pdp-header__title {
      font-size: 1.25rem !important;
      font-weight: 600 !important;
      line-height: 1.25 !important;
      margin: 0 0 0.5rem 0 !important;
      padding: 0 !important;
      color: #333 !important;
    }
    
    .mobile-pdp-header__reviews {
      display: flex;
      align-items: center;
      margin: 0 !important;
      min-height: 20px;
    }
    
    /* Force reviews to display - Yotpo - more compact */
    .yotpo-mobile-clone,
    .yotpo-mobile-clone .yotpo,
    .yotpo-mobile-clone .yotpo-display-wrapper,
    .yotpo-mobile-clone .standalone-bottomline,
    .yotpo-mobile-clone .yotpo-bottomline {
      display: block !important;
      visibility: visible !important;
      margin: 0 !important;
    }
    
    .yotpo-mobile-clone .yotpo-bottomline {
      display: inline-block !important;
    }
    
    .yotpo-mobile-clone .yotpo-stars,
    .yotpo-mobile-clone .rating-star,
    .yotpo-mobile-clone .text-m {
      display: inline-block !important;
      visibility: visible !important;
    }
    
    /* Make review stars more compact */
    .yotpo-mobile-clone .rating-star {
      font-size: 14px !important;
    }
    
    .yotpo-mobile-clone .text-m {
      font-size: 13px !important;
    }
    
    /* Hide ALL duplicate titles in main content */
    .pdp-meta h1,
    .pdp-meta .product-title,
    .pdp-meta-wrap h1,
    .product-single__title {
      display: none !important;
    }
    
    /* Hide duplicate Yotpo reviews in main content */
    .grid-item--pdp-meta .yotpo.bottomLine,
    .pdp-meta .yotpo.bottomLine,
    .pdp-meta-wrap .yotpo.bottomLine {
      display: none !important;
    }
    
    /* But show Yotpo reviews in mobile header */
    .mobile-pdp-header .yotpo.bottomLine {
      display: block !important;
    }
    
    /* === IMAGE SIZING === */
    .product-images,
    .grid-item--product-images {
      max-height: 50vh !important;
      height: 50vh !important;
      overflow: hidden !important;
      margin-bottom: 0.5rem !important;
      position: relative;
      z-index: 1;
    }
    
    .product-images img,
    .grid-item--product-images img,
    .product-featured-img {
      max-height: 48vh !important;
      height: auto !important;
      width: 100% !important;
      object-fit: contain !important;
    }
    
    /* Push FAQ buttons below image */
    .product-faqs,
    [class*="faq"],
    .pdp-faqs {
      margin-top: 1rem !important;
      position: relative !important;
      z-index: 2 !important;
    }
    
    /* Control chat widget positioning */
    #gorgias-web-messenger-container,
    .gorgias-chat-widget,
    [id*="chat"],
    iframe[title*="chat" i] {
      bottom: 80px !important;
      z-index: 999 !important;
    }
    
    /* === CONTENT LAYOUT === */
    .pdp-meta-wrap {
      padding: 0 !important;
      position: relative;
      z-index: 1;
    }
    
    /* Clear space around content */
    .grid-item--pdp-meta {
      position: relative;
      z-index: 1;
      padding-bottom: 2rem;
    }
    
    /* Make price prominent */
    .product-price,
    .price-container,
    .pdp-meta .price {
      font-size: 1.75rem !important;
      font-weight: 700 !important;
      margin: 0 0 1rem 0 !important;
      padding: 0 1rem !important;
      display: block !important;
    }
    
    /* Product description */
    .pdp-meta .product-description,
    .pdp-meta p,
    .pdp-meta ul {
      padding: 0 1rem !important;
      margin-bottom: 1rem !important;
      font-size: 0.95rem !important;
    }
    
    /* Purchase section */
    .pdp-meta__add_to_cart_form {
      padding: 0 1rem 2rem 1rem !important;
      margin-top: 1.5rem !important;
      clear: both;
    }
    
    /* Add to cart button - make it prominent and clear */
    .pdp-meta__add_to_cart_form button[type="submit"],
    .pdp-meta__add_to_cart_form .btn--add-to-cart,
    button.add-to-cart {
      width: 100% !important;
      padding: 16px !important;
      font-size: 18px !important;
      font-weight: 700 !important;
      margin: 1rem 0 !important;
      position: relative !important;
      z-index: 10 !important;
    }
    
    /* === STICKY CTA BAR === */
    .mobile-sticky-cta {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: white;
      border-top: 2px solid #ddd;
      padding: 10px 15px;
      z-index: 9999;
      box-shadow: 0 -3px 10px rgba(0,0,0,0.15);
    }
    
    .mobile-sticky-cta.visible { display: block !important; }
    
    .mobile-sticky-cta__content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    
    .mobile-sticky-cta__info {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }
    
    .mobile-sticky-cta__title {
      font-size: 12px;
      font-weight: 500;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .mobile-sticky-cta__price-wrapper {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .mobile-sticky-cta__price--compare {
      font-size: 13px;
      color: #999;
      text-decoration: line-through;
    }
    
    .mobile-sticky-cta__price {
      font-size: 17px;
      font-weight: 700;
      color: #D4A5A5;
    }
    
    .mobile-sticky-cta__button {
      flex-shrink: 0;
      padding: 10px 20px;
      background-color: #D4A5A5;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    
    body { padding-bottom: 70px !important; }
  }
  </style>

  <script>
  (function() {
    function initMobile() {
      if (window.innerWidth > 749) return;
      
      // Force header optimization on product pages
      function optimizeHeader() {
        var body = document.body;
        if (!body.classList.contains('template-product')) {
          body.classList.add('template-product');
        }
        
        // Force announcement bar to hide/shrink with !important
        var announcementBars = document.querySelectorAll('.announcement-bar, [class*="promo-bar"], .header-announcement, [data-section-type*="announcement"]');
        announcementBars.forEach(function(bar) {
          bar.style.setProperty('display', 'none', 'important'); // Hide completely
          // bar.style.setProperty('max-height', '30px', 'important'); // Or use this to shrink
          // bar.style.setProperty('overflow', 'hidden', 'important');
          bar.style.setProperty('padding', '0.25rem 0.5rem', 'important');
          bar.style.setProperty('font-size', '0.75rem', 'important');
        });
        
        // Force header to be compact with !important
        var headers = document.querySelectorAll('.site-header, header.header, .header-wrapper');
        headers.forEach(function(header) {
          header.style.setProperty('padding', '0.25rem 0.5rem', 'important');
          header.style.setProperty('min-height', '50px', 'important');
          header.style.setProperty('max-height', '50px', 'important');
          header.style.setProperty('height', '50px', 'important');
        });
        
        // Force logo to be small with !important
        var logos = document.querySelectorAll('.site-header .logo, .site-header__logo, .site-header img, .logo img, .header__logo img');
        logos.forEach(function(logo) {
          logo.style.setProperty('max-height', '35px', 'important');
          logo.style.setProperty('height', '35px', 'important');
          logo.style.setProperty('max-width', '120px', 'important');
          logo.style.setProperty('width', 'auto', 'important');
        });
        
        // Force icons to be small
        var icons = document.querySelectorAll('.site-header .icon, .site-header svg, .header__icons svg');
        icons.forEach(function(icon) {
          icon.style.setProperty('width', '20px', 'important');
          icon.style.setProperty('height', '20px', 'important');
        });
      }
      
      // Run immediately
      optimizeHeader();
      
      // Run again after delays to override theme JS
      setTimeout(optimizeHeader, 100);
      setTimeout(optimizeHeader, 500);
      setTimeout(optimizeHeader, 1000);
      setTimeout(optimizeHeader, 2000);
      
      // Watch for DOM changes and reapply
      var observer = new MutationObserver(optimizeHeader);
      observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['style', 'class']
      });
      
      // Clone Yotpo reviews to mobile header
      function cloneYotpoReviews() {
        var originalYotpo = document.querySelector('.pdp-meta__reviews .yotpo.bottomLine');
        var mobileClone = document.querySelector('.yotpo-mobile-clone');
        
        if (originalYotpo && mobileClone && !mobileClone.hasChildNodes()) {
          var clonedYotpo = originalYotpo.cloneNode(true);
          mobileClone.appendChild(clonedYotpo);
          
          // Make the cloned widget visible
          var displayWrapper = clonedYotpo.querySelector('.yotpo-display-wrapper');
          if (displayWrapper) {
            displayWrapper.style.visibility = 'visible';
            displayWrapper.style.display = 'block';
          }
          
          // Trigger Yotpo to refresh the cloned widget
          if (window.yotpo && window.yotpo.refreshWidgets) {
            window.yotpo.refreshWidgets();
          }
        }
      }
      
      // Try immediately and after delays
      cloneYotpoReviews();
      setTimeout(cloneYotpoReviews, 500);
      setTimeout(cloneYotpoReviews, 1500);
      
      // Sticky bar functionality
      var stickyBar = document.getElementById('mobile-sticky-cta');
      var addToCartSection = document.querySelector('.pdp-meta__add_to_cart_form');
      
      if (!stickyBar || !addToCartSection) return;
      
      var hasScrolled = false;
      
      function checkScroll() {
        var rect = addToCartSection.getBoundingClientRect();
        if (rect.top < -100 && !hasScrolled) {
          hasScrolled = true;
          stickyBar.classList.add('visible');
        } else if (rect.top > -100 && rect.top < window.innerHeight && hasScrolled) {
          hasScrolled = false;
          stickyBar.classList.remove('visible');
        }
      }
      
      window.scrollToAddToCart = function() {
        addToCartSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
        setTimeout(function() {
          stickyBar.classList.remove('visible');
          hasScrolled = false;
        }, 600);
      };
      
      var ticking = false;
      window.addEventListener('scroll', function() {
        if (!ticking) {
          window.requestAnimationFrame(function() {
            checkScroll();
            ticking = false;
          });
          ticking = true;
        }
      }, {passive: true});
      
      setTimeout(checkScroll, 1000);
    }
    
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initMobile);
    } else {
      initMobile();
    }
  })();
  </script>
  {% comment %}=== MOBILE OPTIMIZATION END ==={% endcomment %}

</div>

{% section 'product-extra-blocks' %}

{% unless product == empty %}
  <script type="application/json" id="ProductJson-product-details">
    {% include 'product-json' %}
  </script>
{% endunless %}

{% include 'product-content.zipifypages', contentprt: 'footer' %}