/* ========================================================================== 
   Site-wide Responsive Fixes
   Loaded after page styles from assets/js/navbar.js.
   ========================================================================== */

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img, video, canvas, svg {
    max-width: 100%;
}

button, a, input, select, textarea {
    max-width: 100%;
}

/* Shared navbar */
#main-navbar {
    box-sizing: border-box;
}

#main-navbar a:first-child img {
    max-height: 82px;
}

#nav-mobile-drawer {
    box-sizing: border-box;
}

@media (max-width: 767px) {
    #main-navbar {
        height: 72px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    #navbar-spacer {
        height: 72px !important;
    }

    #main-navbar a:first-child img {
        height: 70px !important;
        max-width: 205px;
    }

    #nav-mobile-toggle {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem !important;
    }

    #nav-mobile-drawer {
        top: 72px !important;
        min-height: auto !important;
        height: calc(100dvh - 72px) !important;
        padding: 34px 20px !important;
        gap: 22px !important;
    }

    #nav-notif-dropdown {
        position: fixed !important;
        top: 78px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: none !important;
    }
}

@media (max-width: 380px) {
    #main-navbar {
        padding-left: 14px !important;
        padding-right: 12px !important;
    }

    #main-navbar a:first-child img {
        height: 62px !important;
        max-width: 170px;
    }
}

/* Home page */
@media (max-width: 900px) {
    body:has(.features) .hero {
        min-height: calc(100dvh - 72px) !important;
        padding: 38px 0 82px !important;
        align-items: center !important;
    }

    body:has(.features) .hero > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        justify-content: center !important;
    }

    body:has(.features) .hero-content {
        width: 100% !important;
        flex: 0 1 auto !important;
        padding: 0 !important;
        max-width: 560px !important;
        margin: 0 auto !important;
    }

    body:has(.features) .hero-title {
        font-size: clamp(2.45rem, 12vw, 4.4rem) !important;
        line-height: 1.08 !important;
        margin-bottom: 18px !important;
        overflow-wrap: anywhere;
    }

    body:has(.features) .hero-subtitle {
        font-size: 0.74rem !important;
        letter-spacing: 3px !important;
        margin-bottom: 14px !important;
    }

    body:has(.features) .hero-text {
        font-size: clamp(0.92rem, 3.7vw, 1.05rem) !important;
        line-height: 1.65 !important;
        max-width: 34rem !important;
        margin-bottom: 30px !important;
    }

    body:has(.features) .hero-actions {
        gap: 18px !important;
        flex-wrap: wrap !important;
    }

    body:has(.features) .btn-solid-green {
        min-width: 160px;
        padding: 14px 24px !important;
    }

    body:has(.features) .play-btn {
        gap: 10px !important;
    }

    body:has(.features) .hero-image-wrapper {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

@media (max-width: 520px) {
    body:has(.features) .hero {
        min-height: 690px !important;
        padding-top: 22px !important;
    }

    body:has(.features) .hero-title {
        font-size: clamp(2.15rem, 12.5vw, 3.4rem) !important;
    }

    body:has(.features) .hero-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(86px, 1fr);
        align-items: center;
        gap: 12px !important;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    body:has(.features) .btn-solid-green {
        min-width: 0;
        width: 100%;
        padding: 13px 14px !important;
        line-height: 1.15;
    }

    body:has(.features) .play-text {
        font-size: 0.64rem !important;
        line-height: 1.3;
    }

    body:has(.features) .features {
        background-size: auto 132px !important;
        margin-top: -72px !important;
        padding: 126px 0 54px !important;
        background-color: #120307 !important;
    }

    body:has(.features) .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 34px 18px !important;
        padding: 0 18px !important;
    }

    body:has(.features) .feature-item {
        padding: 0 10px !important;
    }

    body:has(.features) .feature-item::after {
        display: none !important;
    }

    body:has(.features) .feature-title {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
        color: rgba(248, 234, 206, 0.76) !important;
    }

    body:has(.features) .feature-text {
        font-size: 0.84rem !important;
        line-height: 1.55 !important;
        color: rgba(248, 234, 206, 0.56) !important;
    }

    body:has(.features) .feature-icon {
        color: #c8a25a !important;
        margin-bottom: 14px !important;
    }
}

/* About page */
@media (max-width: 1024px) {
    body:has(.philosophy) .hero {
        padding: 56px 0 0 !important;
    }

    body:has(.philosophy) .hero-container,
    body:has(.philosophy) .story-container,
    body:has(.philosophy) .chef-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: clamp(20px, 6vw, 44px) !important;
        padding-right: clamp(20px, 6vw, 44px) !important;
    }

    body:has(.philosophy) .hero-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    body:has(.philosophy) .hero-content,
    body:has(.philosophy) .hero-image-wrapper {
        width: 100% !important;
        padding: 0 !important;
    }

    body:has(.philosophy) .hero-image-wrapper {
        height: clamp(260px, 58vw, 440px) !important;
        margin: 0 !important;
    }

    body:has(.philosophy) .story-container {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    body:has(.philosophy) .story-img-col {
        height: clamp(260px, 58vw, 420px) !important;
    }

    body:has(.philosophy) .story-text-col {
        padding-right: 0 !important;
    }

    body:has(.philosophy) .story-features-col {
        border-left: 0 !important;
        padding-left: 0 !important;
    }
}

@media (max-width: 600px) {
    body:has(.philosophy) .hero {
        padding-top: 44px !important;
    }

    body:has(.philosophy) .hero::before {
        width: 260px !important;
        opacity: 0.24 !important;
        background-position: left top !important;
    }

    body:has(.philosophy) .hero-content {
        text-align: left !important;
        max-width: 100% !important;
    }

    body:has(.philosophy) .hero .section-title,
    body:has(.philosophy) .section-title {
        font-size: clamp(2.65rem, 13vw, 4.2rem) !important;
        line-height: 1.05 !important;
        text-align: left !important;
        overflow-wrap: normal !important;
    }

    body:has(.philosophy) .hero-text {
        max-width: 100% !important;
        font-size: 0.95rem !important;
        line-height: 1.75 !important;
    }

    body:has(.philosophy) .btn-discover {
        width: 100%;
        text-align: center;
        padding: 14px 18px !important;
    }

    body:has(.philosophy) .philosophy {
        padding: 54px 0 64px !important;
    }

    body:has(.philosophy) .phil-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        padding: 0 28px !important;
    }

    body:has(.philosophy) .phil-item::after {
        display: none !important;
    }

    body:has(.philosophy) .story {
        padding: 64px 0 !important;
    }

    body:has(.philosophy) .story-text-col h2 {
        font-size: clamp(2rem, 9vw, 2.7rem) !important;
    }

    body:has(.philosophy) .story-feature {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        column-gap: 18px !important;
        padding: 22px 0 !important;
    }

    body:has(.philosophy) .story-feature p {
        max-width: none !important;
    }

    body:has(.philosophy) .chef {
        padding: 64px 0 !important;
    }

    body:has(.philosophy) .chef-container {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    body:has(.philosophy) .chef-img {
        height: 260px !important;
    }

    body:has(.philosophy) .chef-quote-box {
        padding: 28px 22px !important;
    }
}

/* Menu page */
@media (max-width: 768px) {
    body:has(#menuContainer) main.container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-top: 34px !important;
    }

    body:has(#menuContainer) section.relative.w-full.h\[50vh\],
    body:has(#menuContainer) section[class*="min-h-[420px]"] {
        min-height: 360px !important;
        height: auto !important;
        padding: 54px 14px 70px !important;
    }

    body:has(#menuContainer) #hero-script-heading {
        font-size: 1.85rem !important;
    }

    body:has(#menuContainer) .section-title {
        font-size: clamp(2.45rem, 12vw, 3.4rem) !important;
        line-height: 1.05 !important;
    }

    body:has(#menuContainer) #tab-food,
    body:has(#menuContainer) #tab-beverages {
        min-width: 112px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body:has(#menuContainer) #categoryScroll {
        padding-left: 18px !important;
        padding-right: 18px !important;
        scroll-padding-inline: 18px;
    }

    body:has(#menuContainer) #explore-categories-title {
        font-size: clamp(1.65rem, 8vw, 2.4rem) !important;
        letter-spacing: 0.14em !important;
    }

    body:has(#menuContainer) #dietFilterWrap .diet-seg {
        min-width: 92px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 0.72rem !important;
    }

    body:has(#menuContainer) .menu-card {
        height: auto !important;
        width: calc(50% - 12px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 22px !important;
        padding: 10px !important;
    }

body:has(#menuContainer) #menuContainer .grid.grid-cols-1 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body:has(#menuContainer) #menuContainer .grid.grid-cols-1 .menu-card {
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }

    body:has(#menuContainer) .menu-image-frame {
        height: clamp(112px, 31vw, 165px) !important;
        margin-bottom: 10px !important;
        border-radius: 14px !important;
    }

    body:has(#menuContainer) .menu-card h3 {
        font-size: clamp(0.78rem, 3vw, 1rem) !important;
        line-height: 1.28 !important;
    }

    body:has(#menuContainer) .menu-card p {
        font-size: clamp(0.68rem, 2.5vw, 0.82rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    body:has(#menuContainer) .menu-card .text-sm {
        font-size: 0.78rem !important;
        margin-bottom: 5px !important;
    }

    body:has(#menuContainer) .menu-card button {
        min-height: 34px !important;
        padding: 8px 9px !important;
        border-radius: 10px !important;
        font-size: 0.62rem !important;
    }

    body:has(#menuContainer) .menu-card button > span:last-child {
        width: 18px !important;
        height: 18px !important;
    }

    body:has(#menuContainer) #menuContainer [id^="carousel-"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        overflow-x: visible !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    body:has(#menuContainer) #menuContainer [id^="carousel-"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body:has(#menuContainer) #menuContainer [id^="carousel-"] .menu-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }

    body:has(#menuContainer) #menuContainer [id^="dots-"] {
        display: none !important;
    }

    body:has(#menuContainer) #menuContainer .relative.group > button {
        display: none !important;
    }

    body:has(#menuContainer) #floatingCartBox {
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;
        right: 14px !important;
        bottom: 14px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        gap: 7px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    body:has(#menuContainer) #floatingCartBox > div {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 7px !important;
    }

    body:has(#menuContainer) #floatingCartBox > div:first-child span:first-child,
    body:has(#menuContainer) #floatingCartBox > div:nth-child(2) > span:first-child {
        display: none !important;
    }

    body:has(#menuContainer) #floatingCartBox #floatingCartCount {
        font-size: 0.72rem !important;
    }

    body:has(#menuContainer) #floatingCartBox #floatingCartPrice {
        font-size: 1rem !important;
    }

    body:has(#menuContainer) #floatingCartBox a {
        padding: 8px 10px !important;
        margin: 0 !important;
        border-radius: 9px !important;
        font-size: 0.68rem !important;
        white-space: nowrap !important;
    }

    body:has(#menuContainer) .cust-modal-overlay > div,
    body:has(#custModalOverlay) #custModalOverlay > div {
        width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 26px) !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 430px) {
    body:has(#menuContainer) main.container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body:has(#menuContainer) .menu-card {
        border-radius: 18px !important;
    }

    body:has(#menuContainer) .menu-card .line-clamp-3 {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

/* Home page: keep mobile sections inside the viewport. */
@media (max-width: 600px) {
    body:has(.features) .features {
        background-image: none !important;
        background-color: #120307 !important;
        margin-top: 0 !important;
        padding: 62px 0 54px !important;
    }

    body:has(.features) .gallery {
        padding: 54px 16px !important;
    }

    body:has(.features) .gallery > div:first-child {
        padding: 0 !important;
    }

    body:has(.features) .gallery > div:first-child > div:first-child {
        margin-bottom: 34px !important;
    }

    body:has(.features) .gallery h1 {
        max-width: 100% !important;
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    body:has(.features) .gallery p {
        max-width: 31rem !important;
        font-size: 0.9rem !important;
    }

    body:has(.features) .tight-collage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(8, 92px) !important;
        gap: 8px !important;
    }

    body:has(.features) .tight-collage-grid > .col-span-12 {
        grid-column: span 2 / span 2 !important;
    }

    body:has(.features) .tight-collage-grid > .col-span-6 {
        grid-column: span 1 / span 1 !important;
    }
}

/* Shared footer */
@media (max-width: 768px) {
    .lux-footer {
        padding: 46px 22px 0 !important;
    }

    .lux-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        padding-bottom: 38px !important;
    }

    .lux-footer-grid > div:first-child {
        text-align: center;
    }

    .lux-footer-grid > div:first-child img {
        margin-left: auto !important;
        margin-right: auto !important;
        width: min(190px, 72vw) !important;
    }

    .lux-footer-socials {
        justify-content: center;
    }

    .lux-footer-newsletter-form {
        max-width: 420px;
    }
}
/* User-flow pages: booking, login, contact, profile, orders */
@media (max-width: 768px) {
    body:has(.tl-main-header) .tl-page,
    body:has(.tl-main-header) .tl-shell,
    body:has(.tl-main-header) main,
    body:has(.tl-main-header) .container {
        width: 100% !important;
        max-width: 100% !important;
    }

    body:has(.tl-main-header) .tl-main-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    body:has(.tl-main-header) .tl-main-title {
        font-size: clamp(2rem, 11vw, 3rem) !important;
        line-height: 1.05 !important;
    }

    body:has(.tl-main-header) .tl-toolbar,
    body:has(.tl-main-header) .tl-legend {
        width: 100% !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 6px;
    }

    body:has(.tl-main-header) .tl-plan-shell,
    body:has(.tl-main-header) .tl-plan-frame {
        width: 100% !important;
        overflow-x: auto !important;
    }

    body:has(.tl-main-header) .tl-modal-overlay {
        padding: 10px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    body:has(.tl-main-header) .tl-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
        border-radius: 18px !important;
    }

    body:has(.tl-main-header) .tl-modal-viewer {
        min-height: 220px !important;
        max-height: 34vh !important;
    }

    body:has(.tl-main-header) .tl-modal-form-panel {
        max-height: none !important;
        overflow: visible !important;
        padding: 22px 18px !important;
    }

    body:has(.tl-main-header) .tl-form-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body:has(.tl-main-header) .tl-form-group,
    body:has(.tl-main-header) .tl-form-full,
    body:has(.tl-main-header) .tl-form-small {
        grid-column: 1 / -1 !important;
    }

    body:has(.form-card) .form-card {
        width: calc(100vw - 28px) !important;
        max-width: 520px !important;
        padding: 28px 22px !important;
        border-radius: 18px !important;
    }

    body:has(.form-card) .auth-logo,
    body:has(.form-card) .brand-logo,
    body:has(.form-card) .form-card img {
        max-width: min(190px, 70vw) !important;
        height: auto !important;
    }

    body:has(.form-card) .modal-content,
    body:has(#forgotModal) .modal-content,
    body:has(#tfaModal) .modal-content {
        width: calc(100vw - 28px) !important;
        max-width: 430px !important;
        padding: 28px 22px !important;
    }

    body:has(form#contactForm) main.container {
        padding-left: 18px !important;
        padding-right: 18px !important;
        padding-top: 48px !important;
        padding-bottom: 54px !important;
    }

    body:has(form#contactForm) .grid {
        gap: 28px !important;
    }

    body:has(form#contactForm) h1,
    body:has(form#contactForm) .section-title {
        font-size: clamp(2.2rem, 11vw, 3.4rem) !important;
        line-height: 1.08 !important;
    }

    body:has(.dashboard-grid) .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    body:has(.dashboard-grid) .sidebar-container {
        position: relative !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 24px 18px !important;
        border-radius: 0 !important;
    }

    body:has(.dashboard-grid) .sidebar-menu,
    body:has(.dashboard-grid) .profile-nav {
        display: flex !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding-bottom: 8px !important;
    }

    body:has(.dashboard-grid) .sidebar-menu a,
    body:has(.dashboard-grid) .profile-nav a,
    body:has(.dashboard-grid) .sidebar-container a {
        white-space: nowrap !important;
    }

    body:has(.dashboard-grid) .main-content {
        padding: 28px 16px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    body:has(.dashboard-grid) .bg-card-custom,
    body:has(.dashboard-grid) .order-card {
        padding: 18px !important;
        border-radius: 16px !important;
    }

    body:has(.dashboard-grid) .row,
    body:has(.dashboard-grid) .d-flex {
        min-width: 0;
    }

    body:has(.dashboard-grid) table,
    body:has(.dashboard-grid) .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        display: block;
    }

    body:has(#orders-list-container) main {
        padding-left: 18px !important;
        padding-right: 18px !important;
        padding-top: 42px !important;
    }

    body:has(#orders-list-container) h1 {
        font-size: clamp(2.35rem, 12vw, 3.5rem) !important;
        line-height: 1.05 !important;
    }

    body:has(#orders-list-container) .reservation-card,
    body:has(#orders-list-container) .order-card-item {
        width: 100% !important;
        padding: 18px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    body:has(#orders-list-container) .reservation-card > div,
    body:has(#orders-list-container) .order-card-item > div {
        min-width: 0 !important;
    }

    body:has(#orders-list-container) .reservation-card [style*="position:absolute"] {
        position: static !important;
        margin-top: 14px !important;
        align-items: stretch !important;
    }

    body:has(#conciergeModifyModal) #conciergeModifyModal > div {
        width: calc(100vw - 28px) !important;
        max-width: 430px !important;
        padding: 30px 22px !important;
    }
}

@media (max-width: 420px) {
    body:has(.tl-main-header) .tl-modal-header h3 {
        font-size: 1.5rem !important;
    }

    body:has(.tl-main-header) .tl-modal-tags {
        gap: 8px !important;
    }

    body:has(.tl-main-header) .tl-modal-tag {
        font-size: 0.78rem !important;
        padding: 8px 10px !important;
    }

    body:has(#orders-list-container) .reservation-card,
    body:has(#orders-list-container) .order-card-item {
        padding: 15px !important;
    }
}
/* Cart page */
@media (max-width: 768px) {
    body:has(.table-cart) > div.w-full {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body:has(.table-cart) .cart-header-row {
        margin-top: 28px !important;
        margin-bottom: 22px !important;
        align-items: flex-start !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
    }

    body:has(.table-cart) .cart-header-title {
        gap: 10px !important;
        min-width: 0 !important;
    }

    body:has(.table-cart) .cart-title-icon-wrapper {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }

    body:has(.table-cart) .cart-title-text h1 {
        font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
    }

    body:has(.table-cart) .cart-title-text p {
        font-size: 0.76rem !important;
    }

    body:has(.table-cart) .btn-back-menu {
        padding: 9px 12px !important;
        font-size: 0.68rem !important;
        margin-left: 54px !important;
    }

    body:has(.table-cart) .flex.flex-wrap.-mt-12.-mx-6 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body:has(.table-cart) .flex.flex-wrap.-mt-12.-mx-6 > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 18px !important;
    }

    body:has(.table-cart) .cart-card-wrapper,
    body:has(.table-cart) .summary-wrapper-card,
    body:has(.table-cart) .features-wrapper-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    body:has(.table-cart) .cart-card-wrapper > .overflow-x-auto {
        overflow: visible !important;
    }

    body:has(.table-cart) .table-cart {
        display: block !important;
        width: 100% !important;
    }

    body:has(.table-cart) .table-cart thead {
        display: none !important;
    }

    body:has(.table-cart) .table-cart tbody,
    body:has(.table-cart) .table-cart tbody tr {
        display: block !important;
        width: 100% !important;
    }

    body:has(.table-cart) .table-cart tbody tr:not(:last-child) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 12px !important;
        row-gap: 8px !important;
        padding: 16px 0 !important;
    }

    body:has(.table-cart) .table-cart tbody tr:not(:last-child) td {
        border: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    body:has(.table-cart) .table-cart tbody tr:not(:last-child) td:nth-child(1) {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    body:has(.table-cart) .table-cart tbody tr:not(:last-child) td:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: center !important;
    }

    body:has(.table-cart) .table-cart tbody tr:not(:last-child) td:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: end !important;
    }

    body:has(.table-cart) .table-cart tbody tr:not(:last-child) td:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 3 !important;
        align-self: center !important;
    }

    body:has(.table-cart) .table-cart tbody tr:not(:last-child) td:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 3 !important;
        justify-self: end !important;
    }

    body:has(.table-cart) .cart-img {
        width: 72px !important;
        height: 72px !important;
        border-radius: 10px !important;
    }

    body:has(.table-cart) .table-cart td.item-col > div {
        gap: 12px !important;
        align-items: flex-start !important;
    }

    body:has(.table-cart) .dish-details {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    body:has(.table-cart) .cart-item-name {
        display: block !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.table-cart) .cart-item-desc {
        max-width: none !important;
        font-size: 0.76rem !important;
        line-height: 1.4 !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.table-cart) .cart-item-price,
    body:has(.table-cart) .cart-item-total {
        font-size: 0.9rem !important;
    }

    body:has(.table-cart) .quantity-controller-inline {
        padding: 2px 6px !important;
    }

    body:has(.table-cart) .quantity-controller-inline .qty-btn {
        width: 26px !important;
        height: 26px !important;
    }

    body:has(.table-cart) .features-wrapper-card .flex.flex-wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body:has(.table-cart) .features-wrapper-card .flex.flex-wrap > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 768px) {
    body:has(.table-cart) .cart-card-wrapper {
        padding: 10px !important;
    }

    body:has(.table-cart) .table-cart tbody tr:not(:last-child) {
        background: rgba(5, 10, 7, 0.34) !important;
        border: 1px solid rgba(192, 155, 91, 0.12) !important;
        border-radius: 12px !important;
        padding: 13px 11px !important;
        margin-bottom: 10px !important;
    }

    body:has(.table-cart) .cart-item-desc {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
        overflow: hidden !important;
    }

    body:has(.table-cart) .table-cart tbody tr:not(:last-child) td:nth-child(4),
    body:has(.table-cart) .table-cart tbody tr:not(:last-child) td:nth-child(5) {
        margin-top: 2px !important;
    }

    body:has(.table-cart) .summary-wrapper-card {
        margin-top: 0 !important;
    }
}
/* Home hero actions: keep both CTAs centered on narrow screens. */
@media (max-width: 600px) {
    body:has(.features) .hero-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:has(.features) .hero-actions .btn-solid-green {
        flex: 0 0 auto !important;
        width: 112px !important;
        min-width: 112px !important;
        padding: 13px 10px !important;
        line-height: 1.1 !important;
    }

    body:has(.features) .hero-actions .play-btn {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        gap: 9px !important;
        justify-content: center !important;
    }

    body:has(.features) .hero-actions .play-text {
        white-space: nowrap !important;
        font-size: 0.68rem !important;
    }
}

@media (max-width: 380px) {
    body:has(.features) .hero-actions {
        gap: 10px !important;
    }

    body:has(.features) .hero-actions .btn-solid-green {
        width: 104px !important;
        min-width: 104px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body:has(.features) .hero-actions .play-text {
        font-size: 0.62rem !important;
    }
}
/* Home gallery: balanced collage rows on mobile. */
@media (max-width: 600px) {
    body:has(.features) .tight-collage-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: 190px 82px 150px 176px !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    body:has(.features) .tight-collage-grid > div:nth-child(1) {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    body:has(.features) .tight-collage-grid > div:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    body:has(.features) .tight-collage-grid > div:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    body:has(.features) .tight-collage-grid > div:nth-child(4) {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

    body:has(.features) .tight-collage-grid > div:nth-child(6) {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    body:has(.features) .tight-collage-grid > div:nth-child(1) img,
    body:has(.features) .tight-collage-grid > div:nth-child(2) img,
    body:has(.features) .tight-collage-grid > div:nth-child(3) img,
    body:has(.features) .tight-collage-grid > div:nth-child(4) img {
        object-position: center !important;
    }
}
@media (max-width: 768px) {
    body:has(.table-cart) .cart-header-row .btn-back-menu {
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-width: 154px !important;
        justify-content: center !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
}
@media (max-width: 768px) {
    body:has(.table-cart) .flex.flex-wrap.-mt-12.-mx-6 {
        margin-top: 0 !important;
    }

    body:has(.table-cart) .cart-header-row {
        margin-bottom: 26px !important;
    }
}
/* Checkout, order-success and my-orders mobile layouts */
@media (max-width: 768px) {
    /* Checkout */
    body:has(.checkout-layout) .checkout-page-title {
        margin: 28px 12px 12px !important;
    }

    body:has(.checkout-layout) .checkout-page-title h1 {
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
        line-height: 1.05 !important;
    }

    body:has(.checkout-layout) .checkout-steps {
        gap: 5px !important;
        margin: 18px 10px 28px !important;
    }

    body:has(.checkout-layout) .step-circle {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.82rem !important;
    }

    body:has(.checkout-layout) .step-label {
        font-size: 0.65rem !important;
    }

    body:has(.checkout-layout) .step-connector {
        width: auto !important;
        flex: 1 1 auto !important;
        margin-bottom: 20px !important;
    }

    body:has(.checkout-layout) .checkout-layout {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 105px !important;
    }

    body:has(.checkout-layout) .checkout-layout > .flex {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body:has(.checkout-layout) .checkout-layout > .flex > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body:has(.checkout-layout) .medusa-card,
    body:has(.checkout-layout) .summary-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    body:has(.checkout-layout) .medusa-card-title {
        font-size: 1.15rem !important;
    }

    body:has(.checkout-layout) .medusa-card-subtitle {
        font-size: 0.78rem !important;
    }

    body:has(.checkout-layout) .coupon-input-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }

    body:has(.checkout-layout) .coupon-input-wrapper input {
        min-width: 0 !important;
    }

    body:has(.checkout-layout) .coupon-input-wrapper button {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body:has(.checkout-layout) .sticky-action-bar {
        padding: 10px 0 !important;
    }

    body:has(.checkout-layout) .sticky-action-container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) !important;
        gap: 10px !important;
        padding: 0 12px !important;
    }

    body:has(.checkout-layout) .sticky-action-container .secure-badge {
        display: none !important;
    }

    body:has(.checkout-layout) .btn-back-cart,
    body:has(.checkout-layout) .btn-proceed {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 12px 8px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }

    /* Order success invoice */
    body:has(.success-card) {
        overflow-x: hidden !important;
    }

    body:has(.success-card) .success-card {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        padding: 22px 14px !important;
        border-radius: 16px !important;
    }

    body:has(.success-card) .success-title {
        font-size: clamp(2rem, 10vw, 2.6rem) !important;
        line-height: 1.05 !important;
    }

    body:has(.success-card) .success-subtitle {
        font-size: 0.92rem !important;
        line-height: 1.45 !important;
    }

    body:has(.success-card) .invoice-box {
        padding: 12px !important;
        margin-bottom: 1.5rem !important;
        overflow: hidden !important;
    }

    body:has(.success-card) .invoice-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    body:has(.success-card) .invoice-header img {
        height: 86px !important;
        width: auto !important;
        max-width: 100% !important;
        object-position: left center !important;
    }

    body:has(.success-card) .invoice-header > div:last-child {
        text-align: left !important;
    }

    body:has(.success-card) .invoice-header h2 {
        font-size: 1.75rem !important;
    }

    body:has(.success-card) .invoice-box > .invoice-meta {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 1.2rem !important;
        padding: 12px !important;
    }

    body:has(.success-card) .address-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 1.2rem !important;
        padding-bottom: 1.2rem !important;
    }

    body:has(.success-card) .invoice-item-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
    }

    body:has(.success-card) .invoice-item-row > div:first-child {
        min-width: 0 !important;
    }

    body:has(.success-card) .invoice-item-row img {
        width: 48px !important;
        height: 48px !important;
    }

    body:has(.success-card) .totals-wrapper {
        width: 100% !important;
        float: none !important;
    }

    body:has(.success-card) .total-row.grand-total {
        gap: 12px !important;
        font-size: 1.05rem !important;
    }

    body:has(.success-card) .total-row.grand-total span:last-child {
        font-size: 1.2rem !important;
    }

    body:has(.success-card) .btn-group-success {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    body:has(.success-card) .btn-success-action,
    body:has(.success-card) .btn-secondary-action {
        min-width: 0 !important;
        justify-content: center !important;
        padding: 12px 8px !important;
        font-size: 0.78rem !important;
        text-align: center !important;
    }

    /* My orders */
    body:has(#orders-list-container) .order-card-item {
        display: block !important;
        padding: 16px !important;
        overflow: hidden !important;
    }

    body:has(#orders-list-container) .order-card-item > div:first-child {
        width: 100% !important;
        padding: 0 0 16px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #EDE5D8 !important;
    }

    body:has(#orders-list-container) .order-card-item > div:nth-child(2) {
        width: 100% !important;
        padding: 16px 0 0 !important;
    }

    body:has(#orders-list-container) .order-card-item > div:nth-child(2) > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    body:has(#orders-list-container) .order-card-item > div:nth-child(2) > div:first-child > div:last-child {
        text-align: left !important;
        padding-top: 0 !important;
    }

    body:has(#orders-list-container) .order-card-item > div:nth-child(2) > div[style*="border-top:1px solid #EDE5D8"] > div[style*="display:flex"] {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto auto !important;
        gap: 8px !important;
        align-items: center !important;
    }

    body:has(#orders-list-container) .order-card-item > div:nth-child(2) > div[style*="border-top:1px solid #EDE5D8"] > div[style*="display:flex"] img {
        width: 44px !important;
        height: 44px !important;
    }

    body:has(#orders-list-container) .order-card-item > div:nth-child(2) > div:last-child {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    body:has(#orders-list-container) .order-card-item > div:nth-child(2) > div:last-child > a,
    body:has(#orders-list-container) .order-card-item > div:nth-child(2) > div:last-child > button {
        width: 100% !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    body:has(#orders-list-container) .order-card-item > div:nth-child(2) > div:last-child > div:first-child {
        margin-right: 0 !important;
    }

    body:has(#orders-list-container) .order-card-item > div:nth-child(2) > div:last-child > div:first-child + a,
    body:has(#orders-list-container) .order-card-item > div:nth-child(2) > div:last-child > div:first-child ~ a,
    body:has(#orders-list-container) .order-card-item > div:nth-child(2) > div:last-child > div:first-child ~ button {
        min-height: 42px !important;
    }
}
/* Keep the active-order tracker clear of mobile page actions. */
@media (max-width: 600px) {
    body:has(.checkout-layout) .aob-mobile,
    body:has(.table-cart) .aob-mobile,
    body:has(#menuContainer) .aob-mobile {
        bottom: 74px !important;
    }

    body:has(.checkout-layout) .sticky-action-bar {
        z-index: 8800 !important;
    }

    body:has(.table-cart) #floatingCartBox {
        z-index: 8700 !important;
    }

    body:has(#orders-list-container) main {
        padding-bottom: 88px !important;
    }
}
/* Active order bar stays at the very bottom; page actions sit above it. */
@media (max-width: 600px) {
    body:has(.checkout-layout) .aob-mobile,
    body:has(.table-cart) .aob-mobile,
    body:has(#menuContainer) .aob-mobile {
        bottom: 0 !important;
    }

    body:has(.checkout-layout) .sticky-action-bar {
        bottom: 74px !important;
    }

    body:has(.table-cart) #floatingCartBox,
    body:has(#menuContainer) #floatingCartBox {
        bottom: 74px !important;
    }
}
@media (max-width: 600px) {
    body:has(.checkout-layout) .scroll-to-top-btn {
        bottom: 158px !important;
        right: 16px !important;
        z-index: 9900 !important;
    }
}
@media (max-width: 600px) {
    body:has(.checkout-layout) .sticky-action-bar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 74px !important;
        width: 100% !important;
        z-index: 8800 !important;
    }

    body:has(.checkout-layout) .scroll-to-top-btn {
        display: none !important;
    }
}
@media (max-width: 600px) {
    body:has(.checkout-layout) form#orderForm > .sticky-action-bar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 74px !important;
        width: 100% !important;
        transform: none !important;
        margin: 0 !important;
    }
}
@media (max-width: 600px) {
    body:has(.checkout-layout) form#orderForm > .sticky-action-bar {
        bottom: 62px !important;
    }
}
/* Remove the last visible strip between checkout actions and the active-order bar. */
@media (max-width: 600px) {
    body:has(.checkout-layout) form#orderForm > .sticky-action-bar {
        height: 62px !important;
        box-sizing: border-box !important;
        padding: 4px 0 !important;
        background: #0b1110 !important;
        overflow: hidden !important;
        bottom: 62px !important;
    }

    body:has(.checkout-layout) form#orderForm > .sticky-action-bar .sticky-action-container {
        height: 54px !important;
        min-height: 0 !important;
        padding: 0 12px !important;
        align-items: center !important;
    }

    body:has(.checkout-layout) form#orderForm > .sticky-action-bar .btn-back-cart,
    body:has(.checkout-layout) form#orderForm > .sticky-action-bar .btn-proceed {
        height: 54px !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}
/* Keep the desktop active-order pill above checkout actions without covering Place Order. */
@media (min-width: 601px) {
    body:has(.checkout-layout) .aob-pill {
        bottom: 100px !important;
        right: 24px !important;
    }
}