/* index.php bootstrap5.30 */
        body {
            background-color: #f8f9fa;
        }

        .filter-sidebar {
            background: white;
            border-radius: 12px;
            position: sticky;
            top: 20px;
            height: fit-content;
        }

        .product-card {
            background: white;
            border-radius: 12px;
            transition: all 0.3s ease;
            height: 100%;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .product-image {
            height: 200px;
            object-fit: cover;
            border-radius: 12px 12px 0 0;
        }

        .price {
            color: #2563eb;
            font-weight: 600;
			font-size: 1.275rem;
        }

        .discount-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #dc2626;
            color: white;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.875rem;
        }

        .wishlist-btn {
            position: absolute;
            top: 10px;
            left: 10px;
            background: white;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .wishlist-btn:hover {
            background: #fee2e2;
            color: #dc2626;
        }

        .rating-stars {
            color: #fbbf24;
        }

        .category-badge {
            background: #e5e7eb;
            color: #4b5563;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.75rem;
        }

        .filter-group {
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
        }

        .color-option {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
        }

        .color-option.selected::after {
            content: '';
            position: absolute;
            inset: -3px;
            border: 2px solid #2563eb;
            border-radius: 50%;
        }

        .sort-btn {
            background: white;
            border: 1px solid #e5e7eb;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .sort-btn:hover {
            background: #f3f4f6;
        }

        .cart-btn {
            background: #2563eb;
            color: white;
            border: none;
            transition: all 0.2s;
        }

        .cart-btn:hover {
            background: #1d4ed8;
            transform: translateY(-2px);
        }
		
		
		
		
		
		
article,aside,figcaption,figure,footer,header,hgroup,main,nav,section {

    display: block

}

/* Critical Custom Styles */

.logo-img {

	background-image: url("/assets/img/magnets-houston-logo.jpg");

	background-position: top left;

	background-size: 8%;

	background-repeat: no-repeat;
	margin-left: 20px;

}



.main-heading {

	text-transform: uppercase !important;

	text-align: center!important;

	

}



.sub-heading {

	text-align: center!important;

}





/* Phone Box - Email Box */

.phone-box, .email-box {

	font-size: 16px;

	font-weight: bold;

	color: white;

	padding: 6px;

}

/* Phone Box */

.phone-box {

	background-color: darkgreen;

}

/* Email Box */

.email-box {

	background-color: darkblue;

}







/* Green Box */

.green-box {

	background-color: green;

	font-weight: bold;

	color: white;

	padding: 1px 3px;

}

.green-box:hover{

	text-decoration: none;

	color: black;

}

/* Red Box */

.red-box {

	background-color: red;

	font-weight: bold;

	color: white;

	padding: 1px 3px;

}



.orange-box {

	background-color: Tomato;

	font-weight: bold;

	color: white;

	padding: 1px 3px;

}



/* Make Success Alerts Green */

.alert.alert-success {

	/*background-color: green;

}



/* Make Danger Alerts Red */

.alert-danger {

	/*background-color: red;

}



/* Make Navbar Links White And Bigger */

.navbar-dark .navbar-nav .nav-link {

	color: rgb(250, 250, 250);

	font-size: 1.1rem;

}











/* Set Boldness */

b, strong, h1, h2, h3, h4, h5, h6,

.h1, .h2, .h3, .h4, .h5, .h6 {

	font-weight: bold;

}



/* Set Form Field Padding */

.form-field-padding {

	padding-left: 4px;

	padding-right: 4px;

}



/* Margins */

.mb5 {

	margin-bottom: 5px;

}



.ml-12 {

	margin-left: -12px;

}



.cmb-5 {

  margin-bottom: 3.5rem !important; }



/* Margin For Address Line 2 In Footer */

.mr-address {

    margin-right: 2.05rem!important

}



.mb-social {

  margin-bottom: 2.6rem !important; }



/* Makes X That Closes Alerts Whiter */

.close {

  /*opacity: .8;

}



/* Custom button for reCAPTCHA reset inside alert */

.btn-custom {

    color: #fff;

    background-color: red;

    border-color: #fff;

		padding: 0.22rem 0.5rem;

		border-radius: 0.2rem;

}

	.btn-custom:hover {

			color: red;

			background-color: #fff;

	}

	

	

.asterisks {

	color: red;

	font-size: 18px;

	font-weight: bold;

}



/* XS Screens Only (Cell Phones) */

@media (max-width: 575.98px) {

	.main-heading {

		font-size: 1.7rem

	}



	.sub-heading, .smaller-xs {

		font-size: 1.3rem

	}

	

	.logo-img {

		background-image: none;

	}

}



/* SM To MD Screens Only (Cell Phone Landscape, Some Tablets) */

@media (min-width: 576px) and (max-width: 767.98px) {

	.main-heading {

		font-size: 1.9rem

	}



	.sub-heading {

		font-size: 1.45rem

	}

	

}



/* MD Screens And Below */

@media (max-width: 991.98px) {

	.wording-offset {

		margin-left: 8.33333%; }

}



/* Performance - Block Loading Of Google ReCaptcha Image/Fonts */

@font-face {

	font-family:"Roboto";

	font-display:block;

	src: url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');

	src: url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');

}



@font-face {

	font-family:"Roboto";

	font-display:block;

	src: url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');

	src: url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');

}





		

.smaller {

	font-size: 90%;

}

/* MARGINS */
.mb-z-0 {
	margin-bottom:0px;
}
.mb-p-2 {
	margin-bottom:2px;
}
.mb-m-2 {
	margin-bottom:-2px;
}

.mb-p-5 {
	margin-bottom:5px;
}
.mb-m-5 {
	margin-bottom:-5px;
}
.mt-p-5 {
	margin-top:5px;
}
.mt-m-5 {
	margin-top:-5px;
}
	
.mb-p-10 {
	margin-bottom:10px;
}
.mb-m-10 {
	margin-bottom:-10px;
}

.mt-p-15 {
	margin-top:15px;
}
.mt-m-15 {
	margin-top:-15px;
}
.mb-p-15 {
	margin-bottom:15px;
}
.mb-m-15 {
	margin-bottom:-15px;
}

.mt-p-25 {
	margin-top:25px;
}
.mt-m-25 {
	margin-top:-25px;
}








a.site-map {

	color: black; 

}



/* Remove Underline From Links - Set Color To Gray */

a.site-map:hover {

	text-decoration: none;

	color: gray;

}

/* make bootstrap icons bolder - temp fix until option available */
.bi-bolder { -webkit-text-stroke: .55px; }