/* Tesselo Restyle (adattato) — immagini+placeholder, sticky personalizzazione.
   Namespace .tsl- per non collidere col namespace .ts- del tema home. */

/* ===== Figura immagine con placeholder ===== */
.tsl-figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--ts-radius, 14px);
  background: var(--ts-cream, #ECE9DE); }
.tsl-figure > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tsl-figure.tsl-img--ph { background:
  linear-gradient(135deg, rgba(232,95,36,.18), rgba(236,72,153,.18)), var(--ts-cream, #ECE9DE); }
.tsl-img__label { position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font: 600 11px/1.2 ui-monospace, 'Poppins', monospace; color: var(--ts-navy, #0E1822);
  background: rgba(255,255,255,.82); padding: 3px 7px; border-radius: 7px; pointer-events: none; }

/* ===== Home: immagini "Come funziona" ===== */
.ts-how .tsl-step-img { margin: 0 auto 14px; max-width: 320px; aspect-ratio: 4/3; }

/* ===== Home: categorie come key-art =====
   Finché manca la foto reale: tessera colorata + nome bianco visibile (look originale).
   Con foto reale (figure non-placeholder): foto a tutta tessera + nome in overlay. */
.ts-cats__grid .ts-cat--art { position: relative; overflow: hidden; }
.ts-cat--art .ts-cat__label { color: #fff !important; font-family: 'Lilita One', sans-serif;
  font-size: 1.1rem; text-align: center; z-index: 2; }
/* Stato placeholder: nascondi la figura, mantieni la tessera colorata */
.ts-cat--art .tsl-figure.tsl-img--ph { display: none; }
/* Stato con foto reale */
.ts-cat--art { padding: 0; }
.ts-cat--art .tsl-figure:not(.tsl-img--ph) { position: absolute; inset: 0; border-radius: inherit; }
.ts-cat--art:has(.tsl-figure:not(.tsl-img--ph)) .ts-cat__label {
  position: absolute; left: 0; right: 0; bottom: 14px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.ts-cat--art:has(.tsl-figure:not(.tsl-img--ph))::after { content: ""; position: absolute; inset: 0;
  z-index: 1; background: linear-gradient(transparent 38%, rgba(14,24,34,.55)); }

/* ===== Home: community UGC con immagini ===== */
.ts-ugc__cell.tsl-img,
.ts-ugc__cell .tsl-figure { aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; }
.ts-ugc__cell .tsl-figure { width: 100%; height: 100%; }

/* ===== Bottoni su sezione corallo: garantisci il contrasto =====
   Il tema rende ogni .button corallo/bianco; su sfondo corallo sparirebbe. */
.ts-section--coral .button,
.ts-section--coral .ts-btn--lg {
  background: #fff !important; border-color: #fff !important; color: var(--ts-coral) !important; }
.ts-section--coral .button:hover,
.ts-section--coral .ts-btn--lg:hover { filter: brightness(0.97); }

/* ===== Sticky CTA mobile (solo pagina personalizzazione) ===== */
.tsl-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(236,233,222,.96); backdrop-filter: blur(6px);
  border-top: 1px solid rgba(14,24,34,.12); }
.tsl-sticky__cta { display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 48px; padding: 0 22px; border-radius: 999px; text-decoration: none;
  font: 600 1rem/1 'Poppins', system-ui, sans-serif; color: #fff !important;
  background: var(--ts-coral, #E85F24); }
@media (max-width: 767px) {
  .tsl-sticky { display: block; }
  body.tsl-has-sticky { padding-bottom: 76px; }
}

/* ===== Personalizzazione: immagini di processo nei tsl-pstep ===== */
.tsl-pstep__img { max-width: 460px; margin: 4px 0 18px; border: 1px solid #DBD0BC;
  border-radius: 6px; overflow: hidden; }
.tsl-pstep__img.tsl-img--ph { border-style: dashed; }
@media (max-width: 760px) { .tsl-pstep__img { max-width: 100%; } }

/* ===== Accessibilità / motion ===== */
@media (prefers-reduced-motion: reduce) {
  .tsl-figure > img { transition: none !important; }
}