/* =========================================================
   FUMOT DIGITAL BOX 12000
   MOBILE FLAVOR UX V1

   Desktop:
   Existing flavor grid remains unchanged.

   Mobile:
   62 flavor cards become one horizontal swipe row.
========================================================= */


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

@media (max-width:767px){

    /*
     * 62 flavor wall -> horizontal product rail
     */

    .rt20-image-flavors{

        display:flex !important;

        grid-template-columns:
            none !important;

        width:
            auto !important;

        max-width:
            none !important;

        gap:
            10px !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        padding:
            2px 22px 12px 0 !important;

        margin-right:
            -12px !important;

        scroll-snap-type:
            x mandatory;

        overscroll-behavior-x:
            contain;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            none;
    }


    .rt20-image-flavors::-webkit-scrollbar{

        display:none;
    }


    /*
     * Roughly 2.2 cards visible.
     */

    .rt20-image-flavors
    .rt20-flavor-card{

        flex:
            0 0 min(42vw,154px) !important;

        width:
            min(42vw,154px) !important;

        min-width:
            min(42vw,154px) !important;

        max-width:
            154px !important;

        scroll-snap-align:
            start;

        border-radius:
            13px !important;

        cursor:
            pointer;

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


    .rt20-image-flavors
    .rt20-flavor-card img{

        display:block;

        width:
            100% !important;

        aspect-ratio:
            1 / 1 !important;

        object-fit:
            contain !important;

        padding:
            5px !important;
    }


    .rt20-image-flavors
    .rt20-flavor-card strong{

        display:block;

        min-height:
            38px;

        padding:
            7px 8px !important;

        font-size:
            10px !important;

        line-height:
            1.25 !important;
    }


    /*
     * Selected flavor feedback
     */

    .rt20-image-flavors
    .rt20-flavor-card.is-selected{

        border-color:
            #7a39d7 !important;

        box-shadow:
            0 0 0 2px
            rgba(122,57,215,.10);

        transform:
            translateY(-1px);
    }


    /*
     * Swipe instruction
     */

    .fumot-db12000-swipe-hint{

        display:flex;

        align-items:center;

        justify-content:
            space-between;

        gap:
            12px;

        margin:
            -5px 0 10px;

        color:
            #77747d;

        font-size:
            10px;

        line-height:
            1.3;

        font-weight:
            750;
    }


    .fumot-db12000-swipe-hint
    span:last-child{

        color:
            #6f39c8;

        white-space:
            nowrap;
    }

}


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

   Do not alter existing flavor wall.
========================================================= */

@media (min-width:768px){

    .fumot-db12000-swipe-hint{

        display:none !important;
    }

}