/* ═══════════════════════════════════════════

   NAV REDESIGN — Konůpek Minerals

   Override pro <nav.nav2>, mega-menu, search overlay, mobile drawer

   ═══════════════════════════════════════════ */



/* Tabler font fallback */

.ti { font-family: 'tabler-icons' !important; font-style: normal; font-weight: normal; speak: none; line-height: 1; }



/* ── Reset starého nav stylingu ── */

nav.nav2 {

  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;

  background: rgba(14,10,5,0.92);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid var(--border);

  height: 72px;

  display: flex; align-items: center;

  padding: 0 32px;

  gap: 24px;

  transition: height 0.25s ease, padding 0.25s ease, background 0.25s ease;

}

nav.nav2.shrunk { height: 56px; background: rgba(14,10,5,0.96); }



/* Body padding kompenzuje fixed nav */

body { padding-top: 72px; transition: padding-top 0.25s ease; }

body.nav-shrunk { padding-top: 56px; }



/* ── Logo ── */

.n2-logo {

  display: flex; align-items: center; gap: 12px;

  cursor: pointer; flex-shrink: 0;

  text-decoration: none;

}

.n2-logo-svg { display: block; width: 44px; height: 44px; transition: width 0.25s, height 0.25s; }

nav.nav2.shrunk .n2-logo-svg { width: 36px; height: 36px; }

.n2-logo-text {

  font-family: 'EB Garamond', serif;

  font-size: 22px;

  font-weight: 500;

  color: var(--text);

  letter-spacing: 0.02em;

  line-height: 1;

  transition: font-size 0.25s;

}

nav.nav2.shrunk .n2-logo-text { font-size: 19px; }

.n2-logo-sub {

  font-family: 'Jost', sans-serif;

  font-size: 9px;

  color: var(--text-light);

  letter-spacing: 0.22em;

  text-transform: uppercase;

  margin-top: 3px;

}

nav.nav2.shrunk .n2-logo-sub { display: none; }

.n2-logo:hover .n2-logo-text { color: var(--gold-dark); }



/* ── Hlavní navigace ── */

.n2-nav { display: flex; gap: 26px; flex: 1; justify-content: center; }

.n2-link {

  color: var(--text-mid);

  font-size: 12px;

  font-weight: 400;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  cursor: pointer;

  padding: 6px 2px;

  position: relative;

  font-family: 'Jost', sans-serif;

  white-space: nowrap;

  background: none; border: none;

  display: inline-flex; align-items: center; gap: 4px;

  transition: color 0.15s;

}

.n2-link:hover { color: var(--gold-dark); }

.n2-link.active { color: var(--gold-dark); }

.n2-link.active::after {

  content: ''; position: absolute;

  bottom: -22px; left: 0; right: 0;

  height: 2px; background: var(--gold);

}

nav.nav2.shrunk .n2-link.active::after { bottom: -14px; }

.n2-link i { font-size: 11px; opacity: 0.6; transition: transform 0.2s; }

.n2-link.open i { transform: rotate(180deg); }



/* ── Pravé akce ── */

.n2-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }

.n2-icon {

  width: 38px; height: 38px;

  border-radius: 8px;

  display: flex; align-items: center; justify-content: center;

  color: var(--text-mid); cursor: pointer;

  position: relative; background: none; border: none;

  transition: background 0.15s, color 0.15s;

}

.n2-icon:hover { background: rgba(200,170,120,0.08); color: var(--gold-dark); }

.n2-icon i { font-size: 19px; }

/* Session #43: ikona účtu s hornickou přilbou (inline SVG místo ti-user) */

.n2-icon .mk-ikona-ucet { width: 21px; height: 21px; display: block; }

.mk-ikona-ucet-mob { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }

nav.nav2.shrunk .n2-icon { width: 34px; height: 34px; }

nav.nav2.shrunk .n2-icon i { font-size: 17px; }



.n2-badge {

  position: absolute; top: 4px; right: 4px;

  min-width: 16px; height: 16px; padding: 0 4px;

  border-radius: 8px;

  background: var(--gold); color: #14100c;

  font-size: 10px; font-weight: 500;

  display: flex; align-items: center; justify-content: center;

  font-family: 'Jost', sans-serif;

}



.n2-lang {

  font-size: 11px; color: var(--text-light);

  padding: 6px 10px; cursor: pointer;

  letter-spacing: 0.1em;

  border-left: 1px solid var(--border-strong);

  margin-left: 6px;

  font-family: 'Jost', sans-serif;

  background: none; border-top: none; border-right: none; border-bottom: none;

  transition: color 0.15s;

}

.n2-lang:hover { color: var(--text); }

.n2-lang b {

  /* Session #32: rozdíl mezi aktivním a neaktivním jazykem byl jen odstín

     a tloušťka 500 proti 400 — na 11px písmu na telefonu nerozeznatelné,

     zákazník četl první zkratku jako zapnutou. Podtržení funguje i na

     tmavém pozadí megamenu, kde by změna barvy nemusela stačit. */

  color: var(--gold-dark);

  font-weight: 700;

  border-bottom: 1.5px solid var(--gold);

  padding-bottom: 1px;

}



/* ── Hamburger (jen mobil) ── */

.n2-hamburger { display: none; }



/* ═══════════ MEGA-MENU ═══════════ */

.n2-megamenu {

  position: fixed; top: 72px; left: 0; right: 0;

  background: rgba(14,10,5,0.97);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid var(--border-strong);

  padding: 28px 32px;

  display: none;

  grid-template-columns: 1.3fr 1fr 1.1fr;

  gap: 32px;

  z-index: 999;

  box-shadow: var(--shadow-lg);

  transition: top 0.25s ease;

}

.n2-megamenu.open { display: grid; }

nav.nav2.shrunk + .n2-megamenu { top: 56px; }

body.nav-shrunk .n2-megamenu { top: 56px; }



.n2-mm-col h5 {

  color: var(--gold-dark);

  font-size: 10px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  margin: 0 0 14px;

  font-weight: 500;

  font-family: 'Jost', sans-serif;

}

.n2-mm-item {

  display: flex; align-items: center; gap: 10px;

  padding: 7px 0; cursor: pointer;

  color: var(--text-mid);

  font-size: 13px;

  font-family: 'Jost', sans-serif;

  background: none; border: none; width: 100%; text-align: left;

  transition: color 0.15s;

}

.n2-mm-item:hover { color: var(--gold-dark); }

.n2-mm-item img, .n2-mm-thumb {

  width: 30px; height: 30px;

  border-radius: 4px;

  object-fit: cover;

  background: var(--cream-mid);

  flex-shrink: 0;

}

.n2-mm-thumb {

  display: flex; align-items: center; justify-content: center;

  color: var(--text-light);

  font-size: 14px;

}

.n2-mm-more {

  display: flex; align-items: center; gap: 6px;

  margin-top: 8px; padding: 7px 0;

  background: none; border: none; cursor: pointer;

  color: var(--gold-dark);

  font-size: 11px;

  letter-spacing: 0.06em;

  font-family: 'Jost', sans-serif;

  transition: color 0.15s;

}

.n2-mm-more i { font-size: 13px; }

.n2-mm-more:hover { color: var(--gold); }

.n2-mm-count {

  margin-left: auto;

  color: var(--text-light);

  font-size: 11px;

}

.n2-mm-feat {

  background: var(--cream-dark);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 14px;

  cursor: pointer;

  transition: border-color 0.2s, transform 0.2s;

}

.n2-mm-feat:hover { border-color: var(--gold); transform: translateY(-2px); }

.n2-mm-feat-img {

  height: 110px; width: 100%;

  background: var(--cream-mid);

  border-radius: var(--radius);

  margin-bottom: 12px;

  object-fit: contain;

  display: block;

}

.n2-mm-feat-placeholder {

  display: flex; align-items: center; justify-content: center;

  color: var(--stone);

}

.n2-mm-feat-tag {

  font-size: 9px;

  letter-spacing: 0.22em;

  color: var(--gold-dark);

  text-transform: uppercase;

  font-family: 'Jost', sans-serif;

}

.n2-mm-feat-title {

  color: var(--text);

  font-size: 15px;

  margin: 6px 0 4px;

  font-family: 'EB Garamond', serif;

  font-weight: 500;

}

.n2-mm-feat-price {

  color: var(--gold-dark);

  font-size: 13px;

  font-family: 'Jost', sans-serif;

}

.n2-mm-empty {

  color: var(--text-light);

  font-size: 12px;

  font-style: italic;

  padding: 8px 0;

}



/* ═══════════ SEARCH OVERLAY ═══════════ */

.n2-search-overlay {

  position: fixed; top: 0; left: 0; right: 0;

  background: rgba(14,10,5,0.97);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border-bottom: 1px solid var(--border-strong);

  padding: 32px;

  z-index: 1001;

  display: none;

  box-shadow: var(--shadow-lg);

}

.n2-search-overlay.open { display: block; }



.n2-search-bar {

  display: flex; align-items: center; gap: 14px;

  max-width: 720px; margin: 0 auto;

  border-bottom: 1px solid var(--border-strong);

  padding-bottom: 14px;

}

.n2-search-bar > i.ti-search { color: var(--gold-dark); font-size: 22px; }

.n2-search-input {

  flex: 1; background: transparent;

  border: none; outline: none;

  color: var(--text);

  font-size: 20px;

  font-family: 'EB Garamond', serif;

  font-style: italic;

}

.n2-search-input::placeholder { color: var(--stone-light); }

.n2-esc-pill {

  display: inline-flex; align-items: center; gap: 6px;

  padding: 5px 10px;

  border: 1px solid var(--border-strong);

  border-radius: var(--radius);

  color: var(--text-light);

  font-size: 10px;

  letter-spacing: 0.12em;

  font-family: 'Jost', sans-serif;

  cursor: pointer;

  background: none;

  transition: color 0.15s, border-color 0.15s;

}

.n2-esc-pill:hover { color: var(--gold-dark); border-color: var(--gold); }

.n2-esc-pill kbd {

  background: rgba(200,170,120,0.1);

  padding: 1px 5px;

  border-radius: 3px;

  font-family: 'Jost', sans-serif;

  font-size: 9px;

  color: var(--text-mid);

}



.n2-search-results {

  max-width: 720px; margin: 22px auto 0;

  display: grid; grid-template-columns: 1.4fr 1fr;

  gap: 28px;

}

.n2-search-section h4 {

  color: var(--text-light);

  font-size: 10px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  margin: 0 0 12px;

  font-weight: 500;

  font-family: 'Jost', sans-serif;

}

.n2-search-item {

  display: flex; gap: 12px;

  padding: 8px 6px;

  cursor: pointer;

  border-radius: var(--radius);

  align-items: center;

  background: none; border: none; width: 100%; text-align: left;

  transition: background 0.15s;

}

.n2-search-item:hover { background: rgba(200,170,120,0.06); }

.n2-search-thumb {

  width: 40px; height: 40px;

  border-radius: var(--radius);

  background: var(--cream-mid);

  flex-shrink: 0;

  object-fit: cover;

  display: flex; align-items: center; justify-content: center;

  color: var(--stone);

}

.n2-search-info { flex: 1; min-width: 0; }

.n2-search-name {

  color: var(--text);

  font-size: 13px;

  font-family: 'Jost', sans-serif;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.n2-search-meta {

  color: var(--text-light);

  font-size: 11px;

  margin-top: 2px;

}

.n2-search-price {

  color: var(--gold-dark);

  font-size: 12px;

  white-space: nowrap;

  font-family: 'Jost', sans-serif;

}

.n2-search-tags {

  display: flex; flex-wrap: wrap; gap: 6px;

}

.n2-search-tag {

  padding: 5px 11px;

  border: 1px solid var(--border-strong);

  border-radius: 99px;

  color: var(--text-mid);

  font-size: 11px;

  cursor: pointer;

  font-family: 'Jost', sans-serif;

  background: none;

  transition: border-color 0.15s, color 0.15s;

}

.n2-search-tag:hover { border-color: var(--gold); color: var(--gold-dark); }

.n2-search-empty {

  text-align: center;

  padding: 24px;

  color: var(--text-light);

  font-style: italic;

  font-size: 14px;

}

/* Session #43: hledání bez výsledků s horníkem */

.n2-hleda-nic { font-style: normal; padding: 8px 16px 20px; display: flex; flex-direction: column; align-items: center; }

.n2-hleda-scena { width: min(230px, 70%); }

.n2-hleda-scena .mk-hk { --hk-pozadi: #0e0a05; width: 100%; height: auto; }

.n2-hleda-t { margin: 6px 0 0; font-family: 'EB Garamond', serif; font-style: italic; font-size: 20px; color: var(--text-mid); }

.n2-hleda-tip { margin: 6px 0 4px; font-size: 14px; color: var(--text-light); }

.n2-search-show-all {

  display: block; width: 100%;

  margin-top: 12px;

  padding: 10px;

  background: none;

  border: 1px solid var(--border-strong);

  border-radius: var(--radius);

  color: var(--text-mid);

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  cursor: pointer;

  transition: all 0.15s;

}

.n2-search-show-all:hover { border-color: var(--gold); color: var(--gold-dark); }



/* ═══════════ MOBILE DRAWER ═══════════ */

.n2-mob-overlay {

  position: fixed; inset: 0;

  background: rgba(0,0,0,0.65);

  z-index: 1002;

  display: none;

  backdrop-filter: blur(2px);

}

.n2-mob-overlay.open { display: block; }

.n2-mob-drawer {

  position: fixed;

  top: 0; bottom: 0; right: -100%;

  width: 84%; max-width: 360px;

  background: var(--cream-dark);

  z-index: 1003;

  padding: 18px;

  display: flex; flex-direction: column;

  transition: right 0.28s ease;

  overflow: hidden;

}

.n2-mob-drawer.open { right: 0; }

.n2-mob-head {

  display: flex; justify-content: space-between; align-items: center;

  padding-bottom: 14px;

  border-bottom: 1px solid var(--border-strong);

}

.n2-mob-head .t {

  color: var(--text);

  font-family: 'EB Garamond', serif;

  font-size: 20px;

  font-weight: 500;

}

.n2-mob-close {

  width: 36px; height: 36px;

  background: none; border: none;

  color: var(--text-mid);

  cursor: pointer;

  display: flex; align-items: center; justify-content: center;

}

.n2-mob-close i { font-size: 20px; }



.n2-mob-search {

  display: flex; align-items: center; gap: 10px;

  padding: 11px 13px;

  background: var(--cream-mid);

  border-radius: var(--radius-md);

  margin: 16px 0;

  cursor: text;

}

.n2-mob-search i { color: var(--text-light); }

.n2-mob-search input {

  flex: 1; background: transparent;

  border: none; outline: none;

  color: var(--text);

  font-family: 'Jost', sans-serif;

  font-size: 14px;

}

.n2-mob-search input::placeholder { color: var(--text-light); font-style: italic; }



.n2-mob-nav { flex: 1; overflow-y: auto; min-height: 0; }

.n2-mob-link {

  display: flex; align-items: center; justify-content: space-between;

  padding: 13px 4px;

  color: var(--text);

  font-size: 14px;

  border-bottom: 1px solid var(--border);

  font-family: 'Jost', sans-serif;

  cursor: pointer;

  background: none; border-left: none; border-right: none; border-top: none;

  width: 100%; text-align: left;

}

.n2-mob-link.active { color: var(--gold-dark); }

.n2-mob-link.has-sub i.ti-chevron-down,

.n2-mob-link.has-sub i.ti-chevron-right { color: var(--text-light); font-size: 16px; transition: transform 0.2s; }

.n2-mob-link.has-sub.expanded i.ti-chevron-down { transform: rotate(0deg); }

.n2-mob-sub {

  display: none;

  padding-left: 14px;

  border-left: 2px solid var(--border-strong);

  margin-left: 4px;

}

.n2-mob-sub.open { display: block; }

.n2-mob-sub .n2-mob-link {

  font-size: 13px;

  color: var(--text-mid);

  padding: 10px 4px;

  border-bottom-color: var(--border);

}

.n2-mob-sub-count {

  color: var(--text-light);

  font-size: 11px;

  margin-left: 6px;

}



.n2-mob-foot {

  padding-top: 16px;

  margin-top: 12px;

  border-top: 1px solid var(--border-strong);

  display: flex; gap: 6px;

  flex-shrink: 0;

}

.n2-mob-lang {

  flex: 1; padding: 9px;

  text-align: center;

  border: 1px solid var(--border-strong);

  border-radius: var(--radius);

  color: var(--text-light);

  font-size: 11px;

  letter-spacing: 0.12em;

  font-family: 'Jost', sans-serif;

  cursor: pointer;

  background: none;

  transition: all 0.15s;

}

.n2-mob-lang.active { border-color: var(--gold); color: var(--gold-dark); }



/* ═══════════ RESPONSIVE ═══════════ */

@media (max-width: 900px) {

  nav.nav2 {

    height: 60px;

    padding: 0 14px 0 60px;

    gap: 6px;

    position: fixed;

  }

  body { padding-top: 60px; }

  body.nav-shrunk { padding-top: 60px; }

  nav.nav2.shrunk { height: 60px; }



  .n2-nav { display: none; }

  .n2-lang { display: none; }



  .n2-hamburger {

    display: flex;

    width: 38px; height: 38px;

    border-radius: 8px;

    align-items: center; justify-content: center;

    background: none; border: none;

    color: var(--text-mid);

    cursor: pointer;

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

  }

  .n2-hamburger i { font-size: 22px; }

  .n2-hamburger:hover { background: rgba(200,170,120,0.08); color: var(--gold-dark); }



  .n2-logo { flex: 1; justify-content: center; gap: 8px; }

  .n2-logo-svg { width: 32px; height: 32px; }

  nav.nav2.shrunk .n2-logo-svg { width: 32px; height: 32px; }

  .n2-logo-text { font-size: 17px; }

  nav.nav2.shrunk .n2-logo-text { font-size: 17px; }

  .n2-logo-sub { font-size: 8px; letter-spacing: 0.18em; }



  .n2-actions { gap: 0; }

  .n2-icon { width: 36px; height: 36px; }

  nav.nav2.shrunk .n2-icon { width: 36px; height: 36px; }

  nav.nav2.shrunk .n2-icon i { font-size: 19px; }



  /* Mega-menu schované na mobilu */

  .n2-megamenu { display: none !important; }



  /* Search overlay fullscreen */

  .n2-search-overlay {

    bottom: 0;

    padding: 16px;

    overflow-y: auto;

  }

  .n2-search-bar { padding-bottom: 12px; }

  .n2-search-input { font-size: 18px; }

  .n2-search-results { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }

}



/* ═══════════════════════════════════════════

   OVERRIDE: starý style.css měl margin-top na

   .hero a .page-header (kompenzace starého navu).

   Náš nový nav používá body padding-top, takže

   margin-top je duplicitní = černý pruh. Nulujem.

   ═══════════════════════════════════════════ */

.hero, .page-header, .product-detail { margin-top: 0 !important; }



/* Shop layout override pro nový nav výšku */

.shop-layout { margin-top: 0 !important; }

.shop-sidebar { top: 72px !important; height: calc(100vh - 72px) !important; }

@media (max-width: 900px) {

  #page-shop .mob-chip-bar { top: 60px !important; }

}



/* Session #31: dvě dlaždice vedle sebe. Třetí sloupec megamenu je při

   1.3fr 1fr 1.1fr dost široký na to, aby se tam dvě vešly — jedna v něm

   plavala a zbytek šířky ležel ladem. */

.n2-mm-feats{

  display:grid; grid-template-columns:1fr 1fr; gap:14px;

}

.n2-mm-feats .n2-mm-feat{max-width:none}

.n2-mm-feats .n2-mm-feat-title{font-size:13px; line-height:1.3}

.n2-mm-feats .n2-mm-feat-price{font-size:14px}

@media (max-width:1100px){

  .n2-mm-feats{grid-template-columns:1fr}

  .n2-mm-feats .n2-mm-feat:nth-child(2){display:none}  /* na užším okně radši jednu pořádnou */

}



/* ═══════════════════════════════════════════════════════════

   Session #31 — doporučený produkt v megamenu jako dlaždice



   Původně: .n2-mm-feat-img mělo height: 110px a width: 100%.

   Třetí sloupec megamenu je při 1.3fr 1fr 1.1fr na širokém monitoru

   přes 500 px, takže z obrázkové plochy vznikl plochý obdélník —

   fotka s object-fit: contain se vešla doprostřed a po stranách

   zůstalo prázdno. Vypadalo to jinak než všude jinde na webu.



   Teď to kopíruje dlaždici z e-shopu (viz .product-img-wrap

   v shop-redesign.css): čtvercový obal + contain, tedy celá fotka

   bez ořezu. Rozdíl je jen v tom, že tady musí být omezená šířka —

   jinak by se z 500px sloupce stal 500px vysoký čtverec a rozdrtil

   by výšku rozbalené nabídky.

═══════════════════════════════════════════════════════════ */

.n2-mm-feat {

  /* Šířka dlaždice, ne celého sloupce. 260 px zhruba odpovídá kartě

     v mřížce e-shopu na běžném monitoru. */

  max-width: 260px;

}

.n2-mm-feat-img {

  height: auto;

  aspect-ratio: 1 / 1;

  object-fit: contain;

  background: var(--cream-mid);

}

/* ═══════════════════════════════════════════════════════════

   Balík #91: nižší rozbalovací nabídka E-shop (Petr: „ať není tak

   vysoká, trvá dlouho, než z toho člověk sjede“). Kategorie ve dvou

   sloupcích místo osmi řádků pod sebou, menší odsazení, doporučené

   kusy jako menší dlaždice. Výška zhruba 470 px na 260 px.

═══════════════════════════════════════════════════════════ */

.n2-megamenu { padding: 20px 32px 18px; grid-template-columns: 1.7fr 0.8fr 1.1fr; gap: 28px; }

.n2-mm-col h5 { margin-bottom: 10px; }

.n2-mm-cats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }

.n2-mm-cats .n2-mm-item { padding: 4px 0; min-width: 0; }

.n2-mm-cats .n2-mm-item span:not(.n2-mm-count) { line-height: 1.25; }

.n2-mm-cats .n2-mm-count { white-space: nowrap; }

.n2-mm-item img, .n2-mm-thumb { width: 26px; height: 26px; }

.n2-mm-col > .n2-mm-item { padding: 5px 0; }

.n2-mm-more { margin-top: 4px; padding: 5px 0; }

/* Doporučené: malá fotka vlevo, název a cena vpravo, dva řádky pod sebou. */

.n2-mm-feats { grid-template-columns: 1fr; gap: 8px; }

.n2-mm-feats .n2-mm-feat {

  max-width: 380px; padding: 6px; display: grid;

  grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-content: center;

}

.n2-mm-feats .n2-mm-feat:hover { transform: none; }

.n2-mm-feats .n2-mm-feat-img { grid-row: 1 / span 2; width: 64px; height: 64px; margin: 0; aspect-ratio: auto; }

.n2-mm-feats .n2-mm-feat-title { font-size: 13.5px; margin: 0 0 2px; align-self: end; }

.n2-mm-feats .n2-mm-feat-price { font-size: 12.5px; align-self: start; }

@media (max-width:1100px){ .n2-mm-feats .n2-mm-feat:nth-child(2){ display: grid; } }

.n2-mm-cats .n2-mm-count { margin-left: 6px; }

.n2-mm-cats .n2-mm-count::before { content: "("; } .n2-mm-cats .n2-mm-count::after { content: ")"; }