/* ===================================================== */
/* 0. IMPORTAZIONE FONT (Nuova aggiunta per eleganza)    */
/* ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@400;700&display=swap');

/* Applicazione Font */
body, p, a, span, div, .btn {
    font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .product-title, .block-contact-title {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px; /* Leggera spaziatura chic */
}

/* ===================================================== */
/* 1. COLORI: I TUOI ATTUALI (ROSA SABBIA / CIPRIA)      */
/* ===================================================== */
a, .text-primary, .btn-link, .material-icons, i.material-icons {
    color: #c98d8d !important;
}

.btn-primary, .btn-primary:hover, 
.nav-pills .nav-link.active,
.pagination .current a,
.cart-summary-line .value,
.block-social li:hover,
.product-flags li.product-flag {
    background-color: #eddcd9 !important;
    border-color: #eddcd9 !important;
    color: #5a5a5a !important;
}

/* Arrotondiamo i bottoni per renderli più moderni */
.btn-primary, .btn {
    border-radius: 30px !important; 
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 20px;
}

/* Campi di input più dolci */
.form-control {
    border-radius: 8px;
    border: 1px solid #e1e1e1;
}

.product-price, .cart-summary-line .value {
    color: #c98d8d !important;
    font-family: 'Playfair Display', serif; /* Prezzo elegante */
    font-weight: 700;
}

.product-images > li.thumb-container .thumb.selected, 
.product-images > li.thumb-container .thumb:hover {
    border-color: #eddcd9 !important;
}

/* ===================================================== */
/* 2. STILE SCHEDA PRODOTTO (Miglioramento grafico)      */
/* ===================================================== */

/* Stile base della card prodotto (Desktop e Mobile) */
.product-miniature {
    background: #fff;
    border: 1px solid #f5f5f5 !important;
    border-radius: 10px !important; /* Angoli arrotondati */
    transition: all 0.3s ease;
    overflow: hidden; /* Assicura che l'immagine rispetti l'arrotondamento */
}

/* Ombra leggera quando non si tocca */
.product-miniature {
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); 
}

/* Effetto Hover (solo Desktop) */
@media (min-width: 769px) {
    .product-miniature:hover {
        box-shadow: 0 10px 20px rgba(0,0,0,0.08); /* Ombra più profonda */
        transform: translateY(-3px); /* Leggero sollevamento */
    }
}

/* ===================================================== */
/* 3. MOBILE: GRIGLIA "CSS GRID" (La tua logica intatta) */
/* ===================================================== */

@media (max-width: 768px) {
  
  /* IL CONTENITORE: Obbligato a dividersi in 2 frazioni uguali */
  #products .products, 
  .featured-products .products, 
  .product-accessories .products {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important; 
      gap: 10px !important; /* Spazio tra le card */
      margin: 0 !important;
      padding: 0 5px !important;
  }

  /* IL SINGOLO PRODOTTO: Resettiamo tutto e lasciamo fare alla griglia */
  #products .product-miniature, 
  .featured-products .product-miniature, 
  .product-accessories .product-miniature, 
  .product-miniature {
      width: auto !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
      /* MANTENIAMO LO STILE CARINO ANCHE QUI */
      border: 1px solid #f0f0f0 !important;
      border-radius: 8px !important; /* Manteniamo l'arrotondamento */
      box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important; /* Ombra piccolina */
  }
  
  /* Sistema le immagini */
  .product-miniature .thumbnail-container {
      margin-bottom: 5px !important;
      box-shadow: none !important;
      border: none !important;
      padding: 5px; /* Piccolo respiro per l'immagine */
  }
  
  .product-miniature .product-thumbnail img {
      width: 100% !important;
      height: auto !important;
      border-radius: 6px; /* Arrotonda anche l'immagine leggermente */
  }

  /* Testi piccoli e ordinati */
  .product-miniature .product-title {
      font-size: 12px !important; /* Leggermente più grande per leggibilità */
      padding: 0 5px;
      height: 34px;
      overflow: hidden;
      line-height: 1.2;
      text-align: center; /* Centra il testo su mobile che è più carino */
  }
  
  /* Prezzo centrato su mobile */
  .product-miniature .product-price-and-shipping {
      text-align: center;
      margin-bottom: 5px;
  }
  
  /* Nascondi elementi ingombranti */
  .product-miniature .product-flags,
  .product-miniature .highlighted-informations {
      display: none !important;
  }
}
/* ===================================================== */
/* 4. SPAZIATURA EXTRA PER DESKTOP (PC)                  */
/* ===================================================== */
@media (min-width: 769px) {
    .product-miniature {
        margin-bottom: 40px !important; /* Spinge giù la riga successiva */
        margin-left: 10px !important;   /* Un po' di aria anche ai lati se serve */
        margin-right: 10px !important;
    }
    
    /* Questo serve per evitare che l'ombra venga tagliata */
    #products .products, .featured-products .products {
        padding-bottom: 20px;
    }
}