/* LONGEVITY SHOP — CLEAN STICKY NAV REBUILD V8 */

.simple-category-shop{
  padding:0 0 7rem;
  overflow:visible !important; /* overrides global main{overflow:hidden}, required for position:sticky */
}

.simple-category-shop-section{
  padding-top:1.4rem;
}

.simple-featured-section,
.simple-product-section{
  margin-bottom:3.5rem;
}

.simple-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:.75rem;
  margin-bottom:1rem;
  border-bottom:1px solid rgba(0,0,0,.15);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.simple-featured-grid,
.simple-category-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
}

.shop-bootstrap-grid{
  display:none !important;
}

.simple-empty-category{
  padding:4rem 0;
  text-align:center;
  font-size:.8rem;
  opacity:.55;
}

/* ------------------------------------------------------------------
   SHOP NAV
   The global site header is already sticky and approximately 78px tall.
   This nav sticks directly underneath it and stays below the popup nav's
   stacking context. Product content naturally travels behind this opaque
   surface and disappears cleanly.
------------------------------------------------------------------ */
.simple-shop-topbar.sticky-shop-navigation{
  position:sticky !important;
  top:78px !important;
  z-index:100 !important; /* site header = 145, popup nav remains above this */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  min-height:46px;
  margin:0 0 2.2rem;
  padding:.45rem 0;
  background:#f6f6f2;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.12);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Extend the opaque surface edge-to-edge only behind the nav, without
   turning the visible UI into a giant floating bar. */
.simple-shop-topbar.sticky-shop-navigation::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:#f6f6f2;
  border-bottom:1px solid rgba(0,0,0,.12);
  pointer-events:none;
}

.simple-category-menu{
  display:flex;
  align-items:center;
  gap:.8rem;
  min-width:0;
  flex:1 1 auto;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.simple-category-menu::-webkit-scrollbar{
  display:none;
}

.simple-category-button{
  flex:0 0 auto;
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:.35rem 0;
  font:inherit;
  font-size:.68rem;
  line-height:1;
  cursor:pointer;
  opacity:.48;
  position:relative;
}

.simple-category-button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:#111;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}

.simple-category-button:hover,
.simple-category-button.is-active{
  opacity:1;
}

.simple-category-button.is-active::after{
  transform:scaleX(1);
}

.simple-shop-utilities{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.7rem;
  flex:0 0 auto;
  font-size:.66rem;
}

.simple-shop-utilities .shop-count{
  margin-right:.2rem;
  white-space:nowrap;
  opacity:.5;
}

.simple-shop-utilities .utility-pill{
  min-height:0;
  border:0;
  background:transparent;
  padding:.3rem 0;
  font-size:.66rem;
  line-height:1;
  cursor:pointer;
}

.simple-featured-section,
.simple-product-section{
  scroll-margin-top:138px;
}

/* PRODUCT CONTENT STAYS UNDER THE STICKY NAV */
#shop-featured-section,
#categorized-shop-sections{
  position:relative;
  z-index:1;
}

/* MOBILE */
@media(max-width:900px){
  .simple-category-shop-section{
    padding-top:.8rem;
  }

  .simple-shop-topbar.sticky-shop-navigation{
    top:78px !important;
    min-height:44px;
    gap:.7rem;
    margin-bottom:1.5rem;
    padding:.35rem 0;
  }

  .simple-category-menu{
    gap:.75rem;
  }

  .simple-category-button{
    padding:.38rem 0;
    font-size:.65rem;
  }

  .simple-shop-utilities{
    gap:.55rem;
  }

  .simple-shop-utilities .shop-count{
    display:none;
  }

  .simple-shop-utilities .utility-pill{
    font-size:.63rem;
  }

  .simple-featured-grid,
  .simple-category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .simple-featured-section,
  .simple-product-section{
    scroll-margin-top:130px;
  }
}

@media(max-width:520px){
  .simple-shop-topbar.sticky-shop-navigation{
    min-height:42px;
    margin-bottom:1.25rem;
  }

  .simple-category-menu{
    gap:.65rem;
  }

  .simple-category-button{
    font-size:.62rem;
  }

  .simple-shop-utilities{
    gap:.45rem;
  }

  .simple-shop-utilities .utility-pill{
    font-size:.6rem;
  }

  .simple-featured-section,
  .simple-product-section{
    margin-bottom:2.75rem;
  }
}


/* SHOP V9 — flush stacked header + shop navigation */
.simple-category-shop-section{
  padding-top:0 !important;
}

/* On Shop only, make the global header a solid masking surface so products
   disappear completely behind it while scrolling. */
#site-header .site-header,
#site-header .global-site-header{
  background:#f6f6f2 !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Shop navigation touches the main header with no visual gap. */
.simple-shop-topbar.sticky-shop-navigation{
  top:78px !important;
  margin-top:0 !important;
  background:#f6f6f2 !important;
}

/* Ensure the full strip beneath the controls is opaque across the viewport. */
.simple-shop-topbar.sticky-shop-navigation::before{
  top:0 !important;
  bottom:0 !important;
  background:#f6f6f2 !important;
}

/* Product areas always remain underneath the two navigation layers. */
#shop-featured-section,
#categorized-shop-sections,
.simple-featured-section,
.simple-product-section{
  position:relative;
  z-index:1 !important;
}

.simple-shop-topbar.sticky-shop-navigation{
  z-index:100 !important;
}

@media(max-width:900px){
  .simple-category-shop-section{
    padding-top:0 !important;
  }

  .simple-shop-topbar.sticky-shop-navigation{
    top:78px !important;
  }
}


/* SHOP V10 — make BOTH header layers sticky on Shop only */

/*
  Root cause:
  The visible .site-header is injected inside #site-header. A sticky child
  cannot remain sticky beyond the height of its own parent wrapper, so the
  entire main header was scrolling away. On Shop, make the OUTER wrapper the
  sticky element instead.
*/
#site-header{
  position:sticky !important;
  top:0 !important;
  z-index:145 !important;
  display:block;
  width:100%;
  background:#f6f6f2;
}

/* The outer wrapper now owns the sticky behavior. */
#site-header .site-header,
#site-header .global-site-header{
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
  background:#f6f6f2 !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Allow the Shop's sticky category nav to work inside main. */
.simple-category-shop{
  overflow:visible !important;
}

.simple-category-shop-section{
  padding-top:0 !important;
}

/* Second sticky layer, directly underneath the 78px site header. */
.simple-shop-topbar.sticky-shop-navigation{
  position:sticky !important;
  top:78px !important;
  z-index:100 !important;
  margin-top:0 !important;
  background:#f6f6f2 !important;
}

/* Full-width opaque mask behind Shop nav so cards vanish underneath it. */
.simple-shop-topbar.sticky-shop-navigation::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  transform:translateX(-50%);
  top:0 !important;
  bottom:0 !important;
  width:100vw;
  background:#f6f6f2 !important;
  pointer-events:none;
}

/* Product content is deliberately below both sticky navigation layers. */
#shop-featured-section,
#categorized-shop-sections,
.simple-featured-section,
.simple-product-section{
  position:relative;
  z-index:1 !important;
}

/* Popup navigation remains above everything. */
#site-header .site-nav{
  z-index:9999 !important;
}

@media(max-width:900px){
  #site-header{
    top:0 !important;
  }

  .simple-shop-topbar.sticky-shop-navigation{
    top:78px !important;
  }
}


/* =========================================================
   SHOP V11 — MOBILE FULL NAV
   All Shop navigation options remain visible on mobile.
   ========================================================= */

:root{
  --shop-header-height:78px;
}

/* Use the true rendered header height so there is never a mobile gap. */
.simple-shop-topbar.sticky-shop-navigation{
  top:var(--shop-header-height) !important;
}

@media(max-width:900px){
  /* Main site header remains the first sticky layer. */
  #site-header{
    position:sticky !important;
    top:0 !important;
    z-index:145 !important;
    background:#f6f6f2 !important;
  }

  /* Shop nav becomes a compact full-width control area directly underneath. */
  .simple-shop-topbar.sticky-shop-navigation{
    position:sticky !important;
    top:var(--shop-header-height) !important;
    z-index:100 !important;
    min-height:0 !important;
    padding:7px 0 8px !important;
    margin:0 0 18px !important;
    background:#f6f6f2 !important;
    border-bottom:1px solid rgba(0,0,0,.12) !important;
  }

  /* Categories wrap instead of horizontally scrolling so ALL options show. */
  .simple-category-menu{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:3px 6px !important;
    width:100% !important;
    overflow:visible !important;
    white-space:normal !important;
    flex:initial !important;
  }

  .simple-category-menu button,
  .simple-category-menu .simple-category-btn{
    width:100% !important;
    min-width:0 !important;
    min-height:32px !important;
    padding:5px 2px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    line-height:1.15 !important;
    font-size:.54rem !important;
    letter-spacing:.025em !important;
    border:0 !important;
  }

  .simple-category-menu button::after,
  .simple-category-menu .simple-category-btn::after{
    left:20% !important;
    right:20% !important;
  }

  /* Utilities move to their own clean row below categories. */
  .simple-shop-topbar.sticky-shop-navigation{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px !important;
  }

  .simple-shop-utilities{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
    min-height:30px !important;
    padding-top:4px !important;
    border-top:1px solid rgba(0,0,0,.06) !important;
  }

  .simple-shop-utilities button,
  .simple-shop-utilities a{
    min-height:30px !important;
    display:inline-flex !important;
    align-items:center !important;
  }

  /* The nav's background is fully opaque across viewport. */
  .simple-shop-topbar.sticky-shop-navigation::before{
    top:0 !important;
    bottom:0 !important;
    background:#f6f6f2 !important;
  }
}

@media(max-width:520px){
  .simple-category-menu{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:2px 4px !important;
  }

  .simple-category-menu button,
  .simple-category-menu .simple-category-btn{
    min-height:30px !important;
    padding:4px 1px !important;
    font-size:.50rem !important;
  }

  .simple-shop-topbar.sticky-shop-navigation{
    padding:6px 0 7px !important;
  }
}