/* ════════════════════════════════════════════════════════════════════════
   nk-home.css — секції нової головної (редизайн, ТЗ docs/home/REDESIGN_TZ.md).
   Токени BrandBook: #111/#444/#666/#999/#aaa, лінії #e5e7eb, акцент #ee2c2c.
   Шрифти Cormorant Garamond / Open Sans — підключені в header.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Hero (банери) ───────────────────────────────────────────────────── */
.nk-hero {
  width: 100%;
  overflow: hidden;
}

.nk-hero__swiper {
  width: 100%;
}

.nk-hero__slide {
  height: auto;
}

.nk-hero__link {
  display: block;
}

.nk-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 14px;
}

/* ─── Спільне для секцій головної ────────────────────────────────────────── */
.nk-section {
  padding: 48px 0;
}

.nk-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding: 0;
}

.nk-section__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 34px;
  letter-spacing: 0.8px;
  line-height: 1.1;
  color: #111;
  margin: 0;
}

@media (min-width: 768px) {
  .nk-section__title {
    font-size: 50px;
  }

  .nk-section__head {
    padding: 0;
  }

  .nk-bc__wrap {
    padding: 0;
  }
}

.nk-section__all {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #111;
  padding-bottom: 1px;
  white-space: nowrap;
  flex: none;
}

.nk-section__all:hover {
  opacity: 0.6;
  text-decoration: none;
  color: #111;
}

/* ─── Карусель книг (nk_book_carousel) ───────────────────────────────────── */
.nk-bc__wrap {
  position: relative;
  padding: 0;
}

.nk-bc__swiper {
  overflow: hidden;
}

.nk-bc__slide {
  height: auto;
}

.nk-bc__nav {
  position: absolute;
  top: 33%;
  transform: translateY(-50%);
  z-index: 5;
  width: 45px;
  height: 45px;
  border: none;
  background: #2e2e2e;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background 0.15s ease;
}

.nk-bc__nav:hover {
  background: #111;
}

.nk-bc__nav--prev {
  left: 0;
}

.nk-bc__nav--next {
  right: 0;
}

.nk-bc__nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* ─── Кнопки (BrandBook) ─────────────────────────────────────────────────── */
.nk-btn {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.4px;
  padding: 11px 22px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #111;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nk-btn--primary {
  background: #111;
  color: #fff;
}

.nk-btn--primary:hover {
  background: #2e2e2e;
  color: #fff;
  text-decoration: none;
}

.nk-btn--ghost {
  background: transparent;
  color: #111;
  border: none;
  border-bottom: 1px solid #111;
  padding: 0 0 1px;
}

.nk-btn--ghost:hover {
  color: #666;
  border-color: #666;
  text-decoration: none;
}

/* ─── 2. Нове за N днів (nk_featured_book) ───────────────────────────────── */
.nk-featured {
  padding: 48px 0;
  background: #fafafa;
}

.nk-featured__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
}

@media (min-width: 768px) {
  .nk-featured__inner {
    flex-direction: row-reverse;
    gap: 56px;
    padding: 0;
    align-items: flex-start;
  }
}

.nk-featured__cover {
  flex: none;
  width: 160px;
}

@media (min-width: 768px) {
  .nk-featured__cover {
    width: 220px;
  }
}

.nk-featured__coverlink {
  display: block;
  aspect-ratio: 2 / 3;
  background: #f5f5f5;
}

.nk-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nk-featured__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 18px;
  color: #111;
}

.nk-featured__info {
  flex: 1;
  min-width: 0;
}

.nk-featured__over {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #aaa;
  margin: 0 0 12px;
}

.nk-featured__genre {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #aaa;
  margin: 0 0 2px;
}

.nk-featured__author {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #666;
  margin: 0 0 16px;
}

.nk-featured__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 0.4px;
  color: #111;
  margin: 0 0 18px;
}

@media (min-width: 768px) {
  .nk-featured__title {
    font-size: 45px;
  }
}

.nk-featured__title a {
  color: #111;
  text-decoration: none;
}

.nk-featured__title a:hover {
  opacity: 0.7;
}

.nk-featured__desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.4px;
  color: #666;
  margin: 0 0 20px;
  max-width: 620px;
}

.nk-featured__price {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 26px;
  color: #111;
  margin: 0 0 20px;
}

.nk-featured__price-old {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #aaa;
  text-decoration: line-through;
  margin-left: 8px;
}

.nk-featured__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

/* ─── 6. Жанри (nk_genres) ───────────────────────────────────────────────── */
.nk-genres__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0;
}

@media (min-width: 600px) {
  .nk-genres__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .nk-genres__grid {
    padding: 0;
  }
}

.nk-genres__item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 66px;
  padding: 20px 16px;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.nk-genres__item:hover {
  opacity: 0.85;
  color: #fff;
  text-decoration: none;
}

/* ─── 7. Кураторський відгук (nk_curator) ────────────────────────────────── */
.nk-curator {
  padding: 48px 0;
  background: #fafafa;
}

.nk-curator__heading {
  padding: 0;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .nk-curator__heading {
    padding: 0;
  }
}

.nk-curator__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
}

@media (min-width: 768px) {
  .nk-curator__inner {
    flex-direction: row;
    gap: 48px;
    padding: 0;
    align-items: flex-start;
  }
}

.nk-curator__cover {
  flex: none;
  width: 160px;
}

@media (min-width: 768px) {
  .nk-curator__cover {
    width: 200px;
  }
}

.nk-curator__coverlink {
  display: block;
  aspect-ratio: 2 / 3;
  background: #f5f5f5;
}

.nk-curator__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nk-curator__info {
  flex: 1;
  min-width: 0;
}

.nk-curator__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  color: #111;
  margin: 0 0 14px;
}

@media (min-width: 768px) {
  .nk-curator__title {
    font-size: 36px;
  }
}

.nk-curator__title a {
  color: #111;
  text-decoration: none;
}

.nk-curator__title a:hover {
  opacity: 0.7;
}

.nk-curator__rating {
  color: #111;
  font-size: 13px;
  margin-bottom: 18px;
}

.nk-curator__rating .fa-star-o {
  color: #d1d5db;
}

.nk-curator__quote {
  border-left: 2px solid #111;
  padding: 0 0 0 24px;
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
  color: #333;
  max-width: 680px;
}

@media (min-width: 768px) {
  .nk-curator__quote {
    font-size: 22px;
  }
}

.nk-curator__by {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #666;
  margin: 0;
}

/* ─── 11. Чому ми (nk_advantages) ────────────────────────────────────────── */
.nk-adv {
  padding: 64px 0;
}

.nk-adv__heading {
  padding: 0;
  margin-bottom: 36px;
}

@media (min-width: 768px) {
  .nk-adv__heading {
    padding: 0;
  }
}

.nk-adv__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 0;
  /* body{float:left} у stylesheet.css вмикає shrink-to-fit для нащадків без явної
     ширини — grid схлопувався до 0 і items вилазили праворуч, даючи горизонтальний
     скрол на мобільних (через нього fixed-меню виглядало зсунутим). width гасить це. */
  width: 100%;
}

@media (min-width: 600px) {
  .nk-adv__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (min-width: 992px) {
  .nk-adv__grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 0;
  }
}

.nk-adv__item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nk-adv__icon {
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

.nk-adv__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nk-adv__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: #111;
  margin: 0 0 4px;
}

.nk-adv__sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #666;
  margin: 0;
}

/* ─── 12. Мобільний застосунок (nk_app_banner) ───────────────────────────── */
.nk-app {
  background: #111;
  color: #fff;
  padding: 56px 0;
}

.nk-app__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0;
  align-items: center;
}

@media (min-width: 768px) {
  .nk-app__inner {
    flex-direction: row;
    gap: 56px;
    padding: 0;
    align-items: center;
    justify-content: space-between;
  }
}

.nk-app__info {
  flex: 1;
  max-width: 560px;
}

.nk-app__eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #666;
  margin: 0 0 12px;
}

.nk-app__features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.nk-app__features li {
  position: relative;
  padding-left: 16px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #888;
}

.nk-app__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #666;
}

.nk-app__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.1;
  color: #fff !important;
  margin: 0 0 14px;
}

@media (min-width: 768px) {
  .nk-app__title {
    font-size: 44px;
  }
}

.nk-app__desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: #aaa;
  margin: 0 0 24px;
}

.nk-app__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.nk-app__store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #111;
  padding: 9px 16px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.nk-app__store:hover {
  opacity: 0.88;
  color: #111;
  text-decoration: none;
}

.nk-app__store .fa {
  font-size: 22px;
  line-height: 1;
}

.nk-app__store-label {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.nk-app__store-label small {
  font-family: 'Open Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #888;
}

.nk-app__store-label strong {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #111;
}

.nk-app__notify {
  border-top: 1px solid #2e2e2e;
  padding-top: 20px;
  max-width: 460px;
}

.nk-app__notify-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #aaa;
  margin: 0 0 12px;
}

.nk-app__notify-row {
  display: flex;
  gap: 0;
}

.nk-app__email {
  flex: 1;
  border: 1px solid #2e2e2e;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  padding: 0 14px;
  height: 44px;
  outline: none;
}

.nk-app__email:focus {
  border-color: #666;
}

.nk-app__notify-btn {
  height: 44px;
  border: 1px solid #fff;
}

.nk-app__consent {
  display: block;
  margin-top: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: #777;
  font-weight: normal;
}

.nk-app__notify-msg,
.nk-app__notify-done {
  margin: 10px 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #7ac47a;
}

/* Скріни — Swiper-слайдер: на ПК уміщаються в ряд, на планшеті/моб гортаються. */
.nk-app__screens {
  width: 100%;
  overflow: hidden;
}
@media (min-width: 768px) {
  .nk-app__screens { flex: 1 1 auto; min-width: 0; width: auto; }
}

.nk-app__screen {
  margin: 0;
  width: 150px;
  text-align: center;
  box-sizing: border-box;
}

.nk-app__screen img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 20;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.nk-app__screen figcaption {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #aaa;
  margin-top: 8px;
}

/* Лінк «Книги» у верхній смузі шапки */
.nk-app-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #111;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
}

.nk-app-link:hover {
  color: #111;
  opacity: 0.7;
  text-decoration: none;
}

.nk-app-link .fa {
  font-size: 14px;
}

.nk-blog-link {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-decoration: none;
  margin-right: 18px;
}

.nk-blog-link:hover {
  color: #fff;
  opacity: 0.75;
  text-decoration: none;
}

/* ─── Банер застосунку: фіксований унизу екрана (лише планшет/моб). ──────────── */
.nk-appbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: #111;
  color: #fff;
  border-top: 1px solid #2a2a2a;
}

.nk-appbar__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
}

.nk-appbar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.nk-appbar__link:hover,
.nk-appbar__link:focus {
  color: #fff;
  text-decoration: none;
}

.nk-appbar__icon {
  flex: none;
  font-size: 18px;
  opacity: 0.9;
}

.nk-appbar__text strong {
  font-weight: 600;
  color: #fff;
}

.nk-appbar__cta {
  flex: none;
  margin-left: auto;
  background: #fff;
  color: #111;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2px;
  padding: 5px 14px;
  border-radius: 6px;
  white-space: nowrap;
}

.nk-appbar__close {
  flex: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 0 2px 0 8px;
  cursor: pointer;
  opacity: 0.55;
}

.nk-appbar__close:hover {
  opacity: 1;
}

/* Банер — лише на планшетних/мобільних ширинах; на ПК ховається (там кнопка в білій шапці). */
@media (min-width: 1200px) {
  .nk-appbar {
    display: none;
  }
}

/* Мобільний стікі-хедер: ховається при гортанні вниз, з'являється при гортанні вгору
   (на ПК працює окремий JS теми через .header_top.fixed). */
@media (max-width: 1199px) {
  #header-top.nk-mfixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-100%);
    transition: transform 0.28s ease;
    will-change: transform;
  }

  #header-top.nk-mfixed.nk-mshow {
    transform: translateY(0);
  }
}

/* Кнопка «Завантажити застосунок» у білій шапці — лише на ПК (на мобільних є верхній банер). */
.nk-header__app {
  display: none;
}

@media (min-width: 1200px) {
  .nk-header__app {
    display: inline-flex;
  }
}

@media (max-width:768px) {
  .nk-appbar__cta {
    display: none;
  }
}