/* 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;
  }
  /* Contatore del carrello: il tema lo ancora 7px sopra il riquadro
     dell'icona (alto 44px), quindi restava staccato in alto. Ora poggia
     sull'angolo alto a destra del carrello, con un bordo bianco che lo
     separa dal disegno. Colore e numero restano quelli del tema. */
  header[role="banner"] .testa #cart .badge {
    top: 2px !important;
    left: auto !important;
    right: 2px !important;   /* con 2-3 cifre cresce verso sinistra, non verso il menu */
    box-sizing: border-box !important;
    min-width: 17px !important;
    width: auto !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 2px #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 17px !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
   - la ricerca occupa sempre tutto lo spazio tra logo e azioni
   - icone + scritte da 1200px (dove c'è la barra del menu); sotto,
     sole icone. La scelta è per larghezza di pagina: l'area azioni
     ora è larga quanto il proprio contenuto e non può più misurarsi
     da sola con una container query
   - 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: LOGO | RICERCA | AZIONI
       Le tre colonne Bootstrap avevano larghezze fisse (3/12, 5/12,
       4/12 con push/pull): la ricerca non poteva mai superare la
       propria quota e ai lati restava spazio vuoto.
       Ora logo e azioni occupano solo la larghezza del proprio
       contenuto e la ricerca prende TUTTO lo spazio che resta.
       Le colonne sono riconosciute dal contenuto (:has), non dalle
       classi col-*, che cambiano da un template all'altro.
       ========================================================= */

    header .testa > .container > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 24px !important;
    }

    header .testa > .container > .row::before,
    header .testa > .container > .row::after {
        display: none !important;
    }

    header .testa > .container > .row > [class*="col-"] {
        position: static !important;   /* annulla push/pull */
        float: none !important;
        width: auto !important;
        min-height: 0 !important;
    }

    header .testa > .container > .row > [class*="col-"]:has(.logo-wrapper) {
        order: 1 !important;
        flex: 0 0 auto !important;
        padding-right: 0 !important;   /* lo spazio verso la ricerca è solo il gap */
    }

    header .testa .logo-wrapper ul,
    header .testa .logo-wrapper li {
        margin: 0 !important;
        padding: 0 !important;
    }

    header .testa > .container > .row > [class*="col-"]:has(.modal-search) {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    header .testa > .container > .row > [class*="col-"]:has(.info.btns) {
        order: 3 !important;
        flex: 0 0 auto !important;
        padding-left: 0 !important;
    }

    /* =========================================================
       2. LOGO
       Larghezza propria (la colonna ora si adatta al contenuto):
       161px a 768px, 220px da circa 1050px in su.
       ========================================================= */

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

        width: clamp(160px, 21vw, 220px) !important;
        max-width: none !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 {
        /* il tema impagina <ul>/<li> come tabella: una cella non scende
           sotto la larghezza naturale del campo e la ricerca usciva
           dalla propria colonna a 768px */
        display: block !important;

        width: 100% !important;
        min-width: 0 !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;

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

        width: auto !important;        /* larga quanto le icone: il resto va alla ricerca */
        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;
    }

    /* Stesso carrello dell'header mobile (stesso SVG, 25px) al posto
       del glifo del font icone: prima erano due disegni diversi. */
    header .testa #cart i.icon-cart-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%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;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 25px 25px !important;
    }

    header .testa #cart i.icon-cart-n::before {
        content: "" !important;
        display: none !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
       Bandiera + freccia verso il basso, a tutte le larghezze.
       ========================================================= */

    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;
        gap: 7px !important;

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

        margin: 0 !important;
        padding: 0 2px 0 31px !important;   /* 24px di bandiera + 7px */

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

        color: #1f1f1f !important;
        line-height: 1 !important;
    }

    /* Niente "IT/€" accanto alla bandiera: resta nel DOM (e il pulsante
       ha il suo aria-label), a vista c'è solo la freccia che indica il
       menu. La freccia è decorativa, disegnata con due bordi. */
    header .testa .langselector .flag > button > span {
        display: none !important;
    }

    header .testa .langselector .flag > button::after {
        content: "" !important;
        flex: 0 0 auto !important;

        width: 6px !important;
        height: 6px !important;
        margin-top: -3px !important;

        border-right: 1.7px solid currentColor !important;
        border-bottom: 1.7px solid currentColor !important;

        transform: rotate(45deg) !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;
    }

}

/* =========================================================
   AZIONI SENZA SCRITTE TRA 768 E 1199px

   Da 1200px: Moto / Account / Carrello mantengono icone + scritte
   con dimensioni ORIGINALI FISSE (il gruppo occupa ~424px).

   Sotto 1200px (menu a scomparsa, c'è anche l'hamburger):
   -> nascondiamo esclusivamente le scritte
   -> le icone NON si rimpiccioliscono
   -> la griglia Bootstrap della pagina NON cambia
   ========================================================= */

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

    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: icone più vicine, così resta più spazio alla ricerca. */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {

    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: #ed1c24;   /* stesso rosso del badge sconto */
    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: #ed1c24 !important;   /* stesso rosso del badge sconto */
        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;
}

/* MOTO SELEZIONATA: niente riquadro grigio con la miniatura.
   La foto entra dal bordo sinistro del box, ingrandita e tagliata a
   metà: si vede la parte anteriore, col muso verso destra (le foto dei
   modelli hanno il muso a destra e fondo bianco, come il box).
   La colonna della foto è una "finestra" alta quanto il box (i margini
   negativi annullano il padding del blocco) che taglia l'immagine.
   NB: il file servito è 80x80px; qui è mostrato a 132px, quindi su
   schermi ad alta densità è meno nitido. Per la piena qualità serve da
   Daisuke una miniatura da almeno 264px. */
.product-view .moto-compat .moto-compat-current {
    --asp-pdp-bike-window: 84px;
    --asp-pdp-bike-size: 132px;
}

.product-view .moto-compat .moto-compat-current:has(> .moto-compat-image) {
    grid-template-columns: calc(var(--asp-pdp-bike-window) - 20px) minmax(0, 1fr) max-content !important;
}

@container asp-pdp-compat (max-width: 500px) {
    .product-view .moto-compat .moto-compat-current:has(> .moto-compat-image) {
        grid-template-columns: calc(var(--asp-pdp-bike-window) - 20px) minmax(0, 1fr) !important;
    }
}

.product-view .moto-compat .moto-compat-image {
    position: relative !important;
    align-self: stretch !important;
    width: var(--asp-pdp-bike-window) !important;
    min-width: var(--asp-pdp-bike-window) !important;
    height: auto !important;
    min-height: 72px !important;
    margin: -14px 0 -14px -20px !important;   /* = padding del blocco: la finestra tocca i bordi del box */
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

.product-view .moto-compat .moto-compat-image img {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: var(--asp-pdp-bike-size) !important;
    height: var(--asp-pdp-bike-size) !important;
    max-width: none !important;
    transform: translateY(-50%) !important;
    object-fit: contain !important;
}

@media only screen and (max-width: 767px) {
    .product-view .moto-compat .moto-compat-image {
        margin-left: -16px !important;      /* su mobile il padding laterale è 16px */
    }
}

.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 "quantità" nascosta solo a vista: il <label> resta nel
     DOM, collegato al campo, e viene letto dai lettori di schermo;
   - 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 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.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;
    }
}


/* =====================================================================
   19. AREA ACQUISTO SU UNA RIGA (UX FIX V1, punto 11)
   Larghezza utile del pannello acquisto, misurata:
     768-991px   694px  (colonna unica)
     992-1199px  308px
     1200-1599px 392px
     da 1600px   558px e oltre

   A. QUANTITÀ + CTA + CUORE SULLA STESSA RIGA
      Dove ci stanno: 768-991px e da 1200px. Tra 992 e 1199px (308px)
      e su mobile resta la disposizione su due righe.
      Nel DOM la quantità sta in un blocco che PRECEDE la riga dei
      pulsanti: viene ancorata all'inizio di quella riga, che le lascia
      lo spazio a sinistra (e a destra per il cuore). Stessa tecnica già
      usata dal modulo 09 per il cuore; nessun elemento spostato nel DOM.
      Vale solo se la quantità è visibile (stessa guardia del modulo 09):
      con prodotto esaurito resta [Avvisami][cuore].

   B. DISPONIBILITÀ A DESTRA DEL PREZZO
      Dove c'è spazio per prezzo + prezzo pieno + sconto + disponibilità
      sulla stessa riga: 768-991px e da 1600px. A 1200-1599px (392px) il
      badge sconto andrebbe a capo: lì resta sotto il prezzo.
      La disponibilità è un fratello successivo del prezzo (in mezzo c'è
      PayPal): viene agganciata al prezzo con il posizionamento ad
      ancora CSS. Nei browser che non lo supportano resta dov'è oggi.
      Testo, colore e stato arrivano dal backend e non vengono toccati.
   ===================================================================== */

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

    .product-view {
        --asp-pdp-row-qbtn: 36px;          /* pulsanti - e + */
        --asp-pdp-row-qin: 40px;           /* campo numero */
        --asp-pdp-row-heart: var(--asp-pdp-cta-h);
        --asp-pdp-row-gap: 10px;
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) > .is-disponibile:has(> .quantita) {
        position: relative;
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .quantita {
        position: absolute;
        top: calc(100% + 16px);            /* = padding-top della riga pulsanti */
        left: 20px;                        /* = padding del pannello */
        z-index: 1;
        padding: 0;
    }

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

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .quantita .input-group button {
        width: var(--asp-pdp-row-qbtn);
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .quantita .form-control.quant {
        width: var(--asp-pdp-row-qin);
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) > .row:has(.btns) {
        padding-top: 16px;
    }

    /* la CTA occupa tutto lo spazio tra quantità e cuore */
    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .btns > .row {
        padding-left: calc(2 * var(--asp-pdp-row-qbtn) + var(--asp-pdp-row-qin) + 2px + var(--asp-pdp-row-gap));
        padding-right: calc(var(--asp-pdp-row-heart) + var(--asp-pdp-row-gap));
    }

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

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

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) #add_carrello {
        padding: 0 12px;
        white-space: nowrap;
    }
}

/* 1200-1599px: pannello da 392px. Quantità e cuore più stretti: alla CTA
   restano 231px e "AGGIUNGI AL CARRELLO" (202px in Inter 16px) sta su
   una riga senza ridurre il carattere. */
@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {

    .product-view {
        --asp-pdp-row-qbtn: 30px;
        --asp-pdp-row-qin: 34px;
        --asp-pdp-row-heart: 48px;
        --asp-pdp-row-gap: 8px;
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) #add_carrello {
        padding: 0 8px;
    }
}

@supports (anchor-name: --asp) and (top: anchor(top)) {

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

        .product-view .bgw > .wrapper > .price {
            anchor-name: --asp-pdp-price;
            padding-right: 200px;          /* 20px del pannello + 180px riservati alla disponibilità */
        }

        .product-view .bgw > .wrapper > #comb_disp:not(:empty) {
            position: absolute;
            position-anchor: --asp-pdp-price;
            top: calc(anchor(top) + 20px);  /* = padding-top del prezzo */
            right: calc(anchor(right) + 20px);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            max-width: 170px;
            min-height: 33px;              /* = altezza della riga del prezzo (30px x 1.1) */
            padding: 0;
            background: transparent;
            text-align: right;
        }
    }
}


/* =====================================================================
   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);
}

/* Nessuna linea tra la fascia rosa e la barra: lo stacco lo fa già lo
   spazio. Il tema disegna un filetto grigio a tutta larghezza sopra il
   modulo filtri e un altro sopra il pannello aperto. */
main > .elenco .filters-form::before {
    display: none;
}

/* il bordo bianco da 1px del tema sfalsava gli spazi (17px sopra, 13 sotto) */
main > .elenco .filters-toolbar-nav {
    border-top: 0;
    border-bottom: 0;
}

main > .elenco .filters-form > .filter-details {
    border-top: 0;
}

/* contenitore dei filtri "in riga" del tema: qui resta sempre vuoto e
   aggiungeva 12px a destra di "Filtra prodotti" */
main > .elenco .filters-inline-host:empty {
    display: none;
}

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-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" è SEMPRE un pulsante: i filtri restano chiusi e
     si aprono al clic, in ogni categoria e a ogni larghezza.
     Lo script del tema ha due modalità: filtri in riga sempre visibili
     (.filters-inline, dove il clic sul pulsante non fa nulla) oppure
     filtri in un pannello apribile (.filters-overflow). Sceglie
     sommando le larghezze dei menu: qui, nell'istante della misura, i
     menu sono larghi quanto la pagina, quindi "non entrano" mai e lo
     script usa sempre il pannello apribile. Nessuna modifica allo script.
   - Da 992px il pannello aperto sta ACCANTO al pulsante se i menu
     entrano nella riga, altrimenti SOTTO. La soglia dipende da quanti
     filtri ha la categoria (vedi blocco "ACCANTO O SOTTO" più avanti). */
@media only screen and (min-width: 768px) {

    /* :not(.filters-overflow) = solo l'istante in cui lo script misura i
       menu (toglie entrambe le classi, misura, poi ne rimette una). */
    main > .elenco .filters:not(.filters-overflow) .filter-field {
        flex: 0 0 100vw;
        width: 100vw;
    }

    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);
    }
}


/* --- ACCANTO O SOTTO (da 992px) ---------------------------------------
   La riga diventa una griglia: [pulsante] [pannello filtri] [ordinamento
   e conteggio]. Il pannello (#filterDetails, aperto e chiuso dallo
   script) di base occupa una riga propria SOTTO; passa ACCANTO al
   pulsante solo quando la barra è abbastanza larga per tutti i menu:
   580px (pulsante, ordinamento, conteggio e spazi: 564 misurati + margine) + 192px
   per ogni filtro (menu da 180px + 12px di spazio).
   La larghezza è quella della barra filtri, non della finestra. */
@media only screen and (min-width: 992px) {

    main > .elenco #filter.filters-layout {
        container: asp-lst-filters / inline-size;
    }

    main > .elenco .filters-form {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;                /* come lo spazio tra un menu e l'altro */
        margin: 0;
        padding: 16px 0;
    }

    main > .elenco .filters-form > .filters-toolbar {
        display: contents;
    }

    main > .elenco .filters-form .filters-toolbar-left {
        grid-column: 1;
        grid-row: 1;
    }

    main > .elenco .filters-form .filters-toolbar-right {
        grid-column: 3;
        grid-row: 1;
        margin-left: 8px;                /* 12 + 8 = 20px dal gruppo dei filtri */
    }

    main > .elenco .filters-form > .filter-details {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        margin-top: 12px;
        padding: 0;
    }

    /* 1 filtro: servono almeno 772px */
    @container asp-lst-filters (min-width: 772px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(1)):not(:has(.filter-field:nth-child(2))) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(1)):not(:has(.filter-field:nth-child(2))) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(1)):not(:has(.filter-field:nth-child(2))) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }

    /* 2 filtri: servono almeno 964px */
    @container asp-lst-filters (min-width: 964px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(2)):not(:has(.filter-field:nth-child(3))) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(2)):not(:has(.filter-field:nth-child(3))) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(2)):not(:has(.filter-field:nth-child(3))) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }

    /* 3 filtri: servono almeno 1156px */
    @container asp-lst-filters (min-width: 1156px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(3)):not(:has(.filter-field:nth-child(4))) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(3)):not(:has(.filter-field:nth-child(4))) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(3)):not(:has(.filter-field:nth-child(4))) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }

    /* 4 filtri: servono almeno 1348px */
    @container asp-lst-filters (min-width: 1348px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(4)):not(:has(.filter-field:nth-child(5))) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(4)):not(:has(.filter-field:nth-child(5))) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(4)):not(:has(.filter-field:nth-child(5))) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }

    /* 5 filtri: servono almeno 1540px */
    @container asp-lst-filters (min-width: 1540px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(5)):not(:has(.filter-field:nth-child(6))) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(5)):not(:has(.filter-field:nth-child(6))) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(5)):not(:has(.filter-field:nth-child(6))) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }

    /* 6 filtri: servono almeno 1732px */
    @container asp-lst-filters (min-width: 1732px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(6)) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(6)) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(6)) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }
}


/* =====================================================================
   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)
   C2 Elenco "Cerca accessori" (template elenco precedente)
   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;
    }
}


/* Su mobile la fila arrivava al bordo della fascia e si interrompeva
   di netto: stessa sfumatura a destra, più corta. Lo spazio in coda fa
   uscire l'ultima voce dalla sfumatura a fine corsa; con poche
   sottocategorie non cambia nulla. */
@media only screen and (max-width: 767px) {

    main > .elenco .bgr .navcats {
        padding-right: 0;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    }

    main > .elenco .bgr .navcats ul {
        display: inline-block;
        padding-right: 44px;
        vertical-align: top;
    }
}


/* ---------------------------------------------------------------------
   C1. FILTRI ATTIVI (riga sotto la barra)
   Il filtro attivo era un blocco nero pieno, più pesante del pulsante
   "Filtra prodotti" che gli sta sopra. Ora è un'etichetta grigia con
   testo scuro; "Elimina tutti filtri" resta un collegamento. Stessa
   altezza (32px) e stessa distanza (8px) per tutte le voci.
   --------------------------------------------------------------------- */

main > .elenco .filtri_attivi {
    padding-bottom: 12px;
}

main > .elenco .filtri_attivi ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

main > .elenco .filtri_attivi li {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #f0f1f2;                 /* il grigio di fondo pagina */
}

main > .elenco .filtri_attivi li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 6px 12px;
    background: transparent;
    color: var(--asp-lst-ink);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
}

main > .elenco .filtri_attivi li > a > sup {
    position: static;
    margin: 0;
    color: var(--asp-lst-ink-soft);
    font-size: 15px;
    line-height: 18px;
}

main > .elenco .filtri_attivi li.elimina {
    background: transparent;
}

main > .elenco .filtri_attivi li.elimina > a {
    padding: 6px 4px;
    color: var(--asp-lst-ink-soft);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
}

main > .elenco .filtri_attivi li > a:focus-visible {
    outline: 2px solid var(--asp-lst-ink);
    outline-offset: 2px;
}

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

    main > .elenco .filtri_attivi li:not(.elimina):hover {
        background: var(--asp-lst-line);
    }

    main > .elenco .filtri_attivi li.elimina > a:hover {
        color: var(--asp-lst-ink);
    }
}

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

    /* 12px dalla barra (che ne lascia 16 sotto di sé), 16px dal fondo */
    main > .elenco .filtri_attivi {
        margin-top: -4px;
        padding-bottom: 16px;
    }
}


/* ---------------------------------------------------------------------
   C2. ELENCO "CERCA ACCESSORI" (prodotti per la moto selezionata)
   Questa pagina usa ancora il template elenco PRECEDENTE: sottocategorie
   con casella di spunta (.checklist), barra filtri Bootstrap
   (.navbar-header + .navbarform) e conteggio fuori dalla fascia bianca
   (.counter senza .counter-legacy). Card, fascia rosa e fine elenco
   seguono già il modulo LISTING V2; qui si allineano solo i controlli
   che il nuovo template non ha. Nessuna regola tocca gli altri elenchi:
   queste classi lì non esistono.
   --------------------------------------------------------------------- */

/* l'editor inserisce un a capo vuoto in testa alla descrizione */
main > .elenco .bgr .txt > br:first-child {
    display: none;
}

/* sottocategorie con casella: stessa altezza (40px) e stesso raggio delle altre */
main > .elenco .bgr .navcats .checklist > li label {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    border-radius: var(--asp-lst-radius-control);
}

/* conteggio: stessa tipografia del conteggio del nuovo template */
main > .elenco .counter:not(.counter-legacy) {
    margin-bottom: 12px;
    padding-top: 12px;
    font-size: 14px;
    line-height: 20px;
    text-transform: none;
    color: var(--asp-lst-ink-soft);
}

main > .elenco .counter:not(.counter-legacy) span {
    color: var(--asp-lst-ink);
}

/* menu a tendina dei filtri: come nel nuovo template (44px, bordo, raggio 10) */
main > .elenco .filters .navbarform:not(.filters-form) .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 .navbarform:not(.filters-form) .SumoSelect > .CaptionCont > span {
    font-size: 14px;
    color: var(--asp-lst-ink);
}

main > .elenco .filters .navbarform:not(.filters-form) .SumoSelect:hover > .CaptionCont,
main > .elenco .filters .navbarform:not(.filters-form) .SumoSelect.open > .CaptionCont {
    border-color: var(--asp-lst-ink);
}

/* Barra: [Filtra prodotti] [filtri, solo se aperti] ... [ordinamento].
   Nel tema l'ordinamento stava DENTRO il pannello dei filtri: su mobile
   non si vedeva finché non si apriva "Filtra prodotti", su desktop i
   menu erano sempre aperti e senza pulsante. Qui i contenitori
   intermedi vengono "sciolti" (display: contents) e le colonne
   diventano voci della stessa riga: l'ordinamento è sempre visibile, i
   filtri compaiono quando lo script di Bootstrap apre #filter (.in).
   Nessun testo aggiunto, nessuno script toccato. */
main > .elenco nav.filters:not(.filters-toolbar-nav) {
    min-height: 0;
    margin-top: 0;
    border: 0;                           /* niente linea sotto la fascia rosa; senza bordi laterali il pulsante è a filo della fascia */
}

main > .elenco nav.filters:not(.filters-toolbar-nav) > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) #filter,
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter > .navbarform,
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter > .navbarform > .row {
    display: contents !important;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) #filter::before,
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter::after,
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter > .navbarform > .row::before,
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter > .navbarform > .row::after {
    display: none;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) #filter .row > [class*="col-"] {
    flex: 0 0 180px;
    float: none;
    width: auto;
    min-height: 0;
    padding: 0;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) #filter .row > [class*="col-"] .form-group {
    margin: 0;
}

/* filtri chiusi: resta solo l'ordinamento */
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter:not(.in):not(.collapsing[aria-expanded="true"]) .row > [class*="col-"]:not(:has(#sort)) {
    display: none;
}

/* "Filtra prodotti": stesso pulsante del nuovo template. Icona e
   scritta sono due elementi distinti che aprono lo stesso pannello: il
   bordo sta sul loro contenitore e l'area cliccabile della scritta lo
   copre tutto. */
main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 9px;
    float: none;
    height: var(--asp-lst-control-h);
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--asp-lst-control-line);
    border-radius: var(--asp-lst-radius-control);
    background: #ffffff;
    transition: border-color 160ms ease;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header:has(.navbar-toggle:not(.collapsed)) {
    border-color: var(--asp-lst-ink);
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header:has(:focus-visible) {
    outline: 2px solid var(--asp-lst-ink);
    outline-offset: 2px;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header::before,
main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header::after {
    display: none;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header .navbar-toggle {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--asp-lst-ink);
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header .navbar-brand {
    display: block !important;           /* il tema la nasconde da 768px */
    float: none;
    height: auto;
    margin: 0;
    padding: 0;
    color: var(--asp-lst-ink);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header .navbar-brand::after {
    content: "";
    position: absolute;
    inset: 0;
}

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

    /* come nel nuovo template: due controlli affiancati di pari
       larghezza, i filtri aperti sotto, uno per riga */
    main > .elenco nav.filters:not(.filters-toolbar-nav) {
        margin-top: 14px;
    }

    main > .elenco nav.filters:not(.filters-toolbar-nav) > div {
        gap: var(--asp-lst-gap);
        padding: 0 0 12px;
    }

    main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header {
        flex: 1 1 40%;
        order: 1;
        min-width: 0;
        padding: 0 12px;
    }

    main > .elenco nav.filters:not(.filters-toolbar-nav) #filter .row > [class*="col-"] {
        flex: 0 0 100%;
        order: 3;
    }

    main > .elenco nav.filters:not(.filters-toolbar-nav) #filter .row > [class*="col-"]:has(#sort) {
        flex: 1 1 40%;
        order: 2;
        min-width: 0;
    }

    main > .elenco .counter:not(.counter-legacy) {
        justify-content: flex-start;
        font-size: 13px;
    }
}

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

    /* ordinamento a destra, come nel nuovo template */
    main > .elenco nav.filters:not(.filters-toolbar-nav) #filter .row > [class*="col-"]:has(#sort) {
        flex-basis: 182px;
        margin-left: auto;
    }
}


/* ---------------------------------------------------------------------
   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;
}