/* ==========================================================================
   Mobile sticky header bar – shared across all themes (default, hemmy,
   vitvaruexperten, simplica). Active on phones and tablets (xs/sm, < 992px).

   Row 1 = logo (scrolls away). Row 2 = sticky bar with menu, search and cart.
   The real #search and #cart nodes are moved into this bar by common.js, so
   there is only ever one instance of each on the page.
   ========================================================================== */

/* Hidden on desktop – the bar only exists for xs/sm. */
@media (min-width: 992px) {
    #mobile-header-bar,
    #mobile-header-spacer {
        display: none !important;
    }
}

@media (max-width: 991px) {
    /* The original desktop search/cart columns are emptied on mobile – hide
       the now-empty columns so they don't take up space. */
    .header-search-col,
    .header-cart-col {
        display: none !important;
    }

    #mobile-header-bar {
        position: relative;
        width: 100%;
        background: var(--mobile-bar-bg, #333);
        z-index: 1031;
    }

    /* Pinned to the top of the viewport once the logo has scrolled past. */
    #mobile-header-bar.is-stuck {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    /* Placeholder that keeps the page from jumping when the bar goes fixed. */
    #mobile-header-spacer {
        display: none;
    }
    #mobile-header-spacer.is-active {
        display: block;
    }

    .mobile-header-inner {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: 0;
    }

    .mobile-header-btn {
        flex: 0 0 auto;
        height: 46px;
        min-width: 50px;
        margin-right: 8px;
        padding: 0 12px;
        border: none;
        background: transparent;
        color: #fff;
        font-size: 20px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-header-btn > .fa {
        font-size:20px;
    }

    /* Cart sits on the far right. */
    #mobile-cart-slot {
        margin-left: auto;
        flex: 0 0 auto;
    }
    /* Some themes give the cart btn-block (full width) – keep it compact here. */
    #mobile-cart-slot #cart {
        width: auto;
        display: inline-block;
    }
    #mobile-cart-slot #cart > button {
        white-space: nowrap;
    }

    /* ---- Full-screen search modal --------------------------------------- */
    body.mobile-search-open {
        overflow: hidden;
    }

    /* Dimmed backdrop covering the whole screen – the page stays visible
       underneath. Tapping the backdrop (outside the search box) closes it. */
    #mobile-search-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2000;
    }
    #mobile-header-bar.search-open #mobile-search-overlay {
        display: flex;
    }

    /* The search box itself, centred on screen, in a white rounded card. */
    #mobile-search-slot {
        width: 100%;
        max-width: 500px;
        padding: 20px;
        background: #fff;
        border-radius: 8px;
    }
    #mobile-search-slot #search {
        width: 100%;
        display: table; /* input-group default */
    }
    /* iOS auto-zooms into a focused input whose font-size is < 16px, which
       shifts the zoomed viewport and cuts off the field / submit button. The
       theme sets input.form-control to 12px, so force >= 16px in the modal. */
    #mobile-search-slot input.form-control {
        font-size: 16px;
    }

    /* ---- Category menu now lives in the bar ----------------------------- */
    /* Hide the old in-page "menu" trigger/strip; the collapse panel itself is
       kept (and dropped under the bar when opened). */
    #menu .navbar-header {
        display: none !important;
    }
    #menu {
        min-height: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* Bootstrap forces .navbar-collapse open from 768px up. Override so the
       category menu stays collapsible on tablets (sm) too. */
    .navbar-ex1-collapse.collapse {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    .navbar-ex1-collapse.collapse.in {
        display: block !important;
        height: auto !important;
        overflow-y: auto !important;
    }
    .navbar-ex1-collapse.collapsing {
        display: block !important;
    }

    /* ---- Category menu: fixed panel dropping from under the bar --------- */
    /* Always fixed and full width whether or not the bar is pinned, so the
       panel never shifts sideways when scrolling starts. Page scroll is locked
       while it's open (like the search modal); JS keeps --menu-panel-top in
       sync with the bar's on-screen bottom. */
    body.mobile-menu-open {
        overflow: hidden;
    }
    body.mobile-menu-open .navbar-ex1-collapse {
        position: fixed;
        top: var(--menu-panel-top, 46px);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--menu-panel-top, 46px));
        overflow-y: auto;
        margin: 0;
        padding: 8px 15px;
        background: var(--mobile-bar-bg, #333);
        z-index: 1030;
    }

    /* ---- Mini-cart: full width, dropping from under the bar ------------- */
    /* Making #cart static lets the absolutely-positioned dropdown span the
       full-width bar instead of hugging the cart button. */
    #mobile-cart-slot #cart {
        position: static;
    }
    #mobile-cart-slot #cart .dropdown-menu.minicart {
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        border-radius: 0;
        max-height: calc(100vh - var(--mobile-bar-height, 46px));
        overflow-y: auto;
    }
}

/* ==========================================================================
   Mini-cart dropdown (header cart button) – shared across themes, all sizes.
   Clean, borderless layout with a full-width button footer.
   ========================================================================== */
#cart .dropdown-menu.minicart {
    padding: 12px;
    min-width: 340px;
}

.minicart-table {
    width: 100%;
    margin: 0 0 12px;
    border-collapse: collapse;
}
.minicart-table td {
    border: none;
    padding: 8px 6px;
    vertical-align: middle;
    background: transparent;
}
.minicart-image {
    width: 92px;
}
.minicart-thumb {
    width: 80px;
    height: auto;
    border: none;
    border-radius: 4px;
}
.minicart-name a {
    font-weight: 600;
    color: inherit;
}
.minicart-qty,
.minicart-total {
    white-space: nowrap;
    text-align: right;
}
.minicart-total {
    font-weight: 600;
}

.minicart-footer {
    padding-top: 4px;
}
.minicart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 12px;
    font-size: 16px;
}
.minicart-btn-cart {
    margin-bottom: 8px;
}

/* Header cart toggle button: dark grey with white text/icon. Overrides the
   theme's white "#cart > .btn" rule by matching the same selector + states
   (mobile-header.css loads after the theme stylesheet, so it wins on order). */
#cart > .btn,
#cart > .btn:hover,
#cart > .btn:focus,
#cart > .btn:active,
#cart.open > .btn,
#cart.open > .btn:hover,
#cart.open > .btn:focus {
    background: var(--cart-btn-bg, #333333);
    color: var(--cart-btn-text, #ffffff);
    border: 0;
    text-shadow: none;
}