@font-face {
    font-family: 'Metropole Sans';
    src: url('../fonts/SFProDisplay-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Metropole Sans';
    src: url('../fonts/SFProDisplay-Bold.woff2') format('woff2');
    font-weight: 600 800;
    font-display: swap;
}
:root { color-scheme: dark; --site-gold: #e0b555; --site-text: #f6f3ec; --site-muted: #bbb5c4; }
html { scroll-padding-top: 24px; scrollbar-color: #a68c55 #17141c; }
body.site-page { margin: 0; background: #100e14; color: var(--site-text); font-family: 'Metropole Sans', sans-serif; font-size: 16px; line-height: 1.6; }
.site-page h1, .site-page h2, .site-page h3, .site-page h4, .site-page h5 { font-family: inherit; text-wrap: balance; }
.site-page p, .site-page a, .site-page button { font-family: inherit; }
.site-page img { max-width: 100%; }
.site-page main section { margin-bottom: 0; }
.site-page .container { width: 100%; max-width: 1160px; padding-right: 24px; padding-left: 24px; }
a, button { touch-action: manipulation; }
.site-page a { transition: color .15s, background-color .15s; }
.site-page :focus-visible { outline: 3px solid #f0c96a; outline-offset: 4px; }
.site-page main .text-dark { color: inherit !important; }
.site-page .wow { visibility: visible !important; animation: none !important; }
#header { background-image: url('../images/lounge-background.webp'); min-height: auto; margin: 0; background-position: center 40%; }
#header::after { background: linear-gradient(110deg, rgba(13, 10, 19, .92), rgba(13, 10, 19, .64)); pointer-events: none; }
.site-nav { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; min-height: 104px; gap: 24px; }
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { display: block; width: 66px; height: 66px; object-fit: contain; }
.site-nav-links { display: flex; align-items: center; gap: 8px; }
.site-nav-links a { padding: 10px 16px; color: #eee9f1; font-size: .95rem; border-radius: 8px; }
.site-nav-links a:hover, .site-nav-links a[aria-current] { color: var(--site-gold); background: #ffffff09; }
.site-nav-links a[aria-current] { text-decoration: underline !important; text-underline-offset: 8px; }
.site-menu-toggle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #ffffff45; border-radius: 50%; background: #211d27; color: #f6f3ec; font: inherit; font-size: 1.75rem; }
.site-nav > .site-menu-toggle { display: none; }
div#mobile-side-menu { width: min(360px, 90vw); min-width: 0; max-width: 100%; border: 1px solid #ffffff20; border-radius: 0 20px 20px 0; background: #17141c; color: var(--site-text); box-shadow: 0 10px 50px #0005; overscroll-behavior: contain; }
.offcanvas-header { padding: 22px; }
.mobile-menu-list { margin: 20px 0 0; gap: 8px; }
.mobile-menu-list a { width: 100%; margin: 0; padding: 12px 16px; color: #ddd6e4; border-radius: 8px; font-size: 1rem; }
.mobile-menu-list a:hover { background: #ffffff09; }
.mobile-menu-list a::after { display: none; }
.offcanvas-backdrop { background: #000 !important; }
.site-page .header-content { margin-top: 0; padding: 52px 0 76px; }
.site-page .header-content-wrapper { width: 800px; margin: 0; }
.site-page .header-content-wrapper h1 { margin: 14px 0 20px; font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: 1.07; letter-spacing: -.045em; font-weight: 700; color: #f6f3ec; }
.header-content-wrapper h1 span { color: var(--site-gold); }
.site-eyebrow { margin: 0; color: var(--site-gold); font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.site-lead { max-width: 540px; margin: 0; color: #d0c9d7; font-size: 1.15rem; line-height: 1.65; }
.site-page .header-content-wrapper > a { display: inline-flex; align-items: center; gap: 24px; min-height: 48px; padding: 12px 24px; margin-top: 28px; border-radius: 10px; background: var(--site-gold); color: #171109; font-size: 1rem; text-shadow: none; font-weight: 600; }
.site-page .header-content-wrapper > a:hover { background: #efc86e; }
.site-page .section-title h2 { margin: 0 0 24px; color: #f6f3ec; font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.2; letter-spacing: -.025em; }
#our-menu-and-about { background: #100e14; }
#our-menu-section, #about-us-section { padding: 64px 0; }
#about-us-section { border-top: 1px solid #ffffff15; }
.about-text { width: min(100%, 700px); max-width: 100%; margin: 24px auto 0; }
.site-page .about-text p { color: #c7c1cd; font-size: 1.06rem; line-height: 1.8; margin-bottom: 20px; font-family: inherit; }
.about-us-image { display: none; }
.page-shisha #about-us-section .container { max-width: 850px; }
.page-shisha #about-us-section p { color: #c7c1cd; line-height: 1.85; }
.page-shisha #about-us-section .section-title { margin-top: 36px; text-align: left; }
.page-shisha #about-us-section .col-12:first-child .section-title { margin-top: 0; }
.page-shisha #about-us-section img { display: block; width: 100%; max-height: 430px; height: auto; object-fit: cover; border-radius: 16px; margin: 28px 0; }
.page-shisha #about-us-section a { color: var(--site-gold); text-decoration: underline !important; text-underline-offset: 4px; }
.site-page-heading { padding: 24px 0 8px; text-align: center; }
.site-page-heading h1 { margin: 12px 0; font-size: clamp(2.3rem, 4vw, 3.5rem); letter-spacing: -.035em; font-weight: 700; }
.site-page-heading p:not(.site-eyebrow) { color: var(--site-muted); margin: 0; }
.site-page-heading a { min-height: 44px; padding: 10px 0; color: var(--site-gold); font-size: .9rem; }
.page-menu #header { background: #100e14; padding-bottom: 64px; }
.page-menu #header::after { display: none; }
.menu-tab-wrapper { margin-top: 20px; }
.menu-tab-wrapper .nav-tabs { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 5px; border: 1px solid #ffffff20; border-radius: 14px; background: #1b1721; }
.menu-tab-wrapper .nav-tabs .nav-link { min-height: 44px; margin: 0; padding: 10px 28px; border: 0; border-radius: 9px; color: #d2cbd9; font-size: 1rem; }
.menu-tab-wrapper .nav-tabs .nav-link.active { background: var(--site-gold); color: #171109; }
.menu-item-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.menu-item-wrapper .menu-item { display: flex; width: 100%; min-width: 0; min-height: 96px; align-items: center; justify-content: flex-start; gap: 14px; margin: 0; padding: 16px; border: 1px solid #ffffff15; border-radius: 14px; background: #1b1721; }
.menu-item-image { margin: 0; padding: 4px; flex: 0 0 66px; border-radius: 10px; background: #fff; }
.menu-item-image img { display: block; width: 58px; height: 58px; object-fit: contain; border-radius: 6px; }
.menu-item-name { min-width: 0; flex: 1; }
.site-page .menu-item-name p, .site-page .menu-item-price p { margin: 0; font: inherit; font-size: .97rem; line-height: 1.45; }
.menu-item-price { margin-left: auto; flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item-wrapper .menu-category { width: 100%; min-width: 0; max-width: 100%; margin: 0; }
.menu-category-title h3 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #ffffff20; color: var(--site-gold); font-size: 1.2rem; }
.menu-category-item { display: flex; flex-direction: column; gap: 8px; }
.menu-category-item .menu-item { min-height: 60px; padding: 12px 14px; border-radius: 10px; }
.menu-category-item .menu-item-name { margin: 0; }
.contact-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 8px 0 28px; list-style: none; }
.contact-details > li { padding: 24px; border: 1px solid #ffffff20; border-radius: 14px; background: #1b1721; }
.contact-details > li > span { display: block; margin-bottom: 10px; color: var(--site-gold); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.contact-details a { display: block; padding: 8px 0; color: #f6f3ec; overflow-wrap: anywhere; font-size: .95rem; }
.contact-details a:hover { color: var(--site-gold); }
.contact-details p { margin-bottom: 0; color: var(--site-muted); }
.page-contact iframe { border-radius: 16px; background: #1b1721; }
.site-footer { position: relative; margin: 0; padding: 48px 0 20px; border-top: 1px solid #ffffff1c; background: #0d0b10; color: var(--site-muted); }
.site-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.site-footer-name { display: inline-block; color: #f6f3ec; font-size: 1.6rem; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.site-footer-name span { display: block; margin-top: 8px; color: var(--site-gold); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.site-footer-brand p { margin: 18px 0 0; font-size: .9rem; }
.site-footer-brand .site-footer-note { margin-top: 8px; font-size: .75rem; }
.site-footer nav { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer nav h2 { margin: 0 0 10px; color: #f6f3ec; font-size: 1rem; font-weight: 600; }
.site-footer nav a { display: flex; min-height: 44px; align-items: center; color: #c5bdce; font-size: .88rem; }
.site-footer a:hover { color: var(--site-gold); }
.site-footer-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid #ffffff15; font-size: .75rem; }
.site-footer-bottom p { margin: 0; }
.site-footer-bottom a { color: var(--site-muted); }
#ageVerificationModal { padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
#ageVerificationModal .age-modal-content { width: min(500px, 100%); max-height: 100%; padding: 32px 24px; overflow-y: auto; }
#ageVerificationModal .age-modal-inner h2 { font-family: 'Metropole Sans', sans-serif; font-size: 1.8rem; }
#ageVerificationModal .age-modal-inner p { font-family: inherit; }
#ageVerificationModal .age-modal-inner > div { display: flex; flex-direction: column; gap: 12px; }
#ageVerificationModal .btn { width: 100%; margin: 0 !important; white-space: normal; }
#ageVerificationModal .btn-outline-secondary { color: #ddd6e4; border-color: #817588; }
#cookies-policy { color-scheme: light; }
#cookies-policy .cookies__alert { width: min(22em, calc(100vw - 24px)); margin: 12px; max-width: none; }
#cookies-policy .cookies__title { font-size: 1.25rem; }
#cookies-policy .cookies__actions { margin-top: 12px; }
#cookies-policy .cookiesBtn__link { min-height: 44px; }
#cookies-policy .cookiesBtn--essentials .cookiesBtn__link { background: #fff !important; border-color: #795a16; color: #2c2e30 !important; }
.food-notice { margin: 0 0 24px; padding: 16px 20px; border: 1px solid #665333; border-radius: 12px; background: #e0b5550a; color: #eee3cc; font-size: .9rem; }
.food-notice strong { display: block; color: var(--site-gold); }
.food-unavailable { max-width: 600px; padding: 40px 24px; margin: 0 auto; border: 1px solid #ffffff20; border-radius: 16px; background: #1b1721; text-align: center; }
.food-unavailable h2 { font-size: 1.5rem; }
.food-unavailable p { color: var(--site-muted); }
.food-unavailable a { padding: 10px; color: var(--site-gold); }

@media (max-width: 850px) {
    .site-nav { min-height: 82px; }
    .site-nav-links { display: none; }
    .site-nav > .site-menu-toggle { display: inline-flex; }
    .site-logo img { width: 54px; height: 54px; }
    .menu-item-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-details { grid-template-columns: 1fr; }
    .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .site-page .container { padding-right: 20px; padding-left: 20px; }
    .site-page .header-content { padding: 36px 0 52px; }
    .site-page .header-content-wrapper h1 { font-size: clamp(2.4rem, 10vw, 3.6rem); }
    .site-lead { font-size: 1rem; }
    #our-menu-section, #about-us-section { padding: 40px 0; }
    .menu-item-wrapper { grid-template-columns: 1fr; gap: 12px; }
    .menu-tab-wrapper .nav-tabs { width: 100%; }
    .menu-tab-wrapper .nav-item { flex: 1; }
    .menu-tab-wrapper .nav-tabs .nav-link { width: 100%; padding: 10px 14px; }
    .menu-item-wrapper .menu-category { margin-bottom: 20px; }
    .site-footer { padding-top: 36px; }
    .site-footer-bottom { flex-direction: column; gap: 4px; }
    .site-footer-bottom a { padding: 8px 0; }
}
@media (prefers-reduced-motion: reduce) { .site-page *, .site-page *::after { scroll-behavior: auto !important; transition: none !important; } }
