/*
 * StudioShopping single editorial layout v2
 * Classi applicate dal detector runtime, quindi indipendenti dai nomi
 * originali del template PHP.
 */

:root {
  --ss-article-text-target: 1200px;
  --ss-article-media-target: 1320px;
  --ss-article-side-gutter: 32px;
}

body.ss-wide-article-page {
  overflow-x: clip;
}

/*
 * Il trucco qui è intenzionale:
 * anche se il vecchio template tiene il testo dentro un wrapper da ~900px,
 * ogni blocco editoriale "esce" dal wrapper e viene centrato alla nuova
 * larghezza. Quindi il vecchio max-width non può più annullare la patch.
 */
body.ss-wide-article-page .ss-wide-article-flow {
  box-sizing: border-box !important;
  width: min(
    var(--ss-article-text-target),
    calc(100vw - (var(--ss-article-side-gutter) * 2))
  ) !important;
  max-width: none !important;

  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Headings e paragrafi restano nel normale ritmo verticale. */
body.ss-wide-article-page :is(h2,h3,h4).ss-wide-article-flow {
  margin-top: clamp(38px, 4.2vw, 62px) !important;
  margin-bottom: 18px !important;
}

body.ss-wide-article-page p.ss-wide-article-flow {
  margin-top: 0 !important;
  margin-bottom: 1.25em !important;
}

/*
 * Le immagini sono volutamente più larghe del testo (+120px desktop),
 * ma restano dentro il viewport.
 */
body.ss-wide-article-page .ss-wide-article-media {
  box-sizing: border-box !important;
  width: min(
    var(--ss-article-media-target),
    calc(100vw - 40px)
  ) !important;
  max-width: none !important;

  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: clamp(32px, 4vw, 54px) !important;
  margin-bottom: clamp(36px, 4.4vw, 62px) !important;
}

/* Wrapper media */
body.ss-wide-article-page .ss-wide-article-media > img,
body.ss-wide-article-page figure.ss-wide-article-media img,
body.ss-wide-article-page .ss-wide-article-media > picture,
body.ss-wide-article-page .ss-wide-article-media > picture > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Immagine diretta */
body.ss-wide-article-page img.ss-wide-article-media {
  display: block !important;
  height: auto !important;
  object-fit: cover;
  border-radius: 18px;
}

body.ss-wide-article-page figure.ss-wide-article-media {
  padding: 0 !important;
}

body.ss-wide-article-page figure.ss-wide-article-media img {
  border-radius: 18px;
}

body.ss-wide-article-page figure.ss-wide-article-media figcaption {
  width: 100% !important;
  max-width: none !important;
  padding: 8px 4px 0 !important;
}

/*
 * Sicurezza frontend: se un vecchio articolo contiene ancora i controlli
 * ↑ ↓ × salvati per errore, non devono essere renderizzati.
 */
body:not(.ss-admin) .ss-block-controls,
body:not(.ss-admin) .ss-drag-handle,
body:not(.ss-admin) .ss-insertion-marker,
body:not(.ss-admin) [data-ss-insertion-marker] {
  display: none !important;
}

/* Mobile: testo e immagini quasi full-width, senza overflow. */
@media (max-width: 760px) {
  :root {
    --ss-article-side-gutter: 18px;
  }

  body.ss-wide-article-page .ss-wide-article-flow {
    width: calc(100vw - 36px) !important;
  }

  body.ss-wide-article-page .ss-wide-article-media {
    width: calc(100vw - 20px) !important;
    margin-top: 28px !important;
    margin-bottom: 36px !important;
  }

  body.ss-wide-article-page img.ss-wide-article-media,
  body.ss-wide-article-page figure.ss-wide-article-media img {
    border-radius: 14px;
  }
}


/* ==========================================================================
   v2.2 — BODY ALIGNMENT
   Testo con lo stesso rientro laterale della hero/valutazione.
   Le immagini restano larghe come nella versione precedente.
   ========================================================================== */

:root {
  --ss-article-copy-width: 1190px;
}

body.ss-wide-article-page .ss-wide-article-flow {
  box-sizing: border-box !important;
  width: min(
    var(--ss-article-copy-width),
    calc(100vw - 110px)
  ) !important;
  max-width: var(--ss-article-copy-width) !important;

  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Foto nel corpo: NON restringerle. */
body.ss-wide-article-page .ss-wide-article-media {
  width: min(
    var(--ss-article-media-target),
    calc(100vw - 40px)
  ) !important;
  max-width: none !important;
}

@media (max-width: 1100px) {
  body.ss-wide-article-page .ss-wide-article-flow {
    width: calc(100vw - 64px) !important;
    max-width: none !important;
  }
}

@media (max-width: 760px) {
  body.ss-wide-article-page .ss-wide-article-flow {
    width: calc(100vw - 36px) !important;
    max-width: none !important;
  }

  body.ss-wide-article-page .ss-wide-article-media {
    width: calc(100vw - 20px) !important;
  }
}


/* ==========================================================================
   v2.3 — MEDIA WIDTH RESET
   Le immagini interne tornano dentro gli stessi margini del corpo articolo.
   Evita che foto molto verticali diventino eccessivamente grandi.
   ========================================================================== */

body.ss-wide-article-page .ss-wide-article-media {
  box-sizing: border-box !important;

  width: min(
    var(--ss-article-copy-width),
    calc(100vw - 110px)
  ) !important;

  max-width: var(--ss-article-copy-width) !important;

  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mantieni le immagini responsive dentro il nuovo contenitore */
body.ss-wide-article-page img.ss-wide-article-media,
body.ss-wide-article-page figure.ss-wide-article-media img,
body.ss-wide-article-page .ss-wide-article-media > img,
body.ss-wide-article-page .ss-wide-article-media picture,
body.ss-wide-article-page .ss-wide-article-media picture img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Tablet */
@media (max-width: 1100px) {
  body.ss-wide-article-page .ss-wide-article-media {
    width: calc(100vw - 64px) !important;
    max-width: none !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  body.ss-wide-article-page .ss-wide-article-media {
    width: calc(100vw - 36px) !important;
    max-width: none !important;
  }
}


/* ==========================================================================
   v2.4 — ARTICLE COPY INNER GUTTER
   Correzione definitiva del body troppo attaccato ai bordi.
   Le immagini NON vengono modificate.
   ========================================================================== */

:root {
  --ss-article-copy-final: 1040px;
}

/*
 * Target principale: elementi già riconosciuti dal detector runtime.
 */
body.ss-wide-article-page .ss-wide-article-flow {
  box-sizing: border-box !important;
  width: min(
    var(--ss-article-copy-final),
    calc(100vw - 150px)
  ) !important;
  max-width: var(--ss-article-copy-final) !important;

  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*
 * Fallback forte: se qualche paragrafo/titolo non ha ricevuto la classe
 * ss-wide-article-flow, gli applichiamo comunque lo stesso rientro,
 * ma solo dentro la root editoriale già individuata dalla patch JS.
 *
 * Escludiamo box prodotto, review/hero, tabelle e componenti speciali.
 */
body.ss-wide-article-page .ss-wide-article-root
  :is(p,h2,h3,h4,ul,ol,blockquote)
  :not(.ss-wide-article-media)
  :not(.ss-product-card)
  :not(.product-card)
  :not(.affiliate-product)
  :not(.amazon-product)
  :not(.review-card)
  :not(.review-summary) {
  box-sizing: border-box;
}

/* Fallback sui blocchi top-level del corpo */
body.ss-wide-article-page .ss-wide-article-root > :is(p,h2,h3,h4,ul,ol,blockquote),
body.ss-wide-article-page .ss-wide-article-root > div > :is(p,h2,h3,h4,ul,ol,blockquote) {
  width: min(
    var(--ss-article-copy-final),
    calc(100vw - 150px)
  ) !important;
  max-width: var(--ss-article-copy-final) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/*
 * Non restringere componenti speciali/hero/prodotti.
 */
body.ss-wide-article-page .ss-wide-article-root
  :is(.review-card,.review-summary,.product-card,.ss-product-card,.affiliate-product,.amazon-product)
  :is(p,h2,h3,h4,ul,ol,blockquote) {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  transform: none !important;
}

/* Tablet */
@media (max-width: 1100px) {
  body.ss-wide-article-page .ss-wide-article-flow,
  body.ss-wide-article-page .ss-wide-article-root > :is(p,h2,h3,h4,ul,ol,blockquote),
  body.ss-wide-article-page .ss-wide-article-root > div > :is(p,h2,h3,h4,ul,ol,blockquote) {
    width: calc(100vw - 80px) !important;
    max-width: none !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  body.ss-wide-article-page .ss-wide-article-flow,
  body.ss-wide-article-page .ss-wide-article-root > :is(p,h2,h3,h4,ul,ol,blockquote),
  body.ss-wide-article-page .ss-wide-article-root > div > :is(p,h2,h3,h4,ul,ol,blockquote) {
    width: calc(100vw - 36px) !important;
    max-width: none !important;
  }
}


/* ==========================================================================
   v2.5 — MEDIA SAME WIDTH AS ARTICLE TEXT
   Le immagini nel corpo usano ESATTAMENTE la stessa larghezza del testo.
   ========================================================================== */

body.ss-wide-article-page .ss-wide-article-media {
  box-sizing: border-box !important;

  width: min(
    var(--ss-article-copy-final),
    calc(100vw - 150px)
  ) !important;

  max-width: var(--ss-article-copy-final) !important;

  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Immagini e picture riempiono il contenitore, senza allargarsi oltre */
body.ss-wide-article-page img.ss-wide-article-media,
body.ss-wide-article-page figure.ss-wide-article-media img,
body.ss-wide-article-page .ss-wide-article-media > img,
body.ss-wide-article-page .ss-wide-article-media picture,
body.ss-wide-article-page .ss-wide-article-media picture img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Tablet: stesso identico rientro del testo */
@media (max-width: 1100px) {
  body.ss-wide-article-page .ss-wide-article-media {
    width: calc(100vw - 80px) !important;
    max-width: none !important;
  }
}

/* Mobile: stesso identico rientro del testo */
@media (max-width: 760px) {
  body.ss-wide-article-page .ss-wide-article-media {
    width: calc(100vw - 36px) !important;
    max-width: none !important;
  }
}


/* ==========================================================================
   v2.6 — EDITORIAL COLUMN REFERENCE MATCH
   Layout ispirato al riferimento fornito:
   - testo ben rientrato dal foglio;
   - immagini centrate e con lo stesso respiro laterale;
   - niente elementi editoriali appoggiati ai bordi.
   ========================================================================== */

:root {
  --ss-editorial-column: 1040px;
  --ss-editorial-gutter-desktop: 150px;
}

/* TESTO / TITOLI / LISTE / CITAZIONI */
body.ss-wide-article-page .ss-wide-article-flow,
body.ss-wide-article-page .ss-wide-article-root > :is(p,h2,h3,h4,ul,ol,blockquote),
body.ss-wide-article-page .ss-wide-article-root > div > :is(p,h2,h3,h4,ul,ol,blockquote) {
  box-sizing: border-box !important;

  width: min(
    var(--ss-editorial-column),
    calc(100vw - var(--ss-editorial-gutter-desktop))
  ) !important;

  max-width: var(--ss-editorial-column) !important;

  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* FOTO / FIGURE NEL CORPO: STESSA COLONNA DEL TESTO */
body.ss-wide-article-page .ss-wide-article-media {
  box-sizing: border-box !important;

  width: min(
    var(--ss-editorial-column),
    calc(100vw - var(--ss-editorial-gutter-desktop))
  ) !important;

  max-width: var(--ss-editorial-column) !important;

  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: clamp(28px, 3vw, 42px) !important;
  margin-bottom: clamp(32px, 3.4vw, 48px) !important;
}

/* L'immagine riempie SOLO la colonna editoriale, mai oltre */
body.ss-wide-article-page img.ss-wide-article-media,
body.ss-wide-article-page figure.ss-wide-article-media img,
body.ss-wide-article-page .ss-wide-article-media > img,
body.ss-wide-article-page .ss-wide-article-media picture,
body.ss-wide-article-page .ss-wide-article-media picture img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Mantieni card prodotto / review / hero indipendenti */
body.ss-wide-article-page .ss-wide-article-root
:is(.review-card,.review-summary,.product-card,.ss-product-card,.affiliate-product,.amazon-product)
:is(p,h2,h3,h4,ul,ol,blockquote) {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  transform: none !important;
}

/* Desktop medio */
@media (max-width: 1200px) {
  :root {
    --ss-editorial-gutter-desktop: 96px;
  }
}

/* Tablet */
@media (max-width: 900px) {
  body.ss-wide-article-page .ss-wide-article-flow,
  body.ss-wide-article-page .ss-wide-article-media,
  body.ss-wide-article-page .ss-wide-article-root > :is(p,h2,h3,h4,ul,ol,blockquote),
  body.ss-wide-article-page .ss-wide-article-root > div > :is(p,h2,h3,h4,ul,ol,blockquote) {
    width: calc(100vw - 64px) !important;
    max-width: none !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  body.ss-wide-article-page .ss-wide-article-flow,
  body.ss-wide-article-page .ss-wide-article-media,
  body.ss-wide-article-page .ss-wide-article-root > :is(p,h2,h3,h4,ul,ol,blockquote),
  body.ss-wide-article-page .ss-wide-article-root > div > :is(p,h2,h3,h4,ul,ol,blockquote) {
    width: calc(100vw - 36px) !important;
    max-width: none !important;
  }
}


/* ==========================================================================
   v2.7 — VERDETTO TYPOGRAPHY
   Riduce esclusivamente il testo descrittivo nella colonna destra
   "Il verdetto di StudioShopping". Titolo e colonna Pro/Contro invariati.
   ========================================================================== */

body.ss-wide-article-page .ss-verdict-copy-column > :is(p,em,i),
body.ss-wide-article-page .ss-verdict-copy-column p,
body.ss-wide-article-page .ss-verdict-copy-column p :is(em,i),
body.ss-wide-article-page .ss-verdict-copy-column > :is(em,i) {
  font-size: 21px !important;
  line-height: 1.55 !important;
}

/* Se il corsivo è applicato direttamente al wrapper testuale */
body.ss-wide-article-page .ss-verdict-copy-column :is(p,div):not(:has(h1,h2,h3,h4)) {
  line-height: 1.55 !important;
}

@media (max-width: 1100px) {
  body.ss-wide-article-page .ss-verdict-copy-column > :is(p,em,i),
  body.ss-wide-article-page .ss-verdict-copy-column p,
  body.ss-wide-article-page .ss-verdict-copy-column p :is(em,i),
  body.ss-wide-article-page .ss-verdict-copy-column > :is(em,i) {
    font-size: 19px !important;
  }
}

@media (max-width: 760px) {
  body.ss-wide-article-page .ss-verdict-copy-column > :is(p,em,i),
  body.ss-wide-article-page .ss-verdict-copy-column p,
  body.ss-wide-article-page .ss-verdict-copy-column p :is(em,i),
  body.ss-wide-article-page .ss-verdict-copy-column > :is(em,i) {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
}


/* ==========================================================================
   v2.8 — EXTRA ARTICLE SIDE MARGINS
   Più spazio laterale per testo e immagini del corpo editoriale.
   Mantiene testo e foto perfettamente allineati sulla stessa colonna.
   ========================================================================== */

:root {
  --ss-editorial-column-final: 940px;
}

/* Corpo articolo */
body.ss-wide-article-page .ss-wide-article-flow,
body.ss-wide-article-page .ss-wide-article-root > :is(p,h2,h3,h4,ul,ol,blockquote),
body.ss-wide-article-page .ss-wide-article-root > div > :is(p,h2,h3,h4,ul,ol,blockquote) {
  box-sizing: border-box !important;

  width: min(
    var(--ss-editorial-column-final),
    calc(100vw - 190px)
  ) !important;

  max-width: var(--ss-editorial-column-final) !important;

  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Foto interne: stesso identico rientro del testo */
body.ss-wide-article-page .ss-wide-article-media {
  box-sizing: border-box !important;

  width: min(
    var(--ss-editorial-column-final),
    calc(100vw - 190px)
  ) !important;

  max-width: var(--ss-editorial-column-final) !important;

  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mantieni l'immagine dentro la colonna senza deformazioni */
body.ss-wide-article-page img.ss-wide-article-media,
body.ss-wide-article-page figure.ss-wide-article-media img,
body.ss-wide-article-page .ss-wide-article-media > img,
body.ss-wide-article-page .ss-wide-article-media picture,
body.ss-wide-article-page .ss-wide-article-media picture img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Non restringere hero/verdetto/card prodotto */
body.ss-wide-article-page .ss-wide-article-root
:is(.review-card,.review-summary,.product-card,.ss-product-card,.affiliate-product,.amazon-product)
:is(p,h2,h3,h4,ul,ol,blockquote) {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  transform: none !important;
}

/* Tablet */
@media (max-width: 1100px) {
  body.ss-wide-article-page .ss-wide-article-flow,
  body.ss-wide-article-page .ss-wide-article-media,
  body.ss-wide-article-page .ss-wide-article-root > :is(p,h2,h3,h4,ul,ol,blockquote),
  body.ss-wide-article-page .ss-wide-article-root > div > :is(p,h2,h3,h4,ul,ol,blockquote) {
    width: calc(100vw - 96px) !important;
    max-width: none !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  body.ss-wide-article-page .ss-wide-article-flow,
  body.ss-wide-article-page .ss-wide-article-media,
  body.ss-wide-article-page .ss-wide-article-root > :is(p,h2,h3,h4,ul,ol,blockquote),
  body.ss-wide-article-page .ss-wide-article-root > div > :is(p,h2,h3,h4,ul,ol,blockquote) {
    width: calc(100vw - 40px) !important;
    max-width: none !important;
  }
}


/* ==========================================================================
   v2.9 — VERDETTO SMALLER TEXT
   Riduzione netta del SOLO testo descrittivo a destra.
   Titolo "Il verdetto di StudioShopping" invariato.
   ========================================================================== */

body.ss-wide-article-page .ss-verdict-copy-column > p,
body.ss-wide-article-page .ss-verdict-copy-column > em,
body.ss-wide-article-page .ss-verdict-copy-column > i,
body.ss-wide-article-page .ss-verdict-copy-column p,
body.ss-wide-article-page .ss-verdict-copy-column p *,
body.ss-wide-article-page .ss-verdict-copy-column > div:not(:has(h1,h2,h3,h4,h5,h6)) {
  font-size: 17px !important;
  line-height: 1.48 !important;
}

/* Il titolo resta grande come prima */
body.ss-wide-article-page .ss-verdict-copy-column :is(h1,h2,h3,h4,h5,h6) {
  font-size: revert !important;
  line-height: normal;
}

@media (max-width: 1100px) {
  body.ss-wide-article-page .ss-verdict-copy-column > p,
  body.ss-wide-article-page .ss-verdict-copy-column > em,
  body.ss-wide-article-page .ss-verdict-copy-column > i,
  body.ss-wide-article-page .ss-verdict-copy-column p,
  body.ss-wide-article-page .ss-verdict-copy-column p *,
  body.ss-wide-article-page .ss-verdict-copy-column > div:not(:has(h1,h2,h3,h4,h5,h6)) {
    font-size: 16px !important;
  }
}

@media (max-width: 760px) {
  body.ss-wide-article-page .ss-verdict-copy-column > p,
  body.ss-wide-article-page .ss-verdict-copy-column > em,
  body.ss-wide-article-page .ss-verdict-copy-column > i,
  body.ss-wide-article-page .ss-verdict-copy-column p,
  body.ss-wide-article-page .ss-verdict-copy-column p *,
  body.ss-wide-article-page .ss-verdict-copy-column > div:not(:has(h1,h2,h3,h4,h5,h6)) {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}


/* ==========================================================================
   v3.0 — VERDETTO NORMAL TEXT
   Mantiene il testo ridotto ma elimina completamente il corsivo.
   ========================================================================== */

body.ss-wide-article-page .ss-verdict-copy-column > p,
body.ss-wide-article-page .ss-verdict-copy-column > em,
body.ss-wide-article-page .ss-verdict-copy-column > i,
body.ss-wide-article-page .ss-verdict-copy-column p,
body.ss-wide-article-page .ss-verdict-copy-column p *,
body.ss-wide-article-page .ss-verdict-copy-column > div:not(:has(h1,h2,h3,h4,h5,h6)),
body.ss-wide-article-page .ss-verdict-copy-column em,
body.ss-wide-article-page .ss-verdict-copy-column i {
  font-style: normal !important;
}

/* Il titolo resta invariato */
body.ss-wide-article-page .ss-verdict-copy-column :is(h1,h2,h3,h4,h5,h6) {
  font-style: normal;
}


/* ==========================================================================
   v3.1 — PRODOTTO COLLEGATO AL VERDETTO
   ========================================================================== */

/* Nascosto nel flusso normale: viene montato sotto la hero via JS. */
body.ss-wide-article-page .ss-verdict-linked-product{
  display:none;
}

body.ss-wide-article-page .ss-verdict-linked-product.ss-verdict-linked-product-mounted{
  display:block !important;
  box-sizing:border-box;
  width:min(
    var(--ss-editorial-column-final, 940px),
    calc(100vw - 190px)
  );
  max-width:var(--ss-editorial-column-final, 940px);
  margin:34px auto 46px !important;
  position:relative;
  left:auto !important;
  transform:none !important;
}

/* La scheda interna conserva lo stile nativo del prodotto. */
body.ss-wide-article-page .ss-verdict-linked-product.ss-verdict-linked-product-mounted > *{
  max-width:100%;
}

/* Il vecchio pulsante Amazon della hero viene sostituito dalla scheda. */
body.ss-wide-article-page .ss-verdict-amazon-replaced,
body.ss-wide-article-page .ss-verdict-amazon-action-row-replaced{
  display:none !important;
}

@media (max-width:1100px){
  body.ss-wide-article-page .ss-verdict-linked-product.ss-verdict-linked-product-mounted{
    width:calc(100vw - 96px);
    max-width:none;
  }
}

@media (max-width:760px){
  body.ss-wide-article-page .ss-verdict-linked-product.ss-verdict-linked-product-mounted{
    width:calc(100vw - 40px);
    margin-top:24px !important;
    margin-bottom:34px !important;
  }
}


/* ==========================================================================
   v3.2 — PRODUCT CARD CLEAN / COMPACT / RESPONSIVE
   Corregge overflow foto, gerarchia prezzo e metadati disordinati.
   ========================================================================== */

/* Nascondiamo solo la vecchia presentazione grafica: i dati restano nel DOM. */
body.ss-wide-article-page
.ss-verdict-linked-product.ss-verdict-linked-product-mounted
> .ss-linked-product-original-source {
  display: none !important;
}

body.ss-wide-article-page
.ss-verdict-linked-product.ss-verdict-linked-product-mounted {
  overflow: visible !important;
}

/* Card */
body.ss-wide-article-page .ss-linked-product-clean-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: 220px minmax(0,1fr) !important;
  gap: 26px !important;
  align-items: center !important;

  padding: 22px !important;
  margin: 0 !important;

  background: var(--card, #fff) !important;
  color: inherit !important;
  border: 1px solid rgba(126,145,134,.26) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 34px rgba(22,45,34,.07) !important;

  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  overflow: hidden !important;
}

/* FOTO: resta SEMPRE dentro il box */
body.ss-wide-article-page .ss-clean-product-media {
  box-sizing: border-box !important;
  width: 220px !important;
  height: 180px !important;
  max-width: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 12px !important;

  background: rgba(127,146,135,.055) !important;
  border-radius: 15px !important;
  overflow: hidden !important;

  position: static !important;
  left: auto !important;
  transform: none !important;
}

body.ss-wide-article-page .ss-clean-product-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  float: none !important;
}

/* Contenuto */
body.ss-wide-article-page .ss-clean-product-content {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Eyebrow */
body.ss-wide-article-page .ss-clean-product-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 0 !important;
}

body.ss-wide-article-page .ss-clean-product-kicker {
  color: #168f5b !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .11em !important;
  line-height: 1.2 !important;
}

body.ss-wide-article-page
:is(.ss-clean-product-market,.ss-clean-product-affiliate) {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(100,116,108,.09) !important;
  color: inherit !important;
  opacity: .72 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* Titolo */
body.ss-wide-article-page .ss-clean-product-title {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
  font-size: clamp(22px,2vw,28px) !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;

  position: static !important;
  left: auto !important;
  transform: none !important;
}

/* Brand / descrizione */
body.ss-wide-article-page .ss-clean-product-sub {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin: 0 !important;
}

body.ss-wide-article-page .ss-clean-product-brand {
  color: #168f5b !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

body.ss-wide-article-page .ss-clean-product-description {
  width: auto !important;
  max-width: 680px !important;
  margin: 0 !important;
  color: inherit !important;
  opacity: .72 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;

  position: static !important;
  left: auto !important;
  transform: none !important;
}

/* Prezzo: area chiara e separata */
body.ss-wide-article-page .ss-clean-product-purchase {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  column-gap: 12px !important;
  row-gap: 4px !important;

  margin: 2px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid rgba(126,145,134,.20) !important;
}

body.ss-wide-article-page .ss-clean-product-price {
  color: inherit !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.ss-wide-article-page .ss-clean-product-price-note {
  color: inherit !important;
  opacity: .55 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

/* Azioni */
body.ss-wide-article-page .ss-clean-product-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 2px 0 0 !important;
}

body.ss-wide-article-page .ss-clean-product-action {
  box-sizing: border-box !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  margin: 0 !important;
  padding: 9px 13px !important;

  border: 1px solid rgba(22,143,91,.34) !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: inherit !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  float: none !important;
}

body.ss-wide-article-page
.ss-clean-product-action--amazon {
  order: 10 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  background: #168f5b !important;
  border-color: #168f5b !important;
  color: #fff !important;
}

body.ss-wide-article-page
.ss-clean-product-action:hover {
  border-color: #168f5b !important;
}

body.ss-wide-article-page
.ss-clean-product-action--amazon:hover {
  background: #117749 !important;
}

/* Tablet */
@media (max-width: 860px) {
  body.ss-wide-article-page .ss-linked-product-clean-card {
    grid-template-columns: 180px minmax(0,1fr) !important;
    gap: 20px !important;
    padding: 18px !important;
  }

  body.ss-wide-article-page .ss-clean-product-media {
    width: 180px !important;
    height: 160px !important;
  }
}

/* Mobile */
@media (max-width: 620px) {
  body.ss-wide-article-page .ss-linked-product-clean-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  body.ss-wide-article-page .ss-clean-product-media {
    width: 100% !important;
    height: 210px !important;
    padding: 14px !important;
  }

  body.ss-wide-article-page .ss-clean-product-title {
    font-size: 21px !important;
  }

  body.ss-wide-article-page .ss-clean-product-price {
    font-size: 23px !important;
  }

  body.ss-wide-article-page .ss-clean-product-actions {
    justify-content: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  body.ss-wide-article-page .ss-clean-product-action {
    width: 100% !important;
  }

  body.ss-wide-article-page .ss-clean-product-action--amazon {
    grid-column: 1 / -1 !important;
  }
}