/* SC Szukajka */
.scs-panel, .scs-layer {
	--scs-accent: #14565c;
	--scs-gold: #b19b10;
	--scs-text: #222;
	--scs-muted: #777;
	--scs-line: #ececec;
	--scs-bg: #fff;
	--scs-soft: #f7f7f7;
	--scs-price: #222;
	--scs-price-w: 500;
	--scs-sale: #b3261e;
	--scs-del: #999;
	--scs-badge-bg: #b3261e;
	--scs-badge-fg: #fff;
	--scs-badge-tt: none;
	--scs-r: 10px;
	--scs-r-ui: 6px;
	--scs-r-img: 8px;
	--scs-r-thumb: 6px;
	--scs-r-btn: 999px;
	--scs-btn-bg: var(--scs-accent);
	--scs-btn-fg: #fff;
	--scs-btn-tt: none;
	--scs-title-fs: 15px;
	font-family: inherit;
}

/* Wygląd jak supercharms.eu: butelkowa zieleń, krem, zaokrąglone zdjęcia, zielona cena promocyjna */
.scs-t-supercharms {
	--scs-accent: #14565c;
	--scs-gold: #b19b10;
	--scs-soft: #f7f5f0;
	--scs-line: #ebe7df;
	--scs-price: #222;
	--scs-sale: #27ae60;
	--scs-del: rgba(229, 57, 53, .55);
	--scs-badge-bg: #02d14d;
	--scs-badge-tt: uppercase;
	--scs-r: 14px;
	--scs-r-ui: 10px;
	--scs-r-img: 25px;
	--scs-r-thumb: 12px;
	--scs-r-btn: 999px;
	--scs-btn-bg: #14565c;
}

/* Wygląd jak bizugold.pl: czerń i biel, kwadratowe zdjęcia, magentowe ceny, czarne przyciski */
.scs-t-bizugold {
	--scs-accent: #222;
	--scs-gold: #d111db;
	--scs-soft: #f6f6f6;
	--scs-line: #eaeaea;
	--scs-price: #d111db;
	--scs-sale: #d111db;
	--scs-del: rgba(209, 17, 219, .5);
	--scs-badge-bg: #ffa965;
	--scs-badge-tt: uppercase;
	--scs-r: 0;
	--scs-r-ui: 0;
	--scs-r-img: 0;
	--scs-r-thumb: 0;
	--scs-r-btn: 0;
	--scs-btn-bg: #222;
	--scs-btn-tt: uppercase;
}

/* Wyłącz podpowiedzi motywu, gdy działa Szukajka */
.scs-on .search-results-wrapper,
.scs-on .autocomplete-suggestions { display: none !important; }

/* ---------- podpowiedzi pod polem ---------- */
.scs-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99999;
	width: max(100%, 420px);
	max-width: calc(100vw - 24px);
	max-height: min(72vh, 620px);
	overflow-y: auto;
	margin-top: 6px;
	background: var(--scs-bg);
	border: 1px solid var(--scs-line);
	border-radius: var(--scs-r);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
	font-size: 14px;
	line-height: 1.35;
	color: var(--scs-text);
	text-align: left;
}
.scs-panel[hidden] { display: none; }
.scs-sec {
	padding: 12px 16px 6px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--scs-muted);
}
.scs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; }
.scs-chip {
	display: inline-block;
	padding: 5px 11px;
	border: 1px solid var(--scs-line);
	border-radius: var(--scs-r-btn);
	background: var(--scs-soft);
	color: var(--scs-text) !important;
	font-size: 13px;
	text-decoration: none !important;
	white-space: nowrap;
}
.scs-chip:hover { border-color: var(--scs-accent); color: var(--scs-accent) !important; }
.scs-list { list-style: none; margin: 0; padding: 4px 0; }
.scs-list li { margin: 0; padding: 0; list-style: none; }
.scs-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	color: var(--scs-text) !important;
	text-decoration: none !important;
}
.scs-item:hover, .scs-item.is-active { background: var(--scs-soft); }
.scs-item img, .scs-noimg {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: var(--scs-r-thumb);
	background: var(--scs-soft);
}
.scs-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scs-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.scs-name mark, .scs-card-name mark { background: none; color: var(--scs-accent); font-weight: 600; padding: 0; }
.scs-price { font-size: 13px; }
.scs-price del, .scs-card-price del { color: var(--scs-del); font-size: .88em; margin-right: 4px; }
.scs-price del *, .scs-card-price del * { color: inherit; }
.scs-now { color: var(--scs-price); font-weight: var(--scs-price-w); }
.scs-now.scs-sale { color: var(--scs-sale); }
.scs-out { color: var(--scs-muted); font-style: normal; font-size: 12px; }
.scs-item.is-out img { opacity: .55; }
.scs-all {
	display: block;
	padding: 12px 16px;
	border-top: 1px solid var(--scs-line);
	text-align: center;
	color: var(--scs-accent) !important;
	font-weight: 600;
	text-decoration: none !important;
	position: sticky;
	bottom: 0;
	background: var(--scs-bg);
}
.scs-all:hover, .scs-all.is-active { background: var(--scs-soft); }
.scs-empty { padding: 18px 16px; }
.scs-empty p { margin: 0 0 6px; }
.scs-hint { color: var(--scs-muted); font-size: 13px; }

/* ---------- warstwa pełnoekranowa ---------- */
html.scs-lock, html.scs-lock body { overflow: hidden !important; }
.scs-layer {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	flex-direction: column;
	background: var(--scs-bg);
	color: var(--scs-text);
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}
.scs-layer[hidden] { display: none; }
.scs-l-head { border-bottom: 1px solid var(--scs-line); padding: 14px 24px; }
.scs-l-form { display: flex; align-items: center; gap: 12px; max-width: 1280px; margin: 0 auto; }
.scs-l-icon { width: 22px; height: 22px; fill: none; stroke: var(--scs-accent); stroke-width: 2; flex: 0 0 22px; }
.scs-layer .scs-l-input {
	flex: 1;
	min-width: 0;
	height: 48px;
	border: 0 !important;
	outline: none;
	box-shadow: none !important;
	background: transparent !important;
	font-size: 22px;
	padding: 0 !important;
	color: var(--scs-text);
}
.scs-l-input::-webkit-search-cancel-button { display: none; }
.scs-l-close {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border: 0 !important;
	border-radius: var(--scs-r-btn);
	background: var(--scs-soft) !important;
	color: var(--scs-text) !important;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 0 !important;
}
.scs-l-body { flex: 1; min-height: 0; display: flex; max-width: 1280px; width: 100%; margin: 0 auto; }
.scs-l-side { flex: 0 0 250px; overflow-y: auto; padding: 20px 20px 40px 24px; border-right: 1px solid var(--scs-line); }
.scs-l-side fieldset { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.scs-l-side legend { font-weight: 600; margin-bottom: 8px; padding: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.scs-opt { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: 14px; margin: 0; }
.scs-opt input { accent-color: var(--scs-accent); width: 16px; height: 16px; margin: 0; flex: 0 0 16px; }
.scs-opt span { flex: 1; }
.scs-opt small { color: var(--scs-muted); }
.scs-price-row { display: flex; align-items: center; gap: 8px; }
.scs-layer .scs-price-row input { width: 100%; min-width: 0; height: 38px; border: 1px solid var(--scs-line); border-radius: var(--scs-r-ui); padding: 0 10px; font-size: 14px; }
.scs-l-clear { color: var(--scs-accent) !important; text-decoration: underline !important; }
.scs-l-side-foot, .scs-l-side-head { display: none; }
.scs-l-main { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 24px 40px; }
.scs-l-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.scs-l-count { flex: 1; color: var(--scs-muted); }
.scs-l-count b { color: var(--scs-text); }
.scs-ai-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--scs-r-btn); background: var(--scs-soft); color: var(--scs-gold); font-size: 12px; }
.scs-l-sortw { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--scs-muted); }
.scs-layer .scs-l-sort { height: 36px; border: 1px solid var(--scs-line); border-radius: var(--scs-r-ui); padding: 0 8px; font-size: 14px; background: #fff; color: var(--scs-text); }
.scs-l-fbtn { display: none; }
.scs-l-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.scs-l-chips:empty { display: none; }
.scs-l-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 18px; }
.scs-card { display: flex; flex-direction: column; gap: 6px; color: var(--scs-text) !important; text-decoration: none !important; }
.scs-card-img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--scs-r-img); overflow: hidden; background: var(--scs-soft); }
.scs-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.scs-card:hover .scs-card-img img { transform: scale(1.04); }
.scs-card.is-out .scs-card-img img { opacity: .55; }
.scs-badge { position: absolute; top: 10px; left: 10px; background: var(--scs-badge-bg); color: var(--scs-badge-fg); font-style: normal; font-size: 11px; font-weight: 500; text-transform: var(--scs-badge-tt); padding: 1px 6px; border-radius: 0; }
.scs-card-cat { font-size: 11px; text-transform: uppercase; color: var(--scs-muted); letter-spacing: .02em; }
.scs-card-name { font-size: var(--scs-title-fs); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.scs-card-price { font-size: 16px; }
.scs-l-more {
	display: block;
	margin: 28px auto 0;
	padding: 12px 28px;
	border: 1px solid var(--scs-btn-bg) !important;
	border-radius: var(--scs-r-btn);
	background: var(--scs-btn-bg) !important;
	color: var(--scs-btn-fg) !important;
	text-transform: var(--scs-btn-tt);
	font-weight: 500;
	cursor: pointer;
}
.scs-l-more[hidden] { display: none; }
.scs-layer .scs-empty { grid-column: 1 / -1; padding: 30px 0; font-size: 16px; }

/* Telefon: filtry jako szuflada */
@media (max-width: 767px) {
	.scs-l-head { padding: 8px 12px; }
	.scs-layer .scs-l-input { font-size: 17px; height: 44px; }
	.scs-l-main { padding: 12px 12px 40px; }
	.scs-l-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
	.scs-l-sortw span { display: none; }
	.scs-l-fbtn {
		display: inline-block;
		height: 36px;
		padding: 0 14px;
		border: 1px solid var(--scs-line) !important;
		border-radius: var(--scs-r-ui);
		background: #fff !important;
		color: var(--scs-text) !important;
		font-size: 14px;
	}
	.scs-l-fbtn i { font-style: normal; color: var(--scs-accent); }
	.scs-l-side {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(88vw, 340px);
		z-index: 2;
		background: #fff;
		border: 0;
		box-shadow: -10px 0 40px rgba(0, 0, 0, .15);
		transform: translateX(105%);
		transition: transform .25s;
		display: flex;
		flex-direction: column;
		padding: 0;
	}
	.scs-l-side-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--scs-line); font-size: 16px; }
	.scs-l-sclose { width: 40px; height: 40px; border: 0 !important; background: none !important; font-size: 28px; line-height: 1; color: var(--scs-text) !important; padding: 0 !important; }
	.scs-l-side-in { flex: 1; overflow-y: auto; padding: 20px; }
	.scs-f-open .scs-l-main::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .25); z-index: 1; }
	.scs-l-side-foot { display: block; padding: 12px 20px; border-top: 1px solid var(--scs-line); }
	.scs-l-apply {
		width: 100%;
		height: 46px;
		border: 0 !important;
		border-radius: var(--scs-r-btn);
		background: var(--scs-btn-bg) !important;
		color: var(--scs-btn-fg) !important;
		text-transform: var(--scs-btn-tt);
		font-weight: 600;
		font-size: 15px;
	}
	.scs-f-open .scs-l-side { transform: none; }
	.scs-panel { width: 100%; }
}