/**
 * Mahis Commerce header.
 */

.mc-header {
	--mc-header-border-width: 1px;
	--mc-header-focus-width: 2px;
	--mc-header-focus-offset: 2px;

	color: var(--mc-color-text-primary);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-line-height-control);
	background: var(--mc-color-surface);
	border-block-end: var(--mc-header-border-width) solid var(--mc-color-border);
}

.mc-header a {
	color: inherit;
	text-decoration: none;
}

.mc-header ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.mc-header a:focus-visible,
.mc-header button:focus-visible,
.mc-header input:focus-visible {
	outline: var(--mc-header-focus-width) solid var(--mc-color-primary);
	outline-offset: var(--mc-header-focus-offset);
}

.mc-header__desktop {
	display: none;
}

.mc-header__mobile {
	display: block;
}

.mc-header__main-row,
.mc-header__mobile-row,
.mc-header__mobile-search {
	width: 100%;
	max-width: var(--mc-container-width);
	margin-inline: auto;
	padding-inline: var(--mc-container-padding-mobile);
}

.mc-header__mobile-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--mc-space-md);
	align-items: center;
	min-height: 4rem;
}

.mc-header__logo {
	min-width: 0;
	font-size: var(--mc-font-size-lg);
	font-weight: var(--mc-font-weight-bold);
	text-align: center;
}

.mc-header__brand {
	display: inline-flex;
	max-width: 100%;
	gap: var(--mc-space-sm);
	align-items: center;
	justify-content: center;
}

.mc-header__brand-image {
	display: inline-flex;
	flex: none;
}

.mc-header__logo img {
	display: block;
	width: auto;
	max-width: 7rem;
	max-height: 2.5rem;
	height: auto;
	margin-inline: auto;
}

.mc-header__site-name {
	min-width: 0;
	overflow: hidden;
	font-size: var(--mc-font-size-sm);
	font-weight: var(--mc-font-weight-bold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-header__menu-toggle,
.mc-header__mobile-action,
.mc-header__action-link {
	position: relative;
	display: inline-flex;
	gap: var(--mc-space-xs);
	align-items: center;
	justify-content: center;
	min-height: calc((var(--mc-button-padding-block) * 2) + 1.5rem);
	padding: var(--mc-button-padding-block) var(--mc-button-padding-inline);
	font: inherit;
	font-weight: var(--mc-button-font-weight);
	background: transparent;
	border: var(--mc-header-border-width) solid var(--mc-color-border);
	border-radius: var(--mc-radius-button);
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.mc-header__menu-toggle,
.mc-header__mobile-action {
	width: calc((var(--mc-button-padding-block) * 2) + 1.5rem);
	height: calc((var(--mc-button-padding-block) * 2) + 1.5rem);
	min-height: 0;
	padding: 0;
}

.mc-header__action-icon {
	width: 1.35rem;
	height: 1.35rem;
	flex: none;
}

.mc-header__action--account .mc-header__action-icon,
.mc-header__mobile-action--account,
.mc-header__menu-toggle {
	color: var(--mc-color-primary);
}

.mc-header__action--cart .mc-header__action-link,
.mc-header__mobile-action--cart {
	color: var(--mc-color-button-text);
	background: var(--mc-color-primary);
	border-color: var(--mc-color-primary);
}

.mc-header__action--cart .mc-header__action-link:hover,
.mc-header__mobile-action--cart:hover,
.mc-header__search button:hover,
.mc-header__search input[type="submit"]:hover,
.mc-header__mobile-search button:hover,
.mc-header__mobile-search input[type="submit"]:hover {
	color: var(--mc-color-button-text);
	background: var(--mc-color-primary-hover);
	border-color: var(--mc-color-primary-hover);
}

.mc-header__mobile-actions ul {
	display: flex;
	gap: var(--mc-space-xs);
	align-items: center;
}

.mc-header__mobile-search {
	padding-block-end: var(--mc-space-md);
}

.mc-header__search form,
.mc-header__mobile-search form {
	display: flex;
	width: 100%;
	margin: 0;
}

.mc-header__search form > label,
.mc-header__mobile-search form > label {
	display: flex;
	flex: 1;
	min-width: 0;
}

.mc-header__search input[type="search"],
.mc-header__mobile-search input[type="search"] {
	flex: 1;
	width: 100%;
	min-width: 0;
	padding: var(--mc-space-sm) var(--mc-space-md);
	font: inherit;
	color: var(--mc-color-text-primary);
	background: var(--mc-color-background);
	border: var(--mc-header-border-width) solid var(--mc-color-border);
	border-start-start-radius: var(--mc-radius-button);
	border-start-end-radius: 0;
	border-end-start-radius: var(--mc-radius-button);
	border-end-end-radius: 0;
}

.mc-header__search button,
.mc-header__search input[type="submit"],
.mc-header__mobile-search button,
.mc-header__mobile-search input[type="submit"] {
	padding: var(--mc-space-sm) var(--mc-space-md);
	font: inherit;
	color: var(--mc-color-button-text);
	font-weight: var(--mc-button-font-weight);
	background: var(--mc-color-primary);
	border: var(--mc-header-border-width) solid var(--mc-color-primary);
	border-start-start-radius: 0;
	border-start-end-radius: var(--mc-radius-button);
	border-end-start-radius: 0;
	border-end-end-radius: var(--mc-radius-button);
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.mc-header__cart-count {
	display: inline-grid;
	place-items: center;
	min-width: 1.5rem;
	min-height: 1.5rem;
	padding-inline: var(--mc-space-xs);
	font-size: var(--mc-font-size-xs);
	color: var(--mc-color-button-text);
	background: var(--mc-color-primary);
	border-radius: var(--mc-radius-full);
}

.mc-header__cart-count[hidden] {
	display: none;
}

.mc-header__action--cart .mc-header__cart-count,
.mc-header__mobile-action--cart .mc-header__cart-count {
	color: var(--mc-color-primary);
	background: var(--mc-color-button-text);
}

.mc-header__mobile-action--cart .mc-header__cart-count {
	position: absolute;
	inset-block-start: calc(var(--mc-space-xs) * -1);
	inset-inline-end: calc(var(--mc-space-xs) * -1);
	min-width: 1.25rem;
	min-height: 1.25rem;
}

.mc-header-drawer-layer[hidden] {
	display: none;
}

body.mc-mobile-menu-open {
	overflow: hidden;
}

.mc-header-drawer-layer,
.mc-header-drawer__overlay,
.mc-header-drawer {
	position: fixed;
	inset-block: 0;
}

.mc-header-drawer-layer {
	inset-inline: 0;
	z-index: 1000;
}

.mc-header-drawer__overlay {
	inset-inline: 0;
	background: rgb(17 24 39 / 38%);
	opacity: 0;
	transition: opacity 300ms ease;
}

.mc-header-drawer {
	inset-inline-start: 0;
	inset-inline-end: auto;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(86vw, 22rem);
	max-width: 100%;
	overflow: hidden;
	color: var(--mc-color-text-primary);
	text-align: right;
	background: var(--mc-color-surface);
	box-shadow: var(--mc-shadow-large);
	transform: translateX(100%);
	transition: transform 300ms ease;
}

.mc-header-drawer-layer.is-open .mc-header-drawer__overlay {
	opacity: 1;
}

.mc-header-drawer-layer.is-open .mc-header-drawer {
	transform: translateX(0);
}

.mc-header-drawer__header {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	min-height: 4rem;
	padding: var(--mc-space-md);
	border-block-end: 1px solid var(--mc-color-border);
}

.mc-header-drawer__header h2 {
	margin: 0;
	font-size: var(--mc-mobile-font-size-section-title);
	font-weight: var(--mc-font-weight-bold);
	line-height: 1.5;
}

.mc-header-drawer__close {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: var(--mc-color-text-primary);
	background: transparent;
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-button);
	cursor: pointer;
}

.mc-header-drawer__close svg,
.mc-header-drawer__chevron {
	width: 1.25rem;
	height: 1.25rem;
}

.mc-header-drawer__navigation {
	min-height: 0;
	padding: var(--mc-space-sm) var(--mc-space-md) var(--mc-space-xl);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mc-header-drawer__navigation li + li {
	border-block-start: 1px solid var(--mc-color-border);
}

.mc-header-drawer__navigation a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--mc-space-sm);
	align-items: center;
	min-height: 3.5rem;
	padding-block: var(--mc-space-sm);
	font-size: var(--mc-mobile-font-size-body);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-header-drawer__navigation a.has-thumbnail {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.mc-header-drawer__navigation a:hover,
.mc-header-drawer__navigation a:focus-visible {
	color: var(--mc-color-primary);
	background: color-mix(in srgb, var(--mc-color-primary) 7%, transparent);
}

.mc-header-drawer__category-media {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	border-radius: var(--mc-radius-small);
	background: var(--mc-color-background);
}

.mc-header-drawer__category-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.mc-header-drawer__category-name {
	min-width: 0;
}

.mc-header-drawer__chevron {
	color: var(--mc-color-text-secondary);
}

.mc-header__topbar {
	padding: var(--mc-space-sm) var(--mc-container-padding-mobile);
	font-size: var(--mc-font-size-sm);
	color: var(--mc-color-text-secondary);
	text-align: center;
	background: var(--mc-color-background);
}

@media (max-width: 47.999rem) {
	.mc-header {
		font-size: var(--mc-mobile-font-size-body);
		line-height: var(--mc-mobile-line-height-control);
	}

	.mc-header__logo {
		font-size: var(--mc-mobile-font-size-section-title);
	}

	.mc-header__site-name {
		font-size: var(--mc-mobile-font-size-card-title);
	}

	.mc-header__cart-count {
		font-size: var(--mc-mobile-font-size-xs);
	}

	.mc-header__topbar {
		font-size: var(--mc-mobile-font-size-sm);
	}
}

@media (min-width: 64rem) {
	.mc-header__desktop {
		display: block;
	}

	.mc-header__mobile {
		display: none;
	}

	.mc-header__main-row {
		display: grid;
		grid-template-columns: minmax(10rem, 0.75fr) minmax(20rem, 2fr) auto;
		gap: var(--mc-space-xl);
		align-items: center;
		min-height: 5rem;
		padding-inline: var(--mc-container-padding-desktop);
	}

	.mc-header__logo {
		text-align: start;
	}

	.mc-header__brand {
		justify-content: flex-start;
	}

	.mc-header__logo img {
		max-width: 9rem;
		max-height: 3rem;
	}

	.mc-header__site-name {
		font-size: var(--mc-font-size-lg);
	}

	.mc-header__actions ul {
		display: flex;
		gap: var(--mc-space-sm);
		align-items: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-header__menu-toggle,
	.mc-header__mobile-action,
	.mc-header__action-link,
	.mc-header__search button,
	.mc-header__search input[type="submit"],
	.mc-header__mobile-search button,
	.mc-header__mobile-search input[type="submit"] {
		transition: none;
	}

	.mc-header-drawer,
	.mc-header-drawer__overlay {
		transition: none;
	}
}