/* =========================================================================
   Alfera Category Widget
   v3.9: torna il VERDE ALFERA (#577271) per gli stati delle MACRO categorie.
   Sfondo widget: #F5F6FA (sempre).
   MACRO (depth-1): hover / aperta / antenato / attiva → bg #577271 + testo e
     icona BIANCHI (nessuna barra: il fondo verde È l'indicatore).
   SUB (depth>=2): hover / aperta / antenato → bg #DBDEE0 (grigio un gradino
     più scuro), nessuna barra. La SUB SELEZIONATA (--is-active) → bg #DBDEE0
     + BARRETTA SX VERDE #577271 + testo bold: la barra verde significa
     "questa è la selezionata".
   Testo a riposo (scala v3.7, più scuro in alto): depth-1 #4A5553,
     depth-2 #6B7573, depth-3+ #8C9A99 (custom properties --acw-text; --acw-bar
     resta per il colore icone toggle: d1 #8C9A99, d2+ #C4C9C9; i livelli senza
     regola esplicita EREDITANO dal padre).
   Font: ereditato dal tema.
   BEM strict per evitare collisione con classi core/WP (.cat-item, .cat-children).
   ========================================================================= */

.alfera-cat-widget {
	/* v3.7: default della scala = tono profondo (depth-3+ eredita questi) */
	--acw-bar: #C4C9C9;
	--acw-text: #8C9A99;

	font-family: inherit;
	color: #4A5553;
	width: 100%;
	box-sizing: border-box;
	/* v3.7: sfondo widget sempre #F5F6FA */
	background-color: #F5F6FA;
	/* Rimosso il limite di altezza 600px + scroll interno (v2.1): il widget
	   cresce in verticale quanto serve, senza mai scrollare al suo interno.
	   Rimossi anche gli stili scrollbar (Firefox + WebKit), ora inutili. */
}

.alfera-cat-widget *,
.alfera-cat-widget *::before,
.alfera-cat-widget *::after {
	box-sizing: border-box;
}

/* Empty state */
.alfera-cat-widget--empty p {
	margin: 0;
	padding: 14px 0;
	color: #6B7573;
	font-size: 0.95rem;
}

/* =========================================================================
   Scala per profondità (v3.7)
   Le custom properties ereditano: un item depth-4 senza regola prende i
   valori dal padre depth-3 → il "cap" sui livelli profondi è automatico.
   ========================================================================= */

.alfera-cat-widget .alfera-cat-tree__item--depth-1 {
	--acw-bar: #8C9A99;
	--acw-text: #4A5553;
}

.alfera-cat-widget .alfera-cat-tree__item--depth-2 {
	--acw-bar: #C4C9C9;
	--acw-text: #6B7573;
}

.alfera-cat-widget .alfera-cat-tree__item--depth-3 {
	/* --acw-bar resta #C4C9C9 (ereditato dal depth-2): un'icona tono 3
	   #E5E7E8 sarebbe quasi invisibile sui fondi #F5F6FA/#DBDEE0.
	   v3.9: --acw-bar colora ormai solo le icone toggle (le barre sono
	   fisse: verde #577271 sulla sub attiva, nessun'altra). */
	--acw-text: #8C9A99;
}

/* =========================================================================
   Liste
   ========================================================================= */

.alfera-cat-widget .alfera-cat-tree__list,
.alfera-cat-widget .alfera-cat-tree__children {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* v1.1: accordion animato — override display:none di hidden attr per permettere
   transition smooth su max-height. visibility ritardata fino a fine animazione
   per non sparire bruscamente. */
.alfera-cat-widget .alfera-cat-tree__children[hidden] {
	display: block !important;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition:
		max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.18s ease,
		visibility 0s 0.32s;
}

.alfera-cat-widget .alfera-cat-tree__children:not([hidden]) {
	max-height: 2000px;
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	transition:
		max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.25s ease 0.05s,
		visibility 0s 0s;
}

/* Icona toggle anima rotazione 45° in chiusura (visivo di stato) */
.alfera-cat-widget .alfera-cat-tree__toggle-icon {
	display: inline-block;
	transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
/* v3.6: rimosso transform: scale(1.08) sull'icona --is-open — l'affordance
   apri/chiudi resta la sola rotazione gestita da JS (nessuna animazione extra). */

/* =========================================================================
   Item top-level
   ========================================================================= */

.alfera-cat-widget .alfera-cat-tree__item--depth-1 {
	border-bottom: 1px solid #E5E7E8; /* v3.7: separatore nel tono chiaro palette */
}

.alfera-cat-widget .alfera-cat-tree__item--depth-1:last-child {
	border-bottom: none;
}

.alfera-cat-widget .alfera-cat-tree__item--depth-1 > .alfera-cat-tree__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 12px;
	gap: 12px;
	/* v1.1: bordo sx invisibile di default — si colora negli stati evidenziati */
	border-left: 3px solid transparent;
	padding-left: 9px; /* compensa il bordo 3px per non spostare il testo */
	transition:
		background-color 0.18s ease,
		border-left-color 0.18s ease,
		padding-left 0.18s ease;
}

/* v3.9: macro categoria evidenziata (hover / aperta / antenato dell'attiva)
   = SFONDO VERDE ALFERA + testo e icona bianchi. Il border-left resta 3px e
   prende il colore del fondo (nessuna barra visibile, nessuno shift layout). */
.alfera-cat-widget .alfera-cat-tree__item--depth-1 > .alfera-cat-tree__row:hover,
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-open > .alfera-cat-tree__row,
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-ancestor > .alfera-cat-tree__row {
	background-color: #577271;
	border-left-color: #577271;
}

.alfera-cat-widget .alfera-cat-tree__item--depth-1 > .alfera-cat-tree__row:hover .alfera-cat-tree__link,
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-open > .alfera-cat-tree__row .alfera-cat-tree__link,
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-ancestor > .alfera-cat-tree__row .alfera-cat-tree__link,
.alfera-cat-widget .alfera-cat-tree__item--depth-1 > .alfera-cat-tree__row:hover .alfera-cat-tree__toggle,
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-open > .alfera-cat-tree__row .alfera-cat-tree__toggle,
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-ancestor > .alfera-cat-tree__row .alfera-cat-tree__toggle {
	color: #FFFFFF;
}

/* v3.8: la riga della macro categoria (con figli) è interamente cliccabile
   come toggle della tendina — cursore pointer su tutta la riga.
   v3.10: vale per OGNI macro categoria. Quelle senza sottocategorie (oggi solo
   OFFERTE A TEMPO) non aprono una tendina ma portano alla categoria, e il JS le
   rende cliccabili per intero: senza il pointer il cursore restava a freccia e
   la riga sembrava inerte. */
.alfera-cat-widget .alfera-cat-tree__item--depth-1 > .alfera-cat-tree__row {
	cursor: pointer;
}

/* Slot icona macro categoria: spazio 24x24 riservato PRIMA del nome (il gap
   12px della row fa da spaziatura). Le immagini PNG per-categoria verranno
   assegnate via CSS: .alfera-cat-tree__icon[data-cat-slug="..."] { background-image: url(...); } */
.alfera-cat-widget .alfera-cat-tree__item--depth-1 > .alfera-cat-tree__row .alfera-cat-tree__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.alfera-cat-widget .alfera-cat-tree__item--depth-1 > .alfera-cat-tree__row .alfera-cat-tree__link {
	flex: 1 1 auto;
	color: var(--acw-text);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.95rem;
	line-height: 1.3;
}

/* v3.6: rimosso cambio colore del link depth-1 su hover/focus-visible —
   l'evidenziazione è ora solo sfondo + barra sx; il link mantiene colore/peso normale. */

/* =========================================================================
   Item sub-level (depth >= 2)
   ========================================================================= */

.alfera-cat-widget .alfera-cat-tree__children {
	padding-left: 16px;
	background-color: #F5F6FA; /* v3.7: sfondo widget sempre #F5F6FA (era #fcfdfd) */
}

.alfera-cat-widget .alfera-cat-tree__item:not(.alfera-cat-tree__item--depth-1) > .alfera-cat-tree__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	gap: 12px;
	/* v3.2: uniformato a 3px come top-level — la linea sx deve essere
	   identica su OGNI livello (no distinzione 2px vs 3px tra padri e figli). */
	border-left: 3px solid transparent;
	padding-left: 9px;
	/* v3.6: rimossa la voce 'transform 0.18s ease' — nessun transform applicato alle righe. */
	transition:
		background-color 0.18s ease,
		border-left-color 0.18s ease;
}

.alfera-cat-widget .alfera-cat-tree__item:not(.alfera-cat-tree__item--depth-1) > .alfera-cat-tree__row:hover {
	/* v3.9: hover sotto-categorie = grigio un gradino più scuro (era #E5E7E8).
	   NIENTE barra su hover: la barretta sx verde è riservata alla sub SELEZIONATA. */
	background-color: #DBDEE0;
}

/* Hover toggle "+/-": bg grigio palette al 18% (v3.7, era verde Alfera) */
.alfera-cat-widget .alfera-cat-tree__toggle:hover {
	background-color: rgba(140, 154, 153, 0.18);
}

.alfera-cat-widget .alfera-cat-tree__item:not(.alfera-cat-tree__item--depth-1) > .alfera-cat-tree__row .alfera-cat-tree__link {
	flex: 1 1 auto;
	color: var(--acw-text);
	text-decoration: none;
	font-weight: 500;
	text-transform: none; /* sentence-case = mantieni il case originale del termine */
	font-size: 0.9rem;
	line-height: 1.35;
	letter-spacing: 0;
}

/* v3.6: rimosso cambio colore del link sub-level su hover/focus-visible —
   l'evidenziazione è ora solo sfondo + barra sx; il link mantiene colore/peso normale. */

/* =========================================================================
   Toggle +/- (ora <button> nativo)
   ========================================================================= */

.alfera-cat-widget .alfera-cat-tree__toggle {
	/* Reset button nativo */
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* Ingrandito 24px → 32px per maggiore visibilità e area di tocco */
	width: 32px;
	height: 32px;
	border-radius: 6px;
	cursor: pointer;
	user-select: none;
	color: var(--acw-bar); /* v3.7: icona segue la scala barre per profondità */
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* hover toggle: regola spostata piu' in basso (v1.1) — qui solo focus-visible */
.alfera-cat-widget .alfera-cat-tree__toggle:focus-visible {
	outline: 2px solid #8C9A99; /* v3.7: era verde Alfera */
	outline-offset: 2px;
}

.alfera-cat-widget .alfera-cat-tree__toggle-icon {
	/* Ingrandito 1.05rem → 1.4rem insieme al bottone 32px */
	font-size: 1.4rem;
	line-height: 1;
	font-weight: 600;
	pointer-events: none;
}

/* =========================================================================
   Stato attivo (categoria corrente)
   ========================================================================= */

/* v3.4: sub-active bar — la classe `.alfera-cat-tree__item` è ripetuta
   (selettore raddoppiato) per portare la specificity a (0,4,0) e battere
   la base sub-level (`...__item:not(...--depth-1) > __row`, anch'essa 0,4,0)
   sull'ordine di cascade. Senza questo, le sub attive perdevano la barra sx
   (border-left:transparent vinceva, restava solo il bg).
   Nessuna modifica PHP/HTML: la classe --is-active è già emessa su ogni depth.
   Hover/accordion/scroll/--is-open NON sono toccati. */
/* v3.9: la sub SELEZIONATA = barretta sx VERDE ALFERA + bg grigio scuro + bold.
   Scoped :not(--depth-1): una macro landing-page (raggiunta da menu/SEO) usa
   invece il trattamento verde pieno (regola sotto). */
.alfera-cat-widget .alfera-cat-tree__item.alfera-cat-tree__item--is-active:not(.alfera-cat-tree__item--depth-1) > .alfera-cat-tree__row {
	background-color: #DBDEE0;
	border-left: 3px solid #577271; /* v3.9: barretta verde = "questa è la selezionata" */
	padding-left: 9px; /* compensa il border-left di 3px */
}

.alfera-cat-widget .alfera-cat-tree__item.alfera-cat-tree__item--is-active:not(.alfera-cat-tree__item--depth-1) > .alfera-cat-tree__row .alfera-cat-tree__link {
	color: #4A5553;
	font-weight: 700;
}

/* v3.9: macro categoria ATTIVA (pagina raggiunta da menu/SEO, non dal widget):
   stesso trattamento verde delle macro aperte. Dichiarata DOPO la regola sub
   per vincere la cascade a pari specificity. */
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-active > .alfera-cat-tree__row {
	background-color: #577271;
	border-left-color: #577271;
}
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-active > .alfera-cat-tree__row .alfera-cat-tree__link,
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-active > .alfera-cat-tree__row .alfera-cat-tree__toggle {
	color: #FFFFFF;
}

/* v3.5: parent-of-active (ancestor non-root) bar
   Estende la barra sx al PADRE DIRETTO (e a tutti gli ancestor intermedi)
   della categoria corrente, escludendo il root depth-1 — che deve
   mantenere lo stile normale/expanded senza barra.
   Specificity (0,4,0): vince sulla base sub-level (cascade later, pari (0,4,0))
   e sull'--is-open border-left (0,3,0). Mutex PHP garantisce assenza di
   sovrapposizione con --is-active. NESSUN !important.
   v3.6: trattamento unificato — anche l'antenato ha il bg evidenziato,
   coerente con hover/--is-active/--is-open. */
.alfera-cat-widget .alfera-cat-tree__item--is-ancestor:not(.alfera-cat-tree__item--depth-1) > .alfera-cat-tree__row {
	/* v3.9: antenato intermedio = solo sfondo grigio scuro, NIENTE barra
	   (la barretta verde è riservata alla sub selezionata; le macro antenate
	   hanno il fondo verde pieno). */
	background-color: #DBDEE0;
}

/* Stato APERTO (--is-open) sub-level: solo sfondo grigio scuro (v3.9).
   Le macro aperte sono coperte dalla regola verde depth-1 (specificity maggiore). */
.alfera-cat-widget .alfera-cat-tree__item--is-open > .alfera-cat-tree__row {
	background-color: #DBDEE0;
}

/* v3.6: rimosso il cambio colore del link per --is-open e --is-ancestor —
   elemento aperto/antenato = solo sfondo evidenziato + barra sx; il link mantiene
   colore/peso normale. Il cambio colore link resta SOLO per --is-active. */

/* =========================================================================
   Mobile / responsive (<768px per spec)
   ========================================================================= */

@media (max-width: 767.98px) {
	.alfera-cat-widget {
		width: 100%;
	}

	.alfera-cat-widget .alfera-cat-tree__item--depth-1 > .alfera-cat-tree__row {
		padding: 14px 10px;
	}

	.alfera-cat-widget .alfera-cat-tree__item:not(.alfera-cat-tree__item--depth-1) > .alfera-cat-tree__row {
		padding: 10px 10px;
	}

	.alfera-cat-widget .alfera-cat-tree__children {
		padding-left: 14px;
	}
}

/* =========================================================================
   v3.10: sidebar NON più sticky — scorre col documento insieme ai prodotti.
   Il tema woopy (body.fixed_blocks_sticky + JS trx_addons) blocca la sidebar
   con position:fixed INLINE su .sidebar_inner durante lo scroll: col widget a
   espansione libera la parte bassa finiva sotto il viewport e diventava
   irraggiungibile. Le regole !important in stylesheet vincono sugli stili
   inline (non-important) del JS → la sidebar resta nel flusso normale anche
   se il tema continua a scriverli. Scoped al body flag del tema per non
   toccare altri layout. Caricato solo dove il widget è renderizzato.
   ========================================================================= */
body.fixed_blocks_sticky .sidebar_inner {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	width: auto !important;
	transform: none !important;
}

/* v3.11: icone macro categoria (colorata su fondo chiaro, bianca su fondo verde) */
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="abbigliamento"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/abbigliamento.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/abbigliamento-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="gadget-vari-1"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/altri-gadget-e-regali.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/altri-gadget-e-regali-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="bicchieri-e-tazze"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/bicchieri-e-tazze.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/bicchieri-e-tazze-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="borracce-e-tazze"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/borracce-e-thermos.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/borracce-e-thermos-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="borse-e-zaini"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/borse-e-zaini.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/borse-e-zaini-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="congressuale-ed-eventi"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/fiere-ed-eventi.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/fiere-ed-eventi-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="kids"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/kids.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/kids-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="ombrelli"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/ombrelli.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/ombrelli-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="scrittura-2"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/scrittura-e-disegno.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/scrittura-e-disegno-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="tempo-libero-2"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/sport-viaggi-e-tempo-libero.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/sport-viaggi-e-tempo-libero-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="tech-1"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/tech.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/tech-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="office-e-scrivania"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/ufficio.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/ufficio-bianca.webp)}
.alfera-cat-widget .alfera-cat-tree__item--depth-1 > .alfera-cat-tree__row .alfera-cat-tree__icon{background-image:var(--ico)}
.alfera-cat-widget .alfera-cat-tree__item--depth-1 > .alfera-cat-tree__row:hover .alfera-cat-tree__icon,
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-open > .alfera-cat-tree__row .alfera-cat-tree__icon,
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-ancestor > .alfera-cat-tree__row .alfera-cat-tree__icon,
.alfera-cat-widget .alfera-cat-tree__item--depth-1.alfera-cat-tree__item--is-active > .alfera-cat-tree__row .alfera-cat-tree__icon{background-image:var(--ico-w)}

/* v3.12: icona OFFERTE A TEMPO (clessidra) */
.alfera-cat-widget .alfera-cat-tree__icon[data-cat-slug="offerte-a-tempo"]{--ico:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/offerte-a-tempo.webp);--ico-w:url(https://alfera-gadget-regali-aziendali.it/wp-content/uploads/alfera-categorie/offerte-a-tempo-bianca.webp)}