/* 	For more information and themable vars, see
	https://design-docs.commerce7.com/docs/css-overrides#variable-list
 */

:root {
	--c7-font-family: "proxima-nova", Helvetica, Arial, sans-serif;

	--c7-primary-color: #682138;
	--c7-primary-color-text: #682138;
	--c7-primary-color-dark: #711938;
	--c7-primary-color-focus: #711938;

	--c7-header-text-color: #fff;
	--c7-cart-count-bg: #B88045;

	--c7-header-text-color: var(--c7-primary-color);

}


/* Commerce 7 Integration theme styles */

/**
 * [1.] give the profile btn more room for a long client name when logged in
 */

.js-c7-desktop {
	display: grid;
	justify-content: center;
	align-content: center;
	padding-bottom: 6px;
	margin-left: 4px;
	margin-right: -12px; /* 1. */
}


.js-c7-mobile {
	position: fixed;
	top: 5px;
	left: 18px;
	z-index: 99;
}



/* cart icon styles */
#c7-cart {
	width: 48px;
	float: left;
}

.c7-profile-button {
	border-top: 1px solid #832144;
	border-bottom: 1px solid #832144;


}

/* mobile */
.c7-user-nav__account > a,
.c7-user-nav__cart > button {
	padding: 2px 0;
}

.c7-user-nav__account {
	display: block;
}

@media (hover: none) {
	.c7-user-nav__account__name:before {
		content: '';
		display: inline-block;
		width: 16px;
		height: 16px;
		background: url(../images/icon_user-account.svg) no-repeat center center;
		background-size: contain;
		margin-right: 4px;
		margin-top: -2px;
		vertical-align: middle;

	}
}

/* desktop menu */
@media screen and (min-width: 59.125em) { /* 946px */

	/* login button */
	.c7-user-nav__account {
		display: inline-block;
		padding-left: 8px;
		padding-right: 8px;
	}
	.c7-user-nav__account__name {
		text-transform: uppercase;
		letter-spacing: -0.5px;
	}
	.c7-profile-button {
		border: 2px solid #832144;
		display: grid;
		justify-content: center;
		align-items: center;
		margin-top: -2px;
	}


	.c7-user-nav__account > a,
	.c7-user-nav__cart > button {
		padding: 0 0;
	}
	.js-c7-mobile {
		display: none;
	}
}

@media screen and  (min-width: 59.125em) and (max-width: 75em) { /* 946px / 1200px */
	.c7-user-nav__account__name {
		text-transform: unset;
	}
}

@media screen and (min-width: 75em) { /* 1200px */
	.js-c7-desktop {
		margin-left: 8px;
	}


}

.c7-btn--primary:hover,
.c7-btn--primary:focus,
.c7-btn--primary--small:hover,
.c7-btn--primary--small:focus {
	color: var(--c7-primary-button-text-color);
}