/* ==========================================================
   DINABLY MENU
   Mobile First
========================================================== */


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

.dm-category{
    margin-bottom:18px;
}


/* ---------- Category Header ---------- */

.dm-category-header{

    position:relative;

    width:100%;
    height:150px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    padding:0 24px;

    border:none;
    border-radius:18px;

    overflow:hidden;

    cursor:pointer;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    transition:transform .25s ease;

}

.dm-category-header:active{

    transform:scale(.98);

}


/* ---------- Overlay ---------- */

.dm-category-overlay{

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.30) 35%,
            rgba(0,0,0,.15) 65%,
            rgba(0,0,0,.08) 100%
        );

}


/* ---------- Category Title ---------- */

.dm-category-title{

    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    height:100%;

    font-family:Helvetica, Arial, sans-serif;
    font-size:32px;
    font-weight:900;
    line-height:1;

    color:#FFFFFF;

    text-transform:uppercase;
    letter-spacing:.4px;

    text-align:left;

}


/* ---------- Accordion ---------- */

.dm-category-content{

    display:grid;

    grid-template-rows:0fr;

    transition:grid-template-rows .35s ease;

}

.dm-category.open .dm-category-content{

    grid-template-rows:1fr;

}

.dm-category-products{

    overflow:hidden;

    display:flex;

    flex-direction:column;

    gap:18px;

    padding-top:16px;

    min-height:0;

}



/* ==========================================================
   PRODUCT CARD
========================================================== */

.dm-card{

    width:100%;

}


.dm-image{

    position:relative;

    overflow:hidden;

    border-radius:16px;

}


.dm-image img{

    display:block;

    width:100%;

    aspect-ratio:16 / 9;

    object-fit:cover;
    
    transition:transform .35s ease;

}


.dm-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    padding:18px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.92),
            rgba(0,0,0,.55),
            rgba(0,0,0,0)
        );

}


.dm-title{

    color:#fff;
    font-family:Helvetica, Arial, sans-serif;
    
    font-size:24px;
    font-weight:600;
    line-height:1.15;
    
}


.dm-price{

    color:#fff;
    font-family:Helvetica, Arial, sans-serif;
    
    font-size:24px;
    font-weight:600;
    line-height:1.15;
    white-space:nowrap;

}