/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 19:16 Unexpected "-"
Line 32:1 Expected identifier but found "%"
Line 34:0 Unexpected "{"
Line 34:1 Expected identifier but found "%"
Line 36:0 Unexpected "1."
Line 43:1 Expected identifier but found "%"
Line 45:0 Unexpected "{"
Line 45:1 Expected identifier but found "%"
... and 182 more hidden warnings

**/
{% comment %}
════════════════════════════════════════════════════════════════
HIDE OUT OF STOCK + UX OPTIMIZATIONS
Gruppo Catapano - Luxury Childrenswear Experience
════════════════════════════════════════════════════════════════

FEATURES:
1. Nascondi prodotti completamente esauriti
2. Mostra badge "Ultimi pezzi" se inventory < 5
3. Mostra badge "Nuova collezione" per prodotti recenti
4. Ordinamento intelligente (disponibili prima)
5. Quick view integrato

INSTALLAZIONE:
Vedi istruzioni dettagliate in fondo
════════════════════════════════════════════════════════════════
{% endcomment %}

{% comment %}
════════════════════════════════════════════════════════════════
1. HIDE OUT OF STOCK - Collection Template
════════════════════════════════════════════════════════════════

Posizione: sections/main-collection-product-grid.liquid
Oppure: snippets/product-card.liquid

Trova il loop dei prodotti e modifica così:
{% endcomment %}

{% for product in collection.products %}
  {% comment %} Calcola se prodotto è disponibile {% endcomment %}
  {% assign product_available = false %}
  {% assign low_stock = false %}
  {% assign total_inventory = 0 %}
  
  {% for variant in product.variants %}
    {% if variant.available %}
      {% assign product_available = true %}
    {% endif %}
    {% assign total_inventory = total_inventory | plus: variant.inventory_quantity %}
  {% endfor %}
  
  {% comment %} Se inventory totale < 5, mostra badge "Ultimi pezzi" {% endcomment %}
  {% if total_inventory > 0 and total_inventory < 5 %}
    {% assign low_stock = true %}
  {% endif %}
  
  {% comment %} SKIP prodotti non disponibili {% endcomment %}
  {% if product_available %}
    
    <div class="product-card gc-product-card" data-product-id="{{ product.id }}">
      
      {% comment %} Badge Container {% endcomment %}
      <div class="gc-badges">
        {% comment %} Nuovo Arrivo (prodotti < 30 giorni) {% endcomment %}
        {% assign days_since_published = 'now' | date: '%s' | minus: product.published_at | date: '%s' | divided_by: 86400 %}
        {% if days_since_published < 30 %}
          <span class="gc-badge gc-badge-new">Nuova Collezione</span>
        {% endif %}
        
        {% comment %} Ultimi Pezzi {% endcomment %}
        {% if low_stock %}
          <span class="gc-badge gc-badge-low-stock">Ultimi {{ total_inventory }} Pezzi</span>
        {% endif %}
        
        {% comment %} Sale/Sconto {% endcomment %}
        {% if product.compare_at_price > product.price %}
          {% assign discount_percent = product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price %}
          <span class="gc-badge gc-badge-sale">-{{ discount_percent }}%</span>
        {% endif %}
      </div>
      
      {% comment %} Immagine Prodotto {% endcomment %}
      <a href="{{ product.url }}" class="gc-product-image-link">
        {% if product.featured_image %}
          <img src="{{ product.featured_image | img_url: '600x' }}" 
               alt="{{ product.title }}" 
               loading="lazy"
               class="gc-product-image">
          
          {% comment %} Seconda immagine al hover {% endcomment %}
          {% if product.images[1] %}
            <img src="{{ product.images[1] | img_url: '600x' }}" 
                 alt="{{ product.title }}" 
                 loading="lazy"
                 class="gc-product-image-hover">
          {% endif %}
        {% endif %}
      </a>
      
      {% comment %} Info Prodotto {% endcomment %}
      <div class="gc-product-info">
        <h3 class="gc-product-title">
          <a href="{{ product.url }}">{{ product.title }}</a>
        </h3>
        
        <div class="gc-product-vendor">{{ product.vendor }}</div>
        
        <div class="gc-product-price">
          {% if product.compare_at_price > product.price %}
            <span class="gc-price-sale">{{ product.price | money }}</span>
            <span class="gc-price-compare">{{ product.compare_at_price | money }}</span>
          {% else %}
            <span class="gc-price">{{ product.price | money }}</span>
          {% endif %}
        </div>
        
        {% comment %} Swatch Colori {% endcomment %}
        {% if product.options contains 'Colore' or product.options contains 'Color' %}
          <div class="gc-color-swatches">
            {% for variant in product.variants limit: 5 %}
              {% if variant.available %}
                <span class="gc-swatch" 
                      style="background: {{ variant.option2 | downcase | replace: 'bianco', '#fff' | replace: 'nero', '#000' | replace: 'rosa', '#ffb6c1' | replace: 'blu', '#87ceeb' }};"
                      title="{{ variant.option2 }}"></span>
              {% endif %}
            {% endfor %}
            {% if product.variants.size > 5 %}
              <span class="gc-swatch-more">+{{ product.variants.size | minus: 5 }}</span>
            {% endif %}
          </div>
        {% endif %}
        
        {% comment %} Quick View Button {% endcomment %}
        <button type="button" 
                class="gc-quick-view-btn" 
                data-product-handle="{{ product.handle }}"
                aria-label="Quick View {{ product.title }}">
          Quick View
        </button>
      </div>
      
    </div>
    
  {% endif %}
  
{% endfor %}


{% comment %}
════════════════════════════════════════════════════════════════
2. CSS STYLING - Product Cards Premium
════════════════════════════════════════════════════════════════

Posizione: assets/theme.css oppure assets/custom.css
{% endcomment %}

<style>
/* ═══════════════════════════════════════════════════════════════ */
/* PRODUCT CARD LUXURY STYLE */
/* ═══════════════════════════════════════════════════════════════ */
.gc-product-card {
  position: relative;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.gc-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* ═══════════════════════════════════════════════════════════════ */
/* BADGES */
/* ═══════════════════════════════════════════════════════════════ */
.gc-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gc-badge {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.gc-badge-new {
  background: linear-gradient(135deg, #FFE66D 0%, #FFC857 100%);
  color: #2C3E50;
  box-shadow: 0 4px 12px rgba(255, 230, 109, 0.4);
}

.gc-badge-low-stock {
  background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.4);
}

.gc-badge-sale {
  background: linear-gradient(135deg, #FF6B6B 0%, #EE5A6F 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

/* ═══════════════════════════════════════════════════════════════ */
/* IMMAGINI - Doppia immagine hover */
/* ═══════════════════════════════════════════════════════════════ */
.gc-product-image-link {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #F8F8F8;
}

.gc-product-image,
.gc-product-image-hover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gc-product-image-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.gc-product-card:hover .gc-product-image {
  opacity: 0;
  transform: scale(1.05);
}

.gc-product-card:hover .gc-product-image-hover {
  opacity: 1;
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════ */
/* INFO PRODOTTO */
/* ═══════════════════════════════════════════════════════════════ */
.gc-product-info {
  padding: 1.25rem;
}

.gc-product-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  color: #2C3E50;
}

.gc-product-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.gc-product-title a:hover {
  color: #FFB6C1;
}

.gc-product-vendor {
  font-family: 'Poppins', sans-serif;
  font-size: 0.813rem;
  color: #8B8B8B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.gc-product-price {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.gc-price {
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #2C3E50;
}

.gc-price-sale {
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #FF6B6B;
}

.gc-price-compare {
  font-family: 'Poppins', sans-serif;
  font-size: 0.938rem;
  color: #8B8B8B;
  text-decoration: line-through;
}

/* ═══════════════════════════════════════════════════════════════ */
/* COLOR SWATCHES */
/* ═══════════════════════════════════════════════════════════════ */
.gc-color-swatches {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.gc-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px #E0E0E0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.gc-swatch:hover {
  transform: scale(1.2);
}

.gc-swatch-more {
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  color: #8B8B8B;
}

/* ═══════════════════════════════════════════════════════════════ */
/* QUICK VIEW BUTTON */
/* ═══════════════════════════════════════════════════════════════ */
.gc-quick-view-btn {
  width: 100%;
  padding: 0.875rem;
  background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
}

.gc-product-card:hover .gc-quick-view-btn {
  opacity: 1;
  transform: translateY(0);
}

.gc-quick-view-btn:hover {
  background: linear-gradient(135deg, #FFB6C1 0%, #FFE4E1 100%);
  color: #2C3E50;
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.4);
}

/* ═══════════════════════════════════════════════════════════════ */
/* RESPONSIVE */
/* ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .gc-quick-view-btn {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>


{% comment %}
════════════════════════════════════════════════════════════════
3. ORDINAMENTO INTELLIGENTE - Disponibili Prima
════════════════════════════════════════════════════════════════

Per ordinare prodotti disponibili prima degli esauriti,
usa Shopify metafields o modifica il sorting nativo:

OPZIONE 1 - Via Shopify Admin (più semplice):
Settings → Online Store → Preferences
→ "Product availability": "Hide out-of-stock products"

OPZIONE 2 - Sorting Custom (più controllo):
{% endcomment %}

{% assign available_products = collection.products | where: 'available', true %}
{% assign unavailable_products = collection.products | where: 'available', false %}

{% comment %} Mostra prima disponibili {% endcomment %}
{% for product in available_products %}
  {% comment %} Render product card {% endcomment %}
{% endfor %}

{% comment %} Poi mostra non disponibili (se vuoi) {% endcomment %}
{% for product in unavailable_products %}
  {% comment %} Render con overlay "Esaurito" {% endcomment %}
{% endfor %}


{% comment %}
════════════════════════════════════════════════════════════════
4. IMPOSTAZIONI SHOPIFY - Hide Out of Stock Nativo
════════════════════════════════════════════════════════════════

METODO PIÙ SEMPLICE (no code):

1. Shopify Admin → Settings
2. Online Store → Preferences
3. Scorri fino a "Product availability"
4. Seleziona: "Hide sold-out products from collection pages"
5. Salva

NOTA: Questo nasconde COMPLETAMENTE i prodotti esauriti.
Se preferisci mostrarli con badge "Esaurito", usa il codice sopra.
════════════════════════════════════════════════════════════════
{% endcomment %}


{% comment %}
════════════════════════════════════════════════════════════════
5. INVENTORY WARNINGS - Notifica Backend
════════════════════════════════════════════════════════════════

Per ricevere notifiche quando inventory < 5:

1. Shopify Admin → Settings → Notifications
2. Low inventory → Edit
3. Imposta soglia: 5 unità
4. Abilita email notifications

Questo ti avvisa automaticamente per riordinare stock.
════════════════════════════════════════════════════════════════
{% endcomment %}