/**
 * Visaro header: collapse horizontal text nav below desktop width.
 *
 * Root cause of the clipped nav: .header-bottom stays visible from 768px
 * up, but the nowrap main menu overflows until ~1200px. The category
 * control (.vertical-menu-button) is already visible there, so tablet
 * showed a hamburger AND a clipped desktop nav row.
 *
 * Below 1200px: hide the text nav and the second hamburger, show
 * .ts-mobile-icon-toggle. That button opens #vertical-menu-sidebar
 * (header-nav.js) — the same panel as desktop.
 *
 * Do not reveal #group-icon-header. Parent responsive.css only styles
 * that list inside max-width: 767px (no bullets, hidden submenus, tab
 * pills). Showing the shell at 768–1199px paints the primary menu as an
 * unstyled list: black "Menu" bar, discs, red current item.
 */

@media (max-width: 1199px) {
	.header-bottom,
	.header-v2 .header-bottom {
		display: none !important;
	}

	/* No second-row reservation when nav is gone */
	header.ts-header {
		min-height: 0;
	}

	header.ts-header .header-middle {
		min-height: 60px;
	}

	/* Desktop category button. The burger opens the same sidebar. */
	.header-v2 .header-middle .vertical-menu-button {
		display: none !important;
	}

	.ts-header .ts-mobile-icon-toggle {
		width: 34px;
		display: inline-block !important;
	}

	#group-icon-header,
	#group-icon-header.active {
		display: none !important;
	}

	#vertical-menu-sidebar.active {
		display: block !important;
	}

	/* Same hamburger | logo | icons grid as phone */
	.header-v2 .header-middle > .container {
		display: grid;
		grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
		align-items: center;
		column-gap: 0;
	}

	.header-v2 .header-middle > .container > .ts-mobile-icon-toggle {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.header-v2 .header-middle > .container > .logo-wrapper {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		min-width: 0;
	}

	.header-v2 .header-middle > .container > .header-right {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		width: auto !important;
		max-width: 100%;
	}

	.header-middle div.header-right {
		gap: 2px;
		flex: 0 0 auto;
	}

	.header-middle div.header-right > * {
		margin: 0 !important;
		float: none !important;
	}

	/* Kill residual horizontal bleed from header chrome */
	.ts-header,
	.ts-header .header-container,
	.ts-header .header-sticky,
	.ts-header .header-bottom {
		max-width: 100%;
		overflow-x: clip;
	}
}

@media (min-width: 1200px) {
	/* Desktop: full text nav, no mobile toggle */
	.ts-header .ts-mobile-icon-toggle {
		display: none !important;
	}

	.header-bottom,
	.header-v2 .header-bottom {
		display: block;
	}

	#group-icon-header {
		display: none !important;
	}

	header.ts-header {
		min-height: 140px;
	}

	header.ts-header .header-middle {
		min-height: 90px;
	}

	.header-bottom {
		min-height: 50px;
	}

	.header-v2 .header-middle .vertical-menu-button,
	.header-v2 .header-middle .header-right {
		width: 25%;
	}
}