/* =====================================================
   beorganic.sk – Mobile header FINAL fix
   Problém: login(20px) + search(28px) + cart(68px) = 128px
            → zasahuje do absolútne centrovaného loga
   Riešenie: login skrytý (dostupný cez hamburger menu),
             search dostane margin-left:auto namiesto neho
   ===================================================== */

@media (max-width: 800px) {

  /* Login ikona skrytá – prístup cez hamburger menu */
  #topPanel #loginUser {
    display: none !important;
  }

  /* Wishlist skrytý (istota, pôvodne skrytý header_lis CSS) */
  #topPanel .wishlist-link {
    display: none !important;
  }

  /* Lupa – viditeľná, pushnutá doprava cez auto margin */
  #topPanel #search_trg {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 3 !important;
    margin-left: auto !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Košík – tesne za lupou, zrušiť relatívny posun right:1.5% */
  #topPanel .shoppingCart {
    order: 4 !important;
    margin-left: 8px !important;
    right: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* Seborea karta – zrušiť active-hover zdvihnutie */
@media (max-width: 800px) {
  .bo-skin-box.active-hover,
  html body #page_home_out .bo-skin-box.active-hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Mobil: vpravo poradie zákaznícka sekcia -> lupa -> košík */
@media (max-width: 800px) {
  #topPanel #loginUser.divLogin {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 3 !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    margin-top: 0 !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 26px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #topPanel #loginUser .loginLink {
    display: inline-block !important;
  }

  #topPanel #search_trg {
    order: 4 !important;
    margin-left: 0 !important;
  }

  #topPanel .shoppingCart {
    order: 5 !important;
  }
}

/* Mobil: desktop-like zarovnanie ikon a medzier */
@media (max-width: 800px) {
  #topPanel {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    column-gap: 20px !important;
  }

  #topPanel #loginUser.divLogin {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 26px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }

  #topPanel #loginUser.divLogin .loginLink {
    display: block !important;
    width: 20px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: 94px 16px !important;
    background-position: -27px 8px !important;
  }

  #topPanel #search_trg {
    order: 4 !important;
    display: block !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: 38px 18px !important;
    background-position: -16px center !important;
  }

  #topPanel #shoppingCart.shoppingCart {
    order: 5 !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    right: 0 !important;
    position: relative !important;
  }

  #topPanel #shoppingCart .shoppingCartIn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 26px !important;
    line-height: 1 !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  #topPanel #shoppingCart .shoppingCartIn > span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    height: 26px !important;
    margin: 0 !important;
  }

  #topPanel #shoppingCart .s-img {
    display: inline-block !important;
    width: 20px !important;
    height: 26px !important;
    margin: 0 !important;
    background-size: 38px 18px !important;
    background-position: -19px 2px !important;
  }

  #topPanel #shoppingCart .shoppingCartIn > span:nth-child(2) {
    display: inline-flex !important;
    align-items: center !important;
    height: 26px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
}

/* Mobil: final compact desktop-style ikony, rovnake sloty a rovnake medzery */
@media (max-width: 800px) {
  #topPanel {
    column-gap: 0 !important;
    background-size: auto 30px !important;
  }

  #topPanel #loginUser.divLogin {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 24px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }

  #topPanel #search_trg {
    order: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 24px !important;
    margin: 0 0 0 14px !important;
    padding: 0 !important;
    background: none !important;
    line-height: 0 !important;
  }

  #topPanel #shoppingCart.shoppingCart {
    order: 5 !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    height: 24px !important;
    margin: 0 0 0 14px !important;
    padding: 0 !important;
    right: 0 !important;
  }

  #topPanel #bo-logo-link {
    width: 140px !important;
  }

  #topPanel #loginUser.divLogin .loginLink,
  #topPanel #search_trg,
  #topPanel #shoppingCart .s-img {
    color: #000 !important;
  }

  #topPanel #loginUser.divLogin .loginLink {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    line-height: 0 !important;
  }

  #topPanel #loginUser.divLogin .loginLink::before,
  #topPanel #search_trg::before,
  #topPanel #shoppingCart .s-img::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
  }

  #topPanel #loginUser.divLogin .loginLink::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='4'/%3E%3Cpath%20d='M4%2021c1.7-4.3%204.2-6.5%208-6.5s6.3%202.2%208%206.5'/%3E%3C/svg%3E") !important;
  }

  #topPanel #search_trg::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='m16.5%2016.5%204.5%204.5'/%3E%3C/svg%3E") !important;
  }

  #topPanel #shoppingCart .shoppingCartIn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  #topPanel #shoppingCart .shoppingCartIn > span:first-child,
  #topPanel #shoppingCart .s-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    line-height: 0 !important;
  }

  #topPanel #shoppingCart .s-img::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%203h2l2.2%2011.2a2%202%200%200%200%202%201.6h8.6a2%202%200%200%200%202-1.6L21%207H6'/%3E%3Ccircle%20cx='10'%20cy='21'%20r='1.2'/%3E%3Ccircle%20cx='18'%20cy='21'%20r='1.2'/%3E%3C/svg%3E") !important;
  }

  #topPanel #shoppingCart .shoppingCartIn > span:nth-child(2) {
    display: inline-flex !important;
    align-items: center !important;
    height: 24px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  #topPanel #shoppingCart .shoppingCartIn > span:nth-child(2) span:last-child {
    display: inline !important;
    margin-left: 3px !important;
  }
}