:root{ --ptc-accent: #2DA3EB; }
.ptc-wrap{ --ptc-gap:16px; font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.ptc-heading{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ptc-heading h2{ margin:0; font-weight:700; }
.ptc-link-all{ text-decoration:none; font-weight:600; color:var(--ptc-accent); }
.ptc-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 16px; }
.ptc-tab{ background:#F3F6F9; border:none; border-radius:999px; padding:8px 12px; cursor:pointer; position:relative; }
.ptc-tab.is-active{ background:#EFF6FF; }
.ptc-tab.is-active::after{ content:''; position:absolute; left:12px; right:12px; bottom:-6px; height:3px; background:var(--ptc-accent); border-radius:2px; }
.ptc-panel{ display:none; }
.ptc-panel.is-active{ display:block; }
.ptc-carousel{ position:relative; }
.ptc-track{ display:grid; grid-auto-flow:column; gap:var(--ptc-gap); overflow:auto; scroll-snap-type:x mandatory; padding:8px 56px; }
.ptc-card{ min-width:calc((100% - (var(--ptc-cols,4) - 1)*var(--ptc-gap)) / var(--ptc-cols,4)); scroll-snap-align:center; border:1px solid #e7e9ec; border-radius:16px; padding:14px; background:#fff; display:flex; flex-direction:column; box-shadow: 0 1px 0 rgba(16,24,40,0.04); }
.ptc-image img{ width:100%; height:auto; border-radius:12px; display:block; }
.ptc-meta{ font-size:12px; color:#6b7280; margin:12px 0 4px; }
.ptc-title{ font-size:16px; margin:6px 0 16px; line-height:1.35; color:#111827; }
.ptc-title a{ text-decoration:none; color:inherit; }
.ptc-actions{ margin-top:auto; }
.ptc-actions .button, .ptc-btn, .ptc-actions .add_to_cart_button{ display:flex; align-items:center; justify-content:center; width:100%; border-radius:999px; padding:12px 18px; background:var(--ptc-accent); color:#fff!important; border:none; font-weight:600; text-decoration:none; box-shadow: 0 1px 2px rgba(16,24,40,0.08); }
.ptc-nav{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; box-shadow:0 1px 2px rgba(16,24,40,.08); }
.ptc-prev{ left:8px; } .ptc-next{ right:8px; }
@media (max-width: 1024px){ .ptc-card{ min-width: calc((100% - var(--ptc-gap)) / 2); } }
@media (max-width: 640px){ .ptc-card{ min-width: 100%; } }