/* =========================================================================
   PIACEMOLTO CONFIGURATORE — STILI MOBILE
   Caricato DOPO configurator.css. Tutte le regole sono dentro
   @media (max-width:768px): il layout desktop non viene MAI toccato.
   ========================================================================= */

/* ---- Pulsante anteprima e overlay: nascosti su desktop ------------------ */
.pm-mobile-preview-btn,
.pm-mobile-preview-overlay {
  display: none;
}

/* Niente pull-to-refresh: innocuo su desktop (non ha overscroll verticale) */
html, body {
  overscroll-behavior-y: contain;
}

@media (max-width: 768px) {

  /* ===== BASE ============================================================ */
  .pm-configurator {
    padding: 0 !important;
  }
  .pm-configurator__body {
    display: block !important;     /* da griglia a blocco singolo */
    padding: 0 !important;
  }
  .pm-content,
  .pm-content--full {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 14px 96px !important;  /* spazio in fondo per la nav fissa */
    box-sizing: border-box;
  }

  /* ===== STEPPER COMPATTO ================================================ */
  /* Una riga sola: pallini numerati, niente etichette lunghe né frecce */
  .pm-steps {
    position: relative;
    z-index: 5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px !important;
    padding: 20px 12px 46px !important;  /* alto sopra e sotto: niente taglio */
    margin: 0 !important;
    background: #fff;
    border-bottom: 1px solid var(--pm-border, #e3ddd2);
    overflow: visible;
    min-height: 96px;
    box-sizing: border-box;
  }
  .pm-step {
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    position: static !important;
  }
  .pm-step__arrow {
    display: none !important;       /* via le frecce › */
  }
  .pm-step__label {
    display: none !important;
  }
  .pm-step__num {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
    font-weight: 600;
    background: var(--pm-cream, #f2f0ed) !important;
    color: var(--pm-charcoal, #1c1c1c) !important;
    border: 1.5px solid var(--pm-border, #e3ddd2) !important;
    transition: all .2s ease;
  }
  .pm-step--active .pm-step__num {
    background: var(--pm-accent, #1c5f8a) !important;
    color: #fff !important;
    border-color: var(--pm-accent, #1c5f8a) !important;
    transform: scale(1.1);
  }
  .pm-step--done .pm-step__num,
  .pm-step--completed .pm-step__num {
    background: var(--pm-accent-light, #4a8fb5) !important;
    color: #fff !important;
    border-color: var(--pm-accent-light, #4a8fb5) !important;
  }
  /* Etichetta dello step attivo: centrata sotto i pallini, senza linee */
  .pm-step--active .pm-step__label {
    display: block !important;
    position: absolute;
    left: 0; right: 0;
    bottom: 12px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--pm-accent, #1c5f8a);
    font-weight: 700;
  }

  /* ===== ANTEPRIMA — nascosta, si apre da pulsante ======================= */
  .pm-preview-panel {
    display: none;                  /* nascosta nel flusso normale */
  }
  /* Il contenuto clonato dentro l'overlay torna visibile */
  .pm-mobile-preview-slot .pm-preview-panel,
  .pm-mobile-preview-slot > .pm-preview-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }
  .pm-mobile-preview-slot .pm-shirt-hero,
  .pm-mobile-preview-slot .pm-shirt-preview {
    display: block !important;
  }
  /* Titolo interno "La tua camicia" del pannello: ridondante nell'overlay
     (c'è già l'intestazione del pannello mobile sopra) */
  .pm-mobile-preview-slot .pm-preview-title {
    display: none !important;
  }

  /* Pulsante "Anteprima" nella barra di navigazione */
  .pm-mobile-preview-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    background: var(--pm-cream, #f2f0ed);
    color: var(--pm-charcoal, #1c1c1c);
    border: 1.5px solid var(--pm-border, #e3ddd2);
    border-radius: 22px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  /* Su mobile il testo "Passo X di 5" lascia spazio al pulsante */
  .pm-nav-center {
    display: none !important;
  }

  /* Overlay a tendina dal basso */
  .pm-mobile-preview-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000001;
    background: rgba(28,28,28,0);
    visibility: hidden;
    transition: background .25s ease, visibility .25s;
  }
  .pm-mobile-preview-overlay--open {
    background: rgba(28,28,28,.5);
    visibility: visible;
  }
  .pm-mobile-preview-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 22px 16px 28px;
    height: 86vh;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .pm-mobile-preview-overlay--open .pm-mobile-preview-sheet {
    transform: translateY(0);
  }
  /* L'area contenuto scorre; il prezzo in fondo è raggiungibile */
  .pm-mobile-preview-slot {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
  }
  .pm-mobile-preview-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 16px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--pm-charcoal, #1c1c1c);
  }
  /* Maniglia "tendina" in cima al pannello */
  .pm-mobile-preview-sheet::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 3px;
    background: var(--pm-border, #e3ddd2);
    margin: 0 auto 4px;
    flex: 0 0 auto;
  }
  .pm-mobile-preview-close {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--pm-charcoal, #1c1c1c);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* ===== CARD OPZIONI — più grandi e leggibili =========================== */
  /* Griglia opzioni con immagine: 2 colonne ampie */
  .pm-options--image-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .pm-options--image-cards > * {
    width: auto !important;
    margin: 0 !important;
    min-height: 44px;
  }
  /* Bottoni colore: 3 per riga, restano compatti */
  .pm-options--buttons {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Immagine (collo, polsino, ecc.) mostrata PER INTERO, non ritagliata.
     Prima veniva forzata quadrata + object-fit:cover, quindi il collo restava
     tagliato. Il contenitore .pm-img-card__photo ha già il rapporto corretto
     per ogni tipo: basta object-fit:contain come sul desktop. */
  .pm-options--image-cards .pm-img-card__photo img {
    object-fit: contain !important;
    aspect-ratio: auto !important;
  }
  /* Testo card opzione leggibile */
  .pm-option-card__label,
  .pm-options--image-cards .pm-option-name {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* Chip (cuciture, taglie, stecche): area tocco generosa */
  .pm-options--chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .pm-chip {
    padding: 11px 18px !important;
    font-size: 14px !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
  }
  .pm-options--chips-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }

  /* Swatch asole/colori: cerchi più grandi, facili da toccare */
  .pm-options--swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .pm-options--swatches > * {
    min-width: 44px;
    min-height: 44px;
  }

  /* Card vestibilità: una per riga, a tutta larghezza */
  .pm-options--fit-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .pm-options--fit-cards > * {
    width: 100% !important;
  }

  /* Card metodi misura (step 4): IMPILATE, una sotto l'altra, a tutta larghezza */
  .pm-measure-method-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .pm-method-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .pm-method-card__media {
    width: 100% !important;
  }
  .pm-method-card__media img {
    width: 100% !important;
    height: 170px !important;
    object-fit: cover;
  }
  .pm-method-card__body {
    padding: 16px !important;
  }
  /* Titolo: niente più testo spezzato lettera per lettera */
  .pm-method-card__title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    margin: 0 0 10px !important;
  }
  /* Elenco istruzioni: compatto e leggibile */
  .pm-method-card__list {
    margin: 0 0 14px !important;
    padding-left: 18px !important;
  }
  .pm-method-card__list li {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .pm-method-card__cta {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 14px !important;
  }
  /* Hero intro misure: testo ridotto su mobile */
  .pm-measure-hero__title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  .pm-measure-hero__subtitle {
    font-size: 16px !important;
  }
  .pm-measure-hero__intro {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  /* ===== STEP CONTENT ==================================================== */
  .pm-step-inner {
    display: block !important;
    padding: 0 !important;
  }
  .pm-step-intro__title {
    font-size: 19px !important;
    line-height: 1.3 !important;
  }
  .pm-step-intro__desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  /* Titoli di sezione dentro gli step */
  .pm-section-title,
  .pm-field-label {
    font-size: 13px !important;
    margin-top: 18px !important;
  }

  /* ===== STEP 1 TESSUTI ================================================== */
  /* Griglia tessuti: 2 colonne */
  .pm-fabric-grid,
  .pm-fabrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Bottoni "Seleziona"/"Dettagli" della card tessuto.
     Su mobile non c'è hover: l'overlay resta sempre visibile, ancorato
     in basso sull'immagine, bottoni affiancati con testo intero. */
  .pm-fabric-card__overlay {
    opacity: 1 !important;
    position: absolute !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    top: auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 5px !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .pm-select-btn,
  .pm-detail-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 8px 4px !important;
    min-height: 34px !important;
    box-sizing: border-box;
  }
  .pm-fabric-star {
    z-index: 3;
  }

  /* Barra filtri/collezioni scorrevole orizzontale */
  .pm-filters-bar__inner {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }
  /* Collezioni (Essenzial / Maestria / Sartoria) tutte su UNA riga, a larghezza
     uguale, invece di andare a capo su due righe. */
  .pm-filters-bar__selects {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100%;
    overflow: visible !important;
    white-space: normal !important;
  }
  .pm-filters-bar__selects .pm-coll-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 9px 4px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-align: center;
    white-space: nowrap;
  }
  /* "× Tutti i tessuti" (compare quando una collezione è attiva) va a capo
     sotto, a tutta larghezza, senza stringere le tre collezioni. */
  .pm-filters-bar__selects .pm-coll-btn-clear {
    flex: 1 0 100% !important;
    margin-top: 2px;
  }
  .pm-filters-bar__right {
    width: 100%;
  }
  .pm-search-bar {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ===== NAV BAR FISSA IN BASSO ========================================== */
  .pm-nav-bar {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 150;
    display: flex !important;
    align-items: center;
    gap: 8px;
    /* Sugli iPhone senza tasto fisico c'è la barra di sistema in fondo, che si
       sovrapporrebbe ai pulsanti: env(safe-area-inset-bottom) è lo spazio da
       lasciarle. Vale 0 su tutti gli altri telefoni, quindi non cambia nulla
       altrove. La barra così diventa più alta, e lo spazio sotto all'elenco
       si adegua da solo perché il JS misura l'altezza vera (--pm-navbar-h). */
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff;
    border-top: 1px solid var(--pm-border, #e3ddd2);
    box-shadow: 0 -4px 18px rgba(0,0,0,.07);
    margin: 0 !important;
  }
  .pm-nav-bar .pm-btn {
    flex: 1 1 0;
    min-height: 48px !important;
    font-size: 14px !important;
    padding: 12px 10px !important;
    white-space: nowrap;
  }
  .pm-nav-bar .pm-btn--outline#pm-btn-prev {
    flex: 0 0 auto;
    min-width: 92px;
  }

  /* ===== RIEPILOGO (step 5) ============================================= */
  .pm-summary-grid,
  #pm-summary-sections {
    grid-template-columns: 1fr !important;
  }

  /* ===== MODALI (dettagli tessuto / zoom modello) ======================= */
  /* Pulsante chiudi ben visibile, fisso in alto a destra */
  .pm-modal__close,
  .pm-zoom-modal__close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    /* Dischetto BIANCO con la × scura, non più nero pieno: il nero si
       confondeva con le foto scure e con i pallini colorati delle misure
       tecniche. Bianco + bordo + ombra si legge su qualunque fondo. */
    background: #fff !important;
    color: #1c1c1c !important;
    border: 1px solid var(--pm-border, #e8e0d0) !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 20 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    cursor: pointer;
  }
  /* Il modale ZOOM occupa quasi tutto lo schermo e scorre.
     NOTA: la scheda DETTAGLIO TESSUTO (.pm-modal) è esclusa di proposito.
     Prima era inclusa qui e `overflow-y:auto !important` faceva scorrere via
     il footer, per cui il pulsante "Seleziona e continua" non si vedeva mai;
     `padding-top:56px` creava inoltre la fascia bianca vuota in alto.
     Il suo layout (corpo scrollabile + footer fisso) è in mobile-app.css. */
  .pm-zoom-modal {
    width: 94vw !important;
    max-width: 94vw !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative !important;
    padding-top: 56px !important;   /* spazio per il pulsante chiudi */
  }
  /* La griglia interna del modale zoom: in colonna su mobile */
  .pm-zoom-modal__grid {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* ===== VARIE: evita overflow orizzontale ============================== */
  #pm-configurator img { max-width: 100%; }
  .pm-configurator * { box-sizing: border-box; }

  /* Niente "pull-to-refresh" né rimbalzo che ricarica la pagina
     quando l'utente scrolla fino in fondo */
  html, body {
    overscroll-behavior-y: contain;
  }
  .pm-configurator {
    overscroll-behavior: contain;
  }

  /* Il toast di conferma non deve coprire la barra di navigazione fissa:
     lo posiziono ben sopra di essa */
  .pm-toast {
    bottom: 86px !important;
    z-index: 1000010 !important;
    max-width: 88vw !important;
    font-size: 13px !important;
  }
}

/* ---- Telefoni molto stretti -------------------------------------------- */
@media (max-width: 380px) {
  .pm-options--image-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }
  .pm-options--chips-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .pm-step__num {
    width: 27px !important;
    height: 27px !important;
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   REVISIONE MOBILE — affordance touch + popup scrollabili
   Su touch non esiste :hover, quindi tutti i comandi rivelati solo in hover
   (pulsante zoom, matita "modifica" nel riepilogo) sarebbero invisibili.
   Li rendo visibili su schermi ≤768px. Inoltre rendo scrollabili i popup
   che potrebbero superare l'altezza dello schermo.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Pulsante "Ingrandisci" su card colletto/polsino: mostralo sempre su touch,
     ma in un ANGOLO (alto a sinistra) e compatto, così non finisce sopra al
     collo come quando era centrato in basso. Il check ✓ è in alto a destra. */
  .pm-img-card--zoomable .pm-zoom-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    top: 6px !important;
    left: 6px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    padding: 3px 8px 3px 6px !important;
    font-size: 10px !important;
  }

  /* Link "Modifica" sulle voci del riepilogo (step 5): sempre visibile su touch */
  .pm-riepilogo-char::after {
    opacity: 1 !important;
  }

  /* Popup collezione (step 1): non deve superare lo schermo; se il contenuto
     è più alto, si scrolla e il CTA resta raggiungibile. Padding ridotto. */
  .pm-coll-popup-box {
    max-height: 88dvh !important;
    max-height: 88vh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 26px 20px !important;
  }

  /* Tabella misure ingrandita: su mobile il pinch-zoom è spesso bloccato dal
     tema, quindi invece di adattare la tabella allo schermo (illeggibile) la
     mostro GRANDE e SCORREVOLE — l'utente scorre in orizzontale/verticale per
     leggere tutte le colonne. */
  .pm-table-lightbox.open {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 56px 12px 28px !important;
  }
  .pm-table-lightbox img {
    max-width: none !important;
    max-height: none !important;
    width: 185vw !important;   /* più largo dello schermo → si scorre e si legge */
    height: auto !important;
  }
  /* Il tasto chiudi resta fisso mentre si scorre la tabella */
  .pm-table-lightbox__close {
    position: fixed !important;
    top: 10px;
    right: 14px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    border-radius: 50%;
    z-index: 2;
  }
}


/* ============================================================================
   IL GESTO DEVE ARRIVARE ALLA PAGINA — non morire dentro al configuratore
   ----------------------------------------------------------------------------
   Sintomo segnalato: sul telefono la pagina non scorreva se si trascinava il
   dito sui tessuti, mentre scorreva trascinando sulla barra ANTEPRIMA/CONTINUA.

   Causa, misurata sul sito vero:
     #pm-configurator  overflow-y: auto  +  overscroll-behavior: contain
                       e NIENTE da scorrere (scrollHeight == clientHeight).
   È un contenitore scorrevole senza corsa: il dito prova a scorrerlo, non
   trova spazio, e `contain` vieta di passare il gesto al genitore. Risultato:
   non succede niente. La barra invece è `position:fixed`, quindi il suo gesto
   scavalca il configuratore e arriva alla pagina — ed è per questo che da lì
   sembrava funzionare.

   Perché è saltato fuori ora: finché l'elenco tessuti stava nel riquadro
   interno (#pm-content) qualcosa da scorrere c'era. Tolto quel riquadro,
   #pm-configurator è rimasto uno scorrevole vuoto.

   Su telefono il contenitore che scorre deve essere UNO SOLO: la pagina.
   `overscroll-behavior-y: contain` resta su html/body — lì serve, ed è quello
   che evita il "tira per ricaricare".
   ============================================================================ */
@media (max-width: 860px) {
  #pm-configurator,
  .pm-configurator {
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }
  #pm-body,
  .pm-configurator__body {
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }
}