:root {
  --nn-red: #C41230;
  --nn-red-dark: #9B0E26;
  --nn-red-light: #F4E4E6;
  --nn-bg: #FAF9F6;
  --nn-surface: #FFFFFF;
  --nn-text: #1A1714;
  --nn-text-muted: #6F655C; /* 5.4:1 na --nn-bg, 5.7:1 na bílé (WCAG AA) */
  --nn-border: #EBE6DF;
  --nn-radius: 12px;
  --nn-shadow: 0 1px 2px rgba(20,15,10,0.04);

  /* Typografická škála - 6 úrovní v rem (respektuje výchozí velikost
     písma nastavenou v prohlížeči, 1rem = 16px při výchozím nastavení).
     Hierarchii nese kombinace velikosti A váhy - viz pravidla níž
     (nadpisy 700, titulky karet/dlaždic 600-700 v --nn-fs-body, popisky
     a meta 400-600 v --nn-fs-small, eyebrow/patička --nn-fs-caption). */
  --nn-fs-display: 2.5rem;    /* 40px - h1 stránky */
  --nn-fs-title: 1.5rem;      /* 24px - h2 sekce */
  --nn-fs-heading: 1.125rem;  /* 18px - h3, cena produktu */
  --nn-fs-body: 0.9375rem;    /* 15px - text, nav, titulky karet */
  --nn-fs-small: 0.8125rem;   /* 13px - tlačítka, popisky, datum, kontakty */
  --nn-fs-caption: 0.75rem;   /* 12px - eyebrow, patička */
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--nn-bg); color: var(--nn-text); font-family: 'Jost', sans-serif;
  line-height: 1.5;
}
a { text-decoration: none; }

/* Tracking podle velikosti: velké nadpisy těsněji (-0.02em), malý h3
   (v kartách 15px) jen nepatrně - záporný tracking na malém textu
   zhoršuje čitelnost. Stejně tak leading - 1.1 na velkých nadpisech,
   h3 se často láme na dva řádky, potřebuje víc. */
h1, h2, h3 { font-family: 'Jost', sans-serif; font-weight: 700; margin: 0; }
h1, h2 { line-height: 1.1; letter-spacing: -0.02em; }
h3 { line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 1rem + 3vw, var(--nn-fs-display)); }
h2 { font-size: var(--nn-fs-title); }
h3 { font-size: var(--nn-fs-heading); }
body, p, li, td { font-size: var(--nn-fs-body); }
.nn-small { font-size: var(--nn-fs-small); color: var(--nn-text-muted); }

a:focus-visible, button:focus-visible, .nn-tile:focus-visible {
  outline: 2px solid var(--nn-red);
  outline-offset: 2px;
}

/* Header */
.nn-header {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  background: var(--nn-surface);
  border-bottom: 1px solid var(--nn-border);
  /* position: relative - kotva pro .nn-nav jako mobilní dropdown panel,
     viz @media (max-width: 900px) na konci souboru. Na desktopu
     bez efektu (.nn-nav tam není absolutně pozicovaná). */
  position: relative;
}

/* Hamburger (<button aria-expanded>, viz public/assets/nav-toggle.js) -
   na desktopu skrytý, ukáže se až v @media (max-width: 900px) na konci
   souboru. Viditelnost menu se odvozuje přímo z aria-expanded, takže
   stav pro čtečky a vizuální stav nemůžou nikdy nesouhlasit. */
.nn-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nn-nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--nn-text);
}
.nn-logo { display: flex; align-items: center; gap: 11px; }
.nn-logo-mark {
  width: 32px; height: 32px; border-radius: 6px; background: var(--nn-red);
  display: flex; align-items: center; justify-content: center;
}
.nn-logo-text { font-weight: 700; font-size: var(--nn-fs-small); line-height: 1.15; }
.nn-logo-text .accent { color: var(--nn-red); }
.nn-nav { display: flex; align-items: center; gap: 30px; font-size: var(--nn-fs-body); font-weight: 500; }
.nn-nav a { color: #4A433C; }
.nn-nav a.active { color: var(--nn-red); font-weight: 600; padding-bottom: 3px; border-bottom: 2px solid var(--nn-red); }
/* Uživatelské menu - otevírá ho klik na .nn-avatar (<button>), stav i
   aria-expanded řídí public/assets/account-menu.js přes atribut hidden. */
.nn-account { position: relative; }
.nn-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--nn-red-light);
  color: var(--nn-red); display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif; font-weight: 700; font-size: var(--nn-fs-small); cursor: pointer;
  border: 0; padding: 0;
}
/* Dropdown navazuje přímo na tlačítko (top: 100%) - 8px odstup je
   padding-top uvnitř průhledného obalu, ne mezera mezi elementy, takže
   cesta myší z tlačítka do menu nikde "nepropadne" mimo. Vizuální
   karta je až vnitřní .nn-avatar-dropdown-panel. */
.nn-avatar-dropdown {
  position: absolute; top: 100%; right: 0; padding-top: 8px; z-index: 10;
}
.nn-avatar-dropdown[hidden] { display: none; }
.nn-avatar-dropdown-panel {
  background: var(--nn-surface); border: 1px solid var(--nn-border); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); min-width: 220px; padding: 8px;
}
.nn-avatar-dropdown a, .nn-avatar-dropdown .nn-email {
  display: block; padding: 8px 12px; font-size: var(--nn-fs-small); color: var(--nn-text); border-radius: 6px;
}
.nn-avatar-dropdown a:hover { background: var(--nn-bg); }
.nn-avatar-dropdown .nn-email { color: var(--nn-text-muted); border-bottom: 1px solid var(--nn-border); margin-bottom: 4px; }

/* Greeting banner */
.nn-greeting { padding: 44px 56px 30px; display: flex; align-items: flex-end; justify-content: space-between; }
.nn-greeting-eyebrow {
  font-size: var(--nn-fs-caption); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--nn-red); margin-bottom: 10px;
}
.nn-greeting-motto { font-size: var(--nn-fs-body); color: var(--nn-text-muted); margin-top: 8px; font-style: italic; }

/* Tiles */
.nn-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 6px 56px 0; }
.nn-tile {
  border: 1px solid var(--nn-border); border-radius: var(--nn-radius); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 14px; background: var(--nn-surface);
  box-shadow: var(--nn-shadow); text-decoration: none; color: var(--nn-text);
  min-height: 130px; justify-content: flex-start;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Hover lift jen na zařízeních, co hover skutečně mají - na dotyku by
   po tapnutí zůstal "zaseknutý". Press feedback (:active) pro všechny
   viz blok "Press feedback" níž. */
@media (hover: hover) {
  .nn-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
}
/* Bez tohohle by prohlížeč po kliknutí (dlaždice otevírají target="_blank")
   obarvil navštívený odkaz svou vlastní fialovou/modrou - jedna třída
   (.nn-tile) má stejnou specificitu jako výchozí UA styl pro :visited,
   takže barvu bez explicitního přepsání nemusí vždycky vyhrát. */
.nn-tile:visited { color: var(--nn-text); }

/* Dlaždice, co otevírá externí web v novém tabu - malá šipka ↗ v pravém
   horním rohu, ať je na první pohled jasné, že uživatel opustí portál.
   Čistě podle target="_blank", takže se ukáže automaticky všude (Domů,
   Nástroje, E-shopy, Workspace) bez úprav HTML. Druhá deklarace content
   s "/ ''" říká čtečkám, ať šipku nečtou (prohlížeče bez podpory té
   syntaxe ji ignorují a použijí první). */
a.nn-tile[target="_blank"] { position: relative; }
a.nn-tile[target="_blank"]::after {
  content: "\2197";
  content: "\2197" / "";
  position: absolute; top: 14px; right: 16px;
  font-size: var(--nn-fs-body); line-height: 1; color: var(--nn-text-muted);
}
.nn-tile-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--nn-red-light);
  display: flex; align-items: center; justify-content: center; color: var(--nn-red);
  font-weight: 700; font-size: var(--nn-fs-small);
}
.nn-tile-icon svg { stroke: var(--nn-red); }
.nn-tile-title { font-weight: 600; font-size: var(--nn-fs-body); }

/* News cards */
.nn-news-section { padding: 36px 56px 40px; display: flex; flex-direction: column; gap: 16px; }
.nn-news-header { display: flex; align-items: baseline; justify-content: space-between; }
.nn-news-header a { font-size: var(--nn-fs-small); font-weight: 600; color: var(--nn-red); }
.nn-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nn-news-card {
  border: 1px solid var(--nn-border); border-radius: var(--nn-radius); overflow: hidden;
  background: var(--nn-surface);
}
.nn-news-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
/* Karta bez obrázku - neutrální tónovaný blok s logem NN v nízké opacitě
   (logo je ::after, ne background přímo na bloku, aby šla ztlumit jen
   jeho opacita a ne celý blok). Žádný text - dřív tu byl popisek
   "Fotka", který s kontrastem 2:1 působil jako rozbitý obrázek. */
.nn-news-card-placeholder {
  height: 160px; background: #F1ECE4; position: relative;
}
.nn-news-card-placeholder::after {
  content: ""; position: absolute; inset: 0;
  background: url("logo.png") center / 96px auto no-repeat;
  opacity: 0.15;
}
.nn-news-card-body { padding: 16px; }
.nn-news-card-body h3 { margin: 0 0 4px; font-size: var(--nn-fs-body); }
.nn-news-card-body .nn-date { color: var(--nn-text-muted); font-size: var(--nn-fs-small); }

/* Titulek/obrázek karty jako odkaz na detail (pages/aktualita.php) -
   zadaný CSS nikde nedefinuje barvu obyčejného <a>, takže by se bez
   tohohle ukázal prohlížečový výchozí modrý link. */
.nn-news-card-body h3 a { color: var(--nn-text); }
.nn-news-card-body h3 a:hover { color: var(--nn-red); }

/* Detail jedné aktuality (pages/aktualita.php) - stejná karta jako v
   gridu (.nn-news-card), ale s větším náhledovým obrázkem (320px místo
   160px) a omezenou šířkou pro pohodlné čtení. Vyšší specificita/pořadí
   v souboru přebije .nn-news-card img / .nn-news-card-placeholder výš. */
.nn-article-card {
  max-width: 720px;
  margin: 0 auto;
}
.nn-article-card img,
.nn-article-card .nn-news-card-placeholder {
  height: 320px;
}
/* Produktová karta (pages/eshop-novinky.php) - vychází z .nn-news-card
   (aktuality), ale jako VLASTNÍ třída .nn-product-card navíc - úpravy
   tady (hover lift, zoom obrázku, vyšší náhled) se tak netýkají karet
   aktualit jinde v appce, jen týhle stránky. Při hoveru se hýbe jen
   karta jako celek - žádný zoom obrázku ani samostatný pohyb tlačítka. */
.nn-product-grid {
  gap: 22px;
}

.nn-product-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) {
  .nn-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(20, 15, 10, 0.12);
  }
}

/* Vyšší náhled než výchozích 160px - produktové fotky (skříně, postele)
   jsou širší než čtvercové a v nízkém výřezu se moc neukážou. */
.nn-product-card img {
  height: 190px;
}

.nn-product-card .nn-news-card-placeholder {
  height: 190px;
}

.nn-product-price {
  font-weight: 700;
  color: var(--nn-red);
  font-size: var(--nn-fs-heading);
  margin-bottom: 12px;
}

.nn-product-buy {
  width: 100%;
  justify-content: center;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nn-article-card h1 {
  margin-bottom: 8px;
}

/* Footer */
.nn-footer {
  padding: 16px 56px; border-top: 1px solid var(--nn-border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--nn-fs-caption); color: var(--nn-text-muted);
}

/* =====================================================================
 * Doplňky nad rámec zadání.
 *
 * Výš je zadaný CSS beze změny. Portál má i další prvky, které zadání
 * nepokrývá (akce Upravit/Smazat u novinky, formulář na přidání/úpravu
 * novinky, rozcestník Postupy, "obyčejné" stránky typu O firmě), tak
 * jsem pro ně doplnil pár tříd ve STEJNÉM stylu (stejné proměnné,
 * stejný --nn-radius/--nn-shadow, stejný 56px boční gutter jako header/
 * greeting/tiles výš), ať portál drží jednotný vzhled i tam.
 * ===================================================================== */

/* Logo v headeru - nahrazuje původní SVG monogram skutečným logem firmy
   (www/public/assets/logo.png, 260×58, průhledné pozadí). Výška podle
   76px hlavičky, šířka se dopočítá sama z poměru stran obrázku. */
.nn-logo-img {
  display: block;
  height: 34px;
  width: auto;
}

/* Širší varianta .nn-tile-grid (pages/eshopy.php) - 2 sloupce místo 4,
   ať je víc místa na název e-shopu a jeho URL. Karty samy (.nn-tile)
   zůstávají vizuálně stejné, jen povolená výška se přizpůsobí obsahu
   (přibyl řádek s URL navíc). */
.nn-tile-grid--wide {
  grid-template-columns: repeat(2, 1fr);
}

.nn-tile-grid--wide .nn-tile {
  height: auto;
  min-height: 110px;
}

/* 3 sloupce na desktopu (pages/nastroje/workspace.php - 9 dlaždic, 3x3
   se čte líp než 4 sloupce s "osiřelým" posledním řádkem). Na
   tabletu/mobilu se stejně jako ostatní .nn-tile-grid varianty přepíše
   na 2/1 sloupec - viz @media pravidla na konci souboru. */
.nn-tile-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.nn-tile-url {
  font-size: var(--nn-fs-small);
  color: var(--nn-text-muted);
}

/* Řádek "nadpis + akce" na pages/aktuality.php (h1 "Aktuality" +
   tlačítko "Přidat novinku"). Stejné rozvržení jako .nn-news-header, ale
   VLASTNÍ třída - .nn-news-header a { color: var(--nn-red) } (zadaný
   CSS, myšlené pro malý odkaz "Zobrazit vše" na domu.php) by jinak
   přebilo bílý text tlačítka .nn-btn-primary uvnitř (vyšší specificita
   ".nn-news-header a" > ".nn-btn-primary") - proto červený text na
   červeném pozadí, dokud se na tlačítko nenajelo myší. */
.nn-page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.nn-logo-text {
  font-size: var(--nn-fs-small);
  color: var(--nn-text-muted);
}

.nn-logo-text .accent {
  color: var(--nn-red);
  font-weight: 600;
}

/* Společný padding-wrapper pro stránky bez banneru (o-firme, postupy,
   onboarding, nastroje, aktuality, admin formulář) - "main" samo o sobě
   žádný padding nemá (zadaný CSS ho nedefinuje), sekce si ho nesou samy. */
.nn-page {
  padding: 40px 56px 56px;
}

.nn-page > h1 {
  margin-bottom: 8px;
}

.nn-page p.nn-lead {
  color: var(--nn-text-muted);
  margin-bottom: 24px;
}

/* Odkaz uvnitř úvodního textu (pages/eshop-novinky.php - odkaz na
   nejlepsi-nabytek.cz) - bez týhle třídy by zůstal prohlížečově modrý,
   stejný důvod jako .nn-news-card-body h3 a výš. */
.nn-lead a {
  color: var(--nn-red);
  font-weight: 600;
}

.nn-lead a:hover,
.nn-lead a:visited {
  color: var(--nn-red);
}

.nn-empty-state {
  color: var(--nn-text-muted);
  padding: 8px 0 24px;
}

/* Obsahová "karta" (placeholder text na o-firme/onboarding/nastroje). */
.nn-card {
  background: var(--nn-surface);
  border: 1px solid var(--nn-border);
  border-radius: var(--nn-radius);
  box-shadow: var(--nn-shadow);
  padding: 24px;
}

/* Rozcestník oddělení (pages/postupy.php). */
.nn-department-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.nn-department-list a {
  display: block;
  background: var(--nn-surface);
  border: 1px solid var(--nn-border);
  border-radius: var(--nn-radius);
  box-shadow: var(--nn-shadow);
  padding: 20px;
  text-decoration: none;
  font-weight: 600;
  color: var(--nn-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .nn-department-list a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: var(--nn-red);
  }
}

.nn-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--nn-fs-small);
  font-weight: 600;
  color: var(--nn-red);
  margin-bottom: 20px;
}

/* Stejný důvod jako u .nn-tile:visited výš - jednoduchá třída na <a>
   prohraje specificitu s výchozím stylem prohlížeče pro navštívené
   odkazy, pokud ji explicitně nepřepíšeme i pro :visited. */
.nn-back-link:visited {
  color: var(--nn-red);
}

/* Tlačítka/odkazy pro akce (Přidat novinku, Upravit, Smazat, Uložit...). */
.nn-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Jost', sans-serif;
  font-size: var(--nn-fs-small);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--nn-border);
  background: var(--nn-surface);
  color: var(--nn-text);
  cursor: pointer;
  text-decoration: none;
}

.nn-btn:visited {
  color: var(--nn-text);
}

.nn-btn:hover {
  border-color: var(--nn-red);
  color: var(--nn-red);
}

.nn-btn-primary {
  background: var(--nn-red);
  border-color: var(--nn-red);
  color: #FFFFFF;
}

.nn-btn-primary:visited {
  color: #FFFFFF;
}

.nn-btn-primary:hover {
  background: var(--nn-red-dark);
  border-color: var(--nn-red-dark);
  color: #FFFFFF;
}

.nn-news-card-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}

.nn-news-card-actions form {
  margin: 0;
}

/* Formulář na přidání/úpravu novinky (pages/admin/aktuality-edit.php). */
label {
  display: inline-block;
  font-weight: 600;
  font-size: var(--nn-fs-small);
  margin-bottom: 6px;
}

input[type="text"],
input[type="file"],
textarea {
  font-family: 'Jost', sans-serif;
  font-size: var(--nn-fs-body);
  color: var(--nn-text);
  background: var(--nn-surface);
  border: 1px solid var(--nn-border);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  max-width: 480px;
}

textarea {
  max-width: 100%;
}

input[type="text"]:focus,
textarea:focus {
  outline: 2px solid var(--nn-red);
  outline-offset: 1px;
}

.nn-form-row {
  margin-bottom: 18px;
}

.nn-form-error {
  color: var(--nn-red-dark);
  background: var(--nn-red-light);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: var(--nn-fs-body);
}

/* Vyhledávací pole nad seznamem dokumentů (pages/postupy.php) - jen
   spacing navíc oproti obecnému input[type="text"] výš. */
.nn-doc-search {
  margin-bottom: 24px;
}

/* Dlaždice dokumentu (pages/postupy.php) - vizuálně stejná jako
   .nn-tile, jen fixní výška nahrazená "podle obsahu" (název dokumentu
   může být delší než u ostatních dlaždic) a zleva zarovnaný obsah v
   jednom řádku (ikona + název), ne ve sloupci. Na rozdíl od ostatních
   dlaždic je to teď <div>, ne <a> - uvnitř je samostatný odkaz na PDF
   (.nn-doc-tile-link) VEDLE admin tlačítka Smazat, což by jako jeden
   velký <a> se zanořeným <form>em nešlo (neplatné HTML, klik na Smazat
   by navíc otevřel i PDF). */
.nn-doc-tile {
  height: auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.nn-doc-tile-link {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--nn-text);
}

/* Odkaz na dokument se otevírá do nové karty (target="_blank") - po
   prvním kliknutí ho prohlížeč označí jako navštívený a bez explicitního
   přepsání obarví svou vlastní fialovou/modrou (stejná specificita jako
   .nn-doc-tile-link samotná) - přesně tohle byl nahlášený "modrý název
   souboru". */
.nn-doc-tile-link:visited {
  color: var(--nn-text);
}

.nn-doc-tile-delete {
  margin: 0;
  flex-shrink: 0;
}

/* Badge "Příští kamion" v banneru (pages/domu.php, includes/calendar.php)
   - sdílená i s prokliknutelným badge "Novinky z e-shopu"
   (includes/eshop-news.php), proto obecnější komentář/třída, ne
   "nn-truck-*". Zadání čekalo bílý text na poloprůhledném pozadí - to
   ale předpokládá tmavý/barevný banner. Aktuální .nn-greeting sedí na
   světlém --nn-bg, takže poloprůhledné bílé pozadí by splynulo a text
   by nebyl vidět - místo toho plná červená (--nn-red) s bílým textem,
   stejný "badge" pocit (malý, pilulkovitý, výrazný), jen čitelný na
   světlém pozadí. */
.nn-truck-badge {
  display: inline-block;
  margin: 10px 8px 0 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--nn-red);
  color: #FFFFFF;
  font-size: var(--nn-fs-small);
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Badge "Novinky z e-shopu" je <a>, ne <p> jako "Příští kamion" - stejný
   :visited důvod jako u .nn-tile/.nn-doc-tile-link výš (jednoduchá
   třída na <a> prohraje specificitu s výchozím stylem prohlížeče pro
   navštívené odkazy). */
.nn-truck-badge:visited {
  color: #FFFFFF;
}

/* Neklikatelná varianta (<p> "Příští kamion") - světlé pozadí a červený
   text (4.9:1), ať se na první pohled liší od plně červeného
   prokliknutelného badge "Novinky z e-shopu" a nikdo na ni neklikal. */
.nn-truck-badge--info {
  background: var(--nn-red-light);
  color: var(--nn-red);
  cursor: default;
}

/* Hover jen na klikatelném badge - selector "a.nn-truck-badge" cíleně
   NEmatchne <p class="nn-truck-badge"> (Příští kamion, neklikatelné),
   takže se lift+stín ukáže jen tam, kde má smysl (Novinky z e-shopu). */
@media (hover: hover) {
  a.nn-truck-badge:hover {
    background: var(--nn-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(196, 18, 48, 0.35);
  }
}

/* Autorský řádek v patičce (includes/footer.php) - odkaz by bez tohohle
   byl prohlížečově modrý (žádné globální pravidlo barvy pro <a> - viz
   i .nn-news-card-body h3 a výš ze stejného důvodu). */
.footer-heart {
  color: var(--nn-red);
}

.nn-footer a {
  color: inherit;
}

.nn-footer a:hover {
  color: var(--nn-red);
}

/* Seznam kontaktů (pages/o-firme.php) - bordered "řádky" v jedné kartě,
   stejný --nn-border/--nn-radius/--nn-shadow jazyk jako zbytek portálu.
   Vyhledávací pole nad seznamem používá stejnou .nn-doc-search třídu
   jako pages/postupy.php (identické zadání - jen spacing navíc). */
.nn-contacts-section {
  margin-top: 32px;
}

.nn-contacts-section h2 {
  margin-bottom: 16px;
}

.nn-contact-list {
  border: 1px solid var(--nn-border);
  border-radius: var(--nn-radius);
  background: var(--nn-surface);
  box-shadow: var(--nn-shadow);
  overflow: hidden;
}

.nn-contact-row {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--nn-border);
}

.nn-contact-row:last-child {
  border-bottom: none;
}

.nn-contact-row:hover {
  background: var(--nn-bg);
}

.nn-contact-name {
  font-weight: 600;
}

.nn-contact-email,
.nn-contact-phone {
  font-size: var(--nn-fs-small);
  color: var(--nn-text-muted);
}

.nn-contact-email:hover,
.nn-contact-phone:hover {
  color: var(--nn-red);
}

/* Přesunuto z inline style="" (pages/domu.php) - kvůli CSP (style-src bez
   'unsafe-inline' by inline atributy blokoval). Google Calendar embed. */
.nn-calendar-embed {
  overflow: hidden;
  border-radius: var(--nn-radius);
}

.nn-calendar-embed-iframe {
  width: 100%;
  height: 700px;
  display: block;
}

/* Přesunuto z inline style="" (pages/admin/aktuality-edit.php) - náhled
   aktuální fotky u formuláře na úpravu novinky. */
.nn-current-image-preview {
  max-width: 200px;
  max-height: 150px;
  display: block;
  margin-bottom: 0.5rem;
  border-radius: 6px;
}

/* Uživatelé s "omezit pohyb" v systému - žádné animované přechody ani
   hover lifty. Press feedback (scale na :active) zůstává - je okamžitý
   a malý, ne pohyb přes obrazovku. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  .nn-tile:hover,
  .nn-product-card:hover,
  .nn-department-list a:hover,
  a.nn-truck-badge:hover {
    transform: none;
  }
}

/* Press feedback - okamžitá reakce na stisk (myš i dotyk), na rozdíl od
   hover liftů výš funguje i na mobilu. Je za všemi :hover pravidly
   (včetně prefers-reduced-motion bloku výš), aby při stisku přebil
   hover transform (stejná specificita, pozdější pořadí v souboru). */
a.nn-tile:active,
.nn-btn:active,
a.nn-truck-badge:active {
  transform: scale(0.98);
  transition-duration: 80ms;
}

/* =====================================================================
 * Responzivita - tablet (900px) a mobil (560px).
 *
 * Selektory tady dole cíleně používají ZÁKLADNÍ třídu (.nn-tile-grid),
 * ne varianty (.nn-tile-grid--wide/--3col) - protože mají stejnou
 * specificitu (jedna třída) a jsou v souboru AŽ PO variantách výš,
 * v cascade vyhrávají i nad nimi. Díky tomu stačí JEDNO pravidlo na
 * breakpoint a zafunguje na všech gridech v appce (4 i 2 i 3 sloupce na
 * desktopu se na mobilu stejně sjednotí na 1 sloupec), bez nutnosti
 * opakovat totéž pro každou variantu zvlášť.
 * ===================================================================== */

@media (max-width: 900px) {
  .nn-tile-grid,
  .nn-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Hamburger místo horizontální nav (viz .nn-nav-toggle výš a HTML
   v includes/header.php) - nav se z vodorovného pruhu vedle loga změní
   na dropdown panel pod hlavičkou, skrytý dokud se neklikne na
   hamburger. Vlastní breakpoint (ne 560px jako zbytek mobilu): logo +
   6 položek nav + avatar potřebují na šířku zhruba 850px, pod tím by se
   vodorovná nav lámala/přetékala. */
@media (max-width: 900px) {
  .nn-nav-toggle {
    display: flex;
  }

  .nn-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px;
    background: var(--nn-surface);
    border-bottom: 1px solid var(--nn-border);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    z-index: 20;
  }

  .nn-nav-toggle[aria-expanded="true"] ~ .nn-nav {
    display: flex;
  }

  .nn-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--nn-border);
  }

  .nn-nav a:last-child {
    border-bottom: none;
  }

  .nn-nav a.active {
    border-bottom: 1px solid var(--nn-border);
    padding-bottom: 12px;
  }
}

@media (max-width: 560px) {
  .nn-tile-grid,
  .nn-news-grid {
    grid-template-columns: 1fr;
  }

  /* Boční gutter 56px na 375px širokém displeji sežere skoro třetinu
     šířky - zúžit na mobilu na 16px, ať zbyde místo pro obsah. Jen
     left/right (ne celý shorthand "padding"), ať se nepřepíše
     top/bottom, co má každá sekce jiné. */
  .nn-header,
  .nn-greeting,
  .nn-tile-grid,
  .nn-news-section,
  .nn-page,
  .nn-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Banner na Domů - pozdrav/motto/badge do sloupce, ne do řádku vedle
     sebe (na 375px by se řádek se vším zalomil ošklivě). */
  .nn-greeting {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Nadpis + tlačítko (Postupy "Nahrát dokument", Aktuality "Přidat
     novinku") - na 375px se sice vejdou vedle sebe, ale je to natěsno.
     Tlačítko pod nadpis, ne vedle něj. */
  .nn-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Seznam kontaktů (pages/o-firme.php) - 3 sloupce (jméno/e-mail/telefon)
     by se na 375px vešly jen s useknutým textem. Zásobník pod sebe,
     dlouhé e-maily se zalomí místo přetečení mimo kartu. */
  .nn-contact-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 16px;
  }

  .nn-contact-email,
  .nn-contact-phone {
    overflow-wrap: break-word;
  }

  /* Dlaždice dokumentu (pages/postupy.php) - menší padding/gap, ať
     dlouhý název dokumentu + tlačítko Smazat vedle sebe nepřetékají. */
  .nn-doc-tile {
    padding: 14px 16px;
    gap: 10px;
  }

  .nn-doc-tile-link {
    gap: 10px;
  }
}