/* =============================================================================
   FOGLIO 10 — due richiami: le protezioni interne e il campionario
   Si carica dopo tutti gli altri, quindi scavalca senza bisogno di forzature.
   ========================================================================== */

/* =============================================================================
   A · LE PROTEZIONI INTERNE — la fotografia, vestita
   -----------------------------------------------------------------------------
   Il foglio 04 aveva provato a sostituire le foto con delle icone. Non ha
   funzionato (il perche' e' scritto li'). Qui le foto restano e si lavora su
   quello che davvero non andava: sette piastrelle di altezza diversa, senza un
   fondo comune, con l'etichetta e il prezzo appiccicati sotto.

   Misurato prima: 282 px e 298 px di altezza sulla stessa riga. Bastano
   sedici pixel di scarto perche' una fila smetta di sembrare una fila.
   ========================================================================== */
/* LA STRUTTURA VERA, misurata dal vivo — vale la pena scriverla, perche' il
   primo tentativo l'aveva indovinata sbagliata e il risultato era il testo
   tagliato a meta':

     .wcpa_image                 <- il contenitore delle opzioni
       label                     <- LA PIASTRELLA: contiene TUTTO, testo compreso
         input[type=radio]       <- nascosto
         span.wcpa_img_wrap      <- la cornice della fotografia
           img                   <- con height:100px scritto in linea dal plugin
         span.wcpa_image_label   <- nome e prezzo

   L'errore da non ripetere: mettere `aspect-ratio:1` e `overflow:hidden` sul
   `label`. Il label non e' la figurina, e' la scheda intera: quadrarlo taglia
   via il nome. Il quadrato va sulla cornice interna. */

body.single-product #main .wcpa_type_image-group .wcpa_image,
body.single-product #main .wcpa_type_image .wcpa_image {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* la piastrella: una colonna, foto sopra e nome sotto, tutte alte uguale */
body.single-product #main .wcpa_type_image-group .wcpa_image > label,
body.single-product #main .wcpa_type_image .wcpa_image > label {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  width: auto !important;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  overflow: visible;
}

/* la cornice della fotografia: qui sì il quadrato */
body.single-product #main .wcpa_type_image-group .wcpa_img_wrap,
body.single-product #main .wcpa_type_image .wcpa_img_wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto !important;
  padding: 9px;
  box-sizing: border-box;
  background: var(--sc-carta);
  border: 1px solid var(--sc-linea);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* Il plugin scrive `height:100px` IN LINEA su ogni immagine: contro uno stile
   in linea non basta la specificita', serve !important. Non e' pigrizia. */
body.single-product #main .wcpa_type_image-group .wcpa_img_wrap img,
body.single-product #main .wcpa_type_image .wcpa_img_wrap img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 220ms ease;
}

body.single-product #main .wcpa_image > label:hover .wcpa_img_wrap {
  border-color: var(--sc-linea-2);
  box-shadow: 0 6px 18px rgb(15 17 21 / .08);
  transform: translateY(-2px);
}
body.single-product #main .wcpa_image > label:hover .wcpa_img_wrap img { transform: scale(1.05); }

/* la scelta: un anello, non un riempimento — il riempimento coprirebbe proprio
   la fotografia, che e' l'informazione da guardare */
body.single-product #main .wcpa_image > label:has(input:checked) .wcpa_img_wrap {
  border-color: var(--sc-mar);
  box-shadow: 0 0 0 3px var(--sc-mar-velo);
  background: #fff;
}
body.single-product #main .wcpa_image > label:has(input:checked) .wcpa_img_wrap::after {
  content: "";
  position: absolute;
  top: 7px; right: 7px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--sc-mar) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E") center/11px no-repeat;
  box-shadow: 0 1px 3px rgb(15 17 21 / .22);
}

/* nome e prezzo: allineati in basso, cosi' la fila resta una fila anche con
   i nomi lunghi su due righe */
body.single-product #main .wcpa_type_image-group .wcpa_image_label,
body.single-product #main .wcpa_type_image .wcpa_image_label {
  display: block;
  margin: auto 0 0 !important;
  padding: 0 2px;
  font: 500 11px/1.42 var(--sc-mono);
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--sc-ink-2);
  text-align: left;
  overflow: visible;
}
body.single-product #main .wcpa_image > label:has(input:checked) .wcpa_image_label {
  color: var(--sc-mar-testo);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  body.single-product #main .wcpa_img_wrap,
  body.single-product #main .wcpa_img_wrap img { transition: none !important; transform: none !important; }
}

/* =============================================================================
   B · IL RICHIAMO DEL CAMPIONARIO
   -----------------------------------------------------------------------------
   Era un rettangolo azzurrino con tre righe centrate. Diceva "vedi la nostra
   gamma completa di carte" e non ne mostrava nemmeno una: chiedeva fiducia per
   una cosa che poteva semplicemente far vedere.

   Adesso la gamma e' li'. Sono le DODICI FOTOGRAFIE VERE dei campionari, le
   stesse che il cliente trova nel configuratore — non un disegno, non un
   gradiente inventato. Arrivano pigre, quindi non pesano finche' nessuno
   scorre fin qui, e si posano una dopo l'altra come carte su un tavolo.

   L'animazione ha un motivo: e' il gesto del campionario che viene aperto.
   Parte una volta sola, all'ingresso nella vista. Un'animazione perpetua in
   fondo alla home sarebbe rumore.
   ========================================================================== */
.sc-camp {
  position: relative;
  overflow: hidden;
  border-radius: var(--sc-r);
  background: linear-gradient(180deg, var(--sc-mar-velo) 0%, #F3F8F9 100%);
  border: 1px solid var(--sc-linea);
  padding: clamp(28px, 4vw, 46px) clamp(20px, 4vw, 48px);
}
.sc-camp__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
}
.sc-camp__occhiello {
  margin: 0 0 8px;
  font: 500 10.5px/1 var(--sc-mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--sc-mar-testo);
}
.sc-camp__titolo {
  margin: 0 0 10px;
  font-family: var(--sc-disp);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--sc-ink);
  text-wrap: balance;
}
.sc-camp__testo {
  margin: 0 0 20px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sc-ink-2);
}
.sc-camp__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--sc-mar-scuro) !important;
  color: #fff !important;
  font: 600 12.5px/1 var(--sc-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms, transform 160ms, box-shadow 160ms;
}
.sc-camp__cta:hover {
  background: var(--sc-mar) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--sc-mar) 34%, transparent);
}
.sc-camp__cta svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sc-camp__sotto {
  margin: 14px 0 0;
  font: 400 11.5px var(--sc-mono);
  color: var(--sc-ink-4);
}

/* --- il ventaglio di carte ---------------------------------------------- */
.sc-camp__carte {
  display: grid;
  /* quattro colonne, non sei: a sei le carte scendevano a 63 px e non si
     leggeva piu' la differenza fra un liscio e un goffrato — che e' l'unica
     cosa che quel riquadro deve far vedere */
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}
.sc-camp__carta {
  position: relative;
  aspect-ratio: 1;
  border-radius: 9px;
  overflow: hidden;
  /* I campionari sono PNG ritagliati con lo sfondo trasparente: su bianco, la
     carta bianca e la crema sparivano del tutto. Serve un piano d'appoggio
     appena piu' profondo del foglio, piu' un filo interno che chiuda la
     forma. Misurato: #EDF0F1 lascia leggere sia il bianco sia il nero. */
  background: #EDF0F1;
  box-shadow: inset 0 0 0 1px rgb(15 17 21 / .07),
              0 1px 2px rgb(15 17 21 / .07), 0 6px 14px rgb(15 17 21 / .07);
  /* stato di partenza: la carta e' ancora nel mazzo, sotto e girata */
  opacity: 0;
  transform: translateY(18px) rotate(-5deg) scale(.93);
  transition: opacity 420ms var(--sc-curva, cubic-bezier(.2,.9,.3,1)),
              transform 480ms var(--sc-curva, cubic-bezier(.2,.9,.3,1));
  transition-delay: calc(var(--i, 0) * 42ms);
}
.sc-camp.is-vista .sc-camp__carta {
  opacity: 1;
  transform: none;
}
.sc-camp__carta img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* un'ombra portata sotto il lembo di carta: e' quella che fa capire che si
     tratta di un foglio appoggiato e non di un rettangolo colorato */
  filter: drop-shadow(0 2px 3px rgb(15 17 21 / .18));
}
/* al passaggio la carta si stacca dal mazzo: e' il gesto di sfogliarlo */
.sc-camp.is-vista .sc-camp__carta:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 3px 6px rgb(15 17 21 / .09), 0 14px 30px rgb(15 17 21 / .13);
  z-index: 2;
  transition-delay: 0ms;
}
.sc-camp__carta span {   /* il nome, solo al passaggio: la foto basta */
  position: absolute; inset: auto 0 0 0;
  padding: 5px 6px;
  background: rgb(15 17 21 / .72);
  color: #fff;
  font: 500 9.5px/1.25 var(--sc-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms;
}
.sc-camp__carta:hover span { opacity: 1; }

@media (max-width: 860px) {
  .sc-camp__griglia { grid-template-columns: 1fr; }
  .sc-camp__carte { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 480px) {
  .sc-camp__carte { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-camp__carta { opacity: 1; transform: none; transition: none; }
  .sc-camp__cta { transition: none; }
}

/* =============================================================================
   C · LE PIASTRELLE — la griglia era sul contenitore sbagliato
   -----------------------------------------------------------------------------
   Segnalato dal proprietario con una fotografia: sulla scheda prodotto, da
   telefono, le piastrelle della carta e delle protezioni sbordano a destra.

   LA STRUTTURA VERA, misurata a 390 px. Il primo tentativo l'aveva indovinata
   sbagliata, e vale la pena scriverla perche' il nome inganna:

     DIV.wcpa_field.wcpa_group_field   <- IL CONTENITORE DI TUTTE LE OPZIONI
       DIV.wcpa_image                  <- UNA PER OPZIONE, non una per gruppo
         LABEL                         <- la piastrella
           INPUT + SPAN.wcpa_img_wrap + SPAN.wcpa_image_label

   `wcpa_image` al plurale non esiste: ce n'e' una per ogni carta. Mettere la
   griglia li' dentro significa disporre **un elemento solo** in piu' colonne,
   che non serve a niente; e la larghezza della fila la decide comunque il
   genitore.

   L'ERRORE DA NON RIPETERE: al primo tentativo avevo messo
   `grid-template-columns: minmax(0, 1fr)` su `.wcpa_field` per "rompere il
   cerchio". Una colonna sola. Le dodici carte si sono incolonnate una sotto
   l'altra: **il rimedio era peggio del male**, e l'ho visto solo perche' ho
   fotografato il risultato invece di fidarmi dei numeri della griglia — che
   dicevano "due colonne" ed erano veri, ma di una griglia che conteneva un
   elemento solo.

   LA CORREZIONE: la griglia sta sul contenitore delle opzioni, e le colonne le
   decide `auto-fill` sulla larghezza vera del genitore.
   ========================================================================== */
body.single-product #main .wcpa_type_image-group .wcpa_field.wcpa_group_field,
body.single-product #main .wcpa_type_image .wcpa_field.wcpa_group_field {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Ogni opzione riempie la sua cella e puo' restringersi: senza `min-width: 0`
   un nome lungo come "SMOOTH BOUGANVILLE" tiene la colonna larga quanto la
   parola e la fila esce dallo schermo. */
body.single-product #main .wcpa_type_image-group .wcpa_image,
body.single-product #main .wcpa_type_image .wcpa_image {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
body.single-product #main .wcpa_type_image-group .wcpa_image > label,
body.single-product #main .wcpa_type_image .wcpa_image > label {
  width: 100% !important;
  min-width: 0;
}

/* Sul telefono due colonne stanno strette ma leggibili. */
@media (max-width: 420px) {
  body.single-product #main .wcpa_type_image-group .wcpa_field.wcpa_group_field,
  body.single-product #main .wcpa_type_image .wcpa_field.wcpa_group_field {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
  }
}