/**
 * Monge - Ajax Search Pro Fix
 *
 * Styles the rebuilt result structure:
 *
 *   .resdrg
 *     > .aspfix-filterbar
 *     > .aspfix-layout
 *         > .aspfix-sidebar
 *         > .aspfix-main
 *             > .aspfix-block (Prispevki)
 *             > .aspfix-block (Izdelki)
 *
 * Ajax Search Pro styles its own markup through instance IDs
 * (#ajaxsearchprores2_1 ...), which beats class selectors, so the structural
 * rules below need !important. Everything is scoped to .resdrg.
 *
 * @version 1.4.0
 */

/* =========================================================================
   Variables
   ====================================================================== */

.asp_r .resdrg {
	--aspfix-blue: #1d2b4f;
	--aspfix-accent: #2f6df6;
	--aspfix-border: #e5e9f2;
	--aspfix-soft: #f5f7fb;
	--aspfix-muted: #44547a;
	--aspfix-sidebar-width: 240px;
	--aspfix-gap: 24px;
}


/* =========================================================================
   Container resets
   ====================================================================== */

.asp_r .resdrg,
.asp_r .resdrg * {
	box-sizing: border-box !important;
}

.asp_r .resdrg {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
}

/*
 * Ajax Search Pro writes an inline `height: NNNpx` on .results, measured on
 * its own markup before the rebuild. When the query changed quickly that stale
 * number collapsed the drop-down to a few pixels. Let the browser size it and
 * cap it instead, so the panel can never lose its height again.
 */
.asp_r .results {
	height: auto !important;
	min-height: 0 !important;
}

.asp_r.vertical .results {
	max-height: calc(100vh - 200px) !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

/* Same for the outer drop-down shell. */
.asp_r.asp_w.vertical {
	height: auto !important;
}


/* =========================================================================
   Filter bar - "Filtriraj po:" + category buttons
   ====================================================================== */

.resdrg > .aspfix-filterbar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px 16px !important;

	width: 100% !important;
	margin: 0 !important;
	padding: 15px 20px !important;

	background: #fff !important;
	border-bottom: 1px solid #eee !important;
}

.aspfix-filterbar__label {
	color: #333 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
}

.aspfix-filterbar__buttons {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;

	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aspfix-filterbar .monge_category_button {
	display: inline-block !important;

	padding: 6px 18px !important;

	border: 0 !important;
	border-radius: 20px !important;

	background: var(--aspfix-blue);

	color: #fff !important;

	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;

	text-decoration: none !important;
	cursor: pointer !important;

	transition: filter .18s ease;
}

.aspfix-filterbar .monge_category_button:hover {
	filter: brightness(0.92);
	color: #fff !important;
}

.aspfix-filterbar .monge-btn-psi {
	background: #8cb83e !important;
}

.aspfix-filterbar .monge-btn-macke {
	background: #b4529d !important;
}

.aspfix-filterbar .monge-btn-za-vzreditelje,
.aspfix-filterbar .monge-btn-za-veterinarje {
	background: #f1912a !important;
}


/* =========================================================================
   Layout - sidebar | results column
   ====================================================================== */

.resdrg > .aspfix-layout {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;

	gap: var(--aspfix-gap) !important;

	width: 100% !important;
	margin: 0 !important;
	padding: 20px !important;

	background: #fff !important;
}

.aspfix-layout > .aspfix-sidebar {
	flex: 0 0 var(--aspfix-sidebar-width) !important;
	width: var(--aspfix-sidebar-width) !important;
	max-width: var(--aspfix-sidebar-width) !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

.aspfix-layout > .aspfix-main {
	flex: 1 1 auto !important;
	min-width: 0 !important;

	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;

	gap: 20px !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================================
   Sidebar
   ====================================================================== */

.aspfix-sidebar .monge_sidebar_section {
	margin: 0 0 24px !important;
	padding: 0 !important;
}

.aspfix-sidebar .monge_sidebar_section:last-child {
	margin-bottom: 0 !important;
}

.aspfix-sidebar h1,
.aspfix-sidebar h2,
.aspfix-sidebar h3,
.aspfix-sidebar h4 {
	margin: 0 0 10px !important;
	padding: 0 !important;

	color: var(--aspfix-blue) !important;

	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: .02em !important;
	text-transform: uppercase !important;
}

.aspfix-sidebar .monge_brand_list {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

.aspfix-sidebar .monge_brand_link {
	display: block !important;

	padding: 6px 0 !important;

	color: var(--aspfix-muted) !important;

	font-size: 15px !important;
	line-height: 1.35 !important;

	text-decoration: none !important;

	transition: color .18s ease;
}

.aspfix-sidebar .monge_brand_link:hover,
.aspfix-sidebar .monge_brand_link:focus {
	color: var(--aspfix-accent) !important;
}


/* =========================================================================
   Result blocks - identical styling, stacked, full width
   ====================================================================== */

.aspfix-main > .aspfix-block {
	display: block !important;
	float: none !important;

	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	background: #fff !important;
	border: 1px solid var(--aspfix-border) !important;
	border-radius: 12px !important;

	overflow: hidden !important;
}

.aspfix-main > .aspfix-block > .asp_group_header {
	display: block !important;

	width: 100% !important;
	margin: 0 !important;
	padding: 14px 20px !important;

	background: var(--aspfix-soft) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--aspfix-border) !important;
	border-radius: 0 !important;

	color: var(--aspfix-blue) !important;

	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;

	text-align: left !important;
	text-transform: none !important;
}


/* Empty block - the category matched nothing */

.aspfix-main > .aspfix-block--empty {
	background: #fcfdff !important;
}

.aspfix-main > .aspfix-block > .aspfix-empty {
	display: block !important;

	margin: 0 !important;
	padding: 16px 20px !important;

	color: #8b96af !important;

	font-size: 14px !important;
	font-style: italic !important;
	line-height: 1.5 !important;
}


/* Result item */

.aspfix-main > .aspfix-block > .item {
	display: block !important;
	float: none !important;

	width: 100% !important;
	margin: 0 !important;
	padding: 16px 20px !important;

	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid #f0f3f8 !important;
	border-radius: 0 !important;

	transition: background-color .18s ease;
}

.aspfix-main > .aspfix-block > .item:last-child {
	border-bottom: 0 !important;
}

.aspfix-main > .aspfix-block > .item:hover {
	background: #fafbfe !important;
}

.aspfix-block .asp_content {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;

	gap: 16px !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: visible !important;
}

.aspfix-block .asp_res_image_url {
	flex: 0 0 90px !important;

	display: block !important;

	width: 90px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aspfix-block .asp_image {
	width: 90px !important;
	height: 90px !important;

	margin: 0 !important;
	padding: 0 !important;

	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;

	border-radius: 8px !important;
	overflow: hidden !important;
}

.aspfix-block .asp_image img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: contain !important;
}

.aspfix-block .monge_product_content,
.aspfix-block .asp_content > div:not(.asp_image) {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.aspfix-block .monge_product_title {
	margin: 0 0 6px !important;
	padding: 0 !important;

	font-size: 16px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
}

.aspfix-block .monge_product_title a,
.aspfix-block .asp_res_url {
	color: var(--aspfix-blue) !important;
	text-decoration: none !important;
}

.aspfix-block .monge_product_title a:hover,
.aspfix-block .asp_res_url:hover {
	color: var(--aspfix-accent) !important;
}

.aspfix-block .asp_res_text,
.aspfix-block .monge_product_description {
	margin: 0 !important;
	padding: 0 !important;

	color: var(--aspfix-muted) !important;

	font-size: 14px !important;
	line-height: 1.55 !important;
}


/* =========================================================================
   Leftovers from Ajax Search Pro that must not reappear
   ====================================================================== */

/*
 * Raw template output is left alone until the script rebuilds it, so a broken
 * script never means invisible results. Once rebuilt, these wrappers no longer
 * exist - the rules below only matter if something re-injects them.
 */
.resdrg[data-aspfix] .monge_search_layout,
.resdrg[data-aspfix] .monge_results_column,
.resdrg[data-aspfix] > .asp_custom_header_wrapper {
	display: none !important;
}

/* Ajax Search Pro entry animations replay on every rebuild - suppress them. */
.resdrg[data-aspfix] .asp_an_fadeInDown,
.resdrg[data-aspfix] .asp_an_fadeInDrop {
	animation: none !important;
}


/* =========================================================================
   Mobile
   ====================================================================== */

@media (max-width: 782px) {

	.resdrg > .aspfix-layout {
		flex-direction: column !important;
		gap: 18px !important;
		padding: 16px !important;
	}

	.aspfix-layout > .aspfix-sidebar {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: none !important;
	}

	.resdrg > .aspfix-filterbar {
		padding: 12px 16px !important;
	}

	.aspfix-main > .aspfix-block > .asp_group_header {
		padding: 12px 16px !important;
	}

	.aspfix-main > .aspfix-block > .item {
		padding: 14px 16px !important;
	}

	.aspfix-block .asp_res_image_url,
	.aspfix-block .asp_image {
		flex-basis: 68px !important;
		width: 68px !important;
	}

	.aspfix-block .asp_image {
		height: 68px !important;
	}
}


/* =========================================================================
   "+ še N zadetkov" - results that did not fit the per-block cap
   ====================================================================== */

.aspfix-main > .aspfix-block > .aspfix-more {
	display: block !important;

	margin: 0 !important;
	padding: 12px 20px !important;

	border-top: 1px solid #f0f3f8 !important;

	background: #fbfcfe !important;

	color: #7b88a8 !important;

	font-size: 13px !important;
	line-height: 1.4 !important;
}