/* ==================================================
   M2 – MOBILE MENU
   ================================================== */

/* =========================================
   GLOBAL (SHARED OUTSIDE MEDIA QUERY)
========================================= */

.m2-header {
	display: none;
}

/* ==================================================
   MOBILE – MAX 760px
   ================================================== */

@media (max-width: 760px) {

	/* =========================================
	   BASE ADJUSTMENTS (shared overrides)
	========================================= */

	.cpp-menu .menu-label {
		justify-content: center;
		text-align: center;
		padding: 0 8px;
	}

	.cpp-mobile-menu {
		position: relative !important;
		z-index: 9999 !important;
	}

	.cpp-logo:not(.is-menu-open) .cpp-mobile-mask,
	.cpp-logo:not(.is-menu-open) .cpp-mobile-menu,
	.cpp-logo:not(.is-menu-open) .cpp-mobile-menu * {
		pointer-events: none;
	}

	/* =========================================
	   HEADER
	========================================= */

	.cpp-mobile-header {
		position: relative;
		z-index: 5000;
		isolation: isolate;
		overflow: hidden;
	}

	.m2-header {
		display: block;
		position: relative;
		z-index: 3000;
		height: var(--menu-visible);
		max-width: 100%;
		margin: 0 auto;
		background: #fff;
	}

	/* =========================================
	   TOGGLE (BASE)
	========================================= */

	.m2-toggle {
		position: relative;
		width: var(--menu-w);
		height: var(--menu-h);

		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: 8px;
		padding-bottom: 6px;

		font: bold 14px Verdana, Arial, sans-serif;
		color: #000;

		background: linear-gradient(#ffffff, #f2f2f2);
		border: 1px solid #d0d0d0;
		border-radius: var(--menu-mobile-radius);

		box-shadow:
			0 4px 10px rgba(0,0,0,0.18),
			0 1px 2px rgba(0,0,0,0.12);

		cursor: pointer;

		transition:
			transform .42s cubic-bezier(.55,.06,.68,.19),
			opacity .25s ease;
	}

	.m2-toggle::before,
	.m2-toggle::after {
		content: "";
		position: absolute;
		inset: 0;

		border: 1px solid #d8d8d8;
		border-bottom-left-radius: var(--menu-mobile-radius);
		border-bottom-right-radius: var(--menu-mobile-radius);

		pointer-events: none;
	}

	.m2-toggle::before { background: #fff; }

	.m2-toggle::after {
		background: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 60%, #e6e6e6 100%);
		opacity: 0;
		transition: opacity .25s ease;
	}

	.m2-toggle:hover::after { opacity: 1; }

	.m2-toggle > * {
		position: relative;
		z-index: 1;
	}

	.m2-icon,
	.m2-text {
		display: inline-flex;
		align-items: center;
	}

	.m2-icon {
		justify-content: center;
		font-size: 15px;
		line-height: 1;
		height: 1em;
	}

	/* =========================================
	   TOGGLE STATES
	========================================= */

	/* header (closed) */
	.m2-header > .m2-toggle {
		height: var(--menu-visible);
		align-items: center;
		padding-bottom: 0;
		transform: translateY(var(--toggle-offset));
		margin: 0 auto;
		z-index: 4000;
	}

	/* inside menu (open initial position) */
	.m2-menu .m2-toggle {
		margin-top: calc(-1 * var(--menu-overlap));
		transform: translateY(calc(-2 * var(--menu-slide)));
		transition:
			transform .55s cubic-bezier(.18,.89,.32,1.28),
			opacity .3s ease;
	}

	/* =========================================
	   MENU CONTAINER
	========================================= */

	.m2-menu {
		position: absolute;
		top: calc(-1 * var(--menu-overlap));
		left: 50%;
		transform: translateX(-50%);

		width: var(--menu-w);

		display: flex;
		flex-direction: column;
		align-items: center;

		background: transparent;

		z-index: 2500;
		overflow: hidden;
		padding-bottom: 12px;

		opacity: 0;
		pointer-events: none;

		transition: opacity .2s ease;
	}

	/* =========================================
	   MENU ITEMS
	========================================= */

	.m2-menu .menu-item {
		position: relative;
		width: 100%;

		transform: translateY(calc(-2 * var(--menu-slide)));
		opacity: 0;

		transition:
			transform .55s cubic-bezier(.18,.89,.32,1.28),
			opacity .3s ease;
	}

	/* =========================================
	   MENU BUTTON (MOBILE STYLE)
	========================================= */

	.m2-menu .menu-btn,
	.m2-menu .menu-btn::before,
	.m2-menu .menu-btn::after {
		border-bottom-left-radius: var(--menu-mobile-radius);
		border-bottom-right-radius: var(--menu-mobile-radius);
	}

	.m2-menu .menu-btn {
		position: relative;
		width: var(--menu-w);
		height: 100%;
		display: block;
		overflow: hidden;

		border-radius: 0;
		border-bottom-right-radius: var(--menu-mobile-radius);

		color: inherit;
		text-decoration: none !important;
		cursor: pointer;

		box-shadow:
			-2px 0 4px rgba(0,0,0,0.08),
			2px 0 4px rgba(0,0,0,0.08);
	}

	.m2-menu .menu-item:last-child .menu-btn {
		box-shadow:
			-2px 0 4px rgba(0,0,0,0.08),
			2px 0 4px rgba(0,0,0,0.08),
			0 6px 14px rgba(0,0,0,0.18),
			0 2px 4px rgba(0,0,0,0.12);
	}

	/* layers */

	.m2-menu .menu-btn::before,
	.m2-menu .menu-btn::after {
		content: "";
		position: absolute;
		inset: 0;

		border-bottom: 1px solid #c6c6c6;
		border-bottom-left-radius: var(--menu-mobile-radius);
		border-bottom-right-radius: var(--menu-mobile-radius);

		z-index: 0;
	}

	.m2-menu .menu-btn::before { background: #fff; }

	.m2-menu .menu-btn::after {
		background: linear-gradient(
			to bottom,
			#ffffff 0%,
			#ffffff 60%,
			#c96a63 85%,
			#8f2e2e 100%
		);

		opacity: 0;
		transition: opacity var(--fade-ms) ease-in-out;
	}

	/* states */

	@media (hover: hover) {
		.m2-menu .menu-btn:hover::after {
			opacity: 0.7;
		}
	}

	.m2-menu .menu-item.is-active .menu-btn::after {
		opacity: 1;
		filter: brightness(0.92);
	}

	.m2-menu .menu-item.is-active .menu-label {
		font-weight: 700;
		color: #000;
	}

	.m2-menu .menu-btn,
	.m2-menu .menu-btn:hover,
	.m2-menu .menu-item.is-active .menu-btn {
		border-left: none !important;
	}

	/* =========================================
	   OPEN STATE
	========================================= */

	.m2-header.is-open .m2-menu {
		opacity: 1;
		pointer-events: auto;
	}

	.m2-header.is-open .menu-item {
		transform: translateY(0);
		opacity: 1;
	}

	.m2-header.is-open .m2-menu .m2-toggle {
		transform: translateY(var(--toggle-offset));
	}

	/* stagger */

	.m2-header.is-open .menu-item:nth-child(1) { transition-delay: 0ms; }
	.m2-header.is-open .menu-item:nth-child(2) { transition-delay: 70ms; }
	.m2-header.is-open .menu-item:nth-child(3) { transition-delay: 140ms; }
	.m2-header.is-open .menu-item:nth-child(4) { transition-delay: 210ms; }
	.m2-header.is-open .menu-item:nth-child(5) { transition-delay: 280ms; }
	.m2-header.is-open .m2-toggle              { transition-delay: 315ms; }

	/* =========================================
	   CLOSING STATE
	========================================= */

	.m2-header.is-closing .menu-item {
		transform: translateY(calc(-2 * var(--menu-slide)));
		opacity: 0;
		transition-delay: 0ms !important;
	}

	.m2-header.is-closing .m2-menu .m2-toggle {
		transform: translateY(calc(-2 * var(--menu-slide)));
		transition-delay: 0ms !important;
	}

	/* =========================================
	   SAFETY (INTERACTION LOCK)
	========================================= */

	.m2-header:not(.is-open):not(.is-closing) .m2-menu,
	.m2-header:not(.is-open):not(.is-closing) .m2-menu * {
		pointer-events: none;
	}

	.m2-header:not(.is-open):not(.is-closing) .m2-menu {
		visibility: hidden;
	}

	/* =========================================
	   GLOBAL STATE EFFECTS
	========================================= */

	body.menu-open .m2-menu {
		filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
	}

	body.menu-open .cpp-breadcrumb {
		color: #777;
	}

	body.menu-open .cpp-breadcrumb a,
	body.menu-open .cpp-breadcrumb .is-active {
		background: #f7f7f7;
		border-color: #e4e4e4;
	}

	/* =========================================
	   BOTTOM INDICATOR
	========================================= */

	.m2-menu .menu-item::after {
		content: "";
		position: absolute;

		left: 12px;
		right: 12px;
		bottom: -2px;

		height: 3px;

		background: var(--color-primary-strong);
		border-radius: 3px;

		opacity: 0;
		transform: scaleX(0.7);
		transform-origin: center;

		transition: opacity .2s ease, transform .2s ease;

		z-index: 3000;
		pointer-events: none;
	}

	.m2-menu .menu-item.is-active::after {
		opacity: 1;
		transform: scaleX(1);
	}

	@media (hover: hover) {
		.m2-menu .menu-item:hover::after {
			opacity: 0.7;
			transform: scaleX(1);
		}
	}
}