/* Le recensioni sulla scheda prodotto.
   Pensato prima per il telefono: da li' arriva quasi tutto il traffico delle
   inserzioni, e una griglia a tre colonne su uno schermo da cinque pollici
   diventa una colonna di francobolli. */

/* Gli altri blocchi della scheda si mettono i margini da soli
   (.mv-why: max-width 1100px, padding 0 20px). Il nostro no, e si stendeva da
   un bordo all'altro dello schermo: sul telefono il testo finiva attaccato al
   vetro. Stessa misura di .mv-why, cosi' i blocchi si incolonnano invece di
   sembrare due pagine diverse. */
.mv-recensioni { max-width: 1100px; margin: 3rem auto; padding: 0 20px;
  scroll-margin-top: 90px; }

.mv-rec-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem;
  padding-bottom: .8rem; border-bottom: 2px solid currentColor; margin-bottom: 1.5rem; }
.mv-rec-testa h2 { margin: 0; }
.mv-rec-voto { display: flex; align-items: baseline; gap: .5rem; }
.mv-rec-numero { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.mv-rec-quante { opacity: .7; font-size: .95rem; }

.mv-stelle { letter-spacing: 1px; white-space: nowrap; }
.mv-stelle .piena { color: #e6a817; }
.mv-stelle .vuota { color: #d6d6d6; }

/* la fila di foto in cima */
.mv-rec-striscia { margin-bottom: 2rem; }
.mv-rec-striscia h3 { font-size: 1rem; margin: 0 0 .6rem; opacity: .8; }
.mv-rec-rullo { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.mv-rec-scatto { flex: 0 0 auto; scroll-snap-align: start; line-height: 0; }
.mv-rec-scatto img { width: 110px; height: 110px; object-fit: cover; border-radius: 6px;
  display: block; transition: transform .15s ease; }
.mv-rec-scatto:hover img { transform: scale(1.04); }

/* le foto dentro la singola recensione */
.mv-rec-foto { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 .2rem; }
/* le misure sono dichiarate nel markup: qui si impone quella VISIVA, e
   `object-fit: cover` ritaglia invece di deformare */
.mv-rec-foto img { width: 128px; height: 128px; object-fit: cover; border-radius: 6px; display: block; }

/* il cerchio con l'iniziale al posto della faccina di Gravatar */
.mv-rec-iniziale { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: #fff; font-weight: 700;
  font-size: 1.05rem; flex: 0 0 auto; }

/* l'elenco: su schermo largo due colonne, sul telefono una */
.mv-recensioni .commentlist { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 1rem; }
.mv-recensioni .commentlist > li { margin: 0; padding: 1rem 1.1rem;
  border: 1px solid rgba(128,128,128,.25); border-radius: 10px; }
.mv-recensioni .commentlist > li .comment_container { display: flex; gap: .9rem; align-items: flex-start; }
.mv-recensioni .comment-text { flex: 1 1 auto; min-width: 0; }
.mv-recensioni .comment-text p { margin: .4rem 0 0; }
.mv-recensioni .meta { font-size: .88rem; opacity: .75; margin: 0; }

/* Una per riga, anche da computer.
   C'erano due colonne per le recensioni senza foto, e quelle con foto a tutta
   larghezza: si leggeva come un elenco a righe irregolari, con le due colonne
   che facevano sembrare le recensioni corte un riempitivo. Una sotto l'altra si
   leggono tutte alla stessa maniera e nessuna sembra di serie B. */

/* il modulo per lasciare una recensione va sotto, non in mezzo */
.mv-recensioni #review_form_wrapper { margin-top: 2rem; }

/* il voto sotto al titolo del prodotto */
.mv-voto-titolo { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mv-voto-numero { font-weight: 700; }

/* «18 recensioni dei clienti» porta alla sezione in fondo, ma non si capiva:
   era dello stesso colore del testo attorno e senza sottolineatura, quindi
   sembrava una scritta e non un bottone. Blu e sottolineato e' l'unica coppia
   di segnali che tutti riconoscono senza doverci pensare. */
/* Le due classi ATTACCATE (.woocommerce-product-rating.mv-voto-titolo) e non
   separate da uno spazio: il tema ha una regola di pari forza
   (.woocommerce-product-rating .woocommerce-review-link { font-size: 12px })
   che viene caricata dopo la nostra, quindi a parita' vinceva lei. Attaccando
   le classi la nostra pesa di piu' e vince senza ricorrere a !important, che
   toglie il problema di oggi e ne regala uno domani. */
.woocommerce-product-rating.mv-voto-titolo .woocommerce-review-link,
.woocommerce-product-rating.mv-voto-titolo .mv-voto-quante {
  color: #0b63c5; text-decoration: underline; text-underline-offset: 2px;
  /* 14px scritti tondi e non .92rem: la radice di questo tema e' a 13px, e
     quel .92rem veniva fuori 12 — piccolino per essere il collegamento che
     porta alla prova sociale */
  font-size: 14px; cursor: pointer; }
.woocommerce-product-rating.mv-voto-titolo .woocommerce-review-link:hover,
.woocommerce-product-rating.mv-voto-titolo .mv-voto-quante:hover { color: #084a94; text-decoration-thickness: 2px; }

/* la lente: le foto a schermo intero, si scorrono col dito */
.mv-lente { position: fixed; inset: 0; z-index: 99999; display: none;
  align-items: center; justify-content: center; background: #000;
  padding: 0; touch-action: pan-y; }
.mv-lente.aperta { display: flex; }
body.mv-lente-ferma { overflow: hidden; }
.mv-lente-corpo { margin: 0; width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center; }
/* Schermo intero davvero. `max-width` da solo non basta: LIMITA e basta, non
   allarga, quindi una foto piu' piccola dello schermo restava della sua misura
   in mezzo al nero. Con width/height al 100% e `contain` la foto si allarga
   fino a toccare i bordi tenendo le sue proporzioni. */
.mv-lente-corpo img { width: 100%; height: 100%; object-fit: contain;
  max-width: none; max-height: none; display: block; border-radius: 0; }
.mv-lente button { position: absolute; background: rgba(0,0,0,.45); color: #fff;
  border: 0; cursor: pointer; line-height: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.mv-lente button:hover { background: rgba(0,0,0,.7); }
.mv-lente-chiudi { top: 1rem; right: 1rem; width: 44px; height: 44px; font-size: 1.9rem; }
.mv-lente-prima, .mv-lente-dopo { top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; font-size: 2.2rem; }
.mv-lente-prima { left: .6rem; }
.mv-lente-dopo { right: .6rem; }
.mv-lente-conta { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .9rem; letter-spacing: .04em;
  /* sopra una foto chiara il bianco su bianco sparisce */
  background: rgba(0,0,0,.55); padding: .25rem .7rem; border-radius: 999px; }

/* sul telefono le frecce coprirebbero la foto: si scorre col dito, e restano
   piccole in basso per chi non sa che si puo' */
@media (max-width: 600px) {
  .mv-lente-prima, .mv-lente-dopo { top: auto; bottom: .9rem; transform: none;
    width: 40px; height: 40px; font-size: 1.7rem; }
  .mv-lente-prima { left: 1.2rem; }
  .mv-lente-dopo { right: 1.2rem; }
}