/*
@font-face {
    font-family: JosefinSans-Regular;
    src: url(../Fonts/JosefinSans-Medium.ttf);
}
@font-face {
    font-family: JosefinSans-Medium;
    src: url(../Fonts/JosefinSans-Medium.ttf);
}
@font-face {
    font-family: JosefinSans-Bold;
    src: url(../Fonts/JosefinSans-Bold.ttf);
}
@font-face {
    font-family: JosefinSans-SemiBold;
    src: url(../Fonts/JosefinSans-SemiBold.ttf);
}
@font-face {
    font-family: Aulyars_Italic;
    src: url('../Fonts/Aulyars Italic.otf');
}
*/
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
    unicode-range: U +0900 -097F, U +1CD0 -1CF9, U +200C -200D, U +20A8, U +20B9, U +20F0, U +25CC, U + A830-A839, U + A8E0-A8FF, U +11B00 -11B09;
}

@font-face {
    font-family: Playfair Display;
    src: url('../Styles/fonts/Playfair Display/PlayfairDisplay-Regular.ttf');
}

body {
    padding: 0;
    margin: 0;
    font-family: poppins,sans-serif;
}

a {
    text-decoration: none;
}

input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field {
    color: #000;
}

input[type="date"]::-webkit-datetime-edit-text {
    color: #000;
}

.dropdown-toggle::after {
    visibility: hidden;
    display: none;
}

.BgHeader {
    background: linear-gradient( 90deg, rgba(20,14,9,.8), rgba(20,14,9,.38) 60%, rgba(20,14,9,.58) ), url("../Images/BgHeader.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-page {
    background-color: #000;
}

.inner-page {
    background-color: #fff;
}

.nav-link {
    color: #fff;
    font-size: 14px;
    gap: 10px;
    text-align: center;
    font-family: poppins,sans-serif;
}

@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

.nav-link:hover, .nav-link:focus {
    color: #c9a227;
}

.animated-submit-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

    .animated-submit-btn:active {
        background: #ffd86f !important;
        color: #2c3216 !important;
    }

    .animated-submit-btn:hover {
        background: #fff !important;
        color: #7a0607 !important;
    }

@media(max-width:992px) {
    .nav-link {
        color: #000;
        font-size: 20px;
        gap: 10px;
        text-align: center;
        text-transform: uppercase;
    }

        .nav-link:hover {
            color: #f00;
        }
}

#myTabContent {
    display: block !important;
}

.floatingcart {
    position: fixed;
    Right: 8px;
    top: 300px;
    z-index: 1021;
    border-radius: 50%;
    background: #c21725;
    padding: 20px;
    border: 2px solid #fff;
    scale: 0.9;
}

.cart-item-number {
    background: #fff;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    color: #c21725;
    display: block;
    position: absolute;
    top: 11px !important;
    right: 11px !important;
    font-weight: bold;
    font-size: 14px;
}

.bottomCart {
    color: #fff;
    position: fixed;
    bottom: 5px;
    background-color: #c21725;
    border: 2px solid #fff;
    height: 47px;
    width: 100%;
    border-radius: 0px;
    z-index: 2;
    display: none;
    justify-content: center;
    padding: 2px;
    left: 0;
}

.navbar-dark .navbar-toggler-icon {
    filter: brightness(1) invert(1);
}

@media (max-width: 991.98px) {
    .bottomCart {
        display: none;
    }

    /* #floatingCart {
        display: none !important;
    }

    .Carttext {
        font-size: 18px;
        color: white;
        text-decoration: none !important;
    }

    .cart-item-number {
        background: none;
        height: auto;
        width: auto;
        top: 0px !important;
        color: #fff;
        left: 3px !important;
        display: inline-block;
        position: relative;
        font-weight: bold;
        font-size: 24px;
    }*/

    .HeaderRight, .HeaderLeft {
        display: none !important;
    }
}


.offcanvas-header .btn-close {
    filter: invert(1) brightness(0);
}





input[type=radio]:checked {
    background-color: var(--eld-brass-soft) !important;
    border: 2px solid var(--eld-brass) !important;
}

input[type=checkbox] {
    border: 1px solid var(--eld-brass);
}

    input[type=checkbox]:checked {
        accent-color: var(--eld-brass-soft) !important;
        border: 2px solid var(--eld-brass) !important;
    }

button.back-to-top {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    height: 0px;
    width: 0px;
    overflow: hidden;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    color: transparent;
    clear: both;
    visibility: hidden;
    position: fixed;
    cursor: pointer;
    display: block;
    border: none;
    right: 50px;
    bottom: 150px;
    font-size: 0px;
    outline: 0 !important;
    z-index: 2;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

    button.back-to-top:hover,
    button.back-to-top:active,
    button.back-to-top:focus {
        outline: 0 !important;
    }

    button.back-to-top::before,
    button.back-to-top::after {
        content: "";
        display: block;
        vertical-align: middle;
        border-bottom: solid 10px var(--eld-navy);
        border-left: solid 10px transparent;
        line-height: 0;
        border-right: solid 10px transparent;
        height: 0;
        margin: 19px auto 0;
        width: 0;
        border-radius: 20px;
        visibility: hidden;
    }

    button.back-to-top.show::after,
    button.back-to-top.show::before {
        visibility: visible;
    }

    button.back-to-top::after {
        border-bottom-color: var(--eld-brass);
        position: relative;
        top: -24px;
    }

    button.back-to-top.show {
        display: block;
        background: #fff;
        color: #00ab6c;
        font-size: 25px;
        right: 25px;
        bottom: 50px;
        height: 50px;
        width: 50px;
        visibility: visible;
        box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
        -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
    }

        button.back-to-top.show:active {
            box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
            -webkit-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
            -moz-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
        }

#content-footer-bottom-pp {
    border-top: 1px solid #000;
}

.swiper-pagination {
    bottom: 0px !important;
    right: 19px;
    width: 20px !important;
    text-align: center;
    height: 100%;
    left: auto !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.swiper-pagination-bullet {
    width: 8px !important;
    height: 23px !important;
    display: inline-block !important;
    background-color: #222 !important;
    background-position: center -48px !important;
    border-radius: 10px !important;
    opacity: 0.9 !important;
    margin-bottom: 5px !important;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    width: 8px !important;
    height: 40px !important;
    display: inline-block;
    background-color: #c21725 !important;
    background-position: center 0px !important;
    border-radius: 10px !important;
}



.OnlineOrderBtn {
    background-color: #b32025;
    padding: 10px 21px 8px 21px !important;
    border-radius: 12px;
    color: #ffffff;
    font-size: 14px;
    transition: .5s all;
    text-transform: unset;
}

.ReservationBtn {
    border: 1px solid #c9a227;
    padding: 10px 21px 8px 21px !important;
    border-radius: 12px;
    color: #ffc200;
    font-size: 14px;
    transition: .5s all;
    text-transform: unset;
}

.OnlineOrderBtn:hover {
    color: #fff !important;
    transform: translateY(-4px);
    box-shadow: 0px 3px 6px #959595;
    background: #c21725;
}

.ReservationBtn:hover {
    color: #fff !important;
    transform: translateY(-4px);
    box-shadow: 0px 3px 6px #959595;
    background: #c9a227;
}

.dropdown-menu {
    color: #fff;
    background-color: var(--eld-navy);
}

.dropdown-item {
    text-align: start;
    color: #fff;
}

    .dropdown-item:hover {
        background-color: var(--eld-brass);
        color: #fff;
        transition: 0.3s ease-in-out;
    }

.SliderText {
    font-family: Playfair Display, serif;
    color: #fff;
    font-size: clamp(48px,4vw,74px);
    font-weight: 600;
}

.SliderItalic {
    color: #c9a227;
    font-style: italic;
}

.SliderSubText {
    font-size: clamp(16px,3vw,18px);
    color: #ffffff9d;
}

.SliderOrderBtn {
    background-color: #b32025;
    display: inline-block;
    border: 1px solid #b32025;
    padding: 12px 17px;
    color: #fff !important;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

    .SliderOrderBtn:hover {
        transform: translateY(-4px) !important;
        transition: 0.3s ease-in-out;
    }

.SliderOrderBtn2 {
    background-color: #ffffff1a;
    border: 1px solid #fff;
    padding: 12px 17px;
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

/*Home Page Container*/
.ServiceHeader, .Aboutheader {
    color: #b32025;
}

.ServiceTitle {
    font-family: 'Playfair Display';
}

.services-section {
    background: #f8f2e8;
}

.service-icon {
    font-size: 70px;
}

.divider {
    width: 80px;
    height: 4px;
}

.btn {
}

.Service:hover .divider {
    background: #b32025 !important;
}

.Service:hover h3 {
    color: #b32025 !important;
}

.Service:hover .service-icon {
    color: #b32025 !important;
}

.Service:hover .btn {
    background: #b32025 !important;
    border: 1px solid #b32025;
    color: #fff;
}

.about-section {
    background: #fdfbf8;
}

.about-title {
    font-family: 'Playfair Display',serif;
    font-size: clamp(42px,3vw,48px);
    font-weight: 700;
    line-height: 1.05;
}

.about-section span {
    letter-spacing: 4px;
}

.about-section p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
}

.about-section img {
    height: 530px;
    object-fit: cover;
}

.AboutBtn {
    background: #b32025;
    border-color: #b32025;
    min-width: 150px;
    padding: 7px 17px;
    display: inline-block;
    color: #fff !important;
}

    .AboutBtn:hover {
        transition: 0.3s ease-in-out;
        transform: translateY(-4px);
    }

.offer-section {
    background: linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)), url("../images/offer-bg.jpg") center center/cover no-repeat;
    padding: 120px 0;
}

.offer-badge {
    display: inline-block;
    padding: 8px 18px;
    background: #d4a017;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    border-radius: 30px;
    letter-spacing: .5px;
}

.offer-title {
    color: #fff;
    font-size: clamp(50px, 4vw, 60px);
    font-family: 'Playfair Display',serif;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

.offer-text {
    color: #f1f1f1;
    font-size: 16px;
    max-width: 700px;
    margin: 0 auto 35px;
    line-height: 1.6;
}

.theme-btn {
    display: inline-block;
    padding: 14px 35px;
    background: #b32025;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 10px;
    transition: .3s;
    font-size: 14px;
}

    .theme-btn:hover {
        color: #fff;
        transform: translateY(-4px);
    }

.GalleryHeader {
    font-weight: 900;
}

.GalleryTitle {
    font-family: 'Playfair Display',serif;
    font-weight: 600;
    font-size: clamp(40px,4vw,48px);
}

.testimonial-section {
    background: #222221;
    padding: 90px 0;
}

.section-heading {
    margin-bottom: 60px;
}

.section-subtitle {
    display: block;
    color: #c9a227;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}

.section-title {
    color: #fff;
    font-size: clamp(40px,4vw,48px);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    margin-bottom: 0;
}

.testimonial-card {
    background: #3b3b3b;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 30px;
    height: 100%;
    transition: .35s;
}

    .testimonial-card:hover {
        transform: translateY(-6px);
        background: #434343;
    }

.testimonial-rating {
    color: #c9a227;
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.homeReviewText {
    color: rgba(255,255,255,.82);
    line-height: 1.9;
    margin-bottom: 30px;
    font-size: 14px;
}

.homeReviewDetail {
    margin-bottom: 0;
}

    .homeReviewDetail strong {
        color: #fff;
        font-weight: 600;
        font-size: 14px;
    }

    .homeReviewDetail span {
        color: rgba(255,255,255,.6);
    }

.mySwipertest {
    padding-bottom: 10px;
}

    .mySwipertest .swiper-slide {
        height: auto;
        display: flex;
    }

    .mySwipertest .testimonial-card {
        width: 100%;
    }

    .mySwipertest .swiper-button-next,
    .mySwipertest .swiper-button-prev {
        color: #d4af37;
    }

@media (max-width:991px) {

    .section-title {
        font-size: 42px;
    }

    .testimonial-section {
        padding: 70px 0;
    }
}

@media (max-width:767px) {

    .section-title {
        font-size: 34px;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .testimonial-card {
        padding: 25px;
    }
}

.location-section {
    padding: 10px 0;
    background: #faf9f7;
}

.location-map {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
}

    .location-map iframe {
        width: 100%;
        height: 420px;
        border: 0;
    }

.location-subtitle {
    display: block;
    color: #aa0332;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.location-title {
    font-size: 36px;
    font-family: 'Playfair Display',serif;
    font-weight: 600;
    color: #222;
    margin-bottom: 45px;
}

.info-item {
    margin-bottom: 35px;
}

    .info-item h5 {
        font-size: 14px;
        font-weight: 700;
        color: #222;
        margin-bottom: 10px;
    }

    .info-item p {
        margin: 0;
        color: #666;
        line-height: 1.9;
        font-size: 14px;
    }

    .info-item a {
        color: #aa0332;
        text-decoration: none;
        line-height: 1.9;
        font-size: 14px;
    }

        .info-item a:hover {
            color: #7b0225;
        }

.footer-section {
    background: #222221;
    color: #bfbfbf;
    padding: 90px 0 35px;
}

.footer-logo {
    max-width: 170px;
    margin-bottom: 25px;
}

.footer-about {
    max-width: 270px;
    line-height: 1.9;
    font-size: 14px;
}

.footer-section h5 {
    color: #fff;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 16px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin-bottom: 4px;
    }

    .footer-links a {
        color: #bfbfbf;
        text-decoration: none;
        transition: .3s;
        font-size: 14px;
    }

        .footer-links a:hover {
            color: #aa0332;
            padding-left: 5px;
        }

.social-icons {
    display: flex;
    gap: 15px;
}

    .social-icons a {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        transition: .35s;
    }

        .social-icons a:hover {
            background: #aa0332;
            transform: translateY(-4px);
        }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .footer-contact a {
        color: #bfbfbf;
        text-decoration: none;
        font-size: 14px;
    }

        .footer-contact a:hover {
            color: #aa0332;
        }

.footer-section hr {
    border-color: rgba(255,255,255,.08);
    margin: 0px 0 30px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

    .footer-bottom p {
        margin: 0;
        color: #9c9c9c;
        font-size: 12px;
    }

.ftrLogin {
    color: #fff;
    font-weight: bold;
}

    .ftrLogin:hover {
        color: #b32025;
    }

@media(max-width:991px) {

    .location-title {
        font-size: 42px;
    }

    .location-section {
        padding: 70px 0;
    }

    .footer-section {
        text-align: center;
    }

    .footer-about {
        margin: auto;
    }

    .social-icons {
        justify-content: center;
    }

    .footer-bottom {
        justify-content: center;
    }
}

@media(max-width:767px) {

    .location-title {
        font-size: 34px;
    }

    .location-map iframe {
        height: 320px;
    }

    .footer-section {
        padding: 70px 0 30px;
    }
}

.ContactInfoInnerTxt,
.ContactEmail {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word; /* breaks very long strings */
    white-space: normal;
}

.ContactInfoTxt {
    min-width: 0; /* Important when inside a flex container */
    flex: 1;
}

/* ================================================================
   ELD-ELDORADO REDESIGN CSS
   Moved here from per-file <style> blocks so all custom styling for
   this tenant lives in this one stylesheet, matching how the rest of
   the product is structured. Nothing below changes any selector,
   value, or cascade behavior from where it used to live inline —
   this is a straight relocation, not a rewrite. Section order below
   follows page order (header -> hero -> homepage -> footer).
   ================================================================ */

/* ---------------------------------------------------------------
   HEADER / TOP BAR / NAV  (from _MasterPageHeader.cshtml)
   --------------------------------------------------------------- */
/* ============================================================
       ELD-Eldorado redesign — shared design tokens (header section)
       Reused by later sections (hero, footer, etc.) as the redesign
       continues.
       ============================================================ */
:root {
    --eld-navy: #24331c;
    --eld-navy-deep: #17140f;
    --eld-brass: #e7a73b;
    --eld-brass-soft: #f3c56b;
    --eld-burgundy: #c1401f;
    --eld-cream: #f6efdc;
    --eld-cream-soft: #fffbf2;
    --eld-ink: #17140f;
}

/* header shell = positioning context for the overlapping logo card */
.eld-header-shell {
    position: relative;
    background-color: var(--eld-navy-deep) !important;
    background-image: none !important;
}

/* ---- top bar ---- */
.eld-topbar {
    background-color: var(--eld-navy-deep);
    color: rgba(247,241,230,.72);
    font-family: 'Inter',sans-serif;
    font-size: .78rem;
    border-bottom: 1px solid rgba(247,241,230,.08);
}

.eld-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 9px 24px 9px 220px; /* left padding clears the overlapping logo card + a gap, same reserve as .eld-nav-inner */
    min-height: 38px; /* locked so the logo card's overlap-into-topbar offset below always lines up */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.eld-topbar-delivery a {
    color: var(--eld-brass-soft) !important;
    font-weight: 600;
}

.eld-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.eld-topbar-account a {
    color: rgba(247,241,230,.85) !important;
}

    .eld-topbar-account a:hover {
        color: #fff !important;
    }

.eld-divider {
    margin: 0 8px;
    opacity: .4;
}

.eld-socials {
    display: flex;
    gap: 8px;
}

    .eld-socials a {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid rgba(247,241,230,.28);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(247,241,230,.85) !important;
        font-size: .68rem;
        transition: background .2s ease, color .2s ease, border-color .2s ease;
    }

        .eld-socials a:hover {
            background: var(--eld-brass);
            border-color: var(--eld-brass);
            color: var(--eld-navy-deep) !important;
        }

/* ---- nav row: white bar, dark text, single gold CTA ---- */
.eld-navbar {
    background-color: #ffffff !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important; /* Bootstrap's .navbar adds its own padding-y by default — all spacing here comes from .eld-nav-inner instead, so this must be zero for the logo-overlap math to line up */
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid rgba(24,42,77,.08);
    transition: box-shadow .25s ease;
}

.eld-header-shell.eld-scrolled .eld-navbar {
    box-shadow: 0 14px 28px -18px rgba(15,26,48,.45);
}
/* the Bootstrap ".row.pt-2" wrapper around the navbar also adds an 8px
       gap by default — scoped reset so nothing sits between the top bar
       and the nav row. Added on 2026-09-08: this row has no .col-* children
       at all (it just wraps the single .eld-navbar div), so Bootstrap's
       usual -12px left/right row margins serve no layout purpose here and
       were only pushing the row 12px past the viewport edge on both sides —
       the actual, page-wide cause of the horizontal scrollbar that was
       visible at the bottom of every page (first noticed near the footer,
       but present on every page since this wrapper is in the shared
       header). Zeroing the margins removes that bleed without touching the
       row's other spacing. */
.eld-header-shell .row.pt-2 {
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.eld-nav-inner {
    position: relative; /* containing block for .eld-brand-card, so it sticks/stacks together with the nav */
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 18px 24px 18px 220px; /* left padding reserves room for the overlapping logo card + a gap */
    min-height: 78px;
    transition: padding .25s ease, min-height .25s ease;
}

.eld-header-shell.eld-scrolled .eld-nav-inner {
    padding-left: 112px;
    min-height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* the plain default Bootstrap toggler icon was rendering as a blank
       box on this site (its background-image gets lost against the global
       stylesheet), so this draws its own explicit 3-line hamburger icon in
       the site's navy tone instead of relying on Bootstrap's default. */
.npb-nav-toggle {
    background: rgba(23,20,15,.06) !important;
    border: none !important;
    width: 44px;
    height: 40px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: none !important;
    transition: background-color .2s ease;
}

    .npb-nav-toggle:hover {
        background: rgba(23,20,15,.14) !important;
    }

    .npb-nav-toggle:focus {
        box-shadow: none !important;
        outline: none;
    }

    .npb-nav-toggle .navbar-toggler-icon {
        width: 20px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath stroke='rgba(23,20,15,0.92)' stroke-width='2' stroke-linecap='round' d='M0 1h20M0 8h20M0 15h20'/%3E%3C/svg%3E") !important;
        background-size: 20px 16px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

.eld-offcanvas {
    background-color: #ffffff !important;
    z-index: 1045 !important;
}

    .eld-offcanvas .offcanvas-header .btn-close {
        filter: none !important;
    }

.eld-nav-links .nav-link {
    font-family: 'Inter',sans-serif !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    color: var(--eld-navy) !important;
    text-transform: none !important;
    letter-spacing: .01em;
}

    .eld-nav-links .nav-link:hover, .eld-nav-links .nav-link:focus {
        color: var(--eld-burgundy) !important;
    }

/* Arrow indicator for "Catering" / "More" — the global site stylesheet hides
       Bootstrap's default caret entirely, so without this there's no visual
       cue at all that these are dropdowns. Updated on 2026-09-07 to a solid
       downward-pointing arrowhead (was a thin outlined chevron before). */
.eld-nav-links .dropdown-toggle::after {
    display: inline-block !important;
    visibility: visible !important;
    content: "" !important;
    width: 0;
    height: 0;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 5.5px solid currentColor;
    margin-left: 6px;
    vertical-align: middle;
    transform: rotate(0deg);
    transition: transform .2s ease;
}

.eld-nav-links .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.eld-dropdown-menu {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 26px 50px -22px rgba(15,26,48,.4), 0 4px 14px -6px rgba(15,26,48,.15) !important;
    padding: 10px !important;
    margin-top: 14px !important;
    min-width: 230px;
    text-align: left !important;
    animation: eldDropdownIn .18s ease;
}

@keyframes eldDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.eld-dropdown-menu .dropdown-item {
    color: var(--eld-navy) !important;
    font-family: 'Inter',sans-serif;
    font-size: .88rem;
    font-weight: 500;
    padding: 11px 16px !important;
    border-radius: 6px !important;
    transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}

.eld-dropdown-menu li + li {
    margin-top: 2px;
}

.eld-dropdown-menu .dropdown-item:hover,
.eld-dropdown-menu .dropdown-item:focus {
    background-color: var(--eld-cream) !important;
    color: var(--eld-burgundy) !important;
    padding-left: 20px !important;
}

.eld-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px !important;
    font-family: 'Inter',sans-serif;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 3px !important;
    transition: transform .2s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
}

.eld-btn-solid {
    background-color: var(--eld-brass) !important;
    color: var(--eld-navy-deep) !important;
    border: none !important;
}

    .eld-btn-solid:hover {
        background-color: var(--eld-brass-soft) !important;
        color: var(--eld-navy-deep) !important;
        transform: translateY(-2px);
    }

.eld-btn-outline {
    background-color: transparent !important;
    color: var(--eld-cream-soft) !important;
    border: 1.5px solid rgba(247,241,230,.55) !important;
}

    .eld-btn-outline:hover {
        background-color: rgba(247,241,230,.1) !important;
        border-color: #fff !important;
        color: var(--eld-cream-soft) !important;
        transform: translateY(-2px);
    }

.eld-order-cta {
    margin-left: auto;
}

/* ---- overlapping logo card ----
       Header-Logo.png IS the finished card already (white card, border,
       rounded corners, "Diner" wordmark all baked into the PNG, with
       transparent pixels outside the rounded shape) — so this wrapper
       adds NO background/border/shadow of its own. It only positions the
       image and lets width drive height via the image's own aspect ratio,
       so neither logo file ever gets stretched or letterboxed.

       It now lives INSIDE .eld-nav-inner (the sticky nav's own content
       box) instead of being a separate sibling of the whole nav. Two bugs
       came from it living outside: (1) it was anchored to the page-scrolling
       header shell while the nav bar itself was the only thing actually
       pinned, so the logo scrolled away and "disappeared" while the sticky
       nav stayed put; (2) it sat in a different stacking context than the
       mobile offcanvas menu, so its z-index was compared against the whole
       nav bar rather than against the open menu directly, letting it show
       through on top of the drawer. Nesting it here fixes both. */
.eld-brand-card {
    position: absolute;
    /* default: pokes up by the top bar's REAL measured height (set as
           --eld-topbar-h by the script below) so it lines up flush with
           the very top of the page, the same way it did before; scrolled
           state resets this to 0 since the top bar has scrolled out of view.
           38px is just a fallback for the instant before JS runs. */
    top: calc(-1 * var(--eld-topbar-h, 38px));
    left: 24px; /* same 24px edge gap as .eld-nav-inner's own right padding (where the Order Online button sits), so the logo doesn't touch the viewport edge while everything else on the row has breathing room */
    z-index: 5; /* just needs to clear this row's own toggle button; the offcanvas (z-index 1045+) still wins when open */
    width: 150px; /* Header-Logo.png is 180x216 — height follows automatically */
    transition: width .25s ease, top .25s ease;
}

    .eld-brand-card a {
        display: block;
        position: relative;
    }

    .eld-brand-card img {
        width: 100%;
        height: auto;
        display: block;
        transition: opacity .25s ease;
    }

    .eld-brand-card .eld-logo-full {
        position: relative;
        opacity: 1;
    }

    .eld-brand-card .eld-logo-compact {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    /* inner pages (no hero underneath): a touch smaller so it barely/doesn't overlap */
    .eld-brand-card:not(.eld-brand-card--hero) {
        width: 104px;
    }

/* once the sticky nav is scrolled (desktop only — see the mobile block
       below), crossfade to the compact badge (63x88) and shrink it */
.eld-header-shell.eld-scrolled .eld-brand-card {
    top: 0;
    width: 52px !important;
}

    .eld-header-shell.eld-scrolled .eld-brand-card .eld-logo-full {
        opacity: 0;
    }

    .eld-header-shell.eld-scrolled .eld-brand-card .eld-logo-compact {
        opacity: 1;
    }

/* ---- mobile / responsive layout (matches Bootstrap's own lg breakpoint,
       i.e. exactly when the offcanvas becomes a drawer and the hamburger
       shows) — a completely different, simpler 3-column header:
       [small inline logo]  [Order Online]  [collapse button] ---- */
@media(max-width:991.98px) {
    .eld-topbar-inner {
        padding-left: 24px;
    }
    /* no more overlapping logo to clear at this width */

    .eld-nav-inner {
        padding: 10px 16px;
        min-height: 64px;
        justify-content: space-between;
    }

    .eld-header-shell.eld-scrolled .eld-nav-inner {
        padding-left: 16px;
    }

    .eld-brand-card {
        position: static; /* back into the normal flex flow, left-most because it's first in the DOM */
        width: 48px;
        top: auto;
        left: auto;
    }

    .eld-header-shell.eld-scrolled .eld-brand-card {
        width: 48px !important;
    }
    /* always show the small transparent logo at this size — the big
           card with its own overlap only makes sense on desktop */
    .eld-brand-card .eld-logo-full {
        opacity: 0 !important;
        position: absolute !important;
    }

    .eld-brand-card .eld-logo-compact {
        opacity: 1 !important;
        position: relative !important;
    }

    /* Order Online moves fully into the collapse menu below (with Home,
           Catering, Gallery, etc.) instead of sitting as its own button in
           this row — that's also what was crowding the toggle button out
           of view on narrow screens. Now this row is just [logo] [toggle]. */
    .eld-order-cta {
        display: none;
    }

    .eld-nav-toggle {
        order: 2;
    }

    /* center every item in the collapse menu, Order Online included,
           to match the rest of the list */
    .eld-nav-links {
        text-align: center;
    }

        .eld-nav-links li {
            display: flex;
            justify-content: center;
        }
}

/* keep original floating-cart / bottom-cart markup + JS hooks, just re-skin the colors */
.floatingcart {
    background: var(--eld-brass) !important;
    border-color: var(--eld-navy-deep) !important;
}

.cart-item-number {
    color: var(--eld-navy-deep) !important;
}

.bottomCart {
    background-color: var(--eld-navy) !important;
    border-color: var(--eld-brass) !important;
}

/* ---------------------------------------------------------------
   HOME PAGE HERO / SLIDER  (from _HomePageSlider.cshtml)
   --------------------------------------------------------------- */
/* ============ ELD HERO ============ */
.eld-hero {
    position: relative;
    min-height: 92vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--eld-cream-soft);
    background-color: var(--eld-navy-deep);
}

.eld-hero-slides {
    position: absolute;
    inset: 0;
}

.eld-hero-bg {
    position: absolute;
    inset: 0;
    background-position: center 46%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.8s ease;
    animation: eldKenburns 24s ease-in-out infinite alternate;
}

    .eld-hero-bg.is-active {
        opacity: 1;
        z-index: 1;
    }

@keyframes eldKenburns {
    0% {
        transform: scale(1.05) translate(0,0);
    }

    100% {
        transform: scale(1.15) translate(-1.5%, -1%);
    }
}


.eld-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(15,26,48,.75) 0%, rgba(15,26,48,.28) 30%, rgba(15,26,48,.5) 65%, rgba(10,17,32,.95) 100%), linear-gradient(100deg, rgba(15,26,48,.92) 0%, rgba(15,26,48,.1) 55%);
}

.eld-hero-tags {
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.eld-hero-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15,26,48,.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(247,241,230,.18);
    color: var(--eld-cream-soft);
    padding: 11px 18px;
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: right;
    max-width: 250px;
    line-height: 1.4;
    box-shadow: 0 14px 30px -14px rgba(0,0,0,.6);
    border-radius: 2px;
}

    .eld-hero-tag .ico {
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--eld-brass);
        color: var(--eld-navy-deep);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .eld-hero-tag.alt {
        background: rgba(247,241,230,.12);
    }

        .eld-hero-tag.alt .ico {
            background: var(--eld-cream-soft);
        }

.eld-hero-content {
    position: relative;
    z-index: 4;
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 64px 32px 56px;
}

    .eld-hero-content .inner {
        width: 100%;
        max-width: 1240px;
        margin: 0;
        text-align: left;
    }

.eld-hero-eyebrow {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: .7rem;
    font-weight: 600;
    color: var(--eld-brass-soft);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

    .eld-hero-eyebrow::before {
        content: "";
        width: 36px;
        height: 1px;
        background: var(--eld-brass-soft);
    }

.eld-hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    line-height: 1.05;
    font-size: clamp(2.5rem, 6vw, 5.2rem);
    max-width: 17ch;
    color: #fff;
    margin: 0;
}

    .eld-hero h1 .script {
        font-family: 'Pinyon Script', cursive;
        font-weight: 400;
        font-size: 1.12em;
        color: var(--eld-brass-soft);
        display: inline-block;
    }

.eld-hero p.lede {
    margin-top: 24px;
    max-width: 48ch;
    font-family: 'Inter', sans-serif;
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(247,241,230,.86);
    font-weight: 300;
}

.eld-hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 36px;
}

    .eld-hero-ctas .eld-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

.eld-hero-strip {
    position: absolute;
    right: 32px;
    bottom: 28px;
    z-index: 5;
    max-width: 340px;
    background: rgba(15,26,48,.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(247,241,230,.18);
    border-radius: 2px;
    box-shadow: 0 14px 30px -14px rgba(0,0,0,.6);
}

    .eld-hero-strip .inner {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px 20px;
        font-family: 'Inter', sans-serif;
        font-size: .8rem;
        color: rgba(247,241,230,.9);
    }

    .eld-hero-strip .row2 {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
    }

    .eld-hero-strip .item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .eld-hero-strip .item a {
            color: inherit;
            text-decoration: none;
        }

@media(max-width:760px) {
    .eld-hero {
        min-height: 640px;
        height: auto;
    }

    .eld-hero-tags {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 24px 16px 0;
        gap: 8px;
    }

    .eld-hero-tag {
        font-size: .64rem;
        padding: 9px 14px;
        max-width: 200px;
        text-align: left;
    }

        .eld-hero-tag .ico {
            width: 22px;
            height: 22px;
        }

    .eld-hero-content {
        flex: 0 0 auto;
        padding: 48px 20px 20px;
    }

    .eld-hero-strip {
        position: static;
        max-width: none;
        margin: 0 20px 20px;
        border-radius: 2px;
    }

        .eld-hero-strip .inner {
            padding: 14px 16px;
            gap: 8px;
        }

        .eld-hero-strip .row2 {
            gap: 8px 18px;
        }
}

@media(prefers-reduced-motion: reduce) {
    .eld-hero-bg {
        animation: none;
    }
}

/* ---- checker strip divider: thin decorative band directly under the
       hero, before the welcome section. The reference template pairs the
       gold squares with "transparent" and lets the plain page background
       show through — but in this project the hero (and this strip) render
       nested inside the header's own dark .eld-header-shell wrapper, so
       "transparent" here would reveal that navy instead of the cream
       section underneath. Using the welcome section's actual cream color
       as the second, explicit color avoids relying on what happens to be
       behind it and always gives the gold/cream checkerboard look. */
.eld-checker {
    height: 14px;
    background: repeating-conic-gradient(var(--eld-brass) 0% 25%, var(--eld-cream-soft) 0% 50%) 0 0/22px 22px;
    /* no opacity here on purpose: both colors above are already solid,
           exact design colors — the reference template's opacity:.85 was
           only there to soften "transparent" against a busy backdrop, and
           applying it to two solid colors just dulls/greys them out by
           blending the whole strip with the dark wrapper behind it. */
}

/* ---------------------------------------------------------------
   HOME PAGE CONTAINER  (from _HomePageContainer.cshtml)
   --------------------------------------------------------------- */
/* Welcome section + hours/promo side cards + feature grid */
/* ============ ELD WELCOME ============ */
.eld-welcome {
    padding: 90px 0 70px;
    background: var(--eld-cream-soft);
}

.eld-welcome-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 44px;
    align-items: start;
}

@media(max-width:900px) {
    .eld-welcome-grid {
        grid-template-columns: 1fr;
    }
}

.eld-welcome-copy .script {
    font-family: 'Pinyon Script', cursive;
    font-size: 2.6rem;
    color: var(--eld-navy);
    display: block;
    margin-bottom: 4px;
    line-height: 1;
}

.eld-welcome-copy h2 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.5rem,2.6vw,2rem);
    letter-spacing: .01em;
    color: var(--eld-ink);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--eld-brass);
    padding-bottom: 20px;
}

.eld-welcome-copy p {
    color: #4a423b;
    line-height: 1.8;
    font-size: .98rem;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

.eld-welcome-copy a.eld-inline-link {
    color: var(--eld-burgundy);
    font-weight: 600;
    border-bottom: 1px solid currentColor;
    text-decoration: none;
}

/* !important here (matching the header partial's .eld-btn-solid rule)
       is required, not just belt-and-suspenders: the shared/global
       .eld-btn-solid in _MasterPageHeader.cshtml sets the gold "Order
       Online" color with !important, which otherwise wins over this more
       specific selector regardless of specificity, turning this button
       gold instead of the navy the template actually uses here. */
.eld-welcome-copy .eld-btn-solid {
    margin-top: 12px;
    background: var(--eld-navy) !important;
    color: #fff !important;
    box-shadow: none !important;
}

    .eld-welcome-copy .eld-btn-solid:hover {
        background: var(--eld-navy-deep) !important;
        color: #fff !important;
    }

.eld-side-cards {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.eld-hours-panel {
    background: var(--eld-navy);
    color: var(--eld-cream-soft);
    padding: 32px 30px;
    position: relative;
}

    .eld-hours-panel .laurel-top {
        display: flex;
        justify-content: center;
        color: var(--eld-brass-soft);
        margin-bottom: 14px;
    }

    .eld-hours-panel .eld-hours-title {
        text-align: center;
        font-family: 'Fraunces', serif;
        font-style: italic;
        font-size: 1.3rem;
        color: var(--eld-brass-soft);
        margin-bottom: 18px;
    }

    .eld-hours-panel #eldBusinessHours {
        font-family: 'Inter', sans-serif;
        font-size: .86rem;
    }

        .eld-hours-panel #eldBusinessHours table {
            width: 100%;
        }

        .eld-hours-panel #eldBusinessHours td {
            padding: 10px 0;
            border-bottom: 1px solid rgba(247,241,230,.12);
        }

            .eld-hours-panel #eldBusinessHours td:first-child {
                color: rgba(247,241,230,.65);
            }

            .eld-hours-panel #eldBusinessHours td:last-child {
                font-weight: 600;
                color: #fff;
                text-align: right;
            }

    .eld-hours-panel .eld-hours-fallback {
        text-align: center;
        color: rgba(247,241,230,.7);
        font-size: .86rem;
    }

.eld-promo-panel {
    background: #fff;
    border: 1px solid var(--eld-line, rgba(24,42,77,.14));
    padding: 28px 26px;
    text-align: center;
}

    .eld-promo-panel img {
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: 50%;
        margin: 0 auto 14px;
        border: 3px solid var(--eld-brass);
        display: block;
    }

    .eld-promo-panel h4 {
        font-family: 'Fraunces', serif;
        font-size: 1.3rem;
        color: var(--eld-navy);
        margin-bottom: 8px;
    }

    .eld-promo-panel p {
        font-size: .86rem;
        color: #6b5f56;
        line-height: 1.5;
        font-family: 'Inter', sans-serif;
    }

/* ============ ELD FEATURE GRID ============ */
.eld-features {
    padding: 20px 0 110px;
    background: var(--eld-cream-soft);
}

.eld-feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media(max-width:980px) {
    .eld-feat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:560px) {
    .eld-feat-grid {
        grid-template-columns: 1fr;
    }
}

.eld-feat-card {
    background: #fff;
    border: 1px solid rgba(24,42,77,.14);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}

    .eld-feat-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 60px -25px rgba(15,26,48,.5);
    }

    .eld-feat-card .media {
        position: relative;
        aspect-ratio: 4/3;
        overflow: hidden;
    }

        .eld-feat-card .media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
            display: block;
        }

    .eld-feat-card:hover .media img {
        transform: scale(1.08);
    }

    .eld-feat-card .body {
        padding: 22px 22px 26px;
    }

    .eld-feat-card h3 {
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: .92rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--eld-navy);
        margin-bottom: 8px;
    }

    .eld-feat-card p {
        font-size: .85rem;
        color: #6b5f56;
        line-height: 1.55;
        margin-bottom: 16px;
        font-family: 'Inter', sans-serif;
    }

    .eld-feat-card a.eld-feat-link {
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--eld-burgundy);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
    }

        .eld-feat-card a.eld-feat-link svg {
            transition: transform .2s ease;
        }

        .eld-feat-card a.eld-feat-link:hover svg {
            transform: translateX(4px);
        }
/* Testimonial section wrapper (navy background + heading) */
/* ============ ELD TESTIMONIAL ============ */
.eld-testimonial {
    background: var(--eld-navy);
    color: var(--eld-cream-soft);
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .eld-testimonial .eld-laurel-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: .06;
        width: 420px;
        height: 420px;
        color: var(--eld-brass-soft);
    }

.eld-testimonial-inner {
    position: relative;
    z-index: 2;
}

.eld-testimonial-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: .74rem;
    font-weight: 600;
    color: var(--eld-brass-soft);
    font-family: 'Inter', sans-serif;
    margin-bottom: 10px;
}

.eld-testimonial-heading {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.7rem,3vw,2.3rem);
    color: #fff;
    margin: 0 0 46px;
}
/* Private Parties split section */
/* ============ ELD PRIVATE PARTIES SPLIT ============ */
.eld-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--eld-cream-soft);
}

@media (max-width:900px) {
    .eld-parties {
        grid-template-columns: 1fr;
    }
}

.eld-parties-media {
    position: relative;
    min-height: 460px;
    overflow: hidden;
}

    .eld-parties-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.eld-parties-copy {
    padding: 90px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width:640px) {
    .eld-parties-copy {
        padding: 64px 28px;
    }
}

.eld-parties-copy .eld-parties-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .78rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: var(--eld-burgundy);
    margin-bottom: 16px;
}

.eld-parties-copy h2 {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.7rem,3vw,2.3rem);
    color: var(--eld-navy);
    max-width: 16ch;
    margin: 0;
}

.eld-parties-copy p {
    margin-top: 20px;
    color: #4a423b;
    line-height: 1.75;
    font-size: .98rem;
    max-width: 46ch;
    font-family: 'Inter', sans-serif;
}

/* _MasterPageHeader.cshtml's global .eld-btn-solid rule is gold and
       !important (built for the hero's "Order Online" button) — same
       situation as the Welcome section's Read More button, so this
       override needs matching !important to win on a more specific
       selector rather than relying on specificity alone. */
.eld-parties-copy .eld-btn-solid {
    margin-top: 28px;
    background: var(--eld-navy) !important;
    color: #fff !important;
    box-shadow: none !important;
    align-self: flex-start;
}

    .eld-parties-copy .eld-btn-solid:hover {
        background: var(--eld-navy-deep) !important;
        color: #fff !important;
    }

/* ---------------------------------------------------------------
   HOME PAGE TESTIMONIAL SWIPER DETAIL  (from _HomePageTestimonials.cshtml)
   --------------------------------------------------------------- */
/* ---- redesigned to match the reference: one elegant centered quote
       at a time instead of a 2-up card grid, sitting directly on the
       navy .eld-testimonial section from _HomePageContainer.cshtml.
       Still the same real Swiper carousel over the same session-backed
       testimonial data — only the visual treatment changed. ---- */
.eld-testimonial-swiper {
    max-width: 680px;
    margin: 0 auto;
}

.eld-testimonial-card {
    padding: 0 8px;
}

.eld-testimonial-mark {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 4rem;
    color: var(--eld-brass);
    line-height: 1;
    margin-bottom: 4px;
}

.eld-testimonial-text {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.3rem,2.4vw,1.7rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;
    color: #fff;
    margin: 0;
}

.eld-testimonial-author {
    margin-top: 26px;
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--eld-brass-soft);
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

/* Swiper's own nav arrows aren't part of the reference's minimal look
       (just quote + dots) — hidden visually, but the real Swiper instance
       (and keyboard/swipe navigation) still works underneath. */
.eld-testimonial-swiper .swiper-button-next,
.eld-testimonial-swiper .swiper-button-prev {
    display: none;
}

/* ELD-StyleSheet.css carries a global, unscoped .swiper-pagination /
       .swiper-pagination-bullet rule (built for the hero slider's dot
       strip) that uses !important on position, size, color and layout.
       That rule hits EVERY Swiper pagination on the page, including this
       one, so every property it sets has to be matched with !important
       here too — a more specific selector alone isn't enough to win
       against an !important rule (same issue as the earlier Read More
       button color bug). */
.eld-testimonial-swiper .swiper-pagination-test {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    margin-top: 34px;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

    .eld-testimonial-swiper .swiper-pagination-test .swiper-pagination-bullet {
        width: 6px !important;
        height: 6px !important;
        display: inline-block !important;
        border-radius: 50% !important;
        background-color: rgba(247,241,230,.3) !important;
        background-position: 0 0 !important;
        opacity: 1 !important;
        margin: 0 !important;
    }

    .eld-testimonial-swiper .swiper-pagination-test .swiper-pagination-bullet-active {
        width: 6px !important;
        height: 6px !important;
        background-color: var(--eld-brass) !important;
        border-radius: 50% !important;
        opacity: 1 !important;
    }

/* ---------------------------------------------------------------
   FOOTER  (from _MasterPageFooter.cshtml)
   --------------------------------------------------------------- */
/* ============ ELD FOOTER ============
       3-column layout matching the reference exactly: Brand+about |
       Delivery Info | Get in Touch. "Delivery Info" and the fax line use
       real data that was already being fetched in this file's code block
       but never displayed (deliveryMinDescription from Configurations.xml,
       footerHoursEncoded from the branch's business hours, FooterFax from
       faxList) — not new backend calls, just finishing existing bindings.
       Real login/register/logout stays in the bottom bar since the plain
       reference mockup has no auth system to model that on. */
.eld-footer {
    background: var(--eld-navy-deep);
    color: rgba(247,241,230,.7);
}

/* The reference template aligns every normal content section (topbar,
       welcome, features, footer) with ONE shared .wrap rule:
       max-width:1240px; margin:0 auto; padding:0 32px (20px ≤640px) — a
       smooth two-tier system with no breakpoint jump. This file was using
       Bootstrap's own .container instead, which snaps to a different
       max-width/padding at fixed breakpoints (576/768/992...), causing the
       footer's left/right edge to drift out of step with the rest of the
       page as the viewport narrows. .eld-footer-inner replicates the
       reference's .wrap exactly instead. */
.eld-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width:640px) {
    .eld-footer-inner {
        padding: 0 20px;
    }
}

/* padding-top/-bottom only (NOT the shorthand "padding") — this class is
       combined with .eld-footer-inner on the same element
       (<div class="eld-footer-inner eld-footer-top">), and the shorthand
       "padding: 70px 0 56px" was resetting left/right padding to 0 on that
       element, silently wiping out .eld-footer-inner's own 32px/20px side
       padding. That's the real cause of the footer content drifting out of
       alignment with the rest of the page at narrow widths. */
.eld-footer-top {
    padding-top: 70px;
    padding-bottom: 56px;
}

.eld-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 40px;
}

    /* Grid/flex items default to min-width:auto, which refuses to shrink a
       column below its content's intrinsic width — a long real address,
       phone number, or the "Powered by..." line can then push past the
       column edge instead of wrapping. min-width:0 plus wrapping below
       lets it break onto new lines and stay inside the viewport instead. */
    .eld-footer-grid > div {
        min-width: 0;
    }

.eld-footer-about,
.eld-footer-info-item,
.eld-footer-contact div,
.eld-footer-contact a {
    overflow-wrap: break-word;
    word-break: break-word;
}

.eld-footer-logo {
    max-width: 100%;
}

@media (max-width:900px) {
    .eld-footer-grid {
        grid-template-columns: 1fr;
    }
}

.eld-footer-info-item + .eld-footer-info-item {
    margin-top: 12px;
}

.eld-footer-info-item strong {
    color: #fff;
}

.eld-footer-brand {
    margin-bottom: 18px;
}

/* Plain logo, no badge circle and no separate text wordmark — the
       Small-Header-Logo.png artwork already has "Eldorado" and "Diner"
       baked into it (same file, same plain treatment the header itself
       uses for .eld-logo-compact), so wrapping it in a circle and
       repeating the name in text next to it was redundant. */
.eld-footer-logo {
    height: 90px;
    width: auto;
}

.eld-footer-about {
    font-size: .86rem;
    line-height: 1.8;
    max-width: 34ch;
    margin: 0;
}

.eld-footer .eld-footer-heading {
    font-family: 'Fraunces', serif;
    font-size: 1.15rem;
    color: var(--eld-brass-soft);
    margin-bottom: 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(247,241,230,.15);
    padding-bottom: 12px;
}

.eld-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .eld-footer-links li {
        margin-bottom: 10px;
    }

    .eld-footer-links a {
        color: rgba(247,241,230,.75);
        font-size: .86rem;
        text-decoration: none;
        transition: color .2s ease;
    }

        .eld-footer-links a:hover {
            color: var(--eld-brass-soft);
        }

.eld-footer-contact div,
.eld-footer-contact a {
    display: block;
    font-size: .86rem;
    line-height: 1.9;
    color: rgba(247,241,230,.75);
    text-decoration: none;
}

    .eld-footer-contact a:hover {
        color: var(--eld-brass-soft);
    }

.eld-footer-contact i {
    width: 16px;
    color: var(--eld-brass-soft);
    margin-right: 6px;
}

.eld-footer-contact strong {
    color: #fff;
}

.eld-footer-bottom {
    border-top: 1px solid rgba(247,241,230,.1);
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .76rem;
    color: rgba(247,241,230,.5);
}

    .eld-footer-bottom > div {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .eld-footer-bottom a.eld-footer-auth {
        color: rgba(247,241,230,.75);
        text-decoration: none;
    }

        .eld-footer-bottom a.eld-footer-auth:hover {
            color: var(--eld-brass-soft);
        }

.eld-footer-payicons {
    display: flex;
    gap: 8px;
}

    .eld-footer-payicons span {
        border: 1px solid rgba(247,241,230,.25);
        padding: 3px 8px;
        border-radius: 2px;
        font-size: .65rem;
        letter-spacing: .03em;
        color: rgba(247,241,230,.6);
    }

/* Page-load spinner (#loader div, added in _Layout.cshtml, shown until
   window.onload fires and toggled off by adding .fade-out). It had no CSS
   anywhere, so it wasn't rendering as an overlay at all - this gives it one,
   built as a pure CSS spinner (no HTML changes needed) so it reads as an
   intentional "page is loading" indicator instead of a stray mark. */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--eld-cream-soft);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.2s ease;
}

    #loader::before {
        content: "";
        width: 56px;
        height: 56px;
        border: 5px solid var(--eld-brass-soft);
        border-top-color: var(--eld-navy);
        border-radius: 50%;
        animation: eld-loader-spin 0.8s linear infinite;
    }

    #loader.fade-out {
        opacity: 0;
        pointer-events: none;
    }

@keyframes eld-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/*********************************
      VISIT US (above footer)
      Added 2026-09-08: new section sitting directly above the footer,
      showing a map + address/phone-email/hours + a "Get directions" button.
      Rendered from _MasterPageFooter.cshtml so it appears on every page.
**********************************/

.eld-visitus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--eld-cream-soft);
    align-items: stretch;
}

.eld-visitus-map {
    min-height: 380px;
    position: relative;
}

.eld-visitus-iframe {
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
    display: block;
}

.eld-visitus-content {
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.eld-visitus-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--eld-brass);
    margin-bottom: 10px;
}

.eld-visitus-heading {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--eld-ink);
    margin: 0 0 28px 0;
}

.eld-visitus-row {
    margin-bottom: 20px;
}

    .eld-visitus-row:last-of-type {
        margin-bottom: 28px;
    }

.eld-visitus-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--eld-brass);
    margin-bottom: 4px;
}

.eld-visitus-value {
    font-size: 16px;
    color: var(--eld-ink);
    line-height: 1.5;
}

.eld-visitus-contact-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

.eld-visitus-phone,
.eld-visitus-email {
    color: var(--eld-ink);
    text-decoration: none;
    transition: color .2s ease;
}

.eld-visitus-phone {
    font-weight: 700;
}

    .eld-visitus-phone:hover,
    .eld-visitus-email:hover {
        color: var(--eld-brass);
    }

.eld-visitus-btn {
    display: inline-block;
    align-self: flex-start;
    background: var(--eld-brass);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .04em;
    padding: 14px 32px;
    border-radius: 6px;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .eld-visitus-btn:hover {
        background: var(--eld-brass);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(201,150,43,.3);
    }

@media (max-width: 991px) {

    .eld-visitus {
        grid-template-columns: 1fr;
    }

    .eld-visitus-map,
    .eld-visitus-iframe {
        min-height: 320px;
    }

    .eld-visitus-content {
        padding: 40px 28px;
    }

    .eld-visitus-heading {
        font-size: 26px;
    }
}

@media (max-width: 576px) {

    .eld-visitus-content {
        padding: 32px 20px;
    }

    .eld-visitus-contact-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}
/* =====================================================================
   NPB-NephewsPizza -- Home / Header / Footer redesign
   Added per the pizza-branded reference template supplied by the client.
   Every rule below is scoped under its own .npb- prefixed class, so none
   of it can affect any other page's existing styles. Visual design only
   -- no markup here drives any business logic.
   ===================================================================== */

:root {
    --npb-ink: #17140f;
    --npb-forest: #24331c;
    --npb-forest-2: #2c3f22;
    --npb-crust: #c1401f;
    --npb-crust-dark: #9c3016;
    --npb-gold: #e7a73b;
    --npb-gold-light: #f3c56b;
    --npb-cream: #f6efdc;
    --npb-paper: #fffbf2;
    --npb-line: rgba(23,20,15,0.12);
    --npb-line-light: rgba(255,251,242,0.18);
    --npb-shadow: 0 18px 40px -18px rgba(23,20,15,0.35);
}

.npb-wrap {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 32px;
}

.npb-eyebrow {
    font-family: 'Space Mono',monospace;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}

.npb-eyebrow-light {
    color: var(--npb-gold-light);
}

.npb-eyebrow-crust {
    color: var(--npb-crust);
}

.npb-h2 {
    font-family: 'Fraunces',serif;
    font-weight: 700;
    font-size: clamp(30px,4vw,46px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 14px 0 0;
    color: var(--npb-ink);
}

    .npb-h2 em,
    .npb-hero-h1 em {
        font-style: italic;
        color: var(--npb-gold);
    }

.npb-rule {
    width: 56px;
    height: 3px;
    background: var(--npb-gold);
    margin: 22px 0;
}

.npb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Mono',monospace;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 15px 26px;
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

    .npb-btn:hover {
        transform: translateY(-2px);
    }

.npb-btn-gold {
    background: var(--npb-gold);
    color: var(--npb-ink);
}

    .npb-btn-gold:hover {
        background: var(--npb-gold-light);
        color: var(--npb-ink);
    }

.npb-btn-outline {
    border-color: var(--npb-line-light);
    color: var(--npb-paper);
}

    .npb-btn-outline:hover {
        background: rgba(255,251,242,0.08);
        color: var(--npb-paper);
    }

.npb-btn-outline-dark {
    border-color: var(--npb-ink);
    color: var(--npb-ink);
}

    .npb-btn-outline-dark:hover {
        background: var(--npb-ink);
        color: var(--npb-paper);
    }

/* ===== Header shell / top bar ===== */
.npb-header-shell {
    background: var(--npb-paper);
}

.npb-topbar {
    background: var(--npb-ink);
    color: var(--npb-cream);
    font-family: 'Space Mono',monospace;
    font-size: 12px;
}

.npb-topbar-inner {
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 32px;
    flex-wrap: wrap;
    gap: 6px;
}

.npb-topbar-left {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    opacity: .85;
}

    .npb-topbar-left a {
        color: inherit;
    }

        .npb-topbar-left a:hover {
            color: var(--npb-gold);
        }

.npb-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.npb-topbar-account a {
    color: inherit;
    opacity: .85;
}

    .npb-topbar-account a:hover {
        color: var(--npb-gold);
    }

.npb-divider {
    opacity: .4;
    margin: 0 6px;
}

.npb-socials {
    display: flex;
    gap: 10px;
}

    .npb-socials a {
        color: inherit;
        opacity: .85;
        font-size: 13px;
    }

        .npb-socials a:hover {
            color: var(--npb-gold);
            opacity: 1;
        }

/* ===== Main nav ===== */
.npb-navbar {
    background: var(--npb-paper);
    border-bottom: 1px solid var(--npb-line);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.npb-nav-inner {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.npb-brand-card {
    display: inline-flex;
    align-items: center;
}

.npb-brand-logo {
    height: 44px;
    width: auto;
    display: block;
}

.npb-nav-links .nav-link {
    font-family: 'Space Mono',monospace;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--npb-ink) !important;
    position: relative;
    padding: 8px 0 !important;
    margin: 0 17px;
}

    .npb-nav-links .nav-link.active,
    .npb-nav-links .nav-link:hover {
        color: var(--npb-crust) !important;
    }

    .npb-nav-links .nav-link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 4px;
        height: 2px;
        width: 0;
        background: var(--npb-gold);
        transition: width .25s ease;
    }

    .npb-nav-links .nav-link:hover::after {
        width: 100%;
    }

.npb-header-phone {
    font-family: 'Space Mono',monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--npb-ink);
    white-space: nowrap;
}

.npb-order-cta {
    white-space: nowrap;
}

.npb-nav-toggle {
    border: none;
    background: none;
}

.npb-offcanvas {
    background: var(--npb-paper);
}

    .npb-offcanvas .nav-link {
        color: var(--npb-ink) !important;
    }

@media (min-width:992px) {
    .npb-nav-toggle {
        display: none;
    }
}

/* ===== Hero ===== */
.npb-hero {
    position: relative;
    background: var(--npb-forest);
    color: var(--npb-paper);
    padding: 100px 0 118px;
    overflow: visible;
}

.npb-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}

.npb-hero-content {
    max-width: 540px;
}

.npb-hero-h1 {
    font-family: 'Fraunces',serif;
    font-weight: 800;
    margin: 18px 0 0;
    font-size: clamp(36px,5.2vw,60px);
    line-height: 1.05;
    color: var(--npb-paper);
}

.npb-hero-lede {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255,251,242,0.85);
    max-width: 44ch;
    margin: 22px 0 32px;
}

.npb-btn-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.npb-hero-tags {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

    .npb-hero-tags span {
        font-family: 'Space Mono',monospace;
        font-size: 11px;
        letter-spacing: .05em;
        border: 1px solid var(--npb-line-light);
        padding: 6px 11px;
        border-radius: 20px;
        color: rgba(255,251,242,0.8);
        background: rgba(23,20,15,0.25);
    }

.npb-hero-art {
    position: relative;
}

.npb-hero-photos {
    position: relative;
    width: 100%;
    padding-top: 96%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
}

.npb-hero-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}

    .npb-hero-photo.is-active {
        opacity: 1;
    }

.npb-stamp {
    width: 120px;
    height: 120px;
    background: var(--npb-gold);
    color: var(--npb-ink);
    border-radius: 50%;
    border: 2px dashed var(--npb-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 14px 30px -8px rgba(0,0,0,0.5);
}

    .npb-stamp span {
        font-family: 'Space Mono',monospace;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1.5;
    }

.npb-stamp-hero {
    position: absolute;
    z-index: 2;
    left: -30px;
    bottom: -30px;
    transform: rotate(-9deg);
}

/* ===== Ticker ===== */
.npb-ticker {
    background: var(--npb-gold);
    color: var(--npb-ink);
    border-top: 1px solid var(--npb-ink);
    border-bottom: 1px solid var(--npb-ink);
    overflow: hidden;
    white-space: nowrap;
    padding: 11px 0;
}

.npb-ticker-track {
    display: inline-block;
    animation: npbTickerScroll 32s linear infinite;
}

    .npb-ticker-track span {
        font-family: 'Space Mono',monospace;
        font-weight: 700;
        font-size: 12.5px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin: 0 22px;
    }

@keyframes npbTickerScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .npb-ticker-track {
        animation: none;
    }
}

/* ===== Story ===== */
.npb-story {
    background: var(--npb-cream);
    padding: 88px 0;
}

.npb-story-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 70px;
    align-items: center;
}

.npb-story-imgs {
    position: relative;
    height: 420px;
}

    .npb-story-imgs .img-a {
        position: absolute;
        top: 0;
        left: 0;
        width: 78%;
        height: 76%;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: var(--npb-shadow);
        border: 6px solid var(--npb-paper);
    }

    .npb-story-imgs .img-b {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 56%;
        height: 52%;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: var(--npb-shadow);
        border: 6px solid var(--npb-paper);
        transform: rotate(3deg);
    }

    .npb-story-imgs img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.npb-story-copy p {
    font-size: 16px;
    line-height: 1.75;
    color: #3a3428;
    max-width: 52ch;
    margin: 0 0 16px;
}

.npb-story-copy .npb-btn {
    margin-top: 8px;
}

/* ===== Services ===== */
.npb-services {
    background: var(--npb-ink);
    color: var(--npb-paper);
    padding: 90px 0;
}

.npb-services-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 50px;
}

    .npb-services-head .npb-eyebrow {
        justify-content: center;
    }

    .npb-services-head .npb-h2 {
        color: var(--npb-paper);
    }

.npb-service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2px;
    background: var(--npb-line-light);
}

.npb-service-card {
    background: var(--npb-forest);
    padding: 40px 32px;
    position: relative;
    transition: background .3s ease;
}

    .npb-service-card:hover {
        background: var(--npb-forest-2);
    }

.npb-service-num {
    font-family: 'Space Mono',monospace;
    font-size: 13px;
    color: rgba(255,251,242,0.4);
    position: absolute;
    top: 26px;
    right: 28px;
}

.npb-service-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--npb-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 20px;
    color: var(--npb-gold);
}

.npb-service-card h3 {
    font-family: 'Fraunces',serif;
    font-size: 20px;
    color: var(--npb-paper);
    margin-bottom: 12px;
    font-weight: 600;
}

.npb-service-card p {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255,251,242,0.65);
    margin: 0 0 16px;
}

.npb-service-card a.npb-link {
    font-family: 'Space Mono',monospace;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--npb-gold-light);
    border-bottom: 1px solid rgba(231,167,59,0.4);
    padding-bottom: 2px;
}

/* ===== Reviews / testimonials ===== */
.npb-reviews {
    background: var(--npb-paper);
    padding: 90px 0;
}

.npb-reviews-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.35fr;
    gap: 56px;
    align-items: start;
}

    /* Grid items default to min-width:auto, which lets their content's
       intrinsic size push them wider than their track — Swiper measures
       that wrong width on init and never recovers. min-width:0 makes both
       columns actually respect the grid's column sizing. */
    .npb-reviews-grid > * {
        min-width: 0;
    }

.npb-reviews-head {
    max-width: 420px;
    margin: 0;
}

    .npb-reviews-head p {
        font-size: 15px;
        color: #5b5346;
        line-height: 1.7;
        margin-top: 14px;
        max-width: 38ch;
    }

.npb-review-swiper {
    width: 100%;
    min-width: 0;
    padding-bottom: 6px;
}

    .npb-review-swiper .swiper-wrapper {
        align-items: stretch;
    }

.npb-review-card {
    background: var(--npb-cream);
    border-left: 3px solid var(--npb-gold);
    padding: 26px 26px 22px;
    border-radius: 2px;
    height: 100%;
}

    .npb-review-card .stars {
        color: var(--npb-crust);
        font-size: 13px;
        letter-spacing: 2px;
        margin-bottom: 12px;
    }

    .npb-review-card p {
        font-family: 'Fraunces',serif;
        font-style: italic;
        font-size: 16.5px;
        line-height: 1.55;
        margin: 0 0 16px;
        color: var(--npb-ink);
    }

    .npb-review-card .who {
        font-family: 'Space Mono',monospace;
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #5b5346;
    }

/* NPB-StyleSheet.css carries a global, unscoped .swiper-pagination /
   .swiper-pagination-bullet rule (built for the hero slider's dot strip,
   further up this file) that uses !important on position, size, color
   and layout. That rule hits EVERY Swiper pagination on the page,
   including this one, so every property it sets has to be matched with
   !important here too — a more specific selector alone can't win against
   an !important rule. (Same issue already fixed once for the Eldorado
   testimonial swiper elsewhere in this file.) */
.npb-reviews .swiper-pagination-test {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    margin-top: 22px;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

    .npb-reviews .swiper-pagination-test .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
        display: inline-block !important;
        border-radius: 50% !important;
        background-color: var(--npb-ink) !important;
        background-position: 0 0 !important;
        opacity: .25 !important;
        margin: 0 !important;
    }

    .npb-reviews .swiper-pagination-test .swiper-pagination-bullet-active {
        width: 8px !important;
        height: 8px !important;
        background-color: var(--npb-crust) !important;
        border-radius: 50% !important;
        opacity: 1 !important;
    }

.npb-reviews .swiper-button-next,
.npb-reviews .swiper-button-prev {
    display: none;
}

/* ===== Promise banner ===== */
.npb-promise {
    position: relative;
    background: var(--npb-crust);
    color: var(--npb-paper);
    overflow: hidden;
    padding: 76px 0;
}

    .npb-promise::before {
        content: 'FRESH';
        position: absolute;
        right: -40px;
        top: 50%;
        transform: translateY(-50%);
        font-family: 'Fraunces',serif;
        font-weight: 900;
        font-size: 200px;
        line-height: 1;
        color: rgba(255,251,242,0.08);
        pointer-events: none;
        white-space: nowrap;
    }

.npb-promise-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    flex-wrap: wrap;
}

.npb-promise-copy .npb-h2 {
    color: var(--npb-paper);
    max-width: 16ch;
}

.npb-promise-copy p {
    font-size: 15.5px;
    color: rgba(255,251,242,0.82);
    margin-top: 14px;
    max-width: 44ch;
}

.npb-promise-stamp {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--npb-gold);
    color: var(--npb-ink);
    border: 2px dashed var(--npb-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(6deg);
}

    .npb-promise-stamp span {
        font-family: 'Space Mono',monospace;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        line-height: 1.5;
    }

/* ===== Hours =====
   Real business hours come from the admin-managed DisplayBusinessHours
   field as a flat sequence of <div class="divBusinessHourTime"> pairs
   (day label, then time). grid-auto-flow:column below fills one column
   at a time so each day/time pair lands together automatically, however
   many pairs the admin has configured. */
.npb-hours {
    background: var(--npb-cream);
}

.npb-hours-inner {
    /* This wrapper only ever has ONE child (#npbBusinessHours below), so
       it must not also be a 3-column grid — that made the single child
       occupy just 1 of the 3 tracks, squeezing the real 3-column layout
       (built by #npbBusinessHours itself, right below) into a third of
       the section's width and causing severe text wrapping. */
    border-top: 1px solid var(--npb-line);
    padding-left: 0;
    padding-right: 0;
}

    .npb-hours-inner #npbBusinessHours {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        width: 100%;
    }

        .npb-hours-inner #npbBusinessHours > div,
        .npb-hours-inner #npbBusinessHours > div > center {
            display: contents;
        }

    .npb-hours-inner .divBusinessHourTime:nth-child(-n+4) {
        border-right: 1px solid var(--npb-line);
    }

    .npb-hours-inner .divBusinessHourTime:nth-child(odd) {
        font-family: 'Fraunces',serif;
        font-size: 20px;
        font-weight: 600;
        color: var(--npb-ink);
        padding: 34px 32px 4px;
        align-self: end;
    }

    .npb-hours-inner .npb-hours-eyebrow {
        display: block;
        margin-bottom: 8px;
    }

    .npb-hours-inner .divBusinessHourTime:nth-child(even) {
        font-family: 'Space Mono',monospace;
        font-size: 13.5px;
        color: #5b5346;
        padding: 0 32px 34px;
        align-self: start;
    }

.npb-hours-fallback {
    padding: 34px 32px;
    font-family: 'Space Mono',monospace;
    font-size: 13.5px;
    color: #5b5346;
    grid-column: 1/-1;
}

/* ===== About Us page ===== */
.npb-about {
    background: var(--npb-paper);
    padding: 90px 0;
}

.npb-about-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}

.npb-about-copy p {
    font-size: 16px;
    line-height: 1.75;
    color: #3a3428;
    max-width: 58ch;
    margin: 0 0 16px;
}

.npb-about-copy .npb-btn {
    margin-top: 8px;
}

.npb-about-art img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    box-shadow: var(--npb-shadow);
}

/* ===== Footer ===== */
.npb-footer {
    background: var(--npb-ink);
    color: rgba(255,251,242,0.72);
    padding: 70px 0 24px;
}

.npb-footer-inner {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 32px;
}

.npb-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: 46px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--npb-line-light);
}

.npb-footer-brand {
    display: inline-block;
    margin-bottom: 14px;
}

.npb-footer-logo-img {
    height: 36px;
    width: auto;
    display: block;
}

.npb-footer-about p {
    font-size: 14px;
    line-height: 1.7;
    max-width: 34ch;
    color: rgba(255,251,242,0.6);
    margin: 0;
}

.npb-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

    .npb-footer-social a {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--npb-line-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: inherit;
        transition: background .2s ease, border-color .2s ease, color .2s ease;
    }

        .npb-footer-social a:hover {
            background: var(--npb-gold);
            border-color: var(--npb-gold);
            color: var(--npb-ink);
        }

.npb-footer h5 {
    font-family: 'Space Mono',monospace;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--npb-gold-light);
    margin: 0 0 18px;
}

.npb-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

    .npb-footer ul a {
        font-size: 14.5px;
        color: rgba(255,251,242,0.75);
    }

        .npb-footer ul a:hover {
            color: var(--npb-gold-light);
        }

.npb-footer-contact li {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,251,242,0.75);
}

.npb-footer-note {
    font-size: 12.5px;
    color: rgba(255,251,242,0.5);
    margin-top: 14px;
    line-height: 1.6;
    display: none;
}

    .npb-footer-note > div + div {
        margin-top: 10px;
    }

    .npb-footer-note .divBusinessHourTime {
        display: none;
    }

        .npb-footer-note .divBusinessHourTime:nth-child(odd) {
            margin-top: 6px;
            color: rgba(255,251,242,0.78);
            font-weight: 600;
            letter-spacing: .02em;
        }

        .npb-footer-note .divBusinessHourTime:nth-child(even) {
            color: rgba(255,251,242,0.5);
        }

.npb-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 22px;
    font-size: 12.5px;
    color: rgba(255,251,242,0.45);
    flex-wrap: wrap;
    gap: 10px;
}

.npb-footer-auth {
    color: rgba(255,251,242,0.6);
}

    .npb-footer-auth:hover {
        color: var(--npb-gold-light);
    }

/* ===== Responsive ===== */
@media (max-width:980px) {
    .npb-hero {
        padding: 64px 0 90px;
    }

    .npb-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .npb-hero-content {
        max-width: none;
    }

    .npb-hero-photos {
        padding-top: 72%;
    }

    .npb-stamp-hero {
        width: 96px;
        height: 96px;
        left: 2px;
        bottom: -20px;
    }

    .npb-story-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .npb-story-imgs {
        height: 320px;
    }

    .npb-service-grid {
        grid-template-columns: 1fr;
    }

    .npb-reviews-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .npb-reviews-head {
        max-width: none;
    }

    .npb-promise-inner {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .npb-promise-copy .npb-h2 {
        max-width: none;
    }

    .npb-hours-inner,
    .npb-hours-inner #npbBusinessHours {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }

        .npb-hours-inner .divBusinessHourTime:nth-child(-n+4) {
            border-right: none;
        }

        .npb-hours-inner .divBusinessHourTime:nth-child(odd) {
            border-top: 1px solid var(--npb-line);
            padding-top: 24px;
        }

        .npb-hours-inner .divBusinessHourTime:nth-child(even) {
            padding-bottom: 24px;
        }

    .npb-about-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .npb-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width:760px) {
    .npb-footer-grid {
        grid-template-columns: 1fr;
    }

    .npb-promise::before {
        font-size: 110px;
    }

    .npb-topbar-left span:nth-child(3) {
        display: none;
    }
}
/* ===== Nav fixes ===== */

/* Desktop: keep the visual gap but bridge it, so hover isn't lost
   while the mouse moves from "More" down to the dropdown options */
@media (min-width: 992px) {
    .npb-nav-links .eld-dropdown-menu::before {
        content: "";
        position: absolute;
        top: -16px;
        left: 0;
        right: 0;
        height: 16px;
    }
}

/* Mobile / tablet drawer: centre every link, the dropdown and Order Online */
@media (max-width: 991.98px) {
    .npb-offcanvas .offcanvas-body {
        text-align: center;
    }

    .npb-nav-links {
        width: 100%;
        align-items: center;
        text-align: center;
    }

        .npb-nav-links .nav-item {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .npb-nav-links .nav-link {
            margin: 0 auto;
            text-align: center;
        }

        .npb-nav-links .nav-item .npb-btn {
            justify-content: center;
            margin: 0 auto;
        }

        .npb-nav-links .eld-dropdown-menu {
            width: 100%;
            max-width: 320px;
            margin: 8px auto 0 !important;
            text-align: center !important;
        }

            .npb-nav-links .eld-dropdown-menu .dropdown-item,
            .npb-nav-links .eld-dropdown-menu .dropdown-item:hover,
            .npb-nav-links .eld-dropdown-menu .dropdown-item:focus {
                text-align: center;
                padding-left: 16px !important;
            }
}

/* ===== Inner page banner (full-width cover image) =====
   Image fills the full width of the page. Height follows the image
   (max 380px on desktop); anything beyond is cropped (object-fit: cover).
   --npb-inner-slider-opacity: 1 = fully solid, lower = more transparent. */
:root {
    --npb-inner-slider-opacity: 0.95;
}

#InnerPageSliderOuterWrapper.npb-inner-banner {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    line-height: 0;
    background: var(--npb-ink);
}

#InnerPageSliderOuterWrapper .npb-inner-banner-img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 140px;
    max-height: 380px;
    object-fit: cover;
    object-position: center;
    opacity: var(--npb-inner-slider-opacity);
}