/* FILE CUSTOM */
.vin-candidates{display:grid;gap:8px;margin:12px 0}.vin-candidate{margin:0;text-align:left;white-space:normal}.vin-candidate:focus,.vin-candidate:hover{border-color:#e11937;background:#fff5f6;color:#222}

/* FILE CUSTOM */
.vin-candidates{display:grid;gap:8px;margin:12px 0}.vin-candidate{margin:0;text-align:left;white-space:normal}.vin-candidate:focus,.vin-candidate:hover{border-color:#e11937;background:#fff5f6;color:#222}

/*
  V13 - Revisioni rispetto alla V12:
  1) categorie IDENTICHE V12 (Apple-inspired left alignment, non riempire artificialmente)
  2) solo banner editoriale desktop >= 820px (dimensione LOCALE del componente):
     UpMap 392 -> 430px, due secondarie 189 -> 208px, gap invariato 14px.
  3) box moto desktop: icona 50px, titolo modello selezionato 20px,
     testo selezione 17px e migliore peso dell'etichetta.
  4) su mobile banner/hero/selector/categorie conservati esattamente.
  5) nessuna modifica HTML/JS, header, carousel prodotti, layout globale.
  Note: immagine moto dinamica NON ottenibile con solo CSS; richiede img da Daisuke.
  Nota Slick: forzatura mobile categorie temporanea già presente in V12.
*/

/* =====================================================================
   A SPECIAL PARTS - HOMEPAGE EDITORIAL PREMIUM V15 - CORRETTA
   CSS ONLY / SOSTITUISCE INTEGRALMENTE V14 E VERSIONI PRECEDENTI
   CARICARE SOLO QUESTO FILE DOPO GLI STILI NATIVI DAI SUKE

   Desktop e moduli della V7 conservati.
   Novita': scala delle foto delle categorie (non SVG) +
   spostamento progressivo della vera CTA moto sotto l'intro mobile.
   V8: CTA moto 46px e testo sentence case; link secondari 4px più in basso.

   Browser senza CSS Anchor Positioning: fallback sicuro con pulsante
   compatto sopra la hero. Per comportamento identico ovunque, i
   programmatori dovranno spostare .searchparts dopo .homeabstract.
   Nessun JS aggiunto. Nessun nuovo contenuto. Nessun display su main.
   ===================================================================== */

/* =====================================================================
   A SPECIAL PARTS | HOME EDITORIAL PREMIUM V6 | CSS ONLY
   SOSTITUISCE INTEGRALMENTE V5 (NON CARICARLI ASSIEME).
   Caricare dopo il CSS del tema Daisuke.

   4 moduli strettamente locali: homeabstract, homecategories,
   gbanner:not(.prod) e homeprods. Il resto resta invariato.

   ECCEZIONE TEMPORANEA: solo nelle categorie sotto 575px,
   lo scroll CSS sostituisce visivamente quello Slick per il test.
   Daisuke deve in seguito correggere le impostazioni Slick JS.
   ===================================================================== */

/* A SPECIAL PARTS | Homepage | Modulo isolato; SOLO CSS. Non unire al CSS completo ASP_05. */

/* =============== 01. HERO TESTUALE DELLA HOME ========================= */
main > .homeabstract {
  container: asp-home-hero / inline-size;
  background: #fff;
  padding: 25px 0 21px;
  text-align: left;
}

/* Modifica solo il wrapper INTERNO a questo hero, non le colonne generali */
main > .homeabstract > .container > .row > .col-sm-10 {
  width: 100%;
  margin-left: 0;
}

main > .homeabstract h1.ptitle {
  margin: 0 0 5px;
  max-width: 850px;
  font-size: 40px;
  line-height: 1.075;
  font-weight: 700;
  letter-spacing: -.037em;
  text-align: left;
  text-wrap: balance;
}

main > .homeabstract .txt {
  margin: 0;
  font-size: 21px;
  line-height: 1.22;
  font-weight: 700;
  text-align: left;
  letter-spacing: -.017em;
}
main > .homeabstract .txt > span { color: #e22623; }

@container asp-home-hero (min-width: 1000px) {
  main > .homeabstract h1.ptitle {
    font-size: 44px;
    max-width: 900px;
  }
}
@container asp-home-hero (max-width: 650px) {
  main > .homeabstract h1.ptitle {
    max-width: none;
    text-align: left;
    font-size: clamp(26px, 6.8cqi, 28px);
    line-height: 1.10;
    letter-spacing: -.038em;
    font-weight: 700;
    margin-bottom: 8px;
  }
  main > .homeabstract .txt {
    text-align: left;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.017em;
  }
}

/* Usa il breakpoint mobile GIA' PREVISTO dal tema per il SOLO padding hero.
   Non ridefinisce colonne, griglia o comportamenti responsive del sito. */
@media only screen and (max-width: 767px) {
  main > .homeabstract { padding: 12px 0 12px; }
}





/* =====================================================================
   ASP_06 | HOMEPAGE CATEGORIE | EDITORIAL PREMIUM V6
   Selettori SOLO dentro main > .homecategories.

   DESKTOP: Slick nativo, numero di voci invariato.
   MOBILE: eccezione CSS temporanea AUTORIZZATA (~3–3.5 tile).
   TODO Daisuke: aggiornare la configurazione Slick e rimuovere il
   blocco @container asp-home-categories (max-width: 575px), inclusa
   la variante (max-width: 350px), dopo validazione UI.
   ===================================================================== */

main > .homecategories {
  container: asp-home-categories / inline-size;
  margin: 0;
  padding: 12px 0;
  background: #f1f2f3;
}

/* Rimuoviamo il margine residuo nativo di slick-slider: era il principale
   responsabile della grossa striscia grigia in basso, senza barra visibile. */
main > .homecategories .carousel.slick-slider,
main > .homecategories .carousel-wrappersl,
main > .homecategories .spacerhor {
  margin-bottom: 0 !important;
}

/* Le categorie iniziano dove iniziano hero e banner, non centrate.
   L'offset della colonna si modifica SOLO in homecategories. */
main > .homecategories > .container > .row >
.col-lg-offset-1.col-xl-offset-2 {
  margin-left: 0 !important;
}

/* Navigazione Slick: su desktop resta nativa. */
main > .homecategories .carousel-wrappersl .slick-dots {
  bottom: -13px;
  margin: 0;
  padding: 0 4px;
}
main > .homecategories .carousel-wrappersl .slick-dots li button {
  height: 2px;
  border-radius: 999px;
}

main > .homecategories .carousel .item {
  padding: 0 4px;
  text-align: center;
}

/* UN SOLO FORMATO per ogni ampiezza: orizzontale 1.34 : 1.
   È la larghezza concessa da Slick/rail a determinare l'altezza.
   Non esistono più un'altezza desktop e un'altra altezza mobile. */
main > .homecategories .carousel .item > a {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1.34 / 1;
  gap: 2px;
  padding: 5px 5px 6px;
  border: 1px solid #e4e5e7;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
  color: #252525;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
main > .homecategories .carousel .item > a:hover,
main > .homecategories .carousel .item > a:focus-visible {
  border-color: #c3c6cb;
  box-shadow: 0 3px 10px rgba(0,0,0,.055);
}

/* Photo-stage sempre proporzionato alla tile. Non ingrandisce
   artificialmente file fotografici con ampi bordi interni. */
main > .homecategories .carousel picture {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 0;
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}
main > .homecategories .carousel picture:hover { background: transparent; }
main > .homecategories .carousel picture img,
main > .homecategories .carousel .item a[title="Accessori"] picture img,
main > .homecategories .carousel .item a[title="Cura della moto"] picture img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Titoli su 1-2 righe, centrati dentro la tile: non sono pulsanti CTA. */
main > .homecategories .carousel .h3 {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  color: #282828;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.012em;
  text-transform: none;
  text-wrap: balance;
}

/* ================================================================
   UNICA FORZATURA TEMPORANEA MOBILE — AUTORIZZATA DAL CLIENTE.
   Visualizzazione CSS ~3.35 voci, con inizio della quarta visibile.
   Il dragging Slick e il suo stato aria potrebbero non corrispondere
   allo scroll nativo; Daisuke dovrà farlo nativamente in JS.
   ================================================================ */
@container asp-home-categories (max-width: 575px) {
  main > .homecategories .carousel.slick-initialized > .slick-list {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  main > .homecategories .carousel.slick-initialized > .slick-list::-webkit-scrollbar {
    display: none;
  }
  main > .homecategories .carousel.slick-initialized > .slick-list > .slick-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    transform: none !important;
  }
  main > .homecategories .carousel.slick-initialized > .slick-list > .slick-track > .slick-slide {
    box-sizing: border-box;
    flex: 0 0 calc((100cqw - 30px) / 3.35) !important;
    width: calc((100cqw - 30px) / 3.35) !important;
    min-width: 0 !important;
    float: none !important;
    scroll-snap-align: start;
  }
  main > .homecategories .carousel .item { padding: 0 3px; }
  main > .homecategories .carousel .item > a {
    padding: 4px 3px 5px;
    border-radius: 8px;
  }
  /* Tipografia V1: il corpo segue la larghezza della tile. Resta 10.5px
     fino a 375px (i nomi più lunghi, "Impianto elettrico / frenante",
     riempiono già la riga) e sale fino a 12px da ~420px, sempre su una riga. */
  main > .homecategories .carousel .h3 { font-size: clamp(10.5px, calc(3.58cqw - 2.9px), 12px); line-height: 1.1; }
  /* La progress bar JS non segue lo scroll CSS: va nascosta nel test. */
  main > .homecategories .carousel-wrappersl .slick-dots { display: none !important; }
}
@container asp-home-categories (max-width: 350px) {
  main > .homecategories .carousel.slick-initialized > .slick-list > .slick-track > .slick-slide {
    flex-basis: calc((100cqw - 30px) / 3.12) !important;
    width: calc((100cqw - 30px) / 3.12) !important;
  }
}
/* Tipografia V1 — nomi categoria fuori dal mobile.
   576-1199px (3, 5 o 7 tile per riga, soglie dello script Slick): la tile è
   larga almeno 117px, 12px stanno su una riga.
   Da 1200px (9 tile per riga) la riga utile è 87.4px: il corpo resta 10.5px e
   si stringe solo la spaziatura, perché "Impianto frenante" (87.5px) andava a
   capo da solo e la sua foto risultava più piccola delle altre. */
@media (min-width: 576px) and (max-width: 1199.98px) {
  main > .homecategories .carousel .h3 { font-size: 12px; }
}
@media (min-width: 1200px) {
  main > .homecategories .carousel .h3 { letter-spacing: -.02em; }
}

/* Evita animazioni e hover finti su touch, rispetta le preferenze OS. */
@media (prefers-reduced-motion: reduce) {
  main > .homecategories .carousel .item > a { transition: none !important; }
}


/* A SPECIAL PARTS | Homepage | Modulo isolato; SOLO CSS. Non unire al CSS completo ASP_05. */

/* =============== 03. TRE CARD EDITORIALI, STESSI 3 LINK =============== */
main > .gbanner:not(.prod) {
  container: asp-home-editorial / inline-size;
  margin: 0;
  padding: 11px 0 12px;
  background: #f1f2f3 !important;
}

/* Cambiamo la composizione SOLO delle tre card, non la griglia pagina */
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  align-items: stretch;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4 {
  float: none !important;
  width: auto !important;
  min-width: 0;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child {
  grid-column: 1 / -1;
}

main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4 .wrapper {
  position: relative;
  display: block;
  min-height: 0;
  height: 160px;
  margin: 0;
  border: 0;
  border-radius: 13px;
  overflow: hidden;
  isolation: isolate;
  background: #191919;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .wrapper {
  height: 270px;
}

main > .gbanner:not(.prod) .wrapper > .figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
main > .gbanner:not(.prod) .wrapper > .figure picture,
main > .gbanner:not(.prod) .wrapper > .figure img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center 54%;
}
main > .gbanner:not(.prod) .wrapper > .figure img {
  transition: transform .3s ease, filter .25s ease;
}

main > .gbanner:not(.prod) .wrapper > .contents.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  text-align: left;
  display: flex;
  background: linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.08) 43%, rgba(0,0,0,.44) 100%);
}
main > .gbanner:not(.prod) .wrapper > .contents.overlay > .padding {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 19px;
}
main > .gbanner:not(.prod) .contents .title.ptitle {
  height: auto !important; /* matchHeight inserisce height inline */
  margin: 0 0 7px;
  color: #ff4646;
  font-size: 12px; /* Tipografia V1: era 11px; ora uguale all'etichetta della card primaria */
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .065em;
  text-transform: uppercase;
}
main > .gbanner:not(.prod) .contents p {
  max-width: 92%;
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.14;
  letter-spacing: -.028em;
  font-weight: 700;
  text-wrap: balance;
}
/* La card primaria conserva una CTA piena, le due secondarie no. */
main > .gbanner:not(.prod) .contents .btn {
  position: absolute;
  left: 18px;
  bottom: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  min-height: 44px;
  max-width: calc(100% - 36px);
  margin: 0;
  padding: 11px 15px;
  border: 1px solid #fff;
  border-radius: 9px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
main > .gbanner:not(.prod) .contents .btn::after {
  content: "→";
  display: inline-block;
  flex: none;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  transition: transform .18s ease;
}
/* Ricambi / Performance: link testuali, bianchi e con ampia area touch. */
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents .btn {
  min-height: 44px;
  max-width: calc(100% - 36px);
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
}
main > .gbanner:not(.prod) .contents .btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn:focus-visible {
  outline: 2px solid #e22623 !important;
}
/* Desktop: card fotografica reagisce appena al puntatore, senza fade in. */
@media (hover: hover) and (pointer: fine) {
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn:hover {
    background: #e8e8e8;
    color: #161616;
    border-color: #e8e8e8;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents .btn:hover {
    color: #fff;
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  main > .gbanner:not(.prod) .wrapper:hover > .figure img {
    transform: scale(1.025);
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .wrapper:hover > .figure img {
    filter: brightness(.94);
  }
  main > .gbanner:not(.prod) .contents .btn:hover::after {
    transform: translateX(3px);
  }
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .title.ptitle {
  font-size: 12px;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents p {
  font-size: 29px;
  max-width: 85%;
  line-height: 1.1;
  font-weight: 700;
}

/* Quando il componente in sé ha spazio, card primaria a sinistra e 2 impilate a destra */
@container asp-home-editorial (min-width: 820px) {
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4 .wrapper {
    height: 208px;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .wrapper {
    height: 430px;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents p {font-size: 30px;}
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents p {font-size: 22px;}
}

/* In card molto strette nessun testo/CTA deve sovrapporsi */
@container asp-home-editorial (max-width: 520px) {
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile {
    gap: 9px;
    row-gap: 14px;
    column-gap: 9px;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .wrapper {
    height: 224px;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .wrapper {
    height: 164px;
  }
  main > .gbanner:not(.prod) .wrapper > .contents.overlay > .padding { padding: 12px; }
  main > .gbanner:not(.prod) .contents .title.ptitle {
    font-size: 11px; /* Tipografia V1: era 10px. A 12px "PERFORMANCE PARTS" va a capo a 360-375px */
    line-height: 1.2;
    margin-bottom: 5px;
  }
  main > .gbanner:not(.prod) .contents p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: -.025em;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents p {
    font-size: 24px;
    line-height: 1.10;
  }
  main > .gbanner:not(.prod) .contents .btn {
    left: 11px;
    bottom: 9px;
    min-height: 44px;
    max-width: calc(100% - 22px);
    padding: 10px 10px;
    font-size: 10px;
    border-radius: 7px;
    gap: 6px;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents .btn {
    left: 11px;
    bottom: 3px;
    min-height: 44px;
    max-width: calc(100% - 22px);
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    box-shadow: none;
    /* Tipografia V1: era 10px. Segue la larghezza della card: 10px a 360px,
       12px da ~410px, così "SCOPRI PERFORMANCE →" resta su una riga. */
    font-size: clamp(10px, calc(4.24cqw - 5.3px), 12px);
    line-height: 1.12;
    gap: 5px;
    text-align: left;
  }
  main > .gbanner:not(.prod) .contents .btn::after {
    display: inline-block;
    font-size: 12px;
  }
}
/* Eccezione LOCALE: in una card davvero stretta evitiamo collisioni
   mantenendo leggibili le CTA, senza modificare viewport o layout sito. */
@container asp-home-editorial (max-width: 360px) {
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .wrapper { height: 184px; }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  main > .gbanner:not(.prod) .figure img,
  main > .gbanner:not(.prod) .contents .btn,
  main > .gbanner:not(.prod) .contents .btn::after {
    transition: none !important;
    animation: none !important;
  }
}




/* =====================================================================
   V6 - UPMAP: CTA piena ma meno ingombrante (solo prima card).
   Il resto delle tre card resta V5.
   ===================================================================== */
main > .gbanner:not(.prod)
.row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn {
  min-height: 39px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 12px; /* Tipografia V1: era 10.5px */
  gap: 5px;
  box-shadow: none;
}
main > .gbanner:not(.prod)
.row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn::after {
  font-size: 13px;
}
/* Solo quando il blocco banner è stretto (non la viewport del sito):
   meno larghezza bianca, senza ridurre l'area touch. */
@container asp-home-editorial (max-width: 520px) {
  main > .gbanner:not(.prod)
  .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn {
    min-height: 38px;
    padding: 8px 7px;
    font-size: 12px; /* Tipografia V1: era 10px */
    gap: 4px;
  }
}
/* Box visivo più basso, area interattiva maggiorata in modo invisibile. */
main > .gbanner:not(.prod)
.row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn::before {
  content: "";
  position: absolute;
  inset: -3px;
}


/* A SPECIAL PARTS | Homepage | Modulo isolato; SOLO CSS. Non unire al CSS completo ASP_05. */

/* =============== 04. TITOLI E SPAZI DEI PRODOTTI ESISTENTI ========== */
main > .homeprods {
  margin: 0;
  padding: 25px 0 34px;
  background: #ffffff !important;
}
main > .homeprods > .container > .row > .col-sm-12 > .title.ptitle {
  margin: 0 0 20px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.028em;
}
main > .homeprods > .container > .row > .col-sm-12 > .title.ptitle > span {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.42;
  font-weight: 400;
  letter-spacing: 0;
  color: #656565;
}
main > .homeprods .carousel .prod-cont {
  background: #fff;
  border-radius: 11px;
  overflow: hidden;
}

/* Solo la spaziatura INTERNA di queste sezioni su mobile nativo. */
@media only screen and (max-width: 767px) {
  main > .homeprods { padding: 19px 0 28px; }
}



/* =======================================================================
   ASP_05 + ASP_06 | HOME V7 - PRECISIONE IMMAGINI + CTA MOTO MOBILE
   Questo blocco integra la V6 e si applica SOLO alla homepage.

   Immagini categorie: occupazione fotografica maggiore, stessa geometria tile.
   Cambio moto: su mobile diventa un pulsante, non un banner.
   Spostamento sotto hero: CSS Anchor Positioning (supporto progressivo).
   Fallback: pulsante compatto nella posizione originale, MAI invisibile.
   Nessuna modifica a main, header, griglie globali, JS, Slick o desktop.
   ======================================================================= */

/* Riempimento più convincente per fotografie (non SVG); ritaglio controllato
   dentro lo stage già esistente. Le fotografie originali con margini bianchi
   molto ampi andranno comunque normalizzate alla sorgente. */
main > .homecategories .carousel picture img:not([src$=".svg"]) {
  transform: scale(1.42);
  transform-origin: center;
}

/* Solo lo stato mobile già previsto dal sito. La barra modello si trasforma
   da fascia full width a CTA; altre pagine non vengono toccate. */
@media only screen and (max-width: 767px) {
  main:has(> .searchparts + .homeabstract) > .searchparts {
    background: #ffffff !important;  /* fallback se anchor non supportato */
    border: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts > .container {
    background: transparent !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .wrapper {
    background: transparent !important;
    border: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .row.row-eq-height-sm {
    min-height: 0 !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .row.row-eq-height-sm > .searchparts {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .text-right {
    text-align: left !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    width: auto !important;
    height: 46px !important;
    min-height: 46px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #e22623;
    border-radius: 9px;
    background: #e22623;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: none !important; /* HTML contiene gia' «Cambia modello» */
    white-space: nowrap;
    box-shadow: 0 3px 9px rgba(180, 22, 22, .13);
    transition: background-color .15s ease, border-color .15s ease;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary::after {
    content: "→";
    display: inline-block;
    font-size: 17px;
    line-height: 1;
    font-weight: 400;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary:hover {
    border-color: #c71e1b;
    background: #c71e1b;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary:focus-visible {
    outline: 2px solid #202020;
    outline-offset: 3px;
  }

  /* Spostamento locale: anziché cambiare il display/order di main, ancoriamo
     la barra precedente alla hero successiva. La hero riserva lo spazio CTA. */
  @supports (anchor-name: --asp-home-intro-v7) and (top: anchor(bottom)) {
    main:has(> .searchparts + .homeabstract) > .homeabstract {
      anchor-name: --asp-home-intro-v7;
      padding-bottom: 81px !important;
    }
    main:has(> .searchparts + .homeabstract) > .searchparts {
      position: absolute !important;
      position-anchor: --asp-home-intro-v7;
      top: anchor(bottom) !important;
      left: 0;
      width: 100%;
      z-index: 2;
      transform: translateY(-100%);
      background: transparent !important;
      padding: 0 0 19px !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary {
    transition: none !important;
  }
}


/* =====================================================================
   A SPECIAL PARTS — HOMEPAGE EDITORIAL PREMIUM V9
   MICRO-RIFINITURE DEL RITMO VISIVO MOBILE

   Solo tre aree della HOME: .homeabstract, .searchparts in presenza
   della hero, .gbanner:not(.prod). Nessuna regola per header,
   categorie/Slick, griglia sito, carrello o altri template.

   L'ancoraggio CSS della V8 resta invariato; qui aumentiamo
   soltanto la riserva della hero per distanziare la CTA moto.
   ===================================================================== */

/* 1. Sottotitolo rosso → bottone Cambia modello: più aria senza
      ingrandire il bottone. Si applica solo dove l'anchor V8 funziona. */
@media only screen and (max-width: 767px) {
  @supports (anchor-name: --asp-home-intro-v7) and (top: anchor(bottom)) {
  }
}

/* 2–4. Le tre card: stesso numero, stesse altezze,
       stessi font e CTA. Solo ritmo interno e separazione. */
@container asp-home-editorial (max-width: 520px) {
  /* +5px SOLTANTO fra UpMap e le due card inferiori.
     Gap orizzontale fra Ricambi e Performance invariato. */

  /* UpMap: il testo si allontana dal bordo alto; la CTA rimane
     nella posizione e con le dimensioni approvate nella V8. */
  main > .gbanner:not(.prod)
  .row.row-eq-height-sm.nomobile > .col-sm-4:first-child
  .wrapper > .contents.overlay > .padding {
    padding-top: 16px;
  }

  /* Card Ricambi/Performance: etichetta e titolo non sono incollati.
     Nessuna altezza card aggiuntiva o variazione della CTA. */
  main > .gbanner:not(.prod)
  .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child)
  .contents .title.ptitle {
    margin-bottom: 9px; /* V8: 5px; +4px */
  }
}


/* ========================================================================
   ASP HOME V11 - CONTROLLO MOTO / SPAZI MOBILE
   Usare SOLO sulla homepage, dopo V9 (non insieme alle patch V10).
   NON cambia main display, non tocca Slick/categorie/header o griglia globale.
   ======================================================================== */

/* MOBILE: ripristina il ritmo V9 e aggiunge SOLO 6px TRA
   il pulsante e la fascia categorie, senza toccare .homecategories.
   L'incremento coordinato delle due riserve mantiene immutata
   la distanza tra sottotitolo rosso e pulsante. */
@media only screen and (max-width: 767px) {
  @supports (anchor-name: --asp-home-intro-v7) and (top: anchor(bottom)) {
  }
}

/* DESKTOP: il blocco moto si integra nella hero, dopo il sottotitolo.
   Niente display:flex su main e niente barra/fascia colorata full-width.
   Due anchor: uno verticale (hero), uno per l'asse orizzontale (container).
   Fallback browser senza anchor: non si nasconde il controllo originale. */
@media only screen and (min-width: 768px) {
  @supports (anchor-name: --asp-desk-hero) and (top: anchor(bottom)) {
    main:has(> .searchparts.bg + .homeabstract) > .homeabstract {
      anchor-name: --asp-desk-hero;
      padding-bottom: 138px !important;
    }
    main:has(> .searchparts.bg + .homeabstract) > .homeabstract .txt {
      anchor-name: --asp-desk-inner;
    }
    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg {
      position: absolute !important;
      position-anchor: --asp-desk-hero;
      top: anchor(--asp-desk-hero bottom) !important;
      left: anchor(--asp-desk-inner left) !important;
      width: anchor-size(--asp-desk-inner width) !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: translateY(calc(-100% - 27px));
      background: transparent !important;
      z-index: 2;
    }
  }

  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg > .container.container-f {
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Compensa i margini negativi della row Bootstrap esclusivamente qui. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg > .container > .row > .col-sm-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .wrapper {
    background: #FCE9EA !important;
    border: 1px solid #F0DCDD !important;
    border-radius: 14px !important;
    min-height: 0 !important;
    padding: 14px 17px !important;
    box-shadow: 0 2px 8px rgba(30,18,20,.03) !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .row.row-eq-height-sm {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF5F5 !important;
    flex: 0 0 72px;
    width: 72px;
    height: 58px;
    margin-right: 18px;
    border-radius: 12px;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left i {
    color: #df2421 !important;
    font-size: 30px;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-body {min-width:0;}
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline {
    margin:0 !important;
    line-height:1.2;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline::before {
    content:"La tua moto";
    display:block;
    margin:0 0 5px;
    color:#876366;
    font-size:11px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.035em;
    text-transform:none;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong)::before {
    content:"Trova i ricambi compatibili";
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline > span {
    display:block;
    color:#242424 !important;
    font-size:20px !important;
    line-height:1.18 !important;
    font-weight:700 !important;
    letter-spacing:-.016em;
    text-wrap:pretty;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong) > span {
    font-size:17px !important;
    font-weight:500 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .text-right {
    text-align:right;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:auto !important;
    min-height:43px !important;
    height:43px !important;
    margin:0;
    padding:0 16px !important;
    border:1px solid #df2421 !important;
    border-radius:9px !important;
    background:#df2421 !important;
    box-shadow:none !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    white-space:nowrap;
    text-transform:none !important;
    transition:background-color .18s ease, border-color .18s ease;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary::after {
    content:"→";
    display:inline-block;
    font-size:15px;
    line-height:1;
    font-weight:400;
  }
  /* Modello già impostato: il link cambia moto è un'azione secondaria */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:has(.ptitle.ptitleline:not(:has(strong))) .searchparts .btn.btn-primary {
    color:#242424 !important;
    border-color:#ccd0d4 !important;
    background:#fff !important;
  }
  @media (hover:hover) and (pointer:fine) {
    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary:hover {
      background:#c81f1c !important;
      border-color:#c81f1c !important;
    }
    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:has(.ptitle.ptitleline:not(:has(strong))) .searchparts .btn.btn-primary:hover {
      background:#f8f8f8 !important;
      border-color:#a9afb5 !important;
    }
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary:focus-visible {
    outline:2px solid #222;
    outline-offset:3px;
  }
}

@media (prefers-reduced-motion:reduce) {
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary {
    transition:none !important;
  }
}


/* ======================================================================
   V12 - ULTIME RIFINITURE HOMEPAGE, SOLO DESKTOP
   1. Margini ottici tra hero, selettore, categorie e banner
   2. Gerarchia tipografica tra label / testo e CTA
   3. Piccolo affinamento allineamenti icona/testo/pulsante
   4. FOTO MOTO DINAMICA (CSS predisposto, immagine fornita da Daisuke)
   Nessuna modifica a header, contenuti, colonne o Slick.
   ====================================================================== */
@media only screen and (min-width: 768px) {
  /* La fascia grigia conserva padding e dimensioni; il bianco dopo di essa
     viene dalla sezione banner, senza alterare .homecategories. */
  main > .homecategories + .gbanner:not(.prod) {
    padding-top: 20px;
  }

  /* Segmento già presente in <strong>: gerarchia testo senza nuovi nodi.
     Le parole introduttive e finali rimangono meno marcate. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .ptitle.ptitleline:has(strong) > span strong {
    font-weight: 700 !important;
    color: #222 !important;
  }

  /* Testo e azione allineati verticalmente nel contenitore gia' esistente */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts {
    align-self: center;
  }

  /* FOTO MODELLO: diventera' visibile automaticamente NON APPENA
     Daisuke avra' aggiunto alla .media-left lo stesso IMG dinamico
     gia' utilizzato nell'header. Il CSS da solo non copia SRC tra nodi.
     Nessun URL fisso o immagine arbitraria. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .media-left:has(img) {
    background: #fff !important;
    overflow: hidden;
    padding: 3px;
    border: 1px solid rgba(0,0,0,.05);
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .media-left img,
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .media-left picture img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .media-left:has(img) > i {
    display: none !important;
  }
}

/* V14: alternanza approvata categorie / card editoriali / prodotti */

/* Dimensioni del pittogramma del selettore desktop come da prova approvata */

/* =====================================================================
   A SPECIAL PARTS | HOMEPAGE V15 - CORREZIONE SEMPLICE DEL MOBILE
   - Desktop V14 invariato
   - "Categorie" invariato
   - Mobile: una sola CTA originale a piena larghezza + freccia a destra
   - NON riattivare .hidden-xs; niente griglie aggiuntive o falsi bottoni
   ===================================================================== */

/* Intestazione visiva categorie, già approvata nella V14 */
main > .homecategories .spacerhor::before {
  content: "Categorie";
  display: block;
  margin: 0 4px 12px;
  color: #222;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.018em;
  text-align: left;
}
@media only screen and (max-width: 767px) {
  main > .homecategories .spacerhor::before {
    margin: 0 3px 11px;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 11px;
  }

  /* La descrizione desktop deve restare nascosta come nel tema nativo. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .hidden-xs {
    display: flex !important;
    position: absolute !important;
    align-items: center !important;
    float: none !important;
    top: 8px !important;
    bottom: 8px !important;
    left: 12px !important;
    right: 67px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Neutralizza soltanto i margini Bootstrap della riga interna:
     il pulsante parte esattamente dal margine della hero, non 10px fuori. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Sfrutta ESCLUSIVAMENTE il bottone già presente, senza modificare la
     posizione o la struttura delle altre sezioni. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts > .row {
    margin: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts .text-right {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Testo vero: 'Seleziona la tua moto' oppure 'Cambia modello',
     in base allo stato prodotto dal sito. La freccia è decorativa. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .searchparts .btn.btn-primary {
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid #e22623 !important;
    border-radius: 10px !important;
    background: #e22623 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: nowrap;
    box-shadow: 0 3px 9px rgba(180,22,22,.11) !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .searchparts .btn.btn-primary::after {
    content: "→";
    display: inline-block !important;
    flex: none;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .searchparts .btn.btn-primary:focus-visible {
    outline: 2px solid #171717 !important;
    outline-offset: 3px;
  }

  /* Altezza CTA +4px rispetto a V13: cresce solo la riserva della hero.
     Nessuna variazione dei padding delle categorie. */
  @supports (anchor-name: --asp-home-intro-v7) and (top: anchor(bottom)) {
    main:has(> .searchparts.bg + .homeabstract) > .homeabstract {
      padding-bottom: 119px !important;
    }
  }
}


/* ========================================================================
   A SPECIAL PARTS - V17 | CORREZIONE SELETTORE MOTO
   BASE OBBLIGATORIA: V15 pulita, NON V16.
   Desktop: stato selezionato = CTA SECONDARIA (non rossa piena).
   Mobile: box rosa 78px stabile, icona / nome modello / freccia,
   senza usare Grid, flex o order su main, sezioni, header o categorie.
   Il solo bottone originale apre la modale, cliccabile sull'intero box.
   ======================================================================== */

/* Desktop: il selettore del precedente file non individuava sempre il
   pulsante. Applichiamo lo stato all'intera sezione in modo esplicito. */
@media only screen and (min-width: 768px) {
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:not(:has(.ptitle.ptitleline strong))
  .searchparts button.btn.btn-primary {
    color: #292929 !important;
    background: #ffffff !important;
    border: 1px solid #dfb5b8 !important;
    box-shadow: none !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:not(:has(.ptitle.ptitleline strong))
  .searchparts button.btn.btn-primary::after {
    content: "\2194" !important;
    color: #b92525 !important;
  }
  @media (hover: hover) and (pointer: fine) {
    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:not(:has(.ptitle.ptitleline strong))
    .searchparts button.btn.btn-primary:hover {
      background: #fff7f7 !important;
      border-color: #c78c90 !important;
      color: #222 !important;
    }
  }
}

@media only screen and (max-width: 767px) {
  /* Niente riordino di main: posizione originaria ancorata alla hero V15.
     Riserva calcolata per box 78px + margine inferiore. */
  @supports (anchor-name: --asp-home-intro-v7) and (top: anchor(bottom)) {
    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg {
      padding: 0 0 18px !important;
    }
  }

  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .wrapper {
    box-sizing: border-box;
    position: relative !important;
    isolation: isolate;
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    padding: 0 !important;
    border: 1px solid #f0d7d9 !important;
    border-radius: 14px !important;
    background: #fcebec !important;
    box-shadow: none !important;
    overflow: hidden;
  }
  /* Importantissimo: righe Bootstrap NON devono diventare una griglia.
     I due soli blocchi del selettore sono ancorati alla wrapper. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .row.row-eq-height-sm::before,
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .row.row-eq-height-sm::after {
    display: none !important;
  }
  /* Colonna nascosta su mobile, ma usata SOLTANTO per mostrarvi la vera moto.
     Posizionamento assoluto evita che float/width Bootstrap spingano il testo. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff6f6 !important;
    border-radius: 10px !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left > i {
    color: #e22623 !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-body {
    display: block !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline::before {
    content: "Trova ricambi compatibili" !important;
    display: block !important;
    margin: 0 0 4px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    color: #896064 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  /* Non selezionato: semplifichiamo solo la frase lunga, senza cambiare DOM. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong) > span {
    display: block !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong) > span strong {
    font-size: 0 !important;
    line-height: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong) > span::after {
    content: "Seleziona la tua moto";
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.23 !important;
    color: #242424 !important;
  }
  /* Selezionato: nome reale nella sorgente HTML (troncamento max 2 righe). */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:not(:has(strong))::before {
    content: "La tua moto" !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:not(:has(strong)) > span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
    overflow-wrap: anywhere;
    font-size: 13.2px !important;
    line-height: 1.23 !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    color: #242424 !important;
  }

  /* Tutto il box e' il VERO button HTML trasparente, sopra al contenuto.
     Questa geometria e' piu' sicura della pseudo-overlay su un bottone 44px:
     il click arriva sempre all'elemento che apre la modale. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts,
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts > .row,
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts .text-right {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts button.btn.btn-primary {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-transform: none !important;
    cursor: pointer;
  }
  /* Pulsante/freccia VISIVI, disegnati dentro il button reale. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts button.btn.btn-primary::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: #e22623;
    border: 1px solid #e22623;
    border-radius: 10px;
    pointer-events: none;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts button.btn.btn-primary::after {
    content: "\2192" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute;
    top: 16px;
    right: 12px;
    width: 44px;
    height: 44px;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    pointer-events: none;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:not(:has(.ptitle.ptitleline strong))
  .searchparts button.btn.btn-primary::before {
    background: #fff !important;
    border-color: #e1babc !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:not(:has(.ptitle.ptitleline strong))
  .searchparts button.btn.btn-primary::after {
    content: "\2194" !important;
    color: #b92525 !important;
    font-size: 22px !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts button.btn.btn-primary:focus-visible {
    outline: 2px solid #202020 !important;
    outline-offset: 3px;
  }
  /* Futuro IMG dinamico (Daisuke): nessuna immagine fissa. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left:has(img) {
    background: white !important;
    padding: 2px !important;
    overflow: hidden;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left img {
    display: block !important;
    width: 100%; height: 100%;
    max-width: 100%; max-height: 100%;
    object-fit: contain;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left:has(img) > i {display:none !important;}
}


/* ======================================================================
   A SPECIAL PARTS - HOMEPAGE V18
   MODULO ISOLATO: SOLO SFONDO DELLA SEZIONE "IN EVIDENZA"

   Da aggiungere dopo V17, oppure usare direttamente il CSS completo V18.
   Sfondo: stesso colore di Categorie e card editoriali (#f1f2f3).
   Non modifica Offerte lampo, prodotti, categorie, header, layout o breakpoint.

   Nell'HTML reale, la sezione In evidenza e' .homeprods immediatamente
   successiva alla .gbanner senza classe .prod. La sezione Offerte lampo,
   invece, segue una .gbanner.prod e non viene interessata.
   ====================================================================== */
main > .gbanner:not(.prod) + .homeprods {
  background-color: #f1f2f3 !important;
}
/* =====================================================================
   A SPECIAL PARTS | HOMEPAGE V19 - GERARCHIA TIPOGRAFICA
   Caricare DOPO ASP_HOME_Editorial_Premium_CSS_ONLY_V18.css.
   Per uso definitivo caricare invece il CSS completo V19 (non entrambi).

   SOLO quattro elementi nella homepage:
   1) titolo principale su mobile: protagonista (vs titolo In evidenza)
   2) titolo sezioni prodotti (In evidenza / Offerte lampo) su mobile
   3) intestazione Categorie su mobile
   4) leggero affinamento del rapporto tra titolo e sottotitolo mobile

   Non modifica: header/sticky, selector moto, CTA, Slick, griglie,
   breakpoint globali, card prodotto, banner e stili di altre pagine.
   ===================================================================== */

/* Il titolo hero su desktop e' GIA' 40-44px: non va gonfiato.
   Su mobile nella V18 scendeva a 25px, sotto i 28px di In evidenza. */

/* Titoli commerciali: un gradino sotto al titolo principale sul mobile.
   Non tocchiamo desktop, card prodotto e offerte fotografiche. */
@media only screen and (max-width: 767px) {
  main > .homeprods > .container > .row > .col-sm-12 > .title.ptitle {
    font-size: 24px;
    line-height: 1.17;
    letter-spacing: -.026em;
    font-weight: 700;
    margin-bottom: 18px;
  }

  /* Categorie e' una label di navigazione, non un H2 commerciale. */
}


/* ============================================================================
   ASP | MODULO 06 | HEADER MOBILE V4 - CSS ONLY
   Sostituisce per intero ASP_06_HEADER_MOBILE_CSS_ONLY_V3.css.
   Ambito: header mobile nativo (max-width 767px), nessuna regola globale.

   Stato attuale del DOM: la bandiera/paese e' nell'header, NON nel menu
   hamburger. Qui viene nascosta dall'header come richiesto. Per conservare
   l'accesso alla scelta paese/valuta, Daisuke DEVE aggiungere nell'hamburger
   un controllo funzionante collegato all'azione .open-settings.

   Icone carrello e menu uniformate con due SVG integrati nel CSS: stroke
   1.7px, perche' il solo font-weight non cambia lo spessore delle font-icons.
   Mantiene la grafica nativa della moto, e la foto dinamica se selezionata.

   Ombra sticky: definita una sola volta nel modulo STICKY HEADER SHADOW.
   NON modifica regole desktop, homepage, categorie, cards, menu interno.
   ============================================================================ */

@media only screen and (max-width: 767px) {
  /* 0. Compattazione SOLTANTO del modulo testata mobile.
     Non tocca la posizione sticky o il JavaScript di Daisuke. */
  /* Elimina la linea grigia residua nel punto di uscita dell'header.
     L'ombra rimane solo su .wrapper-affix e sostituisce il bordo. */
  header[role="banner"],
  header[role="banner"] .wrapper-affix,
  header[role="banner"] .testa,
  header[role="banner"] .testa > .container.container-f,
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm {
    border-bottom: 0 !important;
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
    outline: 0 !important;
  }
  header[role="banner"] .wrapper-affix::before,
  header[role="banner"] .wrapper-affix::after,
  header[role="banner"] .testa::before,
  header[role="banner"] .testa::after {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  header[role="banner"] .testa {
    padding-block: 0 !important;
    margin-block: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-bottom: 0 !important;
    background: #fff !important;
  }
  header[role="banner"] .testa > .container.container-f {
    min-height: 0 !important;
    height: auto !important;
    margin-block: 0 !important;
  }
  /* I. SOLO la riga nativa dell'header: logo + azioni / ricerca sotto */
  header[role="banner"] .testa > .container.container-f {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 15px !important;
  }

  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "asp-logo asp-actions" "asp-search asp-search" !important;
    column-gap: 7px !important;
    row-gap: 4px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5px 0 7px !important;
  }

  /* Scollegamento SOLO delle tre colonne locali dalle larghezze xs/push/pull.
     La griglia generale del sito non viene modificata. */
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :nth-child(-n+3) {
    float: none !important;
    display: block !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child {
    grid-area: asp-logo !important;
  }
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :nth-child(2) {
    grid-area: asp-actions !important;
    justify-self: end !important;
  }
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :nth-child(3) {
    grid-area: asp-search !important;
  }

  /* II. LOGO completo ma NON ingrandito: limite visivo identico in entrambi gli stati. */
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child .logo-wrapper,
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child .logo-wrapper > ul,
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child .logo-wrapper > ul > li.logo {
    display: block !important;
    width: 100% !important;
    max-width: 190px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child .logo-wrapper li.logo > a {
    display: block !important;
    width: 100% !important;
    max-width: 170px !important;
    height: 40px !important;
    background-image: url("https://asparts.pianetaitalia.com/data/logo.svg") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
  }
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child .logo-wrapper li.logo > a > picture {
    opacity: 0 !important;
    display: block !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* III. AZIONI in linea, dimensioni fisse: bandiera (fallback), moto, carrello, menu */
  header[role="banner"] .testa .info.btns,
  header[role="banner"] .testa .info.btns > ul.list-inline {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
  }
  header[role="banner"] .testa .info.btns > ul.list-inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 1px !important;
    white-space: nowrap !important;
    list-style: none !important;
  }
  header[role="banner"] .testa .info.btns > ul.list-inline > li {
    float: none !important;
    flex: 0 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 44px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    position: static !important;
  }

  /* Le azioni desktop devono rimanere nascoste su mobile */
  header[role="banner"] .testa .info.btns > ul.list-inline > li.hidden-xs,
  header[role="banner"] .testa .info.btns > ul.list-inline > li.moto-selezionata {
    display: none !important;
  }

  /* Sposta LOGICAMENTE paese/valuta al menu: nasconde il controllo in testata.
     ATTENZIONE: inserire la voce reale dentro #canvas_menu (intervento HTML).
     Nessun CSS puo' trasferire un event handler nel menu. */
  header[role="banner"] .testa .info.btns > ul.list-inline > li:has(> .langselector),
  header[role="banner"] .testa .info.btns > ul.list-inline > li:has(> a.open-settings) {
    display: none !important;
  }
  header[role="banner"] .testa .info.btns .langselector {
    display: none !important;
  }

  header[role="banner"] .testa .info.btns > ul.list-inline > li > a,
  header[role="banner"] .testa .info.btns > ul.list-inline > li > button,
  header[role="banner"] .testa .btn-modal-bike,
  header[role="banner"] .testa #cart .ajax-cart a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }

  /* L'HTML ha uno span inline con display !important: non deve consumare spazio */
  header[role="banner"] .testa .info.btns .open-settings > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  /* Moto non selezionata: glifo ORIGINALE, appena maggiore e tratto rinforzato. */
  header[role="banner"] .testa .info.btns i.icon-motorbike-as {
    display: inline-block !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    -webkit-text-stroke: .30px currentColor;
    color: #202020 !important;
    vertical-align: middle !important;
    transform: none !important;
  }

  /* Carrello outline; hamburger a DUE tratti: sopra lungo, sotto corto.
     Manteniamo peso 1.7 px per allineare l'hamburger al carrello. */
  /* Cart e hamburger in stile outline a spessore uguale.
     Gli SVG sostituiscono SOLTANTO i due glifi mobile dell'header. */
  header[role="banner"] .testa .info.btns i.icon-cart-n,
  header[role="banner"] .testa .info.btns i.icon-menu-n {
    display: block !important;
    flex: 0 0 25px !important;
    width: 25px !important;
    height: 25px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    font-style: normal !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 25px 25px !important;
  }
  header[role="banner"] .testa .info.btns i.icon-cart-n {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23202020%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2220%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2220%22%20r%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M2%203h2.4l2.25%2012.1a2%202%200%200%200%202%201.65h10.7a2%202%200%200%200%201.95-1.55L23%207H5.2%22%2F%3E%3C%2Fsvg%3E") !important;
  }
  header[role="banner"] .testa .info.btns i.icon-menu-n {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23202020%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%208h18M3%2016h12%22%2F%3E%3C%2Fsvg%3E") !important;
  }
  header[role="banner"] .testa .info.btns i.icon-cart-n::before,
  header[role="banner"] .testa .info.btns i.icon-menu-n::before {
    content: "" !important;
    display: none !important;
  }

  /* Moto selezionata: foto REALE portata alla dimensione originale 40x40. */
  header[role="banner"] .testa .btn-modal-bike > img {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
  header[role="banner"] .testa .btn-modal-bike > span {
    display: none !important;
  }

  /* Cart: il collegamento è sempre disponibile. Il badge compare soltanto
     se il backend lo genera (non si inventa una quantità con CSS). */
  header[role="banner"] .testa #cart,
  header[role="banner"] .testa #cart > .ajax-cart,
  header[role="banner"] .testa #cart > .ajax-cart > span,
  header[role="banner"] .testa #cart .p-rel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }
  header[role="banner"] .testa #cart .badge:empty,
  header[role="banner"] .testa #cart [data-count="0"] .badge,
  header[role="banner"] .testa #cart .badge[data-count="0"] {
    display: none !important;
  }
  header[role="banner"] .testa .toggle-canvas {
    cursor: pointer !important;
  }

  /* IV. RICERCA: 2a riga compatta, input protagonista, solo lente a destra */
  header[role="banner"] .testa .modal-search,
  header[role="banner"] .testa .modal-search > ul.list-inline,
  header[role="banner"] .testa .modal-search > ul.list-inline > li,
  header[role="banner"] .testa .modal-search .top_search,
  header[role="banner"] .testa .modal-search #frm_cerca {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header[role="banner"] .testa #frm_cerca > .input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e5e7eb !important;
    background: #f1f2f3 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  header[role="banner"] .testa #frm_cerca #txt_cerca {
    display: block !important;
    position: static !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 1% !important;
    height: 44px !important;
    line-height: 44px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #202020 !important;
    caret-color: #202020 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  header[role="banner"] .testa #frm_cerca #txt_cerca::placeholder {
    color: #62666b !important;
    opacity: 1 !important;
  }
  header[role="banner"] .testa #frm_cerca #txt_cerca:focus-visible {
    outline: 2px solid #727b89 !important;
    outline-offset: -2px !important;
  }
  header[role="banner"] .testa #frm_cerca .input-group-btn {
    position: static !important;
    display: block !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header[role="banner"] .testa #frm_cerca .input-group-btn > button.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: #202020 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important; /* nasconde solo il testo visivo 'Cerca' */
    line-height: 0 !important;
    cursor: pointer !important;
  }
  header[role="banner"] .testa #frm_cerca .input-group-btn > button.btn > i.icon-search {
    display: inline-block !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  header[role="banner"] .testa #frm_cerca .input-group-btn > button.btn:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: -4px !important;
  }

  /* Non modificare .search_results, modali, overlay, nav e filtri. */
}


/* =========================================================
   A SPECIAL PARTS — STICKY HEADER SHADOW (tutte le larghezze)
   - header.noaffix = header non sticky -> non interviene
   - sostituisce il bordo inferiore del blocco header con un'ombra
   - unica definizione: il modulo header mobile non la ripete più
   ========================================================= */

header:not(.noaffix) .wrapper-affix,
header:not(.noaffix) .wrapper-affix .megamenu,
header:not(.noaffix) .wrapper-affix .megamenu #canvas_menu.navbar {
    border-bottom: 0 !important;
}

header:not(.noaffix) .wrapper-affix {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
}


/* =========================================================
   A SPECIAL PARTS — HEADER TOP
   COMPONENT-ADAPTIVE / ISOLATED / NO-COLLISION

   PRINCIPIO:
   - NON modifica la griglia/layout responsive della pagina
   - NON modifica col-lg / col-xl / push / pull del sito
   - NON scala progressivamente font o icone
   - mantiene icone + scritte a dimensione fissa finché CI STANNO
   - quando la SOLA area azioni diventa troppo stretta,
     passa a icone-only tramite CONTAINER QUERY locale
   - vale da 768px in su: tra 768 e 1199px (menu a scomparsa) stesso
     stile del desktop, con sole icone e hamburger; sotto 768px resta
     il modulo HEADER MOBILE
   - NON modifica .megamenu, #main, .dropdown-menu o .group-menu
   - allineamento verticale: tutte le azioni sono alte 44px come il
     campo di ricerca e centrate sulla stessa linea (nessuno
     spostamento manuale)
   ========================================================= */

@media only screen and (min-width: 768px) {

    /* =========================================================
       0. BARRA NERA SUPERIORE
       Le quattro voci erano in quattro colonne uguali, le prime tre
       allineate a sinistra e l'ultima a destra: spazi diversi.
       Ora hanno la larghezza del proprio testo e lo spazio fra una
       e l'altra è identico.
       ========================================================= */

    body > .boxtop > .container > .row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    body > .boxtop > .container > .row::before,
    body > .boxtop > .container > .row::after {
        display: none !important;
    }

    body > .boxtop > .container > .row > [class*="col-"] {
        flex: 0 0 auto !important;
        float: none !important;
        width: auto !important;
        text-align: left !important;
    }

    /* la terza voce è una lista: senza i suoi rientri lo spazio resta uguale */
    body > .boxtop > .container > .row > [class*="col-"] > .list-inline,
    body > .boxtop > .container > .row > [class*="col-"] > .list-inline > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* =========================================================
       1. STRUTTURA ORIGINALE
       NON trasformiamo più la row in un layout inventato.
       Manteniamo col-md / col-lg / col-xl + push/pull Daisuke.
       ========================================================= */

    header .testa > .container > .row {
        align-items: center !important;
    }

    /* =========================================================
       2. LOGO
       Nessuna modifica alla colonna: solo dimensione contenuto.
       ========================================================= */

    header .testa .logo-wrapper,
    header .testa .logo-wrapper ul,
    header .testa .logo-wrapper li,
    header .testa .logo a {
        width: 100% !important;
    }

    header .testa .logo img {
        display: block !important;

        width: 100% !important;
        max-width: 220px !important;
        height: auto !important;

        margin: 0 !important;
    }

    /* =========================================================
       3. SEARCH
       Occupa il 100% DELLA SUA COLONNA ORIGINALE CENTRALE.
       ========================================================= */

    header .testa .modal-search,
    header .testa .modal-search > ul,
    header .testa .modal-search > ul > li,
    header .testa .top_search,
    header .testa #frm_cerca {
        width: 100% !important;
        max-width: none !important;

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

    header .testa #frm_cerca .input-group {
        display: flex !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: none !important;

        height: 44px !important;

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

        background: #f4f4f4 !important;

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

        box-shadow: none !important;

        overflow: hidden !important;
    }

    header .testa #txt_cerca {
        position: static !important;

        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        height: 44px !important;

        margin: 0 !important;

        padding:
            0
            16px
            0
            44px !important;

        color: #1f1f1f !important;
        caret-color: #1f1f1f !important;

        font-size: 15px !important;
        font-weight: 400 !important;

        background-color: #f4f4f4 !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") !important;

        background-repeat: no-repeat !important;
        background-position: 15px center !important;
        background-size: 18px 18px !important;

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

        box-shadow: none !important;

        outline: none !important;
    }

    header .testa #txt_cerca::placeholder {
        color: #353535 !important;
        opacity: 1 !important;
    }

    header .testa #frm_cerca .input-group-btn {
        position: static !important;

        display: block !important;

        flex: 0 0 auto !important;

        width: auto !important;

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

    header .testa #frm_cerca .input-group-btn .btn {
        display: flex !important;

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

        min-width: 90px !important;
        height: 44px !important;

        margin: 0 !important;

        padding:
            0
            18px !important;

        background: #1f1f1f !important;

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

        box-shadow: none !important;

        color: #ffffff !important;

        font-size: 13px !important;
        font-weight: 600 !important;

        text-transform: uppercase !important;
    }

    header .testa #frm_cerca .input-group-btn .btn i {
        display: none !important;
    }

    /* =========================================================
       4. AZIONI A DESTRA
       Manteniamo la colonna Bootstrap originale.
       All'interno creiamo una sola riga ben centrata.
       ========================================================= */

    header .testa .info.btns {
        display: flex !important;

        /* Responsive LOCALE del componente, non della pagina */
        container-type: inline-size !important;
        container-name: asp-header-actions !important;

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

        width: 100% !important;
        height: 44px !important;

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

    header .testa .info.btns > ul {
        display: flex !important;

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

        flex-wrap: nowrap !important;

        gap: 22px !important;

        width: auto !important;
        height: 44px !important;

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

        white-space: nowrap !important;
    }

    header .testa .info.btns > ul > li {
        position: relative !important;

        display: flex !important;

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

        flex: 0 0 auto !important;

        float: none !important;

        height: 44px !important;

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

        vertical-align: middle !important;
    }

    /* =========================================================
       5. ORDINE
       Moto | Account | Carrello | Lingua
       ========================================================= */

    header .testa .info.btns > ul > li:has(.btn-modal-bike) {
        order: 1 !important;
    }

    header .testa .info.btns > ul > li:has(.a_saveurl) {
        order: 2 !important;
    }

    header .testa .info.btns > ul > li:has(#cart) {
        order: 3 !important;
    }

    /* Nel DOM .langselector è un <div> dentro il <li>, non una classe del <li> */
    header .testa .info.btns > ul > li:has(> .langselector) {
        order: 4 !important;
    }

    /* cuore OFF desktop */
    header .testa .info.btns > ul > li:has(#preferiti),
    header .testa #preferiti {
        display: none !important;
    }

    /* hamburger: ultimo a destra tra 768 e 1199px (lì il menu è a scomparsa) */
    header .testa .info.btns > ul > li:has(.toggle-canvas) {
        order: 5 !important;
    }

    header .testa .toggle-canvas {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        height: 44px !important;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Stessa icona a due linee dell'header mobile (stesso SVG, 25px),
       al posto del glifo a tre linee del tema. */
    header .testa .toggle-canvas i.icon-menu-n {
        display: block !important;
        flex: 0 0 25px !important;
        width: 25px !important;
        height: 25px !important;
        font-size: 0 !important;
        line-height: 0 !important;
        font-style: normal !important;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23202020%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%208h18M3%2016h12%22%2F%3E%3C%2Fsvg%3E") !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 25px 25px !important;
    }

    header .testa .toggle-canvas i.icon-menu-n::before {
        content: "" !important;
        display: none !important;
    }

    /* hamburger/X OFF da 1200px: c'è la barra del menu */
    @media only screen and (min-width: 1200px) {
        header .testa .info.btns > ul > li:has(.toggle-canvas),
        header .testa .toggle-canvas {
            display: none !important;
        }
    }

    /* nome modello backend OFF nell'header */
    header .testa .info.btns > ul > li.moto-selezionata {
        display: none !important;
    }

    /* =========================================================
       6. MOTO

       NON SELEZIONATA:
       [icona] Seleziona
               Moto

       SELEZIONATA:
       [foto 40px] La tua
                   Moto
       ========================================================= */

    header .testa .btn-modal-bike {
        display: grid !important;

        grid-template-columns:
            40px
            auto !important;

        grid-template-rows:
            15px
            18px !important;

        /* le due righe (33px) stanno al centro dei 44px, non in alto */
        align-content: center !important;

        align-items: center !important;

        column-gap: 12px !important;

        width: auto !important;
        min-width: max-content !important;

        height: 44px !important;

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

        background: transparent !important;

        border: 0 !important;

        box-shadow: none !important;

        color: #1f1f1f !important;

        font-size: 0 !important;

        text-align: left !important;

        white-space: nowrap !important;
    }

    /* icona generica: resta 24px */
    header .testa .btn-modal-bike > i {
        grid-column: 1 !important;
        grid-row:
            1
            /
            3 !important;

        display: block !important;

        align-self: center !important;
        justify-self: center !important;

        margin: 0 !important;

        color: #1f1f1f !important;

        font-size: 24px !important;
        line-height: 1 !important;
    }

    /* foto moto selezionata: RESTA 40x40 */
    header .testa .btn-modal-bike > img {
        grid-column: 1 !important;
        grid-row:
            1
            /
            3 !important;

        display: block !important;

        align-self: center !important;
        justify-self: center !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

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

        object-fit: contain !important;
    }

    header .testa .btn-modal-bike > span {
        display: none !important;
    }

    /* non selezionata */
    header .testa .btn-modal-bike:has(> i)::before {
        content: "Seleziona" !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: end !important;

        display: block !important;

        margin: 0 !important;

        color: #555555 !important;

        font-size: 12px !important;
        line-height: 1 !important;

        font-weight: 400 !important;

        text-transform: none !important;
    }

    header .testa .btn-modal-bike:has(> i)::after {
        content: "Moto" !important;

        grid-column: 2 !important;
        grid-row: 2 !important;

        align-self: start !important;

        display: block !important;

        margin-top: 2px !important;

        color: #1f1f1f !important;

        font-size: 15px !important;
        line-height: 1 !important;

        font-weight: 600 !important;

        text-transform: none !important;
    }

    /* selezionata */
    header .testa .btn-modal-bike:has(> img)::before {
        content: "La tua" !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: end !important;

        display: block !important;

        margin: 0 !important;

        color: #555555 !important;

        font-size: 12px !important;
        line-height: 1 !important;

        font-weight: 400 !important;
    }

    header .testa .btn-modal-bike:has(> img)::after {
        content: "Moto" !important;

        grid-column: 2 !important;
        grid-row: 2 !important;

        align-self: start !important;

        display: block !important;

        margin-top: 2px !important;

        color: #1f1f1f !important;

        font-size: 15px !important;
        line-height: 1 !important;

        font-weight: 600 !important;
    }

    /* =========================================================
       7. ACCOUNT
       ========================================================= */

    header .testa .a_saveurl {
        display: grid !important;

        grid-template-columns:
            26px
            auto !important;

        grid-template-rows:
            15px
            18px !important;

        /* le due righe (33px) stanno al centro dei 44px, non in alto */
        align-content: center !important;

        align-items: center !important;

        column-gap: 12px !important;

        width: auto !important;
        min-width: max-content !important;

        height: 44px !important;

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

        color: #1f1f1f !important;

        font-size: 0 !important;

        text-align: left !important;
        text-decoration: none !important;

        white-space: nowrap !important;
    }

    header .testa .a_saveurl > i {
        grid-column: 1 !important;
        grid-row:
            1
            /
            3 !important;

        display: block !important;

        align-self: center !important;
        justify-self: center !important;

        margin: 0 !important;

        color: #1f1f1f !important;

        font-size: 24px !important;
        line-height: 1 !important;
    }

    header .testa .a_saveurl::before {
        content: "Il tuo" !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: end !important;

        color: #555555 !important;

        font-size: 12px !important;
        line-height: 1 !important;

        font-weight: 400 !important;
    }

    header .testa .a_saveurl[href*="/login"]::before {
        content: "Ciao, accedi" !important;
    }

    header .testa .a_saveurl::after {
        content: "Account" !important;

        grid-column: 2 !important;
        grid-row: 2 !important;

        align-self: start !important;

        margin-top: 2px !important;

        color: #1f1f1f !important;

        font-size: 15px !important;
        line-height: 1 !important;

        font-weight: 600 !important;
    }

    /* =========================================================
       8. CARRELLO
       ========================================================= */

    header .testa #cart,
    header .testa #cart > .ajax-cart > span {
        display: block !important;

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

    header .testa #cart > .ajax-cart > span > a {
        display: grid !important;

        grid-template-columns:
            28px
            auto !important;

        grid-template-rows:
            15px
            18px !important;

        /* le due righe (33px) stanno al centro dei 44px, non in alto */
        align-content: center !important;

        align-items: center !important;

        column-gap: 12px !important;

        width: auto !important;
        min-width: max-content !important;

        height: 44px !important;

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

        color: #1f1f1f !important;

        font-size: 0 !important;

        text-align: left !important;
        text-decoration: none !important;

        white-space: nowrap !important;
    }

    header .testa #cart .p-rel {
        grid-column: 1 !important;
        grid-row:
            1
            /
            3 !important;

        display: flex !important;

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

        width: 28px !important;
        height: 34px !important;

        margin: 0 !important;
    }

    header .testa #cart i {
        display: block !important;

        color: #1f1f1f !important;

        font-size: 24px !important;
        line-height: 1 !important;
    }

    header .testa #cart > .ajax-cart > span > a::before {
        content: "Il tuo" !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: end !important;

        color: #555555 !important;

        font-size: 12px !important;
        line-height: 1 !important;

        font-weight: 400 !important;
    }

    header .testa #cart > .ajax-cart > span > a::after {
        content: "Carrello" !important;

        grid-column: 2 !important;
        grid-row: 2 !important;

        align-self: start !important;

        margin-top: 2px !important;

        color: #1f1f1f !important;

        font-size: 15px !important;
        line-height: 1 !important;

        font-weight: 600 !important;
    }

    header .testa #cart .badge {
        top: -6px !important;
        left: 17px !important;

        min-width: 17px !important;
        width: auto !important;

        height: 17px !important;

        padding:
            0
            4px !important;

        line-height: 17px !important;

        border-radius: 999px !important;

        font-size: 10px !important;
        font-weight: 500 !important;
    }

    /* =========================================================
       9. LINGUA
       DOM reale: li > div.langselector > div.flag.it > button.open-settings
       con il testo "IT/€". Bandiera a sinistra, testo accanto: il
       pulsante prende la larghezza del proprio contenuto.
       ========================================================= */

    header .testa .langselector .flag {
        position: relative !important;

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

        height: 44px !important;

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

    header .testa .langselector .flag::before {
        content: "" !important;

        position: absolute !important;

        top: 50% !important;
        left: 0 !important;

        width: 24px !important;
        height: 17px !important;

        transform: translateY(-50%) !important;

        border-radius: 4px !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    header .testa .langselector .flag > button {
        display: flex !important;
        align-items: center !important;

        width: auto !important;
        min-width: 42px !important;
        height: 44px !important;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        color: #1f1f1f !important;

        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }

    /* Sotto 1200px il tema nasconde il testo "IT/€" (resta la sola
       bandiera): il pulsante si riduce alla bandiera, senza lo spazio
       vuoto che allontanava l'hamburger. */
    @media only screen and (max-width: 1199.98px) {
        header .testa .langselector .flag > button {
            min-width: 24px !important;
            padding-left: 24px !important;
        }
    }

    /* =========================================================
       10. ETICHETTE IN INGLESE
       Le scritte sono generate dal CSS: senza queste regole la
       versione inglese del sito mostrerebbe i testi in italiano.
       ========================================================= */

    html:lang(en) header .testa .btn-modal-bike:has(> i)::before {
        content: "Select" !important;
    }

    html:lang(en) header .testa .btn-modal-bike:has(> img)::before,
    html:lang(en) header .testa .a_saveurl::before,
    html:lang(en) header .testa #cart > .ajax-cart > span > a::before {
        content: "Your" !important;
    }

    html:lang(en) header .testa .btn-modal-bike:has(> i)::after,
    html:lang(en) header .testa .btn-modal-bike:has(> img)::after {
        content: "Bike" !important;
    }

    html:lang(en) header .testa .a_saveurl[href*="/login"]::before {
        content: "Hello, sign in" !important;
    }

    html:lang(en) header .testa #cart > .ajax-cart > span > a::after {
        content: "Cart" !important;
    }

}

/* =========================================================
   RESPONSIVE LOCALE DEL BLOCCO AZIONI
   Nessun breakpoint viewport aggiunto.

   Finché .info.btns ha almeno 429px (il gruppo completo ne occupa ~424):
   -> Moto / Account / Carrello mantengono icone + scritte
      con dimensioni ORIGINALI FISSE.

   Quando SOLO questa area scende a 428px o meno:
   -> nascondiamo esclusivamente le scritte
   -> le icone NON si rimpiccioliscono
   -> la griglia Bootstrap della pagina NON cambia
   ========================================================= */

@container asp-header-actions (max-width: 428px) {

    header .testa .info.btns > ul {
        gap: 22px !important;
    }

    /* MOTO: icona/foto invariata, testo off */
    header .testa .btn-modal-bike {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 40px !important;

        column-gap: 0 !important;
    }

    header .testa .btn-modal-bike:has(> i)::before,
    header .testa .btn-modal-bike:has(> i)::after,
    header .testa .btn-modal-bike:has(> img)::before,
    header .testa .btn-modal-bike:has(> img)::after {
        content: none !important;
        display: none !important;
    }

    /* ACCOUNT: icona 24px invariata, testo off */
    header .testa .a_saveurl {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 26px !important;

        column-gap: 0 !important;
    }

    header .testa .a_saveurl::before,
    header .testa .a_saveurl::after {
        content: none !important;
        display: none !important;
    }

    /* CARRELLO: icona 24px invariata, testo off */
    header .testa #cart > .ajax-cart > span > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 28px !important;

        column-gap: 0 !important;
    }

    header .testa #cart > .ajax-cart > span > a::before,
    header .testa #cart > .ajax-cart > span > a::after {
        content: none !important;
        display: none !important;
    }
}

/* Tra 768 e 991px l'area azioni è larga ~234px e contiene anche
   l'hamburger: stesso stile, icone più vicine per restare su una riga. */
@container asp-header-actions (max-width: 300px) {

    header .testa .info.btns > ul {
        gap: 14px !important;
    }
}


/* =========================================================
   A SPECIAL PARTS — MEGA MENU "MODELLI MOTO APRILIA"
   ISOLATED / NO-COLLISION BUILD

   OWNERSHIP CONTRACT:
   - Questo file può modificare SOLO:
     header .megamenu > ... > "Modelli Moto Aprilia"
   - NON modifica header .testa, search, Moto/Account/Carrello/Lingua
   - NON modifica "Tutti i prodotti" o altri dropdown
   - I modelli sono posizionati uno per uno tramite il loro id (value):
     un modello NUOVO aggiunto nel gestionale va aggiunto anche qui.
   ========================================================= */

@media (min-width: 1200px) {

    /* =====================================================
       1. DROPDOWN FULL WIDTH
       ===================================================== */

    header .megamenu {
        position: relative !important;
        overflow: visible !important;
    }

    header .megamenu #wrappermenu,
    header .megamenu #canvas_menu,
    header .megamenu #canvas_menu > .container,
    header .megamenu #canvas_menu > .container > .row,
    header .megamenu #canvas_menu .container-fluid,
    header .megamenu #canvas_menu .wrappermenu,
    header .megamenu #main,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) {
        position: static !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 0 20px !important;
        transform: none !important;

        background: var(--white, #fff) !important;
        border-radius: 0 !important;
        border-color: var(--grey-f0, #f0f0f0) !important;
        box-shadow: none !important;

        overflow: visible !important;
        z-index: 99999 !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    > .container.container-f {
        width: 100% !important;
        max-width: 1716px !important;

        margin: 0 auto !important;
        padding: 0 16px !important;

        box-sizing: border-box !important;

        max-height: calc(100vh - 150px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    /* =====================================================
       2. GRIGLIA BASE
       1px per riga = controllo preciso degli spazi.
       ===================================================== */

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu {
        display: grid !important;
        grid-auto-rows: 1px !important;

        row-gap: 0 !important;

        width: 100% !important;
        margin: 0 !important;

        /* identico .megamenu .hidelv1 */
        padding: 15px 0 5px !important;

        list-style: none !important;
        box-sizing: border-box !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1 {
        position: relative !important;

        display: block !important;
        float: none !important;
        clear: none !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

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

        border: 0 !important;

        /*
         * IMPORTANTE:
         * stretch fa riempire al LI tutto lo span assegnato.
         * Quindi la linea ::after finisce DAVVERO 10px sotto
         * il testo, invece di attaccarsi subito alla scritta.
         */
        align-self: stretch !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1
    > a::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1
    > a::after {
        content: none !important;
        display: none !important;
    }


    /* =====================================================
       3. LINK MODELLO = .megamenu .lv2 > a REALE
       ===================================================== */

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1
    > a {
        display: inline-block !important;

        width: auto !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 3px 20px 3px 0 !important;

        color: var(--grey-73, #737373) !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 16px !important;

        text-align: left !important;
        text-transform: none !important;
        text-decoration: none !important;

        background: transparent !important;

        /*
         * Vogliamo evitare proprio l'effetto brutto a due righe.
         * Sotto 1600 passiamo a 4 colonne invece di wrappare.
         */
        white-space: nowrap !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1
    > a:hover,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1
    > a:focus {
        background-color: var(--white, #fff) !important;
        color: var(--red-e2, #E22623) !important;
        text-decoration: none !important;
    }


    /* =====================================================
       4. TITOLI = .megamenu .lv1 > a REALE
       MA NON CLICCABILI
       ===================================================== */

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="5"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="14"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="8"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="16"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="7"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="22"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="10"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="24"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="25"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="20"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="23"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="18"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="28"])::before {
        display: block !important;

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

        color: var(--black, #1f1f1f) !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 20px !important;

        text-transform: uppercase !important;
        text-decoration: none !important;

        background: transparent !important;

        pointer-events: none !important;
        cursor: default !important;
        user-select: none !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="5"])::before  { content:"RSV4" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="14"])::before { content:"RSV 1000" !important; }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="8"])::before  { content:"TUONO V4" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="16"])::before { content:"TUONO 1000" !important; }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="7"])::before  { content:"RS 660" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="22"])::before { content:"TUONO 660" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="10"])::before { content:"TUAREG 660" !important; }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="24"])::before { content:"RS 457" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="25"])::before { content:"TUONO 457" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="20"])::before { content:"RS 250" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="23"])::before { content:"RXV / SXV" !important; }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="18"])::before { content:"CAPONORD / FALCO / FUTURA" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="28"])::before { content:"DORSODURO / SHIVER" !important; }


    /* =====================================================
       5. DIVISORI
       La linea è a fondo dello span.
       Lo span dell'ultimo link è 33px:
       link 22px + 10px vuoto + 1px linea.
       ===================================================== */

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="4"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="15"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="19"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="17"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="6"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="21"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="9"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="24"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="25"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="20"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="23"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="26"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="27"])::after {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 1px !important;

        background: var(--grey-f0, #f0f0f0) !important;

        pointer-events: none !important;
    }

    /* Linea nera superiore come "Tutti i prodotti" */
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]):hover
    > .dropdown-menu,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]).open
    > .dropdown-menu {
        border-top: 1px solid var(--black, #1f1f1f) !important;
    }



    /* =====================================================
       6. COLONNE E POSIZIONI
       Base (da 1200px): 4 colonne. Da 1600px: 5 colonne.
       Le posizioni uguali nelle due griglie sono scritte una
       volta sola; da 1600px cambiano solo RS 250, RXV/SXV,
       Caponord e Dorsoduro.
       Niente intervallo "1200-1599": con lo zoom del sistema la
       finestra può essere larga 1599,2px e non rientrare né in
       "max-width:1599px" né in "min-width:1600px" (il menu
       restava senza colonne).
       ===================================================== */

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        column-gap: 18px !important;
    }

    /* Posizioni comuni a 4 e 5 colonne */
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="5"]) { grid-column:1 !important; grid-row:1 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="1"]) { grid-column:1 !important; grid-row:55 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="2"]) { grid-column:1 !important; grid-row:77 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="3"]) { grid-column:1 !important; grid-row:99 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="4"]) { grid-column:1 !important; grid-row:121 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="14"]) { grid-column:1 !important; grid-row:169 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="15"]) { grid-column:1 !important; grid-row:223 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="8"]) { grid-column:2 !important; grid-row:1 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="11"]) { grid-column:2 !important; grid-row:55 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="12"]) { grid-column:2 !important; grid-row:77 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="13"]) { grid-column:2 !important; grid-row:99 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="19"]) { grid-column:2 !important; grid-row:121 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="16"]) { grid-column:2 !important; grid-row:169 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="17"]) { grid-column:2 !important; grid-row:223 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="7"]) { grid-column:3 !important; grid-row:1 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="6"]) { grid-column:3 !important; grid-row:55 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="22"]) { grid-column:3 !important; grid-row:103 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="21"]) { grid-column:3 !important; grid-row:157 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="10"]) { grid-column:3 !important; grid-row:205 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="9"]) { grid-column:3 !important; grid-row:259 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="24"]) { grid-column:4 !important; grid-row:1 / span 65 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="25"]) { grid-column:4 !important; grid-row:81 / span 65 !important; }

    /* Solo griglia a 4 colonne */
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="20"]) { grid-column:1 !important; grid-row:271 / span 65 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="23"]) { grid-column:2 !important; grid-row:271 / span 65 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="18"]) { grid-column:4 !important; grid-row:161 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="26"]) { grid-column:4 !important; grid-row:215 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="28"]) { grid-column:4 !important; grid-row:263 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="27"]) { grid-column:4 !important; grid-row:317 / span 33 !important; }
}


@media (min-width: 1600px) {

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        column-gap: 30px !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="20"]) { grid-column:4 !important; grid-row:161 / span 65 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="23"]) { grid-column:4 !important; grid-row:241 / span 65 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="18"]) { grid-column:5 !important; grid-row:1 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="26"]) { grid-column:5 !important; grid-row:55 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="28"]) { grid-column:5 !important; grid-row:103 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="27"]) { grid-column:5 !important; grid-row:157 / span 33 !important; }
}


/* >=1800px: padding esatto del tema */
@media (min-width: 1800px) {
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    > .container.container-f {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}


/* =========================================================
   A SPECIAL PARTS — PDP COMPATIBILITÀ MOTO
   COMPONENT-ADAPTIVE / ISOLATED / NO-COLLISION

   PRINCIPIO:
   - modifica SOLO .product-view .moto-compat
   - NON modifica colonne/grid responsive della pagina
   - NON usa breakpoint viewport per cambiare layout
   - il componente reagisce alla SUA larghezza reale
   - dimensioni font/icone NON scalano progressivamente
   - due stati netti:
       1) completo quando c'è spazio
       2) compatto quando il box è stretto
   ========================================================= */


/* =========================================================
   1. ROOT COMPONENTE
   ========================================================= */

.product-view .moto-compat {
    width: 100%;

    margin: 20px 0 12px;
    padding: 0;

    background: #f2f2f2;

    border: 0;
    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04);

    font-family: inherit;
    color: #202020;

    /*
     * Responsive LOCALE:
     * nessun breakpoint della pagina viene modificato.
     */
    container-type: inline-size;
    container-name: asp-pdp-compat;
}


/* =========================================================
   2. STATO COMPLETO
   ========================================================= */

.product-view .moto-compat .moto-compat-current {
    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        max-content;

    align-items: center;

    gap: 16px;

    padding:
        14px
        16px;
}


/* =========================================================
   3. IMMAGINE
   ========================================================= */

.product-view .moto-compat .moto-compat-image {
    width: 72px;
    height: 72px;

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

    padding: 6px;

    background: #ffffff;

    border-radius: 8px;

    overflow: hidden;
}

.product-view .moto-compat .moto-compat-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   4. CONTENUTO
   ========================================================= */

.product-view .moto-compat .moto-compat-content {
    min-width: 0;
}


/* Nasconde la frase ridondante originale,
   mantenendo visibile il modello dentro <strong>. */
.product-view .moto-compat .moto-compat-message {
    margin: 0;

    font-size: 0;
    line-height: 1.25;

    color: #202020;
}


/* =========================================================
   5. "LA TUA MOTO"
   ========================================================= */

.product-view .moto-compat .moto-compat-message::before {
    content: "LA TUA MOTO";

    display: block;

    margin-bottom: 4px;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0;

    color: #777777;
}

html[lang^="en"]
.product-view .moto-compat .moto-compat-message::before {
    content: "YOUR BIKE";
}


/* =========================================================
   6. MODELLO
   ========================================================= */

.product-view .moto-compat .moto-compat-message strong {
    display: block;

    margin: 0;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 700;

    color: #202020;

    white-space: normal;
    text-wrap: pretty;
    hyphens: none;
}


/* =========================================================
   7. CAMBIA MOTO
   ========================================================= */

.product-view .moto-compat .moto-compat-change {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin: 8px 0 0;
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;

    color: #444444;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;

    font-weight: 500;

    text-decoration: none;

    cursor: pointer;

    white-space: nowrap;

    transition:
        color 150ms ease;
}

.product-view .moto-compat .moto-compat-change::after {
    content: "→";

    font-size: 14px;
    line-height: 1;

    transition:
        transform 150ms ease;
}

.product-view .moto-compat .moto-compat-change:hover {
    color: #000000;
}

.product-view .moto-compat .moto-compat-change:hover::after {
    transform: translateX(2px);
}


/* =========================================================
   8. STATUS — COMPATIBILE
   ========================================================= */

.product-view
.moto-compat:not(.moto-compat-warning)
.moto-compat-current::after {
    content: "✓ COMPATIBILE";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 7px 12px;

    background: #202020;
    color: #ffffff;

    border-radius: 999px;

    font-family: inherit;

    font-size: 12px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0;

    white-space: nowrap;
}

html[lang^="en"]
.product-view
.moto-compat:not(.moto-compat-warning)
.moto-compat-current::after {
    content: "✓ COMPATIBLE";
}


/* =========================================================
   9. STATUS — NON COMPATIBILE
   ========================================================= */

.product-view
.moto-compat.moto-compat-warning
.moto-compat-current::after {
    content: "× NON COMPATIBILE";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 7px 12px;

    background: #fd0119;
    color: #ffffff;

    border-radius: 999px;

    font-family: inherit;

    font-size: 12px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0;

    white-space: nowrap;
}

html[lang^="en"]
.product-view
.moto-compat.moto-compat-warning
.moto-compat-current::after {
    content: "× NOT COMPATIBLE";
}


/* =========================================================
   10. ALTRI MODELLI / ACCORDION
   ========================================================= */

.product-view .moto-compat .moto-compat-other {
    margin: 0;

    padding: 0 16px;

    border-top:
        1px solid rgba(0, 0, 0, 0.08);
}

.product-view .moto-compat .moto-compat-toggle {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    margin: 0;
    padding: 16px 0;

    background: transparent;

    border: 0;

    color: #202020;

    text-align: left;

    font-family: inherit;

    font-size: 14px;
    line-height: 1.3;

    font-weight: 600;

    cursor: pointer;
}

.product-view
.moto-compat
.moto-compat-toggle
.icon-plus {
    margin-left: auto;

    flex: 0 0 auto;

    transition:
        transform 180ms ease;
}

.product-view
.moto-compat
.moto-compat-toggle:not(.collapsed)
.icon-plus {
    transform: rotate(45deg);
}


/* =========================================================
   11. LISTA MODELLI
   ========================================================= */

.product-view .moto-compat .moto-compat-list {
    margin: 0;

    padding: 0 0 16px;

    list-style: none;
}

.product-view .moto-compat .moto-compat-list li {
    position: relative;

    margin: 0;

    padding:
        6px
        0
        6px
        16px;

    color: #444444;

    font-family: inherit;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 500;
}

.product-view .moto-compat .moto-compat-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;

    width: 5px;
    height: 5px;

    background: #202020;

    border-radius: 50%;
}


/* =========================================================
   12. FOCUS
   ========================================================= */

.product-view .moto-compat button:focus-visible {
    outline: 2px solid #202020;
    outline-offset: 3px;
}


/* =========================================================
   13. STATO COMPATTO — MOBILE / COLONNA STRETTA
   V5 — MEDIA OBJECT BILANCIATO

   IDEA:
   [ FOTO ]  LA TUA MOTO
             MODELLO...
             [ STATUS ]  Cambia moto →

   La foto resta a sinistra ma viene centrata VERTICALMENTE
   rispetto all'intero blocco informativo, quindi non crea più
   il "buco morto" sotto di sé.

   Nessun breakpoint viewport.
   Nessuno scaling progressivo.
   La seconda riga usa flex-wrap naturale se serve.
   ========================================================= */

@container asp-pdp-compat (max-width: 500px) {

    /* ---------------------------------------------------------
       BLOCCO PRINCIPALE
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-current {
        display: grid !important;

        grid-template-columns:
            64px
            minmax(0, 1fr) !important;

        align-items: center !important;

        gap: 12px !important;

        padding:
            13px
            14px
            14px
            14px !important;
    }


    /* ---------------------------------------------------------
       IMMAGINE
       Più presente, mai ridotta progressivamente
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-image {
        grid-column: 1 !important;

        width: 64px !important;
        height: 64px !important;

        min-width: 64px !important;
        min-height: 64px !important;

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

        background: #ffffff !important;

        border-radius: 9px !important;

        align-self: center !important;

        box-sizing: border-box !important;
    }

    .product-view .moto-compat .moto-compat-image img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }


    /* ---------------------------------------------------------
       BADGE DESKTOP OFF — UNA SOLA PILL
       --------------------------------------------------------- */
    .product-view
    .moto-compat:not(.moto-compat-warning)
    .moto-compat-current::after,

    .product-view
    .moto-compat.moto-compat-warning
    .moto-compat-current::after {
        content: none !important;
        display: none !important;

        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;

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

        border: 0 !important;
    }


    /* ---------------------------------------------------------
       CONTENUTO
       Riga 1 = moto
       Riga 2 = status + cambia moto
       Il wrap è naturale se lo spazio non basta.
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-content {
        grid-column: 2 !important;

        display: flex !important;
        flex-wrap: wrap !important;

        align-items: center !important;
        align-content: center !important;

        column-gap: 12px !important;
        row-gap: 8px !important;

        min-width: 0 !important;

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


    /* ---------------------------------------------------------
       TITOLO MOTO
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-message {
        order: 1 !important;

        flex:
            0
            0
            100% !important;

        min-width: 0 !important;

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

        line-height: 1.2 !important;
    }

    .product-view .moto-compat .moto-compat-message::before {
        margin:
            0
            0
            3px
            0 !important;

        color: #777777 !important;

        font-size: 11px !important;
        line-height: 1.15 !important;

        font-weight: 700 !important;
    }

    .product-view .moto-compat .moto-compat-message strong {
        display: block !important;

        font-size: 16px !important;
        line-height: 1.2 !important;

        font-weight: 700 !important;

        white-space: normal !important;
        text-wrap: pretty !important;
        hyphens: none !important;
    }


    /* ---------------------------------------------------------
       STATUS — COMPATIBILE
       --------------------------------------------------------- */
    .product-view
    .moto-compat:not(.moto-compat-warning)
    .moto-compat-content::after {
        content: "✓ COMPATIBILE" !important;

        order: 2 !important;

        flex:
            0
            0
            auto !important;

        display: inline-flex !important;

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

        min-height: 26px !important;

        margin: 0 !important;

        padding:
            5px
            9px !important;

        background: #202020 !important;
        color: #ffffff !important;

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

        box-shadow: none !important;

        font-family: inherit !important;

        font-size: 10.5px !important;
        line-height: 1 !important;

        font-weight: 700 !important;

        letter-spacing: 0 !important;

        white-space: nowrap !important;
    }

    html[lang^="en"]
    .product-view
    .moto-compat:not(.moto-compat-warning)
    .moto-compat-content::after {
        content: "✓ COMPATIBLE" !important;
    }


    /* ---------------------------------------------------------
       STATUS — NON COMPATIBILE
       --------------------------------------------------------- */
    .product-view
    .moto-compat.moto-compat-warning
    .moto-compat-content::after {
        content: "× NON COMPATIBILE" !important;

        order: 2 !important;

        flex:
            0
            0
            auto !important;

        display: inline-flex !important;

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

        min-height: 26px !important;

        margin: 0 !important;

        padding:
            5px
            9px !important;

        background: #fd0119 !important;
        color: #ffffff !important;

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

        box-shadow: none !important;

        font-family: inherit !important;

        font-size: 10.5px !important;
        line-height: 1 !important;

        font-weight: 700 !important;

        letter-spacing: 0 !important;

        white-space: nowrap !important;
    }

    html[lang^="en"]
    .product-view
    .moto-compat.moto-compat-warning
    .moto-compat-content::after {
        content: "× NOT COMPATIBLE" !important;
    }


    /* ---------------------------------------------------------
       CAMBIA MOTO
       Sta accanto alla pill.
       Se non entra, va a capo SOLO LUI, dentro la colonna testo.
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-change {
        order: 3 !important;

        flex:
            0
            0
            auto !important;

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

        color: #444444 !important;

        font-size: 13px !important;
        line-height: 1.2 !important;

        font-weight: 500 !important;

        white-space: nowrap !important;
    }


    /* ---------------------------------------------------------
       ACCORDION
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-other {
        margin: 0 !important;

        padding:
            0
            14px !important;

        border-top:
            1px solid rgba(0, 0, 0, 0.08) !important;
    }

    .product-view .moto-compat .moto-compat-toggle {
        min-height: 50px !important;

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

        align-items: center !important;

        font-size: 14px !important;
        line-height: 1.25 !important;

        font-weight: 600 !important;
    }
}




/* =========================================================
   13B. NESSUNA MOTO SELEZIONATA
   Se il blocco "moto corrente" non esiste, l'accordion è il
   primo contenuto della card: il separatore superiore non serve.

   Questa regola modifica SOLO il componente compatibilità.
   ========================================================= */

.product-view
.moto-compat:not(:has(.moto-compat-current))
.moto-compat-other,

.product-view
.moto-compat
> .moto-compat-other:first-child {
    border-top: 0 !important;
}

/* =========================================================
   14. ACCESSIBILITÀ
   Non è una regola di layout.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .product-view .moto-compat *,
    .product-view .moto-compat *::before,
    .product-view .moto-compat *::after {
        transition: none !important;
    }

}


/* =====================================================================
   A SPECIAL PARTS | PDP (SCHEDA PRODOTTO) | V4.1
   V4.1: rimosso il modulo 15 (riordino della descrizione sotto 992px).
   CSS ONLY · modulo isolato · in fondo a custom.css
   SOSTITUISCE INTEGRALMENTE il blocco "PDP (SCHEDA PRODOTTO) | V3"
   (e V2, V1). Caricare una sola versione.

   NOVITÀ V4 — ritmo verticale e tipografia (misure prese sul live)
   - Gallery mobile: foto 1:1 invariata; miniature 68px, 8px sotto la
     foto, 18px prima del titolo; una sola navigazione.
   - Ritmo: codice/marca → compatibilità 18px; compatibilità →
     acquisto 20px (22px da 768px); acquisto → "Descrizione" 26px a
     vista; titolo "Descrizione" → contenuto 18px a vista.
   - Descrizione: titolo interno 20px/600 (sotto l'H1), testo 15px
     interlinea 1,6, sottotitoli e liste con spaziature regolari.
   - Micro: padding orizzontale del box compatibilità allineato a
     quello del pannello acquisto (16px mobile / 20px da 768px).

   STORICO V3

   NOVITÀ V3
   - Prezzo pieno barrato SENZA "invece di" (modulo 06): il testo
     "invece di " viene ritagliato visivamente con text-indent in em,
     misurato sul font Inter del sito. Solo pagine in italiano e solo
     prodotti senza varianti/lotti/personalizzazioni (lì lo JS nativo
     riscrive il prezzo pieno come "€ X" e il ritaglio non serve).
   - Bundle (modulo 14): carosello orizzontale di sole foto cliccabili,
     scroll-snap, ultima foto tagliata come segnale di scorrimento.
   - Nessuna moto selezionata (modulo 16): il box spiega che si può
     verificare la compatibilità. Pronto anche per il bottone HTML
     opzionale ".moto-compat-select" (vedi nota nel modulo).
   - Mobile (modulo 17): mini miniature sotto la foto principale al
     posto della barra di avanzamento, solo se le foto sono almeno 2.

   STORICO V2

   NOVITÀ V2 (verificate su: moto compatibile, moto non compatibile +
   bundle, prodotto esaurito, prodotto senza moto)
   - Mobile: la CTA NON è più una barra fissa. Resta nel flusso, sotto
     la quantità, come su desktop (decisione di progetto).
   - Prezzo pieno: il backend scrive "invece di € X". Barrarlo
     barrerebbe anche "invece di": niente barrato, grigio discreto.
   - Esaurito: quantità nascosta dal backend (.is-disponibile.hidden).
     Il cuore va accanto a "Avvisami quando disponibile", che diventa
     un pulsante outline (non si confonde con l'acquisto).
   - Bundle: "Contenuto del pacchetto" esce dal pannello prezzo e va
     sotto la CTA, come card bianca: la CTA non viene più spinta giù.
   - Titolo desktop 28px (titoli bundle molto lunghi).
   - Template nuovo con descrizione sotto la gallery: su desktop niente
     gallery sticky; sotto 992px l'ordine visivo torna gallery →
     acquisto → descrizione (modulo 15). Compatibile anche con il
     template vecchio (descrizione nella colonna destra).

   AMBITO
   - Tutti i selettori partono da .product-view e, dove possibile, da
     .product-view .bgw (colonna acquisto) o .product-view #box_immagini
     (gallery). NON toccano .product-view .prods (carousel "Acquistabile
     nel pacchetto"), header, menu, listing, carrello.
   - Unica eccezione dichiarata: .whatsappbtn.isproduct (classe che il
     tema usa SOLO in scheda prodotto).
   - Breakpoint: solo quelli GIÀ usati dal tema per la scheda
     (767 / 768-991 / 992), sempre dentro selettori .product-view.
   - NON tocca logica di compatibilità, prezzi, disponibilità, IVA,
     PayPal (solo contenitore esterno), quantità, carrello, preferiti.
   - NESSUN container-type sugli antenati di .add_carrello_wrapper.

   MODULI
   00 Token
   01 Contenitore pagina (overflow compatibile con sticky)
   02 Gallery
   03 Titolo e metadati
   04 Box compatibilità moto (ritocchi al modulo esistente)
   05 Area commerciale (pannello grigio chiaro)
   06 Prezzo / prezzo pieno / sconto
   07 PayPal (solo contenitore esterno)
   08 Disponibilità
   09 Quantità + cuore preferiti (+ variante esaurito)
   10 CTA "Aggiungi al carrello" / "Avvisami"
   11 CTA mobile nel flusso (niente barra fissa)
   12 Accordion descrizione e rassicurazioni
   13 Accessibilità / riduzione movimento
   14 Bundle: contenuto del pacchetto sotto la CTA
   15 (rimosso in V4.1: la descrizione resta nella posizione originale)
   16 Nessuna moto selezionata: invito a verificare la compatibilità
   17 Mobile: mini miniature sotto la foto
   18 Micro-rifiniture V4 (allineamenti compatibilità / quantità)
   ===================================================================== */


/* =====================================================================
   00. TOKEN (custom properties locali alla scheda)
   ===================================================================== */

.product-view {
    --asp-pdp-ink: #1f1f1f;
    --asp-pdp-ink-soft: #5f5f5f;
    --asp-pdp-muted: #8a8a8a;
    --asp-pdp-line: #e3e3e3;
    --asp-pdp-panel: #f6f6f6;          /* grigio area commerciale */
    --asp-pdp-red: #e2001a;            /* solo sconto / avvisi */
    --asp-pdp-radius: 12px;
    --asp-pdp-gap: 16px;
    --asp-pdp-control-h: 48px;         /* stepper e cuore */
    --asp-pdp-cta-h: 56px;             /* CTA in pagina */
}


/* =====================================================================
   01. CONTENITORE
   Il tema usa overflow:hidden su .product-view: rende il blocco un
   "scroll container" e impedisce a position:sticky di funzionare.
   overflow:clip ritaglia allo stesso modo ma non crea scroll container;
   flow-root conserva il block formatting context di overflow:hidden.
   I browser senza overflow:clip ignorano la riga e restano su hidden.
   Applicato solo da 992px, dove serve la gallery sticky.
   ===================================================================== */

@media only screen and (min-width: 992px) {
    .product-view {
        overflow: hidden;
        overflow: clip;
        display: flow-root;
    }
}


/* =====================================================================
   02. GALLERY
   - stage bianco, niente ombre;
   - frecce: da riquadri grigi a cerchi bianchi discreti (solo desktop,
     il tema le nasconde già sotto 768px);
   - miniature 72px con stato attivo a contorno;
   - tablet 768-991: la gallery a tutta larghezza arrivava a ~620px,
     la limitiamo e la centriamo;
   - desktop: gallery sticky mentre si legge la colonna destra, SOLO se
     la descrizione non sta sotto la gallery (template nuovo: la
     descrizione è nella colonna sinistra → niente sticky, altrimenti
     la gallery coprirebbe il testo).
   ===================================================================== */

.product-view #box_immagini .product-gallery {
    gap: 16px;
    margin-bottom: 24px;
}

.product-view #box_immagini .gallery-main,
.product-view #box_immagini .gallery-main .swiper-slide,
.product-view #box_immagini .gallery-main img {
    background: #ffffff;
}

.product-view #box_immagini .gallery-main img {
    border-radius: 0;
    box-shadow: none;
}

.product-view #box_immagini .gallery-button-prev,
.product-view #box_immagini .gallery-button-next {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 1px solid var(--asp-pdp-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--asp-pdp-ink);
    font-size: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: opacity 160ms ease, border-color 160ms ease;
}

.product-view #box_immagini .gallery-button-prev:hover,
.product-view #box_immagini .gallery-button-next:hover {
    border-color: var(--asp-pdp-ink);
}

.product-view #box_immagini .gallery-button-prev.swiper-button-disabled,
.product-view #box_immagini .gallery-button-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.product-view #box_immagini .gallery-thumbs {
    width: 72px;
    flex: 0 0 72px;
    height: auto;
    max-height: 246px; /* 3 x 72 + 2 x 15 */
}

.product-view #box_immagini .gallery-thumbs .swiper-slide {
    width: 72px;
    height: 72px !important; /* il tema lo forza a 88px con !important */
    opacity: 1;
}

.product-view #box_immagini .gallery-thumbs img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--asp-pdp-line);
    border-radius: 8px;
    transition: border-color 160ms ease;
}

.product-view #box_immagini .gallery-thumbs .swiper-slide-thumb-active img {
    border-color: var(--asp-pdp-ink);
    box-shadow: inset 0 0 0 1px var(--asp-pdp-ink);
}

.product-view #box_immagini .gallery-main {
    max-width: calc(100% - 88px); /* 72px miniature + 16px gap */
}

@media only screen and (max-width: 767px) {
    .product-view #box_immagini .gallery-main {
        max-width: 100%;
    }

    .product-view #box_immagini .product-gallery {
        margin-bottom: 16px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .product-view #box_immagini .product-gallery {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (min-width: 992px) {
    .product-view .row-eq-height-md > [class*="col-md-7"]:not(:has(> .wrapper-tabs)) > .image-block {
        position: -webkit-sticky;
        position: sticky;
        top: 24px;
    }
}


/* =====================================================================
   03. TITOLO E METADATI
   Il titolo desktop a 36/40px andava su 3 righe e spingeva il prezzo
   sotto la piega. Gerarchia: titolo > prezzo > tutto il resto.
   ===================================================================== */

.product-view .bgw .originalp {
    margin-bottom: 12px;
    padding: 4px 10px;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.02em;
}

.product-view .bgw h1.ptitle {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

@media only screen and (max-width: 767px) {
    .product-view .bgw h1.ptitle {
        font-size: 22px;
        line-height: 1.2;
    }
}

.product-view .bgw ul.det {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--asp-pdp-ink-soft);
}

.product-view .bgw ul.det span {
    color: var(--asp-pdp-muted);
}


/* =====================================================================
   04. BOX COMPATIBILITÀ MOTO — RITOCCHI
   Il modulo esistente in custom.css resta la base. Qui:
   - spaziatura coerente con il pannello commerciale che segue;
   - due grigi sovrapposti (box moto + pannello) creano rumore:
     il box moto diventa bianco con bordo, la foto su grigio chiaro;
   - lista modelli: il tema impone columns:2 + bordo superiore; in una
     colonna da ~430px i nomi lunghi vanno a capo male → 1 colonna,
     2 colonne solo quando il box è largo (tablet).
   NB: la versione "moto selezionata" va verificata su HTML reale.
   ===================================================================== */

.product-view .moto-compat {
    margin: 0 0 20px;
    background: #ffffff;
    border: 1px solid var(--asp-pdp-line);
    box-shadow: none;
}

.product-view .moto-compat .moto-compat-image {
    background: var(--asp-pdp-panel) !important; /* il modulo esistente lo forza a #fff !important nello stato compatto */
}

.product-view .moto-compat .moto-compat-list {
    columns: 1;
    border-top: 0;
}

@container asp-pdp-compat (min-width: 560px) {
    .product-view .moto-compat .moto-compat-list {
        columns: 2;
        column-gap: 24px;
    }
}


/* =====================================================================
   05. AREA COMMERCIALE — PANNELLO GRIGIO CHIARO
   Nel DOM non esiste un contenitore unico per prezzo → CTA: sono
   fratelli dentro .bgw > .wrapper. Il pannello è quindi composto
   colorando i fratelli contigui, da .price fino al blocco .btns
   (escluse descrizione, rassicurazioni, script).
   Margini verticali azzerati: lo spazio interno è padding, così il
   grigio resta continuo.
   ===================================================================== */

.product-view .bgw > .wrapper > .price,
.product-view .bgw > .wrapper > .price ~ :not(.wrapper-tabs):not(.bannersdx):not(script):not(style):not(.wrapper-tabs ~ *):not(.bundle-box):not(.title) {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    background: var(--asp-pdp-panel);
}

.product-view .bgw > .wrapper > .price {
    padding-top: 20px;
    border-radius: var(--asp-pdp-radius) var(--asp-pdp-radius) 0 0;
}

/* Ultimo elemento del pannello: la riga che contiene .btns */
.product-view .bgw > .wrapper > .row:has(.btns) {
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 20px;
    border-radius: 0 0 var(--asp-pdp-radius) var(--asp-pdp-radius);
}

.product-view .bgw > .wrapper > .row:has(.btns) > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

@media only screen and (max-width: 767px) {
    .product-view .bgw > .wrapper > .price,
    .product-view .bgw > .wrapper > .price ~ :not(.wrapper-tabs):not(.bannersdx):not(script):not(style):not(.wrapper-tabs ~ *):not(.bundle-box):not(.title) {
        padding-left: 16px;
        padding-right: 16px;
    }

    .product-view .bgw > .wrapper > .price {
        padding-top: 16px;
    }

    .product-view .bgw > .wrapper > .row:has(.btns) {
        padding-bottom: 16px;
    }
}


/* =====================================================================
   06. PREZZO
   - prezzo attuale, prezzo pieno barrato e % sconto su UNA riga con
     allineamento di base comune (il wrapper .row-eq-height diventa
     trasparente al layout con display:contents);
   - il prezzo pieno arriva come "invece di € X". V3: barrato e senza
     "invece di" (ritaglio visivo, il testo resta nel DOM e per i
     lettori di schermo). Vedi blocco "RITAGLIO" qui sotto;
   - prezzo in nero: il rosso resta riservato allo sconto. Un prezzo
     sempre rosso comunica "saldo" anche quando non c'è sconto.
   Visibilità di pieno/sconto: invariata, la gestisce lo JS nativo.
   ===================================================================== */

.product-view .bgw .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    width: 100%;
    row-gap: 6px;
    font-size: inherit;
    font-variant-numeric: tabular-nums;
}

.product-view .bgw .price > .row-eq-height {
    display: contents;
}

.product-view .bgw .price .prezzo {
    order: 1;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--asp-pdp-ink);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.product-view .bgw .price .prezzo-pieno {
    order: 2;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--asp-pdp-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    white-space: nowrap;
}

/* RITAGLIO "invece di "
   Larghezza di "invece di " in Inter 400 = 4,515em (misurata sul sito
   live il 09/10/2026). text-indent negativo + overflow:hidden la
   nasconde; la larghezza dell'inline-block si riduce da sola alla
   parte visibile (verificato in Chrome sul sito live).
   Condizioni:
   - html lang="it" (in altre lingue la dicitura è diversa);
   - nessun selettore varianti/lotti/personalizzazione nella scheda:
     in quei casi lo JS scrive "€ X" e il ritaglio mangerebbe cifre. */
html[lang="it"] .product-view:not(:has(#p_variante1, #p_variante2, #comb_var1, #comb_var2, #p_lotto, .persvalue, .csel_var1, .csel_var2)) .bgw .price .prezzo-pieno {
    display: inline-block;
    overflow: hidden;
    vertical-align: baseline;
    text-indent: -4.52em;
    font-weight: 400;
    letter-spacing: 0;
}

.product-view .bgw .price .percsconto {
    order: 3;
    align-self: center;
    padding: 3px 8px;
    border-radius: 6px;
    background: #ed1c24;
    color: #ffffff;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    white-space: nowrap;
}

@media only screen and (max-width: 767px) {
    .product-view .bgw .price .prezzo {
        font-size: clamp(24px, 7vw, 26px);
    }
}


/* =====================================================================
   07. PAYPAL — SOLO CONTENITORE ESTERNO
   Il contenuto è un iframe PayPal: non si stila. Solo spaziatura.
   ===================================================================== */

.product-view .bgw > .wrapper > [data-pp-message] {
    padding-top: 8px;
    min-height: 0;
}


/* =====================================================================
   08. DISPONIBILITÀ
   Colore e testo arrivano dal backend (inline): non li tocchiamo.
   Sostituiamo solo il pallino Font Awesome con un punto CSS che usa
   currentColor (nessuna dipendenza dal font icone).
   ===================================================================== */

.product-view .bgw #comb_disp {
    padding-top: 14px;
}

.product-view .bgw #comb_disp:empty {
    padding-top: 0;
}

.product-view .bgw #comb_disp span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
}

.product-view .bgw #comb_disp span::before {
    content: "";
    position: static;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    font-size: 0;
}


/* =====================================================================
   09. QUANTITÀ + CUORE PREFERITI
   - stepper compatto 48px;
   - etichetta in sentence-case, discreta (resta il <label> reale);
   - il bottone preferiti perde il testo visivo (resta nel DOM, quindi
     resta il nome accessibile) e diventa un cuore 48x48 allineato a
     destra della riga quantità. È posizionato in assoluto dentro .btns
     perché nel DOM sta sotto la CTA: la distanza è fissa e controllata
     da questo file (padding-bottom della riga quantità).
   - Guardia: il cuore va accanto alla quantità SOLO se la quantità è
     visibile (.is-disponibile senza .hidden). Prodotto esaurito: il
     backend nasconde la quantità → il cuore si affianca ad "Avvisami".
   ===================================================================== */

.product-view .bgw .quantita {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 0 16px;
    text-transform: none;
}

.product-view .bgw .quantita label {
    float: none;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--asp-pdp-ink-soft);
}

.product-view .bgw .quantita label strong {
    margin: 0;
    font-size: inherit;
    font-weight: 500;
}

.product-view .bgw .quantita label strong::first-letter {
    text-transform: uppercase;
}

.product-view .bgw .quantita .input-group {
    display: inline-flex;
    width: auto;
    height: var(--asp-pdp-control-h);
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.product-view .bgw .quantita .input-group button {
    float: none;
    width: 44px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.product-view .bgw .quantita .input-group button:hover {
    background: #f2f2f2;
}

.product-view .bgw .quantita .input-group button > i {
    font-size: 16px;
}

.product-view .bgw .quantita .form-control.quant {
    width: 48px;
    height: 100%;
    padding: 0;
    border: 0;
    box-shadow: none;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}

.product-view .bgw .quantita .q_add {
    margin-left: 0;
}

/* Riga quantità con spazio a destra per il cuore */
.product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .quantita {
    padding-right: calc(var(--asp-pdp-control-h) + 12px);
}

.product-view .bgw .btns {
    position: relative;
}

.product-view .bgw .btns > .row {
    margin-left: 0;
    margin-right: 0;
}

.product-view .bgw .btns > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .btns > .row > .col-xs-12:has(> .add_topref) {
    position: absolute;
    right: 0;
    top: calc(-1 * (var(--asp-pdp-control-h) + 16px)); /* = altezza stepper + padding-bottom riga quantità */
    width: auto;
}

.product-view .bgw .btns .add_topref {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--asp-pdp-control-h);
    height: var(--asp-pdp-control-h);
    margin: 0;
    padding: 0;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    background: #ffffff;
    color: var(--asp-pdp-ink);
    font-size: 0;          /* nasconde solo visivamente "Aggiungi ai preferiti" */
    line-height: 1;
    text-transform: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.product-view .bgw .btns .add_topref > i {
    margin: 0;
    font-size: 20px;
}

.product-view .bgw .btns .add_topref:hover {
    border-color: var(--asp-pdp-ink);
    color: var(--asp-pdp-red);
}

.product-view .bgw .btns .add_topref:focus-visible {
    outline: 2px solid var(--asp-pdp-ink);
    outline-offset: 2px;
}


/* Variante SENZA quantità visibile (es. esaurito):
   [ Avvisami quando disponibile ][ ♥ ] sulla stessa riga. */
.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns > .row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns > .row::before,
.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns > .row::after {
    display: none;
}

.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns > .row > .col-sm-12 {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns > .row > .col-xs-12:has(> .add_topref) {
    flex: 0 0 auto;
    width: auto;
}

.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns .add_topref {
    width: var(--asp-pdp-cta-h);
    height: var(--asp-pdp-cta-h);
}

/* Senza quantità il pannello ha bisogno di aria sopra i pulsanti */
.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) > .row:has(.btns) {
    padding-top: 16px;
}


/* =====================================================================
   10. CTA "AGGIUNGI AL CARRELLO"
   Resta il pulsante dominante: nero pieno, a tutta larghezza.
   Più compatto del nativo (68px → 56px) ma con contrasto massimo.
   ===================================================================== */

.product-view .bgw .btns .btn {
    margin-bottom: 0;
}

.product-view .bgw #add_carrello {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--asp-pdp-cta-h);
    height: auto;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: background-color 160ms ease;
}

.product-view .bgw #add_carrello:hover {
    background: #000000;
}

.product-view .bgw #add_carrello:focus-visible {
    outline: 3px solid var(--asp-pdp-red);
    outline-offset: 2px;
}

/* "Avvisami quando disponibile": azione unica ma NON d'acquisto →
   outline scuro su bianco, stessa altezza della CTA. */
.product-view .bgw #popupformpnd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--asp-pdp-cta-h);
    margin: 0;
    padding: 0 16px;
    border: 1.5px solid var(--asp-pdp-ink);
    border-radius: 10px;
    background: #ffffff;
    color: var(--asp-pdp-ink);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    white-space: normal;
    text-transform: none;
}

.product-view .bgw #popupformpnd:hover {
    background: var(--asp-pdp-ink);
    color: #ffffff;
}

.product-view .bgw #popupformpnd.hidden {
    display: none;
}


/* =====================================================================
   11. CTA MOBILE NEL FLUSSO (≤767px)
   Il tema rende .add_carrello_wrapper una barra fissa in basso, sempre
   visibile. Decisione V2: niente barra, la CTA resta sotto la quantità
   come su desktop. WhatsApp torna alla posizione standard del tema.
   ===================================================================== */

@media only screen and (max-width: 767px) {
    .product-view .bgw .add_carrello_wrapper {
        position: static;
        padding: 0;
        background: transparent;
        box-shadow: none;
        z-index: auto;
    }

    .product-view .bgw .add_carrello_wrapper #add_carrello {
        min-height: var(--asp-pdp-cta-h);
        padding: 0 16px !important; /* il tema forza padding:10px !important */
    }

    .whatsappbtn.isproduct {
        bottom: 10px;
    }
}


/* =====================================================================
   12. ACCORDION DESCRIZIONE E RASSICURAZIONI
   Meno aria morta tra intestazione e testo, titoli accordion in
   sentence-case, rassicurazioni più vicine al blocco acquisto.
   ===================================================================== */

/* V4: pannello acquisto → testo "Descrizione" = 14 + 12 = 26px;
   "Descrizione" → primo testo ≈ 18-19px a vista (misurato sul live).
   Il tema annulla i bordi dell'intestazione (nessuna linea extra). */
.product-view .row-eq-height-md .wrapper-tabs {
    margin-top: 14px;
}

.product-view .row-eq-height-md .wrapper-tabs .ui-accordion-header {
    margin: 0;
    padding: 12px 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    text-transform: none;
}

/* Intestazioni successive (es. "Richiedi informazioni"): stesso ritmo */
.product-view .row-eq-height-md .wrapper-tabs .ui-accordion-header ~ .ui-accordion-header {
    margin-top: 4px;
    padding-top: 16px;
}

.product-view .row-eq-height-md .wrapper-tabs .ui-accordion-content {
    padding: 4px 0 24px !important; /* il tema forza 1.8em 0 !important ≤991 */
}

/* TIPOGRAFIA DEL TESTO DESCRITTIVO
   Solo presentazione: contenuti invariati. Il titolo interno (spesso
   il nome prodotto) resta subordinato all'H1 della scheda. */
.product-view .row-eq-height-md .wrapper-tabs .txt {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    color: #333333;
    overflow-wrap: break-word;
}

.product-view .row-eq-height-md .wrapper-tabs .txt > :first-child {
    margin-top: 0;
}

.product-view .row-eq-height-md .wrapper-tabs .txt h1,
.product-view .row-eq-height-md .wrapper-tabs .txt h2 {
    margin: 22px 0 10px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--asp-pdp-ink);
}

.product-view .row-eq-height-md .wrapper-tabs .txt h3 {
    margin: 20px 0 8px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--asp-pdp-ink);
}

.product-view .row-eq-height-md .wrapper-tabs .txt h4,
.product-view .row-eq-height-md .wrapper-tabs .txt h5 {
    margin: 18px 0 6px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--asp-pdp-ink);
}

.product-view .row-eq-height-md .wrapper-tabs .txt :is(h1, h2, h3, h4, h5) + :is(h3, h4, h5) {
    margin-top: 8px;
}

.product-view .row-eq-height-md .wrapper-tabs .txt p {
    margin: 0 0 12px;
}

.product-view .row-eq-height-md .wrapper-tabs .txt strong,
.product-view .row-eq-height-md .wrapper-tabs .txt b {
    font-weight: 600;
    color: var(--asp-pdp-ink);
}

.product-view .row-eq-height-md .wrapper-tabs .txt ul,
.product-view .row-eq-height-md .wrapper-tabs .txt ol {
    margin: 6px 0 14px;
    padding-left: 20px;
}

.product-view .row-eq-height-md .wrapper-tabs .txt li {
    margin: 0 0 4px;
    padding-left: 2px;
    line-height: 1.55;
}

.product-view .row-eq-height-md .wrapper-tabs .txt a {
    color: var(--asp-pdp-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.product-view .bgw .bannersdx ul {
    margin: 20px 0 0;
}

.product-view .bgw .bannersdx li {
    font-size: 14px;
    line-height: 1.4;
    color: var(--asp-pdp-ink-soft);
}

.product-view .bgw .bannersdx li + li {
    margin-top: 8px;
}


/* =====================================================================
   13. ACCESSIBILITÀ
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .product-view #box_immagini *,
    .product-view .bgw * {
        transition: none !important;
    }
}


/* =====================================================================
   14. BUNDLE — "CONTENUTO DEL PACCHETTO" SOTTO LA CTA
   Nel DOM il contenuto del pacchetto sta tra prezzo e quantità: spinge
   la CTA molto in basso e spezza il pannello prezzo. Solo quando il
   bundle esiste (:has), la colonna diventa flex verticale e titolo +
   box vengono riordinati SOTTO il pannello (order). Il DOM non cambia.
   ===================================================================== */

.product-view .bgw > .wrapper:has(> .bundle-box) {
    display: flex;
    flex-direction: column;
}

.product-view .bgw > .wrapper:has(> .bundle-box) > * {
    order: 0;
    min-width: 0;
}

.product-view .bgw > .wrapper:has(> .bundle-box) > .originalp {
    align-self: flex-start;
}

.product-view .bgw > .wrapper:has(> .bundle-box) > .title.ptitle,
.product-view .bgw > .wrapper:has(> .bundle-box) > .bundle-box {
    order: 1;
}

.product-view .bgw > .wrapper:has(> .bundle-box) > .wrapper-tabs,
.product-view .bgw > .wrapper:has(> .bundle-box) > .bannersdx {
    order: 2;
}

.product-view .bgw > .wrapper > .bundle-box ~ .title.ptitle,
.product-view .bgw > .wrapper > .title.ptitle:has(+ .bundle-box) {
    margin: 24px 0 10px;
    padding: 0;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--asp-pdp-ink-soft);
}

/* V3: carosello orizzontale di sole foto cliccabili.
   - scroll nativo con scroll-snap (niente JS);
   - testi, codice, prezzo e "Più informazioni" nascosti solo alla
     vista: il link della foto resta (title + alt con il nome);
   - il prezzo dei componenti è un nodo di testo senza tag: lo
     azzera font-size:0 sul contenitore;
   - padding-right sul binario: l'ultima foto parzialmente visibile
     segnala che si può scorrere (Baymard). */
.product-view .bgw > .wrapper > .bundle-box {
    display: flex;
    gap: 10px;
    max-height: none;
    margin: 0;
    padding: 2px 2px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cfcfcf transparent;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.product-view .bgw > .wrapper > .bundle-box::-webkit-scrollbar {
    height: 4px;
}

.product-view .bgw > .wrapper > .bundle-box::-webkit-scrollbar-thumb {
    background: #cfcfcf;
    border-radius: 4px;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-box-prod {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    font-size: 0;
    line-height: 0;
    scroll-snap-align: start;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-box-prod + .bundle-box-prod {
    margin-top: 0;
    border-top: 0;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-box-prod > :not(.bundle-prod-thumb) {
    display: none;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb {
    float: none;
    width: 88px;
    height: 88px;
    margin: 0;
    border: 1px solid var(--asp-pdp-line);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 160ms ease;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6px;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb:hover {
    border-color: var(--asp-pdp-ink);
}

.product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb a:focus-visible {
    outline: 2px solid var(--asp-pdp-ink);
    outline-offset: -2px;
}

@media only screen and (max-width: 767px) {
    .product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb {
        width: 80px;
        height: 80px;
    }
}


/* =====================================================================
   16. NESSUNA MOTO SELEZIONATA — INVITO A VERIFICARE
   Senza moto il box mostrava solo "Modelli compatibili": non si capiva
   che si può verificare la compatibilità. Qui il box diventa un invito.

   LIMITE CSS: il pulsante che apre il selettore moto esiste solo
   nell'header. Il CSS non può creare un pulsante cliccabile, quindi il
   testo rimanda all'icona moto in alto.

   OPZIONE CONSIGLIATA (1 riga HTML nel template Daisuke, nessun JS):
   nel ramo "nessuna moto" del box, prima di .moto-compat-other:
     <button type="button" class="moto-compat-select"
             data-toggle="modal" data-target="#modal_bikesearch">
       Seleziona la tua moto
     </button>
   È lo stesso meccanismo Bootstrap già usato da "Cambia moto". Se il
   bottone c'è, il testo "dall'icona in alto" sparisce e compare lui.
   ===================================================================== */

.product-view .moto-compat:not(:has(.moto-compat-current))::before {
    content: "Si adatta alla tua moto?";
    display: block;
    padding: 16px 16px 2px 52px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='16.5' r='3.5'/%3E%3Ccircle cx='18.5' cy='16.5' r='3.5'/%3E%3Cpath d='M5.5 16.5 9 10h5l2.5 6.5'/%3E%3Cpath d='M14 10l1.5-3H18'/%3E%3Cpath d='M9 10 7.5 7H5'/%3E%3C/svg%3E")
        16px 15px / 24px 24px no-repeat;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--asp-pdp-ink);
}

.product-view .moto-compat:not(:has(.moto-compat-current))::after {
    content: "Seleziona la tua moto dall\2019 icona in alto: ti diremo subito se questo ricambio è compatibile.";
    display: block;
    order: 2;
    padding: 0 16px 14px 52px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--asp-pdp-ink-soft);
}

html[lang^="en"] .product-view .moto-compat:not(:has(.moto-compat-current))::before {
    content: "Does it fit your bike?";
}

html[lang^="en"] .product-view .moto-compat:not(:has(.moto-compat-current))::after {
    content: "Select your bike from the bike icon at the top: we\2019 ll tell you right away if this part fits.";
}

/* Il box diventa una colonna: titolo, testo, (bottone), lista modelli */
.product-view .moto-compat:not(:has(.moto-compat-current)) {
    display: flex;
    flex-direction: column;
}

.product-view .moto-compat:not(:has(.moto-compat-current)) > .moto-compat-select {
    order: 3;
}

.product-view .moto-compat:not(:has(.moto-compat-current)) > .moto-compat-other {
    order: 4;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Con il bottone HTML presente: testo più corto, niente rimando all'header */
.product-view .moto-compat:has(> .moto-compat-select)::after {
    content: "Ti diremo subito se questo ricambio è compatibile.";
    padding-bottom: 10px;
}

html[lang^="en"] .product-view .moto-compat:has(> .moto-compat-select)::after {
    content: "We\2019 ll tell you right away if this part fits.";
}

.product-view .moto-compat > .moto-compat-select {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 16px 16px 52px;
    padding: 0 18px;
    border: 1.5px solid var(--asp-pdp-ink);
    border-radius: 10px;
    background: #ffffff;
    color: var(--asp-pdp-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.product-view .moto-compat > .moto-compat-select::after {
    content: "→";
}

.product-view .moto-compat > .moto-compat-select:hover {
    background: var(--asp-pdp-ink);
    color: #ffffff;
}


/* =====================================================================
   17. MOBILE — MINI MINIATURE SOTTO LA FOTO
   Baymard: sul mobile le miniature fanno capire quante foto ci sono e
   cosa mostrano, e danno meno tocchi sbagliati dei puntini. Il tema
   nasconde le miniature sotto 768px (stile inline via JS): qui le
   mostriamo in riga sotto la foto, solo se le foto sono almeno 2, e
   togliamo la barra di avanzamento che diventa ridondante.
   Il click resta quello nativo di Swiper (thumbs).
   ===================================================================== */

@media only screen and (max-width: 767px) {
    .product-view #box_immagini .product-gallery:has(.gallery-thumbs .swiper-slide:nth-child(2)) {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 0;
    }

    .product-view #box_immagini .product-gallery:has(.gallery-thumbs .swiper-slide:nth-child(2)) .gallery-main {
        order: 1;
        width: 100%;
    }

    .product-view #box_immagini .product-gallery:has(.gallery-thumbs .swiper-slide:nth-child(2)) .gallery-thumbs {
        display: block !important; /* il tema la nasconde con style inline via JS */
        order: 2;
        flex: none;
        width: 100%;
        height: auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .product-view #box_immagini .product-gallery:has(.gallery-thumbs .swiper-slide:nth-child(2)) .gallery-thumbs::-webkit-scrollbar {
        display: none;
    }

    .product-view #box_immagini .gallery-thumbs .swiper-wrapper {
        flex-direction: row !important;
        gap: 8px;
        height: auto !important;
        transform: none !important; /* Swiper verticale scrive translate3d inline */
    }

    .product-view #box_immagini .gallery-thumbs .swiper-slide {
        flex: 0 0 68px;
        width: 68px !important;
        height: 68px !important;
        margin: 0 !important; /* Swiper scrive margin-bottom inline */
        opacity: 1;
    }

    .product-view #box_immagini .gallery-thumbs img {
        width: 68px;
        height: 68px;
        border-radius: 8px;
    }

    /* Miniature → titolo prodotto: 18px (il tema mette 20px sul blocco
       acquisto; la gallery non aggiunge altro margine sotto). */
    .product-view .row-eq-height-md .bgw {
        margin-top: 18px;
    }

    .product-view #box_immagini .product-gallery:has(.gallery-thumbs .swiper-slide:nth-child(2)) .gallery-pagination {
        display: none !important;
    }
}


/* =====================================================================
   18. MICRO-RIFINITURE V4
   Box compatibilità: stesso padding orizzontale del pannello acquisto,
   così foto moto, testi e prezzo partono dalla stessa linea.
   Nessuna riprogettazione: solo allineamenti.
   ===================================================================== */

.product-view .moto-compat .moto-compat-current {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.product-view .moto-compat .moto-compat-other {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.product-view .moto-compat:not(:has(.moto-compat-current))::before {
    padding-left: 52px;
    background-position: 16px 15px;
}

@media only screen and (min-width: 768px) {
    .product-view .moto-compat {
        margin-bottom: 22px;
    }

    .product-view .moto-compat .moto-compat-current,
    .product-view .moto-compat .moto-compat-other {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .product-view .moto-compat:not(:has(.moto-compat-current))::before {
        padding-left: 56px;
        padding-right: 20px;
        background-position: 20px 15px;
    }

    .product-view .moto-compat:not(:has(.moto-compat-current))::after {
        padding-left: 56px;
        padding-right: 20px;
    }

    .product-view .moto-compat > .moto-compat-select {
        margin-left: 56px;
    }
}

/* Quantità e cuore: stessa altezza e stesso raggio del pannello
   (stepper 48px, cuore 48px, raggio 10px già coerenti). Solo il
   centraggio verticale dell'etichetta rispetto allo stepper. */
.product-view .bgw .quantita label {
    line-height: var(--asp-pdp-control-h);
}


/* =====================================================================
   A SPECIAL PARTS | LISTING PRODOTTI | V2 | MOBILE + DESKTOP
   CSS ONLY · modulo isolato · in fondo a custom.css
   SOSTITUISCE INTEGRALMENTE il blocco "LISTING PRODOTTI | MOBILE | V1".
   Analizzato e provato su: Motore.html (categoria) e Home.html.

   NOVITÀ V2
   - Carrello rapido rimosso dalle card (listing e caroselli prodotto
     della home), su mobile e desktop. Resta solo il cuore preferiti,
     sempre visibile, in alto a destra dell'area fotografica.
   - Card: stesso linguaggio su mobile e desktop (marca, titolo fino a
     3 righe, prezzo nero, badge sconto accanto al prezzo, prezzo pieno
     barrato sotto). Le misure mobile sono quelle approvate in V1.
     Le card NON vengono ridotte: l'area foto resta 1:1 e la riga del
     prezzo pieno resta riservata anche senza sconto.
   - Desktop (da 768px): fascia categoria, toolbar filtri, fine elenco
     e fascia brand allineati al mobile.
   - Fascia brand: card più basse (112px), loghi centrati.
   - Il testo "Continua" NON viene sostituito via CSS: va cambiato
     nelle traduzioni Daisuke.

   AMBITO
   - Pagina elenco: tutti i selettori partono da "main > .elenco".
   - Fascia brand dell'elenco (nel DOM è fuori da .elenco):
     "main > .homebrands". La .homebrands della homepage non
     viene toccata.
   - Card prodotto della home: "main > .homeprods .carousel.products"
     (solo modulo 01). Titoli di sezione, sfondi, banner e carosello
     della home restano quelli del modulo Homepage.
   - NON tocca: header, menu, ricerca Algolia (.facet-hits), footer,
     scheda prodotto (.product-view), carrello.
   - NON tocca logica di filtri, ordinamento, carrello, preferiti,
     prezzi, paginazione / infinite scroll.
   - Breakpoint: solo quelli già usati dal tema (767 / 768), più 359px
     per gli smartphone stretti.

   !important: usato UNA sola volta (modulo 01, altezza del titolo),
   perché lo script matchHeight del tema scrive un'altezza inline
   (style="height:40px") che taglierebbe la terza riga del titolo.

   MODULI
   00 Token
   01 Card prodotto (listing + home, mobile + desktop)
   02 Fascia categoria
   03 Toolbar filtri / ordinamento / conteggio
   04 Griglia
   05 Fine elenco (conteggio + pulsante di caricamento)
   06 Fascia brand
   07 Smartphone stretti (fino a 359px)
   ===================================================================== */


/* =====================================================================
   00. TOKEN (custom properties locali)
   Stessi valori dei token --asp-pdp-* della scheda prodotto V4.1
   (inchiostri, linee, raggi 12/10).
   ===================================================================== */

main > .elenco,
main > .homebrands,
main > .homeprods,
main > .page .prods,
.product-view .prods,
.facet-hits {
    --asp-lst-ink: #1f1f1f;
    --asp-lst-ink-soft: #5f5f5f;
    --asp-lst-muted: #8a8a8a;
    --asp-lst-line: #e3e3e3;
    --asp-lst-control-line: #d4d4d4;   /* bordo dei controlli, come stepper e cuore in scheda */
    --asp-lst-red: #ed1c24;            /* fondo del badge sconto */
    --asp-lst-radius: 12px;            /* card e pannelli */
    --asp-lst-radius-control: 10px;    /* pulsanti e controlli */
    --asp-lst-gap: 10px;               /* spazio tra le due colonne mobile */
    --asp-lst-control-h: 44px;         /* filtri, ordinamento */
    --asp-lst-hit: 44px;               /* area di tocco del cuore */
}


/* =====================================================================
   01. CARD PRODOTTO (LISTING + HOME)
   Valori base = mobile approvato (V1). Da 768px cambiano solo le
   misure tipografiche e i padding, che restano uguali o superiori a
   quelli nativi del tema: la card non si accorcia.
   Gerarchia: foto 1:1 → cuore → marca → titolo → prezzo + sconto →
   prezzo pieno barrato. Il prezzo è ancorato in basso, così le card
   della stessa riga restano allineate con titoli di lunghezza diversa.
   ===================================================================== */

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont {
    display: flex;
    flex-direction: column;
    border-radius: var(--asp-lst-radius);
}

/* Listing: card bianche su fondo grigio, senza bordo.
   Home: le sezioni hanno anche fondo bianco, il bordo resta. */
main > .elenco .products .prod-cont:not(.active) {
    border-color: transparent;
}

:is(:is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont:not(.active) {
    border-color: var(--asp-lst-line);
}

/* Area immagine: quadrata come nel tema (rapporto 1:1 di .wrapper). */
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img {
    flex: 0 0 auto;
    padding: 10px 10px 0;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg {
    top: 10px;
    left: 10px;
    right: 48px;                         /* non finisce sotto il cuore */
    width: auto;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 10px 12px 12px;
}

/* --- Pulsanti ---------------------------------------------------------
   Nel DOM i pulsanti sono fratelli dentro .functional-buttons, a sua
   volta dentro .item-img (position:relative). Il contenitore torna nel
   flusso e non occupa spazio. Resta visibile solo il cuore, ancorato
   all'angolo superiore destro dell'area immagine.
   Carrello rapido (.addtocart) e collegamento "Visualizza" (icona
   occhio dei prodotti con varianti) vengono nascosti: la scheda si
   apre da foto e titolo. Nessuna modifica a eventi o classi.
   Il <button> resta 44x44 (area di tocco); la parte visibile è l'icona
   interna, più piccola. */
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons {
    position: static;
    width: auto;
    opacity: 1;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .btn:not(.add_topref) {
    display: none;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--asp-lst-hit);
    min-width: var(--asp-lst-hit);
    height: var(--asp-lst-hit);
    min-height: var(--asp-lst-hit);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    line-height: 1;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref > i {
    display: block;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--asp-lst-radius-control);
    background: rgba(255, 255, 255, 0.92);
    line-height: 32px;
    text-align: center;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref:focus-visible {
    outline: 0;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref:focus-visible > i {
    outline: 2px solid var(--asp-lst-ink);
    outline-offset: 2px;
}

/* --- Marca e titolo ---------------------------------------------------
   Titolo fino a 3 righe: i codici ricambio stanno in coda al nome
   (es. "… codice 1A0249990R") e con 2 righe venivano tagliati.
   Il codice NON ha un elemento proprio nell'HTML: non è stilabile
   separatamente e non viene generato. */
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .brand {
    margin-bottom: 4px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--asp-lst-muted);
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .brand a {
    color: inherit;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title {
    height: auto !important;             /* annulla l'altezza inline di matchHeight */
    margin-bottom: 8px;
    line-height: 18px;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title a {
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: var(--asp-lst-ink);
    overflow-wrap: break-word;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* --- Prezzo, sconto, prezzo pieno -------------------------------------
   - prezzo in nero e in evidenza; il rosso resta allo sconto;
   - percentuale accanto al prezzo, stesso badge della scheda prodotto
     (rosso pieno, testo bianco, raggio 6);
   - prezzo pieno barrato sulla riga sotto. Il backend scrive
     "invece di € X": il testo "invece di " viene ritagliato solo a
     vista con lo stesso text-indent della scheda prodotto (4,52em,
     Inter 400), solo nelle pagine in italiano. Nelle altre lingue
     resta il testo completo, grigio, non barrato.
   - la riga del prezzo pieno resta riservata anche quando è vuota:
     le card con e senza sconto hanno la stessa struttura. */
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra {
    container-type: inline-size;         /* il prezzo si misura sulla larghezza della card */
    margin-top: auto;
    padding: 0;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row {
    display: flex;
    flex-wrap: wrap;                     /* solo ultima risorsa: vedi nota sul prezzo */
    align-items: center;
    gap: 2px 5px;
    margin: 0;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row::before,
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row::after {
    display: none;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row > [class*="col-"] {
    flex: 0 0 auto;
    float: none;
    width: auto;
    min-height: 0;
    padding: 0;
    text-align: left;
}

/* PREZZO E BADGE SEMPRE SULLA STESSA RIGA
   Con prezzi a quattro cifre (es. "€ 2.042,10") prezzo + badge non
   entravano nella card a due colonne e il badge andava a capo.
   Il corpo del prezzo ora segue la larghezza della card (unità cqi):
   resta 17px dove c'è spazio e scende quanto basta nelle card strette,
   mai sotto 13px. Dimensionato perché "€ 9.999,99" + "- 99%" stiano
   su una riga da 320px in su. L'altezza della riga non cambia. */
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo {
    display: inline-block;
    font-size: 16px;                     /* browser senza container query */
    font-size: clamp(13px, calc(17.5cqi - 9px), 17px);
    line-height: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--asp-lst-ink);
    white-space: nowrap;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .perc {
    display: inline-block;
    padding: 2px 6px 2px 3px;            /* il testo inizia con uno spazio (&nbsp;) */
    border-radius: 6px;
    background: var(--asp-lst-red);
    color: #ffffff;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    vertical-align: middle;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo_pieno {
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    color: var(--asp-lst-muted);
    white-space: nowrap;
    overflow: hidden;
}

html[lang="it"] :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo_pieno {
    text-indent: -4.52em;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* --- Solo home: i caroselli non hanno righe da pareggiare, quindi il
   titolo riserva sempre 3 righe e tutte le card hanno la stessa
   struttura verticale. */
:is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products .prod-cont .prod-title {
    min-height: 54px;                    /* 3 x 18px */
}

/* --- Desktop e tablet (da 768px) -------------------------------------- */
@media only screen and (min-width: 768px) {

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img {
        padding: 16px 16px 0;            /* come il tema desktop */
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg {
        top: 16px;
        left: 16px;
        right: 56px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-info {
        padding: 12px 16px 16px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref {
        top: 6px;
        right: 6px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .brand {
        margin-bottom: 6px;
        font-size: 12px;
        line-height: 16px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title {
        margin-bottom: 10px;
        line-height: 20px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title a {
        font-size: 15px;
        line-height: 20px;
    }

    :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products .prod-cont .prod-title {
        min-height: 60px;                /* 3 x 20px */
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row {
        gap: 2px 8px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo {
        font-size: 20px;
        font-size: clamp(13px, calc(17.5cqi - 9px), 20px);
        line-height: 26px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .perc {
        padding: 2px 8px 2px 5px;
        font-size: 12px;
        line-height: 18px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo_pieno {
        height: 20px;
        font-size: 13px;
        line-height: 20px;
    }
}

/* --- Hover (solo dispositivi con puntatore) --------------------------- */
@media (hover: hover) and (pointer: fine) {

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont:not(.active):hover {
        border-color: var(--asp-lst-control-line);
    }

    main > .elenco .products .prod-cont:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref:hover > i {
        color: var(--asp-lst-red);
    }
}


/* =====================================================================
   02. FASCIA CATEGORIA (ROSA)
   Colore invariato. Titolo, descrizione e sottocategorie restano tutti
   visibili; nessun testo modificato.
   ===================================================================== */

main > .elenco .bgr {
    border-radius: var(--asp-lst-radius);
}

main > .elenco .bgr h1 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

main > .elenco .bgr .navcats ul > li > a {
    padding: 10px 18px;
    font-size: 14px;
    line-height: 20px;                   /* 20 + 10 + 10 = 40px */
    border-radius: var(--asp-lst-radius-control);
}

/* --- Mobile (approvato in V1) --- */
@media only screen and (max-width: 767px) {

    main > .elenco .bgr {
        padding: 20px 18px 16px;
    }

    main > .elenco .bgr h1 {
        margin-bottom: 6px;
        font-size: 28px;
        line-height: 32px;
    }

    main > .elenco .bgr .txt {
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 20px;
    }

    /* Le sottocategorie scorrono in orizzontale fino al bordo della
       fascia: il margine negativo segue il padding (18px). */
    main > .elenco .bgr .navcats {
        margin: 0 -18px;
        padding: 0 18px;
    }
}

/* --- Desktop e tablet --- */
@media only screen and (min-width: 768px) {

    main > .elenco .bgr {
        padding: 28px 32px;
    }

    main > .elenco .bgr h1 {
        margin-bottom: 8px;
        font-size: 32px;
        line-height: 1.15;
    }

    /* Riga di lettura contenuta: su schermi larghi la descrizione non
       corre per tutta la fascia. */
    main > .elenco .bgr .txt {
        max-width: 760px;
        margin-bottom: 18px;
        font-size: 15px;
        line-height: 1.5;
    }

    main > .elenco .bgr .navcats {
        margin: 0;                       /* allineate al titolo anche tra 768 e 991px */
        padding: 0;
    }

    main > .elenco .bgr .navcats ul > li > a {
        font-weight: 500;
        transition: box-shadow 160ms ease;
    }
}

@media (hover: hover) and (pointer: fine) {

    main > .elenco .bgr .navcats ul > li > a:hover {
        box-shadow: inset 0 0 0 1px var(--asp-lst-ink);
    }
}


/* =====================================================================
   03. TOOLBAR FILTRI / ORDINAMENTO / CONTEGGIO
   Solo presentazione. Nessun filtro nascosto, nessun evento toccato.
   ===================================================================== */

main > .elenco .filters-toolbar .filter-detail-toggler {
    height: var(--asp-lst-control-h);
    border: 1px solid var(--asp-lst-control-line);
    border-radius: var(--asp-lst-radius-control);
    background: #ffffff;
    color: var(--asp-lst-ink);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: none;
    transition: border-color 160ms ease;
}

main > .elenco .filters-toolbar .filter-detail-toggler[aria-expanded="true"] {
    border-color: var(--asp-lst-ink);
}

main > .elenco .filters-toolbar .filter-detail-toggler:focus-visible,
main > .elenco .filters-toolbar .filters-sort-label:focus-visible {
    outline: 2px solid var(--asp-lst-ink);
    outline-offset: 2px;
}

main > .elenco .filters-toolbar .filters-product-count {
    color: var(--asp-lst-ink-soft);
}

main > .elenco .filters-toolbar .filters-product-count > span {
    font-weight: 600;
    color: var(--asp-lst-ink);
}

/* --- Mobile (approvato in V1) -----------------------------------------
   Due controlli affiancati di pari larghezza. Il conteggio, che il
   tema nasconde su mobile, è visibile su una riga propria sotto. */
@media only screen and (max-width: 767px) {

    main > .elenco .filters-toolbar-nav {
        margin-top: 14px;
        border-top: 0;
    }

    main > .elenco #filter .filters-form {
        padding: 0 0 12px;
    }

    main > .elenco .filters-toolbar {
        align-items: flex-start;
        gap: var(--asp-lst-gap);
        min-height: 0;
        padding-bottom: 30px;            /* riga del conteggio */
    }

    main > .elenco .filters-toolbar-left,
    main > .elenco .filters-toolbar-right {
        flex: 1 1 0;
        min-width: 0;
    }

    main > .elenco .filters-inline-host:empty {
        display: none;
    }

    main > .elenco .filters-toolbar .filter-detail-toggler,
    main > .elenco .filters-toolbar .filters-sort-label {
        flex: 1 1 auto;
        justify-content: center;
        width: 100%;
        min-width: 0;
        padding: 0 12px;
    }

    /* "Ordina per" su mobile è un pulsante gemello di "Filtra prodotti" */
    main > .elenco .filters-toolbar .filters-sort-label {
        height: var(--asp-lst-control-h);
        border: 1px solid var(--asp-lst-control-line);
        border-radius: var(--asp-lst-radius-control);
        background: #ffffff;
        color: var(--asp-lst-ink);
        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;
        text-transform: none;
        transition: border-color 160ms ease;
    }

    main > .elenco .filters-toolbar .filters-order.is-open .filters-sort-label {
        border-color: var(--asp-lst-ink);
    }

    main > .elenco .filters-toolbar .filter-detail-toggler > span,
    main > .elenco .filters-toolbar .filters-sort-label > span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    main > .elenco .filters-toolbar .filters-product-count {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 13px;
        line-height: 20px;
    }

    /* Il menu "Ordina per" (aperto dal JS del tema con .is-open) nel
       tema è un pannello assoluto che copre le prime card. Qui resta
       nel flusso, sotto il proprio pulsante e con la stessa larghezza:
       la toolbar si allunga e il conteggio scende di conseguenza. */
    main > .elenco .filters-order {
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
    }

    main > .elenco .filters-order.is-open .filters-sort-select {
        position: static;
        flex: 0 0 100%;
        width: 100%;
        padding: 0;
    }
}

/* --- Desktop e tablet -------------------------------------------------
   REGOLA UNICA: ha il bordo solo ciò che si può azionare.
   - Menu a tendina (filtri e ordinamento): bordo, 44px, raggio 10.
   - Etichette ("Ordina per", conteggio): testo semplice, senza bordo.
   - "Filtra prodotti" cambia ruolo secondo lo script del tema:
     · filtri in riga (.filters-inline): il clic non fa nulla, quindi è
       un'etichetta come "Ordina per" → [Filtra prodotti] menu menu …
     · filtri nel pannello (.filters-overflow): apre e chiude il
       pannello, quindi è un pulsante con bordo.
   CATEGORIE CON MOLTI FILTRI: è lo script del tema a decidere. Somma
   le larghezze dei menu; se non entrano nella riga li sposta tutti nel
   pannello apribile. Qui i menu passano da 220 a 180px: ne entrano di
   più in riga prima del passaggio al pannello, senza toccare lo script.
   Nel pannello si dispongono su 4 colonne (3 sotto 1200px). */
@media only screen and (min-width: 768px) {

    /* :not(.filters-overflow) = menu in riga, e anche l'istante in cui
       lo script li misura (in quel momento toglie entrambe le classi).
       Nel pannello restano le colonne del tema. */
    main > .elenco .filters:not(.filters-overflow) .filter-field {
        flex: 0 0 180px;
        width: 180px;
    }

    main > .elenco .filters-inline .filters-toolbar .filter-detail-toggler {
        padding: 0;
        border-color: transparent;
        background: transparent;
        color: var(--asp-lst-ink-soft);
        cursor: default;
    }

    main > .elenco .filters-toolbar .filters-sort-label {
      cursor: default;
      height: var(--asp-lst-control-h);
      color: var(--asp-lst-ink-soft);
      font-size: 14px;
      line-height: 1.2;
      font-weight: 600;
      text-transform: none;
    }

    main > .elenco .filters-toolbar {
        gap: 20px;
        min-height: 0;
        padding: 16px 0;
    }

    main > .elenco .filters-toolbar-left {
        gap: 12px;
    }

    main > .elenco .filters-toolbar-right {
        gap: 20px;
    }

    main > .elenco .filters-toolbar .filter-detail-toggler {
        padding: 0 16px;
    }

    main > .elenco .filters-order {
        gap: 10px;
    }


    main > .elenco .filters-toolbar .filters-product-count {
        font-size: 14px;
        line-height: 20px;
    }

    /* Menu a tendina (filtri in riga, pannello filtri, ordinamento) */
    main > .elenco .filters .filter-field .SumoSelect > .CaptionCont,
    main > .elenco .filters .filters-sort-select .SumoSelect > .CaptionCont {
        height: var(--asp-lst-control-h);
        min-height: var(--asp-lst-control-h);
        padding: 6px 8px 6px 4px;
        border: 1px solid var(--asp-lst-control-line);
        border-radius: var(--asp-lst-radius-control);
        background: #ffffff;
        transition: border-color 160ms ease;
    }

    main > .elenco .filters .filter-field .SumoSelect > .CaptionCont > span,
    main > .elenco .filters .filters-sort-select .SumoSelect > .CaptionCont > span {
        font-size: 14px;
        color: var(--asp-lst-ink);
    }

    main > .elenco .filters .filter-field .SumoSelect:hover > .CaptionCont,
    main > .elenco .filters .filter-field .SumoSelect.open > .CaptionCont,
    main > .elenco .filters .filters-sort-select .SumoSelect:hover > .CaptionCont,
    main > .elenco .filters .filters-sort-select .SumoSelect.open > .CaptionCont {
        border-color: var(--asp-lst-ink);
    }
}


/* =====================================================================
   04. GRIGLIA
   Colonne native del tema invariate (2 su mobile, 3 da 768px, 5 da
   1600px). Su mobile solo lo spazio tra le colonne (approvato in V1).
   ===================================================================== */

@media only screen and (max-width: 767px) {

    main > .elenco .products.dflex {
        padding-top: 12px;               /* stacco dalla fascia bianca dei filtri */
        margin-left: calc(var(--asp-lst-gap) / -2);
        margin-right: calc(var(--asp-lst-gap) / -2);
    }

    main > .elenco .products.dflex > .pitem {
        padding-left: calc(var(--asp-lst-gap) / 2);
        padding-right: calc(var(--asp-lst-gap) / 2);
        min-width: 0;
    }

    main > .elenco .products .prod-cont {
        margin-bottom: var(--asp-lst-gap);
    }
}

@media only screen and (min-width: 768px) {

    main > .elenco .products.dflex {
        padding-top: 16px;               /* stacco dalla fascia bianca dei filtri */
    }

    main > .elenco .products.dflex > .pitem {
        min-width: 0;
    }
}


/* =====================================================================
   05. FINE ELENCO
   "Visualizzati X di Y" è un <div> senza classe, figlio diretto di
   .justpag: viene agganciato con :not([class]).
   Il testo del pulsante resta quello del gestionale.
   ===================================================================== */

main > .elenco .justpag > div:not([class]) {
    font-size: 13px;
    line-height: 20px;
    color: var(--asp-lst-ink-soft);
}

main > .elenco .justpag > div:not([class]) > #count {
    color: var(--asp-lst-ink);
}

main > .elenco .justpag .btn-morep {
    display: block;
    width: 100%;
    max-width: 280px;
    height: 48px;
    margin: 12px auto 0;
    padding: 0 20px;
    border-radius: var(--asp-lst-radius-control);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.03em;
}

@media only screen and (max-width: 767px) {

    main > .elenco {
        margin-bottom: 32px;
    }

    main > .elenco .justpag {
        padding-top: 14px;
    }
}

@media only screen and (min-width: 768px) {

    main > .elenco {
        margin-bottom: 48px;
    }

    main > .elenco .justpag {
        padding-top: 24px;
    }

    main > .elenco .justpag > div:not([class]) {
        font-size: 14px;
    }

    main > .elenco .justpag .btn-morep {
        max-width: 320px;
        height: 52px;
        margin-top: 14px;
    }
}


/* =====================================================================
   06. FASCIA BRAND (solo quella che segue un elenco prodotti)
   La larghezza delle slide è calcolata dallo script slick (inline):
   non viene toccata. Card alte 112px, logo centrato.
   I file dei loghi sono 108x180 con ampi margini vuoti dello stesso
   grigio della card (#f8f8f8): il logo viene mostrato a 90x150 e la
   card ne ritaglia solo i margini vuoti sopra e sotto (19px per lato).
   Verificato sui 14 loghi presenti: il disegno più alto (UpMap) occupa
   108px su 180 e resta intero. Un logo futuro che riempisse più del
   75% dell'altezza del file verrebbe tagliato.
   ===================================================================== */

main > .homebrands .carousel .slick-slide {
    margin: 0 5px;
}

main > .homebrands .item {
    height: 112px;
    border-radius: var(--asp-lst-radius);
    overflow: hidden;
}

main > .homebrands .item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

main > .homebrands .item figure {
    flex: 0 0 auto;
    margin: 0;
}

main > .homebrands .item img {
    width: auto;
    max-width: none;
    height: 150px;
}

main > .homebrands .seeall {
    height: var(--asp-lst-control-h);
    margin-top: 14px;
    padding: 0 20px;
    border: 1px solid var(--asp-lst-control-line);
    border-radius: var(--asp-lst-radius-control);
    background: #ffffff;
    color: var(--asp-lst-ink);
    font-size: 14px;
    line-height: 42px;
    font-weight: 600;
    text-transform: none;
    transition: border-color 160ms ease;
}

main > .homebrands .seeall:hover,
main > .homebrands .seeall:focus-visible {
    border-color: var(--asp-lst-ink);
}

@media only screen and (max-width: 767px) {

    main > .homebrands {
        padding: 24px 0 22px;
    }
}

@media only screen and (min-width: 768px) {

    main > .homebrands {
        padding: 36px 0 32px;
    }

    main > .homebrands .carousel .slick-slide {
        margin: 0 8px;
    }
}


/* =====================================================================
   07. SMARTPHONE STRETTI (fino a 359px) — approvato in V1
   Colonna di testo di ~115px: titolo più compatto, fino a 4 righe
   (stessa quantità di testo leggibile delle 3 righe a 375px).
   ===================================================================== */

@media only screen and (max-width: 359px) {

    main > .elenco .bgr {
        padding: 18px 16px 16px;
    }

    main > .elenco .bgr .navcats {
        margin: 0 -16px;
        padding: 0 16px;
    }

    main > .elenco .filters-toolbar .filter-detail-toggler,
    main > .elenco .filters-toolbar .filters-sort-label {
        gap: 6px;
        padding: 0 8px;
        font-size: 13px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-info {
        padding: 8px 10px 10px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title {
        line-height: 17px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title a {
        font-size: 13px;
        line-height: 17px;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products .prod-cont .prod-title {
        min-height: 68px;                /* 4 x 17px */
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row {
        gap: 2px 4px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .perc {
        padding: 1px 5px 1px 2px;
        font-size: 10px;
    }
}


/* =====================================================================
   A SPECIAL PARTS | RIFINITURE SITO | V1
   Correzioni emerse dal controllo visivo del sito. Ogni regola ha un
   ambito proprio; nessuna tocca la logica.

   Le card prodotto di ricerca, pagina 404, pagine generiche e
   "Acquistabile nel pacchetto" (scheda prodotto) NON sono qui: usano
   direttamente il modulo 01 del blocco LISTING V2, esteso a quei
   contesti (stesso stile, carrello rapido e "occhio" nascosti).

   A  Badge delle card su una riga
   B  Ricerca: riga dei risultati
   C  Sottocategorie: scorrimento visibile (desktop e tablet)
   D  Ordinamento e conteggio tra 768 e 991px
   E  Banner dei caroselli home su mobile
   F  Fascia chiara sotto il footer su mobile
   G  Login: pulsante "Accedi"
   ===================================================================== */


/* ---------------------------------------------------------------------
   A. BADGE DELLE CARD SU UNA RIGA
   "OFFERTA LAMPO" andava su due righe nelle card strette e diventava
   un blocco alto accanto al cuore.
   --------------------------------------------------------------------- */

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg > div {
    white-space: nowrap;
}

@media only screen and (max-width: 767px) {

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg > div {
        padding: 0 5px;
        font-size: 9.5px;
        line-height: 20px;
        letter-spacing: -0.01em;
    }

    /* il badge può arrivare fino al riquadro del cuore (8px di aria) */
    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg {
        right: 40px;
    }
}

/* card da ~140px (schermi fino a 359px): lì il badge non può stare su una riga */
@media only screen and (max-width: 359px) {

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg > div {
        white-space: normal;
    }
}


/* ---------------------------------------------------------------------
   B. RICERCA: "184 risultati in 1ms" su una riga
   Il testo è un nodo unico scritto dallo script: "in 1ms" non si può
   togliere via CSS senza nascondere anche il numero dei risultati.
   --------------------------------------------------------------------- */

.search_results #mr-stats {
    white-space: nowrap;
}


/* ---------------------------------------------------------------------
   C. SOTTOCATEGORIE CHE SCORRONO IN MODO VISIBILE (da 768px)
   Con molte sottocategorie la fila proseguiva oltre il bordo destro
   senza barra né frecce: con il mouse non si capiva che scorreva.
   Su mobile resta lo scorrimento orizzontale con il dito.
   --------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

    /* Fila unica (la pagina marca Aprilia ha 43 sottocategorie: a capo
       occuperebbero 5-8 righe). Quando non entrano tutte:
       - il bordo destro sfuma, segnale che la fila continua;
       - compare una barra di scorrimento sottile, trascinabile col mouse.
       Con poche sottocategorie non cambia nulla. */
    main > .elenco .bgr .navcats {
        overflow-x: auto;
        margin-bottom: -6px;             /* con il padding sotto: altezza invariata se non c'e' barra */
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: rgba(31, 31, 31, 0.28) transparent;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    }

    /* spazio in coda: l'ultima voce esce dalla sfumatura a fine corsa */
    main > .elenco .bgr .navcats ul {
        display: inline-block;           /* così lo spazio in coda entra nello scorrimento */
        padding-right: 56px;
        vertical-align: top;
    }
}


/* ---------------------------------------------------------------------
   D. ORDINAMENTO E CONTEGGIO TRA 768 E 991px
   In questa fascia il tema nasconde menu di ordinamento e conteggio e
   lo script non apre il menu al clic (lo fa solo sotto 768px): non si
   poteva ordinare. Qui tornano visibili accanto all'etichetta, come
   da 992px in su.
   --------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 991.98px) {

    main > .elenco .filters-toolbar-left {
        flex: 0 1 auto;
    }

    main > .elenco .filters-toolbar-right {
        flex: 0 0 auto;
        gap: 16px;
    }

    main > .elenco .filters-toolbar .filters-sort-select,
    main > .elenco .filters-toolbar .filters-product-count {
        display: block;
    }
}


/* ---------------------------------------------------------------------
   E. BANNER DEI CAROSELLI HOME SU MOBILE
   Le scritte bianche finivano direttamente sulla fotografia. Una
   sfumatura scura nella parte alta le rende leggibili; la foto resta
   pulita dove c'è il soggetto. Dimensioni del banner invariate (le
   decide lo script del carosello).
   --------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    main > .homeprods .carousel .gbanner .contents > .padding {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.4) 38%, rgba(0, 0, 0, 0) 64%);
    }
}


/* ---------------------------------------------------------------------
   F. FASCIA CHIARA SOTTO IL FOOTER SU MOBILE
   Il footer ha 75px di spazio finale (per il pulsante WhatsApp) che
   mostrava il grigio chiaro della pagina sotto la parte scura.
   --------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    body > footer {
        background-color: #282223;       /* stesso scuro dell'ultima fascia del footer */
    }
}


/* ---------------------------------------------------------------------
   G. LOGIN: PULSANTE "ACCEDI"
   Era verde, fuori dalla palette: nero come gli altri pulsanti primari.
   --------------------------------------------------------------------- */

main > .page.login #loginform .btn-accedi {
    border-color: #1f1f1f;
    background: #1f1f1f;
    color: #ffffff;
}

main > .page.login #loginform .btn-accedi:hover,
main > .page.login #loginform .btn-accedi:focus {
    border-color: #000000;
    background: #000000;
    color: #ffffff;
}