/**
 * Header product catalog.
 *
 * Blocksy continues to control the header builder and ordinary menu links.
 * WooCommerce categories only receive the dynamic desktop panel and mobile
 * two-column catalog presentation defined here.
 */

.ct-header [data-id="logo"] .site-title-container {
	display: none;
}

@media (min-width: 1000px) {
	.ct-header [data-device="desktop"] [data-row="middle"] [data-column="start"] {
		flex-shrink: 0;
	}

	.ct-header [data-device="desktop"] [data-row="middle"] [data-column="end"] {
		min-width: 0;
	}

	html.hope-star-compact-nav #header [data-device="desktop"] {
		display: none !important;
	}

	html.hope-star-compact-nav #header [data-device="mobile"] {
		display: block !important;
	}

	html.hope-star-compact-nav #header [data-device="mobile"][data-transparent] {
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
	}

	html.hope-star-compact-nav #offcanvas .ct-panel-content[data-device="desktop"] {
		display: none !important;
	}

	html.hope-star-compact-nav #offcanvas.active .ct-panel-content[data-device="mobile"] {
		display: flex !important;
	}

	.ct-header [data-device="desktop"] [data-row="middle"] .ct-container {
		position: relative;
	}

	.ct-header [data-device="desktop"] nav.menu-container,
	.ct-header [data-device="desktop"] nav.menu-container > ul.menu,
	.ct-header [data-device="desktop"] .hope-star-catalog-category {
		position: static;
	}

	.ct-header [data-device="desktop"] nav.menu-container[data-responsive="no"],
	.ct-header [data-device="desktop"] nav.menu-container[data-id="menu"]:not([data-responsive]),
	.ct-header [data-device="desktop"] nav.menu-container[data-id="menu-secondary"]:not([data-responsive]) {
		overflow: visible !important;
	}

	.ct-header [data-device="desktop"] nav.menu-container > ul.menu > li > a,
	.ct-header [data-device="desktop"] nav.menu-container > ul.menu > li > .ct-sub-menu-parent > a {
		padding-inline: clamp(6px, 0.7vw, 11px);
		white-space: nowrap;
	}

	.ct-header [data-device="desktop"] nav.menu-container[data-menu="type-2:center"] > ul.menu > li.menu-item-home:hover > a,
	.ct-header [data-device="desktop"] nav.menu-container[data-menu="type-2:center"] > ul.menu > li.menu-item-home[class*="current-menu-"] > a {
		--menu-indicator-width: 32px;
	}

	.ct-header [data-device="desktop"] .hope-star-catalog-category > .hope-star-catalog {
		display: block !important;
		position: absolute !important;
		z-index: 50;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		min-width: 0 !important;
		max-height: min(600px, calc(100vh - 130px));
		margin: 0 !important;
		padding: 0 !important;
		overflow: auto;
		background: #fff !important;
		border: 1px solid var(--theme-border-color, #d9dadc);
		border-top: 2px solid var(--theme-palette-color-1);
		border-radius: 0 0 2px 2px !important;
		box-shadow: 0 18px 38px rgba(41, 51, 61, 0.12) !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(10px) !important;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
	}

	.ct-header [data-device="desktop"] .hope-star-catalog-category:hover > .hope-star-catalog,
	.ct-header [data-device="desktop"] .hope-star-catalog-category:focus-within > .hope-star-catalog,
	.ct-header [data-device="desktop"] .hope-star-catalog-category.ct-active > .hope-star-catalog {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0) !important;
	}

	.ct-header [data-device="desktop"] .hope-star-catalog-category.is-catalog-dismissed > .hope-star-catalog {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(10px) !important;
	}

	.hope-star-catalog > .hope-star-catalog__menu-item {
		display: block;
		padding: 0;
		border: 0;
	}

	.hope-star-catalog__content {
		padding: 30px 36px 40px;
		background: #fff;
	}

	.hope-star-catalog__title {
		margin-bottom: 26px;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.3;
	}

	.hope-star-catalog__title a,
	.hope-star-catalog__panel-heading a {
		color: var(--theme-palette-color-4, #131117) !important;
	}

	.hope-star-catalog__title a:hover,
	.hope-star-catalog__title a:focus-visible,
	.hope-star-catalog__panel-heading a:hover,
	.hope-star-catalog__panel-heading a:focus-visible {
		color: var(--theme-palette-color-1) !important;
	}

	.hope-star-catalog__groups {
		display: grid;
		grid-template-columns: 190px minmax(0, 1fr);
		gap: 32px;
		min-height: 210px;
	}

	.hope-star-catalog__subcategories {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hope-star-catalog__subcategory {
		display: block;
		padding: 9px 12px 9px 18px;
		color: var(--theme-palette-color-3, #5f6268) !important;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.35;
		text-decoration: none;
	}

	.hope-star-catalog__subcategory:hover,
	.hope-star-catalog__subcategory:focus-visible,
	.hope-star-catalog__subcategory.is-active {
		color: var(--theme-palette-color-1) !important;
		background-image: radial-gradient(circle at 7px 50%, currentColor 0 2px, transparent 2.5px);
	}

	.hope-star-catalog__panels {
		min-width: 0;
		padding-top: 2px;
	}

	.hope-star-catalog__group {
		display: none;
	}

	.hope-star-catalog__group.is-active {
		display: block;
	}

	.hope-star-catalog__panel-heading {
		display: none;
	}

	.hope-star-catalog__grid {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 18px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hope-star-catalog__grid-item a,
	.hope-star-catalog__empty-link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 74px;
		padding: 9px 14px;
		color: var(--theme-palette-color-4, #131117) !important;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.35;
		text-align: center;
		text-decoration: none;
		background: #fff;
		border: 1px solid var(--theme-border-color, #cfd1d4);
		border-radius: 2px;
	}

	.hope-star-catalog__grid-item a:hover,
	.hope-star-catalog__grid-item a:focus-visible,
	.hope-star-catalog__empty-link:hover,
	.hope-star-catalog__empty-link:focus-visible {
		color: var(--theme-palette-color-1) !important;
		border-color: var(--theme-palette-color-1);
	}
}

	/* 抽屉也会在桌面窄屏启用，因此其布局不再绑定固定视口宽度。 */
	#offcanvas .ct-panel-content-inner {
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
	}

	.mobile-menu {
		height: calc(100vh - 76px);
		height: calc(100dvh - 76px);
		min-height: 520px;
	}

	.mobile-menu > ul {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: #fff;
	}

	.mobile-menu > ul::after {
		position: absolute;
		z-index: 2;
		top: 0;
		bottom: 0;
		left: 44%;
		width: 1px;
		background: var(--theme-border-color, #d9dadc);
		content: "";
		pointer-events: none;
	}

	.mobile-menu > ul > li {
		position: static;
		flex: 0 0 auto;
		width: 44%;
		margin: 0 !important;
		padding: 0;
	}

	.mobile-menu > ul > .hope-star-catalog-category {
		order: 1;
	}

	.mobile-menu > ul > .hope-star-mobile-site-link {
		order: 2;
	}

	.mobile-menu > ul > .hope-star-mobile-home-link {
		order: 0;
	}

	.mobile-menu > ul > .hope-star-catalog-category + .hope-star-mobile-site-link {
		margin-top: 6px !important;
		padding-top: 6px;
		border-top: 1px solid var(--theme-border-color, #d9dadc);
	}

	.mobile-menu > ul > li > a,
	.mobile-menu > ul > li > .ct-sub-menu-parent {
		width: 100%;
		min-height: 49px;
		padding: 0 10px !important;
	}

	.mobile-menu > ul > li > a,
	.mobile-menu > ul > li > .ct-sub-menu-parent > a {
		display: flex;
		align-items: center;
		min-height: 49px;
		padding: 0;
		color: var(--theme-palette-color-4, #131117) !important;
		font-size: var(--theme-font-size, 16px);
		font-weight: 700;
		line-height: 1.3;
	}

	.mobile-menu > ul > .hope-star-catalog-category > .ct-sub-menu-parent > a,
	.mobile-menu > ul > .hope-star-mobile-site-link > a {
		justify-content: flex-start;
		text-align: left;
	}

	.mobile-menu .hope-star-catalog-category > .ct-sub-menu-parent {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 28px;
		align-items: center;
	}

	.mobile-menu .hope-star-catalog-category > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile {
		display: flex;
		width: 28px;
		height: 40px;
		min-width: 0;
		padding: 0;
		justify-content: center;
		color: var(--theme-palette-color-4, #131117) !important;
	}

	.mobile-menu .hope-star-catalog-category.is-mobile-active > .ct-sub-menu-parent > a {
		color: var(--theme-palette-color-1) !important;
	}

	.mobile-menu .hope-star-catalog-category > .ct-sub-menu-parent .toggle-icon-1 {
		display: block !important;
		transform: rotate(-90deg);
	}

	.mobile-menu .hope-star-catalog-category > .ct-sub-menu-parent .toggle-icon-1 path {
		fill: currentColor;
	}

	.mobile-menu .hope-star-catalog-category.is-mobile-active > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile {
		color: var(--theme-palette-color-1) !important;
	}

	.mobile-menu .hope-star-catalog {
		display: none !important;
		position: absolute !important;
		z-index: 1;
		top: 0 !important;
		right: 0 !important;
		left: 44% !important;
		width: 56% !important;
		height: 100%;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		background: #fff !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	.mobile-menu .hope-star-catalog-category.is-mobile-active > .hope-star-catalog {
		display: block !important;
	}

	.mobile-menu .hope-star-catalog > .hope-star-catalog__menu-item {
		display: block;
		padding: 0;
		border: 0;
	}

	.mobile-menu .hope-star-catalog__content {
		padding: 13px 14px 34px;
	}

	.mobile-menu .hope-star-catalog__title {
		margin-bottom: 24px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.35;
	}

	.mobile-menu .hope-star-catalog__title a {
		color: var(--theme-palette-color-4, #131117);
	}

	.mobile-menu .hope-star-catalog__subcategories {
		display: none;
	}

	.mobile-menu .hope-star-catalog__group + .hope-star-catalog__group {
		margin-top: 28px;
	}

	.mobile-menu .hope-star-catalog__panel-heading {
		margin-bottom: 13px;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.4;
	}

	.mobile-menu .hope-star-catalog__panel-heading a {
		color: var(--theme-palette-color-3, #696c72);
	}

	.mobile-menu .hope-star-catalog__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mobile-menu .hope-star-catalog__grid-item a,
	.mobile-menu .hope-star-catalog__empty-link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		padding: 7px 5px;
		color: var(--theme-palette-color-4, #131117);
		font-size: 11px;
		font-weight: 600;
		line-height: 1.3;
		text-align: center;
		text-decoration: none;
		background: #fff;
		border: 1px solid #aaaeb3;
		border-radius: 2px;
	}

@media (max-width: 374.98px) {
	.mobile-menu > ul::after,
	.mobile-menu .hope-star-catalog {
		left: 43% !important;
	}

	.mobile-menu > ul > li {
		width: 43%;
	}

	.mobile-menu .hope-star-catalog {
		width: 57% !important;
	}

	.mobile-menu .hope-star-catalog__content {
		padding-inline: 10px;
	}
}