/* Vero INCI — articolo Water Resistant solari
   Scope locale: solo questa pagina */

body.vi-page-guide-wrs{
  --wrs-accent: #0ea5e9;
  --wrs-accent-2: #06b6d4;
  --wrs-deep: #0f172a;
  --wrs-deep-soft: rgba(15,23,42,.72);
  --wrs-border: rgba(148,163,184,.22);
  --wrs-shadow: 0 18px 40px rgba(2,6,23,.06);
  --wrs-radius-lg: 28px;
  --wrs-radius-md: 22px;
}

/* hero */
body.vi-page-guide-wrs .wrs-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(220px, .78fr);
  gap: 1.25rem;
  align-items: center;
  margin: 1rem 0 1.15rem;
  padding: 1.2rem 1.2rem 1.05rem;
  border-radius: var(--wrs-radius-lg);
  border: 1px solid rgba(14,165,233,.16);
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.10), transparent 30%),
    radial-gradient(circle at top left, rgba(6,182,212,.08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.96));
  box-shadow: var(--wrs-shadow);
}

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

body.vi-page-guide-wrs .wrs-kicker{
  margin: 0 0 .55rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: rgba(15,23,42,.58);
}

body.vi-page-guide-wrs .wrs-hero .page-title{
  margin: 0 0 .65rem;
  max-width: 24ch;
  letter-spacing: -.03em;
}

body.vi-page-guide-wrs .guide-updated{
  margin: 0 0 .8rem;
  color: var(--wrs-deep-soft);
}

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

body.vi-page-guide-wrs .page-subtitle{
  max-width: 60ch;
  margin: 0;
}

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

body.vi-page-guide-wrs .wrs-pill{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .5rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(14,165,233,.16);
  background: rgba(255,255,255,.94);
  color: rgba(15,23,42,.82);
  font-size: .88rem;
  box-shadow: 0 8px 18px rgba(2,6,23,.04);
}

body.vi-page-guide-wrs .wrs-hero__media{
  width: 100%;
  max-width: 300px;
  justify-self: end;
  align-self: center;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(14,165,233,.14);
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 32px rgba(2,6,23,.06);
}

body.vi-page-guide-wrs .wrs-hero__media picture{
  display: block;
}

body.vi-page-guide-wrs .wrs-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* toc */
body.vi-page-guide-wrs .wrs-toc{
  justify-content: center;
  gap: .55rem;
  margin-bottom: 1.15rem;
}

body.vi-page-guide-wrs .wrs-toc a{
  border-radius: 999px;
  border: 1px solid rgba(14,165,233,.16);
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 18px rgba(2,6,23,.04);
}

/* intro */
body.vi-page-guide-wrs .wrs-intro-grid{
  display: grid;
  gap: .95rem;
  margin: 0 0 1.15rem;
}

body.vi-page-guide-wrs .vi-callout{
  margin: 0;
  border-radius: var(--wrs-radius-md);
  box-shadow: 0 12px 24px rgba(2,6,23,.04);
}

body.vi-page-guide-wrs .vi-callout-ok{
  border: 1px solid rgba(6,182,212,.16);
  background: linear-gradient(180deg, rgba(240,253,250,.98), rgba(236,254,255,.94));
}

body.vi-page-guide-wrs .vi-callout-warn{
  border: 1px solid rgba(245,158,11,.16);
  background: linear-gradient(180deg, rgba(255,251,235,.98), rgba(255,247,237,.95));
}

body.vi-page-guide-wrs .wrs-linkbar{
  display: grid;
  gap: .72rem;
  padding: 1rem 1.05rem 1.05rem;
}

body.vi-page-guide-wrs .wrs-linkbar__label{
  display: inline-flex;
  align-items: center;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.66);
}

body.vi-page-guide-wrs .wrs-linkbar__items{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

body.vi-page-guide-wrs .wrs-linkchip{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .56rem .84rem;
  border-radius: 999px;
  border: 1px solid rgba(14,165,233,.18);
  background: rgba(255,255,255,.96);
  color: var(--wrs-deep);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 8px 18px rgba(2,6,23,.04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.vi-page-guide-wrs .wrs-linkchip:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(2,6,23,.06);
  border-color: rgba(14,165,233,.30);
}

body.vi-page-guide-wrs .wrs-note{
  padding: 1rem 1.05rem;
  line-height: 1.72;
  font-size: .99rem;
}

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

body.vi-page-guide-wrs .wrs-summary-card{
  border: 1px solid var(--wrs-border);
  border-radius: var(--wrs-radius-md);
  padding: 1rem 1rem .95rem;
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.07), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,249,255,.94));
  box-shadow: 0 12px 24px rgba(2,6,23,.04);
}

body.vi-page-guide-wrs .wrs-summary-card h2{
  margin: 0 0 .42rem;
  font-size: 1.06rem;
}

/* standard blocks */
body.vi-page-guide-wrs .guide-block,
body.vi-page-guide-wrs .vi-media-block,
body.vi-page-guide-wrs .guide-method,
body.vi-page-guide-wrs .faq,
body.vi-page-guide-wrs .guide-trust{
  border: 1px solid var(--wrs-border);
  border-radius: var(--wrs-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.96));
  box-shadow: 0 14px 30px rgba(2,6,23,.045);
  padding: 1rem 1rem 1.05rem;
}

body.vi-page-guide-wrs .guide-kicker{
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .72rem;
  color: rgba(15,23,42,.56);
}

/* meaning grid */
body.vi-page-guide-wrs .wrs-meaning-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}

body.vi-page-guide-wrs .wrs-meaning-card{
  border: 1px solid rgba(14,165,233,.14);
  border-radius: 20px;
  padding: 1rem .95rem;
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,249,255,.94));
  box-shadow: 0 10px 22px rgba(2,6,23,.04);
}

body.vi-page-guide-wrs .wrs-meaning-card h3{
  margin: 0 0 .38rem;
}

/* not cards */
body.vi-page-guide-wrs .wrs-not-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin-top: .8rem;
}

body.vi-page-guide-wrs .wrs-not-card{
  border: 1px solid rgba(245,158,11,.15);
  border-radius: 20px;
  padding: 1rem .95rem;
  background:
    radial-gradient(circle at top right, rgba(245,158,11,.07), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,237,.95));
  box-shadow: 0 10px 22px rgba(2,6,23,.04);
}

body.vi-page-guide-wrs .wrs-not-card h3{
  margin: 0 0 .38rem;
}

/* scenarios */
body.vi-page-guide-wrs .wrs-scenarios-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

body.vi-page-guide-wrs .wrs-scenario-card{
  border: 1px solid rgba(6,182,212,.14);
  border-radius: 20px;
  padding: .95rem .92rem;
  background:
    radial-gradient(circle at top right, rgba(6,182,212,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,254,255,.94));
  box-shadow: 0 10px 20px rgba(2,6,23,.04);
}

body.vi-page-guide-wrs .wrs-scenario-card h3{
  margin: 0 0 .36rem;
}

/* split section */
body.vi-page-guide-wrs .vi-media{
  gap: 1rem;
  align-items: start;
}

body.vi-page-guide-wrs .wrs-priority-box{
  border: 1px solid rgba(14,165,233,.14);
  border-radius: 22px;
  padding: 1rem .95rem;
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.08), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,249,255,.94));
  box-shadow: 0 12px 24px rgba(2,6,23,.04);
}

body.vi-page-guide-wrs .wrs-priority-box h3{
  margin-top: 0;
}

/* compare */
body.vi-page-guide-wrs .wrs-compare-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .95rem;
}

body.vi-page-guide-wrs .wrs-compare-card{
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 22px;
  padding: 1rem .95rem;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  box-shadow: 0 10px 22px rgba(2,6,23,.04);
}

body.vi-page-guide-wrs .wrs-compare-card h3{
  margin-top: 0;
}

/* generic cards */
body.vi-page-guide-wrs .guide-grid{
  gap: .9rem;
}

body.vi-page-guide-wrs .guide-card{
  border-radius: 20px;
  border: 1px solid rgba(14,165,233,.12);
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.06), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  box-shadow: 0 10px 22px rgba(2,6,23,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.vi-page-guide-wrs .guide-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(2,6,23,.07);
  border-color: rgba(14,165,233,.22);
}

/* checklist block */
body.vi-page-guide-wrs .wrs-checklist-block{
  background:
    radial-gradient(circle at top right, rgba(6,182,212,.08), transparent 28%),
    linear-gradient(180deg, rgba(240,249,255,.98), rgba(248,250,252,.96));
}

body.vi-page-guide-wrs .wrs-checklist-panel{
  border: 1px solid rgba(6,182,212,.14);
  border-radius: 22px;
  padding: 1rem 1rem .95rem;
  background: rgba(255,255,255,.95);
  box-shadow: 0 12px 24px rgba(2,6,23,.04);
}

body.vi-page-guide-wrs .wrs-checklist-note{
  margin: .85rem 0 0;
  padding-top: .85rem;
  border-top: 1px solid rgba(148,163,184,.18);
  color: rgba(15,23,42,.75);
}

body.vi-page-guide-wrs .wrs-checklist-visual{
  margin: 1rem 0 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(14,165,233,.14);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 24px rgba(2,6,23,.05);
}

body.vi-page-guide-wrs .wrs-checklist-visual img{
  display: block;
  width: 100%;
  height: auto;
}

body.vi-page-guide-wrs .wrs-checklist-visual figcaption{
  padding: .72rem .85rem .8rem;
  font-size: .86rem;
  color: rgba(15,23,42,.66);
}

/* faq */
body.vi-page-guide-wrs .faq details{
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 6px 14px rgba(2,6,23,.03);
}

body.vi-page-guide-wrs .faq summary{
  font-weight: 700;
}

/* trust */
body.vi-page-guide-wrs .guide-trust{
  background:
    radial-gradient(circle at top left, rgba(6,182,212,.08), transparent 24%),
    linear-gradient(180deg, rgba(240,253,250,.98), rgba(248,250,252,.96));
}

/* chip */
body.vi-page-guide-wrs .guide-chip{
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(14,165,233,.16);
  color: rgba(15,23,42,.78);
}

/* responsive */
@media (max-width: 1080px){
  body.vi-page-guide-wrs .wrs-summary-band,
  body.vi-page-guide-wrs .wrs-meaning-grid,
  body.vi-page-guide-wrs .wrs-not-grid,
  body.vi-page-guide-wrs .wrs-scenarios-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  body.vi-page-guide-wrs .wrs-compare-grid,
  body.vi-page-guide-wrs .vi-media{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  body.vi-page-guide-wrs .wrs-hero{
    grid-template-columns: 1fr;
    gap: .85rem;
  }

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

  body.vi-page-guide-wrs .wrs-hero__media{
    max-width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 640px){
  body.vi-page-guide-wrs .wrs-hero,
  body.vi-page-guide-wrs .guide-block,
  body.vi-page-guide-wrs .vi-media-block,
  body.vi-page-guide-wrs .guide-method,
  body.vi-page-guide-wrs .faq,
  body.vi-page-guide-wrs .guide-trust{
    padding: .92rem;
    border-radius: 20px;
  }

  body.vi-page-guide-wrs .wrs-hero .page-title{
    max-width: 15ch;
  }

  body.vi-page-guide-wrs .wrs-toc{
    justify-content: flex-start;
  }

  body.vi-page-guide-wrs .wrs-linkbar{
    padding: .92rem .95rem 1rem;
  }

  body.vi-page-guide-wrs .wrs-linkbar__items{
    gap: .45rem;
  }

  body.vi-page-guide-wrs .wrs-linkchip{
    width: 100%;
    justify-content: center;
  }

  body.vi-page-guide-wrs .wrs-summary-band,
  body.vi-page-guide-wrs .wrs-meaning-grid,
  body.vi-page-guide-wrs .wrs-not-grid,
  body.vi-page-guide-wrs .wrs-scenarios-grid,
  body.vi-page-guide-wrs .wrs-compare-grid{
    grid-template-columns: 1fr;
  }
}

/* WRS — hero final horizontal layout */
body.vi-page-guide-wrs .wrs-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, 320px);
  gap: 1.35rem;
  align-items: center;
}

body.vi-page-guide-wrs .wrs-hero__content{
  grid-column: 1;
  min-width: 0;
}

body.vi-page-guide-wrs .wrs-hero__media{
  grid-column: 2;
  width: 100%;
  max-width: 320px;
  justify-self: end;
  align-self: center;
  margin: 0;
}

body.vi-page-guide-wrs .wrs-hero .page-title{
  max-width: 22ch;
}

body.vi-page-guide-wrs .page-subtitle{
  max-width: 58ch;
}

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

@media (max-width: 640px){
  body.vi-page-guide-wrs .wrs-hero{
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  body.vi-page-guide-wrs .wrs-hero__content{
    grid-column: auto;
  }

  body.vi-page-guide-wrs .wrs-hero__media{
    grid-column: auto;
    max-width: 100%;
    justify-self: stretch;
  }

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

/* WRS — link utili come mini-card con thumbnail */
body.vi-page-guide-wrs .wrs-linkbar{
  display: grid;
  gap: .8rem;
  padding: .9rem 1rem 1rem;
}

body.vi-page-guide-wrs .wrs-linkcards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}

body.vi-page-guide-wrs .wrs-linkcard{
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  min-height: 112px;
  padding: .82rem;
  border-radius: 18px;
  border: 1px solid rgba(14,165,233,.16);
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,249,255,.95));
  box-shadow: 0 10px 20px rgba(2,6,23,.04);
  text-decoration: none;
  color: var(--wrs-deep);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.vi-page-guide-wrs .wrs-linkcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(2,6,23,.07);
  border-color: rgba(14,165,233,.26);
}

body.vi-page-guide-wrs .wrs-linkcard__thumb{
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(14,165,233,.14);
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 14px rgba(2,6,23,.04);
}

body.vi-page-guide-wrs .wrs-linkcard__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.vi-page-guide-wrs .wrs-linkcard__body{
  display: grid;
  gap: .28rem;
  min-width: 0;
}

body.vi-page-guide-wrs .wrs-linkcard__badge{
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(14,165,233,.14);
  background: rgba(255,255,255,.92);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(15,23,42,.62);
}

body.vi-page-guide-wrs .wrs-linkcard__title{
  font-size: .98rem;
  line-height: 1.24;
  color: rgba(15,23,42,.94);
}

body.vi-page-guide-wrs .wrs-linkcard__text{
  font-size: .87rem;
  line-height: 1.42;
  color: rgba(15,23,42,.68);
}

@media (max-width: 1080px){
  body.vi-page-guide-wrs .wrs-linkcards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  body.vi-page-guide-wrs .wrs-linkcards{
    grid-template-columns: 1fr;
  }

  body.vi-page-guide-wrs .wrs-linkcard{
    min-height: auto;
  }
}

/* WRS — link cards con immagine sopra e testo sotto */
body.vi-page-guide-wrs .wrs-linkbar{
  display: grid;
  gap: .8rem;
  padding: .9rem 1rem 1rem;
}

body.vi-page-guide-wrs .wrs-linkcards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

body.vi-page-guide-wrs .wrs-linkcard{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: .72rem;
  align-items: start;
  min-height: 0;
  padding: .82rem;
  border-radius: 18px;
  border: 1px solid rgba(14,165,233,.16);
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,249,255,.95));
  box-shadow: 0 10px 20px rgba(2,6,23,.04);
  text-decoration: none;
  color: var(--wrs-deep);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.vi-page-guide-wrs .wrs-linkcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(2,6,23,.07);
  border-color: rgba(14,165,233,.26);
}

body.vi-page-guide-wrs .wrs-linkcard__thumb{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(14,165,233,.14);
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 14px rgba(2,6,23,.04);
}

body.vi-page-guide-wrs .wrs-linkcard__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.vi-page-guide-wrs .wrs-linkcard__body{
  display: grid;
  gap: .28rem;
  min-width: 0;
}

body.vi-page-guide-wrs .wrs-linkcard__badge{
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(14,165,233,.14);
  background: rgba(255,255,255,.92);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(15,23,42,.62);
}

body.vi-page-guide-wrs .wrs-linkcard__title{
  font-size: .98rem;
  line-height: 1.22;
  color: rgba(15,23,42,.94);
}

body.vi-page-guide-wrs .wrs-linkcard__text{
  font-size: .86rem;
  line-height: 1.4;
  color: rgba(15,23,42,.68);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1080px){
  body.vi-page-guide-wrs .wrs-linkcards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  body.vi-page-guide-wrs .wrs-linkcards{
    grid-template-columns: 1fr;
  }
}