.mobile-bottom-bar{
    display:none;
}


@media (max-width: 768px) {
    .mobile-bottom-bar {
        position:fixed;
        left:12px;
        right:12px;
        bottom:10px;
        height:66px;
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        align-items:center;
        background:rgba(255,255,255,.96);
        backdrop-filter:blur(12px);
        border:1px solid #e8edf3;
        border-radius:20px;
        box-shadow:0 10px 30px rgba(15,23,42,.10);
        z-index:3000;
    }

    .mobile-bottom-bar a {
        min-width:0;
        height:100%;
        text-align: center;
        text-decoration: none;
        color: #6b7280;
        font-size: 10.5px;
        font-weight:800;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 5px;
        padding:7px 4px 8px;
        overflow:hidden;
    }

    .mobile-bottom-bar i {
        display: block;
        font-size:21px;
        line-height: 1;
        transform:none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-bottom-bar a::after {
        content: '';
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 3px;
        background: linear-gradient(90deg, #ff5000, #ff8c42);
        border-radius: 2px;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-bottom-bar a.active {
        color: #ff5000;
    }

    .mobile-bottom-bar a.active i {
        transform: translateY(-1px) scale(1.08);
    }

    .mobile-bottom-bar a.active::after {
        width: 24px;
    }

    .mobile-bottom-bar a:hover {
        color: #ff5000;
    }

    .mobile-bottom-bar a:hover i {
        transform: translateY(-1px) scale(1.06);
    }

    body {
        padding-bottom: 70px;
    }
    .mobile-cart{
    position: relative;
}

.cart-badge{
    position:absolute;
    top:6px;
    right:calc(50% - 24px);
    background:#ff5000;
    color:#fff;
    font-size:11px;
    min-width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-weight:bold;
}


}

/* Bottom bar safe-area improvement — colors untouched */
@media (max-width: 768px){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .mobile-bottom-bar{
    bottom:calc(10px + env(safe-area-inset-bottom));
  }
  .mobile-bottom-bar a{
    min-width:44px;
    min-height:44px;
  }
}

/* Mobile navigation finish - colors preserved */
@keyframes bottomBarIn{
  from{opacity:0; transform:translateY(18px)}
  to{opacity:1; transform:translateY(0)}
}

@media (max-width:768px){
  .mobile-bottom-bar{
    animation:bottomBarIn .32s cubic-bezier(.22,1,.36,1) both;
  }

  .mobile-bottom-bar a p{
    max-width:100%;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobile-bottom-bar a:active i{
    transform:scale(.94);
  }

  .cart-badge{
    box-shadow:0 0 0 3px #fff;
  }
}

@media (max-width:380px){
  .mobile-bottom-bar{
    left:8px;
    right:8px;
    height:62px;
    border-radius:18px;
  }

  .mobile-bottom-bar i{
    font-size:19px;
  }

  .mobile-bottom-bar a{
    font-size:10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .mobile-bottom-bar{
    animation:none !important;
  }
}