/* Kryo Mobile Product Grid — Frontend Styles (with CPT) */
.kpc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1024px) {
  .kpc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .kpc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Mobile: exactly 2 columns */
    gap: 16px;
  }
}

.kpc-card {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kpc-card:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.08); }

.kpc-card-media { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #f7f7f7; }
.kpc-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.kpc-card-body { display: flex; flex-direction: column; padding: 14px 14px 16px; gap: 8px; flex: 1 1 auto; }

.kpc-title { font-size: 16px; font-weight: 600; line-height: 1.35; color: #111; margin: 0; }
.kpc-price { font-size: 15px; color: #0f172a; font-weight: 600; }
.kpc-price small { font-weight: 400; color: #64748b; margin-left: 6px; }

.kpc-card-footer { margin-top: auto; display: flex; align-items: stretch; gap: 10px; }
.kpc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 11px 14px; border-radius: 10px;
  background: #111827; color: #fff; text-decoration: none; font-weight: 600;
  border: 1px solid #111827; transition: background .2s ease, color .2s ease, transform .02s ease-in;
}
.kpc-btn:hover { background: #0b1220; color: #fff; }
.kpc-btn:active { transform: translateY(1px); }