/**
 * Component: header and navigation
 *
 * Three tiers on desktop: announcement, masthead, navigation. On mobile the
 * navigation collapses into a drawer and the masthead reflows so search keeps
 * a full row.
 *
 * The mega panels open on hover AND on keyboard focus using CSS alone, so
 * navigation works without JavaScript. JavaScript adds explicit toggles and
 * Escape-to-close on top.
 */

.tcs-site-header {
	position: relative;
	z-index: var(--tcs-z-header);
	background: var(--tcs-surface);
	border-block-end: var(--tcs-border);
}

/* ---------------------------------------------------------------------- */
/* Announcement                                                            */
/* ---------------------------------------------------------------------- */

.tcs-announcement {
	background: var(--tcs-ink);
	color: var(--tcs-ink-inverse);
	font-size: var(--tcs-text-2xs);
	letter-spacing: 0.02em;
}

.tcs-announcement__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--tcs-space-xs) var(--tcs-space-lg);
	padding-block: var(--tcs-space-xs);
	margin: 0;
	list-style: none;
	text-align: center;
}

/* Separator between facts, never before the first. */
.tcs-announcement__item + .tcs-announcement__item {
	position: relative;
}

.tcs-announcement__item + .tcs-announcement__item::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--tcs-space-lg) / -2);
	inset-block-start: 50%;
	width: 1px;
	height: 0.85em;
	transform: translateY(-50%);
	background: currentColor;
	opacity: 0.3;
}

/* ---------------------------------------------------------------------- */
/* Masthead                                                                */
/* ---------------------------------------------------------------------- */

.tcs-masthead__inner {
	display: flex;
	align-items: center;
	gap: var(--tcs-space-md);
	padding-block: var(--tcs-space-md);
}

.tcs-wordmark {
	display: inline-block;
	font-family: var(--tcs-font-serif);
	font-size: var(--tcs-text-lg);
	font-weight: var(--tcs-weight-regular);
	letter-spacing: var(--tcs-tracking-tight);
	line-height: 1.1;
	color: var(--tcs-ink);
	text-decoration: none;
	white-space: nowrap;
}

.tcs-wordmark:hover {
	color: var(--tcs-accent);
}

.custom-logo-link { display: inline-block; }
.custom-logo { max-height: 56px; width: auto; }

.tcs-masthead__search {
	flex: 1;
	max-width: 34rem;
}

.tcs-masthead__actions {
	display: flex;
	align-items: center;
	gap: var(--tcs-space-2xs);
	margin-inline-start: auto;
}

.tcs-masthead__action {
	display: inline-flex;
	align-items: center;
	gap: var(--tcs-space-2xs);
	font-size: var(--tcs-text-sm);
	font-weight: var(--tcs-weight-medium);
	color: var(--tcs-ink);
	text-decoration: none;
	padding: var(--tcs-space-xs) var(--tcs-space-sm);
	min-height: 44px;
	border-radius: var(--tcs-radius);
	white-space: nowrap;
	transition: background-color var(--tcs-duration) var(--tcs-ease);
}

.tcs-masthead__action:hover {
	color: var(--tcs-accent);
	background: var(--tcs-paper-sunk);
}

.tcs-masthead__action svg { flex-shrink: 0; }

.tcs-cart-count {
	font-variant-numeric: tabular-nums;
	font-size: var(--tcs-text-2xs);
	font-weight: var(--tcs-weight-semibold);
	line-height: 1;
	background: var(--tcs-accent);
	color: var(--tcs-ink-inverse);
	border-radius: var(--tcs-radius-pill);
	padding: 0.28em 0.5em;
	min-width: 1.6em;
	text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Menu button - mobile only                                               */
/* ---------------------------------------------------------------------- */

.tcs-menu-button {
	display: none;
	align-items: center;
	gap: var(--tcs-space-2xs);
	font-size: var(--tcs-text-sm);
	font-weight: var(--tcs-weight-medium);
	color: var(--tcs-ink);
	padding: var(--tcs-space-xs);
	min-height: 44px;
	min-width: 44px;
	border-radius: var(--tcs-radius);
}

.tcs-menu-button:hover { background: var(--tcs-paper-sunk); }

/* Without JavaScript the drawer cannot open, so the trigger is not offered. */
.tcs-js .tcs-menu-button { display: none; }

/* ---------------------------------------------------------------------- */
/* Primary navigation                                                      */
/* ---------------------------------------------------------------------- */

/*
 * The nav is the positioning context for mega panels, not the individual
 * item. It spans the full viewport width, so a panel anchored to it with
 * left/right 0 is genuinely full-bleed. Anchoring to the item instead would
 * offset each panel by that item's position.
 */
.tcs-nav {
	position: relative;
	border-block-start: var(--tcs-border-faint);
}

.tcs-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--tcs-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Deliberately not positioned - see the note on .tcs-nav above. */
.tcs-nav__item {
	display: flex;
	align-items: center;
}

.tcs-nav__link {
	display: inline-flex;
	align-items: center;
	font-size: var(--tcs-text-sm);
	font-weight: var(--tcs-weight-medium);
	color: var(--tcs-ink);
	text-decoration: none;
	padding: var(--tcs-space-sm) var(--tcs-space-xs) var(--tcs-space-sm) var(--tcs-space-sm);
	white-space: nowrap;
	border-block-end: 2px solid transparent;
	transition: color var(--tcs-duration) var(--tcs-ease);
}

/* Items without a panel keep symmetrical padding. */
.tcs-nav__item:not(.tcs-nav__item--has-panel) .tcs-nav__link {
	padding-inline-end: var(--tcs-space-sm);
}

.tcs-nav__link:hover,
.tcs-nav__item.is-current > .tcs-nav__link {
	color: var(--tcs-accent);
}

.tcs-nav__item.is-current > .tcs-nav__link {
	border-block-end-color: var(--tcs-accent);
}

.tcs-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tcs-ink-faint);
	padding: var(--tcs-space-xs) var(--tcs-space-sm) var(--tcs-space-xs) 0;
	align-self: stretch;
}

.tcs-nav__toggle:hover { color: var(--tcs-accent); }

.tcs-nav__chevron {
	transition: transform var(--tcs-duration) var(--tcs-ease);
}

.tcs-nav__toggle[aria-expanded="true"] .tcs-nav__chevron {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------- */
/* Mega panel                                                              */
/* ---------------------------------------------------------------------- */

.tcs-mega {
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	z-index: var(--tcs-z-dropdown);

	background: var(--tcs-surface-raised);
	border-block: var(--tcs-border);
	box-shadow: var(--tcs-shadow-overlay);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition:
		opacity var(--tcs-duration) var(--tcs-ease),
		transform var(--tcs-duration) var(--tcs-ease),
		visibility var(--tcs-duration) var(--tcs-ease);
}

/*
 * A panel opens on hover, or when its toggle is expanded.
 */
.tcs-nav__item--has-panel:hover > .tcs-mega,
.tcs-nav__toggle[aria-expanded="true"] ~ .tcs-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/*
 * Keyboard access without JavaScript, where nothing can toggle aria-expanded.
 *
 * Scoped to the no-JS case on purpose: with JavaScript, :focus-within would
 * fight the toggle. Clicking the button leaves it focused, which would hold
 * the panel open and make it impossible to close by clicking again.
 */
html:not(.tcs-js) .tcs-nav__item--has-panel:focus-within > .tcs-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tcs-mega__inner {
	max-width: var(--tcs-container);
	margin-inline: auto;
	padding: var(--tcs-space-xl) var(--tcs-gutter);
}

.tcs-mega__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--tcs-space-lg) var(--tcs-space-xl);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcs-mega__column {
	min-width: 0;
}

.tcs-mega__heading {
	display: block;
	font-family: var(--tcs-font-sans);
	font-size: var(--tcs-text-2xs);
	font-weight: var(--tcs-weight-semibold);
	letter-spacing: var(--tcs-tracking-label);
	text-transform: uppercase;
	color: var(--tcs-ink-faint);
	text-decoration: none;
	padding-block-end: var(--tcs-space-xs);
	margin-block-end: var(--tcs-space-xs);
	border-block-end: var(--tcs-border-faint);
	transition: color var(--tcs-duration) var(--tcs-ease);
}

.tcs-mega__heading:hover {
	color: var(--tcs-accent);
}

.tcs-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tcs-space-3xs);
}

.tcs-mega__link {
	display: block;
	font-size: var(--tcs-text-sm);
	color: var(--tcs-ink-muted);
	text-decoration: none;
	padding-block: var(--tcs-space-2xs);
	border-radius: var(--tcs-radius-sm);
	transition: color var(--tcs-duration) var(--tcs-ease);
}

.tcs-mega__link:hover {
	color: var(--tcs-accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* A column with no children still reads as a destination. */
.tcs-mega__column:not(:has(.tcs-mega__list)) .tcs-mega__heading {
	border-block-end: 0;
	margin-block-end: 0;
	font-size: var(--tcs-text-sm);
	font-weight: var(--tcs-weight-medium);
	letter-spacing: var(--tcs-tracking-normal);
	text-transform: none;
	color: var(--tcs-ink);
}

/* ---------------------------------------------------------------------- */
/* Drawer                                                                  */
/* ---------------------------------------------------------------------- */

.tcs-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--tcs-z-modal);
}

.tcs-drawer[hidden] { display: none; }

.tcs-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(var(--tcs-scrim-rgb), 0.45);
	opacity: 0;
	transition: opacity var(--tcs-duration) var(--tcs-ease);
}

.tcs-drawer.is-open .tcs-drawer__scrim { opacity: 1; }

.tcs-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(22rem, 88vw);
	display: flex;
	flex-direction: column;
	background: var(--tcs-surface);
	box-shadow: var(--tcs-shadow-overlay);
	transform: translateX(-100%);
	transition: transform var(--tcs-duration-slow) var(--tcs-ease);
}

.tcs-drawer.is-open .tcs-drawer__panel { transform: translateX(0); }

.tcs-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tcs-space-md);
	padding: var(--tcs-space-md);
	border-block-end: var(--tcs-border);
}

.tcs-drawer__title {
	font-family: var(--tcs-font-sans);
	font-size: var(--tcs-text-2xs);
	font-weight: var(--tcs-weight-semibold);
	letter-spacing: var(--tcs-tracking-label);
	text-transform: uppercase;
	color: var(--tcs-ink-faint);
}

.tcs-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -10px;
	color: var(--tcs-ink);
	border-radius: var(--tcs-radius);
}

.tcs-drawer__close:hover { background: var(--tcs-paper-sunk); }

.tcs-drawer__search {
	padding: var(--tcs-space-md);
	border-block-end: var(--tcs-border-faint);
}

.tcs-drawer__body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding-block: var(--tcs-space-xs);
}

.tcs-drawer__list,
.tcs-drawer__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcs-drawer__row {
	display: flex;
	align-items: stretch;
	border-block-end: var(--tcs-border-faint);
}

.tcs-drawer__link {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	font-size: var(--tcs-text-base);
	font-weight: var(--tcs-weight-medium);
	color: var(--tcs-ink);
	text-decoration: none;
	padding: var(--tcs-space-sm) var(--tcs-space-md);
	min-height: 48px;
}

.tcs-drawer__link:hover { background: var(--tcs-paper-sunk); }

.tcs-drawer__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	flex-shrink: 0;
	color: var(--tcs-ink-faint);
	border-inline-start: var(--tcs-border-faint);
}

.tcs-drawer__toggle:hover {
	background: var(--tcs-paper-sunk);
	color: var(--tcs-accent);
}

.tcs-drawer__toggle svg { transition: transform var(--tcs-duration) var(--tcs-ease); }

/* Plus becomes minus when open. */
.tcs-drawer__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }

.tcs-drawer__sublist {
	background: var(--tcs-paper-sunk);
}

.tcs-drawer__sublist[hidden] { display: none; }

.tcs-drawer__item--depth-1 .tcs-drawer__link {
	font-size: var(--tcs-text-sm);
	font-weight: var(--tcs-weight-regular);
	color: var(--tcs-ink-muted);
	padding-inline-start: var(--tcs-space-lg);
	min-height: 44px;
}

.tcs-drawer__item--depth-2 .tcs-drawer__link {
	padding-inline-start: var(--tcs-space-2xl);
	font-size: var(--tcs-text-sm);
}

.tcs-drawer__foot {
	padding: var(--tcs-space-md);
	border-block-start: var(--tcs-border);
	background: var(--tcs-paper-sunk);
}

.tcs-drawer__account {
	display: block;
	font-size: var(--tcs-text-sm);
	font-weight: var(--tcs-weight-medium);
	color: var(--tcs-accent);
	text-decoration: none;
	padding-block: var(--tcs-space-xs);
	min-height: 44px;
	display: flex;
	align-items: center;
}

.tcs-drawer__facts {
	list-style: none;
	margin: var(--tcs-space-xs) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tcs-space-3xs);
	font-size: var(--tcs-text-2xs);
	color: var(--tcs-ink-faint);
}

/* Lock background scroll while the drawer is open. */
body.tcs-drawer-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Breakpoints                                                             */
/* ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.tcs-masthead__action-label { display: none; }

	.tcs-masthead__action {
		padding-inline: var(--tcs-space-xs);
	}
}

@media (max-width: 900px) {
	/* Navigation moves into the drawer. */
	.tcs-js .tcs-nav { display: none; }
	.tcs-js .tcs-menu-button { display: inline-flex; }

	/*
	 * Without JavaScript the drawer cannot open, so the nav stays inline as a
	 * horizontally scrollable row. Panels are flattened - a mega panel has no
	 * room here and no way to close.
	 */
	.tcs-nav__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.tcs-nav__list::-webkit-scrollbar { display: none; }
	.tcs-nav__toggle { display: none; }
	.tcs-mega { display: none; }

	.tcs-masthead__inner {
		flex-wrap: wrap;
		gap: var(--tcs-space-sm);
	}

	.tcs-masthead__brand { margin-inline-end: auto; }

	/*
	 * Search takes its own full-width row. It is the primary route into a
	 * catalogue this size and must not be reduced to an icon.
	 */
	.tcs-masthead__search {
		order: 10;
		flex-basis: 100%;
		max-width: none;
	}

	.tcs-menu-button__label { display: none; }
}

@media (max-width: 480px) {
	.tcs-wordmark { font-size: var(--tcs-text-base); }
}

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                          */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tcs-drawer__panel,
	.tcs-drawer__scrim,
	.tcs-mega {
		transition: none;
	}
}

/* ---------------------------------------------------------------------- */
/* Print                                                                   */
/* ---------------------------------------------------------------------- */

@media print {
	.tcs-announcement,
	.tcs-nav,
	.tcs-drawer,
	.tcs-menu-button,
	.tcs-masthead__actions,
	.tcs-masthead__search {
		display: none;
	}
}