/* KeCMS Frontend - Main Stylesheet */

/* NOTE: tailwind.min.css è caricato via <link> in base.twig per permettere
   download parallelo ed evitare una catena critica app.css -> tailwind.min.css
   che penalizza LCP di ~400ms. NON re-importare qui. */
/* import main.css */
/**
 * KeCMS - Main Stylesheet ok
 * Utilizza CSS Variables definite in :root dal ThemeService
 * Servito come file statico, cacheable dal browser
 */

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {box-sizing: border-box;}
/* Guard overflow orizzontale: se un blocco sfora la larghezza del viewport (es. su
   mobile) la pagina si "trascina" lateralmente e il menu fixed (right:0) finisce
   fuori schermo. `clip` taglia l'overflow SENZA creare uno scroll-container, quindi
   l'header `position: sticky` continua a funzionare (a differenza di overflow:hidden). */
html, body {overflow-x: clip;}
/* Menu mobile off-canvas: l'inline height:100vh su mobile reale (iOS Safari /
   Chrome Android) è il viewport GRANDE (barra URL nascosta), più alto dell'area
   visibile → gli ultimi item finiscono sotto la barra del browser, tagliati e NON
   scrollabili (overflow-y:auto non scatta perché per il box nulla sfora). 100dvh
   combacia con l'area davvero visibile: se il contenuto sfora parte lo scroll, se
   non sfora niente è tagliato. !important per battere lo style inline. Lo slide
   resta intatto (questa è solo l'altezza). */
@media (max-width: 1023px) {
    #mobile-menu { height: 100vh; height: 100dvh !important; }
}
body {margin: 0;font-weight: var(--font-weight-base, 400);font-size: var(--font-size-base, 1rem); line-height: var(--line-height, 1.6); color: var(--color-text, inherit); font-family: var(--font-primary, inherit); -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;}
/* Sfondo pagina dalle impostazioni di Template (tab Colori → Sfondo Principale).
   Il selettore [class] non e' un vezzo: base.twig mette `bg-gray-50` sul <body>, e
   una classe (0-1-0) batte un elemento (0-0-1). L'attributo pareggia il conto e
   lascia vincere l'impostazione del sito.
   Ogni fallback riproduce l'aspetto di oggi (#f9fafb e' proprio bg-gray-50), quindi
   un sito senza quei valori in configurazione non cambia di una virgola. */
body, body[class] {background-color: var(--color-background, #f9fafb);}
/* Il <main> di base.twig porta `bg-white` e copre tutta l'area di contenuto: senza
   questa regola lo sfondo del body non si vede mai. Solo <main>, di proposito — gli
   altri `bg-white` (tendine, menu mobile, schede) devono restare bianchi.
   base.twig non viaggia con gli aggiornamenti, quindi la correzione deve stare qui. */
main.bg-white {background-color: var(--color-background, #ffffff);}
p {margin-top: 10px;}
span {color: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;}
img, picture, video, canvas, svg {display: block;max-width: 100%;height: auto;}
/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--color-text);
margin-top: 0;
}

a {
/* Link a riposo: "Colore Collegamenti (link)" del pannello Template.
   Ripiego su --color-primary per i siti dove la chiave tema_color_link
   non esiste ancora (introdotta dalla migrazione 72). */
color: var(--color-link, var(--color-primary));
text-decoration: none;
transition: color 0.2s ease;
}

a:hover {
color: var(--color-primary-hover);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: var(--border-radius);
border: none;
cursor: pointer;
transition: all 0.2s ease;
}

.btn-primary {
background-color: var(--color-primary);
color: #ffffff !important;
}

.btn-primary:hover {
background-color: var(--color-primary-hover);
}

.btn-secondary {
background-color: var(--color-secondary);
color: #ffffff;
}

.btn-accent {
background-color: var(--color-accent);
color: #ffffff;
}

.btn-outline {
background-color: transparent;
border: 2px solid var(--color-primary);
color: var(--color-primary);
}

.btn-outline:hover {
background-color: var(--color-primary);
color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ─── CSS TABELLE RESPONSIVE (Compatibile con Tiptap) ───
   ═══════════════════════════════════════════════════════════════════════════ */

table.responsive-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 2rem 0;
    background-color: #ffffff;
}

/* Fix per i paragrafi forzati da Tiptap dentro le celle */
table.responsive-table th p,
table.responsive-table td p {
    margin: 0 !important;
    padding: 0 !important;
}

/* ─── Intestazione tabella (default arancio, override via data-theme) ─── */
table.responsive-table thead th {
    background-color: var(--color-primary, #ea580c);
    color: #ffffff;
    font-weight: 600;
    text-align: left;
}

/* Fallback per tabelle vecchie senza <thead> */
table.responsive-table tr:first-child:has(th) {
    background-color: var(--color-primary, #ea580c);
}
table.responsive-table tr:first-child th {
    color: #ffffff;
    font-weight: 600;
    text-align: left;
}

/* ─── Varianti colore intestazione (data-theme) ─── */
table.responsive-table[data-theme="orange"] thead th { background-color: #f97316; }
table.responsive-table[data-theme="blue"] thead th { background-color: #3b82f6; }
table.responsive-table[data-theme="green"] thead th { background-color: #22c55e; }
table.responsive-table[data-theme="red"] thead th { background-color: #ef4444; }
table.responsive-table[data-theme="indigo"] thead th { background-color: #6366f1; }
table.responsive-table[data-theme="gray"] thead th { background-color: #6b7280; }
table.responsive-table[data-theme="teal"] thead th { background-color: #14b8a6; }
table.responsive-table[data-theme="pink"] thead th { background-color: #ec4899; }

/* Fallback vecchie tabelle senza <thead> */
table.responsive-table[data-theme="orange"] tr:first-child:has(th) { background-color: #f97316; }
table.responsive-table[data-theme="blue"] tr:first-child:has(th) { background-color: #3b82f6; }
table.responsive-table[data-theme="green"] tr:first-child:has(th) { background-color: #22c55e; }
table.responsive-table[data-theme="red"] tr:first-child:has(th) { background-color: #ef4444; }
table.responsive-table[data-theme="indigo"] tr:first-child:has(th) { background-color: #6366f1; }
table.responsive-table[data-theme="gray"] tr:first-child:has(th) { background-color: #6b7280; }
table.responsive-table[data-theme="teal"] tr:first-child:has(th) { background-color: #14b8a6; }
table.responsive-table[data-theme="pink"] tr:first-child:has(th) { background-color: #ec4899; }


table.responsive-table th,
table.responsive-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    color: #374151;
}

table.responsive-table th:last-child,
table.responsive-table td:last-child {
    border-right: none;
}

table.responsive-table tr:last-child td {
    border-bottom: none;
}

/* ─── VISTA MOBILE (Trasformazione in Card) ─── */
@media screen and (max-width: 768px) {
    /* Spegne il colgroup di Tiptap che sballa le larghezze */
    table.responsive-table colgroup { display: none !important; }
    
    table.responsive-table, 
    table.responsive-table tbody {
        border: none;
        border-radius: 0;
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        background-color: transparent;
        margin: 0;
    }

   /* Nascondiamo l'intestazione */
table.responsive-table thead,
table.responsive-table tr:first-child:has(th) {
    display: none !important; 
}


    /* Ogni riga di dati (tr) diventa una Card full-width */
    table.responsive-table tr {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        box-sizing: border-box;
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem; 
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); 
        overflow: hidden;
    }

    /* Le celle (td) diventano righe flex: etichetta a sx, testo a dx */
    table.responsive-table td {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        width: 100% !important;
        box-sizing: border-box;
        border-right: none; 
        border-bottom: 1px solid #e5e7eb; 
        padding: 1.25rem;
        gap: 1rem;
    }

    /* Il testo dentro il paragrafo di Tiptap deve stare a destra */
    table.responsive-table td > p {
        text-align: right;
        flex: 1;
        word-break: break-word;
    }

    table.responsive-table tr td:last-child {
        border-bottom: none;
    }

    /* Il titoletto sopra al testo preso dal data-label */
    table.responsive-table td::before {
        content: attr(data-label);
        display: block;
        flex-shrink: 0;
        max-width: 45%;
        text-align: left;
        font-size: 0.75rem; 
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-primary, #ea580c);
        line-height: 1.4;
        white-space: normal;
    }
	
	/* Varianti colore label mobile */
table.responsive-table[data-theme="orange"] td::before { color: #f97316; }
table.responsive-table[data-theme="blue"] td::before { color: #3b82f6; }
table.responsive-table[data-theme="green"] td::before { color: #22c55e; }
table.responsive-table[data-theme="red"] td::before { color: #ef4444; }
table.responsive-table[data-theme="indigo"] td::before { color: #6366f1; }
table.responsive-table[data-theme="gray"] td::before { color: #6b7280; }
table.responsive-table[data-theme="teal"] td::before { color: #14b8a6; }
table.responsive-table[data-theme="pink"] td::before { color: #ec4899; }


    /* Sfondino grigio alla prima cella per farla sembrare l'intestazione della card */
    table.responsive-table td:first-child {
        background-color: #f9fafb;
    }
}

/* ============================================
   FORMS
   ============================================ */

.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 0.625rem 0.875rem;
font-size: 1rem;
border: 1px solid #d1d5db;
border-radius: var(--border-radius);
background-color: var(--color-background);
color: var(--color-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input.error,
.form-textarea.error {
border-color: var(--color-error);
}

/* ============================================
   CARDS
   ============================================ */

.card {
background-color: var(--color-background);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
}

.card-body {
padding: 1.5rem;
}


/* ============================================
   ALERTS
   ============================================ */

.alert {
padding: 1rem 1.25rem;
border-radius: var(--border-radius);
margin-bottom: 1rem;
}

.alert-success {
background-color: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--color-success);
color: #065f46;
}

.alert-warning {
background-color: rgba(245, 158, 11, 0.1);
border-left: 4px solid var(--color-warning);
color: #92400e;
}

.alert-error {
background-color: rgba(239, 68, 68, 0.1);
border-left: 4px solid var(--color-error);
color: #991b1b;
}

/* ============================================
   UTILITIES
   ============================================ */

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-light { color: var(--color-text-light); }

.bg-primary { background-color: var(--color-primary); }
.bg-alt { background-color: var(--color-background-alt); }

.container {
width: 100%;
max-width: var(--container-max-width);
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}

.section {
padding: 4rem 0;
}
.section-alt {
background-color: var(--color-background-alt);
}
article ul {
list-style-type: disc;
padding-left: 1.5rem; 
margin-top: 0.5rem;
margin-bottom: 1rem;
}

article ol {
list-style-type: decimal;
padding-left: 1.5rem; 
margin-top: 0.5rem;
margin-bottom: 1rem;
}

article ul ul, 
article ol ul {
list-style-type: circle;
margin-top: 0.25rem;
margin-bottom: 0;
}

article li {
margin-bottom: 0.25rem;
}
/* end import main.css */
/* Custom Styles */
h1 {font-size: 2.5em;line-height: 1.5;padding-bottom: 10px;padding-top: 10px;font-weight: var(--font-weight-heading, 700);}
h2 {font-size: 2em;line-height: 1.5;font-weight: var(--font-weight-heading, 700);padding-top:10px;padding-bottom:10px;}
h3 {font-size: 1.75em;line-height: 1.5;font-weight: var(--font-weight-heading, 700);padding-top:10px;padding-bottom:10px;}
h4 {font-size: 1.5em;line-height: 1.5;font-weight: var(--font-weight-heading, 700);padding-top:10px;padding-bottom:10px;}
h5 {font-size: 1.25em;line-height: 1.5;font-weight: var(--font-weight-heading, 700);padding-top:10px;padding-bottom:10px;}
h6 {font-size: 1.1em;line-height: 1.5;font-weight: var(--font-weight-heading, 700);padding-top:10px;padding-bottom:10px;}

.text-base-content\/70 { color: rgba(31, 41, 55, 0.7);}
.text-base-content\/80 { color: rgba(31, 41, 55, 0.8);}
.text-base-content\/60 { color: rgba(31, 41, 55, 0.6);}
.leading-relaxed {line-height: 1.6;}
.space-y-6 > * + * {margin-top: 1.5rem;}
.space-y-4 > * + * {margin-top: 1rem;}
.space-y-2 > * + * {margin-top: 0.5rem;}
@media (min-width: 1024px) {
.lg\:grid-cols-2 {grid-template-columns: repeat(2, 1fr);}}
/* ===== Card ===== */
.card {border-radius: 1rem;overflow: hidden;}
.card-body {padding: 2rem;}
.card-title {font-weight: 600;}
.card:hover {box-shadow:0 0px 3px rgba(85, 142, 213, 0.66);transition: box-shadow 0.3s ease;cursor:pointer;}
/* ===== TABLE ==== */
.table-offerta-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;}
/* ===== TABELLA BASE ===== */
table{margin-bottom:10px;margin-top:10px;width: 100%; /* desktop minimo */border-collapse: separate;border-spacing: 0;/* border-radius: 0.75rem; */overflow: hidden;/* box-shadow: 0 8px 20px rgba(0,0,0,0.05); */background-color: #ffffff;box-sizing: border-box;/* border: 1px solid #d4d4d4; */}
@media (min-width: 768px) {table {border: 1px solid #d4d4d4;}}
table:not(.responsive-table) thead {background-color: #383838; color: #ffffff; font-weight: 600; text-align: left;}
th,td {padding: 1rem 1.25rem;border-bottom: 1px solid #e5e7eb;}
tbody tr:nth-child(even) {background-color: #f3f4f6; /* zebra rows */}
tbody tr:hover {background-color: #e8d1b9; /* hover leggero */box-shadow: 0 4px 15px rgba(0,0,0,0.05);transition: all 0.3s ease;}
td {color: #374151;}
a.btn-download {background-color: #558ed5;color: #ffffff;padding: 0.5rem 1rem;border-radius: 0.5rem;display: inline-block;transition: background-color 0.2s ease;}
a.btn-download:hover {background-color: #4172b8;
color: #ffffff;}@media (max-width: 768px) {table:not(.responsive-table) thead {display: none;}
tbody tr {display: block;margin-bottom: 1rem;border: 1px solid #d1d5db;/* border-radius: 0.75rem; */box-shadow: 0 4px 15px rgba(0,0,0,0.05);background-color: #ffffff;}
tbody td {display: flex;justify-content: space-between;padding: 0.75rem 1rem;border-bottom: 1px solid #e5e7eb;position: relative;flex-wrap: wrap;box-sizing: border-box;}
tbody td::before {content: attr(data-label);flex-basis: 50%;font-weight: 600;color: #111827;}tbody td:last-child {border-bottom: 0;}}
/* ====  END TABLE ==== */
/* ===== Form ===== */
.form-control {display: flex;flex-direction: column;}
.label {margin-bottom: 0.5rem;font-size: 0.875rem;font-weight: 500;}
.label-text {
color: #1f2937;}
.input,.textarea {width: 100%;padding: 0.75rem 1rem;border-radius: 0.75rem;border: 1px solid #e5e7eb;font-size: 1rem;transition: all 0.2s ease;}
.input:focus,.textarea:focus {outline: none;border-color: #558ed578;box-shadow: 0px 0px 3px 0px rgb(85, 142, 213);}
.textarea {resize: vertical;}
.btn {display: inline-block;padding: 0.75rem 1.25rem;border-radius: 0.75rem;border: none;cursor: pointer;font-weight: 600;transition: all 0.2s ease;margin-top: 10px;margin-bottom: 5px;}
.btn-primary {background-color: #7c3aed;color: #ffffff;}
/* Border radius */
.rounded-full {border-radius: 9999px;}
.rounded-b-lg {border-bottom-left-radius: 0.5rem;border-bottom-right-radius: 0.5rem;}
/* Font size */
.text-xs {font-size: 0.75rem;}
/* Transition */
.transition-colors {transition: background-color 0.2s ease, color 0.2s ease;}
.duration-200 {transition-duration: 0.2s;}
/* Hover */
.hover\:bg-purple-600:hover {background-color: #7c3aed;}
.group:hover > .group-hover\:block {display: block;}

/* Override responsive xl: per il menu desktop (≥ 1280px).
   Necessario perché le ridichiarazioni Tailwind sopra (.text-xs riga 442
   in particolare) vengono caricate DOPO tailwind.min.css e sovrascrivono
   le classi `xl:` per cascade order (stessa specificity 0,1,0). Senza
   questo blocco il menu resterebbe con font 0.75rem e padding stretto
   anche su schermi grandi (1366+, desktop), invece di tornare al comfort
   text-sm + px-5 da 1280px in su. */
@media (min-width: 1280px) {
    .xl\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .xl\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .xl\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}
/* END Custom Styles */
.prose {max-width: 65ch;color: #374151;line-height: 1.75;}
.prose h1, .prose h2, .prose h3, .prose h4 {color: #111827;font-weight: var(--font-weight-heading, 700);line-height: 1.25;margin-top: 2em;margin-bottom: 0.5em;}
.prose h1 { font-size: 2.25rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose p {margin-top: 1.25em;margin-bottom: 1.25em;}
.prose a {color: var(--color-link, #2563eb);text-decoration: underline;}
.prose a:hover {color: var(--color-link, #1d4ed8);filter: brightness(.85);}
/* Prezzo prodotto: colore commerciale unico (themeable via --color-cta) */
.ke-prezzo {color: var(--color-cta, #b45309);}
/* Scheda tecnica legacy embeddata nella descrizione (import PrestaShop): ora le
   specifiche hanno una tabella strutturata dedicata → nascondiamo il duplicato. */
.scheda-tecnica {display: none;}

/* ─── Specifiche tecniche prodotto (layout a div, NON <table>: app.js trasforma
   ogni <table> in .responsive-table e qui sballerebbe) ─── */
.ke-specs { border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; background: #fff; }
.ke-spec-row { display: flex; flex-direction: column; }
.ke-spec-row + .ke-spec-row { border-top: 1px solid #f3f4f6; }
.ke-spec-row:nth-child(odd) { background: #f9fafb; }
.ke-spec-label { padding: 0.75rem 1rem 0.2rem; font-size: 0.875rem; font-weight: 600; color: #374151; }
.ke-spec-value { padding: 0 1rem 0.75rem; font-size: 0.875rem; color: #1f2937; word-break: break-word; }
@media (min-width: 640px) {
    .ke-spec-row { flex-direction: row; align-items: stretch; }
    .ke-spec-label { width: 38%; flex-shrink: 0; padding: 0.75rem 1rem; }
    .ke-spec-value { flex: 1; padding: 0.75rem 1rem; border-left: 1px solid #f3f4f6; }
}
.prose ul, .prose ol {margin-top: 1.25em;margin-bottom: 1.25em;padding-left: 1.625em;}
.prose li {margin-top: 0.5em;margin-bottom: 0.5em;}
.prose ul > li {
list-style-type: disc;}
.prose ol > li {list-style-type: decimal;}
.prose blockquote {border-left: 4px solid #e5e7eb;padding-left: 1em;font-style: italic;color: #6b7280;margin: 1.5em 0;}
.prose img {max-width: 100%;height: auto;border-radius: 0.5rem;margin: 2em 0;}
.prose code {background-color: #f3f4f6;padding: 0.2em 0.4em;border-radius: 0.25rem;font-size: 0.875em;}
.prose pre {background-color: #1f2937;color: #f9fafb;padding: 1em;border-radius: 0.5rem;overflow-x: auto;margin: 1.5em 0;}
.prose pre code {background-color: transparent;padding: 0;}
/* Utilities */
.line-clamp-2 {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.line-clamp-3 {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
/* Transitions */
.transition-colors {
transition-property: background-color, border-color, color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;}
.transition-shadow {transition-property: box-shadow;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;}
/* Focus states */
*:focus {outline: none;}
*:focus-visible {outline: 2px solid #3b82f6;outline-offset: 2px;}
/* Print styles */
@media print {
header, footer, nav, .no-print {
display: none !important;}
.prose {max-width: 100%;}}
/* === OVERRIDE COLORI AZIENDALI === */
/* Navbar */
#mobile-menu {background-color:#fff !important;padding-bottom: 10px;border-bottom: 1px solid #d9d9d9;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px;}
#mobile-menu a:hover {background-color:transparent !important;color:#ee5511 !important;}
.navbar, nav.bg-purple-700, nav.bg-purple-800,header nav {background-color: var(--color-primary)}
.navbar a:hover, nav a:hover {background-color: var(--color-primary-hover) !important;color:#fff;}
#homepage-head nav ul li a {color:#383838;} #homepage-head nav ul li a:hover{color:#ee5511 !important;}
/* Link: la regola sta piu' su, insieme ad a:hover. Qui c'era un
   duplicato con un arancione fisso che annullava il pannello. */
/* Bottoni */
.btn-primary, 
.bg-purple-600, 
.bg-purple-700 {background-color: var(--color-primary) !important;}
.bg-purple-800 {background-color: var(--color-primary-hover) !important;}
.btn-primary:hover,.bg-purple-600:hover,.bg-purple-700:hover {background-color: var(--color-primary-hover) !important;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;}
/* Footer */
footer {background-color: var(--color-footer-bg) !important;}
footer .text-lg.font-semibold.mb-4{color: var(--color-title-footer) !important}
/* Colore del testo nel footer: il selettore va limitato a `footer`.
   Senza, la regola colpiva TUTTO il sito e ogni .text-gray-400 / .text-blue-600
   diventava del colore del footer (di norma bianco), quindi invisibile sul
   fondo chiaro delle pagine — es. "fatturato annualmente" nella scheda prodotto. */
footer .text-blue-600, footer .text-gray-400 { color: var(--color-footer-text) !important; }
.home {background: #fff !important;}
.home-a:hover {background:none !important;}
.text-home-cerchio{color:#6b6b6b;}
#breadcrumb-category{padding:10px;}
.bordo {border: 1px solid var(--color-primary) !important;margin-top: 5px; cursor:pointer;}

/* ============================================
   HEADER — fix logo responsive
   La classe Tailwind arbitrary `max-w-[8.5rem]` non è inclusa nel build purgato,
   quindi su mobile il logo manteneva la larghezza naturale e spingeva
   l'hamburger fuori dal viewport. Limitiamo via CSS custom.
   ============================================ */
.header-logo-img {
    max-width: 8.5rem;
    height: auto;
}

@media (min-width: 640px) {
    .header-logo-img {
        max-width: none;
    }
}

/* ── Blog: pulsante «Carica altri» (caricamento progressivo) ───────────────
   Stile self-contained (no Tailwind) per essere indipendente dal build/purge.
   Eredita il colore dal tema via --color-primary. */
.blog-load-more {
    margin-top: 2rem;
    text-align: center;
}
.blog-load-more__btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: var(--color-primary, #ea580c);
    color: #fff;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, opacity .2s ease;
}
.blog-load-more__btn:hover {
    background-color: var(--color-primary-hover, #c2410c);
}
.blog-load-more__btn.is-loading {
    opacity: .7;
    cursor: wait;
}

/* ── Copertine delle card blog ────────────────────────────────────────────
   Zoom morbido al passaggio del mouse. Regola dedicata invece delle utility
   Tailwind group-hover:scale-* / transition-transform: non sono presenti nel
   CSS compilato (escluse dal purge), quindi nel markup non avrebbero effetto.
   Il ritaglio si attiva solo da sm in su (h-48 sull'img): su mobile
   l'immagine resta a proporzioni intere e il testo grafico non viene tagliato. */
.ke-card-img {
    transition: transform .3s ease;
}
.group:hover .ke-card-img {
    transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
    .ke-card-img { transition: none; }
    .group:hover .ke-card-img { transform: none; }
}

/* ── Prezzo precedente barrato in diagonale ───────────────────────────────
   Usato accanto al prezzo mensile in evidenza. Il tratto è disegnato con uno
   pseudo-elemento invece che con `text-decoration: line-through` perché la
   barratura nativa attraversa anche il suffisso «/mese» e, avendo quello una
   dimensione di carattere diversa, le due linee cadono ad altezze diverse e
   appaiono disallineate. Così il tratto copre solo la cifra.
   Eredita il colore dal testo (currentColor), quindi resta coerente se cambia
   la palette. */
.ke-prezzo-old {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.ke-prezzo-old::after {
    content: "";
    position: absolute;
    left: -.06em;
    right: -.06em;
    top: 50%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translateY(-50%) rotate(-9deg);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   Proporzioni: il build purgato di Tailwind non contiene aspect-square
   ne' aspect-[4/3] / aspect-[16/10]. Senza, i riquadri seguono la foto:
   con immagini quadrate non si nota, con una foto alta (es. battistrada
   di uno pneumatico) copertina e miniature diventano altissime.
   ═══════════════════════════════════════════════════════════════ */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }

/* Hamburger dell'intestazione predefinita (voci bianche sul colore dell'intestazione) */
.ke-hamburger-chiaro { border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; }
.ke-hamburger-chiaro:hover,
.ke-hamburger-chiaro:focus-visible { background: rgba(255, 255, 255, .12); }


/* ── Voci del menu con la linea sotto (Configurazione → Header → "Voci del
   menu — Effetto" = linea, dalla 1.2.471). Al posto del riquadro colorato,
   al passaggio del mouse e sulla voce della pagina aperta una linea sotto la
   scritta, larga quanto lei, nel colore scelto (--ke-menu-linea, messo da
   header.twig). Solo le voci di primo livello del menu da computer: le
   tendine e il menu del telefono restano come sono. ── */
header.ke-menu-linea nav:not(#mobile-menu) ul:not(ul ul) > li > a,
header.ke-menu-linea nav:not(#mobile-menu) ul:not(ul ul) > li > a:hover,
header.ke-menu-linea nav:not(#mobile-menu) ul:not(ul ul) > li > a.bg-purple-800 {
    background-color: transparent !important;
    background: transparent !important;
}
header.ke-menu-linea nav:not(#mobile-menu) ul:not(ul ul) > li > a {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: transparent;
    text-underline-offset: 10px;
    transition: text-decoration-color .2s ease, color .2s ease;
}
header.ke-menu-linea nav:not(#mobile-menu) ul:not(ul ul) > li > a:hover,
header.ke-menu-linea nav:not(#mobile-menu) ul:not(ul ul) > li > a:focus-visible,
header.ke-menu-linea nav:not(#mobile-menu) ul:not(ul ul) > li > a[aria-current="page"],
header.ke-menu-linea nav:not(#mobile-menu) ul:not(ul ul) > li:hover > a {
    text-decoration-color: var(--ke-menu-linea, var(--color-link, currentColor));
}
@media (prefers-reduced-motion: reduce) {
    header.ke-menu-linea nav:not(#mobile-menu) ul:not(ul ul) > li > a { transition: none; }
}

/* ── Tendina dei sottomenu e menu su telefono con i colori scelti
   (Configurazione → Header, dalla 1.2.698). FACOLTATIVI: header.twig e
   header-homepage.twig accendono la classe solo se almeno un colore è scelto
   e passano i colori come variabili. Senza classi l'header è esattamente
   quello di sempre; con almeno un colore della tendina (o del telefono)
   acceso, quelli spenti dello stesso gruppo prendono un valore neutro
   (sfondo bianco, testo grigio scuro, passaggio grigio chiaro).
   Valgono per tutte le forme di header; con la variante Modern e una barra
   scura sono il rimedio al bianco su bianco della tendina (la regola delle
   voci della barra colora tutti i link, anche quelli della tendina). ── */
header.ke-sub-colori .ke-sottomenu {
    background: var(--ke-sub-bg, #ffffff) !important;
}
header.ke-sub-colori .ke-sottomenu a {
    color: var(--ke-sub-text, #374151) !important;
    opacity: 1 !important;
}
header.ke-sub-colori .ke-sottomenu a:hover,
header.ke-sub-colori .ke-sottomenu a:focus-visible {
    background: var(--ke-sub-hover-bg, rgba(127, 127, 127, .12)) !important;
    color: var(--ke-sub-hover-text, var(--ke-sub-text, #374151)) !important;
}
/* Header della homepage: la sua regola del passaggio (#homepage-head nav ul li
   a:hover, con l'id) vincerebbe sul testo al passaggio scelto */
#homepage-head.ke-sub-colori .ke-sottomenu a:hover,
#homepage-head.ke-sub-colori .ke-sottomenu a:focus-visible {
    color: var(--ke-sub-hover-text, var(--ke-sub-text, #374151)) !important;
}
header.ke-sub-bordo .ke-sottomenu {
    border-top: 2px solid var(--ke-sub-bordo) !important;
}

/* Menu su telefono: il pannello e le sue voci. La testata colorata del
   pannello (header negozio e corporate) resta com'è; in quella senza colore
   (header standard e homepage) il pulsante di chiusura prende il testo. */
header.ke-mobile-colori #mobile-menu {
    background: var(--ke-mob-bg, #ffffff) !important;
}
header.ke-mobile-colori #mobile-menu > div:first-child:not([style]),
header.ke-mobile-colori #mobile-menu > div:not(:first-child) a,
header.ke-mobile-colori #mobile-menu > div:not(:first-child) button {
    color: var(--ke-mob-text, #1f2937) !important;
}
header.ke-mobile-colori #mobile-menu > div:not(:first-child) svg {
    color: inherit !important;
    opacity: .7;
}
header.ke-mobile-colori #mobile-menu > div:not(:first-child) ul {
    background: rgba(127, 127, 127, .08) !important;
}
header.ke-mobile-colori #mobile-menu > div:not(:first-child) a:hover,
header.ke-mobile-colori #mobile-menu > div:not(:first-child) button:hover {
    background: rgba(127, 127, 127, .12) !important;
    color: var(--ke-mob-text, #1f2937) !important;
}
header.ke-mobile-colori #mobile-menu .border-gray-100 {
    border-color: rgba(127, 127, 127, .2) !important;
}