/* =====================================================================================================
   Le misure sul telefono (13/11/2026). Angelo: «quando si apre la tastiera per scrivere toglie troppa visuale…
   soprattutto le misure, che sono la parte più importante dell'ecommerce».
   Scheda a tutto schermo con il suo tastierino (js/zp-misure.js) e pulsanti − / + della quantità.
   Vale fino a 760 px, come css/zp-mobile.css (che viene dopo e dà i colori --zpm-*): sopra, niente di tutto questo.
   ===================================================================================================== */

html body .zpm-mis, html body .zpm-qta-btn { display: none !important; }
html body .zpm-qta { display: contents; }

@media (max-width: 760px) {

  /* ---------- I due campi della pagina: sul telefono sono il pulsante che apre la scheda ---------- */
  html body.zp-catalog-page #fullConfig #config-measurements input[readonly] { cursor: pointer; caret-color: transparent; }

  /* ---------- La scheda ---------- */
  html body .zpm-mis {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5200;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: radial-gradient(120% 55% at 50% 0%, #1d1c16 0%, var(--zpm-ink) 62%);
    color: var(--zpm-ivory);
    font-family: var(--zpm-sans);
    outline: 0;
    overscroll-behavior: contain;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  html body .zpm-mis[hidden] { display: none !important; }
  .zpm-mis svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  .zpm-mis-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 9px 18px;
    border-bottom: 1px solid var(--zpm-line-soft);
  }
  .zpm-mis-testa > div { min-width: 0; }
  .zpm-mis-modello {
    overflow: hidden;
    margin: 0;
    color: var(--zpm-gold);
    font: 600 12px/1.3 var(--zpm-sans);
    letter-spacing: .14em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .zpm-mis-testa h2 { margin: 2px 0 0; color: var(--zpm-ivory); font: 500 25px/1.1 var(--zpm-display); letter-spacing: 0; }
  html body .zpm-mis .zpm-mis-chiudi {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--zpm-line);
    border-radius: 50%;
    background: transparent;
    color: var(--zpm-ivory);
  }

  .zpm-mis-corpo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 10px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Disegno: la zanzariera con le proporzioni scritte e le due quote. Prende lo spazio che resta. */
  .zpm-mis-disegno {
    display: grid;
    flex: 1 1 96px;
    place-items: center;
    min-height: 0;
    padding: 4px 75px 42px;
    overflow: hidden;
  }
  .zpm-mis-disegno[hidden] { display: none; }
  .zpm-mis-vano {
    position: relative;
    box-sizing: border-box;
    width: 96px;
    height: 132px;
    border: 3px solid var(--zpm-gold);
    border-radius: 3px;
    background-color: rgba(243, 238, 228, .05);
    background-image: linear-gradient(rgba(243, 238, 228, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 238, 228, .12) 1px, transparent 1px);
    background-size: 7px 7px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .45);
    transition: width .26s var(--zpm-ease), height .26s var(--zpm-ease);
  }
  .zpm-mis-quota { position: absolute; color: var(--zpm-muted); transition: color .2s; }
  .zpm-mis-quota b { position: absolute; font: 600 14px/1 var(--zpm-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .zpm-mis-quota-l { top: calc(100% + 10px); right: -3px; left: -3px; height: 11px; border-right: 1.5px solid; border-left: 1.5px solid; }
  .zpm-mis-quota-l::before { content: ""; position: absolute; top: 5px; right: 0; left: 0; border-top: 1.5px solid; }
  .zpm-mis-quota-l b { top: 17px; left: 50%; transform: translateX(-50%); }
  .zpm-mis-quota-h { top: -3px; bottom: -3px; left: calc(100% + 10px); width: 11px; border-top: 1.5px solid; border-bottom: 1.5px solid; }
  .zpm-mis-quota-h::before { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; border-left: 1.5px solid; }
  .zpm-mis-quota-h b { top: 50%; left: 18px; transform: translateY(-50%); }
  .zpm-mis-vano[data-attivo="L"] .zpm-mis-quota-l, .zpm-mis-vano[data-attivo="H"] .zpm-mis-quota-h { color: var(--zpm-gold-hi); }

  /* Le due misure: quella che si sta scrivendo è chiara, con il cursore. */
  .zpm-mis-campi { display: grid; flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  html body .zpm-mis .zpm-mis-campo {
    display: grid;
    gap: 1px;
    min-width: 0;
    padding: 9px 12px 8px;
    border: 2px solid rgba(216, 189, 131, .3);
    border-radius: 10px;
    background: #15150f;
    color: var(--zpm-ivory);
    font-family: var(--zpm-sans);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
  }
  .zpm-mis-nome { color: var(--zpm-muted); font: 700 12px/1.35 var(--zpm-sans); letter-spacing: .1em; text-transform: uppercase; }
  /* css/zp-home-theme.css colora di scuro ogni <span> e <p> del sito: qui il colore è quello della casella. */
  html body .zpm-mis .zpm-mis-valore { display: flex; align-items: baseline; gap: 6px; min-height: 38px; color: inherit; white-space: nowrap; }
  html body .zpm-mis .zpm-mis-valore b { color: inherit; font: 650 32px/1.18 var(--zpm-sans); font-variant-numeric: tabular-nums; }
  html body .zpm-mis .zpm-mis-valore i { color: inherit; font: 500 14px/1 var(--zpm-sans); font-style: normal; opacity: .72; }
  .zpm-mis-vuoto .zpm-mis-valore i { display: none; }
  .zpm-mis-vuoto .zpm-mis-valore::after { content: "tocca e scrivi"; color: var(--zpm-muted); font: 400 16px/1 var(--zpm-sans); }
  .zpm-mis-cm { color: var(--zpm-soft); font: 500 14px/1.35 var(--zpm-sans); font-variant-numeric: tabular-nums; }
  .zpm-mis-limiti { color: var(--zpm-muted); font: 500 13px/1.35 var(--zpm-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }

  html body .zpm-mis .zpm-mis-campo.zpm-mis-attivo {
    border-color: var(--zpm-gold-hi);
    background: linear-gradient(130deg, #fbf5e6, #e3d0a0);
    box-shadow: 0 0 0 3px rgba(240, 215, 158, .2);
    color: #1f231a;
  }
  .zpm-mis-attivo .zpm-mis-nome { color: #5b4c27; }
  .zpm-mis-attivo .zpm-mis-cm { color: #3d4033; }
  .zpm-mis-attivo .zpm-mis-limiti { color: #55574a; }
  .zpm-mis-attivo .zpm-mis-valore b::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 28px;
    margin-left: 2px;
    background: currentColor;
    vertical-align: -4px;
    animation: zpm-mis-cursore 1.05s steps(1) infinite;
  }
  .zpm-mis-attivo.zpm-mis-vuoto .zpm-mis-valore::after { content: "es. 1200"; color: #6d6f60; }
  .zpm-mis-attivo.zpm-mis-vuoto[data-campo="H"] .zpm-mis-valore::after { content: "es. 2300"; }

  html body .zpm-mis .zpm-mis-campo.zpm-mis-fuori { border-color: #f0705f; }
  .zpm-mis-fuori .zpm-mis-limiti { color: #ffab9f; font-weight: 700; }
  .zpm-mis-attivo.zpm-mis-fuori .zpm-mis-limiti { color: #a3271b; }
  .zpm-mis-pieno { animation: zpm-mis-scossa .26s; }

  /* Esito: cosa fare adesso, l'errore in parole, oppure il totale. */
  .zpm-mis-esito { display: grid; flex: none; align-content: center; gap: 3px; min-height: 46px; padding: 0 2px; }
  .zpm-mis-esito p { margin: 0; color: var(--zpm-soft); font: 500 15px/1.42 var(--zpm-sans); }
  .zpm-mis-esito[data-stato="errore"] p { color: #ffb9ae; }
  .zpm-mis-esito .zpm-mis-totale { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .zpm-mis-totale span { color: var(--zpm-muted); font: 600 12px/1.3 var(--zpm-sans); letter-spacing: .1em; text-transform: uppercase; }
  .zpm-mis-totale strong { color: var(--zpm-gold-hi); font: 500 28px/1.1 var(--zpm-display); white-space: nowrap; }
  .zpm-mis-totale strong del { color: var(--zpm-muted); font-size: 17px; }
  .zpm-mis-esito .zpm-mis-nota { color: var(--zpm-muted); font-size: 13px; }

  /* Consigli della pagina: i millimetri giusti, la versione o i modelli che reggono la misura. */
  .zpm-mis-aiuti { flex: none; padding: 11px 12px 12px; border: 1px solid var(--zpm-line); border-radius: 10px; background: rgba(243, 238, 228, .05); }
  .zpm-mis-aiuti[hidden] { display: none; }
  .zpm-mis-aiuti p { margin: 0 0 4px; color: var(--zpm-soft); font: 400 14px/1.46 var(--zpm-sans); }
  .zpm-mis-aiuti p strong { color: var(--zpm-ivory); font-weight: 650; }
  html body .zpm-mis .zz-alt-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    min-height: 48px;
    margin: 8px 0 0;
    padding: 10px 13px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(120deg, #f0dda9, #c7a765);
    color: #14130f;
    font: 700 15px/1.3 var(--zpm-sans);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    justify-content: center;
  }
  html body .zpm-mis .zz-alt-btn strong { color: #14130f; font-weight: 700; }
  html body .zpm-mis .zz-alt-btn small { color: #3a3523; font: 400 13px/1.4 var(--zpm-sans); }
  .zpm-mis-aiuti:empty { display: none; }

  .zpm-mis-video { flex: none; align-self: flex-start; padding: 6px 2px; color: var(--zpm-gold); font: 600 14px/1.3 var(--zpm-sans); text-decoration: underline; text-underline-offset: 3px; }

  /* Tastierino: tasti grandi, sempre nello stesso posto. */
  .zpm-mis-tasti {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 9px 9px calc(9px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--zpm-line-soft);
    background: #0b0b09;
    touch-action: none;
  }
  html body .zpm-mis .zpm-mis-tasto {
    display: grid;
    place-items: center;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: #24231c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 0 #000;
    color: var(--zpm-ivory);
    font: 500 26px/1 var(--zpm-sans);
    letter-spacing: 0;
    text-transform: none;
  }
  html body .zpm-mis .zpm-mis-tasto:active { background: #3d3b2f; transform: scale(.97); }
  html body .zpm-mis .zpm-mis-canc { background: #171610; }
  .zpm-mis .zpm-mis-canc svg { width: 28px; height: 28px; }
  html body .zpm-mis .zpm-mis-avanti {
    background: linear-gradient(120deg, #f0dda9, #c7a765);
    color: #14130f;
    font: 700 16px/1 var(--zpm-sans);
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  html body .zpm-mis .zpm-mis-avanti:active { background: linear-gradient(120deg, #e2cf9a, #b89858); }

  /* Il messaggio della pagina («Inserisci larghezza e altezza…») coprirebbe i tasti o il titolo: con la scheda aperta
     che cosa fare lo dice già la riga sotto le misure. (Più forte della regola di zp-mobile.css sulla barra del prezzo.) */
  html.zpm-mis-aperta body.zpm-config-open #zz-toast.zz-toast { display: none !important; }

  /* ---------- Quantità: − e + ---------- */
  html body.zp-catalog-page .zpm-qta-riga { grid-template-columns: 156px minmax(0, 1fr) !important; }
  html body .zpm-qta { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 6px; align-items: stretch; }
  html body .zpm-qta .zpm-qta-btn {
    display: grid !important;
    place-items: center;
    min-height: 48px;
    padding: 0;
    border: 1px solid var(--zpm-line);
    border-radius: 8px;
    background: #181814;
    color: var(--zpm-ivory);
    font: 500 24px/1 var(--zpm-sans);
  }
  html body .zpm-qta .zpm-qta-btn:disabled { opacity: .35; }
  html body .zpm-qta .zpm-qta-btn:active:not(:disabled) { background: #2b2a22; }
  html body.zp-catalog-page .zpm-qta #inpQty { padding-right: 4px !important; padding-left: 4px !important; text-align: center; -moz-appearance: textfield; appearance: textfield; }
  html body .zpm-qta #inpQty::-webkit-inner-spin-button, html body .zpm-qta #inpQty::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
}

/* Telefoni stretti: le due caselle restano su una riga per voce. */
@media (max-width: 350px) {
  html body .zpm-mis .zpm-mis-campo { padding-right: 9px; padding-left: 9px; }
  html body .zpm-mis .zpm-mis-valore b { font-size: 28px; }
  .zpm-mis-limiti { font-size: 12px; }
  .zpm-mis-totale span { letter-spacing: .04em; }
}

/* Schermi bassi (telefoni piccoli, barre del browser aperte): prima si accorciano i tasti, poi sparisce il disegno. */
@media (max-width: 760px) and (max-height: 700px) {
  html body .zpm-mis .zpm-mis-tasto { height: 50px; }
  .zpm-mis-testa h2 { font-size: 22px; }
  .zpm-mis-corpo { gap: 8px; padding-top: 8px; }
}
@media (max-width: 760px) and (max-height: 590px) {
  .zpm-mis-disegno { display: none; }
  html body .zpm-mis .zpm-mis-tasto { height: 46px; }
  .zpm-mis-testa { padding-bottom: 6px; }
}
@media (max-width: 760px) and (max-height: 480px) {
  html body .zpm-mis .zpm-mis-tasto { height: 42px; font-size: 23px; }
  .zpm-mis-video { display: none; }
  html body .zpm-mis .zpm-mis-valore b { font-size: 27px; }
  .zpm-mis-valore { min-height: 32px; }
}

@keyframes zpm-mis-cursore { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes zpm-mis-scossa { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) {
  .zpm-mis-vano { transition: none; }
  .zpm-mis-attivo .zpm-mis-valore b::after, .zpm-mis-pieno { animation: none; }
}