.ytgs-sidebar-filter {
	--ytgs-primary: #19a8b5;
	--ytgs-primary-dark: #0d7f8a;
	--ytgs-text: #171717;
	--ytgs-muted: #8a9098;
	--ytgs-border: #e3e8ec;
	width: 100%;
	padding: 20px;
	border: 1px solid var(--ytgs-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 35px rgba(17, 24, 39, .07);
}

.ytgs-sidebar-filter *,
.ytgs-sidebar-filter *::before,
.ytgs-sidebar-filter *::after {
	box-sizing: border-box;
}

.ytgs-filter-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: flex-start;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ytgs-border);
}

.ytgs-filter-kicker {
	display: block;
	margin-bottom: 4px;
	color: var(--ytgs-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ytgs-sidebar-filter h3 {
	margin: 0;
	color: var(--ytgs-text);
	font-size: 25px;
	line-height: 1.15;
}

.ytgs-brand-clear {
	flex: 0 0 auto;
	margin: 5px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ytgs-primary);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

.ytgs-brand-clear:disabled {
	opacity: .35;
	cursor: default;
}

.ytgs-brand-list {
	display: grid;
	gap: 2px;
	max-height: 520px;
	margin-top: 11px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

.ytgs-brand-item {
	position: relative;
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	min-height: 43px;
	margin: 0;
	padding: 7px 6px;
	border-radius: 9px;
	cursor: pointer;
	transition: background-color .2s ease;
}

.ytgs-brand-item:hover {
	background: #f6fafb;
}

.ytgs-brand-item input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ytgs-brand-checkbox {
	position: relative;
	display: block;
	width: 19px;
	height: 19px;
	border: 1.5px solid #c7d0d7;
	border-radius: 5px;
	background: #fff;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ytgs-brand-item input:checked + .ytgs-brand-checkbox {
	border-color: var(--ytgs-primary);
	background: var(--ytgs-primary);
	box-shadow: 0 0 0 3px rgba(25, 168, 181, .12);
}

.ytgs-brand-item input:checked + .ytgs-brand-checkbox::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ytgs-brand-name {
	overflow: hidden;
	color: var(--ytgs-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Cây danh mục trên taxonomy product_brand */
.ytgs-cat-tree,
.ytgs-cat-children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ytgs-cat-tree {
	margin-top: 10px;
}

.ytgs-cat-node,
.ytgs-cat-all {
	margin: 0;
	padding: 0;
}

.ytgs-cat-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 34px;
	align-items: center;
	min-height: 44px;
	border-radius: 9px;
	transition: background-color .2s ease;
}

.ytgs-cat-row:hover,
.ytgs-cat-all:hover {
	background: #f5fafb;
}

.ytgs-cat-link {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 44px;
	padding: 8px 5px 8px calc(6px + (var(--ytgs-depth, 0) * 15px));
	color: var(--ytgs-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.ytgs-cat-link:hover {
	color: var(--ytgs-primary-dark);
}

.ytgs-cat-link.is-current {
	color: var(--ytgs-primary-dark);
	font-weight: 800;
}

.ytgs-cat-link.is-current::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--ytgs-primary);
	box-shadow: 0 0 0 4px rgba(25, 168, 181, .11);
}

.ytgs-cat-all {
	border-bottom: 1px solid #edf0f2;
}

.ytgs-cat-all .ytgs-cat-link {
	padding-left: 6px;
}

.ytgs-cat-toggle {
	position: relative;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #7e8790;
	cursor: pointer;
}

.ytgs-cat-toggle:hover {
	background: #eaf7f8;
	color: var(--ytgs-primary-dark);
}

.ytgs-cat-toggle span {
	position: relative;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform .2s ease;
}

.ytgs-cat-node.is-open > .ytgs-cat-row .ytgs-cat-toggle span {
	transform: rotate(225deg) translate(-1px, -1px);
}

.ytgs-cat-children {
	display: none;
}

.ytgs-cat-node.is-open > .ytgs-cat-children {
	display: block;
}

.ytgs-no-filter-items {
	margin: 12px 0 0;
	padding: 12px;
	border-radius: 10px;
	background: #f7f9fa;
	color: var(--ytgs-muted);
	font-size: 13px;
}

.ytgs-filter-status {
	min-height: 0;
	margin-top: 10px;
	color: var(--ytgs-muted);
	font-size: 12px;
}

.ytgs-filter-status:empty {
	display: none;
}

.shop-container.ytgs-is-loading {
	position: relative;
	min-height: 220px;
	pointer-events: none;
	opacity: .48;
}

.shop-container.ytgs-is-loading::after {
	content: "";
	position: absolute;
	z-index: 30;
	top: 80px;
	left: 50%;
	width: 36px;
	height: 36px;
	margin-left: -18px;
	border: 3px solid #dceff1;
	border-top-color: #19a8b5;
	border-radius: 50%;
	animation: ytgs-sidebar-spin .75s linear infinite;
}

@keyframes ytgs-sidebar-spin {
	to { transform: rotate(360deg); }
}

.shop-container .ytgs-empty-products {
	width: 100%;
	padding: 55px 20px;
	border: 1px dashed #d6dde3;
	border-radius: 14px;
	background: #f8fafb;
	text-align: center;
}

.shop-container .ytgs-empty-products strong {
	display: block;
	margin-bottom: 5px;
	font-size: 17px;
}

.shop-container .ytgs-empty-products p {
	margin: 0;
	color: #7a818a;
	font-size: 13px;
}

.shop-container .ytgs-ajax-pagination button.page-numbers {
	display: inline-block;
	min-width: 2.25em;
	height: 2.25em;
	margin: 0 .15em;
	padding: 0 .4em;
	border: 0;
	border-radius: 99px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 2.25em;
	cursor: pointer;
}

.shop-container .ytgs-ajax-pagination button.page-numbers:hover {
	background: #19a8b5;
	color: #fff;
}

@media (max-width: 849px) {
	.ytgs-sidebar-filter {
		padding: 17px;
		border-radius: 14px;
	}

	.ytgs-sidebar-filter h3 {
		font-size: 22px;
	}
}