Products

#pc-wrap{
–bg: #FAF9F6;
–ink: #0F172B;
–muted: #8895A8;
–border: #ECEEF1;
–input-bg: #F8FAFC;
–pill-inactive-bg: #F1F0EC;
–pill-inactive-text: #8B93A6;
–star: #FE9A00;
–media-bg: #F1F0EC;
background: var(–bg);
font-family: ‘Inter’, sans-serif;
color: var(–ink);
padding: 3.5rem 4vw 5rem;
}
#pc-wrap *{ box-sizing: border-box; }
.pc-header{ max-width: 1300px; margin: 0 auto 2.2rem; }
.pc-header h1{
font-size: clamp(1.9rem, 3vw, 2.4rem);
font-weight: 800;
margin: 0 0 0.5rem;
letter-spacing: -0.01em;
}
.pc-header p{
color: var(–muted);
font-size: 1rem;
margin: 0;
}
.pc-toolbar{
max-width: 1300px;
margin: 0 auto 1.6rem;
background: #fff;
border-radius: 16px;
box-shadow: 0 12px 30px -18px rgba(15,23,43,0.15);
padding: 1.1rem 1.4rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.pc-search{
flex: 1;
min-width: 220px;
display: flex;
align-items: center;
gap: 0.7rem;
background: var(–input-bg);
border-radius: 10px;
padding: 0.75rem 1rem;
}
.pc-search svg{ width: 18px; height: 18px; color: #9AA7BD; flex-shrink: 0; }
.pc-search input{
border: none;
background: transparent;
outline: none;
font-size: 0.92rem;
color: var(–ink);
width: 100%;
font-family: inherit;
}
.pc-search input::placeholder{ color: #A9B4C4; }
.pc-sort{
display: flex;
align-items: center;
gap: 0.7rem;
flex-shrink: 0;
}
.pc-sort-label{
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #A9B4C4;
white-space: nowrap;
}
.pc-sort-label svg{ width: 15px; height: 15px; }
.pc-sort select{
border: 1px solid var(–border);
background: #fff;
border-radius: 10px;
padding: 0.7rem 2.2rem 0.7rem 1rem;
font-size: 0.88rem;
font-family: inherit;
color: var(–ink);
outline: none;
cursor: pointer;
appearance: none;
background-image: url(“data:image/svg+xml;utf8,“);
background-repeat: no-repeat;
background-position: right 0.8rem center;
background-size: 14px;
}
.pc-tabs-row{
max-width: 1300px;
margin: 0 auto 2.4rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.pc-tabs-arrow{
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
border: none;
box-shadow: 0 6px 16px -8px rgba(15,23,43,0.2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
color: var(–ink);
padding: 0px;
}
.pc-tabs-arrow svg{ width: 16px; height: 16px; }
.pc-tabs-arrow.disabled{ opacity: 0.35; pointer-events: none; }
.pc-tabs-viewport{ overflow: hidden; flex: 1; }
.pc-tabs{
display: flex;
gap: 0.6rem;
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
width: max-content;
}
.pc-tab{
background: var(–pill-inactive-bg);
color: var(–pill-inactive-text);
border: none;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 0.85rem 1.3rem;
border-radius: 999px;
white-space: nowrap;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.pc-tab.active{
background: var(–ink);
color: #fff;
}
.pc-grid{
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.8rem;
}
.pc-card{
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 20px 45px -28px rgba(15,23,43,0.25);
display: block;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pc-card:hover{
transform: translateY(-3px);
box-shadow: 0 26px 55px -26px rgba(15,23,43,0.32);
}
.pc-card-media{
background: var(–media-bg);
height: 280px;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.pc-card-media svg{ width: 55%; height: 55%; }
.pc-card-body{ padding: 1.2rem 1.3rem 1.4rem; }
.pc-rating{
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
.pc-stars{ color: var(–star); font-size: 0.85rem; letter-spacing: 1px; }
.pc-rating-num{ font-size: 0.8rem; color: var(–muted); font-weight: 500; }
.pc-name{
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 1rem;
}
.pc-divider{ border: none; border-top: 1px solid var(–border); margin: 0 0 1rem; }
.pc-price-row{
display: flex;
align-items: center;
justify-content: space-between;
}
.pc-price{ font-size: 1.05rem; }
.pc-price .rs{ font-size: 0.75rem; color: var(–muted); font-weight: 500; }
.pc-price b{ font-size: 1.35rem; font-weight: 800; }
.pc-price .unit{ font-size: 0.75rem; color: var(–muted); font-weight: 500; }
.pc-add-btn{
width: 40px;
height: 40px;
border-radius: 50%;
background: var(–ink);
color: #fff;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.15s ease;
}
.pc-add-btn:active{ transform: scale(0.9); }
.pc-add-btn svg{ width: 17px; height: 17px; }
.pc-empty{
max-width: 1300px;
margin: 3rem auto;
text-align: center;
color: var(–muted);
font-size: 0.95rem;
}
.pc-pagination{
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 3rem auto 0;
}
.pc-page-arrow,
.pc-page-btn{
border: none;
background: #fff;
box-shadow: 0 8px 20px -14px rgba(15,23,43,0.3);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(–ink);
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
transition: background 0.2s ease, color 0.2s ease;
}
.pc-page-arrow{
width: 36px;
height: 36px;
border-radius: 50%;
padding:0px;
}
.pc-page-arrow svg{ width: 15px; height: 15px; }
.pc-page-arrow.disabled{ opacity: 0.35; pointer-events: none; }
.pc-page-btn{
min-width: 36px;
height: 36px;
border-radius: 10px;
padding: 0 0.6rem;
}
.pc-page-btn.active{
background: var(–ink);
color: #fff;
}
.pc-page-btn:hover:not(.active){ background: var(–pill-inactive-bg); }
.pc-page-ellipsis{
color: var(–muted);
font-size: 0.85rem;
padding: 0 0.3rem;
}
@media (max-width: 980px){
.pc-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
.pc-grid{ grid-template-columns: 1fr; gap: 1.4rem; }
.pc-toolbar{ flex-direction: column; align-items: stretch; }
.pc-sort{ justify-content: space-between; }
.pc-card-media{ height: 220px; }
}