/* ===========================
	1. GLOBAL UTILITIES
=========================== */

.bg-color { background-color: #efefef !important; }

/* ===== Colors ===== */
.text-brown{color: #4D4738 !important;} 

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

/* ---------- Navbar ----------*/
.navbar-content-container{
	display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.breadcrumb{display: none !important;}

/* ---------- Home Page ----------*/

/* ===== Banner ===== */
.banner-parent-container{
	background-image: url(https://store-media.mpowerpromo.com/690d037f79610de1cb22b677/pages/690d038279610de1cb22b9c5/CCB%20Store%20Banner%20%281600%20x%20400%20px%29-1774565706451.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: clamp(100px, 25vw, 1024px);
}
/* ===== Home Page Product Section ===== */
.home-page-body{
	padding-top: 5%;
  padding-bottom: 5%;
}
.row-container{
	max-width: 100%;
	padding-left: 5%;
	padding-right: 5%;
}
.row-item{max-width: 25% !important;}

/* ---------- Product Page ----------*/

.product-view-body{
	  padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
}
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)'; } 

/* ---------- Footer ----------*/

.footer-content-container{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  max-width: 100% !important;
}

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

/* ---------- Tablet + Mobile Shared Utilities ---------- */
@media (max-width: 991px) {
  .responsive-display-none { display: none !important; }
  .responsive-padding-1 { padding: 1rem !important; }
  .responsive-min-height { height: 80px !important; }
  .responsive-align-content-center { align-content: center !important; }
  .responsive-justify-space-between { justify-content: space-between !important; }
}
/* ---------- Tablet Only ---------- */
@media (max-width: 991px) and (min-width: 577px){
	.row-item{min-width: 50% !important;}
}
/* ---------- Mobile Only ---------- */
@media (max-width: 576px){
	.row-item{min-width: 80% !important;}
	.banner-parent-container{
		background-attachment: scroll !important;
		min-height: 100px !important;
	}
	#mPowerProductView > div > div.row > div.col-md-6.mb-3.pt-2.product-image-col > div { z-index: 50 !important;}
}