/* ============================================================================
   PIACEMOLTO — AREA MISURE, STILE CONDIVISO
   ----------------------------------------------------------------------------
   UNICA FONTE DI VERITÀ per l'aspetto dei campi misura, usata sia dal
   CONFIGURATORE (step 4) sia dall'AREA PERSONALE (Le mie misure).

   Perché esiste questo file.
   Le due schermate erano disegnate da due fogli di stile diversi, tenuti
   allineati a mano: a ogni ritocco tornavano a somigliarsi "quasi", ed è la
   ragione per cui il cliente continuava a segnalare che non erano identiche.
   Qui le regole sono scritte UNA volta e valgono per entrambe le serie di
   classi: quelle del configuratore (.pm-*) e quelle dell'area personale
   (.pmw-*). Se un giorno si cambia il bordo di un campo, cambia in tutti e due
   i posti per costruzione, non per disciplina.

   I valori sono LETTERALI e non variabili CSS: i due plugin definiscono
   --pm-* e --pma-* in contesti diversi e un file condiviso non può dipendere
   dall'uno o dall'altro.

   Caricato da:
     · piacemolto-configurator  → sempre, dopo configurator.css
     · pm-account               → dopo account.css, preferendo la copia del
                                  configuratore (così ne esiste una sola)
   ============================================================================ */


/* ── Titolo e sottotitolo del blocco misure ───────────────────────────────── */
.pm-body-inputs__title,
.pmw-measures-title {
    font-size: 22px;
    font-weight: 400;
    color: #23201c;
    margin: 0 0 8px;
    letter-spacing: 0.2px;
    text-transform: none;
    border-bottom: none;
    padding: 0;
}
.pm-body-inputs__subtitle,
.pmw-measures-subtitle {
    font-size: 13px;
    color: #4a4a4a;
    margin: 0 0 24px;
}


/* ── Griglia: colonne che si riempiono da sole, non un numero fisso ───────── */
.pm-measures-grid,
.pmw-measures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    align-content: start;
}


/* ── Il singolo campo: etichetta SOPRA, input largo sotto ─────────────────── */
.pm-measure-field,
.pmw-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 0;
    margin: 0;
    border-bottom: none;
}

.pm-measure-label,
.pmw-field__label {
    font-size: 11px;
    font-weight: 600;
    color: #4a4a4a;
    /* in tondo, non in maiuscolo: era la differenza più visibile */
    text-transform: none;
    letter-spacing: normal;
    flex: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin: 0;
    padding: 0;
}

/* L'unità di misura è un suffisso chiaro DENTRO l'etichetta ("Collo cm"),
   non un'etichetta a parte né una scritta sovrapposta al campo. */
.pm-unit,
.pmw-field__unit {
    position: static;
    display: inline;
    transform: none;
    width: auto;
    font-size: 11px;
    font-weight: 400;
    color: #8a8a8a;
    text-align: start;
    pointer-events: auto;
}

.pmw-field__input-wrap {
    position: static;
    display: block;
    width: 100%;
    flex-shrink: 1;
}

.pm-input,
.pm-measure-input,
.pmw-field__input {
    /* block, non inline-block: altrimenti il campo dell'area personale eredita
       il default del browser e si comporta diversamente da quello del
       configuratore (spazio extra sotto e allineamento sulla linea di base). */
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #e2deda;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #23201c;
    background: #fff;
    text-align: start;
    outline: none;
    transition: border-color .15s;
}
.pm-input:focus,
.pm-measure-input:focus,
.pmw-field__input:focus { border-color: #1c5f8a; }

.pm-input--error,
.pmw-input--error {
    border-color: #e05353;
    background: #fff6f6;
}


/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .pm-measures-grid,
    .pmw-measures-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
    /* 16px evita lo zoom automatico di iOS al tocco sul campo.
       La larghezza resta piena: il campo NON torna stretto. */
    .pm-input,
    .pm-measure-input,
    .pmw-field__input {
        font-size: 16px;
        width: 100%;
    }
}


/* ============================================================================
   "PRENDI LE MISURE" — le tre card dei metodi
   ----------------------------------------------------------------------------
   Il configuratore è il MODELLO, l'area personale ne è la copia (richiesta del
   cliente). Prima l'area personale aveva un markup e un CSS tutti suoi
   (.pmw-method-card): titoli diversi, testi in maiuscolo e — per via di regole
   sovrapposte — la foto che compariva DUE VOLTE nella stessa card.
   Ora entrambe usano queste classi e queste regole. Sono le stesse che stavano
   in configurator.css: spostate qui, non duplicate, così restano uniche.
   ============================================================================ */

.pm-measure-method-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 32px;
    padding: 0 20px;
}

.pm-method-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2deda;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    text-align: left;
    transition: all .25s ease;
    overflow: hidden;
}
.pm-method-card:hover {
    border-color: #b0a695;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.pm-method-card--selected {
    border-color: #23201c;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
.pm-method-card--recommended { position: relative; border-color: #c9a15a; }

/* UNA sola immagine per card, a riempire il riquadro 4:3. */
.pm-method-card__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f2f0ed;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.pm-method-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.pm-method-card:hover .pm-method-card__media img { transform: scale(1.04); }

.pm-method-card__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.pm-method-card__title {
    font-size: 20px;
    font-weight: 500;
    color: #23201c;
    margin: 0 0 14px;
    letter-spacing: .3px;
    /* in tondo: nell'area personale il titolo veniva reso in maiuscolo */
    text-transform: none;
    border-bottom: none;
    padding: 0;
}
.pm-method-card__list {
    list-style: disc;
    padding-left: 18px;
    margin: 0 0 18px;
    flex: 1;
}
.pm-method-card__list li {
    font-size: 13px;
    line-height: 1.55;
    color: #4a4a4a;
    margin-bottom: 8px;
    /* i testi restano in tondo, non in maiuscoletto */
    text-transform: none;
    letter-spacing: normal;
}
.pm-method-card__list li:last-child { margin-bottom: 0; }

.pm-method-card__cta {
    align-self: flex-start;
    background: #23201c;
    color: #fff;
    border: none;
    padding: 11px 28px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    transition: background .2s ease;
    margin-top: auto;
    font-family: inherit;
}
.pm-method-card__cta:hover { background: #1c5f8a; }

@media (max-width: 860px) {
    .pm-measure-method-cards { grid-template-columns: 1fr; gap: 16px; padding: 0 14px; }
    /* foto più bassa su schermo stretto, come nel configuratore */
    .pm-method-card__media { aspect-ratio: 16 / 9; }
}


/* ============================================================================
   SCHEDE "COME PRENDERE LA MISURA"
   ----------------------------------------------------------------------------
   Anche qui il configuratore è il modello. Nell'area personale la guida era
   fatta di piccole <figure> chiuse dentro un "vedi le istruzioni": tutt'altra
   cosa. Ora entrambe usano queste sezioni: titolo grande, foto a sinistra,
   testo a destra.
   ============================================================================ */
.pm-body-measure {
    max-width: 1000px;
    margin: 0 auto;
    padding: 36px 20px 40px;
    border-bottom: 1px solid #e2deda;
}
.pm-body-measure:last-of-type { border-bottom: none; }
.pm-body-measure__title {
    font-size: 22px;
    font-weight: 400;
    color: #23201c;
    margin: 0 0 24px;
    letter-spacing: 0.2px;
    line-height: 1.3;
    text-transform: none;
    border-bottom: none;
    padding: 0;
}
.pm-body-measure__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}
.pm-body-measure__media { width: 100%; }
.pm-body-measure__img-wrap {
    width: 100%;
    background: #f2f0ed;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}
.pm-body-measure__img-wrap .pm-body-measure__poster {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    filter: none;
}
.pm-body-measure__text { padding-top: 4px; }
.pm-body-measure__desc {
    font-size: 15px;
    line-height: 1.7;
    color: #4a4a4a;
    margin: 0;
    text-transform: none;
}
.pm-body-measure__note {
    margin: 18px 0 0;
    padding: 12px 14px;
    background: #f2f0ed;
    border-left: 3px solid #1c5f8a;
    border-radius: 2px;
    font-size: 13px;
    line-height: 1.6;
    color: #4a4a4a;
}
.pm-body-measure__note em { font-style: italic; }

@media (max-width: 860px) {
    .pm-body-measure { padding: 26px 14px 30px; }
    .pm-body-measure__inner { grid-template-columns: 1fr; gap: 18px; }
    .pm-body-measure__title { font-size: 19px; margin-bottom: 16px; }
}

/* Il contenitore della guida nell'area personale era un riquadro con sfondo,
   bordo e padding che nel configuratore non c'è: qui torna neutro, così le
   schede si vedono esattamente come nell'ordine. */
.pmw-guide {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}


/* ============================================================================
   "← Cambia metodo" — pulsante per tornare alla scelta del metodo
   ----------------------------------------------------------------------------
   NB: le pastiglie della taglia 37-50 NON stanno qui. Nell'area personale le
   inietta PM_A_Measure_Guide (plugin configuratore) con classi proprie
   (.pm-mg-size-chip), e nel configuratore usano .pm-chip di configurator.css.
   Ridefinirle qui creava un SECONDO selettore di taglia sotto al primo.
   ============================================================================ */
/* "← Cambia metodo" */
.pm-method-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #e2deda;
    color: #23201c;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    padding: 9px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 18px;
}
.pm-method-back:hover { border-color: #23201c; }