/* =====================================================================
   Na koláče – komponenty stránok (domov, ponuka, produkt, konfigurátor)
   Nadväzuje na nakolace.css (premenné, tlačidlá, karty).
   ===================================================================== */

/* ---------------------------------------------------------------
   HERO – domovská stránka
   --------------------------------------------------------------- */
.nk-hero {
  position: relative;
  padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 84px);
  background:
    radial-gradient(1100px 620px at 82% 6%, rgba(25, 202, 242, .12), transparent 60%),
    radial-gradient(900px 560px at 2% 70%, rgba(134, 15, 122, .10), transparent 58%),
    var(--nk-bg);
  overflow: hidden;
}
/* gradient plynulo dobehne do farby stránky – žiadna viditeľná hrana pod sekciou */
.nk-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--nk-bg));
  pointer-events: none;
}
.nk-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
}
.nk-hero__blob--1 { width: 340px; height: 340px; background: rgba(25, 202, 242, .3); top: -80px; right: 8%; }
.nk-hero__blob--2 { width: 300px; height: 300px; background: rgba(134, 15, 122, .28); bottom: -90px; left: -60px; }
[data-theme="dark"] .nk-hero__blob { opacity: .35; }

.nk-hero__copy { position: relative; z-index: 2; }
.nk-hero__title {
  font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.1;
  letter-spacing: .5px;
  margin: 6px 0 18px;
  color: var(--nk-text);
}
.nk-hero__lead {
  /* Rovnaká veľkosť ako mal text v pôvodnej sekcii „Predstavenie"
     (.nk-intro__body) — pri dvoch hero pásoch pod sebou bol väčší text
     príliš dominantný. */
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--nk-text-muted);
  max-width: 540px;
  margin-bottom: 14px;
}
/* Posledný odsek leadu drží odstup pred tlačidlami. */
.nk-hero__lead:last-of-type { margin-bottom: 30px; }
.nk-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.nk-hero__notes { display: flex; gap: 24px; flex-wrap: wrap; }
.nk-hero__notes li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--nk-text-muted);
}
.nk-hero__notes i { color: var(--nk-primary-ink); }

.nk-hero__media { position: relative; min-height: 440px; height: 100%; }
.nk-hero__shot { position: absolute; }
.nk-hero__shot--main { width: 76%; top: 0; right: 0; z-index: 1; }
.nk-hero__shot--main img { aspect-ratio: 4 / 3; }
.nk-hero__shot--sm { width: 42%; bottom: 0; left: 0; z-index: 3; }
.nk-hero__shot--sm img { aspect-ratio: 4 / 3; }
.nk-hero__shot--xs { width: 31%; top: 46%; left: 41%; z-index: 2; }
.nk-hero__shot--xs img { aspect-ratio: 1 / 1; }

.nk-hero__badge {
  position: absolute;
  top: 16px; left: 4%;
  z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--nk-surface);
  border-radius: var(--nk-r);
}
.nk-hero__badge i { color: var(--nk-star); font-size: 19px; }
.nk-hero__badge strong { display: block; font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif; font-size: 18px; line-height: 1.1; }
.nk-hero__badge span { font-size: 12px; color: var(--nk-text-muted); }

/* ---------------------------------------------------------------
   Predstavenie
   --------------------------------------------------------------- */
.nk-intro__body { font-size: 15.5px; line-height: 1.85; margin-bottom: 14px; }
.nk-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.nk-intro__grid img { aspect-ratio: 1 / 1; }
.nk-intro__wide { grid-column: span 2; }
.nk-intro__wide img { aspect-ratio: 16 / 7; }

/* ---------------------------------------------------------------
   Kategórie
   --------------------------------------------------------------- */
.nk-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.nk-cat { text-decoration: none; color: inherit; }
.nk-cat:hover { text-decoration: none; color: inherit; }
.nk-cat__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--nk-bg-alt); }
.nk-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--nk-slow); }
.nk-cat:hover .nk-cat__media img { transform: scale(1.08); }
.nk-cat__body { padding: 22px; position: relative; flex: 1; display: flex; flex-direction: column; }
.nk-cat__body > i {
  position: absolute;
  top: -26px; right: 22px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--nk-r-pill);
  background: var(--nk-pink);
  color: #fff;
  font-size: 20px;
  box-shadow: var(--nk-shadow);
  transition: transform var(--nk-med), background-color var(--nk-fast);
}
.nk-cat:hover .nk-cat__body > i { transform: rotate(-10deg) scale(1.08); background: var(--nk-purple); }
.nk-cat__title { font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif; font-size: 20px; margin-bottom: 8px; }
.nk-cat__text { font-size: 14px; line-height: 1.6; color: var(--nk-text-muted); flex: 1; margin-bottom: 14px; }
.nk-cat__link { font-size: 13px; font-weight: 300; text-transform: uppercase; letter-spacing: .5px; color: var(--nk-primary-ink); }
.nk-cat__link i { transition: transform var(--nk-fast); margin-left: 4px; }
.nk-cat:hover .nk-cat__link i { transform: translateX(5px); }

/* ---------------------------------------------------------------
   Torty na mieru – CTA
   --------------------------------------------------------------- */
.nk-cakes-cta__media { position: relative; padding-bottom: 40px; }
.nk-cakes-cta__media > figure img { aspect-ratio: 4 / 3; }
.nk-cakes-cta__inset {
  position: absolute;
  right: -10px; bottom: 0;
  width: 46%;
}
.nk-cakes-cta__inset img { aspect-ratio: 1 / 1; }
.nk-cakes-cta__copy { padding-left: 20px; }

.nk-ticks { margin: 22px 0 28px; }
.nk-ticks li {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--nk-text);
}
.nk-ticks i {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--nk-r-pill);
  background: rgba(47, 169, 107, .14);
  color: #2fa96b;
  font-size: 11px;
  margin-top: 2px;
}

/* ---------------------------------------------------------------
   Kalkulačka porcií
   --------------------------------------------------------------- */
.nk-calc { padding: clamp(28px, 3.6vw, 46px); background: var(--nk-surface); }
.nk-calc__row {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 14px;
  align-items: end;
}
.nk-calc__row .nk-btn { height: 50px; }
.nk-calc__out {
  margin: 18px 0 0;
  padding: 0;
  font-size: 16px;
  color: var(--nk-text);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--nk-med), transform var(--nk-med);
}
.nk-calc__out.is-visible {
  opacity: 1; transform: none;
  padding: 14px 18px;
  background: var(--nk-bg-alt);
  border-radius: var(--nk-r);
}
.nk-calc__out strong { color: var(--nk-primary-ink); font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif; font-size: 19px; }

/* ---------------------------------------------------------------
   Prečo my
   --------------------------------------------------------------- */
.nk-why { padding: 30px 26px; text-align: center; align-items: center; }
.nk-why__icon {
  width: 66px; height: 66px;
  display: grid; place-items: center;
  margin: 0 auto 18px;
  border-radius: var(--nk-r-pill);
  background: linear-gradient(135deg, rgba(25, 202, 242, .14), rgba(134, 15, 122, .14));
  color: var(--nk-primary-ink);
  font-size: 25px;
  transition: transform var(--nk-med);
}
.nk-why:hover .nk-why__icon { transform: translateY(-4px) rotate(-8deg); }
.nk-why__title { font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif; font-size: 18px; margin-bottom: 10px; }
.nk-why__text { font-size: 14px; line-height: 1.7; color: var(--nk-text-muted); }

/* ---------------------------------------------------------------
   Kroky
   --------------------------------------------------------------- */
.nk-step { position: relative; padding: 30px 24px; text-align: center; }
.nk-step__num {
  display: inline-grid; place-items: center;
  width: 60px; height: 60px;
  margin-bottom: 16px;
  border-radius: var(--nk-r-pill);
  background: var(--nk-surface);
  color: var(--nk-primary-ink);
  font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
  font-size: 21px;
  font-weight: 300;
  box-shadow: var(--nk-shadow-sm), var(--nk-ring);
  transition: transform var(--nk-med), background-color var(--nk-med), color var(--nk-med);
}
.nk-step:hover .nk-step__num { background: var(--nk-pink); color: #fff; transform: translateY(-5px) scale(1.06); }
.nk-step__title { font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif; font-size: 18px; margin-bottom: 10px; }
.nk-step__text { font-size: 14px; line-height: 1.7; color: var(--nk-text-muted); }
/* spojnica medzi krokmi */
.nk-process .nk-grid > .nk-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 52px; right: -13px;
  width: 26px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--nk-border-strong) 0 5px, transparent 5px 10px);
}

/* ---------------------------------------------------------------
   Čísla
   --------------------------------------------------------------- */
.nk-stats {
  position: relative;
  background-image: var(--nk-stats-img);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  isolation: isolate;
}
.nk-stats__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(134, 15, 122, .93), rgba(25, 202, 242, .85));
  z-index: -1;
}
[data-theme="dark"] .nk-stats__overlay {
  background: linear-gradient(120deg, rgba(20, 16, 26, .95), rgba(134, 15, 122, .88));
}
.nk-stats__title { color: #fff !important; margin-bottom: 40px; }
.nk-stat { text-align: center; color: #fff; padding: 10px; }
.nk-stat__value {
  display: block;
  font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  margin-bottom: 8px;
  color: var(--nk-star);
}
.nk-stat__label { font-size: 14px; color: rgba(255, 255, 255, .9); }

/* ---------------------------------------------------------------
   Recenzie
   --------------------------------------------------------------- */
.nk-review { padding: 28px 26px; }
.nk-review__stars { color: var(--nk-star); margin-bottom: 14px; font-size: 14px; letter-spacing: 2px; }
.nk-review__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--nk-text);
  margin-bottom: 20px;
  flex: 1;
  font-style: italic;
}
.nk-review__author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--nk-border); }
.nk-review__author img {
  width: 48px; height: 48px;
  border-radius: var(--nk-r-pill);
  object-fit: cover;
  box-shadow: var(--nk-shadow-xs);
}
.nk-review__author strong { display: block; font-size: 15px; font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif; }
.nk-review__author span { font-size: 13px; color: var(--nk-text-muted); }

/* ---------------------------------------------------------------
   Články
   --------------------------------------------------------------- */
.nk-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--nk-bg-alt); }
.nk-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--nk-slow); }
.nk-post:hover .nk-post__media img { transform: scale(1.07); }
.nk-post__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.nk-post__meta { font-size: 12.5px; color: var(--nk-text-muted); margin-bottom: 10px; }
.nk-post__meta i { color: var(--nk-primary-ink); margin-right: 5px; }
.nk-post__title { font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif; font-size: 19px; line-height: 1.35; margin-bottom: 10px; }
.nk-post__title a { color: var(--nk-text); text-decoration: none; }
.nk-post__title a:hover { color: var(--nk-primary-ink); }
.nk-post__excerpt {
  font-size: 14px; line-height: 1.7; color: var(--nk-text-muted);
  margin-bottom: 16px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nk-post__link {
  font-size: 13px; font-weight: 300; text-transform: uppercase;
  letter-spacing: .5px; color: var(--nk-primary-ink); text-decoration: none;
}
.nk-post__link i { margin-left: 5px; transition: transform var(--nk-fast); }
.nk-post__link:hover { color: var(--nk-purple); text-decoration: none; }
.nk-post__link:hover i { transform: translateX(5px); }

/* ---------------------------------------------------------------
   Akordeón
   --------------------------------------------------------------- */
.nk-accordion__item {
  background: var(--nk-surface);
  border: 1px solid var(--nk-border);
  border-radius: var(--nk-r);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--nk-shadow-xs);
  transition: box-shadow var(--nk-med), border-color var(--nk-fast);
}
.nk-accordion__item:hover { box-shadow: var(--nk-shadow-sm); }
.nk-accordion__head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  border: 0;
  background: transparent;
  color: var(--nk-text);
  font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: color var(--nk-fast), background-color var(--nk-fast);
}
.nk-accordion__head:hover { color: var(--nk-primary-ink); }
.nk-accordion__head i {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--nk-r-pill);
  background: var(--nk-bg-alt);
  color: var(--nk-primary-ink);
  font-size: 12px;
  transition: transform var(--nk-med), background-color var(--nk-fast), color var(--nk-fast);
}
.nk-accordion__head:not(.collapsed) i { transform: rotate(45deg); background: var(--nk-pink); color: #fff; }
.nk-accordion__body {
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--nk-text-muted);
}

/* ---------------------------------------------------------------
   Záverečné CTA
   --------------------------------------------------------------- */
.nk-final {
  position: relative;
  background-image: var(--nk-final-img);
  background-size: cover;
  background-position: center;
  isolation: isolate;
  text-align: center;
}
.nk-final__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(15, 2, 0, .82), rgba(134, 15, 122, .8));
  z-index: -1;
}
.nk-final__inner { max-width: 700px; margin: 0 auto; }
.nk-final__title {
  font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
  text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 44px);
  color: #fff;
  margin-bottom: 14px;
}
.nk-final__text { color: rgba(255, 255, 255, .9); font-size: 16px; line-height: 1.75; margin-bottom: 28px; }
.nk-final__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.nk-btn--on-dark { --btn-fg: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.nk-btn--on-dark:hover { --btn-bg: #fff; --btn-fg: var(--nk-pink); }

/* =====================================================================
   RESPONZÍVNE ÚPRAVY KOMPONENTOV
   ===================================================================== */

/* MacBook Air a menšie notebooky */
@media (max-width: 1280px) {
  .nk-hero__media { min-height: 420px; }
  .nk-cats { grid-template-columns: repeat(2, 1fr); }
  .nk-hero__title { font-size: clamp(30px, 4vw, 46px); }
}

@media (max-width: 1199px) {
  .nk-calc__row { grid-template-columns: 1fr 1fr; }
  .nk-calc__row .nk-btn { grid-column: span 2; }
  .nk-process .nk-grid > .nk-step::after { display: none; }
  .nk-cakes-cta__copy { padding-left: 0; }
}

/* tablet */
@media (max-width: 991px) {
  .nk-hero { padding-top: 36px; }
  .nk-hero__copy { text-align: center; margin-bottom: 44px; }
  .nk-hero__lead { margin-left: auto; margin-right: auto; }
  .nk-hero__actions, .nk-hero__notes { justify-content: center; }
  .nk-hero__media { min-height: 400px; max-width: 560px; margin: 0 auto; }

  .nk-intro__copy { margin-top: 34px; text-align: center; }
  .nk-intro__copy .nk-head--left { text-align: center; }

  .nk-cakes-cta__media { margin-bottom: 34px; }
  .nk-cakes-cta__copy { text-align: center; }
  .nk-ticks li { text-align: left; }

  .nk-calc { text-align: center; }
  .nk-calc__form { margin-top: 26px; }
}

/* mobil */
@media (max-width: 767px) {
  .nk-hero { padding: 26px 0 44px; }
  .nk-hero__title { font-size: clamp(26px, 8vw, 36px); }
  .nk-hero__lead { font-size: 15px; margin-bottom: 22px; }
  .nk-hero__actions { flex-direction: column; }
  .nk-hero__actions .nk-btn { width: 100%; }
  .nk-hero__notes { flex-direction: column; gap: 8px; align-items: center; }

  /* na mobile stačí jeden hlavný obrázok – vrstvenie by bolo neprehľadné */
  .nk-hero__media { min-height: 0; }
  .nk-hero__shot { position: static; width: 100%; }
  .nk-hero__shot--sm, .nk-hero__shot--xs { display: none; }
  .nk-hero__badge { position: absolute; right: 12px; bottom: 12px; top: auto; left: auto; padding: 9px 14px; }
  .nk-hero__badge strong { font-size: 15px; }
  .nk-hero__badge span { font-size: 11px; }

  .nk-intro__grid { gap: 12px; }
  .nk-cats { grid-template-columns: 1fr; gap: 34px; }
  .nk-cat__body > i { top: -24px; right: 18px; width: 46px; height: 46px; font-size: 18px; }

  .nk-cakes-cta__inset { display: none; }
  .nk-cakes-cta__media { padding-bottom: 0; }

  .nk-calc { padding: 24px 20px; }
  .nk-calc__row { grid-template-columns: 1fr; }
  .nk-calc__row .nk-btn { grid-column: auto; width: 100%; }

  .nk-why { padding: 24px 20px; }
  .nk-step { padding: 22px 16px; }
  .nk-stat { padding: 6px; }
  .nk-stats__title { margin-bottom: 26px; }

  .nk-review { padding: 22px 20px; }
  .nk-accordion__head { padding: 15px 16px; font-size: 15px; }
  .nk-accordion__body { padding: 0 16px 16px; font-size: 14px; }

  .nk-final__actions { flex-direction: column; }
  .nk-final__actions .nk-btn { width: 100%; }
}

@media (max-width: 430px) {
  .nk-hero__badge { padding: 8px 12px; gap: 8px; }
  .nk-intro__grid { grid-template-columns: 1fr; }
  .nk-intro__wide { grid-column: auto; }
  .nk-stat__value { font-size: 30px; }
}

/* =========================================================================
   Sekcie z page buildera (views/partials/sections.ejs)
   Vychádzajú z existujúcich tokenov webu, aby stránka poskladaná v CMS
   vyzerala rovnako ako tá, ktorú kreslil dizajnér.
   ========================================================================= */

.nk-section--intro { padding-bottom: 0; }


/* Text sekcia — čitateľná šírka a typografia obsahu z richtextu. */
.nk-prose--narrow { max-width: 760px; }
.nk-prose { color: var(--nk-text); font-size: 16.5px; line-height: 1.8; }
.nk-prose > *:first-child { margin-top: 0; }
.nk-prose > *:last-child { margin-bottom: 0; }
.nk-prose h2 { margin: 32px 0 12px; }
.nk-prose h3 { margin: 26px 0 10px; }
.nk-prose p { margin: 0 0 16px; }
.nk-prose ul, .nk-prose ol { margin: 0 0 16px; padding-left: 22px; }
.nk-prose li { margin-bottom: 8px; }
.nk-prose a { color: var(--nk-primary-ink); text-decoration: underline; }
.nk-prose blockquote {
  margin: 20px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--nk-primary);
  background: var(--nk-bg-alt);
  border-radius: 0 var(--nk-radius, 12px) var(--nk-radius, 12px) 0;
  color: var(--nk-text-muted);
}

/* Obsah z textového editora v CMS na miestach, kde predtým bol jeden odsek:
   popis a príbeh produktu, odpoveď v FAQ, popis kategórie.
   Zámerne NEnastavuje veľkosť ani farbu písma — tie si drží pôvodná trieda
   bloku (.nk-product-info__desc, .nk-lead, .nk-accordion__body), takže sa
   vzhľad oproti obyčajnému textu nemení. Rieši len rozostupy prvkov, ktoré
   v jednom odseku predtým nemohli vzniknúť. */
.nk-obsah > *:first-child { margin-top: 0; }
.nk-obsah > *:last-child { margin-bottom: 0; }
.nk-obsah p { margin: 0 0 14px; }
.nk-obsah ul, .nk-obsah ol { margin: 0 0 14px; padding-left: 22px; }
.nk-obsah li { margin-bottom: 6px; }
.nk-obsah h2, .nk-obsah h3, .nk-obsah h4 {
  margin: 22px 0 10px;
  font-size: 1.15em;
  color: var(--nk-text);
}
.nk-obsah a { color: var(--nk-primary-ink); text-decoration: underline; }
.nk-obsah img { max-width: 100%; height: auto; border-radius: var(--nk-radius, 12px); margin: 6px 0 14px; }
.nk-obsah hr { margin: 18px 0; border: 0; border-top: 1px solid var(--nk-border, rgba(0, 0, 0, .1)); }
.nk-obsah blockquote {
  margin: 16px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--nk-primary);
  color: var(--nk-text-muted);
}
/* Zaškrtávací zoznam z editora — štvorčeky namiesto odrážok. */
.nk-checklist { list-style: none; padding-left: 4px; }
.nk-checklist li::before { content: '\2610'; margin-right: 8px; }
.nk-checklist .nk-checklist__done::before { content: '\2611'; }

/* Argumenty a kroky z page buildera používajú vzhľad stránky — karty .nk-why
   pri ikonách a .nk-step s číslom pri postupnosti. Vlastné štýly tu preto
   nie sú; boli by to len duplikáty, ktoré prebijú pôvodné pravidlá. */

/* Counter — narátané čísla; pri fotke na pozadí sa použije .nk-stat zo stránky. */
.nk-counters > [class*='col-'] { margin-bottom: 18px; }
.nk-counter { text-align: center; }
.nk-counter__value {
  display: block;
  font-family: var(--nk-font-display, inherit);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--nk-primary-ink);
}
.nk-counter__label { display: block; margin-top: 6px; color: var(--nk-text-muted); font-size: 15px; }

/* Pásik s obrázkami. */
.nk-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 42px; margin: 0;
}
.nk-logos__item { display: flex; align-items: center; }
.nk-logos__item img { max-height: 46px; width: auto; opacity: 0.75; transition: opacity 0.2s ease; }
.nk-logos__item:hover img { opacity: 1; }
.nk-logos__text { color: var(--nk-text-muted); font-weight: 300; letter-spacing: 0.04em; }

/* Zóny rozvozu — tabuľka oblasť / čas / cena. Pravidlá prišli zo stránky
   Doručenie, aby rovnako vyzerala aj sekcia z page buildera. */
.nk-zones {
  border-radius: var(--nk-r-lg);
  box-shadow: var(--nk-shadow), var(--nk-ring);
  background: var(--nk-surface);
  overflow: hidden;
}
.nk-zones__head,
.nk-zones__row {
  display: grid;
  grid-template-columns: 2fr 1.6fr .8fr;
  gap: 16px;
  align-items: center;
  padding: 16px 24px;
}
.nk-zones__head {
  background: var(--nk-bg-alt);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--nk-text-muted);
}
.nk-zones__row { border-top: 1px solid var(--nk-border); transition: background-color var(--nk-fast); }
.nk-zones__row:hover { background: var(--nk-bg-soft); }
.nk-zones__area { font-family: "Source Serif 4", Georgia, serif; font-size: 16px; color: var(--nk-text); }
.nk-zones__area i { color: var(--nk-primary-ink); margin-right: 8px; }
.nk-zones__time { color: var(--nk-text-muted); font-size: 14px; }
.nk-zones__price strong { font-family: "Source Serif 4", Georgia, serif; font-size: 19px; color: var(--nk-primary-ink); }
.nk-zones__mob { display: none; }

@media (max-width: 767px) {
  .nk-zones__head { display: none; }
  .nk-zones__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; }
  .nk-zones__mob {
    display: inline;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--nk-text-muted);
    margin-right: 4px;
  }
}

/* Prepínanie galérie podľa kategórie. */
.nk-gal-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.nk-gal-filters .nk-btn.is-active {
  --btn-bg: var(--nk-pink);
  --btn-fg: #fff;
  box-shadow: var(--nk-shadow-sm);
}

/* Recenzia v karte — riadok s fotkou a menom pod textom. */
.nk-review__author-row { border-bottom: 0; padding-bottom: 0; }
.nk-review__role { font-size: 13px; }

/* Citát — jedna veta v karte na stred. */
.nk-quote { padding: clamp(28px, 5vw, 56px); }
.nk-quote > i { font-size: 34px; color: var(--nk-primary-ink); }

/* Výzva ako karta — fotka vľavo, text vpravo. */
.nk-cta-karta { overflow: hidden; }
.nk-cta-karta__copy { padding: clamp(28px, 4vw, 52px); }

/* Bio člena tímu. */
.nk-team__bio { font-size: 14px; line-height: 1.65; }

/* Sekcia s tenkým odsadením — pásik upozornení nad obsahom. */
.nk-section--tesna { padding-top: clamp(20px, 2vw, 28px); padding-bottom: 0; }

/* Galéria — štvorcové dlaždice s popisom, ktorý sa vysunie pri prejdení myšou.
   Pravidlá sem prišli zo stránky Galéria, aby ten istý vzhľad mala aj sekcia
   z page buildera; obe teraz čítajú z jedného miesta. */
.nk-gal-item { margin: 0; position: relative; overflow: hidden; border-radius: var(--nk-r-lg); }
.nk-gal-item img { aspect-ratio: 1 / 1; }
.nk-gal-item__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(15, 2, 0, .78), rgba(15, 2, 0, 0));
  color: #fff;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 15px;
  border-radius: 0 0 var(--nk-r-lg) var(--nk-r-lg);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--nk-med), transform var(--nk-med);
  pointer-events: none;
}
.nk-gal-item:hover .nk-gal-item__cap,
.nk-gal-item:focus-within .nk-gal-item__cap { opacity: 1; transform: none; }
@media (hover: none) {
  .nk-gal-item__cap { opacity: 1; transform: none; }
}
.nk-gal-item[hidden] { display: none; }

/* Právny / dlhý text v karte — pravidlá prišli zo stránok s obchodnými
   podmienkami, aby rovnako vyzeral aj úzky text z page buildera. */
.nk-legal {
  background: var(--nk-surface);
  padding: clamp(26px, 4vw, 56px);
}
.nk-legal__updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: 26px;
  border-radius: var(--nk-r-pill);
  background: var(--nk-bg-alt);
  color: var(--nk-text-muted);
  font-size: 13px;
}
.nk-legal__updated i { color: var(--nk-primary-ink); }

.nk-legal h2,
.nk-legal h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 38px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--nk-border);
}
.nk-legal h2:first-of-type,
.nk-legal h3:first-of-type { margin-top: 0; }

.nk-legal p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--nk-text-muted);
  margin-bottom: 16px;
}
.nk-legal p strong { color: var(--nk-text); }

.nk-legal ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.nk-legal ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--nk-text-muted);
}
.nk-legal ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  border-radius: var(--nk-r-pill);
  background: var(--nk-pink);
}

.nk-legal a { color: var(--nk-primary-ink); }
.nk-legal a:hover { color: var(--nk-primary-ink-strong); }

/* Kontaktné karty — zvislý zoznam s ikonou v krúžku. Pravidlá sem prišli zo
   stránky Kontakt, aby rovnako vyzerala aj sekcia z page buildera. */
.nk-contact-list { display: grid; gap: 14px; margin-bottom: 26px; }
.nk-contact-card { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; }
.nk-contact-card:hover { transform: none; }
.nk-contact-card__icon {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(25, 202, 242, .1); color: var(--nk-primary-ink); font-size: 18px;
}
.nk-contact-card__icon img { width: 22px; height: 22px; object-fit: contain; }
.nk-contact-card__title {
  font-family: "Source Serif 4", Georgia, serif; font-size: 15px; text-transform: uppercase;
  letter-spacing: .06em; margin: 0 0 4px; color: var(--nk-text);
}
.nk-contact-card p { color: var(--nk-text-muted); font-size: 15px; line-height: 1.7; }
.nk-contact-card a { color: var(--nk-text-muted); text-decoration: none; transition: color var(--nk-fast); }
.nk-contact-card a:hover { color: var(--nk-primary-ink); }

.nk-contact-notes { background: var(--nk-surface); padding: 24px 26px; margin-bottom: 30px; }
.nk-contact-notes__title {
  font-family: "Source Serif 4", Georgia, serif; font-size: 15px; text-transform: uppercase;
  letter-spacing: .06em; margin: 0 0 8px; color: var(--nk-text);
}
.nk-contact-notes__title i { color: var(--nk-primary-ink); margin-right: 8px; }
.nk-contact-notes p { font-size: 14.5px; line-height: 1.75; margin-bottom: 22px; }
.nk-contact-notes p:last-child { margin-bottom: 0; }

.nk-contact-form { background: var(--nk-surface); padding: clamp(24px, 3.4vw, 44px); }

/* Mapa vo vloženom ráme (sekcia Kontakt z page buildera). Stránka Kontakt má
   vlastnú, načítavanú až po kliknutí — tá si štýly nesie so sebou. */
.nk-map--embed { overflow: hidden; border-radius: var(--nk-r-lg); }
.nk-map--embed iframe { display: block; }

/* Otázka s tlačidlami — zvýraznený rámček na konci stránky. */
.nk-cta-box {
  padding: 40px 32px;
  border-radius: var(--nk-radius-lg, 18px);
  background: var(--nk-bg-alt);
  text-align: center;
}
.nk-cta-box__title { margin: 0 0 10px; }
.nk-cta-box__text {
  max-width: 640px; margin: 0 auto 22px;
  color: var(--nk-text-muted); line-height: 1.7;
}
.nk-cta-box__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Sekundárne tlačidlo — obrys namiesto výplne. */
.nk-btn--outline {
  background: transparent;
  border: 2px solid var(--nk-border-strong);
  color: var(--nk-text);
}
.nk-btn--outline:hover { border-color: var(--nk-primary); color: var(--nk-primary-ink); }

/* =====================================================================
   Prvky, ktoré oslovia návštevníka — toast, CTA lišta, zľava
   Vykresľuje ich public/js/engagement.js, obsah riadi CMS.
   ===================================================================== */

/* Toast so sociálnym dôkazom. Zámerne iné triedy než .nk-toast — tá patrí
   hláškam typu „pridané do košíka" a s touto bublinou nemá nič spoločné. */
.nk-ohlasy {
  position: fixed;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
  pointer-events: none;
}
/* Dolné bubliny stoja NAD celým dolným pásom, nie len nad rohovým tlačidlom.
   V rohoch sedia oba 46 px vysoké prvky (vľavo „späť hore", vpravo spúšťač
   asistentky), takže samotné rohy by odbavilo 62 px. Rozhoduje však hláška
   „pridané do košíka": je uprostred, ale pri dlhom názve produktu sa medzi
   768–1023 px zalomí na dva riadky a siaha po 76 px nad spodnú hranu — a to už
   je pod oboma bublinami naraz. 88 px = tie dva riadky plus 12 px medzera.
   Obe strany majú preto rovnakú hodnotu; deliť ich nemá čo. */
.nk-ohlasy { transition: bottom var(--nk-med); }
.nk-ohlasy--vlavo-dole   { left: 20px;  bottom: calc(var(--nk-dno) + 88px); }
.nk-ohlasy--vpravo-dole  { right: 20px; bottom: calc(var(--nk-dno) + 88px); }
.nk-ohlasy--vlavo-hore   { left: 20px;  top: 96px; }
.nk-ohlasy--vpravo-hore  { right: 20px; top: 96px; }

.nk-ohlas {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--nk-surface);
  border: 1px solid var(--nk-border);
  border-radius: var(--nk-r);
  box-shadow: var(--nk-shadow);
  font-size: 13.5px;
  line-height: 1.5;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--nk-med), transform var(--nk-med);
}
.nk-ohlas.je-vidno { opacity: 1; transform: none; }
.nk-ohlas__bod {
  flex: 0 0 8px;
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: #2fa96b;
  box-shadow: 0 0 0 3px rgba(47, 169, 107, .2);
}
.nk-ohlas__telo { flex: 1; min-width: 0; }
.nk-ohlas__telo small { color: var(--nk-text-muted); font-size: 12px; }
.nk-ohlas__zavri {
  flex: 0 0 auto;
  border: 0; background: none; cursor: pointer;
  color: var(--nk-text-muted);
  font-size: 18px; line-height: 1;
  padding: 0 2px;
}
.nk-ohlas__zavri:hover { color: var(--nk-text); }

/* CTA lišta — vysunie sa zdola po odscrollovaní. */
.nk-cta-lista {
  position: fixed;
  left: 50%; bottom: 18px;
  z-index: 880;
  width: min(1100px, calc(100vw - 32px));
  transform: translateX(-50%) translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--nk-med), opacity var(--nk-med);
}
.nk-cta-lista.je-vidno { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
/* Vysunutá lišta zdvihne spodnú hranu — a s ňou naraz všetko, čo od nej stojí:
   tlačidlo „späť hore", spúšťač asistentky, bubliny aj hlášky. Triedu na <body>
   prepína public/js/engagement.js podľa toho, či je lišta vidno. */
body.nk-ma-cta-listu { --nk-dno: 116px; }
.nk-cta-lista__vnutro {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: var(--nk-surface);
  border: 1px solid var(--nk-border);
  border-radius: var(--nk-r-lg);
  box-shadow: var(--nk-shadow);
}
.nk-cta-lista__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nk-cta-lista__text small { color: var(--nk-text-muted); font-size: 13px; }
.nk-cta-lista__akcie { display: flex; gap: 10px; flex-wrap: wrap; }
.nk-cta-lista__zavri {
  border: 0; background: none; cursor: pointer;
  color: var(--nk-text-muted); font-size: 20px; line-height: 1; padding: 0 2px;
}
.nk-cta-lista__zavri:hover { color: var(--nk-text); }

/* Zľava — vyskakovacie okno pri odchode. */
.nk-zlava {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 2, 0, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nk-med), visibility var(--nk-med);
}
.nk-zlava.je-vidno { opacity: 1; visibility: visible; }
.nk-zlava__karta {
  position: relative;
  width: min(460px, 100%);
  padding: clamp(24px, 4vw, 36px);
  background: var(--nk-surface);
  border-radius: var(--nk-r-lg);
  box-shadow: var(--nk-shadow-hover);
  text-align: center;
  transform: translateY(14px);
  transition: transform var(--nk-med);
}
.nk-zlava.je-vidno .nk-zlava__karta { transform: none; }
.nk-zlava__zavri {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: none; cursor: pointer;
  color: var(--nk-text-muted); font-size: 22px; line-height: 1;
}
.nk-zlava__zavri:hover { color: var(--nk-text); }
.nk-zlava__odznak {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 14px;
  border-radius: var(--nk-r-pill);
  background: var(--nk-primary);
  color: #0f0200;
  font-size: 13px; font-weight: 300;
}
.nk-zlava__karta h3 { margin: 0 0 10px; font-size: clamp(20px, 3vw, 26px); }
.nk-zlava__karta p { color: var(--nk-text-muted); font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
.nk-zlava__formular { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.nk-zlava__formular input[type="email"] {
  padding: 12px 16px;
  border: 1px solid var(--nk-border-strong);
  border-radius: var(--nk-r);
  background: var(--nk-bg);
  color: var(--nk-text);
  font-size: 15px;
}
.nk-zlava__karta small { display: block; color: var(--nk-text-muted); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 767px) {
  /* Tu je bublina na celú šírku, takže sedí nad oboma rohmi naraz — nestačí jej
     obísť len ten svoj. Musí byť nad vyšším z nich, čo je spúšťač asistentky
     (krúžok 44 px; tlačidlo „späť hore" má 42 px). 60 px = 44 + 16 px medzera.
     Odsadenie je preto na základnej triede a modifikátory strany ho neriešia.
     Rovnakú linku má aj hláška „pridané do košíka" — obe sú tu na celú šírku,
     takže vedľa seba nevyjdú; ak bežia naraz, hláška ju prekryje (vyšší
     z-index) a po pár sekundách zmizne. */
  .nk-ohlasy { left: 12px; right: 12px; max-width: none; bottom: calc(var(--nk-dno) + 60px); }
  .nk-ohlasy--vlavo-hore, .nk-ohlasy--vpravo-hore { top: 80px; bottom: auto; }
  .nk-cta-lista__vnutro { flex-direction: column; align-items: stretch; text-align: center; }
  .nk-cta-lista__akcie { justify-content: center; }
  .nk-cta-lista__zavri { position: absolute; top: 6px; right: 10px; }
  /* Lišta je tu vyššia — obsah je pod sebou, nie vedľa seba (~136 px). */
  body.nk-ma-cta-listu { --nk-dno: 168px; }
}

@media print {
  .nk-ohlasy, .nk-cta-lista, .nk-zlava { display: none !important; }
}

/* =====================================================================
   AI asistentka — bublina vpravo dole a panel s konverzáciou
   ===================================================================== */
/* Spúšťač sedí v pravom rohu úplne dole — teda na tej istej linke ako tlačidlo
   „späť hore" v ľavom rohu. Nad ním už nič nestojí, čo by musel obchádzať;
   bubliny s ohlasmi aj hláška sa naopak odvíjajú od neho. */
.nk-asistent-spustac {
  position: fixed;
  right: 20px; bottom: var(--nk-dno);
  z-index: 940;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  border: 0;
  border-radius: var(--nk-r-pill);
  background: var(--nk-purple);
  color: #fff;
  font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: var(--nk-shadow);
  cursor: pointer;
  transition: transform var(--nk-fast), box-shadow var(--nk-fast);
}
/* bottom je v prechode kvôli posunu nad CTA lištu — transform si necháva hover */
.nk-asistent-spustac { transition: transform var(--nk-fast), box-shadow var(--nk-fast), bottom var(--nk-med); }
.nk-asistent-spustac:hover { transform: translateY(-2px); box-shadow: var(--nk-shadow-hover); }
.nk-asistent-spustac.je-otvorene { opacity: 0; pointer-events: none; }
.nk-asistent-spustac__ikona { display: grid; place-items: center; }

/* Panel vyrastá z rovnakého rohu ako spúšťač, ktorý pod ním medzitým zmizne. */
.nk-asistent {
  position: fixed;
  right: 20px; bottom: var(--nk-dno);
  z-index: 950;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  background: var(--nk-surface);
  border: 1px solid var(--nk-border);
  border-radius: var(--nk-r-lg);
  box-shadow: var(--nk-shadow-hover);
  overflow: hidden;
}
.nk-asistent[hidden] { display: none; }

.nk-asistent__hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--nk-purple);
  color: #fff;
}
.nk-asistent__hlavicka strong {
  display: block;
  font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
  font-size: 16px;
}
.nk-asistent__hlavicka span { font-size: 12.5px; opacity: .85; }
.nk-asistent__zavri {
  border: 0; background: none; color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px;
}

.nk-asistent__telo {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--nk-bg);
}
.nk-asistent__sprava {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--nk-r);
  font-size: 14.5px;
  line-height: 1.6;
  word-wrap: break-word;
}
.nk-asistent__sprava--ja {
  align-self: flex-end;
  background: var(--nk-primary);
  color: #0f0200;
  border-bottom-right-radius: 4px;
}
.nk-asistent__sprava--asistent {
  align-self: flex-start;
  background: var(--nk-surface);
  border: 1px solid var(--nk-border);
  color: var(--nk-text);
  border-bottom-left-radius: 4px;
}
/* Odkazy na produkty stoja pod odpoveďou ako samostatné bublinky. V riadku by
   z nich bol podčiarknutý text, ktorý vyzerá ako adresa — takto je z nich
   tlačidlo s názvom a zákazník nevidí adresu vôbec. */
.nk-asistent__odkazy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
}
.nk-asistent__odkaz {
  display: inline-flex;
  align-items: baseline;
  /* Bublinka drží jeden riadok. Keď sa názov nezmestí, skráti sa výpustkou —
     cena ostáva celá, tá je pri rozhodovaní dôležitejšia než koniec názvu. */
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
  max-width: 100%;
  padding: 7px 13px;
  border: 1px solid var(--nk-border-strong);
  border-radius: var(--nk-r-pill);
  background: var(--nk-bg);
  color: var(--nk-primary-ink);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--nk-fast), color var(--nk-fast), border-color var(--nk-fast);
}
.nk-asistent__odkaz-nazov {
  font-weight: 300;
  /* min-width: 0 musí byť, inak sa položka flexu nezmenší pod svoj obsah
     a výpustka sa nemá kde prejaviť. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Cena je v bublinke, nie vo vete — nech nesúperí s názvom, je tlmenejšia.
   Neskracuje sa: radšej ukrojiť z názvu než z ceny. */
.nk-asistent__odkaz-cena { flex: 0 0 auto; color: var(--nk-text-muted); font-weight: 200; font-size: 12.5px; }
.nk-asistent__odkaz:hover,
.nk-asistent__odkaz:focus-visible {
  background: var(--nk-primary);
  border-color: var(--nk-primary);
  color: #0f0200;
  text-decoration: none;
}
.nk-asistent__odkaz:hover .nk-asistent__odkaz-cena,
.nk-asistent__odkaz:focus-visible .nk-asistent__odkaz-cena { color: #0f0200; }

.nk-asistent__odrazka { display: block; padding-left: 14px; text-indent: -14px; }
.nk-asistent__odrazka::before { content: "• "; color: var(--nk-primary-ink); }

/* Tri bodky, kým asistentka píše. */
.nk-asistent__pise { display: flex; gap: 5px; align-items: center; }
.nk-asistent__pise span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nk-text-muted);
  animation: nkPise 1.2s infinite ease-in-out;
}
.nk-asistent__pise span:nth-child(2) { animation-delay: .18s; }
.nk-asistent__pise span:nth-child(3) { animation-delay: .36s; }
@keyframes nkPise {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

.nk-asistent__vstup {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--nk-border);
  background: var(--nk-surface);
}
.nk-asistent__vstup input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--nk-border-strong);
  border-radius: var(--nk-r-pill);
  background: var(--nk-bg);
  color: var(--nk-text);
  font-size: 14.5px;
}
.nk-asistent__vstup button {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--nk-primary);
  color: #0f0200;
  cursor: pointer;
}
.nk-asistent__vstup.je-zaneprazdnene input,
.nk-asistent__vstup.je-zaneprazdnene button { opacity: .55; pointer-events: none; }

/* Panel prekryje obrazovku, keď sa naň inak nedostane dosť miesta — na úzkom
   displeji aj na nízkom. Nízky je hlavne telefón naležato: pri 360 px výšky
   ostávalo z okienka 220 px, z toho 73 px na samotnú konverzáciu, teda dva
   riadky. Tam už okienko nemá čo chrániť. */
@media (max-width: 575px), (max-height: 560px) {
  .nk-asistent {
    right: 0; bottom: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
}

/* Na dotykovom displeji je zo spúšťača krúžok so samotnou ikonou — nápis
   zaberal štvrtinu šírky a nič nehovoril, ikona bubliny je zrozumiteľná sama.
   44 px je najmenší rozmer, ktorý sa dá spoľahlivo trafiť prstom, preto sa
   nezmenšuje ďalej. */
@media (max-width: 767px) {
  .nk-asistent-spustac {
    right: 14px;
    width: 44px; height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .nk-asistent-spustac__text { display: none; }

  /* Text v paneli o kúsok menší a s tesnejším okrajom — na malej obrazovke sa
     tak zmestí o dve-tri správy viac bez posúvania. */
  .nk-asistent__hlavicka { padding: 11px 14px; }
  .nk-asistent__hlavicka strong { font-size: 15px; }
  .nk-asistent__hlavicka span { font-size: 12px; }
  .nk-asistent__telo { padding: 12px; gap: 8px; }
  .nk-asistent__sprava { max-width: 88%; padding: 8px 12px; font-size: 13.5px; line-height: 1.55; }
  .nk-asistent__vstup { padding: 10px; }
  /* Pole zámerne NEzmenšujeme: Safari na iPhone si pri písme pod 16 px sám
     priblíži celú stránku a po odoslaní ju nechá priblíženú. */
  .nk-asistent__vstup input { font-size: 16px; padding: 9px 14px; }
  .nk-asistent__vstup button { width: 38px; height: 38px; }
}

@media print { .nk-asistent, .nk-asistent-spustac { display: none !important; } }

/* ============================================================== COOKIES
   Lišta so súhlasom. Sedí dole, nad obsahom, a na mobile sa tlačidlá
   preskládajú do mriežky, aby sa zmestili aj na 360 px. */
.nk-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
  background: var(--nk-surface); border-top: 1px solid var(--nk-border);
  box-shadow: 0 -8px 40px rgba(15, 2, 0, .16);
  padding: 20px 0 max(20px, env(safe-area-inset-bottom));
  animation: nkCookieUp .45s var(--nk-ease) both;
}
@keyframes nkCookieUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .nk-cookies { animation: none; } }

.nk-cookies__inner { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nk-cookies__text { flex: 1 1 380px; min-width: 0; }
.nk-cookies__text h2 {
  font-size: 15px; font-weight: 300; margin: 0 0 6px;
  display: flex; align-items: center; gap: 9px;
}
.nk-cookies__text h2 i { color: var(--nk-primary-ink); }
.nk-cookies__text p { font-size: 13.5px; line-height: 1.65; color: var(--nk-text-muted); margin: 0; }
.nk-cookies__text a { color: var(--nk-primary-ink); text-decoration: underline; }

.nk-cookies__actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }

.nk-cookies__settings {
  border-top: 1px solid var(--nk-border); margin-top: 18px; padding-top: 18px;
  display: grid; gap: 14px;
}
.nk-cookie-cat { display: flex; align-items: flex-start; gap: 13px; margin: 0; cursor: pointer; font-weight: 200; }
.nk-cookie-cat input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--nk-primary); flex: 0 0 auto; }
.nk-cookie-copy strong { display: block; font-size: 13.5px; }
.nk-cookie-copy em { display: block; font-style: normal; font-size: 12.5px; color: var(--nk-text-muted); margin-top: 2px; }
.nk-cookies__settings .nk-btn { justify-self: start; }

/* Odkaz v päte, ktorý lištu otvorí znova. */
.nk-fb-cookies {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font: inherit; color: inherit; text-align: left;
}
.nk-fb-cookies:hover { color: var(--nk-primary-ink); }

@media (max-width: 767px) {
  .nk-cookies { padding-top: 16px; }
  .nk-cookies__inner { gap: 14px; }
  .nk-cookies__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .nk-cookies__actions .nk-btn { width: 100%; }
  .nk-cookies__actions .nk-btn:last-child { grid-column: 1 / -1; }
}

/* Značkové ikony ako inline SVG namiesto webfontu „brands" (117 kB). Veľkosť
   a farba sa dedia z textu, takže sa chovajú ako pôvodné <i> ikony. */
.nk-ikony-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nk-ik {
  width: 1em; height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex: 0 0 auto;
}