/* ===========================
	1. GLOBAL UTILITIES
=========================== */
/* ===== Spacing ===== */
.px-5p {
  padding-left: 5%;
  padding-right: 5%;
}

/* ===============================
	2. COMPONENT-SPECIFIC CSS
=============================== */

/* ---------- Navbar ---------- */
#infobar:not(:empty) {margin-top: 7rem; }
.navbar-parent-container{background: white;}
.navbar{
	position: fixed;
	z-index: 1021;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)) !important;
	top: 0;
	left: 0;
	width: 100%;
	justify-content: space-around !important;
}
.breadcrumb{display: none !important;}

/*Home Page Banner*/
.banner-parent-container{
	position: relative;
	background-image: url(https://store-media.mpowerpromo.com/68b887a5de69b508de7b27c5/pages/68b887a9de69b508de7b2b12/banner-1756930079241.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	justify-content: center;
	height: clamp(116px, 82vh, 1316px) !important;
}
.banner-overlay {
  background: rgba(0, 0, 0, 0.6);    
  padding: 1rem 2rem;
  border-radius: 8px;                
}

/*Home Page Product Section*/
.home-page-body{
	padding-top: 1%;
  padding-bottom: 1%;
}
.row-container{max-width: 100%;}
.product-row{justify-content: center;}
.row-item{max-width: 25% !important;}

/*Product Page*/
.product-view-body{padding-top: 5%;}
.product-header-skeleton{padding-top: 3rem;}
.product-image-col{padding-top: 4rem !important;}
.vue-lb-button-close{
	margin-top: 6rem;
	z-index: 1;
}
#mPowerProductView > div > div.row > div.col-md-6.mb-3.pt-2.product-image-col > div > div > div > span > div:nth-child(2) > div > div.vue-lb-content > div.vue-lb-figure > img {
	padding-bottom: 25px; 
	margin-top: 7rem;
}
img.vue-lb-modal-image{background-color: white !important;}
.vue-lb-info{display: none;}
.vue-lb-footer{padding-right: 1rem !important;}
.product-configure-part-label{ display: none }
.product-configure-part-count:after{ content: ' Color(s)'; } 


/* Cart Page */
h3.mb-0{margin-top: 8rem !important;}

/* Checkout Page */
.checkout-container {margin-top: 8rem !important;}

/*Footer*/
.footer-content-container{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  max-width: 100% !important;
  margin: 0 !important;
	background-color: #222 !important;
}

/* ===============================
	3. Media CSS
=============================== */

/* ---------- Tablet View ---------- */
@media (max-width: 1024px) and (min-width: 577px){ 
	.row-item{min-width: 50% !important;}
}
/* ---------- Mobile View ---------- */
@media (max-width: 576px){
	.banner-parent-container{
	background-attachment: scroll !important;
	min-height: 400px !important;
	height: 400px !important;
	}
	#infobar .flex-column {flex-direction: row !important; }
	body:has(#infobar:not(:empty)) .product-image-col {padding-top: 2rem !important;}
	body:has(#infobar:not(:empty)) h3.mb-0 {margin-top: 2rem !important;}
	body:has(#infobar:not(:empty)) .checkout-container  {margin-top: 2rem !important;}
	.row-item{min-width: 80% !important;}
	.product-image-col{padding-top: 8rem !important;}
	#mPowerProductParts > div > div > div.multiselect__content-wrapper{
	position: relative;
	z-index: 1050;
	}
}