.header-category-panel .hc-level1-cate-unit {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				height: 50px;
				background-color: #ffffff;
				cursor: pointer;
			}

			.header-category-panel .hc-level1-cate-unit .img {
				flex-shrink: 0;
				margin-inline-start: 16px;
				height: 28px;
				width: 28px;
			}

			.header-category-panel .hc-level1-cate-unit .title {
				margin: 0 16px 0 8px;
				font-size: 16px;
				line-height: 22px;
				color: #222;
				font-weight: 400;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.header-category-panel .hc-level1-cate-unit:hover {
				background-color: #f4f4f4;
			}

			.header-category-panel .hc-level1-cate-unit:hover .title {
				font-weight: 600;
			}

			.header-category-panel .hc-level1-cate-unit.active {
				background-color: #f4f4f4;
				border-inline-start: 4px solid #222;
				box-sizing: border-box;
			}

			.header-category-panel .hc-level1-cate-unit.active .title {
				font-weight: 600;
			}

			.header-category-panel .hc-level1-cate-unit.active .img {
				margin-inline-start: 12px;
			}

			[dir="rtl"] .header-category-panel .hc-level1-cate-unit .img {
				transform: scaleX(-1);
			}

			.header-category-panel .hc-level1-panel {
				width: 360px;
				background-color: #fff;
				border-inline-end: 1px solid #ddd;
				flex-shrink: 0;
			}

			.header-category-panel .hc-level1-panel .level1-panel-list {
				height: 100%;
				overflow-y: auto;
				scrollbar-gutter: stable;
				overflow-y: overlay;
			}

			.header-category-panel .hc-level1-cate-unit {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				height: 50px;
				background-color: #ffffff;
				cursor: pointer;
			}

			.header-category-panel .hc-level1-cate-unit .img {
				flex-shrink: 0;
				margin-inline-start: 16px;
				height: 28px;
				width: 28px;
			}

			.header-category-panel .hc-level1-cate-unit .title {
				margin: 0 16px 0 8px;
				font-size: 16px;
				line-height: 22px;
				color: #222;
				font-weight: 400;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.header-category-panel .hc-level1-cate-unit:hover {
				background-color: #f4f4f4;
			}

			.header-category-panel .hc-level1-cate-unit:hover .title {
				font-weight: 600;
			}

			.header-category-panel .hc-level1-cate-unit.active {
				background-color: #f4f4f4;
				border-inline-start: 4px solid #222;
				box-sizing: border-box;
			}

			.header-category-panel .hc-level1-cate-unit.active .title {
				font-weight: 600;
			}

			.header-category-panel .hc-level1-cate-unit.active .img {
				margin-inline-start: 12px;
			}

			[dir="rtl"] .header-category-panel .hc-level1-cate-unit .img {
				transform: scaleX(-1);
			}

			.header-category-panel .hc-leaf-item {
				width: 122px;
				height: 150px;
				text-decoration: none;
				cursor: pointer;
				position: relative;
			}

			.header-category-panel .hc-leaf-item .product-wrapper {
				position: relative;
				margin: 0 12px;
				width: 98px;
				height: 98px;
				border-radius: 999px;
				overflow: hidden;
			}

			.header-category-panel .hc-leaf-item .product-wrapper::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 999px;
				background-color: rgba(0, 0, 0, 0.04);
			}

			.header-category-panel .hc-leaf-item .product-wrapper .product-img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.header-category-panel .hc-leaf-item .icon {
				position: absolute;
				top: 4px;
				inset-inline-end: 12px;
				width: 24px;
				height: 24px;
				z-index: 1;
			}

			.header-category-panel .hc-leaf-item .title {
				margin-top: 8px;
				font-size: 14px;
				line-height: 22px;
				color: #222;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.header-category-panel .hc-leaf-item:hover .product-wrapper {
				box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.12);
			}

			.header-category-panel .hc-leaf-item:hover .product-wrapper .product-img {
				transform: scale(1.2);
			}

			.header-category-panel .hc-leaf-item:hover .title {
				font-weight: 500;
			}

			[dir="rtl"] .header-category-panel .hc-leaf-item .icon {
				transform: scaleX(-1);
			}

			.header-category-panel a:link,
			.header-category-panel a:visited,
			.header-category-panel a:hover,
			.header-category-panel a:active {
				text-decoration: none;
				color: inherit;
			}

			.header-category-panel .hc-level3-cate-unit {
				padding: 0 24px;
				box-sizing: border-box;
			}

			.header-category-panel .hc-level3-cate-unit .category-title-container {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24px;
			}

			.header-category-panel .hc-level3-cate-unit .category-title-container .category-title {
				font-size: 20px;
				line-height: 26px;
				font-weight: 500;
				color: #222;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}

			.header-category-panel .hc-level3-cate-unit .category-title-container .category-link {
				font-size: 14px;
				line-height: 20px;
				color: #222;
				text-decoration: underline;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}

			.header-category-panel .hc-level3-cate-unit .leaf-container {
				margin-bottom: 20px;
				overflow: hidden;
			}

			.header-category-panel .hc-level3-cate-unit .leaf-container .leaf-row {
				display: flex;
				flex-direction: row-reverse;
				justify-content: space-between;
				flex-wrap: wrap;
				height: 150px;
				width: 100%;
				overflow: hidden;
			}

			.header-category-panel .hc-level3-cate-unit .leaf-container .leaf-row.less-leaves {
				flex-direction: row;
			}

			.header-category-panel .hc-level3-cate-unit .leaf-container .leaf-row .leaf-item-empty {
				width: 122px;
				height: 150px;
			}

			.header-category-panel .hc-level3-cate-unit .leaf-container .leaf-row.second-row {
				margin-top: 24px;
			}

			.header-category-panel .level3-panel-unit .leaf-container .leaf-item .title {
				height: 44px;
			}

			.header-category-panel .hc-level2-cate-unit {
				display: flex;
				flex-shrink: 0;
				align-items: center;
				box-sizing: border-box;
				height: 50px;
				background-color: #ffffff;
				font-size: 16px;
				line-height: 22px;
				font-weight: 400;
				color: #222;
				cursor: pointer;
			}

			.header-category-panel .hc-level2-cate-unit .title {
				margin-inline-start: 16px;
				max-width: 328px;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.header-category-panel .hc-level2-cate-unit:hover {
				background-color: #f4f4f4;
			}

			.header-category-panel .hc-level2-cate-unit:hover .title {
				font-weight: 600;
			}

			.header-category-panel .hc-level2-cate-unit.active {
				background-color: #fff;
				border-inline-start: 4px solid #222;
			}

			.header-category-panel .hc-level2-cate-unit.active .title {
				font-weight: 600;
				margin-inline-start: 12px;
			}

			.header-category-panel .hc-tree-panel-container {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				overflow: hidden;
				background-color: #fff;
				transform: translateX(100%);
				transition: transform 0.3s ease;
				z-index: 1;
			}

			.header-category-panel .hc-tree-panel-container.hc-panel-enter {
				transform: translateX(0);
			}

			.header-category-panel .hc-tree-panel-container .top-first-category-area {
				display: flex;
				align-items: center;
				flex-shrink: 0;
				box-sizing: border-box;
				padding: 3px 0 23px 0;
				border-bottom: 1px solid #ddd;
				cursor: pointer;
			}

			.header-category-panel .hc-tree-panel-container .top-first-category-area .back-icon {
				width: 20px;
				height: 20px;
				flex-shrink: 0;
			}

			.header-category-panel .hc-tree-panel-container .top-first-category-area .title {
				flex-shrink: 0;
				margin-inline-start: 4px;
				font-size: 16px;
				line-height: 22px;
				font-weight: 600;
				display: -webkit-box;
				color: #222;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}

			.header-category-panel .hc-tree-panel-container .content {
				display: flex;
				height: calc(100% - 68px);
			}

			.header-category-panel .hc-tree-panel-container .content .level2-list {
				box-sizing: border-box;
				flex-shrink: 0;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				height: 100%;
				width: 360px;
				overflow-y: auto;
				scrollbar-gutter: stable;
				overflow-y: overlay;
				border-inline-end: 1px solid #ddd;
			}

			.header-category-panel .hc-tree-panel-container .content .level2-placeholder {
				margin: 14px 16px;
				height: 22px;
				border-radius: 8px;
				display: flex;
				width: 228px;
				overflow: hidden;
				align-items: center;
				box-sizing: border-box;
				background-color: #e0e0e0;
			}

			.header-category-panel .hc-tree-panel-container .content .level3-list {
				flex: 1;
				box-sizing: border-box;
				height: 100%;
				overflow-y: auto;
				scrollbar-gutter: stable;
				padding: 0 20px;
			}

			.header-category-panel .hc-tree-panel-container .content .level3-list .tree-panel-unit {
				box-sizing: border-box;
				width: 100%;
				margin-top: 16px;
			}

			.header-category-panel .hc-tree-panel-container .content .level3-list .tree-panel-unit .category-title {
				font-size: 20px;
				line-height: 26px;
				font-weight: 500;
				color: #222;
				margin-bottom: 20px;
			}

			.header-category-panel .hc-tree-panel-container .content .level3-list .tree-panel-unit .leaf-container {
				display: flex;
				flex-wrap: wrap;
				gap: 24px 20px;
			}

			.header-category-panel .hc-tree-panel-container .content .level3-list .tree-panel-unit .leaf-container .leaf-item {
				flex: 0 0 120px;
			}

			.header-category-panel .hc-tree-panel-container .content .level3-placeholder-container {
				max-width: 1140px;
			}

			.header-category-panel .hc-tree-panel-container .content .level3-placeholder-container .title-placeholder {
				margin: 16px 0 0 24px;
				width: 40%;
				height: 26px;
				background-color: #f4f4f4;
			}

			.header-category-panel .hc-tree-panel-container .content .level3-placeholder-container .list-placeholder {
				margin: 16px 0 0 24px;
				display: flex;
				gap: 20px 24px;
				flex-wrap: wrap;
				overflow: hidden;
			}

			.header-category-panel .hc-tree-panel-container .content .level3-placeholder-container .list-placeholder .level3-placeholder-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 122px;
				height: 150px;
			}

			.header-category-panel .hc-tree-panel-container .content .level3-placeholder-container .list-placeholder .level3-placeholder-item .placeholder-img {
				width: 98px;
				height: 98px;
				border-radius: 999px;
				background-color: #f4f4f4;
				margin: 0 12px;
			}

			.header-category-panel .hc-tree-panel-container .content .level3-placeholder-container .list-placeholder .level3-placeholder-item .placeholder-title {
				margin-top: 16px;
				width: 122px;
				height: 44px;
				background-color: #f4f4f4;
			}

			[dir="rtl"] .header-category-panel .hc-tree-panel-container .top-first-category-area .back-icon {
				transform: scaleX(-1);
			}

			.header-category-panel {
				box-sizing: border-box;
				margin-top: -20px;
				position: relative;
			}

			.header-category-panel .modal-panel-container {
				display: flex;
				overflow: hidden;
				position: relative;
				/* 顶通40 + header上方112 + 内容区上下边距60 + header底部预留100 */
				height: calc(100% - 100px);
				max-height: calc(100vh - 312px);
			}

			.header-category-panel .modal-panel-container .hc-level1-panel {
				transition: opacity 0.3s ease;
			}

			.header-category-panel .modal-panel-container .hc-level3-panel {
				flex: 1;
				background-color: #fff;
				box-sizing: border-box;
				transition: opacity 0.3s ease;
			}

			.header-category-panel .modal-panel-container .hc-level3-panel .hc-level3-list {
				box-sizing: border-box;
				overflow-y: auto;
				scrollbar-gutter: stable;
				height: 100%;
			}

			.header-category-panel .modal-panel-container .hc-level3-panel .level3-panel-unit:first-child {
				margin-top: 12px;
			}

			.header-category-panel .modal-panel-container .hc-level3-panel .level3-panel-unit {
				height: 374px;
				margin-top: 20px;
			}

			.header-category-panel .modal-panel-container.panel-fade .hc-level1-panel,
			.header-category-panel .modal-panel-container.panel-fade .hc-level3-panel {
				opacity: 0.1;
			}

			.header-category-panel .modal-panel-container.panel-fade .hc-level1-panel .hc-level3-list,
			.header-category-panel .modal-panel-container.panel-fade .hc-level3-panel .hc-level3-list {
				overflow: hidden;
			}

			.header-category-panel a,
			.header-category-panel a:hover,
			.header-category-panel a:link,
			.header-category-panel a:visited {
				color: #333;
			}