/* ============================================================
   Catalogo — tassello "NEW" (campo7) e prodotto non disponibile (campo9).
   La logica sta in inc_assets/catalogo_flags.php; qui solo l'aspetto.
   Caricato da pages.php, che rende sia il catalogo (it_shop → inc_shop)
   sia la scheda prodotto (it_product).
   ============================================================ */

/* Il tassello è in position:absolute e si appoggia al contenitore della foto.
   Nella GRIGLIA e nella SCHEDA il contenitore è .product-image, a cui il tema
   dà già position:relative (style.css, ".product .product-image").
   Nella vista a LISTA invece è .post-image, che nel tema non ha nessuna regola:
   va relativizzato qui. Il selettore è ristretto a .products apposta — .post-image
   la usa anche il blog, e lì non deve cambiare niente. */
.products .post-image { position: relative; }

.cat-flag-new {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 5;
	background: #53777a;
	color: #fff;
	font-family: 'Bodoni Moda', serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 7px 13px 6px;
	border-radius: 2px;
	/* La foto è avvolta da <a>: senza questo il tassello si mangerebbe il click
	   proprio nell'angolo in cui sta. */
	pointer-events: none;
}

/* Prende il posto del prezzo. Volutamente sobrio e grigio: il prezzo mancante
   è già l'informazione forte, l'etichetta serve a spiegare perché manca. */
.cat-non-disponibile {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid #d8d8d8;
	border-radius: 2px;
	color: #8a8a8a;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Nella scheda prodotto il prezzo è grande e colorato dal tema (<ins>/<del>):
   senza prezzo l'etichetta resta sola in quello spazio e va un po' più grande. */
.single-product .cat-non-disponibile {
	font-size: 15px;
	padding: 6px 14px;
}

/* "Disponibile dal 15/09/2026" — prodotto in arrivo.
   Sta ACCANTO al prezzo, non al posto suo: chi guarda deve poter decidere se
   aspettarlo, e un prezzo nascosto non aiuta a decidere. Perciò il tono è
   informativo (il verde-azzurro del marchio) e non negativo come il grigio del
   "Non disponibile": è una data, non un rifiuto.
   display:block lo manda a capo sotto il prezzo, che nelle card è stretto. */
.cat-disponibile-dal {
	display: block;
	margin-top: 4px;
	color: #53777a;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.single-product .cat-disponibile-dal {
	font-size: 13px;
	margin-top: 6px;
}