/* ============================================================
   Filtri Motojet — UI 2.2  (sostituzione drop-in di mjf.css)
   Stesse classi/markup/JS della 2.1.1. Cambia solo l'aspetto.
   Direzione: "strumentazione di precisione" — navy del brand,
   selezioni nette, conteggi in cifre monospaziate tabellari.
   ============================================================ */

.mjf{
	/* --- variabili guidate da Elementor (NON rinominare) --- */
	--mjf-navy:#35577d;          /* accento brand / selezione */
	--mjf-btn-bg:#111;           /* azione primaria (Applica)  */
	--mjf-btn-text:#fff;
	--mjf-chip-bg:#eaf0f6;

	/* --- token interni derivati --- */
	--mjf-ink:#151a20;           /* testo principale, freddo   */
	--mjf-ink-soft:#5b6774;      /* testo secondario           */
	--mjf-line:#e7ecf1;          /* hairline fredda            */
	--mjf-line-strong:#d5dde5;
	--mjf-rail:#f6f8fb;          /* fondo zone tenui           */
	--mjf-off:#aab4bf;
	--mjf-tint:color-mix(in srgb, var(--mjf-navy) 8%, #fff);
	--mjf-tint-2:color-mix(in srgb, var(--mjf-navy) 14%, #fff);
	--mjf-navy-ink:color-mix(in srgb, var(--mjf-navy) 78%, #000);
	--mjf-radius:14px;
	--mjf-mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;

	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-size:14px;
	line-height:1.45;
	color:var(--mjf-ink);
	-webkit-font-smoothing:antialiased;
}
.mjf *{box-sizing:border-box}

/* ---- reset aggressivo (vince sul tema, come la 2.1.1) ---- */
.mjf button{all:unset;box-sizing:border-box;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.mjf label{margin:0 !important;padding:0 !important;font-weight:400 !important;text-transform:none !important;letter-spacing:0 !important;line-height:1.45 !important}

/* checkbox custom (appearance:none + segno di spunta disegnato) */
.mjf input[type=checkbox]{
	appearance:none;-webkit-appearance:none;
	width:19px !important;height:19px !important;min-width:19px;margin:0 !important;
	flex:0 0 auto;border:1.5px solid var(--mjf-line-strong) !important;
	border-radius:6px !important;background:#fff !important;box-shadow:none !important;
	transition:border-color .15s,background-color .15s;cursor:pointer;position:relative;
}
.mjf input[type=checkbox]:hover{border-color:var(--mjf-navy) !important}
.mjf input[type=checkbox]:checked{
	border-color:var(--mjf-navy) !important;background:var(--mjf-navy) !important;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.5' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-size:100% 100% !important;background-repeat:no-repeat !important;
}
.mjf input[type=checkbox]:focus-visible{outline:2px solid var(--mjf-navy);outline-offset:2px}

.mjf input[type=number]{
	width:100% !important;padding:9px 11px !important;border:1.5px solid var(--mjf-line-strong) !important;
	border-radius:10px !important;background:#fff !important;box-shadow:none !important;margin:0 !important;
	color:var(--mjf-ink) !important;font:inherit !important;min-height:0 !important;
	font-variant-numeric:tabular-nums;transition:border-color .15s;
}
.mjf input[type=number]:focus{border-color:var(--mjf-navy) !important;outline:none}
.mjf input[type=number]:focus-visible{outline:2px solid color-mix(in srgb,var(--mjf-navy) 30%,#fff);outline-offset:1px}

/* ================= PANNELLO (desktop = rail pulita) ================= */
.mjf-panel{
	background:#fff !important;border:1px solid var(--mjf-line) !important;
	border-radius:var(--mjf-radius) !important;overflow:hidden !important;
	box-shadow:0 1px 2px rgba(21,26,32,.04),0 8px 24px -18px rgba(21,26,32,.25);
}

/* header leggero: niente barra navy pesante */
.mjf-head{
	display:flex;align-items:center;gap:10px;
	padding:16px 18px 14px;border-bottom:1px solid var(--mjf-line);
	background:linear-gradient(180deg,var(--mjf-rail),#fff) !important;color:var(--mjf-ink) !important;
}
.mjf-title{
	flex:1;font-weight:700;font-size:15px;color:var(--mjf-ink);letter-spacing:-.01em;
	display:flex;align-items:center;gap:9px;
}
.mjf-title::before{
	content:"";width:4px;height:17px;border-radius:3px;
	background:var(--mjf-navy);flex:0 0 auto;
}
.mjf-reset{
	color:var(--mjf-ink-soft) !important;font-size:12.5px !important;font-weight:600 !important;
	background:none !important;border:0 !important;padding:5px 8px !important;border-radius:8px !important;
	transition:background-color .15s,color .15s;
}
.mjf-reset:hover{background:var(--mjf-tint) !important;color:var(--mjf-navy) !important}
.mjf-close{
	display:none;color:var(--mjf-ink-soft) !important;font-size:26px !important;line-height:1;
	background:none !important;border:0 !important;padding:0 6px !important;border-radius:8px !important;
}
.mjf-close:hover{color:var(--mjf-ink) !important}

.mjf-body{padding:4px 18px 6px}

/* ================= SEZIONI + accordion ================= */
.mjf-sec{border-bottom:1px solid var(--mjf-line);padding:15px 0}
.mjf-sec:last-child{border-bottom:0}
/* specificità alzata (.mjf ...) per vincere sui temi che stringono la larghezza */
.mjf .mjf-sec-head{
	display:flex !important;width:100% !important;min-width:0 !important;box-sizing:border-box !important;
	align-items:center;justify-content:space-between;gap:10px;
	background:transparent !important;border:0 !important;border-radius:8px !important;padding:2px 0 !important;
	box-shadow:none !important;font-size:13.5px !important;font-weight:650 !important;
	letter-spacing:-.005em !important;text-transform:none !important;color:var(--mjf-ink) !important;text-align:left !important;
}
.mjf .mjf-sec-head:hover{color:var(--mjf-navy) !important}
.mjf-sec-body{margin-top:13px;display:flex;flex-direction:column;gap:3px}
.mjf-collapsed>.mjf-sec-body{display:none}

/* chevron: icona SVG pulita, riquadro fisso, centrata e ancorata a destra */
.mjf .mjf-sec-head .mjf-chevron{
	width:16px !important;height:16px !important;flex:0 0 16px;margin-left:auto;
	border:0 !important;border-radius:0 !important;background:currentColor;opacity:.5;
	transform:rotate(0);transition:transform .22s ease,opacity .15s;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
	        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.mjf .mjf-sec-head:hover .mjf-chevron{opacity:1}
.mjf-collapsed>.mjf-sec-head .mjf-chevron{transform:rotate(180deg)}

/* ================= VOCI (checkbox row) ================= */
.mjf-check{
	display:flex !important;align-items:center;gap:11px;cursor:pointer;color:var(--mjf-ink);
	padding:8px 9px;margin:0 -9px !important;border-radius:9px;position:relative;
	transition:background-color .13s;
}
.mjf-check:hover{background:var(--mjf-rail)}
.mjf-check span{flex:1;min-width:0}
.mjf-check em{
	color:var(--mjf-ink-soft);font-style:normal;font-size:12px;font-family:var(--mjf-mono);
	font-variant-numeric:tabular-nums;letter-spacing:-.02em;
	background:var(--mjf-rail);border-radius:6px;padding:1px 7px;min-width:26px;text-align:center;
	transition:color .13s,background-color .13s;
}
/* riga selezionata: tinta + barretta d'accento a sinistra */
.mjf-check:has(input:checked){background:var(--mjf-tint)}
.mjf-check:has(input:checked)::before{
	content:"";position:absolute;left:-9px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;
	background:var(--mjf-navy);
}
.mjf-check:has(input:checked) span{font-weight:600}
.mjf-check:has(input:checked) em{color:var(--mjf-navy);background:var(--mjf-tint-2)}

.mjf-check.mjf-disabled{opacity:.4;pointer-events:none;text-decoration:line-through;text-decoration-color:var(--mjf-off)}

/* ================= ALBERO CATEGORIE ================= */
.mjf-cats{list-style:none !important;margin:0 !important;padding:0 !important;display:flex;flex-direction:column;gap:1px}
.mjf-cat-row{display:flex;align-items:center;gap:4px}
.mjf-cat-row .mjf-check{flex:1}
.mjf-cat-toggle{
	flex:0 0 auto;display:inline-flex !important;align-items:center;justify-content:center;
	width:28px !important;height:28px !important;min-width:28px;box-sizing:border-box;
	border:0 !important;border-radius:8px !important;background:none !important;color:var(--mjf-ink-soft) !important;
	cursor:pointer;padding:0 !important;line-height:1;transition:background-color .13s,color .13s;
}
.mjf-cat-toggle:hover{background:var(--mjf-tint) !important;color:var(--mjf-navy) !important}
.mjf-cat-toggle .mjf-chevron{display:none !important}
.mjf-cat-toggle::after{content:"+";font-size:19px;font-weight:500;line-height:1}
.mjf-cat.mjf-open>.mjf-cat-row .mjf-cat-toggle{background:var(--mjf-tint) !important;color:var(--mjf-navy) !important}
.mjf-cat.mjf-open>.mjf-cat-row .mjf-cat-toggle::after{content:"\2212"}
.mjf-subcats{
	margin:2px 0 4px 13px !important;padding:2px 0 2px 13px !important;
	border-left:1.5px solid var(--mjf-line);display:none;
}
.mjf-cat.mjf-open>.mjf-subcats{display:flex}
.mjf-cat-off{display:none}

/* ================= PREZZO ================= */
.mjf-price{display:flex;align-items:center;gap:10px}
.mjf-price span{color:var(--mjf-off);flex:0 0 auto}

/* ================= TOGGLE FINALI (come pill selezionabili) ================= */
.mjf-toggles{display:flex;flex-wrap:wrap;flex-direction:row !important;gap:8px}
.mjf-toggles .mjf-check{
	margin:0 !important;padding:8px 13px 8px 11px;border:1.5px solid var(--mjf-line-strong);
	border-radius:999px;gap:8px;background:#fff;transition:border-color .13s,background-color .13s;
}
.mjf-toggles .mjf-check:hover{border-color:var(--mjf-navy);background:#fff}
.mjf-toggles .mjf-check span{flex:0 0 auto;font-size:13px}
.mjf-toggles .mjf-check input[type=checkbox]{width:16px !important;height:16px !important;min-width:16px;border-radius:5px !important}
.mjf-toggles .mjf-check:has(input:checked){border-color:var(--mjf-navy);background:var(--mjf-tint)}
.mjf-toggles .mjf-check:has(input:checked)::before{display:none}

/* ================= FOOTER ================= */
.mjf-foot{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--mjf-line);background:var(--mjf-rail)}
.mjf-reset-2{
	flex:0 0 auto;text-align:center;border:1.5px solid var(--mjf-line-strong) !important;
	border-radius:12px !important;padding:12px 18px !important;color:var(--mjf-ink) !important;font-weight:600 !important;
	background:#fff !important;transition:border-color .13s,color .13s;
}
.mjf-reset-2:hover{border-color:var(--mjf-navy) !important;color:var(--mjf-navy) !important}
.mjf-apply{
	flex:1;text-align:center;background:var(--mjf-btn-bg) !important;color:var(--mjf-btn-text) !important;
	border-radius:12px !important;padding:12px !important;font-weight:650 !important;letter-spacing:-.01em;
	font-variant-numeric:tabular-nums;transition:transform .08s,box-shadow .15s,opacity .15s;
	box-shadow:0 6px 16px -8px color-mix(in srgb,var(--mjf-btn-bg) 70%,transparent);
}
.mjf-apply:hover{opacity:.94}
.mjf-apply:active{transform:translateY(1px)}

/* desktop: filtro istantaneo → footer discreto */
@media(min-width:769px){
	.mjf-foot{background:#fff;padding-top:16px}
	.mjf-apply{background:var(--mjf-navy) !important;color:#fff !important;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--mjf-navy) 60%,transparent)}
}

/* ================= CHIP ATTIVE ================= */
.mjf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.mjf-chips:empty{margin:0}
.mjf-chip{
	display:inline-flex !important;align-items:center;gap:8px;
	background:var(--mjf-chip-bg) !important;color:var(--mjf-navy-ink) !important;
	border:1px solid color-mix(in srgb,var(--mjf-navy) 18%,transparent) !important;
	border-radius:11px !important;padding:8px 10px 8px 14px !important;font-size:12.5px !important;font-weight:600 !important;
	transition:background-color .13s,border-color .13s;
}
.mjf-chip:hover{background:var(--mjf-tint-2) !important;border-color:color-mix(in srgb,var(--mjf-navy) 34%,transparent) !important}
.mjf-chip span{
	display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
	border-radius:50%;background:color-mix(in srgb,var(--mjf-navy) 16%,transparent);
	font-size:13px;line-height:1;color:var(--mjf-navy-ink);
}
.mjf-chip:hover span{background:var(--mjf-navy);color:#fff}

/* ================= TRIGGER MOBILE ================= */
.mjf-trigger{
	display:none;align-items:center;justify-content:center;gap:10px;width:100%;
	background:#fff !important;color:var(--mjf-ink) !important;border:1.5px solid var(--mjf-line-strong) !important;
	border-radius:12px !important;padding:15px 18px !important;font-weight:650 !important;font-size:15px !important;margin-bottom:18px;
	transition:border-color .13s;
}
.mjf-trigger::before{
	content:"";width:17px;height:17px;flex:0 0 auto;background:var(--mjf-navy);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mjf-trigger:hover{border-color:var(--mjf-navy) !important}
.mjf-badge{
	background:var(--mjf-navy);color:#fff;border-radius:999px;min-width:20px;height:20px;
	display:inline-flex;align-items:center;justify-content:center;padding:0 6px;font-size:12px;
	font-family:var(--mjf-mono);font-variant-numeric:tabular-nums;
}

/* ================= STATI ================= */
.mjf-hidden{display:none !important}
.mjf-loading{opacity:.5;transition:opacity .2s;pointer-events:none}
.mjf-empty{
	list-style:none;padding:40px 18px;color:var(--mjf-ink-soft);text-align:center;
	background:var(--mjf-rail);border-radius:12px;font-size:14px;
}
.mjf-zero{opacity:.5}
.mjf-zero em{color:var(--mjf-off) !important;background:transparent !important}

/* ================= MOBILE (bottom sheet) ================= */
@media(max-width:768px){
	.mjf-trigger{display:flex}
	.mjf-overlay{position:fixed;inset:0;background:rgba(15,22,32,.5);z-index:99998;backdrop-filter:blur(2px)}
	.mjf-panel{
		position:fixed;left:0;right:0;bottom:0;z-index:99999;max-height:88vh;display:flex;flex-direction:column;
		border-radius:20px 20px 0 0 !important;border-bottom:0 !important;
		transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
		box-shadow:0 -12px 40px -12px rgba(15,22,32,.35);
	}
	.mjf-open-panel .mjf-panel{transform:translateY(0)}
	/* maniglia di trascinamento */
	.mjf-panel::before{
		content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
		width:40px;height:4px;border-radius:99px;background:var(--mjf-line-strong);z-index:2;
	}
	.mjf-head{padding-top:22px;border-radius:20px 20px 0 0}
	.mjf-close{display:block}
	.mjf-body{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
	.mjf-foot{position:sticky;bottom:0}
	.mjf-head .mjf-reset{display:none}
	/* target tocco più ampi */
	.mjf-check{padding-top:11px;padding-bottom:11px}
	.mjf-toggles .mjf-check{padding-top:9px;padding-bottom:9px}
}
@media(min-width:769px){ .mjf-overlay{display:none !important} }

/* ================= "CARICA ALTRO" ================= */
.mjf-loadmore{
	display:block;margin:28px auto;min-width:220px;padding:13px 30px;border:1.5px solid var(--mjf-line-strong);
	border-radius:12px;background:#fff;color:var(--mjf-ink);font-size:15px;font-weight:650;cursor:pointer;
	transition:border-color .13s,color .13s;
}
.mjf-loadmore:hover{border-color:var(--mjf-navy);color:var(--mjf-navy)}
.mjf-loadmore.mjf-loading{opacity:.6;pointer-events:none}
.mjf-loadmore-wrap{display:block !important;width:100% !important;text-align:center;clear:both;margin:0}
.mjf-loadmore-wrap .mjf-loadmore{display:inline-block !important}

/* nasconde la paginazione a numeri nativa dentro le griglie Elementor */
.elementor-widget-woocommerce-archive-products .woocommerce-pagination,
.elementor-widget-woocommerce-archive-products .elementor-pagination,
.elementor-widget-woocommerce-products .woocommerce-pagination,
.elementor-widget-woocommerce-products .elementor-pagination{display:none !important}

/* ================= accessibilità / motion ================= */
.mjf-sec-head:focus-visible,.mjf-cat-toggle:focus-visible,.mjf-chip:focus-visible,
.mjf-reset:focus-visible,.mjf-reset-2:focus-visible,.mjf-apply:focus-visible,
.mjf-close:focus-visible,.mjf-trigger:focus-visible,.mjf-loadmore:focus-visible{
	outline:2px solid var(--mjf-navy) !important;outline-offset:2px !important;border-radius:8px;
}
@media(prefers-reduced-motion:reduce){
	.mjf *,.mjf *::before,.mjf *::after{transition:none !important;animation:none !important}
}

/* fallback :has() non supportato → le selezioni restano usabili (solo box pieno) */
@supports not (selector(:has(*))){
	.mjf-check input:checked{box-shadow:0 0 0 2px var(--mjf-tint)}
}