/*
 * Header and navigation.
 *
 * Six layouts ship as template parts; pick one in the Site Editor under Patterns >
 * Template parts. The classes below are the contract between those parts and
 * this stylesheet.
 */

/* Three zones: brand left, navigation centered, actions right. */
.takt-header__bar {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	max-width: 100%;
	min-width: 0;
	width: 100%;
}
.takt-header { box-sizing: border-box; }
/* The bar is a flow group in the editor, so WordPress adds block-gap margins to
   the 2nd and 3rd zone; those would push menu and actions off the logo's centre line. */
.takt-header .takt-header__bar > * { margin-block: 0; }
/* The navigation sits after the actions in the DOM so the tab order follows the
   visible order on a phone, where the burger is the outermost control. On the
   desktop the grid puts it back in the middle. */
/* The row has to be explicit as well: auto placement never moves back to an
   earlier column, so the navigation would start a second row. */
.takt-header__brand { grid-area: 1 / 1; justify-self: start; }
.takt-header__nav { grid-area: 1 / 2; justify-self: center; }
.takt-header__actions { grid-area: 1 / 3; justify-self: end; }

/* Layout: brand centered on the first row, menu centered beneath. */
.takt-header__bar.takt-header__bar--centered {
	grid-template-areas: "left brand actions" "nav nav nav";
	row-gap: var(--wp--preset--spacing--20);
}
.takt-header__bar--centered .takt-header__brand { grid-area: brand; justify-self: center; }
.takt-header__bar--centered .takt-header__nav { grid-area: nav; justify-self: center; }
.takt-header__bar--centered .takt-header__actions { grid-area: actions; justify-self: end; }

/* Layout: brand left on the first row, menu on its own row beneath. */
.takt-header__bar.takt-header__bar--stacked {
	grid-template-columns: 1fr auto;
	grid-template-areas: "brand actions" "nav nav";
	row-gap: var(--wp--preset--spacing--20);
}
.takt-header__bar--stacked .takt-header__brand { grid-area: brand; justify-self: start; }
.takt-header__bar--stacked .takt-header__nav { grid-area: nav; justify-self: start; }
.takt-header__bar--stacked .takt-header__actions { grid-area: actions; justify-self: end; }

/* Below 1024px the menu collapses to the overlay (burger) and the bar becomes
   logo | burger | actions. WordPress only collapses at 600px, so the theme
   extends that window: 600-1023px shows the burger and hides the inline menu. */
@media (max-width: 1023px) {
	/* One flex row instead of the three-zone grid: brand pushes everything else
	   to the far edge, and the burger is the outermost control. It is the one
	   thing a thumb reaches for, so nothing sits between it and the edge. */
	.takt-header__bar,
	.takt-header__bar--centered,
	.takt-header__bar--stacked {
		display: flex;
		position: relative;
		align-items: center;
		gap: 0.25rem;
		grid-template-columns: none;
		grid-template-areas: none;
	}
	.takt-header__bar .takt-header__brand,
	.takt-header__bar .takt-header__nav,
	.takt-header__bar .takt-header__actions { grid-area: auto; justify-self: auto; }
	.takt-header__brand { margin-right: auto; min-width: 0; }
	.takt-header__actions { gap: 0.25rem; }
	/* Keep the search trigger's slot when the native search input expands.
	   The field opens below the bar instead of squeezing the logo and menu. */
	.takt-header__search.wp-block-search__button-only {
		flex: 0 0 2.75rem;
		width: 2.75rem;
	}
	.takt-header__search.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		position: absolute;
		inset-inline: 0;
		top: calc(100% + var(--wp--preset--spacing--20));
		z-index: 1;
		width: auto;
		padding: 0.5rem;
		border: 1px solid var(--wp--preset--color--secondary);
		border-radius: var(--wp--custom--radius--small);
		background: var(--wp--preset--color--base);
	}
	.takt-header__search .wp-block-search__input { min-width: 0; }
	.takt-header__search .wp-block-search__button { min-width: 2.75rem; min-height: 2.75rem; }
	.takt-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.takt-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.takt-header__cta.wp-block-buttons { display: none; }
	/* Every control in the bar is a 44px target. */
	.takt-header__nav .wp-block-navigation__responsive-container-open,
	.takt-header__actions .takt-scheme-toggle__button,
	.takt-header__actions .wc-block-mini-cart__button {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
	}
	/* This template part deliberately uses Navigation's native "Never" overlay
	   option. Keep its menu visible on a second row instead of forcing every
	   site into a hamburger at the theme breakpoint. */
	.takt-header__bar.takt-header__bar--inline {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "brand actions" "nav nav";
		column-gap: var(--wp--preset--spacing--30);
		row-gap: var(--wp--preset--spacing--20);
	}
	.takt-header__bar--inline .takt-header__brand { grid-area: brand; }
	.takt-header__bar--inline .takt-header__actions { grid-area: actions; }
	.takt-header__bar--inline .takt-header__nav {
		grid-area: nav;
		justify-self: stretch;
		width: 100%;
	}
	.takt-header__bar--inline .wp-block-navigation__container {
		justify-content: flex-start;
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--20);
	}
}

/* A desktop menu can be wider than its nominal breakpoint when a site has many
   or long routes. ui.js detects an actual collision and gives it the same
   deliberate overlay treatment instead of squeezing the brand or wrapping. */
@media (min-width: 1024px) {
	/* Let collision detection see the real width instead of a wordmark or
	   menu label silently wrapping to fit a squeezed grid track. A Navigation
	   with "Never" overlay retains its deliberately wrapping native layout. */
	body:not(.takt-design-0-5) .takt-header__nav:has(.wp-block-navigation__responsive-container-open) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	body:not(.takt-design-0-5) .takt-header:not(.is-nav-condensed):has(.wp-block-navigation__responsive-container-open) .takt-header__brand .wp-block-site-title {
		white-space: nowrap;
	}
	.takt-header.is-nav-condensed .takt-header__bar,
	.takt-header.is-nav-condensed .takt-header__bar--centered,
	.takt-header.is-nav-condensed .takt-header__bar--stacked {
		display: flex;
		position: relative;
		align-items: center;
		gap: 0.5rem;
		grid-template-columns: none;
		grid-template-areas: none;
	}
	.takt-header.is-nav-condensed .takt-header__brand,
	.takt-header.is-nav-condensed .takt-header__nav,
	.takt-header.is-nav-condensed .takt-header__actions {
		grid-area: auto;
		justify-self: auto;
	}
	.takt-header.is-nav-condensed .takt-header__brand {
		min-width: 0;
		margin-right: auto;
	}
	.takt-header.is-nav-condensed .takt-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
	}
	.takt-header.is-nav-condensed .takt-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.takt-header.is-nav-condensed .takt-header__cta.wp-block-buttons {
		display: none;
	}
}
/* The submenu toggle ships at 12x12px, under the 24px minimum of SC 2.5.8, and
   it sits flush against its menu item, so the "sufficient spacing" exception
   does not apply. */
.wp-block-navigation .wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	min-height: 1.5rem;
}

/* One focus ring for the theme's own controls instead of the browser default,
   which is weaker in Safari and Firefox. currentColor is safe here: these are
   links and icon buttons that take their color from the surface they sit on. */
.takt-header button:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible,
.wp-block-navigation__submenu-icon:focus-visible,
.wp-block-details summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
/* Core moves focus to the first link when the overlay opens. A pointer opening
   should not paint a selection box, while keyboard focus stays visible. */
.takt-header .wp-block-navigation .wp-block-navigation-item__content:focus:not(:focus-visible) {
	outline: none;
}
.takt-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	outline: none;
	box-shadow: inset 0 -2px 0 currentColor;
}
/* The inset focus indicator replaces the decorative hover line. Showing both
   would draw two strokes when Escape returns focus to a submenu button. */
.takt-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible::after {
	display: none;
}
.takt-header .wp-block-navigation .wp-block-navigation-item__content,
.takt-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	box-shadow: inset 3px 0 0 currentColor;
}

/* Forced colors suppress box shadows. Keep the keyboard focus visible inside
   each link without clipping it at the edge of a scrollable menu. */
@media (forced-colors: active) {
	.takt-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -2px;
	}
}

/* Menu items that only belong in the overlay (e.g. a "Contact" entry that is a button on desktop). */
@media (min-width: 1024px) {
	.wp-block-navigation-item.takt-overlay-only { display: none; }
}

/* Logo height, compact call-to-action, nothing wraps. */
.takt-header .wp-block-site-logo img {
	height: auto;
	max-height: 4.5rem;
	width: auto;
}
.takt-header .wp-block-navigation__responsive-container-open { padding: 0.4rem; }
/* Compact menu is optional on the native Navigation block. Keep the Core
   trigger and accessible label; only its visual icon changes. */
.takt-header__nav:is(.is-style-takt-compact-menu, .is-style-takt-panel-menu) .wp-block-navigation__responsive-container-open > svg { display: none; }
.takt-header__nav:is(.is-style-takt-compact-menu, .is-style-takt-panel-menu) .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}
.takt-header__cta .wp-block-button__link {
	padding: 0.5rem 1rem;
	font-size: 1.05rem;
	line-height: 1.2;
	white-space: nowrap;
}

/* Optional navigation styles. Saved headers keep their existing presentation;
   these rules apply only after the site owner chooses the corresponding style.
   Panels use Core's disclosure state and keep deeper levels inside the panel,
   so a third level cannot open a flyout beyond the viewport. */
.takt-header:has(.takt-header__nav.is-style-takt-panel-menu) { position: relative; }
.takt-header__bar:has(.takt-header__nav.is-style-takt-panel-menu),
.takt-header__nav.is-style-takt-panel-menu { position: static; }
@media (min-width: 1024px) {
	.takt-header__nav.is-style-takt-panel-menu {
		justify-self: stretch;
	}
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open),
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container-content, .wp-block-navigation__container),
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child {
		position: static;
	}
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		gap: 0.375rem 1rem;
		inset-inline: 0;
		top: 100%;
		width: calc(100% - var(--wp--preset--spacing--40) - var(--wp--preset--spacing--40));
		min-width: 0;
		max-width: 48rem;
		max-height: min(34rem, var(--takt-panel-available-height, calc(100dvh - var(--takt-header-h))));
		margin-inline: auto;
		padding: 1rem;
		border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
		border-radius: 0.75rem;
		box-shadow: 0 12px 28px -16px rgb(0 0 0 / 35%);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	/* The default Core surface follows its own palette, including the dark
	   palette restored inside transparent headers. Keep text fully opaque and
	   leave custom-colored submenu surfaces under their author's control. */
	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container.has-base-background-color {
			background-color: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent) !important;
			-webkit-backdrop-filter: saturate(125%) blur(12px);
			backdrop-filter: saturate(125%) blur(12px);
		}
		/* Core inherits the submenu background onto its items. Two translucent
		   layers would become almost opaque, so only the panel owns the surface. */
		.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container.has-base-background-color :is(.wp-block-navigation-item, .wp-block-navigation__submenu-container) {
			background-color: transparent;
		}
	}
	@media (prefers-reduced-transparency: reduce) {
		.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container.has-base-background-color {
			background-color: var(--wp--preset--color--base) !important;
			-webkit-backdrop-filter: none;
			backdrop-filter: none;
		}
	}
	/* Small menus need a compact list; longer menus share a bounded, balanced
	   two-column panel. The header remains the anchor in every native layout. */
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:first-child:nth-last-child(-n + 2)) {
		grid-template-columns: minmax(0, 1fr);
		max-width: 28rem;
	}
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item {
		flex-wrap: wrap;
		align-items: stretch;
		min-width: 0;
	}
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		flex: 1 1 0%;
		min-width: 0;
	}
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		flex: 0 0 2.75rem;
		min-width: 2.75rem;
		min-height: 2.75rem;
		margin: 0;
	}
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static;
		flex-basis: 100%;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-inline-start: 2px solid color-mix(in srgb, currentColor 18%, transparent);
		box-shadow: none;
	}
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
		width: 0.875rem;
		height: 0.875rem;
		transform: none;
	}
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon svg,
	.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}
	/* Top-level pills keep the site's saved text color, including transparent
	   headers. Submenus and the mobile overlay retain their native structure. */
	.takt-header__nav.is-style-takt-pill-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0.6rem 1rem;
		border-radius: 999px;
		line-height: 1.2;
	}
	.takt-header__nav.is-style-takt-pill-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		display: none;
	}
	.takt-header__nav.is-style-takt-pill-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent) > .wp-block-navigation-item__content,
	.takt-header__nav.is-style-takt-pill-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background: color-mix(in srgb, currentColor 12%, transparent);
	}
	.takt-header__nav.is-style-takt-pill-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
		box-shadow: none;
	}
}

/* WooCommerce mini cart in the header: same weight as the navigation, 44px target. */
.takt-header .wc-block-mini-cart { display: flex; align-items: center; }
.takt-header .wc-block-mini-cart__button {
	padding: 0.25rem 0.5rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	color: inherit;
}
/* Override WooCommerce's cached inline colors only for the default count.
   Palette variables also follow the light palette preserved over hero photos. */
.takt-header .takt-cart-count {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}

/*
 * Sticky header. The template part wrapper is the element that sticks, so the
 * header keeps working as a normal block inside the Site Editor. Remove the
 * class "takt-header--sticky" from the header group to switch it off.
 */
.wp-site-blocks > .wp-block-template-part:has(.takt-header--sticky) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 6px 18px -12px rgba(0, 0, 0, 0.25);
}
/* Core's mobile admin bar scrolls away instead of remaining fixed. */
@media screen and (max-width: 600px) {
	.wp-site-blocks > .wp-block-template-part:has(.takt-header--sticky) {
		top: 0;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.takt-header--sticky { transition: padding 160ms ease; }
}

/* Navigation: the current page and its ancestors are marked with a bar under the label. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 0.15em;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.2em;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 160ms ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}
/* The current item is marked by the bar, not by a color change, so it stays
   readable on every surface the header can sit on. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after,
.wp-block-navigation .current-menu-parent > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}
/* Inside the mobile overlay a bar reads better at the side. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content::after {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: inset 3px 0 0 currentColor;
	padding-left: 0.75rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content::after { transition: none; }
}

/*
 * Mobile overlay menu. The navigation block centers its items, which on a phone
 * gives ragged text of different widths and a tap target only as wide as the
 * word. Takt turns the overlay into a list: one full-width row per entry, a
 * rule between rows, and the sub-entries indented under their parent.
 */
/* The header navigation is centered, and core carries that into the overlay
   through --navigation-layout-justification-setting. A list wants its rows at
   the margin, so the overlay resets the layout variables instead of fighting
   core's selectors on specificity. */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: stretch;
	--navigation-layout-direction: column;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	width: 100%;
	max-width: 38rem;
	margin-inline: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	position: relative;
	width: 100%;
	/* The block layout centers items; in a list every row starts at the margin. */
	justify-content: flex-start;
	align-items: stretch;
	flex-direction: column;
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 3rem;
	padding: 0.35rem 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.18rem;
	line-height: 1.2;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content {
	padding-right: 3.25rem;
}
/* The submenu is part of its parent row, so the parent keeps no bottom rule of
   its own and the children are indented under it. */
/* Same shape as core's own rule, so it wins on order rather than on weight. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	width: 100%;
	min-width: 0;
	margin: 0 0 0.5rem;
	padding: 0 0 0 0.85rem;
	border: 0;
	border-left: 2px solid color-mix(in srgb, currentColor 25%, transparent);
	background: transparent;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: 2.65rem;
	font-size: 1rem;
	opacity: 0.82;
}
/* Generation 0.6 turns a long overlay into a broader two-column programme.
   The unqualified rules above remain the exact 0.5 presentation for updated
   installations. Editor canvases have no front-end body class and therefore
   preview the current design. */
body:not(.takt-design-0-5) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: clamp(4rem, 13vh, 7rem) 0 var(--wp--preset--spacing--50);
	width: calc(100% - var(--wp--preset--spacing--40) - var(--wp--preset--spacing--40));
	max-width: 80rem;
}
body:not(.takt-design-0-5) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	width: 100%;
}
body:not(.takt-design-0-5) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch !important;
	gap: 0 clamp(3rem, 8vw, 7rem);
}
body:not(.takt-design-0-5) .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	display: contents !important;
}
body:not(.takt-design-0-5) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: auto !important;
	align-self: stretch;
}
body:not(.takt-design-0-5) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	min-height: 3.75rem;
	padding: 0.65rem 0;
	font-size: clamp(1.35rem, 6vw, 2rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.025em;
}
body:not(.takt-design-0-5) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: 2.65rem;
	font-size: 1.05rem;
	letter-spacing: 0;
}
@media (max-width: 759px) {
	body:not(.takt-design-0-5) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column;
		gap: 0;
	}
}
/* Submenus stay collapsed until requested. The separate 44px control keeps the
   parent destination usable while making the disclosure obvious and tappable. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-icon {
	display: flex;
	position: absolute;
	top: 0.125rem;
	right: 0;
	z-index: 1;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-icon svg {
	width: 0.875rem;
	height: 0.875rem;
	margin: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[data-takt-expanded="false"] ~ .wp-block-navigation__submenu-container {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[data-takt-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
}
/* Carry the dialog's actual surface through Core's transparent wrappers.
   A fixed base-colored close button hides a base-colored icon on deliberately
   dark menus; inheritance also respects custom navigation background colors. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	background-color: inherit;
}
/* The close control stays reachable when a short viewport scrolls the menu. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
	position: sticky;
	top: max(1rem, env(safe-area-inset-top));
	z-index: 3;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	margin-left: auto;
	margin-right: max(1rem, env(safe-area-inset-right));
	margin-bottom: -2.75rem;
	background-color: inherit;
}
@media (max-width: 600px) {
	body:not(.takt-design-0-5) .wp-block-navigation__responsive-container.is-menu-open {
		padding: var(--wp--preset--spacing--30) 0;
		padding-inline: 0 !important;
	}
	body:not(.takt-design-0-5) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 4.5rem;
	}
}

/* The opt-in panel menu opens below the complete header on every screen.
   Keep Core's dialog, close control and focus handling; only its presentation
   changes from a full-screen overlay to a bounded, scrollable dropdown. */
.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box;
	position: absolute;
	inset: 100% 0 auto;
	width: 100%;
	height: auto;
	max-height: var(--takt-panel-available-height, calc(100dvh - var(--takt-header-h)));
	margin: 0;
	padding: 0;
	border-block: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	box-shadow: 0 12px 28px -16px rgb(0 0 0 / 35%);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	box-sizing: border-box;
	width: 100%;
	margin-block: 0;
	padding: 0;
}
.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0.75rem;
	margin-block: 0.75rem 0;
	margin-inline-end: max(var(--wp--preset--spacing--30), env(safe-area-inset-right));
	border-radius: var(--wp--custom--radius--small);
}
.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	box-sizing: border-box;
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding: 0.25rem var(--wp--preset--spacing--40) max(var(--wp--preset--spacing--40), env(safe-area-inset-bottom));
}
.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	min-height: 3.25rem;
	font-size: clamp(1.15rem, 4vw, 1.5rem);
	line-height: 1.25;
	letter-spacing: 0;
}
.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: 2.75rem;
	font-size: 1rem;
}
.takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-icon {
	top: 0.25rem;
}

/* Panel rows use the site's saved text color for a quiet surface and a short
   current-page marker. A label underline would span the full grid column.
   Keep the native icon markup and a separate, visible keyboard focus ring. */
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	box-sizing: border-box;
	align-items: center;
	min-height: 2.875rem;
	padding: 0.65rem 1rem;
	border-radius: 0;
	box-shadow: none;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.35;
	opacity: 1;
}
/* Core already renders optional link descriptions. Show the authored text
   only inside this panel style, with icons beside the label rather than
   between the two lines. Links without descriptions keep their compact row. */
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:has(> .wp-block-navigation-item__description) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	align-items: start;
	column-gap: 0.625rem;
	row-gap: 0.2rem;
	min-height: 4.5rem;
	padding-block: 0.75rem;
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .takt-navigation-item-with-icon:has(> .wp-block-navigation-item__description),
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .takt-navigation-icon-preview > .wp-block-navigation-item__content:has(> .wp-block-navigation-item__description) {
	grid-template-columns: 1.25rem minmax(0, 1fr);
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:has(> .wp-block-navigation-item__description) > .wp-block-navigation-item__label {
	grid-column: -2 / -1;
	grid-row: 1;
	min-width: 0;
	font-weight: 600;
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
	display: block;
	grid-column: -2 / -1;
	min-width: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	opacity: 0.8;
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:has(> .wp-block-navigation-item__description) > .takt-navigation-icon,
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .takt-navigation-icon-preview > .wp-block-navigation-item__content:has(> .wp-block-navigation-item__description)::before {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	margin: 0;
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:has(> .wp-block-navigation-item__description) {
	min-height: 4rem;
	padding-block: 0.65rem;
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content {
	padding-inline-end: 3.25rem;
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
	inset: auto;
	inset-inline-start: 0.25rem;
	top: 50%;
	width: 3px;
	height: 1.25rem;
	border-radius: 2px;
	transform: translateY(-50%);
	transition: none;
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent) > .wp-block-navigation-item__content {
	background-color: color-mix(in srgb, currentColor 8%, transparent);
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent) > .wp-block-navigation-item__content::after {
	display: block;
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	background-color: color-mix(in srgb, currentColor 12%, transparent);
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	box-shadow: none;
}
.takt-header .takt-header__nav.is-style-takt-panel-menu .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::after {
	display: none;
}

/* The optional column footer has independent menus rather than repeating the
   header navigation. Its flat lists remain visible at every screen size. */
.takt-footer--menu-columns .takt-footer__columns {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: var(--wp--preset--spacing--50) clamp(1.5rem, 4vw, 4rem);
}
.takt-footer--menu-columns .takt-footer__columns:has(> :nth-child(3):last-child) {
	grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
}
.takt-footer--menu-columns .takt-footer__columns:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.takt-footer--menu-columns .takt-footer__columns > * {
	min-width: 0;
	margin-block-start: 0;
}
.takt-footer--menu-columns .takt-footer__brand .wp-block-site-tagline {
	max-width: 26ch;
	line-height: 1.65;
}
.takt-footer--menu-columns .takt-footer__column > .wp-block-heading {
	margin-block-start: 0;
	font-weight: 700;
	line-height: 1.4;
}
.takt-footer--menu-columns .takt-footer__nav {
	justify-self: stretch;
	width: 100%;
}
.takt-footer--menu-columns .takt-footer__nav .wp-block-navigation__container,
.takt-footer--menu-columns .takt-footer__nav .wp-block-page-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
}
.takt-footer--menu-columns .takt-footer__nav .wp-block-navigation-item {
	min-width: 0;
	width: 100%;
	padding: 0;
	border: 0;
}
.takt-footer--menu-columns .takt-footer__nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	width: fit-content;
	max-width: 100%;
	padding-block: 0.35rem;
	font-weight: 500;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.takt-footer .wp-block-navigation .wp-block-navigation-item__content,
.takt-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none;
}
.takt-footer .wp-block-navigation .wp-block-navigation-item__content::after {
	display: none;
}
.takt-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}
.takt-footer .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 700;
}
/* WordPress 6.6 has no always-visible submenu setting. With indicators off,
   render descendants as a nested list, without a hidden or unfocusable menu.
   A site author's explicit click-to-open setting keeps Core's interaction. */
.takt-footer--menu-columns .takt-footer__nav .has-child:not(.open-on-click):not(.open-on-hover-click) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.takt-footer--menu-columns .takt-footer__nav .has-child:not(.open-on-click):not(.open-on-hover-click) > .wp-block-navigation__submenu-container {
	position: static;
	inset: auto;
	display: flex;
	flex-direction: column;
	visibility: visible;
	opacity: 1;
	width: 100%;
	min-width: 0;
	height: auto;
	gap: 0;
	padding: 0;
	padding-inline-start: 1rem;
	border: 0;
	background: transparent;
	color: inherit;
	box-shadow: none;
	overflow: visible;
}
.takt-footer--menu-columns .takt-footer__search .wp-block-search__inside-wrapper {
	min-width: 0;
	min-height: 3rem;
}
.takt-footer--menu-columns .takt-footer__search .wp-block-search__input {
	min-width: 0;
}
.takt-footer--menu-columns .takt-footer__search .wp-block-search__button {
	flex-shrink: 0;
}
@media (max-width: 1000px) {
	.takt-footer--menu-columns .takt-footer__columns,
	.takt-footer--menu-columns .takt-footer__columns:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.takt-footer--menu-columns .takt-footer__brand,
	.takt-footer--menu-columns .takt-footer__search {
		grid-column: 1 / -1;
	}
	.takt-footer--menu-columns .takt-footer__columns > .takt-footer__column:last-child:nth-child(even) {
		grid-column: 1 / -1;
	}
	.takt-footer--menu-columns .takt-footer__brand .wp-block-site-tagline {
		max-width: 36ch;
	}
}
@media (max-width: 360px) {
	.takt-footer--menu-columns .takt-footer__columns,
	.takt-footer--menu-columns .takt-footer__columns:has(> :nth-child(3):last-child),
	.takt-footer--menu-columns .takt-footer__columns:has(> :nth-child(2):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Header and footer surfaces (block styles on the header/footer group).
 * "Transparent": no background. For the header this only takes effect on pages
 * that open with a full-width Cover (body.takt-has-hero) and while the page is
 * not scrolled; otherwise it falls back to the normal solid header.
 * "Glass": translucent surface with a blur.
 */
.takt-header.is-style-takt-transparent,
.takt-header.is-style-takt-glass,
.takt-footer.is-style-takt-transparent,
.takt-footer.is-style-takt-glass {
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.takt-footer.is-style-takt-transparent.has-background,
.takt-footer.is-style-takt-transparent {
	background-color: transparent !important;
}
.takt-footer.is-style-takt-glass.has-background,
.takt-footer.is-style-takt-glass {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent) !important;
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
}
/* Every header layout can use these surfaces, including a custom header that
   has no explicit background. Inner pages and the scrolled Transparent state
   always have a legible surface. */
.takt-header.is-style-takt-transparent,
.takt-header.is-style-takt-glass {
	background-color: var(--wp--preset--color--base) !important;
}
.takt-header:is(.is-style-takt-transparent, .is-style-takt-glass):not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}
/* Keep the blur on its own layer. A backdrop-filter on the header itself
   becomes the containing block of Core's fixed mobile dialog and traps it
   inside the header. Unsupported browsers retain the solid surface above. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.takt-header.is-style-takt-glass {
		position: relative;
		isolation: isolate;
		background-color: transparent !important;
	}
	.takt-header.is-style-takt-glass::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
		-webkit-backdrop-filter: saturate(140%) blur(14px);
		backdrop-filter: saturate(140%) blur(14px);
		pointer-events: none;
	}
}
/* Transparent header over a hero: overlay, light text, no border. */
body.takt-has-hero .wp-site-blocks > .wp-block-template-part:has(.takt-header.is-style-takt-transparent) {
	margin-bottom: calc(-1 * var(--takt-header-h));
}
body.takt-has-hero .wp-site-blocks > .wp-block-template-part:has(.takt-header.is-style-takt-transparent:not(.is-scrolled)) {
	box-shadow: none;
}
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) {
	background-color: transparent !important;
	border-bottom-color: transparent !important;
	color: var(--wp--preset--color--base);
}
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) .wp-block-navigation .wp-block-navigation-item__content,
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) .wp-block-site-title a,
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) .wp-block-site-tagline,
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) .wc-block-mini-cart__button,
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) .takt-scheme-toggle__button,
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) .wp-block-navigation__responsive-container-open,
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--base);
}
/* The open dialog is a page surface, even when its trigger sits on a photo.
   Explicit navigation colors in the editor remain authoritative. */
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: inherit;
}
/* Desktop dropdowns have their own background too; hero text must not
   override the foreground chosen for that surface. */
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: inherit;
}
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) .wp-block-navigation__responsive-container.is-menu-open .takt-scheme-toggle__button {
	color: inherit;
}
/* Over a photo the ring has to follow the label, not the brand color: primary
   drops below 3:1 on the bright parts of an image. */
body.takt-has-hero .takt-header.is-style-takt-transparent:not(.is-scrolled) :focus-visible {
	outline-color: currentColor;
}
/* Only an overlaid header needs this room. Choosing a regular or Glass header
   must leave the page author's own Cover spacing intact. */
body.takt-has-hero .wp-site-blocks:has(> .wp-block-template-part .takt-header.is-style-takt-transparent) .wp-block-post-content > .wp-block-cover.alignfull:first-child:not(.takt-club-hero) {
	padding-top: calc(var(--takt-header-h) + var(--wp--preset--spacing--60)) !important;
}
@media (prefers-reduced-motion: reduce) {
	.takt-header.is-style-takt-transparent,
	.takt-header.is-style-takt-glass { transition: none; }
}

/*
 * Mini cart drawer.
 *
 * WooCommerce hard-codes `background: #fff` on the drawer, and the drawer is a
 * portal on document.body, so it takes the page's text colors but not its
 * surface. In dark mode that is light text on white. These rules live here and
 * not in woocommerce.css because the mini cart sits in the header of every
 * page, while the shop stylesheet only loads on shop pages.
 */
.wc-block-components-drawer {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast);
}
/* The closed WooCommerce drawer remains mounted off screen. Its ARIA state
   must also remove the close/shopping controls from keyboard navigation. */
.wc-block-mini-cart__drawer[aria-hidden="true"] {
	visibility: hidden;
}
/* WooCommerce binds a cached inline background to the contents as well. Keep
   default contents live across scheme changes; explicit editor colors opt out. */
.wp-block-woocommerce-mini-cart-contents:not(.has-background) {
	background-color: var(--wp--preset--color--base) !important;
}
.wc-block-components-drawer__screen-overlay { background-color: rgb(0 0 0 / 55%); }
.wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast);
}
.wc-block-components-drawer__close {
	min-width: 2.75rem;
	min-height: 2.75rem;
	opacity: 1;
	color: var(--wp--preset--color--secondary) !important;
}
.wc-block-components-drawer__close:hover { color: var(--wp--preset--color--contrast) !important; }
.wc-block-mini-cart__items,
.wc-block-mini-cart-items { color: inherit; }
.wc-block-mini-cart-items .wc-block-cart-items__row,
.wc-block-mini-cart__products-table tr { border-bottom: 1px solid var(--wp--preset--color--line); }
.wc-block-components-product-name {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--wp--preset--color--primary); }
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description { color: var(--wp--preset--color--secondary); }
.wc-block-components-product-price { font-variant-numeric: tabular-nums; }
/* The quantity stepper renders as a dark box on its own; it gets the theme's
   field treatment instead. */
.wc-block-components-quantity-selector {
	min-width: 8.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	background: transparent;
	color: inherit;
	min-height: 2.75rem;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	background: transparent;
	color: inherit;
	min-width: 2.75rem;
	min-height: 2.75rem;
}
/* The stepper and remove action must wrap inside narrow cart cells instead of
   increasing the table's intrinsic width beyond a phone viewport. */
.wc-block-cart-items .wc-block-cart-item__quantity { flex-wrap: wrap; }
.wc-block-cart-item__remove-link { color: var(--wp--preset--color--secondary); }
.wc-block-cart-item__remove-link:hover { color: var(--wp--preset--color--primary); }
.wc-block-mini-cart__footer {
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--line);
	color: inherit;
}
.wc-block-mini-cart__footer-subtotal { color: var(--wp--preset--color--contrast); }
.wc-block-mini-cart__footer-actions .wc-block-components-button {
	min-height: 2.75rem;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--wp--custom--radius--small);
}
/* The outline action inherits the drawer foreground: button palette resets
   belong to filled surfaces and otherwise make this text dark in dark mode. */
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-components-button.is-style-outline:not(.is-link):not(.has-text-color) {
	color: inherit;
}
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-components-button.is-style-outline:not(.is-link):not(.has-background) {
	background: transparent;
	box-shadow: inset 0 0 0 2px currentColor;
}
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-components-button.is-style-outline:not(.is-link):not(.has-background):hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
}
.wc-block-mini-cart__empty-cart-wrapper { color: var(--wp--preset--color--secondary); }
.wc-block-mini-cart__footer-actions .wc-block-components-button__text { color: inherit; }
.wc-block-components-drawer .wc-block-components-button:not(.is-link):focus,
.wc-block-components-drawer .wc-block-components-button:not(.is-link):focus-visible {
	box-shadow: none;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}