.pc-cats { position: relative; }
.pc-track{
    display:flex; gap:12px; padding:8px 8px 12px;
    overflow-x:auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type:x mandatory; touch-action: pan-x pinch-zoom;
    scrollbar-width:none;
}
.pc-track::-webkit-scrollbar{ display:none; }

.pc-card{
    flex:0 0 auto; min-width:220px; max-width:260px;
    background:#fff; border-radius:12px; padding:12px; text-decoration:none; color:#222;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    scroll-snap-align:start;
}
.pc-img{ width:100%; aspect-ratio: 16/9; border-radius:10px; overflow:hidden; background:#f5f5f7; }
.pc-img img{ width:100%; height:100%; object-fit:cover; display:block; }

.pc-title{ margin-top:10px; font-weight:700; font-size:14px; line-height:1.4; }
.pc-desc{ margin-top:6px; font-size:12px; color:#666; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* واکنش‌گرا: روی نمایشگرهای بزرگ‌تر، چند کارت در دید */
@media (min-width:576px){ .pc-card{ min-width:240px; } }
@media (min-width:768px){ .pc-card{ min-width:260px; } }
@media (min-width:1200px){ .pc-card{ min-width:280px; } }

<style>
 .pc-wrap { container-type: inline-size; }

.pc-cat { margin-bottom: 28px; }
.pc-cat-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:12px; gap:12px;
}
.pc-cat-title{ margin:0; font-size:16px; font-weight:800; }
.pc-cat-more{ font-size:12px; color:#6b7280; text-decoration:none; }
.pc-cat-more:hover{ text-decoration:underline; }

/* گرید محصولات */
.pc-grid{
    display:grid; gap:12px;
    grid-template-columns: 1fr;                 /* موبایل: ۱ ستون */
}
@media (min-width: 992px){                    /* دسکتاپ معمولی: ۳ ستون */
    .pc-grid{ grid-template-columns: repeat(3, 1fr); gap:16px; }
}
@media (min-width: 1280px){                   /* بزرگ‌تر: ۴ ستون */
    .pc-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* کارت محصول */
.pc-item{
    display:block; background:#fff; border:1px solid #eee; border-radius:12px;
    padding:12px; text-decoration:none; color:#111; transition:box-shadow .2s, transform .2s;
}
.pc-item:hover{ box-shadow:0 6px 20px rgba(0,0,0,.08); transform:translateY(-2px); }

.pc-img{ width:100%; aspect-ratio: 1 / 1; border-radius:10px; overflow:hidden; background:#f5f5f7; }
.pc-img img{ width:100%; height:100%; object-fit:cover; display:block; }

.pc-title{ margin-top:10px; font-weight:700; font-size:14px; line-height:1.5; }
.pc-desc{
    margin-top:6px; font-size:12px; color:#6b7280; line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.pc-price{ margin-top:10px; display:flex; align-items:baseline; gap:6px; }
.pc-price-amount{ font-size:15px; font-weight:800; }
.pc-price-currency{ font-size:12px; color:#6b7280; }
.pc-price-ask{ font-size:12px; color:#ef4444; font-weight:700; }

.pc-empty{ padding:16px; border:1px dashed #ddd; border-radius:12px; color:#6b7280; text-align:center; }

/* product card */
.pc-wrap { container-type: inline-size; }
.pc-cat { margin-bottom: 28px; }
.pc-cat-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:12px;
}
.pc-cat-title{ margin:0; font-size:16px; font-weight:800; color:var(--pc-text); }
.pc-cat-more{ font-size:12px; color:var(--pc-muted); text-decoration:none; }
.pc-cat-more:hover{ text-decoration:underline; }

/* گرید: موبایل ۱، دسکتاپ ۳، خیلی بزرگ ۴ */
.pc-grid{
    display:grid; gap:12px;
    grid-template-columns: 1fr;
}
@media (min-width: 992px){ .pc-grid{ grid-template-columns: repeat(3, 1fr); gap:14px; } }
@media (min-width:1280px){ .pc-grid{ grid-template-columns: repeat(4, 1fr); } }

/* کارت افقی */
.pc-item{
    display:block; text-decoration:none; color:var(--pc-text);
    background:var(--pc-card); border:1px solid var(--pc-border);
    border-radius:14px; padding:12px; transition:transform .15s ease, box-shadow .15s ease;
}
.pc-item:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.25); }

.pc-item--horiz{
    display:flex; align-items:center; gap:14px; /* تصویر چپ، متن راست */
}
.pc-img{
    flex:0 0 120px; height:120px; border-radius:12px; overflow:hidden; background:#ffffff;
}
.pc-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* بدنه کارت */
.pc-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.pc-title{ font-weight:800; font-size:15px; line-height:1.5; color:var(--pc-text); }
.pc-desc{
    font-size:12px; color:var(--pc-muted); line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.pc-bottom{
    margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pc-price{ display:flex; align-items:baseline; gap:6px; }
.pc-price-amount{ font-size:16px; font-weight:900; color:var(--pc-accent); }
.pc-price-currency{ font-size:12px; color:var(--pc-accent); opacity:.9; }
.pc-price-ask{ font-size:12px; color:#ff7676; font-weight:700; }

.pc-add{
    width:38px; height:38px; border-radius:999px; border:1px solid var(--pc-border);
    background:transparent; color:var(--pc-text); font-size:20px; line-height:1;
    display:grid; place-items:center; cursor:pointer; transition:background .15s, transform .1s;
}
.pc-add:hover{ background:rgba(255,255,255,.06); }
.pc-add:active{ transform:scale(.96); }

/* سایزها در موبایل کمی کوچکتر */
@media (max-width:575.98px){
    .pc-img{ flex-basis:96px; height:96px; }
    .pc-title{ font-size:14px; }
    .pc-price-amount{ font-size:15px; }
}

.pc-empty{ padding:16px; border:1px dashed var(--pc-border); border-radius:12px; color:var(--pc-muted); text-align:center; }

.pc-item {
    background: #ffffff;
}

.pc-price-discount {
    color: #ef4444;             /* قرمز */
    font-size: 11px;            /* کوچیک‌تر از قیمت */
    font-weight: 600;
    margin-right: 6px;
    display: inline-block;
}