:root { --main: #000; --accent: #e63946; --gray: #f4f4f4; }
body.knu-body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.knu-announcement { background: var(--main); color: #fff; text-align: center; padding: 10px; font-size: 13px; font-weight: bold; }
.knu-nav { display: flex; justify-content: space-between; padding: 20px; border-bottom: 1px solid #eee; sticky; top: 0; background: #fff; z-index: 9; }
.logo { font-weight: 900; font-size: 20px; } .logo span { color: var(--accent); }

/* 3:4 Grid */
.knu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; }
@media (min-width: 768px) { .knu-grid { grid-template-columns: repeat(4, 1fr); gap: 25px; padding: 40px; } }

.img-wrapper { aspect-ratio: 3 / 4; position: relative; overflow: hidden; border-radius: 8px; }
.img-wrapper img { width: 100%; height: 100%; object-fit: cover; }

.badge { position: absolute; top: 10px; left: 10px; background: var(--accent); color: white; padding: 5px 10px; font-size: 10px; border-radius: 5px; animation: blink 1.5s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.info { padding: 10px; text-align: center; }
.buy-btn { width: 100%; background: var(--main); color: #fff; border: none; padding: 12px; border-radius: 5px; cursor: pointer; font-weight: bold; }

/* Cart Drawer */
.cart-panel { position: fixed; right: -100%; top: 0; width: 320px; height: 100%; background: #fff; box-shadow: -5px 0 15px rgba(0,0,0,0.1); transition: 0.4s; z-index: 99; padding: 20px; }
.cart-panel.active { right: 0; }
.wa-checkout { width: 100%; background: #25D366; color: white; border: none; padding: 15px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 16px; margin-top: 20px; }
.category-bar { display: flex; gap: 10px; overflow-x: auto; padding: 15px; background: #fff; }
.filter-btn { padding: 8px 18px; border: 1px solid #ddd; background: #fff; border-radius: 20px; white-space: nowrap; cursor: pointer; }
.filter-btn.active { background: #000; color: #fff; border-color: #000; }

.old-price { text-decoration: line-through; color: #888; margin-right: 8px; font-size: 0.9em; }

.pulse { animation: pulse-red 2s infinite; }
@keyframes pulse-red {
    0% { color: #fff; }
    50% { color: #ffbcbc; }
    100% { color: #fff; }
}