/* =========================================================
   CARDÁPIO PÚBLICO
   DESIGN PREMIUM / LUXURY
========================================================= */

:root {
    --public-bg: #080808;
    --public-bg-soft: #101010;
    --public-card: #151515;
    --public-card-light: #1c1c1c;

    --public-gold: #c9a45c;
    --public-gold-light: #e5c982;
    --public-gold-dark: #8f6c2f;

    --public-white: #ffffff;
    --public-text: #f5f5f5;
    --public-muted: #999999;
    --public-border: rgba(201, 164, 92, .25);

    --public-radius: 24px;

    --public-shadow:
        0 30px 80px rgba(0, 0, 0, .65);

    --public-transition:
        all .35s cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   BASE
========================================================= */

.public-menu-page {
    width: 100%;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(201, 164, 92, .08),
            transparent 35%
        ),
        var(--public-bg);

    color: var(--public-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.public-menu-page *,
.public-menu-page *::before,
.public-menu-page *::after {
    box-sizing: border-box;
}


body.public-modal-open {
    overflow: hidden;
}


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

.public-container {
    width: min(
        1200px,
        calc(100% - 40px)
    );

    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.public-menu-hero {
    position: relative;

    min-height: 470px;

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

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.8)
        ),
        radial-gradient(
            circle at center,
            #29200f 0%,
            #0c0b09 40%,
            #050505 100%
        );

    border-bottom:
        1px solid
        rgba(201,164,92,.18);
}


.public-menu-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );
}


.public-menu-hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(201,164,92,.18),
            transparent 70%
        );

    filter: blur(30px);

    pointer-events: none;
}


.public-menu-hero-content {
    position: relative;

    z-index: 2;

    width: min(
        850px,
        calc(100% - 40px)
    );

    text-align: center;
}


.public-menu-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--public-gold-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .35em;
}


.public-menu-hero h1 {
    margin: 0;

    color: #ffffff;

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

    font-size:
        clamp(
            48px,
            8vw,
            88px
        );

    font-weight: 400;

    line-height: .95;

    letter-spacing: -.04em;
}


.public-menu-hero h1 strong {
    display: block;

    color: var(--public-gold-light);

    font-weight: 400;

    font-style: italic;
}


.public-menu-hero p {
    max-width: 580px;

    margin: 28px auto 0;

    color: #b8b8b8;

    font-size: 16px;

    line-height: 1.8;
}


.public-menu-hero-line {
    width: 70px;
    height: 1px;

    margin: 30px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--public-gold),
            transparent
        );
}


/* =========================================================
   TÍTULOS
========================================================= */

.public-section-heading {
    margin-bottom: 42px;
}


.public-section-heading > span {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--public-gold);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .25em;

    text-transform: uppercase;
}


.public-section-heading h2 {
    margin: 0;

    color: #ffffff;

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

    font-size: 42px;

    font-weight: 400;
}


.public-section-heading p {
    max-width: 620px;

    margin: 10px 0 0;

    color: var(--public-muted);

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   DESTAQUES
========================================================= */

.public-featured-section {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #090909,
            #101010
        );
}


.public-featured-grid {
    display: grid;

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

    gap: 24px;
}


.public-featured-card {
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1c1c1c,
            #101010
        );

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

    border-radius: var(--public-radius);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.35);

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


.public-featured-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(201,164,92,.45);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.55);
}


.public-featured-image {
    position: relative;

    height: 250px;

    overflow: hidden;

    background: #1b1b1b;
}


.public-featured-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s ease;
}


.public-featured-card:hover
.public-featured-image img {
    transform: scale(1.06);
}


.public-image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

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

    font-size: 54px;

    background:
        radial-gradient(
            circle,
            #2b2417,
            #111
        );
}


.public-featured-content {
    padding: 25px;
}


.public-product-category {
    color: var(--public-gold);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.public-featured-content h3 {
    margin: 8px 0 0;

    color: #ffffff;

    font-family:
        Georgia,
        serif;

    font-size: 23px;

    font-weight: 400;
}


.public-featured-content p {
    margin: 10px 0 18px;

    color: #929292;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   PREÇO
========================================================= */

.public-product-price {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.public-product-price small {
    color: #777;

    font-size: 12px;

    text-decoration: line-through;
}


.public-product-price strong {
    color: var(--public-gold-light);

    font-size: 20px;

    font-weight: 700;
}


/* =========================================================
   ÁREA DAS CATEGORIAS
========================================================= */

.public-menu-main {
    padding: 100px 0 120px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(201,164,92,.055),
            transparent 40%
        ),
        #080808;
}


.public-categories-heading {
    text-align: center;
}


.public-categories-heading p {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   GRID DE CATEGORIAS
========================================================= */

.public-category-grid {
    display: grid;

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

    gap: 26px;
}


/* =========================================================
   CARD DA CATEGORIA
========================================================= */

.public-category-card {
    position: relative;

    min-height: 330px;
}


.public-category-card-trigger {
    position: relative;

    width: 100%;
    height: 330px;

    padding: 35px;

    overflow: hidden;

    text-align: left;

    cursor: pointer;

    color: inherit;

    border:
        1px solid
        rgba(201,164,92,.18);

    border-radius:
        var(--public-radius);

    background:
        linear-gradient(
            145deg,
            #1d1a15,
            #0e0e0e
        );

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.35);

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


.public-category-card-trigger:hover {
    transform:
        translateY(-10px)
        perspective(900px)
        rotateX(2deg);

    border-color:
        rgba(201,164,92,.65);

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.65),
        0 0 40px
        rgba(201,164,92,.08);
}


.public-category-card-background {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(201,164,92,.14),
            transparent 35%
        );

    pointer-events: none;
}


.public-category-card-content {
    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.public-category-number {
    color: #5f5a50;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .15em;
}


.public-category-icon {
    width: 64px;
    height: 64px;

    display: flex;

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

    margin: 20px 0;

    border:
        1px solid
        rgba(201,164,92,.3);

    border-radius: 50%;

    background:
        rgba(201,164,92,.05);

    font-size: 27px;

    box-shadow:
        0 0 35px
        rgba(201,164,92,.08);
}


.public-category-card h3 {
    margin: 0;

    color: #ffffff;

    font-family:
        Georgia,
        serif;

    font-size: 30px;

    font-weight: 400;
}


.public-category-card p {
    margin: 8px 0 0;

    color: #8f8f8f;

    font-size: 13px;

    line-height: 1.5;

    max-width: 360px;
}


.public-category-footer {
    display: flex;

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

    margin-top: auto;
    padding-top: 25px;

    color: #777;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .12em;
}


.public-category-arrow {
    color: var(--public-gold);

    font-size: 22px;

    transition:
        transform .3s ease;
}


.public-category-card-trigger:hover
.public-category-arrow {
    transform:
        translateX(7px);
}


/* =========================================================
   MODAL
========================================================= */

.public-category-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

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

    padding: 30px;

    animation:
        publicModalFade .3s ease;
}


@keyframes publicModalFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


.public-category-modal[hidden] {
    display: none;
}


/* =========================================================
   FUNDO DO MODAL
========================================================= */

.public-category-modal-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.86);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/* =========================================================
   JANELA DO CARDÁPIO
========================================================= */

.public-category-modal-dialog {
    position: relative;

    z-index: 2;

    width:
        min(
            1000px,
            100%
        );

    max-height:
        min(
            850px,
            calc(100vh - 60px)
        );

    overflow: hidden;

    display: flex;

    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            #1a1815,
            #0c0c0c
        );

    border:
        1px solid
        rgba(201,164,92,.38);

    border-radius:
        28px;

    box-shadow:
        0 50px 120px
        rgba(0,0,0,.85),
        0 0 80px
        rgba(201,164,92,.06);

    animation:
        publicModalOpen .4s
        cubic-bezier(.2,.8,.2,1);
}


@keyframes publicModalOpen {

    from {
        opacity: 0;

        transform:
            translateY(30px)
            scale(.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   CABEÇALHO DO MODAL
========================================================= */

.public-category-modal-header {
    flex: 0 0 auto;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;

    padding:
        35px
        40px
        25px;
}


.public-modal-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: var(--public-gold);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .3em;
}


.public-category-modal-header h2 {
    margin: 0;

    color: #ffffff;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            30px,
            5vw,
            48px
        );

    font-weight: 400;
}


.public-category-modal-header p {
    max-width: 600px;

    margin: 8px 0 0;

    color: #8f8f8f;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   BOTÃO FECHAR
========================================================= */

.public-category-close {
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    display: flex;

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

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

    border-radius: 50%;

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

    color: #ffffff;

    cursor: pointer;

    font-size: 27px;

    line-height: 1;

    transition:
        var(--public-transition);
}


.public-category-close:hover {
    color: var(--public-gold-light);

    border-color:
        rgba(201,164,92,.5);

    background:
        rgba(201,164,92,.08);

    transform:
        rotate(90deg);
}


/* =========================================================
   DIVISOR
========================================================= */

.public-modal-divider {
    flex: 0 0 auto;

    height: 1px;

    margin: 0 40px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,164,92,.45),
            transparent
        );
}


/* =========================================================
   LISTA DE PRODUTOS
========================================================= */

.public-products-list {
    flex: 1 1 auto;

    overflow-y: auto;

    padding:
        30px 40px
        40px;

    display: grid;

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

    gap: 18px;

    scrollbar-width: thin;

    scrollbar-color:
        var(--public-gold-dark)
        transparent;
}


.public-products-list::-webkit-scrollbar {
    width: 6px;
}


.public-products-list::-webkit-scrollbar-track {
    background: transparent;
}


.public-products-list::-webkit-scrollbar-thumb {
    background:
        var(--public-gold-dark);

    border-radius: 20px;
}


/* =========================================================
   CARD DO PRODUTO
========================================================= */

.public-product-card {
    display: grid;

    grid-template-columns:
        125px
        1fr;

    min-height: 150px;

    overflow: hidden;

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

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

    border-radius: 18px;

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


.public-product-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(201,164,92,.35);

    background:
        rgba(201,164,92,.035);
}


/* =========================================================
   IMAGEM DO PRODUTO
========================================================= */

.public-product-image {
    position: relative;

    width: 125px;
    height: 100%;

    min-height: 150px;

    overflow: hidden;

    background: #171717;
}


.public-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;
}


.public-product-card:hover
.public-product-image img {
    transform:
        scale(1.07);
}


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

.public-promotion-badge {
    position: absolute;

    top: 10px;
    left: 10px;

    padding:
        5px 9px;

    border-radius: 999px;

    background:
        var(--public-gold);

    color: #080808;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .1em;
}


/* =========================================================
   CONTEÚDO PRODUTO
========================================================= */

.public-product-content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding:
        20px;
}


.public-product-info h3 {
    margin: 0;

    color: #ffffff;

    font-family:
        Georgia,
        serif;

    font-size: 20px;

    font-weight: 400;
}


.public-product-info p {
    margin: 7px 0 0;

    color: #858585;

    font-size: 12px;

    line-height: 1.55;

    display:
        -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient:
        vertical;

    overflow: hidden;
}


/* =========================================================
   RODAPÉ PRODUTO
========================================================= */

.public-product-footer {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-top: 18px;
}


.public-product-order {
    border:
        1px solid
        var(--public-gold);

    padding:
        9px 15px;

    border-radius: 8px;

    background:
        transparent;

    color:
        var(--public-gold-light);

    cursor: pointer;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .12em;

    transition:
        var(--public-transition);
}


.public-product-order:hover {
    background:
        var(--public-gold);

    color:
        #080808;

    box-shadow:
        0 8px 25px
        rgba(201,164,92,.2);
}


/* =========================================================
   RODAPÉ MODAL
========================================================= */

.public-category-modal-footer {
    flex: 0 0 auto;

    display: flex;

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

    padding:
        15px 40px 20px;

    color: #555;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .14em;

    border-top:
        1px solid
        rgba(255,255,255,.05);
}


/* =========================================================
   VAZIO
========================================================= */

.public-menu-empty {
    padding: 100px 30px;

    text-align: center;

    border:
        1px solid
        rgba(201,164,92,.15);

    border-radius:
        var(--public-radius);

    background:
        rgba(255,255,255,.025);
}


.public-menu-empty-icon {
    margin-bottom: 20px;

    font-size: 55px;
}


.public-menu-empty h2 {
    margin: 0;

    color: #ffffff;

    font-family:
        Georgia,
        serif;

    font-size: 30px;

    font-weight: 400;
}


.public-menu-empty p {
    color: #777;

    font-size: 14px;
}


/* =========================================================
   RODAPÉ
========================================================= */

.public-menu-footer {
    padding: 55px 0;

    text-align: center;

    border-top:
        1px solid
        rgba(201,164,92,.12);

    background:
        #050505;
}


.public-menu-footer span {
    color:
        var(--public-gold);

    font-family:
        Georgia,
        serif;

    font-size: 20px;
}


.public-menu-footer p {
    margin: 8px 0 0;

    color: #555;

    font-size: 11px;

    letter-spacing: .08em;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 1000px) {

    .public-featured-grid,
    .public-category-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 760px) {

    .public-container {
        width:
            calc(100% - 28px);
    }


    .public-menu-hero {
        min-height: 400px;
    }


    .public-featured-section {
        padding: 65px 0;
    }


    .public-menu-main {
        padding:
            70px 0 80px;
    }


    .public-section-heading h2 {
        font-size: 34px;
    }


    .public-featured-grid,
    .public-category-grid {
        grid-template-columns: 1fr;
    }


    .public-category-card,
    .public-category-card-trigger {
        min-height: 300px;
        height: 300px;
    }


    /* MODAL MOBILE */

    .public-category-modal {
        padding: 10px;
    }


    .public-category-modal-dialog {
        width: 100%;

        max-height:
            calc(100vh - 20px);

        border-radius: 22px;
    }


    .public-category-modal-header {
        padding:
            25px 22px 20px;
    }


    .public-modal-divider {
        margin:
            0 22px;
    }


    .public-products-list {
        padding:
            20px 16px 30px;

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .public-category-modal-footer {
        padding:
            13px 22px 17px;
    }

}


@media (max-width: 520px) {

    .public-menu-hero h1 {
        font-size: 52px;
    }


    .public-menu-hero p {
        font-size: 14px;
    }


    .public-featured-image {
        height: 220px;
    }


    /* PRODUTO NO CELULAR */

    .public-product-card {
        grid-template-columns:
            105px
            1fr;

        min-height: 130px;
    }


    .public-product-image {
        width: 105px;

        min-height: 130px;
    }


    .public-product-content {
        padding: 15px;
    }


    .public-product-info h3 {
        font-size: 17px;
    }


    .public-product-info p {
        font-size: 11px;

        -webkit-line-clamp: 2;
    }


    .public-product-footer {
        margin-top: 12px;
    }


    .public-product-price strong {
        font-size: 17px;
    }


    .public-product-order {
        padding:
            8px 11px;

        font-size: 9px;
    }

}


@media (max-width: 380px) {

    .public-product-card {
        grid-template-columns:
            85px
            1fr;
    }


    .public-product-image {
        width: 85px;
    }


    .public-product-content {
        padding: 12px;
    }


    .public-product-info h3 {
        font-size: 15px;
    }


    .public-product-order {
        padding:
            7px 9px;
    }

}