/*==========================================
RK SPARE PARTS
SHOP PAGE CSS
PART 1
==========================================*/

.shop-hero{

background:linear-gradient(135deg,#0d6efd,#198754);

padding:70px 0;

color:#fff;

position:relative;

overflow:hidden;

}

.shop-hero::before{

content:"";

position:absolute;

width:350px;

height:350px;

background:rgba(255,255,255,.08);

border-radius:50%;

top:-120px;

right:-120px;

}

.shop-hero::after{

content:"";

position:absolute;

width:220px;

height:220px;

background:rgba(255,255,255,.06);

border-radius:50%;

bottom:-80px;

left:-60px;

}

.shop-hero-content{

position:relative;

z-index:2;

}

.shop-hero h1{

font-size:42px;

font-weight:700;

margin-bottom:12px;

}

.shop-hero p{

font-size:17px;

opacity:.95;

margin-bottom:25px;

}

.shop-breadcrumb{

display:flex;

align-items:center;

gap:12px;

font-size:15px;

}

.shop-breadcrumb a{

color:#fff;

text-decoration:none;

}

.shop-breadcrumb strong{

font-weight:600;

}



.shop-toolbar{

background:#fff;

padding:25px 0;

box-shadow:0 8px 30px rgba(0,0,0,.05);

margin-bottom:35px;

}

.shop-search{

display:flex;

position:relative;

}

.shop-search input{

width:100%;

height:52px;

border:1px solid #ddd;

border-radius:50px;

padding-left:20px;

padding-right:65px;

font-size:15px;

transition:.3s;

}

.shop-search input:focus{

outline:none;

border-color:#198754;

box-shadow:0 0 15px rgba(25,135,84,.15);

}

.shop-search button{

position:absolute;

right:5px;

top:5px;

width:42px;

height:42px;

border:none;

background:#198754;

color:#fff;

border-radius:50%;

cursor:pointer;

transition:.3s;

}

.shop-search button:hover{

background:#157347;

transform:rotate(8deg);

}

.shop-count{

font-weight:600;

font-size:16px;

text-align:center;

}

.shop-count strong{

color:#198754;

font-size:20px;

}

.shop-toolbar select{

height:52px;

border-radius:50px;

padding-left:18px;

border:1px solid #ddd;

}

.shop-toolbar select:focus{

border-color:#198754;

box-shadow:0 0 12px rgba(25,135,84,.15);

}

.shop-section{

padding:20px 0 70px;

background:#f8f9fa;

min-height:700px;

}
/*==========================================
SHOP SIDEBAR
PART 2
==========================================*/

.shop-sidebar{

position:sticky;

top:110px;

}

.filter-card{

background:#fff;

border-radius:15px;

padding:20px;

margin-bottom:20px;

box-shadow:0 8px 25px rgba(0,0,0,.06);

display:flex;

justify-content:space-between;

align-items:center;

}

.filter-card h4{

font-size:20px;

font-weight:700;

margin:0;

color:#222;

}

.filter-card h4 i{

color:#198754;

margin-right:8px;

}

.clear-filter{

background:#198754;

color:#fff;

padding:8px 15px;

border-radius:30px;

font-size:13px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.clear-filter:hover{

background:#157347;

color:#fff;

text-decoration:none;

transform:translateY(-2px);

}



.filter-box{

background:#fff;

border-radius:15px;

padding:20px;

margin-bottom:20px;

box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.filter-box h5{

font-size:18px;

font-weight:700;

margin-bottom:18px;

padding-bottom:10px;

border-bottom:1px solid #eee;

color:#222;

}

.filter-box ul{

padding:0;

margin:0;

list-style:none;

}

.filter-box ul li{

margin-bottom:8px;

}

.filter-box ul li:last-child{

margin-bottom:0;

}



.filter-box ul li a{

display:flex;

justify-content:space-between;

align-items:center;

padding:11px 15px;

border-radius:10px;

text-decoration:none;

font-size:15px;

font-weight:500;

color:#555;

transition:.30s;

}

.filter-box ul li a:hover{

background:#198754;

color:#fff;

padding-left:22px;

}



.filter-box ul li a.active{

background:#198754;

color:#fff;

font-weight:600;

}



.stock-info{

display:flex;

flex-direction:column;

gap:12px;

}

.stock-info div{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

padding:10px 12px;

background:#f8f9fa;

border-radius:10px;

font-weight:500;

}

.stock-info div i{

font-size:18px;

width:22px;

text-align:center;

}



.mobile-filter-box{

margin-bottom:30px;

}

.mobile-filter-box h5{

font-weight:700;

margin-bottom:15px;

}

.mobile-filter-box ul{

list-style:none;

padding:0;

margin:0;

}

.mobile-filter-box ul li{

margin-bottom:8px;

}

.mobile-filter-box ul li a{

display:block;

padding:12px 15px;

border-radius:10px;

background:#f8f9fa;

color:#333;

text-decoration:none;

transition:.30s;

font-weight:500;

}

.mobile-filter-box ul li a:hover{

background:#198754;

color:#fff;

padding-left:20px;

}



.offcanvas{

border-radius:0 20px 20px 0;

}

.offcanvas-header{

background:#198754;

color:#fff;

}

.offcanvas-header .btn-close{

filter:invert(1);

}
/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:991px){

.shop-sidebar{

position:relative;

top:0;

margin-bottom:30px;

}

.shop-toolbar .row>div{

margin-bottom:15px;

}

.shop-count{

text-align:left;

}

.product-image{

height:220px;

}

}

@media(max-width:768px){

.shop-hero{

padding:50px 0;

}

.shop-hero h1{

font-size:30px;

}

.shop-hero p{

font-size:15px;

}

.product-image{

height:200px;

}

.product-body{

padding:16px;

}

.product-body h4{

font-size:16px;

line-height:24px;

height:auto;

}

.sale-price{

font-size:22px;

}

.product-buttons{

flex-direction:column;

}

.product-buttons a,

.product-buttons button{

width:100%;

}

.buy-now-btn{

height:45px;

}

}

@media(max-width:576px){

.shop-toolbar{

padding:18px;

}

.shop-search input{

height:48px;

}

.shop-search button{

height:38px;

width:38px;

top:5px;

right:5px;

}

.product-image{

height:180px;

padding:15px;

}

.discount-badge{

font-size:11px;

padding:5px 10px;

}

}
/*==========================================
PAGINATION
==========================================*/

.shop-pagination{

margin-top:50px;

}

.shop-pagination .pagination{

gap:10px;

}

.shop-pagination .page-link{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

border:none;

background:#fff;

color:#333;

font-weight:600;

box-shadow:0 5px 18px rgba(0,0,0,.08);

transition:.3s;

}

.shop-pagination .page-link:hover{

background:#198754;

color:#fff;

transform:translateY(-3px);

}

.shop-pagination .page-item.active .page-link{

background:#198754;

color:#fff;

}



/*==========================================
BUTTON EFFECTS
==========================================*/

.btn{

transition:.3s;

}

.btn-success{

background:#198754;

border-color:#198754;

}

.btn-success:hover{

background:#157347;

border-color:#157347;

transform:translateY(-2px);

}

.btn-outline-success:hover{

transform:translateY(-2px);

}



/*==========================================
IMAGE LOADING EFFECT
==========================================*/

.product-image{

position:relative;

}

.product-image::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(

120deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transform:translateX(-120%);

transition:.8s;

}

.product-card:hover .product-image::after{

transform:translateX(120%);

}



/*==========================================
CARD HOVER
==========================================*/

.product-card{

cursor:pointer;

}

.product-card:hover .sale-price{

color:#0f8a45;

}

.product-card:hover .product-category{

background:#198754;

color:#fff;

}



/*==========================================
SCROLLBAR
==========================================*/

.filter-box ul{

max-height:280px;

overflow-y:auto;

padding-right:5px;

}

.filter-box ul::-webkit-scrollbar{

width:6px;

}

.filter-box ul::-webkit-scrollbar-thumb{

background:#198754;

border-radius:20px;

}

.filter-box ul::-webkit-scrollbar-track{

background:#eee;

}



/*==========================================
OFFCANVAS
==========================================*/

.offcanvas-body{

padding:20px;

}

.offcanvas-body .filter-box{

box-shadow:none;

padding:0;

}



/*==========================================
PRODUCT ANIMATION
==========================================*/

.product-card{

animation:fadeProduct .5s ease;

}

@keyframes fadeProduct{

0%{

opacity:0;

transform:translateY(25px);

}

100%{

opacity:1;

transform:translateY(0);

}

}



/*==========================================
RESPONSIVE EXTRA
==========================================*/

@media(max-width:1200px){

.product-body h4{

font-size:17px;

}

}

@media(max-width:992px){

.shop-toolbar{

padding:20px;

}

.filter-card{

margin-bottom:15px;

}

}

@media(max-width:768px){

.shop-pagination .page-link{

width:40px;

height:40px;

font-size:14px;

}

.shop-count{

margin:15px 0;

}

.shop-toolbar select{

margin-top:10px;

}

}

@media(max-width:576px){

.shop-hero{

text-align:center;

}

.shop-breadcrumb{

justify-content:center;

}

.product-card{

border-radius:15px;

}

.product-image{

height:170px;

}

.sale-price{

font-size:20px;

}shop-hero

.product-buttons{

gap:8px;

}

.shop-pagination .pagination{

gap:6px;

}

.shop-pagination .page-link{

width:36px;

height:36px;

font-size:13px;

}

}



/*==========================================
END
==========================================*/

/*=========new code============*/
.shop-hero{
background:linear-gradient(135deg,#0d6efd,#198754);
padding:35px 0;
position:relative;
overflow:hidden;
}

.shop-hero h1{
font-size:38px;
margin-bottom:8px;
}

.shop-hero p{
font-size:16px;
margin-bottom:12px;
}
.product-card{

border-radius:16px;

overflow:hidden;

height:100%;

display:flex;

flex-direction:column;

}

.product-body{

padding:16px;

}

.product-body h4{

font-size:22px;

line-height:30px;

height:60px;

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

margin-bottom:10px;

}
.product-image{

height:220px;

padding:20px;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

}

.product-image img{

width:100%;

height:180px;

object-fit:contain;

transition:.35s;

}

.product-card:hover img{

transform:scale(1.08);

}
.save-price{

display:inline-block;

background:#eaf7ef;

color:#198754;

padding:6px 12px;

border-radius:20px;

font-size:13px;

font-weight:600;

margin-bottom:12px;

}
.product-buttons{

display:flex;

gap:10px;

margin-top:15px;

}

.product-buttons .btn{

height:45px;

border-radius:10px;

font-weight:600;

}

.buy-now-btn{

margin-top:10px;

height:45px;

border-radius:10px;

}
.filter-box{

transition:.3s;

}

.filter-box:hover{

transform:translateY(-3px);

box-shadow:0 20px 35px rgba(0,0,0,.08);

}
.shop-toolbar{

position:sticky;

top:78px;

z-index:90;

}
.d-lg-none.btn{

border-radius:40px;

padding:10px 18px;

font-weight:600;

}
.floating-call{

bottom:95px;

}

.floating-whatsapp{

bottom:25px;

}
.shop-count{

background:#fff;

padding:12px 20px;

border-radius:40px;

box-shadow:0 10px 20px rgba(0,0,0,.05);

}
.shop-search input{

background:#fff;

font-size:16px;

}
/*================new card design==============*/
.product-body h4{

font-size:19px !important;

font-weight:600 !important;

line-height:28px !important;

height:56px !important;

margin:8px 0 12px !important;

overflow:hidden !important;

display:-webkit-box !important;

-webkit-line-clamp:2 !important;

-webkit-box-orient:vertical !important;

letter-spacing:0 !important;

}

.product-body h4 a{

color:#222 !important;

text-decoration:none !important;

transition:.3s !important;

}

.product-body h4 a:hover{

color:#198754 !important;

}
.product-category{

display:inline-block !important;

background:#eef8f1 !important;

color:#198754 !important;

padding:4px 10px !important;

border-radius:20px !important;

font-size:11px !important;

font-weight:700 !important;

margin-bottom:8px !important;

text-transform:uppercase !important;

width:auto !important;

}
.product-brand{

font-size:15px !important;

color:#666 !important;

margin:10px 0 !important;

}

.product-brand strong{

color:#222 !important;

font-weight:700 !important;

}
.product-price{

display:flex !important;

align-items:center !important;

gap:12px !important;

margin:12px 0 !important;

}

.sale-price{

font-size:30px !important;

font-weight:700 !important;

color:#198754 !important;

}

.old-price{

font-size:16px !important;

color:#9a9a9a !important;

}
.save-price{

display:inline-flex !important;

align-items:center !important;

background:#eef8f1 !important;

padding:6px 12px !important;

font-size:12px !important;

border-radius:20px !important;

margin-bottom:10px !important;

}
.stock-line{

margin-bottom:15px !important;

}

.in-stock{

padding:6px 12px !important;

font-size:13px !important;

border-radius:20px !important;

}
.product-buttons{

display:flex !important;

gap:10px !important;

margin-top:12px !important;

}

.product-buttons .btn{

height:46px !important;

font-size:15px !important;

font-weight:600 !important;

border-radius:10px !important;

}

.buy-now-btn{

display:block !important;

margin-top:10px !important;

padding:12px !important;

background:#198754 !important;

color:#fff !important;

text-align:center !important;

border-radius:10px !important;

font-weight:600 !important;

text-decoration:none !important;

}

.buy-now-btn:hover{

background:#157347 !important;

color:#fff !important;

}
.product-body{

padding:18px !important;

}

.product-card{

border-radius:16px !important;

box-shadow:0 10px 25px rgba(0,0,0,.08) !important;

}