/*
 * Desktop two-level product category menu.
 * The Header Builder Categories element is hidden below 1025px, so these
 * rules do not alter the separate mobile navigation.
 */

@media (min-width: 1025px) {
	.wd-header-cats .wd-dropdown-cats:has(.ds-cat-menu) {
		width: min(1120px, calc(100vw - 30px));
	}

	.wd-header-cats .categories-menu-dropdown > .ds-cat-menu {
		width: 100%;
	}

	.ds-cat-menu__layout {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		height: 460px;
		background: #fff;
	}

	.ds-cat-menu__parents {
		margin: 0;
		padding: 8px 0;
		list-style: none;
		border-right: 1px solid #ececec;
		background: #fff;
	}

	.ds-cat-menu__parent {
		margin: 0;
	}

	.ds-cat-menu__parent > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 18px;
		color: #333;
		font-weight: 600;
		font-size: 14px;
		line-height: 1.25;
		transition: background-color .2s ease, color .2s ease;
	}

	.ds-cat-menu__parent-label {
		display: flex;
		align-items: center;
		min-width: 0;
		gap: 10px;
	}

	.ds-cat-menu__parent-icon {
		display: inline-flex;
		flex: 0 0 22px;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		overflow: hidden;
		border-radius: 3px;
		background: #f4f4f4;
	}

	.ds-cat-menu__parent-icon img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ds-cat-menu__parent-arrow {
		color: #9a9a9a;
		font-size: 20px;
		line-height: 10px;
	}

	.ds-cat-menu__parent:hover > a,
	.ds-cat-menu__parent.is-active > a,
	.ds-cat-menu__parent > a:focus-visible {
		background: #f4f7fb;
		color: var(--wd-primary-color);
		outline: 0;
	}

	.ds-cat-menu__panels {
		min-width: 0;
		padding: 0;
	}

	.ds-cat-menu__panel {
		display: none;
		grid-template-columns: 190px minmax(0, 1fr);
		height: 100%;
	}

	.ds-cat-menu__panel.is-active {
		display: grid;
	}

	.ds-cat-menu__children {
		margin: 0;
		padding: 12px 0;
		list-style: none;
		border-right: 1px solid #ececec;
		background: #fcfcfc;
	}

	.ds-cat-menu__child {
		margin: 0;
	}

	.ds-cat-menu__child > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 10px 18px;
		color: #444;
		font-weight: 600;
		font-size: 14px;
		line-height: 1.3;
		transition: color .2s ease, background-color .2s ease;
	}

	.ds-cat-menu__child > a > span {
		color: #aaa;
		font-size: 18px;
	}

	.ds-cat-menu__child:hover > a,
	.ds-cat-menu__child.is-active > a,
	.ds-cat-menu__child > a:focus-visible {
		background: #f1f4f8;
		color: var(--wd-primary-color);
		outline: 0;
	}

	.ds-cat-menu__product-panels {
		min-width: 0;
		padding: 24px 28px;
	}

	.ds-cat-menu__product-panel {
		display: none;
	}

	.ds-cat-menu__product-panel.is-active {
		display: block;
	}

	.ds-cat-menu__product-heading {
		display: flex;
		align-items: baseline;
		gap: 15px;
		margin-bottom: 18px;
	}

	.ds-cat-menu__product-category {
		color: #242424;
		font-weight: 700;
		font-size: 16px;
		line-height: 1.3;
	}

	.ds-cat-menu__view-all {
		color: var(--wd-primary-color);
		font-weight: 600;
		font-size: 12px;
		line-height: 1.3;
	}

	.ds-cat-menu__view-all span {
		margin-left: 3px;
		font-size: 16px;
	}

	.ds-cat-menu__products {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}

	.ds-cat-menu__product {
		display: block;
		min-width: 0;
		color: #555;
		font-size: 12px;
		line-height: 1.35;
	}

	.ds-cat-menu__product-image {
		display: block;
		overflow: hidden;
		margin-bottom: 6px;
		background: #f7f7f7;
		aspect-ratio: 1 / 1;
	}

	.ds-cat-menu__product-image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .25s ease;
	}

	.ds-cat-menu__product:hover .ds-cat-menu__product-image img {
		transform: scale(1.04);
	}

	.ds-cat-menu__product-name {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	@media (max-width: 1280px) {
		.ds-cat-menu__layout {
			grid-template-columns: 200px minmax(0, 1fr);
		}

		.ds-cat-menu__panels {
			padding: 0;
		}

		.ds-cat-menu__panel {
			grid-template-columns: 170px minmax(0, 1fr);
		}

		.ds-cat-menu__product-panels {
			padding: 20px;
		}

	}
}