/* Card filters on category + search pages (loaded from inc/header_front.php after the webstore stylesheet).
   <= 1024px (phones, iPad portrait): the sidebar .side-content is hidden by scss/_products.scss; here the
   same element becomes a right-hand drawer opened by the "Filter" button above the card grid
   (inc/product_list_cont.php). The form, field names and request stay the ones of inc/search_filter.php:
   ticks wait for "Apply", which submits that form exactly as a sidebar click does on desktop.
   1025-1199px (the kiosk iPad in landscape): the sidebar stays, with 44px tap rows and 16px labels.
   >= 1200px: nothing here applies. */

.filter-bar,
.filter-head,
.filter-foot { display: none; }

/* ---- tap rows: drawer + kiosk tablet ---- */
@media (max-width: 1199.98px) {
	.side-content ul { font-size: 16px; }
	.side-content li { margin-bottom: 0; padding-left: 0; }
	.side-content li > label {
		margin: 0;
		min-height: 44px;
		padding: 10px 0 10px 34px;
		line-height: 1.3;
		cursor: pointer;
	}
	.side-content li input[type="checkbox"] {
		left: 0;
		top: 11px;
		width: 22px;
		height: 22px;
		margin: 0;
		opacity: 1;
		accent-color: #642d91;
	}
	.side-content li ul,
	.side-content .search_filter_form ul ul { margin-top: 0; padding-left: 18px; }
	ul.search-filter-main-item li label.disabled { color: #a6a6aa; }
	.search_filter_form .search-filter__category_wrap,
	.search_filter_form #search_filter_price_wrap { padding: 6px 0; border-bottom: 1px solid #dddedf; }
	.search_filter_form .search-filter__category_wrap ul { margin-top: 0; }
	.search_filter_form .search_filter_title {
		font-size: 15px;
		min-height: 44px;
		align-items: center;
	}
	.search_filter_form .searchFilterTogleBtn { margin-top: 0; }
	.side-content .clear-filter-button {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		font-size: 15px;
	}
	.side-content .productsFound { font-size: 15px; }
}

/* ---- kiosk tablet sidebar ---- */
@media (min-width: 1025px) and (max-width: 1199.98px) {
	.main-content-wrap .side-content { width: 265px; }
	.main-content-wrap .main-content { width: calc(100% - 265px); }
}

/* ---- phone drawer ---- */
@media (max-width: 1024px) {
	.filter-bar {
		display: flex;
		align-items: center;
		gap: 14px;
		margin: 2px 0 14px;
	}
	.filter-open {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 18px;
		border: 1.5px solid #642d91;
		border-radius: 22px;
		background: #fff;
		color: #642d91;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
	}
	.filter-count {
		display: none;
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		border-radius: 11px;
		background: #642d91;
		color: #fff;
		font-size: 13px;
		line-height: 22px;
		text-align: center;
	}
	.filter-count.is-on { display: inline-block; }
	.filter-bar__found { color: #58595b; font-size: 15px; }

	/* the sidebar element itself is the overlay; its .search_filter is the panel */
	.main-content-wrap .side-content {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2300; /* above .header (2100) and the kiosk bar */
		width: auto;
		padding: 0;
		background: rgba(0, 0, 0, 0.4);
		justify-content: flex-end;
	}
	html.filters-open .main-content-wrap .side-content { display: flex; }
	html.filters-open,
	html.filters-open body { overflow: hidden; }
	.side-content .search_filter {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 420px;
		height: 100%;
		background: #fff;
		box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
	}
	.side-content > .search_filter > .col.my-3 { display: none; } /* the desktop sliders icon */
	.filter-head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		min-height: 56px;
		padding: 0 6px 0 16px;
		border-bottom: 1px solid #dddedf;
	}
	.filter-head__title { font-size: 18px; font-weight: 700; color: #642d91; }
	.filter-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: #58595b;
	}
	.side-content .productsFound { flex: none; padding: 10px 16px 0; color: #58595b; }
	#search-filter-form {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 16px 12px;
	}
	.filter-foot {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 16px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid #dddedf;
		background: #fff;
	}
	.filter-foot__clear {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 8px;
		font-size: 16px;
	}
	.filter-apply {
		flex: 1 1 auto;
		min-height: 48px;
		border: 0;
		border-radius: 24px;
		background: #642d91;
		color: #fff;
		font-size: 17px;
		font-weight: 700;
	}
}