/* ══════════════════════════════════════════════════════════
   AAryans.cz — Header Layout + Scroll-Hide
   Version: FINAL v1  |  Date: 2026-03-29
   Upload to: /usr/documents/upload/CSSkodyCLAUDE/
   Pair with: aaryans-header-scroll-v1.js
   ══════════════════════════════════════════════════════════ */

/* ── §1 Desktop: force Logo | Kategorie | Search | Icons on ONE LINE ── */
@media only screen and (min-width: 992px) {
  header#header .container.navigation-wrapper {
    flex-wrap: nowrap !important;
    gap: clamp(24px, 3vw, 48px) !important;
  }
  header#header .site-name-wrapper {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    order: -1 !important;
  }
  header#header .container.navigation-wrapper nav#navigation {
    order: 0 !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
  }
  header#header .search-news_sale {
    order: 1 !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 180px !important;
  }
  header#header .navigation-buttons {
    order: 4 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
}

/* ── §2 Hide icon text labels at ≤1150px ── */
@media only screen and (max-width: 1150px) {
  header#header .top-nav-button-login > span,
  header#header .top-nav-button-account > span {
    display: none !important;
  }
  header#header .cart-count-price,
  header#header .cart-link .price,
  header#header a[data-target="cart"] .price {
    display: none !important;
  }
  header#header .navigation-buttons {
    gap: 4px !important;
  }
}

/* ── §3 Top bar → 10px white spacer at all desktop/tablet widths ≥768px ──
   NOTE: no max-width cap — our header logic requires this to fire at
   any viewport width so that header#header { top:10px } is always set
   and the scroll-hide translateY has the correct reference point.        */
@media only screen and (min-width: 768px) {
  .top-navigation-bar {
    height: 10px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .top-navigation-contacts,
  .top-navigation-tools--language {
    display: none !important;
  }
  header#header {
    top: 10px !important;
  }
}

/* ── §4 Scroll-hide transitions — ALL breakpoints ── */
header#header,
.top-navigation-bar {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop & tablet ≥768px */
header#header.aa-hidden {
  transform: translateY(-115%) !important;
}
.top-navigation-bar.aa-hidden {
  transform: translateY(-100%) !important;
}

/* Mobile <768px — special values needed because:
   • header#header is only 20px tall → 115% = ~23px, not enough to hide logo
   • logo sits at position:absolute top:-32px inside the 20px header
   • translateY(-500%) = -100px → header moves from top:60px to -40px, logo to -72px (hidden ✓)
   •
   • .top-navigation-bar has height:0 on mobile → translateY(-100%) = 0px, nothing moves!
   • icons (.top-navigation-tools) live inside it at position:absolute top:32px
   • translateY(-80px) moves bar up 80px → icons shift from 32px to -48px (hidden ✓)       */
@media only screen and (max-width: 767px) {
  header#header.aa-hidden {
    transform: translateY(-500%) !important;
  }
  .top-navigation-bar.aa-hidden {
    transform: translateY(-80px) !important;
  }
}

/* ── §5 Checkout / cart distraction-free mode ── */
body.ordering-process header#header .container.navigation-wrapper nav#navigation,
body.basket header#header .container.navigation-wrapper nav#navigation {
  display: none !important;
}
body.ordering-process header#header .navigation-buttons,
body.basket header#header .navigation-buttons,
body.ordering-process header#header .search-news_sale,
body.basket header#header .search-news_sale {
  display: none !important;
}
body.ordering-process header#header .container.navigation-wrapper,
body.basket header#header .container.navigation-wrapper {
  justify-content: center !important;
  gap: 0 !important;
}
body.ordering-process header#header .site-name-wrapper,
body.basket header#header .site-name-wrapper {
  flex: 0 0 auto !important;
  margin: 0 auto !important;
}
body.ordering-process #aaryans-catbar,
body.basket #aaryans-catbar {
  display: none !important;
}
body.ordering-process header#header,
body.basket header#header {
  position: relative !important;
  top: auto !important;
  transition: none !important;
  transform: none !important;
}