/* ============================================================================
   Sagomato — correzioni mobile, 2026-08-17
   Tre interventi, tutti dietro media query: su desktop non cambia NULLA.
   Selettori con html body[class] per vincere sugli stili inline !important
   che i mu-plugin iniettano legati al page-id.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   P1 — LA MATRICE PREZZI/DATE ENTRA NELLO SCHERMO  (il difetto piu' grave)
   Sulla scheda prodotto la tabella e' larga 465px in 390: totale, IVA e meta'
   del bottone "Aggiungi al carrello" finivano fuori schermo e IRRAGGIUNGIBILI.
   --------------------------------------------------------------------------- */
@media (max-width: 500px) {
  html body[class] .dd_quantity_table {
    table-layout: fixed !important;
    width: 100% !important;
  }
  html body[class] .dd_quantity_table thead th,
  html body[class] .dd_quantity_table tbody td {
    padding: 3px 2px !important;
  }
  html body[class] .dd_quantity_table thead th.dd_quantity_title {
    width: 64px !important;
  }
  html body[class] .dd_quantity_table tbody td div.dd_col,
  html body[class] .dd_quantity_table thead th div.dd_col {
    font-size: 12px !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 6px 2px !important;
  }
  html body[class] .dd_quantity_table thead th.dd_date .dd_col span {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
  /* il prezzo barrato ruba spazio orizzontale prezioso su schermo stretto */
  html body[class] span.dd_regular_price { display: none !important; }
}

/* ---------------------------------------------------------------------------
   P3 — CTA PRINCIPALI LEGGIBILI E TATTILI
   "Configura astuccio"/"Inizia progetto" erano 34px con testo 9,5px.
   Minimi: testo 14px, bersaglio 44px.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* SPECIFICITA' — verificato il 17/08 sera, dopo una segnalazione dal campo.
     Un mu-plugin inietta `html body.page-id-5951 .sago11zabl-cta` in uno <style>
     in linea: specificita' (0,2,2), la STESSA di `html body[class] ...`, ma stampato
     DOPO questo foglio, quindi vinceva lui e i pulsanti restavano a 34px invece di 44.
     Misurato con sagovedi: riquadro 142,6 x 34,0 px. Su un telefono un bersaglio da
     34px con dentro la freccia e' sotto il minimo tattile: il dito manca il bordo e
     sembra che il pulsante "non funzioni".
     `body[class][class]` porta la specificita' a (0,3,2) e vince senza toccare
     il mu-plugin. */
  html body[class][class] .sago11zabl-cta {
    font-size: 14px !important;
    min-height: 44px !important;
    padding: 10px 20px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }
  html body[class] .sago11zabl-badge-label {
    font-size: 10.5px !important;
    letter-spacing: .06em !important;
  }
  html body[class] .sago11zacj-text { font-size: 12px !important; }
  html body[class] .sago-static46b-all-models {
    font-size: 13px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ---------------------------------------------------------------------------
   P2 — HEADER COMPATTO E STICKY
   Prima ~265px di intestazione (31% dello schermo), con una riga logo/contatti
   DUPLICATA (.sago-mh7) e il modulo "cerca per misure" appoggiato sopra.
   Le regole a coordinate assolute (form ricerca, hero) agganciano SOLO la home:
   sulle altre pagine quegli elementi non esistono e le regole restano inerti.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* contatti su una riga sola, spazio a sinistra per l'hamburger fisso */
  html body[class] .sago11zc-header .sago11zc-top {
    height: 48px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    padding: 6px 12px 6px 74px !important;
  }
  /* in alto basta il telefono: l'email e' nel menu e nel footer */
  html body[class] .sago11zc-top .sago11zc-contact[href^="mailto:"] {
    display: none !important;
  }
  /* ---------------------------------------------------------------------
     LA RIGA DUPLICATA .sago-mh7 NON SI PUO' NASCONDERE — verificato il
     2026-08-17 sera, dopo aver visto il danno con gli occhi.

     Nasconderla sembrava gratis: e' una riga che sullo schermo non si vede
     comunque, perche' il pannello "CERCA PER MISURE" le sta sopra.
     Ma quella riga e' anche il PUNTO DI RIFERIMENTO che uno script
     (000000-sagomato-home-creabox-bridge-b3-direct.php, funzione placeCard)
     usa per decidere dove appoggiare il pannello di ricerca:

         top = scrollY_corrente + posizione_del_riferimento + 8

     Finche' il riferimento e' la riga .sago-mh7, che scorre insieme alla
     pagina, quel calcolo da' sempre lo stesso punto: il pannello resta
     fermo a 160 px dall'inizio della pagina. Con .sago-mh7 nascosta lo
     script non la trova piu' e ripiega sul campo di ricerca dentro il menu
     a scomparsa, che e' `position: fixed`: quello NON scorre, quindi il
     calcolo restituisce un punto che cresce insieme allo scorrimento e il
     pannello di ricerca SCENDE INSIEME AL DITO, coprendo la card centrale
     "Crea la tua box" — cioe' una delle tre porte d'ingresso al
     configuratore che tutto questo lavoro doveva mettere in evidenza.

     Misurato: con la riga nascosta il pannello sta sempre a 160 px dal
     bordo alto dello SCHERMO (scroll 1200 -> pagina 1360; scroll 2000 ->
     pagina 2160). Con la riga visibile resta inchiodato a 160 px dalla
     PAGINA a qualunque scorrimento. E' la differenza fra un pannello che
     accompagna e uno che ostruisce.

     Quindi la riga resta nel flusso. Non si vede lo stesso (il pannello ha
     z-index 9995 e le sta davanti), e le altre due economie di P2 — la
     riga contatti da 48 px e la riga logo da 62 px — restano tutte.
     SECONDA SCOPERTA, PIU' GRAVE — provato e rimesso subito a posto.
     Rimettere .sago-mh7 nel flusso NON e' un ritorno allo stato di ieri:
     con le altre regole di P2 attive, la home mobile si e' SVUOTATA.
     Misurato due volte di fila, senza nessun errore JavaScript in console:
     pagina alta 2.195 px invece di 10.142, e ZERO delle tre card
     "Crea il tuo astuccio / box / sagomato". Con la riga di nuovo nascosta,
     stessa pagina, stesso istante: 10.142 px e tre card al loro posto.
     Uno degli script che assemblano la home a runtime evidentemente si
     regola su quella riga, e con l'intestazione compattata sbaglia bersaglio
     e cancella mezza pagina.

     Quindi .sago-mh7 RESTA NASCOSTA, e il pannello che scivola si cura
     dall'altro capo: vedi la regola subito sotto.
     --------------------------------------------------------------------- */
  html body[class] .sago-mh7 { display: none !important; }

  /* ---------------------------------------------------------------------
     P2-bis — IL PANNELLO "CERCA PER MISURE" TORNA FERMO.

     Lo script che lo posiziona ragiona cosi':
        se trovo una barra di ricerca visibile -> mi appoggio a quella
        altrimenti                             -> mi metto a 166 px, punto.
     Nascondendo .sago-mh7 gli abbiamo tolto la barra buona, e lui ha
     ripiegato sul campo di ricerca dentro il cassetto del menu — che e'
     `position: fixed` e quindi, dal suo punto di vista, "scende" insieme
     allo scorrimento. Da li' il pannello che accompagna il dito e finisce
     parcheggiato sopra la card "Crea la tua box".

     Qui gli si toglie anche quel ripiego: finche' il cassetto e' CHIUSO
     (cioe' sempre, tranne quando l'utente lo apre di proposito) il campo
     di ricerca del menu e' `visibility: hidden`, che e' esattamente il
     controllo che lo script usa per dire "questa non vale". Non trovando
     piu' nessuna barra, imbocca il suo ramo di riserva e mette il pannello
     a 166 px fissi: dove sta adesso, e dove deve restare.

     Quando il cassetto si apre, il corpo pagina prende la classe
     `sago-e3-open`, questa regola smette di valere e il campo di ricerca
     del menu torna visibile e funzionante come sempre. Nulla di cio' che
     l'utente vede o tocca cambia: l'elemento nascosto e' gia' fuori
     schermo (traslato a -345 px) per tutto il tempo in cui la regola vale.
     --------------------------------------------------------------------- */
  html body:not(.sago-e3-open) #sago-e3-drawer .sago-e3-search-wrap {
    visibility: hidden !important;
  }

  html body[class] .sago11zc-header .sago11zc-main {
    height: 62px !important;
    padding: 4px 0 4px 74px !important;
    align-items: center !important;
  }
  html body[class] .sago11zc-header .sago11zc-logo img,
  html body[class] .sago11zc-header .sago11zc-logo {
    max-height: 48px !important;
    width: auto !important;
  }
  html body[class] .sago11zc-header .sago11zc-logo {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* il modulo "cerca per misure" (solo home) rimesso nel flusso sotto l'header */
  html body[class] form#sago-b3-size-search { top: 140px !important; }
  /* Lo spazio sotto il pannello di ricerca era dimensionato per la versione da 209 px.
     Con la barra compatta (000032) il pannello chiuso e' 83 px: senza questa riduzione
     resterebbero 84 px di vuoto. Misurato: hero a y=167, card fino a y=253. */
  html body[class] section.sago2-hero { padding-top: 100px !important; }

  /* header sempre a portata di pollice */
  html body[class] .sago11zc-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 800 !important;
    box-shadow: 0 2px 10px rgba(11, 35, 71, .08) !important;
  }
}

/* ---------------------------------------------------------------------------
   P4 — I PULSANTI DELLE TRE CARD ERANO MORTI SU MOBILE
   Segnalato dal committente il 17/08 sera: "se clicco su Configura astuccio o
   Configura sagomato non succede niente". Riprodotto con un tap vero in browser:
   astuccio e sagomato non navigano, "Inizia progetto" (box) si'.

   CAUSA (non e' di oggi — il file colpevole e' del 25 maggio 2026):
   `zzz...-sagomato-home2-kill-hero-container-hover.php` spegne il tocco su tutta
   l'area contenuti con `.sago11zada-no-hover { pointer-events: none !important }`,
   e lo riaccende SOLO per `.sago11zacx-rail` e `.sago11zacx-card`.
   Le tre card sono poi state rifatte con altri nomi — `.sago11zabl-*` — e nessuno
   ha aggiornato l'elenco delle eccezioni: essendo `pointer-events` una proprieta'
   EREDITATA, le card nuove nascono insensibili al tocco.
   Prova: Playwright riporta `<main id="main"> intercepts pointer events`, e la
   catena degli antenati mostra `pe=none` fino a `#content.sago11zada-no-hover`.
   Su desktop la regola non si applica: infatti li' i pulsanti funzionano.

   Il "box" funzionava per un motivo diverso e fortuito: un altro mu-plugin
   (`home-creabox-click-safe-a3`) intercetta i clic per il solo testo
   "crea la tua box" e naviga via JavaScript, scavalcando il problema.

   CORREZIONE: si riaccende il tocco sulle card nuove. Non si tocca il file di
   maggio (un suo aggiornamento non cancellerebbe questa riga) e non si rimuove
   il blocco generale, che serve ancora a spegnere l'hover sul contenitore hero.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  html body[class] .sago11zabl-section,
  html body[class] .sago11zabl-card,
  html body[class] .sago11zabl-card *,
  html body[class] .sago11zabl-cta {
    pointer-events: auto !important;
  }
}