/* =========================================================================
   LA ELITE – hlavní menu
   Vzhled → Editor vzhledu → Vlastní CSS
   -------------------------------------------------------------------------
   Čisté CSS, žádný JavaScript. Upravuje POUZE navigaci (#navigation),
   nesahá na hlavičku, logo, vyhledávání ani košík – rozložení řídí dál
   šablona Shoptetu.
   ========================================================================= */

:root {
  --le-menu-ink:    #14171a;   /* text menu */
  --le-menu-soft:   #77808b;   /* podřazené položky */
  --le-menu-line:   rgba(20,23,26,.10);
  --le-menu-accent: #b0894f;   /* mosazný akcent – stejný jako homepage */
  --le-menu-panel:  #ffffff;
}


/* ================================================= podklad menu = bílý */
/* Šablona má lištu menu barevnou (modrou) a černý text na ní není čitelný.
   Měníme jen barvu pozadí, nikoli rozložení.
   Pokud chcete barevný nechat i horní řádek s logem, smažte řádek
   s .navigation-wrapper. */
.navigation-wrapper,
#navigation,
#navigation .navigation-in,
#navigation .menu-level-1,
#navigation .menu-level-1 > li,
.menu-helper {
  background-color: #fff;
  background-image: none;
}

/* vlasová linka místo barevného pruhu, aby menu neplavalo v prázdnu */
#navigation .menu-level-1 { border-bottom: 1px solid var(--le-menu-line); }

/* ===================================================== 1. úroveň – položky */
#navigation .menu-level-1 > li > a {
  font-family: inherit;             /* stejné písmo jako texty na homepage */
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .2em;             /* prostrkání jako u nadpisků na homepage */
  text-transform: uppercase;
  color: var(--le-menu-ink);
  background-color: transparent;

  /* podtržení kreslíme přes background – nemění výšku ani šířku položky */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 50% calc(100% - 6px);
  background-size: 0 1px;
  transition: color .25s ease, background-size .4s cubic-bezier(.4, 0, .2, 1);
}

/* Shoptet dává název do <b> – tučné písmo do prémiového menu nepatří */
#navigation .menu-level-1 > li > a b,
#navigation .menu-level-1 > li > a strong {
  font-weight: inherit;
  letter-spacing: inherit;
}

/* svislé oddělovače mezi položkami pryč */
#navigation .menu-level-1 > li,
#navigation .menu-level-1 > li > a {
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}

#navigation .menu-level-1 > li > a:hover,
#navigation .menu-level-1 > li > a:focus,
#navigation .menu-level-1 > li:hover > a,
#navigation .menu-level-1 > li.active > a,
#navigation .menu-level-1 > li.exp > a {
  color: var(--le-menu-accent);
  background-color: transparent;
  text-decoration: none;
  background-size: 46% 1px;
}
#navigation .menu-level-1 > li.active > a { background-size: 46% 1px; }

/* --- šipka u položky s podmenu: jemný chevron místo plného trojúhelníku --- */
#navigation .menu-level-1 > li > a .submenu-arrow {
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border: 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: none !important;
  opacity: .5;
  transform: translateY(-2px) rotate(45deg);
  transition: opacity .25s ease, transform .25s ease;
}
#navigation .menu-level-1 > li > a .submenu-arrow::before,
#navigation .menu-level-1 > li > a .submenu-arrow::after { display: none; }
#navigation .menu-level-1 > li:hover > a .submenu-arrow {
  opacity: 1;
  transform: translateY(0) rotate(45deg);
}

/* ================================================ 2. úroveň – panel podmenu */
#navigation .menu-level-2 {
  padding: 10px 0;
  background: var(--le-menu-panel);
  border: 1px solid var(--le-menu-line);
  border-top: 2px solid var(--le-menu-accent);   /* tenký akcentní proužek */
  border-radius: 0;
  box-shadow: 0 26px 60px rgba(20, 23, 26, .14);
}

/* dekorativní náhledy složek (folder.svg) – v prémiovém menu ruší */
#navigation .menu-level-2 .menu-image { display: none !important; }

#navigation .menu-level-2 > li { border: 0; background: none; }
#navigation .menu-level-2 > li + li { border-top: 1px solid var(--le-menu-line); }

#navigation .menu-level-2 > li > div > a,
#navigation .menu-level-2 > li > a {
  display: block;
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--le-menu-ink);
  background: none;
  transition: color .22s ease, padding-left .28s cubic-bezier(.4, 0, .2, 1);
}
#navigation .menu-level-2 > li > div > a:hover,
#navigation .menu-level-2 > li > div > a:focus,
#navigation .menu-level-2 > li > a:hover {
  color: var(--le-menu-accent);
  background: none;
  text-decoration: none;
  padding-left: 32px;
}

/* ==================================================== 3. úroveň – odsazení */
#navigation .menu-level-3 {
  margin: 0 26px 12px;
  padding: 2px 0 2px 16px;
  border-left: 1px solid var(--le-menu-line);
  list-style: none;
}
#navigation .menu-level-3 > li { border: 0; }
#navigation .menu-level-3 a {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--le-menu-soft);
  transition: color .22s ease;
}
#navigation .menu-level-3 a:hover {
  color: var(--le-menu-accent);
  text-decoration: none;
}


/* ---- desktop: podmenu jako jeden úhledný sloupec ------------------------
   Šablona řadí položky 2. úrovně vedle sebe / s pevnými šířkami, proto
   je sjednocujeme: každá položka na celou šířku panelu, pod sebou,
   3. úroveň pod názvem nadřazené položky. */
@media (min-width: 992px) {
  #navigation .menu-level-2 {
    display: block;
    width: 290px;
    min-width: 290px;
    max-width: none;
    padding: 8px 0;
    text-align: left;
  }
  #navigation .menu-level-2 > li {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    position: static;
  }
  #navigation .menu-level-2 > li > div {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #navigation .menu-level-2 > li > div > a,
  #navigation .menu-level-2 > li > a {
    width: 100%;
    margin: 0;
    line-height: 1.35;
    white-space: normal;
  }
  #navigation .menu-level-2 > li > div > a span,
  #navigation .menu-level-2 > li > a span { display: inline; }
  #navigation .menu-level-3 {
    display: block;
    position: static;
    width: auto;
    min-width: 0;
    margin: -4px 26px 12px;
    padding: 2px 0 2px 16px;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: transparent;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
  }
  #navigation .menu-level-3 > li { display: block; float: none; width: 100%; }
}

/* ================================================ helper „Více“ v hlavičce */
.menu-helper > span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--le-menu-ink);
}

/* ==================================================================== mobil */
@media (max-width: 991px) {

  /* rozbalovací panel menu – bílý podklad, tmavý text */
  #navigation,
  #navigation .navigation-in,
  #navigation .menu-level-1,
  #navigation .menu-level-1 > li,
  #navigation .menu-level-2,
  #navigation .menu-level-2 > li,
  #navigation .menu-level-3 {
    background-color: #fff;
    background-image: none;
  }
  #navigation .menu-level-1 { border-bottom: 0; }

  /* položky přes celou šířku, dostatečně velká plocha pro prst */
  #navigation .menu-level-1 > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 15px;
    letter-spacing: .12em;
    color: var(--le-menu-ink);
    background-image: none;          /* na mobilu je menu seznam, ne lišta */
  }
  #navigation .menu-level-1 > li + li > a { border-top: 1px solid var(--le-menu-line); }
  #navigation .menu-level-1 > li > a:hover,
  #navigation .menu-level-1 > li.active > a { background-size: 0 1px; }

  /* šipka u rozbalovací položky vpravo */
  #navigation .menu-level-1 > li > a .submenu-arrow {
    margin-left: auto;
    transform: rotate(45deg);
  }
  #navigation .menu-level-1 > li.exp > a .submenu-arrow { transform: rotate(-135deg); }

  /* podmenu bez panelu a stínu, jen odsazené */
  #navigation .menu-level-2 {
    border: 0;
    border-top: 1px solid var(--le-menu-line);
    box-shadow: none;
    padding: 0;
  }
  #navigation .menu-level-2 > li + li { border-top: 1px solid var(--le-menu-line); }
  #navigation .menu-level-2 > li > div > a,
  #navigation .menu-level-2 > li > a {
    padding: 14px 20px 14px 34px;
    font-size: 15px;
  }
  #navigation .menu-level-2 > li > div > a:hover { padding-left: 34px; }

  #navigation .menu-level-3 {
    margin: 0 20px 12px 34px;
    padding-left: 14px;
  }
  #navigation .menu-level-3 a { padding: 11px 0; font-size: 14px; }

  /* zavírací křížek panelu */
  #navigation .navigation-close { color: var(--le-menu-ink); opacity: .6; }
  #navigation .navigation-close:hover { opacity: 1; }

  /* přihlášení v mobilním menu sjednotíme s ostatními položkami */
  #navigation .navigationActions a {
    padding: 15px 20px;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--le-menu-ink);
    border-top: 1px solid var(--le-menu-line);
  }

  /* helper „Více“ je jen pro desktop */
  .menu-helper { display: none; }
}

@media (max-width: 543px) {
  #navigation .menu-level-1 > li > a { font-size: 14px; letter-spacing: .1em; }
  #navigation .menu-level-2 > li > div > a,
  #navigation .menu-level-2 > li > a { padding-left: 30px; }
  #navigation .menu-level-3 { margin-left: 30px; }
}