/* 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;
}

/* ===== Vero INCI - spf-like-d additions ===== */

.vi-page-guide-spf-like .spf-like-shell {
  width: min(100%, 1080px);
  margin: 0 auto;
}

.vi-page-guide-spf-like .spf-like-kicker {
  margin: 0 0 .55rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .78;
}

.vi-page-guide-spf-like .spf-like-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .85rem 0 1rem;
}

.vi-page-guide-spf-like .spf-like-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .15rem .65rem;
  border: 1px solid rgba(27, 120, 83, .22);
  border-radius: 999px;
  background: #f6fbf8;
  color: #1b7853;
  font-size: .82rem;
  font-weight: 700;
}

.vi-page-guide-spf-like .spf-like-panel {
  margin-top: 1.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
}

.vi-page-guide-spf-like .spf-like-panel > h2 {
  margin-top: 0;
}

.vi-page-guide-spf-like .spf-like-grid-2 {
  display: grid;
  gap: 1rem;
}

.vi-page-guide-spf-like .spf-like-grid-4 {
  display: grid;
  gap: .9rem;
}

.vi-page-guide-spf-like .spf-like-grid-5 {
  display: grid;
  gap: .9rem;
}

.vi-page-guide-spf-like .spf-like-mini-card {
  padding: .95rem 1rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
}

.vi-page-guide-spf-like .spf-like-mini-card h3 {
  margin-top: 0;
  margin-bottom: .55rem;
  font-size: 1rem;
}

.vi-page-guide-spf-like .spf-like-split {
  display: grid;
  gap: 1rem;
  margin-top: 1.35rem;
}

.vi-page-guide-spf-like .spf-like-side-media {
  margin: 0;
}

.vi-page-guide-spf-like .spf-like-side-media img {
  display: block;
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
}

.vi-page-guide-spf-like .spf-like-faq {
  margin-top: 1.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
}

.vi-page-guide-spf-like .spf-like-faq h2 {
  margin-top: 0;
}

.vi-page-guide-spf-like .spf-like-faq details {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #fff;
  padding: .8rem .95rem;
}

.vi-page-guide-spf-like .spf-like-faq details + details {
  margin-top: .75rem;
}

.vi-page-guide-spf-like .spf-like-faq summary {
  cursor: pointer;
  font-weight: 700;
}

.vi-page-guide-spf-like .spf-like-faq details p {
  margin: .75rem 0 0;
}

.vi-page-guide-spf-like .spf-like-method {
  margin-top: 1.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #f8fbf9;
}

.vi-page-guide-spf-like .spf-like-method h2 {
  margin-top: 0;
}

.vi-page-guide-spf-like .spf-like-method-grid {
  display: grid;
  gap: .8rem;
  margin-top: .8rem;
}

.vi-page-guide-spf-like .spf-like-method-item {
  padding: .8rem .9rem;
  border: 1px solid rgba(27, 120, 83, .16);
  border-radius: 12px;
  background: #fff;
}

.vi-page-guide-spf-like .spf-like-method-item p {
  margin: 0;
}

.vi-page-guide-spf-like .spf-like-related {
  margin-top: 1.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
}

.vi-page-guide-spf-like .spf-like-related h2 {
  margin-top: 0;
}

.vi-page-guide-spf-like .spf-like-related-grid {
  display: grid;
  gap: .9rem;
}

.vi-page-guide-spf-like .spf-like-related-card {
  padding: .95rem 1rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
}

.vi-page-guide-spf-like .spf-like-related-card h3 {
  margin-top: 0;
  margin-bottom: .45rem;
  font-size: 1rem;
}

.vi-page-guide-spf-like .spf-like-related-card p {
  margin: 0 0 .7rem;
}

.vi-page-guide-spf-like .spf-like-related-card a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .15rem .7rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  text-decoration: none;
}

@media (min-width: 860px) {
  .vi-page-guide-spf-like .spf-like-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .vi-page-guide-spf-like .spf-like-split {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    align-items: start;
  }

  .vi-page-guide-spf-like .spf-like-method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vi-page-guide-spf-like .spf-like-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== spf-like-d tuning v2.1 ===== */

.vi-page-guide-spf-like .spf-hero {
  gap: 1.75rem;
  padding-top: 1.6rem;
  margin-bottom: 1.25rem;
}

.vi-page-guide-spf-like .spf-hero__content h1,
.vi-page-guide-spf-like .spf-hero h1 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.05;
}

.vi-page-guide-spf-like .lead.page-subtitle {
  font-size: 1.05rem;
  line-height: 1.72;
  max-width: 60ch;
}

.vi-page-guide-spf-like .spf-summary-band {
  gap: 1rem;
  margin-top: 1.2rem;
  margin-bottom: 1.4rem;
}

.vi-page-guide-spf-like .spf-summary-card {
  min-height: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.vi-page-guide-spf-like .spf-like-panel {
  margin-top: 1.55rem;
  padding: 1.15rem 1.2rem;
}

.vi-page-guide-spf-like .spf-like-split {
  margin-top: 1.55rem;
}

.vi-page-guide-spf-like .spf-like-side-media img,
.vi-page-guide-spf-like .spf-hero__media img {
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.vi-page-guide-spf-like .spf-like-faq {
  margin-top: 1.55rem;
}

.vi-page-guide-spf-like .spf-like-method {
  margin-top: 1.55rem;
}

.vi-page-guide-spf-like .spf-like-related {
  margin-top: 1.55rem;
}

.vi-page-guide-spf-like .spf-like-related-card {
  min-height: 100%;
}

@media (min-width: 860px) {
  .vi-page-guide-spf-like .spf-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  }
}

/* ===== spf-like-d step2 checklist box ===== */

.vi-page-guide-spf-like .spf-like-side-checklist {
  padding: 1rem 1.05rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffaf2 0%, #fff 100%);
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
}

.vi-page-guide-spf-like .spf-like-side-checklist h3 {
  margin-top: 0;
  margin-bottom: .75rem;
}

.vi-page-guide-spf-like .spf-like-side-checklist p {
  margin-top: 0;
}

.vi-page-guide-spf-like .spf-like-checklist {
  margin: .9rem 0 0;
  padding-left: 1.15rem;
}

.vi-page-guide-spf-like .spf-like-checklist li + li {
  margin-top: .45rem;
}

/* ===== spf-like-d step3 visual aside ===== */

.vi-page-guide-spf-like .spf-like-side-visual {
  margin: 0;
}

.vi-page-guide-spf-like .spf-like-side-visual picture,
.vi-page-guide-spf-like .spf-like-side-visual img {
  display: block;
  width: 100%;
}

.vi-page-guide-spf-like .spf-like-side-visual img {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

/* ===== spf-like-d final micro-tuning ===== */

.vi-page-guide-spf-like .spf-hero {
  margin-bottom: 1.45rem;
}

.vi-page-guide-spf-like .spf-hero h1 {
  max-width: 12ch;
}

.vi-page-guide-spf-like .spf-summary-card,
.vi-page-guide-spf-like .spf-like-panel,
.vi-page-guide-spf-like .spf-like-faq,
.vi-page-guide-spf-like .spf-like-method,
.vi-page-guide-spf-like .spf-like-related {
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.vi-page-guide-spf-like .spf-like-related-card {
  padding: 1rem 1.05rem;
}

.vi-page-guide-spf-like .spf-like-related-card p {
  min-height: 3.2em;
}

/* VI:SPF-LIKE:RELATED-IMAGES:V1 */
body.vi-page-guide .spf-like-related--images .spf-like-related-card{
  padding: 0;
  overflow: hidden;
}

body.vi-page-guide .spf-like-related-card__link{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: inherit;
  text-decoration: none;
}

body.vi-page-guide .spf-like-related-card__link:hover{
  text-decoration: none;
}

body.vi-page-guide .spf-like-related-card__thumb{
  display: block;
  margin: .9rem .9rem .35rem;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(248,250,252,.92);
}

body.vi-page-guide .spf-like-related-card__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.vi-page-guide .spf-like-related-card__body{
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
  padding: .45rem 1rem 1rem;
}

body.vi-page-guide .spf-like-related-card__title{
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: .42rem .72rem;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.88);
  color: #00c853;
  font-weight: 850;
  line-height: 1.15;
}

body.vi-page-guide .spf-like-related-card__text{
  color: rgba(2,6,23,.82);
  line-height: 1.58;
}

@media (max-width: 720px){
  body.vi-page-guide .spf-like-related-card__link{
    flex-direction: row;
    align-items: stretch;
  }

  body.vi-page-guide .spf-like-related-card__thumb{
    flex: 0 0 104px;
    margin: .85rem 0 .85rem .85rem;
    aspect-ratio: 1 / 1;
  }

  body.vi-page-guide .spf-like-related-card__body{
    padding: .85rem .85rem .85rem .75rem;
  }

  body.vi-page-guide .spf-like-related-card__title{
    padding: .35rem .58rem;
    font-size: .94rem;
  }

  body.vi-page-guide .spf-like-related-card__text{
    font-size: .95rem;
  }
}

@media (max-width: 420px){
  body.vi-page-guide .spf-like-related-card__thumb{
    flex-basis: 88px;
  }
}

/* VI:SPF-LIKE:RELATED-IMAGES:V2-MAGAZINE */
body.vi-page-guide .spf-like-related.spf-like-related--images{
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.88));
  box-shadow: 0 16px 40px rgba(15,23,42,.045);
}

body.vi-page-guide .spf-like-related.spf-like-related--images h2{
  margin: 0 0 .85rem;
  font-size: clamp(1.22rem, 2vw, 1.55rem);
  letter-spacing: -.025em;
}

body.vi-page-guide .spf-like-related--images .spf-like-related-grid{
  gap: clamp(.85rem, 1.8vw, 1.15rem);
}

body.vi-page-guide .spf-like-related--images .spf-like-related-card{
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.09);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 26px rgba(15,23,42,.055);
  overflow: hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

body.vi-page-guide .spf-like-related--images .spf-like-related-card::before,
body.vi-page-guide .spf-like-related--images .spf-like-related-card::after{
  content: none !important;
}

body.vi-page-guide .spf-like-related--images .spf-like-related-card:hover{
  transform: translateY(-3px);
  border-color: rgba(16,185,129,.28);
  box-shadow: 0 18px 42px rgba(15,23,42,.10);
}

body.vi-page-guide .spf-like-related-card__link{
  min-height: 100%;
}

body.vi-page-guide .spf-like-related-card__thumb{
  margin: 0;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
  background: rgba(241,245,249,.95);
}

body.vi-page-guide .spf-like-related-card__thumb img{
  transform: scale(1.01);
  transition: transform .22s ease;
}

body.vi-page-guide .spf-like-related-card:hover .spf-like-related-card__thumb img{
  transform: scale(1.045);
}

body.vi-page-guide .spf-like-related-card__body{
  padding: .95rem 1rem 1.05rem;
  gap: .52rem;
}

body.vi-page-guide .spf-like-related-card__title{
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #02884f;
  font-size: 1.02rem;
  font-weight: 850;
  line-height: 1.22;
  letter-spacing: -.015em;
}

body.vi-page-guide .spf-like-related-card__text{
  margin: 0;
  color: rgba(15,23,42,.76);
  font-size: .96rem;
  line-height: 1.58;
}

body.vi-page-guide .spf-like-related-card__link:focus-visible{
  outline: 3px solid rgba(16,185,129,.38);
  outline-offset: -3px;
  border-radius: 22px;
}

@media (max-width: 720px){
  body.vi-page-guide .spf-like-related.spf-like-related--images{
    padding: .9rem;
    border-radius: 20px;
  }

  body.vi-page-guide .spf-like-related--images .spf-like-related-grid{
    gap: .75rem;
  }

  body.vi-page-guide .spf-like-related-card__link{
    flex-direction: row;
  }

  body.vi-page-guide .spf-like-related-card__thumb{
    flex: 0 0 112px;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    margin: .75rem 0 .75rem .75rem;
  }

  body.vi-page-guide .spf-like-related-card__body{
    padding: .8rem .85rem .8rem .75rem;
  }

  body.vi-page-guide .spf-like-related-card__title{
    font-size: .96rem;
  }

  body.vi-page-guide .spf-like-related-card__text{
    font-size: .92rem;
    line-height: 1.48;
  }
}

@media (max-width: 460px){
  body.vi-page-guide .spf-like-related-card__thumb{
    flex-basis: 92px;
  }
}

/* VI:SPF-LIKE:RELATED-IMAGES:V3-NO-CIRCLES */
body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card,
body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card--media{
  background: #fff !important;
  background-image: none !important;
}

body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card::before,
body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card::after,
body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card--media::before,
body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card--media::after{
  content: "" !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card__link::before,
body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card__link::after,
body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card__thumb::before,
body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card__thumb::after,
body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card__body::before,
body.vi-page-guide .spf-like-related.spf-like-related--images .spf-like-related-card__body::after{
  content: "" !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* VI:SPF-LIKE:RELATED-IMAGES:V4-HARD-RESET */
.spf-like-related.spf-like-related--images .spf-like-related-card,
.spf-like-related.spf-like-related--images .spf-like-related-card.spf-like-related-card--media{
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.07) !important;
  clip-path: none !important;
}

.spf-like-related.spf-like-related--images .spf-like-related-card::before,
.spf-like-related.spf-like-related--images .spf-like-related-card::after,
.spf-like-related.spf-like-related--images .spf-like-related-card.spf-like-related-card--media::before,
.spf-like-related.spf-like-related--images .spf-like-related-card.spf-like-related-card--media::after{
  content: none !important;
  display: none !important;
}

.spf-like-related.spf-like-related--images .spf-like-related-card__link{
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.spf-like-related.spf-like-related--images .spf-like-related-card__link::before,
.spf-like-related.spf-like-related--images .spf-like-related-card__link::after{
  content: none !important;
  display: none !important;
}

.spf-like-related.spf-like-related--images .spf-like-related-card__thumb{
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.spf-like-related.spf-like-related--images .spf-like-related-card__thumb img{
  border-radius: 0 !important;
}

.spf-like-related.spf-like-related--images .spf-like-related-card__body{
  position: relative !important;
  z-index: 2 !important;
  background: #fff !important;
  border-radius: 0 !important;
}

@media (max-width: 720px){
  .spf-like-related.spf-like-related--images .spf-like-related-card__thumb{
    border-radius: 14px !important;
    margin: .75rem 0 .75rem .75rem !important;
  }
}

/* === Vero INCI — checklist readability fix R01 === */
body.vi-page-guide-spf-like .spf-like-side-visual {
  background: #fffdf7;
}

body.vi-page-guide-spf-like .spf-like-side-visual picture,
body.vi-page-guide-spf-like .spf-like-side-visual img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.vi-page-guide-spf-like .spf-like-side-visual img {
  object-fit: contain !important;
  background: #fffdf7;
}

/* === Vero INCI — visible updated date R01 === */
body.vi-page-guide-spf-like .vi-explainer-updated {
  margin: .85rem 0 0;
  color: #5f6f66;
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.45;
}

body.vi-page-guide-spf-like .vi-explainer-updated::before {
  content: "✓ ";
  color: #376b54;
}