/* =====================================================================
   BYITALY STORE - product.css
   Card prodotto (miniature) + armonizzazione scheda prodotto standard
   ---------------------------------------------------------------------
   Tema:   byitaly (child di Classic) - PrestaShop 8.2.6
   Autore: Francesco Fiore - www.fiorefrancesco.com - Licenza MIT
   Riferimenti: ANALISI.md §7.3 (card minimali img 6)
   NOTA: la scheda-SERVIZIO ha stili propri in services.css.
         La scheda prodotto fisico non è nelle immagini -> Classic
         originale, qui solo armonizzazione via variabili.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. CARD PRODOTTO MINIMALE  [A]
   ---------------------------------------------------------------------
   Da img 6: immagine 1:1 su fondo neutro, nome su 2 righe, prezzo bold.
   NIENTE bottoni, cuori o badge in card (non visibili) -> il template
   override (FASE 7) rimuove il superfluo; qui lo stile.
--------------------------------------------------------------------- */
.product-miniature {
  background: transparent;
}
.product-miniature .thumbnail-container,
.product-miniature .ff-miniature {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  overflow: hidden;
  box-shadow: var(--ff-shadow-sm);
  transition: box-shadow var(--ff-transition), transform var(--ff-transition);
}
/* Hover [B - sobrio]: lift + ombra, leggero zoom immagine */
.product-miniature:hover .thumbnail-container,
.product-miniature:hover .ff-miniature {
  box-shadow: var(--ff-shadow-md);
  transform: translateY(-3px);
}

.product-miniature .product-thumbnail {
  display: block;
  aspect-ratio: 1 / 1;              /* riserva lo spazio -> CLS 0     */
  background: var(--ff-bg-soft);
  overflow: hidden;
}
.product-miniature .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.product-miniature:hover .product-thumbnail img { transform: scale(1.04); }

/* Corpo card: nome + prezzo, allineati a sinistra come da grafica */
.product-miniature .product-description {
  padding: 16px 18px 20px;
  text-align: left;
  background: #fff;
  box-shadow: none;
}
.product-miniature .product-title {
  margin: 0 0 10px;
  text-align: left;
}
.product-miniature .product-title a {
  font-size: 0.9375rem;             /* 15px */
  font-weight: 600;
  color: var(--ff-navy);
  line-height: 1.4;
  /* nome su max 2 righe con ellissi: altezza card uniforme in griglia */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(0.9375rem * 1.4 * 2);
}
.product-miniature .product-title a:hover { color: var(--ff-red); }

/* Prezzo  [A] - include il caso unit price "€48,00/m²" */
.product-miniature .product-price-and-shipping {
  text-align: left;
}
.product-miniature .price {
  font-size: 1.125rem;              /* 18px */
  font-weight: 700;
  color: var(--ff-navy);
}
/* Prezzo unitario nativo (unity): stessa riga, stesso peso, con "/"
   Il markup Classic lo mette in .unit-price; lo rendiamo parte del
   prezzo come in grafica ("€48,00/m²") */
.product-miniature .unit-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ff-navy);
  margin-left: 2px;
}
.product-miniature .unit-price::before { content: "/"; }

/* Elementi Classic non presenti nella grafica: nascosti via CSS quando
   l'override template non li rimuove già (fallback difensivo) */
.product-miniature .product-flags,          /* badge "Nuovo/Promo"     */
.product-miniature .variant-links,
.product-miniature .highlighted-informations {
  display: none;
}
/* Prezzo barrato: non visibile nelle immagini; se un giorno servissero
   promo, riattivare rimuovendo questa regola (dichiarato in analisi). */
.product-miniature .regular-price { display: none; }

/* ---------------------------------------------------------------------
   2. GRIGLIA LISTING
   ---------------------------------------------------------------------
   4 colonne desktop (img 6). Il Classic usa .products row/col:
   forziamo la griglia con gap coerente col token.
--------------------------------------------------------------------- */
#products .products,
.featured-products .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ff-gap);
}
#products .products > *,
.featured-products .products > * {
  width: auto;                       /* neutralizza le col-* Bootstrap  */
  max-width: 25%;
  padding: 0;
  margin: 0;
}

/* ---------------------------------------------------------------------
   3. SCHEDA PRODOTTO FISICO - SOLO ARMONIZZAZIONE
   ---------------------------------------------------------------------
   Non visibile nelle immagini => layout Classic ORIGINALE (regola
   confermata). Qui solo: font/colori dai token, prezzo navy, bottone
   add-to-cart già coperto da .btn-primary in variables.css.
--------------------------------------------------------------------- */
#product .h1, #product h1 { color: var(--ff-navy); }
#product .current-price,
#product .current-price-value {
  color: var(--ff-navy);
  font-weight: 700;
  font-size: 2rem;
}
#product .product-prices .tax-shipping-delivery-label {
  color: var(--ff-text-light);
  font-size: 0.8125rem;
}
#product .product-information { color: var(--ff-text); }
#product .tabs .nav-tabs .nav-link.active {
  color: var(--ff-navy);
  border-bottom: 3px solid var(--ff-navy);
}

/* ---------------------------------------------------------------------
   MINIATURE GALLERIA PRODOTTO - piu' piccole, 5 per riga
   ---------------------------------------------------------------------
   v2 - CORRETTO sul markup REALE (verificato via inspect):
     <div class="js-qv-mask mask">
       <ul class="product-images js-qv-product-images">
         <li class="thumb-container js-thumb-container">
           <picture><img class="thumb js-thumb ..." ...></picture>
         </li>
       </ul>
     </div>
   Il contenitore vero e' .js-qv-mask (non #product-images, che non
   esiste in questa build), e l'immagine e' avvolta in <picture>.
--------------------------------------------------------------------- */
.js-qv-mask.mask .product-images.js-qv-product-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.js-qv-mask.mask .thumb-container {
  flex: 0 0 calc(20% - 8px);  /* 5 per riga (100%/5 = 20%) */
  max-width: calc(20% - 8px);
  margin: 0;
}
.js-qv-mask.mask .thumb-container picture,
.js-qv-mask.mask .thumb-container picture img.thumb {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: var(--ff-radius-sm);
}

/* Su mobile: 4 per riga */
@media (max-width: 767.98px) {
  .js-qv-mask.mask .thumb-container {
    flex: 0 0 calc(25% - 8px);
    max-width: calc(25% - 8px);
  }
}


/* ---------------------------------------------------------------------
   IMMAGINE PRINCIPALE PRODOTTO - riempie il contenitore
   ---------------------------------------------------------------------
   Markup reale verificato:
     <div class="images-container js-images-container">
       <div class="product-cover">
         <picture><img class="js-qv-product-cover img-fluid" ...></picture>
         <div class="layer ..."><i class="zoom-in">...</i></div>
       </div>
       <div class="js-qv-mask mask">...</div>
     </div>
   <picture> e' inline di default: senza forzarlo a block+100% puo'
   lasciare spazio inutilizzato attorno all'immagine anche se questa
   ha gia' la classe Bootstrap "img-fluid".
--------------------------------------------------------------------- */
.images-container .product-cover {
  display: block;
  width: 100%;
}
.images-container .product-cover picture {
  display: block;
  width: 100%;
}
.images-container .product-cover picture img.js-qv-product-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ff-radius-lg);
}