/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:2 Unexpected "-"
Line 20:1 Expected identifier but found "%"
Line 22:0 Unexpected "{"
Line 22:1 Unexpected "{"
Line 22:3 Expected identifier but found "'component-price.css'"
Line 24:0 Unexpected "{"
Line 24:1 Expected identifier but found "%"
Line 26:20 Unexpected "{"
... and 219 more hidden warnings

**/
{% comment %}
  Custom Lens Collection Section
  - Pure Liquid, Scoped CSS, Vanilla JS
  - Features: Dynamic BG Tint, Advanced Tag Parsing, Sticky UI
{% endcomment %}

{{ 'component-price.css' | asset_url | stylesheet_tag }}

{%- style -%}
  /* --- Scoped Variables --- */
  #shopify-section-{{ section.id }} {
    --primary-color: {{ section.settings.primary_color }};
    --text-color: {{ section.settings.text_color }};
    --bg-color: {{ section.settings.bg_color }};
    --sidebar-width: 280px;
    --grid-gap: {{ section.settings.grid_gap }}px;
    --header-offset: {{ section.settings.header_padding }}px;
    transition: background-color 0.8s ease; /* Smooth Tint Transition */
  }

  /* --- HIDE SKIP TO CONTENT (User Request) --- */
  .skip-to-content-link, 
  .skip-link, 
  a[href="#MainContent"] {
    display: none !important;
  }

  /* --- Layout & Grid --- */
  .lens-collection-wrapper {
    padding-top: var(--header-offset);
    background-color: var(--bg-color); /* Dynamic Target */
    min-height: 100vh;
    padding-bottom: 80px;
  }

  .collection-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: 40px;
  }

  /* --- Mobile Layout Changes --- */
  @media screen and (max-width: 990px) {
    .collection-container {
      grid-template-columns: 1fr;
      padding: 0 10px;
    }
    .desktop-sidebar { display: none; }
  }

  /* --- Product Grid --- */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  @media screen and (max-width: 768px) {
    .product-grid {
      grid-template-columns: repeat(2, 1fr) !important; /* Strictly 2 Columns */
      gap: 10px;
    }
  }

  /* --- Product Card UI --- */
  .product-card {
    position: relative;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  
  .product-card:hover {
    transform: translateY(-5px);
  }

  .card-media {
    position: relative;
    width: 100%;
    padding-bottom: 125%; /* Aspect Ratio */
    overflow: hidden;
    background: #f4f4f4;
    border-radius: 12px; /* Soft corners */
  }

  .card-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.6s ease;
  }

  .img-secondary {
    opacity: 0;
    z-index: 1;
  }

  .product-card:hover .img-secondary {
    opacity: 1;
  }

  /* --- Badges (Bottom Placement) --- */
  .card-badges {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .badge {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
    letter-spacing: 0.5px;
  }

  .badge--sale { background-color: #D32F2F; }
  .badge--yearly { background-color: #1976D2; }

  /* --- Card Info --- */
  .card-info {
    padding: 12px 0;
    text-align: left;
    background: transparent;
  }

  .card-title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 5px 0;
    color: var(--text-color);
    text-decoration: none;
    display: block;
  }

  .price-container {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.95rem;
  }

  .price-regular { font-weight: 600; }
  .price-compare { text-decoration: line-through; color: #888; font-size: 0.85rem; }
  .price-sale { color: #D32F2F; font-weight: 700; }

  @media screen and (max-width: 768px) {
    .price-container {
      flex-direction: row; /* Keep standard pricing flow */
      flex-wrap: wrap;
    }
  }

  /* --- Sidebar Filters --- */
  .sidebar-content {
    position: sticky;
    top: calc(var(--header-offset) + 20px);
  }
  
  .active-filters-header {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .active-filter-pill {
    background: #e0e0e0;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
  }

  .filter-group {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 15px;
  }

  .filter-title {
    font-weight: 600;
    padding: 10px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .filter-title::after {
    content: '+';
    font-weight: 300;
  }

  .filter-group.open .filter-title::after {
    content: '-';
  }

  .filter-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 0;
    list-style: none;
  }

  .filter-group.open .filter-list {
    max-height: 300px; /* Arbitrary large height */
    overflow-y: auto;
  }

  .filter-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    cursor: pointer;
  }

  .filter-checkbox {
    margin-right: 10px;
    accent-color: var(--primary-color);
  }

  /* --- Color Swatches --- */
  .swatch-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
  }

  .color-swatch-input { display: none; }
  
  .color-swatch-label {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s, border-color 0.2s;
    position: relative;
  }

  .color-swatch-label:hover { transform: scale(1.1); }
  
  .color-swatch-input:checked + .color-swatch-label {
    border-color: var(--text-color);
    transform: scale(1.15);
  }

  /* Color Mappings */
  .swatch-blue { background-color: #81C7D4; }
  .swatch-brown { background-color: #8D6E63; }
  .swatch-green { background-color: #81C784; }
  .swatch-grey { background-color: #B0BEC5; }
  .swatch-violet { background-color: #9575CD; }
  .swatch-default { background-color: #eee; }

  /* --- Mobile Sticky Bottom Bar --- */
  .mobile-toolbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 15px;
  }

  @media screen and (max-width: 990px) {
    .mobile-toolbar { display: flex; justify-content: space-between; gap: 10px; }
    .btn-toolbar {
      flex: 1;
      padding: 12px;
      border: 1px solid #000;
      background: #000;
      color: #fff;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 12px;
      cursor: pointer;
    }
    .btn-toolbar.outline { background: #fff; color: #000; }
  }

  /* --- Mobile Drawer --- */
  .mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
  }

  .mobile-drawer.active {
    opacity: 1;
    visibility: visible;
  }

  .drawer-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80vh;
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    overflow-y: auto;
  }

  .mobile-drawer.active .drawer-content {
    transform: translateY(0);
  }

  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  
  /* Tint Classes */
  .bg-tint-blue { background-color: #f0f8ff !important; }
  .bg-tint-brown { background-color: #fff8f5 !important; }
  .bg-tint-green { background-color: #f1fff3 !important; }
  .bg-tint-grey { background-color: #f7f7f7 !important; }
  .bg-tint-violet { background-color: #fbf7ff !important; }

{%- endstyle -%}

<div id="LensCollection" class="lens-collection-wrapper">
  
  <div class="collection-container">
    <aside class="desktop-sidebar">
      <div class="sidebar-content" id="FilterContainerDesktop">
        {% render 'filter-logic', section: section, context: 'desktop' %}
      </div>
    </aside>

    <div class="main-content">
      <div id="ProductGridContainer">
        <ul class="product-grid">
          {%- for product in section.settings.collection.products -%}
            {% assign lazy_load = false %}
            {%- if forloop.index > 2 -%}
              {%- assign lazy_load = true -%}
            {%- endif -%}
            
            <li class="grid-item">
              <div class="product-card">
                <a href="{{ product.url }}" class="card-link">
                  <div class="card-media">
                    <img
                      src="{{ product.featured_media | image_url: width: 533 }}"
                      alt="{{ product.featured_media.alt | escape }}"
                      class="img-main"
                      {% if lazy_load %}loading="lazy"{% endif %}
                      width="{{ product.featured_media.width }}"
                      height="{{ product.featured_media.height }}"
                    >
                    {%- if product.media[1] != nil -%}
                      <img
                        src="{{ product.media[1] | image_url: width: 533 }}"
                        alt="{{ product.media[1].alt | escape }}"
                        class="img-secondary"
                        loading="lazy"
                        width="{{ product.media[1].width }}"
                        height="{{ product.media[1].height }}"
                      >
                    {%- endif -%}

                    <div class="card-badges">
                      {%- for tag in product.tags -%}
                        {%- if tag == 'tag__sale_SALE' -%}
                           <span class="badge badge--sale">Sale</span>
                        {%- endif -%}
                      {%- endfor -%}
                      
                      {% comment %} Logic for Yearly Badge based on parsed tag {% endcomment %}
                      {%- for tag in product.tags -%}
                         {%- if tag contains 'Duration_Yearly' or tag contains 'duration-yearly' -%}
                           <span class="badge badge--yearly">Yearly</span>
                         {%- endif -%}
                      {%- endfor -%}
                    </div>
                  </div>
                </a>

                <div class="card-info">
                  <a href="{{ product.url }}" class="card-title">{{ product.title }}</a>
                  
                  <div class="price-container">
                    {%- if product.compare_at_price > product.price -%}
                      <span class="price-sale">{{ product.price | money }}</span>
                      <span class="price-compare">{{ product.compare_at_price | money }}</span>
                    {%- else -%}
                      <span class="price-regular">{{ product.price | money }}</span>
                    {%- endif -%}
                  </div>
                  
                  </div>
              </div>
            </li>
          {%- endfor -%}
        </ul>
      </div>
    </div>
  </div>

  <div class="mobile-toolbar">
    <button class="btn-toolbar outline" onclick="toggleDrawer()">Filter & Sort</button>
  </div>

  <div class="mobile-drawer" id="MobileDrawer">
    <div class="drawer-content">
      <div class="drawer-header">
        <h3>Filters</h3>
        <span onclick="toggleDrawer()" style="cursor:pointer; font-size: 24px;">&times;</span>
      </div>
      <div id="FilterContainerMobile">
        {% render 'filter-logic', section: section, context: 'mobile' %}
      </div>
      <div style="margin-top: 20px;">
        <button class="btn-toolbar" style="width:100%" onclick="toggleDrawer()">View Results</button>
      </div>
    </div>
  </div>

</div>

{% comment %}
  EMBEDDED SNIPPET: Filter Logic
  We simulate Parsing Logic here using standard Liquid Tags loops 
  to categorize tags into specific accordion groups.
{% endcomment %}
{%- capture filter_markup -%}
  
  <div class="active-filters-header" id="ActiveFilters{{ context }}">
    </div>

  <form class="filter-form">
    
    <div class="filter-group open">
      <div class="filter-title" onclick="toggleAccordion(this)">Eye Color</div>
      <div class="filter-list swatch-list">
        {% assign color_tags = "Blue,Brown,Green,Grey,Violet" | split: ',' %}
        {% for color in color_tags %}
          {% assign tag_handle = 'Color_' | append: color %}
          <input 
            type="checkbox" 
            name="constraint" 
            value="{{ tag_handle }}" 
            id="Filter-{{ color }}-{{ context }}"
            class="color-swatch-input"
            data-color-name="{{ color | downcase }}"
            onchange="handleFilterChange(this)"
          >
          <label 
            for="Filter-{{ color }}-{{ context }}" 
            class="color-swatch-label swatch-{{ color | downcase }}"
            title="{{ color }}"
          ></label>
        {% endfor %}
      </div>
    </div>

    <div class="filter-group">
      <div class="filter-title" onclick="toggleAccordion(this)">Tones</div>
      <ul class="filter-list">
        {% for tag in collection.all_tags %}
          {% if tag contains 'Tone_' %}
            <li class="filter-item">
              <input type="checkbox" name="constraint" value="{{ tag }}" class="filter-checkbox" onchange="handleFilterChange(this)">
              <span>{{ tag | remove: 'Tone_' | replace: '-', ' ' }}</span>
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </div>

    <div class="filter-group">
      <div class="filter-title" onclick="toggleAccordion(this)">Diameter</div>
      <ul class="filter-list">
        {% for tag in collection.all_tags %}
          {% if tag contains 'Diameter_' %}
            <li class="filter-item">
              <input type="checkbox" name="constraint" value="{{ tag }}" class="filter-checkbox" onchange="handleFilterChange(this)">
              <span>{{ tag | remove: 'Diameter_' }}</span>
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </div>

    <div class="filter-group">
      <div class="filter-title" onclick="toggleAccordion(this)">Base Curve</div>
      <ul class="filter-list">
        {% for tag in collection.all_tags %}
          {% if tag contains 'Curve_' %}
            <li class="filter-item">
              <input type="checkbox" name="constraint" value="{{ tag }}" class="filter-checkbox" onchange="handleFilterChange(this)">
              <span>{{ tag | remove: 'Curve_' }}</span>
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </div>

    <div class="filter-group">
      <div class="filter-title" onclick="toggleAccordion(this)">Duration</div>
      <ul class="filter-list">
        {% for tag in collection.all_tags %}
          {% if tag contains 'Duration_' %}
            <li class="filter-item">
              <input type="checkbox" name="constraint" value="{{ tag }}" class="filter-checkbox" onchange="handleFilterChange(this)">
              <span>{{ tag | remove: 'Duration_' }}</span>
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </div>

  </form>
{%- endcapture -%}

{% comment %} 
  We need to register the snippet logic so we can output it in Desktop/Mobile containers 
  Since we can't define snippets inside a section, we use a trick or just output the capture twice.
{% endcomment %}

<script>
  // Hydrate Filters (Quick hack to inject captured liquid into DOM spots)
  document.getElementById('FilterContainerDesktop').innerHTML = `{{ filter_markup }}`;
  document.getElementById('FilterContainerMobile').innerHTML = `{{ filter_markup }}`;
</script>

<script>
  /**
   * Vanilla JS Filter & UI Engine
   */
  
  // 1. Accordion Logic
  function toggleAccordion(element) {
    element.parentElement.classList.toggle('open');
  }

  // 2. Mobile Drawer Logic
  function toggleDrawer() {
    const drawer = document.getElementById('MobileDrawer');
    drawer.classList.toggle('active');
    document.body.style.overflow = drawer.classList.contains('active') ? 'hidden' : '';
  }

  // 3. Filter Handling Logic
  function handleFilterChange(input) {
    // Collect all checked inputs
    const desktopForm = document.querySelector('#FilterContainerDesktop .filter-form');
    const mobileForm = document.querySelector('#FilterContainerMobile .filter-form');
    
    // Sync Mobile and Desktop inputs if needed (optional but good UX)
    const val = input.value;
    const checked = input.checked;
    
    const checkboxes = document.querySelectorAll(`input[value="${val}"]`);
    checkboxes.forEach(box => box.checked = checked);

    // Apply Background Tint based on Color Selection
    applyDynamicTint();

    // Build URL Query
    const activeTags = [];
    document.querySelectorAll('input[name="constraint"]:checked').forEach(cb => {
      // Avoid duplicates
      if (!activeTags.includes(cb.value)) activeTags.push(cb.value);
    });

    // Update Active Filters UI
    updateActiveFilterPills(activeTags);

    const newUrl = new URL(window.location.href);
    if (activeTags.length > 0) {
      newUrl.searchParams.set('constraint', activeTags.join('+'));
    } else {
      newUrl.searchParams.delete('constraint');
    }

    // AJAX Fetch Section
    fetchSection(newUrl.toString());
    
    // Update Browser History
    window.history.pushState({path: newUrl.toString()}, '', newUrl.toString());
  }

  // 4. Dynamic Background Tint Logic
  function applyDynamicTint() {
    const section = document.getElementById('LensCollection');
    
    // Reset classes
    section.classList.remove('bg-tint-blue', 'bg-tint-brown', 'bg-tint-green', 'bg-tint-grey', 'bg-tint-violet');
    
    // Check active colors
    const activeColors = document.querySelectorAll('.color-swatch-input:checked');
    
    if (activeColors.length === 1) {
      // Only tint if exactly ONE color is selected (avoids muddy colors)
      const colorName = activeColors[0].getAttribute('data-color-name');
      if(colorName) {
        section.classList.add(`bg-tint-${colorName}`);
      }
    }
  }

  // 5. Active Pills UI
  function updateActiveFilterPills(tags) {
    const containers = document.querySelectorAll('.active-filters-header');
    
    const html = tags.map(tag => {
      // Clean tag name for display
      let cleanName = tag.replace(/(Color_|Diameter_|Curve_|Tone_|Duration_)/g, '').replace('-', ' ');
      return `<span class="active-filter-pill" onclick="removeFilter('${tag}')">${cleanName} &times;</span>`;
    }).join('');

    containers.forEach(c => c.innerHTML = html);
  }

  // 6. Remove Filter Helper
  window.removeFilter = function(tagVal) {
    const checkboxes = document.querySelectorAll(`input[value="${tagVal}"]`);
    checkboxes.forEach(cb => {
      cb.checked = false;
      handleFilterChange(cb);
    });
  }

  // 7. AJAX Fetch Implementation
  async function fetchSection(url) {
    const sectionId = '{{ section.id }}';
    const fetchUrl = `${url}${url.includes('?') ? '&' : '?'}section_id=${sectionId}`;

    try {
      const response = await fetch(fetchUrl);
      const text = await response.text();
      
      const parser = new DOMParser();
      const html = parser.parseFromString(text, 'text/html');

      // Update Grid
      const newGrid = html.getElementById('ProductGridContainer');
      document.getElementById('ProductGridContainer').innerHTML = newGrid.innerHTML;

    } catch (e) {
      console.error('Filter Error:', e);
    }
  }
</script>

{% schema %}
{
  "name": "Lens Collection Advanced",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Default Background",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "primary_color",
      "label": "Primary Accent",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#333333"
    },
    {
      "type": "range",
      "id": "grid_gap",
      "min": 10,
      "max": 50,
      "step": 5,
      "unit": "px",
      "label": "Grid Gap",
      "default": 30
    },
    {
      "type": "range",
      "id": "header_padding",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Header Padding Offset",
      "default": 80,
      "info": "Use this to push content down if you have a fixed transparent header."
    }
  ],
  "presets": [
    {
      "name": "Lens Collection Advanced"
    }
  ]
}
{% endschema %}