/* ============================================================
   NuCrux — Custom styly (style.css)
   Šablona: Shoptet Samba
   Soubor: /user/documents/web/css/style.css

   Verze 0.1 — 15. 5. 2026
   ============================================================ */


/* ============================================================
   1. HLAVIČKA — logo vlevo + menu vedle + ikony vpravo
   ============================================================
   Cíl: jednořádková lišta ve stylu ohneproject.com
   Layout:  [LOGO] [DÁMSKÉ PÁNSKÉ ... ZNAČKY]   [🔍 👤 🛒]
*/

/* Pro pozici absolute menu */
header {
  position: relative;
}

/* Spojit horní řádek (logo + ikony) do flexboxu */
.header-top {
  padding: 0;
}

.header-top-wrapper {
  display: flex !important;
  align-items: center;
  gap: 32px;
  padding: 14px 20px;
  flex-wrap: nowrap !important;   /* Shoptet má default `wrap` — vynutíme `nowrap` */
  min-height: 70px;
}

/* Vyhodit prázdný placeholder vlevo */
.header-top-wrapper > .navigation-tools {
  display: none !important;
}

/* `.user-action` skrýt jen nad 1500px (tam, kde mám absolute menu layout).
   Pod 1500px ho Shoptet potřebuje pro vlastní mobile/tablet menu logiku. */
@media (min-width: 1500px) {
  .header-top-wrapper > .user-action {
    display: none !important;
  }
}

/* Logo — vlevo, menší */
.header-top-wrapper > .site-name {
  width: auto !important;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
}
.site-name a {
  display: block !important;
  line-height: 0;
}
.site-name img {
  max-width: 140px !important;
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Ikony (search, login, cart) — vpravo, push to right */
.header-top-wrapper > .navigation-buttons {
  width: auto !important;
  flex: 0 0 auto;
  margin-left: auto !important;
}

/* Menu — přesun z dolního řádku k logu (absolute positioning) */
.header-bottom {
  position: absolute !important;
  top: 21px !important;       /* vertikálně centrované s logem */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  /* match Shoptet container max-width 1712px, ale respect viewport padding */
  width: 1712px !important;
  max-width: calc(100vw - 40px) !important;
  /* vnitřní padding: zleva (logo width + větší gap) + zprava (ikony) */
  padding: 0 200px 0 280px !important;
  box-sizing: border-box !important;
  z-index: 5;
  background: transparent !important;
  /* Padding area NESMÍ absorbovat klik (jinak nejde kliknout na logo
     a ikony, které jsou pod menu). Klik dovolíme jen na menu items. */
  pointer-events: none !important;
}
.header-bottom .navigation-in.menu > ul.menu-level-1 > li,
.header-bottom .navigation-in.menu .menu-level-2 {
  pointer-events: auto !important;
}
.header-bottom-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.header-bottom-wrapper > nav {
  background: transparent !important;
  height: 44px !important;
}

/* Menu items — flex row, decentní spacing, malé caps, ZAROVNÁNO VLEVO */
.header-bottom .navigation-in.menu > ul.menu-level-1 {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-items: center;
  height: 44px;
}
.header-bottom .navigation-in.menu > ul.menu-level-1 > li {
  margin: 0 !important;
}
.header-bottom .navigation-in.menu > ul.menu-level-1 > li > a {
  padding: 12px 0 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-weight: 800 !important;
}
.header-bottom .navigation-in.menu > ul.menu-level-1 > li > a > b {
  font-weight: 800 !important;
}

/* Hover bridge — mezi parent menu položkou a submenu nesmí padat hover,
   jinak se submenu zavře dřív, než tam myš dojde.
   POZN: pseudo-element je na <a>, ne na <li>, protože Shoptet megamenu
   potřebuje `<li>` ponechat na `position: static` (aby submenu width: 100%
   referovalo k širokému <nav>, ne k úzkému <li>). */
.header-bottom .navigation-in.menu > ul.menu-level-1 > li > a {
  position: relative;
}
.header-bottom .navigation-in.menu > ul.menu-level-1 > li:hover > a::after,
.header-bottom .navigation-in.menu > ul.menu-level-1 > li:focus-within > a::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 30px;
  z-index: 4;
}

/* Hover stav: bez šedivého pozadí, jen podtrh slova
   POZN: Shoptet přidává class `.exp` na <li> když je submenu otevřené —
   musíme přebít i .exp > a (jinak Shoptet dá šedé rgba(222,222,222,0.557)). */
.header-bottom .navigation-in.menu li,
.header-bottom .navigation-in.menu li:hover,
.header-bottom .navigation-in.menu li.active,
.header-bottom .navigation-in.menu li.exp {
  background: transparent !important;
}
.header-bottom .navigation-in.menu li > a,
.header-bottom .navigation-in.menu li > a:hover,
.header-bottom .navigation-in.menu li > a:focus,
.header-bottom .navigation-in.menu li.active > a,
.header-bottom .navigation-in.menu li.exp > a {
  background: transparent !important;
}
.header-bottom .navigation-in.menu li > a:hover,
.header-bottom .navigation-in.menu li > a:focus,
.header-bottom .navigation-in.menu li.active > a,
.header-bottom .navigation-in.menu li.exp > a {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 2px !important;
}
.header-bottom .navigation-in.menu li > a:hover > b,
.header-bottom .navigation-in.menu li > a:focus > b,
.header-bottom .navigation-in.menu li.active > a > b,
.header-bottom .navigation-in.menu li.exp > a > b {
  background: transparent !important;
}


/* ============================================================
   1c. EXTENDED BANNER (kategorie karty na homepage)
   ============================================================
   Default Samba má 32px titulek a 40px padding = bílá karta
   zabírá většinu plochy banneru. Zmenšujeme aby byl víc vidět obrázek.
*/

.extended-banner-title {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.extended-banner-texts {
  padding: 14px 18px !important;
  min-height: 0 !important;   /* default Samba je 50% banner-height — vyhazujeme */
  height: auto !important;
  text-align: center !important;
  justify-content: center !important;   /* pro flex layout uvnitř */
}

/* Mezery mezi banner kartami (gap byl 'normal' = 0) + mezera nad nimi */
.next-to-carousel-banners {
  gap: 20px !important;
  margin-top: 30px !important;
}

/* Uvítací text (sekce "Barefoot boty pro celou rodinu") — center + max 800px */
.welcome-wrapper {
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.welcome-wrapper .welcome,
.welcome-wrapper h2,
.welcome-wrapper h3,
.welcome-wrapper p {
  text-align: center !important;
}


/* ============================================================
   2. BREADCRUMBS — vlastní padding
   ============================================================ */

.breadcrumbs {
  padding: 20px 16px 6px 16px !important;
}


/* ============================================================
   3. KATEGORIE — H1 + perex 50% šířky, zarovnáno doprava
   ============================================================
   Důvod: lepší čitelnost. Dlouhé řádky přes celou šířku
   se špatně čtou (oční skok > 80 znaků).
*/

h1.category-title,
.category-perex {
  max-width: 50%;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Vyrovnání textu uvnitř bloku — vlevo je čitelnější */
h1.category-title,
.category-perex,
.category-perex p {
  text-align: left;
}

/* Na mobilu vrátit full-width, aby se text nelámal */
@media (max-width: 991px) {
  h1.category-title,
  .category-perex {
    max-width: 100%;
  }
}


/* ============================================================
   3. RESPONSIVE — pod 1500px vrátit Shoptet default flow
   ============================================================
   Důvod: absolute menu má pixel offset, neškáluje hezky na
   úzčích oknech. Pod 1500 použijeme Shoptet default 2-řádkový
   layout (kde Shoptet sám řeší hamburger/desktop podle breakpoints).
*/
@media (max-width: 1500px) {
  .header-top-wrapper {
    flex-wrap: wrap !important;
    padding: 14px 20px !important;
    min-height: 0 !important;   /* na mobilu/tabletu Shoptet má vlastní výšku (60px), nepřečnívat */
  }
  .header-bottom {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
  .header-bottom .navigation-in.menu > ul.menu-level-1 {
    justify-content: center !important;
  }
}