/*
 * Fallback styling for [kk_story_grid] / [kk_pricing] so they still look
 * reasonable under any theme, not just the bundled "Katha Kutty" theme
 * (which restyles these same classes with the full brand palette in its
 * own style.css - these rules just make sure nothing looks broken if a
 * different theme is active).
 */
.kk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin: 24px 0; }
.kk-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.kk-card__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #eee; }
.kk-card__body { padding: 14px; }
.kk-card__title { font-weight: 600; margin: 0 0 6px; }
.kk-card__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.kk-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #f0f0f0; color: #555; }
.kk-badge--premium { background: #F2B441; color: #2B1512; }
.kk-badge--free { background: #DCEFE3; color: #2F6B48; }

.kk-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 24px 0; }
.kk-price-card { background: #fff; border-radius: 14px; padding: 28px 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); position: relative; border: 2px solid transparent; }
.kk-price-card--popular { border-color: #E85D4E; }
.kk-price-card__ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #E85D4E; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.kk-price-card__label { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.kk-price-card__amount { font-size: 2.1rem; font-weight: 700; color: #E85D4E; margin: 6px 0; }
.kk-price-card__amount span { font-size: 0.9rem; color: #888; font-weight: 400; }
.kk-price-card__strike { color: #888; text-decoration: line-through; font-size: 0.9rem; }
.kk-price-card__devices { color: #777; font-size: 0.9rem; margin-bottom: 18px; }

.kk-founding-banner { background: #2B1512; color: #fff; border-radius: 14px; padding: 16px 24px; text-align: center; margin: 24px 0; }
.kk-founding-banner strong { color: #F2B441; }

.kk-store-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.kk-store-badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #2B1512; padding: 10px 16px; border-radius: 10px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.08); text-decoration: none; }
.kk-store-badge--soon { opacity: 0.55; cursor: default; }

.kk-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 12px 24px; border-radius: 999px; text-decoration: none; }
.kk-btn--primary { background: #E85D4E; color: #fff; }