@font-face {
    font-family: 'The Mount Saint';
    src: url('fonts/TheMountSaintRegular.eot');
    src: url('fonts/TheMountSaintRegular.eot?#iefix') format('embedded-opentype'),
        url('fonts/TheMountSaintRegular.woff2') format('woff2'),
        url('fonts/TheMountSaintRegular.woff') format('woff'),
        url('fonts/TheMountSaintRegular.ttf') format('truetype'),
        url('fonts/TheMountSaintRegular.svg#TheMountSaintRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {
    /*--cocoa: #2b1a14;
    --cocoa2: #3b261e;
    --paper: #fbf2e4;
    --gold: #d1a46e;*/
    --cocoa-rgb: 43 26 20;
    --cocoa2-rgb: 59 38 30;
    --paper-rgb: 251 242 228;
    --gold-rgb: 209 164 110;
    --card: 0 10px 30px rgba(0,0,0,.25);
    --cardHover: 0 18px 40px rgba(0,0,0,.3);
    --creamemboss-rgb:251 242 228;
}

.ornate::before, .ornate::after{
    content:"";
    position:absolute;
    inset:auto;
    width:90px;
    height:90px;
    pointer-events:none;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
    opacity:.18;
    background:
        repeating-conic-gradient(from 0deg, #5b3a2b 0 6deg, #2a140e 6deg 12deg);
    border-radius: 28px;
    -webkit-mask:
        radial-gradient(110px 110px at 100% 0, transparent 60px, #000 61px)
        top left / 100% 100% no-repeat;
    mask:
        radial-gradient(110px 110px at 100% 0, transparent 60px, #000 61px)
        top left / 100% 100% no-repeat;
    transform: rotate(45deg);
}
.ornate::before{
    top:-22px;
    left:-22px;
}
.ornate::after{
    right:-22px;
    bottom:-22px;
    transform: rotate(225deg);
}

/* Cream title with warm gold offset shadow (like the reference “FOOD MENU”) */
.cream-emboss{
    color:#f6e5cd;
    text-shadow:
        0 0 0 #f6e5cd,            /* crisp */
        0.5px 1px 0 #d49e6e,      /* gold offset */
        0 10px 20px rgba(0,0,0,.35); /* depth */
}

/* Gold outline button */
.btn-outline{
    border:1.5px solid #d49e6e;
    color:#d49e6e;
    letter-spacing:.18em;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn-outline:hover{
    transform: translateY(-1px);
    box-shadow:0 8px 24px rgba(212,158,110,.25);
    background-color:rgba(212,158,110,.08);
}

/* Card background “leather” feel */
.panel{
    background:
        radial-gradient(800px 500px at 50% 20%, rgba(255,255,255,.05), transparent 55%),
        radial-gradient(600px 400px at 20% 80%, rgba(0,0,0,.35), transparent 60%),
        linear-gradient(180deg, #24110c 0%, #301910 60%, #22100b 100%);
}
:root{
    --brand-bg: #2b1a14;       /* deep cocoa like the PDF */
    --brand-paper: #fbf2e4;    /* warm paper */
    --brand-accent: #d1a46e;   /* gold */
    --ink: #2a2a2a;
}
body{
     background:radial-gradient(1100px 600px at 50% -200px, #3a241b 0%, #271710 60%, #1f130f 100%);
    /*background: linear-gradient(180deg, var(--brand-bg), #3b261e 55%, var(--brand-bg));*/
    min-height: 100vh;
    font-feature-settings:"ss01" on, "liga" on;
}

/* subtle pinstripes + vignette like hero */
body::before{
/*    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.025) 0px,
        rgba(255,255,255,0.025) 2px,
        transparent 2px,
        transparent 20px
        ),
        radial-gradient(65% 60% at 50% 10%, rgba(0,0,0,.18), transparent 70%);
    mix-blend-mode: normal;*/
}

/* Base DIONE gradient + vignette */
.bg-dione {
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(209,164,110,0.08), transparent 60%),
        linear-gradient(180deg, #2b1a14 0%, #1e1410 100%);
    color: #fbf2e4;
}

/* 1) Subtle dotted grid (lux, modern) */
.bg-dots {
    background-image:
        radial-gradient(rgba(255,255,255,0.06) 0.8px, transparent 0.9px),
        radial-gradient(rgba(255,255,255,0.03) 0.8px, transparent 0.9px),
        radial-gradient(60% 40% at 50% 0%, rgba(209,164,110,0.08), transparent 60%),
        linear-gradient(180deg, #2b1a14 0%, #1e1410 100%);
    background-size: 18px 18px, 18px 18px, auto, auto;
    background-position: 0 0, 9px 9px, center, center;
}

/* 2) Cross-hatch weave (linen feel) */
.bg-weave {
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(0deg,  rgba(0,0,0,0.20) 0 1px, transparent 1px 9px),
        radial-gradient(60% 40% at 50% 0%, rgba(209,164,110,0.08), transparent 60%),
        linear-gradient(180deg, #2b1a14 0%, #1e1410 100%);
    background-blend-mode: soft-light, normal, normal, normal;
}

/* 3) Sunburst rays from top (very faint, elegant) */
.bg-rays {
    background-image:
        radial-gradient(60% 40% at 50% 0%, rgba(209,164,110,0.08), transparent 60%),
        repeating-conic-gradient(from -8deg at 50% -120px,
        rgba(255,255,255,0.035) 0 10deg, transparent 10deg 20deg),
        linear-gradient(180deg, #2b1a14 0%, #1e1410 100%);
    background-blend-mode: normal, soft-light, normal;
}

/* 4) Clean (no pattern — just luxe gradient) */
.bg-clean {
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(209,164,110,0.09), transparent 60%),
        linear-gradient(180deg, #2b1a14 0%, #1e1410 100%);
}
.paper{
    background: var(--brand-paper);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    border: 1px solid rgba(0,0,0,.06);
}
.brand-title{
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--brand-accent);
    text-transform: uppercase;
}
.card.menu-card{
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.card.menu-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0,0,0,.25);
}
.badge-veg{
    background:#1f8b24 !important;
}
.badge-nonveg{
    background:#9c1a1a !important;
}
.price-chip{
    background:rgba(0,0,0,.05);
    padding:.25rem .5rem;
    border-radius:999px;
    font-weight:600;
}
.img-fit{
    width:100%;
    height: 180px;
    object-fit: cover;
}
.image-fallback{
    width:100%;
    height: 180px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
    color:#fff;
    letter-spacing:.08em;
}
.filter-toggle{
    display:none;
}
@media (max-width: 991px){
    .filters-canvas{
        position: sticky;
        top:0;
        z-index: 20;
        background: var(--brand-paper);
        border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .filter-toggle{
        display:inline-flex;
    }
}
/* Category scroll pills */
.cat-pills{
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
}
.cat-pills .btn{
    border-radius:999px;
    margin-right:.5rem;
}
.list-price dt{
    color:#6b5a45;
}
.list-price dd{
    margin-bottom:.5rem;
}

/**terms and conditions**/
 .t-a-c{
        background:radial-gradient(1100px 600px at 50% -200px, #3a241b 0%, #271710 60%, #1f130f 100%);
        /*color:#f3e8d8;*/
        /*font: 16px/1.65 "Josefin Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;*/
        /*letter-spacing:.2px;*/
    }
   .t-a-c .page{
        max-width:1200px;
        margin:0 auto;
        padding:64px 22px 96px
    }

    /* Brand */
   .t-a-c .brand{
        text-align:center;
        margin-bottom:36px
    }
    .t-a-c .brand h1{
        font-family:"Playfair Display", serif;
        font-weight:900;
        margin:0;
        font-size:42px;
        letter-spacing:.5px;
    }
   .t-a-c .brand .tag{
        margin-top:6px;
        font-size:12px;
        letter-spacing:3px;
        color:#cfbfa8;
    }

    /* Layout */
   .t-a-c .grid{
        display:grid;
        grid-template-columns: 260px 1fr;
        gap:56px;
    }
    @media (max-width: 992px){
       .t-a-c .grid{
            grid-template-columns: 1fr;
            gap:28px
        }
    }

    /* Sidebar – elegant text links */
   .t-a-c .side{
        border-right:1px solid rgba(255,255,255,.10);
        padding-right:24px;
        position:sticky;
        top:24px;
        align-self:start;
    }
    @media (max-width: 992px){
        .t-a-c .side{
            border-right:0;
            border-bottom:1px solid rgba(255,255,255,.10);
            padding-right:0;
            padding-bottom:12px
        }
    }
   .t-a-c .side h3{
        margin:.2rem 0 12px;
        font: 800 18px/1 "Playfair Display",serif;
        color:#d1a46e;
        letter-spacing:.4px;
    }
    .t-a-c .nav{
        margin:0;
        padding:0;
        list-style:none;
    }
   .t-a-c .nav a{
        display:block;
        padding:8px 0;
        color:#ebdfcb;
        text-decoration:none;
        font-weight:700;
        transition: color .2s ease;
        position:relative;
    }
    .t-a-c .nav a::before{
        content:"";
        position:absolute;
        left:-14px;
        top:50%;
        transform:translateY(-50%);
        width:2px;
        height:0;
        background:#d1a46e;
        transition: height .2s ease;
    }
   .t-a-c .nav a:hover{
        color:#fff
    }
    .t-a-c .nav a.active{
        color:#fff
    }
   .t-a-c .nav a.active::before{
        height:18px
    }

    /* Content */
    .t-a-c .content h2{
        font: 900 30px/1.25 "Playfair Display",serif;
        color:#f7efe4;
        margin:0 0 6px;
    }
    .t-a-c .content .badge{
        display:inline-block;
        margin:0 0 16px;
        padding:4px 8px;
        border:1px solid rgba(209,164,110,.55);
        color:#d1a46e;
        border-radius:999px;
        font-weight:700;
        font-size:12px;
        letter-spacing:.6px;
    }
    .t-a-c hr.hair{
        border:0;
        border-top:1px solid rgba(255,255,255,.10);
        margin:14px 0 18px
    }

    /* Sections – no boxes, just type */
    .t-a-c .tc{
        counter-reset: sec
    }
    .t-a-c .sec{
        margin:22px 0 26px
    }
    .t-a-c .sec-head{
        display:flex;
        gap:12px;
        align-items:baseline;
        margin-bottom:6px;
    }
    .t-a-c .sec-num{
        counter-increment: sec;
        font: 800 20px/1 "Playfair Display",serif;
        color:#d1a46e;
    }
   .t-a-c .sec-num::after{
        content: counter(sec) "."
    }
    .t-a-c .sec-title{
        margin:0;
        font-weight:800;
        font-size:18px;
        letter-spacing:.2px;
        color:#fff;
    }
    .t-a-c .sec p, .sec ul{
        margin:.35rem 0 0;
        color:#d8c8b1
    }
   .t-a-c .sec ul{
        padding-left:20px
    }
   .t-a-c .note{
        margin-top:18px;
        padding:12px 0;
        color:#e9dcc9;
        border-top:1px dashed rgba(209,164,110,.5);
        border-bottom:1px dashed rgba(209,164,110,.5)
    }