*{ margin: 0; padding: 0; box-sizing: border-box;}

body{
    height: 100dvh; overflow-y: auto; font-family: 'Rubik', sans-serif; color: white;
    --menu-bg: #222427;
}
a{ color: inherit;}

.menu-container{ width: 100%; min-height: 100%; background-color: #232526;}
.menu-container > div{ min-height: 100dvh; overflow: hidden; position: relative; padding: 20px 0; width: 100%; max-width: 500px; margin: 0 auto; background-color: var(--menu-bg); box-shadow: 0 0 25px 0 rgba(0, 0, 0, .5);}
.menu-container > div::before{ background-color: #727b87; filter: blur(70px); right: 20px; top: 50px; content: ''; display: inline-block; position: absolute; width: 50px; height: 50px;}
.menu-container > div header{ display: flex; align-items: center; padding: 0 15px;}
.menu-container > div header > div{ flex: 1;}
.menu-container > div header h1{ text-align: center; font-size: 20px; font-weight: 400;}
.menu-container > div header .back i{ font-size: 25px}
.menu-container > div .content{ padding: 20px 0 70px; gap: 25px; display: flex; flex-direction: column;}
.menu-container > div .content .category{}
.menu-container > div .content .category > strong{ font-size: 14px; font-weight: 500; letter-spacing: .5px; padding: 0 15px;}
.menu-container > div .content .category > strong.center{ display: block; text-align: center;}
.menu-container > div .content .category .products{ margin-top: 7px;}
.menu-container > div .content .category .products .swiper{ overflow: visible;}
.menu-container > div .content .category .products .swiper-slider{ padding: 0 15px;}
.menu-container > div .content .category .products .product{ color: #eee; height: 273px; background: linear-gradient(135deg, #1d1f22, #2c2f32); width: 100%; border: 1px solid #333539; border-radius: 5px; overflow: hidden; box-shadow: -2px 2px 15px rgba(0, 0, 0, .3);}
.menu-container > div .content .category .products .product .bg{ opacity: .05; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; z-index: 1;}
.menu-container > div .content .category .products .product > *{ position: relative; z-index: 2;}
.menu-container > div .content .category .products .product .front{ padding: 13px;}
.menu-container > div .content .category .products .product .front .img{ position: relative; height: 165px; width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; transition: all .15s ease;}
.menu-container > div .content .category .products .product .front .img span{ padding: 3px 10px; font-size: 10px; color: white; font-weight: 300; background: linear-gradient(225deg, #5b2203, #5e440b); position: absolute; right: 7px; top:  7px; border-radius: 50px; display: inline-block; transition: all .15s ease;}
.menu-container > div .content .category .products .product.active .front .img span{ top: 0; right: 0;}
.menu-container > div .content .category .products .product.active .front .img{ aspect-ratio: unset; height: 18px;}
.menu-container > div .content .category .products .product .front .img img{ width: 100%; height: 100%; object-fit: cover;}
.menu-container > div .content .category .products .product .front .detail{ display: flex; flex-direction: column; gap: 4px;}
.menu-container > div .content .category .products .product .front .detail strong{ font-size: 13px; font-weight: 400;}
.menu-container > div .content .category .products .product:not(.active):not(.no-img) .front .detail strong:not(.full){ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all;}
.menu-container > div .content .category .products .product .front .detail b{ font-size: 14px; font-weight: 500;}
.menu-container > div .content .category .products .product .front .detail b span{ margin-right: 3px;}
.menu-container > div .content .category .products .product .front .detail p{ font-size: 11px; font-weight: 300; letter-spacing: .5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4;}
.menu-container > div .content .category .products .product.active .front .detail p,
.menu-container > div .content .category .products .product.no-img .front .detail p{ display: inline-block; -webkit-line-clamp: unset; -webkit-box-orient: unset; overflow: unset;}

.menu-container > div .content .category .products .banner{ position: relative; border-radius: 10px; width: 100%; height: 180px; overflow: hidden;}
.menu-container > div .content .category .products .banner > img{ width: 100%; height: 100%; object-fit: cover;}
.menu-container > div .content .category .products .banner > div{ --spacing: 50px; padding: 5px 15px; background-color: rgba(0, 0, 0, .6); border-radius: 10px; color: white; border-radius: 10px; display: flex; gap: 7px; align-items: center; justify-content: center; flex-direction: column; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: calc(100% - var(--spacing)); width: calc(100% - var(--spacing));}
.menu-container > div .content .category .products .banner > div strong{ font-size: 20px; font-weight: 400; letter-spacing: .5px;}
.menu-container > div .content .category .products .banner > div span{ font-size: 17px; font-weight: 500;}
.menu-container > div .content .category .products .banner > div span span{ margin-right: 3px;}


.bottom-bar{ position: fixed; bottom: 0; width: 100%; max-width: 500px; left: 50%; transform: translateX(-50%); z-index: 10; padding: 15px; background-color: rgba(0, 0, 0, .6); backdrop-filter: blur(2px);}
.bottom-bar > a{ font-size: 15px; letter-spacing: .5px; font-weight: 400; width: 100%; background-color: #f72d15; padding: 9px 0; border-radius: 50px; text-align: center; display: inline-block; text-decoration: none;}


@media screen and (max-width: 500px) {
    .menu-container > div .content .category .products .product .front{ padding: 7px;}
    /* .menu-container > div .content .category .products .product{ overflow-y: auto;} */
    .menu-container > div .content .category .products .product{ height: 227px;}
    .menu-container > div .content .category .products .product .front .detail strong{ font-size: 11px;}
    .menu-container > div .content .category .products .product .front .detail b{ font-size: 12px;}
    .menu-container > div .content .category .products .product .front .detail p{ font-size: 9px; -webkit-line-clamp: 3;}
    .menu-container > div .content .category .products .product .front .img{ height: 130px;}
    
    .bottom-bar{ padding: 15px 10px;}
    .bottom-bar > a{ font-size: 14px;}
}