/*
Theme Name: CSColor
Theme URI: https://www.cscolorsrl.it/
Template: porto
Author: CSColor
Author URI: https://www.cscolorsrl.it/
Description: CSColor
Tags: woocommerce,corporate,ecommerce,responsive,blue,black,green,white,light,dark,red,two-columns,three-columns,four-columns,left-sidebar,right-sidebar,fixed-layout,responsive-layout,custom-menu,editor-style,featured-images,flexible-header,full-width-template,microformats,post-formats,rtl-language-support,sticky-post,theme-options,translation-ready,accessibility-ready
Version: 5.2.1.1721220000
Updated: 2026-07-23 17:40:00

*/



body.post-type-archive-product .fixed-header #header{
	position:static;
}

body.block-editor-page #wpbody-content>div:not(.block-editor):not(#screen-meta){
	display:block;
}



.page-top .page-title {
  color: #000000;
}
.page-top {
  border-top: 0px solid #630138;
  border-bottom: 0px solid #9d0059;
}




/* Stili per il messaggio aggiuntivo Keim */
.cscolor-messaggio-aggiuntivo-keim {
    /* Manteniamo un po' di spazio per la separazione */
    margin: 15px 0 20px 0; 
    padding: 10px 15px; 
    /* Colore che si coordini senza essere troppo intrusivo */
    background-color: #f7f7f7; 
    border-left: 4px solid #0056b3; /* Una barra laterale blu per attirare l'attenzione */
    border-radius: 4px; 
}

.cscolor-messaggio-aggiuntivo-keim p {
    margin: 0; 
    font-size: 15px;
    line-height: 1.5;
}

.cscolor-messaggio-aggiuntivo-keim a {
    /* Stile per i link di contatto/chiamata */
    color: #0056b3; /* Blu per i link */
    text-decoration: none;
}

.cscolor-messaggio-aggiuntivo-keim a:hover {
    text-decoration: underline;
}


/* Sovrascrive la dimensione piccola predefinita per la sola icona account */
/* Usiamo #header e .nav-top per la massima specificità */
#header .nav-top i {
    font-size: 1.3em;
    margin-right: 3px;
    margin-left: 0;
}

/* Aggiunge spazio intorno al link per essere centrato */
#header .nav-top .porto-account-icon {
    padding: 5px 10px; 
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------

/* Applichiamo solo alla Home per non rovinare le altre pagine */
body.home .porto-u-heading {
    padding: 40px 0 !important;
}

/* 1. TITOLO: Forza su una riga, carattere Bold e colore scuro */
body.home .porto-u-heading h1 {
    color: #1a1a1a !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: -1px !important;
    margin-bottom: 20px !important;
    font-size: 42px !important;
}

/* 2. SOTTOTITOLO: Introduzione più leggibile */
body.home .porto-u-sub-heading p:first-of-type {
    font-size: 18px !important;
    color: #666 !important;
    line-height: 1.6 !important;
    max-width: 800px;
    margin: 0 auto 30px auto !important;
}

/* 3. TITOLO CATEGORIE: Colore Blu Petrolio per attirare l'occhio */
body.home .porto-u-sub-heading h3 {
    color: #2baab1 !important; /* Colore d'accento */
    font-size: 26px !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid #2baab1;
    display: inline-block;
    padding-bottom: 5px;
}

/* 4. BOX TECNICO: Sfondo colorato per staccare dal "povero" bianco */
body.home .porto-u-sub-heading p:last-of-type {
    background-color: #fff4f2 !important; /* Un rosa/arancio chiarissimo */
    padding: 20px !important;
    border-radius: 8px !important;
    color: #444 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-top: 25px !important;
    border: 1px solid #e36159;
}

/* FIX RESPONSIVE PER SMARTPHONE */
@media (max-width: 767px) {
    body.home .porto-u-heading h1 {
        font-size: 19px !important; /* Dimensione ridotta per stare su una riga */
        white-space: nowrap !important;
        letter-spacing: -0.5px !important;
    }
    
    body.home .porto-u-sub-heading p:first-of-type {
        font-size: 15px !important;
    }

    body.home .porto-u-sub-heading h3 {
        font-size: 18px !important;
        white-space: normal !important; /* Le categorie possono andare a capo */
    }
}

/* --- FINALE fine di 1 di 1 blocchi e home-impact-color-fix --- */

.h1home {
    /* Gradiente vivace con i colori del logo COLOR */
    background: linear-gradient(to right, 
        #f9e107 0%,   /* Giallo */
        #f15a24 20%,  /* Arancio */
        #e30613 40%,  /* Rosso */
        #a65ba3 60%,  /* Viola */
        #00a8e6 80%,  /* Azzurro */
        #8dc63f 100%  /* Verde */
    ) !important;

    /* Applica il gradiente al testo */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    
    /* Rende il testo trasparente per mostrare la sfumatura */
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    /* Opzionale: assicura che il font sia ben visibile */
    font-weight: 900 !important;
    display: block;
}


/*---------------------
/* 1. Struttura Lista (Contenitore) */
.menu-smart-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Voce di Menu: Stato Base */
.menu-smart-list li {
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Riga sottile divisoria */
}

.menu-smart-list li a {
    display: block !important;
    padding: 8px 0 !important;
    color: #777 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Movimento fluido Porto */
}

/* 3. Effetto "ILLUMINAZIONE" (Mouse Over) */
/* Copia l'effetto hover della sidebar: Cambio colore + Spostamento */
.menu-smart-list li a:hover, 
.menu-smart-list li:hover > a {
    color: #222 !important;            /* Diventa scuro/nero */
    padding-left: 12px !important;     /* Si sposta a destra "illuminandosi" */
    background-color: #f9f9f9 !important; /* Leggero sfondo grigio chiarissimo */
}

/* 4. Aggiunta della "Freccetta" (Opzionale, tipico di Porto) */
.menu-smart-list li a:hover::before {
    content: '\f105';                  /* Icona freccia FontAwesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #0088cc;                    /* Colore primario (Blu Porto) */
}

/* 5. Sottocategorie (Rientro aggiuntivo) */
.menu-smart-list ul.children li a {
    padding-left: 15px !important;
    font-size: 13px !important;
}

.menu-smart-list ul.children li a:hover {
    padding-left: 25px !important;
}

/*
 * Sticky header (Porto header-1): logo | menu una riga (etichette a 2 righe) | carrello.
 * nowrap evita che Blog scenda; colonne laterali uguali centrano il menu.
 */
@media (min-width: 992px) {
	#header.sticky-header .main-menu-wrap {
		display: block !important;
		background: #fff !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	#header.sticky-header .main-menu-wrap #main-menu {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 6px 16px !important;
		min-height: 70px !important;
		box-sizing: border-box !important;
	}

	#header.sticky-header .main-menu-wrap .menu-left,
	#header.sticky-header .main-menu-wrap .menu-right {
		display: flex !important;
		align-items: center !important;
		flex: 0 0 110px !important;
		width: 110px !important;
		min-width: 110px !important;
		max-width: 110px !important;
		padding: 0 !important;
	}

	#header.sticky-header .main-menu-wrap .menu-left {
		justify-content: flex-start !important;
	}

	#header.sticky-header .main-menu-wrap .menu-right {
		justify-content: flex-end !important;
	}

	#header.sticky-header .main-menu-wrap .menu-left .logo img {
		max-height: 42px !important;
		width: auto !important;
		transform: none !important;
	}

	#header.sticky-header .main-menu-wrap .menu-center {
		display: flex !important;
		flex: 1 1 auto !important;
		justify-content: center !important;
		align-items: center !important;
		min-width: 0 !important;
	}

	#header.sticky-header .main-menu-wrap .menu-center > ul.mega-menu,
	#header.sticky-header .main-menu-wrap .menu-center > ul.main-menu,
	#header.sticky-header .main-menu-wrap ul.mega-menu.menu-flat {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 2px !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}

	#header.sticky-header .main-menu-wrap .menu-center > ul.mega-menu > li.menu-item,
	#header.sticky-header .main-menu-wrap ul.mega-menu.menu-flat > li.menu-item {
		flex: 0 0 auto !important;
		float: none !important;
		width: auto !important;
	}

	#header.sticky-header .main-menu-wrap .menu-center > ul.mega-menu > li.menu-item > a,
	#header.sticky-header .main-menu-wrap ul.mega-menu.menu-flat > li.menu-item > a {
		display: block !important;
		font-size: 0.8571em !important; /* come Porto default */
		padding: 6px 8px !important;
		line-height: 1.25 !important;
		letter-spacing: 0 !important;
		text-align: center !important;
		white-space: normal !important;
	}

	#header.sticky-header .main-menu-wrap .menu-center > ul.mega-menu > li.menu-item > a p,
	#header.sticky-header .main-menu-wrap ul.mega-menu.menu-flat > li.menu-item > a p {
		margin: 0 !important;
		line-height: 1.2 !important;
	}
}

/*
 * Home: logo outline + "COLORIFICIO" su una riga (desktop),
 * più aria dal menu; nasconde "TROVA IL TUO PRODOTTO" duplicato.
 */
@media (min-width: 992px) {
	body.home .vc_row.top-row.vc_row-no-padding .col-md-8 .wpb_text_column .wpb_wrapper {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		column-gap: 22px !important;
		row-gap: 12px !important;
		padding-top: 36px !important;
	}

	body.home .vc_row.top-row.vc_row-no-padding .col-md-8 .wpb_text_column .wpb_wrapper > h1:empty {
		display: none !important;
	}

	body.home .vc_row.top-row.vc_row-no-padding .col-md-8 .wpb_text_column .wpb_wrapper > h1:has(img),
	body.home .vc_row.top-row.vc_row-no-padding .col-md-8 .wpb_text_column .wpb_wrapper > h1:not(:has(img)):not(:empty) {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
		line-height: 1 !important;
	}

	body.home .vc_row.top-row.vc_row-no-padding .col-md-8 .wpb_text_column .wpb_wrapper > h1:has(img) img {
		display: block !important;
		margin: 0 !important;
		max-height: 56px !important;
		width: auto !important;
	}

	body.home .vc_row.top-row.vc_row-no-padding .col-md-8 .wpb_text_column .wpb_wrapper > h1:not(:has(img)):not(:empty) {
		font-size: 42px !important;
		font-weight: 600 !important;
		letter-spacing: 0.02em !important;
		color: #111111 !important;
	}

	body.home .vc_row.top-row.vc_row-no-padding .col-md-8 .wpb_text_column .wpb_wrapper > h2,
	body.home .vc_row.top-row.vc_row-no-padding .col-md-8 .wpb_text_column .wpb_wrapper > p,
	body.home .vc_row.top-row.vc_row-no-padding .col-md-8 .wpb_text_column .wpb_wrapper > h4 {
		flex: 0 0 100% !important;
		width: 100% !important;
	}
}

/* Widget ricerca duplicato sotto l'intro home */
body.home #search2,
body.home .vc_row.top-row:has(#search2) {
	display: none !important;
}