/* ==========================================================
   HUYU PRODUCTS MEGA MENU
   Version: 2.6.1

   Layout:
   Column 1 = 16.67%
   Column 2 = 16.67%
   Column 3 = 16.67%
   About Area = 50%

   Total:
   Navigation = 50%
   About / Cards = 50%
========================================================== */


@media (min-width: 1024px) {


	/* ======================================================
	   1. Hide original Blocksy Products submenu
	====================================================== */

	.products-mega > .sub-menu {

		display: none !important;

		visibility: hidden !important;
		opacity: 0 !important;

		pointer-events: none !important;

		transform: none !important;
		animation: none !important;
	}


	/* ======================================================
	   2. Hide Blocksy dropdown controls
	====================================================== */

	.products-mega > .ct-toggle-dropdown-desktop,
	.products-mega > .ct-toggle-dropdown-desktop-ghost,
	.products-mega > .ct-icon-container,
	.products-mega > [class*="toggle-dropdown"],
	.products-mega > button[class*="dropdown"],
	.products-mega > button[class*="toggle"] {

		display: none !important;

		visibility: hidden !important;

		width: 0 !important;
		height: 0 !important;

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

		opacity: 0 !important;

		pointer-events: none !important;
	}


	/* ======================================================
	   3. Main Mega Menu Panel
	====================================================== */

	.huyu-mega-panel {

		/* ----------------------------------------------
		   Colors
		---------------------------------------------- */

		/* 第一列 */
		--mega-red-1: #db3831;
		--mega-red-1-hover: #c82f29;

		/* 第二列：比第一列更淡 */
		--mega-red-2: #e85d57;
		--mega-red-2-hover: #d84b45;

		/* 第三列 */
		--mega-gray: #f3f3f4;

		/* 品牌红 */
		--mega-red-text: #db3831;

		/* 文本 */
		--mega-dark-text: #282a2d;
		--mega-light-text: #666a70;

		/* Border */
		--mega-border: #dedee1;


		position: fixed !important;

		top: var(--huyu-mega-top, 100px);

		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;

		width: auto !important;
		height: auto !important;


		/*
		 * 前三列共 50%
		 *
		 * 1fr + 1fr + 1fr + 3fr
		 *
		 * 第一列 ≈ 16.67%
		 * 第二列 ≈ 16.67%
		 * 第三列 ≈ 16.67%
		 * About  = 50%
		 */

		display: grid !important;

		grid-template-columns:
			1fr 1fr 1fr 3fr !important;


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

		border: 0 !important;

		border-top: 0 !important;

		box-sizing: border-box !important;


		box-shadow:
			0 18px 48px rgba(0, 0, 0, 0.15) !important;


		overflow: hidden !important;

		z-index: 99999999 !important;


		/* Closed */

		visibility: hidden !important;
		opacity: 0 !important;

		pointer-events: none !important;

		transform: translateY(-3px);

		transition:
			opacity 0.16s ease,
			transform 0.16s ease,
			visibility 0s linear 0.16s !important;
	}


	/* ======================================================
	   Open
	====================================================== */

	.huyu-mega-panel.is-open {

		visibility: visible !important;
		opacity: 1 !important;

		pointer-events: auto !important;

		transform: translateY(0);

		transition:
			opacity 0.16s ease,
			transform 0.16s ease,
			visibility 0s !important;
	}


	/* ======================================================
	   4. Common column
	====================================================== */

	.huyu-mega-column {

		position: relative !important;

		height: 100% !important;

		min-width: 0 !important;

		box-sizing: border-box !important;

		overflow-x: hidden !important;
		overflow-y: auto !important;

		scrollbar-width: thin;
	}


	/* ======================================================
	   5. COLUMN 1
	   ~16.67%
	   #db3831
	====================================================== */

	.huyu-mega-column-1 {

		grid-column: 1;

		background:
			var(--mega-red-1) !important;

		padding:
			32px 12px 36px !important;

		scrollbar-color:
			rgba(255, 255, 255, 0.28)
			transparent;
	}


	/* ======================================================
	   Find by Category
	====================================================== */

	.huyu-mega-category-title {

		display: block;

		width: 100%;

		margin:
			0 0 25px 0;

		text-align:
			center;
	}


	.huyu-mega-category-title-text {

		position: relative;

		display: inline-block;

		padding-bottom:
			15px;

		font-size:
			20px;

		font-weight:
			700;

		line-height:
			1.25;

		color:
			#ffffff;

		letter-spacing:
			0.1px;
	}


	/* 短白色下划线 */

	.huyu-mega-category-title-text::after {

		content: "";

		position: absolute;

		left: 25%;

		bottom: 0;

		width: 50%;

		height: 2px;

		background:
			rgba(255, 255, 255, 0.95);

		border-radius:
			10px;
	}


	/* ======================================================
	   Column 1 item
	====================================================== */

	.huyu-mega-column-1
	.huyu-mega-item {

		width: 100%;

		margin:
			0 0 3px 0;
	}


	.huyu-mega-column-1
	.huyu-mega-item > a {

		position: relative;

		display: flex !important;

		align-items: center !important;

		justify-content:
			center !important;

		width:
			100% !important;

		min-height:
			48px !important;

		padding:
			10px 30px 10px 14px !important;

		box-sizing:
			border-box !important;


		text-align:
			center !important;

		font-size:
			15px !important;

		font-weight:
			600 !important;

		line-height:
			1.4 !important;

		color:
			#ffffff !important;

		text-decoration:
			none !important;

		text-transform:
			none !important;

		letter-spacing:
			normal !important;

		border-radius:
			5px !important;

		background:
			transparent !important;

		transition:
			background-color 0.15s ease !important;
	}


	/* Arrow */

	.huyu-mega-column-1
	.huyu-mega-item.has-children > a::after {

		content:
			"›";

		position:
			absolute;

		right:
			11px;

		top:
			50%;

		transform:
			translateY(-52%);

		font-family:
			Arial,
			sans-serif;

		font-size:
			20px;

		font-weight:
			300;

		line-height:
			1;

		color:
			rgba(255, 255, 255, 0.58);

		transition:
			color 0.15s ease;
	}


	/* Hover */

	.huyu-mega-column-1
	.huyu-mega-item:hover > a {

		background:
			rgba(0, 0, 0, 0.07) !important;
	}


	/* Active */

	.huyu-mega-column-1
	.huyu-mega-item.is-active > a {

		background:
			var(--mega-red-1-hover) !important;
	}


	.huyu-mega-column-1
	.huyu-mega-item.is-active > a::after {

		color:
			#ffffff;
	}


	/* ======================================================
	   6. COLUMN 2
	   ~16.67%
	   Light red
	====================================================== */

	.huyu-mega-column-2 {

		grid-column: 2;

		background:
			var(--mega-red-2) !important;

		padding:
			32px 12px 36px !important;

		border-left:
			1px solid rgba(255, 255, 255, 0.12) !important;

		scrollbar-color:
			rgba(255, 255, 255, 0.28)
			transparent;
	}


	.huyu-mega-column-2
	.huyu-mega-item {

		margin:
			0 0 3px 0;
	}


	.huyu-mega-column-2
	.huyu-mega-item > a {

		position: relative;

		display: flex !important;

		align-items:
			center !important;

		justify-content:
			flex-start !important;

		width:
			100% !important;

		min-height:
			46px !important;

		padding:
			10px 30px 10px 14px !important;

		box-sizing:
			border-box !important;

		text-align:
			left !important;

		font-size:
			14px !important;

		font-weight:
			500 !important;

		line-height:
			1.4 !important;

		color:
			#ffffff !important;

		text-decoration:
			none !important;

		text-transform:
			none !important;

		letter-spacing:
			normal !important;

		border-radius:
			5px !important;

		background:
			transparent !important;

		transition:
			background-color 0.15s ease !important;
	}


	/* Arrow */

	.huyu-mega-column-2
	.huyu-mega-item.has-children > a::after {

		content:
			"›";

		position:
			absolute;

		right:
			10px;

		top:
			50%;

		transform:
			translateY(-52%);

		font-family:
			Arial,
			sans-serif;

		font-size:
			19px;

		font-weight:
			300;

		line-height:
			1;

		color:
			rgba(255, 255, 255, 0.52);
	}


	/* Hover */

	.huyu-mega-column-2
	.huyu-mega-item:hover > a {

		background:
			rgba(0, 0, 0, 0.06) !important;
	}


	/* Active */

	.huyu-mega-column-2
	.huyu-mega-item.is-active > a {

		background:
			var(--mega-red-2-hover) !important;

		font-weight:
			600 !important;
	}


	.huyu-mega-column-2
	.huyu-mega-item.is-active > a::after {

		color:
			#ffffff;
	}


	/* ======================================================
	   7. COLUMN 3
	   ~16.67%
	   Gray
	====================================================== */

	.huyu-mega-column-3 {

		grid-column: 3;

		background:
			var(--mega-gray) !important;

		padding:
			32px 14px 36px !important;

		border-left:
			1px solid var(--mega-border) !important;

		scrollbar-color:
			#bcbcc0
			transparent;
	}


	.huyu-mega-column-3
	.huyu-mega-item {

		margin:
			0;
	}


	.huyu-mega-column-3
	.huyu-mega-item > a {

		display:
			flex !important;

		align-items:
			center !important;

		justify-content:
			flex-start !important;

		width:
			100% !important;

		min-height:
			43px !important;

		padding:
			9px 8px !important;

		box-sizing:
			border-box !important;

		text-align:
			left !important;

		font-size:
			14px !important;

		font-weight:
			400 !important;

		line-height:
			1.45 !important;

		color:
			#34363a !important;

		text-decoration:
			none !important;

		text-transform:
			none !important;

		letter-spacing:
			normal !important;

		background:
			transparent !important;

		transition:
			color 0.15s ease !important;
	}


	/* Small bullet */

	.huyu-mega-column-3
	.huyu-mega-item > a::before {

		content: "";

		display:
			block;

		width:
			5px;

		height:
			5px;

		flex:
			0 0 5px;

		margin-right:
			10px;

		border-radius:
			50%;

		background:
			#adafb3;

		transition:
			background-color 0.15s ease;
	}


	/* ======================================================
	   Column 3 Hover
	   只改变文字颜色
	====================================================== */

	.huyu-mega-column-3
	.huyu-mega-item:hover > a {

		background:
			transparent !important;

		color:
			var(--mega-red-text) !important;
	}


	.huyu-mega-column-3
	.huyu-mega-item:hover > a::before {

		background:
			var(--mega-red-text);
	}


	/* ======================================================
	   8. ABOUT AREA
	   50%
	   White
	====================================================== */

	.huyu-mega-info {

		grid-column:
			4;

		background:
			#ffffff !important;

		padding:
			32px 42px 40px !important;

		border-left:
			1px solid var(--mega-border) !important;

		box-sizing:
			border-box !important;

		overflow-x:
			hidden !important;

		overflow-y:
			auto !important;

		scrollbar-width:
			thin;

		scrollbar-color:
			#bcbcc0
			transparent;
	}


	/* ======================================================
	   About Heading
	====================================================== */

	.huyu-mega-about-heading {

		position:
			relative;

		display:
			inline-block;

		margin:
			0 0 24px 0;

		padding-bottom:
			14px;

		font-size:
			21px;

		font-weight:
			700;

		line-height:
			1.25;

		color:
			#222428;

		text-align:
			left;
	}


	/* Black underline */

	.huyu-mega-about-heading::after {

		content: "";

		position:
			absolute;

		left:
			0;

		bottom:
			0;

		width:
			50%;

		height:
			2px;

		background:
			#222428;

		border-radius:
			5px;
	}


	/* ======================================================
	   About Description
	====================================================== */

	.huyu-mega-about-description {

		max-width:
			920px;

		margin:
			0 0 30px 0;

		font-size:
			16px;

		font-weight:
			400;

		line-height:
			1.7;

		color:
			#50545a;

		text-align:
			left;
	}


	/* ======================================================
	   9. Card Grid
	====================================================== */

	.huyu-mega-card-grid {

		display:
			grid;

		grid-template-columns:
			repeat(4, minmax(0, 1fr));

		column-gap:
			18px;

		row-gap:
			18px;

		width:
			100%;

		margin:
			0;

		padding:
			0;
	}


	/* ======================================================
	   Card
	====================================================== */

	.huyu-mega-card {

		display:
			flex;

		flex-direction:
			column;

		min-width:
			0;

		background:
			#ffffff;

		border-radius:
			9px;

		overflow:
			hidden;

		box-shadow:
			0 3px 12px rgba(0, 0, 0, 0.08),
			0 1px 3px rgba(0, 0, 0, 0.05);

		text-decoration:
			none !important;

		transform:
			translateY(0);

		transition:
			transform 0.18s ease,
			box-shadow 0.18s ease;
	}


	/* Card Hover */

	.huyu-mega-card:hover {

		transform:
			translateY(-3px);

		box-shadow:
			0 8px 22px rgba(0, 0, 0, 0.13),
			0 2px 5px rgba(0, 0, 0, 0.06);
	}


	/* ======================================================
	   10. Card Image
	   4:3
	====================================================== */

	.huyu-mega-card-image {

		position:
			relative;

		width:
			100%;

		aspect-ratio:
			4 / 3;

		overflow:
			hidden;

		background:
			#eeeeef;
	}


	.huyu-mega-card-image img {

		display:
			block;

		width:
			100%;

		height:
			100%;

		object-fit:
			cover;

		transition:
			transform 0.3s ease;
	}


	.huyu-mega-card:hover
	.huyu-mega-card-image img {

		transform:
			scale(1.035);
	}


	/* ======================================================
	   11. Card Title
	   Centered
	====================================================== */

	.huyu-mega-card-title {

		display:
			flex;

		align-items:
			center;

		justify-content:
			center;

		min-height:
			52px;

		padding:
			10px 10px;

		box-sizing:
			border-box;

		font-size:
			14px;

		font-weight:
			600;

		line-height:
			1.35;

		color:
			#33363a;

		text-align:
			center;

		transition:
			color 0.15s ease;
	}


	.huyu-mega-card:hover
	.huyu-mega-card-title {

		color:
			var(--mega-red-text);
	}


	/* ======================================================
	   12. Scrollbars
	====================================================== */

	.huyu-mega-column::-webkit-scrollbar,
	.huyu-mega-info::-webkit-scrollbar {

		width:
			5px;
	}


	.huyu-mega-column::-webkit-scrollbar-track,
	.huyu-mega-info::-webkit-scrollbar-track {

		background:
			transparent;
	}


	.huyu-mega-column-1::-webkit-scrollbar-thumb,
	.huyu-mega-column-2::-webkit-scrollbar-thumb {

		background:
			rgba(255, 255, 255, 0.28);

		border-radius:
			10px;
	}


	.huyu-mega-column-3::-webkit-scrollbar-thumb,
	.huyu-mega-info::-webkit-scrollbar-thumb {

		background:
			#bcbcc0;

		border-radius:
			10px;
	}


	/* ======================================================
	   13. 1366px - 1500px displays
	====================================================== */

	@media (max-width: 1500px) {

		.huyu-mega-info {

			padding-left:
				32px !important;

			padding-right:
				32px !important;
		}


		.huyu-mega-card-grid {

			column-gap:
				14px;

			row-gap:
				14px;
		}


		.huyu-mega-about-description {

			font-size:
				15px;
		}

	}


	/* ======================================================
	   14. Smaller Desktop
	====================================================== */

	@media (max-width: 1250px) {

		.huyu-mega-column-1 {

			padding-left:
				8px !important;

			padding-right:
				8px !important;
		}


		.huyu-mega-column-2 {

			padding-left:
				8px !important;

			padding-right:
				8px !important;
		}


		.huyu-mega-column-3 {

			padding-left:
				10px !important;

			padding-right:
				10px !important;
		}


		.huyu-mega-column-1
		.huyu-mega-item > a {

			font-size:
				14px !important;
		}


		.huyu-mega-column-2
		.huyu-mega-item > a {

			font-size:
				13px !important;
		}


		.huyu-mega-column-3
		.huyu-mega-item > a {

			font-size:
				13px !important;
		}


		.huyu-mega-info {

			padding:
				28px 24px 36px !important;
		}


		.huyu-mega-card-grid {

			column-gap:
				10px;

			row-gap:
				12px;
		}


		.huyu-mega-card-title {

			font-size:
				13px;
		}

	}

}


/* ==========================================================
   Mobile
   Continue using Blocksy mobile menu
========================================================== */

@media (max-width: 1023px) {

	.huyu-mega-panel {

		display:
			none !important;
	}

}