/* Vero INCI — articolo SPF 30 vs SPF 50
   Scope locale: solo questa pagina */

body.vi-page-guide-spf{
  --spf-accent: #b45309;
  --spf-accent-2: #f59e0b;
  --spf-accent-3: #fef3c7;
  --spf-border: rgba(148,163,184,.24);
  --spf-shadow: 0 16px 36px rgba(2,6,23,.07);
  --spf-bg-soft: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  --spf-bg-warm: linear-gradient(180deg, rgba(255,251,235,.98), rgba(255,247,237,.96));
}

/* hero split */
body.vi-page-guide-spf .spf-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: 1.2rem;
  align-items: center;
  margin: 1rem 0 1.2rem;
  padding: 1.15rem;
  border: 1px solid var(--spf-border);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(245,158,11,.11), transparent 34%),
    radial-gradient(circle at bottom left, rgba(251,191,36,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,240,.96));
  box-shadow: var(--spf-shadow);
}

body.vi-page-guide-spf .spf-hero__content{
  min-width: 0;
}

body.vi-page-guide-spf .spf-kicker{
  margin: 0 0 .55rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: rgba(2,6,23,.60);
}

body.vi-page-guide-spf .spf-hero .page-title{
  margin: 0 0 .55rem;
  max-width: 18ch;
  letter-spacing: -.03em;
}

body.vi-page-guide-spf .guide-updated{
  margin: 0 0 .75rem;
  font-size: .93rem;
  color: rgba(2,6,23,.68);
}

body.vi-page-guide-spf .guide-updated a{
  font-weight: 700;
}

body.vi-page-guide-spf .spf-hero .page-subtitle{
  max-width: 66ch;
  margin: 0;
}

body.vi-page-guide-spf .spf-pillbar{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

body.vi-page-guide-spf .spf-pill{
  display: inline-flex;
  align-items: center;
  padding: .5rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(180,83,9,.18);
  background: rgba(255,255,255,.82);
  font-size: .88rem;
  color: rgba(2,6,23,.78);
}

body.vi-page-guide-spf .spf-hero__media{
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--spf-border);
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 30px rgba(2,6,23,.06);
}

body.vi-page-guide-spf .spf-hero__media img{
  display: block;
  width: 100%;
  height: auto;
}

/* toc */
body.vi-page-guide-spf .spf-toc{
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* summary cards */
body.vi-page-guide-spf .spf-summary-band{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .95rem;
  margin: 0 0 1.35rem;
}

body.vi-page-guide-spf .spf-summary-card{
  border: 1px solid var(--spf-border);
  border-radius: 22px;
  padding: 1rem 1rem .95rem;
  background: var(--spf-bg-soft);
  box-shadow: 0 12px 24px rgba(2,6,23,.04);
}

body.vi-page-guide-spf .spf-summary-card h2{
  margin: 0 0 .45rem;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

body.vi-page-guide-spf .spf-summary-card p{
  margin: 0;
  color: rgba(2,6,23,.78);
}

/* compare block */
body.vi-page-guide-spf .spf-compare-block{
  margin-top: 1.2rem;
  padding: 1.15rem;
  border: 1px solid var(--spf-border);
  border-radius: 26px;
  background: var(--spf-bg-warm);
  box-shadow: var(--spf-shadow);
}

body.vi-page-guide-spf .spf-compare-head h2{
  margin: .1rem 0 .35rem;
}

body.vi-page-guide-spf .spf-compare-head p{
  margin: 0;
  color: rgba(2,6,23,.76);
}

body.vi-page-guide-spf .spf-compare-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

body.vi-page-guide-spf .spf-level-card{
  border-radius: 22px;
  padding: 1rem 1rem .95rem;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(2,6,23,.05);
}

body.vi-page-guide-spf .spf-level-card--30{
  border-color: rgba(59,130,246,.18);
}

body.vi-page-guide-spf .spf-level-card--50{
  border-color: rgba(245,158,11,.22);
}

body.vi-page-guide-spf .spf-level-label{
  margin: 0 0 .45rem;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(2,6,23,.62);
}

body.vi-page-guide-spf .spf-level-card h3{
  margin: 0 0 .45rem;
  font-size: 1.12rem;
  letter-spacing: -.02em;
}

body.vi-page-guide-spf .spf-level-card p{
  margin: 0;
  color: rgba(2,6,23,.78);
}

body.vi-page-guide-spf .spf-note{
  margin-top: 1rem;
  padding: .95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(245,158,11,.18);
  background: rgba(255,255,255,.78);
  color: rgba(2,6,23,.82);
}

/* split sections */
body.vi-page-guide-spf .spf-split{
  display: grid;
  grid-template-columns: minmax(260px, .92fr) minmax(0, 1.08fr);
  gap: 1.2rem;
  align-items: center;
  margin-top: 1.35rem;
}

body.vi-page-guide-spf .spf-split--media-left{
  grid-template-columns: minmax(260px, .92fr) minmax(0, 1.08fr);
}

body.vi-page-guide-spf .spf-split--media-right{
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, .92fr);
}

body.vi-page-guide-spf .spf-split__text{
  min-width: 0;
}

body.vi-page-guide-spf .spf-split__text h2{
  margin: .1rem 0 .35rem;
}

body.vi-page-guide-spf .spf-split__text p{
  color: rgba(2,6,23,.78);
}

body.vi-page-guide-spf .spf-split__media{
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--spf-border);
  background: rgba(255,255,255,.96);
  box-shadow: var(--spf-shadow);
}

body.vi-page-guide-spf .spf-split__media img{
  display: block;
  width: 100%;
  height: auto;
}

/* checklist bullets */
body.vi-page-guide-spf .vi-checklist{
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
}

body.vi-page-guide-spf .vi-checklist li{
  position: relative;
  margin: 0 0 .72rem;
  padding-left: 1.45rem;
  color: rgba(2,6,23,.82);
  line-height: 1.66;
}

body.vi-page-guide-spf .vi-checklist li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--spf-accent);
  font-weight: 900;
}

/* error grid */
body.vi-page-guide-spf .spf-error-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* read block */
body.vi-page-guide-spf .spf-read-block{
  margin-top: 1.35rem;
  padding: 1.15rem;
  border: 1px solid var(--spf-border);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,248,240,.95));
  box-shadow: var(--spf-shadow);
}

body.vi-page-guide-spf .spf-read-block__head h2{
  margin: .1rem 0 .35rem;
}

body.vi-page-guide-spf .spf-read-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}

body.vi-page-guide-spf .spf-read-item{
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 18px;
  padding: .9rem .9rem .85rem;
  background: rgba(255,255,255,.9);
}

body.vi-page-guide-spf .spf-read-item h3{
  margin: 0 0 .35rem;
  font-size: 1rem;
}

body.vi-page-guide-spf .spf-read-item p{
  margin: 0;
  font-size: .95rem;
  color: rgba(2,6,23,.76);
}

/* final check */
body.vi-page-guide-spf .spf-final-check{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(260px, .98fr);
  gap: 1.2rem;
  align-items: center;
  margin-top: 1.4rem;
  padding: 1.15rem;
  border-radius: 26px;
  border: 1px solid var(--spf-border);
  background:
    radial-gradient(circle at top right, rgba(251,191,36,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,240,.96));
  box-shadow: var(--spf-shadow);
}

body.vi-page-guide-spf .spf-final-check__media{
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--spf-border);
  background: rgba(255,255,255,.96);
}

body.vi-page-guide-spf .spf-final-check__media img{
  display: block;
  width: 100%;
  height: auto;
}

/* faq refinement */
body.vi-page-guide-spf .faq details{
  background: rgba(255,255,255,.92);
}

/* responsive */
@media (max-width: 1080px){
  body.vi-page-guide-spf .spf-summary-band,
  body.vi-page-guide-spf .spf-compare-grid,
  body.vi-page-guide-spf .spf-error-grid,
  body.vi-page-guide-spf .spf-final-check{
    grid-template-columns: 1fr;
  }

  body.vi-page-guide-spf .spf-read-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  body.vi-page-guide-spf .spf-hero,
  body.vi-page-guide-spf .spf-split,
  body.vi-page-guide-spf .spf-split--media-left,
  body.vi-page-guide-spf .spf-split--media-right{
    grid-template-columns: 1fr;
  }

  body.vi-page-guide-spf .spf-hero .page-title{
    max-width: 20ch;
  }
}

@media (max-width: 640px){
  body.vi-page-guide-spf .spf-hero,
  body.vi-page-guide-spf .spf-compare-block,
  body.vi-page-guide-spf .spf-read-block,
  body.vi-page-guide-spf .spf-final-check{
    padding: .95rem;
    border-radius: 20px;
  }

  body.vi-page-guide-spf .spf-read-grid{
    grid-template-columns: 1fr;
  }

  body.vi-page-guide-spf .spf-hero .page-title{
    max-width: 16ch;
  }

  body.vi-page-guide-spf .spf-split__media,
  body.vi-page-guide-spf .spf-final-check__media,
  body.vi-page-guide-spf .spf-hero__media{
    border-radius: 18px;
  }
}

/* fact box al posto dell'immagine nella sezione SPF 30 */
body.vi-page-guide-spf .spf-factbox{
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 24px;
  padding: 1.05rem 1rem 1rem;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,246,255,.96));
  box-shadow: 0 16px 36px rgba(2,6,23,.06);
}

body.vi-page-guide-spf .spf-factbox__kicker{
  margin: 0 0 .45rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: rgba(2,6,23,.58);
}

body.vi-page-guide-spf .spf-factbox h3{
  margin: 0 0 .55rem;
  font-size: 1.18rem;
  letter-spacing: -.02em;
}

body.vi-page-guide-spf .spf-factbox .vi-checklist{
  margin-top: .55rem;
}

.spf-hero__media{
  margin: 0;
}

.spf-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* QPS hero visibility fix */
.spf-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 18px;
  align-items: center;
}

.spf-hero__content{
  min-width: 0;
}

.spf-hero__media{
  display: block !important;
  margin: 0 !important;
  min-width: 0;
}

.spf-hero__media picture{
  display: block !important;
}

.spf-hero__media img{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

@media (max-width: 900px){
  .spf-hero{
    grid-template-columns: 1fr;
  }

  .spf-hero__media{
    order: 2;
  }
}

/* QPS — sezioni senza media: evita colonna vuota a destra */
body.vi-page-guide-spf #viso-corpo.spf-split,
body.vi-page-guide-spf #viso-corpo .spf-split,
body.vi-page-guide-spf #checklist.spf-final-check{
  grid-template-columns: 1fr !important;
}

body.vi-page-guide-spf #viso-corpo .spf-split__content,
body.vi-page-guide-spf #checklist .spf-final-check__text{
  max-width: 76ch;
}

body.vi-page-guide-spf #viso-corpo .spf-split__media,
body.vi-page-guide-spf #checklist .spf-final-check__media{
  display: none !important;
}

body.vi-page-guide-spf #viso-corpo,
body.vi-page-guide-spf #checklist{
  align-items: start;
}

/* QPS — refine text-only sections */
body.vi-page-guide-spf #viso-corpo,
body.vi-page-guide-spf #checklist{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

body.vi-page-guide-spf #viso-corpo .spf-split__content,
body.vi-page-guide-spf #checklist .spf-final-check__text{
  max-width: none;
  padding: 1rem 1.1rem;
  border: 1px solid var(--spf-border);
  border-radius: 20px;
  background: rgba(255,255,255,.76);
}

body.vi-page-guide-spf #checklist .vi-checklist{
  columns: 2;
  column-gap: 1.4rem;
}

body.vi-page-guide-spf #checklist .vi-checklist li{
  break-inside: avoid;
  margin-bottom: .7rem;
}

@media (max-width: 760px){
  body.vi-page-guide-spf #checklist .vi-checklist{
    columns: 1;
  }
}