/* =========================================================
   DOLCI HANDS
   MENU
========================================================= */


/* =========================================================
   PAGINA
========================================================= */

.menu-page {

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
    115px 0 35px;

}


/* =========================================================
   INTRO DEL MENU
========================================================= */

.menu-intro {

    max-width:
        700px;

    margin:
        0 auto 25px;

    text-align:
        center;

}


.menu-intro .section-eyebrow {

    display:
        inline-block;

    margin-bottom:
        8px;

}


.menu-intro h1 {

    margin:
        0;

    color:
        var(--chocolate-deep);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            36px,
            4vw,
            48px
        );

    font-weight:
        400;

    line-height:
        1.08;

}


.menu-intro h1 span {

    display:
        block;

    color:
        var(--terracotta);

}


.menu-intro p {

    max-width:
        550px;

    margin:
        12px auto 0;

    color:
        var(--text-soft);

    font-size:
        10px;

    line-height:
        1.6;

}


/* =========================================================
   BUSCADOR
========================================================= */

.menu-tools {

    display:
        flex;

    justify-content:
        center;

    margin:
        0 auto 34px;

}


.menu-search {

    position:
        relative;

    width:
        min(
            520px,
            100%
        );

}


.menu-search-icon {

    position:
        absolute;

    top:
        50%;

    left:
        15px;

    z-index:
        2;

    transform:
        translateY(-50%);

    color:
        var(--text-soft);

    font-size:
        12px;

    pointer-events:
        none;

}


.menu-search input {

    width:
        100%;

    height:
        43px;

    box-sizing:
        border-box;

    padding:
        0 18px 0 39px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

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

    color:
        var(--chocolate);

    font-family:
        inherit;

    font-size:
        9px;

    outline:
        none;

    box-shadow:
        0 7px 20px
        rgba(
            74,
            44,
            35,
            .04
        );

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.menu-search input::placeholder {

    color:
        var(--text-soft);

}


.menu-search input:focus {

    border-color:
        var(--terracotta);

    box-shadow:
        0 0 0 3px
        rgba(
            184,
            111,
            91,
            .08
        );

}


/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */

.menu-catalog {

    display:
        grid;

    grid-template-columns:
        185px minmax(
            0,
            1fr
        );

    gap:
        30px;

    align-items:
        start;

}


/* =========================================================
   SIDEBAR
========================================================= */

.menu-sidebar {

    position:
        sticky;

    top:
        95px;

    padding:
        18px 15px;

    border:
        1px solid var(--border);

    border-radius:
        15px;

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

}


.menu-sidebar-header {

    padding:
        0 8px 14px;

    border-bottom:
        1px solid
        rgba(
            116,
            78,
            63,
            .12
        );

}


.menu-sidebar-header .section-eyebrow {

    display:
        block;

    margin-bottom:
        4px;

}


.menu-sidebar-header h2 {

    margin:
        0;

    color:
        var(--chocolate-deep);

    font-family:
        Georgia,
        serif;

    font-size:
        19px;

    font-weight:
        400;

}


/* =========================================================
   LISTA CATEGORIAS
========================================================= */

.menu-category-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    padding-top:
        10px;

}


.menu-category {

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    min-height:
        35px;

    padding:
        0 9px;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--text-soft);

    font-family:
        inherit;

    font-size:
        8px;

    font-weight:
        700;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background .2s ease,
        color .2s ease;

}


.menu-category:hover {

    background:
        rgba(
            184,
            111,
            91,
            .07
        );

    color:
        var(--terracotta);

}


.menu-category.active {

    background:
        rgba(
            184,
            111,
            91,
            .13
        );

    color:
        var(--terracotta);

}


.menu-category-dot {

    width:
        5px;

    height:
        5px;

    margin-right:
        8px;

    border:
        1px solid
        var(--terracotta);

    border-radius:
        50%;

    opacity:
        0;

    transition:
        opacity .2s ease;

}


.menu-category.active
.menu-category-dot {

    opacity:
        1;

}


/* =========================================================
   CONTENIDO CATALOGO
========================================================= */

.menu-catalog-content {

    min-width:
        0;

}


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

.menu-results-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        16px;

}


.menu-results-header h2 {

    margin:
        3px 0 2px;

    color:
        var(--chocolate-deep);

    font-family:
        Georgia,
        serif;

    font-size:
        25px;

    font-weight:
        400;

}


.menu-results-count {

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        8px;

}


/* =========================================================
   ORDENAR
========================================================= */

.menu-sort {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    white-space:
        nowrap;

}


.menu-sort span {

    color:
        var(--text-soft);

    font-size:
        8px;

}


.menu-sort select {

    min-height:
        33px;

    padding:
        0 28px 0 10px;

    border:
        1px solid var(--border);

    border-radius:
        8px;

    background:
        var(--white);

    color:
        var(--chocolate);

    font-family:
        inherit;

    font-size:
        8px;

    outline:
        none;

    cursor:
        pointer;

}


/* =========================================================
   GRID PRODUCTOS
========================================================= */

.menu-products-grid {

    display:
        grid;

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

    gap:
        14px;

}


/* =========================================================
   TARJETA
========================================================= */

.menu-product-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    border:
        1px solid var(--border);

    border-radius:
        14px;

    background:
        var(--white);

    box-shadow:
        0 7px 22px
        rgba(
            74,
            44,
            35,
            .04
        );

    overflow:
        visible;

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

}


.menu-product-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(
            184,
            111,
            91,
            .25
        );

    box-shadow:
        0 12px 28px
        rgba(
            74,
            44,
            35,
            .07
        );

}


/* =========================================================
   IMAGEN
========================================================= */

.menu-product-image {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / .78;

    border-radius:
        14px 14px 0 0;

    background:
        var(--cream);

    overflow:
        hidden;

}


.menu-product-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center;

    transition:
        transform .3s ease;

}


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

    transform:
        scale(1.015);

}


/* =========================================================
   PROXIMAMENTE - IMAGEN
========================================================= */

.menu-product-card-coming-soon
.menu-product-image img {

    filter:
        blur(9px);

    transform:
        scale(1.08);

}


.menu-product-card-coming-soon:hover
.menu-product-image img {

    transform:
        scale(1.08);

}


/* =========================================================
   BADGE PROXIMAMENTE
========================================================= */

.menu-product-coming-soon {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            55,
            35,
            29,
            .10
        );

}


.menu-product-coming-soon span {

    padding:
        6px 10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .8
        );

    border-radius:
        999px;

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

    color:
        var(--chocolate-deep);

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    box-shadow:
        0 5px 14px
        rgba(
            0,
            0,
            0,
            .06
        );

}


/* =========================================================
   CONTENIDO PRODUCTO
========================================================= */

.menu-product-content {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        14px 14px 12px;

}


.menu-product-category {

    margin-bottom:
        5px;

    color:
        var(--terracotta);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.menu-product-content h3 {

    margin:
        0;

    color:
        var(--chocolate-deep);

    font-family:
        Georgia,
        serif;

    font-size:
        20px;

    font-weight:
        400;

    line-height:
        1.2;

}


.menu-product-description {

    min-height:
        45px;

    margin:
        7px 0 10px;

    color:
        var(--text-soft);

    font-size:
        10px;

    line-height:
        1.55;

}



/* =========================================================
   PROXIMAMENTE - DESCRIPCIÓN
========================================================= */

.menu-product-card-coming-soon
.menu-product-description {

    filter:
        blur(4px);

    opacity:
        .75;

    user-select:
        none;

    pointer-events:
        none;

}


/* =========================================================
   PRECIO
========================================================= */

.menu-product-price {

    display:
        block;

    margin:
        0;

    color:
        var(--chocolate-deep);

    font-family:
        Georgia,
        serif;

    font-size:
        18px;

    font-weight:
        400;

}


/* =========================================================
   PROXIMAMENTE - PRECIO
========================================================= */

.menu-product-card-coming-soon
.menu-product-price {

    width:
        max-content;

    filter:
        blur(4px);

    opacity:
        .75;

    user-select:
        none;

    pointer-events:
        none;

}


/* =========================================================
   ACCIONES
========================================================= */

.menu-product-actions {

    display:
        flex;

    gap:
        7px;

    margin:
        0 0 10px;

    padding:
        0 14px;

}


.menu-product-actions .button {

    flex:
        1;

    min-height:
        36px;

    padding:
        0 10px;

    border-radius:
        8px;

    font-size:
        8px;

}


.menu-product-actions form {

    display:
        flex;

    flex:
        1;

    min-width:
        0;

}


.menu-product-actions form .button {

    width:
        100%;

}


.menu-product-actions >
.button {

    flex:
        1;

}


.menu-product-actions
.button[disabled] {

    width:
        100%;

    opacity:
        .65;

    cursor:
        not-allowed;

}

/* =========================================================
   ESTADO VACÍO
========================================================= */

.menu-empty {

    grid-column:
        1 / -1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        180px;

    padding:
        28px 25px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(
            184,
            111,
            91,
            .16
        );

    border-radius:
        18px;

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

    text-align:
        center;

}


.menu-empty > span,
.menu-no-results > span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    margin-bottom:
        11px;

    border-radius:
        50%;

    background:
        var(--terracotta-light);

    color:
        var(--terracotta);

}


.menu-empty h3,
.menu-no-results h3 {

    margin:
        0 0 7px;

    color:
        var(--chocolate-deep);

    font-family:
        Georgia,
        serif;

    font-size:
        20px;

    font-weight:
        400;

}


.menu-empty p,
.menu-no-results p {

    max-width:
        380px;

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        8px;

    line-height:
        1.6;

}


/* =========================================================
   SIN RESULTADOS
========================================================= */

.menu-no-results {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        250px;

    padding:
        30px;

    text-align:
        center;

}


.menu-no-results[hidden] {

    display:
        none;

}


.menu-no-results .button {

    margin-top:
        15px;

}


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

@media (max-width: 1050px) {

    .menu-products-grid {

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

    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 800px) {

    .menu-page {

        width:
            calc(
                100% - 32px
            );

        padding-top:
            100px;

    }


    .menu-catalog {

        grid-template-columns:
            155px minmax(
                0,
                1fr
            );

        gap:
            18px;

    }


    .menu-sidebar {

        padding:
            14px 10px;

    }


    .menu-category {

        font-size:
            7px;

    }


    .menu-product-actions {

        flex-direction:
            column;

    }


    .menu-product-actions .button {

        width:
            100%;

    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .menu-page {

        width:
            calc(
                100% - 24px
            );

        padding:
            90px 0 55px;

    }


    .menu-intro {

        margin-bottom:
            20px;

    }


    .menu-intro h1 {

        font-size:
            33px;

    }


    .menu-intro p {

        font-size:
            9px;

    }


    .menu-tools {

        margin-bottom:
            22px;

    }


    .menu-search {

        width:
            100%;

    }


    /*
       En móvil el sidebar deja de ser sidebar.
       Se convierte en una barra horizontal.
    */

    .menu-catalog {

        display:
            block;

    }


    .menu-sidebar {

        position:
            static;

        width:
            100%;

        box-sizing:
            border-box;

        margin-bottom:
            24px;

        padding:
            12px;

        border-radius:
            12px;

    }


    .menu-sidebar-header {

        display:
            none;

    }


    .menu-category-list {

        flex-direction:
            row;

        gap:
            6px;

        padding:
            0;

        overflow-x:
            auto;

        scrollbar-width:
            none;

    }


    .menu-category-list::-webkit-scrollbar {

        display:
            none;

    }


    .menu-category {

        flex:
            0 0 auto;

        width:
            auto;

        min-height:
            31px;

        padding:
            0 12px;

        border:
            1px solid
            var(--border);

        border-radius:
            999px;

        font-size:
            7px;

        white-space:
            nowrap;

    }


    .menu-category.active {

        border-color:
            var(--terracotta);

    }


    .menu-category-dot {

        display:
            none;

    }


    .menu-results-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;

    }


    .menu-results-header h2 {

        font-size:
            22px;

    }


    .menu-sort {

        width:
            100%;

        justify-content:
            space-between;

    }


    .menu-sort select {

        flex:
            1;

        max-width:
            190px;

    }


    .menu-products-grid {

        grid-template-columns:
            1fr;

        gap:
            13px;

    }


    .menu-product-image {

        aspect-ratio:
            1 / .68;

    }


    .menu-product-content h3 {

        font-size:
            18px;

    }


    .menu-product-description {

        font-size:
            8px;

    }


    .menu-product-price {

        font-size:
            16px;

    }


    .menu-product-actions {

        flex-direction:
            row;

    }

}


/* =========================================================
   MÓVIL MUY PEQUEÑO
========================================================= */

@media (max-width: 380px) {

    .menu-intro h1 {

        font-size:
            29px;

    }


    .menu-category {

        padding:
            0 10px;

    }


    .menu-product-actions {

        flex-direction:
            column;

    }


    .menu-product-actions .button {

        width:
            100%;

    }

}


/* =========================================================
   AJUSTE FINAL — CATEGORÍA SIN PRODUCTOS
========================================================= */

.menu-products-grid .menu-empty {

    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    min-height:
        0 !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        42px 25px !important;

    box-sizing:
        border-box;

    display:
    flex;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    text-align:
        center !important;

    border:
        1px solid
        rgba(
            184,
            111,
            91,
            .16
        ) !important;

    border-radius:
        18px !important;

    background:
        rgba(
            255,
            255,
            255,
            .42
        ) !important;

}


/* =========================================================
   ICONO
========================================================= */

.menu-products-grid .menu-empty > span {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        42px !important;

    height:
        42px !important;

    min-width:
        42px !important;

    margin:
        0 0 16px !important;

    padding:
        0 !important;

    box-sizing:
        border-box;

    border-radius:
        50% !important;

    background:
        #F4E2D3 !important;

    color:
        #B86F5B !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

}


/* =========================================================
   TÍTULO
========================================================= */

.menu-products-grid .menu-empty h3 {

    margin:
        0 0 8px !important;

    color:
        var(--chocolate-deep) !important;

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

    font-size:
        22px !important;

    font-weight:
        400 !important;

    line-height:
        1.3 !important;

    text-align:
        center !important;

}


/* =========================================================
   TEXTO
========================================================= */

.menu-products-grid .menu-empty p {

    max-width:
        420px !important;

    margin:
        0 !important;

    color:
        var(--text-soft) !important;

    font-size:
        11px !important;

    line-height:
        1.6 !important;

    text-align:
        center !important;

}


/* =========================================================
   DOLCI HANDS — ETIQUETA DE PROMOCIÓN EN PRODUCTOS
   MENÚ
========================================================= */

.menu-product-image {
    position: relative;
}

.menu-product-promotion-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 34px;
    padding: 7px 12px;

    background: #b96f61;
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;

    box-shadow:
        0 6px 16px rgba(70, 42, 34, 0.16);

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.menu-product-promotion-tag img {
    width: 33px !important;
    height: 33px !important;
    max-width: 33px !important;
    max-height: 33px !important;

    object-fit: contain;
    flex: 0 0 33px;
}

.menu-product-promotion-tag span {
    display: block;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .menu-product-promotion-tag {
        top: 10px;
        left: 10px;

        min-height: 31px;
        padding: 6px 10px;

        gap: 6px;

        font-size: 11px;
    }

    .menu-product-promotion-tag img {
        width: 33px !important;
        height: 33px !important;
        max-width: 33px !important;
        max-height: 33px !important;
        flex-basis: 33px;
    }

}


/* =========================================================
   DOLCI HANDS — PRECIO CON PROMOCIÓN
========================================================= */

.menu-product-price-discount {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.menu-product-price-original {
    color: #9a918d;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-weight: 500;
    font-size: 0.92em;
}

.menu-product-price-current {
    color: #b96f61;
    font-weight: 800;
    font-size: 1.08em;
}