/* ==========================================================================
   Mobile sticky header bar – shared across all themes (default, hemmy,
   vitvaruexperten, simplica). Active on phones and tablets up to 1200px.

   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.

   The breakpoint (<= 1200px) matches the themes' own header switch: the
   desktop logo/search/cart column layout only kicks in at 1201px and up.
   ========================================================================== */

/* Hidden on desktop – the bar only exists at 1200px and below. */
@media (min-width: 1201px) {
    #mobile-header-bar,
    #mobile-header-spacer {
        display: none !important;
    }
}

@media (max-width: 1200px) {
    /* The bar and logo live inside a centered .container, whose max-width
       shrinks below the viewport at sm/md. Keep the logo column full width so
       it doesn't collapse to the theme's col-md-3 (25%) between 992px and
       1200px. */
    header .row > div:first-child {
        float: none;
        width: 100%;
    }
    /* The full-bleed bar is exactly viewport-wide; suppress the sub-pixel
       horizontal scroll a vertical scrollbar would otherwise introduce. */
    body {
        overflow-x: hidden;
    }

    /* 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;
        /* Break the bar out of the centered .container to full viewport width
           so it spans edge to edge (matching the pinned/fixed state). */
        float: none;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        background: var(--mobile-bar-bg, #333);
        z-index: 1031;
    }

    /* Pinned to the top of the viewport once the logo has scrolled past.
       Fixed + left/right:0 already spans full width, so drop the breakout
       margins used by the in-flow state. */
    #mobile-header-bar.is-stuck {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        margin-left: 0;
        margin-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: 52px;
        padding: 0;
    }

    .mobile-header-btn {
        flex: 0 0 auto;
        height: 52px;
        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, 52px);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--menu-panel-top, 52px));
        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. The theme gives #cart
       a 10px top/bottom margin; drop it here so it doesn't inflate the bar
       (40px button + 20px margin = 60px) past the intended 52px height. */
    #mobile-cart-slot #cart {
        position: static;
        margin-top: 0;
        margin-bottom: 0;
    }
    #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, 52px));
        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;
}