/* 
Theme Name: IDTPerugia.com Elementor Child
Theme URI: https://www.idtperugia.com/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Gruppo Formiche
Author URI: https://www.gruppoformiche.it/
Template: hello-elementor
Version: 2.0.0
Text Domain: idtperugia
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* INDICE====================================================================
	00. IDT PERUGIA — DESIGN SYSTEM
	01. HEADER — barra superiore
    02. HEADER — riga principale
    03. HEADER — barra categorie + mega menu
    04. BOTTONI
    05. HERO
    06. SEZIONI DELLA HOME
    07. CARD PRODOTTO (loop item)
    08. CARD MINI (mega menu)
    09. CATEGORIE IN EVIDENZA
    10. MARCHI
    11. FIDUCIA
    12. FOOTER
    12-ter. SCHEDA PRODOTTO (Theme Builder → Prodotto singolo)
    12-bis. DIMENSIONAMENTO FLEX
    13. RESPONSIVE
    14. ARCHIVIO PRODOTTI (Theme Builder → Archivio prodotti)
    15. BRICIOLE DI PANE + PAGINE INFORMATIVE A DUE COLONNE
    16. CHI SIAMO
    17. CONTATTI
    18. SFOGLIA IL CATALOGO
    19. PAGINE WOOCOMMERCE (carrello, cassa, area riservata, accesso)
    19-bis. CARRELLO / CASSA — sovrascritture ad alta specificita
    20. SCHEDA PRODOTTO IN OFFERTA — sovrascritture ad alta specificita
    21. SCHEDA PRODOTTO — galleria e riga marchio/categorie
    22. TABELLA VARIANTI (prodotti variabili)
    23. SELETTORE DI QUANTITA — unico per loop, scheda semplice e varianti
    24. STATI :focus DEI PULSANTI
    25. CASSA — una sola cornice per colonna
    25-bis. MESSA A FUOCO DEI CAMPI
    26. CASSA — menu a tendina allineati ai campi di testo
    27. BRICIOLE DI PANE — stile unico per pagine e prodotti
    28. SUGGERIMENTI DI RICERCA (Advanced Woo Search)
    29. PALLINI DEGLI ELENCHI PUNTATI
    30. ICONE DEI PLUGIN NELL'INTESTAZIONE
    31. ICONE DEL MENU (hamburger, chiusura, freccia dei sottomenu)
    32. INTESTAZIONE — i tre blocchi a destra, allineati alla bozza HTML
    33. CARRELLO DELL'INTESTAZIONE + MISURA MINIMA DELLE ICONE
    34. ICONE SUI PULSANTI DEI PRODOTTI
    35. SCHEDA PRODOTTO SEMPLICE — pulsante uguale a quello della tabella varianti
    36. FILTRO "SOLO PRODOTTI IN OFFERTA"
    37. FASCIA VETRINA (home)
    38. PAGINA CARRELLO — lista prodotti e riepilogo come nella bozza
    39. CARRELLO - CORREZIONI DI TIPOGRAFIA E ALLINEAMENTO
    40. CASSA - ACCETTAZIONE CONDIZIONI E PULSANTE "EFFETTUA ORDINE"
    41. PULSANTE "TUTTE LE CATEGORIE" - CENTRATURA VERTICALE DEL TESTO
    42. AREA RISERVATA — IMPAGINAZIONE, COLORI E BACHECA
    42-bis. BACHECA
    43. AREA RISERVATA - TABELLE (I MIEI ORDINI, DETTAGLIO ORDINE)
    44. PAGINA "ORDINE RICEVUTO" (checkout/order-received)
    45. CORREZIONI RESPONSIVE
    46. CORREZIONI RESPONSIVE - LA RIGA DI NAVIGAZIONE SUL TELEFONO
    47. CORREZIONI RESPONSIVE - SECONDO GIRO
    48. GRIGLIA PRODOTTI: COLONNE CHE SI RIDUCONO DA SOLE
    49. L'INTESTAZIONE MOBILE PARTE DA 1024px
    50. NEWSLETTER DEL PIEDE: MODULO MAILCHIMP

   Regole della casa:
   - una regola per riga, insieme al suo selettore;
   - le variabili una per riga, tutte nei :root del capitolo iniziale;
   - i colori e i caratteri si impostano nelle Impostazioni del sito di
     Elementor e si ritrovano qui come variabili;
   - i valori che tornano ovunque (corpi, pesi, raggi, altezze, le due linee)
     sono variabili: si cambiano una volta sola nel capitolo iniziale;
   - l'ordine dei capitoli e' la cascata: a parita' di peso vince chi viene
     dopo, quindi i capitoli non si spostano senza motivo.
   ========================================================================== */

/* ==========================================================================
   IDT PERUGIA — DESIGN SYSTEM
   I colori e i font sono definiti nelle Impostazioni del sito di Elementor.
   Qui sotto vengono ripresi come variabili per le regole di dettaglio.
   ========================================================================== */

:root {
  --idt-blu: var(--e-global-color-secondary, #00658A);
  --idt-azzurro: var(--e-global-color-primary, #0099CC);
  --idt-rosso: var(--e-global-color-accent, #CC3333);
  --idt-testo: var(--e-global-color-text, #3D3D3D);
  --idt-azzurro-hover: var(--e-global-color-azzurro-hover, #0080AD);
  --idt-azzurro-chiaro: var(--e-global-color-azzurro-chiaro, #6BD4EA);
  --idt-azzurro-bordo: var(--e-global-color-azzurro-bordo, #A6E3F2);
  --idt-azzurro-pallido: var(--e-global-color-azzurro-pallido, #EEF9FD);
  --idt-azzurro-pallido-hover: var(--e-global-color-azzurro-pallido-hover, #D5F0F8);
  --idt-rosso-hover: var(--e-global-color-rosso-hover, #B32A2A);
  --idt-rosso-active: var(--e-global-color-rosso-active, #8F2020);
  --idt-rosso-prezzo: var(--e-global-color-rosso-prezzo, #E30613);
  --idt-giallo-prezzo: var(--e-global-color-giallo-prezzo, #FFED00);
  --idt-magenta: var(--e-global-color-magenta-novita, #D6006E);
  --idt-nero: var(--e-global-color-nero-testo, #1A1A1A);
  --idt-grigio: var(--e-global-color-grigio-medio, #6B6B6B);
  --idt-grigio-chiaro: var(--e-global-color-grigio-chiaro, #8C8C8C);
  --idt-bordo: var(--e-global-color-bordo, #CDCDCD);
  --idt-bordo-chiaro: var(--e-global-color-bordo-chiaro, #ECECEC);
  --idt-sfondo: var(--e-global-color-sfondo-pagina, #F4F4F4);
  --idt-barra: var(--e-global-color-sfondo-barra, #FAFAFA);
  --idt-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --idt-display: 'Anton', 'Inter', sans-serif;
  --idt-radius: 8px;
  --idt-transizione: .18s ease;
  /* altezza della barra superiore: la parte sticky dell'header parte da qui */
  --idt-topbar-h: 34px;
}

/* --- scala tipografica: i nove corpi usati nel sito ---------------------- */
:root {
  --idt-t-10: 10px;
  --idt-t-11: 11px;
  --idt-t-11-5: 11.5px;
  --idt-t-12: 12px;
  --idt-t-12-5: 12.5px;
  --idt-t-13: 13px;
  --idt-t-13-5: 13.5px;
  --idt-t-14: 14px;
  --idt-t-15: 15px;
}

/* --- pesi del carattere -------------------------------------------------- */
:root {
  --idt-peso-normale: 400;
  --idt-peso-medio: 600;
  --idt-peso-forte: 700;
  --idt-peso-nero: 800;
}

/* --- spaziatura fra le lettere, per ruolo -------------------------------- */
:root {
  --idt-ls-pulsante: .03em;
  --idt-ls-tabella: .07em;
  --idt-ls-occhiello: .08em;
  --idt-ls-titolo: -.01em;
}

/* --- raccordi degli angoli ----------------------------------------------- */
:root {
  --idt-radius-s: 4px;
  --idt-radius-pill: 999px;
}

/* --- le due linee del progetto ------------------------------------------- */
:root {
  --idt-linea: 1px solid var(--idt-bordo);
  --idt-linea-chiara: 1px solid var(--idt-bordo-chiaro);
}

/* --- altezze dei controlli ------------------------------------------------
   Quattro misure cresciute nel tempo: 42 per i comandi compatti (quantita',
   pulsanti della ricerca), 44 per i campi dei moduli e i pulsanti delle
   schede, 46 per la barra di ricerca e le voci di menu, 48 per i pulsanti
   grandi (aggiungi al carrello, vai al pagamento, accedi). La distinzione
   fra 44 e 46 non e' sempre voluta: sono elencate qui per poterle unificare
   in un secondo momento senza cercarle in giro.
   ------------------------------------------------------------------------ */
:root {
  --idt-h-compatta: 42px;
  --idt-h-media: 44px;
  --idt-h-normale: 46px;
  --idt-h-grande: 48px;
}

body { background: var(--idt-sfondo); font-family: var(--idt-sans); color: var(--idt-nero); -webkit-font-smoothing: antialiased; }

/* ==========================================================================
   1. HEADER — barra superiore
   ========================================================================== */

.idt-topbar { color: #fff; overflow: hidden; }
.idt-topbar .elementor-icon-list-items { gap: 26px; }
.idt-topbar .elementor-icon-list-item { font-size: var(--idt-t-11-5); font-weight: 500; align-items: center; }
.idt-topbar .elementor-icon-list-item > a, .idt-topbar .elementor-icon-list-text { color: #fff; }
.idt-topbar .elementor-icon-list-icon { display: flex; align-items: center; }
.idt-topbar .elementor-icon-list-icon svg, .idt-topbar .elementor-icon-list-icon i { width: 14px; height: 14px; color: #fff; fill: #fff; }
.idt-topbar .elementor-icon-list-icon + .elementor-icon-list-text { padding-inline-start: 6px; }

.idt-topbar-note .elementor-icon-list-item { font-weight: var(--idt-peso-forte); letter-spacing: .06em; text-transform: uppercase; }

/* ==========================================================================
   2. HEADER — riga principale
   ========================================================================== */

/* L'intero header e sticky: la barra superiore scorre via (offset negativo)
   mentre logo, ricerca e barra categorie restano fissi in alto. */
header.elementor-location-header { position: sticky; top: calc(-1 * var(--idt-topbar-h)); z-index: 60; }
body.admin-bar header.elementor-location-header { top: calc(32px - var(--idt-topbar-h)); }
@media (max-width: 782px) {
  body.admin-bar header.elementor-location-header { top: calc(-1 * var(--idt-topbar-h)); }
}

.idt-header-main { color: #fff; }

.idt-logo { flex: 0 0 auto; line-height: 0; }
.idt-logo img { width: 234px; max-width: 40vw; display: block; }

/* --- campo di ricerca (widget Advanced Woo Search, con suggerimenti live) --- */
.idt-search { flex: 1 1 auto; min-width: 0; }
.idt-search .aws-container { width: 100%; max-width: none; margin: 0; }
.idt-search .aws-container .aws-search-form { display: flex; height: var(--idt-h-normale); background: #fff; border: 2px solid var(--idt-azzurro-chiaro); border-radius: var(--idt-radius-s); overflow: visible; }
.idt-search .aws-container .aws-wrapper { flex: 1 1 auto; min-width: 0; height: var(--idt-h-compatta); border: 0; background: #fff; border-start-start-radius: 2px; border-end-start-radius: 2px; }
.idt-search .aws-container .aws-search-label { display: none; }
.idt-search .aws-container .aws-search-field { width: 100%; height: var(--idt-h-compatta); padding: 0 34px 0 14px; border: 0; outline: 0; box-shadow: none; border-radius: 0; background: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-15); color: var(--idt-nero); }
.idt-search .aws-container .aws-search-field::placeholder { color: var(--idt-grigio-placeholder); opacity: 1; }
.idt-search .aws-container .aws-search-btn, .idt-search .aws-container .aws-search-btn.aws-form-btn { flex: 0 0 56px; width: 56px; min-width: 56px; height: var(--idt-h-compatta); display: grid; place-items: center; background: var(--idt-rosso); border: 0; border-radius: 0; cursor: pointer; transition: background var(--idt-transizione); }
.idt-search .aws-container .aws-search-btn:hover, .idt-search .aws-container .aws-search-btn.aws-form-btn:hover { background: var(--idt-rosso-hover); }
.idt-search .aws-container .aws-search-btn_icon { display: grid; place-items: center; }
.idt-search .aws-container .aws-search-btn_icon svg { width: 22px; height: 22px; fill: #fff; }
.idt-search .aws-container .aws-search-clear { inset-inline-end: 10px; }
.idt-search .aws-container .aws-search-clear span { color: var(--idt-grigio-chiaro); font-size: 18px; }
.idt-search .aws-container .aws-loader { inset-inline-end: 12px; }

/* tendina dei suggerimenti — non annidata sotto .idt-search perche su mobile
   AWS sposta il form in un overlay a schermo intero */
.aws-search-result { font-family: var(--idt-sans); border: var(--idt-linea); border-radius: 0 0 var(--idt-radius) var(--idt-radius); box-shadow: 0 18px 34px rgba(0,0,0,.18); overflow: hidden; }
.aws-search-result .aws_result_scroll { max-height: 62vh; }
.aws-search-result .aws_result_item { padding: 8px 12px; border-bottom: var(--idt-linea-chiara); transition: background var(--idt-transizione); }
.aws-search-result .aws_result_item:hover, .aws-search-result .aws_result_item.hovered { background: var(--idt-azzurro-pallido); }
.aws-search-result .aws_result_image { flex: 0 0 48px; width: 48px; height: var(--idt-h-grande); display: grid; place-items: center; }
.aws-search-result .aws_result_image img { width: 48px; height: var(--idt-h-grande); max-width: 48px; object-fit: contain; background: #fff; }
.aws-search-result .aws_result_content { min-width: 0; }
.aws-search-result .aws_result_head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.aws-search-result .aws_result_title { color: var(--idt-nero); font-size: var(--idt-t-13); font-weight: var(--idt-peso-forte); text-transform: uppercase; line-height: 1.25; }
.aws-search-result .aws_result_title strong { color: var(--idt-azzurro); font-weight: var(--idt-peso-nero); }
.aws-search-result .aws_result_term { color: var(--idt-grigio-chiaro); font-size: var(--idt-t-11); }
.aws-search-result .aws_result_term strong { color: var(--idt-grigio); font-weight: var(--idt-peso-forte); }
.aws-search-result .aws_result_price { flex: none; font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); color: var(--idt-nero); white-space: nowrap; }
.aws-search-result .aws_result_price del { color: var(--idt-grigio-chiaro); font-weight: var(--idt-peso-normale); }
.aws-search-result .aws_result_price ins { text-decoration: none; color: var(--idt-rosso-prezzo); }
.aws-search-result .aws_result_price .woocommerce-price-suffix { color: var(--idt-grigio-chiaro); font-size: var(--idt-t-10); font-weight: 500; }
.aws-search-result .aws_result_item.aws_search_more { display: block; padding: 11px 12px; text-align: center; background: var(--idt-azzurro-pallido); color: var(--idt-blu); font-size: var(--idt-t-12); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: .04em; border-bottom: 0; }
.aws-search-result .aws_result_item.aws_search_more:hover { background: var(--idt-azzurro-pallido-hover); color: var(--idt-blu); }
.aws-search-result .aws_no_result, .aws-search-result .aws_result_item.aws_no_result { padding: 14px 12px; color: var(--idt-grigio); font-size: var(--idt-t-13); text-transform: none; }

/* overlay di ricerca su mobile */
.aws-overlay-mobile .aws-container .aws-search-form, .aws-container.aws-overlay .aws-search-form { border: 2px solid var(--idt-azzurro-chiaro); border-radius: var(--idt-radius-s); }

/* --- scorciatoie catalogo / account --- */
.idt-hdr-link { flex: 0 0 auto; color: #fff; text-decoration: none; transition: background var(--idt-transizione), opacity var(--idt-transizione); border-radius: var(--idt-radius-s); }
.idt-hdr-link-boxed:hover { background: rgba(255,255,255,.14); }
.idt-hdr-link:not(.idt-hdr-link-boxed):hover { opacity: .85; }

/* --- carrello --- */
.idt-cart { flex: 0 0 auto; }
.idt-cart .elementor-menu-cart__toggle .elementor-button { background: transparent; border: 0; color: #fff; padding: 0; font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); display: flex; align-items: center; gap: 9px; }
.idt-cart .elementor-button-icon { font-size: 26px; position: relative; }
.idt-cart .elementor-button-icon svg { width: 26px; height: 26px; fill: #fff; }
.idt-cart .elementor-button-icon-qty { background: var(--idt-rosso); color: #fff; font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); min-width: 18px; height: 18px; line-height: 18px; border-radius: var(--idt-radius-pill); top: -6px; inset-inline-end: -9px; }
.idt-cart .elementor-button-text { font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); }
.idt-cart:hover .elementor-menu-cart__toggle .elementor-button { opacity: .85; }

/* ==========================================================================
   3. HEADER — barra categorie + mega menu
   ========================================================================== */

.idt-navbar { position: relative; z-index: 50; }
.idt-navrow { overflow: visible; }

.idt-mega { position: static; }

.idt-mega-btn .elementor-button { display: flex; align-items: center; gap: 8px; height: var(--idt-h-normale); padding: 0 14px; border: 0; border-radius: 0; background: var(--idt-rosso); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-13); font-weight: var(--idt-peso-nero); letter-spacing: .04em; text-transform: uppercase; transition: background var(--idt-transizione); }
.idt-mega-btn .elementor-button:hover { background: var(--idt-rosso-hover); }
.idt-mega-btn .elementor-button-icon svg { width: 18px; height: 18px; }

/* --- pannello --- */
.idt-mega-panel { display: none; position: absolute; inset-inline: 0; top: 100%; z-index: 40; border-top: var(--idt-linea); box-shadow: 0 18px 34px rgba(0,0,0,.18); align-items: flex-start; }
.idt-mega:hover .idt-mega-panel, .idt-mega:focus-within .idt-mega-panel { display: flex; }

.idt-mega-panel::before { content: ""; position: absolute; inset-inline: -100vw; top: 100%; height: 100vh; background: rgba(0,0,0,.5); pointer-events: none; z-index: -1; }

/* colonna 1: macro categorie
   380px e la misura minima perche le voci piu lunghe ("Disinfezione /
   Lubrificazione / Igienizzanti", 340px con conteggio e freccia) restino su
   una riga sola su desktop. */
.idt-mega-cats { position: relative; flex: 0 0 380px; width: 380px; padding: 12px 12px 12px 0; border-inline-end: 1px solid var(--idt-bordo-chiaro); }

.idt-mega-cats .elementor-nav-menu > li > a.elementor-item { white-space: nowrap; }

/* il pannello delle sottocategorie deve posizionarsi rispetto alla COLONNA:
   sia gli <li> sia la <ul> di SmartMenus (che si mette in relative) devono
   restare statici, altrimenti il flyout parte dal bordo del testo e non da
   quello della colonna. */
.idt-mega-cats .elementor-nav-menu > li { position: static; }
.idt-mega-cats ul.elementor-nav-menu.sm-vertical, .idt-mega-cats nav.elementor-nav-menu--main { position: static !important; }

/* apertura immediata al passaggio del mouse: il comportamento a tempo di
   SmartMenus (il JS di Elementor) viene neutralizzato da queste due regole */
.idt-mega-cats .elementor-nav-menu--main ul.sub-menu { display: none !important; }
/* Con il JS attivo (classe .idt-js) comanda solo .idt-open: la regola :hover
   resta come riserva, altrimenti durante l’attesa “in diagonale” si vedrebbero
   due flyout sovrapposti. */
.idt-mega-cats:not(.idt-js) .elementor-nav-menu--main > ul > li:hover > ul.sub-menu, .idt-mega-cats .elementor-nav-menu--main > ul > li:focus-within > ul.sub-menu, .idt-mega-cats .elementor-nav-menu--main > ul > li.idt-open > ul.sub-menu { display: block !important; }

/* la voce resta evidenziata finche il suo flyout e aperto */
.idt-mega-cats .elementor-nav-menu--main > ul > li.idt-open > a.elementor-item { background: var(--idt-azzurro-pallido); color: var(--idt-nero); }
.idt-mega-cats .elementor-nav-menu--main > ul > li.idt-open > a.elementor-item .idt-mcount { color: var(--idt-grigio); }
.idt-mega-cats .elementor-nav-menu--main > .elementor-nav-menu { flex-direction: column; }
.idt-mega-cats .elementor-nav-menu > li { width: 100%; }
.idt-mega-cats .elementor-nav-menu > li > a.elementor-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--idt-radius); font-family: var(--idt-sans); font-size: var(--idt-t-13); font-weight: var(--idt-peso-medio); line-height: 1.25; color: var(--idt-nero); background: transparent; transition: background var(--idt-transizione); }
.idt-mega-cats .elementor-nav-menu > li > a.elementor-item:hover, .idt-mega-cats .elementor-nav-menu > li:hover > a.elementor-item, .idt-mega-cats .elementor-nav-menu > li > a.elementor-item.highlighted { background: var(--idt-azzurro-pallido); color: var(--idt-nero); }
.idt-mega-cats .sub-arrow { margin-inline-start: 0; flex: none; }
.idt-mega-cats .sub-arrow i, .idt-mega-cats .sub-arrow svg { color: var(--idt-grigio-chiaro); fill: var(--idt-grigio-chiaro); }

/* numero di articoli accanto alla macro categoria */
.idt-mcount { margin-inline-start: auto; padding-inline-start: 10px; color: var(--idt-grigio-chiaro); font-size: var(--idt-t-11); font-weight: var(--idt-peso-medio); font-variant-numeric: tabular-nums; white-space: nowrap; }
.idt-mega-cats .elementor-nav-menu > li:hover > a.elementor-item .idt-mcount { color: var(--idt-grigio); }

/* colonna 2: sottocategorie del macro in hover */
.idt-mega-cats ul.sub-menu, .idt-mega-cats .elementor-nav-menu--dropdown { position: absolute !important; /* +1px: parte dopo il filetto della colonna, non sopra */ inset-inline-start: calc(100% + 1px) !important; top: 0 !important; width: 440px !important; max-width: 440px !important; min-width: 440px !important; height: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; margin: 0 !important; /* stesso padding verticale della colonna: le due colonne partono
     esattamente dalla stessa riga */ padding: 12px 16px 16px !important; background: #fff !important; border: 0 !important; border-inline-end: 1px solid var(--idt-bordo-chiaro) !important; box-shadow: none !important; border-radius: 0 !important; z-index: 5; }
.idt-mega-cats ul.sub-menu li { width: 100%; }
.idt-mega-cats ul.sub-menu a.elementor-sub-item { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; font-family: var(--idt-sans); font-size: var(--idt-t-13); line-height: 1.3; color: var(--idt-testo); background: transparent; transition: color var(--idt-transizione); }
.idt-mega-cats ul.sub-menu a.elementor-sub-item:hover { color: var(--idt-azzurro); background: transparent; }

/* numero di articoli accanto alla sottocategoria */
.idt-scount { margin-inline-start: auto; padding-inline-start: 10px; color: var(--idt-grigio-chiaro); font-size: var(--idt-t-11); font-weight: var(--idt-peso-medio); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* terzo livello: dentro la stessa colonna, rientrato sotto la sua sottocategoria */
.idt-mega-cats ul.sub-menu li.idt-sub-item--l3 > a.elementor-sub-item { padding: 3px 0 3px 14px; font-size: var(--idt-t-12); color: var(--idt-grigio); }
.idt-mega-cats ul.sub-menu li.idt-sub-item--l3 > a.elementor-sub-item:hover { color: var(--idt-azzurro); }

/* intestazione rossa della colonna sottocategorie */
.idt-mega-cats ul.sub-menu li.idt-sub-head > a.elementor-sub-item { display: block; /* allinea il testo dell’intestazione alla prima voce della colonna sinistra */ padding: 6px 0 9px; color: var(--idt-rosso); font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-occhiello); }
.idt-mega-cats ul.sub-menu li.idt-sub-head > a.elementor-sub-item:hover { color: var(--idt-rosso-hover); }

/* categoria senza sottocategorie */
.idt-mega-cats ul.sub-menu li.idt-sub-note > a.elementor-sub-item { display: block; color: var(--idt-grigio-chiaro); font-size: var(--idt-t-13); padding: 5px 0; }

/* link finale della colonna */
.idt-mega-cats ul.sub-menu li.idt-sub-all > a.elementor-sub-item { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 0 0; color: var(--idt-azzurro); font-size: var(--idt-t-12); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: .04em; }
.idt-mega-cats ul.sub-menu li.idt-sub-all > a.elementor-sub-item::after { content: "\2192"; font-size: var(--idt-t-14); }
.idt-mega-cats ul.sub-menu li.idt-sub-all > a.elementor-sub-item:hover { color: var(--idt-azzurro-hover); }

/* colonna 3: prodotti in evidenza — lo spazio della colonna 2 e riservato,
   perche le sottocategorie sono posizionate in assoluto */
.idt-mega-promo { flex: 1 1 auto; min-width: 0; margin-inline-start: 440px; border-inline-start: 1px solid var(--idt-bordo-chiaro); }
.idt-mega-promo-head { padding-bottom: 4px; }
.idt-mega-promo-title .elementor-heading-title { color: var(--idt-testo); font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-occhiello); }
.idt-mega-promo-link .elementor-heading-title a { color: var(--idt-azzurro); font-size: var(--idt-t-12); font-weight: var(--idt-peso-medio); }
.idt-mega-promo-grid .elementor-loop-container { gap: 12px; }

/* prodotti in offerta del mega menu: quante colonne e quante righe secondo lo spazio.
   Il widget ne carica 9; qui si decide quanti se ne vedono:
     da 1700px          3 colonne x 3 righe
     da 1367 a 1699px   2 colonne x 3 righe
     da 1025 a 1366px   1 colonna  x 3 righe (sotto i 1025 il riquadro e' nascosto)
   Soglie gia' in uso: 1700 e' il widescreen di Elementor, 1366 e' dove il mega menu
   stringe la colonna delle categorie. Le colonne le decide questo CSS e non il widget:
   il laptop di Elementor finisce a 1279 e non a 1366.
   nth-of-type e non nth-child: il primo figlio della griglia e' lo <style> del modello */
.elementor-element.idt-mega-promo-grid .elementor-loop-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1699px) {
  .elementor-element.idt-mega-promo-grid .elementor-loop-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idt-mega-promo-grid .e-loop-item:nth-of-type(n+7) { display: none; }
}
@media (max-width: 1366px) {
  .elementor-element.idt-mega-promo-grid .elementor-loop-container { grid-template-columns: minmax(0, 1fr); }
  .idt-mega-promo-grid .e-loop-item:nth-of-type(n+4) { display: none; }
}

/* --- menu orizzontali della barra --- */
.idt-nav-main, .idt-nav-short { display: flex; align-items: stretch; }
.idt-nav-short { margin-inline-start: auto; }
.idt-nav-main .elementor-nav-menu > li > a.elementor-item, .idt-nav-short .elementor-nav-menu > li > a.elementor-item { display: flex; align-items: center; height: var(--idt-h-normale); padding: 0 12px; font-family: var(--idt-sans); font-size: var(--idt-t-13); font-weight: var(--idt-peso-medio); color: var(--idt-testo); white-space: nowrap; transition: color var(--idt-transizione), box-shadow var(--idt-transizione); }
.idt-nav-main .elementor-nav-menu > li > a.elementor-item:hover, .idt-nav-short .elementor-nav-menu > li > a.elementor-item:hover { color: var(--idt-azzurro); box-shadow: inset 0 -3px 0 var(--idt-azzurro); }
.idt-nav-short .elementor-nav-menu > li:first-child > a.elementor-item { color: var(--idt-rosso); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-pulsante); }
.idt-nav-short .elementor-nav-menu > li:first-child > a.elementor-item:hover { color: var(--idt-rosso-hover); box-shadow: none; }

/* ==========================================================================
   4. BOTTONI
   ========================================================================== */

.idt-btn .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--idt-h-normale); padding: 0 20px; border: 0; border-radius: var(--idt-radius-s); font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; transition: background var(--idt-transizione), color var(--idt-transizione), transform .08s ease; }
.idt-btn .elementor-button-icon svg { width: 17px; height: 17px; }

.idt-btn-red .elementor-button { background: var(--idt-rosso); color: #fff; }
.idt-btn-red .elementor-button:hover { background: var(--idt-rosso-hover); color: #fff; }
.idt-btn-red .elementor-button:active { background: var(--idt-rosso-active); transform: scale(.98); }

.idt-btn-blue .elementor-button { background: var(--idt-azzurro); color: #fff; }
.idt-btn-blue .elementor-button:hover { background: var(--idt-azzurro-hover); color: #fff; }
.idt-btn-blue .elementor-button:active { background: var(--idt-blu); transform: scale(.98); }

.idt-btn-outline .elementor-button { background: #fff; color: var(--idt-azzurro); border: 1px solid var(--idt-azzurro); font-weight: var(--idt-peso-forte); text-transform: none; letter-spacing: 0; }
.idt-btn-outline .elementor-button:hover { background: var(--idt-azzurro-pallido-hover); color: var(--idt-blu); }

.idt-btn-ghost .elementor-button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); font-weight: var(--idt-peso-forte); text-transform: none; letter-spacing: 0; }
.idt-btn-ghost .elementor-button:hover { background: rgba(255,255,255,.14); color: #fff; }

.idt-btn-block .elementor-button { width: 100%; height: var(--idt-h-media); }

/* ==========================================================================
   5. HERO
   ========================================================================== */

/* separazione fra hero e contenuto */
.idt-hero { border-bottom: 1px solid var(--idt-azzurro-pallido-hover); }

.idt-hero-left { flex: 1 1 auto; min-width: 0; }
.idt-hero-kicker .elementor-heading-title { font-family: var(--idt-display); font-size: var(--idt-t-15); letter-spacing: .1em; text-transform: uppercase; color: var(--idt-rosso); }
.idt-hero-title .elementor-heading-title { font-size: 36px; font-weight: var(--idt-peso-nero); line-height: 1.1; letter-spacing: -.015em; color: var(--idt-nero); margin: 0; }
.idt-hero-text { max-width: 560px; color: var(--idt-testo); font-size: var(--idt-t-15); line-height: 1.5; }
.idt-hero-text p { margin: 0; }
.idt-hero-trust .elementor-icon-list-items { gap: 22px; }
.idt-hero-trust .elementor-icon-list-item { font-size: var(--idt-t-12); font-weight: var(--idt-peso-medio); color: var(--idt-testo); }
.idt-hero-trust .elementor-icon-list-icon svg, .idt-hero-trust .elementor-icon-list-icon i { color: var(--idt-azzurro); fill: var(--idt-azzurro); }

.idt-hero-catalog { flex: 0 1 32%; min-width: 468px; }
.idt-hero-catalog-text { flex: 1 1 auto; min-width: 0; }
.idt-hero-catalog-display .elementor-heading-title { font-family: var(--idt-display); font-size: 26px; line-height: 1.05; text-transform: uppercase; color: var(--idt-nero); white-space: pre-line; }
.idt-hero-catalog-note { color: var(--idt-grigio); font-size: var(--idt-t-12); line-height: 1.45; }
.idt-hero-catalog-note p { margin: 0; }
.idt-hero-catalog-cover { flex: 0 0 150px; width: 150px; }
.idt-hero-catalog-cover img { height: 210px; width: 100%; object-fit: contain; border: var(--idt-linea); background: #fff; }

.idt-kicker .elementor-heading-title { color: var(--idt-azzurro); font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-occhiello); }

/* ==========================================================================
   6. SEZIONI DELLA HOME
   ========================================================================== */

/* filetto sotto ogni intestazione di sezione:
   rosso per le offerte, azzurro per novita/correlati, grigio per le altre */
.idt-sec-head { width: 100%; padding-bottom: 8px; border-bottom: var(--idt-linea); }
.idt-sec-offerte .idt-sec-head { border-bottom: 2px solid var(--idt-rosso); }
.idt-sec-novita .idt-sec-head, .idt-pd-related .idt-sec-head { border-bottom: 2px solid var(--idt-azzurro); }
.idt-sec-title .elementor-heading-title { font-size: 22px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-titolo); color: var(--idt-nero); margin: 0; }
.idt-sec-note .elementor-heading-title { color: var(--idt-grigio); font-size: var(--idt-t-12); font-weight: var(--idt-peso-normale); }
.idt-sec-link .elementor-heading-title a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--idt-t-13); font-weight: var(--idt-peso-forte); color: var(--idt-azzurro); }
.idt-sec-link .elementor-heading-title a::after { content: "\203A"; font-size: 18px; line-height: 1; }
.idt-sec-link .elementor-heading-title a:hover { color: var(--idt-azzurro-hover); }

.idt-badge .elementor-heading-title { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; color: #fff; font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-occhiello); }
.idt-badge-red .elementor-heading-title { background: var(--idt-rosso); }
.idt-badge-blue .elementor-heading-title { background: var(--idt-azzurro); }

/* ==========================================================================
   7. CARD PRODOTTO (loop item)
   ========================================================================== */

/* Numero di card visibili per fascia, come nel progetto originale.
   Le colonne sono gestite dai controlli responsive della Griglia Loop
   (mobile 2 · tablet 3 · laptop 3 · desktop 4 · widescreen 6);
   qui si limita solo quante card mostrare per non lasciare righe monche.
   NB: vale per le griglie "vetrina" (home e correlati), MAI per l’archivio,
   che deve mostrare tutti i 30 prodotti della pagina. */
@media (min-width: 1280px) and (max-width: 1699px) {
  .idt-pgrid:not(.idt-pgrid-archivio) .elementor-loop-container > .e-loop-item:nth-child(n+9) { display: none; }
}
@media (max-width: 1279px) {
  .idt-pgrid:not(.idt-pgrid-archivio) .elementor-loop-container > .e-loop-item:nth-child(n+7) { display: none; }
}
@media (max-width: 767px) {
  .idt-pgrid:not(.idt-pgrid-archivio) .elementor-loop-container > .e-loop-item:nth-child(n+5) { display: none; }
}

.idt-card { height: 100%; background: #fff; border: 2px solid var(--idt-bordo); border-radius: var(--idt-radius); overflow: hidden; position: relative; transition: border-color var(--idt-transizione), box-shadow var(--idt-transizione); }
.e-loop-item:hover .idt-card { border-color: var(--idt-azzurro-chiaro); box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.idt-card-media { display: block; background: #fff; }
.idt-card-img { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; background: #fff; }
.idt-card-img .elementor-widget-container { display: contents; }
.idt-card-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
/* filetto grigio fra immagine e contenuto, come nel progetto */
.idt-card-body { flex: 1 1 auto; border-top: var(--idt-linea-chiara); }
.idt-card-body > .elementor-widget { margin: 0; }

.idt-card-brand .elementor-heading-title a, .idt-mini-brand .elementor-heading-title a { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.idt-card-brand .elementor-heading-title, .idt-mini-brand .elementor-heading-title { color: var(--idt-azzurro); font-size: var(--idt-t-10); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-occhiello); }
.idt-card-title .elementor-heading-title, .idt-card-title .elementor-heading-title a, .idt-mini-title .elementor-heading-title, .idt-mini-title .elementor-heading-title a { color: var(--idt-nero); font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); text-transform: uppercase; letter-spacing: var(--idt-ls-titolo); line-height: 1.28; }
.idt-card-title .elementor-heading-title, .idt-mini-title .elementor-heading-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idt-card-title .elementor-heading-title a:hover, .idt-mini-title .elementor-heading-title a:hover { color: var(--idt-azzurro); }
.idt-card-sku .elementor-heading-title { color: var(--idt-grigio-chiaro); font-size: var(--idt-t-10); font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* --- prezzo: spinto in fondo alla card, come nel progetto --- */
.idt-card-price { margin-top: auto; padding-top: 6px; }
.idt-card-price .elementor-heading-title { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 0; font-weight: var(--idt-peso-normale); }
.idt-card-price .price { display: contents; }
.idt-card-price .screen-reader-text, .idt-card-price .woocommerce-price-suffix { display: none !important; }

/* prezzo pieno: badge giallo */
.idt-card-price .elementor-heading-title > .woocommerce-Price-amount { display: inline-flex; align-items: center; font-family: var(--idt-display); font-size: 30px; line-height: 1; letter-spacing: .01em; padding: 4px 10px; background: var(--idt-giallo-prezzo); color: #000; }

/* prezzo scontato: vecchio prezzo barrato + badge rosso/giallo */
.idt-card-price del { padding-bottom: 4px; color: var(--idt-grigio-chiaro); font-family: var(--idt-sans); font-size: var(--idt-t-13); text-decoration: line-through; opacity: 1; }
.idt-card-price ins { display: inline-flex; align-items: center; flex: none; padding: 0; background: var(--idt-rosso-prezzo); text-decoration: none; }
.idt-card-price ins .woocommerce-Price-amount { display: flex; align-items: center; padding: 4px 6px; font-family: var(--idt-display); font-size: 30px; line-height: 1; letter-spacing: .01em; color: var(--idt-giallo-prezzo); }
.idt-card-price ins::after { content: "Prezzo\Avincente"; white-space: pre; align-self: center; padding: 4px 7px 4px 0; color: var(--idt-giallo-prezzo); font-family: var(--idt-display); font-size: var(--idt-t-13); line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; text-align: left; }

/* --- riga quantita + aggiungi al carrello --- */
/* --button-spacing e la variabile con cui Elementor distanzia il pulsante:
   azzerandola la spaziatura la governa il gap del contenitore (8px) */
.idt-card-atc, .idt-mini-atc, .idt-pd-atc { --button-spacing: 0px; }
.idt-card-atc { padding-top: 4px; }
.idt-card-atc .elementor-add-to-cart, .idt-card-atc .elementor-add-to-cart .cart, .idt-card-atc .e-loop-add-to-cart-form-container, .idt-card-atc form.cart { display: flex; align-items: center; gap: 8px; margin: 0; width: 100%; }
/* Il selettore di quantita e definito una volta sola nella sezione 23
   (.idt-qty): qui niente misure, altrimenti la card divergerebbe dagli
   altri due contesti. */
/* WooCommerce aggiunge un margine ai .button consecutivi: qui spazia il gap */
.idt-card-atc a.button, .idt-card-atc button.single_add_to_cart_button, .woocommerce .idt-card-atc a.button { margin: 0; }
.idt-card-atc .screen-reader-text { display: none !important; }

/* pillola con il numero di varianti (prodotti variabili) */
.idt-card-atc .idt-variants { flex: 0 0 auto; display: inline-flex; align-items: center; height: var(--idt-h-media); padding: 0 12px; border: 1px solid var(--idt-azzurro-bordo); border-radius: var(--idt-radius-pill); background: var(--idt-azzurro-pallido); color: var(--idt-blu); font-family: var(--idt-sans); font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); white-space: nowrap; }
.idt-mini-atc .idt-variants { display: none; }
.idt-card-atc button.single_add_to_cart_button, .idt-card-atc a.button, .idt-card-atc .elementor-button, .woocommerce .idt-card-atc a.button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--idt-h-media); padding: 0 12px; border: 0; border-radius: var(--idt-radius-s); background: var(--idt-blu) !important; color: #fff !important; font-family: var(--idt-sans); font-size: var(--idt-t-13); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-pulsante); transition: background var(--idt-transizione), transform .08s ease; }
.idt-card-atc button.single_add_to_cart_button:hover, .idt-card-atc a.button:hover, .idt-card-atc .elementor-button:hover, .woocommerce .idt-card-atc a.button:hover { background: var(--idt-azzurro-hover) !important; color: #fff !important; }
.idt-card-atc button.single_add_to_cart_button:active, .idt-card-atc a.button:active { transform: scale(.98); }
.idt-card-atc a.button.product_type_variable, .idt-card-atc a.button.product_type_grouped, .idt-card-atc a.button.product_type_external, .woocommerce .idt-card-atc a.button.product_type_variable { background: var(--idt-azzurro) !important; }
.woocommerce .idt-card-atc a.button.product_type_variable:hover { background: var(--idt-azzurro-hover) !important; }

.idt-mini-atc a.button, .woocommerce .idt-mini-atc a.button { background: var(--idt-azzurro) !important; color: #fff !important; }
.idt-mini-atc a.button:hover, .woocommerce .idt-mini-atc a.button:hover { background: var(--idt-azzurro-hover) !important; }

/* La targhetta magenta "Novità" sulle card della seconda fascia e' stata
   tolta su richiesta: la fascia ha gia' la sua targhetta nella testata e il
   magenta era l'unico punto del sito con quel colore.
   Il position:relative resta perche' serve al posizionamento dell'immagine. */
.idt-sec-novita .idt-card-media { position: relative; }

/* ==========================================================================
   8. CARD MINI (mega menu)
   ========================================================================== */

.idt-mini { height: 100%; background: #fff; border: 2px solid var(--idt-bordo); border-radius: var(--idt-radius); transition: border-color var(--idt-transizione); }
.e-loop-item:hover .idt-mini { border-color: var(--idt-azzurro-chiaro); }
.idt-mini-img { flex: 0 0 74px; width: 74px; }
.idt-mini-img img { width: 74px; height: 74px; object-fit: contain; }
.idt-mini-text { flex: 1 1 auto; min-width: 0; }
/* marchio e nome prodotto della card mini: stesse regole della card del loop (cap. 7) */
.idt-mini-price .elementor-heading-title { display: flex; align-items: flex-end; gap: 8px; }
.idt-mini-price del { color: var(--idt-grigio-chiaro); font-size: var(--idt-t-12); }
.idt-mini-price ins, .idt-mini-price .elementor-heading-title > .woocommerce-Price-amount { text-decoration: none; font-family: var(--idt-display); font-size: 22px; line-height: 1; padding: 3px 8px; background: var(--idt-giallo-prezzo); color: #000; }
.idt-mini-price ins { background: var(--idt-rosso-prezzo); color: var(--idt-giallo-prezzo); }
.idt-mini-atc a.button, .idt-mini-atc button.single_add_to_cart_button, .idt-mini-atc .elementor-button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 38px; border: 0; border-radius: var(--idt-radius-s); background: var(--idt-azzurro); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-13); font-weight: var(--idt-peso-forte); transition: background var(--idt-transizione); }
.idt-mini-atc a.button:hover, .idt-mini-atc .elementor-button:hover { background: var(--idt-azzurro-hover); }

/* ==========================================================================
   9. CATEGORIE IN EVIDENZA
   ========================================================================== */

.idt-cats ul.products { display: grid !important; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 132px 132px; grid-auto-rows: 132px; gap: 12px; margin: 0; padding: 0; list-style: none; }
.idt-cats ul.products li.product-category { position: relative; display: flex; align-items: flex-end; overflow: hidden; margin: 0 !important; padding: 12px; width: auto !important; float: none !important; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); transition: border-color var(--idt-transizione); }
.idt-cats ul.products li.product-category:hover { border-color: var(--idt-azzurro-chiaro); }
/* la prima categoria occupa la colonna larga (2fr) su due righe */
.idt-cats ul.products li.product-category:first-child { grid-column: 1; grid-row: span 2; background: var(--idt-azzurro-pallido); padding: 16px; }
.idt-cats ul.products li.product-category > a { display: contents; }
.idt-cats ul.products li.product-category img { position: absolute; top: 8px; inset-inline-end: 10px; height: 62%; width: auto; object-fit: contain; margin: 0; }
.idt-cats ul.products li.product-category:first-child img { top: 20%; inset-inline-end: 14px; height: 70%; }
.idt-cats ul.products li.product-category h2.woocommerce-loop-category__title { position: relative; z-index: 1; margin: 0; padding: 2px 0; background: #fff; color: var(--idt-nero); font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); text-transform: uppercase; line-height: 1.2; }
.idt-cats ul.products li.product-category:first-child h2.woocommerce-loop-category__title { max-width: 60%; padding: 10px 14px; border-inline-start: 3px solid var(--idt-rosso); font-size: 17px; letter-spacing: var(--idt-ls-titolo); }
.idt-cats ul.products li.product-category h2 mark.count, .idt-cats ul.products li.product-category h2 .count { display: block; background: none !important; color: var(--idt-grigio); font-size: var(--idt-t-11); font-weight: var(--idt-peso-medio); text-transform: none; padding: 2px 0 0; margin: 0; }

/* prezzo nella card mini */
.idt-mini-price .screen-reader-text, .idt-mini-price .woocommerce-price-suffix, .idt-pd-price .woocommerce-price-suffix, .aws-search-result .woocommerce-price-suffix { display: none !important; }
.idt-mini-atc .elementor-add-to-cart { display: block; }

/* ==========================================================================
   10. MARCHI
   ========================================================================== */

.idt-brands .elementor-loop-container { gap: 10px; }
.idt-brand-card { height: 66px; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); text-align: center; transition: border-color var(--idt-transizione); }
.idt-brand-card:hover { border-color: var(--idt-azzurro-chiaro); }
.idt-brand-name .elementor-heading-title { color: var(--idt-grigio); font-size: var(--idt-t-13); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; }
.idt-brand-card:hover .idt-brand-name .elementor-heading-title { color: var(--idt-nero); }

/* ==========================================================================
   11. FIDUCIA
   ========================================================================== */

.idt-trust { flex-wrap: wrap; }
.idt-trust-item { flex: 1 1 220px; padding: 16px; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); }
.idt-trust-item .elementor-icon-box-wrapper { display: flex; gap: 12px; align-items: flex-start; text-align: start; }
.idt-trust-item .elementor-icon-box-icon { margin: 0; flex: 0 0 auto; }
.idt-trust-item .elementor-icon-box-icon svg, .idt-trust-item .elementor-icon-box-icon i { width: 22px; height: 22px; font-size: 20px; color: var(--idt-azzurro); fill: var(--idt-azzurro); }
.idt-trust-item .elementor-icon-box-title { margin: 0 0 3px; }
.idt-trust-item .elementor-icon-box-title span { color: var(--idt-nero); font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); }
.idt-trust-item .elementor-icon-box-description { color: var(--idt-grigio); font-size: var(--idt-t-12); line-height: 1.45; margin: 0; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

/* bordi di separazione del footer */
.idt-footer-cta { border-top: var(--idt-linea); }
.idt-footer-legal { border-top: var(--idt-linea-chiara); }

.idt-ftr-register, .idt-ftr-newsletter { flex: 1 1 0; min-width: 0; }

.idt-ftr-kicker .elementor-heading-title { color: var(--idt-azzurro); font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-occhiello); }
.idt-ftr-kicker-light .elementor-heading-title { color: var(--idt-azzurro-chiaro); font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-occhiello); }
.idt-ftr-cta-title .elementor-heading-title { color: #fff; font-size: 21px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-titolo); line-height: 1.2; margin: 0; }
.idt-ftr-cta-title-dark .elementor-heading-title { color: var(--idt-nero); font-size: 21px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-titolo); line-height: 1.2; margin: 0; }
.idt-ftr-cta-text { color: rgba(255,255,255,.85); font-size: var(--idt-t-13); line-height: 1.5; }
.idt-ftr-cta-text p { margin: 0; }
.idt-ftr-cta-text-dark { color: var(--idt-grigio); font-size: var(--idt-t-13); line-height: 1.5; }
.idt-ftr-cta-text-dark p { margin: 0; }

.idt-newsletter-form .elementor-form { display: block; }
.idt-newsletter-form .elementor-form-fields-wrapper { display: flex; gap: 8px; align-items: stretch; flex-wrap: nowrap; width: 100%; margin: 0; }
.idt-newsletter-form .elementor-field-group { flex: 1 1 auto; padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; }
.idt-newsletter-form .elementor-field-type-submit { flex: 0 0 auto; }
.idt-newsletter-form .elementor-field-label { display: none !important; }
.idt-newsletter-form input.elementor-field { width: 100%; height: var(--idt-h-normale); padding: 0 14px; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius-s); font-family: var(--idt-sans); font-size: var(--idt-t-14); color: var(--idt-nero); }
.idt-newsletter-form .elementor-button[type="submit"] { height: var(--idt-h-normale); padding: 0 22px; border: 0; border-radius: var(--idt-radius-s); background: var(--idt-rosso); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-pulsante); transition: background var(--idt-transizione); }
.idt-newsletter-form .elementor-button[type="submit"]:hover { background: var(--idt-rosso-hover); }
.idt-ftr-privacy-note { color: var(--idt-grigio-chiaro); font-size: var(--idt-t-11); line-height: 1.45; }
.idt-ftr-privacy-note p { margin: 0; }
.idt-ftr-privacy-note a { color: var(--idt-grigio-chiaro); font-weight: var(--idt-peso-medio); text-decoration: underline; }

.idt-ftr-col { flex: 1 1 0; min-width: 0; }
.idt-ftr-col-brand { flex: 1.1 1 0; }
.idt-ftr-col-servizi { flex: 1.2 1 0; }
.idt-ftr-col-menu { flex: .9 1 0; }
.idt-ftr-logo { text-align: start; }
.idt-ftr-logo .elementor-widget-container, .idt-ftr-logo a { display: block; text-align: start; line-height: 0; }
.idt-ftr-logo img { width: 176px; max-width: 100%; height: auto; display: block; }
.idt-ftr-address { color: var(--idt-grigio); font-size: var(--idt-t-12); line-height: 1.6; }
.idt-ftr-address p { margin: 0; }

.idt-ftr-catalog-link .elementor-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; height: auto; border: 0; border-radius: 0; background: transparent; color: var(--idt-azzurro); font-family: var(--idt-sans); font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); text-transform: none; letter-spacing: 0; transition: color var(--idt-transizione); }
.idt-ftr-catalog-link .elementor-button:hover { background: transparent; color: var(--idt-azzurro-hover); }
.idt-ftr-catalog-link .elementor-button-icon svg, .idt-ftr-catalog-link .elementor-button-icon i { width: 15px; height: 15px; fill: currentColor; color: currentColor; }

/* blocchi "Servizi e assistenza" */
.idt-ftr-svc .elementor-icon-box-wrapper { display: flex; gap: 10px; align-items: flex-start; text-align: start; }
.idt-ftr-svc .elementor-icon-box-icon { margin: 0; flex: 0 0 auto; }
.idt-ftr-svc .elementor-icon-box-icon svg, .idt-ftr-svc .elementor-icon-box-icon i { width: 18px; height: 18px; font-size: 16px; color: var(--idt-azzurro); fill: var(--idt-azzurro); }
.idt-ftr-svc .elementor-icon-box-title { margin: 0 0 2px; }
.idt-ftr-svc .elementor-icon-box-title span, .idt-ftr-svc .elementor-icon-box-title a { color: var(--idt-nero); font-size: var(--idt-t-13); font-weight: var(--idt-peso-forte); }
.idt-ftr-svc .elementor-icon-box-title a:hover { color: var(--idt-azzurro); }
.idt-ftr-svc .elementor-icon-box-description { color: var(--idt-grigio); font-size: var(--idt-t-12); line-height: 1.45; margin: 0; }

.idt-ftr-menu .elementor-nav-menu > li > a.elementor-item { padding: 3px 0; color: var(--idt-testo); font-family: var(--idt-sans); font-size: var(--idt-t-12); font-weight: var(--idt-peso-normale); transition: color var(--idt-transizione); }
.idt-ftr-menu .elementor-nav-menu > li > a.elementor-item:hover { color: var(--idt-azzurro); background: transparent; }

.idt-legal-text .elementor-heading-title { color: var(--idt-grigio-chiaro); font-size: var(--idt-t-10); font-weight: var(--idt-peso-normale); text-transform: uppercase; letter-spacing: .06em; }

/* ==========================================================================
   12-ter. SCHEDA PRODOTTO (Theme Builder → Prodotto singolo)
   ========================================================================== */

.idt-pd-bread { background: #fff; }
.idt-pd-bread .woocommerce-breadcrumb { margin: 0; color: var(--idt-grigio); font-size: var(--idt-t-11-5); }
.idt-pd-bread a { color: var(--idt-grigio); }
.idt-pd-bread a:hover { color: var(--idt-azzurro); }

.idt-pd-images .woocommerce-product-gallery { padding: 18px; background: #fff; border: 2px solid var(--idt-bordo); border-radius: var(--idt-radius); }
.idt-pd-images .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; background: #fff; }
.idt-pd-images .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.idt-pd-images .flex-control-thumbs li { margin: 0; width: auto; float: none; }
.idt-pd-images .flex-control-thumbs li img { border: var(--idt-linea); border-radius: var(--idt-radius); padding: 6px; background: #fff; aspect-ratio: 1 / 1; object-fit: contain; width: 100%; }
.idt-pd-images .flex-control-thumbs li img.flex-active { border-color: var(--idt-azzurro); }

.idt-pd-kicker .elementor-heading-title, .idt-pd-cats .elementor-heading-title { color: var(--idt-azzurro); font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-occhiello); }
.idt-pd-cats a { color: inherit; }
.idt-pd-title .elementor-heading-title { margin: 0; color: var(--idt-nero); font-size: 30px; font-weight: var(--idt-peso-nero); line-height: 1.15; text-transform: uppercase; letter-spacing: -.015em; }
.idt-pd-sku .elementor-heading-title { color: var(--idt-grigio-chiaro); font-size: var(--idt-t-12); font-weight: 500; letter-spacing: .06em; }
.idt-pd-desc { color: var(--idt-testo); font-size: var(--idt-t-13-5); line-height: 1.6; }
.idt-pd-desc p { margin: 0 0 8px; }

.idt-pd-price .price { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0; }
.idt-pd-price .screen-reader-text { display: none !important; }
.idt-pd-price del { padding-bottom: 6px; color: var(--idt-grigio-chiaro); font-size: var(--idt-t-15); text-decoration: line-through; opacity: 1; }
/* prezzo pieno: badge giallo */
.idt-pd-price .price > .woocommerce-Price-amount { display: inline-flex; align-items: center; font-family: var(--idt-display); font-size: 44px; line-height: 1; letter-spacing: .01em; padding: 6px 14px; background: var(--idt-giallo-prezzo); color: #000; }
/* prezzo scontato: badge rosso + etichetta, entrambi in Anton */
.idt-pd-price ins { display: inline-flex; align-items: center; flex: none; padding: 0; background: var(--idt-rosso-prezzo); text-decoration: none; }
.idt-pd-price ins .woocommerce-Price-amount { display: flex; align-items: center; padding: 6px 8px; font-family: var(--idt-display); font-size: 44px; line-height: 1; letter-spacing: .01em; color: var(--idt-giallo-prezzo); }
.idt-pd-price ins::after { content: "Prezzo\Avincente"; white-space: pre; align-self: center; padding: 6px 10px 6px 0; color: var(--idt-giallo-prezzo); font-family: var(--idt-display); font-size: 17px; line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; text-align: left; }
.idt-pd-price-note .elementor-heading-title { color: var(--idt-grigio); font-size: var(--idt-t-11-5); font-weight: var(--idt-peso-normale); }

.idt-pd-atc form.cart { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
/* selettore di quantita: vedi sezione 23 (.idt-qty) */
.idt-pd-atc button.single_add_to_cart_button, .woocommerce .idt-pd-atc button.button.alt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--idt-h-grande); padding: 0 26px; border: 0; border-radius: var(--idt-radius-s); color: #fff !important; font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); text-transform: uppercase; letter-spacing: var(--idt-ls-pulsante); transition: background var(--idt-transizione), transform .08s ease; }
.idt-pd-atc button.single_add_to_cart_button:active { background: var(--idt-rosso-active) !important; transform: scale(.98); }
.idt-pd-atc table.variations { width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.idt-pd-atc table.variations th, .idt-pd-atc table.variations td { padding: 6px 0; text-align: start; font-size: var(--idt-t-13); }
.idt-pd-atc .woocommerce-variation-price .price { margin: 0 0 10px; }

.idt-pd-services { width: 100%; }
.idt-pd-related { margin-top: 8px; }

/* ==========================================================================
   12-bis. DIMENSIONAMENTO FLEX
   Elementor applica flex-grow / flex-shrink / flex-basis tramite variabili
   sulla classe .elementor-element (stessa specificita delle classi custom e
   caricata dopo). Qui le regole di layout vengono riaffermate con una
   specificita superiore.
   ========================================================================== */

/* i contenitori Elementor sono width:100% per default: nelle righe flex
   la larghezza deve essere governata da flex, non da width. */
.elementor-element.idt-logo, .elementor-element.idt-search, .elementor-element.idt-hdr-link, .elementor-element.idt-hdr-labels, .elementor-element.idt-cart, .elementor-element.idt-nav-main, .elementor-element.idt-nav-short, .elementor-element.idt-mega, .elementor-element.idt-badge, .elementor-element.idt-sec-link, .elementor-element.idt-sec-head-left, .elementor-element.idt-topbar-list, .elementor-element.idt-topbar-note, .elementor-element.idt-mega-cats, .elementor-element.idt-mega-promo, .elementor-element.idt-hero-left, .elementor-element.idt-hero-catalog, .elementor-element.idt-hero-catalog-text, .elementor-element.idt-hero-catalog-cover, .elementor-element.idt-mini-img, .elementor-element.idt-mini-text, .elementor-element.idt-ftr-register, .elementor-element.idt-ftr-newsletter, .elementor-element.idt-ftr-col, .elementor-element.idt-trust-item { width: auto; }

.elementor-element.idt-logo, .elementor-element.idt-hdr-link, .elementor-element.idt-hdr-labels, .elementor-element.idt-cart, .elementor-element.idt-nav-main, .elementor-element.idt-nav-short, .elementor-element.idt-mega, .elementor-element.idt-badge, .elementor-element.idt-sec-link, .elementor-element.idt-topbar-note { flex: 0 0 auto; }

.elementor-element.idt-search { flex: 1 1 auto; min-width: 0; }
.elementor-element.idt-topbar-list { flex: 0 1 auto; min-width: 0; }
.elementor-element.idt-sec-head-left { flex: 0 1 auto; min-width: 0; }

.elementor-element.idt-mega-cats { flex: 0 0 380px; width: 380px; }
.elementor-element.idt-mega-promo { flex: 1 1 auto; min-width: 0; }

.elementor-element.idt-hero-left { flex: 1 1 auto; min-width: 0; }
.elementor-element.idt-hero-catalog { flex: 0 1 34%; }
.elementor-element.idt-hero-catalog-text { flex: 1 1 auto; min-width: 0; }
.elementor-element.idt-hero-catalog-cover { flex: 0 0 150px; }

.elementor-element.idt-card-body { flex: 1 1 auto; }
/* prezzo e riga carrello sempre ancorati in fondo alla card:
   Elementor imposta i margini via variabili sulla stessa specificita */
.elementor-element.idt-card-price { margin-top: auto; }
.elementor-element.idt-mini-price { margin-top: auto; }
.elementor-element.idt-mini-img { flex: 0 0 74px; }
.elementor-element.idt-mini-text { flex: 1 1 auto; min-width: 0; }

.elementor-element.idt-ftr-register, .elementor-element.idt-ftr-newsletter { flex: 1 1 0; min-width: 0; }
.elementor-element.idt-ftr-col { flex: 1 1 0; min-width: 0; }
.elementor-element.idt-ftr-col-brand { flex: 1.1 1 0; }
.elementor-element.idt-ftr-col-servizi { flex: 1.2 1 0; }
.elementor-element.idt-ftr-col-menu { flex: .9 1 0; }

.elementor-element.idt-trust-item { flex: 1 1 220px; }

.elementor-element.idt-pd-gallery, .elementor-element.idt-pd-info, .elementor-element.idt-pd-price, .elementor-element.idt-pd-price-note, .elementor-element.idt-pd-service { width: auto; }
.elementor-element.idt-pd-gallery { flex: 0 0 38%; min-width: 380px; }
.elementor-element.idt-pd-info { flex: 1 1 auto; min-width: 0; }
.elementor-element.idt-pd-price { flex: 0 0 auto; }
.elementor-element.idt-pd-price-note { flex: 1 1 140px; min-width: 0; }
.elementor-element.idt-pd-service { flex: 1 1 46%; }

/* i menu della barra non devono andare a capo */
.idt-nav-main .elementor-nav-menu--main > .elementor-nav-menu, .idt-nav-short .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap; }

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

@media (max-width: 1366px) {
  .idt-topbar .elementor-icon-list-item:nth-child(n+4) { display: none; }
  .idt-logo img { width: 190px; }
  .idt-hero-catalog { min-width: 400px; }
}

@media (max-width: 1200px) {
  .idt-topbar, .idt-header-main, .idt-navrow, .idt-hero, .idt-main, .idt-footer-cta, .idt-footer-cols, .idt-footer-legal { padding-inline: 16px !important; }
  .elementor-element.idt-mega-cats { flex: 0 0 320px; width: 320px; }
  .idt-mega-cats .elementor-nav-menu > li > a.elementor-item { white-space: normal; }
  .idt-mega-cats ul.sub-menu { width: 380px !important; min-width: 380px !important; max-width: 380px !important; }
  .idt-mega-promo { margin-inline-start: 380px; }
  .idt-hero { flex-wrap: wrap; }
  .elementor-element.idt-hero-catalog { flex: 1 1 100%; min-width: 100%; }
  .idt-cats ul.products { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .idt-cats ul.products li.product-category:first-child { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 1024px) {
  .idt-nav-main { display: none; }
  .idt-hdr-labels { display: none; }
  .idt-cart .elementor-button-text { display: none; }
  .idt-hero-title .elementor-heading-title { font-size: 30px; }
  .idt-footer-cols { flex-wrap: wrap; }
  .elementor-element.idt-ftr-col-brand, .elementor-element.idt-ftr-col-servizi, .elementor-element.idt-ftr-col-menu { flex: 1 1 45%; }
}

@media (max-width: 767px) {
  :root {
    --idt-topbar-h: 30px;
  }
  .idt-topbar { min-height: 30px !important; }
  .idt-topbar .elementor-icon-list-item:nth-child(n+3) { display: none; }
  .idt-topbar-note { display: none; }
  .idt-topbar .elementor-icon-list-items { gap: 14px; }

  .idt-header-main { flex-wrap: wrap; gap: 10px !important; }
  .idt-logo { order: 1; }
  .idt-logo img { width: 152px; }
  .idt-hdr-link { order: 2; }
  .idt-hdr-labels { display: none; }
  .idt-hdr-link-boxed { border: 0; }
  .idt-cart { order: 3; margin-inline-start: auto; }
  .idt-cart .elementor-button-text { display: none; }
  .elementor-element.idt-search { order: 4; flex: 1 1 100%; }
  .idt-search .aws-container .aws-search-form { height: var(--idt-h-media); }
  .idt-search .aws-container .aws-wrapper, .idt-search .aws-container .aws-search-field, .idt-search .aws-container .aws-search-btn.aws-form-btn { height: 40px; }
  .idt-search .aws-container .aws-search-btn.aws-form-btn { flex-basis: 48px; width: 48px; min-width: 48px; }

  .idt-navrow { min-height: 0 !important; padding-block: 4px !important; }
  .elementor-element.idt-mega { flex-direction: row; align-items: center; gap: 8px; }
  .elementor-element.idt-mega-btn { flex: 1 1 auto; }
  .elementor-element.idt-mega-panel { flex: 0 0 44px; width: 44px; padding: 0 !important; }
  .elementor-element.idt-mega-cats { flex: 0 0 44px; width: 44px; }
  .idt-mega-cats .elementor-nav-menu--main { display: none; }
  .idt-mega-cats .elementor-menu-toggle { width: 44px; height: var(--idt-h-media); border-radius: var(--idt-radius-s); background: var(--idt-rosso); color: #fff; }
  .idt-mega-cats .elementor-menu-toggle svg { fill: #fff; }
  .idt-mega-cats .elementor-nav-menu--dropdown { position: absolute !important; inset-inline: 0 !important; inset-inline-start: 0 !important; top: 100% !important; width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; box-shadow: 0 18px 34px rgba(0,0,0,.18) !important; padding: 8px 12px !important; }
  .idt-mega-btn .elementor-button { width: 100%; }
  .idt-mega-panel { position: static !important; box-shadow: none; padding: 0 !important; flex-direction: column; }
  .idt-mega-panel::before { display: none; }
  .idt-mega-cats { position: static; flex: 1 1 auto; width: auto; padding: 0; max-height: none; overflow: visible; }
  .idt-mega-cats ul.sub-menu { position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; columns: 1; padding: 0 0 0 16px !important; }
  .idt-mega-promo { display: none; }
  .idt-mega-cats ul.sub-menu { min-height: 0 !important; }
  .idt-nav-short { margin-inline-start: 0; width: 100%; }

  .idt-hero { padding: 18px 14px !important; }
  .idt-hero-title .elementor-heading-title { font-size: 25px; line-height: 1.12; }
  .idt-hero-text { font-size: var(--idt-t-13-5); }
  .idt-hero-trust { display: none; }
  .idt-hero-actions { flex-direction: column; }
  .idt-hero-actions .idt-btn, .idt-hero-actions .idt-btn .elementor-button { width: 100%; height: var(--idt-h-grande); }
  .idt-hero-catalog { flex-wrap: wrap; }
  .idt-hero-catalog-cover { flex: 1 1 100%; width: 100%; }
  .idt-hero-catalog-cover img { height: 180px; }

  .idt-main { padding: 16px 12px !important; gap: 26px !important; }
  .idt-sec-title .elementor-heading-title { font-size: 17px; }
  .idt-sec-note { display: none; }
  .idt-pgrid .elementor-loop-container { gap: 8px; }
  .idt-card-title .elementor-heading-title { font-size: var(--idt-t-12-5); }
  .idt-card-price .elementor-heading-title > .woocommerce-Price-amount { font-size: 22px; padding: 3px 7px; }
  .idt-card-price ins .woocommerce-Price-amount { font-size: 22px; padding: 3px 5px; }
  .idt-card-price ins::after { font-size: var(--idt-t-10); padding: 3px 6px 3px 0; }
  .idt-card-price del { font-size: var(--idt-t-11); padding-bottom: 3px; }
  .idt-card-atc .elementor-add-to-cart form.cart { flex-wrap: wrap; }

  .idt-cats ul.products { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 120px; }
  .idt-cats ul.products li.product-category:first-child { grid-column: auto; grid-row: auto; }

  .idt-footer-cta, .idt-footer-cols { flex-wrap: wrap; }
  .elementor-element.idt-ftr-register, .elementor-element.idt-ftr-newsletter, .elementor-element.idt-ftr-col { flex: 1 1 100%; }
  .elementor-element.idt-hero-catalog-cover { flex: 1 1 100%; }
  .idt-newsletter-form .elementor-form-fields-wrapper { flex-wrap: wrap; }
  .idt-newsletter-form .elementor-field-group, .idt-newsletter-form .elementor-field-type-submit { flex: 1 1 100%; }
  .idt-newsletter-form .elementor-button[type="submit"] { width: 100%; }
  .idt-footer-legal { flex-direction: column; align-items: flex-start; }

  .idt-pd-top { flex-wrap: wrap; }
  .elementor-element.idt-pd-gallery, .elementor-element.idt-pd-info { flex: 1 1 100%; min-width: 0; }
  .idt-pd-main { padding: 16px 12px 24px !important; }
  .idt-pd-title .elementor-heading-title { font-size: 22px; }
  .idt-pd-price ins, .idt-pd-price .price > .woocommerce-Price-amount { font-size: 32px; padding: 5px 10px; }
  .idt-pd-price ins::after { font-size: var(--idt-t-13); padding: 0 8px 0 6px; }
  .elementor-element.idt-pd-service { flex: 1 1 100%; }
}

@media (max-width: 1024px) {
  .idt-pd-top { flex-wrap: wrap; }
  .elementor-element.idt-pd-gallery { flex: 1 1 100%; min-width: 0; }
  .elementor-element.idt-pd-info { flex: 1 1 100%; min-width: 0; }
}

/* ==========================================================================
   14. ARCHIVIO PRODOTTI (Theme Builder → Archivio prodotti)
   ========================================================================== */

.idt-arc { align-items: flex-start; }
.elementor-element.idt-arc-side { flex: 0 0 272px; width: 272px; max-width: 272px; min-width: 0; }
.elementor-element.idt-arc-main { flex: 1 1 0%; min-width: 0; }

/* --- intestazioni delle card della colonna filtri ------------------------ */
.idt-arc-card-head .elementor-heading-title, .idt-arc-card-head .elementor-shortcode { font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; color: var(--idt-nero); line-height: 1.3; }
.idt-arc-card-head { padding: 14px 14px 0; }
.idt-arc-card-head--blu { padding: 11px 14px; background: var(--idt-azzurro); }
.idt-arc-card-head--blu .elementor-heading-title, .idt-arc-card-head--blu .elementor-shortcode { color: #fff; }

/* piede "Tutte le N categorie" */
.idt-arc-cats .idt-arc-all { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: var(--idt-linea-chiara); font-size: var(--idt-t-11-5); font-weight: var(--idt-peso-forte); color: var(--idt-blu); text-decoration: none; }
.idt-arc-cats .idt-arc-all::before { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%2300658A'%3E%3Cpath d='M443.733 512l226.133-226.133c17.067-17.067 17.067-42.667 0-59.733s-42.667-17.067-59.733 0l-256 256c-17.067 17.067-17.067 42.667 0 59.733l256 256c8.533 8.533 21.333 12.8 29.867 12.8s21.333 0 29.867-12.8c17.067-17.067 17.067-42.667 0-59.733l-226.133-226.133z'/%3E%3C/svg%3E") no-repeat center / contain; }
.idt-arc-cats .idt-arc-all:hover { background: var(--idt-barra); }

/* --- elenco categorie ---------------------------------------------------- */
.idt-arc-cats .elementor-widget-container > .woocommerce { padding: 6px 0; }
.idt-arc-cats ul.product-categories, .idt-arc-cats ul.children { list-style: none; margin: 0; padding: 0; }
.idt-arc-cats li.cat-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 14px; border-left: 3px solid transparent; transition: background var(--idt-transizione), border-color var(--idt-transizione); }
.idt-arc-cats li.cat-item > a { flex: 1 1 auto; font-size: var(--idt-t-12-5); font-weight: 500; line-height: 1.3; color: var(--idt-testo); text-decoration: none; }
.idt-arc-cats li.cat-item > .count { flex: none; font-size: var(--idt-t-11); color: var(--idt-grigio-chiaro); font-variant-numeric: tabular-nums; }
.idt-arc-cats li.cat-item:hover { background: var(--idt-barra); }
.idt-arc-cats li.current-cat, .idt-arc-cats li.current-cat-parent { background: var(--idt-azzurro-pallido); border-left-color: var(--idt-azzurro); }
.idt-arc-cats li.current-cat > a, .idt-arc-cats li.current-cat-parent > a { color: var(--idt-blu); font-weight: var(--idt-peso-forte); }
.idt-arc-cats ul.children { flex: 1 1 100%; margin: 4px 0 0 -3px; }
.idt-arc-cats ul.children li.cat-item { padding-left: 26px; }

/* --- elenco marchi ------------------------------------------------------- */
.idt-arc-brands .elementor-widget-container > .woocommerce { padding: 6px 0 10px; }
.idt-arc-brands h5 { display: none; }
.idt-arc-brands ul { list-style: none; margin: 0; padding: 0; max-height: 268px; overflow-y: auto; overscroll-behavior: contain; }
.idt-arc-brands ul::-webkit-scrollbar { width: 6px; }
.idt-arc-brands ul::-webkit-scrollbar-thumb { background: var(--idt-bordo); border-radius: var(--idt-radius-pill); }
.idt-arc-brands li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 14px; }
.idt-arc-brands li > a { flex: 1 1 auto; font-size: var(--idt-t-12-5); font-weight: 500; line-height: 1.3; color: var(--idt-testo); text-decoration: none; }
.idt-arc-brands li:hover { background: var(--idt-barra); }
.idt-arc-brands li.chosen > a { color: var(--idt-blu); font-weight: var(--idt-peso-forte); }
.idt-arc-brands li > .count { flex: none; font-size: var(--idt-t-11); color: var(--idt-grigio-chiaro); font-variant-numeric: tabular-nums; }

/* --- filtro prezzo ------------------------------------------------------- */

.idt-arc-price .elementor-widget-container > .woocommerce { padding: 12px 14px 14px; }
.idt-arc-price .price_slider { height: 4px; background: var(--idt-bordo-chiaro); border: 0; border-radius: var(--idt-radius-pill); margin: 10px 7px 18px; }
.idt-arc-price .ui-slider-range { background: var(--idt-azzurro); border-radius: var(--idt-radius-pill); }
.idt-arc-price .ui-slider-handle { width: 14px; height: 14px; top: -5px; margin-left: -7px; background: #fff; border-radius: var(--idt-radius-pill); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); cursor: pointer; }

.idt-arc-price .widget_price_filter .price_slider_wrapper .ui-widget-content { background-color: var(--idt-azzurro-chiaro); }
.idt-arc-price .widget_price_filter .ui-slider .ui-slider-range { background-color: var(--idt-blu); }
.idt-arc-price .widget_price_filter .ui-slider .ui-slider-handle { background-color: var(--idt-azzurro); }
.idt-arc-price .widget_price_filter .ui-slider .ui-slider-handle:hover { background-color: var(--idt-azzurro-hover); }

.idt-arc-price .price_slider_amount { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--idt-t-12); color: var(--idt-grigio); }

.idt-arc-price .price_label { order: 1; }

.idt-arc-price .price_slider_amount .button { order: 2; height: 30px; padding: 0 12px; border: 0; border-radius: var(--idt-radius-s); background: var(--idt-azzurro); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-11-5); font-weight: var(--idt-peso-nero); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background var(--idt-transizione); }

.idt-arc-price .price_slider_amount .button:hover { background: var(--idt-blu); color: #fff; }

.idt-arc-price .clear { display: none; }

/* --- riquadro "Non trovi un articolo?" ----------------------------------- */
.idt-arc-help-t .elementor-heading-title { font-size: var(--idt-t-12-5); font-weight: var(--idt-peso-forte); color: var(--idt-nero); }
.idt-arc-help-x, .idt-arc-help-x p { font-size: var(--idt-t-12); line-height: 1.45; color: var(--idt-testo); margin: 0; }
.idt-arc-help-tel .elementor-heading-title, .idt-arc-help-tel .elementor-heading-title a { font-family: var(--idt-display); font-size: 19px; font-weight: var(--idt-peso-normale); line-height: 1.1; color: var(--idt-blu); text-decoration: none; }

/* --- testata della colonna principale ------------------------------------ */
.idt-arc-title .elementor-heading-title { margin: 0; font-size: 28px; font-weight: var(--idt-peso-nero); line-height: 1.15; letter-spacing: -.015em; text-transform: uppercase; color: var(--idt-nero); }
.idt-arc-count, .idt-arc-count .elementor-shortcode { font-size: var(--idt-t-13); line-height: 1.4; color: var(--idt-grigio); }

/* --- barra strumenti ----------------------------------------------------- */
.idt-arc-results .woocommerce-result-count { margin: 0; font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); color: var(--idt-nero); }
.idt-arc-sort .woocommerce-ordering { margin: 0; }
.idt-arc-sort .orderby { height: 36px; padding: 0 30px 0 11px; border: var(--idt-linea); border-radius: var(--idt-radius-s); background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 1024 1024' fill='%236B6B6B'%3E%3Cpath d='M797.867 354.133c-17.067-17.067-42.667-17.067-59.733 0l-226.133 226.133-226.133-226.133c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l256 256c8.533 8.533 21.333 12.8 29.867 12.8s21.333 0 29.867-12.8l256-256c17.067-17.067 17.067-42.667 0-59.733z'/%3E%3C/svg%3E") no-repeat right 9px center; font-family: var(--idt-sans); font-size: var(--idt-t-12-5); font-weight: var(--idt-peso-medio); color: var(--idt-nero); cursor: pointer; -webkit-appearance: none; appearance: none; }
.idt-arc-sort .orderby:focus { outline: none; border-color: var(--idt-azzurro); }

/* pillole dei filtri attivi */
.idt-arc-chips ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.idt-arc-chips li a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--idt-azzurro-bordo); border-radius: var(--idt-radius-pill); background: var(--idt-azzurro-pallido); font-size: var(--idt-t-11-5); font-weight: var(--idt-peso-medio); color: var(--idt-blu); text-decoration: none; }
.idt-arc-chips li a::after { content: ""; flex: none; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%2300658A'%3E%3Cpath d='M571.733 512l226.133-226.133c17.067-17.067 17.067-42.667 0-59.733s-42.667-17.067-59.733 0l-226.133 226.133-226.133-226.133c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l226.133 226.133-226.133 226.133c-17.067 17.067-17.067 42.667 0 59.733s21.333 12.8 29.867 12.8 21.333 0 29.867-12.8l226.133-226.133 226.133 226.133c8.533 8.533 21.333 12.8 29.867 12.8s21.333 0 29.867-12.8c17.067-17.067 17.067-42.667 0-59.733l-226.133-226.133z'/%3E%3C/svg%3E") no-repeat center / contain; }
.idt-arc-chips li a:hover { background: var(--idt-azzurro-pallido-hover); }

/* --- paginazione --------------------------------------------------------- */
.idt-pgrid-archivio .elementor-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; padding: 14px 16px; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); }
.idt-pgrid-archivio .elementor-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; display: grid; place-items: center; border: var(--idt-linea); border-radius: var(--idt-radius-s); font-size: var(--idt-t-13); font-weight: var(--idt-peso-medio); color: var(--idt-testo); text-decoration: none; transition: background var(--idt-transizione), border-color var(--idt-transizione); }
.idt-pgrid-archivio .elementor-pagination .page-numbers:hover { border-color: var(--idt-azzurro); color: var(--idt-blu); }
.idt-pgrid-archivio .elementor-pagination .page-numbers.current { background: var(--idt-azzurro); border-color: var(--idt-azzurro); color: #fff; font-weight: var(--idt-peso-nero); }
.idt-pgrid-archivio .elementor-pagination .page-numbers.dots { border-color: transparent; min-width: 20px; padding: 0; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1279px) {
  .elementor-element.idt-arc-side { flex-basis: 240px; width: 240px; max-width: 240px; }
}

@media (max-width: 1024px) {
  .idt-arc { flex-wrap: wrap; }
  .elementor-element.idt-arc-side { flex: 1 1 100%; width: 100%; max-width: 100%; }
  .elementor-element.idt-arc-main { flex: 1 1 100%; }
  .idt-arc-brands ul { max-height: 220px; }
}

@media (max-width: 767px) {
  .idt-arc-title .elementor-heading-title { font-size: 22px; }
  .elementor-element.idt-arc-bar { align-items: stretch; }
  .idt-arc-sort .orderby { width: 100%; }
}

/* ==========================================================================
   15. BRICIOLE DI PANE + PAGINE INFORMATIVE A DUE COLONNE
   ========================================================================== */

.idt-bread { border-bottom: var(--idt-linea-chiara); }
.idt-bread-l .elementor-icon-list-items { display: flex; flex-wrap: wrap; align-items: center; }
.idt-bread-l .elementor-icon-list-item { display: flex; align-items: center; }
.idt-bread-l .elementor-icon-list-item > a { text-decoration: none; }
.idt-bread-l .elementor-icon-list-icon { display: inline-flex; }
.idt-bread-l .elementor-icon-list-icon i { font-size: 9px; color: var(--idt-grigio-chiaro); }

/* --- impianto a due colonne ---------------------------------------------- */
.elementor-element.idt-lg-main { flex: 1 1 0%; min-width: 0; }
.elementor-element.idt-lg-side { flex: 0 0 320px; width: 320px; max-width: 320px; min-width: 0; position: sticky; top: 110px; }
.idt-lg-title .elementor-heading-title { margin: 0; font-size: 28px; font-weight: var(--idt-peso-nero); line-height: 1.15; letter-spacing: -.015em; text-transform: uppercase; color: var(--idt-nero); }
.idt-lg-sub p { margin: 0; max-width: 820px; font-size: var(--idt-t-13-5); line-height: 1.6; color: var(--idt-grigio); }
.idt-lg-upd p { margin: 0; font-size: var(--idt-t-11-5); letter-spacing: .04em; color: var(--idt-grigio-chiaro); }
.idt-lg-h .elementor-heading-title { margin: 0; font-size: 19px; font-weight: var(--idt-peso-nero); line-height: 1.25; letter-spacing: var(--idt-ls-titolo); color: var(--idt-nero); }
.idt-lg-p p { margin: 0; font-size: var(--idt-t-13-5); line-height: 1.7; color: var(--idt-testo); text-wrap: pretty; }

/* --- elenchi puntati ------------------------------------------------------ */
.idt-lg-bul .elementor-icon-list-items { display: flex; flex-direction: column; gap: 7px; }
.idt-lg-bul .elementor-icon-list-item { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 0; font-size: var(--idt-t-13); line-height: 1.6; color: var(--idt-testo); }
.idt-lg-bul .elementor-icon-list-icon { display: inline-flex; margin-top: 7px; }
.idt-lg-bul .elementor-icon-list-icon i { font-size: 6px; color: var(--idt-azzurro); }

/* --- titoli delle card laterali ------------------------------------------ */
.idt-side-t .elementor-heading-title { font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; line-height: 1.3; }
.idt-side-t--az .elementor-heading-title { color: var(--idt-azzurro); }
.idt-side-t--blu .elementor-heading-title { color: var(--idt-blu); }

/* --- indice "In questa pagina" ------------------------------------------- */
.idt-lg-toc .elementor-icon-list-items { display: flex; flex-direction: column; gap: 8px; }
.idt-lg-toc .elementor-icon-list-item { margin: 0; padding: 0; }
.idt-lg-toc .elementor-icon-list-item > a, .idt-lg-toc .elementor-icon-list-text { font-size: var(--idt-t-12-5); line-height: 1.35; color: var(--idt-testo); text-decoration: none; }
.idt-lg-toc .elementor-icon-list-item > a:hover .elementor-icon-list-text { color: var(--idt-azzurro); }

/* --- scorciatoie "Per i clienti" ----------------------------------------- */
.idt-lg-links .elementor-icon-list-items { display: flex; flex-direction: column; gap: 0; }
.idt-lg-links .elementor-icon-list-item { position: relative; display: flex; align-items: center; min-height: 40px; margin: 0; padding: 0; border-radius: var(--idt-radius-s); font-size: var(--idt-t-12-5); color: var(--idt-testo); }
.idt-lg-links .elementor-icon-list-item > a, .idt-lg-links .elementor-icon-list-item > .elementor-icon-list-text { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1 1 auto; min-height: 40px; padding: 0 12px; color: inherit; text-decoration: none; }
.idt-lg-links .elementor-icon-list-item::after { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; pointer-events: none; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%233D3D3D'%3E%3Cpath d='M669.867 482.133l-256-256c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l226.133 226.133-226.133 226.133c-17.067 17.067-17.067 42.667 0 59.733s21.333 12.8 29.867 12.8 21.333 0 29.867-12.8l256-256c17.067-17.067 17.067-42.667 0-59.733z'/%3E%3C/svg%3E") no-repeat center / contain; }
.idt-lg-links .elementor-icon-list-item:hover { background: rgba(255, 255, 255, .6); }
.idt-lg-links .elementor-icon-list-item:not(:has(a)),
.idt-lg-links .elementor-icon-list-item.is-current { background: #fff; border: 1px solid var(--idt-azzurro-bordo); font-weight: var(--idt-peso-forte); color: var(--idt-blu); }
.idt-lg-links .elementor-icon-list-item:not(:has(a))::after,
.idt-lg-links .elementor-icon-list-item.is-current::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%2300658A'%3E%3Cpath d='M669.867 482.133l-256-256c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l226.133 226.133-226.133 226.133c-17.067 17.067-17.067 42.667 0 59.733s21.333 12.8 29.867 12.8 21.333 0 29.867-12.8l256-256c17.067-17.067 17.067-42.667 0-59.733z'/%3E%3C/svg%3E"); }

/* --- card assistenza ------------------------------------------------------ */
.idt-lg-help-t .elementor-heading-title { font-size: var(--idt-t-13); font-weight: var(--idt-peso-forte); color: var(--idt-nero); }
.idt-lg-help-x p { margin: 0; font-size: var(--idt-t-12); line-height: 1.5; color: var(--idt-grigio); }
.idt-lg-cta .elementor-button { font-size: var(--idt-t-13); }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .idt-lg { flex-wrap: wrap; }
  .elementor-element.idt-lg-main { flex: 1 1 100%; }
  .elementor-element.idt-lg-side { flex: 1 1 100%; width: 100%; max-width: 100%; position: static; }
}

@media (max-width: 767px) {
  .idt-bread { padding-left: 16px; padding-right: 16px; }
  .idt-lg { padding-left: 16px; padding-right: 16px; }
  .idt-lg-title .elementor-heading-title { font-size: 22px; }
  .idt-lg-h .elementor-heading-title { font-size: 17px; }
}

/* ==========================================================================
   16. CHI SIAMO
   ========================================================================== */

.elementor-element.idt-cs-hero-t { flex: 1 1 0%; min-width: 0; }

.elementor-element.idt-cs-stats { flex: 0 1 34%; min-width: 420px; align-content: start; }

.elementor-element.idt-cs-stat { flex: 1 1 calc(50% - 5px); min-width: 0; background: rgba(255, 255, 255, .10); border-radius: var(--idt-radius); }

.idt-cs-eyebrow .elementor-heading-title { font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; color: var(--idt-azzurro-chiaro); }

.idt-cs-h1 .elementor-heading-title { margin: 0; font-size: 32px; font-weight: var(--idt-peso-nero); line-height: 1.12; letter-spacing: -.015em; text-transform: uppercase; color: #fff; }

.idt-cs-lead p { margin: 0; max-width: 820px; font-size: var(--idt-t-14); line-height: 1.6; color: rgba(255, 255, 255, .88); }

.idt-cs-n .elementor-heading-title { font-family: var(--idt-display); font-size: 26px; font-weight: var(--idt-peso-normale); line-height: 1.05; color: #fff; }

.idt-cs-lbl p { margin: 0; font-size: var(--idt-t-11-5); line-height: 1.35; color: rgba(255, 255, 255, .82); }

.elementor-element.idt-cs-main { flex: 1.35 1 0%; min-width: 0; }
.elementor-element.idt-cs-side { flex: 1 1 0%; min-width: 0; max-width: 380px; }

.idt-cs-h2 .elementor-heading-title { margin: 0; font-size: 20px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-titolo); text-transform: uppercase; color: var(--idt-nero); }

.idt-cs-card-t .elementor-heading-title { margin: 0; font-size: 14.5px; font-weight: var(--idt-peso-forte); line-height: 1.3; color: var(--idt-nero); }

.idt-cs-card-x p { margin: 0; font-size: var(--idt-t-13-5); line-height: 1.65; color: var(--idt-testo); text-wrap: pretty; }

.idt-cs-addr p { margin: 0; font-size: var(--idt-t-13-5); line-height: 1.65; color: var(--idt-testo); }

.idt-cs-hr .elementor-divider-separator { border-top: var(--idt-linea-chiara); }
.idt-cs-hr .elementor-divider { padding-block: 0; }

.idt-cs-cnt .elementor-icon-box-wrapper { align-items: flex-start; gap: 10px; }
.idt-cs-cnt .elementor-icon-box-icon { margin: 2px 0 0; }
.idt-cs-cnt .elementor-icon { font-size: 17px; color: var(--idt-azzurro); }

.idt-cs-cnt .elementor-icon-box-title, .idt-cs-cnt .elementor-icon-box-title > div { margin: 0; font-size: var(--idt-t-13); font-weight: var(--idt-peso-forte); line-height: 1.35; color: var(--idt-nero); }

.idt-cs-cnt .elementor-icon-box-description { margin: 0; font-size: var(--idt-t-12); line-height: 1.4; color: var(--idt-grigio); }

.idt-cs-cat-x p { margin: 0; font-size: var(--idt-t-12-5); line-height: 1.55; color: var(--idt-testo); }

@media (max-width: 1279px) {
  .elementor-element.idt-cs-stats { min-width: 320px; }
}

@media (max-width: 1024px) {
  .idt-cs-hero { flex-wrap: wrap; }
  .elementor-element.idt-cs-hero-t, .elementor-element.idt-cs-stats { flex: 1 1 100%; min-width: 0; }
  .idt-cs-row { flex-wrap: wrap; }
  .elementor-element.idt-cs-main, .elementor-element.idt-cs-side { flex: 1 1 100%; max-width: 100%; }
}

@media (max-width: 767px) {
  .idt-page { padding-left: 16px; padding-right: 16px; }
  .idt-cs-h1 .elementor-heading-title { font-size: 24px; }
  .elementor-element.idt-cs-stat { flex: 1 1 100%; }
}

/* ==========================================================================
   17. CONTATTI
   ========================================================================== */
.elementor-element.idt-ct-q { flex: 1 1 calc(33.333% - 8px); min-width: 220px; }

.idt-ct-q-i .elementor-icon { font-size: 18px; color: var(--idt-azzurro); }
.idt-ct-q-i { margin-bottom: 4px; }

.idt-ct-q-l .elementor-heading-title { font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-tabella); text-transform: uppercase; color: var(--idt-grigio); }

.idt-ct-q-v .elementor-heading-title, .idt-ct-q-v .elementor-heading-title a { font-family: var(--idt-display); font-size: 21px; font-weight: var(--idt-peso-normale); line-height: 1.15; color: var(--idt-blu); text-decoration: none; word-break: break-word; }

.idt-ct-q-n p { margin: 0; font-size: var(--idt-t-11-5); line-height: 1.4; color: var(--idt-grigio); }

.idt-ct-formsub p { margin: 0; font-size: var(--idt-t-12-5); line-height: 1.55; color: var(--idt-grigio); }

/* --- modulo --------------------------------------------------------------- */

.idt-ct-form .elementor-field-group > label.elementor-field-label { font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); color: var(--idt-nero); margin-bottom: 5px; }

.idt-ct-form .elementor-mark-required .elementor-field-label:after { color: var(--idt-rosso); }

.idt-ct-form .elementor-field-textual { height: var(--idt-h-media); padding: 0 12px; border: var(--idt-linea); border-radius: var(--idt-radius-s); background: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-13); color: var(--idt-nero); }

.idt-ct-form textarea.elementor-field-textual { height: auto; padding: 10px 12px; line-height: 1.55; }

.idt-ct-form select.elementor-field-textual { cursor: pointer; }

.idt-ct-form .elementor-field-textual:focus { outline: none; border-color: var(--idt-azzurro); box-shadow: 0 0 0 3px var(--idt-azzurro-pallido); }

.idt-ct-form .elementor-field-textual::placeholder { color: var(--idt-grigio-chiaro); }

.idt-ct-form .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: 9px; font-size: var(--idt-t-12-5); line-height: 1.5; color: var(--idt-testo); }

.idt-ct-form .elementor-field-type-acceptance input[type="checkbox"] { width: 17px; height: 17px; flex: none; margin-top: 2px; accent-color: var(--idt-azzurro); }

.idt-ct-form .elementor-field-type-acceptance a { color: var(--idt-blu); font-weight: var(--idt-peso-medio); }

.idt-ct-form .elementor-button { height: var(--idt-h-normale); padding: 0 22px; border-radius: var(--idt-radius-s); background: var(--idt-azzurro); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-13); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; transition: background var(--idt-transizione); }

.idt-ct-form .elementor-button:hover { background: var(--idt-azzurro-hover); }

@media (max-width: 767px) {
  .elementor-element.idt-ct-q { flex: 1 1 100%; min-width: 0; }
}

/* ==========================================================================
   18. SFOGLIA IL CATALOGO
   ========================================================================== */

.elementor-element.idt-cg-hero-t { flex: 1 1 460px; min-width: 0; }
.elementor-element.idt-cg-cta { flex: 0 0 auto; }

.idt-cg-lead p { margin: 0; max-width: 840px; font-size: var(--idt-t-13-5); line-height: 1.6; color: var(--idt-grigio); }

.idt-cg-cta .elementor-button { height: var(--idt-h-grande); font-size: var(--idt-t-13-5); }
.idt-cg-btn2 .elementor-button { text-transform: uppercase; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); }

.idt-cg-book { min-height: 320px; }
.idt-cg-flip .df-container, .idt-cg-flip ._df_book { width: 100%; }

.elementor-element.idt-cg-info { flex: 1 1 calc(33.333% - 8px); min-width: 240px; }

.idt-cg-info-x p { margin: 0; font-size: var(--idt-t-13); line-height: 1.55; color: var(--idt-testo); }

.idt-cg-info-l .elementor-heading-title, .idt-cg-info-l .elementor-heading-title a { font-size: var(--idt-t-12-5); font-weight: var(--idt-peso-forte); color: var(--idt-blu); text-decoration: none; }

.idt-cg-info-l .elementor-heading-title a:hover { color: var(--idt-azzurro); }

@media (max-width: 767px) {
  .elementor-element.idt-cg-info { flex: 1 1 100%; min-width: 0; }
  .idt-cg-cta { flex-wrap: wrap; }
  .elementor-element.idt-cg-cta .elementor-widget-button { flex: 1 1 100%; }
}

/* ==========================================================================
   19. PAGINE WOOCOMMERCE (carrello, cassa, area riservata, accesso)
   ========================================================================== */

/* NB: la base flex vale solo quando il blocco sta in una riga; dentro un
   contenitore in colonna flex-basis diventa ALTEZZA e crea un vuoto. */
.elementor-element.idt-wc-head-t { min-width: 0; }
.idt-wc-head > .elementor-element.idt-wc-head-t { flex: 1 1 420px; }

.idt-wc-sub p { margin: 0; font-size: var(--idt-t-13); line-height: 1.55; color: var(--idt-grigio); }

/* --- carrello ------------------------------------------------------------- */

.idt-cart .e-cart-section, .idt-checkout .e-checkout__container > div { background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); }

.idt-cart table.shop_table { border: 0; border-radius: 0; margin: 0; }

.idt-cart table.shop_table thead th { padding: 10px 12px; border-bottom: var(--idt-linea-chiara); background: var(--idt-barra); font-size: 10.5px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-tabella); text-transform: uppercase; color: var(--idt-grigio); }

.idt-cart table.shop_table td { padding: 14px 12px; border-top: var(--idt-linea-chiara); font-size: var(--idt-t-13); color: var(--idt-testo); vertical-align: middle; }

.idt-cart td.product-thumbnail img { width: 66px; height: 66px; object-fit: contain; border: var(--idt-linea-chiara); border-radius: var(--idt-radius-s); background: #fff; }

.idt-cart td.product-name a { font-size: var(--idt-t-13-5); font-weight: var(--idt-peso-forte); line-height: 1.3; color: var(--idt-nero); text-decoration: none; }

.idt-cart td.product-name a:hover { color: var(--idt-azzurro); }

.idt-cart .variation { margin: 4px 0 0; font-size: var(--idt-t-11-5); color: var(--idt-grigio); }

.idt-cart td.product-price, .idt-cart td.product-subtotal { font-variant-numeric: tabular-nums; }

.idt-cart td.product-subtotal { font-weight: var(--idt-peso-nero); color: var(--idt-nero); }

/* il campo quantita del carrello usa il selettore unico: vedi sezione 23 */

.idt-cart td.product-remove a.remove { width: 26px; height: 26px; line-height: 24px; color: var(--idt-grigio-chiaro) !important; font-size: 18px; }

.idt-cart td.product-remove a.remove:hover { background: transparent; color: var(--idt-rosso) !important; }

.idt-cart .cart_totals h2, .idt-cart .e-cart-section h2 { margin: 0 0 10px; font-size: var(--idt-t-15); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-titolo); text-transform: uppercase; color: var(--idt-nero); }

.idt-cart .cart_totals table th, .idt-cart .cart_totals table td { padding: 9px 0; border-top: var(--idt-linea-chiara); font-size: var(--idt-t-12-5); color: var(--idt-testo); }

.idt-cart .cart_totals table th { font-weight: var(--idt-peso-medio); }
.idt-cart .cart_totals table td { text-align: right; font-variant-numeric: tabular-nums; }

.idt-cart .cart_totals tr.order-total th, .idt-cart .cart_totals tr.order-total td { font-size: var(--idt-t-15); font-weight: var(--idt-peso-nero); color: var(--idt-nero); }

.idt-cart .checkout-button, .idt-cart .wc-proceed-to-checkout a.button { display: flex; align-items: center; justify-content: center; height: 50px; border-radius: var(--idt-radius-s); background: var(--idt-rosso); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; }

.idt-cart .checkout-button:hover { background: var(--idt-rosso-hover); color: #fff; }

.idt-cart .coupon input.input-text { height: var(--idt-h-compatta); padding: 0 12px; border: var(--idt-linea); border-radius: var(--idt-radius-s); font-family: var(--idt-sans); font-size: var(--idt-t-13); }

.idt-cart .coupon button.button { height: var(--idt-h-compatta); padding: 0 16px; border: 0; border-radius: var(--idt-radius-s); background: var(--idt-azzurro); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-12-5); font-weight: var(--idt-peso-nero); text-transform: uppercase; }

/* aggiunta rapida per codice */

.idt-qa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.idt-qa-sku, .idt-qa-qty { height: var(--idt-h-compatta); border: var(--idt-linea); border-radius: var(--idt-radius-s); padding: 0 12px; font-family: var(--idt-sans); font-size: var(--idt-t-13); color: var(--idt-nero); background: #fff; }

.idt-qa-sku { flex: 1 1 140px; min-width: 0; }
.idt-qa-qty { flex: 0 0 74px; text-align: center; font-weight: var(--idt-peso-forte); }

.idt-qa-sku:focus, .idt-qa-qty:focus { outline: none; border-color: var(--idt-azzurro); }

.idt-qa-btn { flex: 0 0 auto; height: var(--idt-h-compatta); padding: 0 18px; border: 0; border-radius: var(--idt-radius-s); background: var(--idt-azzurro); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-12-5); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; cursor: pointer; transition: background var(--idt-transizione); }

.idt-qa-btn:hover { background: var(--idt-azzurro-hover); }

.idt-qa-msg { flex: 1 1 100%; font-size: var(--idt-t-12); color: var(--idt-rosso); }

.elementor-element.idt-cart-x { flex: 1 1 calc(50% - 6px); min-width: 260px; }

.idt-cart-x-t p { margin: 0; font-size: var(--idt-t-12-5); line-height: 1.55; color: var(--idt-testo); }

/* --- cassa ---------------------------------------------------------------- */

.idt-checkout h3, .idt-checkout .e-checkout-section-title { margin: 0 0 12px; font-size: 16px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-titolo); color: var(--idt-nero); }

.idt-checkout .form-row label { font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); color: var(--idt-nero); margin-bottom: 5px; }

.idt-checkout .form-row input.input-text, .idt-checkout .form-row textarea, .idt-checkout .select2-container .select2-selection--single { height: var(--idt-h-media); padding: 0 12px; border: var(--idt-linea); border-radius: var(--idt-radius-s); font-family: var(--idt-sans); font-size: var(--idt-t-13); color: var(--idt-nero); }

.idt-checkout .form-row textarea { height: auto; padding: 10px 12px; }

.idt-checkout table.shop_table th, .idt-checkout table.shop_table td { padding: 10px 0; border-top: var(--idt-linea-chiara); font-size: var(--idt-t-12-5); }

.idt-checkout tr.order-total th, .idt-checkout tr.order-total td { font-size: var(--idt-t-15); font-weight: var(--idt-peso-nero); color: var(--idt-nero); }

.idt-checkout #place_order { width: 100%; height: 52px; border: 0; border-radius: var(--idt-radius-s); background: var(--idt-rosso); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; }

.idt-checkout #place_order:hover { background: var(--idt-rosso-hover); }

/* --- area riservata ------------------------------------------------------- */

.idt-account .woocommerce { display: flex; align-items: flex-start; gap: 24px; }

.idt-account .woocommerce::before, .idt-account .woocommerce::after { content: none; }

.idt-account .woocommerce-MyAccount-navigation { flex: 0 0 272px; width: 272px; max-width: 272px; float: none; margin: 0; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); overflow: hidden; }

.idt-account .woocommerce-MyAccount-navigation::before { content: "Area riservata"; display: block; padding: 11px 14px; background: var(--idt-blu); color: #fff; font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; }

body .elementor-element.idt-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a { margin-top: 6px; border-top: var(--idt-linea-chiara); border-left-color: transparent; color: var(--idt-rosso); font-weight: var(--idt-peso-forte); }

body .elementor-element.idt-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a:hover { background: transparent; color: var(--idt-rosso-hover); }

.idt-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }

/* selettore volutamente lungo: il CSS generato da Elementor per il widget
   Il mio account ha specificita alta e sovrascriverebbe le regole corte. */
body .elementor-element.idt-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; border-left: 3px solid transparent; background: transparent; font-size: var(--idt-t-12-5); font-weight: 500; color: var(--idt-testo); text-decoration: none; transition: background var(--idt-transizione), color var(--idt-transizione); }

body .elementor-element.idt-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link > a:hover { background: var(--idt-barra); color: var(--idt-blu); }

body .elementor-element.idt-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link.is-active > a { background: var(--idt-azzurro-pallido); border-left-color: var(--idt-azzurro); color: var(--idt-blu); font-weight: var(--idt-peso-forte); }

.idt-account .woocommerce-MyAccount-content { flex: 1 1 0%; width: auto; min-width: 0; float: none; margin: 0; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); padding: 20px 22px; font-size: var(--idt-t-13-5); line-height: 1.65; color: var(--idt-testo); }

/* Elementor disegna una SECONDA cornice sul wrapper interno del contenuto.
   Il suo selettore usa :not() ed e imbattibile: si azzera dalle variabili del
   widget, cosi la card resta solo quella esterna. */
.elementor-element.idt-account { --sections-border-width: 0px; --sections-border-radius: 0px; --sections-border-color: transparent; --sections-padding: 20px 22px; }

body .elementor-element.idt-account .woocommerce-MyAccount-content-wrapper, body .elementor-element.idt-account .woocommerce-MyAccount-content-wrapper-no-data { margin: 0; background: transparent; box-shadow: none; }

.idt-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.idt-account .woocommerce-MyAccount-content a { color: var(--idt-blu); font-weight: var(--idt-peso-medio); }

.idt-account .woocommerce-MyAccount-content .woocommerce-Button, .idt-account .woocommerce-MyAccount-content .button { height: var(--idt-h-media); padding: 0 18px; border: 0; border-radius: var(--idt-radius-s); background: var(--idt-azzurro); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-12-5); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; }

.idt-account .woocommerce-MyAccount-content .button:hover { background: var(--idt-azzurro-hover); color: #fff; }

.idt-account .woocommerce-MyAccount-content table.shop_table th { padding: 9px 10px; background: var(--idt-barra); font-size: 10.5px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-tabella); text-transform: uppercase; color: var(--idt-grigio); }

.idt-account .woocommerce-MyAccount-content table.shop_table td { padding: 11px 10px; border-top: var(--idt-linea-chiara); font-size: var(--idt-t-12-5); }

.elementor-element.idt-tel-card { max-width: 320px; }

.idt-tel-t .elementor-heading-title { font-size: var(--idt-t-13); font-weight: var(--idt-peso-forte); color: var(--idt-nero); }

.idt-tel-x p { margin: 0; font-size: var(--idt-t-12); line-height: 1.5; color: var(--idt-grigio); }

/* --- avvisi WooCommerce --------------------------------------------------- */

.woocommerce-info, .woocommerce-message, .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 13px 16px; border: 1px solid var(--idt-azzurro-bordo); border-top-width: 1px; border-radius: var(--idt-radius); background: var(--idt-azzurro-pallido); font-size: var(--idt-t-13); line-height: 1.5; color: var(--idt-testo); list-style: none; }

.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { content: none; }

.woocommerce-message { border-color: #A9DCB8; background: #EFF9F2; }

.woocommerce-error { border-color: #F0BDBD; background: #FDF1F1; color: #8F2020; }

.woocommerce-info .button, .woocommerce-message .button { margin-inline-start: auto; height: 38px; line-height: 38px; padding: 0 16px; border: 0; border-radius: var(--idt-radius-s); background: var(--idt-azzurro); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-12); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; }

.woocommerce-info .button:hover, .woocommerce-message .button:hover { background: var(--idt-azzurro-hover); color: #fff; }

/* --- accesso e registrazione ---------------------------------------------- */

.elementor-element.idt-ag-card { flex: 1 1 460px; min-width: 0; }
.elementor-element.idt-ag-benefit { flex: 1 1 380px; max-width: 520px; }

.idt-ag-login .elementor-field-group > label { font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); color: var(--idt-nero); margin-bottom: 5px; }

.idt-ag-login .elementor-field-textual { height: var(--idt-h-normale); padding: 0 12px; border: var(--idt-linea); border-radius: var(--idt-radius-s); background: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-13); }

.idt-ag-login .elementor-field-textual:focus { outline: none; border-color: var(--idt-azzurro); box-shadow: 0 0 0 3px var(--idt-azzurro-pallido); }

.idt-ag-login .elementor-field-type-checkbox label, .idt-ag-login .elementor-lost-password a { font-size: var(--idt-t-12-5); color: var(--idt-testo); }

.idt-ag-login .elementor-lost-password a { color: var(--idt-blu); font-weight: var(--idt-peso-medio); }

.idt-ag-login .elementor-button { height: var(--idt-h-grande); border-radius: var(--idt-radius-s); background: var(--idt-azzurro); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-13-5); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; }

.idt-ag-login .elementor-button:hover { background: var(--idt-azzurro-hover); }

.idt-ag-reg-t .elementor-heading-title { font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); color: var(--idt-nero); }

.idt-ag-reg-x p { margin: 0; font-size: var(--idt-t-12-5); line-height: 1.6; color: var(--idt-testo); }

.idt-ag-v .elementor-icon { font-size: 18px; }

.idt-ag-note p { margin: 0; font-size: var(--idt-t-11-5); line-height: 1.5; color: var(--idt-grigio); }

@media (max-width: 1024px) {
  .idt-account .woocommerce { flex-wrap: wrap; }
  .idt-account .woocommerce-MyAccount-navigation { flex: 1 1 100%; width: 100%; max-width: 100%; }
  .idt-account .woocommerce-MyAccount-content { flex: 1 1 100%; }
}

@media (max-width: 767px) {
  .idt-cart table.shop_table td { padding: 10px 8px; }
  .elementor-element.idt-cart-x { flex: 1 1 100%; min-width: 0; }
  .elementor-element.idt-tel-card { max-width: 100%; }
}

/* ==========================================================================
   19-bis. CARRELLO / CASSA — sovrascritture ad alta specificita
   Il CSS generato da Elementor per i widget Carrello e Cassa usa selettori
   .elementor-<post> .elementor-element.elementor-element-<id> ... e batte le
   regole corte della sezione 19: qui vengono ripetute con piu specificita.
   ========================================================================== */

/* I widget Woo di Elementor colorano i link con selettori :not() a specificita
   altissima: si governano dalle loro variabili, non riscrivendo il selettore. */
.elementor-element.idt-cart, .elementor-element.idt-checkout { --links-normal-color: var(--idt-nero); --links-hover-color: var(--idt-azzurro); --product-link-normal-color: var(--idt-nero); --product-link-hover-color: var(--idt-azzurro); --order-summary-variations-color: var(--idt-grigio); }

body .elementor-element.idt-cart td.product-name a { text-decoration: none; }

body .elementor-element.idt-cart td.product-name a:hover { color: var(--idt-azzurro); }

/* Dopo l’aggiunta AJAX WooCommerce infila nella card il link "Visualizza
   carrello", che prendeva il colore di default dei link del tema (#CC3366) e
   stringeva il pulsante. Nel progetto non esiste: il riscontro e la spunta sul
   pulsante e il contatore nell’header. */
.idt-card-atc a.added_to_cart, .e-loop-item a.added_to_cart { display: none !important; }

/* dopo l’aggiunta WooCommerce mette una spunta in ::after dentro il pulsante:
   senza queste due regole il testo andava a capo ("AGGIU / NGI") */
.idt-card-atc a.button, .idt-card-atc button.button, .idt-card-atc .elementor-add-to-cart a.button { flex: 1 1 auto; min-width: 0; white-space: nowrap; }

/* dove invece resta visibile, ha i colori del progetto */
a.added_to_cart { color: var(--idt-blu); font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); text-decoration: none; }
a.added_to_cart:hover { color: var(--idt-azzurro); }

/* niente misure locali: il carrello usa il selettore unico della sezione 23.
   Il CSS del widget Carrello di Elementor va comunque battuto in specificita. */
body .elementor-element.idt-cart .idt-qty input.qty { height: var(--idt-h-compatta); width: 28px; min-width: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); color: var(--idt-nero); }

body .elementor-element.idt-cart .cart_totals h2, body .elementor-element.idt-cart .e-cart-section h2 { margin: 0 0 10px; font-size: var(--idt-t-15); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-titolo); text-transform: uppercase; color: var(--idt-nero); }

body .elementor-element.idt-cart .wc-proceed-to-checkout a.checkout-button, body .elementor-element.idt-cart a.checkout-button { background-color: var(--idt-rosso); color: #fff; font-family: var(--idt-sans); transition: background-color var(--idt-transizione); }

body .elementor-element.idt-cart .wc-proceed-to-checkout a.checkout-button:hover, body .elementor-element.idt-cart a.checkout-button:hover { background-color: var(--idt-rosso-hover); color: #fff; }

body .elementor-element.idt-cart tr.order-total th, body .elementor-element.idt-cart tr.order-total td { font-size: var(--idt-t-15); font-weight: var(--idt-peso-nero); color: var(--idt-nero); }

/* --- cassa ---------------------------------------------------------------- */

body .elementor-element.idt-checkout .form-row label, body .elementor-element.idt-checkout .woocommerce-billing-fields label { font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); color: var(--idt-nero); }

body .elementor-element.idt-checkout table.shop_table tr.order-total th, body .elementor-element.idt-checkout table.shop_table tr.order-total td { font-size: var(--idt-t-15); font-weight: var(--idt-peso-nero); color: var(--idt-nero); }

body .elementor-element.idt-checkout #place_order { width: 100%; height: 52px; border: 0; border-radius: var(--idt-radius-s); background-color: var(--idt-rosso); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; transition: background-color var(--idt-transizione); }

body .elementor-element.idt-checkout #place_order:hover { background-color: var(--idt-rosso-hover); }

/* ==========================================================================
   20. SCHEDA PRODOTTO IN OFFERTA — sovrascritture ad alta specificita

   WooCommerce stila il prezzo con ".woocommerce div.product p.price ins"
   (0,3,3): batte le regole della sezione 12-ter e riportava <ins> a
   background: inherit + display: inline-block (blockificato a block dentro il
   flex), rompendo il badge rosso "Prezzo vincente". Qui le stesse regole sono
   riscritte con la catena WooCommerce davanti.
   ========================================================================== */

.woocommerce div.product .idt-pd-price p.price { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin: 0; }

.woocommerce div.product .idt-pd-price p.price del { display: inline-block; padding-bottom: 6px; color: var(--idt-grigio-chiaro); font-size: var(--idt-t-15); text-decoration: line-through; opacity: 1; }

/* prezzo pieno: targhetta gialla */
.woocommerce div.product .idt-pd-price p.price > .woocommerce-Price-amount { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--idt-giallo-prezzo); color: #000; font-family: var(--idt-display); font-size: 44px; line-height: 1; letter-spacing: .01em; }

/* prezzo scontato: blocco rosso + etichetta, entrambi in Anton */
.woocommerce div.product .idt-pd-price p.price ins { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0; background: var(--idt-rosso-prezzo); text-decoration: none; font-weight: var(--idt-peso-normale); }

.woocommerce div.product .idt-pd-price p.price ins .woocommerce-Price-amount { display: flex; align-items: center; padding: 6px 8px; background: transparent; color: var(--idt-giallo-prezzo); font-family: var(--idt-display); font-size: 44px; line-height: 1; letter-spacing: .01em; }

.woocommerce div.product .idt-pd-price p.price ins::after { content: "Prezzo\Avincente"; white-space: pre; align-self: center; padding: 6px 10px 6px 0; color: var(--idt-giallo-prezzo); font-family: var(--idt-display); font-size: 17px; line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; text-align: left; }

.woocommerce div.product .idt-pd-price .screen-reader-text, .woocommerce div.product .idt-pd-price .woocommerce-price-suffix { display: none; }

/* --- "Risparmiate € X" + nota, colonna a destra del prezzo ---------------- */

.elementor-element.idt-pd-pricemeta { flex: 0 1 auto; width: auto; align-self: flex-end; }

.elementor-element.idt-pd-pricemeta > .elementor-widget { flex: 0 0 auto; height: auto; align-self: flex-start; }

.idt-pd-save .elementor-shortcode { display: block; font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); line-height: 1.3; color: var(--idt-rosso); }

.idt-pd-save:empty, .idt-pd-save .elementor-shortcode:empty { display: none; }

/* --- badge "In offerta!" di WooCommerce ------------------------------------
   Non esiste nel progetto: l'offerta si legge dal blocco prezzo rosso. */

.woocommerce span.onsale, .woocommerce ul.products li.product .onsale, .idt-card .onsale { display: none; }

/* ==========================================================================
   21. SCHEDA PRODOTTO — galleria e riga marchio/categorie
   ========================================================================== */

/* La cornice della galleria: senza il padding l’immagine copre gli angoli
   arrotondati. Il selettore e lungo perche il CSS del widget Elementor
   azzerava il padding della regola breve della sezione 12-ter. */
body.woocommerce div.product .elementor-widget-woocommerce-product-images.idt-pd-images div.images, body.woocommerce #content div.product .elementor-widget-woocommerce-product-images.idt-pd-images div.images { padding: 18px; background: #fff; border: 2px solid var(--idt-bordo); border-radius: var(--idt-radius); overflow: hidden; }

.woocommerce div.product .idt-pd-images .woocommerce-product-gallery__wrapper, .woocommerce div.product .idt-pd-images .woocommerce-product-gallery__image, .woocommerce div.product .idt-pd-images .flex-viewport { border-radius: var(--idt-radius-s); overflow: hidden; }

.woocommerce div.product .idt-pd-images .woocommerce-product-gallery__image img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: var(--idt-radius-s); }

/* niente lightbox: via la lente e il cursore "zoom" */
.woocommerce div.product .idt-pd-images .woocommerce-product-gallery__trigger, .woocommerce div.product .idt-pd-images .pswp, .woocommerce div.product .idt-pd-images .zoomImg { display: none !important; }

.woocommerce div.product .idt-pd-images .woocommerce-product-gallery__image, .woocommerce div.product .idt-pd-images .woocommerce-product-gallery__image img { cursor: default; }

/* Miniature: WooCommerce impone "width: 25%" alle <li> con specificita (0,4,3);
   dentro la griglia il 25% si calcola sulla colonna e le riduce a 29px. */
body.woocommerce div.product .idt-pd-images div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }

body.woocommerce div.product .idt-pd-images div.images .flex-control-thumbs li { width: auto; margin: 0; float: none; list-style: none; }

body.woocommerce div.product .idt-pd-images div.images .flex-control-thumbs li img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: 6px; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); opacity: 1; cursor: pointer; }

body.woocommerce div.product .idt-pd-images div.images .flex-control-thumbs li img.flex-active, body.woocommerce div.product .idt-pd-images div.images .flex-control-thumbs li img:hover { border-color: var(--idt-azzurro); }

/* --- marchio · categorie sulla stessa riga -------------------------------- */

.elementor-element.idt-pd-kickerrow { width: auto; }

.elementor-element.idt-pd-kickerrow > .elementor-widget { flex: 0 1 auto; width: auto; max-width: 100%; }

.idt-pd-kickerrow .idt-pd-cats .elementor-heading-title::before { content: "\00b7"; margin-inline-end: 6px; color: var(--idt-azzurro); }

/* ==========================================================================
   22. TABELLA VARIANTI (prodotti variabili)
   ========================================================================== */

/* sui prodotti variabili il modulo standard di WooCommerce lascia il posto
   alla tabella: le quantita si scelgono riga per riga */
.product-type-variable .idt-pd-atc { display: none; }

/* prezzo dei variabili: valgono le targhette del cap. 20, qui solo il telefono.
   Prezzi diversi fra le varianti: ogni importo ha la sua targhetta, come nel loop.
   Stesso prezzo e stesso sconto su tutte: WooCommerce stampa barrato + scontato
   e la scheda appare identica a quella di un prodotto semplice. */

/* sul telefono la fascia "da - a" sta su una riga solo a corpo ridotto: a 44px la
   seconda targhetta andava a capo lasciando il trattino appeso in fondo alla prima */
@media (max-width: 767px) {
  .woocommerce div.product.product-type-variable .idt-pd-price p.price > .woocommerce-Price-amount { font-size: 32px; padding: 5px 10px; }
}

.idt-vt { background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); overflow: hidden; }

.idt-vt-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 14px; border-bottom: var(--idt-linea-chiara); }

.idt-vt-title { font-size: var(--idt-t-13-5); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; color: var(--idt-nero); }

.idt-vt-note { font-size: var(--idt-t-11-5); color: var(--idt-grigio); }

/* --- tabella -------------------------------------------------------------- */

.idt-vt-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; table-layout: fixed; }

.idt-vt-table th, .idt-vt-table td { padding: 9px 14px; border: 0; vertical-align: middle; text-align: start; }

.idt-vt-table thead th { background: var(--idt-barra); border-bottom: var(--idt-linea-chiara); font-size: 10.5px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-tabella); text-transform: uppercase; color: var(--idt-grigio); }

.idt-vt-table tbody tr + tr td { border-top: var(--idt-linea-chiara); }

.idt-vt-table tbody tr:nth-child(even) td { background: #FCFCFC; }

.idt-vt-table .idt-vt-c-name { width: 40%; }
.idt-vt-table .idt-vt-c-sku { width: 20%; text-align: center; }
.idt-vt-table .idt-vt-c-price { width: 20%; text-align: end; }
.idt-vt-table .idt-vt-c-qty { width: 20%; text-align: end; }

td.idt-vt-c-name { font-size: var(--idt-t-13-5); line-height: 1.3; color: var(--idt-nero); }

td.idt-vt-c-sku { font-size: var(--idt-t-12-5); color: var(--idt-grigio-chiaro); font-variant-numeric: tabular-nums; }

td.idt-vt-c-price { font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); color: var(--idt-nero); font-variant-numeric: tabular-nums; white-space: nowrap; }

td.idt-vt-c-price del { display: inline-block; margin-inline-end: 6px; font-size: var(--idt-t-12); font-weight: var(--idt-peso-normale); color: var(--idt-grigio-chiaro); text-decoration: line-through; }

/* prezzo scontato della variante: la targhetta "prezzo vincente" senza la scritta,
   giallo su rosso come nel loop e nella scheda. Anton ha un solo peso: il 700 della
   cella lo farebbe ingrossare dal browser, quindi il peso torna normale */
td.idt-vt-c-price del + .idt-vt-amount { display: inline-block; padding: 4px 7px; background: var(--idt-rosso-prezzo); color: var(--idt-giallo-prezzo); font-family: var(--idt-display); font-size: 18px; font-weight: var(--idt-peso-normale); line-height: 1; letter-spacing: .01em; vertical-align: middle; }

/* riga selezionata */
.idt-vt-row.is-selected td { background: var(--idt-azzurro-pallido); }

.idt-vt-row--out td { opacity: .55; }

.idt-vt-outlabel { font-size: var(--idt-t-11-5); color: var(--idt-grigio); }

/* righe oltre le prime sei */
.idt-vt-row--extra { display: none; }
.idt-vt.is-open .idt-vt-row--extra { display: table-row; }

/* --- stepper quantita: definito nella sezione 23 (.idt-qty) --------------- */

/* --- piede ---------------------------------------------------------------- */

.idt-vt-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 11px 14px; border-top: var(--idt-linea-chiara); }

.idt-vt-toggle { padding: 0; border: 0; background: transparent; color: var(--idt-azzurro); font-family: var(--idt-sans); font-size: var(--idt-t-12-5); font-weight: var(--idt-peso-forte); cursor: pointer; }

.idt-vt-toggle:hover { color: var(--idt-blu); text-decoration: underline; }

.idt-vt-summary { font-size: var(--idt-t-12-5); color: var(--idt-grigio); text-align: end; }

.idt-vt-summary.is-active { color: var(--idt-testo); }
.idt-vt-summary strong { color: var(--idt-nero); font-weight: var(--idt-peso-nero); }

/* --- pulsante ------------------------------------------------------------- */

.idt-vt-add { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; border: 0; border-radius: 0; background: var(--idt-blu); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-15); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; cursor: pointer; transition: background var(--idt-transizione); }

.idt-vt-add::before { content: ""; width: 19px; height: 19px; flex: none; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%23ffffff'%3E%3Cpath d='M426.667 896c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z M896 896c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z M977.067 273.067c-8.533-8.533-21.333-17.067-34.133-17.067h-691.2l-38.4-179.2c0-21.333-21.333-34.133-42.667-34.133h-85.333c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h51.2l38.4 179.2s0 0 0 0l68.267 315.733c12.8 59.733 64 102.4 123.733 102.4s0 0 0 0h418.133c59.733 0 110.933-42.667 123.733-102.4l68.267-315.733c0-12.8 0-25.6-8.533-34.133zM832 610.133c-4.267 21.333-21.333 34.133-42.667 34.133h-418.133c-21.333 0-38.4-12.8-42.667-34.133l-55.467-264.533h618.667l-59.733 264.533z'/%3E%3C/svg%3E") no-repeat center / contain; }

.idt-vt-add:hover { background: var(--idt-azzurro); }
.idt-vt-add:active { background: var(--idt-azzurro-hover); }

/* --- avvisi sulla scheda -------------------------------------------------- */

.idt-pd-notices:empty { display: none; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 767px) {
  .idt-vt-table .idt-vt-c-sku { display: none; }
  /* la pillola quantita e larga 106px in tutti i contesti: la colonna deve
     contenerla senza stringerla */
  .idt-vt-table .idt-vt-c-qty { width: 118px; }
  .idt-vt-table .idt-vt-c-price { width: 84px; }
  .idt-vt-table .idt-vt-c-name { width: auto; }
  .idt-vt-table th, .idt-vt-table td { padding: 9px 10px; }
  /* barrato sopra e scontato sotto: affiancati non stavano negli 84px della colonna
     e finivano sotto il selettore delle quantita */
  td.idt-vt-c-price del { display: block; margin: 0 0 3px; }
}

/* ==========================================================================
   23. SELETTORE DI QUANTITA — unico per loop, scheda semplice e varianti

   Misure del progetto: pillola 44px, pulsanti 38x44, valore 26px / 14px 700.
   Le icone − e + sono maschere CSS, cosi seguono il colore del testo e
   valgono sia per i pulsanti creati da idt-quantity.js sia per quelli
   stampati dalla tabella varianti.
   ========================================================================== */

.idt-qty { display: inline-flex; align-items: center; flex: 0 0 auto; height: var(--idt-h-media); border: var(--idt-linea); border-radius: var(--idt-radius-pill); background: #fff; overflow: hidden; }

.idt-qty label, .idt-qty .screen-reader-text { display: none !important; }

.idt-qty-btn { display: grid; place-items: center; width: 38px; height: var(--idt-h-compatta); flex: none; padding: 0; border: 0; background: #fff; color: var(--idt-testo); cursor: pointer; transition: background var(--idt-transizione), color var(--idt-transizione); }

.idt-qty-btn::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }

.idt-qty-minus::before { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M810.667 469.333h-597.333c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h597.333c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M810.667 469.333h-597.333c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h597.333c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667z'/%3E%3C/svg%3E"); }

.idt-qty-plus::before { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M810.667 469.333h-256v-256c0-25.6-17.067-42.667-42.667-42.667s-42.667 17.067-42.667 42.667v256h-256c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h256v256c0 25.6 17.067 42.667 42.667 42.667s42.667-17.067 42.667-42.667v-256h256c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M810.667 469.333h-256v-256c0-25.6-17.067-42.667-42.667-42.667s-42.667 17.067-42.667 42.667v256h-256c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h256v256c0 25.6 17.067 42.667 42.667 42.667s42.667-17.067 42.667-42.667v-256h256c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667z'/%3E%3C/svg%3E"); }

.idt-qty-btn:hover:not(:disabled) { background: var(--idt-azzurro-pallido); color: var(--idt-blu); }
.idt-qty-btn:disabled { color: var(--idt-grigio-chiaro); cursor: default; }

/* Due selettori piu lunghi del necessario, per battere:
   - il reset del tema: input[type=number] { width:100% }  → (0,1,1)
   - WooCommerce: .woocommerce .quantity .qty { width:3.631em } → (0,3,0) */
.idt-qty input.idt-qty-input, .woocommerce .idt-qty input.qty, .idt-qty input.qty { /* stretch: alcuni widget impongono una height propria al campo,
     cosi riempie sempre l’altezza della pillola */ align-self: stretch; width: 28px; min-width: 28px; height: var(--idt-h-compatta); flex: none; padding: 0; border: 0; background: transparent; text-align: center; font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); color: var(--idt-nero); -moz-appearance: textfield; appearance: textfield; }

.idt-qty input::-webkit-outer-spin-button, .idt-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.idt-qty input.idt-qty-input:focus, .idt-qty input.qty:focus { outline: 0; background: var(--idt-azzurro-pallido); }

/* nessuna variante di misura: la pillola e la stessa nei tre contesti
   (loop prodotti, scheda semplice, tabella varianti) */

/* nella tabella varianti la colonna e stretta: pillola sempre a destra */
.idt-vt-qty { vertical-align: middle; }

/* ==========================================================================
   24. STATI :focus DEI PULSANTI

   Il reset di Hello Elementor (reset.css) contiene:

     [type="button"]:focus, [type="button"]:hover,
     [type="submit"]:focus, [type="submit"]:hover,
     button:focus, button:hover { background-color: #CC3366; color: #fff; }

   Specificita (0,2,0): batte le classi dei nostri pulsanti, che hanno solo
   una regola per lo stato normale e per :hover. Dopo un clic il pulsante
   resta in :focus e diventava fucsia — sui pulsanti − / + della quantita e
   su "Aggiungi al carrello" della tabella varianti.

   Qui ogni pulsante del progetto dichiara anche :focus e :active, con
   specificita sufficiente (elemento + classe + pseudo-classe = (0,2,1)),
   e la messa a fuoco da tastiera si vede con un anello invece che con un
   cambio di colore.
   ========================================================================== */

/* --- pillola quantita ----------------------------------------------------- */

button.idt-qty-btn:focus, button.idt-qty-btn:active { background-color: #fff; color: var(--idt-testo); }

button.idt-qty-btn:focus:hover:not(:disabled), button.idt-qty-btn:active:not(:disabled) { background-color: var(--idt-azzurro-pallido); color: var(--idt-blu); }

button.idt-qty-btn:disabled:focus { color: var(--idt-grigio-chiaro); }

/* --- tabella varianti ----------------------------------------------------- */

button.idt-vt-add:focus { background-color: var(--idt-blu); color: #fff; }

button.idt-vt-add:focus:hover, button.idt-vt-add:active { background-color: var(--idt-azzurro); color: #fff; }

button.idt-vt-toggle:hover, button.idt-vt-toggle:focus, button.idt-vt-toggle:active { background-color: transparent; color: var(--idt-blu); }

/* --- ordine rapido per codice (carrello) ---------------------------------- */

button.idt-qa-btn:focus, button.idt-qa-btn:active { background-color: var(--idt-azzurro-hover); color: #fff; }

/* --- pulsanti WooCommerce (coupon, filtro prezzo, aggiungi, ordine) -------- */

.woocommerce button.button:focus, .woocommerce button.button:active, .woocommerce input.button:focus, .woocommerce input.button:active { background-color: var(--idt-azzurro-hover); color: #fff; }

.woocommerce div.product .idt-pd-atc button.single_add_to_cart_button:active, .woocommerce div.product .idt-pd-atc button.button.alt:active { background-color: var(--idt-rosso-active) !important; color: #fff !important; }

body .elementor-element.idt-checkout button#place_order:focus, body .elementor-element.idt-checkout button#place_order:active { background-color: var(--idt-rosso-hover); color: #fff; }

/* --- anello di messa a fuoco da tastiera ---------------------------------- */

button.idt-qty-btn:focus-visible, button.idt-vt-add:focus-visible, button.idt-vt-toggle:focus-visible, button.idt-qa-btn:focus-visible, .woocommerce button.button:focus-visible, .woocommerce div.product .idt-pd-atc button.single_add_to_cart_button:focus-visible { outline: 2px solid var(--idt-azzurro); outline-offset: 2px; }

/* --- pulsanti disabilitati -------------------------------------------------

   Il reset colora anche i pulsanti disabilitati: button:hover / button:focus
   non escludono [disabled]. Le regole sopra usano :not(:disabled), quindi su
   un pulsante disabilitato (− a 0, + al massimo) restava il fucsia.
   Qui lo stato disabilitato viene dichiarato per tutte le pseudo-classi.
   -------------------------------------------------------------------------- */

button.idt-qty-btn:disabled, button.idt-qty-btn:disabled:hover, button.idt-qty-btn:disabled:focus, button.idt-qty-btn:disabled:active, button.idt-qty-btn[disabled]:hover, button.idt-qty-btn[disabled]:focus { background-color: #fff; color: var(--idt-grigio-chiaro); cursor: default; }

button.idt-vt-add:disabled, button.idt-vt-add:disabled:hover, button.idt-vt-add:disabled:focus, button.idt-vt-add:disabled:active { background-color: var(--idt-bordo); color: #fff; cursor: default; }

button.idt-qa-btn:disabled, button.idt-qa-btn:disabled:hover, button.idt-qa-btn:disabled:focus, button.idt-qa-btn:disabled:active { background-color: var(--idt-bordo); color: #fff; cursor: default; }

.woocommerce button.button:disabled:hover, .woocommerce button.button:disabled:focus, .woocommerce button.button:disabled[disabled]:hover, .woocommerce button.button:disabled[disabled]:focus, .woocommerce div.product .idt-pd-atc button.single_add_to_cart_button:disabled:hover, .woocommerce div.product .idt-pd-atc button.single_add_to_cart_button:disabled:focus { background-color: var(--idt-bordo); color: #fff; cursor: default; }

/* ==========================================================================
   25. CASSA — una sola cornice per colonna

   Il widget Cassa di Elementor Pro incornicia OGNI sezione:

     .elementor-widget-woocommerce-checkout-page .woocommerce .col-1,
     … .e-checkout__order_review, … .e-coupon-box,
     … .woocommerce-additional-fields, … .shipping_address,
     … .woocommerce-checkout #payment {
       background: var(--sections-background-color, #fff);
       border-color: var(--sections-border-color, #d5d8dc);
       border-radius: var(--sections-border-radius, 3px);
       border-width: 1px;
       margin: var(--sections-margin, 0 0 24px 0);
       padding: var(--sections-padding, 16px 30px);
     }

   Queste cornici stavano DENTRO la card della colonna disegnata dal child
   theme (.idt-checkout .e-checkout__container > div): due cornici annidate,
   e i 24px di margine fra una sezione e l'altra lasciavano vedere due righe
   ravvicinate — la riga di chiusura di una sezione e quella di apertura
   della successiva.

   Nota: border-width e' scritto fisso a 1px, non e' una variabile. Le
   cornici interne si tolgono quindi rendendo TRASPARENTI colore e sfondo:
   il posto occupato resta lo stesso (nessuno spostamento di layout) e la
   card esterna torna a essere l'unica cornice. Il filetto fra una sezione e
   l'altra si riaccende su un solo lato per volta.
   ========================================================================== */

.elementor-element.idt-checkout { --sections-background-color: transparent; --sections-border-color: transparent; --sections-border-radius: 0px; }

/* ATTENZIONE: --sections-margin NON va toccata. Elementor la riusa anche come
   distanza fra le due colonne:
     .e-checkout__container { grid-column-gap: var(--sections-margin, 24px) }
   Azzerandola le colonne "Dati di fatturazione" e "Riepilogo ordine" si
   attaccavano. Il margine delle sezioni si toglie quindi direttamente. */
body .elementor-element.idt-checkout .woocommerce #customer_details .col-1, body .elementor-element.idt-checkout .woocommerce .e-checkout__order_review, body .elementor-element.idt-checkout .woocommerce .e-coupon-box, body .elementor-element.idt-checkout .woocommerce .woocommerce-additional-fields, body .elementor-element.idt-checkout .woocommerce .shipping_address, body .elementor-element.idt-checkout .woocommerce .woocommerce-checkout #payment { margin: 0; }

/* Filetti di separazione, al posto dello stacco di 24px.
   Specificita (0,3,1): il selettore di Elementor Pro e' a (0,3,0). */

body .elementor-element.idt-checkout .woocommerce #customer_details .col-1, body .elementor-element.idt-checkout .woocommerce .e-checkout__order_review, body .elementor-element.idt-checkout .woocommerce .e-coupon-box { border-bottom-color: var(--idt-bordo-chiaro); }

body .elementor-element.idt-checkout .woocommerce .woocommerce-additional-fields, body .elementor-element.idt-checkout .woocommerce .shipping_address { border-top-color: var(--idt-bordo-chiaro); }

/* La riga "Spedire a un indirizzo diverso?" non e' una sezione del widget e
   aveva margini propri: allineata alle sezioni. */
body .elementor-element.idt-checkout .woocommerce-shipping-fields > h3 { margin: 0; padding: 16px 30px; font-size: var(--idt-t-13); }

body .elementor-element.idt-checkout .woocommerce-shipping-fields > h3 label { margin: 0; font-size: var(--idt-t-13); font-weight: var(--idt-peso-normale); color: var(--idt-testo); }

/* NB: qui NON va messo overflow:hidden sulla card della colonna. La colonna
   destra contiene .e-sticky-right-column (position:sticky, top:142px): un
   ancestor con overflow diverso da visible diventa il suo contenitore di
   scorrimento e il top viene applicato subito, lasciando 143px di vuoto in
   cima alla card. Non serve comunque: le sezioni hanno sfondo trasparente,
   quindi gli angoli arrotondati della card restano puliti. */

/* ==========================================================================
   25-bis. MESSA A FUOCO DEI CAMPI

   Nessuna regola definiva :focus sui campi, quindi il browser disegnava il
   proprio anello predefinito: un rettangolo NERO a spigolo vivo attorno a
   campi arrotondati (ben visibile sull'area "Note sull'ordine").
   Qui l'anello diventa azzurro IDT e segue il raggio del campo, in linea con
   quanto fatto per i pulsanti nella sezione 24.
   ========================================================================== */

input:focus-visible, textarea:focus-visible, select:focus-visible, .select2-container--open .select2-selection--single { outline: 2px solid var(--idt-azzurro); outline-offset: 0; }

/* ==========================================================================
   26. CASSA — menu a tendina allineati ai campi di testo

   Misure dei campi di testo della cassa, imposte dal widget:
   altezza 44px, padding 16px, corpo 14px, nessun bordo, angoli vivi,
   sfondo #F9FAFA, testo #69727D.

   I due menu a tendina non le seguivano:

   • "Stato" e' un <select> nativo: si adattava al testo (una scatoletta di
     63x53px larga quanto la parola "Italia") perche' nessuna regola gli
     dava una larghezza.

   • "Provincia" e' sostituito da select2. Elementor lo stila gia' come i
     campi input (nessun bordo, sfondo #F9FAFA, rientro 1rem, interlinea
     45px), ma la nostra regola della sezione 19
     (.idt-checkout .select2-container .select2-selection--single)
     gli rimetteva bordo 1px, angoli 4px, corpo 13px e padding 12px: pari
     specificita' (0,3,0) e piu' avanti nella cascata, quindi vinceva. Il
     risultato era un rientro totale di 28px invece di 16 e un'interlinea di
     45px dentro una scatola di 44px — testo ne' centrato ne' allineato.

   Specificita' da battere: Elementor arriva a (0,4,0) su
     … .woocommerce #customer_details .form-row select { padding: 16px }
   quindi qui i selettori includono .woocommerce e la classe del widget.
   ========================================================================== */

/* --- <select> nativo (Stato) ---------------------------------------------- */

/* NB: la regola di Elementor da battere contiene un ID (#customer_details),
   quindi sta a (1,3,0): un selettore di sole classi non basta. */
body .elementor-element.idt-checkout .woocommerce #customer_details .form-row select, body .elementor-element.idt-checkout .woocommerce .form-row select { box-sizing: border-box; width: 100%; height: var(--idt-h-media); margin: 0; /* niente padding verticale: il testo dell'opzione lo centra il browser */ padding: 0 38px 0 16px; border: 0; border-radius: 0; background-color: #F9FAFA; font-family: var(--idt-sans); font-size: var(--idt-t-14); color: #69727D; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%2369727D'%3E%3Cpath d='M797.867 354.133c-17.067-17.067-42.667-17.067-59.733 0l-226.133 226.133-226.133-226.133c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l256 256c8.533 8.533 21.333 12.8 29.867 12.8s21.333 0 29.867-12.8l256-256c17.067-17.067 17.067-42.667 0-59.733z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; }

/* --- select2 (Provincia) --------------------------------------------------- */

body .elementor-element.idt-checkout .select2-container--default .select2-selection--single { height: var(--idt-h-media); padding: 0; border: 0; border-radius: 0; background-color: #F9FAFA; font-size: var(--idt-t-14); }

body .elementor-element.idt-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 38px 0 16px; line-height: 44px; font-size: var(--idt-t-14); color: #69727D; }

body .elementor-element.idt-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #69727D; }

body .elementor-element.idt-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 14px; width: 14px; height: var(--idt-h-media); }

/* ==========================================================================
   27. BRICIOLE DI PANE — stile unico per pagine e prodotti

   Nel progetto Claude Design: voci cliccabili azzurre (#0099CC), freccina
   grigio chiaro come separatore, voce corrente in nero (#1A1A1A) e in
   grassetto, corpo 12,5px.

   Erano due impianti diversi:
   • le pagine usano un widget Elenco icone (.idt-bread-l), che aveva gia' la
     freccina ma con le voci in grigio;
   • i prodotti e gli archivi usano il widget Briciole di pane di WooCommerce
     (.woocommerce-breadcrumb), che separava le voci con " / " — illeggibile,
     tra l'altro, su una categoria che si chiama "Otturazione / Ricostruzione".

   Il separatore di WooCommerce e' stato sostituito in PHP
   (filtro woocommerce_breadcrumb_defaults in idt-helpers.php) con uno span
   vuoto .idt-bc-sep, disegnato qui come maschera CSS: la stessa freccina in
   entrambi i casi, e segue il colore impostato sullo span.
   ========================================================================== */

/* --- la freccina ----------------------------------------------------------- */

.idt-bc-sep { flex: none; background-color: var(--idt-bordo); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M669.867 482.133l-256-256c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l226.133 226.133-226.133 226.133c-17.067 17.067-17.067 42.667 0 59.733s21.333 12.8 29.867 12.8 21.333 0 29.867-12.8l256-256c17.067-17.067 17.067-42.667 0-59.733z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M669.867 482.133l-256-256c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l226.133 226.133-226.133 226.133c-17.067 17.067-17.067 42.667 0 59.733s21.333 12.8 29.867 12.8 21.333 0 29.867-12.8l256-256c17.067-17.067 17.067-42.667 0-59.733z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }

/* --- prodotti e archivi (widget WooCommerce) ------------------------------- */

.idt-pd-bread, .idt-pd-bread-w { background: #fff; }

.woocommerce-breadcrumb, .idt-pd-bread .woocommerce-breadcrumb, .idt-pd-bread-w .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-family: var(--idt-sans); font-size: var(--idt-t-12-5); line-height: 1.35; color: var(--idt-nero); }

.woocommerce-breadcrumb a, .idt-pd-bread .woocommerce-breadcrumb a, .idt-pd-bread-w .woocommerce-breadcrumb a { color: var(--idt-azzurro); font-weight: var(--idt-peso-normale); text-decoration: none; }

.woocommerce-breadcrumb a:hover, .idt-pd-bread .woocommerce-breadcrumb a:hover, .idt-pd-bread-w .woocommerce-breadcrumb a:hover { color: var(--idt-blu); text-decoration: underline; }

/* WooCommerce mette un clearfix sulla nav (::before e ::after con
   content:" " e display:table). Dentro un contenitore flex diventano due
   elementi flessibili larghi 0 e il gap li conta: la prima voce partiva 8px
   piu' a destra del titolo della pagina. */
.woocommerce-breadcrumb::before, .woocommerce-breadcrumb::after, .woocommerce .woocommerce-breadcrumb::before, .woocommerce .woocommerce-breadcrumb::after, body .elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb::before, body .elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb::after { display: none; }

/* la voce corrente: WooCommerce la stampa come semplice testo, lo span lo
   aggiunge il filtro PHP */
.woocommerce-breadcrumb .idt-bc-item:last-child { color: var(--idt-nero); font-weight: var(--idt-peso-medio); }

/* --- pagine (widget Elenco icone) ----------------------------------------- */

/* L'elenco icone in linea di Elementor distanzia le voci con i margini
   invece che con il gap:
     .elementor-widget .elementor-icon-list-items.elementor-inline-items
       { margin-inline: -8px }
     … .elementor-icon-list-item { margin-inline: 8px }
   specificita' (0,3,0) e (0,4,0). Sommati al gap dell'elenco portavano lo
   spazio fra una voce e la freccina successiva a 24px invece di 8. */
body .idt-bread-l .elementor-icon-list-items.elementor-inline-items { gap: 8px; margin-inline: 0; }

body .idt-bread-l .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item { margin-inline: 0; }

.idt-bread-l .elementor-icon-list-items { gap: 8px; }

/* Due spaziature di Elementor rendevano i passi disuguali rispetto alle
   briciole di WooCommerce:
   • ogni voce ha margin-left/right di 8px, che sommati al gap dell'elenco
     portavano lo spazio fra una voce e la freccina successiva a 24px;
   • il testo accanto a un'icona ha padding-inline-start: 5px, quindi fra la
     freccina e la parola c'erano 13px invece di 8.
   Azzerandoli, il passo e' 8px ovunque come nel widget WooCommerce. */
.idt-bread-l .elementor-icon-list-item { gap: 8px; margin: 0; padding: 0; font-size: var(--idt-t-12-5); line-height: 1.35; color: var(--idt-nero); }

.idt-bread-l .elementor-icon-list-item .elementor-icon-list-text { padding-inline-start: 0; padding-inline-end: 0; }

/* Nelle voci con link il widget annida freccina e testo dentro un <a>, che e'
   il vero contenitore flex: senza questo il gap della voce non li separa e,
   tolto il padding di 5px, si toccavano. Le voci senza link (l'ultima) hanno
   invece i due span direttamente nel <li>. */
body .idt-bread-l .elementor-icon-list-item > a { display: flex; align-items: center; gap: 8px; }

.idt-bread-l .elementor-icon-list-item > a { color: var(--idt-azzurro); }

.idt-bread-l .elementor-icon-list-item > a:hover { color: var(--idt-blu); text-decoration: underline; }

/* Il widget usa l'icona chevron-right di Font Awesome, piena e piu' pesante
   della freccina del progetto: viene sostituita dalla stessa maschera delle
   briciole di WooCommerce, cosi' i due impianti sono identici al pixel. */
.idt-bread-l .elementor-icon-list-icon { flex: none; background-color: var(--idt-bordo); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M669.867 482.133l-256-256c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l226.133 226.133-226.133 226.133c-17.067 17.067-17.067 42.667 0 59.733s21.333 12.8 29.867 12.8 21.333 0 29.867-12.8l256-256c17.067-17.067 17.067-42.667 0-59.733z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M669.867 482.133l-256-256c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l226.133 226.133-226.133 226.133c-17.067 17.067-17.067 42.667 0 59.733s21.333 12.8 29.867 12.8 21.333 0 29.867-12.8l256-256c17.067-17.067 17.067-42.667 0-59.733z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }

.idt-bread-l .elementor-icon-list-icon i, .idt-bread-l .elementor-icon-list-icon svg { display: none; }

.idt-bread-l .elementor-icon-list-item:last-child .elementor-icon-list-text { color: var(--idt-nero); font-weight: var(--idt-peso-medio); }

/* ==========================================================================
   28. SUGGERIMENTI DI RICERCA (Advanced Woo Search)

   Struttura di una voce:
     .aws_result_item
       a.aws_result_link_top        (link che copre tutta la riga)
       span.aws_result_image > img  (miniatura, float: left)
       span.aws_result_content
         span.aws_result_head
           span.aws_result_title
           span.aws_result_price
         span.aws_result_term       (le categorie — il sottotitolo)

   Tre ritocchi:

   1. La miniatura aveva padding-right: 15px ma anche box-sizing: border-box
      e width: 48px, quindi il padding rientrava nella larghezza e l'immagine
      finiva attaccata al testo. Sostituito con un margine, che sta fuori
      dalla larghezza: 15px reali, senza fissare la dimensione della
      miniatura (resta quella impostata nel plugin).

   2. Fra titolo e sottotitolo c'erano 15px (8 di margine sotto la testata
      piu' 7 di padding sopra le categorie): azzerati, lo stacco lo da' ora
      la sola interlinea.

   3. Il sottotitolo passa da 11px allo stile "Testo Piccolo" del progetto
      (13px, interlinea 1,5).
   ========================================================================== */

.aws_result_item .aws_result_image { padding-right: 0; margin-right: 15px; }

.aws_result_item .aws_result_head { margin-bottom: 0; }

.aws_result_item .aws_result_term { padding-top: 0; font-size: var(--idt-t-13); line-height: 1.5; }

/* ==========================================================================
   29. PALLINI DEGLI ELENCHI PUNTATI

   Prima erano l'icona Font Awesome "circle" dentro il widget Elenco icone.
   Il set di icone del progetto (icomoon) non ha un cerchio pieno, quindi
   l'icona e' stata tolta dalle voci e il pallino lo disegna il CSS.

   Nota: quando la voce non ha icona, Elementor non stampa affatto lo span
   .elementor-icon-list-icon — il pallino va quindi messo sul <li>, dove fa
   da primo elemento flessibile e il gap di 9px lo separa dal testo esattamente
   come faceva l'icona.
   ========================================================================== */

.idt-lg-bul .elementor-icon-list-item::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--idt-azzurro); }

/* ==========================================================================
   30. ICONE DEI PLUGIN NELL'INTESTAZIONE

   Il carrello e la lente della ricerca non passano dal controllo icona di
   Elementor: sono SVG stampati dai rispettivi widget (eicon di Elementor Pro
   e SVG interno di Advanced Woo Search). Restavano quindi nello stile
   precedente, piu' pieno, accanto a icone ora tutte a filo sottile.
   Qui l'SVG originale viene nascosto e al suo posto si disegna la maschera
   dell'icona corrispondente del set del progetto.
   ========================================================================== */

.idt-cart .elementor-menu-cart__toggle .elementor-button-icon svg { display: none; }

.idt-cart .elementor-menu-cart__toggle .elementor-button-icon::before { content: ""; width: 26px; height: 26px; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M426.667 896c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z M896 896c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z M977.067 273.067c-8.533-8.533-21.333-17.067-34.133-17.067h-691.2l-38.4-179.2c0-21.333-21.333-34.133-42.667-34.133h-85.333c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h51.2l38.4 179.2s0 0 0 0l68.267 315.733c12.8 59.733 64 102.4 123.733 102.4s0 0 0 0h418.133c59.733 0 110.933-42.667 123.733-102.4l68.267-315.733c0-12.8 0-25.6-8.533-34.133zM832 610.133c-4.267 21.333-21.333 34.133-42.667 34.133h-418.133c-21.333 0-38.4-12.8-42.667-34.133l-55.467-264.533h618.667l-59.733 264.533z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M426.667 896c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z M896 896c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z M977.067 273.067c-8.533-8.533-21.333-17.067-34.133-17.067h-691.2l-38.4-179.2c0-21.333-21.333-34.133-42.667-34.133h-85.333c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h51.2l38.4 179.2s0 0 0 0l68.267 315.733c12.8 59.733 64 102.4 123.733 102.4s0 0 0 0h418.133c59.733 0 110.933-42.667 123.733-102.4l68.267-315.733c0-12.8 0-25.6-8.533-34.133zM832 610.133c-4.267 21.333-21.333 34.133-42.667 34.133h-418.133c-21.333 0-38.4-12.8-42.667-34.133l-55.467-264.533h618.667l-59.733 264.533z'/%3E%3C/svg%3E") no-repeat center / contain; }

.idt-search .aws-container .aws-search-btn_icon svg { display: none; }

.idt-search .aws-container .aws-search-btn_icon::before { content: ""; width: 20px; height: 20px; background-color: #fff; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M925.867 866.133l-157.867-157.867c51.2-64 85.333-149.333 85.333-238.933 0-213.333-170.667-384-384-384s-384 170.667-384 384 170.667 384 384 384 174.933-29.867 238.933-85.333l157.867 157.867c8.533 8.533 21.333 12.8 29.867 12.8s21.333 0 29.867-12.8c17.067-17.067 17.067-42.667 0-59.733zM170.667 469.333c0-166.4 132.267-298.667 298.667-298.667s298.667 132.267 298.667 298.667-132.267 298.667-298.667 298.667-298.667-132.267-298.667-298.667z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M925.867 866.133l-157.867-157.867c51.2-64 85.333-149.333 85.333-238.933 0-213.333-170.667-384-384-384s-384 170.667-384 384 170.667 384 384 384 174.933-29.867 238.933-85.333l157.867 157.867c8.533 8.533 21.333 12.8 29.867 12.8s21.333 0 29.867-12.8c17.067-17.067 17.067-42.667 0-59.733zM170.667 469.333c0-166.4 132.267-298.667 298.667-298.667s298.667 132.267 298.667 298.667-132.267 298.667-298.667 298.667-298.667-132.267-298.667-298.667z'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ==========================================================================
   31. ICONE DEL MENU (hamburger, chiusura, freccia dei sottomenu)

   Anche queste sono SVG interni di Elementor (eicon-menu-bar, eicon-close,
   fas-caret-down): non passano dal controllo icona, quindi restavano nello
   stile precedente. Si vedono su mobile, dove il menu diventa a scomparsa.
   ========================================================================== */

.elementor-menu-toggle svg { display: none; }

.elementor-menu-toggle::before { content: ""; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M853.333 469.333h-682.667c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h682.667c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667z M170.667 298.667h682.667c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667h-682.667c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667z M853.333 725.333h-682.667c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h682.667c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M853.333 469.333h-682.667c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h682.667c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667z M170.667 298.667h682.667c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667h-682.667c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667z M853.333 725.333h-682.667c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h682.667c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667z'/%3E%3C/svg%3E") no-repeat center / contain; }

.elementor-menu-toggle[aria-expanded="true"]::before { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M571.733 512l226.133-226.133c17.067-17.067 17.067-42.667 0-59.733s-42.667-17.067-59.733 0l-226.133 226.133-226.133-226.133c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l226.133 226.133-226.133 226.133c-17.067 17.067-17.067 42.667 0 59.733s21.333 12.8 29.867 12.8 21.333 0 29.867-12.8l226.133-226.133 226.133 226.133c8.533 8.533 21.333 12.8 29.867 12.8s21.333 0 29.867-12.8c17.067-17.067 17.067-42.667 0-59.733l-226.133-226.133z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M571.733 512l226.133-226.133c17.067-17.067 17.067-42.667 0-59.733s-42.667-17.067-59.733 0l-226.133 226.133-226.133-226.133c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l226.133 226.133-226.133 226.133c-17.067 17.067-17.067 42.667 0 59.733s21.333 12.8 29.867 12.8 21.333 0 29.867-12.8l226.133-226.133 226.133 226.133c8.533 8.533 21.333 12.8 29.867 12.8s21.333 0 29.867-12.8c17.067-17.067 17.067-42.667 0-59.733l-226.133-226.133z'/%3E%3C/svg%3E"); }

/* freccia dei sottomenu del menu principale */
.elementor-nav-menu .sub-arrow svg { display: none; }

.elementor-nav-menu .sub-arrow:not(:has(i))::before { content: ""; display: inline-block; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M797.867 354.133c-17.067-17.067-42.667-17.067-59.733 0l-226.133 226.133-226.133-226.133c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l256 256c8.533 8.533 21.333 12.8 29.867 12.8s21.333 0 29.867-12.8l256-256c17.067-17.067 17.067-42.667 0-59.733z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M797.867 354.133c-17.067-17.067-42.667-17.067-59.733 0l-226.133 226.133-226.133-226.133c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l256 256c8.533 8.533 21.333 12.8 29.867 12.8s21.333 0 29.867-12.8l256-256c17.067-17.067 17.067-42.667 0-59.733z'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ==========================================================================
   32. INTESTAZIONE — i tre blocchi a destra, allineati alla bozza HTML

   Valori della bozza (desktop.html):

     riga        padding: 12px 32px; min-height: 72px; gap: 20px
     Catalogo    <a> gap:9px; padding:6px 10px; border:1px rgba(255,255,255,.45);
                 border-radius:4px
     Area ris.   <a> gap:9px;  NESSUN padding, NESSUN bordo
     Carrello    <a> gap:9px;  NESSUN padding, icona a sinistra con pastiglia
                 rossa, poi colonna "CARRELLO" + totale
     icona       26x26
     colonna     line-height:1.2
     occhiello   10px, letter-spacing:.06em, maiuscolo, opacita .85, peso normale
     titolo      14px, peso 700

   Differenze corrette:
   • il blocco "Area riservata" aveva lo stesso padding di 6x10 del blocco
     Catalogo: nella bozza il padding ce l'ha solo quello incorniciato, ed e'
     questo che rendeva diverse le distanze fra i tre blocchi;
   • le due righe di testo avevano interlinea 1 invece di 1,2;
   • il glifo dell'icona era a 22px dentro una scatola di 26, quindi piu'
     piccolo di quello della bozza, e la scatola era alta 33px per lo spazio
     della riga di testo attorno;
   • il carrello era tutt'altro: importo a sinistra, icona a destra e nessun
     occhiello "CARRELLO". Il widget Carrello di Elementor stampa
     .elementor-button-text (l'importo) e .elementor-button-icon in
     quest'ordine; qui l'icona viene portata a sinistra con order e
     l'occhiello si aggiunge come ::before del testo.
   ========================================================================== */

/* --- i due blocchi con occhiello + titolo --------------------------------- */

.idt-hdr-link { align-items: center; gap: 9px; padding: 0; }

.idt-hdr-link-boxed { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--idt-radius-s); }

.idt-hdr-icon .elementor-icon { display: flex; line-height: 1; }

.idt-hdr-icon svg, .idt-hdr-icon i { display: block; width: 26px; height: 26px; font-size: 26px; line-height: 1; color: #fff; fill: #fff; }

.idt-hdr-labels { align-items: flex-start; gap: 0; padding: 0; line-height: 1.2; }

/* display:block sulle due intestazioni: sono <span> in linea dentro un widget
   che eredita l'interlinea di 19,2px del contenitore, quindi ogni riga
   occupava 19px invece di 12 e 16,8 — la colonna veniva alta 38px invece dei
   28,8 della bozza, e con essa tutto il blocco. */
.idt-hdr-kicker .elementor-heading-title, .idt-hdr-title .elementor-heading-title { display: block; }

.idt-hdr-kicker .elementor-heading-title { font-size: var(--idt-t-10); font-weight: var(--idt-peso-normale); line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; opacity: .85; color: #fff; }

.idt-hdr-title .elementor-heading-title { font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); line-height: 1.2; color: #fff; }

/* --- carrello: stessa forma degli altri due -------------------------------- */

.idt-cart .elementor-menu-cart__toggle_button { display: flex; align-items: center; gap: 9px; padding: 0; line-height: 1.2; }

/* nel markup del widget l'icona viene dopo l'importo: qui torna a sinistra */
.idt-cart .elementor-menu-cart__toggle .elementor-button-icon { order: -1; position: relative; display: flex; line-height: 1; }

.idt-cart .elementor-menu-cart__toggle .elementor-button-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); }

.idt-cart .elementor-menu-cart__toggle .elementor-button-text::before { content: "Carrello"; font-size: var(--idt-t-10); font-weight: var(--idt-peso-normale); line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }

.idt-cart .elementor-menu-cart__toggle .elementor-button-icon-qty { position: absolute; top: -6px; inset-inline-end: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--idt-radius-pill); background: var(--idt-rosso); color: #fff; font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); line-height: 18px; text-align: center; }

/* Le due regole per schermi stretti stanno piu' su nel file e hanno la stessa
   specificita' di quelle qui sopra: essendo queste ultime, vincerebbero e il
   bordo tornerebbe anche su mobile. Qui vengono ripetute in coda.
   Sotto i 1024px le etichette sono nascoste e resta la sola icona: il padding
   torna su entrambi i blocchi per non ridurre l'area toccabile. */
@media (max-width: 1024px) {
  .idt-hdr-link { padding: 6px 10px; }
  .idt-hdr-link-boxed { border: 0; }
}

/* ==========================================================================
   33. CARRELLO DELL'INTESTAZIONE + MISURA MINIMA DELLE ICONE
   ========================================================================== */

/* --- icona del carrello bianca -------------------------------------------- */

/* La maschera usa currentColor, ma il pulsante del widget eredita il colore
   predefinito di Elementor (#69727D): sul fondo blu l'icona risultava scura.
   Il colore viene fissato sia sul pulsante sia sulla maschera. */
.idt-cart .elementor-menu-cart__toggle_button, .idt-cart .elementor-menu-cart__toggle .elementor-button-icon { color: #fff; }

.idt-cart .elementor-menu-cart__toggle .elementor-button-icon::before { background-color: #fff; }

/* --- allineamento verticale del blocco carrello --------------------------- */

/* .elementor-menu-cart__toggle_wrapper e' un inline-block: appoggiandosi alla
   linea di base si portava dietro lo spazio del discendente (interlinea 24px
   su corpo 16), quindi la scatola del widget era alta 33,4px invece di 28,8.
   Centrata nella riga, faceva partire il carrello 2,3px piu' in alto degli
   altri due blocchi: "CARRELLO" non era allineato con "AREA RISERVATA".
   Azzerando l'interlinea dei contenitori sparisce lo spazio in eccesso. */
.idt-cart .elementor-menu-cart__wrapper, .idt-cart .elementor-menu-cart__toggle_wrapper { line-height: 0; }

/* --- nessuna icona sotto i 14px ------------------------------------------- */

/* Regola di progetto: le icone non scendono mai sotto i 14px. Qui vengono
   riportate a misura quelle che erano piu' piccole; i selettori ripetono
   quelli originali (stessa specificita', ma piu' in basso nel file).
   Non rientrano nella regola il pallino degli elenchi puntati (6px) e il
   numero nella pastiglia del carrello (11px): non sono icone. */

.idt-topbar .elementor-icon-list-icon svg, .idt-topbar .elementor-icon-list-icon i { font-size: var(--idt-t-14); }

.idt-hero-trust .elementor-icon-list-icon svg, .idt-hero-trust .elementor-icon-list-icon i { width: 15px; height: 15px; font-size: var(--idt-t-15); }

.idt-ftr-catalog-link .elementor-button-icon svg, .idt-ftr-catalog-link .elementor-button-icon i { font-size: var(--idt-t-14); }

.idt-mega-cats .sub-arrow i, .idt-mega-cats .sub-arrow svg { width: 14px; height: 14px; font-size: var(--idt-t-14); }

.idt-arc-chips li a::after { width: 14px; height: 14px; }

.idt-bc-sep { width: 14px; height: 14px; }

.idt-bread-l .elementor-icon-list-icon { width: 14px; height: 14px; }

.elementor-nav-menu .sub-arrow:not(:has(i))::before { width: 14px; height: 14px; }

/* Il pulsante "Tutte le categorie" aveva la misura solo sull'svg: con il set
   di icone del progetto e' un <i>, quindi restava al corpo del pulsante
   (13,5px). Nella bozza l'icona e' 18x18. */
.idt-mega-btn .elementor-button-icon svg, .idt-mega-btn .elementor-button-icon i { width: 18px; height: 18px; font-size: 18px; line-height: 1; }

/* ==========================================================================
   34. ICONE SUI PULSANTI DEI PRODOTTI

   Nella bozza i pulsanti della card hanno un'icona da 16px con gap 7px\n   (vale anche per la card mini del mega menu):
   carrello su "Aggiungi", cursori (sliders) su "Scegli opzioni".
   Il widget Aggiungi al carrello di WooCommerce non ha un controllo icona,
   quindi si disegna con ::before, come per il pulsante della tabella varianti.
   ========================================================================== */

.idt-card-atc button.single_add_to_cart_button::before, .idt-card-atc a.button::before, .woocommerce .idt-card-atc a.button::before, .idt-mini-atc button.single_add_to_cart_button::before, .idt-mini-atc a.button::before { content: ""; flex: none; width: 16px; height: 16px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%23ffffff'%3E%3Cpath d='M426.667 896c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z M896 896c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z M977.067 273.067c-8.533-8.533-21.333-17.067-34.133-17.067h-691.2l-38.4-179.2c0-21.333-21.333-34.133-42.667-34.133h-85.333c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h51.2l38.4 179.2s0 0 0 0l68.267 315.733c12.8 59.733 64 102.4 123.733 102.4s0 0 0 0h418.133c59.733 0 110.933-42.667 123.733-102.4l68.267-315.733c0-12.8 0-25.6-8.533-34.133zM832 610.133c-4.267 21.333-21.333 34.133-42.667 34.133h-418.133c-21.333 0-38.4-12.8-42.667-34.133l-55.467-264.533h618.667l-59.733 264.533z'/%3E%3C/svg%3E") no-repeat center / contain; }

/* prodotti con varianti, raggruppati ed esterni: il pulsante porta alla
   scheda per scegliere, non aggiunge nulla al carrello */
.idt-card-atc a.button.product_type_variable::before, .idt-card-atc a.button.product_type_grouped::before, .idt-card-atc a.button.product_type_external::before, .woocommerce .idt-card-atc a.button.product_type_variable::before, .idt-mini-atc a.button.product_type_variable::before, .idt-mini-atc a.button.product_type_grouped::before, .idt-mini-atc a.button.product_type_external::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%23ffffff'%3E%3Cpath d='M128 213.333h298.667c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667h-298.667c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667z M896 469.333h-384c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h384c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667z M128 554.667h170.667v42.667c0 25.6 17.067 42.667 42.667 42.667s42.667-17.067 42.667-42.667v-170.667c0-25.6-17.067-42.667-42.667-42.667s-42.667 17.067-42.667 42.667v42.667h-170.667c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667z M896 810.667h-170.667v-42.667c0-25.6-17.067-42.667-42.667-42.667s-42.667 17.067-42.667 42.667v170.667c0 25.6 17.067 42.667 42.667 42.667s42.667-17.067 42.667-42.667v-42.667h170.667c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667z M512 810.667h-384c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h384c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667z M597.333 298.667c25.6 0 42.667-17.067 42.667-42.667v-42.667h256c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667h-256v-42.667c0-25.6-17.067-42.667-42.667-42.667s-42.667 17.067-42.667 42.667v170.667c0 25.6 17.067 42.667 42.667 42.667z'/%3E%3C/svg%3E"); }

/* ==========================================================================
   35. SCHEDA PRODOTTO SEMPLICE — pulsante uguale a quello della tabella varianti

   Era rosso e senza icona, mentre sui prodotti con varianti il pulsante e'
   blu con il carrello: due schede prodotto con due pulsanti diversi.
   Qui il pulsante della scheda semplice prende colori e icona dell'altro.
   Le regole con !important della sezione 24 (stati :focus/:active in rosso)
   vengono riscritte con gli stessi selettori.
   ========================================================================== */

.idt-pd-atc button.single_add_to_cart_button, .woocommerce .idt-pd-atc button.button.alt { background: var(--idt-blu) !important; }

.idt-pd-atc button.single_add_to_cart_button::before, .woocommerce .idt-pd-atc button.button.alt::before { content: ""; flex: none; width: 19px; height: 19px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%23ffffff'%3E%3Cpath d='M426.667 896c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z M896 896c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z M977.067 273.067c-8.533-8.533-21.333-17.067-34.133-17.067h-691.2l-38.4-179.2c0-21.333-21.333-34.133-42.667-34.133h-85.333c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h51.2l38.4 179.2s0 0 0 0l68.267 315.733c12.8 59.733 64 102.4 123.733 102.4s0 0 0 0h418.133c59.733 0 110.933-42.667 123.733-102.4l68.267-315.733c0-12.8 0-25.6-8.533-34.133zM832 610.133c-4.267 21.333-21.333 34.133-42.667 34.133h-418.133c-21.333 0-38.4-12.8-42.667-34.133l-55.467-264.533h618.667l-59.733 264.533z'/%3E%3C/svg%3E") no-repeat center / contain; }

.idt-pd-atc button.single_add_to_cart_button:hover, .woocommerce .idt-pd-atc button.button.alt:hover { background: var(--idt-azzurro) !important; }

.idt-pd-atc button.single_add_to_cart_button:active, .woocommerce .idt-pd-atc button.button.alt:active { background: var(--idt-azzurro-hover) !important; transform: scale(.98); }

.woocommerce div.product .idt-pd-atc button.single_add_to_cart_button:focus, .woocommerce div.product .idt-pd-atc button.button.alt:focus { background-color: var(--idt-blu) !important; color: #fff !important; }

.woocommerce div.product .idt-pd-atc button.single_add_to_cart_button:focus:hover, .woocommerce div.product .idt-pd-atc button.single_add_to_cart_button:active, .woocommerce div.product .idt-pd-atc button.button.alt:active { background-color: var(--idt-azzurro) !important; color: #fff !important; }

/* ==========================================================================
   36. FILTRO "SOLO PRODOTTI IN OFFERTA"

   E' una casella di spunta finta: un link che aggiunge o toglie ?in_offerta=1
   (shortcode [idt_filtro_offerte] in idt-offerte.php). Stesse misure delle
   voci dell'elenco categorie, cosi' la colonna dei filtri resta omogenea.
   ========================================================================== */

.idt-arc-sale-w .elementor-widget-container { padding: 6px 0; }

.idt-arc-sale { display: flex; align-items: center; gap: 9px; padding: 7px 14px; border-left: 3px solid transparent; font-size: var(--idt-t-12-5); font-weight: 500; line-height: 1.3; color: var(--idt-testo); text-decoration: none; transition: background var(--idt-transizione), border-color var(--idt-transizione); }

.idt-arc-sale:hover { background: var(--idt-barra); }

.idt-arc-sale-box { flex: none; width: 16px; height: 16px; border: var(--idt-linea); border-radius: 3px; background: #fff; }

.idt-arc-sale-t { flex: 1 1 auto; min-width: 0; }

.idt-arc-sale-n { flex: none; font-size: var(--idt-t-11); color: var(--idt-grigio-chiaro); }

.idt-arc-sale.is-on { background: var(--idt-azzurro-pallido); border-left-color: var(--idt-azzurro); }

.idt-arc-sale.is-on .idt-arc-sale-t { color: var(--idt-blu); font-weight: var(--idt-peso-forte); }

.idt-arc-sale.is-on .idt-arc-sale-box { border-color: var(--idt-azzurro); background: var(--idt-azzurro) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%23ffffff'%3E%3Cpath d='M883.2 226.133c-17.067-17.067-42.667-17.067-59.733 0l-439.467 439.467-183.467-183.467c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l213.333 213.333c8.533 8.533 21.333 12.8 29.867 12.8s21.333 0 29.867-12.8l469.333-469.333c17.067-17.067 17.067-42.667 0-59.733z'/%3E%3C/svg%3E") no-repeat center / 11px 11px; }

/* ==========================================================================
   37. FASCIA VETRINA (home)

   Terza variante della targhetta di sezione, accanto a rosso (Offerte) e
   azzurro (Novita): blu del progetto per "In evidenza".
   ========================================================================== */

.idt-badge-dark .elementor-heading-title { background: var(--idt-blu); }

/* ==========================================================================
   38. PAGINA CARRELLO — lista prodotti e riepilogo come nella bozza

   Misure della bozza (carrello-d.html):

     tabella   card bianca, bordo 1px #CDCDCD, raggio 8, overflow hidden
     colonne   84px | 1fr | 130px | 150px | 120px | 36px, gap 14
     testata   padding 10px 16px, fondo #FAFAFA, filetto #ECECEC,
               11px/800, .08em, maiuscolo, #8C8C8C
     riga      padding 12px 16px, filetto #F2F2F2
     miniatura 84x84 in cornice 1px #ECECEC, raggio 8, padding 6
     marchio   10px/800, .08em, maiuscolo, azzurro
     nome      14px/700 maiuscolo, interlinea 1,3
     codice    11px, .06em, grigio chiaro
     prezzo    pieno barrato 12px grigio + scontato 15px/700 rosso
     totale    Anton 22px, allineato a destra
     rimuovi   36x36, bordo 1px #CDCDCD, raggio 4, cestino rosso 15px

   L'ordine delle colonne di WooCommerce e' un altro (rimuovi, miniatura,
   nome, prezzo, quantita, subtotale): righe e testata diventano griglie e le
   celle vengono riordinate con order, cosi' il pulsante di rimozione va in
   fondo come nella bozza senza toccare il markup.

   Marchio, codice articolo e prezzo pieno barrato non li stampa WooCommerce:
   li aggiunge idt-carrello.php.
   ========================================================================== */

/* --- impianto della tabella ------------------------------------------------ */
.idt-cart table.shop_table, .idt-cart table.shop_table thead, .idt-cart table.shop_table tbody { display: block; }
.idt-cart table.shop_table thead tr, .idt-cart table.shop_table tbody tr.cart_item { display: grid; grid-template-columns: 84px 1fr 130px 150px 120px 36px; align-items: center; gap: 14px; }
body .elementor-element.idt-cart table.shop_table thead th { border-bottom: var(--idt-linea-chiara); font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; color: var(--idt-grigio-chiaro); }
.idt-cart table.shop_table tbody tr.cart_item { padding: 12px 16px; border-bottom: 1px solid #F2F2F2; }
body .elementor-element.idt-cart table.shop_table tbody td { padding: 0; border: 0; }

/* la testata usa lo stesso padding delle righe, ma sulle celle */
.idt-cart table.shop_table thead th:first-child { padding-left: 16px; }
.idt-cart table.shop_table thead th:last-child { padding-right: 16px; }

/* ordine delle colonne della bozza */
.idt-cart table.shop_table .product-thumbnail { order: 1; }
.idt-cart table.shop_table .product-name { order: 2; }
.idt-cart table.shop_table .product-price { order: 3; }
.idt-cart table.shop_table .product-quantity { order: 4; }
.idt-cart table.shop_table .product-subtotal { order: 5; text-align: right; }
.idt-cart table.shop_table .product-remove { order: 6; }

/* --- miniatura ------------------------------------------------------------ */
.idt-cart td.product-thumbnail a, .idt-cart td.product-thumbnail img { display: block; width: 84px; height: 84px; }

body .elementor-element.idt-cart td.product-thumbnail img { width: 84px; height: 84px; padding: 6px; border: var(--idt-linea-chiara); border-radius: 8px; background: #fff; object-fit: contain; }

/* --- nome, marchio, codice ------------------------------------------------- */
.idt-cart td.product-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.idt-cart .idt-ci-brand { font-size: var(--idt-t-10); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; color: var(--idt-azzurro); }

body .elementor-element.idt-cart td.product-name a { font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); line-height: 1.3; text-transform: uppercase; color: var(--idt-nero); }

.idt-cart .idt-ci-sku { font-size: var(--idt-t-11); letter-spacing: .06em; color: var(--idt-grigio-chiaro); }

.idt-cart td.product-name .variation, .idt-cart td.product-name dl.variation { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; font-size: var(--idt-t-11-5); color: var(--idt-testo); }

.idt-cart td.product-name dl.variation dt { font-weight: var(--idt-peso-normale); margin: 0; }
.idt-cart td.product-name dl.variation dd { font-weight: var(--idt-peso-forte); margin: 0; }
.idt-cart td.product-name dl.variation dd p { margin: 0; }

/* --- prezzo unitario -------------------------------------------------------- */
.idt-cart td.product-price { display: flex; flex-direction: column; gap: 2px; font-size: var(--idt-t-15); font-weight: var(--idt-peso-forte); font-variant-numeric: tabular-nums; color: var(--idt-testo); }
.idt-cart td.product-price del { font-size: var(--idt-t-12); font-weight: var(--idt-peso-normale); color: var(--idt-grigio-chiaro); }
.idt-cart td.product-price ins { text-decoration: none; color: var(--idt-rosso); }

/* --- totale riga ------------------------------------------------------------ */
body .elementor-element.idt-cart td.product-subtotal { font-family: var(--idt-display); font-size: 22px; font-weight: var(--idt-peso-normale); line-height: 1; color: var(--idt-nero); font-variant-numeric: tabular-nums; }

/* --- pulsante rimuovi ------------------------------------------------------- */
body .elementor-element.idt-cart td.product-remove a.remove { display: grid; place-items: center; width: 36px; height: 36px; border: var(--idt-linea); border-radius: var(--idt-radius-s); background: #fff; font-size: 0; line-height: 0; color: transparent; transition: border-color var(--idt-transizione), background var(--idt-transizione); }

body .elementor-element.idt-cart td.product-remove a.remove:hover { border-color: var(--idt-rosso); background: #fff; }

.idt-cart td.product-remove a.remove::before { content: ""; width: 15px; height: 15px; background-color: var(--idt-rosso); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M896 213.333h-170.667v-42.667c0-72.533-55.467-128-128-128h-170.667c-72.533 0-128 55.467-128 128v42.667h-170.667c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h42.667v554.667c0 72.533 55.467 128 128 128h426.667c72.533 0 128-55.467 128-128v-554.667h42.667c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667zM384 170.667c0-25.6 17.067-42.667 42.667-42.667h170.667c25.6 0 42.667 17.067 42.667 42.667v42.667h-256v-42.667zM768 853.333c0 25.6-17.067 42.667-42.667 42.667h-426.667c-25.6 0-42.667-17.067-42.667-42.667v-554.667h512v554.667z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M896 213.333h-170.667v-42.667c0-72.533-55.467-128-128-128h-170.667c-72.533 0-128 55.467-128 128v42.667h-170.667c-25.6 0-42.667 17.067-42.667 42.667s17.067 42.667 42.667 42.667h42.667v554.667c0 72.533 55.467 128 128 128h426.667c72.533 0 128-55.467 128-128v-554.667h42.667c25.6 0 42.667-17.067 42.667-42.667s-17.067-42.667-42.667-42.667zM384 170.667c0-25.6 17.067-42.667 42.667-42.667h170.667c25.6 0 42.667 17.067 42.667 42.667v42.667h-256v-42.667zM768 853.333c0 25.6-17.067 42.667-42.667 42.667h-426.667c-25.6 0-42.667-17.067-42.667-42.667v-554.667h512v554.667z'/%3E%3C/svg%3E") no-repeat center / contain; }

/* --- riepilogo ordine -------------------------------------------------------- */
.idt-cart .e-cart-totals { display: flex; flex-direction: column; gap: 11px; padding: 18px; }
.idt-cart .e-cart-totals .cart_totals > h2, .idt-cart .e-cart-totals h2 { margin: 0; font-size: var(--idt-t-15); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; color: var(--idt-nero); }
.idt-cart .e-cart-totals .cart_totals { display: flex; flex-direction: column; gap: 11px; }
.idt-cart .e-cart-totals table.shop_table, .idt-cart .e-cart-totals table.shop_table tbody { display: block; }
.idt-cart .e-cart-totals table.shop_table tr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 0 11px; }
body .elementor-element.idt-cart .e-cart-totals table.shop_table th, body .elementor-element.idt-cart .e-cart-totals table.shop_table td { padding: 0; border: 0; background: none; font-size: var(--idt-t-13); font-weight: var(--idt-peso-normale); text-transform: none; letter-spacing: normal; color: var(--idt-testo); }
body .elementor-element.idt-cart .e-cart-totals table.shop_table td { text-align: end; font-weight: var(--idt-peso-forte); font-variant-numeric: tabular-nums; }

/* lo sconto in rosso, come nella bozza */
body .elementor-element.idt-cart .e-cart-totals tr.cart-discount th, body .elementor-element.idt-cart .e-cart-totals tr.cart-discount td { color: var(--idt-rosso); }

/* --- totale ------------------------------------------------------------------ */
.idt-cart .e-cart-totals tr.order-total { align-items: flex-end; padding-top: 11px; border-top: var(--idt-linea-chiara); }
body .elementor-element.idt-cart .e-cart-totals tr.order-total th { font-size: var(--idt-t-13); font-weight: var(--idt-peso-forte); color: var(--idt-nero); }
body .elementor-element.idt-cart .e-cart-totals tr.order-total td { padding: 5px 12px; background: var(--idt-giallo-prezzo); font-family: var(--idt-display); font-size: 34px; font-weight: var(--idt-peso-normale); line-height: 1; color: #000; }
body .elementor-element.idt-cart .e-cart-totals tr.order-total td small, body .elementor-element.idt-cart .e-cart-totals tr.order-total td .includes_tax { display: none; }

/* --- nota sotto al pulsante ---------------------------------------------------- */
.idt-cart .idt-cart-nota { margin: 0; font-size: var(--idt-t-11-5); line-height: 1.45; color: var(--idt-grigio); }

/* --- codice promozionale (spostato qui da idt-carrello.js) --------------------- */
.idt-cart .e-cart__column-inner > .coupon.e-cart-section { display: flex; flex-direction: column; gap: 9px; margin: 12px 0 0; padding: 16px; }
.idt-cart .coupon.e-cart-section .e-coupon-box, .idt-cart .coupon.e-cart-section .coupon-col { display: flex; gap: 8px; }
.idt-cart .coupon.e-cart-section input.input-text { flex: 1 1 auto; min-width: 0; height: var(--idt-h-normale); padding: 0 12px; border: var(--idt-linea); border-radius: var(--idt-radius-s); font-family: var(--idt-sans); font-size: var(--idt-t-14); }
body .elementor-element.idt-cart .coupon.e-cart-section button { flex: 0 0 auto; height: var(--idt-h-normale); padding: 0 18px; border: var(--idt-linea); border-radius: var(--idt-radius-s); background: #fff; color: var(--idt-testo); font-size: var(--idt-t-13); font-weight: var(--idt-peso-nero); text-transform: uppercase; }
body .elementor-element.idt-cart .coupon.e-cart-section button:hover { border-color: var(--idt-azzurro); background: #fff; color: var(--idt-blu); }

/* --- card "Preferite ordinare a voce?" (spostata qui da idt-carrello.js) -------- */
.e-cart__column-inner > .idt-cart-x-voce { margin-top: 12px; width: 100%; }

/* --- schermi stretti ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .idt-cart table.shop_table thead { display: none; }

  .idt-cart table.shop_table tbody tr.cart_item { grid-template-columns: 84px 1fr 36px; grid-template-areas: "foto nome rimuovi" "foto prezzo prezzo" "qta qta totale"; align-items: start; row-gap: 10px; }

  .idt-cart table.shop_table .product-thumbnail { grid-area: foto; }
  .idt-cart table.shop_table .product-name { grid-area: nome; }
  .idt-cart table.shop_table .product-price { grid-area: prezzo; flex-direction: row; align-items: baseline; gap: 8px; }
  .idt-cart table.shop_table .product-quantity { grid-area: qta; }
  .idt-cart table.shop_table .product-subtotal { grid-area: totale; }
  .idt-cart table.shop_table .product-remove { grid-area: rimuovi; justify-self: end; }
}

/* --- pulsante "Vai al pagamento": nella bozza ha l'icona della carta ------- */

body .elementor-element.idt-cart .wc-proceed-to-checkout a.checkout-button, body .elementor-element.idt-cart a.checkout-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: var(--idt-h-grande); padding: 0 22px; border-radius: var(--idt-radius-s); font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; }

body .elementor-element.idt-cart .wc-proceed-to-checkout a.checkout-button::before, body .elementor-element.idt-cart a.checkout-button::before { content: ""; flex: none; width: 17px; height: 17px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M853.333 170.667h-682.667c-72.533 0-128 55.467-128 128v426.667c0 72.533 55.467 128 128 128h682.667c72.533 0 128-55.467 128-128v-426.667c0-72.533-55.467-128-128-128zM170.667 256h682.667c25.6 0 42.667 17.067 42.667 42.667v85.333h-768v-85.333c0-25.6 17.067-42.667 42.667-42.667zM853.333 768h-682.667c-25.6 0-42.667-17.067-42.667-42.667v-256h768v256c0 25.6-17.067 42.667-42.667 42.667z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M853.333 170.667h-682.667c-72.533 0-128 55.467-128 128v426.667c0 72.533 55.467 128 128 128h682.667c72.533 0 128-55.467 128-128v-426.667c0-72.533-55.467-128-128-128zM170.667 256h682.667c25.6 0 42.667 17.067 42.667 42.667v85.333h-768v-85.333c0-25.6 17.067-42.667 42.667-42.667zM853.333 768h-682.667c-25.6 0-42.667-17.067-42.667-42.667v-256h768v256c0 25.6-17.067 42.667-42.667 42.667z'/%3E%3C/svg%3E") no-repeat center / contain; }

.idt-cart .wc-proceed-to-checkout { padding: 0; margin: 0; }

/* --- correzioni al riepilogo e al coupon ------------------------------------

   Nel riepilogo le intestazioni di riga (<th>) sono nascoste: WooCommerce usa
   la tabella "responsive", dove l'etichetta viene ripetuta dal td con
   ::before e attr(data-title). Il risultato era etichetta e importo appiccicati
   dentro la stessa cella — e sul totale l'etichetta finiva dentro la targhetta
   gialla. Qui il <th> torna visibile e l'etichetta duplicata del td sparisce.
   -------------------------------------------------------------------------- */

body .elementor-element.idt-cart .e-cart-totals table.shop_table th { display: block; flex: 1 1 auto; width: auto; min-width: 0; text-align: start; }

body .elementor-element.idt-cart .e-cart-totals table.shop_table td { flex: 0 0 auto; }

body .elementor-element.idt-cart .e-cart-totals table.shop_table td::before { content: none; display: none; }

/* la riga spedizione porta una frase lunga: va a capo sotto l'etichetta */
.idt-cart .e-cart-totals tr.woocommerce-shipping-totals { flex-wrap: wrap; }
body .elementor-element.idt-cart .e-cart-totals tr.woocommerce-shipping-totals td { flex: 1 1 100%; text-align: start; font-weight: var(--idt-peso-normale); font-size: var(--idt-t-12); color: var(--idt-grigio); }

/* --- coupon: etichetta e riga campo+pulsante -------------------------------- */

.idt-cart .coupon.e-cart-section::before { content: "Codice promozionale"; font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; color: var(--idt-nero); }

.idt-cart .coupon.e-cart-section .coupon-col-start { flex: 1 1 auto; min-width: 0; }
.idt-cart .coupon.e-cart-section .coupon-col-end { flex: 0 0 auto; }
.idt-cart .coupon.e-cart-section input.input-text { width: 100%; }

/* --- filetti fra le righe e allineamento della testata ----------------------

   Il widget disegna un filetto sopra OGNI cella:
     … table.cart td.product-name, … td.product-price, … {
       border-top: var(--order-summary-items-divider-weight, 1px) solid
                   var(--order-summary-items-divider-color, #d5d8dc) }
   Con le righe trasformate in griglia si vedevano segmenti staccati sotto le
   sole celle. Si azzera dalla variabile del widget (la strada piu' stabile,
   come per gli altri widget WooCommerce) e il filetto lo disegna la riga.
   -------------------------------------------------------------------------- */

.elementor-element.idt-cart { --order-summary-items-divider-weight: 0px; --totals-divider-weight: 0px; }

/* la testata deve avere lo stesso rientro delle righe, non sulle celle */
.idt-cart table.shop_table thead tr { padding: 10px 16px; }

body .elementor-element.idt-cart table.shop_table thead th { padding: 0; line-height: 1.25; }

/* l'importo del totale eredita il colore dei prezzi di Elementor: nella
   targhetta gialla va nero */
body .elementor-element.idt-cart .e-cart-totals tr.order-total td, body .elementor-element.idt-cart .e-cart-totals tr.order-total td strong, body .elementor-element.idt-cart .e-cart-totals tr.order-total td .woocommerce-Price-amount, body .elementor-element.idt-cart .e-cart-totals tr.order-total td bdi { color: #000; font-weight: var(--idt-peso-normale); }

/* Fondo e filetto della testata vanno sulla riga, non sulle celle: con la riga
   trasformata in griglia, sulle celle si vedevano come segmenti staccati in
   corrispondenza dei 14px di gap. */
.idt-cart table.shop_table thead tr { background: var(--idt-barra); border-bottom: var(--idt-linea-chiara); }

body .elementor-element.idt-cart table.shop_table thead th { background: none; border: 0; }

/* ==========================================================================
   39. CARRELLO - CORREZIONI DI TIPOGRAFIA E ALLINEAMENTO

   Il widget Carrello di Elementor stampa in
   custom-pro-widget-woocommerce-cart.min.css la regola

     .elementor-widget-woocommerce-cart .woocommerce table.cart td span
       { font-size: 14px; font-weight: 400; color: var(--order-summary-color,#000) }

   che vale (0,3,3). Marchio, codice articolo, prezzo unitario e totale
   riga sono tutti <span>, quindi le regole della sezione 38, scritte sulla
   cella, non li raggiungevano: si vedevano tutti a 14px neri. Qui si
   ridichiarano con specificita' superiore, con gli stessi valori usati nel
   loop prodotti e nella scheda prodotto.
   ========================================================================== */

/* --- marchio, nome, codice -------------------------------------------------- */

body .elementor-element.idt-cart table.cart td.product-name .idt-ci-brand { font-size: var(--idt-t-10); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; color: var(--idt-azzurro); }
body .elementor-element.idt-cart table.cart td.product-name .idt-ci-sku { font-size: var(--idt-t-11); font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--idt-grigio-chiaro); }
body .elementor-element.idt-cart table.cart td.product-name .idt-ci-nome, body .elementor-element.idt-cart table.cart td.product-name .idt-ci-nome a { font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); line-height: 1.3; letter-spacing: var(--idt-ls-titolo); text-transform: uppercase; color: var(--idt-nero); }
body .elementor-element.idt-cart table.cart td.product-name .idt-ci-nome a:hover { color: var(--idt-azzurro); }

/* --- prezzo unitario: 15px 700, come nella bozza ---------------------------- */

body .elementor-element.idt-cart table.cart td.product-price, body .elementor-element.idt-cart table.cart td.product-price span, body .elementor-element.idt-cart table.cart td.product-price bdi { font-size: var(--idt-t-15); font-weight: var(--idt-peso-forte); font-variant-numeric: tabular-nums; color: var(--idt-testo); }

/* prodotto in offerta: prezzo pieno barrato sopra, prezzo scontato in rosso */
body .elementor-element.idt-cart table.cart td.product-price del, body .elementor-element.idt-cart table.cart td.product-price del span, body .elementor-element.idt-cart table.cart td.product-price del bdi { font-size: var(--idt-t-12); font-weight: var(--idt-peso-normale); text-decoration: line-through; color: var(--idt-grigio-chiaro); }

body .elementor-element.idt-cart table.cart td.product-price ins, body .elementor-element.idt-cart table.cart td.product-price ins span, body .elementor-element.idt-cart table.cart td.product-price ins bdi { text-decoration: none; color: var(--idt-rosso); }

/* --- totale riga: carattere display 22px ------------------------------------ */

body .elementor-element.idt-cart table.cart td.product-subtotal, body .elementor-element.idt-cart table.cart td.product-subtotal span, body .elementor-element.idt-cart table.cart td.product-subtotal bdi { font-family: var(--idt-display); font-size: 22px; font-weight: var(--idt-peso-normale); line-height: 1; color: var(--idt-nero); font-variant-numeric: tabular-nums; }

/* --- selettore di quantita' -------------------------------------------------
   Lo stesso foglio del widget impone al campo

     .elementor-widget-woocommerce-cart .woocommerce .input-text.qty
       { min-height: 28px; max-height: 28px }

   Il max-height batte l'altezza 42px della sezione 23 (l'altezza e' un
   massimo, non una specificita'): il numero restava in un riquadro di 28px
   dentro la pillola da 44px e appariva spostato in alto rispetto a - e +.
   Va annullato, non solo riscritto.
   -------------------------------------------------------------------------- */

body .elementor-element.idt-cart .idt-qty input.qty, body .elementor-element.idt-cart .idt-qty input.idt-qty-input { min-height: 0; max-height: none; height: var(--idt-h-compatta); align-self: stretch; line-height: 42px; }

/* --- "Ordine per codice articolo" nella colonna della lista ------------------
   Nella bozza il riquadro sta sotto la tabella dei prodotti, non a piena
   pagina. idt-carrello.js lo sposta dentro .e-cart__column-start; qui gli
   si toglie il comportamento a due colonne (il secondo riquadro della bozza,
   "Note per la spedizione", non e' previsto) e si porta a larghezza piena.
   -------------------------------------------------------------------------- */

.e-cart__column-start > .idt-cart-extra { width: 100%; margin-top: 12px; padding: 0; }
.e-cart__column-start > .idt-cart-extra > .elementor-element.idt-cart-x { flex: 1 1 100%; min-width: 0; }

/* ==========================================================================
   40. CASSA - ACCETTAZIONE CONDIZIONI E PULSANTE "EFFETTUA ORDINE"
   ========================================================================== */

/* --- casella "Ho letto e accetto ..." ----------------------------------------
   WooCommerce stampa la casella con le misure del browser (13x13) e
   l'etichetta a 13px: sulla riga piu' importante della cassa era il testo
   meno visibile della pagina. Qui la riga diventa un riquadro a se',
   la casella 22px con il colore del marchio e il testo 15px/600.

   L'etichetta contiene tre pezzi in linea (input, <span> del testo con il
   link, <abbr class="required">): con display:flex l'asterisco diventerebbe
   un elemento a se' distanziato dal gap. Si tiene percio' il flusso di testo
   normale e la casella si posiziona in assoluto sul rientro.
   -------------------------------------------------------------------------- */

body .elementor-element.idt-checkout .woocommerce-terms-and-conditions-wrapper p.form-row { margin: 14px 0 12px; padding: 14px 16px; border: var(--idt-linea); border-radius: var(--idt-radius-s); background: #fff; }

body .elementor-element.idt-checkout label.woocommerce-form__label-for-checkbox { position: relative; display: block; margin: 0; padding-left: 34px; font-size: var(--idt-t-15); font-weight: var(--idt-peso-medio); line-height: 1.5; color: var(--idt-nero); cursor: pointer; }

body .elementor-element.idt-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"] { position: absolute; top: 0; left: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--idt-azzurro); cursor: pointer; }

body .elementor-element.idt-checkout label.woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text { font-size: var(--idt-t-15); font-weight: var(--idt-peso-medio); color: var(--idt-nero); }

body .elementor-element.idt-checkout label.woocommerce-form__label-for-checkbox a { font-weight: var(--idt-peso-nero); color: var(--idt-azzurro); text-decoration: underline; text-underline-offset: 2px; }

body .elementor-element.idt-checkout label.woocommerce-form__label-for-checkbox a:hover { color: var(--idt-blu); }

body .elementor-element.idt-checkout label.woocommerce-form__label-for-checkbox abbr.required { border: 0; font-size: var(--idt-t-15); font-weight: var(--idt-peso-forte); text-decoration: none; color: var(--idt-rosso); }

/* --- pulsante "Effettua ordine" ----------------------------------------------
   Deve essere identico a "Vai al pagamento" del carrello (sezione 38).
   Elementor lo stila con

     .elementor-widget-woocommerce-checkout-page .woocommerce-checkout
     #payment #place_order { background-color: #5bc0de; ... }

   dove il colore e' scritto a mano, non in una variabile del widget: due ID
   nel selettore fanno (2,2,0) e battevano le regole della sezione 19. Qui la
   catena e' ripresa per intero con una classe in piu'.
   -------------------------------------------------------------------------- */

body .elementor-element.idt-checkout .woocommerce-checkout #payment #place_order { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: var(--idt-h-grande); min-height: var(--idt-h-grande); padding: 0 22px; border: 0; border-radius: var(--idt-radius-s); background-color: var(--idt-rosso); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; transition: background-color var(--idt-transizione); }

body .elementor-element.idt-checkout .woocommerce-checkout #payment #place_order::before { content: ""; flex: none; width: 17px; height: 17px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M853.333 170.667h-682.667c-72.533 0-128 55.467-128 128v426.667c0 72.533 55.467 128 128 128h682.667c72.533 0 128-55.467 128-128v-426.667c0-72.533-55.467-128-128-128zM170.667 256h682.667c25.6 0 42.667 17.067 42.667 42.667v85.333h-768v-85.333c0-25.6 17.067-42.667 42.667-42.667zM853.333 768h-682.667c-25.6 0-42.667-17.067-42.667-42.667v-256h768v256c0 25.6 17.067 42.667 42.667 42.667z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M853.333 170.667h-682.667c-72.533 0-128 55.467-128 128v426.667c0 72.533 55.467 128 128 128h682.667c72.533 0 128-55.467 128-128v-426.667c0-72.533-55.467-128-128-128zM170.667 256h682.667c25.6 0 42.667 17.067 42.667 42.667v85.333h-768v-85.333c0-25.6 17.067-42.667 42.667-42.667zM853.333 768h-682.667c-25.6 0-42.667-17.067-42.667-42.667v-256h768v256c0 25.6 17.067 42.667 42.667 42.667z'/%3E%3C/svg%3E") no-repeat center / contain; }

/* i quattro stati, come su ogni altro pulsante del sito */
body .elementor-element.idt-checkout .woocommerce-checkout #payment #place_order:hover:not(:disabled), body .elementor-element.idt-checkout .woocommerce-checkout #payment #place_order:focus:not(:disabled) { background-color: var(--idt-rosso-hover); color: #fff; }

body .elementor-element.idt-checkout .woocommerce-checkout #payment #place_order:active:not(:disabled) { background-color: var(--idt-rosso-active); color: #fff; }

body .elementor-element.idt-checkout .woocommerce-checkout #payment #place_order:disabled, body .elementor-element.idt-checkout .woocommerce-checkout #payment #place_order:disabled:hover { background-color: var(--idt-bordo); color: var(--idt-grigio-chiaro); cursor: default; }

/* ==========================================================================
   41. PULSANTE "TUTTE LE CATEGORIE" - CENTRATURA VERTICALE DEL TESTO

   Il riquadro rosso, l'icona e le voci di menu accanto sono tutti centrati
   sulla stessa linea (177px dal bordo della pagina), ma il TESTO del pulsante
   cadeva 3px piu' in alto. Il motivo sta dentro il pulsante di Elementor:

     .elementor-button-content-wrapper { display: flex }   (align-items: normal)

   con align-items non dichiarato gli elementi si allungano (stretch), quindi
   lo span del testo diventa alto quanto l'icona (18px) mentre la sua riga di
   testo ne misura 16: la riga si appoggia in alto e il testo sale.
   Basta centrare gli elementi del wrapper.
   ========================================================================== */

.idt-mega-btn .elementor-button-content-wrapper { align-items: center; }

/* ==========================================================================
   42. AREA RISERVATA — IMPAGINAZIONE, COLORI E BACHECA

   Tre problemi risolti qui:

   1. Cornice dentro cornice. La colonna del contenuto era una card bianca e
      dentro ci finivano altre card (avvisi, riquadri): due bordi arrotondati
      uno dentro l'altro, con il bordo interno appoggiato a quello esterno.
      Come nella bozza, la colonna torna trasparente e la cornice ce l'ha ogni
      singolo blocco.

   2. Niente spazi e caratteri di sistema. I contenuti di WooCommerce (titoli
      h2/h3, indirizzi, moduli) arrivavano con gli stili del tema: Roboto 32px,
      <address> in corsivo, il link "Modifica" in posizione assoluta sopra al
      testo. Qui prendono i caratteri e i colori del sito.

   3. Bacheca vuota. La sostituisce il template servito da idt-account.php,
      con i dati reali dell'utente; lo stile e' in fondo a questa sezione.
   ========================================================================== */

/* --- colonna di sinistra ---------------------------------------------------
   L'involucro .idt-ac-side lo crea idt-account.js: raccoglie il menu' e la
   card del Numero Verde, che e' un contenitore Elementor esterno al widget.
   -------------------------------------------------------------------------- */

.idt-account .woocommerce > .idt-ac-side { display: flex; flex-direction: column; gap: 12px; flex: 0 0 272px; width: 272px; max-width: 272px; }

.idt-ac-side .woocommerce-MyAccount-navigation { flex: none; width: 100%; max-width: none; }

.idt-ac-side .elementor-element.idt-tel-card { width: 100%; max-width: none; margin: 0; }

/* --- colonna del contenuto: non e' piu' una card --------------------------- */

body .elementor-element.idt-account .woocommerce-MyAccount-content { background: transparent; border: 0; border-radius: 0; padding: 0; }

body .elementor-element.idt-account .woocommerce-MyAccount-content-wrapper, body .elementor-element.idt-account .woocommerce-MyAccount-content-wrapper-no-data { display: flex; flex-direction: column; gap: 16px; }

/* un contenitore avvisi vuoto conterebbe comunque nel gap della colonna */
.idt-account .woocommerce-notices-wrapper:empty { display: none; }
.idt-account .woocommerce-notices-wrapper > :last-child { margin-bottom: 0; }

/* --- testi correnti --------------------------------------------------------- */

body .elementor-element.idt-account .woocommerce-MyAccount-content h2, body .elementor-element.idt-account .woocommerce-MyAccount-content h3 { margin: 0; font-family: var(--idt-sans); font-size: var(--idt-t-15); font-weight: var(--idt-peso-nero); line-height: 1.25; letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; color: var(--idt-nero); }

body .elementor-element.idt-account .woocommerce-MyAccount-content > p, body .elementor-element.idt-account .woocommerce-MyAccount-content-wrapper > p { margin: 0; font-size: var(--idt-t-13); color: var(--idt-grigio); }

/* --- indirizzi (endpoint "Indirizzi di consegna") --------------------------
   WooCommerce impagina i due indirizzi con le colonne flottanti storiche
   (.col-1 / .col-2 al 48%) e mette il link "Modifica" in posizione assoluta,
   che finiva sopra alla prima riga dell'indirizzo. Qui diventano due card
   affiancate con l'intestazione su una riga sola.
   -------------------------------------------------------------------------- */

.idt-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.idt-account .woocommerce-Addresses::before, .idt-account .woocommerce-Addresses::after { content: none; }
.idt-account .woocommerce-Address { display: flex; flex-direction: column; gap: 10px; float: none; width: auto; margin: 0; padding: 16px; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); }
.idt-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0; }

body .elementor-element.idt-account .woocommerce-Address-title h2, body .elementor-element.idt-account .woocommerce-Address-title h3 { font-size: var(--idt-t-11); letter-spacing: var(--idt-ls-occhiello); }

body .elementor-element.idt-account .woocommerce-Address-title a.edit { position: static; float: none; margin: 0; font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); color: var(--idt-blu); white-space: nowrap; }

.idt-account .woocommerce-Address address { margin: 0; font-style: normal; font-size: var(--idt-t-13); line-height: 1.6; color: var(--idt-testo); }

/* --- moduli (indirizzi, dati aziendali) ------------------------------------ */

.idt-account .woocommerce-MyAccount-content form { margin: 0; padding: 20px 22px; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); }

.idt-account .woocommerce-MyAccount-content form .form-row { margin: 0 0 14px; padding: 0; }

.idt-account .woocommerce-MyAccount-content form .form-row:last-child { margin-bottom: 0; }

.idt-account .woocommerce-MyAccount-content form label { display: block; margin: 0 0 6px; font-size: var(--idt-t-11-5); font-weight: var(--idt-peso-forte); color: var(--idt-nero); }

.idt-account .woocommerce-MyAccount-content form .required { color: var(--idt-rosso); border: 0; }

.idt-account .woocommerce-MyAccount-content form input[type="text"], .idt-account .woocommerce-MyAccount-content form input[type="email"], .idt-account .woocommerce-MyAccount-content form input[type="tel"], .idt-account .woocommerce-MyAccount-content form input[type="password"], .idt-account .woocommerce-MyAccount-content form select, .idt-account .woocommerce-MyAccount-content form .select2-selection { width: 100%; height: var(--idt-h-normale); padding: 0 12px; border: var(--idt-linea); border-radius: var(--idt-radius-s); background: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-14); color: var(--idt-nero); }

.idt-account .woocommerce-MyAccount-content form input:focus, .idt-account .woocommerce-MyAccount-content form select:focus { outline: 0; border-color: var(--idt-azzurro); box-shadow: 0 0 0 3px var(--idt-azzurro-pallido); }

.idt-account .woocommerce-MyAccount-content form fieldset { margin: 18px 0 0; padding: 16px 0 0; border: 0; border-top: var(--idt-linea-chiara); }

.idt-account .woocommerce-MyAccount-content form legend { padding: 0; font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; color: var(--idt-nero); }

/* --- tabelle (ordini, documenti) ------------------------------------------- */

.idt-account .woocommerce-MyAccount-content table.shop_table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); overflow: hidden; }
.idt-account .woocommerce-MyAccount-content table.shop_table td { border-left: 0; border-right: 0; }

/* --- pulsanti --------------------------------------------------------------- */

.idt-account .woocommerce-MyAccount-content .woocommerce-Button, .idt-account .woocommerce-MyAccount-content .button { display: inline-flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; transition: background var(--idt-transizione); }

.idt-account .woocommerce-MyAccount-content .button:focus, .idt-account .woocommerce-MyAccount-content .woocommerce-Button:focus { background: var(--idt-azzurro-hover); color: #fff; }

/* ==========================================================================
   42-bis. BACHECA
   ========================================================================== */

.idt-dash { display: flex; flex-direction: column; gap: 16px; }

.idt-dash-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }

.idt-dash-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

body .elementor-element.idt-account .idt-dash-nome { margin: 0; font-family: var(--idt-sans); font-size: 28px; font-weight: var(--idt-peso-nero); line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase; color: var(--idt-nero); }

.idt-dash-meta { font-size: var(--idt-t-13); color: var(--idt-grigio); }

body .elementor-element.idt-account a.idt-dash-nuovo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--idt-h-media); padding: 0 18px; border-radius: var(--idt-radius-s); background: var(--idt-rosso); color: #fff; font-size: var(--idt-t-13-5); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; text-decoration: none; transition: background var(--idt-transizione); }

body .elementor-element.idt-account a.idt-dash-nuovo:hover, body .elementor-element.idt-account a.idt-dash-nuovo:focus { background: var(--idt-rosso-hover); color: #fff; }

.idt-dash-nuovo::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center / contain; }

/* --- tre riquadri di sintesi ------------------------------------------------ */

.idt-dash-stat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.idt-dash-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); }

.idt-dash-k { font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; color: var(--idt-azzurro); }

.idt-dash-v { font-family: var(--idt-display); font-size: 34px; line-height: 1; color: var(--idt-nero); font-variant-numeric: tabular-nums; }

.idt-dash-n { font-size: var(--idt-t-12); line-height: 1.45; color: var(--idt-grigio); }

/* --- ultimi ordini ---------------------------------------------------------- */

.idt-dash-box { background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); overflow: hidden; }

.idt-dash-box-t { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: var(--idt-linea-chiara); }

.idt-dash-box-t > span { font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; color: var(--idt-nero); }

body .elementor-element.idt-account .idt-dash-box-t a, body .elementor-element.idt-account .idt-dash-card-t a, body .elementor-element.idt-account a.idt-dash-dett { font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); color: var(--idt-blu); white-space: nowrap; }

.idt-dash-riga { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1.1fr auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: var(--idt-linea-chiara); font-size: var(--idt-t-13); }
.idt-dash-riga:last-child { border-bottom: 0; }

.idt-dash-intesta { padding: 9px 16px; background: var(--idt-barra); font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; color: var(--idt-grigio-chiaro); }

.idt-dash-num { font-weight: var(--idt-peso-forte); color: var(--idt-nero); font-variant-numeric: tabular-nums; }
.idt-dash-data { color: var(--idt-grigio); font-variant-numeric: tabular-nums; }
.idt-dash-art { color: var(--idt-grigio); }
.idt-dash-tot { font-weight: var(--idt-peso-forte); color: var(--idt-nero); font-variant-numeric: tabular-nums; }

.idt-pill { display: inline-flex; align-items: center; justify-self: start; height: 26px; padding: 0 10px; border-radius: var(--idt-radius-pill); font-size: var(--idt-t-11-5); font-weight: var(--idt-peso-forte); white-space: nowrap; }

.idt-dash-vuoto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 16px; font-size: var(--idt-t-13); line-height: 1.55; color: var(--idt-grigio); }

/* --- indirizzi in bacheca --------------------------------------------------- */

.idt-dash-due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.idt-dash-due .idt-dash-card { gap: 10px; }

.idt-dash-card-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.idt-dash-card-t > span { font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; color: var(--idt-nero); }

.idt-dash-ind { font-size: var(--idt-t-13); line-height: 1.6; color: var(--idt-testo); }

/* --- banner documenti -------------------------------------------------------- */

.idt-dash-doc { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 22px 26px; background: var(--idt-blu); border-radius: var(--idt-radius); color: #fff; }

.idt-dash-doc-x { display: flex; flex-direction: column; gap: 6px; }
.idt-dash-doc-k { font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); text-transform: uppercase; color: var(--idt-azzurro-chiaro); }
.idt-dash-doc-t { font-size: 19px; font-weight: var(--idt-peso-nero); }
.idt-dash-doc-n { font-size: var(--idt-t-13); line-height: 1.5; color: #D9F2FA; }

body .elementor-element.idt-account a.idt-dash-doc-b { display: inline-flex; align-items: center; justify-content: center; height: var(--idt-h-normale); padding: 0 22px; border-radius: var(--idt-radius-s); background: #fff; color: var(--idt-blu); font-size: var(--idt-t-13-5); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background var(--idt-transizione); }

body .elementor-element.idt-account a.idt-dash-doc-b:hover { background: var(--idt-azzurro-pallido); color: var(--idt-blu); }

/* --- schermi stretti --------------------------------------------------------- */

@media (max-width: 1024px) {
  .idt-account .woocommerce > .idt-ac-side { flex: 1 1 100%; width: 100%; max-width: none; }
  .idt-dash-stat { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .idt-account .woocommerce-Addresses, .idt-dash-stat, .idt-dash-due { grid-template-columns: 1fr; }
  .idt-dash-riga { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .idt-dash-intesta { display: none; }
  .idt-dash-doc { grid-template-columns: 1fr; }
}

/* --- 42-ter. specificita' contro il CSS del widget "Il mio account" ----------
   Elementor stampa le sue regole con selettori tipo

     .elementor-widget-woocommerce-my-account
     .e-my-account-tab:not(.e-my-account-tab__dashboard--custom)
     .woocommerce-Address .edit

   dove il :not() porta dentro un'altra classe: fanno (0,5,0). Le regole della
   sezione 42, scritte con quattro classi, perdevano su tre cose (peso e
   margini dei titoli, colore dell'indirizzo, posizione del link "Modifica",
   che restava in assoluto sopra alla prima riga). Qui le stesse dichiarazioni
   sono ripetute infilando .e-my-account-tab nella catena, che porta a cinque
   o sei classi.
   -------------------------------------------------------------------------- */

body .elementor-element.idt-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content h2, body .elementor-element.idt-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content h3 { margin: 0; font-family: var(--idt-sans); font-size: var(--idt-t-15); font-weight: var(--idt-peso-nero); line-height: 1.25; letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; color: var(--idt-nero); }

body .elementor-element.idt-account .e-my-account-tab .woocommerce-MyAccount-content .woocommerce-Address-title h2, body .elementor-element.idt-account .e-my-account-tab .woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin: 0; font-size: var(--idt-t-11); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-occhiello); color: var(--idt-nero); }

body .elementor-element.idt-account .e-my-account-tab .woocommerce-Address .woocommerce-Address-title a.edit { position: static; float: none; margin: 0; padding: 0; font-size: var(--idt-t-12); font-weight: var(--idt-peso-forte); text-decoration: none; color: var(--idt-blu); white-space: nowrap; }
body .elementor-element.idt-account .e-my-account-tab .woocommerce-Address .woocommerce-Address-title a.edit:hover { color: var(--idt-azzurro); }

body .elementor-element.idt-account .e-my-account-tab .woocommerce-Addresses .woocommerce-Address address { margin: 0; font-style: normal; font-size: var(--idt-t-13); line-height: 1.6; color: var(--idt-testo); }

/* --- 42-quater. larghezze: menu' e card degli indirizzi ---------------------
   Due larghezze restavano quelle altrui:

   - il menu' prendeva il 25% da
     .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce
     .woocommerce-MyAccount-navigation  (0,4,0) -> 68px dentro la colonna da 272;
   - le card degli indirizzi prendevano il 48% da
     .woocommerce .col2-set .col-1  (0,3,0), quindi meta' cella della griglia.

   Stessa cura della 42-ter: la catena passa da .e-my-account-tab e arriva a
   cinque/sei classi.
   -------------------------------------------------------------------------- */

body .elementor-element.idt-account .e-my-account-tab .woocommerce .idt-ac-side .woocommerce-MyAccount-navigation { width: 100%; max-width: none; flex: none; }

body .elementor-element.idt-account .e-my-account-tab .woocommerce-Addresses .woocommerce-Address { float: none; width: auto; }

/* ==========================================================================
   43. AREA RISERVATA - TABELLE (I MIEI ORDINI, DETTAGLIO ORDINE)

   Le parole attaccate al bordo avevano una causa sola: Elementor azzera il
   rientro iniziale delle celle con la proprieta' LOGICA

     padding-inline-start: 0

   su "thead:first-child tr:first-child th|td" e su ".order_details tfoot
   th|td". Una regola che scrive padding-left NON la batte: sono due
   proprieta' diverse che finiscono sullo stesso lato, e decide la cascata -
   dove il selettore di Elementor vale (0,5,x) per via del :not(). Vanno
   quindi riscritte come proprieta' logiche, con una catena altrettanto
   lunga.

   Criterio applicato in tutta la sezione: dove c'e' un fondo colorato ci
   dev'essere anche del respiro. La tabella perde il padding proprio e lo
   passa alle celle, cosi' le fasce (testata e piede dei totali) arrivano
   fino ai bordi della card invece di galleggiarci dentro.
   ========================================================================== */

body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table { padding: 0; overflow: hidden; }

body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table th, body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table td { padding: 12px 16px; padding-inline: 16px; vertical-align: middle; }

/* --- testata -------------------------------------------------------------- */

body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table thead th, body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table thead td { padding: 10px 16px; padding-inline: 16px; background: var(--idt-barra); border-top: 0; border-bottom: var(--idt-linea-chiara); font-size: 10.5px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-tabella); text-transform: uppercase; color: var(--idt-grigio); }

/* --- righe ---------------------------------------------------------------- */

body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table tbody th, body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table tbody td { border-top: var(--idt-linea-chiara); font-size: var(--idt-t-13); color: var(--idt-testo); }

body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table tbody tr:first-child th, body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table tbody tr:first-child td { border-top: 0; }

/* etichette a sinistra nelle tabelle a due colonne (campi aggiuntivi,
   dettagli cliente): stesso stile delle intestazioni, ma senza fascia */
body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table tbody th { font-size: 10.5px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-tabella); text-transform: uppercase; color: var(--idt-grigio); white-space: nowrap; }

/* --- piede dei totali -----------------------------------------------------
   Il fondo grigio sulla sola colonna delle etichette disegnava una mezza
   fascia. Qui le celle sono trasparenti e le righe separate da un filetto. */

body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table tfoot th, body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table tfoot td { padding: 11px 16px; padding-inline: 16px; background: transparent; border-top: var(--idt-linea-chiara); }
body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table tfoot th { font-size: 10.5px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-tabella); text-transform: uppercase; color: var(--idt-grigio); white-space: nowrap; }
body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table tfoot td { font-size: var(--idt-t-13); font-weight: var(--idt-peso-forte); color: var(--idt-nero); }

/* --- colonna "Azioni" ------------------------------------------------------ */

body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table th.woocommerce-orders-table__header-order-actions, body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-actions { text-align: right; }

/* --- pulsanti dentro le tabelle -------------------------------------------
   Elementor li stampa trasparenti con bordo 2px #5bc0de: sul sito i pulsanti
   secondari sono pieni azzurri. */

body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table .button { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border: 0; border-radius: var(--idt-radius-s); background: var(--idt-azzurro); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-12); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); line-height: 1; text-transform: uppercase; text-decoration: none; transition: background var(--idt-transizione); }

body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table .button:hover, body .elementor-element.idt-account .e-my-account-tab .woocommerce table.shop_table .button:focus { background: var(--idt-azzurro-hover); border: 0; color: #fff; }

/* --- titoli di sezione del dettaglio ordine -------------------------------- */

body .elementor-element.idt-account .e-my-account-tab .woocommerce-order-details__title, body .elementor-element.idt-account .e-my-account-tab .woocommerce-column__title, body .elementor-element.idt-account .e-my-account-tab .woocommerce-customer-details h2 { margin: 0 0 10px; font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; color: var(--idt-nero); }

body .elementor-element.idt-account .e-my-account-tab .woocommerce-order-details, body .elementor-element.idt-account .e-my-account-tab .woocommerce-customer-details { display: flex; flex-direction: column; gap: 12px; }

/* --- 43-bis. ancora specificita': la testata del dettaglio ordine -----------
   Sul dettaglio ordine Elementor scrive

     … .woocommerce thead:first-child tr:first-child th { padding-top: 0;
        padding-inline-start: 0; padding-bottom: var(--tables-titles-spacing,9px) }

   e i due :first-child contano come classi: fa (0,6,3). La sezione 43, ferma
   a (0,5,4), teneva il padding destro ma perdeva quello iniziale e quello
   superiore, e la testata tornava attaccata al bordo. Qui la catena aggiunge
   la classe del widget e quella del contenuto e arriva a (0,7,4).
   -------------------------------------------------------------------------- */

body .elementor-element.idt-account.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content table.shop_table th, body .elementor-element.idt-account.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content table.shop_table td { padding-block: 12px; padding-inline: 16px; }

body .elementor-element.idt-account.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content table.shop_table thead th, body .elementor-element.idt-account.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content table.shop_table thead td { padding-block: 10px; padding-inline: 16px; }

body .elementor-element.idt-account.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content table.shop_table tfoot th, body .elementor-element.idt-account.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content table.shop_table tfoot td { padding-block: 11px; padding-inline: 16px; }

/* ==========================================================================
   44. PAGINA "ORDINE RICEVUTO" (checkout/order-received)

   E' la schermata che il cliente vede subito dopo aver inviato l'ordine, e
   arrivava con il markup nudo di WooCommerce: titoli Roboto 32px grigi,
   elenchi puntati con il rientro del browser, tabelle senza cornice, tutto
   attaccato senza respiro. Qui prende la stessa grammatica del resto del
   sito - blocchi in card bianche, etichette 10.5px maiuscole azzurre,
   valori in nero - senza toccare il markup: gli agganci sono le classi che
   WooCommerce stampa gia'.

   Tutto e' dentro .woocommerce-order, che esiste solo in questo stato del
   widget: la pagina di cassa vera e propria non viene sfiorata.
   ========================================================================== */

body .elementor-element.idt-checkout .woocommerce-order { display: flex; flex-direction: column; gap: 16px; }

/* --- conferma -------------------------------------------------------------- */

body .elementor-element.idt-checkout .woocommerce-order p.woocommerce-thankyou-order-received { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px; background: var(--idt-azzurro-pallido); border: 1px solid var(--idt-azzurro-bordo); border-radius: var(--idt-radius); font-size: var(--idt-t-15); font-weight: var(--idt-peso-forte); color: var(--idt-blu); }

body .elementor-element.idt-checkout .woocommerce-order p.woocommerce-thankyou-order-received::before { content: ""; flex: none; width: 22px; height: 22px; background-color: var(--idt-azzurro); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain; }

/* --- righe di riepilogo (numero ordine, data, email, totale, pagamento) ----
   WooCommerce le stampa come <li>Etichetta: <strong>valore</strong></li>.
   Diventano celle affiancate: l'etichetta e' il testo del <li>, il valore lo
   <strong>, che azzera maiuscolo e spaziatura. Stessa struttura per i
   riferimenti bancari. */

body .elementor-element.idt-checkout .woocommerce-order ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; padding: 0; list-style: none; }

body .elementor-element.idt-checkout .woocommerce-order > ul.order_details { background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); overflow: hidden; }

body .elementor-element.idt-checkout .woocommerce-order ul.order_details li { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 14px 18px; border-inline-start: 1px solid var(--idt-bordo-chiaro); font-size: 10.5px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-tabella); text-transform: uppercase; color: var(--idt-azzurro); list-style: none; }

body .elementor-element.idt-checkout .woocommerce-order ul.order_details li:first-child { border-inline-start: 0; }

body .elementor-element.idt-checkout .woocommerce-order ul.order_details li strong { font-size: var(--idt-t-14); font-weight: var(--idt-peso-forte); letter-spacing: 0; text-transform: none; color: var(--idt-nero); word-break: break-word; }

/* --- avviso sul pagamento --------------------------------------------------
   Il paragrafo che segue il riepilogo e' il testo del metodo di pagamento
   (bonifico): e' un'informazione che il cliente deve leggere, non una nota
   di servizio. */

body .elementor-element.idt-checkout .woocommerce-order ul.woocommerce-order-overview + p { margin: 0; padding: 14px 18px; background: #FFF8E1; border: 1px solid #F0D99A; border-radius: var(--idt-radius); font-size: var(--idt-t-13); line-height: 1.55; color: #6B5200; }

/* --- titoli ---------------------------------------------------------------- */

body .elementor-element.idt-checkout .woocommerce-order h2, body .elementor-element.idt-checkout .woocommerce-order h3 { margin: 0; font-family: var(--idt-sans); font-size: var(--idt-t-15); font-weight: var(--idt-peso-nero); line-height: 1.25; letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; color: var(--idt-nero); }

body .elementor-element.idt-checkout .woocommerce-order h3.wc-bacs-bank-details-account-name { font-size: var(--idt-t-11); letter-spacing: var(--idt-ls-occhiello); color: var(--idt-azzurro); }

/* --- riferimenti bancari, dettagli ordine, dati cliente -------------------- */

body .elementor-element.idt-checkout .woocommerce-order section.woocommerce-bacs-bank-details { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); }

body .elementor-element.idt-checkout .woocommerce-order section.woocommerce-bacs-bank-details ul.order_details { border-top: var(--idt-linea-chiara); }

body .elementor-element.idt-checkout .woocommerce-order section.woocommerce-bacs-bank-details ul.order_details li { padding: 12px 18px 0; }
body .elementor-element.idt-checkout .woocommerce-order section.woocommerce-bacs-bank-details ul.order_details li:first-child { padding-inline-start: 0; }

body .elementor-element.idt-checkout .woocommerce-order section.woocommerce-order-details, body .elementor-element.idt-checkout .woocommerce-order section.woocommerce-customer-details { display: flex; flex-direction: column; gap: 12px; }

/* --- tabelle ---------------------------------------------------------------
   Stessa cura della sezione 43: il rientro sta sulle celle, scritto anche
   come proprieta' logica, cosi' la fascia della testata va da bordo a bordo. */

body .elementor-element.idt-checkout .woocommerce-order table.shop_table { width: 100%; margin: 0; padding: 0; border-collapse: separate; border-spacing: 0; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); overflow: hidden; }

body .elementor-element.idt-checkout .woocommerce-order table.shop_table th, body .elementor-element.idt-checkout .woocommerce-order table.shop_table td { padding: 12px 16px; padding-inline: 16px; border: 0; vertical-align: middle; }

body .elementor-element.idt-checkout .woocommerce-order table.shop_table thead th, body .elementor-element.idt-checkout .woocommerce-order table.shop_table thead td { padding-block: 10px; background: var(--idt-barra); border-bottom: var(--idt-linea-chiara); font-size: 10.5px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-tabella); text-transform: uppercase; color: var(--idt-grigio); text-align: left; }

body .elementor-element.idt-checkout .woocommerce-order table.shop_table tbody th, body .elementor-element.idt-checkout .woocommerce-order table.shop_table tbody td, body .elementor-element.idt-checkout .woocommerce-order table.shop_table tfoot th, body .elementor-element.idt-checkout .woocommerce-order table.shop_table tfoot td { border-top: var(--idt-linea-chiara); font-size: var(--idt-t-13); color: var(--idt-testo); }

body .elementor-element.idt-checkout .woocommerce-order table.shop_table tbody tr:first-child th, body .elementor-element.idt-checkout .woocommerce-order table.shop_table tbody tr:first-child td { border-top: 0; }

body .elementor-element.idt-checkout .woocommerce-order table.shop_table th { font-size: 10.5px; font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-tabella); text-transform: uppercase; color: var(--idt-grigio); white-space: nowrap; }

body .elementor-element.idt-checkout .woocommerce-order table.shop_table tfoot td, body .elementor-element.idt-checkout .woocommerce-order table.shop_table td.product-total { font-weight: var(--idt-peso-forte); color: var(--idt-nero); }

/* --- indirizzi ------------------------------------------------------------- */

body .elementor-element.idt-checkout .woocommerce-order .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }

body .elementor-element.idt-checkout .woocommerce-order .woocommerce-columns--addresses::before, body .elementor-element.idt-checkout .woocommerce-order .woocommerce-columns--addresses::after { content: none; }

body .elementor-element.idt-checkout .woocommerce-order .woocommerce-columns--addresses .woocommerce-column { display: flex; flex-direction: column; gap: 10px; float: none; width: auto; margin: 0; }

body .elementor-element.idt-checkout .woocommerce-order .woocommerce-customer-details address { flex: 1; margin: 0; padding: 16px 18px; background: #fff; border: var(--idt-linea); border-radius: var(--idt-radius); font-style: normal; font-size: var(--idt-t-13); line-height: 1.7; color: var(--idt-testo); }

body .elementor-element.idt-checkout .woocommerce-order .woocommerce-customer-details address p { margin: 8px 0 0; font-size: var(--idt-t-12-5); color: var(--idt-grigio); }

/* --- schermi stretti -------------------------------------------------------- */

@media (max-width: 767px) {
  body .elementor-element.idt-checkout .woocommerce-order ul.order_details { grid-template-columns: 1fr; }
  body .elementor-element.idt-checkout .woocommerce-order ul.order_details li { border-inline-start: 0; border-top: var(--idt-linea-chiara); }
  body .elementor-element.idt-checkout .woocommerce-order ul.order_details li:first-child { border-top: 0; }
  body .elementor-element.idt-checkout .woocommerce-order .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* --- 44-bis. il clearfix di WooCommerce occupa la prima cella ---------------
   Le righe di riepilogo partivano da 350px dal bordo, con una colonna vuota
   davanti. La causa e' il clearfix storico

     .order_details::before, .order_details::after { content: "" }

   che su una griglia non e' piu' un trucco di layout: diventa un elemento di
   griglia a tutti gli effetti e si prende la prima (e l'ultima) cella. Va
   spento, come gia' fatto per le colonne degli indirizzi.
   -------------------------------------------------------------------------- */

body .elementor-element.idt-checkout .woocommerce-order ul.order_details::before, body .elementor-element.idt-checkout .woocommerce-order ul.order_details::after { content: none; }

/* --- 44-ter. pulsanti di uscita ---------------------------------------------
   La schermata di conferma finiva senza un proseguimento. I due pulsanti li
   stampa idt-account.php su woocommerce_thankyou (priorita' 100, quindi in
   coda): "Torna al catalogo" e' l'azione principale, "Vedi i tuoi ordini"
   compare solo a cliente collegato, perche' per un ordine da ospite l'area
   riservata non esiste.
   -------------------------------------------------------------------------- */

body .elementor-element.idt-checkout .woocommerce-order .idt-grazie-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

body .elementor-element.idt-checkout .woocommerce-order a.idt-grazie-b { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: var(--idt-h-grande); padding: 0 22px; border: var(--idt-linea); border-radius: var(--idt-radius-s); background: #fff; color: var(--idt-nero); font-family: var(--idt-sans); font-size: var(--idt-t-13-5); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); line-height: 1; text-transform: uppercase; text-decoration: none; transition: background var(--idt-transizione), border-color var(--idt-transizione), color var(--idt-transizione); }

body .elementor-element.idt-checkout .woocommerce-order a.idt-grazie-b:hover, body .elementor-element.idt-checkout .woocommerce-order a.idt-grazie-b:focus { background: var(--idt-barra); border-color: var(--idt-grigio-chiaro); color: var(--idt-nero); }

body .elementor-element.idt-checkout .woocommerce-order a.idt-grazie-b--primario { background: var(--idt-rosso); border-color: var(--idt-rosso); color: #fff; }

body .elementor-element.idt-checkout .woocommerce-order a.idt-grazie-b--primario:hover, body .elementor-element.idt-checkout .woocommerce-order a.idt-grazie-b--primario:focus { background: var(--idt-rosso-hover); border-color: var(--idt-rosso-hover); color: #fff; }

body .elementor-element.idt-checkout .woocommerce-order a.idt-grazie-b::before { content: ""; flex: none; width: 17px; height: 17px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }

body .elementor-element.idt-checkout .woocommerce-order a.idt-grazie-b--primario::before { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }

body .elementor-element.idt-checkout .woocommerce-order a.idt-grazie-b--ordini::before { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E"); }

/* ==========================================================================
   45. CORREZIONI RESPONSIVE

   Il sito era stato rifinito su uno schermo da 2560px. Scendendo di
   larghezza saltavano fuori quattro problemi veri, tutti verificati sul
   telefono a 390px.
   ========================================================================== */

/* --- 45.1 la griglia prodotti sfondava lo schermo --------------------------
   In una griglia CSS gli elementi hanno min-width: auto, cioe' non possono
   diventare piu' stretti del loro contenuto minimo. Nella card la riga
   "selettore di quantita' + AGGIUNGI" (o "N varianti + SCEGLI OPZIONI")
   misura circa 270px: con due colonne su 390px la griglia usciva dallo
   schermo e la seconda card restava tagliata a meta'.

   Servono due cose: sbloccare la larghezza minima e mandare a capo la riga
   dei pulsanti. Il selettore di quantita' sparisce, come nella bozza mobile:
   sul telefono si aggiunge un pezzo e si regola la quantita' nel carrello.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .idt-pgrid .elementor-loop-container, .idt-pgrid .elementor-loop-container > .e-loop-item, .idt-card, .elementor-element.idt-card-body, .elementor-element.idt-card-atc { min-width: 0; }

  .idt-card-atc .elementor-add-to-cart, .idt-card-atc .elementor-add-to-cart .cart, .idt-card-atc .e-loop-add-to-cart-form-container, .idt-card-atc form.cart { gap: 6px; }

  .idt-card-atc .idt-qty { display: none; }

  .idt-card-atc a.button, .idt-card-atc button.single_add_to_cart_button, .idt-card-atc .elementor-button, .woocommerce .idt-card-atc a.button { flex: 1 1 100%; padding: 0 10px; font-size: var(--idt-t-12); }
}

/* --- 45.2 intestazione: il carrello andava a capo --------------------------
   Il pulsante del carrello porta con se' l'etichetta "Carrello" e il
   totale: su 390px la riga logo + icone + carrello non ci stava e il
   carrello finiva su una riga tutta sua, spaiato a destra. Nella bozza
   mobile il carrello e' solo l'icona con il pallino del numero.

   La regola della sezione 13 che nasconde .elementor-button-text non
   bastava: il CSS del widget Carrello Menu di Elementor la batte in
   specificita', e comunque l'importo e' in un altro elemento.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body .elementor-element.idt-cart .elementor-menu-cart__toggle_button .elementor-button-text, body .elementor-element.idt-cart .elementor-menu-cart__toggle_button .woocommerce-Price-amount { display: none; }

  body .elementor-element.idt-cart .elementor-menu-cart__toggle_button { min-width: 44px; padding: 0; }

  .elementor-element.idt-logo { flex: 0 1 auto; min-width: 0; }
  .idt-logo img { max-width: 46vw; }
}

/* --- 45.3 barra categorie: pulsante e menu su due righe --------------------
   .idt-mega deve tenere sulla stessa riga il pulsante rosso e il pulsante a
   tre righe che apre l'elenco categorie. Andavano a capo perche' il
   contenitore poteva avvolgere e il pulsante non si lasciava stringere.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .elementor-element.idt-mega { flex-wrap: nowrap; }
  .elementor-element.idt-mega-btn { min-width: 0; }
  .idt-mega-btn .elementor-button { padding-inline: 12px; }
}

/* --- 45.4 l'intestazione fissa mangiava un terzo dello schermo -------------
   Tutto l'header e' sticky (sezione 2): su desktop e' giusto, ma sul
   telefono le righe diventano quattro - logo, ricerca, pulsante categorie,
   menu breve - e restavano incollate in alto per circa 290px su 820. Qui
   resta fissa solo la riga con logo e ricerca; la barra delle categorie
   scorre via con la pagina, come nella bozza mobile.
   -------------------------------------------------------------------------- */

/* Regole rimosse: vedi 47.5, l'intestazione torna fissa per intero. */

/* --- 45.5 archivio prodotti: prima i prodotti ------------------------------
   Sotto i 1024px la colonna dei filtri passa a tutta larghezza (sezione 14),
   ma restava SOPRA la griglia: con l'elenco completo delle categorie il
   visitatore doveva scorrere due schermate prima di vedere un prodotto.
   Qui i prodotti vengono prima e i filtri dopo, e l'elenco delle categorie
   prende un'altezza massima con scorrimento interno, come gia' fanno i
   marchi.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .elementor-element.idt-arc-main { order: 1; }
  .elementor-element.idt-arc-side { order: 2; }

  .idt-arc-cats ul { max-height: 320px; overflow-y: auto; }
}

/* ==========================================================================
   46. CORREZIONI RESPONSIVE - LA RIGA DI NAVIGAZIONE SUL TELEFONO
   ========================================================================== */

/* --- il problema ------------------------------------------------------------
   Sotto i 768px la riga sotto l'intestazione occupava tre righe intere:

     1. il pulsante rosso "Tutte le categorie" a tutta larghezza
     2. il pulsante a tre righe del menu principale, da solo e centrato
     3. il menu breve Offerte / Novita' / Vetrina

   Sono circa 150px di navigazione prima di vedere un prodotto. Nella bozza
   mobile la barra e' una sola, alta 44px.

   Due cose non funzionavano come previsto:

   a) .idt-nav-main (il pulsante a tre righe) doveva sparire sotto i 1024px
      per la regola della sezione 14, ma resta visibile: il widget Menu di
      Elementor si ridichiara display:flex con specificita' maggiore. Invece
      di insistere lo si tiene: e' l'unico comando davvero utilizzabile col
      dito, perche' apre il pannello a tendina del menu, mentre il pannello
      grande delle categorie (.idt-mega-panel) si apre solo con :hover, che
      su un telefono non esiste.

   b) .idt-mega restava a flex: 1 1 100% (sezione 14), quindi occupava da
      solo tutta la riga e spingeva a capo tutto il resto.

   Qui la barra diventa: pulsante rosso elastico + pulsante a tre righe da
   44px sulla stessa riga, menu breve sulla riga sotto.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* la riga fa da riferimento per la tendina del menu (vedi sotto) */
  .idt-navrow { position: relative; flex-wrap: wrap; align-items: center; gap: 8px !important; }

  /* il pulsante rosso si restringe invece di prendersi la riga intera */
  .elementor-element.idt-mega { flex: 1 1 auto; min-width: 0; }

  .idt-mega-btn .elementor-button { height: var(--idt-h-media); font-size: var(--idt-t-12); }

  /* il pannello grande delle categorie si apre solo con :hover: sul telefono
     resterebbe irraggiungibile e, al primo tocco, comparirebbe a sorpresa */

  /* --- il pulsante a tre righe -------------------------------------------
     Diventa un quadrato rosso di 44px accanto al pulsante delle categorie.
     position: static serve alla tendina: senza, Elementor la posiziona
     rispetto al widget e la tendina uscirebbe larga 44px. Con il widget
     statico il riferimento diventa .idt-navrow, che e' largo quanto lo
     schermo.
     ---------------------------------------------------------------------- */
  .elementor-element.idt-nav-main { display: flex !important; position: static; flex: 0 0 44px; width: 44px; align-items: center; justify-content: center; }

  .idt-nav-main .elementor-menu-toggle { width: 44px; height: var(--idt-h-media); padding: 0; border-radius: var(--idt-radius-s); background: var(--idt-rosso); color: #fff; }
  .idt-nav-main .elementor-menu-toggle svg { fill: #fff; }
  .idt-nav-main .elementor-menu-toggle i { color: #fff; }

  .idt-nav-main .elementor-nav-menu--dropdown { position: absolute !important; inset-inline: 0 !important; top: 100% !important; width: auto !important; min-width: 0 !important; max-width: none !important; box-shadow: 0 18px 34px rgba(0, 0, 0, .18) !important; }

  /* il menu breve prende la riga sotto, a tutta larghezza */
  .elementor-element.idt-nav-short { flex: 1 1 100%; margin-inline-start: 0; }

  .idt-nav-short .elementor-nav-menu { width: 100%; justify-content: space-around; }
}

/* ==========================================================================
   47. CORREZIONI RESPONSIVE - SECONDO GIRO
   ========================================================================== */

/* --- 47.1 le card non devono mai essere tagliate ----------------------------
   Il numero di colonne della Griglia Loop e' fisso per fascia (2 telefono,
   3 tablet, 4 desktop, 5 o 6 oltre i 1700px) e le colonne sono 1fr, quindi
   dovrebbero adattarsi da sole. Non lo facevano: in una griglia CSS gli
   elementi partono con min-width: auto e non si lasciano stringere sotto il
   loro contenuto minimo. Nella card il contenuto minimo e' la riga
   "quantita' + AGGIUNGI" (oppure "N varianti + SCEGLI OPZIONI"), circa
   270px: con sei colonne la griglia chiedeva piu' spazio di quello
   disponibile e l'ultima card finiva tagliata dal bordo della sezione.

   Serve sbloccare la larghezza minima lungo tutta la catena - contenitore,
   elemento del loop, card, corpo, riga azioni - e permettere alla riga dei
   pulsanti di andare a capo quando la colonna e' stretta. Cosi' la card si
   riadatta invece di sfondare, a qualunque larghezza.
   -------------------------------------------------------------------------- */

.idt-pgrid .elementor-loop-container, .idt-pgrid .elementor-loop-container > .e-loop-item, .idt-card, .elementor-element.idt-card-body, .elementor-element.idt-card-atc { min-width: 0; }

.idt-card-atc .elementor-add-to-cart, .idt-card-atc .elementor-add-to-cart .cart, .idt-card-atc .e-loop-add-to-cart-form-container, .idt-card-atc form.cart { flex-wrap: wrap; min-width: 0; }

/* il pulsante puo' restringersi fino a 120px, poi va a capo da solo */

/* i nomi lunghi non allargano la colonna */
.idt-card-title .elementor-heading-title, .idt-mini-title .elementor-heading-title, .idt-card-body .idt-ci-nome { overflow-wrap: anywhere; }

/* --- 47.2 telefono: "Scegli opzioni" restava sulla riga della pillola -------
   Sulle card dei prodotti con varianti la pillola "N varianti" e il pulsante
   restavano affiancati e il pulsante usciva dalla card. Le regole della
   sezione 45 c'erano ma venivano battute dal CSS del widget Aggiungi al
   carrello di Elementor, che ridichiara flex e flex-wrap con selettori piu'
   lunghi. Qui si insiste con !important: e' l'unico punto del progetto in cui
   serve, perche' la catena avversaria non e' raggiungibile con le classi
   disponibili.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .idt-card-atc .elementor-add-to-cart, .idt-card-atc .elementor-add-to-cart .cart, .idt-card-atc .e-loop-add-to-cart-form-container, .idt-card-atc form.cart { flex-wrap: wrap !important; }

  .idt-card-atc .idt-variants { flex: 1 1 100% !important; width: 100%; justify-content: center; height: 30px; font-size: var(--idt-t-11-5); }

  .idt-card-atc .elementor-add-to-cart a.button, .idt-card-atc a.button, .idt-card-atc button.single_add_to_cart_button, .idt-card-atc .elementor-button, .woocommerce .idt-card-atc a.button { flex: 1 1 100% !important; width: 100%; }
}

/* --- 47.3 telefono: il menu a tre righe --------------------------------------
   Nella tendina finivano le tre categorie del menu principale, che su
   desktop stanno gia' nella barra. Ora contiene Offerte, Novita' e Vetrina
   (le sposta idt-mobile.js) e la riga del menu breve sparisce: la barra di
   navigazione resta di una sola riga.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .elementor-element.idt-nav-short { display: none !important; }
}

/* --- 47.4 telefono: "Tutte le categorie" apre l'elenco ----------------------
   Il pannello grande si apre con :hover, che su un telefono non esiste: il
   pulsante portava direttamente alla pagina negozio. Ora idt-mobile.js
   intercetta il tocco e mette .idt-mega-aperto sul contenitore; qui il
   pannello diventa una tendina a tutta larghezza con l'elenco delle
   categorie, come nella bozza mobile.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .elementor-element.idt-mega .idt-mega-panel { display: none !important; }

  .elementor-element.idt-mega.idt-mega-aperto .idt-mega-panel { display: block !important; position: absolute !important; inset-inline: 0 !important; top: 100% !important; z-index: 70; width: auto !important; max-height: 70vh; overflow-y: auto; padding: 8px 12px 12px !important; border-top: var(--idt-linea); background: #fff; box-shadow: 0 18px 34px rgba(0, 0, 0, .18); }

  .idt-mega.idt-mega-aperto .elementor-element.idt-mega-cats { flex: 1 1 100%; width: 100%; max-height: none; overflow: visible; }

  /* il widget nasconde il menu e mostra il suo pulsante a tre righe:
     qui serve il contrario */
  .idt-mega.idt-mega-aperto .idt-mega-cats .elementor-nav-menu--main { display: block !important; }
  .idt-mega.idt-mega-aperto .idt-mega-cats .elementor-menu-toggle { display: none !important; }
  .idt-mega.idt-mega-aperto .idt-mega-cats .elementor-nav-menu--dropdown { display: none !important; }
  .idt-mega.idt-mega-aperto .idt-mega-promo { display: none !important; }

  .idt-mega.idt-mega-aperto .idt-mega-cats .elementor-nav-menu > li > a.elementor-item { height: var(--idt-h-compatta); padding: 0 4px; border-bottom: var(--idt-linea-chiara); font-size: var(--idt-t-13-5); }
}

/* --- 47.5 l'intestazione torna fissa per intero -----------------------------
   La sezione 45.4 lasciava fissa solo la riga con logo e ricerca. Sul
   telefono deve comportarsi come su desktop: tutta l'intestazione resta in
   alto. Con la barra di navigazione ridotta a una riga sola (sezioni 46 e
   47.3) l'ingombro e' accettabile.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  header.elementor-location-header { position: sticky; top: 0; }

  .elementor-element.idt-header-main { position: static; z-index: auto; }
}

/* --- 47.6 scheda prodotto: quantita' e pulsante allineati -------------------
   La pillola della quantita' e' alta 44px (sezione 23) e il pulsante 48px:
   con align-items: center restavano sfalsati di 2px sopra e sotto. Nella
   scheda prodotto la pillola sale a 48px e la riga si allinea in stretch,
   cosi' i due pezzi hanno la stessa altezza in ogni caso.
   -------------------------------------------------------------------------- */

.idt-pd-atc form.cart { align-items: stretch; }

.idt-pd-atc .idt-qty { height: var(--idt-h-grande); align-self: stretch; }

.idt-pd-atc .idt-qty input.qty, .idt-pd-atc .idt-qty input.idt-qty-input { min-height: 0; max-height: none; height: var(--idt-h-normale); align-self: stretch; line-height: 46px; }

.idt-pd-atc button.single_add_to_cart_button, .woocommerce .idt-pd-atc button.button.alt { min-height: var(--idt-h-grande); align-self: stretch; }

/* --- 47.7 carrello sul telefono ---------------------------------------------
   La pagina era illeggibile: "Articolo:", "Prezzo unitario:", "Quantita':"
   stampati in grassetto davanti a ogni valore, tutto allineato a destra, la
   miniatura sparita, righe a fondo grigio alterno.

   Non era la griglia della sezione 30: e' woocommerce-smallscreen.css, che
   WooCommerce carica sotto i 768px e che trasforma ogni cella in un blocco
   allineato a destra con l'etichetta data-title in ::before, usando
   !important. Sopra una riga che e' gia' una griglia, quel foglio non
   aggiunge nulla: va spento.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  body .elementor-element.idt-cart table.shop_table_responsive tr td::before, body .elementor-element.idt-cart table.cart tr td::before { content: none !important; display: none !important; }

  body .elementor-element.idt-cart table.shop_table_responsive tr td, body .elementor-element.idt-cart table.cart tbody td { text-align: start !important; background: transparent !important; }

  body .elementor-element.idt-cart table.shop_table_responsive tbody tr.cart_item { display: grid !important; }

  body .elementor-element.idt-cart table.cart tbody td.product-thumbnail { display: block !important; }
  body .elementor-element.idt-cart table.cart tbody td.product-subtotal { text-align: end !important; }
}

@media (max-width: 767px) {
  body .elementor-element.idt-cart table.shop_table tbody tr.cart_item { grid-template-columns: 64px 1fr 32px; gap: 8px 10px; padding: 12px; }

  body .elementor-element.idt-cart table.cart td.product-name .idt-ci-nome, body .elementor-element.idt-cart table.cart td.product-name .idt-ci-nome a { font-size: var(--idt-t-13); }

  body .elementor-element.idt-cart table.cart td.product-subtotal, body .elementor-element.idt-cart table.cart td.product-subtotal span, body .elementor-element.idt-cart table.cart td.product-subtotal bdi { font-size: 19px; }
}

/* --- 47.8 carrello: le celle avevano perso il loro display ------------------
   Spente le etichette di woocommerce-smallscreen.css restava il suo
   display: block su ogni cella, con specificita' (0,2,2). La cella del nome
   era una colonna flex (marchio, nome, codice uno sotto l'altro) e la cella
   del prezzo una riga: tornate blocco, marchio nome e codice finivano
   incollati in un unico paragrafo - "DOCABBASSALINGUA IN LEGNOArt. 171143".
   Qui il display giusto viene ridichiarato con la catena del widget.

   La miniatura scende a 64px, quanto la colonna della griglia: a 84px
   sconfinava nella colonna del nome.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  body .elementor-element.idt-cart table.cart tbody td.product-name, body .elementor-element.idt-cart table.cart tbody td.product-price { display: flex !important; }
}

@media (max-width: 767px) {
  body .elementor-element.idt-cart td.product-thumbnail a, body .elementor-element.idt-cart td.product-thumbnail img { width: 64px; height: 64px; }
}

/* ==========================================================================
   48. GRIGLIA PRODOTTI: COLONNE CHE SI RIDUCONO DA SOLE
   ========================================================================== */

/* --- perche' non bastava min-width: 0 ---------------------------------------
   Sbloccando la larghezza minima (sezione 47.1) le card hanno smesso di
   sfondare il contenitore, ma il problema si e' spostato dentro la card: il
   pulsante, potendo restringersi, si stringeva sotto la sua etichetta e
   "AGGIUNGI" veniva tagliato a meta' da .idt-card { overflow: hidden }. Il
   risultato a schermo era lo stesso di prima.

   La richiesta era chiara: piuttosto una scheda in meno, con le colonne
   riadattate in larghezza. Qui la griglia smette di avere un numero fisso di
   colonne e usa auto-fill con una larghezza minima di colonna:

     larghezza minima = il piu' grande fra
       a) 290px - quanto serve alla card per tenere su una riga il selettore
          di quantita' e il pulsante;
       b) la larghezza che avrebbero le colonne del progetto (--grid-columns,
          che Elementor scrive per fascia: 2 telefono, 3 tablet, 4 desktop,
          5 o 6 oltre i 1700px).

   Quando le colonne del progetto sono abbastanza larghe vince (b) e il
   numero di colonne resta esattamente quello disegnato - su un monitor da
   2560px restano sei. Quando sarebbero troppo strette vince (a) e auto-fill
   ne toglie una, allargando le altre: su 1728px la home passa da sei a
   cinque, l'archivio da cinque a quattro. Nessuna card viene mai tagliata.

   min(100%, ...) serve al caso limite: su uno schermo strettissimo la
   colonna non puo' comunque superare il contenitore.
   -------------------------------------------------------------------------- */

.idt-pgrid .elementor-loop-container { --idt-gap: 12px; --idt-col-min: 290px; gap: var(--idt-gap); grid-template-columns: repeat( auto-fill, minmax( min( 100%, max( var(--idt-col-min), calc((100% - (var(--grid-columns, 4) - 1) * var(--idt-gap)) / var(--grid-columns, 4)) ) ), 1fr ) ); }

@media (max-width: 767px) {
  /* sul telefono il selettore di quantita' sparisce e il pulsante va a tutta
     larghezza (sezione 45.1): alla card bastano 150px */
  .idt-pgrid .elementor-loop-container { --idt-gap: 8px; --idt-col-min: 150px; }
}

/* --- rete di sicurezza: il pulsante non si taglia mai ------------------------
   Anche con le colonne giuste, un'etichetta piu' lunga del previsto non deve
   finire tagliata. min-width: max-content impedisce al pulsante di stringersi
   sotto la sua etichetta: se non ci sta, la riga va a capo e il pulsante
   prende una riga tutta sua. E' l'opposto di min-width: 0, che lo lasciava
   restringere fino a nascondere il testo.
   -------------------------------------------------------------------------- */

.idt-card-atc .elementor-add-to-cart a.button, .idt-card-atc a.button, .idt-card-atc button.single_add_to_cart_button, .woocommerce .idt-card-atc a.button { flex: 1 1 auto; min-width: max-content; }

.idt-card-atc .idt-variants { min-width: max-content; }

@media (max-width: 767px) {
  /* qui il pulsante e' gia' a tutta larghezza: se l'etichetta non ci sta
     (schermi da 320px) va a capo invece di essere tagliata */
  .idt-card-atc .elementor-add-to-cart a.button, .idt-card-atc a.button, .idt-card-atc button.single_add_to_cart_button, .woocommerce .idt-card-atc a.button { min-width: 0; height: auto; min-height: var(--idt-h-media); padding: 6px 10px; white-space: normal; line-height: 1.2; text-align: center; }

  .idt-card-atc .idt-variants { min-width: 0; }
}

/* --- 48.1 scheda prodotto: il pulsante usciva dalla colonna ------------------
   Sul telefono la riga "quantita' + AGGIUNGI AL CARRELLO" misura 403px in una
   colonna da 390: il pulsante sbordava di 13px. La riga avrebbe dovuto andare
   a capo - flex-wrap: wrap e' scritto nella sezione 12 - ma il CSS del widget
   Aggiungi al carrello di Elementor rimette nowrap con un selettore piu'
   lungo. Come per le card (sezione 47.2) qui serve !important.

   Sotto i 768px il pulsante prende comunque la riga intera: e' l'azione
   principale della pagina.
   -------------------------------------------------------------------------- */

body .elementor-element.idt-pd-atc form.cart { flex-wrap: wrap !important; }

@media (max-width: 767px) {
  body .elementor-element.idt-pd-atc button.single_add_to_cart_button, body .woocommerce .elementor-element.idt-pd-atc button.button.alt { flex: 1 1 100%; width: 100%; }
}

/* ==========================================================================
   49. L'INTESTAZIONE MOBILE PARTE DA 1024px
   ========================================================================== */

/* --- perche' una fascia a se' ------------------------------------------------
   Le regole dell'intestazione mobile stanno nel blocco @media (max-width:767px)
   insieme a decine di regole che riguardano hero, card, piede e scheda
   prodotto: allargare quel blocco a 1024px cambierebbe molto piu' di quanto
   serve. Qui c'e' quindi una fascia dedicata, 768-1024px, che ripete le sole
   regole dell'intestazione. Sotto i 768px valgono quelle di prima, che dicono
   le stesse cose: il risultato e' un'intestazione mobile continua fino a
   1024px.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {

  /* --- barra superiore: solo le prime due diciture --- */
  :root {
    --idt-topbar-h: 30px;
  }
  .idt-topbar { min-height: 30px !important; }
  .idt-topbar .elementor-icon-list-item:nth-child(n+3) { display: none; }
  .idt-topbar-note { display: none; }
  .idt-topbar .elementor-icon-list-items { gap: 14px; }

  /* --- riga logo + icone, ricerca a capo --- */
  .idt-header-main { flex-wrap: wrap; gap: 10px !important; }
  .idt-logo { order: 1; }
  .idt-logo img { width: 152px; max-width: 46vw; }
  .idt-hdr-link { order: 2; }
  .idt-hdr-labels { display: none; }
  .idt-hdr-link-boxed { border: 0; }
  .idt-cart { order: 3; margin-inline-start: auto; }

  body .elementor-element.idt-cart .elementor-menu-cart__toggle_button .elementor-button-text, body .elementor-element.idt-cart .elementor-menu-cart__toggle_button .woocommerce-Price-amount { display: none; }

  body .elementor-element.idt-cart .elementor-menu-cart__toggle_button { min-width: 44px; padding: 0; }

  .elementor-element.idt-search { order: 4; flex: 1 1 100%; }
  .idt-search .aws-container .aws-search-form { height: var(--idt-h-media); }
  .idt-search .aws-container .aws-wrapper, .idt-search .aws-container .aws-search-field, .idt-search .aws-container .aws-search-btn.aws-form-btn { height: 40px; }
  .idt-search .aws-container .aws-search-btn.aws-form-btn { flex-basis: 48px; width: 48px; min-width: 48px; }

  /* --- barra di navigazione: pulsante rosso + pulsante a tre righe --- */
  .idt-navrow { position: relative; flex-wrap: wrap; align-items: center; gap: 8px !important; }

  .elementor-element.idt-mega { flex: 1 1 auto; min-width: 0; }
  .idt-mega-btn .elementor-button { height: var(--idt-h-media); font-size: var(--idt-t-12); }

  .elementor-element.idt-nav-main { display: flex !important; position: static; flex: 0 0 44px; width: 44px; align-items: center; justify-content: center; }

  .idt-nav-main .elementor-menu-toggle { width: 44px; height: var(--idt-h-media); padding: 0; border-radius: var(--idt-radius-s); background: var(--idt-rosso); color: #fff; }
  .idt-nav-main .elementor-menu-toggle svg { fill: #fff; }
  .idt-nav-main .elementor-menu-toggle i { color: #fff; }

  .idt-nav-main .elementor-nav-menu--dropdown { position: absolute !important; inset-inline: 0 !important; top: 100% !important; width: auto !important; min-width: 0 !important; max-width: none !important; box-shadow: 0 18px 34px rgba(0, 0, 0, .18) !important; }

  .elementor-element.idt-nav-short { display: none !important; }
}

/* --- il pannello categorie: stesse regole fino a 1024px --------------------- */

@media (max-width: 1024px) {
  .elementor-element.idt-mega .idt-mega-panel { display: none !important; }

  .elementor-element.idt-mega.idt-mega-aperto .idt-mega-panel { display: block !important; position: absolute !important; inset-inline: 0 !important; top: 100% !important; z-index: 70; width: auto !important; max-height: 70vh; overflow-y: auto; padding: 8px 12px 12px !important; border-top: var(--idt-linea); background: #fff; box-shadow: 0 18px 34px rgba(0, 0, 0, .18); }

  .idt-mega.idt-mega-aperto .elementor-element.idt-mega-cats { flex: 1 1 100%; width: 100%; max-height: none; overflow: visible; }

  .idt-mega.idt-mega-aperto .idt-mega-cats .elementor-nav-menu--main { display: block !important; }
  .idt-mega.idt-mega-aperto .idt-mega-cats .elementor-menu-toggle { display: none !important; }
  .idt-mega.idt-mega-aperto .idt-mega-cats > .elementor-widget-container > .elementor-nav-menu--dropdown { display: none !important; }
  .idt-mega.idt-mega-aperto .idt-mega-promo { display: none !important; }

  .idt-mega.idt-mega-aperto .idt-mega-cats .elementor-nav-menu > li > a.elementor-item { height: var(--idt-h-compatta); padding: 0 4px; border-bottom: var(--idt-linea-chiara); font-size: var(--idt-t-13-5); }

  /* --- 49.1 le sottocategorie si aprono a fisarmonica ----------------------
     Toccando una categoria si andava dritti alla sua pagina: la freccia a
     destra prometteva un livello in piu' che non si apriva mai. Ora il tocco
     apre l'elenco delle sottocategorie (idt-mobile.js mette .idt-open sulla
     voce) e in fondo resta la voce "Vedi tutti" per arrivare alla categoria.
     Le voci senza sottocategorie continuano a portare alla loro pagina.
     ---------------------------------------------------------------------- */

  .idt-mega.idt-mega-aperto .idt-mega-cats .elementor-nav-menu--main > ul > li.idt-open > ul.sub-menu { display: block !important; position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; columns: 1; padding: 4px 0 10px 14px !important; border: 0; box-shadow: none; background: transparent; }

  .idt-mega.idt-mega-aperto .idt-mega-cats .sub-arrow { transition: transform .15s ease; }

  .idt-mega.idt-mega-aperto .idt-mega-cats .elementor-nav-menu > li.idt-open > a.elementor-item .sub-arrow { transform: rotate(90deg); }

  .idt-mega.idt-mega-aperto .idt-mega-cats .elementor-nav-menu > li.idt-open > a.elementor-item { color: var(--idt-azzurro); }
}

/* --- 49.2 il menu a tre righe anche fra 768 e 1024px ------------------------
   Il widget Menu ha il suo punto di rottura a 767px: sopra quella soglia
   stampa il menu orizzontale e tiene nascosto il pulsante a tre righe. Nella
   fascia 768-1024, dove ora l'intestazione e' quella mobile, serve il
   contrario. Il pulsante e la tendina sono gia' nel markup: basta invertire
   chi si vede.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .idt-nav-main .elementor-nav-menu--main { display: none !important; }

  .idt-nav-main .elementor-menu-toggle { display: flex !important; align-items: center; justify-content: center; }
}

/* --- 49.3 la tendina del menu si apre anche sopra i 768px -------------------
   Elementor tiene la tendina a display:none sopra il proprio punto di rottura
   con una regola di media query; il suo JS la apre assegnando un display in
   linea, che nella fascia 768-1024 non basta a batterla. Quando il pulsante e'
   attivo la tendina va quindi mostrata esplicitamente.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .idt-nav-main .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown, .idt-nav-main .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown { display: block !important; }
}

/* ==========================================================================
   50. NEWSLETTER DEL PIEDE: MODULO MAILCHIMP
   ========================================================================== */

/* --- perche' qui non c'e' il widget Modulo ----------------------------------
   L'audience Mailchimp ha il campo Telefono contrassegnato obbligatorio.
   Mailchimp lo pretende su ogni iscrizione fatta via API - l'integrazione
   nativa di Elementor riceveva un 400 con "PHONE: Inserisci un valore" - ma
   non sui propri moduli ospitati, dove il telefono viene chiesto nella pagina
   di conferma. E' il flusso del sito online: nel modulo solo l'email, il
   telefono al momento della conferma.

   Quel flusso passa solo dal modulo di Mailchimp: l'endpoint classico
   chiamato dal server non crea nulla, vuole una sessione di browser (provato:
   risponde 200 ma il contatto non nasce). Il piede usa quindi il modulo di
   Mailchimp dentro un widget HTML - unica eccezione alla regola dei soli
   widget nativi, decisa in corso d'opera.

   Il foglio di stile di Mailchimp (slim-10_7.css) non viene caricato: le
   misure qui sotto sono le stesse che aveva il widget Modulo (campo e
   pulsante 46px, spazio 8px), cosi' il piede non cambia di un pixel.
   -------------------------------------------------------------------------- */

.idt-newsletter-form .idt-mc-riga { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 8px; width: 100%; }

/* l'etichetta serve ai lettori di schermo: il titolo della colonna la ripete */
.idt-newsletter-form .idt-mc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }

.idt-newsletter-form input.idt-mc-email { flex: 1 1 auto; min-width: 0; width: 100%; height: var(--idt-h-normale); padding: 0 14px; border: var(--idt-linea); border-radius: var(--idt-radius-s); background: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-14); color: var(--idt-nero); }
.idt-newsletter-form input.idt-mc-email::placeholder { color: var(--idt-grigio-chiaro); }
.idt-newsletter-form input.idt-mc-email:focus { outline: 0; border-color: var(--idt-azzurro); }

.idt-newsletter-form .idt-mc-azione { flex: 0 0 auto; }

.idt-newsletter-form input.idt-mc-btn { height: var(--idt-h-normale); padding: 0 22px; border: 0; border-radius: var(--idt-radius-s); background: var(--idt-rosso); color: #fff; font-family: var(--idt-sans); font-size: var(--idt-t-14); font-weight: var(--idt-peso-nero); letter-spacing: var(--idt-ls-pulsante); text-transform: uppercase; cursor: pointer; transition: background var(--idt-transizione); }

.idt-newsletter-form input.idt-mc-btn:hover, .idt-newsletter-form input.idt-mc-btn:focus { background: var(--idt-rosso-hover); }
.idt-newsletter-form input.idt-mc-btn:active { background: var(--idt-rosso-active); transform: scale(.98); }
.idt-newsletter-form input.idt-mc-btn:disabled { background: var(--idt-bordo); color: var(--idt-grigio-chiaro); cursor: default; }

/* il campo trappola per i bot resta fuori schermo, ma raggiungibile dal DOM */
.idt-newsletter-form .idt-mc-trappola { position: absolute; left: -5000px; }

@media (max-width: 767px) {
  .idt-newsletter-form .idt-mc-riga { flex-wrap: wrap; }

  .idt-newsletter-form input.idt-mc-email, .idt-newsletter-form .idt-mc-azione, .idt-newsletter-form input.idt-mc-btn { flex: 1 1 100%; width: 100%; }
}