/* ============================================================
   GOOGLE FONTS
   ============================================================ */

/* ============================================================
   CSS VARIABLES — single source of truth for the homepage
   ============================================================ */
:root {
    --color-bg:           #0e0e0e;
    --color-surface:      #141414;
    --color-card:         #1a1a1a;
    --color-border:       #272727;
    --color-text:         #f0f0f0;
    --color-muted:        #ffffffad;
    --color-accent:       #ff6b00;
    --color-accent-hover: #ff8c38;
    --color-accent-glow:  rgba(255, 107, 0, 0.18);
    --color-muted-glow: rgba(0, 0, 0, 0.18);
    --color-accent-deep:  rgba(255, 107, 0, 0.08);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --shadow-card:  0 4px 28px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.65);
    --shadow-glow:  0 0 0 1px var(--color-accent), 0 12px 40px var(--color-accent-glow);

    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font-main:  'Inter', 'Titillium Web', sans-serif;
}

/* ============================================================
   GLOBAL RESETS — defeat theme.css and layout Nunito override
   ============================================================ */

/* Beat layout/frontend-app.blade.php inline `body { font-family: 'Nunito' }`
   which loads AFTER our CSS. !important is the only way to win. */
html body {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    font-family: var(--font-main) !important;
    -webkit-font-smoothing: antialiased;
}

/* Beat theme.css: h1-h6 { color: #383848; font-family: 'Quicksand' } */
.main-part h1,
.main-part h2,
.main-part h3,
.main-part h4,
.main-part h5,
.main-part h6 {
    color: var(--color-text);
    font-family: var(--font-main);
}

/* Beat theme.css: section { clear: both; padding: 60px 0 }
   We can't do a global section reset (other pages), so scope to .main-part */
.main-part section {
    clear: none !important;
    /*padding: 0 !important;*/
    position: relative;
}

/* Beat theme.css: p { margin: 0 0 25px } inside sections */
/*.main-part p { margin: 0; }*/


#wrapper {
    background: var(--color-bg);
}

/* ============================================================
   LAYOUT
   ============================================================ */
main, .main-part {
    background: var(--color-bg);
}

*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   SECTION UTILITIES
   ============================================================ */
.hp-section    { padding: 88px 0; }
.hp-section-sm { padding: 56px 0; }

.hp-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.hp-section-title {
    font-size: clamp(26px, 4.5vw, 40px);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}

.hp-section-sub {
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto 48px;
}

.hp-divider {
    width: 44px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
    margin: 0 auto 48px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 13px 28px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-accent:hover,
.btn-accent:focus {
    background: var(--color-accent-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--color-accent-glow);
}

.btn-accent:active { transform: translateY(0); }

.btn-outline-accent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--color-accent);
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 50px;
    border: 1.5px solid var(--color-accent);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-outline-accent:hover,
.btn-outline-accent:focus {
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--color-accent-glow);
}

.btn-outline-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--color-muted);
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 50px;
    border: 1.5px solid var(--color-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--color-muted);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--color-muted-glow);
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hp-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 540px;
    max-height: 900px;
    overflow: hidden;
    background: #000;
    padding: 0;
}

.hp-hero-track {
    display: flex;
    height: 100%;
    transition: transform 0.85s cubic-bezier(0.77, 0, 0.18, 1);
    will-change: transform;
}

.hp-hero-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.hp-hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        108deg,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.5) 45%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

.hp-hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 8%;
    max-width: 780px;
}

.hp-hero-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 18px;
    opacity: 0;
    animation: hpFadeUp 0.7s 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hp-hero-title {
    font-size: clamp(34px, 6vw, 72px);
    font-weight: 900;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
    font-family: var(--font-main);
    opacity: 0;
    animation: hpFadeUp 0.75s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hp-hero-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.75;
    margin: 0 0 36px;
    max-width: 460px;
    opacity: 0;
    animation: hpFadeUp 0.75s 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hp-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    animation: hpFadeUp 0.75s 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes hpFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hp-hero-nav {
    position: absolute;
    bottom: 40px;
    left: 8%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 22px;
}

.hp-hero-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hp-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background var(--transition), width var(--transition), border-radius var(--transition);
}

.hp-hero-dot.active {
    background: var(--color-accent);
    width: 26px;
    border-radius: 4px;
}

.hp-hero-arrows { display: flex; gap: 10px; }

.hp-hero-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hp-hero-arrow:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-glow);
    transform: scale(1.08);
}

/* ============================================================
   WELCOME SECTION
   ============================================================ */
.hp-welcome { background: var(--color-surface); }

.hp-welcome-inner {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.hp-welcome-text {
    flex: 1;
    min-width: 280px;
}

.hp-welcome-text p {
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 32px;
    text-align: justify;
}

.hp-welcome-media {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hp-welcome-row {
    display: flex;
    gap: 14px;
}

.hp-welcome-row--right { justify-content: flex-end; }
.hp-welcome-row--left  { justify-content: flex-start; }

.hp-welcome-img {
    width: 190px;
    height: 148px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    display: block;
    transition: transform var(--transition), box-shadow var(--transition);
}

.hp-welcome-img:hover {
    transform: scale(1.04) rotate(-1deg);
    box-shadow: var(--shadow-hover);
}

/* ============================================================
   MENU SECTION
   ============================================================ */
.hp-menu {
    /*padding: 48px 0 0 !important;*/
    background: var(--color-bg);
}

/* Category filter bar */
.hp-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 44px;
    list-style: none;
    padding: 0;
}

/* Override theme.css portfolioFilter styles */
.indexPortfolioFilter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-bottom: 44px !important;
    padding: 0 !important;
}
.portfolioFilter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
}

.portfolioFilter-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.portfolioFilter-inner::-webkit-scrollbar {
    display: none;
}

/* Filter pill — applies to both hp-filter-btn and portfolioFilter span */
.hp-filter-btn,
.portfolioFilter span {
    display: inline-block !important;
    flex-shrink: 0;
    font-family: var(--font-main) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    padding: 9px 22px !important;
    border-radius: 50px !important;
    border: 1.5px solid var(--color-border) !important;
    background: var(--color-card) !important;
    color: var(--color-muted) !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    white-space: nowrap;
    line-height: 1.4 !important;
}

.hp-filter-btn:hover,
.portfolioFilter span:hover,
.hp-filter-btn.current,
.portfolioFilter span.current {
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
    background: var(--color-accent-deep) !important;
}

/* Menu grid — CSS Grid that kills Bootstrap float columns */
.hp-menu-grid {
    display: grid ;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    width: 100% !important;
    /* Reset Bootstrap .row negative margins */
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* Reset ALL Bootstrap col-* children inside the grid */
.hp-menu-grid > * {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    flex: none !important;
}

/* ============================================================
   FOOD CARD  — full reset of theme.css .menu-list rules
   theme.css:
     .menu-list          { float: left; position: relative; margin-bottom: 25px }
     .menu-list-product  { position: absolute; max-width: 105px; left: 0 }  ← BROKEN
     .menu-list h5       { border-bottom: 1px dashed #ccc; font-size: 20px }
     .menu-list h5 span  { position: absolute; right: 0; color: #e4b95b }   ← BROKEN
   ============================================================ */
.menu-list {
    /* Kill theme.css float layout */
    float: none !important;
    position: relative !important;
    margin: 0 !important;
    /* New design */
    background: var(--color-card) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition) !important;
}

.menu-list:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-glow) !important;
    /*border-color: var(--color-accent) !important;*/
    border: 1px solid var(--color-accent) !important;
}

/* Image wrapper — kill theme.css absolute positioning */
.menu-list-product {
    /* Kill theme.css: position: absolute; max-width: 105px; left: 0 */
    position: relative !important;
    left: auto !important;
    max-width: none !important;
    display: block !important;
    width: 100% !important;
    height: 210px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.index-menu-item-image {
    width: 100% !important;
    height: 210px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
    transition: transform 0.55s ease !important;
}

.menu-list:hover .index-menu-item-image {
    transform: scale(1.07) !important;
}

/* Hover CTA overlay on image */
.menu-list-product::after {
    /*content: '→';*/
    /*position: absolute;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*background: linear-gradient(to top, rgba(9, 9, 9, 0.9) 0%, transparent 100%);*/
    /*color: #fff;*/
    /*font-family: var(--font-main);*/
    /*font-size: 12px;*/
    /*font-weight: 700;*/
    /*letter-spacing: 0.1em;*/
    /*text-transform: uppercase;*/
    /*text-align: center;*/
    /*padding: 22px 0 12px;*/
    /*opacity: 0;*/
    /*transition: opacity var(--transition);*/
    /*pointer-events: none;*/
}

.menu-list:hover .menu-list-product::after { opacity: 1; }

/* Title row — kill theme.css border-bottom: dashed */
.menu-list h5 {
    border-bottom: none !important;
    font-family: var(--font-main) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    margin: 16px 16px 8px !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
    line-height: 1.4 !important;
}

/* Price — kill theme.css position: absolute; right: 0 */
.menu-list h5 span {
    position: static !important;
    right: auto !important;
    color: var(--color-accent) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.menu-list p {
    font-family: var(--font-main) !important;
    font-size: 13px !important;
    color: var(--color-muted) !important;
    line-height: 1.65 !important;
    margin: 0 16px 18px !important;
    flex: 1 !important;
}

.menu-item-thumb { padding: 0 !important; }

/* ============================================================
   SKELETON LOADER — shared base (vertical, used by menu page)
   ============================================================ */
.hp-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.hp-skeleton-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.hp-skeleton-img {
    width: 100%;
    height: 190px;
    background: var(--color-border);
    position: relative;
    overflow: hidden;
}

.hp-skeleton-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hp-skeleton-line {
    height: 13px;
    background: var(--color-border);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.hp-skeleton-line.short   { width: 58%; }
.hp-skeleton-line.shorter { width: 36%; }

.hp-skeleton-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hp-skeleton-line.name  { flex: 1; }
.hp-skeleton-line.price { width: 48px; flex-shrink: 0; }

.hp-skeleton-img::after,
.hp-skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.055) 50%,
        transparent 100%
    );
    animation: hpShimmer 1.6s infinite;
}

@keyframes hpShimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ── Index page skeleton — 2-col horizontal card ───────────── */
.hp-skeleton-grid--index {
    grid-template-columns: repeat(2, 1fr);
}

.hp-skeleton-grid--index .hp-skeleton-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.hp-skeleton-grid--index .hp-skeleton-img {
    width: 110px;
    min-width: 110px;
    height: auto;
    min-height: 100px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.hp-skeleton-grid--index .hp-skeleton-body {
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding: 14px;
}

@media (max-width: 767px) {
    .hp-skeleton-grid--index { grid-template-columns: 1fr; }
    .hp-skeleton-grid        { grid-template-columns: 1fr; }
}

/* ============================================================
   MEAL PERIODS / LUNCH TIME
   ============================================================ */
.hp-meal-periods {
    background: var(--color-surface);
    position: relative;
    overflow: hidden;
}

.hp-meal-bg-overlay {
    position: absolute;
    inset: 0;
    /*background-image: url('images/banner2.jpg');*/
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    pointer-events: none;
}

.hp-meal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 22px;
    position: relative;
    z-index: 1;
}

.hp-meal-card {
    background: #3b3939;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: 36px 24px 30px;
    text-align: center;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.hp-meal-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 36px var(--color-accent-glow);
}

.hp-meal-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin: 0 auto 18px;
    display: block;
    transition: transform var(--transition);
    color: white;
}

.hp-meal-card:hover .hp-meal-icon {
    transform: scale(1.1) rotate(-4deg);
}

.hp-meal-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-accent) !important;
    margin: 0 0 8px;
    font-family: var(--font-main);
}

.hp-meal-time {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-main);
}

/* ============================================================
   EVENTS SECTION
   ============================================================ */
.hp-events { background: var(--color-bg); }

.hp-events-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -16px;
}

.hp-events-col {
    padding: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

@media (min-width: 576px)  { .hp-events-col { width: 50%; } }
@media (min-width: 992px)  { .hp-events-col { width: 33.3333%; } }

/* Override any inline styles in the existing event card partial */
.hp-events .ev-section-eyebrow { color: var(--color-accent) !important; }
.hp-events .ev-section-title   { color: var(--color-text) !important; }

.ev-section-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1.5px solid var(--color-accent) !important;
    color: var(--color-accent) !important;
    font-family: var(--font-main) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: background var(--transition), color var(--transition), transform var(--transition) !important;
}

.ev-section-cta:hover {
    background: var(--color-accent) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

/* ============================================================
   GALLERY SECTION
   ============================================================ */
.hp-gallery { background: var(--color-surface); }

.gallery-slider .item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    margin: 0 6px;
}

.index-restaurant-image {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: var(--radius-md) !important;
    display: block !important;
    transition: transform var(--transition), filter var(--transition) !important;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 107, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
    border-radius: var(--radius-md);
}

.gallery-overlay-inner {
    color: #fff;
    font-size: 20px;
}

.gallery-slider .item:hover .gallery-overlay  { opacity: 1; }
.gallery-slider .item:hover .index-restaurant-image {
    transform: scale(1.06) !important;
    filter: brightness(0.75) !important;
}

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

/* ============================================================
   FOOTER — fp-* scoped, zero conflicts with theme.css
   ============================================================ */
.fp-footer {
    background: var(--color-surface, #141414);
    border-top: 1px solid var(--color-border, #272727);
    padding: 64px 0 0;
    font-family: var(--font-main, 'Inter', sans-serif);
}

/* Float-based layout — compatible with Bootstrap 3 and older libraries.
   flex caused collapse in this context. */
.fp-footer-body {
    overflow: hidden;
    padding-top: 48px;
    padding-bottom: 48px;
    width: 100%;
}

.fp-footer-body::after {
    content: '';
    display: table;
    clear: both;
}

.fp-footer-brand {
    float: left;
    width: 60%;
    padding-right: 48px;
    min-width: 220px;
}

.fp-footer-logo {
    height: 48px;
    width: auto;
    margin-bottom: 16px;
    opacity: 0.85;
    display: block;
}

.fp-footer-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text, #f0f0f0);
    margin: 0 0 20px;
    line-height: 1.3;
}

.fp-footer-contacts {}

.fp-footer-contact-item {
    display: block;
    font-size: 13px;
    color: var(--color-muted);
    margin: 0 0 10px;
    line-height: 1.6;
}

.fp-footer-contact-item svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    position: relative;
    top: -1px;
}

.fp-footer-contact-item a {
    color: var(--color-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}

.fp-footer-contact-item a:hover { color: var(--color-accent, #ff6b00); }

.fp-footer-findus {
    float: right;
    width: 35%;
    min-width: 180px;
    text-align: right;
}

.fp-footer-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-accent, #ff6b00);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-main, 'Inter', sans-serif);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid var(--color-accent, #ff6b00);
    padding: 10px 22px;
    border-radius: 50px;
    transition: background 0.25s ease, color 0.25s ease;
}

.fp-footer-map-btn:hover {
    background: var(--color-accent, #ff6b00);
    color: #fff;
}

.fp-footer-map-expand {
    display: none;
    margin-top: 20px;
    width: 360px;
    max-width: 100%;
}

.fp-footer-map-expand.location-open { display: block; }

/* Bottom bar — float-based, no flex */
.fp-footer-bottom {
    border-top: 1px solid var(--color-border, #272727);
    padding: 20px 0;
    overflow: hidden;
}

.fp-footer-bottom::after {
    content: '';
    display: table;
    clear: both;
}

.fp-footer-copy {
    float: left;
    font-size: 12px;
    color: var(--color-muted);
    margin: 7px 0 0;
    line-height: 1.4;
}

.fp-footer-social {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fp-footer-social li {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

.fp-footer-social li a {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid var(--color-border, #272727);
    color: var(--color-muted);
    font-size: 13px;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.fp-footer-social li a:hover {
    border-color: var(--color-accent, #ff6b00);
    color: var(--color-accent, #ff6b00);
    background: var(--color-accent-deep, rgba(255, 107, 0, 0.08));
}

.fp-footer-legal {
    overflow: hidden;
    text-align: center;
    padding: 4px 16px 0;
}

.fp-footer-legal a {
    display: inline-block;
    font-size: 12px;
    color: var(--color-muted);
    text-decoration: none;
    padding: 0 10px;
    border-right: 1px solid var(--color-border, #272727);
    line-height: 1;
    cursor: pointer;
    transition: color 0.25s ease;
}

.fp-footer-legal a:last-child {
    border-right: none;
}

.fp-footer-legal a:hover {
    color: var(--color-accent, #ff6b00);
}

@media (max-width: 767px) {
    .fp-footer-brand  { float: none; width: 100%; padding-right: 0; }
    .fp-footer-findus { float: none; width: 100%; margin-top: 32px; }
    .fp-footer-copy   { float: none; display: block; text-align: center; margin-bottom: 12px; }
    .fp-footer-social { float: none; display: block; text-align: center; }
    .fp-footer-social li { margin: 0 4px; }
    .fp-footer-map-expand { width: 100%; }
    .fp-footer-legal  { text-align: center; padding: 12px 0 0; }
}


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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .hp-section { padding: 64px 0; }
    .hp-section-sm { padding: 44px 0; }
    .hp-hero-content { max-width: 100%; }
    .hp-welcome-inner { gap: 40px; }
    .hp-meal-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .hp-hero { max-height: 640px; }
    .hp-hero-content { padding: 0 6%; }
    .hp-hero-title { font-size: 32px; }
    .hp-hero-desc  { font-size: 14px; margin-bottom: 28px; }
    .hp-hero-nav   { bottom: 24px; left: 6%; }
    .hp-menu-grid  { grid-template-columns: 1fr; }
    .hp-welcome-img { width: 145px; height: 115px; }
}

@media (max-width: 480px) {
    .hp-section { padding: 48px 0; }
    .hp-hero-actions { flex-direction: column; align-items: flex-start; }
    .hp-hero-arrows  { display: none; }
    .hp-meal-grid    { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   INDEX PAGE — 2-column horizontal card layout
   Scoped to .hp-menu-grid--index so the menu page is unaffected
   ============================================================ */
.hp-menu-grid--index {
    grid-template-columns: repeat(2, 1fr) !important;
}

.hp-menu-grid--index .menu-list {
    flex-direction: row !important;
    height: auto !important;
    align-items: stretch !important;
}

.hp-menu-grid--index .menu-list-product {
    width: 110px !important;
    min-width: 110px !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

.hp-menu-grid--index .index-menu-item-image {
    width: 110px !important;
    height: 100% !important;
    min-height: 100px !important;
    object-fit: cover !important;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
}

.hp-menu-grid--index .menu-list-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.hp-menu-grid--index .menu-list h5 {
    font-size: 15px !important;
    margin: 12px 12px 6px !important;
}

.hp-menu-grid--index .menu-list p {
    font-size: 13px !important;
    margin: 0 12px 12px !important;
}

@media (max-width: 767px) {
    .hp-menu-grid--index {
        grid-template-columns: 1fr !important;
    }
}