/* Fallback: show 4 cards on desktop using CSS grid until JS initializes */
.cps-slider{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width: 990.98px){ .cps-slider{grid-template-columns:1fr} }

/* When Tiny Slider initializes, it wraps the container; switch back to block */
.tns-outer .cps-slider{display:block!important}

/* Wrapper & container */
.cps-wrap{position:relative}
.cps-slider{position:relative; overflow:hidden}

/* Ensure slides behave nicely inside Tiny Slider */
.cps-slide{box-sizing:border-box; min-width:0}

/* Card (match archive look) */
.cps-card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}
.cps-card .cps-media{position:relative}
.cps-card .cps-media a{display:block}
.cps-card .cps-img{width:100%;height:200px;object-fit:cover;background:#f1f5f9;display:block}
.cps-badge{position:absolute;left:10px;top:10px;background:#19b1bc;color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;display:flex;align-items:center;gap:8px}

.cps-card .cps-body{padding:14px 14px 16px}
.cps-card h3{margin:0 0 6px;font-size:20px}
.cps-card h3 a{text-decoration:none;color:#111827}
.cps-card .cps-desc{margin:0 0 10px;color:#475569;line-height:1.5}

.cps-price-small{font-size:12px;color:#64748b;line-height:1}
.cps-price{font-weight:600}
.cps-type{color:#64748b;font-size:12px}
.cps-cta{padding:10px 12px;border:1px solid; color:#fff;border-radius:8px;text-decoration:none}
.cps-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cps-skel{width:100%;height:200px;background:#f1f5f9}

/* Optional: thin scrollbars if container overflows */
.cps-scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.3) transparent}
.cps-scroll::-webkit-scrollbar{width:8px;height:8px}
.cps-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.3);border-radius:8px}
.cps-scroll::-webkit-scrollbar-track{background:transparent}

/* Tiny Slider nav arrows */
.cps-nav{position:absolute;inset:0 0 0 0;pointer-events:none}
.cps-btn{position:absolute;top:50%;transform:translateY(-50%);pointer-events:all;background:#fff;border:1px solid #e5e7eb;border-radius:999px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.08);cursor:pointer}
.cps-btn--prev{left:-12px}
.cps-btn--next{right:-12px}

/* Tiny Slider gutter fallback (gutter also set in JS) */
.cps-slider .tns-item{box-sizing:border-box}

@media (max-width: 990.98px){
  .cps-btn--prev{left:4px}
  .cps-btn--next{right:4px}
}