.tpc-wrap,.tpc-single{--tpc-accent:#0268a0;--tpc-badge:#d32f2f;--tpc-cd:4;--tpc-ct:3;--tpc-cm:1.5;--tpc-gap:14px;box-sizing:border-box;margin:24px 0;font-family:inherit;line-height:1.7}
.tpc-wrap *,.tpc-single *{box-sizing:border-box}
.tpc-wrap{border:1px solid #e3e6ea;border-radius:12px;padding:16px;background:#fff}
.tpc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.tpc-heading{font-size:18px;font-weight:700;color:#222}
.tpc-all{font-size:14px;color:var(--tpc-accent);text-decoration:none;white-space:nowrap}
.tpc-all:hover{text-decoration:underline}
.tpc-viewport{position:relative}
.tpc-track{display:flex;gap:var(--tpc-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px}
.tpc-track::-webkit-scrollbar{display:none}
.tpc-card{flex:0 0 calc((100% - var(--tpc-gap) * (var(--tpc-cd) - 1)) / var(--tpc-cd));scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #e3e6ea;border-radius:10px;background:#fff;color:#222;text-decoration:none;transition:box-shadow .2s,transform .2s}
.tpc-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px)}
.tpc-img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden}
.tpc-img img{width:100%;height:100%;object-fit:contain;display:block;margin:0}
.tpc-oos{position:absolute;inset-inline-start:0;top:0;background:#555;color:#fff;font-size:12px;padding:2px 8px;border-radius:6px}
.tpc-title{font-size:14px;font-weight:600;min-height:3.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpc-price-row{display:flex;align-items:center;gap:8px;min-height:24px}
.tpc-badge{background:var(--tpc-badge);color:#fff;font-size:12px;font-weight:700;padding:1px 8px;border-radius:6px}
.tpc-old,.tpc-old *{color:#8a8f98;font-size:13px;text-decoration:line-through}
.tpc-price{display:block;font-size:17px;font-weight:800;color:#111}
.tpc-price del{font-size:13px;color:#8a8f98;font-weight:400}
.tpc-price ins{text-decoration:none}
.tpc-price--big{font-size:26px}
.tpc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid #d6dae0;background:#fff;color:var(--tpc-accent);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:0;display:flex;align-items:center;justify-content:center}
.tpc-arrow:hover{background:var(--tpc-accent);color:#fff}
.tpc-arrow[disabled]{opacity:.35;cursor:default;pointer-events:none}
.tpc-prev{inset-inline-start:-12px}
.tpc-next{inset-inline-end:-12px}
/* ---- تک‌محصول ---- */
.tpc-single{display:flex;gap:24px;align-items:center;border:1px solid #e3e6ea;border-radius:14px;padding:20px;background:linear-gradient(135deg,#fff,#f4f9fc)}
.tpc-s-img{flex:0 0 38%;max-width:38%;display:block}
.tpc-s-img img{width:100%;height:auto;display:block;margin:0;border-radius:10px}
.tpc-s-body{flex:1;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.tpc-s-title{font-size:20px;font-weight:800;color:#111;text-decoration:none}
.tpc-s-title:hover{color:var(--tpc-accent)}
.tpc-s-rate{color:#dd9711;font-weight:700;font-size:14px}
.tpc-s-rate small{color:#8a8f98;font-weight:400}
.tpc-s-desc{margin:0;color:#444;font-size:14px}
.tpc-s-stock{font-size:13px;font-weight:600}
.tpc-s-stock.in{color:#2e7d32}
.tpc-s-stock.out{color:#c62828}
.tpc-s-btn{display:inline-block;background:var(--tpc-accent);color:#fff;text-decoration:none;font-weight:700;padding:11px 32px;border-radius:10px;transition:filter .2s}
.tpc-s-btn:hover{filter:brightness(1.12);color:#fff}
.tpc-single--vertical{flex-direction:column;text-align:center}
.tpc-single--vertical .tpc-s-img{flex:none;max-width:320px;width:100%}
.tpc-single--vertical .tpc-s-body{align-items:center}
.tpc-single--compact{padding:12px;gap:14px}
.tpc-single--compact .tpc-s-img{flex:0 0 120px;max-width:120px}
.tpc-single--compact .tpc-s-title{font-size:16px}
.tpc-single--compact .tpc-price--big{font-size:20px}
@media (max-width:1024px){.tpc-card{flex-basis:calc((100% - var(--tpc-gap) * (var(--tpc-ct) - 1)) / var(--tpc-ct))}}
@media (max-width:640px){
 .tpc-card{flex-basis:calc((100% - var(--tpc-gap) * (var(--tpc-cm) - 1)) / var(--tpc-cm))}
 .tpc-arrow{display:none}
 .tpc-wrap{padding:12px}
 .tpc-single--horizontal{flex-direction:column;text-align:center}
 .tpc-single--horizontal .tpc-s-img{flex:none;max-width:100%;width:100%}
 .tpc-single--horizontal .tpc-s-body{align-items:center}
 .tpc-single--compact{flex-direction:row;text-align:start}
}