/* Front styles (unchanged from 1.2.2) */
:root{
  --kpc-bg: #ffffff;
  --kpc-text: #111827;
  --kpc-muted: #6b7280;
  --kpc-border: #e5e7eb;
  --kpc-shadow: 0 6px 24px rgba(0,0,0,.06);
  --kpc-radius: 16px;
  --kpc-accent: #0a7;
  --kpc-progress-bg: #eef2f7;
  --kpc-warn: #ff5a1f;
}

.kpc-track { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 768px) {
  .kpc-track { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpc-wall.kpc-swipe .kpc-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 10px);
    overflow-x: auto; gap: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px;
  }
  .kpc-wall.kpc-swipe .kpc-card { scroll-snap-align: start; }
}

.kpc-card { border: 1px solid var(--kpc-border); border-radius: var(--kpc-radius); overflow: hidden; background: var(--kpc-bg); display:flex; flex-direction:column; box-shadow: var(--kpc-shadow); }
.kpc-card.kpc-layout-horizontal { flex-direction: row; }
.kpc-card.kpc-layout-horizontal .kpc-img { flex: 0 0 42%; height: auto; aspect-ratio: unset; min-height: 100%; }
.kpc-card.kpc-layout-horizontal .kpc-body { flex: 1; }

.kpc-img { position: relative; aspect-ratio: 16/9; background:#f5f7fa; }
.kpc-img img { width:100%; height:100%; object-fit: cover; display:block; }
.kpc-img-ph { width:100%; height:100%; background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%); background-size:400% 100%; animation:kpc-shimmer 1.3s infinite; }
@keyframes kpc-shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

.kpc-badge { position:absolute; top:10px; left:10px; background:#111; color:#fff; font-size:12px; padding:6px 10px; border-radius:999px; letter-spacing:.2px; }
.kpc-chip-warn { position:absolute; top:10px; right:10px; background: var(--kpc-warn); color:#fff; font-size:12px; padding:6px 10px; border-radius:999px; }
.kpc-chip-hot { position:absolute; bottom:10px; left:10px; background:#111; color:#fff; font-size:12px; padding:6px 10px; border-radius:999px; opacity:.9; }

.kpc-body { padding: 16px; }
.kpc-body h3 { margin:0 0 6px; font-size: var(--kpc-h-size, 1.5rem); line-height:1.25; color: var(--kpc-h-color, var(--kpc-text)); }
.kpc-subline { color:var(--kpc-muted); margin:0 0 12px; }

.kpc-countdown { display:flex; align-items:center; gap:8px; margin:8px 0 12px; background:linear-gradient(90deg, #ffe3d6, #ffe8d6); color:#7c2d12; padding:6px 10px; border-radius:10px; font-weight:700; }
.kpc-cd-label { font-size:.85rem; color:#9a3412; }
.kpc-cd-digits { font-variant-numeric: tabular-nums; letter-spacing:.5px; color:#b45309; }

.kpc-progress { background: var(--kpc-progress-bg); border-radius: 999px; overflow:hidden; margin:8px 0 6px; height:10px; }
.kpc-bar { background: linear-gradient(90deg, var(--kpc-accent), #16a34a); height:10px; width:0; transition: width .35s; }
.kpc-label { font-size:12.5px; color:var(--kpc-muted); margin-top:6px; }

.kpc-ctas { display:flex; gap:12px; margin-top:14px; }
.kpc-ctas .button { flex:1; text-align:center; border-radius:12px; padding:12px 16px; font-weight:700; font-size:0.98rem; border:0; }
.kpc-ctas .kpc-cta { background:#0b72b9; color:#fff; }
.kpc-ctas .kpc-cta[aria-disabled="true"] { opacity:.6; pointer-events:none; }
.kpc-ctas .kpc-wa { background:#10b981; color:#fff; }

.kpc-tc-btn { margin-top:12px; padding:10px 14px; border-radius:10px; border:1px solid var(--kpc-border); background:#fff; color:#111; font-weight:600; }
.kpc-tc-btn:hover { background:#f9fafb; }

.kpc-modal { position:fixed; inset:0; z-index:9999; }
.kpc-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.kpc-modal-dialog { position:relative; background:#fff; width:min(640px, 92vw); margin:10vh auto; padding:20px; border-radius:12px; max-height:80vh; overflow:auto; }
.kpc-modal-close { position:absolute; top:8px; right:8px; border:0; background:transparent; font-size:24px; cursor:pointer; }