/* Responsive Styles - Media Queries and Breakpoint Optimizations */

/* Comprehensive Mobile Spacing Improvements */
@media (max-width: 767px) {

    /* === GLOBAL MOBILE IMPROVEMENTS === */

    /* Improve touch targets for better mobile interaction */
    button,
    a,
    input,
    textarea,
    select {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Better mobile typography */
    html {
        font-size: 14px !important;
    }

    body {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }

    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 18px !important;
    }

    h3 {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    h4 {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }

    p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
    }

    /* Improve mobile spacing consistency */
    .section {
        padding: 40px 0 !important;
    }

    /* Better mobile focus states */
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid var(--accent-primary) !important;
        outline-offset: 2px !important;
    }

    /* Improve mobile scrolling - Removed universal selector that causes performance issues */

    /* Better mobile image handling */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* === HEADER & NAVIGATION === */
    .floating-header {
        left: 12px !important;
        right: 12px !important;
        padding: 12px 15px !important;
    }

    .header-content {
        padding: 8px 15px !important;
    }

    .mobile-nav {
        padding: 20px 0 !important;
        gap: 8px !important;
    }

    .nav-item {
        padding: 12px 0 !important;
        font-size: 1rem !important;
    }

    .call-btn {
        margin-top: 15px !important;
        padding: 12px 20px !important;
    }

    /* === HERO SECTION - MOBILE OPTIMIZED === */
    .hero-section {
        padding: 120px 20px 60px !important;
        min-height: 85vh !important;
        /* Preserve original beautiful gradient background */
        background: linear-gradient(135deg, var(--warm-white) 0%, rgba(0, 84, 164, 0.25) 25%, rgba(0, 56, 118, 0.35) 50%, rgba(197, 165, 114, 0.15) 75%, var(--warm-white) 100%) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .hero-main {
        gap: 30px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-text-content {
        gap: 22px !important;
        text-align: center !important;
        order: 2 !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    .hero-image-content {
        order: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
    }

    .hero-branding {
        margin-bottom: 18px !important;
        text-align: center !important;
    }

    .primary-text {
        font-size: clamp(1.25rem, 4.5vw, 1.6rem) !important;
        line-height: 1.35 !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    .hero-logos {
        justify-content: center !important;
    }

    .hero-tagline {
        align-items: center !important;
    }

    .hero-title {
        font-size: clamp(2.1rem, 6vw, 2.8rem) !important;
        margin-bottom: 18px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        font-weight: 700 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .hero-subtitle {
        font-size: clamp(1.05rem, 3vw, 1.2rem) !important;
        margin-bottom: 28px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        font-weight: 400 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .hero-actions {
        gap: 16px !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        margin-bottom: 30px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .hero-btn {
        width: 100% !important;
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
        justify-content: center !important;
        margin: 0 !important;
        border-radius: 12px !important;
        /* Ensure proper touch target size */
    }

    .hero-btn .btn-icon {
        min-width: 24px !important;
        min-height: 24px !important;
        font-size: 1.2rem !important;
    }

    .promo-card-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        /* Removed max-width constraint to allow full size */
        margin: 0 auto !important;
        /* Removed aspect-ratio constraint to allow full original size display */
    }

    .promo-card-image {
        width: 100% !important;
        height: auto !important;
        /* Changed to auto to preserve original aspect ratio */
        object-fit: contain !important;
        /* Changed to contain to show full image without cropping */
        border: 6px solid var(--primary-green) !important;
        /* Ensure green border is visible on mobile */
    }

    /* Prevent mobile touch button behavior on promo card */
    .promo-card-wrapper:active,
    .promo-card-image:active {
        transform: none !important;
        scale: none !important;
        transition: none !important;
    }

    /* === SECTION SPACING CONSISTENCY === */
    .menu,
    .about,
    .reviews,
    .gallery,
    .contact {
        padding: 60px 20px !important;
    }

    /* === MENU SECTIONS === */
    .menu-header {
        margin-bottom: 35px !important;
    }

    .section-badge {
        margin-bottom: 20px !important;
        padding: 8px 18px !important;
        font-size: 0.85rem !important;
    }

    .menu-title,
    .about-title,
    .gallery-title,
    .contact-title {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
    }

    .reviews-title {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .menu-subtitle,
    .reviews-subtitle,
    .gallery-subtitle {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
        line-height: 1.5 !important;
    }

    .menu-container {
        gap: 25px !important;
        padding: 0 5px !important;
    }

    .menu-card {
        padding: 25px 20px !important;
        box-shadow:
            0 10px 25px rgba(45, 80, 22, 0.15),
            0 4px 12px rgba(45, 80, 22, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
        border: 2px solid rgba(45, 80, 22, 0.15) !important;
        margin-bottom: 20px !important;
        border-radius: 16px !important;
    }

    .menu-card:last-child {
        margin-bottom: 0 !important;
    }

    /* Hide images in Fresh Daily and Boar's Head cards on mobile */
    .menu-card.image-card .card-image-wrapper {
        display: none !important;
    }

    /* Show mobile icons for image cards */
    .menu-card.image-card .mobile-card-icon {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 10px !important;
    }

    .menu-card.image-card .icon-wrapper {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 80px !important;
        height: 80px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.9) 0%,
                rgba(248, 250, 252, 0.8) 100%) !important;
        box-shadow:
            0 8px 24px rgba(45, 80, 22, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            inset 0 -1px 0 rgba(45, 80, 22, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden !important;
    }

    .menu-card.image-card .icon-wrapper::before {
        content: '' !important;
        position: absolute !important;
        top: -50% !important;
        left: -50% !important;
        width: 200% !important;
        height: 200% !important;
        background: linear-gradient(45deg,
                transparent 30%,
                rgba(255, 255, 255, 0.3) 50%,
                transparent 70%) !important;
        transform: rotate(45deg) translateX(-100%) !important;
        transition: transform 0.6s ease !important;
    }

    /* === DISABLE CARD ANIMATIONS ON MOBILE === */
    /* Remove all animations, transitions, and transforms for card elements */

    /* Menu Cards - Disable all animations */
    .menu-card,
    .menu-card:hover,
    .menu-card.touch-active,
    .menu-card:nth-child(1),
    .menu-card:nth-child(2),
    .menu-card:nth-child(3),
    .menu-card:nth-child(4),
    .menu-card:nth-child(5),
    .menu-card:nth-child(6),
    .menu-card:nth-child(7),
    .menu-card:nth-child(8),
    .menu-card:nth-child(9) {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Featured and Special Cards */
    .featured-card,
    .featured-card:hover,
    .special-card,
    .special-card:hover {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Story Cards */
    .story-card,
    .story-card:hover,
    .story-card::before,
    .story-card:hover::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Contact Cards */
    .contact-card,
    .contact-card:hover,
    .location-card:hover,
    .phone-card:hover,
    .social-card:hover,
    .hours-card:hover {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        box-shadow: var(--shadow-soft) !important;
    }

    /* Review Cards */
    .review-card,
    .review-card:hover {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    /* Map Info Cards */
    .map-info-card,
    .map-info-card:hover,
    .map-info-card:nth-child(1):hover,
    .map-info-card:nth-child(2):hover,
    .map-info-card:nth-child(3):hover {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        box-shadow: var(--shadow-light) !important;
    }

    /* Price Options */
    .price-option,
    .price-option:hover,
    .price-option::before,
    .price-option:hover::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        box-shadow: var(--shadow-soft) !important;
    }

    /* Card Images */
    .card-image,
    .menu-card.image-card:hover .card-image {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    /* Card Icons and Elements */
    .card-icon,
    .story-icon,
    .contact-icon,
    .menu-card.image-card .icon-wrapper,
    .menu-card.image-card:hover .icon-wrapper,
    .menu-card.image-card .icon-wrapper::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    /* Card Headers and Decorative Elements */
    .menu-card::after,
    .menu-card:hover::after,
    .card-header {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    /* Disable keyframe animations for card-related elements */
    .story-icon,
    .pulse-element,
    .gallery-placeholder-content,
    .loading-icon,
    .map-pin,
    .seasonal-icon,
    .seasonal-badge,
    .winter-corner,
    .falling-snow .snowflake {
        animation: none !important;
    }

    /* Gallery Items - Disable scroll animations */
    .gallery-item,
    .gallery-item.animate-in {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Extras Section - Disable animations */
    .dressings li,
    .addon-item,
    .dressings li:hover,
    .addon-item:hover {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Ensure all card content is visible immediately */
    .menu-card>*,
    .featured-card>*,
    .story-card>*,
    .contact-card>*,
    .review-card>*,
    .map-info-card>* {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .menu-card.image-card:hover .icon-wrapper {
        transform: translateY(-3px) scale(1.05) !important;
        box-shadow:
            0 12px 32px rgba(45, 80, 22, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            inset 0 -1px 0 rgba(45, 80, 22, 0.1) !important;
    }

    .menu-card.image-card:hover .icon-wrapper::before {
        transform: rotate(45deg) translateX(100%) !important;
    }

    .menu-card.image-card .icon-emoji {
        font-size: 2.5rem !important;
        line-height: 1 !important;
        z-index: 2 !important;
        position: relative !important;
    }

    /* Hide badges inside icon wrapper */
    .menu-card.image-card .icon-wrapper .icon-badge {
        display: none !important;
    }

    /* Create separate badge element after mobile icon */
    .menu-card.image-card .mobile-card-icon::after {
        content: attr(data-badge) !important;
        display: inline-block !important;
        background: linear-gradient(135deg, var(--accent-green) 0%, #4a7c23 100%) !important;
        color: white !important;
        padding: 6px 16px !important;
        border-radius: 20px !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        white-space: nowrap !important;
        box-shadow:
            0 4px 12px rgba(45, 80, 22, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        z-index: 3 !important;
        backdrop-filter: blur(10px) !important;
        margin-top: 15px !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    /* Set badge text content for each card */
    .menu-card.image-card:nth-child(8) .mobile-card-icon::after {
        content: "FRESH" !important;
    }

    .menu-card.image-card:nth-child(9) .mobile-card-icon::after {
        content: "QUALITY" !important;
    }

    /* Special styling for fresh icon */
    .menu-card.image-card .fresh-icon {
        background: linear-gradient(135deg,
                rgba(240, 253, 244, 0.9) 0%,
                rgba(248, 253, 248, 0.95) 100%) !important;
        border: 1px solid rgba(74, 222, 128, 0.3) !important;
    }

    /* Special styling for quality icon */
    .menu-card.image-card .quality-icon {
        background: linear-gradient(135deg,
                rgba(254, 242, 242, 0.9) 0%,
                rgba(255, 250, 250, 0.95) 100%) !important;
    }

    /* Convenience header image responsive styles */
    .convenience-header-image {
        margin: 15px 0 25px 0 !important;
    }

    .convenience-image {
        border-radius: 20px !important;
        border-width: 3px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
        max-width: 95% !important;
    }

    .convenience-image:hover {
        transform: none !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    }

    .dressing-image {
        border-radius: 20px !important;
        border-width: 3px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
        max-width: 100% !important;
    }

    .dressing-image:hover {
        transform: none !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    }

    .soup-image {
        border-radius: 20px !important;
        border-width: 3px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
        max-width: 100% !important;
    }

    .soup-image:hover {
        transform: none !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    }

    .card-header {
        border: 1px solid rgba(239, 68, 68, 0.3) !important;
    }

    .card-header {
        margin-bottom: 15px !important;
    }

    .card-title {
        font-size: 1.3rem !important;
        margin-bottom: 12px !important;
    }

    .card-description {
        font-size: 0.95rem !important;
        margin-bottom: 15px !important;
        line-height: 1.5 !important;
    }

    .price-row {
        margin-top: auto !important;
        gap: 15px !important;
    }

    /* === ABOUT SECTION === */
    .about-container {
        padding: 0 !important;
    }

    .story-cards {
        gap: 25px !important;
        margin-bottom: 40px !important;
        padding: 0 5px !important;
    }

    .story-card {
        padding: 30px 25px !important;
        box-shadow:
            0 8px 20px rgba(45, 80, 22, 0.12),
            0 3px 8px rgba(45, 80, 22, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        border: 2px solid rgba(45, 80, 22, 0.12) !important;
        margin-bottom: 20px !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(248, 253, 248, 0.98) 100%) !important;
    }

    .story-card:last-child {
        margin-bottom: 0 !important;
    }

    .story-card h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
    }

    .story-card p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .community-love {
        padding: 30px 25px !important;
    }

    .community-love h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
    }

    .community-love p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* === REVIEWS SECTION === */
    .reviews-container {
        padding: 0 !important;
    }

    .reviews-header {
        margin-bottom: 40px !important;
    }

    /* === GALLERY SECTION === */
    .gallery-container {
        padding: 0 !important;
    }

    .gallery-grid {
        gap: 12px !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gallery-item {
        border-radius: 10px !important;
        overflow: hidden !important;
        aspect-ratio: 1 !important;
    }

    .gallery-item img {
        border-radius: 10px !important;
    }

    .gallery-placeholder {
        border-radius: 10px !important;
        aspect-ratio: 1 !important;
    }

    .gallery-placeholder-content {
        padding: 15px !important;
    }

    .placeholder-star {
        font-size: 2rem !important;
        margin-bottom: 8px !important;
    }

    .placeholder-hollywood {
        font-size: 1rem !important;
        margin-bottom: 2px !important;
    }

    .placeholder-snack {
        font-size: 0.8rem !important;
    }

    .placeholder-tagline {
        font-size: 0.7rem !important;
    }

    /* === CONTACT SECTION === */
    .contact-container {
        padding: 0 !important;
    }

    .contact-header {
        margin-bottom: 30px !important;
    }

    .contact-grid {
        gap: 0 !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 10px !important;
    }

    .contact-card {
        padding: 25px 20px !important;
        border-radius: 16px !important;
        box-shadow:
            0 12px 30px rgba(45, 80, 22, 0.15),
            0 4px 15px rgba(45, 80, 22, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
        border: 3px solid rgba(45, 80, 22, 0.2) !important;
        margin-bottom: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 220px !important;
        background: var(--warm-white) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: visible !important;
    }

    .contact-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, var(--accent-green), var(--light-green)) !important;
        opacity: 0.6 !important;
    }

    .contact-card:last-child {
        margin-bottom: 0 !important;
    }

    /* Restore individual card backgrounds with better mobile styling */
    .location-card {
        background: linear-gradient(135deg, #fff5f5 0%, #fffafa 100%) !important;
        border-color: rgba(239, 68, 68, 0.25) !important;
        box-shadow:
            0 12px 30px rgba(239, 68, 68, 0.1),
            0 4px 15px rgba(239, 68, 68, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    }

    .phone-card {
        background: linear-gradient(135deg, #f0fff4 0%, #fafffa 100%) !important;
        border-color: rgba(34, 197, 94, 0.25) !important;
        box-shadow:
            0 12px 30px rgba(34, 197, 94, 0.1),
            0 4px 15px rgba(34, 197, 94, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    }

    .social-card {
        background: linear-gradient(135deg, #eff6ff 0%, #f8faff 100%) !important;
        border-color: rgba(59, 130, 246, 0.25) !important;
        box-shadow:
            0 12px 30px rgba(59, 130, 246, 0.1),
            0 4px 15px rgba(59, 130, 246, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    }

    .hours-card {
        background: linear-gradient(135deg, #fffbf0 0%, #fffefa 100%) !important;
        border-color: rgba(245, 158, 11, 0.25) !important;
        box-shadow:
            0 12px 30px rgba(245, 158, 11, 0.1),
            0 4px 15px rgba(245, 158, 11, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    }

    .contact-icon {
        margin-bottom: 12px !important;
        font-size: 1.8rem !important;
        text-align: center !important;
        padding: 15px 0 8px 0 !important;
    }

    .contact-card h3 {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        padding: 0 15px !important;
        color: var(--text-primary) !important;
    }

    .card-content {
        margin-bottom: auto !important;
        padding: 0 15px !important;
        text-align: center !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .card-content p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        color: var(--text-secondary) !important;
    }

    .address {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        color: var(--text-primary) !important;
        margin-bottom: 10px !important;
    }

    .phone-number {
        margin-bottom: 6px !important;
    }

    .phone-number a {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        color: var(--accent-primary) !important;
        text-decoration: none !important;
        display: block !important;
    }

    .call-ahead {
        font-size: 0.8rem !important;
        color: var(--text-secondary) !important;
        font-style: italic !important;
    }

    .social-description {
        font-size: 0.85rem !important;
        color: var(--text-secondary) !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
    }

    .contact-card-actions {
        padding: 15px !important;
        background: rgba(0, 0, 0, 0.02) !important;
        margin-top: auto !important;
    }

    .directions-btn,
    .call-now-btn,
    .facebook-btn {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        transition: all 0.3s ease !important;
        border: none !important;
        cursor: pointer !important;
        min-height: 44px !important;
    }

    .directions-btn {
        background: var(--accent-primary) !important;
        color: white !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        min-width: fit-content !important;
        flex-shrink: 0 !important;
    }

    .directions-btn:hover {
        background: var(--accent-dark, #0056b3) !important;
        transform: translateY(-1px) !important;
    }

    /* Ensure directions button text and icon are visible on mobile */
    .directions-btn span {
        display: inline !important;
        white-space: nowrap !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        color: white !important;
        text-shadow: none !important;
        font-weight: 600 !important;
        font-family: 'Inter', sans-serif !important;
        position: static !important;
        z-index: auto !important;
        transform: none !important;
        clip: auto !important;
        clip-path: none !important;
        -webkit-text-fill-color: white !important;
    }

    .directions-btn .btn-icon {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1rem !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        z-index: auto !important;
        transform: none !important;
    }

    /* Force button to show text on mobile browsers */
    .directions-btn {
        -webkit-text-fill-color: white !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
        font-display: swap !important;
    }

    /* Additional mobile-specific fixes for tap states */
    .directions-btn:active,
    .directions-btn:focus,
    .directions-btn:hover {
        -webkit-text-fill-color: white !important;
        color: white !important;
    }

    .directions-btn:active span,
    .directions-btn:focus span,
    .directions-btn:hover span {
        -webkit-text-fill-color: white !important;
        color: white !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ultra-aggressive mobile fix for directions button */
    .location-card .directions-btn {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 140px !important;
        min-height: 44px !important;
        padding: 12px 16px !important;
        background: #0084ff !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-top: 15px !important;
        position: relative !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1 !important;
        transform: none !important;
        clip: auto !important;
        clip-path: none !important;
        white-space: nowrap !important;
        text-align: center !important;
        line-height: 1.2 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    .location-card .directions-btn span {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
        text-align: center !important;
        -webkit-text-fill-color: white !important;
        text-shadow: none !important;
        position: static !important;
        z-index: 2 !important;
        transform: none !important;
        order: 1 !important;
        margin-right: 6px !important;
    }

    .location-card .directions-btn .btn-icon {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 16px !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        z-index: 2 !important;
        transform: none !important;
        order: 2 !important;
        flex-shrink: 0 !important;
    }

    /* Force text display in all states for mobile browsers */
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        .location-card .directions-btn span {
            -webkit-text-fill-color: white !important;
            color: white !important;
        }
    }

    /* Override any potential JavaScript or dynamic styles */
    .location-card .directions-btn[style],
    .location-card .directions-btn span[style] {
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
        display: inline !important;
        color: white !important;
    }

    .call-now-btn {
        background: #28a745 !important;
        color: white !important;
    }

    .call-now-btn:hover {
        background: #218838 !important;
        transform: translateY(-1px) !important;
    }

    .social-buttons {
        display: flex !important;
        justify-content: center !important;
    }

    .facebook-btn {
        background: #1877f2 !important;
        color: white !important;
    }

    .facebook-btn:hover {
        background: #166fe5 !important;
        transform: translateY(-1px) !important;
    }

    /* Add subtle hover effects for contact cards on mobile */
    .contact-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    .location-card:hover,
    .phone-card:hover,
    .social-card:hover,
    .hours-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    .hours-content-wrapper {
        gap: 20px !important;
    }

    .hours-info {
        text-align: center !important;
        padding: 0 !important;
    }

    /* === SEASONAL HOURS CARD === */
    .seasonal-hours {
        position: relative !important;
        padding: 30px 20px !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
        min-height: auto !important;
        background: linear-gradient(135deg, #f0f8ff 0%, #f0f9ff 100%) !important;
        border-top: 4px solid #3b82f6 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border: none !important;
    }

    .seasonal-decorations {
        display: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    /* Show seasonal decorations on desktop */
    @media (min-width: 1024px) {
        .seasonal-decorations {
            display: block !important;
        }

        .storefront-image {
            max-width: 700px;
            width: 100%;
        }
    }

    .hours-content-wrapper {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    .hours-info {
        text-align: center !important;
        padding: 0 !important;
        flex: 1 !important;
    }

    .hours-storefront {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .storefront-container {
        text-align: center !important;
        max-width: 100% !important;
    }

    .storefront-image {
        width: 100%;
        max-width: 700px;
        height: auto;
        border-radius: 16px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }

    .storefront-address {
        margin-top: 15px !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        color: var(--text-secondary) !important;
    }

    .schedule-row {
        padding: 16px 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .schedule-row:last-child {
        border-bottom: none !important;
    }

    .days {
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        font-size: 1.1rem !important;
        letter-spacing: 0.2px !important;
    }

    .times {
        font-weight: 700 !important;
        color: var(--accent-green) !important;
        font-size: 1.15rem !important;
        background: rgba(74, 124, 35, 0.08) !important;
        padding: 8px 16px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(74, 124, 35, 0.15) !important;
        white-space: nowrap !important;
    }

    .schedule-list {
        background: rgba(255, 255, 255, 0.8) !important;
        border-radius: 12px !important;
        padding: 24px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid rgba(45, 80, 22, 0.12) !important;
    }

    .hours-schedule h4 {
        font-size: 1.25rem !important;
        margin-bottom: 24px !important;
        color: var(--primary-green) !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    .hours-note {
        margin-top: 20px !important;
        padding: 12px !important;
        background: rgba(0, 0, 0, 0.03) !important;
        border-radius: 8px !important;
        text-align: center !important;
    }

    .hours-note small {
        font-size: 0.85rem !important;
        color: #000000 !important;
        line-height: 1.4 !important;
    }

    .service-highlights {
        margin-top: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .service-item {
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        background: rgba(0, 0, 0, 0.02) !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: left !important;
    }

    .service-emoji {
        font-size: 1.1rem !important;
        flex-shrink: 0 !important;
    }

    /* === MAP SECTION === */
    .map-section {
        margin: 40px 0 !important;
        padding: 0 20px !important;
        clear: both !important;
    }

    .map-header {
        margin-bottom: 30px !important;
        text-align: center !important;
        padding: 0 10px !important;
    }

    .map-container {
        border-radius: 16px !important;
        margin-bottom: 30px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
        border: 2px solid rgba(45, 80, 22, 0.1) !important;
    }

    .map-container iframe {
        height: 320px !important;
        border: none !important;
    }

    .map-info-cards {
        gap: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 auto !important;
        max-width: 400px !important;
    }

    .map-info-card {
        padding: 25px 20px !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg, var(--warm-white) 0%, #f8fdf4 100%) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
        transition: all 0.3s ease !important;
        text-align: center !important;
        border: 2px solid rgba(45, 80, 22, 0.08) !important;
    }

    .map-info-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
    }

    .map-info-card h4 {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
    }

    .map-info-card p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        color: var(--text-secondary) !important;
        margin-bottom: 12px !important;
    }

    .map-info-card .info-icon {
        font-size: 2rem !important;
        margin-bottom: 12px !important;
    }

    .map-section h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    .map-intro {
        font-size: 1rem !important;
        margin-bottom: 25px !important;
        line-height: 1.6 !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .quick-call-btn {
        display: block !important;
        margin-top: 15px !important;
        padding: 14px 20px !important;
        background: var(--accent-green) !important;
        color: white !important;
        text-decoration: none !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        width: 100% !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 4px 15px rgba(45, 80, 22, 0.2) !important;
    }

    .quick-call-btn:hover {
        background: var(--accent-dark) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(45, 80, 22, 0.3) !important;
    }

    /* === VISIT CTA SECTION === */
    .visit-cta {
        padding: 40px 25px !important;
        border-radius: 20px !important;
        margin: 30px 20px !important;
        background: linear-gradient(135deg, var(--accent-green), var(--light-green)) !important;
        color: white !important;
        box-shadow: 0 10px 30px rgba(45, 80, 22, 0.25) !important;
    }

    .cta-badge {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
        letter-spacing: 0.8px !important;
        font-weight: 600 !important;
        opacity: 0.95 !important;
    }

    .cta-content {
        text-align: center !important;
        max-width: 500px !important;
        margin: 0 auto !important;
    }

    .visit-cta h3 {
        font-size: 1.6rem !important;
        margin-bottom: 15px !important;
        font-weight: 700 !important;
        color: white !important;
        line-height: 1.3 !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .cta-description {
        font-size: 1rem !important;
        margin-bottom: 25px !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        padding: 0 10px !important;
    }

    .cta-features {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 30px !important;
        align-items: center !important;
    }

    .feature-item {
        font-size: 0.95rem !important;
        color: rgba(255, 255, 255, 0.95) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 16px 20px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(8px) !important;
        min-height: 60px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: all 0.3s ease !important;
    }

    .feature-item span {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        flex: 1 !important;
        text-align: left !important;
    }

    .feature-item:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
        transform: translateY(-1px) !important;
    }

    .feature-icon {
        font-size: 1.2rem !important;
        min-width: 24px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    .cta-primary,
    .cta-secondary,
    .cta-tertiary {
        width: 100% !important;
        padding: 16px 20px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        border: none !important;
        cursor: pointer !important;
        min-height: 50px !important;
    }

    .cta-primary {
        background: white !important;
        color: var(--accent-green) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    }

    .cta-primary:hover {
        background: rgba(255, 255, 255, 0.95) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    }

    .cta-secondary {
        background: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        border: 2px solid rgba(255, 255, 255, 0.4) !important;
        backdrop-filter: blur(10px) !important;
    }

    .cta-secondary:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: translateY(-2px) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
    }

    .cta-tertiary {
        background: rgba(255, 255, 255, 0.15) !important;
        color: white !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    .cta-tertiary:hover {
        background: rgba(255, 255, 255, 0.25) !important;
        transform: translateY(-2px) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }

    .cta-icon {
        font-size: 1.1rem !important;
    }

    /* Hide visit CTA section on mobile */
    .visit-cta {
        display: none !important;
    }

    /* === FOOTER === */
    .site-footer {
        padding: 35px 20px 20px !important;
        background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-green) 100%) !important;
    }

    .footer-container {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .footer-bottom-content {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
        padding: 20px 0 !important;
    }

    .footer-links {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
    }

    .footer-link-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 400px !important;
    }

    .footer-commercial-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 0.85rem !important;
        padding: 8px 14px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        color: white !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        font-weight: 500 !important;
        height: auto !important;
        line-height: 1.2 !important;
        min-height: 36px !important;
        flex: none !important;
        min-width: auto !important;
    }

    .footer-commercial-btn .tv-icon {
        width: 14px !important;
        height: 14px !important;
        margin-bottom: -1px !important;
        flex-shrink: 0 !important;
    }

    .footer-links a:not(.footer-commercial-btn) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
        padding: 8px 14px !important;
        color: white !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        min-height: 36px !important;
        transition: all 0.3s ease !important;
        flex: 1 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .separator {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 0.9rem !important;
        padding: 0 6px !important;
        line-height: 1.2 !important;
        display: inline !important;
        align-self: center !important;
        flex-shrink: 0 !important;
    }

    .footer-commercial-btn:hover {
        background: rgba(255, 255, 255, 0.25) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }

    .footer-commercial-btn .tv-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    .copyright {
        font-size: 0.85rem !important;
        margin: 8px 0 0 0 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        font-weight: 400 !important;
        text-align: center !important;
    }

    .footer-links a {
        color: rgba(255, 255, 255, 0.9) !important;
        text-decoration: none !important;
        font-size: 0.85rem !important;
        padding: 8px 14px !important;
        border-radius: 0 !important;
        transition: all 0.3s ease !important;
        display: inline-flex !important;
        font-weight: 500 !important;
        border: none !important;
        background: transparent !important;
        flex: none !important;
        min-width: auto !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .footer-links a:hover {
        color: var(--light-green) !important;
        background: transparent !important;
        border: none !important;
        transform: none !important;
    }

    .footer-social-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-decoration: none !important;
        font-size: 0.85rem !important;
        padding: 8px 14px !important;
        border-radius: 0 !important;
        transition: all 0.3s ease !important;
        font-weight: 500 !important;
        border: none !important;
        background: transparent !important;
        flex: none !important;
        min-width: auto !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .footer-social-link:hover {
        color: #E4405F !important;
        background: transparent !important;
        border: none !important;
        transform: none !important;
    }

    .footer-social-link svg {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    /* Additional mobile fixes for bottom sections */
    .map-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-card:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 30px !important;
    }

    /* Ensure proper line-height and readability on smaller screens */
    .contact-grid .hours-card {
        margin-bottom: 0 !important;
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* Gallery modal responsive fix */
    .gallery-modal-container {
        max-width: 95vw !important;
        max-height: 90vh !important;
    }

    .gallery-modal-image {
        max-width: 100% !important;
        max-height: 75vh !important;
        object-fit: contain !important;
    }


    /* Mobile Section Headers and Badges Fix */
    .menu-header,
    .about-container,
    .reviews-container,
    .gallery-container,
    .contact-container,
    .map-header {
        text-align: center !important;
    }

    /* Adjust padding for side-by-side headers on mobile */
    .menu-header.dressing-header,
    .menu-header.soup-salad-header,
    .menu-header.convenience-header,
    .menu-header.sandwich-header {
        padding: 20px !important;
        border-radius: 20px !important;
        border: 3px solid var(--accent-green) !important;
        background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url('../Assets/Images/wallpaper/picnic.jpg') !important;
        background-repeat: repeat !important;
        background-position: center !important;
        background-size: 400px auto !important;
    }

    /* Mobile responsive dressing header */
    .dressing-header-content {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .dressing-header-text {
        text-align: center !important;
    }

    .dressing-header-image {
        order: -1 !important;
    }


    .dressing-header .menu-title {
        font-size: 2rem !important;
    }

    .dressing-header .menu-subtitle {
        max-width: 100% !important;
        margin: 0 auto 25px auto !important;
    }

    /* Mobile responsive soup & salad header */
    .soup-salad-header-content {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .soup-salad-header-text {
        text-align: center !important;
    }

    .soup-salad-header-image {
        order: -1 !important;
    }


    .soup-salad-header .menu-title {
        font-size: 2rem !important;
    }

    .soup-salad-header .menu-subtitle {
        max-width: 100% !important;
        margin: 0 auto 25px auto !important;
    }

    /* Mobile responsive convenience header */
    .convenience-header-content {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .convenience-header-text {
        text-align: center !important;
    }

    .convenience-header-image {
        order: -1 !important;
    }

    .convenience-header .menu-title {
        font-size: 2rem !important;
    }

    .convenience-header .menu-subtitle {
        max-width: 100% !important;
        margin: 0 auto 25px auto !important;
    }

    /* Mobile responsive sandwich header */
    .sandwich-header-content {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .sandwich-header-text {
        text-align: center !important;
    }

    .sandwich-header-image {
        order: -1 !important;
    }

    .sandwich-image {
        border-radius: 20px !important;
        border: 4px solid var(--accent-green) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }

    .sandwich-header .menu-title {
        font-size: 2rem !important;
    }

    .sandwich-header .menu-subtitle {
        max-width: 100% !important;
        margin: 0 auto 25px auto !important;
    }

    /* All section badges should be centered */
    .section-badge {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        width: fit-content !important;
    }

    /* Menu specific elements */
    .menu-header .section-badge,
    .menu-header .menu-title,
    .menu-header .menu-subtitle {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Other section elements */
    .about-container .section-badge,
    .reviews-container .section-badge,
    .gallery-container .section-badge,
    .contact-container .section-badge,
    .map-header .section-badge {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Mobile Hero Styles (Default) */
    .hero-main {
        flex-direction: column;
        gap: 50px;
        text-align: center;
        min-height: 60vh;
    }

    .hero-text-content {
        align-items: center;
        text-align: center;
    }

    .hero-text-content .hero-branding {
        text-align: center;
    }

    .hero-text-content .hero-logos {
        justify-content: center;
    }

    .hero-text-content .hero-tagline {
        align-items: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-image-content {
        flex: 1;
        max-width: 100%;
    }

}

/* Mobile Landscape and Small Tablet Optimizations */
@media (min-width: 480px) and (max-width: 767px) {
    .hero-content {
        max-width: 90%;
    }

    .floating-header {
        left: 20px;
        right: 20px;
    }

    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

}

/* Tablet Portrait - Optimized Hero Section */
@media (min-width: 768px) and (max-width: 1023px) {

    /* === HERO SECTION - TABLET OPTIMIZED === */
    .hero-section {
        padding: 100px 30px 60px !important;
        min-height: 70vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .hero-container {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .hero-main {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: clamp(40px, 8vw, 60px) !important;
        align-items: center !important;
        min-height: 60vh !important;
        max-width: 100% !important;
    }

    .hero-text-content {
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(22px, 4.5vw, 32px) !important;
        text-align: left !important;
        order: 1 !important;
        justify-content: center !important;
        align-items: flex-start !important;
        padding: 0 15px !important;
    }

    .hero-image-content {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .hero-branding {
        margin-bottom: clamp(16px, 3.5vw, 26px) !important;
        text-align: left !important;
    }

    .hero-logos {
        justify-content: flex-start !important;
    }

    .hero-tagline {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Fluid Typography for Tablet */
    .hero-title {
        font-size: clamp(1.85rem, 4.8vw, 2.6rem) !important;
        line-height: 1.25 !important;
        margin-bottom: clamp(16px, 3.2vw, 22px) !important;
        text-align: left !important;
        font-weight: 700 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .hero-subtitle {
        font-size: clamp(0.95rem, 2.5vw, 1.2rem) !important;
        line-height: 1.6 !important;
        margin-bottom: clamp(20px, 4vw, 28px) !important;
        text-align: left !important;
        max-width: 500px !important;
        font-weight: 400 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .primary-text {
        font-size: clamp(1.2rem, 3.2vw, 1.5rem) !important;
        line-height: 1.35 !important;
        text-align: left !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    .hero-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: clamp(12px, 2.5vw, 16px) !important;
        width: 100% !important;
        max-width: 450px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    /* Touch-Optimized Buttons for Tablet */
    .hero-btn {
        min-height: 48px !important;
        min-width: 140px !important;
        padding: clamp(12px, 2.8vw, 14px) clamp(18px, 4.5vw, 24px) !important;
        font-size: clamp(0.85rem, 2.2vw, 0.95rem) !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        text-decoration: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
        border: none !important;
        position: relative !important;
        overflow: hidden !important;
        flex: 1 !important;
        max-width: 220px !important;
    }

    .hero-btn .btn-icon {
        min-width: 20px !important;
        min-height: 20px !important;
        font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
        flex-shrink: 0 !important;
    }

    .hero-btn .btn-text {
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    /* Enhanced Touch Feedback */
    .hero-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }

    .hero-btn:active {
        transform: translateY(0) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }

    /* Focus States for Accessibility */
    .hero-btn:focus {
        outline: 2px solid var(--accent-primary) !important;
        outline-offset: 2px !important;
    }

    /* Optimized Image Container */
    .promo-card-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        /* Removed max-width constraint to allow full size */
        /* Removed aspect-ratio constraint to allow full original size display */
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
        /* Removed transition to prevent button-like animation behavior */
        position: relative !important;
    }

    .promo-card-wrapper:hover {
        /* Removed all transforms to prevent button-like behavior on click */
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
    }

    .promo-card-image {
        width: 100% !important;
        height: auto !important;
        /* Changed to auto to preserve original aspect ratio */
        object-fit: contain !important;
        /* Changed to contain to show full image without cropping */
        /* Removed transition to prevent button-like animation behavior */
    }

    /* Removed individual image hover transform to prevent scaling issues on click */

    /* Shine Effect Enhancement */
    .promo-shine-effect {
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.3) 50%,
                transparent 100%) !important;
        transition: left 0.6s ease !important;
        pointer-events: none !important;
    }

    .promo-card-wrapper:hover .promo-shine-effect {
        left: 100% !important;
    }

    /* === OTHER SECTIONS - TABLET OPTIMIZATIONS === */
    .menu-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 25px !important;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .contact-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* === NAVIGATION - TABLET === */
    /* Show desktop navigation on larger tablets */
    .desktop-nav {
        display: flex !important;
        gap: clamp(15px, 3vw, 20px) !important;
    }

    .desktop-nav-item {
        font-size: clamp(0.85rem, 2vw, 0.9rem) !important;
        padding: clamp(6px, 2vw, 12px) !important;
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        border-radius: 8px !important;
    }

    .desktop-nav-item:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: translateY(-1px) !important;
    }

    /* Hide mobile hamburger menu on tablets */
    .menu-toggle {
        display: none !important;
    }

    .header-content {
        padding: clamp(10px, 2vw, 14px) clamp(15px, 3vw, 20px) !important;
    }

    .floating-header {
        left: clamp(24px, 4vw, 32px) !important;
        right: clamp(24px, 4vw, 32px) !important;
        padding: clamp(10px, 2vw, 12px) clamp(20px, 4vw, 25px) !important;
    }

    /* === IMPROVED TOUCH TARGETS === */
    button,
    a,
    input,
    textarea,
    select {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* === ACCESSIBILITY ENHANCEMENTS === */
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* === PERFORMANCE OPTIMIZATIONS === */
    .hero-section * {
        will-change: auto !important;
    }

    .hero-btn,
    .promo-card-wrapper {
        will-change: transform !important;
    }

    /* === REDUCED MOTION SUPPORT === */
    @media (prefers-reduced-motion: reduce) {

        .hero-btn,
        .promo-card-wrapper,
        .promo-card-image,
        .promo-shine-effect {
            transition: none !important;
            animation: none !important;
        }
    }
}

/* Large Tablets (iPad Pro Portrait) - 1024px to 1199px */
@media (min-width: 1024px) and (max-width: 1199px) {

    /* Override desktop hero styles for large tablets */
    .hero-section {
        padding: 110px 40px 70px !important;
        min-height: 65vh !important;
    }

    .hero-main {
        gap: 50px !important;
    }

    .hero-text-content {
        max-width: 500px !important;
        padding: 0 15px !important;
    }

    .hero-title {
        font-size: 2.2rem !important;
        line-height: 1.25 !important;
        margin-bottom: 18px !important;
    }

    .hero-subtitle {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 24px !important;
        max-width: 480px !important;
    }

    .primary-text {
        font-size: 1.4rem !important;
        line-height: 1.35 !important;
    }

    .hero-actions {
        flex-direction: row !important;
        gap: 14px !important;
        flex-wrap: nowrap !important;
        max-width: 100% !important;
    }

    .hero-btn {
        flex: 1 !important;
        min-width: 140px !important;
        max-width: 200px !important;
        padding: 13px 20px !important;
        font-size: 0.9rem !important;
    }

    .hero-image-content {
        flex: 0 0 48% !important;
    }
}

/* Desktop Base */
@media (min-width: 1024px) {

    /* Override mobile hero styles for desktop */
    .hero-main {
        flex-direction: row;
        gap: 70px;
        text-align: left;
        min-height: 50vh;
    }

    .hero-text-content {
        align-items: flex-start;
        text-align: left;
    }

    .hero-text-content .hero-branding {
        text-align: left;
    }

    .hero-text-content .hero-logos {
        justify-content: flex-start;
    }

    .hero-text-content .hero-tagline {
        align-items: flex-start;
    }

    .hero-actions {
        justify-content: flex-start;
    }

    .hero-title {
        font-size: 3.2rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1.3rem;
        line-height: 1.65;
        max-width: 550px;
    }

    .hero-image-content {
        flex: 0 0 45%;
    }

    .floating-header {
        left: 32px;
        right: 32px;
    }

    /* Show desktop navigation */
    .desktop-nav {
        display: flex;
    }

    /* Hide mobile hamburger menu */
    .menu-toggle {
        display: none;
    }


    /* Adjust header content layout for desktop */
    .header-content {
        padding: 15px 30px;
        gap: 40px;
    }

    .header-actions {
        gap: 15px;
    }

    .hero {
        padding: 140px 40px 80px;
    }

    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1200px;
        margin: 0 auto;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1000px;
        margin: 0 auto;
    }

    .about-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
        margin: 0 auto;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    .menu-grid {
        grid-template-columns: repeat(5, 1fr);
        max-width: 1400px;
    }

    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1200px;
        margin: 0 auto;
    }

    .hero-content {
        max-width: 800px;
    }
}

/* Ultra Wide Desktop */
@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .menu-grid {
        grid-template-columns: repeat(6, 1fr);
        max-width: 1600px;
    }

    .hero {
        padding: 160px 60px 100px;
    }
}

/* Ultra Wide Screens */
@media (min-width: 1800px) {
    .floating-header {
        left: 48px;
        right: 48px;
        max-width: 1600px;
        margin: 0 auto;
    }

    .menu-grid {
        grid-template-columns: repeat(7, 1fr);
        max-width: 1800px;
    }
}

/* Height Constraints for Mobile */
@media (max-height: 640px) and (max-width: 767px) {
    .hero {
        min-height: 90vh;
        padding: 80px 20px 30px;
    }

    .mobile-nav {
        max-height: calc(100vh - 100px);
    }
}

/* Very Short Mobile Screens */
@media (max-height: 480px) and (max-width: 767px) {
    .hero {
        min-height: 100vh;
        padding: 60px 15px 20px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1rem;
    }
}

/* Ultra Small Mobile Screens */
@media (max-width: 320px) {
    .floating-header {
        left: 8px;
        right: 8px;
        top: 10px;
    }

    .header-content {
        padding: 10px 15px;
    }

    .hero {
        padding: 80px 10px 30px;
    }

    .menu-grid,
    .gallery-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Landscape Mobile Orientation */
@media (max-width: 767px) and (orientation: landscape) and (max-height: 500px) {
    .hero {
        min-height: 100vh;
        padding: 60px 20px 20px;
    }

    .hero-content {
        padding: 0 20px;
    }

    .mobile-nav {
        max-height: calc(100vh - 80px);
        font-size: 0.9rem;
    }

    .nav-item {
        padding: 10px 15px;
    }
}

/* High DPI / Retina Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .logo-burst img,
    .star-bg img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print Styles */
@media print {

    .floating-header,
    .mobile-nav,
    .menu-toggle,
    .floating-action-btn {
        display: none !important;
    }

    .hero {
        min-height: auto;
        padding: 20px;
    }

    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
}

/* Convenience Image - Tablet and Desktop Responsive Styles */
@media (min-width: 768px) and (max-width: 1023px) {
    .convenience-header-image {
        margin: 18px 0 28px 0 !important;
    }

    .convenience-image {
        max-width: 90% !important;
        border-radius: 20px !important;
        border-width: 3px !important;
    }

    .dressing-image {
        max-width: 80% !important;
        border-radius: 20px !important;
        border-width: 3px !important;
    }

    .soup-image {
        max-width: 115% !important;
        border-radius: 20px !important;
        border-width: 3px !important;
    }
}

@media (min-width: 1024px) {
    .convenience-header-image {
        margin: 20px 0 30px 0;
    }

    .convenience-image {
        max-width: 650px !important;
        border-radius: 20px;
        border-width: 4px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .convenience-image:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    }

    .dressing-image {
        max-width: 800px !important;
        border-radius: 20px;
        border-width: 4px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .dressing-image:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    }

    .soup-image {
        width: auto !important;
        max-width: 600px !important;
        border-radius: 20px;
        border-width: 4px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .soup-image:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    }
}

/* Large Desktop - 1200px and up */
@media (min-width: 1200px) {
    .convenience-image {
        max-width: 750px !important;
    }

    .dressing-image {
        max-width: 850px !important;
    }

    .soup-image {
        max-width: 600px !important;
    }
}