/*
 * Mabell — universal mobile header for Shoptet Classic
 * Production v11: CSS-only; adaptive promo strip and anchor-positioned login/cart popups.
 * Loaded after the project CSS files.
 */

@media (max-width: 767px) {
  body.mobile {
    --mabell-info-height: 31px;
    --mabell-header-height: 70px;
    --mabell-header-gap: 14px;
    --mabell-search-height: 46px;
  }

  /* ---------------------------------------------------------
   * Page flow
   * Promo strip and header stay in normal flow so a longer
   * promo message can wrap and the page moves down naturally.
   * --------------------------------------------------------- */
  body.mobile .overall-wrapper {
    position: relative !important;
    padding-top: 0 !important;
  }

  /* ---------------------------------------------------------
   * Information strip and white header row
   * --------------------------------------------------------- */
  body.mobile .site-msg.information {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: var(--mabell-info-height) !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 40 !important;
  }

  body.mobile .site-msg.information > .container {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: var(--mabell-info-height) !important;
    padding: 5px 10px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.mobile .site-msg.information .text {
    width: 100% !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 18px !important;
    text-align: center !important;
  }

  body.mobile .top-navigation-bar {
    anchor-name: --mabell-mobile-header;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: var(--mabell-header-height) !important;
    margin: 0 !important;
    background: #fff !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 6px 8px -8px rgba(0, 0, 0, 0.38) !important;
    transform: none !important;
    transition: none !important;
    z-index: 40 !important;
  }

  body.mobile.ordering-process .top-navigation-bar {
    top: auto !important;
  }

  body.mobile .top-navigation-bar > .container {
    position: relative !important;
    width: 100% !important;
    height: var(--mabell-header-height) !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  body.mobile .top-navigation-tools,
  body.mobile .responsive-tools {
    width: 100% !important;
    height: var(--mabell-header-height) !important;
  }

  body.mobile .responsive-tools {
    position: relative !important;
    padding: 15px 0 !important;
  }

  /* ---------------------------------------------------------
   * Header controls
   * --------------------------------------------------------- */
  body.mobile .responsive-tools > a[data-target="navigation"],
  body.mobile .responsive-tools > a[data-target="search"],
  body.mobile .responsive-tools > a[data-target="login"] {
    display: flex !important;
    position: absolute !important;
    top: 15px !important;
    bottom: auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000 !important;
    line-height: 1 !important;
    transform: none !important;
    z-index: 60 !important;
  }

  body.mobile .responsive-tools > a[data-target="navigation"]::before,
  body.mobile .responsive-tools > a[data-target="search"]::before,
  body.mobile .responsive-tools > a[data-target="login"]::before {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
    transform: none !important;
  }

  body.mobile .responsive-tools > a[data-target="navigation"] {
    right: auto !important;
    left: 0 !important;
    width: 40px !important;
    padding: 4px !important;
  }

  body.mobile .responsive-tools > a[data-target="navigation"]::before {
    color: #000 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 22px !important;
  }

  body.mobile .responsive-tools > a[data-target="search"] {
    display: flex !important;
    visibility: visible !important;
    right: auto !important;
    left: 42px !important;
    width: 40px !important;
    padding: 4px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Shoptet hides this trigger in the new Classic header; Mabell restores it. */
  body.mobile .responsive-tools > a[data-target="login"] {
    display: flex !important;
    visibility: visible !important;
    right: 44px !important;
    left: auto !important;
    width: 32px !important;
    padding: 4px 0 !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  body.mobile .responsive-tools > a[data-target="login"]::before {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    line-height: 32px !important;
    text-align: center !important;
  }

  /* ---------------------------------------------------------
   * Logo, cart and search live in #header, over the white row.
   * --------------------------------------------------------- */
  body.mobile #header {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 0 !important;
    margin: 0 0 var(--mabell-header-gap) !important;
    overflow: visible !important;
    background: transparent !important;
    transform: none !important;
    transition: none !important;
    z-index: 41 !important;
  }

  body.mobile.search-window-visible #header {
    margin-bottom: calc(var(--mabell-search-height) + var(--mabell-header-gap)) !important;
  }

  body.mobile.ordering-process #header {
    top: auto !important;
    margin-bottom: 0 !important;
  }

  body.mobile.ordering-process.search-window-visible #header {
    margin-bottom: var(--mabell-search-height) !important;
  }

  body.mobile #header > .navigation-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.mobile #header .header-top,
  body.mobile #header .site-name-wrapper,
  body.mobile #header .navigation-buttons {
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.mobile #header .site-name {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: calc(-1 * var(--mabell-header-height)) !important;
    right: auto !important;
    left: 50% !important;
    width: 145px !important;
    height: var(--mabell-header-height) !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
  }

  body.mobile #header .site-name a {
    display: flex !important;
    width: 145px !important;
    height: var(--mabell-header-height) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.mobile #header .site-name img {
    display: block !important;
    position: static !important;
    width: 145px !important;
    height: auto !important;
    max-width: 145px !important;
    max-height: 45px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    transform: translateY(-2px) !important;
  }

  /* Cart trigger on normal storefront pages. */
  body.mobile:not(.ordering-process) #header .cart-count {
    display: flex !important;
    visibility: visible;
    position: absolute !important;
    top: -56px !important;
    right: 11px !important;
    bottom: auto !important;
    left: auto !important;
    width: 36px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000 !important;
    background: transparent !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 60 !important;
    transition: visibility 0s linear 220ms !important;
  }

  body.mobile.ordering-process #header .cart-count,
  body.mobile #header .cart-count .cart-price {
    display: none !important;
  }

  body.mobile #header .cart-count::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    font-size: 0 !important;
    background: transparent url("taska.svg") center / contain no-repeat !important;
  }

  body.mobile #header .cart-count i {
    display: block !important;
    position: absolute !important;
    top: 1px !important;
    right: -1px !important;
    min-width: 13px !important;
    height: 13px !important;
    padding: 0 3px !important;
    border-radius: 10px !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 13px !important;
    text-align: center !important;
  }

  /* ---------------------------------------------------------
   * Search panel — inset and part of page flow.
   * --------------------------------------------------------- */
  body.mobile #header .search {
    position: absolute !important;
    top: 0 !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    min-height: var(--mabell-search-height) !important;
    margin: 0 !important;
    padding: 6px 0 8px !important;
    box-sizing: border-box !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
  }

  body.mobile #header .search form,
  body.mobile #header .search .search-form,
  body.mobile #header .search .compact-form,
  body.mobile #header .search fieldset,
  body.mobile #header .search .search-whisperer {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  body.mobile #header .search fieldset {
    padding: 0 !important;
  }

  @keyframes mabell-search-drop {
    from { transform: translateY(-8px); }
    to   { transform: translateY(0); }
  }

  body.mobile.search-window-visible #header .search {
    display: block !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transform-origin: top center !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: mabell-search-drop 140ms ease-out both !important;
  }

  /* ---------------------------------------------------------
   * Login and mini-cart
   *
   * Do not calculate the promo-strip height manually. The white
   * mobile header is a CSS anchor, so the popups follow its real
   * bottom edge even when the promo text wraps to more lines.
   *
   * On browsers without CSS Anchor Positioning we deliberately
   * leave Shoptet's native popup positioning untouched instead of
   * guessing a fixed promo height.
   * --------------------------------------------------------- */
  @supports (top: anchor(--mabell-mobile-header bottom)) {
    body.mobile .popup-widget.login-widget,
    body.mobile .popup-widget.cart-widget {
      position: fixed !important;
      top: calc(anchor(--mabell-mobile-header bottom) + var(--mabell-header-gap)) !important;
      bottom: 0 !important;
      height: auto !important;
      max-height: none !important;
      padding-top: 0 !important;
      background: #fff !important;
      z-index: 35 !important;
    }

    body.mobile.ordering-process .popup-widget.login-widget,
    body.mobile.ordering-process .popup-widget.cart-widget {
      top: anchor(--mabell-mobile-header bottom) !important;
    }
  }

  /* ---------------------------------------------------------
   * Native Shoptet side menu remains visually untouched.
   * An invisible shield covers only the login hit area while the
   * menu is open and for 500 ms after it closes. This blocks the
   * delayed mobile click without hiding or moving the login icon.
   * --------------------------------------------------------- */
  body.mobile #navigation {
    box-shadow: 0px 0px 10px rgb(0 0 0 / 20%) !important;
  }

  body.mobile.navigation-window-visible #navigation {
    z-index: 100 !important;
  }

  body.mobile .responsive-tools::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 44px;
    width: 32px;
    height: 40px;
    background: transparent;
    visibility: hidden;
    pointer-events: auto;
    z-index: 70;
    transition: visibility 0s linear 500ms;
  }

  body.mobile.navigation-window-visible .responsive-tools::after {
    visibility: visible;
    transition-delay: 0s;
  }
}