/**
 * Shared mobile bottom navigation. This asset is enqueued only when its
 * component is rendered, so the body offset cannot affect excluded pages.
 */

.mc-mobile-bottom-nav {
	display: none;
}

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

@media (max-width: 63.999rem) {
	body {
		padding-block-end: calc(4.25rem + env(safe-area-inset-bottom));
	}

	.mc-mobile-bottom-nav {
		position: fixed;
		z-index: 40;
		inset-inline: 0;
		inset-block-end: 0;
		display: block;
		padding-block-end: env(safe-area-inset-bottom);
		border-block-start: 1px solid var(--mc-color-border);
		background: var(--mc-color-surface);
		box-shadow: 0 -0.25rem 1rem rgb(0 0 0 / 8%);
	}

	.mc-mobile-bottom-nav ul {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		width: min(100%, 36rem);
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}

	.mc-mobile-bottom-nav__item {
		position: relative;
		display: grid;
		width: 100%;
		min-height: 4.25rem;
		padding: var(--mc-space-xs);
		border: 0;
		background: transparent;
		color: var(--mc-color-text-secondary);
		font: inherit;
		font-size: var(--mc-font-size-xs);
		line-height: var(--mc-line-height-control);
		text-align: center;
		text-decoration: none;
		place-content: center;
		place-items: center;
		gap: 0.15rem;
	}

	.mc-mobile-bottom-nav__item > span:last-child {
		white-space: nowrap;
	}

	.mc-mobile-bottom-nav__item svg {
		width: 1.35rem;
		height: 1.35rem;
	}

	.mc-mobile-bottom-nav__item.is-current {
		color: var(--mc-color-primary);
		font-weight: var(--mc-font-weight-semibold);
	}

	.mc-mobile-bottom-nav__item:focus-visible {
		outline: 2px solid var(--mc-color-primary);
		outline-offset: -2px;
	}

	.mc-mobile-bottom-nav__item.is-disabled {
		cursor: default;
		opacity: 0.55;
	}

	.mc-mobile-bottom-nav__count {
		position: absolute;
		inset-block-start: 0.35rem;
		inset-inline-start: calc(50% + 0.35rem);
		display: grid;
		min-width: 1.1rem;
		height: 1.1rem;
		padding-inline: 0.2rem;
		border-radius: var(--mc-radius-full);
		background: var(--mc-color-primary);
		color: var(--mc-color-button-text);
		font-size: 0.625rem;
		line-height: 1;
		place-items: center;
	}

	.mc-mobile-bottom-nav__count[hidden] {
		display: none;
	}

	body.mc-compare-open { overflow: hidden; }
	.mc-compare-layer { position: fixed; z-index: 1100; inset: 0; }
	.mc-compare-layer__overlay { position: absolute; inset: 0; background: rgb(17 24 39 / 45%); opacity: 0; transition: opacity 240ms ease; }
	.mc-compare-panel { position: absolute; inset-inline: 0; inset-block-end: 0; max-height: min(78vh, 40rem); padding: var(--mc-space-md); padding-block-end: calc(var(--mc-space-lg) + env(safe-area-inset-bottom)); overflow-y: auto; background: var(--mc-color-surface); border-radius: 1.5rem 1.5rem 0 0; box-shadow: var(--mc-shadow-large); transform: translateY(100%); transition: transform 240ms ease; }
	.mc-compare-layer.is-open .mc-compare-layer__overlay { opacity: 1; }
	.mc-compare-layer.is-open .mc-compare-panel { transform: translateY(0); }
	.mc-compare-panel > header { display: flex; align-items: center; justify-content: space-between; }
	.mc-compare-panel h2 { margin: 0; font-size: var(--mc-mobile-font-size-section-title); }
	.mc-compare-panel > header button { width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--mc-color-border); border-radius: 50%; background: transparent; font-size: 1.5rem; }
	.mc-compare-panel__help { color: var(--mc-color-text-secondary); font-size: var(--mc-font-size-sm); }
	.mc-compare-panel__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-space-sm); margin-block: var(--mc-space-md); }
	.mc-compare-panel__products article, .mc-compare-panel__placeholder, .mc-compare-panel__empty { position: relative; min-height: 10rem; padding: var(--mc-space-sm); text-align: center; border: 1px solid var(--mc-color-border); border-radius: var(--mc-radius-card); }
	.mc-compare-panel__empty { grid-column: 1 / -1; display: grid; place-items: center; color: var(--mc-color-text-secondary); }
	.mc-compare-panel__placeholder { display: grid; place-items: center; border-style: dashed; color: var(--mc-color-text-secondary); }
	.mc-compare-panel__products img { width: 5.5rem; height: 5.5rem; object-fit: contain; }
	.mc-compare-panel__products h3 { margin: .35rem 0; font-size: var(--mc-font-size-sm); line-height: 1.7; }
	.mc-compare-panel__products p { margin: .25rem 0; color: var(--mc-color-primary); font-weight: 700; }
	.mc-compare-panel__products article > button { position: absolute; inset-block-start: .3rem; inset-inline-end: .3rem; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: 50%; background: var(--mc-color-background); }
	.mc-compare-panel__products a, .mc-compare-panel__shop { color: var(--mc-color-primary); font-size: var(--mc-font-size-xs); font-weight: 700; text-decoration: none; }
	.mc-compare-panel__shop { display: block; padding: .75rem; text-align: center; border: 1px solid var(--mc-color-primary); border-radius: var(--mc-radius-button); }
	.mc-compare-panel__start { display: block; width: 100%; margin-block-end: var(--mc-space-sm); padding: .8rem; color: var(--mc-color-button-text); font: inherit; font-weight: 700; background: var(--mc-color-primary); border: 1px solid var(--mc-color-primary); border-radius: var(--mc-radius-button); }
	.mc-compare-panel__start[hidden], .mc-compare-panel__result[hidden] { display: none; }
	.mc-compare-panel__result { margin-block: var(--mc-space-md); overflow-x: auto; border: 1px solid var(--mc-color-border); border-radius: var(--mc-radius-card); }
	.mc-compare-panel__result table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--mc-font-size-sm); text-align: center; }
	.mc-compare-panel__result th, .mc-compare-panel__result td { padding: .75rem .5rem; border-block-end: 1px solid var(--mc-color-border); }
	.mc-compare-panel__result th:first-child { position: sticky; inset-inline-start: 0; background: var(--mc-color-surface); }
}