/* TCG Summer '26 skin — override su tcg-app.css. Solo pelle: zero layout, zero copy. */
:root{
  --pink:#FF3D8A; --pink-ink:#E22C67; --pink-soft:#FFE9DF;
  --blue:#17B9AC; --blue-ink:#0E8A80;
  --cream:#FFF6EA; --gold:#FFB35C;
}
body{background:#FFF6EA}

/* ticker → marquee tramonto */
.tcg-ticker{background:linear-gradient(90deg,#FF3D8A,#FF6B4A 55%,#FFB35C);color:#fff}
.tcg-ticker__pink{color:#FFE9DF}

/* nav vetro */
.tcg-nav{background:rgba(255,246,234,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* hero fotografico golden hour (home) */
.tcg-hero{background:linear-gradient(180deg,rgba(24,16,52,.52),rgba(24,16,52,.22) 46%,rgba(255,61,138,.16) 74%,rgba(30,26,84,.5)),url('/img/summer/hero1.webp') center 40%/cover}
.tcg-hero .tcg-h1 em{text-shadow:none;filter:drop-shadow(0 2px 10px rgba(24,16,52,.55))}
.tcg-hero .tcg-h1,.tcg-hero .tcg-lead,.tcg-hero .tcg-hero__sub,.tcg-hero .tcg-eyebrow,.tcg-hero .tcg-hero__addlist,.tcg-hero .tcg-hero__creator{color:#fff!important;text-shadow:0 2px 22px rgba(24,16,52,.6)}
.tcg-hero .tcg-h1 em{background:linear-gradient(90deg,#FFD29B,#FF9A62,#FF6B9F);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tcg-hero .tcg-circle{display:none}
.tcg-h1--circled::before,.tcg-h1--circled::after{display:none}

/* bottoni sunset */
.tcg-btn--pink{background:linear-gradient(90deg,#FF3D8A,#FF6B4A 60%,#FFB35C);border:none;box-shadow:0 12px 28px -10px rgba(255,61,138,.6)}
.tcg-hero .tcg-btn--blue{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.55);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tcg-nav__cta,.tcg-stickybar__cta{background:linear-gradient(90deg,#FF3D8A,#FF6B4A)!important}

/* LIVE in aqua piscina */
.tcg-card__badge--live,.tcg-prof__b--live{background:#17B9AC!important;color:#03332E!important}

/* card: ombra calda + micro-tilt */
.tcg-card{box-shadow:0 18px 34px -18px rgba(255,107,74,.4)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .tcg-card{transition:transform .25s ease, box-shadow .25s ease}
  .tcg-card:hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:0 26px 44px -18px rgba(255,61,138,.5)}
}

/* bande scure → dusk horizon */
.tcg-cta-band{background:linear-gradient(180deg,rgba(20,18,56,.6),rgba(20,18,56,.28)),url('/img/summer/dusk1.webp') center/cover!important}
.tcg-foot,.shopify-section-group-footer-group{background:linear-gradient(180deg,#221E5E,#141238)}

/* header categoria fotografici (classe aggiunta da summer_apply.py) */
.tcgx-shead{position:relative;background:linear-gradient(180deg,rgba(24,16,52,.46),rgba(24,16,52,.16) 46%,rgba(24,16,52,.58)),var(--shead) center 26%/cover!important;border-radius:26px;overflow:hidden}
.tcgx-shead .tcg-coll-head__h,.tcgx-shead .tcg-coll-head__dek,.tcgx-shead .tcg-eyebrow{color:#fff!important;text-shadow:0 2px 18px rgba(24,16,52,.65)}
.tcgx-shead .tcg-coll-head__count{color:#FFD29B}
@media(min-width:721px){.tcgx-shead{padding:64px 34px!important}}
@media(max-width:720px){.tcgx-shead{padding:44px 20px!important}}

/* contatori chip in gold */
.tcg-chip__count{background:#FFB35C;color:#4A2A08}

/* palm texture sulla sezione categorie della home (leggera) */
.tcg-home-guides{background:url('/img/summer/palm1.webp') right -80px top -60px/430px no-repeat}

/* trust band → dusk */
.tcg-trust{background:linear-gradient(180deg,rgba(20,18,56,.62),rgba(20,18,56,.34)),url("/img/summer/dusk1.webp") center/cover!important}

/* mobile polish pass 3 */
.tcg-hero__feature img{object-position:top center}
@media(max-width:720px){
  .tcg-card__cta{display:inline-block!important;font-size:10.5px;font-weight:800;background:linear-gradient(90deg,#FF3D8A,#FF6B4A);color:#fff;padding:4px 10px;border-radius:99px;margin-top:5px;width:max-content}
  .tcg-card__meta{display:flex;flex-direction:column;align-items:flex-start}
}

/* telegram vibe: azzurro brand nei punti-Telegram */
:root{--blue:#229ED9;--blue-ink:#147CB0}
.tcg-ticker{background:linear-gradient(90deg,#229ED9,#7A5BD6 18%,#FF3D8A 46%,#FF6B4A 72%,#FFB35C)}
.tcg-card__badge--live,.tcg-prof__b--live{background:#229ED9!important;color:#fff!important}
.tcg-nav__cta,.tcg-stickybar__cta{background:linear-gradient(90deg,#2AABEE,#1D8AC7)!important}
.tcg-hero .tcg-btn--blue{background:rgba(34,158,217,.38);border-color:rgba(170,224,250,.8)}
.tcg-prof__cta--channel{background:linear-gradient(90deg,#2AABEE,#1D8AC7)!important;color:#fff!important;border-color:transparent!important}

/* hero con ragazza: desktop wide, mobile portrait dedicata */
.tcg-hero{background:linear-gradient(180deg,rgba(24,16,52,.5),rgba(24,16,52,.2) 46%,rgba(255,61,138,.16) 74%,rgba(30,26,84,.5)),url("/img/summer/hero2-d.webp") center 34%/cover}
@media(max-width:720px){.tcg-hero{background:linear-gradient(180deg,rgba(24,16,52,.56),rgba(24,16,52,.22) 48%,rgba(255,61,138,.14) 76%,rgba(30,26,84,.52)),url("/img/summer/hero3-m.webp") center 22%/cover}}
.tcg-hero .tcg-lead strong,.tcg-hero .tcg-hero__sub strong{color:#fff!important}
@media(max-width:720px){.tcg-hero{background:linear-gradient(180deg,rgba(24,16,52,.5),rgba(24,16,52,.2) 46%,rgba(255,61,138,.14) 76%,rgba(30,26,84,.5)),url("/img/summer/hero5-m.webp") center 30%/cover}}
@media(max-width:720px){.tcg-hero{background:linear-gradient(180deg,rgba(24,16,52,.5),rgba(24,16,52,.2) 46%,rgba(255,61,138,.14) 76%,rgba(30,26,84,.5)),url("/img/summer/hero9-m.webp") center top/cover}}

/* ===== v13 · HERO MOBILE 2.0 — image-first (2026-07-09) =====
   Restructure ≤720px only: la ragazza (hero10-m = hero5 + canvas d'acqua
   esteso) è un <img> foreground a tutta piega, testo compatto ancorato in
   basso su scrim gradiente, entrambi i CTA nella piega, scroll-cue.
   Desktop >720px intatto: stage e cue sono display:none di default,
   gli span dentro l'H1 restano inline. */
.tcg-hero__stage,.tcg-hero__cue{display:none}
.tcg-hero__stage picture{display:contents}
@keyframes tcgCueBob{0%,100%{transform:translateY(-2px) rotate(45deg);opacity:.45}55%{transform:translateY(4px) rotate(45deg);opacity:.95}}
@media(max-width:720px){
  .tcg-hero{display:flex;flex-direction:column;min-height:calc(100vh - 112px);min-height:calc(100svh - 112px);padding:0!important;background:linear-gradient(180deg,#241A4E,#171040)!important}
  .tcg-hero__stage{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
  .tcg-hero__img{width:100%;height:100%;object-fit:cover;object-position:top center}
  .tcg-hero__scrim{position:absolute;inset:0;background:radial-gradient(120% 55% at 50% 80%,rgba(255,61,138,.16),transparent 62%),linear-gradient(180deg,rgba(23,16,64,.36),rgba(23,16,64,0) 15%),linear-gradient(180deg,rgba(23,16,64,0) 40%,rgba(23,16,64,.42) 57%,rgba(23,16,64,.87) 72%,#171040 90%)}
  .tcg-hero__inner{display:flex;flex-direction:column;justify-content:flex-end;flex:1;padding:0 18px 68px;gap:0}
  /* eyebrow → pill vetro flottante sull'immagine */
  .tcg-hero .tcg-eyebrow{position:absolute;top:14px;right:14px;margin:0;z-index:3;display:inline-flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.13em;color:#fff!important;background:rgba(23,16,64,.5);border:1px solid rgba(255,255,255,.28);padding:7px 11px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:none!important}
  .tcg-hero .tcg-eyebrow::before{width:7px;height:7px;background:#30D158;border-radius:99px;animation:tcg-pulse 2.2s infinite}
  /* H1 compatto: brand su 2 righe + hook come kicker */
  .tcg-hero .tcg-h1{font-size:28px;line-height:1.05;letter-spacing:-.028em;margin:0 0 6px}
  .tcg-hero .tcg-h1 em{display:block;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .tcg-h1__brand{display:block}
  .tcg-h1__hook{display:block;font-family:var(--body);font-size:14px;line-height:1.35;font-weight:600;letter-spacing:-.005em;color:rgba(255,255,255,.95);margin-top:7px}
  /* sub: resta nel DOM intero, visivamente solo la prima frase forte */
  .tcg-hero .tcg-hero__sub{font-size:12.5px;line-height:1.4;margin:0 0 10px;max-width:none;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;opacity:.9}
  .tcg-hero .tcg-hero__sub strong{display:block}
  /* CTA impilati full-width, entrambi nella piega */
  .tcg-hero__ctas{flex-direction:column;gap:9px}
  .tcg-hero__ctas .tcg-btn{width:100%;justify-content:center;padding:14px 20px;font-size:15px}
  .tcg-hero__ctas .tcg-btn--blue{padding:11px 20px;font-size:13.5px}
  .tcg-hero__addlist{font-size:10.5px;text-align:center;margin:8px 0 0;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tcg-hero .tcg-hero__creator{margin-top:6px!important;font-size:11px!important;text-align:center}
  .tcg-hero__cue{display:flex;justify-content:center;margin-top:10px}
  .tcg-hero__cue span{width:9px;height:9px;border-right:2px solid rgba(255,255,255,.8);border-bottom:2px solid rgba(255,255,255,.8);transform:rotate(45deg)}
  @media(prefers-reduced-motion:no-preference){.tcg-hero__cue span{animation:tcgCueBob 1.9s ease-in-out infinite}}
  /* la card featured è ridondante: la ragazza È l'hero su mobile */
  .tcg-hero__feature{display:none}
}

/* v13.1 · hero mobile: gerarchia hook/sub + compattazione schermi bassi */
@media(max-width:720px){
  .tcg-h1__hook{font-size:15px}
  .tcg-hero .tcg-hero__sub{opacity:.78}
}
@media(max-width:720px) and (max-height:740px){
  .tcg-hero .tcg-h1{font-size:25px}
  .tcg-h1__hook{font-size:13.5px;margin-top:5px}
  .tcg-hero__ctas .tcg-btn{padding:12px 18px;font-size:14px}
  .tcg-hero__ctas .tcg-btn--blue{padding:10px 18px;font-size:13px}
  .tcg-hero__cue{display:none}
  .tcg-hero__inner{padding-bottom:64px}
}