/* v27: lock pure-white bottom nav and remove scroll-created empty area without changing the SVG curve */
:root{
  --ml-nav-h:74px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

html,
body{
  background:#fff !important;
}

/* The old body padding-bottom was creating the pale empty zone when the page scrolled near the end. */
body{
  padding-bottom:0 !important;
}

/* Let the shell size to real content instead of forcing a full viewport empty tail. */
.app-shell{
  min-height:auto !important;
  isolation:isolate !important;
}

/* Keep a small, controlled safe space only inside the content flow. */
.app-shell > main{
  padding-bottom:calc(var(--ml-nav-h) + 10px + var(--safe-bottom)) !important;
}

/* Footer should stay compact so it does not create a second blank band. */
.site-footer{
  position:relative !important;
  z-index:2 !important;
  background:#fff !important;
  margin:0 !important;
  padding:4px 16px 4px !important;
}

/* Real DOM white plate behind the nav. */
.ml-nav-solid-base{
  position:fixed !important;
  left:50% !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  width:100% !important;
  max-width:520px !important;
  height:calc(var(--ml-nav-h) + var(--safe-bottom)) !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  mix-blend-mode:normal !important;
  z-index:48 !important;
  pointer-events:none !important;
  box-shadow:none !important;
}

html body nav.bottom-nav.compact-nav.v5-nav,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav{
  position:fixed !important;
  left:50% !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  width:100% !important;
  max-width:520px !important;
  height:calc(var(--ml-nav-h) + var(--safe-bottom)) !important;
  min-height:calc(var(--ml-nav-h) + var(--safe-bottom)) !important;
  padding:8px 8px calc(6px + var(--safe-bottom)) !important;
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  align-items:center !important;
  gap:0 !important;
  overflow:visible !important;
  isolation:isolate !important;
  z-index:50 !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* kill old pseudo-layers */
html body nav.bottom-nav.compact-nav.v5-nav::before,
html body nav.bottom-nav.compact-nav.v5-nav::after,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav::before,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav::after{
  display:none !important;
  content:none !important;
  background:none !important;
  opacity:0 !important;
  box-shadow:none !important;
}

html body nav.bottom-nav.compact-nav.v5-nav .nav-curve-svg,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav .nav-curve-svg{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:-26px !important;
  width:100% !important;
  height:82px !important;
  z-index:1 !important;
  pointer-events:none !important;
  overflow:visible !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
  -webkit-filter:none !important;
}
html body nav.bottom-nav.compact-nav.v5-nav .nav-curve-svg path,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav .nav-curve-svg path{
  fill:#fff !important;
  fill-opacity:1 !important;
  opacity:1 !important;
  stroke:none !important;
}

html body nav.bottom-nav.compact-nav.v5-nav > a,
html body nav.bottom-nav.compact-nav.v5-nav > button,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav > a,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav > button{
  position:relative !important;
  z-index:3 !important;
  height:50px !important;
  min-height:50px !important;
  padding:3px 0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body nav.bottom-nav.compact-nav.v5-nav .nav-icon{
  width:22px !important;
  height:22px !important;
  color:#9a7b84 !important;
}
html body nav.bottom-nav.compact-nav.v5-nav .nav-icon svg{
  width:20px !important;
  height:20px !important;
  fill:currentColor !important;
}
html body nav.bottom-nav.compact-nav.v5-nav small{
  font-size:9.4px !important;
  line-height:1.1 !important;
}
html body nav.bottom-nav.compact-nav.v5-nav .nav-main{
  position:relative !important;
  z-index:4 !important;
  height:70px !important;
  min-height:70px !important;
  transform:translateY(-20px) !important;
  margin-top:0 !important;
  gap:5px !important;
  justify-content:flex-start !important;
}
html body nav.bottom-nav.compact-nav.v5-nav .nav-main .nav-logo,
html body nav.bottom-nav.compact-nav.v5-nav .nav-main span{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  border-radius:50% !important;
  background:#fff !important;
  border:1px solid rgba(244,204,215,.74) !important;
  outline:6px solid #fff !important;
  box-shadow:none !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
html body nav.bottom-nav.compact-nav.v5-nav .nav-main .nav-logo img,
html body nav.bottom-nav.compact-nav.v5-nav .nav-main span img{
  width:36px !important;
  height:36px !important;
  object-fit:contain !important;
}
html body nav.bottom-nav.compact-nav.v5-nav .nav-main small{
  font-size:11.4px !important;
  line-height:1.08 !important;
  color:#c7355f !important;
}

/* Hearts remain disabled */
.ml-heart-layer,.ml-floating-heart,.ml-floating-heart::before,.ml-floating-heart::after{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  content:none !important;
  pointer-events:none !important;
}

@media (max-width:360px){
  :root{--ml-nav-h:72px !important;}
  .app-shell > main{padding-bottom:calc(80px + var(--safe-bottom)) !important;}
  .ml-nav-solid-base{height:calc(72px + var(--safe-bottom)) !important;}
  html body nav.bottom-nav.compact-nav.v5-nav .nav-curve-svg{top:-24px !important;height:78px !important;}
  html body nav.bottom-nav.compact-nav.v5-nav .nav-main{transform:translateY(-18px) !important;}
  html body nav.bottom-nav.compact-nav.v5-nav .nav-main .nav-logo,
  html body nav.bottom-nav.compact-nav.v5-nav .nav-main span{width:46px !important;height:46px !important;min-width:46px !important;min-height:46px !important;}
  html body nav.bottom-nav.compact-nav.v5-nav .nav-main .nav-logo img,
  html body nav.bottom-nav.compact-nav.v5-nav .nav-main span img{width:34px !important;height:34px !important;}
}


/* v34: soft brand-pink bottom nav; v27 curve geometry and height are preserved */
:root{
  --ml-nav-bg:#fff2f6;
  --ml-nav-bg-2:#fff7fa;
}

/* Keep page spacing from v27; do NOT compact/hide the nav like v33. */
body{
  padding-bottom:0 !important;
}
.app-shell{
  min-height:auto !important;
}
.app-shell > main{
  padding-bottom:calc(var(--ml-nav-h) + 10px + var(--safe-bottom)) !important;
}

/* The solid base gets a very light organizational pink, so the nav separates from the page. */
html body .ml-nav-solid-base{
  background:var(--ml-nav-bg) !important;
  background-color:var(--ml-nav-bg) !important;
  background-image:none !important;
  opacity:1 !important;
  box-shadow:0 -10px 30px rgba(90, 30, 50, .085) !important;
}

/* Nav remains transparent because the real color comes from base + SVG. */
html body nav.bottom-nav.compact-nav.v5-nav,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav{
  background:transparent !important;
  background-color:transparent !important;
  border-top:1px solid rgba(199, 53, 95, .11) !important;
  box-shadow:none !important;
  height:calc(var(--ml-nav-h) + var(--safe-bottom)) !important;
  min-height:calc(var(--ml-nav-h) + var(--safe-bottom)) !important;
}

/* Do not change SVG path/position/height. Only repaint it to the same soft-pink plate. */
html body nav.bottom-nav.compact-nav.v5-nav .nav-curve-svg path,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav .nav-curve-svg path{
  fill:var(--ml-nav-bg) !important;
  fill-opacity:1 !important;
}

/* Soft separator above the curve. Geometry is unchanged. */
html body nav.bottom-nav.compact-nav.v5-nav .nav-curve-svg,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav .nav-curve-svg{
  filter:drop-shadow(0 -8px 22px rgba(85, 28, 48, .09)) !important;
  -webkit-filter:drop-shadow(0 -8px 22px rgba(85, 28, 48, .09)) !important;
}

/* Short fade above the nav for better separation from the page background. */
html body nav.bottom-nav.compact-nav.v5-nav::before,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:-22px !important;
  height:22px !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(255,242,246,0), rgba(255,242,246,.76) 70%, var(--ml-nav-bg) 100%) !important;
  opacity:1 !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}
html body nav.bottom-nav.compact-nav.v5-nav::after,
html body .app-shell nav.bottom-nav.compact-nav.v5-nav::after{
  display:none !important;
  content:none !important;
}

/* Keep the central order logo clean and separated on a white circle. */
html body nav.bottom-nav.compact-nav.v5-nav .nav-main .nav-logo,
html body nav.bottom-nav.compact-nav.v5-nav .nav-main span{
  background:#fff !important;
  outline:6px solid var(--ml-nav-bg) !important;
  border:1px solid rgba(199,53,95,.13) !important;
}

/* Menu item contrast on the new soft-pink nav. */
html body nav.bottom-nav.compact-nav.v5-nav > a:not(.nav-main),
html body nav.bottom-nav.compact-nav.v5-nav > button:not(.nav-main){
  color:#7f5a64 !important;
}
html body nav.bottom-nav.compact-nav.v5-nav .nav-icon{
  color:#9a6b76 !important;
}
html body nav.bottom-nav.compact-nav.v5-nav .nav-main small{
  color:#c7355f !important;
  font-weight:950 !important;
}

/* Ensure no old heart layer returns. */
.ml-heart-layer,.ml-floating-heart,.ml-order-heart{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}