/* ============================================================
   Книжкова знижка — Components
   Підключати ПІСЛЯ tokens.css.
   ============================================================ */

/* ---------- Кнопки ---------- */
.kz-btn{
  font-family:inherit; font-weight:700; font-size:15px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border:1px solid transparent; border-radius:var(--kz-r-pill);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .05s;
  white-space:nowrap;
}
.kz-btn:active{ transform:translateY(1px); }
.kz-btn-primary  { background:var(--kz-green); color:#fff; }
.kz-btn-primary:hover { background:var(--kz-green-600); }
.kz-btn-secondary{ background:var(--kz-surface); color:var(--kz-ink); border-color:var(--kz-border-strong); }
.kz-btn-secondary:hover{ background:var(--kz-surface-2); }
.kz-btn-ghost    { background:transparent; color:var(--kz-ink); }
.kz-btn-ghost:hover{ background:rgba(22,24,28,.06); }
.kz-btn-sm{ padding:9px 16px; font-size:14px; }
.kz-btn-lg{ padding:16px 28px; font-size:16px; }

/* ---------- Поле вводу / пошук ---------- */
.kz-input{
  font-family:inherit; font-size:16px; color:var(--kz-text); width:100%;
  background:var(--kz-surface); border:1px solid var(--kz-border-strong);
  border-radius:var(--kz-r-pill); padding:14px 20px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.kz-input::placeholder{ color:var(--kz-text-3); }
.kz-input:focus{ border-color:var(--kz-green); box-shadow:0 0 0 4px var(--kz-green-50); }

.kz-search{ display:flex; gap:10px; align-items:center; }
.kz-search .kz-input{ flex:1; }

/* ---------- Чипи / фільтри ---------- */
.kz-chip{
  font-family:inherit; font-size:14px; font-weight:600; color:var(--kz-text-2);
  background:var(--kz-surface); border:1px solid var(--kz-border);
  border-radius:var(--kz-r-pill); padding:8px 16px; cursor:pointer; transition:.15s;
}
.kz-chip:hover{ border-color:var(--kz-border-strong); }
.kz-chip[aria-selected="true"]{ background:var(--kz-ink); color:#fff; border-color:var(--kz-ink); }

/* ---------- Бейдж знижки ---------- */
.kz-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; font-weight:800; color:#fff; background:var(--kz-green);
  border-radius:var(--kz-r-pill); padding:4px 10px; letter-spacing:-0.01em;
}
.kz-badge-up{ background:var(--kz-up); }
.kz-badge-soft{ background:var(--kz-green-50); color:var(--kz-green-700); }

/* ---------- Картка ---------- */
.kz-card{
  background:var(--kz-surface); border:1px solid var(--kz-border);
  border-radius:var(--kz-r-lg); box-shadow:var(--kz-shadow-sm);
  transition:box-shadow .18s, transform .18s;
}
.kz-card-hover:hover{ box-shadow:var(--kz-shadow-md); transform:translateY(-2px); }

/* ---------- Картка книги ---------- */
.kz-book{ display:flex; flex-direction:column; overflow:hidden; }
.kz-book__cover{ aspect-ratio:3/4; background:var(--kz-surface-2); position:relative; }
.kz-book__cover .kz-badge{ position:absolute; top:12px; left:12px; }
.kz-book__body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:6px; }
.kz-book__title{ font-size:16px; font-weight:700; color:var(--kz-ink); line-height:1.3; }
.kz-book__author{ font-size:13px; color:var(--kz-text-3); }
.kz-book__foot{ margin-top:8px; display:flex; align-items:baseline; gap:8px; }
.kz-book__price{ font-size:20px; font-weight:800; color:var(--kz-ink); font-variant-numeric:tabular-nums; }
.kz-book__old{ font-size:14px; color:var(--kz-text-3); text-decoration:line-through; }
.kz-book__stores{ font-size:13px; color:var(--kz-text-2); }

/* ---------- Рядок порівняння ціни по магазинах ---------- */
.kz-price-row{
  display:flex; align-items:center; gap:16px;
  padding:16px 20px; border-top:1px solid var(--kz-border);
}
.kz-price-row:first-child{ border-top:none; }
.kz-price-row__store{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.kz-price-row__logo{ width:40px; height:40px; border-radius:var(--kz-r-sm); background:var(--kz-surface-2); border:1px solid var(--kz-border); flex:none; }
.kz-price-row__name{ font-size:15px; font-weight:600; color:var(--kz-ink); }
.kz-price-row__meta{ font-size:13px; color:var(--kz-text-3); }
.kz-price-row__price{ font-size:18px; font-weight:800; color:var(--kz-ink); font-variant-numeric:tabular-nums; }
.kz-price-row--best{ background:var(--kz-green-50); }
.kz-price-row--best .kz-price-row__price{ color:var(--kz-green-700); }

/* ---------- Рейтинг ---------- */
.kz-rating{ display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--kz-text-2); }
.kz-rating__star{ color:var(--kz-star); }

/* ---------- Хедер ---------- */
.kz-header{
  display:flex; align-items:center; gap:24px;
  padding:16px 28px; background:var(--kz-surface); border-bottom:1px solid var(--kz-border);
}
.kz-header__logo{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px; letter-spacing:-0.02em; color:var(--kz-ink); }
.kz-header__nav{ display:flex; gap:20px; margin-left:auto; }
.kz-header__nav a{ font-size:15px; font-weight:600; color:var(--kz-text-2); }
.kz-header__nav a:hover{ color:var(--kz-ink); text-decoration:none; }

/* ---------- Футер ---------- */
.kz-footer{ background:var(--kz-ink); color:#fff; padding:48px 28px; }
.kz-footer a{ color:var(--kz-green-300); }

/* ---------- Утиліти ---------- */
.kz-container{ max-width:1160px; margin:0 auto; padding:0 24px; }
.kz-stack{ display:flex; flex-direction:column; }
.kz-row{ display:flex; align-items:center; }
.kz-gap-2{ gap:8px; } .kz-gap-3{ gap:12px; } .kz-gap-4{ gap:16px; } .kz-gap-6{ gap:24px; }