/* ==========================================================================
   Mobile app bar, and the desktop sticky nav
   --------------------------------------------------------------------------
   Loaded after style.css and responsive.css, so it replaces the older
   .mobile-header / .mobile-search rules those files still carry.
   ========================================================================== */

:root {
    --mh-green: #0a6b3d;
    --mh-green-2: #0e8a4f;
    --mh-line: rgba(255, 255, 255, .16);
    --mh-ink: #ffffff;
    /* Slim enough not to eat the screen, tall enough for a 44px touch
       target once the buttons are inside it. */
    --mh-bar: 48px;
}

/* --------------------------------------------------------------------------
   Reconciling with the theme's own rules
   --------------------------------------------------------------------------
   style.css hides .mobile-header/.mobile-search outright and responsive.css
   switches them back on under 768px. Two consequences to settle here:

     * the bar has to be shown on tablets too, not only phones;
     * .mobile-search { display: block } beats the [hidden] attribute,
       which would leave the search sheet permanently open.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .mobile-header.sticky { display: block; }
    .main-header, .cat-nav { display: none !important; }
}
.mobile-header .mobile-search[hidden] { display: none !important; }

/* The delivery notice is a desktop line. On a phone it pushed the bar
   down the screen for a sentence nobody reads twice. */
@media (max-width: 991.98px) {
    .top-barhead { display: none !important; }
}

/* --------------------------------------------------------------------------
   Mobile app bar
   -------------------------------------------------------------------------- */
/* The wrapper is what sticks on a phone: sticky is confined to its parent,
   and .mobile-header sits inside <header id="navbar_top">. On a phone that
   header contains nothing else -- the notice line and the desktop rows are
   display:none -- so pinning the wrapper pins exactly the bar. */
@media (max-width: 991.98px) {
    #navbar_top { position: sticky; top: 0; z-index: 800; }
}

.mobile-header.sticky {
    position: static;   /* the wrapper above does the sticking */
    z-index: 800;
    background: linear-gradient(180deg, var(--mh-green-2), var(--mh-green));
    color: var(--mh-ink);
    box-shadow: 0 2px 10px rgba(15, 23, 42, .12);
}

.mbar {
    display: flex; align-items: center; gap: 6px;
    height: var(--mh-bar); padding: 0 6px;
}

.mbar-btn {
    flex: 0 0 auto; position: relative;
    width: 34px; height: 34px; padding: 0;
    display: inline-grid; place-items: center;
    border: 0; border-radius: 11px; cursor: pointer;
    background: rgba(255, 255, 255, .12);
    color: var(--mh-ink); font-size: 14px; text-decoration: none;
    transition: background .16s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.mbar-btn:hover, .mbar-btn:focus-visible { background: rgba(255, 255, 255, .22); color: var(--mh-ink); }
.mbar-btn:active { transform: scale(.94); }

.mbar-logo {
    flex: 1 1 auto; min-width: 0;
    /* Left-aligned, not centered: the action icons on the right are wider
       than the single menu button on the left, so centering in the space
       between them reads as pushed right instead of sitting next to the
       menu button. */
    display: flex; align-items: center; justify-content: flex-start;
    padding: 0 4px;
}
.mbar-logo img {
    /* Taller than the bar on purpose: the logo is the one thing that
       should read at a glance, and it has transparent padding of its
       own that would otherwise shrink it to nothing. */
    max-height: 44px; max-width: 100%; width: auto; object-fit: contain;
}

.mbar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

/* The badge sits on the cart button, and hides itself when the cart is empty
   -- an empty cart with a "0" pinned to it reads as an error. */
.mbar-cart .mobilecart-qty {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 999px;
    background: #ff5722; color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 1;
    border: 2px solid var(--mh-green);
}
.mbar-cart .mobilecart-qty:empty { display: none; }

/* -- the search sheet ------------------------------------------------------ */
.mobile-header .mobile-search {
    padding: 0 8px 10px;
    animation: mh-drop .18s ease;
}
@keyframes mh-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.mobile-header .mobile-search form {
    position: relative; display: flex; align-items: center; gap: 6px;
    background: #fff; border-radius: 11px; padding: 4px 4px 4px 34px;
}
.mobile-header .mobile-search form > i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 13px; pointer-events: none;
}
.mobile-header .mobile-search input {
    flex: 1; min-width: 0; height: 36px;
    border: 0; outline: 0; background: none;
    font-size: 14px; color: #0f172a;
}
.mobile-header .mobile-search input::placeholder { color: #94a3b8; }
.mobile-header .mobile-search button {
    flex: 0 0 auto; height: 36px; padding: 0 14px;
    border: 0; border-radius: 8px; cursor: pointer;
    background: var(--mh-green); color: #fff;
    font-size: 13px; font-weight: 700;
}

/* The live-search dropdown hangs under the sheet. */
.mobile-header .search_result {
    position: absolute; left: 8px; right: 8px; z-index: 5;
    max-height: 60vh; overflow-y: auto;
    background: #fff; border-radius: 12px;
    box-shadow: 0 18px 36px -12px rgba(15, 23, 42, .34);
}
.mobile-header .search_result:empty { display: none; }

/* --------------------------------------------------------------------------
   Desktop: only the green category bar sticks
   --------------------------------------------------------------------------
   The logo, search and account row scrolls away with the page; pinning all of
   it costs about a fifth of the screen on a laptop.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .cat-nav {
        position: sticky; top: 0; z-index: 700;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .14);
    }
    /* Only when the shop has chosen its own; otherwise the theme's own
       background stays exactly as it was. */
    .cat-nav[style*="--mh-green"] {
        background: linear-gradient(180deg, var(--mh-green-2), var(--mh-green));
        color: var(--mh-ink);
    }
}

/* The mobile bar is for phones and tablets only. */
@media (min-width: 992px) {
    .mobile-header.sticky { display: none; }
}