/* ============================================================
   SIGNAL PACK — CATEGORY CARD SYSTEM
   ============================================================ */

/* Standard grid card */
.sp-ccard{ background:var(--paper); border-radius:var(--radius-2xl); overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column; transition:transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease); }
.sp-ccard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.sp-ccard .sp-cimg{ height:210px; background:var(--grey-alt); overflow:hidden; }
.sp-ccard .sp-cimg img{ width:100%; height:100%; object-fit:cover; }
.sp-ccard .sp-cbody{ padding:24px; }
.sp-ccard h3{ font-size:19px; margin-bottom:8px; }
.sp-ccard .sp-ccount{ font-size:12px; color:var(--grey-text); margin-bottom:10px; }
.sp-ccard p{ font-size:13.5px; color:var(--grey-text); line-height:1.55; margin-bottom:18px; }
.sp-ccard .sp-cactions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Large homepage card (hero category) */
.sp-ccard--large .sp-cimg{ height:320px; }
.sp-ccard--large h3{ font-size:24px; }

/* Compact mobile card (dense bag grid) */
.sp-ccard--compact .sp-cimg{ height:130px; }
.sp-ccard--compact .sp-cbody{ padding:16px; }
.sp-ccard--compact h3{ font-size:13.5px; margin-bottom:6px; line-height:1.3; }
.sp-ccard--compact p{ font-size:11.5px; margin-bottom:12px; min-height:32px; }
.sp-ccard--compact .sp-cactions .sp-btn{ width:100%; justify-content:center; }

/* Image-overlay card (text sits over the photo) */
.sp-ccard--overlay{ position:relative; border-radius:var(--radius-2xl); overflow:hidden; height:260px; }
.sp-ccard--overlay img{ width:100%; height:100%; object-fit:cover; }
.sp-ccard--overlay::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,22,46,0) 40%, rgba(23,22,46,0.78) 100%); }
.sp-ccard--overlay .sp-overlay-body{ position:absolute; left:0; right:0; bottom:0; padding:20px; z-index:1; }
.sp-ccard--overlay h3{ color:#fff; margin-bottom:6px; }
.sp-ccard--overlay p{ color:rgba(255,255,255,0.85); margin-bottom:12px; }

/* Horizontal promotional card (full-width banner style) */
.sp-ccard--horizontal{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.sp-ccard--horizontal .sp-cimg{ height:auto; }
.sp-ccard--horizontal .sp-cbody{ display:flex; flex-direction:column; justify-content:center; padding:32px; }
@media (max-width:700px){ .sp-ccard--horizontal{ grid-template-columns:1fr; } .sp-ccard--horizontal .sp-cimg{ height:180px; } }

.sp-category-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:700px){ .sp-category-grid{ grid-template-columns:1fr; } }

.sp-category-grid--bags{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
@media (max-width:1080px){ .sp-category-grid--bags{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .sp-category-grid--bags{ grid-template-columns:1fr 1fr; } }