/* =========================================================================
   product-card.css - scheda prodotto (.product-col): layout + aspetto
   -------------------------------------------------------------------------
   Caricato DOPO style.css e responsive.css (vedi headimp.php): le regole qui
   dentro hanno percio' l'ultima parola a parita' di specificita'. Non
   modificare style.css/responsive.css per la card: quei file sono in cache
   60 giorni sul CDN, questo arriva con ?v=assetVersion() e si invalida
   bumpando quella stringa in lib/functions.php.

   PARTE 1 - I TRE DIFETTI DI LAYOUT CHE QUESTO FILE CORREGGE

   1. IMMAGINI DI DIMENSIONE DIVERSA E NON CENTRATE
      .imgmax era position:absolute con il solo max-height e un padding-top
      asimmetrico: ogni foto si presentava con la sua taglia e fuori asse.
      Qui il box immagine ha altezza fissa per breakpoint e la foto lo
      riempie con object-fit:contain, quindi stessa impronta per tutti.

   2. CARD CHE "VANNO A CAPO" LASCIANDO BUCHI
      La riga della griglia era float-based (Bootstrap 3): due card di
      altezza diversa si incastrano e la terza scivola. Le righe marcate
      .product-grid (piu' il fallback :has() per quelle non marcate)
      diventano flex, cosi' ogni card ha l'altezza della piu' alta della riga.

   3. BADGE "nuovo/usato" SULLA RIGA SBAGLIATA
      .usedRight era un float dentro .price che non lo conteneva, e finiva
      sulla riga del titolo. Ora e' un'etichetta fissa all'angolo della foto,
      e il titolo e' clampato a 3 righe cosi' le caption sono tutte uguali.

   PARTE 2 - ASPETTO

      Fascia disponibilita' verde fluo a tutta larghezza -> chip con pallino
      e colori desaturati; camioncino.png (raster, scalettato) -> chip
      testuale; foto su fondo neutro con zoom leggero all'hover; card con
      ombra invece del bordo grigio marcato; prezzo di listino in grigio.
   ========================================================================= */

:root{
	--mw-card-img-h: 190px;   /* altezza del box immagine */
	--mw-card-badge-h: 32px;  /* striscia in basso riservata a chip sped./rate */
	--mw-card-price: 18px;
	--mw-card-title: 13px;
	--mw-card-chip: 10.5px;
	--mw-card-radius: 0;      /* angoli della card: il resto del sito e' a 90 gradi */
	--mw-card-chip-radius: 3px; /* pill/badge: appena smussati, non a pillola */
	--mw-card-pill-h: 22px;     /* altezza comune delle due pill sulla foto */
	--mw-card-pill-font: 11px;
	/* Font delle micro-etichette della card (pill e chip). Non Abel: vedi
	   il commento su .btn-cart. */
	--mw-card-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--mw-card-border: #f0f0f0;
	--mw-card-photo-bg: #fafafa;
	--mw-card-gap: 12px;
}

@media (min-width: 768px){
	:root{ --mw-card-img-h: 210px; --mw-card-price: 20px; --mw-card-title: 13.5px; --mw-card-chip: 11px; }
}
@media (min-width: 992px){
	:root{ --mw-card-img-h: 220px; --mw-card-price: 21px; }
}
@media (min-width: 1200px){
	:root{ --mw-card-img-h: 240px; --mw-card-price: 22px; --mw-card-title: 14px; }
}

/* --- Riga della griglia ------------------------------------------------- */

.row.product-grid,
.row.equal{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

/* I clearfix di Bootstrap diventerebbero due flex item vuoti. */
.row.product-grid:before, .row.product-grid:after,
.row.equal:before, .row.equal:after{
	display: none;
}

.row.product-grid > [class*="col-"],
.row.equal > [class*="col-"]{
	float: none;
	display: flex;
	min-width: 0;                 /* senza questo il testo nowrap sfonda la colonna */
	margin-bottom: 12px;
	margin-bottom: var(--mw-card-gap);
}

.row.product-grid > [class*="col-"] > .product-col,
.row.equal > [class*="col-"] > .product-col{
	width: 100%;
}

/* Righe non marcate (pagine che non sono state toccate): stesso trattamento
   dove il browser supporta :has(). Dove non lo supporta la regola viene
   scartata e resta il comportamento float di prima. */
.row:has(> [class*="col-"] > .product-col){
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.row:has(> [class*="col-"] > .product-col) > [class*="col-"]{
	float: none;
	display: flex;
	min-width: 0;
	margin-bottom: 12px;
	margin-bottom: var(--mw-card-gap);
}
.row:has(> [class*="col-"] > .product-col) > [class*="col-"] > .product-col{
	width: 100%;
}

/* --- La card ------------------------------------------------------------ */

.product-col{
	position: relative;          /* ancora per l'etichetta nuovo/usato */
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	margin-bottom: 0;
	background: #fff;
	border: 1px solid #f0f0f0;
	border: 1px solid var(--mw-card-border);
	border-radius: 0;
	border-radius: var(--mw-card-radius);
	box-shadow: 0 1px 3px rgba(0,0,0,.05);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.product-col:hover{
	border-color: #e2e2e2;
	box-shadow: 0 10px 26px rgba(0,0,0,.13);
	transform: translateY(-2px);
}

/* --- Box immagine ------------------------------------------------------- */

.product-col .image{
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	min-width: 0;
	height: 190px;                    /* fallback senza custom properties */
	height: var(--mw-card-img-h);
	min-height: 0;
	max-height: none;
	padding: 6px 8px 32px;
	padding: 6px 8px var(--mw-card-badge-h);
	border: 0;
	background: #fafafa;              /* i prodotti bianchi non "galleggiano" */
	background: var(--mw-card-photo-bg);
	/* NON overflow:hidden: il bottone "Acquista" e' figlio di questo box ma va
	   mostrato sotto, sulla riga della disponibilita', e verrebbe tagliato.
	   Il clipping che serviva (contenere lo zoom dell'immagine all'hover) si e'
	   spostato sul link qui sotto. */
	overflow: visible;
}

/* Il bottone "Acquista" (e' hidden-xs: su mobile non c'e').
   Nel markup sta dentro .image, ma qui non viene mostrato sulla foto: sopra
   la copriva, e la striscia in basso e' gia' occupata da spedizione (sx) e
   rate/promo (dx). Va invece sulla riga della disponibilita', a destra del
   chip "Pronta consegna", che e' l'unico spazio orizzontale libero in ogni
   card.

   Essendo dentro .image non lo si puo' riordinare come fratello di
   .dispoblock: si posiziona rispetto alla card, alla quota dove quella riga
   comincia (fondo della foto + il margine superiore del chip). Regge perche'
   l'altezza della foto e' fissa (--mw-card-img-h) e .dispoblock e' sempre
   emesso da imagebox.php, anche a magazzino vuoto.
   L'inline style="z-index:-100" di imagebox.php lo manderebbe dietro alla
   card: l'!important e' l'unico modo di scavalcare un inline. */
.product-col .image > .cart-button{
	position: absolute;
	top: calc(var(--mw-card-img-h) + 9px);
	right: 10px;
	left: auto;
	z-index: 200 !important;
	flex: 0 0 auto;
	width: auto;
	padding: 0;
	text-align: left;
}

/* Stessa pill di .usedRight: altezza, raggio, bordo, ombra e metriche del
   testo sono volutamente identici, cosi' i due angoli della foto si leggono
   come una coppia. Se cambi uno dei due, cambia anche l'altro.

   Il font NON e' l'Abel del resto del sito: Abel e' un condensed disegnato per
   i titoli e sotto i 12px, in maiuscolo, chiude troppo le lettere (la "O" e la
   "U" di ACQUISTA/NUOVO diventano la stessa macchia). Solo per queste due
   etichette si passa allo stack di sistema, che a 11px resta nitido.

   L'altezza e' fissa e uguale per entrambe (--mw-card-pill-h) invece di
   dipendere dal padding: il bottone contiene anche l'icona del carrello, piu'
   alta del testo, e senza altezza imposta le due pill risultavano di due
   misure diverse ai lati della stessa foto. */
.product-col .btn-cart,
.product-col .caption .price .usedRight{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	height: var(--mw-card-pill-h);
	margin: 0;
	padding: 0 9px;
	border: 1px solid rgba(0,0,0,.18);
	border-radius: 3px;
	border-radius: var(--mw-card-chip-radius);
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-family: var(--mw-card-ui-font);
	font-size: 11px;
	font-size: var(--mw-card-pill-font);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .2px;
	text-transform: uppercase;
	white-space: nowrap;
}

.product-col .btn-cart{
	gap: 5px;
	opacity: .92;
}
.product-col .btn-cart > .fa{ font-size: 11px; line-height: 1; }
.product-col:hover .btn-cart{ opacity: 1; }

/* Il clipping dello zoom sta qui, non su .image. Il link resta position:static
   di proposito: un elemento con overflow non taglia i discendenti assoluti il
   cui containing block gli e' esterno, quindi i chip spedizione/promo, che si
   posizionano su .image, continuano a vedersi anche se nel markup sono dentro
   questo link. Dargli position:relative li taglierebbe. */
.product-col .image > a{
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	overflow: hidden;
}

.product-col .image .imgmax,
.product-col .image .img-responsive{
	position: static;
	z-index: auto;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: center;
	transition: transform .25s ease;
}
.product-col:hover .image .imgmax{ transform: scale(1.035); }

/* --- Striscia bassa della foto: spedizione a sinistra, rate/promo a destra
   E' riservata sempre (padding-bottom del box) anche quando la card non ha
   badge, altrimenti le foto avrebbero altezze utili diverse. -------------- */

.product-col .image .freeship,
.product-col .image .hot{
	position: absolute;
	bottom: 5px;
	z-index: 2;
	margin: 0;
	padding: 0;
	line-height: 1;
	text-align: left;
}
.product-col .image .freeship{ left: 8px; }
.product-col .image .hot{ right: 8px; font-size: 0; }

/* Il camioncino .png e' un raster scalettato: al suo posto un chip di testo.
   Il blocco .freeship lo emette imagebox.php solo quando international!=1,
   quindi la stringa italiana fissa va bene. */
.product-col .image .freeship img{ display: none; }
.product-col .image .freeship:after{
	content: "Spedizione gratis";
	font-family: var(--mw-card-ui-font);
	display: inline-block;
	padding: 3px 8px;
	border-radius: 3px;
	border-radius: var(--mw-card-chip-radius);
	background: #eef6ff;
	color: #14509b;
	font-size: 10.5px;
	font-size: var(--mw-card-chip);
	font-weight: 700;
	white-space: nowrap;
}

.product-col .image .hot strong{
	display: inline-block;
	font-family: var(--mw-card-ui-font);
	padding: 3px 8px;
	border-radius: 3px;
	border-radius: var(--mw-card-chip-radius);
	background: #f2f2f2;
	font-size: 10.5px;
	font-size: var(--mw-card-chip);
	font-weight: 700;
	white-space: nowrap;
}
/* lo span ha color:green inline: qui dentro serve il testo neutro del chip */
.product-col .image .hot strong span{
	padding: 0;
	background: none;
	color: #3d3d3d !important;
	font-size: inherit;
}
/* promo.png (39x45) e bf.jpg sono raster verticali: ridotti all'altezza della
   striscia diventavano larghi 19px, cioe' illeggibili. Stessa cura del
   camioncino: si nasconde l'immagine e si scrive il chip.
   Serve :has() perche' .hot ospita due contenuti diversi a seconda del caso
   (<strong>paga a rate</strong> oppure <img>), e solo il secondo va sostituito.
   Dove :has() non c'e', l'immagine resta come prima: si perde il restyle,
   non l'informazione. */
.product-col .image .hot:has(img) img{ display: none; }
.product-col .image .hot:has(img):after{
	content: "Promo";
	display: inline-block;
	font-family: var(--mw-card-ui-font);
	padding: 3px 8px;
	border-radius: 3px;
	border-radius: var(--mw-card-chip-radius);
	background: #fdecec;
	color: #b3261e;
	font-size: 10.5px;
	font-size: var(--mw-card-chip);
	font-weight: 700;
	letter-spacing: .2px;
	white-space: nowrap;
}

@media (max-width: 767px){
	.product-col .image .freeship:after{ content: "Sped. gratis"; padding: 2px 6px; }
	.product-col .image .hot strong,
	.product-col .image .hot:has(img):after{ padding: 2px 6px; }
}

/* --- Disponibilita' (e banda IVA sul sito EN): chip col pallino ---------- */

/* Alto quanto la pill "Acquista", che ora gli sta a destra sulla stessa riga:
   l'altezza e' la stessa variabile, altrimenti i due non si allineano.
   Il max-width lascia libera la fascia destra occupata dal bottone. */
.product-col .dispoblock{
	display: inline-flex;
	align-items: center;
	align-self: flex-start;       /* altrimenti il flex column lo stira */
	flex: 0 0 auto;
	width: auto;
	max-width: calc(100% - 130px);
	height: 22px;
	height: var(--mw-card-pill-h);
	min-height: 0;
	max-height: none;
	margin: 9px 10px 0;
	padding: 3px 9px 3px 7px;
	border-radius: 3px;
	border-radius: var(--mw-card-chip-radius);
	font-family: var(--mw-card-ui-font);
	font-size: 11px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: .2px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-col .dispoblock:before{
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 5px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

/* il markup EN mette font-size:small inline sul testo IVA: qui non serve */
.product-col .dispoblock span{ font-size: 1em !important; }

/* Le classi colore arrivano da imagebox.php; qui si desaturano. */
.product-col .dispoblock.green{      background: #e6f7ec; color: #14803a; }
.product-col .dispoblock.yellow{     background: #fff4d6; color: #8a5a00; }
.product-col .dispoblock.red{        background: #fdeaea; color: #b3261e; }
.product-col .dispoblock.lightblue{  background: #e4f6fb; color: #06627a; }
.product-col .dispoblock.greyBack{   background: #f0f0f0; color: #555;    }

/* --- Caption: prezzo, titolo -------------------------------------------- */

.product-col .caption{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 8px 10px 12px;
}

.product-col .caption .price{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	min-width: 0;
	padding: 0 0 6px;
	font-size: 20px;
	font-size: var(--mw-card-price);
	font-weight: 700;
	line-height: 1.15;
	color: #FF0000;
}

.product-col .caption .price .price-new{
	min-width: 0;
	padding-right: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Prezzo di listino barrato: piu' piccolo e grigio, non nero pieno, cosi'
   la gerarchia listino / scontato si legge senza rileggere. formatpricewithiva()
   lo avvolge in uno <span style="color:black">, va scavalcato. */
.product-col .caption .price del{
	font-size: .62em;
	font-weight: 400;
	color: #9a9a9a !important;
}
.product-col .caption .price span[style*="color:black"]{ color: #9a9a9a !important; }

/* Rate su piu' righe (oggi disattivate, ma se tornano non spezzano il flex) */
.product-col .caption .price .rate{
	flex: 1 0 100%;
	color: #000;
	font-size: 12px;
}
.product-col .caption .price .rate br{ display: none; }

/* --- Etichetta nuovo / ex-demo / usato ----------------------------------
   Fissa in alto a destra sulla foto. Prima era un float dentro .price che,
   non essendo contenuto, finiva sulla riga del titolo; tenerlo in linea col
   prezzo non regge sotto i 400px (coi prezzi a 4 cifre andava a capo solo su
   alcune card). All'angolo sta sempre nello stesso punto. ----------------- */

.product-col .caption .price .usedRight{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 200;                /* .image ha z-index:100 inline: va scavalcato */
	float: none;
}

/* Sfondo dell'etichetta: bianco per il nuovo, giallo per usato/ex-demo
   (la classe .yellowBackUsed la mette gia' imagebox.php). */
.product-col .usedRight:not(.yellowBackUsed){ background: #fff; }
.product-col .usedRight.yellowBackUsed{ background: #ffe14d; }

/* --- Titolo -------------------------------------------------------------- */

.product-col .caption h5{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: 13px;
	font-size: var(--mw-card-title);
	line-height: 1.4;
	/* Lo spazio riservato e' sempre quello del titolo piu' lungo, quindi ogni
	   riga in piu' e' bianco sprecato in fondo a quasi tutte le card. Due righe
	   bastano alla grande maggioranza dei nomi prodotto; i pochi piu' lunghi si
	   troncano con l'ellissi. Era 3. */
	min-height: 2.8em;               /* 2 righe: caption tutte alte uguale */
	font-weight: 400;
}

/* Il link del titolo porta color:#1c1c1c inline da imagebox.php: serve al
   tema vecchio, dove questo foglio non viene caricato. Per l'hover qui
   l'!important e' l'unico modo di scavalcarlo. */
.product-col .caption h5 a{
	color: #1c1c1c;
	text-decoration: none;
}
.product-col .caption h5 a:hover,
.product-col .caption h5 a:focus{
	color: #FF0000 !important;
	text-decoration: none;
}

/* =========================================================================
   CARD STRETTE: bottone "Acquista" a tutta larghezza in fondo alla card
   -------------------------------------------------------------------------
   Deve restare IN FONDO AL FILE: sovrascrive regole base definite sopra con
   la stessa specificita', e in CSS a parita' vince l'ultima. (Il chip
   disponibilita' ridotto a "P" su iPhone era proprio questo: l'override
   mobile stava prima della regola base.)

   Sulla riga "Pronta consegna" chip + bottone chiedono ~240px di card.
   Misurato col tema nuovo su home e griglia categoria:
     < 768px   (telefoni, 2 colonne)      card 135-158px -> non ci stanno
     768-991   (tablet verticale)         card ~345px    -> ok sulla riga
     992-1199  (iPad orizz., 4 colonne)   card ~213px    -> non ci stanno
     >= 1200                              card ~262px    -> ok sulla riga
   Nelle due fasce strette il bottone scende in fondo alla card.

   Il bottone e' dentro .image nel markup. Per portarlo in fondo alla card,
   qui .image smette di essere position:relative e il containing block
   diventa .product-col. Tutto cio' che si ancorava alla foto va quindi
   riagganciato: i chip della striscia bassa e l'overlay .checked vengono
   messi al fondo della foto con top = altezza foto + translateY(-100%), che
   funziona qualunque sia la loro altezza.
   ========================================================================= */
@media (max-width: 767px), (min-width: 992px) and (max-width: 1199px){
	:root{ --mw-card-cta-h: 28px; }

	.product-col .image{ position: static; }

	.product-col .image .freeship,
	.product-col .image .hot{
		top: calc(var(--mw-card-img-h) - 5px);
		bottom: auto;
		transform: translateY(-100%);
	}
	.product-col .image .checked{
		top: var(--mw-card-img-h);
		bottom: auto;
		transform: translateY(-100%);
	}

	.product-col .image > .cart-button{
		top: auto;
		bottom: 10px;
		left: 10px;
		right: 10px;
	}
	.product-col .btn-cart{
		width: 100%;
		height: 28px;
		height: var(--mw-card-cta-h);
	}

	/* spazio in fondo alla caption per il bottone: altezza + 10 sotto + 8 d'aria */
	.product-col .caption{ padding-bottom: calc(var(--mw-card-cta-h) + 18px); }

	/* il bottone non e' piu' sulla riga del chip: il chip la ha tutta */
	.product-col .dispoblock{ max-width: calc(100% - 20px); }
}

/* Solo telefoni. */
@media (max-width: 767px){
	/* Bersaglio touch: 28px e' poco per un dito. */
	:root{ --mw-card-cta-h: 32px; }

	/* Il markup ha .cart-button con class hidden-xs: sotto i 768px Bootstrap lo
	   nasconde con display:none!important, e col tema vecchio su mobile il
	   bottone non c'e' mai stato. Qui lo si mostra: addToCart() sta in
	   js/custom.js, caricato su ogni pagina a prescindere dal viewport. */
	.product-col .image > .cart-button.hidden-xs{ display: block !important; }

	/* Striscia bassa della foto: su una card da ~140px "Sped. gratis" e
	   "paga a rate" insieme non ci stanno e il secondo copre il primo.
	   "paga a rate" diventa "A rate": imagebox.php lo emette solo per il sito
	   italiano (international!=1), quindi la stringa fissa e' corretta. */
	.product-col .image .hot strong span{ font-size: 0 !important; }
	.product-col .image .hot strong span:after{
		content: "A rate";
		font-size: 10.5px;
		font-size: var(--mw-card-chip);
	}
}