main{background: #ffffff;}

#breadcrumb{padding: 20px 0 10px;}

#productList{padding: 10px 0 20px;}
#productList>h2{font-weight: 500; font-size: 18px;	line-height: 22px;	color: #676767; margin: 0 0 20px;}
#productList .wrap{gap: 16px;	grid-template-columns: repeat(2, 1fr); align-items: start;}      
#productList .product {position: relative; display: grid; gap: 8px 8px; grid-template-columns: auto auto 1fr; align-content: space-between; background: #ffffff; border: 1px solid #E3E3E3;	overflow: hidden; padding: 0px 8px 0;	border-radius: 6px; height: 100%;}        
#productList .product>*{grid-column: span 3;}
#productList .product a {margin: 0 -8px;}
#productList .product img {aspect-ratio: 1 / 1;}
#productList .product h2 {font-weight: 600; font-size: 12px;	line-height: 14px;	color: #545454; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden; height: 28px;}
#productList .product select{width: 100%; font-weight: 400; font-size: 12px; line-height: 18px; color: #545454; margin: 0px; border:solid 1px #D3E0DF; border-radius:4px ; background: #ffffff;}
#productList .product select option{background: #f2f2f2; border: 0;}
#productList .product .price {font-weight: 600; font-size: 16px;	line-height: 19px;	color: #192E42; grid-column: span 1;}
#productList .product .mrp {font-weight: 500; font-size: 13px;	line-height: 19px;	color: #ACACAC; text-decoration: line-through; grid-column: span 1;}
#productList .product .discount {grid-column: span 2; font-weight: 600; font-size: 12px; line-height: 12px; color: #ffffff; padding: 6px 5px; margin: 3px 0px; background: #ff8b00; width: 77px; height: 24px; text-align: center; border-radius: 6px;}
#productList .product button{ font-weight: 600; font-size: 13px; line-height: 14px; padding: 8px 16px; margin: 0 -8px; border: 0; min-height: 30px;}
#productList .product .buy-now{ background: #506FD4; color: #ffffff; border-radius: 5px 5px 0 0;}
#productList .product .addToCartBtn{font-weight: 500; background: #673391; color: #ffffff; border-radius: 0 0 5px 5px;}

#pagination{padding: 0px 0 20px;}
#pagination .wrap{gap: 8px;	grid-template-columns: auto 1fr auto; align-items: center; justify-content: space-between;}   
#pagination label {grid-column: span 3; font-weight: 500; font-size: 11px;	line-height: 16px;	color: #676767;}
#pagination div {grid-column: span 2;}
#pagination .page-link {display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: 11px; line-height: 16px; color: #676767; background: #ffffff; min-width: 20px; height: 20px; margin-left: 8px; padding: 3px; border: solid 1px #707070; border-radius: 3px; cursor: pointer;}
#pagination .page-link:first-child {margin-left: 0px;}
#pagination .page-link.active {color: #ffffff; background: #343434;}
#pagination .ellipsis {cursor: not-allowed; pointer-events: none; opacity: 0.3;}
#pagination span {display: grid; grid-template-columns: auto auto;}
#pagination .page-link.prev, 
#pagination .page-link.next { font-weight: 500; font-size: 11px; line-height: 16px; /*min-width: 26px;*/ border-radius: 5px;}
#pagination .page-link.prev:before{content: "< Prev";}
#pagination .page-link.next:after {content: "Next >";}
#pagination .page-link.prev span, 
#pagination .page-link.next span {display: none;}
#pagination .page-link.prev.disabled, 
#pagination .page-link.next.disabled {cursor: not-allowed; pointer-events: none; opacity: 0.3; display: none;}

/*Responsive*/
@media screen and (min-width: 576px) {
 #productList{}
 #productList>h2{}
 #productList .wrap{}      
 #productList .product {}        
 #productList .product>*{}
 #productList .product img {}
 #productList .product h2 {}
 #productList .product .price {}
 #productList .product .mrp {}
 #productList .product .discount {}
 #productList .product button{}
 #productList .product .addToCartBtn{}
 #productList .product .buy-now{}

 #pagination{}
 #pagination .wrap{grid-template-columns: auto auto auto;}   
 #pagination label {grid-column: inherit;}
 #pagination div {grid-column: inherit;}
 #pagination .page-link {}
 #pagination .page-link:first-child {}
 #pagination .page-link.active {}
 #pagination .ellipsis {}
 #pagination span {}
 #pagination .page-link.prev, 
 #pagination .page-link.next { }
 #pagination .page-link.prev span, 
 #pagination .page-link.next span {}
 #pagination .page-link.prev.disabled, 
 #pagination .page-link.next.disabled {}
}

@media screen and (min-width: 768px) {
 #productList .wrap{grid-template-columns: repeat(3, 1fr);}
}

@media screen and (min-width: 992px) {
 #productList{}
 #productList>h2{font-weight: 600; font-size: 29px;	line-height: 35px;	margin: 0 0 30px;}
 #productList .wrap{gap: 10px;}      
 #productList .product {gap: 10px; padding: 0 16px 0;}        
 #productList .product>*{}
 #productList .product a {margin: 0 -16px;}
 #productList .product img {}
 #productList .product h2 {font-weight: 500; font-size: 17px;	line-height: 19px;	height: 40px}
 #productList .product select{font-size: 15px;		line-height: 20px;}
#productList .product select option{}
 #productList .product .price {font-weight: 500; font-size: 17px;	line-height: 29px;}
 #productList .product .mrp {font-size: 12px;	line-height: 29px;}
 #productList .product .discount {font-size: 14px;	line-height: 29px;  grid-column: span 1; font-weight: 600; font-size: 10px; line-height: 12px; color: #ffffff; padding: 6px 5px; margin: 3px 0px; background: #ff8b00; position: unset; right: 0; left: 0; top: 0; width: 77px; height: 24px; text-align: center; border-radius: 6px;}
 #productList .product button{ font-size: 16px; line-height: 19px; margin: 0 -16px; min-height: 35px;}
 #productList .product .addToCartBtn{}
 #productList .product .buy-now{ }

 #pagination{}
 #pagination .wrap{gap: 16px;	grid-template-columns: auto auto auto;}   
 #pagination label { font-weight: 500; font-size:16px;	line-height: 25px;}
 #pagination div {}
 #pagination .page-link {font-weight: 500; font-size: 17px; line-height: 17px; min-width:37px; height: 36px; margin-left: 16px; }
 #pagination .page-link:first-child {}
 #pagination .page-link.active {}
 #pagination .ellipsis {}
 #pagination span {}
 #pagination .page-link.prev, 
 #pagination .page-link.next {font-weight: 500; font-size: 14px; line-height: 19px; padding: 10px 14px;}
 #pagination .page-link.prev span, 
 #pagination .page-link.next span {display: inline-block;}
 #pagination .page-link.prev.disabled, 
 #pagination .page-link.next.disabled {}
}

@media screen and (min-width: 1200px) {
 #productList .wrap{gap: 10px;	grid-template-columns: repeat(5, 1fr);} 
}

@media screen and (min-width: 1400px) {}