:root{

    --cream:#f8f4ee;
    --cream-dark:#efe8de;

    --olive:#5e6b4e;
    --olive-dark:#3f4934;

    --terracotta:#a35f47;
    --terracotta-hover:#8c4f3a;

    --dark:#1f1f1f;
    --gray:#666;
    --white:#ffffff;

    --container:1280px;

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

}

/* =====================
RESET
===================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    background:var(--cream);
    color:var(--dark);
    overflow-x:hidden;
    line-height:1.7;

}

img{
    display:block;
    width:100%;
}

a{
    text-decoration:none;
}

.container{

    width:min(92%,var(--container));
    margin:auto;

}

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

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    transition:.4s;

}

.header.scrolled{

    background:rgba(255,255,255,.97);
    backdrop-filter:blur(12px);

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}

.nav-container{

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

    height:90px;

}

.logo{

    display:flex;
    align-items:center;

}

.logo-img{

    height:34px;
    width:auto;
    max-width:150px;

    object-fit:contain;

    /* Sobre el hero se ve blanco; al hacer scroll recupera su color original */
    filter:brightness(0) invert(1);

    transition:filter .4s;

}

.header.scrolled .logo-img{
    filter:none;
}

.nav{

    display:flex;
    gap:42px;

}

.nav a{

    color:white;
    font-size:.95rem;
    letter-spacing:.5px;

    transition:.3s;

}

.header.scrolled .nav a{
    color:var(--dark);
}

.nav a:hover{

    color:var(--terracotta);

}

.menu-btn{

    display:none;

    border:none;
    background:none;

    font-size:2rem;
    cursor:pointer;

}

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

.hero{

    position:relative;

    height:100vh;

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

    text-align:center;

    background-image:url("images/hero.webp");

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

}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45)
    );

}

.hero-content{

    position:relative;
    z-index:5;

    max-width:900px;
    padding:0 20px;

    color:white;

}

.hero-subtitle{

    display:block;

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

    font-size:.9rem;

    margin-bottom:25px;

}

.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(4rem,8vw,7rem);

    line-height:.95;

    margin-bottom:30px;

}

.hero p{

    max-width:700px;

    margin:auto;
    margin-bottom:40px;

    font-size:1.15rem;

    opacity:.95;

}

.hero-buttons{

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;

}

/* =====================
BUTTONS
===================== */

.btn{

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

    min-width:220px;

    padding:18px 34px;

    border-radius:999px;

    transition:.35s;

    font-weight:600;

}

.btn-primary{

    background:var(--terracotta);
    color:white;

}

.btn-primary:hover{

    background:var(--terracotta-hover);
    transform:translateY(-3px);

}

.btn-secondary{

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

}

.btn-secondary:hover{

    background:white;
    color:var(--dark);

}

/* =====================
SECTIONS
===================== */

section{

    padding:130px 0;

}

.section-header{

    text-align:center;
    margin-bottom:80px;

}

.section-tag{

    display:inline-block;

    text-transform:uppercase;

    letter-spacing:3px;
    font-size:.8rem;

    color:var(--terracotta);

    margin-bottom:18px;

}

.section-header h2{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(3rem,5vw,4.8rem);

    line-height:1.05;

}

.light h2,
.light .section-tag{

    color:white;

}

/* =====================
STORY
===================== */

.story{

    background:white;

}

.story-grid{

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.story-image img{

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:24px;

    box-shadow:var(--shadow);

}

.story-content h2{

    font-family:'Cormorant Garamond',serif;

    font-size:4rem;
    line-height:1.05;

    margin-bottom:30px;

}

.story-content p{

    color:var(--gray);

    margin-bottom:20px;

}

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

.products{

    background:var(--cream-dark);

}

.products-grid{

    display:grid;

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

    gap:30px;

}

.product-card{

    background:white;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 15px 40px rgba(0,0,0,.05);

    transition:.4s;

}

.product-card:hover{

    transform:translateY(-10px);

}

.product-image{

    aspect-ratio:1/1;

    overflow:hidden;

}

.product-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-content{

    padding:30px;

}

.product-content h3{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    margin-bottom:10px;

}

.product-content p{

    color:var(--gray);

}

/* =====================
PROCESS
===================== */

.process{

    background:#1f1f1f;
    color:white;

}

.process-grid{

    display:grid;

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

    gap:40px;

}

.process-item{

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

    padding-top:30px;

}

.process-item span{

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    color:var(--terracotta);

}

.process-item h3{

    font-size:1.4rem;

    margin:15px 0;

}

.process-item p{

    color:#ccc;

}

/* =====================
GALERIA
===================== */

.gallery{

    background:var(--dark);

}

.gallery-grid{

    display:grid;

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

    gap:25px;

}

.gallery-grid img{

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:18px;

    transition:.5s;

    cursor:pointer;

}

.gallery-grid img:hover{

    transform:scale(1.03);

}

/* =====================
CTA
===================== */

.cta{

    text-align:center;

    background:
    linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.55)
    ),
    url("images/pastas_fondo.webp");

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

    color:white;

}

.cta h2{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(3rem,5vw,5rem);

    margin-bottom:20px;

}

.cta p{

    max-width:700px;

    margin:auto;
    margin-bottom:40px;

    opacity:.9;

}

.cta-buttons{

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;

}

.cta .btn-secondary{

    border-color:rgba(255,255,255,.5);

}

/* =====================
FOOTER
===================== */

.footer{

    background:#111;
    color:#999;

    text-align:center;

    padding:70px 0;

}

.footer-logo{

    width:140px;
    max-width:45%;
    height:auto;

    margin:0 auto 20px;

    /* Fondo del footer es oscuro: el logo se muestra en blanco */
    filter:brightness(0) invert(1);

}

.footer p{
    margin-bottom:6px;
}

.footer-credit{

    margin-top:30px;

    font-size:.8rem;
    opacity:.7;

}

.footer-credit a{

    color:#999;
    text-decoration:underline;
    text-underline-offset:3px;

    transition:color .3s ease;

}

.footer-credit a:hover{
    color:white;
}

/* =====================
ANIMACIONES
===================== */

.story,
.menu-section,
.gallery,
.location,
.cta{

    opacity:0;
    transform:translateY(60px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}

.visible{

    opacity:1 !important;
    transform:translateY(0) !important;

}

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

@media(max-width:1100px){

    .products-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:900px){

    .story-grid{
        grid-template-columns:1fr;
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .nav{
        display:none;
    }

    .menu-btn{
        display:block;
        color:white;
    }

    .header.scrolled .menu-btn{
        color:var(--dark);
    }

    .nav.mobile-open{

        display:flex;
        flex-direction:column;

        position:absolute;
        top:90px;
        left:0;
        width:100%;

        background:white;
        padding:30px 6%;
        gap:22px;

        box-shadow:0 15px 30px rgba(0,0,0,.08);

    }

    .nav.mobile-open a{
        color:var(--dark);
    }

}

@media(max-width:600px){

    .nav-container{
        height:74px;
    }

    .logo-img{
        height:26px;
        max-width:110px;
    }

    .nav.mobile-open{
        top:74px;
    }

}

@media(max-width:768px){

    section{
        padding:90px 0;
    }

    .products-grid{
        grid-template-columns:1fr;
    }

    .process-grid{
        grid-template-columns:1fr;
    }

    .gallery-grid{

        position:relative;

        display:block;

        aspect-ratio:1/1;

        border-radius:18px;
        overflow:hidden;

    }

    .gallery-grid img{

        position:absolute;
        inset:0;

        width:100%;
        height:100%;

        opacity:0;

        transition:opacity 1s ease;

        pointer-events:none;

    }

    .gallery-grid img.active{
        opacity:1;
        pointer-events:auto;
    }

    .hero h1{
        font-size:4rem;
    }

    .story-content h2{
        font-size:3rem;
    }

    .cta-buttons{
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }

    .cta-buttons .btn{
        width:100%;
        min-width:0;
    }

    .hero-buttons{
        width:100%;
        gap:16px;
    }

    .hero-buttons .btn{
        width:100%;
        min-width:0;
    }

}
/* =====================
CARTA / MENU DINÁMICO
===================== */

html{
    scroll-padding-top:90px;
}

.menu-section{

    background:var(--cream-dark);

}

/* ---- Tabs de Estado + Categoría (sticky, unificados) ---- */

.carta-tabs-wrapper{

    position:sticky;
    top:90px;
    z-index:50;

    display:flex;
    flex-direction:column;
    gap:12px;

    margin-bottom:50px;

    background:var(--cream-dark);
    padding:14px 0 12px;

}

.estado-tabs{

    display:flex;
    gap:10px;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;

    padding:2px;

}

.estado-tabs::-webkit-scrollbar{
    display:none;
}

.estado-tab{

    flex:0 0 auto;

    border:1.5px solid var(--dark);
    background:transparent;
    color:var(--dark);

    padding:12px 26px;

    border-radius:999px;

    font-size:.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    white-space:nowrap;

    cursor:pointer;

    transition:
    background .35s ease,
    color .35s ease,
    transform .25s ease;

}

.estado-tab:hover{
    transform:translateY(-2px);
}

.estado-tab.active{

    background:var(--dark);
    border-color:var(--dark);
    color:white;

}

.menu-tabs{

    display:flex;
    gap:10px;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;

    padding:4px 2px;

}

.menu-tabs::-webkit-scrollbar{
    display:none;
}

.menu-tab{

    flex:0 0 auto;

    border:1px solid rgba(31,31,31,.12);
    background:var(--white);
    color:var(--gray);

    padding:11px 22px;

    border-radius:999px;

    font-size:.88rem;
    font-weight:500;
    letter-spacing:.3px;
    white-space:nowrap;

    cursor:pointer;

    transition:
    background .35s ease,
    color .35s ease,
    border-color .35s ease,
    transform .25s ease;

}

.menu-tab:hover{
    transform:translateY(-2px);
}

.menu-tab.active{

    background:var(--olive);
    border-color:var(--olive);
    color:white;

}

/* ---- Lista de items: [imagen] [nombre/descripción] [precio/+] ---- */

.menu-list{

    display:flex;
    flex-direction:column;
    gap:14px;

    opacity:0;
    transform:translateY(14px);

    transition:
    opacity .5s ease,
    transform .5s ease;

}

.menu-list.fade-in{
    opacity:1;
    transform:translateY(0);
}

.menu-item{

    display:flex;
    align-items:center;
    gap:20px;

    width:100%;

    background:var(--white);
    border:none;

    padding:14px;

    border-radius:20px;

    box-shadow:0 8px 24px rgba(0,0,0,.04);

    cursor:pointer;
    text-align:left;
    font-family:inherit;

    transition:
    transform .3s ease,
    box-shadow .3s ease;

}

.menu-item:hover{

    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(0,0,0,.08);

}

.menu-item:active{
    transform:translateY(0) scale(.99);
}

.menu-item-image{

    flex:0 0 68px;
    width:68px;
    height:68px;

    border-radius:16px;
    overflow:hidden;

    background:var(--cream-dark);

}

.menu-item-image.img-broken,
.item-modal-image.img-broken,
.cart-line-image.img-broken{

    background:
    linear-gradient(135deg,var(--cream-dark) 0%,var(--cream) 100%);

}

.menu-item-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.menu-item-info{

    flex:1 1 auto;
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:4px;

}

.menu-item-name{

    font-family:'Cormorant Garamond',serif;
    font-size:1.35rem;
    font-weight:600;
    color:var(--dark);

}

.menu-item-desc{

    color:var(--gray);
    font-size:.85rem;
    line-height:1.5;

    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

}

.menu-item-action{

    flex:0 0 auto;

    display:flex;
    align-items:center;
    gap:12px;

}

.menu-item-price{

    font-size:.85rem;
    font-weight:600;
    color:var(--olive-dark);
    white-space:nowrap;

}

.menu-item-plus{

    flex:0 0 auto;

    width:34px;
    height:34px;

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

    border-radius:50%;

    background:var(--terracotta);
    color:white;

    font-size:1.2rem;
    line-height:1;

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

}

.menu-item:hover .menu-item-plus{

    background:var(--terracotta-hover);
    transform:rotate(90deg);

}

.menu-loading,
.menu-empty,
.menu-error{

    padding:40px 0;

    text-align:center;
    color:var(--gray);

}

/* ---- Popup / vista detallada ---- */

.item-modal{

    position:fixed;
    inset:0;
    z-index:2000;

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

    pointer-events:none;
    opacity:0;

    transition:opacity .35s ease;

}

.item-modal.open{

    pointer-events:auto;
    opacity:1;

}

.item-modal-backdrop{

    position:absolute;
    inset:0;

    background:rgba(20,18,14,.5);
    backdrop-filter:blur(4px);

}

.item-modal-sheet{

    position:relative;

    width:100%;
    max-width:480px;

    max-height:88vh;
    overflow-y:auto;

    background:var(--white);

    border-radius:28px 28px 0 0;

    transform:translateY(100%);
    transition:transform .45s cubic-bezier(.32,.72,0,1);

    padding-bottom:calc(30px + env(safe-area-inset-bottom));

}

.item-modal.open .item-modal-sheet{
    transform:translateY(0);
}

@media(min-width:640px){

    .item-modal{
        align-items:center;
    }

    .item-modal-sheet{

        border-radius:28px;
        transform:translateY(24px) scale(.96);

    }

    .item-modal.open .item-modal-sheet{
        transform:translateY(0) scale(1);
    }

}

.item-modal-close{

    position:absolute;
    top:16px;
    right:16px;
    z-index:5;

    width:38px;
    height:38px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.9);
    color:var(--dark);

    font-size:1rem;
    cursor:pointer;

    box-shadow:0 4px 14px rgba(0,0,0,.12);

}

.item-modal-image{

    width:100%;
    aspect-ratio:16/10;

    overflow:hidden;

    border-radius:28px 28px 0 0;

    background:var(--cream-dark);

}

.item-modal-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.item-modal-body{

    padding:26px 28px 0;

}

.item-modal-body h3{

    font-family:'Cormorant Garamond',serif;
    font-size:2rem;

    margin-bottom:12px;

}

.item-modal-body p{

    color:var(--gray);
    font-size:.95rem;
    line-height:1.7;

    margin-bottom:24px;

}

.price-options{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:28px;

}

.price-chip{

    flex:1 1 140px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:14px 18px;

    border:1.5px solid rgba(31,31,31,.12);
    border-radius:16px;

    background:var(--cream);

    font-size:.9rem;
    font-weight:600;
    color:var(--dark);

    cursor:pointer;

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

}

.price-chip:hover{
    transform:translateY(-2px);
}

.price-chip.active{

    border-color:var(--olive);
    background:var(--olive);
    color:white;

}

.item-modal-footer{

    display:flex;
    align-items:center;
    gap:16px;

}

.qty-stepper{

    display:flex;
    align-items:center;
    gap:16px;

    padding:8px 6px;

    border:1.5px solid rgba(31,31,31,.12);
    border-radius:999px;

}

.qty-stepper button{

    width:32px;
    height:32px;

    border:none;
    border-radius:50%;

    background:var(--cream-dark);
    color:var(--dark);

    font-size:1.1rem;
    cursor:pointer;

    transition:background .3s ease;

}

.qty-stepper button:hover{
    background:var(--olive);
    color:white;
}

.qty-stepper span{

    min-width:18px;
    text-align:center;

    font-weight:600;

}

.modal-add-btn{

    flex:1;
    min-width:0;

    padding:16px 20px;

}

/* ---- Carrito flotante ---- */

.cart-fab{

    position:fixed;
    right:24px;
    bottom:24px;
    z-index:1500;

    width:60px;
    height:60px;

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

    border:none;
    border-radius:50%;

    background:var(--terracotta);
    color:white;

    box-shadow:0 14px 34px rgba(163,95,71,.4);

    cursor:pointer;

    transform:scale(0);
    opacity:0;

    transition:
    transform .4s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s ease,
    background .3s ease;

    padding-bottom:env(safe-area-inset-bottom);

}

.cart-fab.show{
    transform:scale(1);
    opacity:1;
}

.cart-fab:hover{
    background:var(--terracotta-hover);
}

.cart-fab svg{
    width:26px;
    height:26px;
}

.cart-fab-badge{

    position:absolute;
    top:-4px;
    right:-4px;

    min-width:22px;
    height:22px;
    padding:0 5px;

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

    border-radius:999px;

    background:var(--olive-dark);
    color:white;

    font-size:.72rem;
    font-weight:700;

    border:2px solid var(--cream);

}

.cart-fab-badge.pop{
    animation:badgePop .45s cubic-bezier(.34,1.56,.64,1);
}

@keyframes badgePop{
    0%{transform:scale(1);}
    40%{transform:scale(1.5);}
    100%{transform:scale(1);}
}

/* ---- Drawer del carrito ---- */

.cart-drawer{

    position:fixed;
    inset:0;
    z-index:2100;

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

    pointer-events:none;
    opacity:0;

    transition:opacity .35s ease;

}

.cart-drawer.open{
    pointer-events:auto;
    opacity:1;
}

.cart-drawer-backdrop{

    position:absolute;
    inset:0;

    background:rgba(20,18,14,.5);
    backdrop-filter:blur(4px);

}

.cart-drawer-sheet{

    position:relative;

    width:100%;
    max-width:480px;
    max-height:80vh;

    display:flex;
    flex-direction:column;

    background:var(--white);

    border-radius:28px 28px 0 0;

    transform:translateY(100%);
    transition:transform .45s cubic-bezier(.32,.72,0,1);

    padding-bottom:env(safe-area-inset-bottom);

}

.cart-drawer.open .cart-drawer-sheet{
    transform:translateY(0);
}

@media(min-width:640px){

    .cart-drawer{
        align-items:center;
    }

    .cart-drawer-sheet{

        border-radius:28px;
        transform:translateY(24px) scale(.96);

    }

    .cart-drawer.open .cart-drawer-sheet{
        transform:translateY(0) scale(1);
    }

}

.cart-drawer-header{

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

    padding:26px 28px 10px;

}

.cart-drawer-header h3{

    font-family:'Cormorant Garamond',serif;
    font-size:1.7rem;

}

.cart-drawer-header button{

    width:36px;
    height:36px;

    border:none;
    border-radius:50%;

    background:var(--cream-dark);
    color:var(--dark);

    cursor:pointer;

}

.cart-drawer-items{

    flex:1;
    overflow-y:auto;

    padding:10px 28px;

    display:flex;
    flex-direction:column;
    gap:16px;

}

.cart-empty{

    padding:30px 0;
    text-align:center;
    color:var(--gray);

}

.cart-line{

    display:grid;
    grid-template-columns:48px 1fr auto auto;
    align-items:center;
    gap:14px;

}

.cart-line-image{

    width:48px;
    height:48px;

    border-radius:12px;
    overflow:hidden;

    background:var(--cream-dark);

}

.cart-line-image img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.cart-line-info{

    display:flex;
    flex-direction:column;
    min-width:0;

}

.cart-line-name{

    font-weight:600;
    font-size:.9rem;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

}

.cart-line-tipo{

    font-size:.78rem;
    color:var(--gray);

}

.cart-line-qty{

    display:flex;
    align-items:center;
    gap:8px;

    font-size:.85rem;

}

.cart-line-qty button{

    width:24px;
    height:24px;

    border:none;
    border-radius:50%;

    background:var(--cream-dark);
    color:var(--dark);

    cursor:pointer;

}

.cart-line-price{

    font-size:.85rem;
    font-weight:600;
    white-space:nowrap;

}

.cart-drawer-footer{

    padding:20px 28px calc(24px + env(safe-area-inset-bottom));

    border-top:1px solid rgba(31,31,31,.08);

}

.pickup-note{

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:18px;
    padding:14px 16px;

    border-radius:14px;

    background:var(--cream);
    color:var(--dark);

    font-size:.85rem;

}

.pickup-note strong{
    color:var(--olive-dark);
}

.cart-total{

    display:flex;
    justify-content:space-between;
    align-items:baseline;

    margin-bottom:16px;

    font-size:1rem;

}

.cart-total span:last-child{

    font-family:'Cormorant Garamond',serif;
    font-size:1.8rem;
    font-weight:600;
    color:var(--olive-dark);

}

.cart-whatsapp-btn{

    width:100%;
    min-width:0;

}

.cart-whatsapp-btn:disabled{

    opacity:.4;
    cursor:not-allowed;
    transform:none;

}

body.modal-open{
    overflow:hidden;
}

/* ---- Ubicación / Horarios / Instagram ---- */

.location{

    background:white;

}

.location-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;

    max-width:900px;
    margin:0 auto;
    justify-content:center;

}

.location-card{

    background:var(--cream);

    border-radius:24px;
    overflow:hidden;

    text-align:left;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    transition:transform .35s ease;

}

.location-card:hover{
    transform:translateY(-6px);
}

.location-card-image{

    aspect-ratio:16/10;

    overflow:hidden;

}

.location-card-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.location-card-body{

    position:relative;

    padding:34px 32px 36px;

}

.location-badge{

    display:inline-block;

    padding:6px 16px;

    margin-bottom:16px;

    border-radius:999px;

    background:var(--olive);
    color:white;

    font-size:.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;

}

.location-card h3{

    font-family:'Cormorant Garamond',serif;
    font-size:1.8rem;

    margin-bottom:10px;

}

.location-card p{

    color:var(--gray);
    font-size:.92rem;

    margin-bottom:4px;

}

.location-link{

    display:inline-block;

    margin-top:14px;

    color:var(--terracotta);
    font-weight:600;
    font-size:.9rem;

    transition:transform .3s ease;

}

.location-link:hover{

    color:var(--terracotta-hover);
    transform:translateX(4px);

}

/* =====================
RESPONSIVE - CARTA
===================== */

@media(max-width:900px){

    .location-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .menu-item{
        gap:14px;
        padding:12px;
    }

    .menu-item-image{
        flex-basis:56px;
        width:56px;
        height:56px;
    }

    .menu-item-name{
        font-size:1.15rem;
    }

    .cart-fab{
        right:18px;
        bottom:18px;
    }

}

@media(max-width:600px){

    html{
        scroll-padding-top:74px;
    }

    .carta-tabs-wrapper{
        top:74px;
    }

}