:root{
	--wcams-accent:#2563eb;
	--wcams-bg:#ffffff;
	--wcams-text:#1f2937;
	--wcams-muted:#6b7280;
	--wcams-border:#e5e7eb;
	--wcams-radius:12px;
	--wcams-width:420px;
}

/* Trigger button */
.wcams-trigger{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:auto;height:auto;
	padding:0;
	border:none;
	background:transparent;
	color:var(--wcams-text);
	cursor:pointer;
	border-radius:50%;
	transition:background .2s ease,color .2s ease;
}
[type=button].wcams-trigger:focus, [type=button].wcams-trigger:hover {
    background-color: transparent!important;
	color: #1f2937!important;
}
.wcams-trigger:hover{background:rgba(0,0,0,.06);color:var(--wcams-accent);}
.wcams-trigger svg{width:22px;height:22px;}

.wcams-trigger--float{
	position:fixed;
	right:20px;bottom:20px;
	z-index:99990;
	width:54px;height:54px;
	background:var(--wcams-accent);
	color:#fff;
	box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.wcams-trigger--float:hover{background:var(--wcams-accent);color:#fff;opacity:.92;}
.wcams-trigger--float svg{width:24px;height:24px;}

/* Overlay */
.wcams-overlay{
	position:fixed;inset:0;
	background:rgba(0,0,0,.45);
	opacity:0;visibility:hidden;
	transition:opacity .3s ease,visibility .3s ease;
	z-index:99998;
}
.wcams-overlay.is-open{opacity:1;visibility:visible;}

/* Offcanvas */
.wcams-offcanvas{
	position:fixed;top:0;right:0;bottom:0;
	width:var(--wcams-width);
	max-width:100%;
	background:var(--wcams-bg);
	color:var(--wcams-text);
	z-index:9999999999;
	transform:translateX(100%);
	transition:transform .32s cubic-bezier(.4,0,.2,1);
	display:flex;
	flex-direction:column;
	box-shadow:-8px 0 30px rgba(0,0,0,.15);
}
.wcams-offcanvas.is-open{transform:translateX(0);}

.wcams-offcanvas__header{
	display:flex;align-items:center;justify-content:space-between;
	padding:18px 20px;
	border-bottom:1px solid var(--wcams-border);
	flex:0 0 auto;
}
.wcams-offcanvas__title{margin:0;font-size:18px;font-weight:600;line-height:1;}
.wcams-close{
	display:inline-flex;align-items:center;justify-content:center;
	width:36px;height:36px;border:none;background:transparent;
	color:var(--wcams-muted);cursor:pointer;border-radius:8px;
	transition:background .2s,color .2s;
	padding: 0!important;
}
.wcams-close:hover{background:rgba(0,0,0,.06);color:var(--wcams-text);}
.wcams-close svg{width:20px;height:20px;}

/* Search bar */
.wcams-searchbar{
	position:relative;
	display:flex;align-items:center;
	margin:16px 20px;
	padding:0 12px;
	background:#f3f4f6;
	border:1px solid var(--wcams-border);
	border-radius:var(--wcams-radius);
	flex:0 0 auto;
	transition:border-color .2s,box-shadow .2s;
}
.wcams-searchbar:focus-within{
	background:#fff;
}
.wcams-searchbar__icon{display:inline-flex;color:var(--wcams-muted);}
.wcams-searchbar__icon svg{width:18px;height:18px;}
.wcams-input {
    flex: 1;
    border: none!important;
    background: transparent;
    padding: 14px 10px!important;
    font-size: 15px;
    color: var(--wcams-text);
    outline: none!important;
    width: 100%!important;
}
.wcams-clear{
	display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;border:none;background:transparent;
	color:var(--wcams-muted);cursor:pointer;border-radius:50%;
}
.wcams-clear:hover{background:rgba(0,0,0,.08);color:var(--wcams-text);}
.wcams-clear svg{width:16px;height:16px;}

/* Results (scrollable / overflow) */
.wcams-results{
	flex:1 1 auto;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	padding:0 20px 20px;
}
.wcams-results::-webkit-scrollbar{width:8px;}
.wcams-results::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px;}
.wcams-results::-webkit-scrollbar-thumb:hover{background:#b0b6bf;}

.wcams-hint,.wcams-empty{
	text-align:center;color:var(--wcams-muted);
	padding:32px 12px;font-size:14px;
}

.wcams-loading{
	display:flex;align-items:center;justify-content:center;gap:10px;
	padding:32px 12px;color:var(--wcams-muted);font-size:14px;
}
.wcams-spinner{
	width:20px;height:20px;border-radius:50%;
	border:2px solid var(--wcams-border);
	border-top-color:var(--wcams-accent);
	animation:wcams-spin .7s linear infinite;
}
@keyframes wcams-spin{to{transform:rotate(360deg);}}

/* Result list */
.wcams-list{list-style:none;margin:0;padding:0;}
.wcams-item{border-bottom:1px solid var(--wcams-border);}
.wcams-item:last-child{border-bottom:none;}
.wcams-item__link{
	display:flex;align-items:center;gap:14px;
	padding:12px 4px;
	text-decoration:none;color:var(--wcams-text);
	transition:background .15s;
	border-radius:8px;
}
.wcams-item__link:hover{background:#f9fafb;}
.wcams-item__thumb{flex:0 0 auto;width:56px;height:56px;border-radius:8px;overflow:hidden;background:#f3f4f6;display:flex;align-items:center;justify-content:center;}
.wcams-item__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.wcams-item__body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.wcams-item__title{font-size:14px;font-weight:500;line-height:1.35;color:var(--wcams-text);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.wcams-item__price{font-size:14px;color:var(--wcams-accent);font-weight:600;}
.wcams-item__price del{color:var(--wcams-muted);font-weight:400;margin-right:6px;}
.wcams-item__price ins{text-decoration:none;}

/* Mobile responsive */
@media (max-width:768px){
	:root{--wcams-width:100%;}
	.wcams-offcanvas{width:100%;}
	.wcams-trigger--float{right:16px;bottom:16px;width:50px;height:50px;}
}
@media (max-width:480px){
	.wcams-offcanvas__header{padding:14px 16px;}
	.wcams-searchbar{margin:12px 16px;}
	.wcams-results{padding:0 16px 16px;}
	.wcams-input{font-size:16px;} /* avoid iOS zoom */
}