/* LS Search */

:root{
	--ls-accent:#2563eb;
	--ls-radius:14px;
	--ls-surface:#ffffff;   /* sfondo della tendina, impostabile dal pannello */
	--ls-hover:#f3f4f6;     /* riga attiva e al passaggio del mouse */
	--ls-text:#111827;
}

.ls-wrap,
.ls-panel{
	--ls-muted:#6b7280;
	--ls-soft:#f3f4f6;
	--ls-border:rgba(17,24,39,.12);
	box-sizing:border-box;
}
.ls-wrap *,.ls-panel *{box-sizing:border-box;}

/* --- barra propria ------------------------------------------------- */
.ls-wrap{position:relative;max-width:560px;margin:0 auto;}

.ls-bar{
	display:flex;align-items:center;gap:12px;
	height:52px;padding:0 8px 0 16px;
	background:var(--ls-surface);
	border:1px solid var(--ls-border);
	border-radius:var(--ls-radius);
	box-shadow:0 2px 8px rgba(17,24,39,.05);
	cursor:text;
	transition:border-color .2s ease, box-shadow .2s ease;
}
.ls-wrap.is-open .ls-bar,
.ls-wrap:focus-within .ls-bar{
	border-color:var(--ls-accent);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--ls-accent) 16%, transparent), 0 8px 22px rgba(17,24,39,.10);
}

.ls-ico{width:19px;height:19px;flex:none;fill:none;stroke:var(--ls-muted);stroke-width:2;stroke-linecap:round;}
.ls-wrap:focus-within .ls-ico{stroke:var(--ls-accent);}

/* il tema stila ogni input: qui va azzerato del tutto */
.ls-wrap .ls-bar input.ls-input,
.ls-wrap .ls-bar input.ls-input:focus,
.ls-wrap .ls-bar input.ls-input:hover{
	flex:1 1 auto !important;width:100% !important;min-width:0 !important;
	height:34px !important;min-height:0 !important;
	margin:0 !important;padding:0 !important;
	border:0 !important;border-radius:0 !important;
	background:none !important;background-color:transparent !important;
	outline:0 !important;box-shadow:none !important;
	font:inherit !important;font-size:16px !important;
	color:var(--ls-text) !important;
	-webkit-appearance:none !important;appearance:none !important;
}
.ls-wrap .ls-bar input.ls-input::-webkit-search-cancel-button{-webkit-appearance:none;display:none;}
.ls-wrap .ls-bar input.ls-input:-webkit-autofill{
	-webkit-text-fill-color:var(--ls-text);
	box-shadow:0 0 0 60px var(--ls-surface) inset !important;
}

.ls-wrap .ls-bar button.ls-clear{
	width:32px !important;height:32px !important;flex:none;
	padding:0 !important;margin:0 !important;border:0 !important;
	border-radius:999px !important;background:transparent !important;
	box-shadow:none !important;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	opacity:0;pointer-events:none;transition:opacity .2s ease;
	-webkit-appearance:none;appearance:none;
}
.ls-wrap .ls-bar button.ls-clear svg{width:17px;height:17px;fill:none;stroke:var(--ls-muted);stroke-width:2;stroke-linecap:round;}
.ls-wrap:focus-within .ls-bar button.ls-clear{opacity:1;pointer-events:auto;}

/* barra del tema rivestita, solo con lo stile "ours" */
input.ls-skinned{
	border-radius:var(--ls-radius) !important;
	padding-left:38px !important;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;
	background-position:12px center !important;
	background-size:17px 17px !important;
}

/* --- pannello flottante -------------------------------------------- */
.ls-panel{
	position:fixed;z-index:99999;
	height:0;overflow:hidden;opacity:0;pointer-events:none;
	background:var(--ls-surface);
	border:1px solid var(--ls-border);
	border-radius:var(--ls-radius);
	box-shadow:0 18px 44px rgba(17,24,39,.16);
	transition:height .32s cubic-bezier(.16,1,.3,1), opacity .18s ease;
}
.ls-panel.is-open{opacity:1;pointer-events:auto;}

.ls-results{height:100%;overflow:hidden;padding:6px 0;overscroll-behavior:contain;}
.ls-panel.is-scroll .ls-results{
	overflow-y:auto;
	scrollbar-width:thin;scrollbar-color:rgba(17,24,39,.22) transparent;
}
.ls-panel.is-scroll .ls-results::-webkit-scrollbar{width:8px;}
.ls-panel.is-scroll .ls-results::-webkit-scrollbar-thumb{
	background:rgba(17,24,39,.2);border-radius:999px;
	border:2px solid transparent;background-clip:content-box;
}

.ls-group{
	position:sticky;top:0;z-index:3;
	display:flex;align-items:center;gap:10px;
	padding:9px 14px 6px;
	font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	color:var(--ls-accent);background:var(--ls-surface);
}
.ls-group::before{content:'';width:3px;height:11px;border-radius:2px;background:var(--ls-accent);flex:none;}
.ls-group::after{content:'';flex:1;height:1px;background:var(--ls-border);}

.ls-panel a.ls-row{
	display:flex;align-items:center;gap:12px;
	padding:9px 14px;text-decoration:none !important;color:inherit !important;
	border-left:2px solid transparent;background:transparent;
	opacity:0;transform:translateY(5px);
	transition:opacity .24s ease, transform .24s cubic-bezier(.16,1,.3,1), background .15s ease;
}
.ls-panel a.ls-row.is-in{opacity:1;transform:none;}
.ls-panel a.ls-row:hover,
.ls-panel a.ls-row.is-sel{background:var(--ls-hover);border-left-color:var(--ls-accent);}

.ls-thumb{
	width:44px;height:44px;flex:none;border-radius:8px;overflow:hidden;background:var(--ls-soft);
}
.ls-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

.ls-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.ls-title{font-size:14.5px;line-height:1.35;color:var(--ls-text);}
.ls-title mark{background:color-mix(in srgb, var(--ls-accent) 18%, transparent);color:inherit;border-radius:3px;padding:0 2px;}
.ls-sub,.ls-sku{
	font-size:12.5px;color:var(--ls-muted);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ls-sku{font-variant-numeric:tabular-nums;letter-spacing:.02em;}

.ls-price{flex:none;font-size:13.5px;font-weight:600;color:var(--ls-text);white-space:nowrap;}
.ls-price del{opacity:.5;font-weight:400;margin-right:4px;}
.ls-price ins{text-decoration:none;color:var(--ls-accent);}
.ls-out{
	flex:none;font-size:11px;padding:3px 8px;border-radius:999px;
	background:#fef2f2;color:#b91c1c;white-space:nowrap;
}

.ls-panel a.ls-all{
	display:block;padding:11px 14px;text-align:center;
	font-size:13px;font-weight:600;
	color:var(--ls-accent) !important;text-decoration:none !important;
	background:var(--ls-soft);border-top:1px solid var(--ls-border);
}

/* stato senza risultati */
.ls-empty{display:flex;flex-direction:column;align-items:center;padding:26px 20px 30px;text-align:center;}
.ls-empty-ico{
	width:42px;height:42px;border-radius:999px;margin-bottom:12px;
	display:flex;align-items:center;justify-content:center;
	background:color-mix(in srgb, var(--ls-accent) 12%, #fff);
}
.ls-empty-ico svg{width:19px;height:19px;fill:none;stroke:var(--ls-accent);stroke-width:2;stroke-linecap:round;}
.ls-panel p.ls-empty-title{margin:0 0 5px !important;font-size:14.5px;color:var(--ls-text);}
.ls-panel p.ls-empty-note{margin:0 0 16px !important;font-size:12.5px;color:var(--ls-muted);max-width:320px;}
.ls-panel a.ls-empty-cta,
.ls-panel a.ls-empty-cta:hover{
	display:inline-flex;align-items:center;padding:10px 22px;border-radius:999px;
	font-size:13.5px;font-weight:600;
	color:#fff !important;background:var(--ls-accent) !important;
	text-decoration:none !important;
}

.ls-skel{display:flex;gap:12px;padding:11px 14px;align-items:center;}
.ls-skel span{background:var(--ls-soft);border-radius:6px;display:block;}
.ls-skel .s1{width:44px;height:44px;border-radius:8px;flex:none;}
.ls-skel .s2{height:11px;width:54%;margin-bottom:7px;}
.ls-skel .s3{height:10px;width:76%;}

/* --- icona e finestra ---------------------------------------------- */
.ls-trigger{
	width:42px;height:42px;padding:0 !important;border:0 !important;
	border-radius:999px !important;background:transparent !important;
	display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
	box-shadow:none !important;
}
.ls-trigger svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.ls-trigger:hover{background:var(--ls-soft) !important;}

.ls-modal{position:fixed;inset:0;z-index:99998;}
.ls-backdrop{
	position:absolute;inset:0;background:rgba(17,24,39,.5);
	opacity:0;transition:opacity .25s ease;
}
.ls-modal.is-open .ls-backdrop{opacity:1;}

.ls-modal-inner{
	position:relative;padding:14vh 20px 0;
	display:flex;justify-content:center;pointer-events:none;
}
.ls-modal-inner .ls-wrap{
	pointer-events:auto;width:100%;max-width:560px;
	opacity:0;transform:translateY(-12px);
	transition:opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.ls-modal.is-open .ls-modal-inner .ls-wrap{opacity:1;transform:none;}
.ls-modal .ls-bar button.ls-clear{
	opacity:1 !important;pointer-events:auto !important;
	background:var(--ls-soft) !important;
}

html.ls-locked{overflow:hidden;}

@media (max-width:768px){
	.ls-modal-inner{padding:10px 10px 0;}
	.ls-modal-inner .ls-wrap{max-width:none;}
	.ls-panel a.ls-row{padding:11px 14px;}
	.ls-title{font-size:15px;}
	.ls-modal .ls-bar button.ls-clear{width:38px !important;height:38px !important;}
}

@media (prefers-reduced-motion:reduce){
	.ls-panel,.ls-row,.ls-bar,.ls-modal-inner .ls-wrap{transition:none !important;}
	.ls-panel a.ls-row{opacity:1;transform:none;}
}