/* =========================================================
   BEST MENU SECTION
========================================================= */

.coffee-menu-section{

    position:relative;

    width:100%;

    padding:
        74px 0
        70px;

    background:
        #f7f1eb;

    overflow:hidden;

}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.coffee-menu-section::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-260px;
    top:-280px;

    border-radius:50%;

    background:
        rgba(166,123,88,.045);

    pointer-events:none;

}


.coffee-menu-section::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    right:-220px;
    bottom:-230px;

    border-radius:50%;

    background:
        rgba(166,123,88,.04);

    pointer-events:none;

}


/* =========================================================
   CONTAINER
========================================================= */

.coffee-menu-container{

    position:relative;

    z-index:2;

    width:
        calc(100% - 80px);

    max-width:1320px;

    margin:0 auto;

}


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

.coffee-menu-header{

    position:relative;

    text-align:center;

    margin-bottom:31px;

}


/* =========================================================
   SMALL TITLE
========================================================= */

.coffee-menu-eyebrow{

    display:block;

    margin-bottom:7px;

    color:#a57b5c;

    font-size:10px;

    line-height:1;

    font-weight:700;

    letter-spacing:
        1.5px;

}


/* =========================================================
   MAIN TITLE
========================================================= */

.coffee-menu-title{

    margin:0;

    color:#3c2b22;

    font-size:24px;

    line-height:1.3;

    font-weight:700;

    letter-spacing:-1.3px;

}


/* =========================================================
   SUBTITLE
========================================================= */

.coffee-menu-subtitle{

    margin-top:9px;

    color:#988c84;

    font-size:11px;

    line-height:1.6;

}


/* =========================================================
   SLIDER WRAPPER
========================================================= */

.coffee-menu-slider-wrap{

    position:relative;

    width:100%;

}


/* =========================================================
   VIEWPORT
========================================================= */

.coffee-menu-viewport{

    position:relative;

    width:100%;

    overflow:hidden;

}


/* =========================================================
   TRACK
========================================================= */

.coffee-menu-track{

    display:flex;

    flex-wrap:nowrap;

    width:100%;

    transition:
        transform .65s
        cubic-bezier(.22,.61,.36,1);

    will-change:
        transform;

}


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

.coffee-menu-page{

    flex:
        0 0 100%;

    width:100%;

    display:grid;

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

    gap:7px;

}


/* =========================================================
   MENU CARD
========================================================= */

.coffee-menu-card{

    position:relative;

    min-width:0;

    height:235px;

    padding:
        14px 10px
        15px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    background:#fff;

    border:
        1px solid
        rgba(80,60,45,.035);

    border-radius:4px;

    overflow:hidden;

    cursor:pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


/* =========================================================
   CARD HOVER
========================================================= */

.coffee-menu-card:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 14px 30px
        rgba(91,65,45,.12);

}


/* =========================================================
   IMAGE AREA
========================================================= */

.coffee-menu-image{

    position:relative;

    width:100%;

    height:130px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


/* =========================================================
   MENU IMAGE
========================================================= */

.coffee-menu-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    mix-blend-mode:multiply;

    transform:
        scale(.93);

    transition:
        transform .45s
        cubic-bezier(.2,.7,.2,1);

}


.coffee-menu-card:hover
.coffee-menu-image img{

    transform:
        scale(1.04);

}


/* =========================================================
   CARD CONTENT
========================================================= */

.coffee-menu-info{

    width:100%;

    margin-top:5px;

    text-align:center;

}


/* =========================================================
   MENU NAME
========================================================= */

.coffee-menu-name{

    color:#3a2b23;

    font-size:18px;

    line-height:1.4;

    font-weight:700;

    letter-spacing:-.4px;

}


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

.coffee-menu-en{

    margin-top:3px;

    color:#aaa19b;

    font-size:13px;

    line-height:1.2;

    letter-spacing:.15px;

}


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

.coffee-menu-price{

    margin-top:8px;

    color:#75523c;

    font-size:16px;

    line-height:2;

    font-weight:700;

}


/* =========================================================
   ARROW BUTTON COMMON
========================================================= */

.coffee-menu-arrow{

    position:absolute;

    top:50%;

    z-index:20;

    width:42px;
    height:42px;

    margin-top:-21px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:
        1px solid
        rgba(91,67,50,.22);

    border-radius:50%;

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

    color:#5c4638;

    cursor:pointer;

    box-shadow:
        0 5px 18px
        rgba(75,54,40,.08);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        opacity .3s ease;

}


/* =========================================================
   LEFT
========================================================= */

.coffee-menu-prev{

    left:-21px;

}


/* =========================================================
   RIGHT
========================================================= */

.coffee-menu-next{

    right:-21px;

}


/* =========================================================
   ARROW HOVER
========================================================= */

.coffee-menu-arrow:hover{

    background:#684934;

    color:#fff;

    transform:
        scale(1.08);

}


/* =========================================================
   ARROW DISABLED
========================================================= */

.coffee-menu-arrow.disabled{

    opacity:.28;

    pointer-events:none;

}


/* =========================================================
   ARROW ICON
========================================================= */

.coffee-menu-arrow span{

    display:block;

    font-size:20px;

    font-weight:300;

    line-height:1;

}


/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

.coffee-menu-bottom{

    margin-top:27px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

}


/* =========================================================
   PAGINATION
========================================================= */

.coffee-menu-pagination{

    display:flex;

    align-items:center;

    gap:7px;

}


/* =========================================================
   PAGINATION DOT
========================================================= */

.coffee-menu-dot{

    width:6px;
    height:6px;

    padding:0;

    border-radius:50%;

    background:#d2c5bb;

    cursor:pointer;

    transition:
        width .3s ease,
        background .3s ease,
        border-radius .3s ease;

}


/* =========================================================
   ACTIVE DOT
========================================================= */

.coffee-menu-dot.active{

    width:30px;

    border-radius:10px;

    background:#76523c;

}


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

.coffee-menu-page-number{

    color:#9b9088;

    font-size:14px;

    letter-spacing:1px;

}


/* =========================================================
   ALL MENU BUTTON
========================================================= */

.coffee-menu-more{

    display:flex;

    align-items:center;

    justify-content:center;

    width:104px;

    height:34px;

    margin:
        24px auto 0;

    border:
        1px solid
        #b9aaa0;

    border-radius:2px;

    background:
        rgba(255,255,255,.25);

    color:#69584c;

    font-size:9px;

    font-weight:500;

    cursor:pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;

}


.coffee-menu-more:hover{

    border-color:#76523c;

    background:#76523c;

    color:#fff;

}


/* =========================================================
   CARD REVEAL
========================================================= */

.coffee-menu-card{

    border-radius: 20px;

    opacity:0;

    transform:
        translateY(20px);

}


.coffee-menu-section.visible
.coffee-menu-card{

    opacity:1;

    transform:
        translateY(0);

    transition:
        opacity .55s ease,
        transform .55s
        cubic-bezier(.2,.7,.2,1);

}


.coffee-menu-section.visible
.coffee-menu-card:nth-child(1){

    transition-delay:.05s;

}


.coffee-menu-section.visible
.coffee-menu-card:nth-child(2){

    transition-delay:.10s;

}


.coffee-menu-section.visible
.coffee-menu-card:nth-child(3){

    transition-delay:.15s;

}


.coffee-menu-section.visible
.coffee-menu-card:nth-child(4){

    transition-delay:.20s;

}


.coffee-menu-section.visible
.coffee-menu-card:nth-child(5){

    transition-delay:.25s;

}


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

@media(max-width:1000px){

    .coffee-menu-section{

        padding:
            65px 0
            65px;

    }


    .coffee-menu-container{

        width:
            calc(100% - 60px);

    }


    .coffee-menu-page{

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

        gap:8px;

    }


    .coffee-menu-card{

        height:235px;

    }


    .coffee-menu-image{

        height:130px;

    }


    .coffee-menu-prev{

        left:-18px;

    }


    .coffee-menu-next{

        right:-18px;

    }

}


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

@media(max-width:700px){

    .coffee-menu-section{

        padding:
            60px 0
            58px;

    }


    .coffee-menu-container{

        width:
            calc(100% - 34px);

    }


    .coffee-menu-header{

        margin-bottom:25px;

    }


    .coffee-menu-eyebrow{

        font-size:9px;

    }


    .coffee-menu-title{

        font-size:21px;

    }


    .coffee-menu-subtitle{

        font-size:10px;

    }


    .coffee-menu-page{

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

        gap:8px;

    }


    .coffee-menu-card{

        height:230px;
        border-radius: 20px;

        padding:
            12px 8px
            14px;

    }


    .coffee-menu-image{

        height:130px;

    }


    .coffee-menu-name{

        font-size:18px;

    }


    .coffee-menu-en{

        font-size:7px;

    }


    .coffee-menu-price{

        font-size:11px;

    }


    .coffee-menu-arrow{

        width:36px;
        height:36px;

        margin-top:-18px;

    }


    .coffee-menu-prev{

        left:-18px;

    }


    .coffee-menu-next{

        right:-18px;

    }


    .coffee-menu-arrow span{

        font-size:17px;

    }

}


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

@media(max-width:430px){

    .coffee-menu-container{

        width:
            calc(100% - 28px);

    }


    .coffee-menu-page{

        gap:6px;

    }


    .coffee-menu-card{

        height:190px;

        padding:
            9px 6px
            12px;

    }


    .coffee-menu-image{

        height:115px;

    }


    .coffee-menu-name{

        font-size:18px;

    }


    .coffee-menu-price{

        margin-top:7px;

        font-size:10px;

    }


    .coffee-menu-arrow{

        width:32px;
        height:32px;

        margin-top:-16px;

    }


    .coffee-menu-prev{

        left:-13px;

    }


    .coffee-menu-next{

        right:-13px;

    }


    .coffee-menu-bottom{

        margin-top:22px;

    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

    }

}