/* ============================================================
   Piacemolto — Rifinitura "stile app" su MOBILE (solo ≤768px)
   Scoping .pm-app + classi del plugin. Additivo: nessuna
   modifica al desktop, nessuna tab bar, niente layout stravolti.
   ============================================================ */

@media (max-width:768px){

  body.pm-app{ -webkit-tap-highlight-color:transparent; }
  body.pm-app a, body.pm-app button{ -webkit-tap-highlight-color:transparent; }

  /* ── PULSANTI IN STILE APP (arrotondati, tattili, comodi) ── */
  body.pm-app .pm-linea-card__cta,
  body.pm-app .pm-hero__cta,
  body.pm-app .pm-models__card-btn,
  body.pm-app .pm-models__cta-btn,
  body.pm-app .pm-btn,
  body.pm-app .pm-order-box__cta,
  body.pm-app .pm-save-profile-btn,
  body.pm-app .woocommerce a.button,
  body.pm-app .woocommerce button.button,
  body.pm-app .woocommerce #respond input#submit,
  body.pm-app .wc-block-components-button{
    border-radius:14px !important;
    min-height:48px !important;
    /* NIENTE !important su display: il JS nasconde alcuni pulsanti con lo stile
       inline `display:none` (es. CONTINUA nel Riepilogo, INDIETRO al passo 1) e
       un !important qui lo annullava, facendoli riapparire solo su mobile. */
    display:inline-flex;
    align-items:center !important;
    justify-content:center !important;
    font-weight:650 !important;
    letter-spacing:.2px !important;
    line-height:1.1 !important;
    transition:transform .12s ease, filter .2s ease !important;
    box-shadow:0 1px 2px rgba(20,25,35,.10) !important;
  }
  body.pm-app .pm-linea-card__cta:active,
  body.pm-app .pm-hero__cta:active,
  body.pm-app .pm-models__card-btn:active,
  body.pm-app .pm-models__cta-btn:active,
  body.pm-app .pm-btn:active,
  body.pm-app .pm-order-box__cta:active,
  body.pm-app .pm-save-profile-btn:active,
  body.pm-app .woocommerce a.button:active,
  body.pm-app .woocommerce button.button:active,
  body.pm-app .wc-block-components-button:active{
    transform:scale(.97) !important;
  }

  /* CTA principali larghe (pattern app) dove ha senso */
  body.pm-app .pm-linea-card__cta,
  body.pm-app .pm-models__cta-btn,
  body.pm-app .pm-order-box__cta{
    width:100% !important;
    padding:15px 20px !important;
    font-size:15px !important;
  }

  /* ── CARD ELEGANTI ── */
  body.pm-app .pm-models__card,
  body.pm-app .pm-linea-card,
  body.pm-app .pm-fabric-card{
    border-radius:18px !important;
    overflow:hidden !important;
    box-shadow:0 1px 3px rgba(20,25,35,.05), 0 10px 26px rgba(20,25,35,.07) !important;
    border:.5px solid rgba(20,25,35,.06) !important;
    transition:transform .16s ease !important;
  }
  body.pm-app .pm-fabric-card:active,
  body.pm-app .pm-models__card:active{ transform:scale(.98) !important; }

  /* Chip/filtri collezione in stile app pill */
  body.pm-app .pm-coll-btn,
  body.pm-app .pm-models__filter{
    border-radius:22px !important;
    min-height:40px !important;
    transition:transform .12s ease !important;
  }
  body.pm-app .pm-coll-btn:active,
  body.pm-app .pm-models__filter:active{ transform:scale(.95) !important; }

  /* ── PAGINE PIÙ PULITE ── respiro e titoli ── */
  body.pm-app .pm-models__title,
  body.pm-app .pm-step-intro__title{ letter-spacing:-.4px !important; }
  body.pm-app .pm-models__grid{ gap:14px !important; }

  /* Momentum scroll fluido su iOS per le fasce orizzontali */
  body.pm-app .rail,
  body.pm-app .pm-linee__grid,
  body.pm-app .chips{ -webkit-overflow-scrolling:touch; }

  @media (prefers-reduced-motion:reduce){
    body.pm-app *{ transition:none !important; }
  }
}

/* ============================================================
   MOBILE — Step 1 "Scegli il tessuto".
   Obiettivi (feedback utente): (1) meno spazio vuoto in alto,
   (2) card tessuto pulite in stile app, ispirate al prototipo
   Tessuti e alla chiarezza di apposta.it.
   Solo ≤768px, scoping body.pm-app. Nessun impatto sul desktop.
   ============================================================ */
@media (max-width:768px){

  /* ── Meno spazio in alto: barra passi più bassa e compatta ── */
  body.pm-app .pm-steps{ height:46px !important; padding:0 8px !important; }
  body.pm-app .pm-step{ height:46px !important; padding:0 9px !important; }
  body.pm-app .pm-step__arrow{ padding:0 !important; }

  /* ── Barra collezioni + ricerca compatta ── */
  body.pm-app .pm-filters-bar__inner{ padding:8px 14px !important; gap:8px !important; }

  /* Chip collezione a scorrimento orizzontale (come le chips dell'app) */
  body.pm-app .pm-filters-bar__selects{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    gap:8px !important;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  body.pm-app .pm-filters-bar__selects::-webkit-scrollbar{ display:none; }
  body.pm-app .pm-coll-btn{
    flex:0 0 auto !important;
    padding:8px 16px !important;
    font-size:13.5px !important;
    border-radius:22px !important;
    letter-spacing:0 !important;
  }

  /* Conteggio + ricerca: la ricerca va a tutta larghezza sotto le chip */
  body.pm-app .pm-filters-bar__right{
    width:100% !important;
    order:2 !important;
    gap:10px !important;
  }
  body.pm-app .pm-search-bar{
    flex:1 1 auto !important;
    width:auto !important;
    border-radius:12px !important;
    padding:10px 13px !important;
    font-size:15px !important;
  }
  body.pm-app .pm-results-count-bar{ font-size:12px !important; }

  /* ── Intro step 1: titolo compatto, descrizione lunga nascosta ── */
  body.pm-app #pm-step-1{ padding:14px 14px 22px !important; }
  body.pm-app #pm-step-1 .pm-step-intro{ margin:2px 0 12px !important; }
  body.pm-app #pm-step-1 .pm-step-intro__title{
    font-size:19px !important; line-height:1.2 !important; margin:0 !important;
    letter-spacing:-.3px !important;
  }
  body.pm-app #pm-step-1 .pm-step-intro__desc{ display:none !important; }

  /* ── Griglia tessuti: 2 colonne con respiro (niente hairline) ── */
  body.pm-app .pm-fabrics-grid{
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
    background:transparent !important;
    padding:0 !important;
  }

  /* ── Card tessuto pulita (stile app) ── */
  body.pm-app .pm-fabric-card{
    border-radius:16px !important;
    border:.5px solid rgba(20,25,35,.08) !important;
    box-shadow:0 1px 3px rgba(20,25,35,.05), 0 8px 22px rgba(20,25,35,.06) !important;
    background:#fff !important;
    overflow:hidden !important;
  }
  body.pm-app .pm-fabric-card:active{ transform:scale(.97) !important; }

  /* Swatch ad altezza fissa (niente ratio "alto") */
  body.pm-app .pm-fabric-card__swatch{
    padding-top:0 !important;
    height:118px !important;
  }

  /* Via l'overlay Seleziona/Dettagli: tap sulla card = seleziona, look pulito */
  body.pm-app .pm-fabric-card__overlay{ display:none !important; }

  /* Cuore/preferito coerente col prototipo */
  body.pm-app .pm-fabric-star{
    width:30px !important; height:30px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.85) !important;
    box-shadow:0 1px 3px rgba(0,0,0,.12) !important;
  }

  /* Info: gerarchia chiara nome › codice › prezzo */
  body.pm-app .pm-fabric-card__info{
    padding:11px 12px 13px !important;
    border-top:none !important;
  }
  body.pm-app .pm-fabric-card__name{
    font-size:13.5px !important; font-weight:650 !important;
    line-height:1.2 !important; margin-bottom:3px !important;
  }
  body.pm-app .pm-fabric-card__code{
    font-size:11px !important; font-weight:600 !important;
    color:#8a8681 !important; background:transparent !important;
    padding:0 !important; margin-bottom:0 !important;
    letter-spacing:.2px !important;
  }
  /* Descrizione e specifiche restano VISIBILI: il tessuto si legge
     direttamente nell'elenco, senza aprire la scheda (richiesta cliente). */
  body.pm-app .pm-fabric-card__price{
    font-size:14px !important; font-weight:750 !important;
    color:var(--pm-charcoal,#1b2028) !important; margin:7px 0 0 !important;
  }
  body.pm-app .pm-fabric-card__price small{ color:#a29b90 !important; font-weight:500 !important; }

  /* Un solo tag "uso" come chip pulito (eventuali extra nascosti) */
  body.pm-app .pm-fabric-card__tags{ margin-top:8px !important; gap:4px !important; }
  body.pm-app .pm-fabric-card__tags .pm-fabric-tag:nth-child(n+2){ display:none !important; }
  body.pm-app .pm-fabric-card__tags .pm-fabric-tag{
    font-size:10px !important; text-transform:uppercase !important;
    letter-spacing:.4px !important; font-weight:700 !important;
    border-radius:20px !important; padding:3px 9px !important;
  }

  @media (prefers-reduced-motion:reduce){
    body.pm-app .pm-fabric-card{ transition:none !important; }
  }
}

/* ============================================================
   MOBILE — Correzioni mirate (feedback utente):
   1) Spazio vuoto in alto: il tema applica .section-wrap
      { padding-top:80px }. Su desktop sta sotto l'header alto;
      su mobile (header basso) diventa un grande vuoto. Lo riduco
      SOLO sulla pagina del configuratore, via :has().
   2) Pulsante "Anteprima": tolgo il riempimento colorato/scuro
      (la "parte nera") e l'indicatore "Passo 1 di 5" ridondante,
      lasciando pill eleganti coerenti.
   3) Chip collezione un filo più grandi ed eleganti.
   ============================================================ */
@media (max-width:768px){

  /* 1) Meno vuoto in alto sulla pagina configuratore */
  body.pm-app .section-wrap:has(#pm-configurator){ padding-top:4px !important; }
  body.pm-app .entry-content:has(#pm-configurator){ margin-top:0 !important; }
  body.pm-app #pm-configurator{ margin-top:0 !important; }
  /* Fallback per browser senza :has(): riduce comunque il padding del wrap */
  body.pm-app .content-wrapper .section-wrap.layout-no-sidebar{ padding-top:4px !important; }

  /* 2) Barra azioni + pulsante Anteprima elegante (niente fill scuro) */
  body.pm-app #pm-step-indicator,
  body.pm-app .pm-nav-center{ display:none !important; }

  body.pm-app .pm-mobile-preview-btn{
    background:#fff !important;
    color:var(--pm-charcoal,#1b2028) !important;
    border:1.5px solid #ded9d2 !important;
    border-radius:999px !important;
    min-height:48px !important;
    padding:12px 20px !important;
    font-weight:600 !important;
    box-shadow:0 1px 2px rgba(20,25,35,.08) !important;
  }
  body.pm-app .pm-mobile-preview-btn::before,
  body.pm-app .pm-mobile-preview-btn::after{ content:none !important; display:none !important; background:none !important; }
  /* nessun badge scuro residuo sotto/sopra il pulsante */
  body.pm-app #pm-preview-line{ display:none !important; }

  /* barra azioni pulita e ariosa */
  /* Il padding sotto tiene conto della barra di sistema degli iPhone senza
     tasto fisico (vale 0 altrove): senza, i pulsanti le finivano sotto. */
  body.pm-app .pm-nav-bar{
    gap:8px !important;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    align-items:center !important;
  }

  /* ─── I TRE PULSANTI DELLA BARRA: UNA FORMA SOLA ────────────────────────
     Segnalazione: "da mobile i pulsanti risultano sfalsati". Erano tre
     oggetti costruiti in modo diverso — Indietro e Continua con un raggio,
     Anteprima a pastiglia, corpi di testo diversi, e l'altezza lasciata
     decidere al contenuto (min-height). Basta che il tema aggiunga una
     interlinea o un padding ai <button> perché uno dei tre cresca e la fila
     si scomponga: è quello che si vede nella foto, con Anteprima più alto
     degli altri due.

     Qui l'altezza non è più una conseguenza: è fissata, uguale per tutti e
     tre, insieme a forma, corpo del testo e centratura. Restano in riga
     qualunque cosa arrivi da fuori. */
  body.pm-app .pm-nav-bar > .pm-btn,
  body.pm-app .pm-nav-bar > .pm-mobile-preview-btn{
    box-sizing:border-box !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    border-radius:999px !important;
    padding:0 18px !important;
    font-size:14px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    align-self:center !important;
    margin:0 !important;
  }
  /* E devono ANCHE starci. Misurato con le larghezze naturali: su uno
     schermo da 360px "Indietro" cominciava a −11px, cioè mezzo pulsante
     fuori dallo schermo a sinistra (a 320px addirittura −51). I tre si
     dividono quindi lo spazio disponibile, con "Continua" un po' più largo
     perché è l'azione principale. */
  body.pm-app .pm-nav-bar > .pm-btn,
  body.pm-app .pm-nav-bar > .pm-mobile-preview-btn{
    flex:1 1 0 !important;
    min-width:0 !important;
    padding:0 10px !important;
  }
  body.pm-app .pm-nav-bar > #pm-btn-next{ flex:1.3 1 0 !important; }

  /* 3) Chip collezione: eleganti e leggibili (scroll orizzontale) */
  body.pm-app .pm-coll-btn{
    padding:11px 22px !important;
    font-size:14.5px !important;
    min-height:46px !important;
    box-shadow:0 1px 2px rgba(20,25,35,.05) !important;
  }
}

/* ============================================================
   MOBILE — Toast: non deve coprire la barra azioni (Indietro/
   Continua) in fondo. Lo sollevo sopra la nav bar e lo rendo un
   pill compatto. Si auto-nasconde comunque dopo pochi secondi.
   ============================================================ */
@media (max-width:768px){
  body.pm-app .pm-toast{
    bottom:calc(106px + env(safe-area-inset-bottom, 0px)) !important;
    max-width:calc(100vw - 40px) !important;
    width:auto !important;
    text-align:center !important;
    line-height:1.35 !important;
    box-shadow:0 6px 24px rgba(20,25,35,.28) !important;
  }

  /* Scheda DETTAGLIO tessuto (mobile): bottom-sheet, con la × sempre visibile
     in alto e il pulsante "Seleziona" sempre visibile in fondo.
     L'overlay NON deve avere un'altezza esplicita: `position:fixed; inset:0`
     coincide già con il viewport VISIBILE. Impostare 100vh/100dvh lo rendeva
     più alto del visibile e, con align-items:flex-end, spingeva il fondo della
     scheda (footer + pulsante) sotto il bordo dello schermo. */
  body.pm-app #pm-detail-modal.pm-modal-overlay{
    padding:0 !important;
    align-items:flex-end !important;
  }
  body.pm-app #pm-detail-modal .pm-modal{
    max-width:100% !important;
    width:100% !important;
    /* percentuale del contenitore (= viewport visibile): immune ai vh/dvh */
    max-height:88% !important;
    border-radius:20px 20px 0 0 !important;
    box-shadow:0 -8px 30px rgba(0,0,0,.28) !important;
    /* Il modale NON deve scorrere: scorre solo il corpo, così il footer con il
       pulsante resta sempre agganciato in basso. Serve !important perché altre
       regole (configurator-mobile.css / tema) impongono overflow-y:auto. */
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    /* niente fascia bianca vuota in alto (era padding-top:56px) */
    padding-top:0 !important;
    position:relative !important;
    /* neutralizza il `top:76px` del CSS personalizzato del sito (vedi
       configurator.css): spostava la scheda giù e nascondeva il pulsante */
    top:auto !important; bottom:auto !important;
    left:auto !important; right:auto !important;
    margin:0 !important;
  }
  /* corpo: l'unica parte scrollabile */
  body.pm-app #pm-detail-modal .pm-modal__body{
    flex:1 1 auto !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    min-height:0 !important;   /* indispensabile perché il flex-item possa scorrere */
  }
  /* footer: sempre visibile, mai scrollato via */
  body.pm-app #pm-detail-modal .pm-modal__footer{
    flex:0 0 auto !important;
    display:block !important;
    background:#fff !important;
    border-top:1px solid var(--pm-border,#e8e0d0) !important;
  }
  /* se non c'è nulla dentro (es. errore di caricamento) resta nascosto */
  body.pm-app #pm-detail-modal .pm-modal__footer:empty{ display:none !important; }
  /* × chiudi: più grande e ben visibile su mobile */
  body.pm-app #pm-detail-modal .pm-modal__close{
    top:10px !important; right:10px !important;
    width:40px !important; height:40px !important;
    font-size:22px !important;
  }
  body.pm-app #pm-detail-modal .pm-modal__body{ padding:16px 16px 8px !important; }
  /* immagine più bassa, così entra più contenuto */
  body.pm-app #pm-detail-modal .pm-modal-img--main{ height:120px !important; }
  body.pm-app #pm-detail-modal .pm-modal-img--pattern{ height:90px !important; }
  body.pm-app #pm-detail-modal .pm-modal-images{ flex-direction:row !important; }
  /* footer fisso col pulsante: rispetta la safe-area iOS */
  body.pm-app #pm-detail-modal .pm-modal__footer{
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)) !important;
  }
  body.pm-app #pm-detail-modal .pm-modal-select-btn{ min-height:50px !important; font-size:15px !important; }

  /* SOVRAPPOSIZIONE: il pulsante "torna su" del tema (#back-to-top, fixed in
     basso a destra, z-index 100) finiva SOPRA il tasto CONTINUA della barra
     azioni. Nelle pagine col configuratore lo sollevo sopra la barra. */
  body.pm-app:has(#pm-configurator) #back-to-top{
    bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:40 !important;
  }
  /* Nella scheda dettaglio a schermo non deve comparire affatto */
  body.pm-app:has(#pm-detail-modal[style*="flex"]) #back-to-top{ display:none !important; }
}


/* ============================================================
   BUGS 14 — Checkbox WooCommerce (registrazione + checkout).
   Il quadratino si sovrapponeva al testo ("DESIDERO…", "SPEDIRE…").
   Layout flex robusto: quadratino a sinistra, testo allineato.
   Vale su desktop e mobile (fuori dal media query).
   ============================================================ */
.woocommerce form .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-account .woocommerce-form__label-for-checkbox,
.woocommerce form .form-row label.checkbox,
.woocommerce-checkout .form-row label.checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  line-height: 1.4 !important;
  padding-left: 0 !important;
}
.woocommerce form .woocommerce-form__input-checkbox,
.woocommerce input[type="checkbox"].input-checkbox,
.woocommerce-checkout input[type="checkbox"],
.woocommerce-account input[type="checkbox"],
#createaccount,
#ship-to-different-address-checkbox {
  position: static !important;
  margin: 2px 0 0 0 !important;
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
}
/* "Spedire a un indirizzo diverso" e "Creare un account": non tagliare a sinistra */
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout .create-account label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-left: 0 !important;
}

@media (max-width:768px){
  body.pm-app .pm-fabric-coll-badge{
    top:8px !important; left:8px !important;
    font-size:9.5px !important; padding:3px 8px !important;
  }
}

/* ============================================================
   MOBILE — coerenza con le correzioni della barra passi:
   su mobile la barra è alta 46px (non 54), quindi la barra
   collezioni si aggancia più in alto e il respiro è minore.
   ============================================================ */
@media (max-width:768px){
  body.pm-app #pm-configurator #pm-steps-bar.pm-steps{
    margin-bottom:10px !important;
  }
  body.pm-app #pm-configurator #pm-filters-bar.pm-filters-bar{
    top:46px !important;
  }
}

/* ============================================================
   Sicurezza: un pulsante nascosto via JS (stile inline
   display:none) deve restare nascosto anche su mobile.
   Riguarda CONTINUA nel Riepilogo (non porta da nessuna parte:
   lì l'azione è "Aggiungi al carrello") e INDIETRO al passo 1.
   ============================================================ */
body.pm-app .pm-btn[style*="display: none"],
body.pm-app .pm-btn[style*="display:none"],
body.pm-app #pm-btn-next[style*="none"],
body.pm-app #pm-btn-prev[style*="none"]{
  display:none !important;
}

/* ============================================================
   V1.9.131 — ELENCO TESSUTI SU MOBILE: TUTTO IL TESTO IN CHIARO
   ------------------------------------------------------------
   Richiesta del cliente: da telefono il tessuto si deve poter
   leggere e scegliere DIRETTAMENTE dall'elenco, senza dover
   aprire per forza la scheda (popup). Ispirazione: apposta.it
   in versione mobile — una colonna sola, immagine grande,
   testo impaginato sotto e azione esplicita.

   Cosa cambia rispetto alle regole 2-colonne più in alto in
   questo stesso file (che qui vengono sovrascritte, essendo
   più avanti nella cascata):
     • griglia a UNA colonna
     • swatch alto (immagine del tessuto ben visibile)
     • nome, codice, specifiche e descrizione tutti leggibili
     • due pulsanti: "Scegli questo tessuto" (primario) e
       "Tutte le specifiche →" (apre comunque la scheda per chi
       vuole foto grandi e tabella completa)
   ============================================================ */
@media (max-width:768px){

  /* Una sola colonna: c'è spazio per il testo impaginato */
  body.pm-app .pm-fabrics-grid,
  body.pm-app #pm-fabrics-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  /* Immagine del tessuto grande e riconoscibile */
  body.pm-app .pm-fabric-card__swatch{
    height:196px !important;
    padding-top:0 !important;
  }
  body.pm-app .pm-fabric-card__swatch img{
    width:100% !important; height:100% !important;
    object-fit:cover !important;
  }

  /* Blocco testo: gerarchia nome › codice › specifiche › descrizione */
  body.pm-app .pm-fabric-card__info{
    padding:14px 15px 15px !important;
  }
  body.pm-app .pm-fabric-card__name{
    font-size:16px !important; font-weight:700 !important;
    line-height:1.25 !important; margin-bottom:4px !important;
  }
  body.pm-app .pm-fabric-card__code{
    font-size:11.5px !important; margin-bottom:6px !important;
  }

  /* Riga specifiche: composizione · grammatura · disegno · stagione */
  body.pm-app .pm-fabric-card__specs{
    display:block !important;
    font-size:12.5px !important;
    line-height:1.5 !important;
    color:#4a4740 !important;
    background:#f7f4ef !important;
    border-radius:10px !important;
    padding:8px 10px !important;
    margin:0 0 9px !important;
    white-space:normal !important;
  }

  /* Descrizione COMPLETA, niente troncamento */
  body.pm-app .pm-fabric-card__desc,
  body.pm-app .pm-fabric-card__meta{
    display:block !important;
    font-size:13px !important;
    line-height:1.55 !important;
    color:#5d5951 !important;
    margin:0 0 10px !important;
    overflow:visible !important;
    text-overflow:clip !important;
    -webkit-line-clamp:unset !important;
    max-height:none !important;
    white-space:normal !important;
  }

  body.pm-app .pm-fabric-card__price{
    font-size:16px !important; margin:2px 0 0 !important;
  }

  /* Tutti i tag "uso" visibili (in 2 colonne ne mostravamo uno solo) */
  body.pm-app .pm-fabric-card__tags .pm-fabric-tag:nth-child(n+2){
    display:inline-flex !important;
  }

  /* ── Azioni in chiaro: qui si sceglie il tessuto ── */
  body.pm-app .pm-fabric-card__actions{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    margin-top:12px !important;
  }
  body.pm-app .pm-fabric-card__choose{
    display:block !important;
    width:100% !important;
    border:none !important;
    border-radius:12px !important;
    background:var(--pm-charcoal,#1b2028) !important;
    color:#fff !important;
    font-size:15px !important;
    font-weight:650 !important;
    letter-spacing:.2px !important;
    padding:13px 14px !important;
    cursor:pointer !important;
    -webkit-appearance:none !important;
  }
  body.pm-app .pm-fabric-card__choose:active{ opacity:.85 !important; }
  body.pm-app .pm-fabric-card__choose[disabled]{ opacity:.6 !important; }
  body.pm-app .pm-fabric-card__more{
    display:block !important;
    width:100% !important;
    background:transparent !important;
    border:1px solid rgba(20,25,35,.16) !important;
    border-radius:12px !important;
    color:#3a3730 !important;
    font-size:13.5px !important;
    font-weight:600 !important;
    padding:11px 14px !important;
    cursor:pointer !important;
    -webkit-appearance:none !important;
  }

  /* La card selezionata si distingue anche nell'elenco lungo */
  body.pm-app .pm-fabric-card--selected{
    border-color:var(--pm-charcoal,#1b2028) !important;
    box-shadow:0 0 0 2px var(--pm-charcoal,#1b2028) !important;
  }
}

/* Specifiche complete aperte dentro la card (mobile) */
@media (max-width:768px){
  body.pm-app .pm-fabric-card__full{
    margin:12px 0 0 !important;
    padding:11px 12px !important;
    background:#faf8f5 !important;
    border:1px solid rgba(20,25,35,.08) !important;
    border-radius:12px !important;
  }
  body.pm-app .pm-fabric-card__full .pm-modal-desc{
    font-size:13px !important; line-height:1.55 !important;
  }
  body.pm-app .pm-fabric-card__full .pm-spec-item{
    padding:7px 0 !important;
  }
}

/* "Mostra altri tessuti" a tutta larghezza su telefono */
@media (max-width:768px){
  body.pm-app .pm-pagination{ padding:16px 0 24px !important; }
  body.pm-app .pm-load-more{
    width:100% !important;
    justify-content:center !important;
    padding:15px 20px !important;
    font-size:15px !important;
  }
}

/* ============================================================
   BUGS 17 — I pulsanti della card erano "quasi appiccicati" alla
   barra fissa ANTEPRIMA / CONTINUA. Qui vengono rimpiccioliti un
   filo e si aggiunge respiro sotto all'elenco, così fra l'ultimo
   pulsante della card e la barra c'è uno stacco chiaro.
   ============================================================ */
@media (max-width:768px){
  body.pm-app .pm-fabric-card__actions{ gap:7px !important; margin-top:11px !important; }
  body.pm-app .pm-fabric-card__choose{
    padding:11px 14px !important;
    font-size:14px !important;
    border-radius:11px !important;
  }
  body.pm-app .pm-fabric-card__more{
    padding:9px 14px !important;
    font-size:13px !important;
    border-radius:11px !important;
  }

  /* ── Stacco dalla barra fissa in fondo ──────────────────────────────
     Prima qui c'erano 34px fissi. Non bastavano: la barra
     ANTEPRIMA/CONTINUA è `position:fixed` ed è alta ~66px, di più sugli
     iPhone che aggiungono sotto la zona della barra di sistema. Risultato:
     il pulsante "Mostra altri tessuti" finiva SOTTO la barra e su alcuni
     telefoni non si riusciva a raggiungerlo, facendo credere che i tessuti
     fossero solo 12.
     --pm-navbar-h è l'altezza VERA della barra, misurata dal JS a ogni
     disegno e a ogni rotazione dello schermo (pmMisuraNavBar). Il 72px di
     scorta vale se per qualche motivo il JS non l'avesse ancora scritta. */
  body.pm-app #pm-step-1{
    padding-bottom: calc(var(--pm-navbar-h, 72px) + 34px) !important;
  }
  body.pm-app .pm-pagination{ padding-bottom:22px !important; }
}

/* Stessa protezione senza dipendere dalla classe .pm-app sul body: se un
   tema la filtrasse via, lo spazio sotto all'elenco resterebbe comunque. */
@media (max-width:768px){
  #pm-step-1{ padding-bottom: calc(var(--pm-navbar-h, 72px) + 34px); }
}


/* ============================================================================
   FOOTER SU TELEFONO — compatto e non tagliato
   ----------------------------------------------------------------------------
   Segnalazione: "da mobile il footer è poco visibile".
   Misurato dal vivo sul sito, a 374px di larghezza:
     · era alto 650px su uno schermo da 734 — quasi una schermata intera per
       6 link e un indirizzo;
     · gli ultimi 22px finivano SOTTO la barra fissa ANTEPRIMA/CONTINUA, quindi
       la riga del copyright era tagliata a metà;
     · nella griglia c'erano DUE colonne vuote (1px di contenuto) che si
       portavano dietro 25px di margine ciascuna.

   Perché NON è stato reso fisso in fondo, come chiesto in prima battuta: con
   650px di altezza avrebbe coperto quasi tutto lo schermo, e in fondo c'è già
   la barra ANTEPRIMA/CONTINUA (91px), con cui si sarebbe scontrato. Il
   problema vero non era la posizione ma l'ingombro: risolto quello, il footer
   si legge tutto senza rubare spazio a ogni pagina.

   Risultato misurato: 650px → 460px (−190), tutti e 6 i link ancora visibili,
   copyright 87px sopra la barra invece che tagliato.

   NB: le classi qui sotto (.footer-widgets, .widget-title, .bottom-footer,
   .footer-text) sono del TEMA, non nostre. Se un giorno si cambia tema queste
   regole semplicemente non si applicano più: non rompono nulla.
   ============================================================================ */
@media (max-width:768px){
  body.pm-app footer.footer .footer-widgets{
    padding-top:24px !important;
    padding-bottom:8px !important;
  }
  body.pm-app footer.footer .footer-widgets .row > *{ margin-bottom:14px !important; }
  /* Qui c'era una regola con :not(:has(.widget)) per nascondere le due colonne
     vuote. Tolta: è un selettore che il browser deve rivalutare a ogni
     modifica della pagina, e la pagina del configuratore cambia di continuo
     (i tessuti che si aggiungono). Non è dimostrato che fosse lei a
     impallare i telefoni Samsung, ma valeva 30px di footer: non abbastanza
     per tenersi un dubbio. Le due colonne vuote restano, e non si vedono. */
  body.pm-app footer.footer .widget-title{
    margin-bottom:8px !important;
    font-size:12px !important;
    letter-spacing:.8px !important;
  }
  body.pm-app footer.footer .widget{ margin-bottom:12px !important; }
  body.pm-app footer.footer .textwidget{
    line-height:1.5 !important;
    font-size:13.5px !important;
  }
  body.pm-app footer.footer .widget_nav_menu li{
    line-height:1.4 !important;
    font-size:13.5px !important;
    margin-bottom:4px !important;
    padding:2px 0 !important;
  }
  body.pm-app footer.footer .widget_nav_menu li a{ padding:0 !important; }

  body.pm-app footer.footer .bottom-footer .footer-text{
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
  body.pm-app footer.footer .bottom-footer .row > *:empty{ display:none !important; }
  body.pm-app footer.footer .bottom-footer .copyright{ font-size:12px !important; }
  /* Spazio pari all'altezza VERA della barra fissa, così l'ultima riga del
     footer non le finisce sotto. Sulle pagine senza barra --pm-navbar-h non
     esiste e vale 0: lì non si aggiunge niente. */
  body.pm-app footer.footer .bottom-footer{
    padding-bottom:calc(8px + var(--pm-navbar-h, 0px)) !important;
  }
}