/* Estrah's shared Safari-safe retail shell.
   Every public document uses this file so the page edge, header and shipping
   surface cannot drift between routes. */
:root{
  --estrah-shell-bg:#f2efe7;
  --estrah-nav-mobile:64px;
}
html{
  background-color:var(--estrah-shell-bg)!important;
}
html::before{
  content:none!important;
  display:none!important;
}
body{
  padding-top:0!important;
  background-color:var(--estrah-shell-bg)!important;
}
.site-header-shell{
  position:sticky;
  top:0;
  z-index:100;
  display:block;
  width:100%;
  margin:0;
  padding:0;
  isolation:isolate;
  background:var(--estrah-shell-bg);
  box-shadow:0 -100px 0 100px var(--estrah-shell-bg);
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
.site-header-safe-fill{
  display:block;
  width:100%;
  height:env(safe-area-inset-top,0px);
  min-height:env(safe-area-inset-top,0px);
  background:var(--estrah-shell-bg);
}
.site-header-shell>.nav{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  z-index:1!important;
  width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
  isolation:auto!important;
  overflow:visible!important;
  contain:none!important;
  background:var(--estrah-shell-bg)!important;
  background-color:var(--estrah-shell-bg)!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  -webkit-transform:none!important;
  transform:none!important;
  box-shadow:0 1px 0 rgba(15,14,11,.08)!important;
}
.site-header-shell>.nav::before,
.site-header-shell>.nav::after{
  content:none!important;
  display:none!important;
}
#estrah-shipping-strip{
  bottom:-2px!important;
  background:rgba(242,239,231,.88)!important;
  color:#0f0e0b!important;
  box-shadow:0 100px 0 100px var(--estrah-shell-bg)!important;
}
#estrah-shipping-strip strong,#estrah-shipping-strip span{color:inherit!important}
#estrah-shipping-strip::after{background:rgba(242,239,231,.88)!important}
@media(max-width:860px){
  input,select,textarea{font-size:16px!important}
  .size-opt,.color-opt,.quick-shop-sizes button{min-width:44px;min-height:44px}
  .pdp-info p,.acc-content,.fit-confidence span{overflow-wrap:break-word}
  .pdp-gallery-dots{flex-wrap:wrap;justify-content:center}
  .mobile-purchase{gap:8px}
}
@media(max-width:860px){
  :root{
    --retail-nav-content-height:var(--estrah-nav-mobile);
    --retail-nav-height:calc(var(--estrah-nav-mobile) + env(safe-area-inset-top,0px));
  }
  html{scroll-padding-top:var(--retail-nav-height)!important}
  .site-header-shell{min-height:var(--retail-nav-height)}
  .site-header-shell>#nav{
    height:var(--retail-nav-content-height)!important;
    min-height:var(--retail-nav-content-height)!important;
  }
  .site-header-shell>#nav>.nav-inner{
    height:var(--retail-nav-content-height)!important;
    min-height:var(--retail-nav-content-height)!important;
  }
  .site-header-shell .mobile-menu{
    top:var(--retail-nav-height)!important;
  }
  .nav-scrim{inset:var(--retail-nav-height) 0 0!important}
}
@media(max-width:600px){
  .mobile-purchase{
    left:-2px!important;
    right:-2px!important;
    bottom:-2px!important;
    margin:0!important;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
    background:var(--estrah-shell-bg)!important;
    box-sizing:border-box!important;
    box-shadow:0 100px 0 100px var(--estrah-shell-bg)!important;
  }
}
@media(min-width:861px){
  .site-header-safe-fill{display:none}
}


/* Phone menu: keep the sticky shell anchored at the user's current position.
   The opaque panel owns the remaining viewport, so no tinted page shows through. */
@media(max-width:860px){
  html.mobile-nav-open,body.mobile-nav-open{overflow:hidden!important;overscroll-behavior:none!important}
  .site-header-shell{transform:none!important;-webkit-transform:none!important}
  .site-header-shell .mobile-menu{
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:0;
    max-height:0!important;
    padding:0;
    overflow:hidden!important;
    background:#fbf9f4!important;
    box-shadow:none!important;
    transition:height .28s ease,max-height .28s ease!important;
  }
  .site-header-shell .mobile-menu.open{
    height:calc(100vh - var(--retail-nav-height));
    height:calc(100dvh - var(--retail-nav-height));
    max-height:calc(100vh - var(--retail-nav-height))!important;
    max-height:calc(100dvh - var(--retail-nav-height))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .site-header-shell .mobile-menu a{flex:0 0 auto;min-height:60px;padding:18px 24px}
  .nav-scrim{display:none!important}
  body.mobile-nav-open #estrah-shipping-strip{display:none!important}
}


/* Mobile viewport hardening: one layout viewport, one safe-area-aware shell. */
html,body{width:100%;max-width:100%;overflow-x:clip}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,svg,canvas{max-width:100%}
button,input,select,textarea{font:inherit}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
@media(max-width:860px){
  .site-header-shell{
    width:100vw;
    max-width:100%;
    top:0;
    padding:0;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .site-header-safe-fill{flex:0 0 env(safe-area-inset-top,0px)}
  .site-header-shell>#nav,
  .site-header-shell>#nav>.nav-inner{width:100%;max-width:100%;box-sizing:border-box}
  .site-header-shell>#nav>.nav-inner{
    padding-left:max(18px,env(safe-area-inset-left,0px));
    padding-right:max(18px,env(safe-area-inset-right,0px));
  }
  main,.page,.hero,.collection-hero,.shop-section,.materiality,.operation,.cert-block,.wholesale,.email-strip,.footer{
    max-width:100%;
    overflow-x:clip;
  }
  .pdp,.pdp-bc,.coll-grid-wrap,.filter-bar,.cart-page,.co-page,.conf-page{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .pdp-slides-container{
    display:flex;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .pdp-slides-container::-webkit-scrollbar{display:none}
  .pdp-slide{flex:0 0 100%;min-width:100%;scroll-snap-align:start}
  .quick-shop{width:100%;max-width:100%;padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media(max-width:560px){
  .nav-wm{min-width:0;white-space:nowrap}
  .nav-right{min-width:0;gap:6px}
  .nav-cart{padding-inline:12px;min-width:0}
  .hero-content,.coll-hdr,.filter-bar,.coll-grid-wrap,.pdp,.pdp-bc,.cart-page,.co-page,.conf-page{
    padding-left:max(18px,env(safe-area-inset-left,0px))!important;
    padding-right:max(18px,env(safe-area-inset-right,0px))!important;
  }
  .pdp-main{width:100%;max-width:100%;overflow:hidden}
  .pdp-thumbs{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  .quick-shop-body{padding:24px 18px calc(28px + env(safe-area-inset-bottom,0px))}
  .quick-shop-trust{grid-template-columns:1fr}
  .mobile-purchase{padding-left:max(14px,env(safe-area-inset-left,0px))!important;padding-right:max(14px,env(safe-area-inset-right,0px))!important}
}