:root {
  --pk-blue: #143c69;
  --pk-blue-dark: #0b294a;
  --pk-red: #df2e38;
  --pk-ink: #17212b;
  --pk-muted: #6f7781;
  --pk-line: #e5e9ee;
  --pk-bg: #f5f7f9;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--pk-ink); background: #fff; font-family: Arial, Helvetica, sans-serif; }

.pk-books { max-width: 1220px; margin: 0 auto; padding: 64px 24px 48px; overflow: hidden; }
.pk-books__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.pk-books__eyebrow { display: block; margin-bottom: 8px; color: var(--pk-red); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pk-books h2 { margin: 0; color: var(--pk-blue-dark); font-size: clamp(28px, 4vw, 42px); line-height: 1.12; }
.pk-books__viewport { overflow: hidden; margin: -8px; padding: 8px; }
.pk-books__track { display: flex; gap: 24px; transition: transform .55s cubic-bezier(.22,.61,.36,1); will-change: transform; }

.pk-book { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; overflow: hidden; border: 1px solid var(--pk-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(20,60,105,.07); transition: transform .25s ease, box-shadow .25s ease; }
.pk-book:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(20,60,105,.14); }
.pk-book__image { display: flex; height: 310px; align-items: center; justify-content: center; padding: 24px; background: var(--pk-bg); }
.pk-book__image img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.pk-book:hover .pk-book__image img { transform: scale(1.025); }
.pk-book__content { display: flex; min-height: 172px; flex-direction: column; padding: 20px; }
.pk-book__stock { align-self: flex-start; margin-bottom: 9px; color: #16834b; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.pk-book h3 { margin: 0 0 20px; font-size: 19px; line-height: 1.3; }
.pk-book h3 a { color: var(--pk-ink); text-decoration: none; }
.pk-book h3 a:hover { color: var(--pk-blue); }
.pk-book__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; }
.pk-book__bottom strong { color: var(--pk-blue-dark); font-size: 22px; white-space: nowrap; }
.pk-book__buy { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 22px; border-radius: 7px; color: #fff; background: var(--pk-red); font-weight: 800; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.pk-book__buy:hover { color: #fff; background: #be202a; transform: translateY(-1px); }

.pk-books__arrows { display: flex; gap: 10px; }
.pk-books__arrow { width: 46px; height: 46px; border: 1px solid var(--pk-line); border-radius: 50%; color: var(--pk-blue); background: #fff; font-size: 23px; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.pk-books__arrow:hover { border-color: var(--pk-blue); color: #fff; background: var(--pk-blue); }
.pk-books__dots { display: flex; justify-content: center; gap: 9px; margin-top: 26px; }
.pk-books__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #cbd2da; cursor: pointer; transition: width .2s ease, border-radius .2s ease, background .2s ease; }
.pk-books__dot.is-active { width: 28px; border-radius: 8px; background: var(--pk-red); }

@media (max-width: 900px) {
  .pk-book { flex-basis: calc((100% - 24px) / 2); }
  .pk-book__image { height: 290px; }
}

@media (max-width: 580px) {
  .pk-books { padding: 44px 16px 36px; }
  .pk-books__heading { align-items: center; }
  .pk-books__arrow { width: 40px; height: 40px; }
  .pk-books__track { gap: 16px; }
  .pk-book { flex-basis: 100%; }
  .pk-book__image { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-books__track, .pk-book, .pk-book__image img { transition: none; }
}