/* =========================================================
   CAMBANA ST.2004 RESTAURANT MENU
   ST60-STYLE CATEGORY
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.cb-menu.restaurant{
    min-height:100vh;

    color:#163d30;

    background:
        linear-gradient(
            180deg,
            #fffefb 0%,
            #faf6ee 55%,
            #f3ecdf 100%
        );
}


/* =========================================================
   HEADER
========================================================= */

.cb-menu.restaurant .cb-menu-head{
    position:sticky;

    top:0;

    z-index:100;

    min-height:86px;

    padding:
        10px 32px;

    display:grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:center;

    border-bottom:
        1px solid rgba(179,142,70,.22);

    background:
        rgba(255,253,248,.96);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    box-shadow:
        0 5px 22px rgba(71,49,13,.05);
}


/* =========================================================
   BRAND
========================================================= */

.cb-menu.restaurant .cb-brand{
    display:flex;

    align-items:center;

    gap:11px;
}

.cb-menu.restaurant .cb-brand img{
    width:60px;
    height:52px;

    object-fit:contain;
}

.cb-menu.restaurant .cb-brand-text{
    color:#154c38;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:19px;

    letter-spacing:1.7px;
}

.cb-menu.restaurant
.cb-brand-text small{
    display:block;

    margin-top:3px;

    color:#a07831;

    font-family:
        Arial,
        sans-serif;

    font-size:7px;

    font-weight:700;

    letter-spacing:1.4px;
}


/* =========================================================
   PAGE TITLE
========================================================= */

.cb-menu.restaurant .cb-menu-title{
    text-align:center;
}

.cb-menu.restaurant
.cb-menu-title > small{
    color:#b48a3c;

    font-size:8px;

    font-weight:700;

    letter-spacing:2.2px;
}

.cb-menu.restaurant
.cb-menu-title h1{
    margin:
        2px 0 0;

    color:#154a38;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:30px;

    font-weight:400;

    letter-spacing:1.3px;
}


/* =========================================================
   HEADER BUTTONS
========================================================= */

.cb-menu.restaurant
.cb-head-actions{
    display:flex;

    justify-content:flex-end;

    gap:9px;
}

.cb-menu.restaurant .cb-link{
    min-height:37px;

    padding:
        0 14px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    border:
        1px solid rgba(181,141,66,.32);

    border-radius:8px;

    background:#fff;

    color:#174a38;

    font-size:9px;

    font-weight:700;

    letter-spacing:.5px;

    cursor:pointer;

    transition:.22s ease;
}

.cb-menu.restaurant .cb-link:hover{
    color:#fff;

    border-color:#164b38;

    background:#164b38;
}

.cb-menu.restaurant .cb-count{
    min-width:20px;
    height:20px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #efd48d,
            #c4923d
        );

    color:#163729;

    font-size:8px;

    font-weight:800;
}


/* =========================================================
   CATEGORY AREA
========================================================= */

.cb-menu.restaurant
.cb-category-shell{
    width:100%;

    padding:
        14px 24px 12px;

    border-bottom:
        1px solid rgba(185,145,72,.17);

    background:
        #fffdf8;

    box-shadow:
        0 5px 18px rgba(71,48,12,.035);
}


/* =========================================================
   CATEGORY ROW
========================================================= */

.cb-menu.restaurant .cb-cats{
    width:
        min(1450px,100%);

    margin:
        0 auto;

    padding:
        3px 2px 8px;

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:8px;

    overflow-x:auto;

    border:0;

    scrollbar-width:none;
}

.cb-menu.restaurant
.cb-cats::-webkit-scrollbar{
    display:none;
}


/* =========================================================
   CATEGORY BUTTON
========================================================= */

.cb-menu.restaurant .cb-cat{
    position:relative;

    min-width:116px;

    min-height:94px;

    padding:
        10px 8px 9px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:7px;

    flex-shrink:0;

    border:
        1px solid rgba(188,151,82,.20);

    border-radius:14px;

    background:
        #ffffff;

    color:#33594c;

    cursor:pointer;

    box-shadow:
        0 4px 14px rgba(69,45,10,.04);

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.cb-menu.restaurant
.cb-cat:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(201,159,75,.58);

    box-shadow:
        0 9px 22px rgba(69,45,10,.09);
}


/* =========================================================
   CATEGORY PNG ICON
========================================================= */

.cb-category-icon-image{
    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;
}

.cb-category-icon-image img{
    width:80px;

    height:80px;

    display:block;

    object-fit:contain;

    object-position:center;

    transition:
        transform .22s ease,
        filter .22s ease;
}

.cb-menu.restaurant
.cb-cat:hover
.cb-category-icon-image img{
    transform:
        scale(1.06);
}


/* =========================================================
   CATEGORY ENGLISH
========================================================= */

.cb-menu.restaurant .cb-cat-en{
    display:block;

    color:#284d40;

    font-size:14px;

    font-weight:800;

    letter-spacing:.65px;

    line-height:1.2;

    text-align:center;

    text-transform:uppercase;

    white-space:nowrap;
}


/* =========================================================
   ACTIVE CATEGORY
========================================================= */

.cb-menu.restaurant
.cb-cat.active{
    border-color:#d6b266;

    background:
        linear-gradient(
            145deg,
            #185b43 0%,
            #0b402f 100%
        );

    box-shadow:
        0 9px 25px rgba(9,69,49,.23),
        inset 0 1px 0 rgba(255,255,255,.10);

    transform:
        translateY(-1px);
}

.cb-menu.restaurant
.cb-cat.active:after{
    content:"";

    position:absolute;

    left:50%;

    bottom:-7px;

    width:24px;

    height:3px;

    border-radius:8px;

    background:#deb75f;

    transform:
        translateX(-50%);
}

.cb-menu.restaurant
.cb-cat.active
.cb-cat-en{
    color:#fff;
}

.cb-menu.restaurant
.cb-cat.active
.cb-category-icon-image img{
    filter:
        brightness(1.10)
        drop-shadow(
            0 4px 7px rgba(0,0,0,.25)
        );
}


/* =========================================================
   BODY
========================================================= */

.cb-menu.restaurant .cb-body{
    width:
        min(1450px,100%);

    margin:
        0 auto;

    padding:
        25px 30px 90px;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.cb-section-heading{
    margin-bottom:22px;

    display:grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:center;

    gap:18px;
}

.cb-section-line{
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(190,147,66,.50)
        );
}

.cb-section-line:last-child{
    background:
        linear-gradient(
            90deg,
            rgba(190,147,66,.50),
            transparent
        );
}

.cb-section-center{
    text-align:center;
}

.cb-section-center small{
    display:block;

    color:#b68d42;

    font-size:7px;

    font-weight:700;

    letter-spacing:2px;
}

.cb-section-center h2{
    margin:
        4px 0 0;

    color:#164b38;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:24px;

    font-weight:400;

    letter-spacing:1px;
}


/* =========================================================
   FOOD GRID
========================================================= */

.cb-menu.restaurant .cb-food-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:17px;
}


/* =========================================================
   FOOD CARD
========================================================= */

.cb-menu.restaurant .cb-food{
    overflow:hidden;

    border:
        1px solid rgba(194,162,105,.28);

    border-radius:15px;

    background:#fff;

    box-shadow:
        0 7px 22px rgba(64,43,11,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.cb-menu.restaurant
.cb-food:hover{
    transform:
        translateY(-4px);

    box-shadow:
        0 14px 32px rgba(64,43,11,.11);
}

.cb-menu.restaurant
.cb-food img{
    width:100%;

    aspect-ratio:
        1.2 / 1;

    display:block;

    object-fit:cover;
}

.cb-menu.restaurant
.cb-food-info{
    padding:
        12px 13px 14px;
}

.cb-menu.restaurant
.cb-food-name{
    color:#163f31;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:15px;

    line-height:1.25;
}

.cb-menu.restaurant
.cb-price{
    color:#a5782c;

    font-size:18px;

    font-weight:800;
}

.cb-menu.restaurant
.cb-desc{
    color:#6b746f;

    font-size:9px;

    line-height:1.55;
}


/* =========================================================
   ADD BUTTON
========================================================= */

.cb-menu.restaurant
.cb-add{
    width:30px;

    height:30px;

    border:0;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #ecd185,
            #bc8632
        );

    color:#fff;

    cursor:pointer;

    box-shadow:
        0 5px 13px rgba(150,105,30,.24);
}


/* =========================================================
   FOOTER
========================================================= */

.cb-menu.restaurant .cb-footer{
    position:fixed;

    left:0;

    right:0;

    bottom:0;

    z-index:120;

    height:58px;

    padding:
        0 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-top:
        1px solid rgba(176,138,68,.18);

    background:
        rgba(255,253,248,.96);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 -5px 20px rgba(60,42,14,.05);
}

.cb-footer-home,
.cb-footer-cart{
    border:0;

    background:transparent;

    color:#164b38;

    font-size:10px;

    font-weight:700;

    cursor:pointer;
}

.cb-menu.restaurant
.cb-note{
    color:#888f8a;

    font-size:8px;

    letter-spacing:.5px;
}


/* =========================================================
   IPAD LANDSCAPE
========================================================= */

@media
(min-width:768px)
and
(max-width:1366px)
and
(orientation:landscape){

    .cb-menu.restaurant
    .cb-menu-head{
        min-height:72px;

        padding:
            8px 22px;
    }

    .cb-menu.restaurant
    .cb-brand img{
        width:49px;

        height:43px;
    }

    .cb-menu.restaurant
    .cb-brand-text{
        font-size:16px;
    }

    .cb-menu.restaurant
    .cb-menu-title h1{
        font-size:24px;
    }

    .cb-menu.restaurant
    .cb-category-shell{
        padding:
            10px 15px;
    }

    .cb-menu.restaurant
    .cb-cats{
        justify-content:flex-start;

        gap:6px;
    }

    .cb-menu.restaurant
    .cb-cat{
        min-width:96px;

        min-height:82px;

        padding:
            7px 6px;
    }

    .cb-category-icon-image{
        width:43px;

        height:43px;
    }

    .cb-category-icon-image img{
        width:40px;

        height:40px;
    }

    .cb-menu.restaurant
    .cb-cat-en{
        font-size:7px;
    }

    .cb-menu.restaurant .cb-body{
        padding:
            18px 22px 75px;
    }

    .cb-menu.restaurant
    .cb-food-grid{
        gap:11px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .cb-menu.restaurant
    .cb-food-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .cb-menu.restaurant
    .cb-menu-head{
        padding:
            8px 14px;

        grid-template-columns:
            auto 1fr;
    }

    .cb-menu.restaurant
    .cb-head-actions{
        display:none;
    }

    .cb-menu.restaurant
    .cb-brand-text{
        display:none;
    }

    .cb-menu.restaurant
    .cb-menu-title{
        text-align:right;
    }

    .cb-menu.restaurant
    .cb-category-shell{
        padding:
            9px 10px;
    }

    .cb-menu.restaurant
    .cb-cats{
        justify-content:flex-start;
    }

    .cb-menu.restaurant
    .cb-cat{
        min-width:92px;

        min-height:82px;
    }

    .cb-category-icon-image{
        width:42px;

        height:42px;
    }

    .cb-category-icon-image img{
        width:39px;

        height:39px;
    }

    .cb-menu.restaurant
    .cb-food-grid{
        grid-template-columns:
            1fr;
    }

    .cb-menu.restaurant
    .cb-footer{
        padding:
            0 15px;
    }

    .cb-menu.restaurant
    .cb-note{
        display:none;
    }

}
/* =============================================
   FOOD IMAGE
============================================= */

.cb-food-image{
    position:relative;
    overflow:hidden;
}

.cb-food-image img{
    width:100%;
    aspect-ratio:1.45 / 2;
    display:block;
    object-fit:cover;
}


/* =============================================
   FOOD ID
============================================= */

.cb-food-id{
    position:absolute;

    top:10px;
    left:10px;

    z-index:2;

    padding:5px 9px;

    border:1px solid rgba(236,209,133,.45);

    border-radius:30px;

    background:
        rgba(8,50,37,.90);

    color:#ecd185;

    font-size:12px;

    font-weight:800;

    letter-spacing:1px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.18);
}


/* =============================================
   KHMER NAME
============================================= */

.cb-food-name-kh{
    margin-bottom:3px;

    color:#9d762f;

    font-family:
        "Noto Sans Khmer",
        "Khmer OS Battambang",
        sans-serif;

    font-size:20px;

    font-weight:600;

    line-height:1.55;
}


/* =============================================
   ENGLISH NAME
============================================= */

.cb-food-name{
    color:#154738;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:18px;

    font-weight:600;

    line-height:1.28;
}


/* =============================================
   DESCRIPTION
============================================= */

.cb-food-description{
    margin-top:9px;
}


/* Khmer Description */

.cb-food-desc-kh{
    margin-bottom:5px;

    color:#4f625a;

    font-family:
        "Noto Sans Khmer",
        "Khmer OS Battambang",
        sans-serif;

    font-size:16px;

    line-height:1.7;
}


/* English Description */

.cb-food-desc-en{
    color:#818782;

    font-size:15px;

    line-height:1.55;
}


/* =============================================
   BOTTOM PRICE
============================================= */

.cb-food-bottom{
    margin-top:12px;

    padding-top:10px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-top:
        1px solid rgba(185,146,72,.13);
}


.cb-price{
    color:#a6772d;

    font-size:18px;

    font-weight:800;
}


/* =============================================
   ADD BUTTON
============================================= */

.cb-add{
    width:32px;
    height:32px;

    display:grid;

    place-items:center;

    border:0;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #efd68c,
            #bf8832
        );

    color:#fff;

    font-size:19px;

    cursor:pointer;

    box-shadow:
        0 5px 13px rgba(151,105,31,.25);
}


.cb-add:active{
    transform:scale(.94);
}