/** 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) {
  .ai_gen_block_25759d3_cX3x39 {
  background-position: center top !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

.ai_gen_block_25759d3_cX3x39 .background-image {
  object-position: center top !important;
  object-fit: contain !important;
}

/* ========================================
   VIDEO HERO BLOCK - VIDEO CUSTOMIZATION
   Section ID: template--28066336538808__178370802040d99abd
   Block ID: template--28066336538808__178370802040d99abd__ai_gen_block_fc0fb80_ij6geq
   ======================================== */

/* TARGET: Video element inside the Video hero block */
#template--28066336538808__178370802040d99abd__ai_gen_block_fc0fb80_ij6geq video {
  /* ========== OBJECT-FIT (How the video fills its container) ==========
     OPTIONS:
     - cover: Fills the container, may crop the video (DEFAULT - recommended)
     - contain: Entire video visible, may have empty space
     - fill: Stretches video to fill container (may distort)
     - none: Video displays at original size
     - scale-down: Uses the smaller of contain or none
  */
  object-fit: cover !important;

  /* ========== OBJECT-POSITION (Where the video is positioned within its container) ==========
     COMMON VALUES:
     - center: Centers the video (DEFAULT)
     - center top: Centers horizontally, aligns to top
     - center bottom: Centers horizontally, aligns to bottom
     - left center: Aligns to left, centers vertically
     - right center: Aligns to right, centers vertically
     - top left, top right, bottom left, bottom right: Corner positions
     - Percentages: 50% 50% (center), 0% 0% (top-left), 100% 100% (bottom-right)
     - Pixel values: 10px 20px (10px from left, 20px from top)
  */
  object-position: center !important;

  /* ========== WIDTH & HEIGHT (Video resolution/sizing) ==========
     Set to 100% to fill the container, or use specific values:
     - 100%: Fills container width/height
     - auto: Maintains aspect ratio
     - Specific pixels: 1920px, 1080px, etc.
  */
  width: 100% !important;
  height: 100% !important;

  /* ========== DISPLAY & POSITIONING ==========
     Ensures video displays correctly within its container
  */
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  /* ========== ASPECT RATIO (Optional - maintains video proportions) ==========
     Uncomment to enforce a specific aspect ratio:
     - 16 / 9: Standard widescreen
     - 4 / 3: Standard TV
     - 1 / 1: Square
  */
  /* aspect-ratio: 16 / 9 !important; */
}

/* TARGET: Video container wrapper */
#template--28066336538808__178370802040d99abd__ai_gen_block_fc0fb80_ij6geq {
  /* ========== CONTAINER POSITIONING ==========
     Ensures the video container is positioned correctly
  */
  position: relative !important;
  overflow: hidden !important;

  /* ========== CONTAINER DIMENSIONS ==========
     Adjust these to control the overall size of the video hero section
     - width: 100% fills the full width
     - height: Set to desired height (e.g., 500px, 600px, 100vh for full viewport)
  */
  width: 100% !important;
  height: auto !important;
}

/* ========== RESPONSIVE ADJUSTMENTS ==========
   Uncomment and modify for different screen sizes
*/

/* Desktop - Large screens (1200px and up) */
@media (min-width: 1200px) {
  #template--28066336538808__178370802040d99abd__ai_gen_block_fc0fb80_ij6geq {
    /* Adjust height for desktop if needed */
    /* height: 600px !important; */
  }
}

/* Tablet - Medium screens (768px to 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  #template--28066336538808__178370802040d99abd__ai_gen_block_fc0fb80_ij6geq {
    /* Adjust height for tablet if needed */
    /* height: 500px !important; */
  }
}

/* Mobile - Small screens (below 768px) */
@media (max-width: 767px) {
  #template--28066336538808__178370802040d99abd__ai_gen_block_fc0fb80_ij6geq {
    /* Adjust height for mobile if needed */
    /* height: 400px !important; */
  }
}

/* Video featured section - desktop constraint */
@media (min-width: 750px) {
  #template--28066336538808__video_featured_46Q7Ha {
    max-width: 400px !important;
    width: 400px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #template--28066336538808__video_featured_46Q7Ha .video-featured-wrapper {
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  #template--28066336538808__video_featured_46Q7Ha .video-container {
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* ========== QUICK REFERENCE GUIDE ==========

TO CHANGE VIDEO FILL:
1. Find: object-fit: cover !important;
2. Change 'cover' to one of: contain, fill, none, scale-down

TO CHANGE VIDEO ALIGNMENT:
1. Find: object-position: center !important;
2. Change 'center' to one of:
   - center top (top center)
   - center bottom (bottom center)
   - left center (left side)
   - right center (right side)
   - Or use percentages: 50% 50%, 0% 0%, 100% 100%, etc.

TO CHANGE VIDEO SIZE:
1. Find: width: 100% !important; and height: 100% !important;
2. Adjust values as needed (100%, auto, or specific pixels)

TO CHANGE CONTAINER HEIGHT:
1. Uncomment the height property in the responsive sections
2. Set to desired value (e.g., 500px, 600px, 100vh)

TO CENTER THE VIDEO HORIZONTALLY:
1. The container already uses position: relative
2. Video uses position: absolute with top: 0, left: 0
3. object-position: center handles horizontal centering

========================================== */
}

/*---------------- 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){
  
}