/* One sticky header on every page and every screen size.
   The theme used two different headers: on desktop a separate, smaller
   .sticky-header (logo + menu only) faded in after scrolling, while on
   tablet/mobile the full header stuck. Now the same .main-header stays
   pinned everywhere and the desktop clone is disabled. */

/* theme sets body height:100%, which stops sticky after one screen */
body {
    height: auto;
    min-height: 100%;
}

.main-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #ffffff;
    transition: box-shadow 0.3s ease;
}

.main-header.fixed-header {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* disable the theme's separate desktop sticky header */
.main-header .sticky-header,
.main-header.fixed-header .sticky-header {
    display: none !important;
}

/* Desktop: the dark top bar (address / email / pickup button, 60px) scrolls
   away and only the logo + menu + phone row stays pinned. */
@media only screen and (min-width: 1200px) {
    .main-header {
        top: -60px;
    }
}