/*——————————————————————————————————————————————————————————————————————————————
/  Masthead Overrides - Converted from Sass
/  This file contains CSS overrides for masthead components that were
/  previously compiled from Sass but now work independently
——————————————————————————————————————————————————————————————————————————————*/

/*——————————————————————————————————————————————————————————
/  Loyalty Section Styles
——————————————————————————————————————————————————————————*/
.mh__loyalty {
	display: none;
}

/* Large breakpoint (1024px and up) */
@media screen and (min-width: 1024px) {
	.mh__loyalty {
		align-items: center;
		color: #101720;
		display: inline-flex;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
	}

	.mh__loyalty .loyalty-icon {
		padding-right: 5px;
	}
}

/*——————————————————————————————————————————————————————————
/  Phone Section Styles
——————————————————————————————————————————————————————————*/
.mh__phone {
	color: #101720;
	display: none;
	font-size: 16px;
	letter-spacing: 0.03em;
	margin-right: 34px;
	line-height: 1.7;
}

@media screen and (min-width: 1024px) {
	.mh__phone {
		display: block;
	}
}

.mh__phone em {
	font-style: normal;
}

.mh__espanol {
	color: #999;
	font-size: 14px;
	letter-spacing: 0;
	padding-right: 4px;
}

/*——————————————————————————————————————————————————————————
/  Secondary Navigation Container
——————————————————————————————————————————————————————————*/
.mh__secondary {
	display: flex;
	align-items: center;
}

/*——————————————————————————————————————————————————————————
/  Loyalty Container
——————————————————————————————————————————————————————————*/
.loyalty__container {
	display: flex;
	align-items: center;
	margin-left: 20px;
}

/*——————————————————————————————————————————————————————————
/  Mobile Loyalty Toggle
——————————————————————————————————————————————————————————*/
.mh__loyalty-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	margin-left: 10px;
	border: none;
	background: none;
	text-decoration: none;
	color: inherit;
}

.mh__loyalty-toggle:hover {
	opacity: 0.8;
}

/* Mobile styles for loyalty toggle (640px and under) */
@media screen and (max-width: 640px) {
	.mh__loyalty-toggle {
		margin-left: 0;
		padding: 0;
	}
}

/*——————————————————————————————————————————————————————————
/  Additional Masthead Overrides
/  Add more converted styles here as needed
——————————————————————————————————————————————————————————*/