/* Ellora mobile header normalization
   - Keeps the hamburger locked to the far right on every storefront page.
   - Converts the header to a compact sticky Back / Filter / Menu bar after scrolling.
   - Keeps the desktop header untouched. */

.ellora-mobile-back,
.ellora-mobile-filter{display:none}

@media (max-width:980px){
  /* Inner storefront pages */
  .shop-header{
    position:sticky !important;
    top:0 !important;
    z-index:2050 !important;
    background:rgba(255,255,255,.985) !important;
    border-bottom:1px solid rgba(18,22,28,.055);
    -webkit-backdrop-filter:blur(12px) saturate(145%);
    backdrop-filter:blur(12px) saturate(145%);
    transition:height .24s ease,padding .24s ease,border-color .24s ease;
  }

  /* Explicit grid placement fixes the hamburger sitting beside the logo. */
  .shop-header .header-row{
    grid-template-columns:max-content minmax(0,1fr) 44px !important;
  }
  .shop-header .shop-brand{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
  }
  .shop-header .shop-search{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
  }
  .shop-header .mobile-nav-btn{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    align-self:center !important;
    margin-left:auto !important;
  }

  /* The old black nav/contact row must scroll away. Only the white compact
     control bar stays sticky on mobile. */
  .shop-nav{
    position:relative !important;
    top:auto !important;
    z-index:2000 !important;
    box-shadow:none !important;
  }

  /* When the hamburger is opened after the black nav has already scrolled
     away, keep the navigation drawer attached to the visible sticky header. */
  .shop-nav.open .nav-links{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:var(--ellora-mobile-header-bottom,58px) !important;
    z-index:2200 !important;
    max-height:calc(100dvh - var(--ellora-mobile-header-bottom,58px)) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    box-shadow:0 18px 30px rgba(10,13,18,.16);
  }

  .ellora-mobile-back,
  .ellora-mobile-filter{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border:1px solid #e2e4e8;
    border-radius:9px;
    background:#fff;
    color:#15181d;
    padding:0;
    place-items:center;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    box-shadow:none;
  }
  .ellora-mobile-back svg,
  .ellora-mobile-filter svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .ellora-mobile-back:active,
  .ellora-mobile-filter:active{transform:scale(.94)}

  /* Compact sticky mode appears only after the user scrolls down. */
  body.ellora-mobile-condensed .shop-header{
    height:58px !important;
    min-height:58px !important;
    padding:7px 0 !important;
    border-bottom-color:#e7e8eb !important;
  }
  body.ellora-mobile-condensed .shop-header .header-row{
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
  }
  body.ellora-mobile-condensed .shop-header .shop-brand,
  body.ellora-mobile-condensed .shop-header .shop-search,
  body.ellora-mobile-condensed .shop-header .header-actions{
    display:none !important;
  }
  body.ellora-mobile-condensed .shop-header .ellora-mobile-back{
    display:grid !important;
    margin-right:auto !important;
  }
  body.ellora-mobile-condensed .shop-header .ellora-mobile-filter{
    display:grid !important;
    margin-left:auto !important;
  }
  body.ellora-mobile-condensed .shop-header .ellora-mobile-filter + .mobile-nav-btn{
    margin-left:0 !important;
  }
  body.ellora-mobile-condensed .shop-header .mobile-nav-btn{
    display:flex !important;
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    margin-left:auto !important;
    border-radius:8px !important;
  }

  html{scroll-padding-top:66px}
}

/* Home page has a different header component; apply the same compact behavior. */
@media (max-width:767px){
  .main-header-section .ellora-mobile-back,
  .main-header-section .ellora-mobile-filter{display:none}

  /* Force the home hamburger into the final/right-most grid column. */
  .main-header-section .header-mobile-menu{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    margin-left:auto !important;
  }

  body.ellora-mobile-condensed .main-header-section{
    height:58px !important;
    min-height:58px !important;
    padding:7px 0 !important;
    border-bottom:1px solid #e7e8eb !important;
  }
  body.ellora-mobile-condensed .main-header-section .main-header-inner{
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
  }
  body.ellora-mobile-condensed .main-header-section .brand-logo-wrap,
  body.ellora-mobile-condensed .main-header-section .search-field-wrapper,
  body.ellora-mobile-condensed .main-header-section .user-actions-group{
    display:none !important;
  }
  body.ellora-mobile-condensed .main-header-section .ellora-mobile-back{
    display:grid !important;
    margin-right:auto !important;
  }
  body.ellora-mobile-condensed .main-header-section .ellora-mobile-filter{
    display:grid !important;
    margin-left:auto !important;
  }
  body.ellora-mobile-condensed .main-header-section .header-mobile-menu{
    display:flex !important;
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    margin-left:auto !important;
  }
}

@media (max-width:390px){
  body.ellora-mobile-condensed .shop-header,
  body.ellora-mobile-condensed .main-header-section{
    height:56px !important;
    min-height:56px !important;
    padding:7px 0 !important;
  }
  body.ellora-mobile-condensed .shop-header .header-row,
  body.ellora-mobile-condensed .main-header-section .main-header-inner{height:42px !important}
  .ellora-mobile-back,
  .ellora-mobile-filter,
  body.ellora-mobile-condensed .shop-header .mobile-nav-btn,
  body.ellora-mobile-condensed .main-header-section .header-mobile-menu{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }
}

@media (max-width:980px){
  /* Filter drawer should sit above the sticky controls while open. */
  .filter-sidebar{z-index:2400 !important}
  .filter-backdrop{z-index:2350 !important}
}