/*
Theme Name: Flatsome Child (Esso Energi)
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0.9
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* Catalog filter (toolbar above the product grid) — see inc/catalog-filter.php */
.catalog-filter {
	margin: 0 0 1.5em;
}
.catalog-filter__bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	background: #f6f4f1;
	border: 1px solid #e6e2dd;
	border-radius: 10px;
	padding: 11px 13px;
}

/* --- Facet dropdown (native <details>) --- */
.catalog-filter__facet {
	position: relative;
}
.catalog-filter__toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	list-style: none;
	border: 1px solid #cfcfcf;
	background: #fff;
	color: #2b2b2b;
	font-size: 14.5px;
	font-weight: 600;
	padding: 9px 13px;
	border-radius: 7px;
	cursor: pointer;
	user-select: none;
}
.catalog-filter__toggle::-webkit-details-marker { display: none; }
.catalog-filter__toggle::marker { content: ""; }
.catalog-filter__toggle:hover { border-color: var(--esso-blue, #0C479D); }
.catalog-filter__facet[open] .catalog-filter__toggle {
	border-color: var(--esso-blue, #0C479D);
	background: #f5f8fd;
}
.catalog-filter__chev { color: #999; transition: transform 0.2s ease; }
.catalog-filter__facet[open] .catalog-filter__chev { transform: rotate(180deg); }
.catalog-filter__badge {
	background: var(--esso-red, #D62828);
	color: #fff;
	border-radius: 11px;
	min-width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	padding: 0 5px;
	box-sizing: border-box;
}
.catalog-filter__badge.is-hidden { display: none; }

.catalog-filter__count {
	margin-left: auto;
	font-size: 14px;
	color: #777;
	white-space: nowrap;
}
.catalog-filter__count b { color: #2b2b2b; font-weight: 700; }

/* --- Popover panel --- */
.catalog-filter__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: 340px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 11px;
	box-shadow: 0 8px 28px -8px rgba(20, 30, 55, 0.22), 0 2px 6px -2px rgba(20, 30, 55, 0.12);
	z-index: 60;
	overflow: hidden;
}
.catalog-filter__search { padding: 10px 11px; border-bottom: 1px solid #eee; }
/* Prefixed with .catalog-filter to outrank Flatsome's input[type=search] rule
   (square corners + inset shadow + fixed height). */
.catalog-filter .catalog-filter__search-input {
	width: 100%;
	height: auto;
	margin: 0; /* Flatsome adds margin-bottom:1em to all inputs — kill it. */
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	box-shadow: none !important;
	background: #fff;
	padding: 9px 12px;
	font: inherit;
	font-size: 14px;
	color: #333;
}
.catalog-filter .catalog-filter__search-input:focus {
	outline: none;
	border-color: var(--esso-blue, #0C479D);
	box-shadow: none !important;
}
.catalog-filter .catalog-filter__search-input::-webkit-search-decoration,
.catalog-filter .catalog-filter__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.catalog-filter__list { max-height: 330px; overflow-y: auto; padding: 6px; margin: 0; }

/* --- Option rows + tree --- */
.catalog-filter__tree,
.catalog-filter__children { list-style: none; margin: 0; padding: 0; }
.catalog-filter__children {
	margin: 0 0 0 16px;
	padding-left: 12px;
	border-left: 2px solid #e3e9f2;
}
.catalog-filter__group { margin: 0; }
.catalog-filter__group.is-collapsed > .catalog-filter__children { display: none; }

/* Each row is one line: [check] name … count [caret]. The whole line — option
   plus caret — shares a single hover, and every row is the same height. */
.catalog-filter__row { display: flex; align-items: center; border-radius: 6px; }
.catalog-filter__row:has(> a.catalog-filter__option):hover { background: #f4f6f9; }
.catalog-filter__row > .catalog-filter__option { flex: 1; min-width: 0; }

.catalog-filter__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	text-decoration: none;
	color: #2b2b2b;
	cursor: pointer;
}
.catalog-filter__check {
	width: 18px;
	height: 18px;
	flex: none;
	border: 1.5px solid #c9c9c9;
	border-radius: 5px;
	display: grid;
	place-items: center;
	color: #fff;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}
.catalog-filter__check svg { opacity: 0; transform: scale(0.6); transition: 0.12s ease; }
.catalog-filter__option.is-checked .catalog-filter__check {
	background: var(--esso-red, #D62828);
	border-color: var(--esso-red, #D62828);
}
.catalog-filter__option.is-checked .catalog-filter__check svg { opacity: 1; transform: none; }
.catalog-filter__option.is-checked .catalog-filter__name { font-weight: 600; }
.catalog-filter__name { flex: 1; font-size: 14.5px; }
.catalog-filter__cnt { color: #999; font-size: 13px; font-variant-numeric: tabular-nums; }

.catalog-filter__option.is-disabled,
.catalog-filter__option.is-ancestor { color: #aaa; cursor: default; }
.catalog-filter__option.is-ancestor .catalog-filter__check { visibility: hidden; }
.catalog-filter__option.is-disabled .catalog-filter__check { opacity: 0.5; }
.catalog-filter__option.is-locked { cursor: default; }

.catalog-filter__caret {
	flex: none;
	width: 30px;
	height: 30px;
	/* Reset Flatsome's global <button> styling (margin-bottom/min-height/line-height
	   would otherwise inflate the row height). */
	margin: 0 4px 0 0;
	padding: 0;
	min-height: 0;
	line-height: 1;
	font-size: 0;
	box-shadow: none;
	border: none;
	background: none;
	color: #9aa0a8;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.catalog-filter__caret:hover { background: #e7ebf1; color: #444; }
.catalog-filter__caret svg { display: block; transition: transform 0.2s ease; transform: rotate(90deg); }
.catalog-filter__group.is-collapsed > .catalog-filter__row .catalog-filter__caret svg { transform: none; }
/* The caret only does something with JS — hide the dead control otherwise. */
.catalog-filter:not(.is-js) .catalog-filter__caret { display: none; }

/* --- Panel footer --- */
.catalog-filter__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	border-top: 1px solid #eee;
	background: #fafbfc;
}
.catalog-filter__reset {
	color: var(--esso-blue, #0C479D);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
.catalog-filter__reset.is-disabled { color: #bbb; cursor: default; }
.catalog-filter .catalog-filter__apply {
	background: var(--esso-red, #D62828);
	color: #fff;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
/* Keep the label white on hover (Flatsome turns links blue); darken the red instead. */
.catalog-filter .catalog-filter__apply:hover,
.catalog-filter .catalog-filter__apply:focus {
	background: #a91d1d;
	color: #fff;
}

/* --- Active filter chips --- */
.catalog-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 13px;
}
.catalog-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fdecec;
	border: 1px solid #f3cccc;
	color: var(--esso-red, #D62828);
	border-radius: 20px;
	padding: 5px 7px 5px 13px;
	font-size: 13.5px;
	font-weight: 600;
}
.catalog-filter__chip-kind { opacity: 0.75; }
.catalog-filter__chip-x {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #f3d2d2;
	color: var(--esso-red, #D62828);
	text-decoration: none;
	font-size: 13px;
	line-height: 1;
}
.catalog-filter__chip-x:hover { background: var(--esso-red, #D62828); color: #fff; }
.catalog-filter__clear {
	color: var(--esso-blue, #0C479D);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: underline;
	padding: 5px 8px;
}


/* Cross-sells on the product page — see inc/product-cross-sells.php */
.cross-sells-products-wrapper {
	margin-top: 40px;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

	/* Hide the result count to save room. */
	.catalog-filter__bar { gap: 8px; padding: 8px 9px; position: relative; }
	.catalog-filter__facet { flex: 1 1 auto; position: static; }
	.catalog-filter__toggle { width: 100%; justify-content: space-between; }
	.catalog-filter__count { display: none; }
	/* Popovers align to the bar container: full bar width, dropping below it. */
	.catalog-filter__panel {
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
	}
}