.header-module {
	background: transparent;
	transition: background-color 200ms ease;
}

.header-shell {
	position: relative;
}

.header-module .header-bar {
	background: var(--background);
	justify-content: space-between;
	min-height: 0;

	.menu-items {
		display: flex;
		align-items: center;
		.nav-item-button {
			font-weight: 500;
			color: #fff;
			height: 100%;
			background-color: transparent;
			border: none;
			padding: 1.5rem;
		}
	}
	.menu-icons {
		display: flex;
		align-items: center;

		.hamburger-mobile {
			display:none
		}

		.nav-button:hover, .nav-button.show {
			border-color: #302F30;
			background: #FFF;
			color: #302F30;
		}
		.dropdown-menu {
			border-color: transparent;
			transform: translate(0px, 50px) !important;
			padding: 0;
			.dropdown-item {
				font-weight: 500;
				padding: 12px;
				&:hover{
					color: #FFF;
					background-color: var(--bs-btn-primary-background)
				}
			}
		}
		.dropdown-toggle:after {
			display:none !important;
		}
		.nav-button {
			color: #FFF;
		}
	}
}
.btn {
	gap: .5rem;
	font-weight: 500;
	.svg-icon{
		width: 1.5rem;
		height: 1.5rem;
		fill: currentColor;
		stroke: transparent;

		@media (max-width: 575.98px) {  
			width: 1rem;
			height: 1rem;
		}
	}
}
.header-module .header-logo {
	margin: 8px;
	transition: margin 200ms ease;
}


.header-module .header-logo img {
	display: block;
	height: 96px !important;
	width: auto !important;
	max-width: 100%;
	transition: height 200ms ease;
}

@media (max-width: 1399.98px) { 
	.header-module.is-scrolled .header-logo {
		margin: 0 !important;
	}
}

@media (max-width: 767.98px) {
	.header-module .header-logo img {
		height: 48px !important;
	}
	.header-module .header-logo {
		margin: 12px 0;
	}
}

@media (max-width: 575.98px) {
	.header-module .header-logo {
		margin: 0 !important;
	}
}

.header-module.is-scrolled {
	background: #fff;
	.header-bar {
		.menu-icons {
			.nav-button{
				color: #302F30;
			}
		}
		.menu-items {
			.nav-item-button {
				color: #302F30;
			}
		}
	}
}

.header-module.is-scrolled .header-logo img {
	height: 48px !important;
}

.header-module.is-scrolled .header-logo {
	margin: 12px 0;
}

.header-shell .mega-wrapper {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 10;
}

.mega-wrapper .mega-panel {
	padding: 2rem;
	width: 100%;	

	.main-title {
		color: #555;
		display: block;
		margin-bottom: 1rem;
	}

	.close-button{
		border-radius: 50%;
	}

	.menu-footer {
		padding-top: 2.5rem;
		gap: 2rem;
		justify-content: center;

		a{
			font-weight: 500;
			color: #555;
			text-decoration: none;
			&:hover {
				color: #A70919;
				text-decoration: underline;
			}
		}
	}
}

.mega-wrapper .mega-panel-inner {
	display: flex;
	gap: 2rem;
}

.mega-wrapper .mega-panel-col {
	flex: 1;
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.mega-highlight{
		display: flex;
		gap: 1rem;
		.mega-highlight-card{
			width: 100%;
			position: relative;
			display: block;
			overflow: hidden;
			height: auto;
			max-height: 343px;
			&::after{
				content: "";
				position: absolute;
				inset: 0;
				opacity: 1;
				background: linear-gradient(0, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
				pointer-events: none;
			}
			&::before {
				content: "";
				position: absolute;
				inset: 0;
				background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 100%);
				opacity: 0;
				transition: opacity 200ms ease; 
				pointer-events: none;
				z-index: 2; 
			}

			&:hover::before {
				opacity: 1; 
			}
			img{
				aspect-ratio: 1;
				display: block;
				height: 100%;
				width: 100%;
				object-fit: cover;
				object-position: center;
			}
			.mega-highlight-copy{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				padding: calc(1rem * 4) 1rem calc(1rem * 2);
				color: #fff;
				z-index: 3;
				.mega-highlight-lead {
					font-size: 12px;
				}
			}
		}
	}
	.mega-list{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		.mega-list-item {
			a {
				color: #555;
				text-decoration: none;
				margin-bottom: .75em;
				display: block;
				&:hover {
					color: #A70919;
				}
			}
			.mega-sublist {
				.mega-sublink {
					font-weight: 400;
				}
			}
		}
	}
}

.header-module .nav-item-button.is-active {
	background: #F0F0F0 !important;
	color: #302F30 !important;
}

.mega-wrapper .mega-panel {
	background: #F0F0F0;
}



@media (max-width: 575.98px) {  }

@media (max-width: 767.98px) {  }

@media (max-width: 991.98px) {  }

@media (max-width: 1199.98px) {
	.shop_button_title{
		display: none;
	}

	.mobile-menu {
		position: fixed;
		inset: 0;             
		z-index: 9999;
		background: #F0F0F0;  
		width: 100vw;
		height: 100vh;
		overflow-y: auto;      
		-webkit-overflow-scrolling: touch;
	}

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

	.header-module {
		.header-bar {
			.menu-icons {
				.hamburger-mobile {
					background-color: #302F30;
					display: block;
				}
			}
			.menu-items {
				display: none;
			}
		}
	}

	/* === Top-level (accordion headers) -> behave like your desktop nav buttons / mega titles === */
	.mobile-menu .accordion-button,
	.mobile-menu .mobile-menu__toplink {
		font-size: 24px;
		font-weight: 500;
		color: #555;
		background: transparent;
		border: none;
		box-shadow: none;
		text-decoration: none;
		padding: 1.5rem 0; /* same "chunky" feel as .nav-item-button */
	}

	/* remove Bootstrap chevron to match desktop button style */
	.mobile-menu .accordion-button::after {
		display: none;
	}

	/* open state similar to your desktop active state */
	.mobile-menu .accordion-button:not(.collapsed) {
		color: #302F30;
		background: #F0F0F0;
	}

	.mobile-menu .accordion-button:focus {
		box-shadow: none;
	}

	/* === Level 2 links -> match mega-list links === */
	.mobile-menu .mobile-menu__link {
		font-weight: 500;
		color: #555;
		text-decoration: none;
		display: block;
		padding: .5rem 0;
	}

	.mobile-menu .mobile-menu__link:hover {
		color: #A70919;
		text-decoration: none;
	}

	/* === Level 3 links -> match mega-sublink (lighter weight) === */
	.mobile-menu .mobile-menu__sublink {
		font-weight: 400;
		color: #555;
		text-decoration: none;
		display: block;
		padding: .25rem 0 .25rem 1rem;
	}

	.mobile-menu .mobile-menu__sublink:hover {
		color: #A70919;
		text-decoration: none;
	}

	/* === Footer -> match desktop footer hover (underline) === */
	.mobile-menu {

		.accordion-body {
			padding: 0;
			.mobile-menu__highlight{
				padding: 1rem 0 .5rem;
				.mobile-menu__highlight-card{
					display: flex;
					height: 75px;
					width: 100px;
					margin: .5rem 0;
					font-weight: 500;
					color: #555;
					text-decoration: none;
					align-items: center;
					.mobile-menu__highlight-copy {
						padding: 1rem;
					}
					img{
						height: auto;
						width: auto;
					}
				}
			}
		}
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.accordion {
			--bs-accordion-bg: transparent;

			.accordion-item {
				border-top:  1px rgb(48 47 48 /0.5) solid;
				border-left: none;
				border-right: none;
				&:last-child {
					border-bottom: 1px rgb(48 47 48 / 0.5) solid;
				}

				.mobile-menu__toplink {
					color: #555;
				}

				.accordion-button {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.icon-minus { display: none; }

					&:not(.collapsed) {
						.icon-plus { display: none; }  
						.icon-minus { display: inline; } 
					}
					svg {
						fill: currentcolor;
						height: 1rem;
						width: 1 rem;
					}
				}
			}
		}
		.mobile-menu__footer {
			margin-top: 2rem;
			display: flex;
			flex-direction: column;
			gap: .75rem;
			a {
				font-weight: 500;
				color: #555;
				text-decoration: none;
			}
		}
	}
	.mobile-menu  {
		padding: 2rem;
		.mobile-menu__inner {
			.mobile-menu__close {
				margin-bottom: 1rem;
				padding: 0.25rem;
				border-radius: 50%;
			}
			.mobile-menu__footer a:hover {
				color: #A70919;
				text-decoration: underline;
			}
		}

	}
}
}

@media (max-width: 1399.98px) {  }