/*
 * KAPILASH Design System v1
 * Colours derived from the Kapilash logo. Plain CSS (no build step) so it can be
 * edited and uploaded directly on shared hosting.
 * Fonts: public/css/fonts.css (self-hosted Noto, created by `php artisan kapilash:fonts`).
 */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand */
  --kp-vermilion: #C2410C;        /* primary actions, links, prices */
  --kp-vermilion-hover: #A3360A;
  --kp-vermilion-tint: #FDEBD9;   /* soft backgrounds, badges */
  --kp-vermilion-ink: #8A3A06;    /* text on vermilion tint */
  --kp-saffron: #F08C1A;          /* small accents only */

  /* Neutrals */
  --kp-ink: #24262B;              /* main text */
  --kp-stone: #6B6F76;            /* secondary text */
  --kp-paper: #FBF8F3;            /* page background */
  --kp-surface: #FFFFFF;          /* cards */
  --kp-line: #E8E1D6;             /* borders */
  --kp-line-strong: #D6CCBC;

  /* Status */
  --kp-success: #2F6B3A;
  --kp-success-tint: #E4F1E6;
  --kp-danger: #B42318;
  --kp-danger-tint: #FDE8E7;

  /* Typography: one Noto family across every script */
  --kp-font-serif: 'Noto Serif', 'Noto Serif Devanagari', 'Noto Sans Bengali', 'Noto Sans Tamil',
    'Noto Sans Telugu', 'Noto Sans Gujarati', 'Noto Sans Gurmukhi', 'Noto Sans Kannada',
    'Noto Sans Malayalam', 'Noto Sans Oriya', Georgia, serif;
  --kp-font-sans: 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Tamil',
    'Noto Sans Telugu', 'Noto Sans Gujarati', 'Noto Sans Gurmukhi', 'Noto Sans Kannada',
    'Noto Sans Malayalam', 'Noto Sans Oriya', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kp-font-urdu: 'Noto Nastaliq Urdu', 'Noto Sans Arabic', serif;

  --kp-text-xs: 0.75rem;    /* 12 */
  --kp-text-sm: 0.875rem;   /* 14 */
  --kp-text-base: 1rem;     /* 16 */
  --kp-text-lg: 1.125rem;   /* 18 */
  --kp-text-xl: 1.375rem;   /* 22 */
  --kp-text-2xl: 1.75rem;   /* 28 */
  --kp-text-3xl: 2.25rem;   /* 36 */
  --kp-text-4xl: 3rem;      /* 48 */

  /* Space, shape, layout */
  --kp-space-1: 4px;
  --kp-space-2: 8px;
  --kp-space-3: 12px;
  --kp-space-4: 16px;
  --kp-space-6: 24px;
  --kp-space-8: 32px;
  --kp-space-12: 48px;
  --kp-space-16: 64px;
  --kp-radius: 8px;
  --kp-radius-lg: 12px;
  --kp-container: 1200px;
  --kp-shadow-cover: 0 1px 2px rgba(36, 38, 43, .12), 0 8px 20px rgba(36, 38, 43, .10);
  --kp-focus: 0 0 0 3px rgba(194, 65, 12, .35);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kp-paper);
  color: var(--kp-ink);
  font-family: var(--kp-font-sans);
  font-size: var(--kp-text-base);
  line-height: 1.7;               /* room for Indic matras and conjuncts */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--kp-vermilion); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--kp-vermilion-hover); }
:focus-visible { outline: none; box-shadow: var(--kp-focus); border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--kp-font-serif);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 var(--kp-space-3);
  color: var(--kp-ink);
}
h1 { font-size: var(--kp-text-3xl); }
h2 { font-size: var(--kp-text-2xl); }
h3 { font-size: var(--kp-text-xl); }
h4 { font-size: var(--kp-text-lg); }
p { margin: 0 0 var(--kp-space-4); }

/* Urdu (and other RTL text): wrap with lang="ur" dir="rtl" */
:lang(ur) { font-family: var(--kp-font-urdu); line-height: 2.3; }

.kp-skip-link {
  position: absolute; left: -999px; top: 8px;
  background: var(--kp-ink); color: #fff; padding: 8px 16px; border-radius: var(--kp-radius); z-index: 100;
}
.kp-skip-link:focus { left: 16px; color: #fff; }
.kp-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 3. Layout ---------- */
.kp-container { width: 100%; max-width: var(--kp-container); margin: 0 auto; padding: 0 var(--kp-space-4); }
@media (min-width: 768px) { .kp-container { padding: 0 var(--kp-space-8); } }
.kp-section { padding: var(--kp-space-12) 0; }
.kp-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--kp-space-4);
  margin-bottom: var(--kp-space-6);
}
.kp-section__head h2 { margin: 0; }
.kp-eyebrow {
  display: inline-flex; align-items: center; gap: var(--kp-space-2);
  font-size: var(--kp-text-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--kp-stone); margin-bottom: var(--kp-space-2);
}
.kp-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--kp-saffron); }
.kp-muted { color: var(--kp-stone); }
.kp-divider { border: 0; border-top: 1px solid var(--kp-line); margin: var(--kp-space-8) 0; }

/* ---------- 4. Header ---------- */
.kp-header {
  background: var(--kp-surface);
  border-bottom: 1px solid var(--kp-line);
  position: sticky; top: 0; z-index: 50;
}
.kp-header__bar { display: flex; align-items: center; gap: var(--kp-space-4); min-height: 68px; }
.kp-brand { display: flex; align-items: center; gap: var(--kp-space-3); text-decoration: none; color: var(--kp-ink); flex-shrink: 0; }
.kp-brand:hover { color: var(--kp-ink); }
.kp-brand img { width: 40px; height: 40px; }
.kp-brand__name { font-family: var(--kp-font-serif); font-size: 1.25rem; font-weight: 500; letter-spacing: .14em; line-height: 1; }
.kp-brand__sub { display: block; font-family: var(--kp-font-sans); font-size: 10px; letter-spacing: .2em; color: var(--kp-stone); margin-top: 4px; }

.kp-nav { display: none; }
.kp-nav ul { list-style: none; display: flex; gap: var(--kp-space-1); margin: 0; padding: 0; }
.kp-nav a {
  display: block; padding: 8px 10px; border-radius: var(--kp-radius);
  font-size: var(--kp-text-sm); color: var(--kp-ink); text-decoration: none; white-space: nowrap;
}
.kp-nav a:hover { background: var(--kp-paper); color: var(--kp-ink); }
.kp-nav a[aria-current="page"] { color: var(--kp-vermilion); }

.kp-actions { display: flex; align-items: center; gap: var(--kp-space-1); margin-left: auto; }
.kp-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 8px; border-radius: var(--kp-radius);
  color: var(--kp-ink); text-decoration: none; font-size: var(--kp-text-sm);
  background: none; border: 0; cursor: pointer;
}
.kp-icon-btn:hover { background: var(--kp-paper); color: var(--kp-ink); }
.kp-icon-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.kp-icon-btn__label { display: none; }

/* Mobile menu (no JavaScript: <details>) */
.kp-menu { position: relative; }
.kp-menu > summary { list-style: none; }
.kp-menu > summary::-webkit-details-marker { display: none; }
.kp-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, 90vw);
  background: var(--kp-surface); border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg);
  padding: var(--kp-space-2); box-shadow: 0 12px 32px rgba(36, 38, 43, .12);
}
.kp-menu__panel a { display: block; padding: 10px 12px; border-radius: var(--kp-radius); color: var(--kp-ink); text-decoration: none; }
.kp-menu__panel a:hover { background: var(--kp-paper); }
.kp-menu__panel hr { border: 0; border-top: 1px solid var(--kp-line); margin: var(--kp-space-2) 0; }

@media (min-width: 1100px) {
  .kp-nav { display: block; margin-left: var(--kp-space-4); }
  .kp-menu { display: none; }
}
@media (min-width: 1280px) {
  .kp-icon-btn__label { display: inline; white-space: nowrap; }
}
.kp-hide-mobile { display: none; }
@media (min-width: 640px) { .kp-hide-mobile { display: inline-flex; } }

/* ---------- 5. Buttons ---------- */
.kp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kp-space-2);
  min-height: 44px; padding: 10px 20px; border-radius: var(--kp-radius);
  font-family: var(--kp-font-sans); font-size: var(--kp-text-sm); font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kp-btn svg { width: 18px; height: 18px; }
.kp-btn--primary { background: var(--kp-vermilion); color: #fff; }
.kp-btn--primary:hover { background: var(--kp-vermilion-hover); color: #fff; }
.kp-btn--secondary { background: var(--kp-surface); color: var(--kp-vermilion); border-color: var(--kp-vermilion); }
.kp-btn--secondary:hover { background: var(--kp-vermilion-tint); color: var(--kp-vermilion-hover); }
.kp-btn--ghost { background: var(--kp-surface); color: var(--kp-ink); border-color: var(--kp-line-strong); }
.kp-btn--ghost:hover { border-color: var(--kp-ink); color: var(--kp-ink); }
.kp-btn--sm { min-height: 36px; padding: 6px 14px; font-size: var(--kp-text-xs); }
.kp-btn--block { width: 100%; }
.kp-btn[disabled], .kp-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---------- 6. Badges, chips ---------- */
.kp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: var(--kp-text-xs); font-weight: 500; line-height: 1.8;
  background: var(--kp-vermilion-tint); color: var(--kp-vermilion-ink);
}
.kp-badge--neutral { background: #EFEAE1; color: var(--kp-ink); }
.kp-badge--success { background: var(--kp-success-tint); color: var(--kp-success); }
.kp-chip {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--kp-line-strong); background: var(--kp-surface);
  color: var(--kp-ink); text-decoration: none; font-size: var(--kp-text-sm); line-height: 1.8;
}
.kp-chip:hover { border-color: var(--kp-vermilion); color: var(--kp-vermilion); }
.kp-chip-list { display: flex; flex-wrap: wrap; gap: var(--kp-space-2); list-style: none; padding: 0; margin: 0; }

/* ---------- 7. Forms ---------- */
.kp-field { display: grid; gap: 6px; margin-bottom: var(--kp-space-4); }
.kp-label { font-size: var(--kp-text-sm); font-weight: 500; }
.kp-hint { font-size: var(--kp-text-xs); color: var(--kp-stone); }
.kp-input, .kp-select, .kp-textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  font: inherit; font-size: var(--kp-text-base); color: var(--kp-ink);
  background: var(--kp-surface); border: 1px solid var(--kp-line-strong); border-radius: var(--kp-radius);
}
.kp-input:focus, .kp-select:focus, .kp-textarea:focus { outline: none; border-color: var(--kp-vermilion); box-shadow: var(--kp-focus); }
.kp-input[aria-invalid="true"] { border-color: var(--kp-danger); }
.kp-error { font-size: var(--kp-text-xs); color: var(--kp-danger); }

/* Big search bar (homepage) */
.kp-search {
  display: flex; align-items: center; gap: var(--kp-space-2);
  background: var(--kp-surface); border: 1px solid var(--kp-line-strong); border-radius: var(--kp-radius-lg);
  padding: 6px 6px 6px 16px; max-width: 680px;
}
.kp-search:focus-within { border-color: var(--kp-vermilion); box-shadow: var(--kp-focus); }
.kp-search svg { width: 20px; height: 20px; color: var(--kp-stone); flex-shrink: 0; }
.kp-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font: inherit; font-size: var(--kp-text-base); padding: 10px 0; color: var(--kp-ink);
}

/* ---------- 8. Book card ---------- */
.kp-book-grid {
  display: grid; gap: var(--kp-space-8) var(--kp-space-6);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 768px) { .kp-book-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.kp-book { position: relative; display: flex; flex-direction: column; }
.kp-book__cover {
  position: relative; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden;
  box-shadow: var(--kp-shadow-cover); background: var(--kp-ink);
  transition: transform .2s ease;
}
.kp-book:hover .kp-book__cover { transform: translateY(-3px); }
.kp-book__cover img { width: 100%; height: 100%; object-fit: cover; }
.kp-book__badge { position: absolute; top: 8px; right: 8px; z-index: 1; }
/* Generated cover for books without artwork */
.kp-cover-generated {
  height: 100%; display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px 14px; color: var(--kp-paper);
  background: var(--kp-ink);
  border-left: 6px solid rgba(255, 255, 255, .08);
}
.kp-cover-generated__bar { width: 32px; height: 3px; background: var(--kp-saffron); }
.kp-cover-generated__title { font-family: var(--kp-font-serif); font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere; }
.kp-cover-generated__author { font-size: var(--kp-text-xs); opacity: .75; }
.kp-cover-generated--v2 { background: #6B2A0B; }
.kp-cover-generated--v3 { background: #2E3A33; }

.kp-book__body { padding-top: var(--kp-space-3); display: grid; gap: 2px; }
.kp-book__title { font-family: var(--kp-font-serif); font-size: var(--kp-text-base); font-weight: 500; line-height: 1.4; margin: 0; }
.kp-book__title a { color: var(--kp-ink); text-decoration: none; }
.kp-book__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.kp-book__title a:hover { color: var(--kp-vermilion); }
.kp-book__author { font-size: var(--kp-text-sm); color: var(--kp-stone); margin: 0; }
.kp-book__meta { font-size: var(--kp-text-xs); color: var(--kp-stone); margin: 0; }
.kp-book__price { font-size: var(--kp-text-base); font-weight: 500; color: var(--kp-vermilion); margin: 2px 0 0; }
.kp-book__price s { color: var(--kp-stone); font-weight: 400; font-size: var(--kp-text-sm); margin-left: 6px; }

/* ---------- 9. Cards, panels, notices ---------- */
.kp-card {
  background: var(--kp-surface); border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius-lg); padding: var(--kp-space-6);
}
.kp-notice {
  border-left: 3px solid var(--kp-saffron); background: var(--kp-surface);
  padding: var(--kp-space-3) var(--kp-space-4); font-size: var(--kp-text-sm);
}

/* ---------- 10. Hero (homepage) ---------- */
.kp-hero { padding: var(--kp-space-12) 0 var(--kp-space-8); }
@media (min-width: 768px) { .kp-hero { padding: 88px 0 56px; } }
.kp-hero h1 { font-size: clamp(2rem, 5vw, var(--kp-text-4xl)); max-width: 22ch; margin-bottom: var(--kp-space-3); }
.kp-hero__formats { font-size: var(--kp-text-lg); color: var(--kp-stone); margin-bottom: var(--kp-space-8); }
.kp-hero__formats span { color: var(--kp-saffron); padding: 0 6px; }

/* ---------- 11. Footer ---------- */
.kp-footer { background: var(--kp-ink); color: #D8D4CC; margin-top: var(--kp-space-16); }
.kp-footer a { color: #D8D4CC; text-decoration: none; }
.kp-footer a:hover { color: #fff; text-decoration: underline; }
.kp-footer__grid { display: grid; gap: var(--kp-space-8); padding: var(--kp-space-12) 0; grid-template-columns: 1fr; }
@media (min-width: 768px) { .kp-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.kp-footer h2 { font-family: var(--kp-font-sans); font-size: var(--kp-text-sm); font-weight: 500; color: #fff; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--kp-space-3); }
.kp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--kp-text-sm); }
.kp-footer__brand { display: flex; align-items: center; gap: var(--kp-space-3); margin-bottom: var(--kp-space-3); }
.kp-footer__brand img { width: 48px; height: 48px; background: #fff; border-radius: 50%; padding: 2px; }
.kp-footer__tagline { font-family: var(--kp-font-serif); font-size: var(--kp-text-lg); color: #fff; margin-bottom: 4px; }
.kp-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12); padding: var(--kp-space-4) 0;
  font-size: var(--kp-text-xs); display: flex; flex-wrap: wrap; gap: var(--kp-space-4); justify-content: space-between;
}

/* ---------- 12. Style guide helpers ---------- */
.kp-swatches { display: grid; gap: var(--kp-space-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kp-swatch { border-radius: var(--kp-radius-lg); overflow: hidden; border: 1px solid var(--kp-line); background: var(--kp-surface); }
.kp-swatch__color { height: 72px; }
.kp-swatch__info { padding: 10px 12px; font-size: var(--kp-text-xs); line-height: 1.5; }
.kp-swatch__info strong { display: block; font-size: var(--kp-text-sm); font-weight: 500; }
.kp-specimen { display: grid; gap: var(--kp-space-2); }
.kp-specimen__row { display: grid; grid-template-columns: 120px 1fr; gap: var(--kp-space-4); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--kp-line); }
.kp-specimen__row > span:first-child { font-size: var(--kp-text-xs); color: var(--kp-stone); }
.kp-specimen__row > span:last-child { font-size: var(--kp-text-xl); }
.kp-row { display: flex; flex-wrap: wrap; gap: var(--kp-space-3); align-items: center; }

/* ---------- 13. Catalogue pages (Step 6) ---------- */
.kp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-size: var(--kp-text-sm); color: var(--kp-stone); }
.kp-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--kp-line-strong); }
.kp-crumbs a { color: var(--kp-stone); text-decoration: none; }
.kp-crumbs a:hover { color: var(--kp-vermilion); }

.kp-filters { display: flex; flex-wrap: wrap; gap: var(--kp-space-2); align-items: center; margin-top: var(--kp-space-6); }
.kp-filters .kp-select { width: auto; min-width: 150px; flex: 0 1 200px; }
.kp-filters__search { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; background: var(--kp-surface); border: 1px solid var(--kp-line-strong); border-radius: var(--kp-radius); padding: 0 12px; min-height: 44px; }
.kp-filters__search:focus-within { border-color: var(--kp-vermilion); box-shadow: var(--kp-focus); }
.kp-filters__search svg { width: 18px; height: 18px; color: var(--kp-stone); flex-shrink: 0; }
.kp-filters__search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; }

.kp-pager { display: flex; align-items: center; justify-content: center; gap: var(--kp-space-6); font-size: var(--kp-text-sm); }
.kp-pager__off { color: var(--kp-line-strong); }

.kp-bookpage { display: grid; gap: var(--kp-space-8); margin-top: var(--kp-space-6); grid-template-columns: 1fr; }
@media (min-width: 820px) { .kp-bookpage { grid-template-columns: minmax(220px, 320px) 1fr; gap: var(--kp-space-12); } }
.kp-bookpage__cover { max-width: 320px; width: 70%; margin: 0 auto; }
@media (min-width: 820px) { .kp-bookpage__cover { width: 100%; margin: 0; position: sticky; top: 92px; align-self: start; } }
.kp-bookpage__main h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 6px; }
.kp-bookpage__subtitle { font-family: var(--kp-font-serif); font-size: var(--kp-text-xl); color: var(--kp-stone); margin-bottom: var(--kp-space-3); }
.kp-bookpage__by { font-size: var(--kp-text-lg); margin-bottom: var(--kp-space-2); }
.kp-bookpage__langs { display: grid; gap: 8px; margin: var(--kp-space-4) 0; }
.kp-chip--on { border-color: var(--kp-vermilion); background: var(--kp-vermilion-tint); color: var(--kp-vermilion-ink); }
.kp-bookpage__about, .kp-bookpage__main section { margin-top: var(--kp-space-8); }
.kp-bookpage__main h2 { font-size: var(--kp-text-xl); }
.kp-prose { max-width: 68ch; }

.kp-formats { display: grid; gap: var(--kp-space-2); margin-top: var(--kp-space-6); max-width: 640px; }
.kp-format { display: flex; justify-content: space-between; align-items: center; gap: var(--kp-space-4); flex-wrap: wrap; background: var(--kp-surface); border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg); padding: var(--kp-space-4); }
.kp-format strong { display: block; font-weight: 500; }
.kp-format__note { font-size: var(--kp-text-xs); color: var(--kp-stone); }
.kp-format__buy { display: flex; align-items: center; gap: var(--kp-space-4); }
.kp-format__price { font-size: var(--kp-text-lg); font-weight: 500; color: var(--kp-vermilion); white-space: nowrap; }
.kp-format__price s { color: var(--kp-stone); font-size: var(--kp-text-sm); font-weight: 400; margin-left: 6px; }

.kp-details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; font-size: var(--kp-text-sm); }
.kp-details dt { color: var(--kp-stone); }
.kp-details dd { margin: 0; }

.kp-author-cards { display: grid; gap: var(--kp-space-4); }
.kp-author-card { display: flex; gap: var(--kp-space-4); align-items: flex-start; background: var(--kp-surface); border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg); padding: var(--kp-space-4); max-width: 820px; }
.kp-author-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; max-width: none; }
.kp-author-card h3 { margin-bottom: 4px; font-size: var(--kp-text-lg); }
.kp-author-card h3 a { color: var(--kp-ink); text-decoration: none; }
.kp-author-card p { margin: 0; font-size: var(--kp-text-sm); }

.kp-author-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kp-space-6); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.kp-author-grid a { display: grid; justify-items: center; gap: 6px; text-align: center; text-decoration: none; color: var(--kp-ink); }
.kp-author-grid img, .kp-author-grid__initial { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; max-width: none; }
.kp-author-grid__initial { display: flex; align-items: center; justify-content: center; background: var(--kp-vermilion-tint); color: var(--kp-vermilion-ink); font-family: var(--kp-font-serif); font-size: 2rem; }
.kp-author-grid a:hover span { color: var(--kp-vermilion); }

.kp-author-head { display: flex; gap: var(--kp-space-8); align-items: flex-start; flex-wrap: wrap; margin-top: var(--kp-space-6); }
.kp-author-head img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; max-width: none; }
.kp-author-head > div { flex: 1 1 360px; }
.kp-author-head__alt { font-family: var(--kp-font-serif); font-size: var(--kp-text-xl); color: var(--kp-stone); margin-top: -6px; }
.kp-author-head__links { display: flex; gap: var(--kp-space-4); flex-wrap: wrap; margin-top: var(--kp-space-4); font-size: var(--kp-text-sm); }

.kp-preview-bar { background: #FEF3C7; color: #78350F; text-align: center; padding: 10px 16px; font-size: var(--kp-text-sm); }
.kp-preview-bar a { color: #78350F; font-weight: 500; }
.kp-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Customer accounts (Step 8) ---------- */
.kp-alert { border-radius: var(--kp-radius); padding: 12px 16px; font-size: var(--kp-text-sm); margin: 0 0 var(--kp-space-4); line-height: 1.6; }
.kp-alert--success { background: var(--kp-success-tint); color: var(--kp-success); }
.kp-alert--error { background: var(--kp-danger-tint); color: var(--kp-danger); }
.kp-alert--warn { background: var(--kp-vermilion-tint); color: var(--kp-vermilion-ink); }
.kp-alert a { color: inherit; font-weight: 500; }

.kp-auth { max-width: 440px; }
.kp-auth h1 { margin-bottom: var(--kp-space-2); }
.kp-auth__form { display: grid; gap: var(--kp-space-4); margin-top: var(--kp-space-6); }
.kp-auth__form .kp-field { margin: 0; }
.kp-auth__labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kp-auth__labelrow a { font-size: var(--kp-text-sm); }
.kp-auth__switch { margin-top: var(--kp-space-6); text-align: center; font-size: var(--kp-text-sm); color: var(--kp-stone); }
.kp-check { display: flex; align-items: center; gap: 10px; font-size: var(--kp-text-sm); cursor: pointer; }
.kp-check input { width: 18px; height: 18px; accent-color: var(--kp-vermilion); }
.kp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kp-link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--kp-vermilion); text-decoration: underline; cursor: pointer; }

.kp-account { max-width: 1000px; }
.kp-account__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--kp-space-4); margin-bottom: var(--kp-space-6); }
.kp-account__head h1 { margin: 0; }
.kp-account__head .kp-muted { margin: 4px 0 0; }
.kp-account__grid { display: grid; gap: var(--kp-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.kp-account__grid .kp-card { display: grid; gap: var(--kp-space-3); }
.kp-account__grid .kp-card > * { margin: 0; }
.kp-account__grid form { display: grid; gap: var(--kp-space-3); justify-items: start; }
.kp-account__grid .kp-field { width: 100%; margin: 0; }
.kp-account__grid .kp-card > .kp-btn { justify-self: start; }
.kp-account__title { font-size: var(--kp-text-lg); margin: 0; }