.mobile-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid #eee;
z-index: 999;
padding: 8px 0;
padding-bottom: env(safe-area-inset-bottom, 8px);
}
.mobile-bottom-nav .mobile-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: #666;
text-decoration: none;
font-size: 11px;
}
.mobile-bottom-nav .mobile-nav-item svg {
width: 22px;
height: 22px;
}
.mobile-bottom-nav .mobile-nav-item.mobile-nav-line img {
height: 22px !important;
width: auto;
} .mobile-product-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid #eee;
z-index: 999;
align-items: stretch;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bar-icon {
width: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
color: #666;
text-decoration: none;
font-size: 10px;
padding: 8px 0;
background: #f5f5f5;
}
.mobile-bar-icon svg {
width: 18px;
height: 18px;
}
.mobile-bar-icon.mobile-bar-line {
background: #f5f5f5;
}
.mobile-bar-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 500;
color: #fff;
text-decoration: none;
}
.mobile-bar-cart {
background: #8b4513;
}
.mobile-bar-buy {
background: #c9a227;
}
@media (max-width: 768px) {
.mobile-bottom-nav {
display: flex;
}
body:not(.single-product) {
padding-bottom: 60px;
}
body.single-product .mobile-bottom-nav {
display: none;
}
body.single-product .mobile-product-bar {
display: flex;
}
body.single-product {
padding-bottom: 55px;
}
}
@media (min-width: 769px) {
.mobile-bottom-nav,
.mobile-product-bar {
display: none !important;
}
}