/* =============================================================================
   PROBAR - MACROCATEGORIE
   -----------------------------------------------------------------------------
   [child]/css/macro-category.css  -  caricato solo sulle categorie contenitore.

   Tre movimenti, un'unica idea: la profondita'.
     HERO      -> prospettiva che segue il mouse, zoom che entra con lo scroll
     VENTAGLIO -> carte su mezza ruota, la ruota gira mentre scorri
     PANNELLI  -> i mondi si impilano uno sull'altro, come pagine di un libro

   Regola non negoziabile: si animano SOLO transform e opacity. Ogni altra
   proprieta' costringe il browser a ridisegnare, e un sito di lusso che
   scatta e' un sito che non e' di lusso.
   ============================================================================= */

:root {
  --pb-gold: #FFCE53;
  --pb-gold-line: rgba(255, 206, 83, 0.16);
  --pb-ease: cubic-bezier(0.16, 1, 0.30, 1);
  /* --- GEOMETRIA DELLA RUOTA ---
     apex   = quanto in basso dal bordo superiore passa l'apice dell'arco
     radius = distanza carta-mozzo: piu' e' grande, piu' l'arco e' disteso
     card-w = larghezza della carta al centro                            */
  --pb-fan-apex: 44vh;      /* le carte un po' sopra il centro dello schermo */
  --pb-fan-radius: 980px;   /* arco piu' disteso: ogni carta viaggia di piu'
                               per lo stesso passo, il movimento si legge meglio */
  --pb-fan-card-w: 260px;
}

body.pb-macro { background-color: #000; overflow-x: clip; }

/* La barra strumenti e la griglia prodotti qui non esistono */
body.pb-macro .ast-shop-toolbar-container,
body.pb-macro ul.products,
body.pb-macro .woocommerce-info,
body.pb-macro .ast-shop-pagination-infinite { display: none !important; }

/* ==========================================================================
   1. HERO PROSPETTICO
   L'immagine sta su un livello che si inclina col mouse e si avvicina con lo
   scroll. Il testo sta su un livello piu' vicino: si muove meno. E' la
   parallasse: la stessa illusione dei fondali teatrali, vecchia di 300 anni.
   ========================================================================== */
body.pb-macro .pb-cat-hero {
  min-height: 88vh;
  perspective: 1200px;         /* la profondita' vive qui */
  perspective-origin: 50% 50%;
  background-image: none !important;  /* l'immagine la mettiamo su un livello */
}

.pb-hero-stage {
  position: absolute;
  inset: -8%;
  z-index: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.pb-hero-stage__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: translateZ(-120px) scale(var(--pb-hero-zoom, 1.16));
  will-change: transform;
}

/* Vignettatura: spinge lo sguardo al centro, come un obiettivo cinematografico */
body.pb-macro .pb-cat-hero.has-image::before {
  background:
    radial-gradient(120% 90% at 50% 45%,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.62) 55%,
      rgba(0,0,0,0.95) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.96) 100%);
}

body.pb-macro .pb-cat-hero__inner {
  transform: translateZ(60px);   /* il testo e' PIU' VICINO: si muove meno */
  will-change: transform;
}

/* ==========================================================================
   2. IL VENTAGLIO  (v2 - geometria corretta)
   --------------------------------------------------------------------------
   ERRORE DELLA v1: ruotavo il CONTENITORE delle carte. Un contenitore ruota
   attorno al proprio centro, che stava a mezzo schermo dal mozzo: le carte
   derivavano di lato e l'arco non si formava mai.

   GEOMETRIA CORRETTA:
     - il MOZZO e' un punto fisso (largh. 0, alt. 0) sotto lo schermo, al
       centro orizzontale: e' il centro della ruota;
     - ogni carta e' un RAGGIO che parte dal mozzo: ruota di un angolo e viene
       spinta in alto del raggio. transform-origin: 0 0 = il mozzo;
     - lo scroll non ruota nulla: cambia solo l'ANGOLO di ogni carta.
       Le carte sfilano lungo un arco FISSO.

   L'ordine delle trasformazioni si legge da destra a sinistra:
     translate(-50%,-50%)  centra la carta sul punto calcolato
     translateY(-R)        la porta sull'arco, a distanza R dal mozzo
     rotate(a)             la posiziona lungo l'arco
   ========================================================================== */
.pb-fan {
  position: relative;
  /* REGIONE DI AGGANCIO. Il ventaglio resta fissato a schermo mentre
     scorri questa altezza; la corsa "utile" e' (questa - 100vh).
     170vh => circa 0,7 schermate per sfogliare tutta la ruota. Con molte
     sottocategorie, macro-category.js allunga questo valore in proporzione
     (vedi FAN_THRESHOLD). Su mobile viene azzerata (vedi sez. 4). */
  height: 170vh;
  margin: 0 0 40px;
}

.pb-fan__sticky {
  position: sticky;            /* si aggancia allo schermo mentre lo sfogli */
  top: 0;
  height: 100vh;               /* schermo intero: l'apice a 50vh e' al centro */
  min-height: 620px;
  overflow: hidden;
}

.pb-fan__head {
  position: absolute;
  top: 7vh;
  left: 0;
  right: 0;
  z-index: 5;
  text-align: center;
  padding: 0 20px;
}

/* IL MOTTO - presente ma elegante: non un titolo urlato, una didascalia
   raffinata. Corpo contenuto, peso leggero, lettere ariose. L'eleganza sta
   nello spazio e nella misura, non nella grandezza. */
.pb-fan__kicker {
  margin: 0 0 18px;
  color: var(--pb-gold);
  font-size: clamp(1rem, 1.9vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1.3;
  text-transform: uppercase;
}

.pb-fan__head .prestige-sep-wide { margin: 0 auto; }

/* --- IL MOZZO: punto fisso, senza dimensioni, sotto lo schermo --- */
.pb-fan__wheel {
  position: absolute;
  left: 50%;
  top: calc(var(--pb-fan-apex) + var(--pb-fan-radius));
  width: 0;
  height: 0;
  transform: none !important;   /* il mozzo NON ruota mai */
}

/* --- Ogni carta e' un raggio --- */
.pb-fan__card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--pb-fan-card-w);
  transform-origin: 0 0;        /* l'origine E' il mozzo */
  transform:
    rotate(var(--a, 0deg))
    translateY(calc(var(--pb-fan-radius) * -1))
    translate(-50%, -50%)
    scale(var(--s, 1));
  opacity: var(--o, 1);
  z-index: var(--z, 1);
  text-decoration: none !important;
  will-change: transform, opacity;
}

.pb-fan__media {
  display: block;
  border: 1px solid var(--pb-gold-line);
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  background-color: #0d0d0d;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65);
  filter: brightness(var(--b, 0.5)) saturate(var(--b, 0.7));
  transition: border-color 0.5s var(--pb-ease),
              box-shadow 0.5s var(--pb-ease);
}

.pb-fan__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.2s var(--pb-ease);
}

.pb-fan__label {
  display: block;
  margin-top: 12px;
  text-align: center;
  opacity: var(--lo, 0.35);
}

.pb-fan__name {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.3;
}

.pb-fan__count {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* La protagonista: bordo oro, alone, nome dorato */
.pb-fan__card.is-active .pb-fan__media {
  border-color: rgba(255, 206, 83, 0.8);
  box-shadow: 0 34px 80px rgba(0,0,0,0.75),
              0 0 54px rgba(255, 206, 83, 0.26);
}

.pb-fan__card.is-active .pb-fan__name { color: var(--pb-gold); }

@media (hover: hover) and (pointer: fine) {
  .pb-fan__card.is-active:hover .pb-fan__media img { transform: scale(1.05); }
}

.pb-fan__hint {
  position: absolute;
  bottom: 3vh;
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

.pb-fan__hint-line {
  display: block;
  width: 1px;
  height: 28px;
  margin: 0 auto 10px;
  background: linear-gradient(180deg, transparent, var(--pb-gold));
  animation: pbHint 2.4s ease-in-out infinite;
}

@keyframes pbHint {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; }
  50%      { transform: scaleY(1);   opacity: 1;   transform-origin: top; }
}

/* ==========================================================================
   4. MOBILE - il 70% del traffico. Niente ruote, niente pin.
   Su un telefono il "pinning" combatte con lo scroll nativo e da' la nausea.
   Il ventaglio diventa un carosello a scatti orizzontale: il pollice comanda.
   ========================================================================== */
@media (max-width: 921px) {

  body.pb-macro .pb-cat-hero { min-height: 62vh; perspective: none; }
  .pb-hero-stage__img { transform: none; }
  body.pb-macro .pb-cat-hero__inner { transform: none; }

  /* --- Ventaglio -> carosello (mobile) ---
     Forziamo con !important le proprieta' di posizionamento: su mobile il JS
     non deve piu' comandare, e nessun residuo inline della ruota desktop deve
     sopravvivere. */
  .pb-fan {
    height: auto !important;
    margin-bottom: 30px;
  }

  .pb-fan__sticky {
    position: static !important;
    height: auto !important;
    padding: 30px 0 10px;
    overflow: visible !important;
  }

  .pb-fan__head {
    position: static !important;
    margin-bottom: 18px;
  }

  .pb-fan__wheel {
    position: static !important;
    display: flex !important;
    gap: 14px;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    padding: 6px 16px 18px;
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pb-fan__wheel::-webkit-scrollbar { display: none; }

  .pb-fan__card {
    position: static !important;
    flex: 0 0 68vw;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    transform-origin: center center !important;
    scroll-snap-align: center;
    filter: none !important;
    opacity: 1 !important;
  }

  .pb-fan__card .pb-fan__media {
    filter: brightness(1) saturate(1) !important;
    border-color: var(--pb-gold-line) !important;
  }
  .pb-fan__label { opacity: 1 !important; }

  .pb-fan__media img { aspect-ratio: 4 / 5; }
  .pb-fan__hint { position: static !important; margin-top: 6px; }
  .pb-fan__hint-line { display: none; }
}

/* ==========================================================================
   5. ACCESSIBILITA - chi ha chiesto meno movimento, ottiene meno movimento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pb-fan { height: auto; }
  .pb-fan__sticky { position: static; height: auto; }
  .pb-fan__wheel { transform: none !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; height: auto; }
  .pb-fan__card { position: static; transform: none !important; filter: none; opacity: 1; width: 220px; }
  .pb-hero-stage__img, body.pb-macro .pb-cat-hero__inner { transform: none !important; }
  .pb-fan__hint-line { animation: none; }
}

/* ==========================================================================
   6. TESTO SEO/GEO SOTTO IL VENTAGLIO
   Eredita l'aspetto da category-ui.css (.pb-cat-seo). Qui solo il respiro
   sopra, per staccarlo dalla sezione ventaglio che e' alta piu' schermi.
   ========================================================================== */
.pb-macro-seo {
  margin-top: 20px;
}

@media (max-width: 921px) {
  .pb-macro-seo { margin-top: 8px; }
}

/* ==========================================================================
   7. GUIDA ALL'ACQUISTO - impaginazione editoriale (righe alternate)
   Ricrea il ritmo del vecchio sito: testo e immagine si alternano lato a
   lato, ariosi, scorrevoli. Niente muri di testo, niente "continua a leggere".
   ========================================================================== */
.pb-editorial {
  max-width: 1080px;
  margin: 30px auto 60px;
  padding: 0 20px;
}

.pb-editorial__head {
  text-align: center;
  margin-bottom: 48px;
}

.pb-editorial__kicker {
  margin: 0 0 10px;
  color: var(--pb-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.pb-editorial__title {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Sottotitolo della categoria (il primo titolo del contenuto): centrato,
   leggero, sotto il nome categoria. Non e' una sezione: e' una promessa. */
.pb-editorial__subtitle {
  margin: 0 auto 16px;
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 300;
  letter-spacing: 0.4px;
  line-height: 1.45;
}

/* Eventuale testo introduttivo sotto il sottotitolo (raro): centrato, sobrio */
.pb-editorial__intro {
  max-width: 640px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15.5px;
  line-height: 1.75;
  text-align: center;
}

.pb-editorial__intro p { margin: 0 0 12px; }
.pb-editorial__intro p:last-child { margin-bottom: 0; }

.pb-editorial__head .prestige-sep-wide { margin: 0 auto; }

/* --- La riga: due colonne, testo e immagine --- */
.pb-editorial__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 48px;
  margin-bottom: 64px;
}

.pb-editorial__row:last-child { margin-bottom: 0; }

/* Alternanza: immagine a destra o a sinistra */
.pb-editorial__row--img-right .pb-editorial__media { order: 2; }
.pb-editorial__row--img-right .pb-editorial__text  { order: 1; }
.pb-editorial__row--img-left  .pb-editorial__media { order: 1; }
.pb-editorial__row--img-left  .pb-editorial__text  { order: 2; }

.pb-editorial__row--full {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.pb-editorial__media {
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  border: 1px solid var(--pb-gold-line);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

.pb-editorial__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.4s var(--pb-ease);
}

@media (hover: hover) and (pointer: fine) {
  .pb-editorial__row:hover .pb-editorial__media img { transform: scale(1.04); }
}

.pb-editorial__row-title {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: 0.5px;
}

.pb-editorial__text {
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.75;
}

.pb-editorial__text p { margin: 0 0 14px; }
.pb-editorial__text p:last-child { margin-bottom: 0; }
.pb-editorial__text strong { color: #fff; }

.pb-editorial__text a {
  color: var(--pb-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Liste (capienza, altezza, diametro...) come specifiche eleganti */
.pb-editorial__text ul {
  list-style: none;
  margin: 16px 0;
  padding: 0;
}

.pb-editorial__text ul li {
  position: relative;
  padding: 6px 0 6px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pb-editorial__text ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pb-gold);
}

/* --- Citazione a effetto: una frase isolata, non una sezione --- */
.pb-editorial__quote {
  max-width: 720px;
  margin: 12px auto 64px;
  padding: 0;
  border: none;
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.3px;
  position: relative;
}

.pb-editorial__quote::before,
.pb-editorial__quote::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin: 0 auto 18px;
  background: var(--pb-gold);
}

.pb-editorial__quote::after { margin: 18px auto 0; }

/* --- Riga compatta: per frammenti brevi (es. schede prezzo/attributo
   che non hanno ancora un template dedicato) - immagine piccola, non
   il grande formato hero delle sezioni editoriali vere --- */
.pb-editorial__row--compact {
  gap: 24px;
  margin-bottom: 28px;
}

.pb-editorial__row--compact .pb-editorial__media {
  max-width: 96px;
  border-radius: 10px;
}

.pb-editorial__row--compact .pb-editorial__row-title {
  margin-bottom: 4px;
  font-size: 1.05rem;
}

.pb-editorial__row--compact .pb-editorial__text {
  font-size: 14px;
}

/* --- Immagini extra oltre la prima: piccola striscia sotto la foto
   principale (es. una sezione con 2 immagini nel sorgente) --- */
.pb-editorial__media-extra {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.pb-editorial__media-extra img {
  flex: 1;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--pb-gold-line);
}

/* --- Griglia di specifiche: icona + titolo breve + descrizione,
   a card, non righe alternate (es. Trasparenza/Resistenza/Brillantezza) --- */
.pb-editorial__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  margin: 12px 0 64px;
  padding: 44px 36px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--pb-gold-line);
  border-radius: 20px;
}

.pb-editorial__spec-card {
  text-align: center;
}

.pb-editorial__spec-card img {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  object-fit: contain;
  opacity: 0.92;
}

.pb-editorial__spec-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.pb-editorial__spec-desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13.5px;
  line-height: 1.6;
}

/* --- Griglia di mini-prodotti: intestazione + fila di tessere piccole
   (es. "GLI IMMANCABILI" / "KIT BARMAN") --- */
.pb-editorial__pgrid-wrap {
  margin: 12px 0 64px;
}

.pb-editorial__pgrid-head {
  text-align: center;
  margin-bottom: 32px;
}

.pb-editorial__pgrid-head h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  letter-spacing: 0.5px;
}

.pb-editorial__pgrid-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.pb-editorial__pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.pb-editorial__pgrid-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.pb-editorial__pgrid-media {
  display: block;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  border: 1px solid var(--pb-gold-line);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.4s var(--pb-ease);
}

.pb-editorial__pgrid-tile:hover .pb-editorial__pgrid-media { border-color: var(--pb-gold); }

.pb-editorial__pgrid-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 14px;
  transition: transform 1.2s var(--pb-ease);
}

.pb-editorial__pgrid-tile:hover .pb-editorial__pgrid-media img { transform: scale(1.06); }

.pb-editorial__pgrid-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13.5px;
  letter-spacing: 0.3px;
}

/* --- Griglia di confronto: varianti dello stesso prodotto (taglie,
   materiali...) messe a paragone fianco a fianco (es. "scegli la tua
   BORSA" / "scegli la tua dimensione") --- */
.pb-editorial__compare-wrap {
  margin: 12px 0 64px;
}

.pb-editorial__compare-intro {
  text-align: center;
  margin: 0 0 32px;
  color: #fff;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  letter-spacing: 0.5px;
}

.pb-editorial__compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.pb-editorial__compare-card {
  border: 1px solid var(--pb-gold-line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
}

.pb-editorial__compare-head {
  padding: 14px 18px;
  background: rgba(255, 206, 83, 0.08);
  border-bottom: 1px solid var(--pb-gold-line);
  color: var(--pb-gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
}

.pb-editorial__compare-media {
  line-height: 0;
}

.pb-editorial__compare-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pb-editorial__compare-facts {
  list-style: none;
  margin: 0;
  padding: 18px 20px 22px;
}

.pb-editorial__compare-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pb-editorial__compare-facts li:last-child { border-bottom: none; padding-bottom: 0; }
.pb-editorial__compare-facts li:first-child { padding-top: 0; }

/* La prima riga (prezzo): l'etichetta piccola sopra, il valore vero in
   risalto sotto - senza spunta */
.pb-editorial__compare-fact--lead .pb-editorial__compare-fact-title {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pb-editorial__compare-fact--lead .pb-editorial__compare-fact-desc {
  display: block;
  color: var(--pb-gold);
  font-size: 1.15rem;
  font-weight: 700;
}

/* Le righe successive: caratteristiche con spunta */
.pb-editorial__compare-fact--check .pb-editorial__compare-fact-title {
  position: relative;
  padding-left: 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.pb-editorial__compare-fact--check .pb-editorial__compare-fact-title::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--pb-gold);
  font-weight: 700;
}
.pb-editorial__compare-fact--check .pb-editorial__compare-fact-desc {
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

/* ==========================================================================
   8. MOTTO SU MOBILE
   ========================================================================== */
@media (max-width: 921px) {
  .pb-fan__head {
    position: static;
    padding: 24px 18px 6px;
  }

  .pb-fan__kicker {
    font-size: clamp(1rem, 4.5vw, 1.35rem);
    font-weight: 400;
    letter-spacing: 2px;
  }

  /* Editoriale: una colonna, immagine sempre sopra il testo */
  .pb-editorial__row {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 44px;
  }

  .pb-editorial__row--img-right .pb-editorial__media,
  .pb-editorial__row--img-left  .pb-editorial__media { order: 1; }
  .pb-editorial__row--img-right .pb-editorial__text,
  .pb-editorial__row--img-left  .pb-editorial__text { order: 2; }

  .pb-editorial__head { margin-bottom: 32px; }
  .pb-editorial__text { font-size: 15px; }

  .pb-editorial__quote {
    font-size: clamp(1.15rem, 5vw, 1.5rem);
    margin-bottom: 44px;
  }

  .pb-editorial__row--compact {
    grid-template-columns: auto 1fr;
    text-align: left;
  }
  .pb-editorial__row--compact .pb-editorial__media { order: 1; max-width: 72px; }
  .pb-editorial__row--compact .pb-editorial__text  { order: 2; }

  .pb-editorial__specs {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
    padding: 32px 20px;
  }

  .pb-editorial__pgrid { grid-template-columns: repeat(2, 1fr); }
}