/** * Mica Core — componente misura → prezzo → carrello (A5, audit E1) * * Il Figma dell'audit non copre gli stati di questo campo (vuoto, non-valido, valido, invio, * aggiunto, errore): non esiste in un design approvato. Ogni valore qui sotto è DERIVATO dallo * stile già in pagina per lo stesso blocco acquisto (bottone "Aggiungi al carrello", campo * quantità, input generico del tema, avvisi WooCommerce) — misurato con getComputedStyle() su * https://www.milpermica.local/?p=56058 il 17/09/2026. Dove non c'era un valore da derivare * (focus ring, bottone "non pronto", spunta "aggiunto", spinner "invio", ordine * riferimento/totale) è marcato ⚠️ scelta nostra, con dove/perché/come si toglie. * * Selettori sul bottone "Aggiungi al carrello": scoped con `.mica-misura + .e-atc-qty-button-holder` * invece di `.single_add_to_cart_button` secco — quella classe la usa OGNI form.cart del sito, * anche fuori dal perimetro. `.mica-misura` è sempre il primo figlio di form.cart quando il * template è il nostro (verificato nel DOM); fuori perimetro `.mica-misura` non esiste, quindi * il selettore adiacente non ha mai effetto lì. */ .mica-misura { --mica-misura-accento: #d4764c; /* bottone "Aggiungi al carrello" (rgb(212,118,76) / --e-global-color-astglobalcolor1) */ --mica-misura-testo: #1c1c1c; /* colore del blocco "Prezzo prodotto" in pagina (--e-global-color-astglobalcolor3) */ --mica-misura-testo-secondario: #475569; /* colore testo del campo quantità (input.qty) */ --mica-misura-bordo: #d1d5db; /* bordo dell'input generico del tema (--e-global-color-astglobalcolor6) */ --mica-misura-bordo-invalido: #d65d67; /* .woocommerce-js form .form-row.woocommerce-invalid input, validazione checkout */ --mica-misura-errore: #b81c23; /* .woocommerce-error::before, avviso WooCommerce del sito */ --mica-misura-raggio: 6px; /* bottone "Aggiungi al carrello" + campo quantità, stesso blocco */ margin: 0 0 1.25em; font-family: inherit; /* il corpo del sito è già Open Sans (Astra: `body,button,input…`): una fonte di verità sola */ } /* --------------------------------------------------------------------------------------- Campo: label, input, hint, esito --------------------------------------------------------------------------------------- */ .mica-misura__campo { margin-bottom: 0.85em; } .mica-misura__label { display: block; font-size: 14px; font-weight: 600; color: var(--mica-misura-testo); margin-bottom: 0.4em; } /* ⚠️ Specificità: il tema stila i propri campi con `.woocommerce input[type="number"]` — una classe + un attributo + un tipo = (0,2,1), più della singola classe `.mica-misura__input` (0,1,0). A parità di importanza (nessuna delle due in `!important`) vince la più specifica, quindi senza salire qui il tema resta sopra: raggio, bordo e focus restavano quelli di default. Tutta questa sezione è scritta con l'ancestor completo `.mica-misura .mica-misura__campo input.mica-misura__input` — (0,3,1) — per vincere sempre, non trovare per tentativi la soglia minima. Verificato in browser il 17/09/2026: senza, raggio e bordo restavano quelli del tema anche col selettore "giusto" su carta. */ .mica-misura .mica-misura__campo input.mica-misura__input { border-radius: var(--mica-misura-raggio); /* l'input eredita lo stile generico del tema (radius 0): qui allineato al bottone/quantità dello stesso blocco */ border-color: var(--mica-misura-bordo); transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* ⚠️ Stato focus: non c'è un ring nel Figma né altrove nel tema per gli input di WooCommerce (il tema ne ha uno suo, blu, su `input[type="number"]:focus` — non è il nostro accento). Tono derivato dall'accento del bottone, alone allo stesso raggio del campo. Si toglie con questa sola regola. */ .mica-misura .mica-misura__campo input.mica-misura__input:focus { outline: none; border-color: var(--mica-misura-accento); box-shadow: 0 0 0 3px rgba(212, 118, 76, 0.18); } .mica-misura.mica-misura--non-valido .mica-misura__campo input.mica-misura__input, .mica-misura.mica-misura--errore .mica-misura__campo input.mica-misura__input { border-color: var(--mica-misura-bordo-invalido); } .mica-misura.mica-misura--non-valido .mica-misura__campo input.mica-misura__input:focus, .mica-misura.mica-misura--errore .mica-misura__campo input.mica-misura__input:focus { box-shadow: 0 0 0 3px rgba(214, 93, 103, 0.18); } .mica-misura__hint { font-size: 13px; color: var(--mica-misura-testo-secondario); margin: 0.4em 0 0; } .mica-misura__esito { font-size: 13px; font-weight: 600; line-height: 1.4; /* ⚠️ senza, eredita i 28px del corpo (Astra) e il min-height qui sotto (18px) riservava meno della riga vera: il bottone scendeva di ~10 px al comparire del messaggio (misurato 18/09/2026) */ min-height: 1.4em; /* riserva lo spazio del messaggio: comparendo non deve spostare prezzo/bottone sotto */ margin: 0.4em 0 0; color: var(--mica-misura-errore); } /* --------------------------------------------------------------------------------------- Prezzo: il totale ("N × misura = €") è l'informazione principale, il "€/unità" è riferimento piccolo. ⚠️ Nel markup il riferimento viene prima del totale (mica-core.php scrive i due in quest'ordine): qui invertiti solo visivamente con flex-direction: column-reverse, senza toccare il JS che li popola. Non è nel Figma — è la stessa gerarchia "prezzo grande, unità piccola sotto" già usata da .price/.woocommerce-Price-amount in pagina. Si toglie tornando a `flex-direction: row`. --------------------------------------------------------------------------------------- */ .mica-misura__prezzo { display: flex; flex-direction: column-reverse; gap: 0.15em; margin: 0.75em 0; } .mica-misura__prezzo-totale { font-family: "brandon-grotesque", sans-serif; /* il Brandon del kit Adobe Fonts. Fino al 22/09/2026 era "Brandon Grotesque", nome mai definito (TODO-mica-core.md §Carattere del sito) */ font-size: 22px; font-weight: 600; line-height: 1.3; min-height: 1.3em; /* ⚠️ scelta nostra (revisione Opus di A5, 18/09/2026): la riga resta riservata anche vuota — prima, a campo vuoto/non valido, spariva e il bottone saliva di ~55 px mentre si scriveva, spostando il bersaglio sotto il pollice. Il riferimento €/m sopra è sempre popolato (misura.js). Si toglie con questa riga, la regola `:empty` qui sotto e tornando a `display:none` su :empty. */ color: var(--mica-misura-testo); } /* Totale vuoto (campo vuoto/non valido): la sua riga riservata va SOTTO il riferimento €/m, non sopra — altrimenti fra il messaggio e "€16,85 / m" resta un buco che si legge come un errore d'impaginazione. Con column-reverse l'order più basso finisce in fondo. */ .mica-misura__prezzo-totale:empty { order: -1; } .mica-misura__prezzo-riferimento { font-size: 13px; color: var(--mica-misura-testo-secondario); } /* --------------------------------------------------------------------------------------- Bottone "Aggiungi al carrello" — stati non pronto / invio / aggiunto. Scoped a quando `.mica-misura` è il fratello immediatamente precedente (solo nel perimetro). --------------------------------------------------------------------------------------- */ .mica-misura + .e-atc-qty-button-holder .single_add_to_cart_button { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } /* ⚠️ "Non pronto" (aria-disabled, campo vuoto/non valido): il bottone deve restare evidentemente cliccabile — niente opacità ridotta, che si legge come "spento" — ma distinguibile da quello pronto. Scelta nostra: da pieno a contorno, stesso colore d'accento, stessa dimensione (compensata via padding). Non è nel Figma. Si toglie tornando a `opacity: .5`. ⚠️ `background-color`/`color`/`border-color` in `!important`: il kit CSS di Elementor stampa inline `button { background-color: … !important }` (colore globale del tema su OGNI bottone del sito) — senza pareggiarlo qui il bottone resta sempre pieno, qualunque specificità dia il resto del selettore. Verificato in browser (17/09/2026). ⚠️ Colore scritto a valore fisso (`#d4764c`), non `var(--mica-misura-accento)`: il bottone è FRATELLO di `.mica-misura` dentro `form.cart`, non discendente — le custom property dichiarate su `.mica-misura` non arrivano lì (le custom property ereditano solo lungo l'albero DOM). Un `var()` che non risolve invalida l'INTERA dichiarazione (non solo il valore), motivo per cui prima anche `border-width` spariva insieme al colore: verificato in browser il 17/09/2026, non solo dedotto. */ .mica-misura + .e-atc-qty-button-holder .single_add_to_cart_button.disabled { background-color: #fff !important; color: #d4764c !important; border: 2px solid #d4764c !important; padding: 8px 18px !important; /* -2px per lato: compensa il border aggiunto, stessa dimensione del bottone "pronto" — anche questa in !important: `.woocommerce-js div.product form.cart .button.single_add_to_cart_button` ha specificità più alta (0,5,2) e altrimenti la sovrascrive */ opacity: 1; cursor: pointer; /* non "not-allowed": è cliccabile davvero, spiega cosa manca al clic (misura.js) */ } .mica-misura + .e-atc-qty-button-holder .single_add_to_cart_button.disabled:hover { background-color: #fff !important; color: #d4764c !important; } /* ⚠️ "Invio" a colore pieno (revisione Opus di A5, 18/09/2026): durante la richiesta il bottone ha `disabled` (misura.js) e il tema lo sbiadisce — lo spinner bianco su arancio chiaro si vedeva a fatica. Stesso `!important` di `.disabled` sopra, stesso motivo (kit Elementor). */ .mica-misura + .e-atc-qty-button-holder .single_add_to_cart_button.mica-misura-loading, .mica-misura + .e-atc-qty-button-holder .single_add_to_cart_button.mica-misura-loading:disabled { background-color: #d4764c !important; color: #fff !important; opacity: 1 !important; } /* "Invio": la richiesta può metterci 1-2 secondi (endpoint mica_aggiungi_misura). Non solo opacità — uno spinner vero, sempre visibile anche su connessioni lente. Nessuna modifica JS: `.mica-misura-loading` è già la classe che misura.js mette/toglie sul bottone durante il fetch. */ .mica-misura + .e-atc-qty-button-holder .single_add_to_cart_button.mica-misura-loading { cursor: wait; pointer-events: none; } .mica-misura + .e-atc-qty-button-holder .single_add_to_cart_button.mica-misura-loading::after { content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 0.6em; vertical-align: -2px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: mica-misura-spin 0.7s linear infinite; } @keyframes mica-misura-spin { to { transform: rotate(360deg); } } /* ⚠️ "Aggiunto": WooCommerce toglie/rimette da sé la classe `.added` sul bottone (misura.js la aggiunge a ok:true, `aggiorna()` la toglie ad ogni ricalcolo). Nessuno stato "successo" è nel Figma per questo bottone: spunta + tono più scuro dello stesso accento, non un verde estraneo alla palette del sito. Si toglie con queste due regole. */ .mica-misura + .e-atc-qty-button-holder .single_add_to_cart_button.added { background-color: #bd6a41 !important; /* --mica-misura-accento scurito ~10%, stesso tono */ } .mica-misura + .e-atc-qty-button-holder .single_add_to_cart_button.added::after { content: "✓"; margin-left: 0.5em; font-weight: 700; } /* --------------------------------------------------------------------------------------- Mobile — verificato a 500px (minimo raggiungibile in Chrome desktop) in A5; il 375px vero resta da fare su dispositivo in A8 (TODO-mica-core.md). --------------------------------------------------------------------------------------- */ @media (max-width: 480px) { .mica-misura__prezzo-totale { font-size: 19px; } } /* --------------------------------------------------------------------------------------- A6 — doppione "Prezzo prodotto" nel template 71515 (audit P4). Container Elementor `73e852d` (contiene la scritta statica "Prezzo prodotto" + il campo `prezzo_per_metro`, es. "16,85 €/Mt"): un secondo prezzo, manuale, accanto a quello vero che il nostro componente calcola. Esiste solo se il prodotto ha il meta `prezzo_per_metro` (61 dei 68 prodotti del perimetro, mai fuori perimetro — verificato 17/09/2026), quindi basta nasconderlo quando il body ha `mica-misura-attiva` (filtro `body_class` in includes/misura.php): non si tocca il builder, non serve una condizione per prodotto. Selettore sul `data-id` Elementor del container, non su classi CSS del tema (stabile ai riordini del builder). P4 resto (22/09/2026) — nel perimetro spariscono anche i widget fratelli: - `2afefbe` (Prezzo prodotto nativo, classe `custom_dynamic_price`): stampa il prezzo per millimetro del calcolatore, "€0,02 Euro". Finora lo nascondeva solo lo snippet 73405, con uno `style.display` al DOMContentLoaded: fino a lì era visibile, e senza 73405 tornerebbe. - `96a0200` (HTML, `.custom_dynamic_total`): il "Prezzo totale per la quantità scelta" di 73405. Nel perimetro resta vuoto; il totale lo dà il componente (`.mica-misura__prezzo-totale`). Il prezzo di riferimento (€/m, piccolo) e il totale unico sono nel componente: qui resta un solo prezzo. Fuori dal perimetro i due widget servono ancora (prezzo dei prodotti semplici, totale per quantità di 73405) e non si toccano — per questo CSS e non builder: il template 71515 è condiviso da tutti i prodotti. */ body.mica-misura-attiva [data-id="73e852d"], body.mica-misura-attiva [data-id="2afefbe"], body.mica-misura-attiva [data-id="96a0200"] { display: none !important; /* 73405 rimette `style.display = ''` se trova un prezzo: l'inline non deve vincere */ }