/*
 * Han Thueng Chiang Mai — shared visual foundation
 * This file is loaded after legacy styles so the public site and admin use
 * the same readable Thai typeface and white / gold colour direction.
 */
:root {
    --han-white: #ffffff;
    --han-gold: #ECD982;
    --han-gold-dark: #b99d3d;
    --han-gold-soft: #fbf6df;
    --han-ink: #3f351b;
    --han-muted: #74683e;
    --han-border: #eadfae;
    --han-font: 'Kanit', Tahoma, sans-serif;
}

html,
body {
    background: var(--han-white) !important;
    color: var(--han-ink);
    font-family: var(--han-font) !important;
}

body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.glyphicon):not(.ion) {
    font-family: var(--han-font) !important;
    font-weight: 400 !important;
}

body {
    font-size: 16px;
    line-height: 1.65;
}

/* Food menu */
.han-food-page { background: #fffdf6; min-height: 60vh; }
.han-food-heading { margin-bottom: 36px; }
.han-food-heading p { margin-top: 5px; }
.han-food-card { background: #fff; border: 1px solid var(--han-border); border-radius: 14px; color: var(--han-ink); display: block; height: 100%; overflow: hidden; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.han-food-card:hover { box-shadow: 0 10px 26px rgba(89, 70, 20, .14); color: var(--han-ink); transform: translateY(-4px); }
.han-food-image-wrap { aspect-ratio: 4 / 3; background: var(--han-gold-soft); overflow: hidden; }
.han-food-image-wrap img, .han-food-detail-image img { height: 100%; object-fit: cover; width: 100%; }
.han-food-card-body { padding: 17px 20px; }
.han-food-card h2 { font-size: 1.2rem; margin: 0 0 8px; }
.han-food-price strong, .han-food-detail-price strong { color: var(--han-gold-dark); font-size: 1.2rem; }
.han-food-price del, .han-food-detail-price del { color: #9a9a9a; margin-right: 9px; }
.han-food-empty { background: #fff; border: 1px dashed var(--han-border); border-radius: 12px; color: var(--han-muted); padding: 42px; text-align: center; }
.han-food-back { display: inline-block; margin-bottom: 25px; text-decoration: none; }
.han-food-detail { background: #fff; border: 1px solid var(--han-border); border-radius: 18px; padding: 25px; }
.han-food-detail-image { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; }
.han-food-detail h1 { font-size: 2.25rem; margin: 8px 0 16px; }
.han-food-detail-price { margin-bottom: 18px; }
.han-menu-book-page { background: linear-gradient(180deg, #fffdf7 0%, #f6eed3 100%); min-height: 70vh; }
.han-menu-book { margin: 0 auto; max-width: 570px; }
.han-menu-book-frame { background: #3d210b; box-shadow: 0 18px 45px rgba(57, 37, 11, .28); overflow: hidden; position: relative; transform-origin: left center; }
.han-menu-book-frame.is-turning { opacity: .25; transform: perspective(1000px) rotateY(-11deg); transition: transform .18s ease, opacity .18s ease; }
.han-menu-book-frame img { display: block; height: auto; max-height: min(78vh, 810px); object-fit: contain; width: 100%; }
.han-menu-book-hint { background: rgba(42, 25, 7, .72); bottom: 0; color: #fff; font-size: 12px; left: 0; padding: 7px 12px; position: absolute; right: 0; text-align: center; }
.han-menu-book-controls { align-items: center; display: flex; justify-content: space-between; margin-top: 17px; }
.han-menu-book-button { align-items: center; background: var(--han-gold); border: 0; border-radius: 5px; color: var(--han-ink); display: flex; font-family: var(--han-font); font-weight: 700; gap: 8px; padding: 9px 16px; }
.han-menu-book-button:disabled { background: #e5dfc8; color: #aaa185; cursor: not-allowed; }
.han-menu-book-counter { color: var(--han-muted); font-size: .95rem; }
.han-menu-book-counter strong { color: var(--han-ink); }
.han-menu-book-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 15px; }
.han-menu-book-dots button { background: #d6c886; border: 0; border-radius: 50%; height: 8px; padding: 0; width: 8px; }
.han-menu-book-dots button.is-active { background: #8d751d; transform: scale(1.35); }
.han-gallery-page { background: #fffdf7; min-height: 65vh; }
.han-gallery-view { color: var(--han-gold-dark); font-size: .9rem; font-weight: 600; }
.han-gallery-photo { aspect-ratio: 1 / 1; background: var(--han-gold-soft); display: block; overflow: hidden; }
.han-gallery-photo img { height: 100%; object-fit: cover; transition: transform .25s ease; width: 100%; }
.han-gallery-photo:hover img { transform: scale(1.05); }
.han-google-review-stars { align-items: center; display: flex; gap: 3px; margin: 10px 0 2px; }
.han-google-review-stars .fa-star { color: #ddd; font-size: 15px; }
.han-google-review-stars .fa-star.is-active { color: #fbbc04; }
.han-google-review-stars span { color: #77642a; font-size: 12px; font-weight: 700; margin-left: 5px; }
@media (max-width: 767px) { .han-food-heading h1 { font-size: 1.65rem; } .han-food-detail { padding: 16px; } .han-food-detail h1 { font-size: 1.85rem; } }

h1, h2, h3, h4, h5, h6 {
    color: var(--han-ink);
    font-weight: 700;
    line-height: 1.35;
}

a {
    color: var(--han-ink);
}

a:hover,
a:focus {
    color: var(--han-gold-dark);
}

/* Main header and navigation */
.site-header,
.site-header-top,
.site-nav-bar,
.header-contain,
.header-mb,
.navbar-expand-lg {
    background: var(--han-white) !important;
    border-color: var(--han-border) !important;
}

.site-header {
    border-bottom: 1px solid var(--han-border);
    box-shadow: 0 3px 16px rgba(96, 76, 21, 0.08);
}

.site-nav-bar {
    border-top: 1px solid var(--han-border);
}

.site-nav a,
.site-nav-parent-label,
.site-nav-anchor,
.site-language-label,
.site-header-contact,
.site-header-contact a,
.nav-link,
.dropdown-item {
    color: var(--han-ink) !important;
}

.site-nav a:hover,
.site-nav a.is-active,
.site-nav-parent-label.is-active,
.site-nav-parent-label:hover,
.site-nav-anchor:hover,
.nav-link:hover,
.nav-link:focus {
    color: var(--han-gold-dark) !important;
}

.site-nav-dropdown,
.site-mobile-menu,
.dropdown-menu {
    background: var(--han-white) !important;
    border: 1px solid var(--han-border) !important;
    box-shadow: 0 12px 28px rgba(96, 76, 21, 0.13);
}

.site-menu-toggle,
.site-mobile-menu-close,
.site-nav-dropdown-toggle,
.site-mobile-submenu-toggle {
    color: var(--han-ink) !important;
}

/* Shared buttons, controls and form fields */
.btn-primary,
.btn-warning,
button[type="submit"],
input[type="submit"],
.site-button,
.button,
.btn-main {
    background-color: var(--han-gold) !important;
    border-color: var(--han-gold) !important;
    color: var(--han-ink) !important;
    font-weight: 700;
}

.btn-primary:hover,
.btn-warning:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.site-button:hover,
.button:hover,
.btn-main:hover {
    background-color: var(--han-gold-dark) !important;
    border-color: var(--han-gold-dark) !important;
    color: var(--han-white) !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea,
.form-control {
    background: var(--han-white) !important;
    border-color: var(--han-border) !important;
    color: var(--han-ink) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--han-gold-dark) !important;
    box-shadow: 0 0 0 .2rem rgba(236, 217, 130, .34) !important;
}

/* Cards and content surfaces */
.card,
.box,
.content-box,
.service-block,
.product-item,
.blog-item,
.review-item,
.gallery-item {
    border-color: var(--han-border);
}

.footer_container,
.footer,
.footer_bar {
    background: var(--han-gold-soft) !important;
    border-top: 1px solid var(--han-border);
    color: var(--han-ink) !important;
}

.footer_container p,
.footer_container h1,
.footer_container h2,
.footer_container h3,
.footer_container a,
.footer p,
.footer a {
    color: var(--han-ink) !important;
}

.footer_container a:hover,
.footer a:hover {
    color: var(--han-gold-dark) !important;
}

::selection {
    background: var(--han-gold);
    color: var(--han-ink);
}

/* Public header and navigation.  The original header stylesheet is absent, so
   these rules keep every menu item visible and provide a responsive menu. */
.site-header {
    position: relative;
    z-index: 1000;
    width: 100%;
}

.site-header-inner {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.site-logo,
.site-mobile-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-logo img {
    display: block;
    width: 68px;
    height: 68px;
    padding: 4px;
    background: #ffffff;
    border: 1px solid var(--han-border);
    border-radius: 50%;
    object-fit: contain;
}

.site-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.site-header-contact,
.site-language-menu {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
}

.site-language-menu a {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
}

.site-language-menu a.is-active {
    border-color: var(--han-gold-dark);
    background: var(--han-gold-soft);
}

.site-menu-toggle,
.site-mobile-menu-close {
    display: none;
    width: 42px;
    height: 42px;
    padding: 9px;
    border: 1px solid rgba(201, 8, 18, .32);
    border-radius: 9px;
    background: var(--han-white);
}

.site-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px auto;
    background: var(--han-ink);
    border-radius: 2px;
}

.site-nav-bar {
    position: relative;
    z-index: 990;
}

.site-nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav-list > li {
    position: relative;
}

.site-nav-list > li > a,
.site-nav-parent-label,
.site-nav-link-group > a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 8px 5px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.site-nav-link-group {
    display: flex;
    align-items: center;
}

.site-nav-dropdown-toggle {
    width: 25px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
}

.site-nav-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    display: none;
    min-width: 210px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border-radius: 10px;
    z-index: 1001;
}

.site-nav-item-has-dropdown.is-open .site-nav-dropdown,
.site-nav-item-has-dropdown:hover .site-nav-dropdown {
    display: block;
}

.site-nav-dropdown a {
    display: block;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 14px;
    text-decoration: none;
}

.site-nav-dropdown a:hover {
    background: var(--han-gold-soft);
}

.site-mobile-menu-backdrop,
.site-mobile-menu {
    display: none;
}

/* Keep the drawer rules aligned with the 1199px header-menu breakpoint. */
@media (max-width: 1199px) {
    .site-nav-bar {
        display: none;
    }

    .site-menu-toggle {
        display: block;
    }

    .site-mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1998;
        background: rgba(48, 38, 13, .45);
    }

    .site-mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1999;
        width: min(360px, 90vw);
        padding: 18px;
        overflow-y: auto;
        background: var(--han-white);
        box-shadow: -12px 0 32px rgba(44, 34, 8, .2);
        transform: translateX(105%);
        transition: transform .25s ease;
    }

    body.site-menu-open .site-mobile-menu-backdrop,
    body.site-menu-open .site-mobile-menu {
        display: block;
    }

    body.site-menu-open .site-mobile-menu {
        transform: translateX(0);
    }

    .site-mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(201, 8, 18, .22);
    }

    .site-mobile-logo img {
        width: 112px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 0;
        object-fit: contain;
        object-position: left center;
    }

    .site-mobile-menu-close {
        display: block;
    }

    .site-mobile-nav-list,
    .site-mobile-nav-list ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-mobile-nav-list > li {
        border-bottom: 1px solid rgba(201, 8, 18, .22);
    }

    .site-mobile-nav-list a,
    .site-mobile-submenu-toggle {
        display: flex;
        width: 100%;
        min-height: 49px;
        align-items: center;
        justify-content: space-between;
        padding: 10px 3px;
        border: 0;
        background: transparent;
        color: var(--han-ink);
        font-size: 16px;
        text-align: left;
        text-decoration: none;
    }

    .site-mobile-nav-list .has-submenu > ul {
        display: none;
        padding: 0 0 8px 14px;
    }

    .site-mobile-nav-list .has-submenu.is-open > ul {
        display: block;
    }

    .site-mobile-nav-list .has-submenu > ul a {
        min-height: 38px;
        font-size: 14px;
    }
}
/* Contact opening hours */
.contact-opening-hours {
    margin: 12px 0 0;
    font-size: 18px;
    font-weight: 500;
}

.contact-opening-hours .fa-clock {
    margin-right: 6px;
    color: #b18d20;
}

/* Header and home hero */
.site-header,
.site-header-top {
    background: #ecd982 !important;
    border: 0 !important;
}

.site-header-inner {
    min-height: 76px;
    gap: 26px;
}

.site-logo img {
    width: 190px;
    height: 66px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    object-position: left center;
}

.site-header-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.site-header-nav a {
    color: #4a391b;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.site-header-nav a:not(:last-child)::after {
    content: '•';
    margin-left: 14px;
    color: #8d741d;
}

.site-header-nav a:hover,
.site-header-nav a.is-active {
    color: #8d741d;
}

.site-header-actions {
    gap: 12px;
}

.site-header-contact {
    gap: 8px;
    font-size: 16px;
    white-space: nowrap;
}

.site-header-contact a {
    text-decoration: none !important;
}

.site-header-contact .fa-phone {
    color: #5e4b19;
}

.site-language-menu {
    gap: 0;
    padding: 2px;
    background: #2d7eae;
    border-radius: 12px;
}

.site-language-menu a {
    width: 22px;
    height: 18px;
    font-size: 11px;
}

.site-language-menu a.is-active {
    border: 0;
    background: transparent;
}

.restaurant-hero {
    position: relative;
    height: 600px;
    min-height: 600px;
    overflow: hidden;
    background: #3e2d18;
    border-bottom: 2px solid #ecd982;
}

.restaurant-hero-slides,
.restaurant-hero-slides .carousel-inner,
.restaurant-hero-slides .carousel-item {
    height: 100%;
    min-height: 100%;
}

.restaurant-hero-slides.carousel-fade .carousel-item {
    opacity: 0;
    transform: none !important;
    transition: opacity 2.6s ease-in-out !important;
    will-change: opacity;
}

.restaurant-hero-slides.carousel-fade .carousel-item.active,
.restaurant-hero-slides.carousel-fade .carousel-item-next.carousel-item-start,
.restaurant-hero-slides.carousel-fade .carousel-item-prev.carousel-item-end {
    opacity: 1;
}

.restaurant-hero-slides.carousel-fade .active.carousel-item-start,
.restaurant-hero-slides.carousel-fade .active.carousel-item-end {
    opacity: 0;
}

.restaurant-hero-slides img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
}

.restaurant-hero::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: '';
    background: rgba(30, 21, 9, .08);
    pointer-events: none;
}

.restaurant-hero-copy {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 10%;
    bottom: 0;
    display: flex;
    align-items: center;
    width: min(48%, 650px);
    padding: 44px clamp(34px, 6vw, 108px) 36px;
    background: transparent;
    overflow: hidden;
}

.restaurant-hero-copy::before,
.restaurant-hero-copy::after {
    position: absolute;
    color: rgba(152, 115, 47, .09);
    font-family: 'Kanit', sans-serif;
    font-size: clamp(180px, 22vw, 360px);
    font-weight: 400;
    line-height: .75;
    pointer-events: none;
}

.restaurant-hero-copy::before {
    display: none;
}

.restaurant-hero-copy::after {
    content: '✦';
    right: 22px;
    bottom: 24px;
    font-size: 90px;
}

.restaurant-hero-copy-inner {
    position: relative;
    z-index: 1;
    max-width: 430px;
}

.restaurant-hero img.restaurant-title {
    display: block;
    width: min(100%, 390px);
    height: auto;
    margin: 0;
}

.restaurant-hero-tagline {
    margin: 18px 0 5px;
    color: #3e311c;
    font-size: 28px;
    line-height: 1.2;
}

.restaurant-hero-description {
    margin: 0;
    color: #695a42;
    font-size: 18px;
    line-height: 1.55;
}

.restaurant-hero-details {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 30px;
}

.restaurant-hero-hours,
.restaurant-hero-capacity {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #322918;
    font-size: 18px;
    line-height: 1.15;
}

.restaurant-hero-hours > i,
.restaurant-hero-capacity > i {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #c7a644;
    border-radius: 50%;
    color: #624d1b;
}

.restaurant-hero-details strong,
.restaurant-hero-details span {
    display: block;
    font-weight: 400;
}

.restaurant-hero-details span {
    line-height: 1.1;
}

.restaurant-hero-hours span {
    line-height: 1.38;
}

@media (max-width: 1100px) {
    .site-header-inner { min-height: 70px; }
    .site-header-nav { display: none; }
    .site-logo img { width: 178px; height: 60px; }
    .site-header-contact { gap: 6px; font-size: 14px; }
    .site-menu-toggle { display: block; width: 42px; height: 42px; background: rgba(255,255,255,.45); }
    .restaurant-hero { height: auto; min-height: 0; background: #fbf4e8; }
    .restaurant-hero-slides,
    .restaurant-hero-slides .carousel-inner,
    .restaurant-hero-slides .carousel-item,
    .restaurant-hero-slides img { height: auto; min-height: 0; background: #fbf4e8; object-fit: contain; object-position: center; }
    .restaurant-hero-slides,
    .restaurant-hero-slides .carousel-inner,
    .restaurant-hero-slides .carousel-item { height: auto; min-height: 0; aspect-ratio: 1.9 / 1; background: #fbf4e8; }
    .restaurant-hero-slides .carousel-inner { height: auto; min-height: 0; }
    .restaurant-hero::after { display: none; }
    .restaurant-hero-copy { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; min-height: 0; padding: 34px 8% 32px; background: transparent; }
    .restaurant-hero-copy::after { display: none; }
    .restaurant-hero img.restaurant-title { width: 330px; }
    .restaurant-hero-tagline { color: #3e311c; font-size: 24px; }
    .restaurant-hero-description { color: #695a42; font-size: 16px; }
    .restaurant-hero-hours,
    .restaurant-hero-capacity { color: #322918; font-size: 15px; }
    .restaurant-hero-hours > i,
    .restaurant-hero-capacity > i { border-color: #c7a644; color: #624d1b; }
}

@media (min-width: 601px) and (max-width: 1100px) {
    .restaurant-hero {
        display: grid;
        grid-template-columns: 55% 45%;
        height: 300px;
        min-height: 300px;
    }

    .restaurant-hero-slides,
    .restaurant-hero-slides .carousel-inner,
    .restaurant-hero-slides .carousel-item {
        height: 300px;
        min-height: 300px;
        aspect-ratio: auto;
    }

    .restaurant-hero-slides img {
        height: 300px;
        min-height: 300px;
        object-fit: cover;
        object-position: left center;
    }

    .restaurant-hero-copy {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        display: flex;
        width: auto;
        min-height: 300px;
        padding: 26px 28px;
        background: #fbf4e8;
    }

    .restaurant-hero img.restaurant-title { width: min(100%, 235px); }
    .restaurant-hero-tagline { margin-top: 12px; font-size: 18px; }
    .restaurant-hero-description { font-size: 12px; line-height: 1.4; }
    .restaurant-hero-details { gap: 12px; margin-top: 16px; }
    .restaurant-hero-hours,
    .restaurant-hero-capacity { font-size: 12px; }
    .restaurant-hero-hours > i,
    .restaurant-hero-capacity > i { width: 27px; height: 27px; }
}

@media (max-width: 600px) {
    .site-header-inner { min-height: 58px; gap: 10px; }
    .site-logo img { width: 148px; height: 48px; }
    .site-mobile-logo img { width: 112px; height: 40px; padding: 0; border: 0; border-radius: 0; object-fit: contain; object-position: left center; }
    .site-header-contact { display: none !important; }
    .site-menu-toggle { width: 40px; height: 40px; padding: 7px; background: rgba(255,255,255,.5); }
    .site-menu-toggle span { width: 19px; }
    .restaurant-hero { display: block; height: auto; min-height: 0; }
    .restaurant-hero-slides,
    .restaurant-hero-slides .carousel-inner,
    .restaurant-hero-slides .carousel-item,
    .restaurant-hero-slides img { height: 300px; min-height: 300px; background: #fbf4e8; object-fit: cover; object-position: left center; }
    .restaurant-hero-slides,
    .restaurant-hero-slides .carousel-inner,
    .restaurant-hero-slides .carousel-item { height: 300px; min-height: 300px; }
    .restaurant-hero-copy { top: auto; right: auto; width: 100%; min-height: 0; padding: 28px 26px 26px; background: transparent; }
    .restaurant-hero-copy::before { font-size: 190px; right: -34px; }
    .restaurant-hero img.restaurant-title { width: 225px; }
    .restaurant-hero-copy-inner { width: 100%; text-align: center; }
    .restaurant-hero img.restaurant-title { margin-right: auto; margin-left: auto; }
    .restaurant-hero-tagline { margin-top: 13px; color: #3e311c; font-size: 21px; }
    .restaurant-hero-description { color: #695a42; font-size: 15px; line-height: 1.45; }
    .restaurant-hero-details { justify-content: center; gap: 14px; margin-top: 19px; text-align: left; }
    .restaurant-hero-hours,
    .restaurant-hero-capacity { color: #322918; font-size: 14px; }
    .restaurant-hero-hours > i,
    .restaurant-hero-capacity > i { border-color: #c7a644; color: #624d1b; }
    .restaurant-hero-hours span { line-height: 1.28; }
    .site-mobile-menu { width: min(340px, 88vw); padding: 16px; }
    .site-mobile-nav-list a { min-height: 54px; font-size: 17px; }
}

/* Responsive hero lock: one intentional layout per device class. */
@media (max-width: 1199px) {
    .site-header-nav { display: none; }
    .site-menu-toggle { display: block; }
    .restaurant-hero { display: block; height: auto !important; min-height: 0 !important; background: #fbf4e8; }
    .restaurant-hero::after, .restaurant-hero-copy::before, .restaurant-hero-copy::after { display: none; }
    .restaurant-hero-copy { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; height: auto !important; min-height: 0; background: transparent; }
}

/* Tablet: image and information sit beside each other. */
@media (min-width: 768px) and (max-width: 1199px) {
    .restaurant-hero { display: grid; grid-template-columns: 55% 45%; height: 300px !important; min-height: 300px !important; }
    .restaurant-hero-slides, .restaurant-hero-slides .carousel-inner, .restaurant-hero-slides .carousel-item, .restaurant-hero-slides img { height: 300px !important; min-height: 300px !important; aspect-ratio: auto; }
    .restaurant-hero-slides img { width: 100%; object-fit: cover; object-position: left center; }
    .restaurant-hero-copy { display: flex; align-items: center; padding: 24px 28px; }
    .restaurant-hero-copy-inner { max-width: 100%; transform: translateX(10%); }
    .restaurant-hero img.restaurant-title { width: min(100%, 250px); }
    .restaurant-hero-tagline { margin-top: 12px; font-size: 18px; }
    .restaurant-hero-description { font-size: 12px; line-height: 1.42; }
    .restaurant-hero-details { gap: 12px; margin-top: 15px; }
    .restaurant-hero-hours, .restaurant-hero-capacity { font-size: 12px; }
    .restaurant-hero-hours > i, .restaurant-hero-capacity > i { width: 27px; height: 27px; }
}

/* Mobile: image first, then centred information below it. */
@media (max-width: 767px) {
    .site-header-inner { min-height: 58px; gap: 10px; }
    .site-logo img { width: 148px; height: 48px; }
    .site-header-contact { display: none !important; }
    .site-menu-toggle { width: 40px; height: 40px; padding: 7px; }
    .restaurant-hero-slides, .restaurant-hero-slides .carousel-inner, .restaurant-hero-slides .carousel-item { height: auto !important; min-height: 0 !important; aspect-ratio: 2 / 1; background: #fbf4e8; }
    .restaurant-hero-slides img { width: 100%; height: 100% !important; min-height: 0 !important; object-fit: cover; object-position: left center; }
    .restaurant-hero-copy { display: block; padding: 28px 24px 26px; text-align: center; }
    .restaurant-hero-copy-inner { width: 100%; max-width: 440px; margin: 0 auto; }
    .restaurant-hero img.restaurant-title { width: clamp(215px, 52vw, 250px); margin: 0 auto; }
    .restaurant-hero-tagline { margin-top: 14px; font-size: 20px; }
    .restaurant-hero-description { font-size: 14px; line-height: 1.48; }
    .restaurant-hero-details { justify-content: center; gap: 14px; margin-top: 19px; text-align: left; }
    .restaurant-hero-hours, .restaurant-hero-capacity { font-size: 13px; }
    .restaurant-hero-hours > i, .restaurant-hero-capacity > i { width: 28px; height: 28px; }
}

@media (min-width: 766px) and (max-width: 1200px) {
    .restaurant-hero {
        display: block;
        position: relative;
        height: 300px !important;
        min-height: 300px !important;
        background: #fbf4e8;
    }
    .restaurant-hero-slides,
    .restaurant-hero-slides .carousel-inner,
    .restaurant-hero-slides .carousel-item,
    .restaurant-hero-slides img {
        height: 300px !important;
        min-height: 300px !important;
    }
    .restaurant-hero-slides img {
        width: 100%;
        object-fit: cover;
        object-position: center;
    }
    .restaurant-hero-copy {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        display: flex;
        align-items: center;
        width: 45%;
        padding: 20px 24px 20px clamp(42px, 4vw, 64px);
        background: transparent;
    }
    .restaurant-hero-copy-inner { max-width: 100%; }
    .restaurant-hero img.restaurant-title { width: clamp(170px, 22vw, 230px); }
    .restaurant-hero-tagline { margin-top: 8px; font-size: 16px; }
    .restaurant-hero-description { font-size: 11px; line-height: 1.36; }
    .restaurant-hero-details { gap: 10px; margin-top: 12px; }
    .restaurant-hero-hours,
    .restaurant-hero-capacity { font-size: 11px; }
    .restaurant-hero-hours > i,
    .restaurant-hero-capacity > i { width: 25px; height: 25px; }
}

/* Desktop follows the same image-left / information-right composition. */
@media (min-width: 1201px) {
    .restaurant-hero {
        height: 600px;
        min-height: 600px;
        background: #fbf4e8;
    }
    .restaurant-hero-slides,
    .restaurant-hero-slides .carousel-inner,
    .restaurant-hero-slides .carousel-item,
    .restaurant-hero-slides img {
        height: 600px;
        min-height: 600px;
    }
    .restaurant-hero-slides img { object-fit: cover; object-position: center; }
    .restaurant-hero-copy {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        display: flex;
        align-items: center;
        width: 45%;
        padding: 44px 5% 44px clamp(56px, 6vw, 110px);
        background: transparent;
    }
    .restaurant-hero-copy-inner { max-width: 100%; transform: translateX(8%); }
    .restaurant-hero img.restaurant-title { width: clamp(270px, 22vw, 350px); }
    .restaurant-hero-tagline { margin-top: 18px; font-size: 26px; }
    .restaurant-hero-description { font-size: 17px; line-height: 1.52; }
    .restaurant-hero-details { gap: 20px; margin-top: 28px; }
    .restaurant-hero-hours,
    .restaurant-hero-capacity { font-size: 16px; }
}

/* Small tablets in portrait: brand and information share the row below the slide. */
@media (min-width: 601px) and (max-width: 767px) {
    .restaurant-hero-copy { padding: 30px 7% 28px; text-align: left; }
    .restaurant-hero-copy-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; max-width: none; margin: 0; }
    .restaurant-hero-brand { display: flex; align-items: center; justify-content: center; min-height: 185px; }
    .restaurant-hero img.restaurant-title { width: min(100%, 230px); margin: 0; }
    .restaurant-hero-info { padding-left: 20px; }
    .restaurant-hero-tagline { margin-top: 0; font-size: 17px; }
    .restaurant-hero-description { font-size: 11px; line-height: 1.42; }
    .restaurant-hero-details { justify-content: flex-start; gap: 10px; margin-top: 13px; }
    .restaurant-hero-hours, .restaurant-hero-capacity { font-size: 11px; }
    .restaurant-hero-hours > i, .restaurant-hero-capacity > i { width: 25px; height: 25px; }
}