/* =====================================================================
   KK FITNESS — DESIGN SYSTEM
   Built on IBM Carbon principles (8px grid, 2x type ramp, productive
   line-heights) but recoloured into a warm editorial palette and tightened
   for an athleisure brand voice.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* Color — neutral spine */
    --kk-black:        #0a0a0a;
    --kk-ink:          #161616;   /* primary surface dark */
    --kk-coal:         #1f1f1f;
    --kk-graphite:     #2a2a2a;
    --kk-iron:         #3d3d3d;
    --kk-steel:        #6f6f6f;
    --kk-ash:          #a8a8a8;
    --kk-mist:         #d1d1d1;
    --kk-cloud:        #e8e8e8;
    --kk-paper:        #f4f1ea;
    --kk-white:        #ffffff;

    /* Color — beige spine (the warmth) */
    --kk-beige-50:     #faf6ef;
    --kk-beige-100:    #f0e8d8;
    --kk-beige-200:    #e1d5bb;
    --kk-beige-300:    #d4c4a3;   /* primary beige */
    --kk-beige-400:    #b9a684;
    --kk-beige-500:    #9c8965;
    --kk-beige-700:    #6b5a3e;

    /* Color — semantic */
    --kk-bg:           var(--kk-white);
    --kk-bg-alt:       var(--kk-paper);
    --kk-bg-dark:      var(--kk-ink);
    --kk-fg:           var(--kk-ink);
    --kk-fg-muted:     var(--kk-steel);
    --kk-fg-inv:       var(--kk-white);
    --kk-accent:       var(--kk-beige-300);
    --kk-accent-deep:  var(--kk-beige-500);
    --kk-line:         var(--kk-cloud);
    --kk-line-dark:    var(--kk-graphite);

    --kk-success:      #198038;
    --kk-warn:         #b28600;
    --kk-danger:       #da1e28;

    /* Type */
    --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    -apple-system, BlinkMacSystemFont, 'Montserrat', 'Segoe UI', sans-serif;

    /* Spacing — Carbon 8px grid (we keep 4px increments too) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --sp-10: 128px;

    /* Radii — Carbon is mostly sharp. We keep it almost sharp. */
    --r-1: 2px;
    --r-2: 4px;
    --r-3: 8px;

    /* Motion */
    --ease-prod: cubic-bezier(0.2, 0, 0.38, 0.9);
    --ease-expr: cubic-bezier(0.4, 0.14, 0.3, 1);
    --dur-fast: 110ms;
    --dur-med:  240ms;
    --dur-slow: 400ms;

    /* Layout */
    --header-h: 56px;
    --sidebar-w: 240px;
    --container: 1280px;
}

/* ---------- 2. Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    color: var(--kk-fg);
    background: var(--kk-bg);
    line-height: 1.5;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }

/* ---------- 3. Type ramp ---------- */
.kk-display-1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.75rem, 7vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; }
.kk-display-2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 4rem);    line-height: 1;    letter-spacing: -0.02em; text-transform: uppercase; }
.kk-display-3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2.5rem);line-height: 1.1; letter-spacing: -0.015em; }
.kk-h1 { font-family: var(--font-display); font-weight: 700; font-size: 2rem;    line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--sp-4); }
.kk-h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;  line-height: 1.2;  letter-spacing: -0.01em; margin: 0 0 var(--sp-3); }
.kk-h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; margin: 0 0 var(--sp-3); }
.kk-h4 { font-family: var(--font-display); font-weight: 600; font-size: 1rem;    line-height: 1.3;  margin: 0 0 var(--sp-2); }
.kk-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kk-fg-muted); display: inline-block; }
.kk-eyebrow.beige { color: var(--kk-beige-500); }
.kk-eyebrow.invert { color: var(--kk-beige-300); }
.kk-lead { font-size: 1.125rem; line-height: 1.55; color: var(--kk-fg-muted); }
.kk-meta { font-size: 12px; letter-spacing: 0.05em; color: var(--kk-fg-muted); text-transform: uppercase; }

/* ---------- 4. Layout primitives ---------- */
.kk-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.kk-section   { padding: var(--sp-9) 0; }
.kk-section--tight { padding: var(--sp-7) 0; }
.kk-section--dark { background: var(--kk-ink); color: var(--kk-fg-inv); }
.kk-section--paper{ background: var(--kk-paper); }
.kk-section--beige{ background: var(--kk-beige-100); }
.kk-grid { display: grid; gap: var(--sp-5); }
.kk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kk-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
    .kk-grid--3, .kk-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kk-grid--2, .kk-grid--3, .kk-grid--4 { grid-template-columns: 1fr; }
}

.kk-divider { height: 1px; background: var(--kk-line); border: 0; margin: var(--sp-6) 0; }
.kk-divider.dark { background: var(--kk-line-dark); }

/* ---------- 5. Header / top nav ---------- */
.kk-header {
    height: var(--header-h);
    background: var(--kk-ink);
    color: var(--kk-fg-inv);
    border-bottom: 1px solid var(--kk-line-dark);
    display: flex; align-items: center;
    position: sticky; top: 0; z-index: 50;
}
.kk-header__inner { display: flex; align-items: center; width: 100%; padding: 0 var(--sp-4); gap: var(--sp-4); }
.kk-header__brand {
    font-family: var(--font-display); font-weight: 900;
    letter-spacing: 0.08em; text-transform: uppercase;
    font-size: 14px;
    display: flex; align-items: center; gap: var(--sp-2);
}
.kk-header__brand .dot { width: 8px; height: 8px; background: var(--kk-beige-300); display: inline-block; border-radius: 50%; }
.kk-header__nav { display: flex; gap: var(--sp-5); margin-left: var(--sp-6); }
.kk-header__nav a {
    font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--kk-mist); transition: color var(--dur-fast);
    padding: 4px 0; border-bottom: 1px solid transparent;
}
.kk-header__nav a:hover { color: var(--kk-white); border-bottom-color: var(--kk-beige-300); }
.kk-header__spacer { flex: 1; }
.kk-header__actions { display: flex; gap: var(--sp-2); align-items: center; }
.kk-iconbtn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--kk-mist); border: none;
    transition: background var(--dur-fast);
    position: relative;
}
.kk-iconbtn:hover { background: var(--kk-graphite); color: var(--kk-white); }
.kk-iconbtn .badge {
    position: absolute; top: 6px; right: 6px;
    background: var(--kk-beige-300); color: var(--kk-ink);
    font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px;
    min-width: 16px; text-align: center;
}

/* Notification dropdown */
.kk-notif {
    position: absolute; top: 100%; right: var(--sp-2);
    background: var(--kk-white); color: var(--kk-fg);
    width: 340px; max-height: 420px; overflow-y: auto;
    border: 1px solid var(--kk-line);
    box-shadow: 0 24px 48px rgba(0,0,0,0.18);
    display: none;
}
.kk-notif.open { display: block; }
.kk-notif__head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--kk-line); display: flex; justify-content: space-between; align-items: center; }
.kk-notif__item { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--kk-cloud); }
.kk-notif__item:last-child { border-bottom: 0; }
.kk-notif__empty { padding: var(--sp-6); text-align: center; color: var(--kk-fg-muted); }

/* ---------- 6. Sidebar ---------- */
.kk-shell { display: flex; min-height: calc(100vh - var(--header-h)); }
.kk-sidebar {
    width: var(--sidebar-w); flex-shrink: 0;
    background: var(--kk-ink); color: var(--kk-mist);
    border-right: 1px solid var(--kk-line-dark);
    padding: var(--sp-5) 0;
}
.kk-sidebar__section { padding: 0 var(--sp-4); margin-bottom: var(--sp-5); }
.kk-sidebar__title {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--kk-ash); margin-bottom: var(--sp-3);
}
.kk-sidebar__link {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); margin: 0 calc(-1 * var(--sp-4));
    color: var(--kk-mist); font-size: 14px;
    border-left: 2px solid transparent;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.kk-sidebar__link:hover { background: var(--kk-coal); color: var(--kk-white); }
.kk-sidebar__link.active { background: var(--kk-coal); color: var(--kk-white); border-left-color: var(--kk-beige-300); }
.kk-sidebar__link .ico { width: 20px; text-align: center; font-size: 16px; }

.kk-main { flex: 1; min-width: 0; padding: var(--sp-6); background: var(--kk-paper); }

/* ---------- 7. Buttons ---------- */
.kk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    font-family: var(--font-display); font-weight: 600;
    font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 14px 22px; min-height: 48px;
    border: 1px solid transparent;
    border-radius: var(--r-1);
    cursor: pointer; transition: all var(--dur-fast);
    text-decoration: none;
}
.kk-btn--primary   { background: var(--kk-ink); color: var(--kk-white); }
.kk-btn--primary:hover   { background: var(--kk-black); }
.kk-btn--accent    { background: var(--kk-beige-300); color: var(--kk-ink); }
.kk-btn--accent:hover    { background: var(--kk-beige-400); }
.kk-btn--ghost     { background: transparent; color: var(--kk-ink); border-color: var(--kk-ink); }
.kk-btn--ghost:hover     { background: var(--kk-ink); color: var(--kk-white); }
.kk-btn--ghost-light{background: transparent; color: var(--kk-white); border-color: var(--kk-white); }
.kk-btn--ghost-light:hover { background: var(--kk-white); color: var(--kk-ink); }
.kk-btn--sm { padding: 8px 14px; min-height: 36px; font-size: 11px; }
.kk-btn--block { width: 100%; }
.kk-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.kk-btn .arrow { display: inline-block; transition: transform var(--dur-fast); }
.kk-btn:hover .arrow { transform: translateX(4px); }

/* ---------- 8. Forms ---------- */
.kk-field { margin-bottom: var(--sp-4); }
.kk-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kk-fg-muted); margin-bottom: var(--sp-2); }
.kk-input, .kk-textarea, .kk-select {
    width: 100%; background: var(--kk-white);
    border: 1px solid var(--kk-line); border-bottom: 1px solid var(--kk-iron);
    padding: 12px var(--sp-3); font-size: 15px;
    transition: border-color var(--dur-fast), background var(--dur-fast);
    border-radius: 0;
}
.kk-input:focus, .kk-textarea:focus, .kk-select:focus {
    outline: none; border-bottom-color: var(--kk-beige-500); background: var(--kk-beige-50);
}
.kk-textarea { min-height: 110px; resize: vertical; }
.kk-help { font-size: 12px; color: var(--kk-fg-muted); margin-top: var(--sp-1); }
.kk-error { color: var(--kk-danger); font-size: 13px; margin-top: var(--sp-2); }

/* ---------- 9. Cards ---------- */
.kk-card {
    background: var(--kk-white);
    border: 1px solid var(--kk-line);
    transition: transform var(--dur-med) var(--ease-expr), box-shadow var(--dur-med);
    display: flex; flex-direction: column;
}
.kk-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -16px rgba(0,0,0,0.18); }
.kk-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--kk-cloud); }
.kk-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-expr); }
.kk-card:hover .kk-card__media img { transform: scale(1.05); }
.kk-card__body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.kk-card__tag {
    position: absolute; top: var(--sp-3); left: var(--sp-3);
    background: var(--kk-ink); color: var(--kk-white);
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
    padding: 4px 8px; text-transform: uppercase;
}
.kk-card__tag.beige { background: var(--kk-beige-300); color: var(--kk-ink); }
.kk-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; margin: 0 0 var(--sp-2); color: var(--kk-ink); }
.kk-card__price { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--kk-ink); }

/* App tile — used on dashboard */
.kk-app-tile {
    display: block; padding: var(--sp-5);
    background: var(--kk-white); border: 1px solid var(--kk-line);
    transition: all var(--dur-med) var(--ease-expr);
    position: relative; overflow: hidden;
    min-height: 180px;
}
.kk-app-tile::after {
    content: '→'; position: absolute; top: var(--sp-4); right: var(--sp-4);
    font-size: 20px; color: var(--kk-fg-muted); transition: all var(--dur-fast);
}
.kk-app-tile:hover { background: var(--kk-ink); color: var(--kk-white); border-color: var(--kk-ink); }
.kk-app-tile:hover::after { color: var(--kk-beige-300); transform: translate(4px, -4px); }
.kk-app-tile:hover .kk-app-tile__desc { color: var(--kk-mist); }
.kk-app-tile.accent-beige { background: var(--kk-beige-100); border-color: var(--kk-beige-200); }
.kk-app-tile.accent-beige:hover { background: var(--kk-beige-300); color: var(--kk-ink); border-color: var(--kk-beige-300); }
.kk-app-tile.accent-beige:hover::after { color: var(--kk-ink); }
.kk-app-tile.accent-dark { background: var(--kk-ink); color: var(--kk-white); border-color: var(--kk-ink); }
.kk-app-tile.accent-dark .kk-app-tile__desc { color: var(--kk-mist); }
.kk-app-tile.accent-dark::after { color: var(--kk-beige-300); }
.kk-app-tile.accent-dark:hover { background: var(--kk-black); }
.kk-app-tile__icon { font-size: 28px; margin-bottom: var(--sp-4); display: block; }
.kk-app-tile__label { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 var(--sp-2); letter-spacing: -0.005em; }
.kk-app-tile__desc { font-size: 13px; line-height: 1.5; color: var(--kk-fg-muted); margin: 0; }

/* ---------- 10. Hero ---------- */
.kk-hero {
    position: relative;
    background: var(--kk-ink);
    color: var(--kk-fg-inv);
    overflow: hidden;
    min-height: 92vh;
    display: flex; align-items: center;
}
.kk-hero__bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    filter: grayscale(20%) brightness(0.55) contrast(1.05);
}
.kk-hero__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(110deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.5) 45%, rgba(10,10,10,0.35) 100%);
}
.kk-hero__grid {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 80px 80px;
}
.kk-hero__inner { position: relative; z-index: 2; width: 100%; padding: var(--sp-9) var(--sp-5); }
.kk-hero__row { display: flex; align-items: flex-end; gap: var(--sp-5); flex-wrap: wrap; }
.kk-hero__title { max-width: 14ch; margin: 0; }
.kk-hero__title em { font-style: normal; color: var(--kk-beige-300); }
.kk-hero__lede { max-width: 48ch; font-size: 1.125rem; color: var(--kk-mist); margin: var(--sp-5) 0; }
.kk-hero__cta  { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.kk-hero__meta {
    position: absolute; bottom: var(--sp-6); right: var(--sp-6); z-index: 2;
    text-align: right; max-width: 280px;
}
.kk-hero__meta .num { font-family: var(--font-display); font-size: 3rem; font-weight: 900; line-height: 1; color: var(--kk-beige-300); }

/* ---------- 11. Marquee strip ---------- */
.kk-marquee {
    background: var(--kk-beige-300); color: var(--kk-ink);
    padding: var(--sp-3) 0; overflow: hidden;
    border-top: 1px solid var(--kk-ink); border-bottom: 1px solid var(--kk-ink);
}
.kk-marquee__track {
    display: flex; gap: var(--sp-7); align-items: center;
    animation: kk-marq 26s linear infinite;
    white-space: nowrap;
    font-family: var(--font-display); font-weight: 800;
    font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em;
}
.kk-marquee__track span::before { content: '✦'; margin-right: var(--sp-5); color: var(--kk-ink); }
@keyframes kk-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 12. Footer ---------- */
.kk-footer {
    background: var(--kk-black); color: var(--kk-mist);
    padding: var(--sp-8) 0 var(--sp-5);
}
.kk-footer a { color: var(--kk-mist); transition: color var(--dur-fast); }
.kk-footer a:hover { color: var(--kk-beige-300); }
.kk-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-6); }
.kk-footer__brand { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--kk-white); letter-spacing: -0.01em; }
.kk-footer__col h4 { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kk-beige-300); margin: 0 0 var(--sp-3); }
.kk-footer__col ul { list-style: none; padding: 0; margin: 0; }
.kk-footer__col li { margin-bottom: var(--sp-2); font-size: 14px; }
.kk-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-5); border-top: 1px solid var(--kk-graphite); font-size: 12px; color: var(--kk-steel); }
@media (max-width: 800px) { .kk-footer__top { grid-template-columns: 1fr 1fr; } }

/* ---------- 13. Blog ---------- */
.kk-post {
    display: flex; flex-direction: column;
    background: var(--kk-white); border: 1px solid var(--kk-line);
    transition: all var(--dur-med) var(--ease-expr);
    height: 100%;
}
.kk-post:hover { transform: translateY(-4px); border-color: var(--kk-ink); }
.kk-post__media { aspect-ratio: 16/10; overflow: hidden; background: var(--kk-cloud); }
.kk-post__media img { width: 100%; height: 100%; object-fit: cover; }
.kk-post__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.kk-post__title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin: var(--sp-3) 0; }
.kk-post__excerpt { color: var(--kk-fg-muted); font-size: 14px; flex: 1; }
.kk-post__meta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kk-fg-muted); margin-bottom: var(--sp-2); }

/* Article view */
.kk-article { max-width: 740px; margin: 0 auto; padding: var(--sp-7) var(--sp-5); }
.kk-article h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.kk-article__lede { font-size: 1.25rem; line-height: 1.55; color: var(--kk-iron); border-left: 4px solid var(--kk-beige-300); padding-left: var(--sp-4); margin: var(--sp-5) 0; }
.kk-article__body { font-size: 17px; line-height: 1.7; }
.kk-article__body p { margin: 0 0 var(--sp-4); }
.kk-article__body h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; margin-top: var(--sp-6); }
.kk-article__cover { aspect-ratio: 16/9; overflow: hidden; margin-bottom: var(--sp-5); }
.kk-article__cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 14. Shop & cart ---------- */
.kk-shop-filter { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.kk-chip {
    padding: 8px 14px; border: 1px solid var(--kk-line);
    background: var(--kk-white); color: var(--kk-fg);
    font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600;
    cursor: pointer; transition: all var(--dur-fast);
}
.kk-chip:hover, .kk-chip.active { background: var(--kk-ink); color: var(--kk-white); border-color: var(--kk-ink); }

.kk-cart-line { display: grid; grid-template-columns: 80px 1fr auto auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--kk-line); }
.kk-cart-line img { width: 80px; height: 80px; object-fit: cover; background: var(--kk-cloud); }
.kk-qty { display: inline-flex; align-items: center; border: 1px solid var(--kk-line); }
.kk-qty button { background: transparent; border: 0; width: 32px; height: 32px; }
.kk-qty input { width: 44px; text-align: center; border: 0; height: 32px; background: transparent; }

/* ---------- 15. Programs ---------- */
.kk-program {
    background: var(--kk-white); border: 1px solid var(--kk-line);
    padding: var(--sp-5); position: relative; overflow: hidden;
    transition: all var(--dur-med) var(--ease-expr);
}
.kk-program::before {
    content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%;
    background: var(--kk-beige-300); transition: width var(--dur-med);
}
.kk-program:hover { transform: translateX(4px); }
.kk-program:hover::before { width: 8px; }
.kk-program__level { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kk-beige-500); font-weight: 700; }
.kk-program__name  { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin: var(--sp-2) 0; letter-spacing: -0.01em; }
.kk-program__stats { display: flex; gap: var(--sp-5); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--kk-line); }
.kk-program__stat span { display: block; }
.kk-program__stat .v { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.kk-program__stat .l { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kk-fg-muted); }

/* ---------- 16. Chat ---------- */
.kk-chat { display: grid; grid-template-rows: auto 1fr auto; height: calc(100vh - var(--header-h) - var(--sp-6) * 2); background: var(--kk-white); border: 1px solid var(--kk-line); }
.kk-chat__head { padding: var(--sp-4); border-bottom: 1px solid var(--kk-line); display: flex; align-items: center; gap: var(--sp-3); }
.kk-chat__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--kk-ink); color: var(--kk-beige-300); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; }
.kk-chat__body { padding: var(--sp-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.kk-msg { max-width: 65%; padding: var(--sp-3) var(--sp-4); font-size: 14px; line-height: 1.45; border-radius: var(--r-3); }
.kk-msg.me   { background: var(--kk-ink); color: var(--kk-white); align-self: flex-end; border-bottom-right-radius: 2px; }
.kk-msg.them { background: var(--kk-beige-100); color: var(--kk-ink); align-self: flex-start; border-bottom-left-radius: 2px; }
.kk-msg__time { display: block; font-size: 10px; opacity: 0.6; margin-top: var(--sp-1); letter-spacing: 0.05em; }
.kk-chat__form { padding: var(--sp-3); border-top: 1px solid var(--kk-line); display: flex; gap: var(--sp-2); }
.kk-chat__form input { flex: 1; }

/* ---------- 17. Tables ---------- */
.kk-table { width: 100%; border-collapse: collapse; background: var(--kk-white); }
.kk-table th, .kk-table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--kk-line); }
.kk-table th { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kk-fg-muted); font-weight: 700; background: var(--kk-paper); }
.kk-table tbody tr:hover { background: var(--kk-beige-50); }

/* ---------- 18. Auth pages ---------- */
.kk-auth { min-height: 100vh; display: grid; grid-template-columns: 1.2fr 1fr; background: var(--kk-ink); color: var(--kk-white); }
.kk-auth__visual { background-size: cover; background-position: center; position: relative; overflow: hidden; }
.kk-auth__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(10,10,10,0.4), rgba(10,10,10,0.85)); }
.kk-auth__visual .quote { position: absolute; bottom: var(--sp-7); left: var(--sp-6); right: var(--sp-6); z-index: 2; max-width: 36ch; }
.kk-auth__visual .quote q { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; quotes: '"' '"'; }
.kk-auth__visual .quote .who { display: block; margin-top: var(--sp-3); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kk-beige-300); }
.kk-auth__form { padding: var(--sp-8) var(--sp-7); max-width: 520px; align-self: center; width: 100%; background: var(--kk-white); color: var(--kk-fg); display: flex; flex-direction: column; min-height: 100vh; justify-content: center; }
.kk-auth__form .brand { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--sp-7); font-size: 14px; }
.kk-auth__form .brand .dot { display: inline-block; width: 8px; height: 8px; background: var(--kk-beige-300); margin-right: var(--sp-2); border-radius: 50%; vertical-align: middle; }
@media (max-width: 900px) { .kk-auth { grid-template-columns: 1fr; } .kk-auth__visual { display: none; } }

/* ---------- 19. Flash / alerts ---------- */
.kk-flash { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); border-left: 4px solid var(--kk-iron); background: var(--kk-paper); font-size: 14px; }
.kk-flash.success { border-left-color: var(--kk-success); }
.kk-flash.error   { border-left-color: var(--kk-danger); }
.kk-flash.warn    { border-left-color: var(--kk-warn); }

/* ---------- 20. Pagination ---------- */
.kk-pager { display: flex; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-6); }
.kk-pager a, .kk-pager span { padding: 8px 14px; border: 1px solid var(--kk-line); font-size: 13px; }
.kk-pager .active { background: var(--kk-ink); color: var(--kk-white); border-color: var(--kk-ink); }

/* ---------- 21. Utilities ---------- */
.kk-text-center { text-align: center; }
.kk-mb-0 { margin-bottom: 0; }
.kk-mb-1 { margin-bottom: var(--sp-1); }
.kk-mb-2 { margin-bottom: var(--sp-2); }
.kk-mb-3 { margin-bottom: var(--sp-3); }
.kk-mb-4 { margin-bottom: var(--sp-4); }
.kk-mb-5 { margin-bottom: var(--sp-5); }
.kk-mb-6 { margin-bottom: var(--sp-6); }
.kk-mt-5 { margin-top: var(--sp-5); }
.kk-mt-6 { margin-top: var(--sp-6); }
.kk-flex { display: flex; }
.kk-flex--between { justify-content: space-between; align-items: center; }
.kk-flex--center  { justify-content: center; align-items: center; }
.kk-gap-2 { gap: var(--sp-2); }
.kk-gap-3 { gap: var(--sp-3); }
.kk-gap-4 { gap: var(--sp-4); }
.kk-hide-mobile { }
@media (max-width: 720px) { .kk-hide-mobile { display: none; } }

/* ---------- 22. Animations ---------- */
@keyframes kk-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.kk-reveal { animation: kk-fade-up 0.6s var(--ease-expr) both; }
.kk-reveal-1 { animation-delay: 80ms; }
.kk-reveal-2 { animation-delay: 160ms; }
.kk-reveal-3 { animation-delay: 240ms; }
.kk-reveal-4 { animation-delay: 320ms; }

/* ---------- 22b. Extra utilities & app components ---------- */
.kk-mt-2 { margin-top: var(--sp-2); }
.kk-mt-3 { margin-top: var(--sp-3); }
.kk-mt-4 { margin-top: var(--sp-4); }
.kk-mt-7 { margin-top: var(--sp-7); }
.kk-mt-8 { margin-top: var(--sp-8); }

/* Chip is-active (also support .active legacy) */
.kk-chip.is-active { background: var(--kk-ink); color: var(--kk-white); border-color: var(--kk-ink); }
.kk-chip__count { font-size: 11px; opacity: 0.6; margin-left: 6px; }

/* Text-only button variant */
.kk-btn--text {
    background: transparent; border: 0; color: var(--kk-ink); padding: 0;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 600;
}
.kk-btn--text:hover { color: var(--kk-beige-500); }

/* Card badge (sold out / low stock / video duration) */
.kk-card__badge {
    position: absolute; top: var(--sp-3); right: var(--sp-3);
    background: var(--kk-ink); color: var(--kk-white);
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 10px; font-weight: 700;
}

/* Empty state */
.kk-empty {
    text-align: center; padding: var(--sp-8) var(--sp-5);
    background: var(--kk-white); border: 1px dashed var(--kk-line);
}

/* Breadcrumbs */
.kk-crumbs { display: flex; gap: var(--sp-2); align-items: center; font-size: 12px; color: var(--kk-fg-muted); }
.kk-crumbs a { color: var(--kk-fg-muted); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; }
.kk-crumbs a:hover { color: var(--kk-ink); }
.kk-crumbs span { font-size: 11px; opacity: 0.5; }

/* Product detail */
.kk-product__image { background: var(--kk-cloud); aspect-ratio: 4/5; overflow: hidden; }
.kk-product__image img { width: 100%; height: 100%; object-fit: cover; }
.kk-product__buy { display: block; }
.kk-product__meta { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--kk-line); }
.kk-product__meta li {
    display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-3);
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--kk-line);
    font-size: 14px;
}
.kk-product__meta li span:last-child { color: var(--kk-fg-muted); }

/* Cart summary */
.kk-cart-summary {
    background: var(--kk-white); border: 1px solid var(--kk-line);
    padding: var(--sp-5);
    position: sticky; top: calc(var(--header-h) + var(--sp-4));
}
.kk-summary-list { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.kk-summary-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--sp-2) 0; font-size: 14px;
}
.kk-summary-hint { display: block !important; padding-top: 0; font-size: 11px; }
.kk-summary-total {
    display: flex; justify-content: space-between;
    padding: var(--sp-3) 0; margin-top: var(--sp-3);
    border-top: 2px solid var(--kk-ink);
    font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
}

/* Order/receipt */
.kk-receipt {
    background: var(--kk-white); border: 1px solid var(--kk-line);
    border-left: 4px solid var(--kk-ink);
    padding: var(--sp-6);
}
.kk-receipt--pending { border-left-color: #d97706; }
.kk-receipt__details { background: var(--kk-white); border: 1px solid var(--kk-line); padding: var(--sp-6); }

/* Tables */
.kk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kk-table th, .kk-table td { padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--kk-line); text-align: left; }
.kk-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--kk-fg-muted); font-weight: 700; }
.kk-table tbody tr:hover { background: var(--kk-paper); }
.kk-table tfoot td { border-bottom: 0; padding-top: var(--sp-4); font-size: 13px; }

/* Status pills */
.kk-status {
    display: inline-block; padding: 4px 10px; font-size: 11px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    border: 1px solid var(--kk-line); background: var(--kk-paper); color: var(--kk-ink);
}
.kk-status--pending   { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.kk-status--paid      { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.kk-status--processing,
.kk-status--confirmed { background: #dbeafe; border-color: #bfdbfe; color: #1e40af; }
.kk-status--shipped   { background: var(--kk-beige-100); border-color: var(--kk-beige-300); color: var(--kk-ink); }
.kk-status--delivered { background: var(--kk-ink); border-color: var(--kk-ink); color: var(--kk-beige-300); }
.kk-status--cancelled,
.kk-status--refunded  { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.kk-status--requested { background: var(--kk-paper); }
.kk-status--completed { background: var(--kk-ink); color: var(--kk-white); border-color: var(--kk-ink); }
.kk-status--new       { background: var(--kk-beige-300); color: var(--kk-ink); border-color: var(--kk-beige-300); }

/* Video card */
.kk-video-card { background: var(--kk-white); border: 1px solid var(--kk-line); display: flex; flex-direction: column; }
.kk-video-card__embed { position: relative; aspect-ratio: 16/9; background: var(--kk-black); }
.kk-video-card__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kk-video-card__body { padding: var(--sp-4); }

/* Appointments */
.kk-appts { list-style: none; padding: 0; margin: 0; }
.kk-appt {
    display: grid; grid-template-columns: 90px 1fr auto; gap: var(--sp-4);
    background: var(--kk-white); border: 1px solid var(--kk-line);
    padding: var(--sp-4); margin-bottom: var(--sp-3);
    align-items: flex-start;
}
.kk-appt__date {
    text-align: center; padding: var(--sp-3); background: var(--kk-paper);
    display: flex; flex-direction: column; gap: 2px;
}
.kk-appt__date strong { font-family: var(--font-display); font-size: 1.1rem; }
.kk-appt__date span { font-size: 12px; color: var(--kk-fg-muted); letter-spacing: 0.05em; }
.kk-appt__body h4 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 0 0 var(--sp-1); }
.kk-appt__actions { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-end; }

/* Admin stats */
.kk-stat { background: var(--kk-white); border: 1px solid var(--kk-line); padding: var(--sp-4); }
.kk-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--kk-fg-muted); font-weight: 700; }
.kk-stat__value { display: block; margin-top: var(--sp-2); font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; }

/* Bar chart */
.kk-bars { display: flex; align-items: flex-end; gap: 3px; height: 200px; padding: var(--sp-2) 0; }
.kk-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; position: relative; }
.kk-bar__fill {
    display: block; width: 100%; min-height: 2px;
    background: var(--kk-ink); transition: background var(--dur) var(--ease-out);
}
.kk-bar:hover .kk-bar__fill { background: var(--kk-beige-500); }
.kk-bars__axis { display: flex; justify-content: space-between; padding-top: var(--sp-2); font-size: 11px; color: var(--kk-fg-muted); letter-spacing: 0.05em; }

/* Ranked lists */
.kk-rank { list-style: none; padding: 0; margin: 0; }
.kk-rank li {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--kk-line); font-size: 14px;
}
.kk-rank li:last-child { border-bottom: 0; }
.kk-rank__label { flex: 1; padding-right: var(--sp-3); }
.kk-rank--dark li { border-color: rgba(255,255,255,0.1); color: var(--kk-white); }
.kk-rank--dark strong { color: var(--kk-beige-300); }

/* Chat wrap with optional staff rail */
.kk-chat-wrap { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.kk-chat-wrap[data-staff] { grid-template-columns: 280px 1fr; }
@media (max-width: 900px) { .kk-chat-wrap[data-staff] { grid-template-columns: 1fr; } }

.kk-chat-rail {
    background: var(--kk-white); border: 1px solid var(--kk-line);
    height: calc(100vh - var(--header-h) - var(--sp-6) * 2); overflow-y: auto;
}
.kk-chat-rail__head { padding: var(--sp-4); border-bottom: 1px solid var(--kk-line); }
.kk-chat-rail__list { list-style: none; padding: 0; margin: 0; }
.kk-chat-rail__list a {
    display: grid; grid-template-columns: 36px 1fr auto; gap: var(--sp-3); align-items: center;
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--kk-line);
    text-decoration: none; color: var(--kk-ink);
}
.kk-chat-rail__list a:hover { background: var(--kk-paper); }
.kk-chat-rail__list a.is-active { background: var(--kk-paper); border-left: 3px solid var(--kk-ink); }
.kk-chat-rail__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--kk-ink); color: var(--kk-beige-300);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.kk-chat-rail__meta { display: flex; flex-direction: column; min-width: 0; }
.kk-chat-rail__meta strong { font-size: 13px; }
.kk-chat-rail__meta em { font-style: normal; font-size: 11px; color: var(--kk-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-chat-rail__badge {
    background: var(--kk-beige-300); color: var(--kk-ink);
    font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
}
.kk-chat-rail__empty { padding: var(--sp-4); color: var(--kk-fg-muted); font-size: 13px; }

/* ---------- 23. Mobile nav toggle ---------- */
.kk-menu-toggle { display: none; }
@media (max-width: 720px) {
    .kk-header__nav { display: none; }
    .kk-menu-toggle { display: inline-flex; }
    .kk-shell { flex-direction: column; }
    .kk-sidebar { width: 100%; }
    .kk-hero__meta { display: none; }
}