/* Tesselo — Home (front-page.php). Mobile-first. Usa i token di tesselo-skin.css */
.tesselo-home { overflow-x: hidden; }
.tesselo-home section { padding: 48px 20px; }
.tesselo-home .ts-h2 { text-align: center; font-size: clamp(1.6rem, 5vw, 2.4rem); margin: 0 0 28px; }

/* Leggibilità titoli: Lilita One ha un solo peso -> niente finto-grassetto (sfocato).
   I tag <strong> e le etichette non sono coperti dalla regola heading di skin. */
.tesselo-home strong,
.tesselo-home .ts-cat__label,
.tesselo-home .ts-card__title,
.tesselo-home .ts-claim strong { font-weight: 400; }
/* render più nitido dei titoli display */
.tesselo-home h1, .tesselo-home h2, .tesselo-home h3,
.tesselo-home .ts-h2 { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* HERO */
.ts-hero { background:
  radial-gradient(circle at 12% 18%, rgba(244,163,0,.18), transparent 42%),
  radial-gradient(circle at 88% 12%, rgba(236,72,153,.16), transparent 40%),
  radial-gradient(circle at 70% 92%, rgba(29,158,117,.16), transparent 45%),
  var(--ts-cream);
}
.ts-hero__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.ts-hero__title { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.04; margin: 14px 0 12px; }
.ts-hero__sub { font-size: clamp(1rem, 2.4vw, 1.2rem); max-width: 30ch; }
.ts-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 16px; }
.ts-btn--lg { font-size: 1.05rem; padding: 14px 26px; }
.ts-btn--ghost { display:inline-flex; align-items:center; padding: 14px 22px; border-radius: var(--ts-radius); border: 2px solid var(--ts-navy); color: var(--ts-navy); font-weight: 600; }
.ts-hero__social { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: .92rem; }
.ts-hero__social span { font-weight: 700; }
.ts-hero__social a { color: var(--ts-navy); text-decoration: underline; }
.ts-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* HERO — mini mosaico prodotti estivi (miniature personalizzabili, non schede intere) */
.ts-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 8px; }
.ts-mosaic__tile { position: relative; display: block; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 14px rgba(14,24,34,.08); }
.ts-mosaic__tile img, .ts-mosaic__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ts-mosaic__tile:hover img { transform: scale(1.06); }
.ts-mosaic__tile:first-child { grid-column: span 2; grid-row: span 2; }
.ts-mosaic__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 7px; font-size: .68rem; line-height: 1.12; color: #fff; background: linear-gradient(to top, rgba(14,24,34,.78), transparent); opacity: 0; transition: opacity .25s ease; max-height: 2.5em; overflow: hidden; }
.ts-mosaic__tile:hover .ts-mosaic__cap, .ts-mosaic__tile:focus-visible .ts-mosaic__cap { opacity: 1; }
.ts-mosaic__hint { margin: 12px 0 0; font-size: .82rem; opacity: .72; }

/* CARD prodotto */
.ts-card { background:#fff; border-radius: var(--ts-radius); overflow:hidden; box-shadow: 0 6px 18px rgba(14,24,34,.08); display:flex; flex-direction:column; transition: transform .16s ease, box-shadow .16s ease; }
.ts-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(14,24,34,.15); }
.ts-card__media { position:relative; display:block; overflow:hidden; }
.ts-card__media img { width:100%; height:auto; display:block; aspect-ratio: 1/1; object-fit: cover; transition: transform .45s ease; }
.ts-card:hover .ts-card__media img { transform: scale(1.06); }
.ts-card__tag { position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; background:#fff; color:var(--ts-coral); font-size:.72rem; font-weight:600; box-shadow:0 3px 10px rgba(14,24,34,.14); }
.ts-card__tag svg { width:12px; height:12px; }
.ts-card__body { padding: 12px; display:flex; flex-direction:column; gap:8px; }
.ts-card__title { font-family:'Poppins',sans-serif; font-weight:600; color: var(--ts-navy); font-size: .98rem; line-height:1.25; }
.ts-card__row { display:flex; align-items:center; justify-content:space-between; }
.ts-card__price .price, .ts-card__price { color: var(--ts-coral); font-weight: 700; }
.ts-share { width:34px; height:34px; border-radius:50%; border:1px solid #e3e3e3; background:#fff; cursor:pointer; font-size:16px; line-height:1; }
.ts-share:hover { background: var(--ts-cream); }
.ts-card__cta { text-align:center; }

/* USP — card con accento colorato e micro-testo empatico */
.ts-usp { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:14px; text-align:center; }
.ts-usp__item { position:relative; background:#fff; border-radius:var(--ts-radius); padding:24px 18px 20px; box-shadow:0 6px 18px rgba(14,24,34,.07); border:1px solid rgba(14,24,34,.05); overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; }
.ts-usp__item::before { content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--ts-coral); }
.ts-usp--magenta::before { background:var(--ts-magenta);} .ts-usp--coral::before { background:var(--ts-coral);} .ts-usp--teal::before { background:var(--ts-teal);}
.ts-usp__item:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(14,24,34,.12); }
.ts-usp__ico { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; margin-bottom:10px; font-size:1.7rem; line-height:1; border-radius:50%; background:var(--ts-cream); }
.ts-usp--magenta .ts-usp__ico { background:rgba(236,72,153,.14);} .ts-usp--coral .ts-usp__ico { background:rgba(232,95,36,.14);} .ts-usp--teal .ts-usp__ico { background:rgba(29,158,117,.14);}
.ts-usp__item strong { display:block; font-family:'Lilita One',sans-serif; font-size:1.08rem; color:var(--ts-navy); }
.ts-usp__txt { display:block; margin-top:4px; font-size:.9rem; color:#5a6470; line-height:1.35; }

/* COME FUNZIONA — illustrazioni SVG on-brand + numero a badge */
.ts-how { position:relative; }
.ts-how__steps { max-width:1040px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:24px; }
.ts-step { text-align:center; padding:8px; }
.ts-step__art { position:relative; border-radius:var(--ts-radius); overflow:hidden; background:
  radial-gradient(circle at 22% 18%, rgba(244,163,0,.16), transparent 55%),
  radial-gradient(circle at 82% 86%, rgba(29,158,117,.14), transparent 55%),
  #fff;
  box-shadow:0 8px 22px rgba(14,24,34,.08); border:1px solid rgba(14,24,34,.05); margin-bottom:30px; }
.ts-il { display:block; width:100%; height:auto; }
.ts-step__n { position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center; border-radius:50%; background:var(--ts-coral); color:#fff; font-family:'Lilita One',sans-serif; font-size:1.3rem; box-shadow:0 6px 16px rgba(232,95,36,.4); border:3px solid #fff; }
.ts-step h3 { margin:6px 0 6px; font-size:1.2rem; }
.ts-step p { margin:0; color:#5a6470; }

/* CATEGORIE — tessere a pattern, icona prodotto, sottotitolo, link reale */
.ts-cats__grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ts-cat { position:relative; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; min-height:150px; padding:22px 14px; border-radius:18px; overflow:hidden; color:#fff !important; font-family:'Lilita One',sans-serif; text-align:center; box-shadow:0 8px 22px rgba(14,24,34,.12); transition:transform .18s ease, box-shadow .18s ease; }
.ts-cat::before { content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'%3E%3Cg%20fill='%23ffffff'%20opacity='0.22'%3E%3Ccircle%20cx='6'%20cy='6'%20r='2.6'/%3E%3Crect%20x='19'%20y='3'%20width='6'%20height='6'%20rx='2'/%3E%3Ccircle%20cx='23'%20cy='23'%20r='2.6'/%3E%3Crect%20x='3'%20y='19'%20width='6'%20height='6'%20rx='2'/%3E%3C/g%3E%3C/svg%3E"); background-size:30px 30px; pointer-events:none; }
.ts-cat > * { position:relative; z-index:1; }
.ts-cat:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(14,24,34,.2); }
.ts-cat__art { display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; margin-bottom:4px; border-radius:50%; background:rgba(255,255,255,.18); }
.ts-cat__art svg { width:32px; height:32px; }
.ts-cat__label { font-size:1.18rem; line-height:1.1; }
.ts-cat__sub { font-family:'Poppins',sans-serif; font-weight:500; font-size:.78rem; opacity:.92; }
.ts-cat--teal{ background:var(--ts-teal);} .ts-cat--amber{ background:var(--ts-amber);} .ts-cat--magenta{ background:var(--ts-magenta);} .ts-cat--coral{ background:var(--ts-coral);}

/* GENERATORE — banda con texture a pattern + anteprima "tempo reale" */
.ts-gen { position:relative; overflow:hidden; }
.ts-gen::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'%3E%3Cg%20fill='%23ffffff'%20opacity='0.16'%3E%3Ccircle%20cx='6'%20cy='6'%20r='2.6'/%3E%3Crect%20x='19'%20y='3'%20width='6'%20height='6'%20rx='2'/%3E%3Ccircle%20cx='23'%20cy='23'%20r='2.6'/%3E%3Crect%20x='3'%20y='19'%20width='6'%20height='6'%20rx='2'/%3E%3C/g%3E%3C/svg%3E"); background-size:30px 30px; }
.ts-gen__inner { position:relative; z-index:1; max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:26px; align-items:center; text-align:center; }
.ts-gen__copy .ts-h2 { color:#fff; }
.ts-gen__copy p { color:#fff; opacity:.96; font-size:clamp(1.05rem, 2.6vw, 1.28rem); line-height:1.45; margin-bottom:22px; }
.ts-gen__copy .ts-badge { background:#fff; color:var(--ts-coral); font-weight:600; }
.ts-gen__preview { order:-1; }
.ts-genpv { display:block; width:100%; max-width:380px; height:auto; margin:0 auto; filter:drop-shadow(0 14px 30px rgba(14,24,34,.3)); }
.ts-genpv__motif { transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion: no-preference) {
  .ts-genpv__motif { animation: ts-genpv-spin 22s linear infinite, ts-genpv-hue 12s linear infinite; }
  .ts-genpv__knob  { animation: ts-genpv-slide 4.5s ease-in-out infinite; }
}
@keyframes ts-genpv-spin { to { transform: rotate(360deg); } }
@keyframes ts-genpv-hue  { to { filter: hue-rotate(360deg); } }
@keyframes ts-genpv-slide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(46px); } }

/* MOTORE / PERSONALIZZAZIONE — galleria pattern reali + numeri + 6 pilastri su fondo scuro */
.ts-engine { position:relative; overflow:hidden; background:
  radial-gradient(circle at 8% 0%, rgba(236,72,153,.18), transparent 42%),
  radial-gradient(circle at 96% 18%, rgba(29,158,117,.16), transparent 44%),
  var(--ts-navy); color:#fff; }
.ts-engine__inner { position:relative; z-index:1; max-width:1180px; margin:0 auto; }
.ts-engine__head { max-width:780px; margin:0 auto; text-align:center; }
.ts-engine .ts-h2 { color:#fff !important; }
.ts-engine__lead { color:rgba(255,255,255,.84) !important; font-size:clamp(1rem,2.4vw,1.18rem); line-height:1.6; margin:0 auto; }
.ts-engine__lead strong { color:var(--ts-amber); font-weight:400; }

/* Galleria pattern */
.ts-engine__gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:840px; margin:34px auto; }
.ts-sw { position:relative; margin:0; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:var(--ts-navy);
  box-shadow:0 12px 30px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1);
  transition:transform .2s ease, box-shadow .2s ease; }
.ts-sw:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.45); }
.ts-sw svg { position:absolute; inset:0; display:block; width:100%; height:100%; }
.ts-sw__cap { position:absolute; left:10px; bottom:10px; background:rgba(14,24,34,.72); color:#fff;
  font-size:.74rem; font-weight:600; padding:4px 10px; border-radius:999px; }
.ts-motif { transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion: no-preference) {
  .ts-sw .ts-motif { animation: ts-eng-hue 18s linear infinite; }
  .ts-sw .ts-spin  { animation: ts-eng-hue 18s linear infinite, ts-eng-spin 70s linear infinite; }
}
@keyframes ts-eng-hue { to { filter: hue-rotate(360deg); } }
@keyframes ts-eng-spin { to { transform: rotate(360deg); } }

/* Numeri */
.ts-engine__stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:760px; margin:30px auto; }
.ts-stat { text-align:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--ts-radius); padding:18px 10px; }
.ts-stat__n { display:block; font-family:'Lilita One',sans-serif; font-size:clamp(2rem,7vw,2.6rem); line-height:1; color:var(--ts-amber); }
.ts-stat__n small { font-size:.42em; opacity:.85; }
.ts-stat__l { display:block; margin-top:8px; font-size:.8rem; line-height:1.3; color:rgba(255,255,255,.8); }

/* Pilastri con mini-pattern */
.ts-engine__grid { display:grid; grid-template-columns:1fr; gap:14px; margin:0 auto 30px; }
.ts-pill { display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--ts-radius); padding:18px; transition:transform .15s ease, box-shadow .15s ease; }
.ts-pill:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.3); }
.ts-pill__ico { flex:0 0 auto; width:48px; height:48px; border-radius:12px; overflow:hidden; }
.ts-pill__ico svg { display:block; width:100%; height:100%; }
.ts-pill h3 { font-family:'Lilita One',sans-serif; font-weight:400; font-size:1.06rem; margin:0 0 5px; color:#fff !important; }
.ts-pill p { margin:0; font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.78) !important; }

.ts-engine__cta { text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ts-engine__note { font-size:.86rem; color:rgba(255,255,255,.65); }

/* GRIGLIE prodotti */
.ts-grid-sec__sub { text-align:center; margin:-14px 0 24px; color:#5a6470; }
.ts-grid-sec__more { text-align:center; margin-top:26px; }
.ts-products { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* UGC */
.ts-ugc { text-align:center; }
.ts-ugc__sub { margin:-14px 0 24px; }
.ts-ugc__grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.ts-ugc__cell { aspect-ratio:1/1; border-radius:12px; background:
  linear-gradient(135deg, rgba(232,95,36,.25), rgba(236,72,153,.25)); }

/* CLAIM */
.ts-claim { text-align:center; background:var(--ts-navy); color:#fff; }
.ts-claim p { margin:0; font-size:1.05rem; }
.ts-claim strong { font-family:'Lilita One',sans-serif; }

/* ===== Tablet/Desktop ===== */
@media (min-width:768px) {
  .ts-hero__inner { grid-template-columns: 1.05fr .95fr; }
  .ts-usp { grid-template-columns: repeat(3,1fr); }
  .ts-how__steps { grid-template-columns: repeat(3,1fr); }
  .ts-cats__grid { grid-template-columns: repeat(4,1fr); }
  .ts-products { grid-template-columns: repeat(4,1fr); }
  .ts-ugc__grid { grid-template-columns: repeat(4,1fr); }
  .ts-gen__inner { grid-template-columns: 1.05fr .95fr; text-align: left; gap: 40px; }
  .ts-gen__preview { order: 0; }
  .ts-genpv { margin: 0; max-width: 420px; }
  .ts-engine__gallery { grid-template-columns: repeat(3,1fr); }
  .ts-engine__stats { grid-template-columns: repeat(4,1fr); max-width:none; }
  .ts-engine__grid { grid-template-columns: repeat(3,1fr); }
}

/* Share button — override del bottone tema, icona sempre visibile */
.ts-card__row .ts-share {
  width: 38px !important; height: 38px !important; min-width: 38px !important;
  padding: 0 !important; border-radius: 50% !important;
  background: #fff !important; color: var(--ts-coral) !important;
  border: 1px solid #e3e3e3 !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  line-height: 1 !important; flex: 0 0 auto;
}
.ts-card__row .ts-share svg { width: 18px; height: 18px; display: block; }
.ts-card__row .ts-share:hover { background: var(--ts-cream) !important; transform: translateY(-1px); }
.ts-card__row .ts-share.is-copied { color: var(--ts-teal) !important; }
.ts-card__row { gap: 8px; }

/* NOVITÀ — Immagine diretta (all-over). Sezione chiara e calda, in contrasto
   con il motore (navy) che la precede. Additiva. */
.ts-direct { background:
  radial-gradient(circle at 92% 6%, rgba(244,163,0,.16), transparent 46%),
  radial-gradient(circle at 6% 94%, rgba(232,95,36,.10), transparent 46%),
  #fff; }
.ts-direct__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.ts-direct .ts-badge { margin-bottom: 14px; }
.ts-direct .ts-h2 { margin-bottom: 14px; }
.ts-direct__lead { max-width: 720px; margin: 0 auto; color: #5a6470;
  font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.6; }
.ts-direct__lead strong { color: var(--ts-navy); font-weight: 600; }
.ts-direct__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 840px; margin: 28px auto 0; text-align: left; }
.ts-direct__pt { display: flex; gap: 12px; align-items: flex-start; background: #fff;
  border: 1px solid rgba(14,24,34,.07); border-radius: var(--ts-radius); padding: 16px;
  box-shadow: 0 6px 18px rgba(14,24,34,.06); }
.ts-direct__ico { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.ts-direct__txt h3 { margin: 0 0 4px; font-size: 1rem; color: var(--ts-navy); }
.ts-direct__txt p { margin: 0; color: #5a6470; font-size: .9rem; line-height: 1.4; }
.ts-direct__note { margin: 16px 0 0; color: var(--ts-coral); font-weight: 600; font-size: .92rem; }
@media (max-width: 720px) { .ts-direct__points { grid-template-columns: 1fr; } }