/**
 * Widget categorie: tendina, colonna laterale, barra fissa mobile.
 *
 * Qui dentro tengo solo la struttura. Colori, spaziature, bordi e raggi
 * arrivano dai controlli di Elementor, così i margini e i padding che
 * imposti sul widget restano validi e non devo combatterli.
 */

/* ============================================================
   TENDINA CATEGORIE
   ============================================================ */

/* ============================================================
   CATEGORIE LATERALI
   ============================================================ */
.aa-wdm-catside {
	display: block;
	max-width: 100%;
	box-sizing: border-box;
	/* sticky: la colonna segue lo scroll restando agganciata in alto. Funziona
	   perché la colonna è alta quanto la lista prodotti che le sta accanto, così
	   la nav (corta) ha spazio per scorrere dentro di essa. */
	position: -webkit-sticky;
	position: sticky;
	top: var(--wdm-sticky-top, 20px);
	align-self: flex-start;
}
/* perché lo sticky abbia spazio, il widget e il suo contenitore devono essere
   alti quanto la colonna (che è alta quanto la lista prodotti a fianco): se
   restassero alti quanto il loro contenuto la nav non avrebbe dove scorrere */
.elementor-widget-wdm_side_category,
.elementor-widget-wdm_side_category > .elementor-widget-container {
	height: 100%;
}
/* l'elenco non supera l'altezza della finestra: se le categorie sono tante
   scorre internamente invece di sforare */
.aa-wdm-catside__list {
	max-height: calc(100vh - var(--wdm-sticky-top, 20px) - 20px);
	overflow-y: auto;
	scrollbar-width: none;
}
.aa-wdm-catside__list::-webkit-scrollbar {
	width: 0;
	display: none;
}
/* lo sticky viene applicato dal JS all'elemento che ha davvero spazio per
   agganciarsi: il widget da solo dentro un contenitore alto quanto lui non
   potrebbe muoversi, quindi si sale al contenitore */
/* Sticky puro: applicato direttamente al widget, senza che il JavaScript
   tocchi i contenitori di Elementor. Funziona quando il widget sta in una
   colonna più alta di lui (per esempio le categorie accanto a una lista
   prodotti lunga). Se il widget è da solo in un contenitore alto quanto lui
   non ha spazio per agganciarsi: in quel caso conviene lo sticky nativo di
   Elementor Pro. In nessun caso questo può nascondere altre colonne. */
.elementor-widget.aa-wdm-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: var(--wdm-sticky-top, 0px);
	z-index: 10;
	/* niente align-self: la colonna deve restare alta quanto la riga
	   (stretch), altrimenti il widget non ha spazio per agganciarsi */
}

/* con molte categorie l'elenco scorre al suo interno, ma senza barra a vista */
.aa-wdm-catside__list {
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.aa-wdm-catside__list::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}
.aa-wdm-catside__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.aa-wdm-catside__group {
	min-width: 0;
}
.aa-wdm-catside__name {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .75;
}
.aa-wdm-catside__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	box-sizing: border-box;
	padding: 11px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: rgba(255, 255, 255, .1);
	color: inherit;
	text-decoration: none;
	overflow-wrap: break-word;
	transition: background .18s ease, color .18s ease;
}
.aa-wdm-catside__text {
	min-width: 0;
	flex: 1 1 auto;
}

/* pallino con il numero di prodotti, sempre all'estrema destra */
.aa-wdm-catside__count {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 9999px;
	background: rgba(255, 255, 255, .18);
	color: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

/* con la barra fissa attiva le categorie su mobile stanno lì */

.aa-wdm-catside__item:hover {
	background: rgba(255, 255, 255, .2);
}


/* ============================================================
   TITOLO SOPRA L'ELENCO
   ============================================================ */
.aa-wdm-cat-title {
	margin: 0 0 12px;
	overflow-wrap: break-word;
}

/* ============================================================
   CATEGORIE LATERALI SU MOBILE E TABLET
   ------------------------------------------------------------
   Sotto il breakpoint tablet l'elenco laterale non ha senso:
   diventa una tendina agganciata in fondo che apre le voci
   verso l'alto. Uso un elenco mio e non una select nativa,
   perché il menu di una select non è controllabile.
   ============================================================ */
.aa-wdm-catmobile {
	display: none;
}




/* ============================================================
   BARRA CATEGORIE FISSA (Sticky Top / Sticky Bottom)
   ------------------------------------------------------------
   La barra è fissa rispetto alla finestra e viene spostata nel
   body dal JS: funziona in qualunque struttura, perché non
   dipende dai contenitori di Elementor. Occupa tutta la larghezza.
   ============================================================ */
.aa-wdm-catbar {
	/* su desktop non c'è: resta la colonna laterale. Compare solo da tablet in giù. */
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 9996;
	width: 100%;
	box-sizing: border-box;
}

.aa-wdm-catbar--top {
	top: 0;
	padding-top: env(safe-area-inset-top, 0px);
}
.aa-wdm-catbar--bottom {
	bottom: 0;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* la barra usa la stessa tendina delle categorie mobile: qui la rendo
   sempre visibile (non solo sotto il breakpoint) e a tutta larghezza */
.aa-wdm-catbar .aa-wdm-catmobile {
	position: static;
	display: block;
	width: 100%;
}
.aa-wdm-catbar .aa-wdm-catmobile__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 15px 20px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #2b2726;
	font: inherit;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.aa-wdm-catbar--top .aa-wdm-catmobile__toggle {
	border-bottom: 1px solid #dcd8d6;
	box-shadow: 0 6px 20px rgba(43, 39, 38, .16);
}
.aa-wdm-catbar--bottom .aa-wdm-catmobile__toggle {
	border-top: 1px solid #dcd8d6;
	box-shadow: 0 -6px 20px rgba(43, 39, 38, .16);
}
.aa-wdm-catbar .aa-wdm-catmobile__toggle:focus {
	outline: none;
}
.aa-wdm-catbar .aa-wdm-catmobile__current {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aa-wdm-catbar .aa-wdm-catmobile__arrow {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transition: transform .22s ease;
}
/* freccia: giù per la barra in alto, su per quella in basso */
.aa-wdm-catbar--top .aa-wdm-catmobile__arrow {
	transform: rotate(45deg);
}
.aa-wdm-catbar--bottom .aa-wdm-catmobile__arrow {
	transform: rotate(-135deg);
}
.aa-wdm-catbar--top.aa-wdm-catmobile.is-open .aa-wdm-catmobile__arrow,
.aa-wdm-catbar--top .aa-wdm-catmobile.is-open .aa-wdm-catmobile__arrow {
	transform: rotate(-135deg);
}
.aa-wdm-catbar--bottom .aa-wdm-catmobile.is-open .aa-wdm-catmobile__arrow {
	transform: rotate(45deg);
}

/* elenco aperto: tutta la larghezza della barra */
.aa-wdm-catbar .aa-wdm-catmobile__panel {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	max-height: 60vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	background: #fff;
	scrollbar-width: none;
}
.aa-wdm-catbar .aa-wdm-catmobile__panel::-webkit-scrollbar {
	width: 0;
	display: none;
}
.aa-wdm-catbar .aa-wdm-catmobile__panel[hidden] {
	display: none;
}
.aa-wdm-catbar--top .aa-wdm-catmobile__panel {
	top: 100%;
	bottom: auto;
	border-bottom: 1px solid #dcd8d6;
	box-shadow: 0 10px 30px rgba(43, 39, 38, .2);
}
.aa-wdm-catbar--bottom .aa-wdm-catmobile__panel {
	bottom: 100%;
	top: auto;
	border-top: 1px solid #dcd8d6;
	box-shadow: 0 -10px 30px rgba(43, 39, 38, .2);
}
.aa-wdm-catbar .aa-wdm-catmobile__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	box-sizing: border-box;
	padding: 14px 20px;
	border-bottom: 1px solid #ebe8e7;
	color: #2b2726;
	text-decoration: none;
}
.aa-wdm-catbar .aa-wdm-catmobile__opt:last-child {
	border-bottom: 0;
}
.aa-wdm-catbar .aa-wdm-catmobile__opt:hover {
	background: #f3f1f0;
}
.aa-wdm-catbar .aa-wdm-catmobile__opt-text {
	min-width: 0;
	flex: 1 1 auto;
}
.aa-wdm-catbar .aa-wdm-catmobile__opt-count {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	box-sizing: border-box;
	border-radius: 9999px;
	background: #ebe8e7;
	color: #655d5b;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

/* lascio spazio in cima o in fondo alla pagina per non coprire i contenuti,
   ma solo dove la barra è effettivamente visibile (tablet e mobile) */


/* ============================================================
   RIGA DEL MENU SU TABLET E MOBILE
   ------------------------------------------------------------
   La riga che contiene categorie, prodotti e carrello resta
   affiancata anche su schermi piccoli, schiacciando le colonne.
   Sotto i 1024px la impilo così ogni parte prende tutta la
   larghezza. Su desktop non la tocco.
   ============================================================ */

/* eccezione: su tablet verticale in modalità "colonna", la riga resta
   affiancata (non impila), così le categorie stanno davvero a sinistra */


/* ============================================================
   COMPORTAMENTO PER FASCIA (tablet verticale / orizzontale)
   ------------------------------------------------------------
   - Mobile e tablet verticale in modalità "bar": colonna nascosta,
     barra visibile (già gestito sopra dal blocco max-width:1024px).
   - Tablet verticale in modalità "column": mostro la colonna e
     nascondo la barra, come su desktop. Il carrello passa a drawer.
   - Tablet orizzontale (>1024px): resta la colonna, come desktop.
   ============================================================ */

/* Tablet in verticale con scelta "Colonna a sinistra": ripristino la colonna */


/* ============================================================
   LARGHEZZA COLONNA CATEGORIE SU TABLET
   ------------------------------------------------------------
   Con la percentuale la colonna risulta troppo stretta e di
   misura diversa tra verticale e orizzontale. Su tablet le do
   una larghezza fissa e uguale (regolabile dal widget), un po'
   più larga, così il testo delle categorie non va a capo.
   ============================================================ */
/* tablet orizzontale e iPad Pro 13" (verticale e orizzontale) */

/* tablet verticale più piccolo, quando le categorie sono a colonna */