/* ===========================
   COMMISSION PREVIEW
=========================== */

.commission-preview {

    display:flex;

    justify-content:center;

    padding:70px 40px;

    animation:
        cardPop .45s cubic-bezier(.34,1.56,.64,1);

}



/* ===========================
   WOOD MENU BACKING
=========================== */

.commission-menu {

    width:min(650px, 90%);

    padding:45px;

    background:#7A5031;

    border-radius:28px;

    position:relative;

    overflow:hidden;



    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.04) 5px,
            transparent 12px,
            rgba(0,0,0,.06) 20px
        );

}



/* ===========================
   PAPER INSERT
=========================== */

.commission-menu::before {

    content:"";

    position:absolute;

    inset:20px;

    background:#FFF8E6;

    border-radius:22px;

    z-index:0;

}



.menu-title,
.menu-subtitle,
.menu-list {

    position:relative;

    z-index:1;

}



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

.menu-title {

    text-align:center;

    margin-top:10px;

    font-family:var(--heading-font);

    font-size:1.6rem;

    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:#5D3516;

}



.menu-title span {

    color:#B96A59;

}



.menu-subtitle {

    text-align:center;

    margin: 3px 0 40px;


    color:#80502B;

    font-size:.95rem;

}



/* ===========================
   MENU LIST
=========================== */

.menu-list {

    display:flex;

    flex-direction:column;

    gap:20px;

}



/* ===========================
   MENU ENTRY
=========================== */

.menu-entry {

    display:grid;

    grid-template-columns:120px 1fr 50px;

    gap:24px;

    align-items:center;

    padding:2px 10px;


    transition:.25s ease;

}


.menu-entry:hover {

    transform:translateX(4px);

}

.menu-entry.active .arrow-wrapper {

    transform:rotate(90deg);

}


/* IMAGE AREA */

.menu-thumbnail {

    position:relative;

}


.menu-image {

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:16px;

    border:4px solid #FFF8E6;

}

.menu-details p {
color: #80502B;
}

/* PRICE TAG */

.menu-price {

    position:absolute;

    top:-8px;

    left:-8px;


    background:#B96A59;

    color:#FFF8E6;


    padding:6px 12px;

    border-radius:999px;


    font-size:.8rem;

    font-weight:700;

    box-shadow:
        0 4px 10px rgba(0,0,0,.15);

}



/* ARROW */

.menu-action {

    display:flex;

    justify-content:center;

}


.arrow-wrapper {

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;

    background:#B96A59;

    transition:.25s ease, transform .3s ease;
        

}


.menu-arrow {

    width:18px;

    height:18px;

    filter:brightness(0) invert(1);

}


.menu-entry:hover .arrow-wrapper {

    transform:translateX(4px);


}

/* ===========================
   SUBMENU
=========================== */

.submenu {

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height .35s ease,
        opacity .25s ease;

}

.submenu.open {

    max-height: 800px;

    opacity: 1;

}



.submenu-grid {

    display:grid;

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

    gap:16px;

    margin:1px 0 12px;

    padding:18px;

    border-radius:18px;

}


.submenu-card {

    padding:14px;

    border-radius:14px;

    transition:.25s ease;

    cursor:pointer;

    text-align: center;

}

.submenu-card:hover {

    transform:translateY(-3px);

}

/* ===========================
   SUBMENU ITEMS
=========================== */

.submenu-item {

    padding: 14px;

    border-radius: 14px;

    cursor: pointer;

    transition: .25s ease;

}

.submenu-item:hover {

    transform: translateY(-2px);

}

.submenu-card img {

    width:120px;
    height:120px;

    object-fit:cover;

    border-radius:14px;

}


.submenu-card span {

    text-align:center;
    color: #80502B;
}