/* =========================================================
   cityLOVE (Shoptet) — starter custom.css
   Cíleno na: .top-navigation-bar, #header, #navigation,
              .hp-hero, .hp-about, .homepage-products-2, #footer
   ========================================================= */

/* Google Font Inter - SemiBold 600, pouze latin subset */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap&text=cityLOVE');

   :root{
    --page-max: 1600px;
    --gutter: 24px;
    --radius: 16px;
  
    --bg: #0b0b0d;
    --panel: rgba(15,15,18,.72);
    --line: rgba(255,255,255,.10);
  
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.70);
    --muter: rgba(255,255,255,.55);
  
    --brand: #63aee6; /* cityLOVE modrá */
    --shadow: 0 18px 55px rgba(0,0,0,.55);
  }
  
  /* =========================
     1) ZÁKLAD / POZADÍ
     ========================= */
  /* Body pozadí - tmavá barva s jemným přechodem */
  html, body { 
    background: linear-gradient(to bottom, #0a0a0c, #0b0b0d, #0d0d0f);
    min-height: 100vh;
  }
  body{ 
    color: var(--text);
  }
  
  a{ color: var(--text); }
  a:hover{ color: var(--brand); }
  
  /* overall-wrapper - obsah stránky, omezená šířka na širokých monitorech */
  .overall-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    background: transparent;
    position: relative;
  }
  
  /* jemná viněta (volitelně) */
  body:before{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.08), transparent 55%),
      radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.55), transparent 60%),
      linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.45));
    opacity: .55;
    z-index: 0;
  }
  body > *{ position: relative; z-index: 1; }
  
  /* =========================
     2) OMEZENÍ ŠÍŘKY OBSAHU
     ========================= */
  /* Prvky v overall-wrapper zabírají 100% šířky wrapperu */
  #content-wrapper.container.content-wrapper{
    width: 100%;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  
  /* Homepage hero/about blok je mimo #content-wrapper → 100% šířky, bez padding */
  .content-wrapper.homepage-box.welcome-wrapper{
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .content-wrapper.homepage-box.welcome-wrapper > .content-wrapper-in{
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .content-wrapper.homepage-box.welcome-wrapper > .content-wrapper-in > .container{
    width: 100%;
    padding: 0;
    margin: 0;
    max-width: none !important;
  }
  
  /* Reset max-width na .welcome div ze Shoptet CSS */
  .welcome div{
    max-width: none !important;
    width: 100% !important;
  }
  .welcome h1{
    max-width: none !important;
  }
  
  /* Footer - omezená šířka na úrovni #footer, děti mají 100% */
  
  /* =========================
     3) TOP BAR (telefon + přihlášení)
     ========================= */
  .top-navigation-bar{
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .top-navigation-bar > .container{
    width: 100%;
    padding: 10px var(--gutter);
  }
  .top-navigation-contacts,
  .top-navigation-menu a,
  .top-nav-button{
    color: var(--muted) !important;
  }
  .top-navigation-menu a:hover,
  .top-nav-button:hover{
    color: var(--text) !important;
  }
  
  /* =========================
     4) HLAVIČKA (logo vlevo, menu vpravo)
     ========================= */
  #header{
    background: rgba(0,0,0,.45) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  #header .container.navigation-wrapper{
    width: 100%;
    padding: 16px var(--gutter);
    display: flex;
    align-items: center;
    gap: 24px;
  }
  
  /* header-top: logo vlevo - použijeme display: contents pro flexbox order */
  #header .header-top{
    display: contents;
  }
  
  /* Logo wrapper - order 1, jen potřebná šířka */
  #header .site-name-wrapper{
    order: 1;
    flex: none;
    flex-shrink: 0;
  }
  
  /* Logo J3T vlevo - modrá barva */
  #header .site-name{
    margin: 0;
    line-height: 0;
  }
  #header .site-name a{
    display: inline-block;
  }
  #header .site-name img{
    height: 44px;
    width: auto;
    display: block;
  }
  /* SVG logo - modrá barva podle mockupu */
  #header .site-name img[src$=".svg"]{
    filter: brightness(0) saturate(100%) invert(58%) sepia(89%) saturate(1352%) hue-rotate(180deg) brightness(99%) contrast(89%);
  }
  
  /* Search skrytý */
  #header .search{
    display: none;
  }
  
  /* Košík - order 3 (po menu), jen potřebná šířka */
  #header .navigation-buttons{
    order: 3;
    flex: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  #header .navigation-buttons .btn{
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #header .navigation-buttons .btn:hover{
    color: var(--brand);
  }
  #header .navigation-buttons .cart-price{
    display: none;
  }
  
  /* =========================
     5) MENU (nav) - na stejné řádce jako logo - order 2, zabírá volný prostor
     ========================= */
  #navigation{
    margin-top: 0;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    order: 2;
    min-width: 0; /* umožní zmenšení */
    background: transparent !important;
    background-color: transparent !important;
  }
  #navigation .navigation-in.menu{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding: 0;
    margin: 0 !important;
    width: 100%;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
  }
  /* Odstranění všech dividerů z navigation-in */
  #navigation .navigation-in.menu::before,
  #navigation .navigation-in.menu::after{
    display: none !important;
    content: none !important;
  }
  
  /* menu-helper (hamburger) - order 4, jen potřebná šířka */
  #header .menu-helper{
    order: 4;
    flex: none;
    flex-shrink: 0;
  }
  
  /* položky menu - bílé texty, modré podtržení podle mockupu */
  #navigation .menu-level-1{
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    justify-content: flex-start;
    width: 100%;
    background: transparent !important;
    background-color: transparent !important;
  }
  #navigation .menu-level-1 > li{
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
  }
  /* Odstranění všech dividerů a borderů z li elementů */
  #navigation .menu-level-1 > li::before,
  #navigation .menu-level-1 > li::after{
    display: none !important;
    content: none !important;
  }
  #navigation .menu-level-1 > li > a{
    color: var(--text) !important;
    text-decoration: none;
    font-weight: 400;
    padding: 8px 0 !important;
    margin: 0 !important;
    font-size: 15px;
    transition: opacity .2s ease;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    position: relative;
    white-space: nowrap;
    display: block;
    /* Zajištění, že se element neposune při hoveru */
    box-sizing: border-box;
  }

  /* Reset margin a padding při hoveru na první položce - přepíše Shoptet CSS */
  #navigation .navigation-in > ul > li > a:hover,
  #navigation .navigation-in.menu > ul > li > a:hover,
  #navigation .menu-level-1 > li > a:hover {
    margin: 0 !important;
    padding-left: 0 !important;
 }

  /* Modré podtržení při hoveru/aktivním stavu */
  #navigation .menu-level-1 > li > a:hover,
  #navigation .menu-level-1 > li > a:focus,
  #navigation .menu-level-1 > li.active > a{
    color: var(--text) !important;
    background: transparent !important;
    padding: 8px 0 !important;
    border: none !important;
  }
  #navigation .menu-level-1 > li > a:hover::after,
  #navigation .menu-level-1 > li > a:focus::after,
  #navigation .menu-level-1 > li.active > a::after{
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--brand);
    /* Zajištění, že podtržení neovlivní layout */
    pointer-events: none;
  }
  #navigation .menu-level-1 > li > a b{
    font-weight: 400;
  }
  
  /* Přihlášení vpravo (navigationActions) - skryté podle mockupu */
  #navigation .navigationActions{
    display: none;
  }
  
  /* =========================
     6) HERO (tvůj vlastní .hp-hero) - celá šířka, obrázek pod menu
     ========================= */
  .hp-hero{
    min-height: 1080px;
    width: 100%;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    position: relative;
    margin: 0;
    padding: 0;
  
    /* background-image přes Shoptet */
    background-image: url("https://citylove.j3t.cz/user/documents/upload/img/hero-pozadi.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    
    /* Podsunutí pod menu - negative margin */
    margin-top: -80px;
    padding-top: 80px;
  }
  
  /* Zajištění, že header je nad hero obrázkem */
  #header{
    position: relative;
    z-index: 100;
  }

  /* ===== REORDER HOMEPAGE BLOCKS (flex + order) =====
   Cíl: hero + o projektu před "Nejznámější"
   Funguje, pokud jsou #content-wrapper a .welcome-wrapper siblings v .overall-wrapper
*/
.type-index .overall-wrapper{
  display: flex;
  flex-direction: column;
}

/* Header nech nahoře */
.type-index .overall-wrapper > #header{ order: 10; }

/* Hero + O projektu před produkty */
.type-index .overall-wrapper > .content-wrapper.homepage-box.welcome-wrapper{ order: 20; }

/* Produkty ("Nejznámější") až po hero/about */
.type-index .overall-wrapper > #content-wrapper.container.content-wrapper{ order: 30; }

/* Footer nakonec */
.type-index .overall-wrapper > #footer{ order: 40; }

/* (volitelné) zruš zbytečný horní okraj, pokud se ti udělá mezera */
.type-index .overall-wrapper > #content-wrapper.container.content-wrapper{
  margin-top: 0;
}
  
  /* Overlay pro čitelnost - snížené utlumení, světlejší pod headerem */
  .hp-hero__overlay{
    position: absolute;
    top: 80px; /* Kompenzace pro padding-top hero */
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(ellipse at 50% 35%, rgba(0,0,0,.05), rgba(0,0,0,.30) 70%),
      linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.08) 15%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.35) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px var(--gutter);
    z-index: 1;
  }
  
  .hp-hero__inner{
    text-align: center;
    max-width: 900px;
  }
  
  .hp-hero__kicker{
    display: inline-block;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    font-size: 12px;
  }
  
  .hp-hero__exhibition{
    margin-top: 12px;
    color: var(--muted);
  }
  .hp-hero__exhibition a{
    color: var(--brand);
    text-decoration: none;
  }
  .hp-hero__exhibition a:hover{
    text-decoration: underline;
  }
  
  .hp-hero__title{
    margin: 18px 0 10px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: clamp(46px, 6vw, 124px);
    font-family: "Inter", sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;

    background: linear-gradient(
        to bottom,
        #509ecb 0%,
        #5f95b2 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  .hp-hero__subtitle{
    margin: 0;
    font-size: clamp(18px, 2.2vw, 26px);
    color: var(--text);
    text-shadow: 0 10px 40px rgba(0,0,0,.75);
  }
  
 
  
  /* =========================
     9) PATIČKA
     ========================= */
  #footer{
    background: rgba(0,0,0,.70);
    border-top: 1px solid var(--line);
    margin-top: 34px;
    max-width: var(--page-max);
    margin-left: auto;
    margin-right: auto;
  }
  
  /* footer-bottom existuje v tvém HTML - děti footeru mají 100% šířky */
  #footer .container.footer-bottom{
    width: 100%;
    padding: 22px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
  }
  
  #footer .copyright,
  #footer #signature{
    color: var(--muter);
  }
  
  #footer a{
    color: var(--muted);
    text-decoration: none;
  }
  #footer a:hover{
    color: var(--text);
  }
  
  /* =========================
     10) RESPONSIVE
     ========================= */
  @media (max-width: 820px){
    :root{ --gutter: 16px; }
  
    #header .header-top{
      flex-wrap: wrap;
      gap: 10px;
    }
  
    #navigation .navigation-in.menu{
      flex-wrap: wrap;
      justify-content: flex-start;
    }
  
    #products-2.products.products-block.homepage-products-2{
      grid-template-columns: 1fr;
    }
  
    .hp-hero{
      min-height: 420px;
    }
    .hp-hero__overlay{
      padding: 44px var(--gutter);
    }
  }