/** Shopify CDN: Minification failed

Line 60:0 Unexpected "<"
Line 61:0 Comments in CSS use "/* ... */" instead of "//"
Line 62:0 Comments in CSS use "/* ... */" instead of "//"
Line 67:4 Comments in CSS use "/* ... */" instead of "//"
Line 70:4 Comments in CSS use "/* ... */" instead of "//"
Line 75:4 Comments in CSS use "/* ... */" instead of "//"
Line 80:4 Comments in CSS use "/* ... */" instead of "//"
Line 85:4 Comments in CSS use "/* ... */" instead of "//"
Line 90:4 Comments in CSS use "/* ... */" instead of "//"
Line 95:4 Comments in CSS use "/* ... */" instead of "//"
... and 10 more hidden warnings

**/
/*-----------------------------------------------------------------------------/
/ Custom Theme CSS
/-----------------------------------------------------------------------------*/
/*---------------- Global Custom CSS -------------------*/
/* Custom Order Form - Product Dropdown Styling */
.ai-gen-product-dropdown {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewbox="0 0 12 8"><path fill="%23333" d="M1 1l5 5 5-5"></path></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 35px;
}

.ai-gen-product-dropdown:hover {
  border-color: #999;
}

.ai-gen-product-dropdown:focus {
  outline: none;
  border-color: #286ec1;
  box-shadow: 0 0 0 3px rgba(40, 110, 193, 0.1);
}

.ai-gen-product-dropdown option {
  padding: 8px;
  background-color: #fff;
  color: #000;
}

.ai-gen-product-dropdown option:checked {
  background-color: #286ec1;
  color: #fff;
}

<script>
// Convert Product Input Field to Dropdown in Custom Order Form
// Uses multiple selector strategies to find the product field
(function() {
  'use strict';
  
  function convertProductInputToDropdown() {
    // Strategy 1: Look for inputs with 'product' in the name attribute
    let productInputs = document.querySelectorAll('input[name*="product" i]');
    
    // Strategy 2: If not found, look for inputs with 'product' in placeholder
    if (productInputs.length === 0) {
      productInputs = document.querySelectorAll('input[placeholder*="product" i]');
    }
    
    // Strategy 3: If still not found, look for inputs with 'artwork' in placeholder
    if (productInputs.length === 0) {
      productInputs = document.querySelectorAll('input[placeholder*="artwork" i]');
    }
    
    // Strategy 4: Look for inputs with 'art' in placeholder
    if (productInputs.length === 0) {
      productInputs = document.querySelectorAll('input[placeholder*="art" i]');
    }
    
    // Strategy 5: Look for inputs with 'type' in name (for "Artwork Type")
    if (productInputs.length === 0) {
      productInputs = document.querySelectorAll('input[name*="type" i]');
    }
    
    // Strategy 6: Look for inputs with data-product attribute
    if (productInputs.length === 0) {
      productInputs = document.querySelectorAll('input[data-product], input[data-field="product"]');
    }
    
    // Strategy 7: Look for inputs in form fields with product-related labels
    if (productInputs.length === 0) {
      const labels = document.querySelectorAll('label');
      for (let label of labels) {
        if (label.textContent.toLowerCase().includes('product') || 
            label.textContent.toLowerCase().includes('artwork') ||
            label.textContent.toLowerCase().includes('art medium')) {
          const input = label.nextElementSibling;
          if (input && input.tagName === 'INPUT') {
            productInputs = [input];
            break;
          }
        }
      }
    }
    
    if (productInputs.length === 0) return;
    
    productInputs.forEach(function(inputField) {
      // Skip if already converted
      if (inputField.dataset.converted === 'true') return;
      
      // Create the dropdown select element
      const selectDropdown = document.createElement('select');
      selectDropdown.className = 'ai-gen-product-dropdown';
      selectDropdown.name = inputField.name || 'product';
      selectDropdown.id = inputField.id || 'product-dropdown-' + Math.random().toString(36).substr(2, 9);
      
      // Copy attributes from input to select
      if (inputField.required) {
        selectDropdown.required = true;
      }
      if (inputField.disabled) {
        selectDropdown.disabled = true;
      }
      if (inputField.className) {
        selectDropdown.className += ' ' + inputField.className;
      }
      
      // Copy data attributes
      for (let attr of inputField.attributes) {
        if (attr.name.startsWith('data-')) {
          selectDropdown.setAttribute(attr.name, attr.value);
        }
      }
      
      // Create default option
      const defaultOption = document.createElement('option');
      defaultOption.value = '';
      defaultOption.textContent = 'Select an artwork type';
      defaultOption.disabled = true;
      defaultOption.selected = true;
      selectDropdown.appendChild(defaultOption);
      
      // Create options for the two products
      const option1 = document.createElement('option');
      option1.value = 'Cloisonné Sand Art';
      option1.textContent = 'Cloisonné Sand Art';
      selectDropdown.appendChild(option1);
      
      const option2 = document.createElement('option');
      option2.value = 'Oil Painting';
      option2.textContent = 'Oil Painting';
      selectDropdown.appendChild(option2);
      
      // Replace the input with the select
      inputField.parentNode.replaceChild(selectDropdown, inputField);
      selectDropdown.dataset.converted = 'true';
    });
  }
  
  // Run on page load
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', convertProductInputToDropdown);
  } else {
    convertProductInputToDropdown();
  }
  
  // Also run after short delays to catch dynamically loaded forms
  setTimeout(convertProductInputToDropdown, 300);
  setTimeout(convertProductInputToDropdown, 800);
  setTimeout(convertProductInputToDropdown, 1500);
  
  // Watch for dynamic content changes
  if (window.MutationObserver) {
    const observer = new MutationObserver(function(mutations) {
      convertProductInputToDropdown();
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }
})();
</script>

/*---------------- Custom CSS for only desktop -------------------*/
@media (min-width: 1025px) {
  
}

/*---------------- Custom CSS for tablet, mobile -------------------*/
@media (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only tablet -------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only mobile -------------------*/
@media (max-width: 767px){
  
}