.product-section{
  padding:90px 20px;
  background:#f9f9f9;
  background-image:linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size:40px 40px;
}

.ps-header{text-align:center;max-width:780px;margin:auto;margin-bottom:50px;}
.ps-header h2{font-size:32px;font-weight:600;color:#111;}
.ps-header h2 span{color:#2563eb;}
.ps-header p{color:#555;margin-top:10px;}

.ps-slider-wrapper{position:relative;max-width:1300px;margin:auto;display:flex;align-items:center;justify-content:center;}
.ps-slider{overflow:hidden;width:100%;}
.ps-track{display:flex;transition:0.5s;}

.ps-card{
  background:white;border:1px solid #ddd;border-radius:24px;min-width:100%;max-width:400px;margin:0 10px;
  display:flex;flex-direction:column;justify-content:space-between;height:430px;
}
@media(min-width:640px){.ps-card{min-width:50%;}}
@media(min-width:1024px){.ps-card{min-width:33.33%;}}

.ps-img-box{background:#f3f3f3;border-radius:22px;margin:20px;display:flex;align-items:center;justify-content:center;padding:20px;}
.ps-img-box img{height:150px;object-fit:contain;}

.ps-content{padding:0 25px 25px;}
.ps-content h3{font-size:18px;font-weight:600;color:#111;margin:0;}
.ps-price{color:#2563eb;font-size:14px;font-weight:500;}
.ps-specs{display:flex;justify-content:space-between;margin-top:12px;font-size:14px;}
.ps-specs p{font-size:12px;color:#666;margin:0;}

.ps-btn{
  background:black;color:white;text-align:center;display:block;margin-top:18px;padding:8px;border-radius:6px;
}

.ps-nav{
  background:white;border:1px solid #ccc;padding:10px;border-radius:50%;cursor:pointer;transition:0.3s;
}
.ps-nav:hover{background:#2563eb;color:white;}

.ps-dots{text-align:center;margin-top:25px;}
.ps-dots span{display:inline-block;width:11px;height:11px;border-radius:50%;background:#ccc;margin:0 6px;cursor:pointer;}
.ps-dots span.active{background:#2563eb;transform:scale(1.2);}
.ps-track {
  display: flex;
  transition: transform .4s ease;
  width: calc(100% * 3); /* because 3 cards only */
}
.ps-card {
  width: 100%; /* one card fills the slider width */
}
