/**
 * OCFilter tablet overrides (768–1024px).
 * Loaded after ocf.cache.css so mobile drawer mode wins over desktop horizontal layout.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	.ocf-mobile,
	.ocf-is-mobile {
		display: block !important;
	}

	.ocf-is-mobile {
		height: 0 !important;
		overflow: hidden !important;
	}

	.ocf-desktop {
		display: none !important;
	}

	.ocf-container {
		display: none !important;
	}

	.ocf-container.ocf-mobile-1 {
		display: block !important;
		position: fixed !important;
		left: 0;
		top: 0;
		height: 100%;
		width: 380px;
		max-width: 90vw;
		transform: translateX(-100%) translate3d(0, 0, 0);
		transition: transform 300ms ease-in-out, box-shadow 150ms linear;
		z-index: 2147483648 !important;
		will-change: transform, box-shadow;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
	}

	.ocf-container.ocf-mobile-right {
		left: auto;
		right: 0;
		transform: translateX(100%);
	}

	.ocf-container.ocf-mobile-active {
		box-shadow: 0 0 0 99999px rgb(0 0 0 / 60%);
		transform: translateX(0) !important;
	}

	.ocf-content {
		background-color: #fff;
		margin: 0 !important;
		padding: 0 !important;
		position: relative;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 2;
	}

	.ocf-header {
		padding: 15px 20px;
		line-height: 1.5;
		position: relative;
		z-index: 1;
	}

	.ocf-header .ocf-close-mobile {
		margin-left: auto;
		padding: 0;
		line-height: 1;
	}

	.ocf-body {
		position: absolute;
		top: 35px;
		width: 100%;
		bottom: 52px;
		z-index: 3;
	}

	.ocf-body > .ocf-filter-list {
		overflow-x: hidden;
		overflow-y: scroll;
		height: 100%;
		padding-bottom: 20px;
	}

	.ocf-horizontal .ocf-filter-list {
		display: block !important;
		flex-wrap: unset !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.ocf-horizontal .ocf-filter {
		min-width: 0 !important;
		flex: none !important;
		width: auto !important;
		margin: 0 20px 15px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.ocf-horizontal .ocf-filter-header {
		font-weight: normal !important;
		margin-bottom: 0 !important;
		background-color: #fff !important;
		padding: 10px 15px !important;
		border: 1px solid #dcdcdc !important;
		border-radius: 5px !important;
	}

	.ocf-horizontal .ocf-dropdown .ocf-filter-body > .ocf-value-list {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 15px 0 !important;
		box-shadow: none !important;
	}

	.ocf-filter-header,
	.ocf-module-page-header {
		flex-wrap: wrap;
		padding: 10px 0;
		font-size: 16px;
	}

	.ocf-open .ocf-filter-header {
		flex-wrap: nowrap;
		position: absolute;
		bottom: 100%;
		left: 0;
		padding: 18px 20px;
		background-color: #fff;
		width: 100%;
		height: 60px;
	}

	.ocf-footer {
		position: absolute;
		padding: 10px 20px;
		margin: 0;
		z-index: 5;
		width: 100%;
		bottom: 0;
		background-color: #fff;
		box-shadow: -10px -10px 10px 0 #fff;
	}

	.ocf-value,
	.ocf-value:active,
	.ocf-value:focus,
	.ocf-value:visited,
	.ocf-value:hover {
		font-size: 16px;
		margin-bottom: 12px;
	}
}