/* =========================================================
   Vero INCI — prodotto.v1.css (CLEAN)
   Coerente con index.html (product-page / product-hero-body / product-hero-side)
   Obiettivi:
   - pannelli sinistra/destra + box sotto (affiliazione/correlati) con padding laterale ✅
   - CTA correlati full-width (anche sotto miniatura) ✅
   - bottoni affiliazione centrati ✅
   - subnav a pill centrata, senza righe/pannelli strani ✅
   ========================================================= */

:root{
  --vi-product-max: 1180px;
  --vi-product-side: 420px;
  --vi-product-body: 900px;

  --vi-gap: clamp(1rem, 1vw + .8rem, 1.6rem);
  --vi-radius: 16px;

  --vi-border: rgba(0,0,0,.08);
  --vi-ink: var(--ink, #0f172a);
  --vi-muted: var(--muted, #374151);

  --vi-accent: var(--product-accent, #0a6b4a);
}

/* base */
body.product-page{
  color: var(--vi-ink);
  overflow-x: hidden;
}
body.product-page #main{ position: relative; z-index: 1; }

/* container */
.product-page .product-shell{
  max-width: var(--vi-product-max);
  width: 100%;
  margin: 0 auto;
  padding: 16px 18px 24px;
  box-sizing: border-box;
}

/* breadcrumbs */
.product-page .breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: .35rem .6rem;
  margin: 10px 0 16px;
  font-size: .95rem;
  color: rgba(55,65,81,.9);
}
.product-page .breadcrumbs a{
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}
.product-page .breadcrumbs a:hover,
.product-page .breadcrumbs a:focus-visible{ text-decoration: underline; }

/* =========================================================
   HERO: griglia 2 colonne (desktop)
   sinistra: .product-hero-body
   destra:  .product-hero-side (card unica con img + CTA + extra)
   ========================================================= */
.product-page .product-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--vi-product-side);
  gap: 28px;
  align-items: start;
}

/* pannelli principali (sinistra/destra + sotto) */
.product-page .product-hero-body,
.product-page .product-hero-side,
.product-page .product-hero-below,
.product-page .product-related{
  background: #fff;
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-radius);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

/* PADDING LATERALE COLONNA SINISTRA (fix “testo a filo”) */
.product-page .product-hero-body{
  padding: 16px 18px;
  box-sizing: border-box;
}

/* H1 2 righe (come nel tuo HTML) */
.product-page .product-hero-body > h1{
  margin: 6px 0 10px;
  text-align: center;
  font-size: clamp(1.9rem, 1.35rem + 1.8vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.product-page .product-hero-body > h1 .h1-main{ display:block; }
.product-page .product-hero-body > h1 .h1-sub{ display:block; white-space: nowrap; }
@media (max-width: 420px){
  .product-page .product-hero-body > h1 .h1-sub{ white-space: normal; }
}

/* quick cards: In breve / Checklist / Sicurezza / Link utili */
.product-page .product-left-bottom{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.product-page .product-left-bottom .quick-card{
  border: 1px solid var(--vi-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(0,0,0,.02);
}
.product-page .product-left-bottom .quick-card h2{
  font-size: 1rem;
  margin: 0 0 8px 0;
}
.product-page .product-left-bottom .quick-card ul{
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}
.product-page .product-left-bottom .quick-card .note{
  margin: 8px 0 0;
  font-size: .92rem;
  color: rgba(55,65,81,.85);
}
@media (max-width: 920px){
  .product-page .product-left-bottom{ grid-template-columns: 1fr; }
}

/* lead + highlights */
.product-page .lead{
  margin: 12px 0 0;
  max-width: var(--vi-product-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--vi-muted);
}
.product-page .product-highlights{
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.6;
}
.product-page .product-highlights li{ margin: 6px 0; }
.product-page .product-note{
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--vi-border);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
  color: rgba(17,24,39,.92);
}

/* =========================================================
   SHARE block (include /includes/ui/share-block.html)
   ========================================================= */
.product-page .vi-share-wrap{ margin: 12px 0 10px; }
.product-page .vi-share-title{
  font-weight: 800;
  font-size: .95rem;
  margin: 0 0 .45rem;
  text-align: center;
}
.product-page .vi-share{
  display:flex;
  flex-wrap:wrap;
  gap: .45rem;
  align-items:center;
  justify-content: center;
}
.product-page .vi-share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .42rem .72rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  color: var(--vi-accent);
  text-decoration:none;
  font-weight: 650;
  font-size: .9rem;
  line-height: 1;
}
.product-page .vi-share-btn:hover,
.product-page .vi-share-btn:focus-visible{
  border-color: rgba(11,126,61,.40);
  background: rgba(46,204,113,.10);
  outline: none;
}

/* =========================================================
   BOX SOTTO (affiliazione + colonna dx placeholder)
   ========================================================= */
.product-page .product-hero-below{
  margin-top: 14px;
  padding: 14px 16px;
}
.product-page .product-hero-below__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 920px){
  .product-page .product-hero-below__grid{ grid-template-columns: 1fr; }
}

/* affiliazione: padding laterale + bottoni centrati */
.product-page .product-affiliate-note{
  border: 1px solid var(--vi-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(11,126,61,.05);
  line-height: 1.65;
}
.product-page .product-affiliate-note p{ margin: 0 0 10px; }
.product-page .product-affiliate-note p:last-child{ margin-bottom: 0; }

.product-page .product-affiliate-note .affiliate-actions{
  display:flex;
  justify-content:center;     /* ✅ centro */
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.product-page .product-affiliate-note .affiliate-actions .btn{
  min-width: 180px;
}
@media (max-width: 640px){
  .product-page .product-affiliate-note .affiliate-actions .btn{
    min-width: 0;
    width: 100%;
    max-width: 340px;
  }
}

/* =========================================================
   COLONNA DESTRA (card unica)
   ========================================================= */
.product-page .product-hero-side{
  width: var(--vi-product-side);
  max-width: var(--vi-product-side);
  justify-self: end;
  padding: 16px;
  display:grid;
  gap: 12px;
  box-sizing: border-box;
}

/* media dentro card */
.product-page .product-hero-media{
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 12px;
}
.product-page .product-hero-media img{
  width: 100%;
  max-width: 260px;
  height: auto;
  display:block;
}

/* CTA box */
.product-page .product-cta{
  border: 1px solid var(--vi-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(10,107,74,.04);
}
.product-page .product-cta p{ margin: 0 0 10px; }
.product-page .product-meta{ margin: 0 0 8px; }

/* viCopy01 — messaggi “copiato” (CTA + affiliazione).
   Evita spazio vuoto quando empty e mantiene feedback vicino ai bottoni */
.product-page .copy-status{
  margin: 8px 0 0;
  font-size: .92rem;
  font-weight: 650;
  color: var(--vi-muted);
}
.product-page .copy-status:empty{ display:none; }
.product-page .product-cta .copy-status{ margin: 10px 0 0; }

/* viCTA01 - CTA: 2 pulsanti affiancati 50/50 + copy full-width */
.product-page .product-cta-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

/* viCTAmob01 — mobile: CTA verticali full-width */
@media (max-width: 520px){
  .product-page .product-cta-actions{
    grid-template-columns: 1fr;
  }
  /* assicurati che i bottoni riempiano bene senza cambiare “forma” */
  .product-page .product-cta-actions > .btn{
    width: 100%;
    min-width: 0;
  }
}
/* viCTA02 — CTA buttons: stile base .btn, 1 riga, niente sbordi */
.product-page .product-cta-actions > .btn{
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* micro-shrink SOLO font su mobile (mantiene padding/altezza come gli altri .btn) */
@media (max-width: 420px){
  .product-page .product-cta-actions > .btn{ font-size: 0.82rem; }
}
@media (max-width: 360px){
  .product-page .product-cta-actions > .btn{ font-size: 0.78rem; }
}
/* Bottoni generici */
.product-page .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .45rem;
  padding: .62rem 1.1rem;
  border-radius: .9rem;
  border: 1px solid transparent;
  text-decoration:none;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.product-page .btn-primary{
  background: #0b7e3d;
  color:#fff;
  box-shadow: 0 10px 24px rgba(11,126,61,.22);
}
.product-page .btn-primary:hover,
.product-page .btn-primary:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(11,126,61,.28);
}
.product-page .btn.alt{
  background: #fff;
  color: var(--vi-ink);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.product-page .btn.alt:hover,
.product-page .btn.alt:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(46,204,113,.35);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

/* CTA: “Copia referral” sempre full width */
.product-page .product-cta .btn.copy-ref{
  grid-column: 1 / -1;
  width: 100%;
}
/* Riepilogo sotto CTA */
.product-page .product-cta-summary{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.product-page .product-cta-summary__title{
  margin: 8px 0 6px;
  font-size: 1rem;
}
.product-page .product-cta-summary__list{
  margin: 0 0 10px;
  padding-left: 18px;
  line-height: 1.6;
}
.product-page .product-cta-summary__hint{
  margin: 0;
  font-size: .95rem;
  color: var(--vi-muted);
}

/* Box extra (acquisto/condizioni) */
.product-page .product-side-extra{
  border: 1px solid var(--vi-border);
  border-radius: 16px;
  background: #fff;
  padding: 12px 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.product-page .product-side-extra h2{
  margin: 0 0 8px 0;
  font-size: 1rem;
}
.product-page .product-side-extra h3{
  margin: 12px 0 6px 0;
  font-size: .95rem;
}
.product-page .product-side-extra ul{
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}
.product-page .product-side-extra p{ margin: 10px 0 0; }
.product-page .product-side-extra .side-links{
  margin-top: 10px;
  font-size: .95rem;
}
.product-page .product-side-extra .side-links a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   CORRELATI
   ========================================================= */
.product-page .product-related{
  margin-top: 14px;
  padding: 14px 16px;
}
.product-page .product-related__head h2{
  margin: 0;
  font-size: 1.05rem;
}
.product-page .product-related__sub{
  margin: .35rem 0 .8rem;
  opacity: .9;
  font-size: .95rem;
}

.product-page .product-related__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 920px){
  .product-page .product-related__grid{ grid-template-columns: 1fr; }
}

/* card */
.product-page .pr-card{
  border: 1px solid var(--vi-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  display:grid;
  grid-template-columns: 88px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: .75rem;
  row-gap: .55rem;
  padding: 10px;
  align-items:start;
}
.product-page .pr-card__media{
  grid-column: 1;
  grid-row: 1;
  display:block;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow:hidden;
  background: #f6f7f7;
}
.product-page .pr-card__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.product-page .pr-card__body{
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.product-page .pr-card__title{
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}
.product-page .pr-card__title a{
  color: inherit;
  text-decoration: none;
}
.product-page .pr-card__title a:hover{ text-decoration: underline; }
.product-page .pr-card__why{
  margin: .35rem 0 0;
  font-size: .92rem;
  opacity: .9;
  line-height: 1.45;
}

/* CTA sotto: prende tutta la larghezza (anche sotto miniatura) */
.product-page .pr-card__actions{
  grid-column: 1 / -1;
  grid-row: 2;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  width: 100%;
}
.product-page .pr-card__actions > .btn{
  width: 100%;
  max-width: none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space: nowrap;
  line-height: 1.1;
  padding: .55rem .7rem;
  box-sizing: border-box;
}
@media (max-width: 560px){
  .product-page .pr-card__actions{
    grid-template-columns: 1fr;
  }
  .product-page .pr-card__actions > .btn{
    white-space: normal;
  }
}

/* =========================================================
   SUBNAV (pill centrati)
   ========================================================= */
body.product-page .product-subnav{
  margin: 10px auto 16px;
  max-width: 860px;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: .45rem .55rem;

  position: relative;
  z-index: 5;
}
body.product-page .product-subnav a{
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  display:inline-flex;
  align-items:center;

  padding: .42rem .72rem;
  line-height: 1.15;
  text-decoration:none;
  font-weight: 700;
  color: var(--vi-ink);
}
body.product-page .product-subnav a:hover{
  border-color: rgba(11,126,61,.35);
}

/* =========================================================
   CONTENUTO (box unico sotto tabs)
   ========================================================= */
.product-page .product-content{
  max-width: var(--vi-product-max);
  margin: 14px auto 0;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--vi-border);
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}
.product-page .product-section{
  max-width: var(--vi-product-body);
  margin: 0 auto;
  padding: 0;
}
.product-page .product-section + .product-section{ margin-top: 14px; }

.product-page .product-section h2{
  margin: 0 0 .55rem;
  font-size: 1.35rem;
  line-height: 1.25;
}
.product-page .product-section p{
  margin: .5rem 0;
  line-height: 1.7;
}
.product-page .product-section ul{
  margin: .6rem 0 1rem;
  padding-left: 18px;
  line-height: 1.65;
}
.product-page table{
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .98rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  overflow: hidden;
  border-radius: .9rem;
}
.product-page table th,
.product-page table td{
  padding: .75rem .95rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
  background: #fff;
  text-align:left;
}
.product-page table th{
  background: rgba(46,204,113,.10);
  font-weight: 800;
}
.product-page table tr:last-child td{ border-bottom: none; }

/* FAQ */
.product-page details{
  margin: .85rem 0;
  padding: .9rem 1rem;
  border-radius: .9rem;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.product-page details summary{
  cursor:pointer;
  font-weight: 800;
}
.product-page details[open]{
  background: rgba(46,204,113,.06);
  border-color: rgba(46,204,113,.45);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 920px){
  .product-page .product-hero{
    grid-template-columns: 1fr;
  }
  .product-page .product-hero-side{
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 640px){
  .product-page .product-shell{
    padding: 14px 14px 22px;
  }
  .product-page .product-hero-body{
    padding: 14px 14px;
  }
  .product-page .product-hero-below,
  .product-page .product-related{
    padding: 12px 12px;
  }
  .product-page .product-content{
    padding: 14px 14px;
  }
}

/* =========================================================
   DARK MODE (se usi html.vi-dark)
   ========================================================= */
html.vi-dark body.product-page{
  color: rgba(255,255,255,.92);
}
html.vi-dark .product-page :is(.product-hero-body,.product-hero-side,.product-hero-below,.product-related,.product-content){
  background: rgba(18,22,21,.92);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
}
html.vi-dark .product-page .btn.alt{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.18);
}
html.vi-dark .product-page .vi-share-btn{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.18);
}
html.vi-dark body.product-page .product-subnav a{
  background: rgba(18,22,21,.92);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}

/* viPr29 — FINAL (unico): Desktop 2-col (benefici/modo-uso) + correlati CTA in basso, no clipping */
@media (min-width: 980px){
  body.product-page .product-content{
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 18px 24px;
    align-items: start;
  }
  body.product-page .product-content #benefici{ grid-column: 1; }
  body.product-page .product-content #modo-uso{ grid-column: 2; }

  body.product-page .product-content #valori,
  body.product-page .product-content #ingredienti,
  body.product-page .product-content #avvertenze,
  body.product-page .product-content #faq,
  body.product-page .product-content #fonti{
    grid-column: 1 / -1;
  }

  body.product-page .product-content .product-section{
    max-width: none;
    margin: 0;
  }
}
@media (max-width: 979px){
  body.product-page .product-content{ display: block; }
}

/* correlati: CTA sempre in basso nella card */
body.product-page .product-related__grid{ align-items: stretch; }

body.product-page .product-related .pr-card{
  height: 100%;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: .75rem;
  row-gap: .55rem;
}

body.product-page .product-related .pr-card__actions{
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
}

/* bottoni: testo sempre dentro, no tagli */
body.product-page .product-related .pr-card__actions > .btn{
  line-height: 1.2;
  padding: .52rem .72rem;
  min-height: 40px;
  white-space: nowrap;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 420px){
  body.product-page .product-related .pr-card__actions > .btn{
    font-size: .88rem;
    padding: .52rem .62rem;
  }
}

/* viPr30 — Hero-below: stack (Trasparenza sopra, Acquisto sotto) */
body.product-page .product-hero-below__grid{
  grid-template-columns: minmax(0,1fr) !important;
}

/* viPr32 — Sidebar destra sticky (desktop): evita “vuoto” mentre scorri la colonna sinistra */
@media (min-width: 980px){
  /* sticky non funziona se un parent ha overflow non-visible */
  body.product-page .product-hero,
  body.product-page .product-hero-body{
    overflow: visible;
  }

  body.product-page .product-hero-side{
    position: sticky;
    top: 92px;       /* se serve: 72/80/96 in base all’altezza header */
    align-self: start;
  }
}


/* viMeta01 — meta sotto H1 (Aggiornato + Tempo lettura) */
.product-page .product-hero-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  align-items: center;
  justify-content: center;
}
.product-page .product-hero-meta .meta-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--vi-border);
  border-radius: 14px;
  background: rgba(10,107,74,.04);
  line-height: 1.1;
  font-size: 0.95rem;
}
@media (max-width: 420px){
  .product-page .product-hero-meta .meta-pill{ font-size: 0.9rem; }
}

/* viRelBTN01: ghost+mobile (Apri scheda vs Vai a Swisscare) */
.product-page .btn-ghost,
.product-page .btn.alt{
  background:#fff;
  color:var(--ink,#0f172a);
  border:1px solid rgba(0,0,0,0.12);
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
}
.product-page .btn-ghost:hover,
.product-page .btn-ghost:focus-visible,
.product-page .btn.alt:hover,
.product-page .btn.alt:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(46,204,113,0.35);
  box-shadow:0 12px 26px rgba(0,0,0,0.08);
}
@media (max-width:560px){
  .product-page .related-actions,
  .product-page .pr-card__actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .product-page .related-actions .btn,
  .product-page .pr-card__actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* viRelBTN02: related 50/50 + allineamento pulsanti */
.product-page .related-card .related-body,
.product-page .pr-card .related-body{
  display:flex;
  flex-direction:column;
  min-width:0;
  width:100%;
}

.product-page .related-actions,
.product-page .pr-card__actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:stretch;
}

.product-page .related-actions .btn,
.product-page .pr-card__actions .btn{
  width:100%;
  justify-content:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:44px;
}

@media (max-width:560px){
  .product-page .related-actions,
  .product-page .pr-card__actions{
    gap:10px;
  }
  .product-page .related-actions .btn,
  .product-page .pr-card__actions .btn{
    font-size:.95rem;
    padding:.68rem .85rem;
  }
}


/* viRelBTN03: related actions under image (50/50 inline + allineati) */
body.product-page .product-related__grid{ align-items: stretch; }

body.product-page .product-related .pr-card{
  --rel-media: 88px;
  --rel-gap: .75rem;
  height: 100%;
  display: grid;
  grid-template-columns: var(--rel-media) minmax(0, 1fr);
  column-gap: var(--rel-gap);
  row-gap: .55rem;
}

body.product-page .product-related .related-img{ grid-column: 1; }
body.product-page .product-related .related-body{
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.product-page .product-related .pr-card__actions{
  margin-top: auto;
  margin-left: calc(-1 * (var(--rel-media) + var(--rel-gap)));
  width: calc(100% + var(--rel-media) + var(--rel-gap));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  align-items: stretch;
}

body.product-page .product-related .pr-card__actions > .btn{
  width: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width:560px){
  body.product-page .product-related .pr-card{ --rel-media: 72px; }
  body.product-page .product-related .pr-card__actions > .btn{
    white-space: normal;
    padding: .55rem .6rem;
  }
}


/* viRelBTN04: related clamp heights (pulsanti allineati anche con testi lunghi) */
body.product-page .product-related .related-body h3{
  line-height: 1.2;
  min-height: calc(1.2em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body.product-page .product-related .related-body h3 a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body.product-page .product-related .related-desc{
  line-height: 1.35;
  min-height: calc(1.35em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}